Consumir API's REST

Para los que tienen problemas con la API de Platzi Music pues esta ya no funciona. Les dejo un listado de APIs:

• Dog API => Es una API de perros y con la cual voy a reemplazar a Platzi Music. La razón, es sencilla de utilizar y puedo subir contenido de mi perro tambien 😄

• NASA api => Conjunto de APIS de la NASA, excelente material y muy interesante

• Jikan API => API de anime bastante completa

• POKEMON API => API de pokemon

En mi caso ya no utilizare TRAE sino en cambio el Fetch que incorpora JS

No olviden cambiar la direccion de la api en config.js

Les dejo el link de la documentacion de MDN de como hacer fetch a apis

Si necesitas ayuda o quieres dar aportes no olvides utilizar la sección de comentarios
NUNCA PARES DE APRENDER

La API cambió, ahora deben usar esta https://t.co/1nrYLGFXnb?amp=1

Para esta clase se salta algunos archivos, e instalaciones compañeros:

1. primero intalen en trae con:
   npm i -S trae

2. Archivo de trae JS

import platziMusicService from ‘./platzi-music’

const trackService = {}

trackService.search = function (q) {
const type = ‘track’

return platziMusicService.get(’/search’, {
params: { q, type }
})
.then(res => res.data)
}

export default trackService

1. Archivo de config js con la nueva api que funciona 😃

const configServices = {
apiUrl: ‘https://platzi-music-api.herokuapp.com’
}

export default configServices

1. y el platzi music

import trae from 'trae’
import configService from ‘./config’

const platziMusicService = trae.create({
baseUrl: configService.apiUrl
})

export default platziMusicService

1. el app. vue ya es el mismo de las clases

antes de continuar mira el video que sigue, el orden de esto está mal:
https://platzi.com/clases/1145-vuejs-profesional/7801-fetch-api-amp-trae/

Aporte de la nueva API por RicardoCelis
La API cambió, ahora deben usar esta https://t.co/1nrYLGFXnb?amp=1

Les dejo el código para mostrar un pokemon en la página web:

App.vue:

<template>
  <div id="app">
    <input
      type="text"
      v-model="searchQuery"
      placeholder="Pokemon name or ID"
    >
    <button @click="search">
      Buscar
    </button>
    <p
      v-if="this.pokemons.id !== undefined"
    >
      Pokemon {{ pokemonName }}
    </p>
    <div
      v-if="this.pokemons.id !== undefined"
    >
      <img
        :src="pokemonImage"
        :alt="pokemonName"
      />
    </div>
  </div>
</template>

<script>
import pokemon from './services/pokemon';

export default {
  data() {
    return {
      searchQuery: '',
      pokemons: [],
    }
  },

  methods: {
    async search() {
      try {
        this.searchQuery ? this.pokemons = await pokemon.getById(this.searchQuery) : alert('Please enter a valid pokemon name or ID');
      } catch (error) {
        alert(error);
      }
    }
  },

  computed: {
    pokemonName() {
      return this.pokemons.name;
    },

    pokemonImage() {
      return this.pokemons.sprites.front_default;
    }
  }
};
</script>

<style lang="scss">
</style>

config.js:

const configService = {
  apiUrl: 'https://pokeapi.co/api/v2/pokemon/'
}

export default configService

pokemon.js:

import config from '@/services/config'

const pokemon = {
  getById: async (id) => {
    try {
      const response = await fetch(`${config.apiUrl}${id}`)
      return await response.json()
    } catch (error) {
      console.log(`Ocurrió un error: ${error}`)
    }
  }
}

export default pokemon

Ver primero video Numero 22 antes de seguir con el 21

me marca un error:
trackService.search(this.searchQuery) .then(res => { this.tracks = res.tracks.items })
y este error me marca con este codigo App.vue?ea99:43 Uncaught (in promise) TypeError: Cannot read property ‘tracks’ of undefined
at eval (App.vue?ea99:43)

dice que es undefinida sabran a que se deba jeje?

Buen curso pero tienen que velar por que los ejemplos permanezcan vigentes en su infraestructura propia pasa muy recurrente mente que los ejemplo están incompletos y algunos nos funcionan, si bien es cierto se pueden usar otros métodos la idea es que se ayude a que la curva de aprendizaje pueda ser mas corta.

