¬Ņ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

No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

El componente Modal y el Modal Controller

26/39
Recursos

Recuerda que la API cambió a:
https://platzi-music-api.herokuapp.com

getNewReleases() {
return fetch("https://platzi-music-api.herokuapp.com/browse/new-releases").then(
  response=> response.json()
  );
  }
getArtistsTopTracks(artistId){
return fetch(
  "https://platzi-music-api.herokuapp.com/artists/${artistId}/top-tracks?country=CO"
  ).then(
  response=> response.json()
  );
  }

Aportes 9

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Hola

No me redireccionaba al modal, lo resolvó agregando la línea
modal.present();
así:

async showSongs(artist) {
const songs = await this.musicService.getArtistTopTracks(artist.id);
const modal = await this.modalController.create({
component: SongsModalPage,
componentProps: {
songs: songs.tracks,
artist: artist.name
}
});
modal.present();
}

showSong(artist) {
this.sharedService.getArtistsTopTracks(artist.id)
.subscribe(songs => {
this.modalSong(songs, artist);
}, error => {
console.log(error);
});

}

async modalSong(songs, artist) {
const modal = await this.modalController.create({
component: SongsModalPage,
componentProps: {
songs: songs.tracks,
artist: artist.name
}
});

return await modal.present();

}

Recordar que la API cambió de
https://platzi-music-api.now.sh
a
https://platzi-music-api.herokuapp.com

por lo tanto se tiene

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

  getArtistsTopTracks(artistId){
    return fetch(
      "https://platzi-music-api.herokuapp.com/artists/${artistId}/top-tracks?country=CO"
      ).then(
      response=> response.json()
      );
  }

Saludos al tratar de dar clic en el avatar del artista me arroja el siguiente error:

Access to fetch at 'http s://platzi-music-api.now.sh/artists/0yNSzH5nZmHzeE2xn6Xshb/top-tracks?country=CO' from origin 'http ://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Hacer un get segun un parametro especifico

getArtistTopTracks(artistId){
    return fetch("https://platzi-music-api.now.sh/artists/${artistId}/top-tracks?country=CO").then(
        response => response.json()
    );
}

Crear un modal en base a un API get (este es el mismo codigo que publico odortega mas abajo)

async showSongs(artist) {
    const songs = await this.musicService.getArtistTopTracks(artist.id);
    const modal = await this.modalController.create({
        component: SongsModalPage,
        componentProps: {
            songs: songs.tracks,
            artist: artist.name
            
        }
        
    });
modal.present();
}
  • Los modal se deben crear como paginas
  • modalController se tendra que poner en el constructor

Link de repo al commit de la clase asi cosas que cambian hoy en dia (al menos a mi) tuve que poner como Any en el archivo de platzi-music.service.ts para que no me tire error en el home.page.ts al llamar songs: songs.tracks

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as dataArtists from './artists.json';

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

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

  constructor(private http: HttpClient) { }

  getArtists() {
    return dataArtists;
    }

  getNewReleases(): any{
    return this.http.get(`${this.urlapi}/browse/new-releases`);
  }

  getArtistTopTracks(artistId): any {
    return this.http.get(`${this.urlapi}/artists/${artistId}/top-tracks?country=EC`);
  }

}

crearemos una nueva page llamada songs-modal

ionic generate page songs-modal

importamos el modulo de songs-modal en nuestro modulo raiz app.module.ts

app.module.ts

import { SongsModalPageModule } from './songs-modal/songs-modal.module';

@NgModule({
 imports: [
	 SongsModalPageModule,
 ],
})

cambiamos el consumo del API en el servicio de platzi-music

platzi-music.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as dataArtists from './artists.json';

@Injectable({
 providedIn: 'root'
})

export class PlatziMusicService {
 private urlapi = 'https://platzi-music-api.herokuapp.com';
 
 constructor(
 private http: HttpClient
 ) { }

 getNewreleases(): any {
	 return this.http.get(`${this.urlapi}/browse/new-releases`);
 }
 
 getArtists() {
	 return dataArtists;
 }

 getArtistTopTracks(artistId) {
	 return this.http.get(`${this.urlapi}/artists/${artistId}/top-tracks?country=EC`);
 }
}

posteriormente ingresamos el modal y consumimos la nueva función de nuestro servicio platzi-music en la page home

home.page.ts

import { SongsModalPage } from '../songs-modal/songs-modal.page';


showSongs(artist) {
 this.musicService.getArtistTopTracks(artist.id)
 .subscribe(songs => {
	 this.modalSong(songs, artist);
 }, error => {
	 console.error(error);
	 });
 }

 async modalSong(songs, artist) {
	 const modal = await this.modalController.create({
		 component: SongsModalPage,
		 componentProps: {
			 songs: songs.tracks,
			 artist: artist.name
		 }
	 });
	 return await modal.present();
 }

Saludos al tratar de abrir el modal me arroja el siguiente error:

ERROR Error: Uncaught (in promise): ReferenceError: tracks is not defined
ReferenceError: tracks is not defined

si le ha sucedido a alguien aqui, por favor ayudenme a resolverlo.

el import de

import {SongsModalPageModule} from './songs-modal/songs-modal.module';

no se importaria en home-module? ya que es en ese modulo que se utiliza