• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 28/11/2019

Profitez des native features : préparez l'application

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

L'un des principaux avantages d'Ionic est qu'il permet, grâce à Cordova, d'accéder aux native features du device de l'utilisateur, c'est-à-dire aux éléments comme l'appareil photo ou la géolocalisation que l'on a dans les smartphones, mais pas forcément dans les navigateurs classiques.  Dans ce chapitre, vous allez créer une nouvelle application qui tourne autour de la Nature : vos utilisateurs pourront photographier des paysages ou autres vues de la Nature qui leur plaisent, et les enregistrer en géolocalisant le lieu où la photo a été prise.

Préparez l'application

Utilisez le CLI pour créer votre nouvelle application  nature-view  de type  blank  et ouvrez-la dans votre éditeur.

La  HomePage  permettra de visualiser la liste des vues déjà créées. Il faudra ajouter une page qui permettra de visualiser les détails d'une seule vue et une page pour la création d'une nouvelle vue.  Vous allez également créer une page qui gérera le lieu où la photo a été prise, permettant à l'utilisateur de choisir un lieu plutôt que de se géolocaliser, s'il le préfère.  Utilisez donc le CLI pour créer les pages  single-view  ,  new-view  et  set-coordinates , et ajoutez-les à votre AppModule :

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SingleViewPage } from '../pages/single-view/single-view';
import { NewViewPage } from '../pages/new-view/new-view';
import { SetCoordinatesPage } from '../pages/set-coordinates/set-coordinates';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SingleViewPage,
    NewViewPage,
    SetCoordinatesPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SingleViewPage,
    NewViewPage,
    SetCoordinatesPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Vous allez également créer un modèle pour vos données.  Chaque  NatureView  aura un nom, une date et une description.  Pour lui attribuer un lieu, il lui faudra également une longitude et une latitude.  Enfin, pour lui attribuer une photo, le modèle comportera le chemin vers cette photo.  Créez dès maintenant  NatureView.model.ts  dans un dossier  models  : 

export class NatureView {
  constructor(public name: string,
              public date: Date,
              public description: string,
              public latitude: number,
              public longitude: number,
              public imagePath: string) {}
}

Ensuite, il faudra un service pour la gestion des données.  Plus tard dans ce chapitre, vous apprendrez à stocker ces informations dans le storage du device de l'utilisateur, mais pour l'instant, vous allez créer un service qui contiendra la liste et qui l'émettra sous forme de Subject.  Créez  natureView.service.ts  dans un dossier  services  :

import { NatureView } from '../models/NatureView.model';
import { Subject } from 'rxjs/Subject';

export class NatureViewService {
  private natureViewList: NatureView[] = [];
  natureviewList$ = new Subject<NatureView[]>();

  emitList() {
    this.natureviewList$.next(this.natureViewList);
  }

  addNatureView(view: NatureView) {
    this.natureViewList.push(view);
    this.emitList();
  }
}

Injectez le service dans  AppModule  :

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

La  HomePage , qui affichera la liste complète des  NatureView , va donc souscrire à ce Subject et déclencher sa première émission :

import { Component, OnDestroy, OnInit } from '@angular/core';
import { NatureView } from '../../models/NatureView.model';
import { Subscription } from 'rxjs/Subscription';
import { NatureViewService } from '../../services/natureView.service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit, OnDestroy {

  natureViewList: NatureView[];
  natureViewListSubscription: Subscription;

  constructor(private natureViewService: NatureViewService) {

  }

  ngOnInit() {
    this.natureViewListSubscription = this.natureViewService.natureviewList$.subscribe(
      (natureViews: NatureView[]) => {
        this.natureViewList = natureViews;
      }
    );
    this.natureViewService.emitList();
  }

  ngOnDestroy() {
    this.natureViewListSubscription.unsubscribe();
  }

}

Ensuite, vous pouvez préparer le template :

<ion-header>
  <ion-navbar>
    <ion-buttons end>
      <button ion-button icon-only [navPush]="newViewPage">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
      NatureView
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card *ngFor="let view of natureViewList" (click)="onLoadNatureView(view)">
    <img [src]="view.imagePath">
    <ion-card-title>{{ view.name }}</ion-card-title>
  </ion-card>
</ion-content>

Un bouton  +  s'affichera dans la navbar pour ajouter une nouvelle NatureView. La liste des  NatureView s'affichera dans des  ion-card  qui seront cliquables pour accéder à la  SingleViewPage  correspondante.  Ajoutez la propriété  newViewPage  au fichier TypeScript pour activer la navigation (sans oublier de l'importer) :

export class HomePage implements OnInit, OnDestroy {

  natureViewList: NatureView[];
  natureViewListSubscription: Subscription;
  newViewPage = NewViewPage;

Maintenant que vous pouvez accéder à  NewViewPage  , il est temps de la créer.  Vous allez utiliser la méthode réactive pour créer un formulaire pour le nom, la date et la description de la NatureView.  Vous intégrerez plus tard le lieu et la photo, mais préparez dès maintenant des propriétés : 

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'page-new-view',
  templateUrl: 'new-view.html',
})
export class NewViewPage implements OnInit {

  natureViewForm: FormGroup;
  latitude: number;
  longitude: number;
  imageUrl: string;

  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.natureViewForm = this.formBuilder.group({
      name: ['', Validators.required],
      date: [new Date().toISOString(), Validators.required],
      description: ['']
    });
  }

}

Et le template correspondant :

<ion-header>
  <ion-navbar>
    <ion-title>Ajouter NatureView</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <form [formGroup]="natureViewForm">
    <ion-list>
      <ion-item>
        <ion-label floating>Nom</ion-label>
        <ion-input type="text" formControlName="name"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Date</ion-label>
        <ion-datetime displayFormat="D/MM/YYYY" formControlName="date"></ion-datetime>
      </ion-item>
      <ion-item>
        <ion-label floating>Description</ion-label>
        <ion-textarea formControlName="description"></ion-textarea>
      </ion-item>
    </ion-list>
    <button ion-button
            full
            (click)="onSubmitForm()"
            [disabled]="natureViewForm.invalid">Enregistrer</button>
  </form>
</ion-content>

Les premiers éléments de l'application sont prêts.  Avant de passer à l'étape suivante, je vous propose de modifier le thème de l'application.  Je trouve personnellement que les applications pour les photos sont plus jolies sur un fond foncé plutôt que sur un fond blanc.  Heureusement, Ionic fournit un thème tout fait dans ce style.  Dans  variables.scss , dans le dossier  theme , descendez à  App Theme  et modifiez la ligne qui s'y trouve :

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.

@import "ionic.theme.dark";

Votre application a maintenant un thème plutôt "blanc sur noir". Vous pouvez passer à la prochaine étape : la gestion de la géolocalisation.

Exemple de certificat de réussite
Exemple de certificat de réussite