Importance of Natural Resources

Setting up your dev environment to start building Ionic Apps


Hello everybody It’s Dayana from IonicThemes and in this video, I will talk about setting up your development environment in order to start building ionic framework apps Also, I will show you how to unpack Ion2FullApp Ionic Template and how to install all the dependencies required by the template. We will go through the process of browsing your ionic project on your browser, and also I will show you how to use DevApp to load your ionic app and to develop with live reloading on your devices. If you are new to the ionic framework check the previous video where I explain What ionic framework is and how you can benefit by using the templates we have created in IonicThemes. So let’s start! Ionic apps are created and developed primarily through the ionic command-line utility Also known as the CLI and use Cordova to build and deploy as a native app. This means that we need to install a few utilities to get developing. So if you are new to Ionic development, please go to this page over here in order to see how to install node and NPM and then ionic CLI and Cordova. So, I already have them installed in my computer but I will show you how you need to do it if you don’t have them. First you need to check if you have node and NPM. So you will open a Console or a terminal. I use Mac so I use iTerm so you will you will type node -v to see if you have it installed, I have it You’ll also check if you have NPM. I already have them. But in case you don’t have them installed just follow the steps from this link. After having installed NPM and node we will follow with ionic and Cordova CLI. So, you have to type this on your terminal and this will install both Ionic and Cordova and it will install them globally as it explains here. I also have them installed so I will not do it, but you just need to copy this and paste it here and it will do the rest alone so After you have all these dependencies installed We will Our development environment will be ready to start building a Ionic apps. But as you may know Ionic project itself needs Some dependencies in order to work So, let’s see how to install the dependencies of one of the Ionic starter apps we have here at IonicThemes Once you buy a template in ionic themes you will get an email with a link to download a zip File which will contain all the source code of the template So, let’s see. I will show you how it will look like for example here I have this Ion2FullApp Elite zip and After unzip this is the folder so I will move it to Copy and move it to this other folder So now here we can go to that folder where I put the code cd ionic-videos And the name is… you can change this name, obviously so Now we are inside the folder of our ionic project So we need to install the dependencies needed by the project. I will open the project on a code editor I use atom but, you can use the one you like, so What I want to show you here is this project this ionic project has a package.json file where All the dependencies required by the project are defined here. You can see that in this case there are a lot because this template is the most complete template that we have in IonicThemes and has lots of integrations and libraries Obviously, you don’t need them all but in case you want to use them, you have them here. So in order to install all of these we have to run inside our project folder ‘npm install’ This can take a few minutes All the dependencies got installed and we have this huge message we will see that there is a node module folder and Inside it has all the packages needed. So we are ready to run this Ionic app on our browser We will go here and run ‘ionic serve’ This will build the project And then it will open our browser and the project will be live there… I will show you in a few seconds…. So now as you can see our app is ready. It is being served on this port so we will go there it’s here We will change the view so we can view it as a mobile app. I use Chrome. So you can see this is the app we are working with You can see that you can check it here. You can use it here Please note that Cordova plugins will not be available here because we are in the browser and not on a real device so here you can see, you can test the app and everything is beautiful 🙂 So, we can also use the ionic DevApp. I don’t know if you are familiar with it, but you can learn more about it here. You have to download this app. Here are the links install it on your phone. With this app you can run and test and build the ionic app directly on your phone. I will show you in my phone how it looks like. So, when you build your app with ionic serve you will see this DevApp and you will see this so you have to go to your phone open the app here open the app. It will automatically discover. You have to connect both Your phone and your computer to the same Wi-Fi network So the app can discover the apps that are being browse on that Wi-Fi So I have this one Ion2FullApp, I will click it After a few seconds, it will be ready for us to see it here Now, okay, so this is the screen of my phone I’m browsing the app You can also see that if we change anything, this will automatically will be reloaded here. For example, we can change… this text signup text. So let’s go to the code We have Internationalization so It’s in this JSON file. So I will change it here test video and then Save so here you will see that it’s It will get reloaded This is on my phone Here you can see ‘test video’ so It was very fast It’s very easy to deploy apps this way I use it a lot because sometimes as you can see the browser is a bit slow. I prefer to see it on my phone so In this video we learned how to have everything ready to start customizing your Ionic apps we show you how to configure the live reload and also how to deploy your App to DevApp. In the next video We will show you how to deploy your final app to iOS and Android devices so It has not to be your final app, but you can deploy that to your devices in order to test the Cordova plugins to see how everything works and To have like a more real life scenario So I hope you like this video and see you in the next one. Bye!!


Reader Comments

Leave a Reply

Your email address will not be published. Required fields are marked *