Ionic 3, nouveauté et premier tutoriel avec Ionic 3 et Angular 4 (connexion avec un web service REST)

ionic 3

Annonce de Ionic 3

Attendez, l'Ionic 2 vient juste d’être lancé y a quelques mois, n'est-ce pas? Ne vous inquiétez pas! Ionic 3 est Ionic 2 avec quelques changements de rupture. Comme Angular, qui arrive à sa 4éme version y a quelques jours, ce qui signifie que lorsque certaines mises à jour nécessitent des changements structurels, le nombre de version majeur augmente en conséquence.

Cette version est livrée avec un support pour Angular 4 et un support expérimental pour Lazy Loading. 

Plus de détail sur le blog d'Ionic : http://blog.ionic.io/ionic-3-0-has-arrived/ 

Créez des applications de bureau avec le nouvel volet Split Pane et Grid d'Ionic

Créez des applications qui fonctionnent sur un mobile, une tablette, et maintenant application desktop avec les nouveaux contrôles Split Pane et Grid d'Ionic. Nous nous rapprochons de notre vision d'une application ionic exécutée partout où vos utilisateurs sont, et ces deux composants sont des pièces majeures de ce puzzle.

Découvrez  Split Pane et la nouvelle responsive Grid!

L'Ionic 3 est encore en version bêta. Avant de commencer, il faut faire une liste de contrôle.

- Node.js déjà installé avec l'invite de commande .

- Il faut mettre à jour Ionic à l'aide de cette commande.

npm install -g ionic

Créer une application Ionic 3

Toujours comme la version précédente d'Ionic. Tapez cette commande pour créer une nouvelle application nommée ionic3. (cette commande n'est plus à jour, utilisez la commande de la partie mise à jour)

ionic start ionic3 --v2

Cette commande utilise toujours le préfixe "--v2", mais ne vous inquiétez pas si vous vérifiez les dépendances dans "package.json", vous verrez la différence.
mise à jour :

Si vous utilisez la commande précédente vous obtiendrez :

[ERROR] Sorry! The --v1 and --v2 flags have been removed.
        Use the --type option. (ionic start --help)

        For Ionic Angular projects, try ionic start ionreddit --type=ionic-angular

La commande pour Ionic cli v3.x est:

ionic start ionic3 blank --type ionic-angular

Si vous voulez ionic 1:

ionic start myapp blank --type ionic1

Maintenant, vous devez vous placer, avec l'invite de commande, dans le dossier de votre projet (ionic3) et faites l'exécution sur le navigateur après avoir taper cette commande.

ionic serve -l

Vous allez avoir un projet ionic 3 avec 3 tabs :Home ,about et contact.

Dans ce projet nous allons tenter d'afficher une liste de pays qui existent dans ce lien qui affiche les données sous format JSON : https://restcountries.eu/rest/v2/all 

Ionic 3 : connexion avec un web service REST

Tout d'abord, pour pouvoir accéder à un API REST, nous devons créer un service ou un Provider par  cette commande.

ionic g provider rest

Vous allez obtenir un dossier provider dans lequel il  y a un fichier rest.ts
Ouvrez ce fichier et mettez le code suivant dans ce ficher :

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class Rest 








{

constructor(public http: Http) 

{

this.http=http;

}

getAll()

{

return this.http.get('https://restcountries.eu/rest/v2/all').map(res=>res.json());

}

}

Nous devons enregistrer "HttpModule" dans "app.module.ts", ajouter cette importation à "app.module.ts".

import { HttpModule } from '@angular/http';

Dans la section @NgModule imports, ajoutez "HttpModule" pour qu'il ressemble à ceci.

imports: [
  BrowserModule,HttpModule,
  IonicModule.forRoot(MyApp)
  ],

Toujours dans "app.module.ts", enregistrez le Provider "Rest" en l'important en premier.

import { Rest } from '../providers/rest';

Dans la section des providers @NgModule, ajoutez "Rest".

providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler}, Rest
 ]

Maintenant, il est temps d'afficher la liste des pays dans la page Home. Tout d'abord, nous devons modifier " home.ts" et mettez ce code.

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Rest } from '../../providers/rest';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

items :string[];

constructor(public navCtrl: NavController, public rest:Rest) {

this.getPays();

}

getPays()

{

this.rest.getAll().subscribe(res=>{

this.items=res;

});

}

}

Maintenant modifier le code du fichier home.html et mettez ce code :

<ion-header>

<ion-navbar>

<ion-title>Home</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item *ngFor="let item of items">

<ion-avatar item-left>

<img src="{{item.flag}}">

</ion-avatar>

<h2>Pays : </h2> <h2>{{item.name}}</h2>

<p>Capitale : {{item.capital}}, Region : {{item.region}}</p>

</ion-item>

</ion-list>

</ion-content>

Tester votre code maintenant avec ionic serve --lab .
Si vous voulez exécuter votre projet sur un device android, branchez le avec votre pc , puis exécuter la commande suivante ionic platform add android et par la suite ionic run android