• 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 natives features : l'appareil photo

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

L'appareil photo

Comme pour la géolocalisation, il faut d'abord installer les plugins Cordova et Ionic :

ionic cordova plugin add cordova-plugin-camera
npm install--save @ionic-native/camera

Injectez  Camera  dans  AppModule  , tout en l'important, bien sûr :

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

Vous pouvez également préparer le bouton dans le template de  NewViewPage  :

    <ion-list *ngIf="latitude">
      <ion-item>
        <p>Latitude : {{ latitude.toFixed(2) }} - Longitude : {{ longitude.toFixed(2) }}</p>
      </ion-item>
    </ion-list>
    <div text-center>
      <button ion-button round large icon-only (click)="onTakePhoto()">
        <ion-icon name="camera"></ion-icon>
      </button>
    </div>

Ensuite, après avoir injecté  Camera  dans  NewViewPage  (ainsi que  ToastController  pour afficher une éventuelle erreur), vous pouvez créer la méthode  onTakePhoto()  :

  onTakePhoto() {
    this.camera.getPicture({
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true
    }).then(
      (data) => {
        if (data) {
          this.imageUrl = normalizeURL(data);
        }
      }
    ).catch(
      (error) => {
        this.toastCtrl.create({
          message: error.message,
          duration: 3000,
          position: 'bottom'
        }).present();
      }
    )
  }

Cette méthode ouvre l'appareil photo, permettant à l'utilisateur de prendre une photo, retournant l'URL du fichier temporaire créé.  Vous pouvez ensuite l'afficher dans le template :

    <ion-list *ngIf="latitude">
      <ion-item>
        <p>Latitude : {{ latitude.toFixed(2) }} - Longitude : {{ longitude.toFixed(2) }}</p>
      </ion-item>
      <ion-item *ngIf="imageUrl">
        <img [src]="imageUrl" style="max-width: 100%">
      </ion-item>
    </ion-list>
    <div text-center>
      <button ion-button round large icon-only (click)="onTakePhoto()">
        <ion-icon name="camera"></ion-icon>
      </button>
    </div>

Maintenant que l'utilisateur peut ajouter le lieu et la photo pour la  NatureView  , il doit pouvoir l'enregistrer.  Créez la méthode  onSubmitForm()  pour cela, en injectant  NatureViewService  ainsi que  NavController  et en important le modèle  NatureView  :

  onSubmitForm() {
    let newView = new NatureView(
      this.natureViewForm.get('name').value,
      new Date(),
      this.natureViewForm.get('description').value,
      this.latitude,
      this.longitude,
      this.imageUrl
    );
    this.natureViewService.addNatureView(newView);
    this.navCtrl.pop();
  }

Puisque le lieu et l'image sont obligatoires, ajoutez-les à la condition de validité du formulaire :

    <button ion-button
            full
            (click)="onSubmitForm()
            [disabled]=natureViewForm.invalid || !latitude || !imageUrl">Enregistrer</button>

Mettez également à jour le template de la  HomePage  :

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

Et créez la méthode onLoadNatureView()  :

import { Component, OnDestroy, OnInit } from '@angular/core';
import { NatureView } from '../../models/NatureView.model';
import { Subscription } from 'rxjs/Subscription';
import { NatureViewService } from '../../services/natureView.service';
import { NewViewPage } from '../new-view/new-view';
import { NavController } from 'ionic-angular';
import { SingleViewPage } from '../single-view/single-view';

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

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

  constructor(private natureViewService: NatureViewService,
              private navCtrl: NavController) {

  }

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

  onLoadNatureView(view: NatureView) {
    this.navCtrl.push(SingleViewPage, {natureView: view});
  }

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

}

Vous pouvez maintenant créer  SingleViewPage  pour l'affichage d'une  NatureView  existante :

import { Component, OnInit } from '@angular/core';
import { NavParams } from 'ionic-angular';
import { NatureView } from '../../models/NatureView.model';

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

  natureView: NatureView;

  constructor(private navParams: NavParams) {}

  ngOnInit() {
    this.natureView = this.navParams.get('natureView');
  }

}
<ion-header>
  <ion-navbar>
    <ion-title>{{ natureView.name }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <img [src]="natureView.imagePath">
    <ion-card-content>
      <ion-list>
        <ion-item>
          <p>{{ natureView.description }}</p>
        </ion-item>
        <ion-item>
          <agm-map [latitude]="natureView.latitude" [longitude]="natureView.longitude">
            <agm-marker [latitude]="natureView.latitude"
                        [longitude]="natureView.longitude"
                        [markerDraggable]="false"></agm-marker>
          </agm-map>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>
page-single-view {
  agm-map {
    height: 280px;
  }
}

Ainsi, la  SingleViewPage  reçoit la  NatureView  qui lui est passée et en affiche le détail dans le template.

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