Menu

Ionic 4: Primer acercamiento

ionic - August 27, 2018 por Carlos Rojas | Edita este Post.
ionic4.0.0-beta.0ionic-cli4.1.0

Ionic 4 fue anunciado hace unas semanas y trajo consigo varias cosas nuevas, pero ¿ Que tanto cambio ?

En este post vamos a realizar una App sencilla con Ionic 4 y ver que tanto cambio con respecto a Ionic 3, ¿ Voy a tener que volver a aprender todo?

Comenzando.

Lo primero es saber que vamos a hacer. Para este tutorial vamos a realizar una App sencilla que obtenga imagenes de Giphy y los muestre en un componente de Ionic.

y nos guiaremos por la nueva documentación del equipo de Ionic.

Instalando.

Lo primero es actualizar nuestro Ionic CLI para que llegue a su ultima version.

$ npm install -g ionic

Luego debemos comenzar una nueva App y OJO con la nueva opción.

$ionic start demo128 blank --type=angular

y podemos iniciar nuestro servidor con

$ionic serve

Creando nuestro servicio.

Ahora tenemos que crear un pequeño servicio y obtener un ApiKey de Giphy. Según la documentacion ahora la manera de crear un servicio es:

$ionic generate service api/giphy

No olvidar agregarlo al ngModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { GiphyService } from './api/giphy.service';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), HttpClientModule, AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    GiphyService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Esto nos genera los archivos necesarios para trabajar en nuestro Servicio.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class GiphyService {

  protected giphyUrl = 'https://api.giphy.com/v1/gifs/search';
  protected giphyApiKey = 'xxxxx';

  constructor(private http: HttpClient) { }

  getImage(query): Observable<any> {
    const requestURL = `${this.giphyUrl}?api_key=${this.giphyApiKey}&q=${query}`;
    return this.http.get(requestURL);
  }
}

Le agregamos nuestro metodo getImage() el cual va a hacer la petición a Giphy.

Creando nuestra vista.

Por defecto el proyecto blank de Ionic viene con el componente home el cual vamos a modificar para integrar nuestro servicio.


<ion-header>
  <ion-toolbar>
    <ion-title>
      demo128
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-img *ngIf="item?.image" src="{{ item?.image }}"></ion-img>
  
    <ion-card-content>
      <p text-center><ion-button (click)="shuffle()" shape="round" color="primary" fill="outline">Shuffle</ion-button></p>
    </ion-card-content>
  </ion-card>
</ion-content>

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

import { GiphyService } from '../api/giphy.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  protected item: any = {image: ''};

  constructor(
    protected giphyService: GiphyService
  ) {
    this.initialize();
  }

  initialize() {
  this.getImage();
  }

  getImage(): void {
    const emotions = ['happy', 'sad', 'depressed', 'healthy'];
    const randomNumber: number = Math.floor(Math.random() * 4) + 1; 
    this.giphyService.getImage(emotions[randomNumber - 1]).subscribe(
          (image) => {
            this.item.image = image.data[0].images.downsized_medium.url;
          }
    );
  }

  shuffle() {
    this.getImage();
  }

}

y listo ya con esto tenemos nuestra nueva app.

Mira todo el codigo aquí.

Conclusiones

  • Han cambiado algunos comandos.

  • Si lo configuras con Angular no cambia mucho mas que usar los comandos del Angular CLI.

Ver código

¡Compártelo!