Introduction to Ionic Capacitor Builds
Hello friends, a very warm welcome to Coding Techniques again. Today we are going to learn about how to build an APK using the Ionic Capacitor. And also we will see how to run it in Android and iOS. And a whole lot of stuff we will see out there. Also we will see how to run it in emulators and everything we will check it out in this particular video.
But before getting started I would like to tell you that there is a limited period offer that is going on in my Ionic course with Firebase where I am showing you how to build a food delivery application, the customer, and along with that, a lot of basic concepts to advanced level concepts you will learn out there. So if you haven't enrolled in that, you can check the link which is in the description. It is available in Udemy in bestseller, so you can just check that out. Okay and there will be a lot of upgradation that will be coming on. So with that being said, let's dive into our today's video.
Creating a New Ionic Angular Project
So out here, at first, we are going to create a new project for which I will use this command: ionic start, then the project name, let me call it social-sharing. Well, we won't be using that up in this particular video, but later on, we will be using that up. So I want to show you how exactly the Capacitor project can be built in Android and iOS. So let's go with that. So I will have a blank project out here. So I'll write 'blank' and then _--_type=angular because we are going to use the Angular framework out here.
All right, let me hit enter and you can see it is getting created. All right, now it is asking me to create a free Ionic account. Well, I won't do that up because I need to use Ionic Flow for that, which is the paid one. It is free for some cases, but we will not use that up right now. Okay, so I'll just hit 'no' and hit enter. Fine. Now once that is done, I will open this project in Visual Studio Code by using code . and hit enter. But you have to go to the project folder at first. So I was into the wrong location. So let me simply copy this up and I'll paste it out here, hit enter. Now I'm into the project location. Now I can simply type code . and it will open up the project for us.
Serving the App in a Browser
So once the project is ready, you can see out here the project has opened up in Visual Studio Code. All right, so I've enlarged it so that you can see it properly. All right, now let me show you by running it into our browser using the ionic server. So I've just opened this particular terminal. Now if you don't know how to do that up, simply go to the terminal at the top and you will get this option 'New Terminal'. So just open that up.
Now out here I'll simply type ionic serve, hit enter. So once you do that up, you can see it is opened up in the browser. I will simply inspect it up and this is a blank application that we can see. If you want to change the view or you want to show the frame, you can simply select some other one. Let me just select 5x. This one, you can see the frame is showing up, right? So this is how you can change. Now since it is running pretty nicely in our browser, let's build this up.
Configuring App ID and Name
I'll just maximize it. Now let me just simply stop this up and I'll show you how to build this for Android and iOS. For that, what I need to do, well at first I'll change the package name and the app name. So let me go out here to the capacitor.config.ts file and out here I need to change this package name which should be a unique one. And you need to type your domain name at first in the reverse order. If your domain name is say suppose technics.com, you need to write com.technics out here. So let me just type it com.technics in the reverse manner dot the name of the application without any space or any hyphen or something okay. So let me just type out here social-sharing. Okay, in this particular manner you can just write it down, no hyphen, nothing. So this is your unique app ID which you are typing out here because your domain name will be unique, right? If you do not have a domain name, still you can type the name out here. That's pretty okay, doesn't matter, but this one should consist of a unique name, okay? Otherwise, it will give you some errors when you're building it up.
Now this will be your app name. So let me just have 'Social Sharing' irrespective of the hyphen, 'Social Sharing App', all right. So this is ready out here in the configuration and maybe out here also you need to change. I'll leave it as it is. Now what I'll do, once we have done that up, now I'll simply run ionic build because if we don't run that up, the www folder will not be created and well, we won't be able to add the Android and iOS platform pretty nicely because we need to sync it up, right? When we go for the syncing part, it won't work properly if we make any change out here, so you need to run this particular one. Analytics, if you want to give a, let's give yes, not a problem. You can even go for 'no' also, doesn't make any difference, okay? It just means that whether you want them to be tracked or not. That's the only thing that they want to know and there is a new version of Ionic CLI. Let me just update it quickly. So I'll just type it. Let's do it at the same go only. It won't take long. Alright, it is done.
So once that is done, what I need to do? Well our ionic build is properly running now. Now we have the www folder out here, you can see right? Once that is ready, I'll simply add the platform for Ionic and Android and iOS. So ionic cap—'cap' is a short form of capacitor—add ios. Let me hit enter. And when I change this particular configuration, it's going to change everywhere in the Android and iOS platforms, okay? If you don't change it up, then later on, you can simply in the search, you can just type the earlier one io.ionic.starter and replace it with the package name that you want. It will replace everywhere. So that is a better approach to work with if you have missed it out. Okay.
Now the iOS platform is created. Let's go for the Android one. So add android. Now I already have Android Studio and Xcode installed in my system which is pretty easy. You can just check the documentation if you have any problem of Ionic and it's very easy to set it up in Windows also and in Mac also. All right, and I'm using a MacBook M1 so I don't have any problem in setting that up. You won't face any problem in any version at all. Okay. All right. Once that is done, everything is good to go.
Running the App on an Android Emulator
Now we simply need to run it or open it up in their respective platforms. That is for Android. Let's pin up the Android Studio because I want to show you how to create the APK file out there. So ionic cap open android. Now if you're making some changes into your application, well let's say out here in the app, home page, TypeScript file or anywhere you are making some changes in the HTML, whether you are name changing a name or something, and you are trying to open that up in the Android one, before opening up, you need to sync the project because the changes which you are doing out here won't be reflected in the Android and iOS platforms until unless you sync that up. So you simply need to use the command ionic cap sync android. Instead of 'open', you just type out here 'sync'. Once the syncing is done, then you can simply go for opening up in their respective platform. Now if you type the command ionic cap sync then it's going to sync the project in both Android and iOS, so it's pretty better to use that particular command.
Now, coming back to Android Studio, let's open it up by using this particular command. What is wrong? Okay, I just wrote ionic app. I beg your pardon for that. It's gonna be ionic cap. Let me hit enter. And you can see Android Studio has opened up pretty fast, right? And everything is getting set up. So always make sure that you have the upgraded version out here. So let me just click out here, begin upgrade to Gradle. Okay, let's go for it. Let me minimize this up, it will run in the background, no problem at all. Now you can see out here, well I have some device, an emulator. Let's run on that at first. So no emulator is running but it will still run out here. It has opened up the emulator, you can see out here, right? So now it is building the application and launching the app out here. You will see the application right now. There we go, this is the application that we have just seen in the browser also, right? So it's going to be the same stuff. The once that is running in our emulator pretty nicely. How to set an emulator if you do not know? Well you need to simply go out here. Where is it? This is the one. So you can create another device, virtual device out here. Just select the ones which you need and go ahead, it's gonna create one more. All right, let me just minimize it up.
Generating a Debug & Signed APK
Now I'll show you how to create an APK. So at the very top, you need to go to Build. Okay, you won't be able to see it out here because that part is hidden, but you need to click on 'Build'. And in the build, now you will be able to see, I'm going to Build Bundle, okay, and you can generate the APK out here. Now this is just for the development purpose. For the signing one, you have to go out here. Okay, so let me just build this up at first. Pretty simple, right? I've clicked on that and you can see out here, 'APK generated successfully for one module'. If you want to locate, let me just click out here and this is the location where it is being built. So this is the... now this particular APK file I have shared it via WhatsApp in my phone and checked that out. I haven't shown you that part, but after checking it in my phone, it is perfectly running nicely. You just need to allow the download from the unknown sources. Okay, in the settings, it will prompt you to do that up. But if it doesn't, then you can do that up. And if still it does... if it doesn't work in your system, then what you can do is you can generate a signed APK. Let me show you that part.
So let's go to Build again and this time I will go to 'Generate Signed APK Bundle'. Because what happens is until unless the app is signed, well the system in the Android mostly shows up that it is not from the authenticated one. All right, so there is a security thread in that. That is why you need to sign this up. And what you need to sign? Well if you need APK, then you can simply go for it. For publishing it in Play Store, definitely you need to generate this Android bundle out here. Okay. This will generate a .aab file which will be compatible with all the versions of Android, whether it is 64-bit or 32-bit. All right? And the size will depend based on that, okay? Not on all the versions of Android, definitely there is a minimal SDK version for that which you can change as per the requirement. So that is how it's going to work.
Now, let me generate the APK. So in the APK one, you can simply pass the keystore path. So I'll just create a new one and I'll share... I need to pass the path. So let me just click on it and I need to store it at a particular location. So out here let me just search for the location. Let me just go inside that Ionic applications. I will go to social-sharing within that I'm going to have this thing and I will name it as... this will be the key name so let me have the name 'social-sharing' for the time being. Don't give any space, okay? Just hit Save. And you need to type a password out here. Let me just give any password. Kindly give a strong password and you need to remember these credentials because every time you want to generate an update version of this particular one then you need to use the same key once you are publishing it up. Okay, this is the alias name. So let me give the same name, 'social-sharing'. Password should be also same so that you can remember pretty nicely. And for how long it's going to be valid? Well, this one I don't want it for a long period of time. Obviously, I'm not going to launch this up but that should be the maximum age that you can pass out here. So give it 75 years or 100 years, whatever you want and till that time period the key will be valid. Okay.
Well, the first name, last name of yours, so let me just give out here my one. And organization unit, let me just give anything out here for the time being. But actually you should give your company unit name and the organization name also out here. Then city, state, code, just simply type all this. Okay, so after typing, I just hit OK and we are going to go with this particular stuff. Everything is showing out here. Remember the password, so that it will take the headache of remembering the password, we don't have to look for that. But still, you need to remember that up, okay, in case you need somewhere. I'll simply go for next. And which one do you want to release? You want to have the debug one? You want to sign or the release one? Let me go for the release one. So I'll just hit Finish. Gradle build is running. All right, this is ready. So external edit files can be added to Git and this is the one. So, let me just click out here. How do I see that? Okay, let me go to the location, earlier location only, and out here I will see somewhere the release one, of course. Let me just check this one. Okay, this build... not out here. This is the one. Okay, within the app, there is a release folder and this is the release one. Okay, and if you want to check the key, where is the key? Well, the key is not showing up out here but no need to worry. So this is the release one. If you just share it in your phone, then it's going to work properly. All right, so this is how you generate an APK.
Running the App on an iOS Simulator
Now our a_p_k is done. Let's work with the other one which is the iOS one. So let me just show you how to create that app and run it in the simulator. Okay, so what I'll do, let me just cut this, terminate, because Android is done. Now I simply need to go out here to the visual studio and this time I'm going to open it in iOS. All right, no permissions because we haven't implemented any feature as of now, so no need to do anything. So it's going to open the project in Xcode now.
There we go, the Xcode has opened up and everything is good to go, processing files. All right, it is ready. Now let me go to this particular app, and out here in the app one, you can see this Signing and Capabilities. Now out here you need to select a team at first. Out here there is none, but I have already created a team, personal team. So you can simply add an account which is free of cost. All right, so if you don't have this account, well it's going to give you some warning and it won't allow you to build the application in most cases obviously. Now the errors are gone, we're good to go. Now in the app one, what do we need to do? We don't need to do anything actually. I just wanted to show you how it looks like if you do not know. Okay, so this is the whole stuff that we need to look into and out here there is one info.plist also. This is what this is the one. If you want to pass the permission, you can do it out here or you directly from the info.plist in the Android folder, you can do it in the Visual Studio Code also. All right, so this is the whole stuff. Let's try to run this. I will open up a simulator. All right, too many simulators, let me go for 13 Pro and I will hit this play button. Now it is building up. Let's wait for it to show. All right, the build is succeeded and it has opened up. Great. Let me just maximize it up and the app has opened up out here, you can see it right?
And if you want to like run it in your phone, simply connect your phone via USB and out here the phone will be detected. You just click out here, where is it, in the app one. All right, out here the phone will be detected at the top and you can select that up and simply run this button, okay? Then this will also be done. Now for the API file if you're looking for that, then you have to just check it. But I won't recommend that because running the API file directly into your iOS will take a lot of things to do, because iOS does not allow like the way in Android it can be run. I have already done that up but it takes a lot of things in the settings you need to just search for the settings and do the stuff. So I won't recommend that. We simply run it out here if you want okay, and it is already ready for uploading. So everything is good to go. You can simply upload it up. That's it.
Conclusion & Final Recommendations
So this is the whole stuff about launching the app on simulator and emulator. In fact, how to build an APK, you have seen that. All right? And how to run it in iOS also you have seen. So this is how we run a Capacitor application built with Ionic in Android and iOS. All right, so many of you requested for this particular video and there you go, it is ready. Okay, so I hope I have answered all your queries regarding this, how to create an APK and run it in iOS in the simulator using the Ionic project with Capacitor. So this is it for this video. If you liked the video, please hit the like button. Do subscribe to the channel if you haven't done it and if you are new out here, make sure you subscribe to the channel. That will help the channel grow. So thank you very much for watching and I'll see you next time.
