Turbo Native 2. Create new Turbo Native app. Basic navigation and authentication #191

Hello friends. So let's talk about building mobile applications with turbine rails, using Turbo Native. In the previous episode, we had a look at the Turbo iOS Library where we had a demo application that we managed to run using the X code. So we opened this application, clicked the the run button, and it opened us and emulated the iPhone where we could scroll this, uh, application that is available at this, uh, URL and see how, uh, web application can be wrapped into a mobile application. And now let's start building a new Ribbon Rail application. And alongside we're going to build an iOS application. We, they're going to see their interdependencies, they're going to build them together and, uh, make the application work well on the web and work well as a mobile application. And as an example, I was thinking about building an application like Tinder. Tinder is a classic example of a very snappy, good mobile application that has, uh, uh, mobile navigation, that has swipes and so on. So let's try building this kind of application that work both on the web and on, uh, mobile. They're going to start by creating a new application. Let's start by creating actually a new GitHub repository. Let's name it, uh, Tinder. Uh, okay, create repository. Now I'm going to clone this repository. I will, uh, say GI clone git@github.com gi Okay, open this repository. And inside this repository, we are going to create a Rails application and an iOS application. Now, usually you would, uh, create the Rails application in the root folder, but uh, in this case, we're going to have, uh, a root folder named Tinder. And inside we're going to have a Rails app application, and we are going to have, uh, an uh, io s application. This way we can track the GI changes in the two applications, in the iOS application and in the Rails application at the same time and see the dependencies. So let's start by creating a Rails application. I will say, um, rails, uh, uh, new in the, uh, rails, uh, database, PostgreSQL, uh, CSS Tailwind. Okay, let's create the application. Okay, I have generated the Rails application. Now let's, uh, get type GI status and, uh, we want to commit everything. So we have created a Rails application inside this folder, gi, uh, add all. Um, so I couldn't, uh, add, uh, that Rails repository because Rails repository itself is a Git repository, and I'm trying to push a Git repository inside Git repository. So I need to make the rails up, not a Git repository. I will open this, uh, repository and I will say RM remove Git. Now, going back, um, okay, going back and now I can say Git, add all Git status. So now I managed to add the rail repository, Git comt, uh, message, uh, generate Rails app. Okay. Uh, so let's do GI Push and have a look at our reposition. Now, here is a new, uh, Git repository. And you see inside it we have a Rails app. So, uh, usually I'm used to like having the Rails app as the root folder of, uh, Git, but in this case, it's going to be a child folder. And I'll generate a new iOS app to do this. I will, uh, go to file New Inside Xcode and, uh, new project, a new app. I will name it Tinder io s uh, organization, identify com Super Rails. Uh, yeah, that's fine. I could have Tinder or whatever else as the kind of sub domain, but, uh, yeah, that's fine. I just have com Super Rails. I'm not changing any other settings. Uh, clicking on Next, and I need to slide the folder. So, um, okay, why don't they see folders? Strange. Yeah, I just clicked, uh, back and forth and now it's broken. So let's open this, uh, folder, uh, Tinder. And inside this Tinder folder, we're gonna create the Tinder iOS, uh, application. Okay, here we have generated this new application. Let's, uh, type GI status. You see, we have generated this new, uh, application. Let's actually add a GI Ignore. So, uh, in the core, I'm going to say Kit Ignore. And here I will type, uh, uh, iOS, uh, swift ui, and I'm going to have a more Gi Ignore. Inside Tin iOS, you see, we have a default GI Ignore in the Rails repository. It's ignoring the stuff for Rails. I'm going to ignore this, uh, uh, globally, but I could maybe also do it inside Tinder, iOS. And here I'm going to have another GI Ignore dot, uh, git ignore. Here I will say XC user data. So this way we're gonna have a bit less, uh, spam. Now, let's again type get status. Okay, now there's, uh, a bit less visible. Okay? Uh, so we have generated this new iOS app. Let's, uh, save our changes GI at all. GI com message generate iOS app. Okay, GI push. Let's, uh, have a look. So here, inside this Tinder, we have Tinder, iOS, and Tinder Rails. Let's try running the iOS application. And let's try running the Rails application. So I will run Tinder, iOS, and, uh, as we haven't done any changes, it should open a new iOS with application. It should be like a blank, uh, screen. Well, this is basically it. And we can try running the Rails, uh, application. Let's say Bin Dev. Oh, yeah, we need to open the Rails folder. In the Rails folder. I will say Bin Dev. Okay, let's create a database and run migrations, okay? Have, have rails running. Looks, uh, uh, good. Now I want to run Rails, uh, in the Tinder iOS, uh, folder, the, uh, emulated application that is currently empty. So, uh, they're going to make this, uh, Terminator application. Now, to do this, I'm going to go to Turbo iOS, and, um, go to the, uh, docs, uh, quick Start Guide. So, uh, inside this, uh, iOS application, I'm going to install TUR native, uh, turbo iOS. Specifically to do this, I'm going to go to the application project. So here, I'm going to project package dependencies, add a dependency. Now, uh, I already have it in recently used, but you might need to have the full URL. So this would be this URL, you would put it here. You would find this repository. And, uh, by default, yeah, let's use the latest version. So add package, uh, ensure that there is not none, but this Tinder iOS application that you've created as the target at package. Okay? And, uh, now I'm going to go to this SYN delegate. You see, as it is said in the ClickStart guide, you should replace everything in the syn delegate with the this code. So I will replace it, okay? And now I will run the application. Okay? And we have the quick start guide running, uh, in our new, uh, IRS application. Let's save our changes, get status, get add all, um, get commit message, um, iOS, uh, install Turbo native. Okay? Now let's, uh, run our Rails application, our local host, uh, here. So I will say Bin Dev in the Rails application. And, uh, let's ensure that we have it running, uh, locally. Yeah, here it is. It works. And now in the Xcode, you see, we're going to replace this, uh, URL with the, uh, local host. So let's say HTP, local host 3000. Okay? Saving, uh, rerun the application. So you have to like rerun the application each, each time. You make some changes here so that it takes effect. Let's see how Rails Console, if anything's happening here. Um, I think it's still, uh, in the process of rendering the application, it can take, uh, a vial rendering the application for the first time. Okay, yeah, basically now we have, uh, an empty screen running, but now it's trying to run local host 3000. So let's add some, uh, screens to our application. I'm, uh, going back to my Rails application. I will, uh, add the couple of static pages, let's say rails, uh, generate controller, uh, a static. Um, it'll have an index page and a dashboard page. Let's open our code editor. And here I'm going to add a route page. So route will be to static, uh, index, and we're going to have a path to the dashboard. So get the dashboard to static dashboard, okay? Uh, let's add the this to all navigation. So going to application, h, mel, e, r, b. And here I will say equals link to, uh, home route path and link to dashboard, dashboard path. Let's try running this in our rails. Application bin Dev. Okay, something didn't work. Let's see why. Okay, I made a mistake in my roots. Get dashboard to static. Uh, dashboard. Yeah, it should be like this. Now run bin Dev again. Okay, so here we have static index by default, and we can go to the dashboard. Uh, let's see if it works in our iOS application. So I'm going to rerun the iOS application. Once again, let's have a look at our logs in the Rails app is the application from iOS making request to the Rails application while it's trying to launch. You see it made a request. And here we have static index. So we have homepage and dashboard, and you see the navigation gets stacked on top of each other. So yes, it, uh, kind of works. Let's, uh, save our changes. But before, let's try running Rails test. So the autogenerated tests should be failing now because we updated our route. So let's go to static controller test, and here we'll have, get the root URL success and get dashboard for URL ET response success. Okay, so, uh, now we managed to run local host, uh, uh, on our Rails application on mobile. This is really cool. Let's, uh, save our changes. So, uh, I will, uh, actually save changes separately for the Rails app and for the iOS app in this case. So here I will say, uh, rails generate controller, static index and dashboard, and, uh, in tin the iOS, I will say that point, uh, URL to, uh, local host, but not to a random URL. So, uh, iOS use local host. Okay, uh, looks good. So we managed to run our rails, uh, on, on New Rails application on, uh, iOS. And we have a couple of pages. Now, let's add authentication with device and see if, uh, it works out of the box. So I will say, uh, bundle add device, again, inside the rails folder, rails generate device install. Uh, I'm going to follow this ClickStart guide. So put this line into development. rb, uh, we already have a root path. We're going to add the, this alert and notice, we'll put them in application, h ml, ERB. Then we will add the rails. Generate device user, make the user model authentic rails, the beam migrate. Okay, let's, uh, run the server. Oh, yeah, and let's, uh, require authentication to see the dashboard. So let's open static controller. And here I will say before action authenticate user only for the dashboard. And index doesn't require authentication. Let's see how it works on the web. So here I'm on the homepage. I click on go to dashboard, and you see it requires a sign in and it opens up the signin form. Actually, this design is quite ugly. I'm going to go to application HTML and, uh, set flex, uh, to flex, uh, column. Okay. This, uh, design looks a bit, uh, better for the closed design that we can have to defaults. Um, okay, so, uh, we have homepage and dashboard that requires authentication. Let's, uh, allow the user to sign in. So, um, sign up, sign The user signed up, and he was directed with the dashboard page. So I send up user can visit both homepage and dashboard page. Let's now allow the user to, uh, see his username, so his email address, change his password and, uh, log out. So, uh, to do this, I'm actually going to copy it from some where I've done it before from my blog. Uh, I might have something in this blog post. So I will add these, uh, links here. So, uh, if user is sent in, show his, uh, email and path to edit his, uh, uh, email password to delete his profile, uh, button to log out. I don't think we need data to false anymore. Um, advise, login, or register. And, uh, yeah, let's, uh, run our application again. So here we see the username. It leads me to this page. I can log out. Okay, so here again, I have homepage, dashboard, login, and register. Let's try to see if it works on, uh, mobile. Actually, I will just try to refresh the page. Okay. And you see, I didn't have to, uh, rerun the mobile application because I already, well, I didn't do any changes in the mobile app. I did changes only in the Rails app now. So, okay, let me try using the same, uh, uh, email and password. Uh, I think it was yam.com. Uh, can I type yam.com? Yaro at.com, uh, login. And you see, I managed to login. It worked wonderful. I, I'm logged in. I can, uh, see the dashboard homepage, uh, go to Regi, uh, change my account and I can click on Log Out. Let's try clicking on logout. And, uh, it worked. So, uh, wonderful device seems to work outta the box. Uh, with, uh, Terminator. Let's, uh, save our changes. So what have we done? Uh, we have, uh, uh, installed device in Rails, install device for authentication. Okay, looks, uh, quite fine.