Ionic 4: todo App + firebase

8 Running the App on Devices Building Mobile Apps with Ionic

in this video we are going to learn how we can run the ionic application on Android and iOS devices so we start by building and running the application for

Android and we'll be using an Android emulator to do that and once we do that we'll move on to iOS and for iOS we'll be using the iOS simulator to follow along in this lesson make sure that you

have installed and set up Android studio and Xcode on your system the first step in building an application for either platforms is adding the platform using the ionic CLI to arai on it application

the command to do that is ionic Cordova platform ad followed by the name of the platform so the name of the platform can either be Android or it can be iOS if you pass in the keyword Android as the

name of the platform the Android platform will be added to your ionic project if you pass in iOS the iOS platform will be downloaded and added to your ionic project you can go ahead and

build your application for respective platforms the command to do that is ionic Cordova build Android or if you want to build for iOS the command to do that is ionic Cordova build iOS as you

can see you are free to pass in the name of either platforms once you have built the application for either platforms the last step is to run the application to do that the command is ionic Cordova run

followed by the name of the platform which can be Android or iOS for Android this works but for iOS it gets a little trickier let's have a look at how to achieve this for Android first and then

we'll move on to iOS so here I have the ionic project opened inside Visual Studio code and now I am going to type in the commands to add the Android platform to this project so I will just

go ahead and type in ionic Cordova platform add Android this command requires that you are connected to internet and might take some time depending upon the speed

of your internet connection so be patient while this command is executing and once this finishes we'll move on to building our Android application this command also creates a new folder called

platforms inside your ionic project and inside this folder you will see another folder called Android which contains the Android build of your application similarly when you will add the iOS

platform a folder called iOS will be created inside the platforms folder which will contain the iOS build for your ionic application a new resources folder is also created which contains

the icons and splash screens for both Android and iOS it contains the icon and splash images for various screen sizes for both Android and iOS so if you want to have a

custom icon or if you want to have a custom splash screen make sure that you put them right here and replace the original files and then execute the build commands

so now you can see that the platform Android has been added to our ionic application now we can go ahead and build this application for Android so inside the terminal

I'll just go ahead and type in ionic kahlúa build Android this command will build our application for Android and once the application is built we can simply go ahead and run the application

on an emulator or on a real device this command requires you to have Android home and Java home environment variables set in your system if you haven't done so make sure that you have set these

variables before executing this command so now you can see that the build has been completed successfully and now that the application is built we can go ahead and run this application on an android

emulator if you want to test this application on your Android phone make sure that you have USB debugging enabled on your phone and your phone is connected to your system via the USB

cable if you want to test it on an android emulator make sure that the Android emulator is up and running so before we execute the next command let's launch the emulator first to open the

emulator open up Android studio and your Android studio should look something like this when it launches for the very first time as of now all you need to do is get into

Android studio so just go ahead and create a new Android project and proceed to create a new Android application once the application creation process finishes Android studio will launch and

it will open your newly created Android application we don't have to worry about this newly created application what we are concerned about is launching the AVD manager AV d stands for Android virtual

device and the AVD manager will let us run an android emulator on a system so here is the icon that will let us launch Android virtual device manager so click on this icon it will open the AVD

manager and here you can see that I have an EVD created if you do not have an EVD created you can use this button create virtual device to create a new virtual device and then it will show up in your

list once you have created a virtual device hit on the play button right here and this launches an Android emulator on your system once the Android emulator launches you can go ahead and close

Android studio and here we have an android emulator up and running so now that we have the Android emulator let's go ahead and run our ionic application that we have just

built on this emulator let's go ahead and type in the command ionic Cordova run Android this command will automatically detect any connected phones and if none is connected then it

will launch the application on the up and running emulator as of now I have not connected any phones to the system so the application will launch on the emulator and you can see that the

application has been installed successfully on the system and now it has been launched as well let's head back to our emulator and on an emulator we can actually see our application

running now let's go ahead and run our ionic application on an iOS simulator to do that we will have to execute all the same commands so we start by adding the iOS platform the command to do that is

ionic Cordova platform add iOS and now you can see that we have a folder called iOS inside the platforms folder which contains the I was billed for our ionic application the platform iOS has been

added successfully to our ionic application now we need to build this application for iOS and the things get a little trickier here for iOS the usual command should be ionic Cordova build

iOS but along with that with the latest version of Xcode we have to pass in additional parameters and those are – – build flag and you have to set it equal to – use modern build system and you

have to set it equal to zero this flag is required if you are running the latest version of Xcode however if you are running an older version of Xcode then you do not need to add this flag go

ahead and press ENTER and this command will build the application for iOS and the build has succeeded so now that the application has been built successfully for iOS we can go ahead and

run this application for iOS to do that we can execute the command ionic Cordova run iOS but this command does not work for most people the easier way to run this application

on an iOS simulator is go to the project folder open the platforms folder open the iOS folder and in here you have the iOS build of your ionic application open the file with the name my app but Xcode

projects code project this file will open the project in Xcode and once the project opens up in Xcode you can run it on an iOS simulator here you can see that the current simulator which is

selected right here is iPhone X R you can choose a different version of simulator if you want to for now I am going to run this application on the one that is selected right here I'm just

going to hit the play button right here and select run and now you can see the iOS simulator and once it boots up the application will launch on the simulator

and there we have our ionic application running on an iOS simulator and this is how you can run your applications on Android and iOS simulators or even on real devices so now that we know how we

can run our applications on Android and iOS devices let's understand how an ionic application works