Transcript
Hello, friends. In this episode, we're going to continue building a mobile application using Rub Rails and tur Native. So in the previous episode, we learned about conditional logic, conditional uh, rendering, uh, so that we can have, uh, different HTML or different, uh, rub Logic in the web view and, uh, mobile application. And now we are going to add strata into the mix of our application so that we can have, uh, native components in our mobile application that, uh, do not exist, uh, inside the, uh, normal browser. And we are going to add an example of a button component. So you see here I have the mobile application, and here I have this, uh, uh, image. And this is actually a button. I click on this button and it, uh, opens the added user path. Now you see I don't have the, uh, user's email with a link here in the N bar, though I do have it in the web view. So here, I click on the, this, uh, link and it takes me to edit the user. I don't have it visible on the mobile application. Instead, I'm hiding this button on the mobile application, and I'm showing it, uh, here in the top, uh, right of, uh, the native part of our application. So how can I do this? Now? First of all, we need to install, uh, Strada. How do you install Strada? This is quite, uh, hard. So, uh, if you go to the Turbo iOS, uh, uh, repository and open the demo application, you will see a folder name Strada, and it has a few Strada components form, menu, and overflow and bridge component that lists all of them. And the Strada is kind of already installed in this demo application, but, uh, we are not using demo application. Here we are. We have created a new application and we are using, uh, this Turbo Navigator branch. And, uh, it, uh, has quite a special way of, uh, installing Strada. So install Strada is not that easy. Uh, now I found my solution in, uh, the repository by Joe Malo named Daily Log. So here he is using the latest version of, uh, uh, turbine Navigator. And, uh, on top of this branch, uh, we install Strada. So I found the code here, I found to iOS, uh, app, and here we have a few folders that are specific for installing Strada. Now, I'm not going to copy paste all the code, uh, in the, this video. Uh, you can either do it yourself, uh, by following the changes, uh, in the, the get the history for this episode, or you can just check out, uh, this brunch. But I wouldn't, uh, copy paste. I would just check out this, uh, brunch myself. So let's have a quick look at how, Uh, uh, the code is structured for making Strada to work. So, um, first of all, I install Strada iOS package in my application. So here is my application, Tinder, iOS, and here in package dependencies. Previously I installed Turbo with a Turbine navigator branch, and also I added Strada with, uh, this GitHub URL and the branch main. So we installed Strada Looking for further. We create this bridge component and bridge component. We create just one button component. So, uh, heavily need to list all our native components, and we created this button component. Again, I took, uh, this button component as inspiration from the daily log application. Here we have components, and here we have a button component going further, this web view controller is just a, a copy-paste of just setup that we need to have. Uh, and this one is quite interesting. So in this durable configuration file, we say that inside the user agent, we are also going to list all of the, uh, native components that we have here. So we're going to have the component name button, and we can double check it by going to our Rails application. And here we have request user agent, let's, um, comment it. I will, uh, refresh my web application. Uh, I see that we're using the web. Uh, I don't see the name of the component, but if I refresh, uh, a page in my mobile application. Okay, lemme refresh here. You see, uh, I have this added bridge components button. So, uh, we are kind of communicating from our iOS application to our Rails application that the, the iOS application has a bridge component named button. So the iOS app is saying that this button component exists and inside our Rails application, if we need to have also a button component. So I have this button component inside the, uh, stimulus controllers inside a bridge folder. And, uh, you need to have a component in the Rails app, and you need to have a you component, uh, in the iOS app. So this two components work together and, uh, what do I do? So here I can have a link. Uh, the link has the URLA link can have, uh, an image and, uh, the placement either on the left or on the right, but it's placed just on the right. So, uh, The Rails app sends this to the iOS app and the iOS app. If it sees that we are sending a button, then it displays the button here on top. So, uh, here in the application layout, I added data controller bridge button, the name of the image from the iOS images and placement in the right. If I say left, then the button should be placed on the left. Lemme try refreshing. You see, uh, now it is on the left, but it's still on the right because it was ced. So maybe I can restart my iOS application. And, uh, I suppose I will see the button only on the left. Let's wait for it to start. Okay, so the app has relaunched and you see the icon is placed just here. Looks, uh, good. So, uh, yeah, this is the basic, uh, installation that we need, uh, to have, uh, start work in an application that uses, uh, to navigate a branch. I have the stimulus controller for the button. I have, uh, the Swift component for the button that work, uh, and communicate between each other. And also, another thing that I needed to do is, uh, install Strada inside the Rails application. To do this, I run the command bin, input map bin, hot wire Strada, inside the Rails applications folder. And, uh, now basically the web application works just as it worked before. But, uh, inside the iOS application, if a page has, uh, a button with, uh, that data controller bridge button with a valid image, then it's going to place it, uh, in the native, uh, header. Also, if you're going to use different iOS images, you will need to install the app locally, uh, SF icons. So this, uh, app has a list of all possible, uh, icons that you could use. Uh, inside the io s You don't need to like have your own icon assets. You just can use the iOS, uh, icons. They have quite a big library. So, yeah, that's, uh, basically it. We have installed the Strada. Again, I did it based on the way it is installed in this daily log application. And we added a button c.
0