Connect SwiftUI with UIKit

[00:00:00]
>> 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:05:09]
So because I know its value I'm going to use the exceptional exclamation mark that is unwrapping the option and saying, now it's not there, no worries, I know it's not there, okay. So I can preview it or I can see it here in info if everything works we see a web ap, this is actually HTML, CSS and JavaScript.

[00:05:34]
Right now it's loaded on a web server, but it can also be an asset in tact with my app, okay? So that's pretty simple. What's even better is that you can bridge swift with JavaScript. So I just wanna show you quickly how that works. So you can execute JavaScript, from Swift.

[00:06:00]
And you can execute swift, from JavaScript. Be careful because you might have some crosses scripting problems, security issues, if you let JavaScript to run any code. Anyway, it's secure because you decide what JavaScript can execute. About any question on this, so you can load any web app any website, full screen or just in one view, it's up to you.

[00:06:28]
>> Is this how those cross platform apps? They're basically wrapping a Javascript app with something like this.
>> This is how hybrid frameworks such as PhoneGap Ionic work. Yeah, they're creating a fullscreen WebView on the loading the content inside,. And then they bridge they have plugins typically so they bridge JavaScript with native code and that's actually a plug in, how can you make that connection.

[00:07:02]
So in the code that you have here, you all ready have that connection, but I don't wanna make it so complicated. So for example, the simplest way that you have to execute code, For example, if I wanna create a function here that will execute JavaScript. Is to take the web view, but they don't have the web view here so I should create a local variable okay.

[00:07:29]
Or send receive the web as an argument. Meant Wk WebView. That's the class name. It's a class. So I can take the WebView and if you look execute, no, but we have evaluate JavaScript. We can pass here, like shell script code. And yeah, we need to create the string that is Bby the JavaScript.

[00:07:57]
But this is like opening the console in the browser and executing JavaScript. There are better ways to do that, but this is the simplest way, okay? And that's like the one direction. The other direction is even more tricky. Okay, I mean from JavaScript To execute code. And for that, let me show you the web app code.

[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.

[00:10:13]
So remember, we are creating a bridge from JavaScript, we can execute this code, and this is just this. It's not a big deal. So instead of creating the WebU like this, Without any arguments with the constructor, we need to pass a configuration object as an argument. And the configuration object will have a web interface dialog.Object with a name alert.

[00:10:56]
That's how from JavaScript, you have this message handler with the name alert. Is tricky, okay but just to give you a quick example on how you can create a React application and Angular application for one screen for the whole app and connect that with Swift UI. So you can take advantage of both worlds and create some kind of a hybrid.