Transcript
Hello friends. So in the previous episode, we explored Hot file native that refreshed the rebranded approach to create the mobile applications with Ruben Rails and iOS or Android. So previously we had tur native and Strada. Now hot native is Tur native and Strada combined. And also in the previous episode, we had a look at, uh, this hot five native iOS repository. We opened the demo application in, uh, Xcode. So here have the demo application opened in Xcode, and we click the run button to open it in a simulated, uh, iPhone 16. And we could, uh, navigate this, uh, website and, uh, interact with it as if it was a mobile application. And now let's try run it not on just a default, uh, example, uh, URL, but on our own application. So let's first try and run it on superl.com, the production URL to do this for the remote. I'm inside this demo file. Just going to update the uur L from Hot Native demo Dev two super rails.com. I'm going to rerun the app. And uh, again, this demo is invoked in the scene controller. Here we have root UL equals demo current, so demo current, and then root URL is uh, invoked. Uh, here in the scene controller, we navigate to the root URL. So okay, here we have our, uh, own application launched. You see that title is uh, uh, a native element, and it's the same title as I have here in the browser tab title. Uh, the logo is, uh, a bit, uh, squashed. Maybe we don't want to show it or we want to change the CSS to show it in a better way. Uh, this, uh, works so I can type something and search. You see, search works. Okay. Now these, uh, buttons will not work because I have data turbo false on all of them. Uh, so if you have data turbo false, then it'll not work. Um, then scrolling, uh, you see, uh, scrolling goes, uh, above this area so it doesn't look very nice. We would want to, uh, not make, uh, content visible behind this error. And then we have this, uh, uh, footer. We, I have a couple of tabs. This is actually not native footer. It is just the responsive design that, uh, I have, uh, for opening the browser in a small screen. So there's not native tabs. This adjusted my HT ML tabs. Now, if I go to, uh, URL, you see the navigation gets stacked, so it can click another URL. You see the title gets updated to the title of this page, and the navigation gets stacked so it can go back. Now if these were native, uh, tabs, usually each tab would be like a separate browser tab. So navigation would be stacked inside this tab. Uh, but now these are just, uh, HTML tabs, uh, not native ones. So navigation gets tab, uh, gets, uh, uh, stacked when navigate between these tabs. Okay. Uh, so again, there's buttons not work. Uh, let's try running it now. Not on another remote, URL, but on a local host. So to do this, I'm going to run my application on local host that I have already actually done. So here I have the application running on local host in the, I have a rail server, runin, here it is. And, uh, I'm going to say current will be not, uh, remote URL, but local URL. So they're going to run the local URL and it's going to be local host 3000. Okay, let's, uh, try running our local host 3000. And, uh, I will expect it to try to make requests. You see that this iPhone, this, uh, simulated iPhone is making requests to our application. Now, I'm going to click on lessons. And you see whenever I click, uh, we get well requests made to our local server. So it's kind of working and it looks small as the same as it did in the production, but this is run a local host. So, okay, let's now see if, uh, which components would be broken. So, um, but if all to have a phone component, a menu component and overflow menu component, let's, uh, try adding a potentially a new component. We have in the example here, let's have a look at the example, a bridge component, an example of a button component. So we can have, uh, a button in our H TM L and it would render a button here in the, the native, uh, header in the top right corner. So let's try adding, uh, uh, bridge button and see if, uh, uh, bridge components for the work out with the box. Let's try it in this button. We can edit, uh, in our layout, for example. Okay, I will, uh, refresh the page here. We have this view profile, uh, link and need to add the, uh, stimulus controller inside the bridge folder. So, uh, I'm gonna create a folder named the bridge. Inside our JavaScript here we have JavaScript controllers. Inside bridge, I will create a button controller js. Okay. And we'll need to add a swift component in i our iOS application. So I'm going to just copy with this. I will go to X code. And here in the bridge folder I'm going to create a new file file, new, uh, empty file bridge component or button component. Okay, I'm putting in this, uh, content of the example button component. And uh, I will also need to say that we are using this button component in our, uh, scene controller. Here we have a list of, uh, bridge components that we want to use. So I will add button component self. Now, uh, how can we know that, uh, we are using this components from our Rails application? We can actually go to application HTML and display the request user agent. So, uh, on the web, if I refresh local host, uh, I will have this user agent. And, uh, on mobile I will refresh. And here you see I have, uh, native iOS turbine, native iOS, and a list of bridge components in the an array form menu and overflow menu. Now, why don't I have a button? Because I need to restart the, the iOS application 'cause I've done some changes. So I'm going to replace the application And now it should, uh, also initialize the button component in the request user agent. And here it is. So we have four menu, overflow, menu and button. Okay, this seems to be working, but uh, we still don't see the button here on top. The thing is we need to, uh, install, uh, bridge inside our, uh, rails application. I don't know whether it, uh, gives this error that like we don't have bridge installed. Let's have a look. Yes, fail to register Controller bridge button, uh, module name hot fired Native Bridge does not, uh, resolve. So we will need to go back to Hot fired. And there is a library that we need to install. Let's find it. Um, I think it is hot via Native Bridge. Yes. So this is a Geoscope library that we need to install inside our, uh, rails application. Actually, I think it is documented here. So we need to install the hot via native bridge JavaScript package. So we need to run this command. Let's run it. It'll make sure that we have stimulus installed. And hot via native bridge is a new package that we are installing in, uh, our input maps. So let's open input map. Now, it did, did not input correctly. I will need to add a new line here. Okay, this should work. Now. I will start the server once again. Okay, will I still get a JavaScript error? No JavaScript error this time on the server. Now, uh, let me try refreshing our iOS application. Okay, maybe I need to actually restart application now. I think, uh, the view profile button should be displayed or maybe the URL cannot be resolved. Let's see. Yeah, so view profile still does not, uh, display here on top. Yeah, maybe because the URL is uh, invalid. So let's try making it slash uh, posts. And here we'll write posts that a bridge and the title would be posts. Okay, let's, uh, restart once again. Okay, it is still not, uh, rendering here. What can the error be? Now let's, uh, have a look again at our HTML. So the error is simply here. So we imported this and we have data controller button, but actually our button is, uh, nested inside the, the bridge folder. So we need to have it data bridge button, and uh, this should reference the correct button controller. Now I'm going to refresh the page and I think I will see yes. So I see the post button here and we see it on all our pages 'cause we have it inside our application layout file. Okay? So we managed to make a button, a native button, work on, uh, our application, uh, on iOS. And we don't want to display this view profile or both link in our, uh, web application. So again, going to the docs, there is an example of hiding, uh, uh, an element, uh, on mobile. So I'm going to try to put this into our application. CSS, uh, let's, uh, try this. Okay, it doesn't work. Let's, uh, see if it works on local host. Okay, let's have another look. So, uh, in the code that we copied, actually, I will just use it like this. We would say data controller breach button display, none. So now I'm going to refresh, uh, my application here. I will, let's say I will comment out this display none. I have this link to post displayed. Okay, so now I'm not displaying it. And now on mobile, I will restart the application. Okay? And you see I'm not displaying the link to post here anymore. It is hidden as a bridge component, and I only display the link to post in the top right corner. So this works. Okay, let's try some other native behaviors. Let's try, uh, changing the path configuration. So here we have some patterns as slash new added send in strata form. And these are open in a model by default. What if you want to try something wild? And we want to open playlists in a model just playing around. So I can just add the uh, slash playlists because this URL is slash playlists and I'm going to open playlists in a model. Let's see what the behavior is going to look like. So I'm going to restart the application. And now when I click on playlists, you see they are opened in a model. I have the done that is kind of a cancel or close button, and I have posts that is present on all the pages in my application. So looks, uh, weird, but, uh, looks, uh, well the behavior of open a model on playlist works. Okay, let's try adding another Strada component here. We, we have the example of foam component by default. So let's try adding this foam component. Now we can get the example code for this foam component. Again, I will go to the example code base, uh, in, um, hot fired. Let's search for hot wired, uh, native demo. I'm going to find the form controller here. We have the form controller. I'm going to copy it and paste it into my own application. There is, uh, Okay, here I have bridge. I will create a form controller js. I'm going to paste this in. And, uh, let's have a look at, uh, how the form has been used here. So form in JS B, okay, we have this form example. Let's actually paste it somewhere in our application, for example, in, uh, playlists slash index. Here I'm going to paste in this form. Let's have a look at, uh, it in our application. So I go to slash playlists. Here I have this form that I have copy pasted. And it is, uh, just, uh, uh, simple HTML form. And in the vap it works as a simple form. But, uh, in, uh, the native application, it should, uh, hide this, uh, submit button. And instead it should display the submit button in the top, uh, right corner. Let's, uh, just in case we start the application, so it reit initializes everything, close the cache. And, uh, again, I added this inside our playlists. So I'm going to go to slash playlists. And here you see we have, uh, this form, we still have the submit the button visible. And, uh, you see we have the submit the button here. So, uh, the submit button is overriding the post button. The form component is currently overriding the, uh, button component. And if a class press submit, it's actually going to try to submit this, uh, form. Well currently submit it, just the loads, the current page. Okay? So we managed to run this, uh, uh, form component. It, uh, managed to replace, uh, whatever we had in the top, uh, right corner with the submit button that actually submits this form and disables the submit button during the submission process. Well, I think it's, uh, enough now. So we managed to install, uh, bridge, uh, in our Rails application. We managed to use, uh, uh, model. We managed to use the, uh, bridge form, component and bridge, uh, uh, button component. So in the next one.
0