📻 vue-music

Ya generamos el scaffolding de nuestra aplicación y por otro lado repasamos que los archivos más importantes de la estructurada generada por el CLI.

Ahora que entendemos como funciona todo, es momento de empezar a escribir código de verdad. Para este workshop vamos a crear una aplicación web (full client-side) que nos permite interactuar con la API de Spotify.

Spotify API

Lo primero que vamos a hacer es crear un modulo que para interactuar con la api de Spotify. La ventaja de Vue, como hablamos al principio, es que se encarga solamente de la capa visual de MV*. Entonces tenemos la libertad de manejar la lógica como más nos guste. En este caso para resolver las llamadas HTTP a la API vamos a utilzar la API de fetch del browser (basada en Promises) y JS puro.

1. Creamos dentro de src/ una carpeta que se llame services y dentro de esta creamos un archivo que con el nombre spotify.js ➡️ src/services/spotify.js

2. Recuerden que trabajamos con el concepto de módulos: un archivo .js es un modulo que podemos importar dentro de otro. Vamos a crear un objeto con una propiedad baseUrl. Luego vamos a exportar este objeto para utilizarlo en nuestros componentes.

const spotifyService = {
  // Esta es la url base de la API
  baseUrl: 'https://platzi-music-api.now.sh'
}

export default spotifyService

1. Una de las funcionalidades de la API es search. Vamos a crear en nuestro servicio un método que nos permita buscar contenido. El endpoint de búsqueda recibe dos parámetros: query y type (type es un valor fijo que representa tipo de contenido a buscar)

const spotifyService = {
  // Esta es la url base de la API
  baseUrl: 'https://platzi-music-api.now.sh'
}

spotifyService.search = function (query, type) {
  // Usando template strings de ES2015 armamos la url del endpoint con
  // el formato esperado por la API.
  const url = `${this.baseUrl}/search?q=${query}&type=${type}`

  // Retornamos la llamada de fetch (recuerden que devuelve una Promise).
  // Fetch recibe como primer parametro la url y luego un objeto
  // con configuracion donde pasamos el tipo de metodo HTTP
  return fetch(url, { method: 'GET' })
    .then(res => {
      // En el caso de que hay un error disparamos una excepción
      // para luego manejarla en nuestro componente
      if (res.status !== 200) {
        throw res.statusText
      }

      // Casteamos la respuesta y la devolvemos para
      // usarla luego en el componente
      return res.json()
    })
}

export default spotifyService

Ya tenemos lo que necesitamos de Spotify para integrarlo en nuestros componentes Vue. Como decíamos antes, este código que escribimos es JS plano, podríamos utilizarlo en un proyecto React y funcionaría de la misma manera.

Esta manera de agrupar funcionalidad en una carpeta services es un patrón bastante común y práctico a la hora de desarrollar aplicaciones con Vue. Es importante aclarar que no es obligatorio utilizarlo y podríamos hacerlo de diferentes maneras.

🤓 Extras

La API de fetch no es soportado en algunos browsers como IE11. Para darle soporte a estas navegadores tenemos dos opciones, usar un shim de la API como este o usar alguna librería tipo wrapper que internamente utilice Fetch pero que también nos de funcionalidad extra y mas comodidades. Si se deciden por la segunda alternativa les recomiendo chequear la librería trae. Si tienen ganas pueden refactorizar el servicio spotify implementando alguno de estas opciones.

📝 Solución

⏪ ⏩