How To Create Your First App Using Ionic?
The first application is always a leap for any developer and so was for me! Analyzing things, keeping a check on client’s requirement and framing an output as per the desired criteria may seem tough at first, but things were much sorted out when I was on the go.
So without any further ado, I’m going to provide a simple step by step guideline for an Ionic application development and all its key ingredients within Ionic Framework. Believe me, its not that difficult rather it’s more interesting and simple. Let’s get started.
This program requires some basic knowledge of the ionic framework which I explained in my last blog. First timers can click here to understand the Ionic framework. Another thing required is the installed ionic platform along with node modules and Cordova on your machine.
You will also need an editor to write code and implement it. Visual studio code or Atom will be fine as they are compatible and user-friendly.
Create Your Ionic App
So, without wasting any further minute, let’s get started with the creation of an Ionic App. Below are the step-by-step guidelines for the same:
Step 1 – Locating the Project
Open your command line and choose the location where you want to put your first project. Placing it on the desktop is handier as it is easy to find many times.
Step 2 – Project Creation
Once the location is set, run the following command on the command line:
ionic start projectname
This command will load all the node modules and files along with the pages/screens required for the project. Open the created project in the editor, I will prefer visual studio code. The project structure which you will see will be something like this
Once you open the project, it is time for running it and to see how it looks. So, the next step will tell you how to run it in the browser.
Step 3 – Running the Project in Browser
In order to view the app in the browser run the following command in command line
You can see the application on the browser and will look something like this
In case if you want to run the project on the real device then Ionic got this covered for you.
Step 4 – Running the Project on Device
To run the application on the real device run the following command through the command line:
ionic cordova run android (For Android) ionic cordova run ios (For iOS)
Make sure that you have platforms installed for the project before running it on any one of them.
You can install them by running the following command:
ionic platform add android (For Android) ionic platform add ios (For iOS)
This was all for creating and running an Ionic project on the device and browser. Now, I will explain the code written in Ionic tags and Angular 2.
When you go to look into the project in the visual studio code, you will find a folder named home has been created by the system under the folder named pages which further contains 3 files namely:
Let’s see all these 3 types of files one by one.
This page consists of ionic tags and HTML styling which can also be said as the canvas for any screen in the application.
Here the page starts with ion-header tag which is the entry point of the page and describes the header of the page.
Then comes ion-navbar tag. This tag provides you space to put the image, text here as per your requirement in the header section of the page.
After that comes ion-title tag which is where we write the text which comes on the page name in the header part. After completing header part, it is time for the content part or we can say the body of the application where all the components required to interact in which the applications are placed.
the ion-content tag is where we write all the components of the page. All the components like button, input, text or list it goes here. For instance, here a simple line has been written which is system generated. Suit yourself with some different component.
This file is called the style sheet for the HTML file support. All the custom styling required for the component in HTML page is done here and referenced in HTML page later. The code written here is in the CSS and it will look something like this.
Coding in *.ts file is easy and can be easily understood.
Starting from the top, it shows the providers imported for the application with their respective packages path. Then there is selector tag and templateUrl tag which defines the template name and selector name which is also the page name.
Apart from the page folder, there is this app folder which I discussed in my earlier blog. This folder also contains 3 files which are responsible for the moment of the application and registry of the new pages in the application.
Resource folder which is also named as src in the project structure. This folder contains the splash screen and icon of the application. At the time of creation of the project, there are default images for splash screen and icon. It can be changed with the following command on the command line. But before running the command we need to add the icon and splash screen images specifically in the .png extension files. The steps go like this:
Step 1: Add two images namely icon and splash in the src folder with png extension of both the files.
Step 2: After adding images to src folder run the following command on the command line
This command will update the icon and splash screen of the application with generating both images for all the possible resolutions of the mobile phones and tabs as well.
This is whole for writing the first application in Ionic. Isn’t it interesting? A lot more will come in the upcoming blogs. Stay connected for more updates!