01_Ionic_Setup

Credit website : https://ionicframework.com/docs

Hi All,

Today I am going to show on how to develop an app using hybrid platform named Ionic.

Before that let learn a little bit about Ionic.

 

Ionic Framework

  • Create a database named “students“.

Ionic Framework is an open source User Interface (UI) for developing mobile app.

It used apps using web technologies which is HTML, CSS and Javascript. This web technologies will be integrated with popular libraries or frameworks like Angular and React.

The good thing about Ionic is One codebase, running everywhere.

 

 

Ionic Framework Features

Following are the most important features of Ionic −

  • AngularJS − Ionic is using AngularJS MVC architecture for building rich single page applications optimized for mobile devices.
  • CSS components − With the native look and feel, these components offer almost all elements that a mobile application needs. The components’ default styling can be easily overridden to accommodate your own designs.
  • JavaScript components − These components are extending CSS components with JavaScript functionalities to cover all mobile elements that cannot be done only with HTML and CSS.
  • Cordova Plugins − Apache Cordova plugins offer API needed for using native device functions with JavaScript code.
  • Ionic CLI − This is NodeJS utility powered with commands for starting, building, running and emulating Ionic applications.
  • Ionic View − Very useful platform for uploading, sharing and testing your application on native devices.
  • Licence − Ionic is released under MIT license.

 

Hopefully, you enjoyed it !!!

Step 1 : Installing Node Js

  • JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. Choose the LTS version.
  • Click next when installing.
  •  

 

To verify the installation, open a new terminal window and run:

$ node --version
$ npm --version

Step 2 : Install the Ionic CLI

Install the Ionic CLI with npm:

$ npm install -g @ionic/cli

If there was a previous installation of the Ionic CLI, it will need to be uninstalled due to a change in package name.

$ npm uninstall -g ionic
$ npm install -g @ionic/cli

The output will be like below:

Step 3 : Start the App

The three most common starters are the blank starter, tabs starter, and sidemenu starter. Get started with the ionic start command:

$ ionic start myApp tabs

Step 4 : Run the App

The majority of Ionic app development can be spent right in the browser using the ionic serve command:

$ cd myApp
$ ionic serve

The output at command window will be like this:

The output at browser: localhose:8100

or when we opened console (press F12), the output will be like this:

 

We also can run ionic lab by type this command below:

ionic serve -l

The result will be like below:



DONE !!!!