IONIC Section 6 - 6.3 Create an IOS application

Click here for more videos available on our youtube channel !

Hello everyone, in this video we are going to create an IOS application, but first of all, I would like to clarify a point with you, Regarding the application, in the recipe page, you may have "r1" and "r2" displayed and without the recipe image. Indeed, if this is the case, please correct your "recipe-item.component.html" file by inserting "recipeItem" in front of your objects element. So if you need to correct, I'll let you pause before continuing. Now that it's rectified, we can start designing our IOS application. So as I said in the previous video, we can rely on documentation, via “developing for IOS”. And in the first lines we can see that we will need the Capacitor or Cordova tools, so we will take Capacitor because it is developed by the Ionic team but however, you have instructions for use via Cordova if you wish. Therefore, we will therefore use Capacitor in this course. You can now run these commands to configure your app for IOS and run it on an IOS device, but first you need to make sure you have the environment setup of IOS development. You can also consult the documentation of Capacitor via IOS You will find a detailed description what you need to configure your computer to create IOS applications. Now we will install "Xcode" on the app store on your Mac, so it can be searched on the store. Once installed, you need the tools to Xcode command line. You get them by opening your terminal on your Mac and typing "xcode-select". Now if that gives you a mistake, maybe it's not installed. You will need to type "Xcode-select --install" which will install Xcode command line tools. With all this installed you can go back to the documentation, in “Project Setup” and use the commands here "ionic capacitor add ios" to add IOS as a platform to your project and then run your application on IOS as well. So, back in the project, we will start by adding capacitor with our command, however, it is possible to receive an error concerning application id, dashes are not searched for example, so be sure to remove them in your "capacitor.config.ts" file. So do it if necessary and you will see that it will work again. For my part, I had an error concerning the fact that "cocoapods" is not install. All you have to do is run the command “brew install cocoapods” which will allow you to install the necessary dependencies to install cocoapods. So once the command is executed, you will have a new “IOS” folder and this is a folder that you can open with Xcode and which contains the native Xcode application in which our web application, our Ionic application, will be wrapped. Now that this has been created, you build your project with "ng build" because you can only send this project in a wrapper of your native application. You will also learn how to run a dynamically reloaded application and connect it to your IOS device at the end of the video. For now, let's go through this creation process, which creates a "www" folder containing your Angular project. You can now run "ionic capacitor copy ios" and this will copy the "www" folder to your "ios" folder and instead where it should be able to be encapsulated by this native application so that you exit the Capacitor dialog. You can also run iOS with "ionic capacitor run ios", which combines the build process and the copy process, which is the most convenient command. But it not only copy your files you can choose your simulation device it also has to open Xcode for you now. It not only opens Xcode, but opens Xcode with your IOS folder already selected, which now places it in your "ios" folder. This will build the native application, which will launch a simulator and here is our upcoming application, the first start may still take some time, don't worry, it's normal, it will be very fast once you deploy it to real device and test. And now, we find the application that we made in our previous section, and we also see that we have the buttons back specific to IOS, so here we have this pretty cool rendering. So now our app works on native device, on IOS, but of course it's a bit cumbersome if we always have to re-run the commands and then press the play button each time we let's change something in our code. Indeed, there is a simpler method, you can run the command "ionic capacitor run ios -l", “l” which stands for live reload. And if you restart the app, now this app will be connected to your direct charging server. Every time you edit your code, the app will be automatically reloaded, just like the app in the browser. We will make an example, we will go back to our “recipes.page.html” file and I will modify “recipes” by “cooking recipe” for example, and if we come back to our application in our browser we can clearly see the modification made, but also in our simulator. Now you know how to get this native application, how to test your application on the native device, and of course we will test it from time to time during the course. This video is therefore coming to an end, I hope it was a success for you, and I'll give you an appointment for the next one.