Tutoriel pour apprendre à créer votre application mobile avec Ionic 3

import { MyMoviesPage } from "../pages/my-movies/my-movies";
import { Component, ViewChild } from "@angular/core";
import { Nav, Platform } from "ionic-angular";
import { StatusBar } from "@ionic-native/status-bar";
import { SplashScreen } from "@ionic-native/splash-screen";
 
@Component({
  templateUrl: "app.html"
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
 
        rootPage  = MyMoviesPage;
}

<ion-header>
  <ion-navbar color="primary">
    <button menuToggle ion-button icon-only>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Movie App</ion-title>
  </ion-navbar>
 
  <ion-toolbar color="secondary">
    <ion-title>My favorite movies</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <ion-card>
    <ion-card-content>
      <p>You haven't selected any movie</p>
      <p>Please select one by using the button below</p>
      <button ion-button icon-left full (click)="findMovie()">
        <ion-icon name="search"></ion-icon>
        On going movies
      </button>
    </ion-card-content>
  </ion-card>
</ion-content>

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Platform } from "ionic-angular";
import { Observable } from "rxjs/Rx";
import { IMovie } from "../../interface/IMovie";
 
@Injectable()
export class MovieApiProvider {
  private baseUrl: string = "../../assets/api/movies.json";
 
  movies: IMovie[];
 
    constructor(
    private readonly http: HttpClient,
    private readonly platform: Platform
  ) {
    console.log("Hello MovieApiProvider Provider");
  }
 
  getMovies(): Observable {
    return this.http.get(`${this.baseUrl}`);
  }
}

constructor(
  private readonly http: HttpClient,
  private readonly platform: Platform
) {
  console.log("Hello MovieApiProvider Provider");
  if (this.platform.is("cordova") && this.platform.is("android")) {
    this.baseUrl = "/android_asset/www/assets/api/movies.json";
  }
}

export class MovieListPage {
  movies  = new Array<Movie>();
 
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private movieApiProvider: MovieApiProvider
  ) {}
 
  ionViewDidLoad() {
    this.movieApiProvider.getMovies().subscribe(data =>{
      this.movies = data;
    })
  }
 
  goToDetail(movie: IMovie) {
    this.navCtrl.push(MovieDetailPage, movie);
  }
}

<ion-header>
  <ion-navbar color="primary">
    <ion-title *ngIf="movie">{{movie.title}}</ion-title>
    <ion-buttons end>
      <button ion-button incon-only style="font-size: 1.7em" (click)=toggleFavorite()>
        <ion-icon [name]="isFavorite ? 'star':'star-outline'"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
 
<-- suite de la page -->

export class MovieDetailPage {
  movie: IMovie;
  isFavorite: boolean = false;
 
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams
  ) {}
 
  ionViewDidLoad() {
    this.movie = this.navParams.data;
  }
 
  toggleFavorite() {
    if (this.isFavorite) {
      this.isFavorite = false;
      // TODO persist data
    } else {
      this.isFavorite = true;
      // TODO persist data
    }
  }
}

@NgModule({
  declarations: [MyApp],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    MyMoviesPageModule,
    MovieListPageModule,
    MovieDetailPageModule,
    HttpClientModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    MovieApiProvider
  ]
})
export class AppModule {}

import { Injectable } from "@angular/core";
import { Storage } from "@ionic/storage";
import { IMovie } from "../../interface/IMovie";
 
const MOVIE_KEY = "movie_";
 
@Injectable()
export class FavoriteMovieProvider {
  constructor(private storage: Storage) {
    console.log("Hello UserPreferencesProvider Provider");
  }
 
  addFavoriteMovie(movie: IMovie) {
    this.storage.set(this.getMovieKey(movie), JSON.stringify(movie));
  }
 
  removeFavoriteMovie(movie: IMovie) {
    this.storage.remove(this.getMovieKey(movie));
  }
 
  isFavortieMovie(movie: IMovie) {
    return this.storage.get(this.getMovieKey(movie));
  }
 
  toogleFavoriteMovie(movie: IMovie) {
    this.isFavortieMovie(movie).then(
      isFavorite =>
        isFavorite
          ? this.removeFavoriteMovie(movie)
          : this.addFavoriteMovie(movie)
    );
  }
 
  getMovieKey(movie: IMovie) {
    return MOVIE_KEY + movie.id.toString();
  }
 
  getFavoriteMovies(): Promise<IMovie[]> {
    return new Promise(resolve => {
      let results: IMovie[] = [];
      this.storage
        .keys()
        .then(keys =>
          keys
            .filter(key => key.includes(MOVIE_KEY))
            .forEach(key =>
              this.storage.get(key).then(data => results.push(JSON.parse(data)))
            )
        );
      return resolve(results);
    });
  }
}

export class MovieDetailPage {
  movie: IMovie;
  favorite: boolean = false;
 
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private favoriteMovieProvider: FavoriteMovieProvider
  ) {}
 
  ionViewDidLoad() {
    this.movie = this.navParams.data;
    this.favoriteMovieProvider
      .isFavoriteMovie(this.movie.id)
      .then(value => (this.favorite = value));
  }
 
  toggleFavorite(): void {
    this.isFavorite = !this.isFavorite;
    this.favoriteMovieProvider.toogleFavoriteMovie(this.movie);
  }
}

export class MyMoviesPage {
  favoriteMovies: IMovie[] = [];
 
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private favoriteMovieProvider: FavoriteMovieProvider
  ) {}
 
  ionViewDidLoad() {
    console.log("ionViewDidLoad MyMoviesPage");
  }
 
  ionViewWillEnter() {
    this.initFavoriteMovies();
  }
 
  private initFavoriteMovies() {
    this.favoriteMovieProvider
      .getFavoriteMovies()
      .then(favs => (this.favoriteMovies = favs));
  }
 
  findMovie() {
    this.navCtrl.push(MovieListPage);
  }
 
  goToDetail(movie: IMovie) {
    this.navCtrl.push(MovieDetailPage, movie);
  }
}

<br /><!-- Header ne change pas -->
 
<ion-content>
 
    <ion-card *ngIf="favoriteMovies && favoriteMovies.length; else noFavorite">
      <ion-list>
        <ion-list-header class="my-movies-header">Favorite Movies</ion-list-header>
        <ion-item *ngFor="let movie of favoriteMovies" (click)="goToDetail(movie)">
          <ion-row>
            <ion-col col-1>
              <ion-icon name="star"></ion-icon>
            </ion-col>
            <ion-col col-6 text-wrap>
              <h4>{{movie.title}}</h4>
            </ion-col>
            <ion-col col-3>
              <h4>{{movie.release_date}}</h4>
            </ion-col>
            <ion-col col-2>
              <ion-badge color="primary">{{movie.vote_average}}</ion-badge>
            </ion-col>
          </ion-row>
        </ion-item>
      </ion-list>
      <ion-card-content>
        <p>To choose more movies, click on this button.</p>
        <button icon-left ion-button full (click)="findMovie()">
          <ion-icon name="search"></ion-icon>
          Find a movie
        </button>
      </ion-card-content>
    </ion-card>
 
    <ng-template #noFavorite>
      <ion-card>
        <ion-card-content>
          <p>You haven't selected any movie</p>
          <p>Please select one by using the button below</p>
          <button ion-button icon-left full (click)="findMovie()">
            <ion-icon name="search"></ion-icon>
            Find a movie
          </button>
        </ion-card-content>
      </ion-card>
    </ng-template>
 
  </ion-content>