Introduction & Project Overview
Hello friends, everyone, welcome to Coding Techniques again. Today, I'm going to show you how to run the live reload for Android and iOS using the latest version of Ionic and Capacitor. So, I'm going to use Ionic version 7.1.1. I'll show you in the package.json file. So we have Capacitor version 5 here and Ionic version—okay, it's not given here, but Ionic version 7.1.1, that's our latest one.
With the help of that, I have created this new project in which I have transferred all the files from our Uber Eats one into this particular one. Okay, so you can see all the Uber Eats clone application that we had, means all the files that we had, I have transferred it here. It was pretty simple because we have already converted into this standalone one, and I am using the standalone, not the ng module one, for which the difference and everything I have already shown in the previous video. You can just check that out, what is there in Ionic version 7.1.1.
Okay, I have already run it up. Let me just stop it. Now, first of all, you need to add the platform. So ionic cap add ios and then for Android, just replace iOS with Android. Run these two commands at first, okay? But before running that also, you simply need to run ionic build. That's very important. So when you run that up, you're good to go. All the plugins are already installed, and I will show you what exactly I have done for permissions and other stuff.
So for the iOS, in the info.plist, I have just passed this to permission for geolocation that we were using it up. That is why. If you're not using it, you don't need to pass any permission here. Then I'll show you in the Android manifest. In the Android manifest, for geolocation, these three permissions are needed. Otherwise, no other things are needed as of now, for the geolocation only.
In the variables.gradle file, well, these things are being passed, only Play Services location version, and I am using the latest Capacitor version because if I upgrade it in the previous project, then it would be troublesome because it will take a lot of time to do that up. And it's easier for me to like create a new project and transfer everything there because it is needed for Android versions. And I have updated the Android version to—here you can see I just tried it running and it is running successfully. So I have the latest version of Android. You can just check for updates and you will get it. In my case, everything is updated. The major updates I have already done. I have updated the SDK also. Okay, this is very important. If you are not doing that, please do that up.
Essential Gradle & Firebase Configuration
Then one more important thing is the setting. Let me just go to the settings. I'll do it from there. Now I'll look for Gradle here. This is very important. So in the Gradle one, you need to use a jbr 17, okay? That means Java version 17 needs to be used with this particular versions of Ionic, Capacitor, and Android one. Okay, so you don't need to change anything if you upgrade it. It will be done automatically. If it is not working in your case, then definitely you can select it up. Or if it is not installed also and it is not showing up—well, that won't happen first of all, but if it happens, you can install Java JDK from the Oracle website.
Now my app is ready to run this up, okay? And what I'll do now, so after adding both the platforms and doing, passing all the configuration properly, you simply need to open ionic cap open. I'll open the iOS also. Android is already opened up. So it's better you open it up. Without opening it up, if you are directly running the live reload, then sometimes it doesn't work. So it's better to open it up and try to run the application once. So that's what I did here. I have just run the application here, okay? In this particular manner, it will open up the application. And after that, if you run the live reload, it's quite smooth to run. Okay, that's not mandatory that you should run, but I prefer if you run it up, it's gonna be much better to work with. Okay.
Preparing Simulators & Launching Android Live-Reload
Now this is being done. Meanwhile, Xcode is also opened up where I'm going to open this particular iPhone 14 pro. Okay, let's run that. Also, again, I'm saying running is not mandatory, but I prefer to do it in order to avoid any kind of a mistake.
Now, before running all these things, one important thing which I missed out to explain you is in the main.ts file. You're working with the app.module.ts file and also you can just look into that. In the main.ts file, you need to add this particular code in order to work properly in Android and iOS. Otherwise, it might show you a blank screen or white screen. If you are working in the browser, simply you can go ahead with this get or that is what it's being done. And you need to import everything whatever is required. I have already done it here. You can simply check and go ahead with. So this is the stuff which you need to do for Firebase only. Okay, remember that, only for Firebase. Since we were using the Firebase in our Uber Eats clone application, that is why I'm just showing. Okay.
Now let me close it and get back. Now the simulator has opened up. Now I'll just get this outside of the Android Studio in this particular manner and minimize it up. Now I have both the things ready. Okay. Now there is one important thing which I forgot to tell you that if you get this kind of an error where it is asking you for Java 17 instead of Java 11, that means you need to update your Android Studio like I said earlier. You need to update it up definitely. If this error is coming, definitely you need to update it, okay? That means it's not updated and restart your system after doing that. Okay, so this is ready now and our application is also ready. Let me close everything and I'm going to run live reload now. But before that, one more last thing which you need to take care of, if you are changing anything here or if you're making any changes, make sure you sync the project before running it up, or while running live reload also, it will be done. So let me run ionic cap run android -l --external. Okay, let's try this up. And in the other one, okay, let me just run this up at first.
Verifying Android & Launching iOS Live-Reload
This is the one I have selected it up. Let's check it out. I'll just get here and see whether it works or not. You can see something has changed, right? It is exiting and it will open up again. Well, the app is still not running.
Okay, let me just do one thing. I'll run it from here now because when we are running live reload, even if it doesn't run automatically—it was running actually earlier, but I think because of the download which I'm doing now, maybe it is getting stuck. So if you run it from here, still it will be live reload, and I'm going to show you how.
So what am I going to do now? Let me change 'skip' to something else. I'll just get back and I'll go to the intro one, intro, and in the intro html, I'll just scroll towards the bottom. Instead of the 'skip', what am I going to have? 'SK'. Let's see if it is changed or not. Here you can see this is getting changed, so it is working, right? And this is not changed in this particular one, so you can see the difference, isn't it? Alright, let me get back and undo this up.
Now one more important thing, if you haven't checked the Uber Eats clone application series, you can just check it out. Link is there at the top right corner and also in the description too. I have passed in the pinned comment also, you can just check that out. Okay, so our live reload is working for which one? Android one.
Now it's time for iOS. So let's go for that. It's quite simple actually. ionic cap run ios -l --external, and you are good to go. Just wait for it. Okay, I need to select the device. It's going to be iPhone 14 Pro. Let me select that and it will open up here directly. So we need to wait for it until it completes again.
Okay, now it has opened up. Alright, it took some time, I thought it was done. Now let's try it up. If I try to change it, let's check it in both the cases what happens exactly. Okay, it is changed and this one is also changed. So it is working, right?
Full-App Test and Conclusion
Let's get back now. Let me try it again. You can see this is showing up and it is hiding. Don't need to worry, it's because of the status bar. You can simply work on that. There are some settings which you need to do for students, but let me know in the comment section if you want a special video on that. Okay, so let's try to access it now. I'll just hit on the skip button... or I can't do it right now because it is the status bar. Let's get inside it. And even I can hit the skip button and I'm inside the project. If I go for the login one, let's see. Alright, this has turned, and you can see permission is also coming up. Let me say 'Don't allow,' then this coming up. So you check this here also. Alright, okay, great. I'll say 'Don't allow' and this is coming up. No thanks. Great, it's working. I'm happy with this.
So it is working as expected, right? So we didn't face any problem at all. It was quite smooth to work with it. So I hope you have understood how to work with the live reload in Ionic 7 latest version with Capacitor latest version, and everything is working great here. So with this, I'll wrap up this lecture. Thank you so much for watching, and if you're new here, please subscribe to the channel and do hit the like button if you haven't done that. Thank you. See you later. Bye.
