Turbo Native 3. Turbo Navigator, Native Modals, PathConfiguration #192

07/09/2024
iOS outdated
Transcript
Hello, friends. So in the previous episode, we created a new GitHub repository, and inside we created a new Rails application and a new iOS application. And then in the Rails application, we installed device for authentication. And in the iOS application we installed Turbo iOS so that we can, uh, run the Rails application not only in the the web like this, but also as an, uh, apple, uh, on mobile. And here we have this emulated, uh, uh, iPhone 15 that we opened in Xcode. And you see now we can, uh, sign in with the device, both in, uh, the web and in mobile. And now we're going to start adding some native mobile, uh, uh, interactions. So we're going to start with models. Now it's common for, uh, pages like, uh, new record or edit check code to open up and in models. And in our case, we're going to open up, let's say edit my account and, uh, pages like login and register in a model. So how can we do it? For this, we're going to use, uh, uh, let's call it the docs of turbio. And we have this path configuration. And here we have, uh, example of like all the pages that are slash new and slash edit should open up in a model. So we are going to make, uh, uh, some pages in our case log in and register open up in a model. Uh, to do this, first of all, we are going to install, uh, turbo iOS in the latest, most modern way. Now, at the moment, we have it running as the, uh, just main branch. So we have Turbo 7.1 runin. If we go to our application dependencies, we have the latest major version of Turbo iOS runin, and instead they're going to run this, uh, turbo Navigator branch. So it is a branch that will have many more behaviors, models included outta the box available, um, new Turbo native applications. So hopefully this branch will be merged with Main soon, but for now, I'm going to cope with the branch name. I'm going to, uh, put it here. So instead of next major version, I will say branch, the branch name. I'm clicking enter it is going to rebuild the dependencies. And going back to this branch, I'm going to files changed and I'm going to open the, um, docs, uh, quick start guide. I'll open in your tab. And here I have this, uh, updated syn delegate For the Quick Start. I will, um, remove all the content from here, put the updated syn delegate. I will, uh, say HTTP, local host 3000 Save, um, run application. So it's going to run, uh, the application with the, the latest code from, uh, this, uh, turbine Navigator brunch. And for the moment, everything should work just as, uh, before. So we can click around, but uh, still no models. So to make models work, let's, uh, open up docs for path configuration. And here we have this example, uh, JSO. And we are going to store this kind of code in, uh, our application in a file named Path configuration Do js. So, uh, I'm gonna go to file, uh, and you file Now, uh, this is the right way to create files in, uh, x code. You can just, uh, open in the, uh, another code editor, uh, and, uh, create a file because, uh, it'll not create correctly. So I create this file, create a file, okay. And if you look at the GI changes, you see, it tries to like project whatever that it registers in your file. Uh, path configuration, do, Jason, if you created this file in the, uh, via code, for example, or RubyMine, it wouldn't, uh, register the file like this. So that's why you need to kind of work with iOS projects in this, uh, iOS, uh, code editor. And anyway, we created this path configuration. We're going to copy the JS O and, uh, what else do we have? So we have this example code. I will try putting in scene delegate, but with a small fist. So we have Lead Path configuration and uh, we don't have this kind of session defined, so I'm going to put it inside our Tool navigator, part configuration, equal part configuration, save run application. It's run the app and it, uh, should read, uh, the kind of settings we set in the spot configuration here. So all the slash new and slash edit should be open the in a model, okay? If you click on login and register and you see it's still not, it's a model why it, so, because if you go to our Rails app, you see the slash sign in and slash sign up. So let's, uh, try login in and edit our profile. I will go to, what was my login? Okay, I will go to my profile. And, uh, it still doesn't open as a model. Let's see the part here. So it is user slash edit. So I would expect this to open as a model. Anyway, let's try, yeah, there, there is a reason, because here it should be not presentation, it should be context. So here, if I look for the word context in this, uh, pull request, you see the replace presentation with context. So here I will have context model, and uh, yeah, we have actually also an example for slash sign in. So let's add, uh, context model for sign in, or we can just, uh, move sign in here. So comma slash sign in, uh, and sign up. Okay? So slash new slash edit slash sign in and slash sign up should open in the context of a model. Now, I will run and scan. Okay, so you see I ruined the application and it kind of logged me out. But you see, hey, we opened the sign in and send up in a model. So we have basically installed, uh, uh, this capability to have some pages open up as models in our application. Now, if you go to dashboard, uh, yeah, homepage works outside of model. If I click on dashboard, it tries to open the dashboard, but I'm not logged in. So it redirects me to sign up and it opens it as a model. So looks, uh, quite cool. Now, uh, let's, uh, save our changes. Uh, so use Turbo, navigate a branch, um, path configuration for models. Okay? And, uh, now we're going to actually make this, uh, path configuration file. We will read this path configuration file not from our iOS application, but we will serve it through our Rails applications. So if you want to change something in this particular integration, you don't have to resubmit your application to App Store. You can just make this change, uh, inside your Rails application and push it, uh, as a URL instead of this, uh, static file to your iOS application. So, um, do this. We are going to create, uh, an endpoint and, uh, endpoint inside our Rails application. Let's, uh, open our Rails application and, uh, I'm going to create a new controllers. So let's go to controllers. Inside I will have, uh, a folder named Turbo. Uh, inside I will have a folder named iOS, and inside I will have, uh, um, a file named path on the integration controller. Uh, you don't have to have, uh, all these, uh, uh, nesting. You could just have like path configuration controller or iOS controller. But this way I think it's a good way to describe everything. So I will say Class Turbo, the parent folder, iOS path configuration hurts from application controller, dev show. Uh, okay, it's a wonderful auto complete. And, uh, they're going to have this kind of, uh, json inside. So, uh, uh, we have rules, okay? And, and, and, and, uh, I will also ensure that we don't require authentication to access this. So skip, uh, before action, uh, authenticate user just in case if at some point of time you'll put, uh, before action authenticate user inside your application controller. Okay? So, uh, I have this Jason that we can serve through our rails, uh, application. I need to also add the root for this. So, uh, I will, uh, go and say, uh, name space, turbo name space, I get path integration, uh, comma, tool path, configuration show. Uh, or I can actually just say, uh, resource, resource, uh, path configuration only show. Okay, let's try navigate into this, uh, inside our web browser. So slash turbo iOS, uh, slash path configuration. Do json, uh, okay, I initialized. Let's search for path configuration. Do json, maybe I made a typo somewhere. Okay, an initialized constant. It might be because here I have this what to generate path configuration where it has to be as plural for resources. So it's path configurations, controller. Let's see if it works. Okay, uh, now I have some kind of type of here, maybe too many, uh, braces. Um, let's see. Maybe we can simplify if we don't need these settings. Okay, maybe like this refresh. Okay, uh, has not been defined because we did not set before action authenticate user in the application controller. Let me comment it out. Okay. And we have this j uh, served via this URL, and now we need to serve it in our, uh, send delegate. So here we are reading, uh, this path configuration from this local file. Let's actually delete the local file, move to trash. And, uh, here, instead of reading from a file, we are going to read from, uh, our URL. So the source is going to be, not the file, but the server. So I will say server. And here I'm going to have, uh, uh, they hold URLI think let's try having this URL. Okay. And, uh, I get another error. Cannot connect. Okay, cannot convert. So maybe I should say it differently. I will say, uh, server. I will have root URL. We have this, uh, root URL and I will say dot append. And we are going to append the path, and the path is going to be, uh, not the whole path, just, uh, turbo iOS configuration. Okay, let's save. Okay, I'm not getting an error. I think I will, uh, rerun the application and see if, uh, it works. So I'm going to log in. It opens in the model. Now let's, uh, go back. I will, uh, command this lines out. I will just remove them. I will, uh, rerun the application and I expect, uh, the login and, uh, register pages not to open up as a model. So I click here and you see there's a full page load. So see from our Rails application, we kind of send commands to our iOS application. And I think it's really cool. And, uh, this way you would have to submit your application fewer times to the app store for, uh, review if you want to make some changes in your app. So, um, uh, path configuration from your Rails app. Okay, I think it's, uh, really cool. Now we can open up some pages in our application as, uh, models.
0
Join the conversation
Sign in to access PRO lessons, access private repos, leave comments, create watch lists.
We collect your email address, name and username to create your account. We do not share your email address with anyone else.