IONIC - Creating New Project

Creating New IONIC Project



Please follow previous post if you haven't already installed ionic in your system.

To create a new project use ionic start command as below.

ionic start app_name [template]

Here, the app_name is the name of the app that you want to create.

template is the piece of code to be created as a base, on top of which you want to develop the project.

A template can be ready-made templates such as blank, sidemenu, tabs - these come with ionic framework itself or any codepen or github url(explained below).

To make it clear, first let us create a project using ready-made template

ionic start sampleproject1 tabs

This command will create an ionic project based on the template given.

In the process of creating the app for us, it will ask for confirmation as to whether you want to create ionic.io account for this application. This is needed for push notification and use "Ionic view" app to view the app that we are creating now. 

Note: If you don't get it now, just ignore this part. Just press 'n' (No) for now.

Now we have our app created by ionic CLI tool for us.

The app creation flow would look something like below.


Next one is, create an app with codepen template

Codepen is a place where you can run and share your front end web work. For more, click here.

Swipable Card Nightly is one of the template that I like most in codepen. let us make a project using this template.

ionic start sampleproject2 http://codepen.io/ionic/pen/skbxh

This command also creates an app in the same way as the above one with a ready-made template.

Creating app using Github url 

Executing below command will create an ionic project using github template

ionic start sampleproject3 https://github.com/driftyco/ionic-starter-tabs

All method of creating project will have the same folder structure as shown below, except that www folder will have corresponding template code in it.




 Config.xml file

config.xml will reside in app root folder and is the main file for any ionic project you would ever create.

By default, ionic app creation tool will create an ID and Version for the app we create, something like below.

id="com.ionicframework.sampleproject1807227" 
version="0.0.1" 


We can change these values as per our need and this is the ID that will be used in google play store or apple store to identify your app. So make changes wisely.

We will discuss about the other tags of the config.xml file in another post.

Live Preview

We can see the preview of the app that we develop using serve command that ionic provides.

At first, navigate to the root folder of the app. In our example,

cd sampleproject1

and then type as below,

ionic serve -l -c

Note: This might prompt to choose an address if multiple addresses are available in your system as shown below. Just give any number.

This awesome serve tool will open our app in default browser. We can use this feature for debugging by putting break points in between.

Here optional param l - denotes lab, that is, live preview will be shown for both Android and iOS as shown below.


c - for displaying console logs in the command line tool itself.

Ionic has given an awesome feature called LiveReload, that is, whenever we make changes in the www folder, except lib, the preview will refresh automatically. cool! Isn't it?

Adding Platform to the Project

We have to add the platforms, that we want our apps to support, to the project.

For example, if we want to add support for Android platform, we can add the same like this.

ionic platform add android

for iOS,

ionic platform add ios 

Note: If you create ionic project in MAC, Ionic will add iOS platform for you by default.

You can see the added platforms under "platforms" folder in project root folder.

In the same way, we can remove platforms from the project, If we wish to, like below.

For example, to remove android platform from project.

ionic platform rm android  

Build the Project

Use below command to build projects for particular platform.

ionic build [platform]

For example, to build the project for android platform,

ionic build android

make sure that you have Java JDK installed and have set the JAVA_HOME and android SDK path in PATH environtment variable.

If build succeeded, then debug apk would have been generated in /output/apk/your_app_name.apk inside android platform folder.

For iOS,

ionic build ios

Run the Project

You can run the project using below command.

ionic run platform [options]

To run, android project,

ionic run android

Ionic will look for any real devices to deploy the package, if no devices attached, then it will deploy the package to a platform specific emulator.

Note: You can check what all are the real devices connected to the system using

adb devices

If you want to run the app in an emulator, you can use below command

ionic emulate andriod

Replace android with ios to run the project for iOS platform.

In the next post, I will share step by step guide to create a simple TO-DO list application using awesome IONIC Framework.


Thanks,
Jey

0 comments:

Post a Comment