Thursday, March 2, 2017

Get start with ionic framework

When I first developed apps using ionic, not many resources over the net will provide good explanation on it. I've found one and it is very easy to understand.

Here is the structure of ionic framework after it successfully execute ionic start command; for example 

ionic start myfirst blank --v2

>> ionic start [your_apps_name] [template] [ionic_framework_version]

the command will create a new folder (myfirst) and construct the following structures

├── hooks // custom cordova hooks to execute on specific commands 
├── platforms // iOS/Android specific builds will reside here 
├── plugins // where your cordova/ionic plugins will be installed 
├── resources // icon and splash screen 
├── scss // scss code, which will output to www/css/
 |── www // application - JS code and libs, CSS, images, etc. 
      |---------css //customs styles 
      |---------img //app images 
      |---------js //angular app and custom JS 
      |---------lib //third party libraries 
      |---------index.html //app master page 
├── bower.json // bower dependencies 
├── config.xml // cordova configuration 
├── gulpfile.js // gulp tasks 
├── ionic.project // ionic configuration 
├── package.json // node dependencies

Following are current potential templates that you can use:
  • tabs : a simple 3 tab layout
  • sidemenua layout with a swipable menu on the side
  • blanka bare starter with a single page
  • superstarter project with over 14 ready to use page designs
  • tutoriala guided starter project

Once it is completed, you will get to see the following message appear:
Downloading:                   sidemenu/archive/                                                
Installing npm packages (may take a minute or two)...                      
♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫                          
Some helpful tips:                                                         
Run your app in the browser (great for initial development):               
  ionic serve                                                              
Run on a device or simulator:                                              
  ionic run ios[android,browser]                                           
Share your app with testers, and test on device easily with the Ionic View companion app:                                                                                                           

Yeah... now you test your apps. Just run ionic serve to view on your browser. It will pop-up your browser and automatically navigate to http://localhost:8100 ... else, you can open your browser and go to the address.

If you want to view in mobile, you may use mobile emulator or deploy on your mobile. Before that, do install mobile platform package first. To do that, run the following command:

ionic platform add ios  // to add ios platform into the package      
ionic platform add android //to add android platform into the package  

Finally, you are ready to run (on emulator or actual device).

ionic run android --prod --release //to run on emulator as production mode 
ionic build android --prod --release //to build as package for installation

For ios, it will require more steps and you can follow it

Lets dance... :)


abuarif said...

This is really good. I managed to get it running as well. Hope to have more in the future.

Mahesh P said...

Nice Information thank you for Sharing useful information. Great job.
Web developer Malaysia

Priya angel said...

This is very nice blog,and it is helps for student's Tableau Online Training

Marjorie Geiser said...

Today all the questions about ionic framework like what is it? It's great framework and Completely free, Open Source which is built on Angular.

Do your next Ionic project from trusted App Developers in Calgary - Devolve

Share It

Popular Posts