Part 1: Getting started with IONIC

What is IONIC: 

Itis a mobile development framework that enables you to create apps for iOS, Android, Windows and other mobile platforms using the web technologies like JavaScript, HTML and CSS. It uses Angular framework on the front-end and leveraging on the power of Apache Cordova on the back-end to create hybrid mobile applications.

Whatis Cordova:

Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language

Before getting started, make sure that you have the latest version of node.js, npm and git.

$ node --version
$ npm --version
$ git --version


Steps to create a IONIC Project:

  1. Install the IONIC CLI
npm install -g ionic cordova


2. Create IONIC directory, get in the directory then start a new ionic app:

    ~ $mkdir IONIC4
     ~ $cd IONIC4/
IONIC4 $ionic start cross-app blank


3. Open cross-app project with Intellij:

Image 12 10 2019 a 18 33

4. Launch the app on the browser:

$ cd cross-app/
$ ionic serve


5. Generate the pages:

    ionic g page meteo
    ionic g page gallery
    ionic g page location
    ionic g page menu
    ionic g page login

6. Create the authentification service:

    ionic g service services/authentification

Image 20 10 2019 a 23 32

Part 1: Display home page

Bellow is the screenshot of the home page that we will create.

Image 21 10 2019 a 00 27

Modify the following pages. The logo's picture is added in the directory assets/images



Mohamed, Youssfi. Part 2 Développement Mobile Hybride avec IONIC 4.

Mohamed, Youssfi. Part 3 Développement Mobile Hybride avec IONIC 4.


Add a comment