iOS App Development with Swift Connect SwiftUI with UIKit
Transcript from the "Connect SwiftUI with UIKit" Lesson
>> If you have front masters there is a good chance that you have a web app, you have a website. And you can integrate a website or a web app easily with SwiftUI. So typically, on modern user interface you use a WebView, okay. WebView is kind of a control that renders a web inside.
[00:00:22] iOS includes a WebKit WebView that is the same engine as Safari, but it's not integrated with SwiftUI. It's UIKitonly, which it's a good opportunity before finishing the course to show you how to do that, because it's possible to integrate in the same page, SwiftUI and UIKit, okay? It's not a big problem, but it's something that we can solve.
[00:00:53] So, in this case, if you're following the course from the Companion website, we are in the seven one using Wk WebView. So actually what we need to do, to is create an a structure that complies with UI View representable, okay, so let's do that. I'm going to create a structure.
[00:01:17] I will call this web view. It's a UI View representable so it's going to represent a UIKit View in SwiftUI, okay? It's a UI View representable, is a protocol, but compared with other protocols that we used before, we are forced to add some methods, okay? So that's why it's complaining.
[00:01:40] We are forced to add some methods. The methods are not a big deal, are make UIBU, and update UIBU, okay? So I will just copy the signatures not the content. We will see the content quickly. So actually, here we need to return the UIKit class, okay. Again, we don't know UI kit, but I'm just mentioning that there is a framework that you need to import from WebKit.
[00:02:17] WebKit is the web rendering engine behind Safari. And actually what we need to create is the variable or a constant that will represent the web view. It's called WK web view, okay? So we create WK web view, and we return it. So actually, this is the UIKit view.
[00:02:44] Also UIKit the view in term, but it's a class because your kids is OOP based. Anyway, this is how then from here, you can insert in the body a web view, okay? So what's a web view? Something that I have just created. But instead of being a view, it's like a proxy, it's a proxy to UIKit, the other framework, okay?
[00:03:15] Makes sense? To update the UI View is going to execute it every time that the system thinks that you need to update the UI. In this case, we can use it as some kind of a load moment, okay? So if you see an example here, it's a time where we load a URL.
[00:03:35] And the URL, it's a URLRequest, so we need to create a URLRequest that receives a URL. And the URL can be created within a string file. So you can see it's really long, really great objects and object. This is not SwiftUI, you are getting a quick Snapshot of how UIKit looks like, okay.
[00:03:58] So we need to create a request. So one by one, a request that receives a URL. And also we need to create a URL that receives a string finally. So probably we will prefer this version. So once the URL I have created all ready created a very quick simple web app,=.
[00:04:22] Here's the URL. Anywhere up will work, okay, but I wanna show you something special here. If you wanna have a title well you can embed this into navigation view or anything,okay? Here it's complaining, let's see if you can understand what's going on because this is the first time we're dealing with this.
[00:04:47] Value of optional type URL, question mark must be unwrapped to a value of type URL. Let's look at the type here. It's optional. So this is weird because we haven't seen this before. This is not happening in SwiftUI. The URL constructor I can return nil. Why? Because maybe you're passing on a wrong URL on invalid URL.
[00:08:26] Just to show you what's going on here, View Page Source. There is an app.js file. There is a form validation, nothing really complicated. But I'm gonna show you this. This code actually, window.web key.message handlers.lert dot blah, blah blah blah. So, when you create the bridge,it's going to appear here in your child script, message handlers.
[00:08:57] And the alert name. It's actually the name that you're going to set from swift, and then you send a message to swift, okay. So to make it work quickly, we can take the example that we have, where. Go. This one, we need to create this base. It looks weird.
[00:09:26] So that's why I don't wanna spend too much time with this but in case you have this mean, okay, you have the code there, so you create a class there, that extends from NS object. It doesn't matter what that means, but if you want a quick idea, this is an objective C class.
[00:09:47] So you're extending from an objective C object. And you're implementing a protocol called WK from WebKit a script message handler that will handle a message. And in this case, I'm printing the console, the body of message Session, okay? And finally, what you need to do when you're creating the WebView is set up that object as an interface.