A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Consumir API's REST

21/53
Recursos

La API que aparece en el video no est谩 funcionando, la actual es esta: https://t.co/1nrYLGFXnb?amp=1

Aportes 44

Preguntas 14

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 = 鈥榯rack鈥

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

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 鈥榯racks鈥 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

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.

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

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: 鈥淭ypeError: __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.