18-10-2020 / https://platzi-music-api.now.sh/

404: NOT_FOUND
Code: DEPLOYMENT_NOT_FOUND
ID: gru1::l8zsg-1602997520384-bddc665feae0

https://platzi-music-api.herokuapp.com/search?q=muchacha&type=track

La API funciona a dia 05/12/2018

En que curso se hizo la API de platzi-music??

Api funcionando correctamente
17/08/2019

Api funcionando correctamente
04/01/2020

Api funcionando correctamente
23/04/2020

no funciona el api 18/06/2020 ; ( pero me hice uno con cakephp ; )

Estoy intentando invocar el servicio de search de la API de platzi music, pero me esta retornando un error HTTP 402 (Payment Required). ¿Le sucede a alguien mas?

Desde ya muchas gracias por cualquier comentario.

Estan todos mal ordenados los videos 🥴🥴🥴

esta clase debería estar una clase adelante

Porfa, arreglen la api

Api funcionando correctamente
1/07/2019

¿Cómo podría consultar una API con Tokens?

API DOWN

API funcionando 9/1/19

Pueden eliminar el botón y usar un watch para observar los cambios del input:text

<script>
import trackService from '../services/track'

export default {
  name: 'app',
  components: {
  },
  data () {
    return {
      searchQuery: '',
      tracks: []
    }
  },
  watch: {
    searchQuery () {
      this.search()
    }
  },
  computed: {
    searchMessage () {
      return `Encontrados: ${this.tracks.length}`
    }
  },
  methods: {
    search () {
      if (!this.searchQuery) {
        this.tracks = []
        return
      }
      trackService.search(this.searchQuery).then(res => {
        this.tracks = res.tracks.items
      })
    }
  }
}
</script>

La API sigue funcionado correctamente!

31/01/19

Hola!

Les pido su ayuda para aclararme una duda. Estoy un poco confundido con el uso de una arrow function en el método search del componente. Por qué aquí sí se utilizó y sí funcionó bien, si la documentación de vue.js y el profesor mismo recomiendan no usarlas?

¿Cual es la diferencia de usar llaves o no en la importación?

import trackService from './services/track.js'

import { trackService from } './services/track.js'

Disculpen, donde está el material de texto para el reto de este vídeo?

Api funcionando correctamente!

23/05/19

Api ok 17/09/2019

no hay material para el reto!! o no lo veo. si existe por favor el link gracias

Api funcionando correctamente
09/04/2020

En efecto. Hoy 16 de Agosto del 2020 la API no funciona. Descargué el proyecto de github y lo corrí y no sirve.

Hey muchacho, actualizacion. Nacho Anaya a.k.a el mejor profe de platzi me ha comentado que la api anterior no funciona, pero que aqui esta la nueva. https://platzi-music-api.herokuapp.com/

Alguien por favor que me mencion una API similar, ya que la de platzi-music presente no esta disponible

Alguién tiene el mismo problema? [WDS] Disconnected!

Api funcionando correctamente
20/03/2020

Api funcionando 22/05/2020

A hoy 20/07/2020 no me funcionó a mi de la forma en que indican en el video la ejecución del método get, cambié por una Promise el search en tracks.js y me funcionó 😅

    let promise = new Promise((resolve, reject) => {
        musicfyService.get('/search', {
                params: { q, type }
            })
            .then(
                res => {
                    resolve(res.data);
                }
            );
    });
    return promise;        	

Access to fetch at 'https://platzi-music-api.now.sh/search?q=hola&type=track' from origin 'http://localhost:8080' 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.

Hice lo de colocarle el “-api” al apiUrl, pero no funcionó. Ya copie y pegue literalmente lo mismo que tiene el profesor en el repositorio de github y tampoco.

no funciona 😦(((((((((

Con esta extension pueden ver facilmente la api en el mismo navegador solo deben poner la url que en este caso seria esta https://platzi-music-api.herokuapp.com/search?q=muchacha&type=track

tengo este error al buscar:
Error in v-on handler: “TypeError: __WEBPACK_IMPORTED_MODULE_0__platzi_music___default.a.get is not a function”

Este curso se vuela algunos archivos…

Buenas tardes me encuentro con este inconveniente por favor si me pueden ayudar mucho gusto.