Ionic allows us to create hybrid mobile apps using the web technologies and cordova. It is an open source SDK. AngularJS or any other JavaScript library can be used with Ionic to create hybrid mobile apps. In this post we will learn to set up development environment for ionic development. We will set up environment on a windows machine for Android build, testing of app in browser, and testing app with android emulator. We will use sublime text to do the development and windows command prompt to run the ionic commands. Essentially, we are going to follow the steps as below
- Install NodeJS to use Node Package Manager or NPM
- Install Ionic using NPM
- Install Cordova using NPM
- Create Hybrid application project
- Run application with browser
- Create Android build
- Run application with android emulator
At the end of this post, you should have a default application created using ionic and cordova running inside an android emulator as shown in the image below:
Let us get it started by following the steps below
Step 1
Download and install NodeJS globally. You can download NodeJS from here . We need NodeJS to install other components using NPM. After successful installation of NodeJS, open command prompt as admin and check the installed versions using node –version command.
If you get version returned using the above command, means NodeJS is successfully installed on your machine.
Step 2
Next we need to install ionic globally. We will install that using the Node Package Manager or NPM. Let us run the command
npm install ionic –g
We are using the –g switch to install ionic globally in the machine. It will take some time to install depending on speed of your Internet. After successful installation you should get message as shown in the image below:
Step 3
So far we have installed NodeJS and Ionic. Next we need to install cordova. Once again we will install cordova globally using the NPM. To install let us run the command,
npm install cordova -g
We are using the –g switch to install ionic globally in the machine. It will take some time to install depending on speed of your Internet. After successful installation you should get message as shown in the image below:
Step 4
We have installed Ionic, Cordova, and NodeJS. Now we are good to start first ionic project. To start an Ionic project, we need to use the command
Ionic start appname template
Let us go ahead and create first app using tab template. To start we need to run the following command,
Ionic start MyFirstApp tabs
After successful execution of command, you will find a project folder has been created with MyFirstApp name.
Folder contains files required for the project and www folder. Inside the www folder you will find projects file like index html, JS folder, CSS etc.
We have successfully created the project. In next posts we will get into details of these files. However, for this post let us open folder in sublime text. From the folder select www/templates and then open tabs.html. In this file we are simply going to change title of the tabs. In the tabs.html, I have changed title of tabs and renamed to IG Status, IG Chats etc. as shown in the image below:
We have used tabs template. There are other templates also available, which we can use, they are as follows:
- Blank
- Tabs
- Side menu
- Maps
We have created the project using the tabs template.
Step 5
So far we have installed every required bit and created the project also. Now it is time to run the project. We have three options to run the application
- Run the app with the browser
- Run the app with the device emulator
- Run the app with the device
To run app with the browser, you do need any other SDK to be installed. To run and test the app in browser, run the following command in the root folder of the project. In this case root folder is MyFirstApp. Execute the command as below
Ionic serve
The above command will launch the default browser of your system. If chrome happed be your default browser then you can emulate different device by pressing F12 and toggling to device emulation mode. As you see in below image - application is running and you can change the device agent from the drop down.
We our first iconic application is running with the browser. I have selected iPhone 6 and you can also notice that tabs name has been changed to IG Stats, IG Chats, and IG Account.
So far we have successfully created and ran an iconic application. I am sure, you would agree it was fairly simple to get it started.
Step 6
Before you start this section, I strongly recommend you to install all bits of JDK, Android etc. by following this tutorial
http://cordova.apache.org/docs/en/5.1.1/guide/platforms/android/index.html
After installation, do not forget to set environment variables etc. Since we are on windows machine, let us build the application for android and run with the android simulator. To create android build run the command
Ionic build android
We will get exception that no platform has been added. Let us go ahead and add android platform by running the command.
Ionic platform add android
It will take a while to add the platform. Once platform is added successfully, we can create a build for android by executing command,
Ionic build android
After successful build you should get BUILD SUCCESSFUL message as shown in the image below:
You can navigate to projectfolder/platforms/android/build/outputs/apk to view the apk file created using the android build.
Step 7
We have created android build. Now let us test the application in android emulator. To test application in android emulator, run the command
Ionic emulate android
This command will launch the default emulator and you will find application running in the emulator as shown in the image below:
Also you can see launch success message in the console.
Conclusion
In a step by step manner, we learnt to set windows machine for ionic development. We also created android build and tested application in android emulator. I hope you find this post useful. Thanks for reading.