Transcript
Hello friends. Let's learn to build mobile applications with Rubion Rails. So if you go to the Hot Fire do Dev website and scroll down to, uh, learn more about Turbo, go to the handbook, open the chapter six, go native on iOS and Android. You will see this term Turbo native. Basically, it is a tool that lets you wrap your Ribbon Rails web application into a native iOS or Android wrapper and serve it as a real application. So basically, termin native is two main libraries to native iOS and to native Android. You can see them in GitHub to Native iOS is written in Swift and to native Android is written in Kotlin. In this episode, they're going to focus on the iOS. So we have have this, uh, repository. It's basically a library to create the iOS applications that, uh, uh, can serve your web application. And you need to have a hot volume to have Tobo Drive enabled, uh, in your application to make it work in your Rails application. So how do we start with, uh, tur native? We have this repository and we have a demo application here. So you want to run this demo application, uh, locally and see how it works. Now, to make it vo you would first of all need to clone this hot file slash turbo iOS repository locally. This I have already done. I have it locally, and you would need to install X code. So this is, uh, a program to build the iOS applications. So now pause the video, install Xcode. Okay, now I assume you have already installed Xcode. Let's continue. So, um, I'm inside this Turbo iOS repository, and here I see this demo folder. I will, uh, go to the demo folder and I will type open and I'm going to open demo, do Xcode project. So Open is by default going to try to open something in Xcode, and, uh, we need to open the Xcode project file. I click okay. It is, uh, launch and Xcode. And uh, here we have this, uh, application. Here is the file structure. Uh, we have this demo file and we see the URL, uh, to the web application that is, is going to try to serve. Is this one? Uh, let's try opening this. URL. Okay, I've got an H before HTPS. Okay. So this just, uh, a web app that is optimized to be used, uh, with Termin native, and, uh, well, it works just as any regular web app, uh, on the web. But uh, on the Termin native, it'll have some special behaviors. So here, for example, you have, uh, a menu. You click the menu, it opens as a dialogue. Uh, you have the form, it's just a regular form that you can submit and, uh, redirect somewhere. But we're going to try to run this, uh, web app, this URL, um, inside this, uh, iOS terminated app. You see, we also have this Turbo iOS package installed. We have, uh, out of code written to uh, make, uh, this, uh, turbo iOS package, VE as an iOS app. So we have, uh, like this, I would say the main file, it has, uh, uh, turbo imported. So it is by os it has Strada imported. It is this one. So let's try running this application. I'm going to, uh, click on this strong button, or you can type command R. And it's going to try to run this application. It is opening an emulator, and you see the emulator here is set to iPhone 15 Pro, but you can try setting any other supported device. So anyway, it is launch in, uh, the application for the first time. It can take quite, uh, about launch here. It's going to appear, okay. And here the application is, uh, running. So basically we're just, uh, serving this URL, uh, inside our, uh, ative iOS application. We can try navigating, let's try some different behaviors. So advance to another page. And you see this, uh, navigation has been stacked. So I click once and twice to go back to the home screen. If I have the turbo visit replace, so that screen just gets replaced for the this one. So I would still need to click not advise, but once to get back to the home screen. Um, hidden an error. This looks more like a native error page. Uh, open a slow loading page. You see we have this, uh, native, uh, an indicator trying to load a webpage model. You see, it's like a popup. We can go up and down. We can click down to cancel or click submit to have a redirect. The page should be after the submission. We can try following an external link. And by default it is going to open the native browser, but we can figure it, uh, we can configure it so that it opens an in-app browser. That's actually quite easy. Uh, we can, uh, see how Strada works. This is actually interesting. So here we have a form and you see we don't have the submit button on the bottom here. For example, in the uh, web app, we have, uh, type in first name, last name, and a submit button on the bottom here. Using Strada, we hide the submit button in the bottom and instead display the submit button here on top. So this way the user has more of a feeling that he's using, uh, native application, but Not just just a web application, uh, in his, uh, browser. Then full, uh, modal example. So, uh, let me go back in the web app here in the menu, I click open and it opens, uh, just an HTML dialogue with a few different options. And here I click open menu, and you see it opens the native iOS, uh, menu element and I can submit it. Let's then have a look at the final Strada example, overflow plus menu. Here again, it opens just, uh, the dialogue, but, uh, here it would, you see it doesn't show the uh, button on the bottom. Instead it shows this three dots. Uh, on the top right you click and it opens, uh, the options. So this could be nice if you have like a record in the Urban Rails application, like you have a post, you would click it, you would be able to see the edit or delete the or cancel buttons. This looks neat. And this, uh, business strada can make your application feel more native. So you don't really need Strada to build, uh, native applications. You need terminate, but Strada is just a cherry on the top, termin native to, uh, add additional, uh, uh, behaviors to your application that would, uh, look different on, uh, the web and on mobile. So, okay, we've tried running this, uh, ative demo application. Let's try running, uh, a different URL with the same, uh, uh, ative, uh, app. We can try running super rails.com. So here I have, uh, super rails.com. It, uh, looks quite, uh, responsive. Let's try run this. Uh, URLI will just change it to super rails.com. I will, uh, run once again to replace everything. So each, it is through launch in the application. Okay. And here we basically have the application running. Now you see it is, uh, not really optimized. Uh, we have the content going, uh, above the nbo, so this could be improved. Then, uh, the navigation, you see it gets stacked, so that's interesting. Then the log in the socials buttons, uh, don't work outta the box. So there's quite some work that would need to be done, but basically you can try to serve, uh, any web URL with, uh, this, uh, uh, demo application. Okay, so we have, uh, had a look at the demo application. Now let's try, uh, serving the initial URL, uh, with a new, uh, termin native application. So let's try creating a TUR native application from uh, zero. And to do this, you would want to go to the Turbo iOS docs and have, have a quick start guide. So, uh, let's write a new turbo native application. I'm going to go to file. Yeah, let me actually stop this one. Yeah, it's not, I go to file and new, new project app. Uh, the name will be, uh, whatever, no, uh, super ails organization. identifi would be the reverse of your domain name. Uh, language Swift. Don't change anything else. Everything here is kind of by default and I will store it, uh, yeah in my iOS folder. So here I have a new application, a new iOS application. Let me try running this application and see what it looks like. You see, unlike the uh, demo application, there are just a couple of files and they are all more or less, uh, empty. So here I have this app running and actually it's just a blank sheet at the moment. So let's try installing a turbo native. So here we have this fixed out guide and I have this scene delegate file. I'm going to copy all this content and, uh, I'm going to replace all the content in the scene delegate with this new content. Save. And you see we have this no such module turbo. So we need to install Turbo iOS Library to do this, I click on the project and then here again, I click on the project package dependencies, add a new dependency. Now I already have it, uh, in recently used dependencies, but if you don't yet, then you need to uh, put in the whole URL. So, uh, here, search and package URL, you put in the URL, but if also going to use the main branch at package and, uh, it is, uh, downloaded and it's stolen turbo. Ensure that the target is set not to non, but to this project you have just created ADD package. Now we can go back to Syn delegate and uh, you see the error has disappeared. Now let's try running the project once, uh, again. And you see in the syn delegate by default in this, uh, uh, quick start guide, we have the URL set to this, uh, demo application that we're playing around. So let's see what, uh, the demo application, how it's going to render here. It has already relaunched with just this in delegate and Turbo installed. Let's try navigation. So navigation works well. Let's try, uh, uh, hidden an error. And you see it's just a blank screen. Because it hasn't been configured in our application, we would need to possibly configure it manually loading a webpage mod. Uh, you see it hasn't been loaded Mo. So this is the basic code you need to just render, uh, web application in the Termin native wrap. But auto behaviors are not configured, uh, yet. Again, Strada is not configured yet. It's just, uh, web navigation. So we would need to configure a lot of behaviors, uh, on our own. Uh, luckily there is a pull request, uh, that is going to help us a lot at the moment. Uh, if you go to the Turbo iOS, uh, repository and uh, go to the pull requests, you have this update upstream to Navigator branch by Joe Otti. So initially he created a Turbine Navigator package that could be installed, uh, as separate dependency in your application, but, uh, hopefully soon it's going to be merged into Turbo iOS itself. And, uh, creating to native applications is going to be easier. But for now, I think, uh, if you're building a TUR native application, uh, using this branch instead of uh, uh, the main branch is the best approach. So, uh, we're going to use this branch for our application. I'm going to go with the name of the branch and I'm going to go to the application, have the package dependencies. Instead of up to next major version, I'm going to, uh, say brunch. And I'm going to put in this name of the branch. I clicked enter. It should, uh, load now and I'm going to replace the code in Syn delegate. Uh, I'm going to replace this getting started code with the one from this upstream tool navigator. So, uh, have, have this quick start guide. I'm going to open it and, uh, I need just this, uh, code. So I replace all this code with this code. Again, we have the URL to the demo application. Let's relaunch the application. It's relaunching with this specific tool navigator branch, and with this getting started code and, uh, let's try some, uh, behavior. So logged at web page modally, uh, doesn't work yet. Uh, try hidden an HTP error. You see this, uh, works out of the box. Uh, slow loading. The webpage works out of the box Box. So some behaviors are going to be, uh, available outta the box that were not available previously. Now, uh, talking about loading the VA pages, modally talking about Strada, we're going to do it in the next episodes, but this is the basic way you would be setting up and your Terminate application. Uh, uh, today. I think this must be the more, less best approach. Uh, use the Turbo Navigator branch and use the Get Getting Started guide from the specific branch, and you have a good start application for building your own termin application. Thanks for watching and see you in the next one.
0