How To Develop IONIC Native App in Android And IOS

IONIC is free and open source mobile SDK for developing the native and progressive apps in simple and quick way. You don't need to know any new technology if you know html and javascript programming already.

IONIC based app development steps can be concised as below. Here we are dealing with IONIC 3.9.2 at Windows 10 platform.

1. Installing ionic framework
2. Starting the new ionic project
3. Opening or running existing ionic project
4. Adding page in existing ionic project
5. Importing or Exporting classes in existing ionic project
6. Useful commands list
7. Getting help for ionic commands

Each step has been explained as below using useful commands :

1. Installing ionic framework –
   
   1. Download Node.js latest version from “nodejs.org” and run the exe installation file. It will install “node.js” and node module – “npm” in your computer.
   2. Open “Node.js command prompt” at navigating - start > programs > Node.js in the windows. It will display “CLI” (Command Line Interface) at your screen as like “window command prompt” windows
   3. Now type below command for installing the ionic support files at your computer -
      npm install -g ionic@latest
      
   
   
2. Starting the new ionic project –
   Navigate at your folder path where you want to start the new project. For example – I will use following command for starting the new project “bookstokri” with sidemenu functionality
   ionic start bookstokri sidemenu
   
   //New project “bookstokri” with tab functionality, “bookstokri” folder will be created automatically at your end folder path.
   ionic start bookstokri tabs
   
   //New project “bookstokri” with blank functionality, “bookstokri” folder will be created automatically at your end folder path.
   ionic start bookstokri blank
   
   Experiment -
   Please view the screenshot below for creating a new project in my case. You can view support files is being downloaded at your computer at given directory via ionic team git repository.
   
   
   
   
   
3. Opening or running existing ionic project –
   
   1. Navigate your project folder. For example – I have a ionic project at
      E:\development\ionic\ionicapps\bookstokri>
   2. Now run the command below at your project folder –
      
      1. Run your project in the android emulator(if you have Android Studio ADM at your computer.)
         ionic cordova emulate
         or
         ionic cordova emulate android
         eg. E:\development\ionic\ionicapps\bookstokri>ionic cordova emulate android
         
      2. Run your project in the android device connected at Android Studio –
         ionic cordova run android --YOURDEVICENAME
         
         Please note- make sure your device should list at android studio deployment target like below image otherwise it will open in android studio available emulator.
         
         
         
         For device name you need to place or browse below command in the Google chrome :
         chrome://inspect
         It will list your connected devices in the browser as below :
         List of devices attached
         YOURDEVICENAME
         
      3. Run your app in the browser as localhost:
         ionic serve
         It will open your project in the default browser.
         
   
   
4. Adding page in existing ionic project
   Navigate at your folder or project path where you want to add page. Use below command. You can generate pipes, components, pages, directives, providers, and tabs using this command.
   ionic g page yourpagename
   
   This command will automatically create three files in the folder name "Yourpagename" as below -
   yourpagename.html ----for html codes
   yourpagename.ts ------for javascript logic codes
   yourpagename.scss-----for style
   
   
5. Useful commands list
   Adding target platforms
   ionic platform add android | ios | windows
   
   View connected devices -
   ionic cordova run android target --list
   
   Adding plugin in the existing project
   ionic cordova plugin add yourpluginname
   For example - command for adding InAppBrowser plugin > ionic cordova plugin add cordova-plugin-inappbrowser
   
   
6. Importing or Exporting classes in existing ionic project
   You can view classes import statement at ionic application folder at - src/app/app.module.ts
   The basic syntax of an import is used as below:
   import {ClassName} from 'path/to/classname';
   For example -
   import {MyPage} from './mypagefolder/mypagefile'; //Here we are calling mypagefile.js without extension ".js".
   import {MyDataService} from '../mydataservicefolder/mydataservicefile'; //Here we are calling mydataservicefile.js without extension ".js".
   
   Please note - Applying "./" at the beginning of the path shows that the path is relative to the current folder. "../" shows to go up a folder.
   
   We can import multiple classes from the same file as below example -
   import {ClassOne, ClassTwo, ClassThree} from '../mydatafolder/myservicefile';
   
   "Export" keyword is used for making a class importable in ionic. For example -
   export class MyClassNameForMakingImportable {}
   
   
7. Getting help for ionic commands –
   
   1. Global Commands:
      Open “Node.js” command prompt and type following command
      Ionic –help
      It will list all help text and command list.
      
      For getting help about ionic run command -
      ionic cordova run –help
      
      It will list all help text and command list with example as below –
      ionic cordova run - Run an Ionic project on a connected device
      Like running cordova run directly, but also watches for changes in web assets and provides live-reload functionality with the --livereload option.
      For Android and iOS, you can setup Remote Debugging on your device with browser development tools:
      https://docs.ionic.io/tools/developer/#remote-debugging
      Just like with ionic cordova build, you can pass additional options to the Cordova CLI using the -- separator.
      Usage:
      $ ionic run [] [options]
      
      Inputs:
      platform ................. The platform to run: ios, android
      Options:
      --list ................... List all available Cordova targets
      --livereload, -l ......... Spin up server to live-reload www files
      --consolelogs, -c ........ Print out console logs to terminal
      --serverlogs, -s ......... Print out dev server logs to terminal
      --address ................ Use specific address for dev/live-reload server (default: 0.0.0.0)
      --port, -p ............... Use specific port for the dev server (default: 8100)
      --livereload-port, -r .... Use specific port for live-reload server (default: 35729)
      --prod ................... Mark as a production build
      --aot .................... Perform ahead-of-time compilation for this build
      --minifyjs ............... Minify JS for this build
      --minifycss .............. Minify CSS for this build
      --optimizejs ............. Perform JS optimizations for this build
      --debug .................. Mark as a debug build
      --release ................ Mark as a release build
      --device ................. Deploy Cordova build to a device
      --emulator ............... Deploy Cordova build to an emulator
      --target ................. Deploy Cordova build to a device (use --list to see all)
      --buildConfig ............ Use the specified Cordova build configuration
      Examples:
      $ ionic cordova run
      $ ionic cordova run ios
      $ ionic cordova run ios –lcs
      $ ionic cordova run android -lcs --address localhost
      $ ionic cordova run android -lcs -- -d
      
      
      
   2. Project related commands –
      Go or navigate at you project folder and run below command to view and know about project related ionic commands.
      ionic cordova –help
      This command will list all commands and help texts.
      
      Usage:
      $ ionic cordova [] [--help] [--verbose] [--quiet] [--no-interactive] [--confirm] [options]
      
      Project Commands:
      build .................... Build (prepare + compile) an Ionic project for a given platform
      compile .................. Compile native platform code
      emulate .................. Emulate an Ionic project on a simulator or emulator
      platform ................. Manage Cordova platform targets
      plugin ................... Manage Cordova plugins
      prepare .................. Copies assets to Cordova platforms, preparing them for native builds
      resources ................ Automatically create icon and splash screen resources
      run ...................... Run an Ionic project on a connected device
      

Tags : Android, IONIC, IOS

By Aashutosh Kumar Yadav

He is a PHP-based UI/Web designer and developer by profession and very interested in technical writing and blogging. He has been writing technical content for about 10 years and has proficient in practical knowledge and technical writing.
@www.infotokri.in