Transcript
Hello friends. So recently I've been recording a series of videos about how to build mobile applications with Ruby on Rails and Turbo Native, but it is now outdated five because just a couple of days ago, uh, AYA native has been released to replace Turbo Native. Now what's the whole point of this replacement? Well, basically then you wanted to start building the turbine native. You would need to go to the like Turbo iOS repository. Uh, you'll use this as the base of your application, and then you would need to install that Turbine navigator, uh, extension. You would possibly want to use this, uh, pull request that hasn't been merged in the, like a year into Turbo iOS. And then on top of this, you would want to install Strata. And the whole starting out approach was really not straightforward. And, uh, the idea of Native is to merge, uh, strata Turbo Navigator and turbo into one, uh, uh, starting application so that, uh, it has some conventions and you don't have to break a neck each time you try to start a new, um, turbo native application. So basically Hot File native is the combination of Turbo Native, turbo Navigator by Joe Melo and of Strata. So, um, in this episode we are going to have a look at the AYA native. We are going to start an application with it. So here we have this native, uh, iOS repository. I have just cloned it locally and inside we have this, uh, demo. So I will navigate to demo and inside we have a few different, uh, files. Now, demo Xco code project file is the one that we can open with the Xcode, the, uh, tool for basically developing, uh, iOS applications. So if you don't have Xcode installed, do it now. Assuming you have Xcode installed. Let's keep going. So I'm going to write open and I'm going to open Demo Xcode project. This is going to open, uh, Xcode editor. Here it is. And here is the demo application. Now let's have a quick look at this application we have. Uh, okay, we have, uh, it pointed to the remote URL to this URL. Let's open this thing in the browser. So this is more or less the same application that was used for the example of TUR native. Uh, and we are going to see how we can navigate this application on a mobile application. So we have couple of examples. So by default that point into the remote URL, but we can also point to local URL. Let's have a look at this Syn control. It's like the syn delegate and have, have, uh, the root TRL that, uh, uses the one from demo current that is remote. This one. Then, uh, we use path configuration. So path configuration is this, uh, js o file that defines some behaviors in our application. Uh, then we have, uh, some breach components previously Strat components already installed in this application. So form component, menu component and overflow menu component. Um, an example for authentication and uh, example for using, uh, native pages instead of our own pages. And yeah, here we here we basically define configure bridge, configure view controller, and here we, uh, use them. Okay. We also have this app gate file where we can add some, uh, settings for our application. So button display mode, minimal, and so on. We will go deeper into it later. Anyway, let's try running this application. I'm going to click on this run button and it is going to open a virtual iPhone, and it's going to run this application as a native app on this virtual iPhone. So, uh, here we can kind of see the progress of the installation on top. It can, uh, take a few seconds. And importantly, so we have this like demo application, but we also have the native iOS library set up on this project. So if you go to the, like project settings here, package dependencies. Oh yeah, well, we don't have it in package dependencies because it's in the same file system, but uh, yeah, this apple, this demo depends on the hot file native iOS library. Okay, it's launching. It can take a vial. Okay, wonderful. So the application is running. So basically we have an iOS wrap that just serves this, uh, remote URL. We can, uh, try and navigate, and you see I have this, uh, demo application running. I will click on it, I open the application, and we can, uh, play around with the navigation. So let's try opening a page in a model, you see it opens in a model. If we try to open this page, uh, in the browser, you see it as slash new. And, uh, our native application knows that we want to open slash new in a model. Why that? Because in this path configuration, we have set up all the slash new pages open up in a model, and we cannot pull to refresh. So like pull in the refresh. Okay, let's, uh, have a look at some navigation patterns. So navigate into another page. You see the navigation gets, uh, stacked so I can, uh, click back or I can swipe to the left and it'll, uh, navigate me back. Then uh, there are different types of navigation. So advancing, you see now I have two stacks of navigation. There is, uh, replacing, so I click replace and the navigation was, uh, not stacked. You see there's just one level of n navigation. Then you see that there is this native, uh, loading animation. So scrolling around, going back to the same point, uh, on the screen after going back, then the native error page. And uh, yeah, let's try opening an external link. You see it, uh, tries to open an, uh, in a browser. So it's kind of open a browser in a model as you would have with many modern applications. And, uh, the user is still inside your application. He doesn't, uh, open in actual browser and, uh, bridge previously strada components. So here is an example of a form component. Instead of, uh, display in the submit button on the bottom as we would have it, uh, lemme go back as we would have it here. So here see in the web application, we have the submit button on the bottom and it submits. And here in the the native application, we are hiding the web submit button. Instead, we are displaying a submit button in the top right corner. And by clicking submit, it actually submits the hidden, uh, uh, web button. So this is a native button. And, uh, to see how this native button works, uh, we have this bridge folder, have have the form component here is all the code needed to make this, uh, native button work on the, uh, iOS side. And if open the source code of this, uh, web application, we will be able to see how stimulus is set up. Let's, uh, go back to hot fired and have, have this hot via native side. And, uh, people look for form, no, maybe not hot via native side, but, uh, hot via native demo. Let's see. Hot fire native demo. Yes. So he have this, uh, bridge form controller. So in our web application, we have this phone controller that, uh, matches this phone component inside our iOS application. And, uh, we also have, uh, we also have, uh, I think an app delegate where we configure bridge. Yes. So here we have a list of, uh, we need to have a list of all the, uh, bridge components that we are using. So here we create them, and here we have a list. Okay, going further, let's, uh, go back to this application. So we have this, uh, form component that submits a hidden button. We have this menu example that opens a pop up menu on mobile. And, uh, let's see how it works on the web. So we have, we have this menu, it's like a dialogue, and there's also an example with, uh, overflow plus menu. So you see we have this, uh, three dots, and these three dots open the same kind of menu. It looks really nice with three dots, in my opinion. Let's try it here. Here it looks the same as, uh, just a dialogue. Okay, so yeah, I think, uh, this is a very good starting point. So we have this, uh, demo application. You can try running this demo application on the local host by just, uh, sending this, for example, to local host 3000 and using local instead of, uh, remote. You can, uh, try looking at the, uh, native demo, this one, and, uh, go with these, uh, stimulus controllers into your application. And, um, let's also see where it is applied. So let's go here form EEGs. And here's the example of actually using this, uh, stimulus controller with HTML to make this, uh, to display the form and to make it, uh, evoke as, uh, with a native submit button on mobile. Okay, I think that's it for this episode. We had a basic overview of, uh, the native, and in next episode, we're going to run it in, uh, uh, rails application.
0