¿Qué es Ionic?

1

Requisitos del curso y presentación del proyecto

2

¿Qué hay de nuevo en Ionic 4?

3

¿Qué ha cambiado en Ionic?

4

Instalación de Ionic y templates básicos

5

Instalación de Capacitor y uso en Android Studio

6

Uso de Capacitor y xCode

7

Sincronizando nuestro proyecto con los emuladores

Componentes básicos de Ionic

8

El componente Slides

9

CSS y Custom Properties de los componentes de Ionic

10

Slides dinámicos

11

Angular Router e Ionic Storage

12

Controlar la navegación con Guards

13

Utilidades de CSS con Ionic

14

Crear una página de login

15

Validar inputs del formulario de login

16

Envío del formulario

17

Servicio para validar credenciales

18

Agregar Guards a nuestro login

19

Crear una página de registro

20

Navegación entre login y registro

21

Agregar un menú con el componente Menu

22

Dar funcionalidad y estilos al menú

23

Uso de componente Slides y opciones avanzadas

Consumo y manejo de informacion con Ionic

24

Consumiendo un API para llenar información de nuestros artistas

25

Página completa con artistas, canciones y álbums

26

El componente Modal y el Modal Controller

27

Llenar de contenido el Modal

28

Componente Footer y funcionalidad del Modal

29

Construyendo nuestro reproductor

30

Lógica de nuestro reproductor

31

RETO: Vista de álbums

Acceso al hardware

32

Usar la cámara a través de Capacitor

33

Corrección de errores y afinando detalles

34

Mejorando nuestra página de Settings con CSS

35

Página Sports y Angular Maps

36

Crear la página Sport

37

RETO: Buscador dinámico en Sports

38

Llevar nuestra aplicación a producción con Android

39

Llevar nuestra aplicación a producción con iOS y cierre del curso

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Consumiendo un API para llenar información de nuestros artistas

24/39
Recursos

La URL de la API cambió a https://platzi-music-api.herokuapp.com
Por ejemplo, el endpoint de nuevos lanzamientos sería: https://platzi-music-api.herokuapp.com/browse/new-releases

Aportes 16

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

TIP


Angular tiene su propia librería HttpClient (con mucho más poder) para manejar peticiones HTTP

En el siguiente enlace pueden encontrar una explicación muy buena (Peticiones Http en Angular)


Hacen uso de conceptos más avanzados (pero hoy día cotidianos) como son observables de la librería RxJs, aquí pueden leer más a fondo y con ejemplos reales que pueden acomodar para uso en sus propios proyectos. (Vigilancia y Seguridad en Angular)


Por último, un concepto que es MUY ÚTIL y la razón por la que dejo esta información. Interceptores, un mecanismo usado en aplicaciones realmente profesionales, les permite por ejemplo interceptar la petición HTTP antes del llamado al API y luego del llamado al API. Esto es muy potente a la hora de trabajar en ámbitos profesionales. Punto 3. Gestor de Credenciales

Otra forma de hacer la llamada al API enfrente de utilizar fetch() se puede utilizar HttpClient de Angular, ambas funcionan pero este ultimo tiene mas features.

Ionic Page Life Cycle


Ver documentación

La nueva api es esta:

https://platzi-music-api.herokuapp.com/browse/new-releases

también la pueden encontrar en la descripción del curso.

Excelente clase alguno fallos de mi lado pero con paciencia los logre resolver. Mucho cuidado con la varibles ese fue mi fallo.

Si tienen problemas al hacer la solicitud a la API, lo resolví así:

getNewReleases() {
        return fetch('https://platzi-music-api.now.sh/browse/new-releases', {
            mode: 'cors', headers: { 'Access-Control-Allow-Origin': '*', }
        }).then(
            response => response.json()
        );
    }```

Creamos un servicio para consumir el API requerido de platzi-music-service

ionic generate service services/platzi-music

Luego lo configuramos para consumir el API

platzi-music.service.ts

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

@Injectable({
 providedIn: 'root'
})

export class PlatziMusicService {

 private urlapi = 'https://platzi-music-api.herokuapp.com/browse/new-releases';

 constructor(
 private http: HttpClient
 ) { }

 getNewreleases(): any {
 return this.http.get(this.urlapi);
 }
}

Posteriormente hacemos el cambio en home page para consumir el servicio de platzi-music

home.page.ts

import { PlatziMusicService } from '../services/platzi-music.service';

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

export class HomePage {
	 artists: any[] = [];
	 songs: any[] = [];
	 albums: any[] = [];

 slideOps = {
	 initialSlide: 2,
	 slidesPerView: 4,
	 centeredSlides: true,
	 speed: 400
 };

 constructor(
	 private musicService: PlatziMusicService
 ) {}

// renderiza cambios en la entrada directamente en la vista
 ionViewDidEnter() {
	 this.fetchNewReleases();
 }

 fetchNewReleases() {
	 this.musicService.getNewreleases()
	 .subscribe(release => {
	 this.artists = release.albums.items;
	 this.songs = this.artists.filter(e => e.album_type ==='single');
	 this.albums = this.artists.filter(e => e.album_type ==='album');
	 console.log(this.artists);
	 });
  }
}

Gracias a esto, se pueden hacer cambios directamente en el html de home page

home.page.html

<ion-header>
	 <ion-toolbar>
		 <ion-buttons slot="end">
			 <ion-menu-button></ion-menu-button>
		 </ion-buttons>
	 </ion-toolbar>
</ion-header>
<ion-content fullscreen="true" class="ion-padding">
	 <h1>Albums</h1>
		 <ion-slides [options]='slideOps' *ngIf="albums.length">
			 <ion-slide *ngFor="let album of albums">
		 <ion-avatar>
			 <img [src]="album.images[0].url" alt="">
			 <span>{{album.name}}</span>
		 </ion-avatar>
	 </ion-slide>
 </ion-slides>
 <h1>Canciones</h1>
	 <ion-slides [options]='slideOps' *ngIf="songs.length">
		 <ion-slide *ngFor="let song of songs">
			 <ion-avatar>
				 <img [src]="song.images[0].url" alt="">
				 <span>{{song.name}}</span>
			 </ion-avatar>
		 </ion-slide>
	 </ion-slides>
</ion-content>

Recomiendo mejor usar HttpClient en vez de fetch si van a usar Angular como base para Ionic. HttpClient retoruna un observable y se pueden usar operadores de rxjs para manejar mejor ese observable. Recomiendo el curso profesional de Angular de NicoBytes donde se aprende eso.

Que buen aporte el realizado en esta clase, gracias por la aclaracion del cambio de url de la API!

El llamado al servicio con fetch me causa problemas, utilizo httpClient mejor

Buenas tardes, estoy siguiendo el curso pero al parecer la api ya no esta en funcionamiento, tienes tal vez otra o es necesario utilizar el json compartido como un simulador de api para obtener la información?

Hola todos, podrían ayudarme a continuar sin usar la API(https://platzi-music-api.now.sh/browse/new-releases) ya que no esta disponible. La verdad que es mi primer contacto con IONIC and Angular y venia bien hasta este paso.

 getNewReleases() {
    return fetch("https://platzi-music-api.now.sh/browse/new-releases").then(
      response => response.json()
    );
  }

Información sobre el ciclo de vida en Ionic:

https://ionicframework.com/jp/docs/es/angular/lifecycle