Premiers pas avec Ionic Framework 3.9

Attention, tout ce que j’écris dans ce poste est encore purement hypotétique et empirique. Ce ne sont que les fruits de mes recherches personnelles sur le sujet. Certaines choses sont vraies, d’autres marchent sans que je comprenne encore totalement leurs fonctionnements.

ressources :

• Node.js
• Ionic Framework
• Angular.js
• OpenClassRoom : cours sur Ionic (ancienne version)
• GraphikArt : cours sur Ionic v1.0 (très vieille version)

Qu’est ce que Ionic Framework ?

Ionique est une boîte à outils faisant partie de la famille d’app-bluider (constructeur d’app mobile hydride). En effet il permet de concevoir une application mobile avec des languages web. Le résultat est affiché dans un WebView. Grâce à Cordova, sur lequel Ionic repose, on peut utiliser les propriétés natives des mobiles, comme la géolocalisation, l’appareil photo numérique etc… C’est un gain de temps de développer avec un outil comme celui-ci, car il est capable de compiler le code pour IOS, Android et Windows avec le même code source. Le revers de la médaille c’est que les performances sont un peu en deçà de ce que l’on peut attendre avec un code natif, écrit directement dans le language de l’appareil. Cette solution est donc très appréciable lorsque le temps manque, que les finances manquent ou que les ressources en développeurs natif manquent.

Installation de Ionic

Pour pouvoir jouer avec Ionic, il faut utiliser NPM, le manager de paquets de Node.js. Donc logiquement il faut déjà installer Node.js sur la machine de dev.
Puis executer cette commande dans l’invite de commandes de Node:

$ npm install -g ionic cordova

Ensuite il faut créer un nouveau projet, pour les besoins de ce premier test je ne pars pas seul. On va y aller progressivement !
Allez on lance la commande, toujours sur Node, dans le dossier où l’on veut installer notre projet (pour se promener dans les dossiers en ligne de commande sur Windows) :

ionic start NomDuProjet tutorial

Node se charge d’installer tout ce qu’il faut. D’ailleurs visiblement depuis la nouvelle version de Ionic le transpileur est intégré, ce qui allège le nombre de fichiers à la racine.
A la question, « Voulez vous installer Cordova » on réponds y (comme YES) puisque le but est de créer une App mobile hybride.

Créer une nouvelle page

Pour créer une nouvelle page il faut l’ajouter à la liste des templates dans src/app/app.component.ts

Attention le nom employé dans import{} ou le component: doit être strictement identique au nom de la class du controller

import { CustomPage } from '../pages/custom/custom';

export class MyApp {
     ...
     constructor(...) {
     ...
     this.pages = [
         ...
         { title: 'My First Custom Page', component: CustomPage }
         ...
];

Ici le this.pages permet d’ajouter à l’Array pages l’info "title" et "component"

qui permet d’aller chercher le modèle, la vue et le controleur

Puis également dans src/app/app.module.ts :

import { CustomPage } from '../pages/custom/custom';

@NgModule({
     declarations: [..., CustomPage, ...],
     imports: [...],
     bootstrap: [...],
     entryComponents: [..., CustomPage, ...],
     providers: [...]
})

Je ne comprends pas encore bien dans le détail, mais apparement on l’ajoute à la bibliothèque de composant pour être « lu » dans le fichier précédent src/app/app.component.ts

Sans oublier de créer l’arboresance de fichiers minimal src/pages/custom/{custom.html}{custom.scss}{custom.ts}

et de déclarer le component dans le fichier TypeScript:

@Component({
    selector: 'page-custom',
    templateUrl: 'custom.html'
})

Hello world!

Maintenant que notre page est ajoutée, tous ce passe dans le composant déclaré dans src/pages/custom. Basé sur Angular.js on met en place le code suivant :

import { Component } from '@angular/core';
@Component({
     selector: 'page-custom',
     templateUrl: 'custom.html'
})
export class CustomPage {
     constructor() {
          this.helloWorld();
     }
     helloWorld(){
          alert("Hello world!");
     }
}

On crée une methode HelloWorld() sans paramètre, qui ne va que afficher un prompt avec "Hello wolrd!" dedans quand le constructeur sera lancé (à l’instanciation de la Class CustomPage) … Magique !

Rien de fou-fou, mais avec ça on comprends déjà un peu mieux le déroulement de l’appel des pages de notre App et c’est pas rien !