Cómo buscar música con la API Web de Spotify

En el mundo de aplicaciones y servicios para reproducir música en línea, Spotify es una de las mejores. Y una de sus características principales es, precisamente, su catálogo. Además, es una herramienta útil para los desarrolladores; ya que les permite crear sus propios desarrollos utilizando su API. En este artículo te mostraré cómo hacer uso de la API Web de Spotify. En resumen, realizaremos los siguientes pasos:

• Creación de nuestra API en Spotify Developers
• Deployment de nuestra Aplicación
• Creación de nuestra Vista Isomórfica con Handlebar JS

Antes de empezar, es aconsejable que revises las últimas actualizaciones en la página de Spotify Developers. En ocasiones hacen cambios en su Web API PHP; y esto se convierte en el principal motivo de fallos en el código.

Creación de nuestra API en Spotify Developers

Lo primero que debemos hacer es entrar a la página de Spotify Developers, iniciar sesión y crear nuestra aplicación. De esta manera generamos automáticamente el Client ID y el Client Secret. Donde dice Redirect URLs, ingresaremos la URL a la que redireccionaremos una vez que iniciemos sesión en nuestra aplicación.

Deployment de nuestra Aplicación

Para iniciar sesión con nuestra cuenta de Spotify crearemos el archivo login.js: [js] // Login con Spotify (function() { var stateKey = 'spotify_auth_state'; function getHashParams() { var hashParams = {}; var e, r = /([^&;=]+)=?([^&;]*)/g, q = window.location.hash.substring(1); while ( e = r.exec(q)) { hashParams[e[1]] = decodeURIComponent(e[2]); } return hashParams; } function generateRandomString(length) { var text = ''; var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; for (var i = 0; i < length; i++) { text += possible.charAt(Math.floor(Math.random() * possible.length)); } return text; }; var userProfileSource = document.getElementById('user-profile-template').innerHTML, userProfileTemplate = Handlebars.compile(userProfileSource), userProfilePlaceholder = document.getElementById('user-profile'); oauthSource = document.getElementById('oauth-template').innerHTML, oauthTemplate = Handlebars.compile(oauthSource), oauthPlaceholder = document.getElementById('oauth'); var params = getHashParams(); var access_token = params.access_token, state = params.state, storedState = localStorage.getItem(stateKey); if (access_token && (state == null || state !== storedState)) { alert('Ocurrio un error durante la Autenticación'); } else { localStorage.removeItem(stateKey); if (access_token) { $.ajax({ url: 'https://api.spotify.com/v1/me', headers: { 'Authorization': 'Bearer ' + access_token }, success: function(response) { userProfilePlaceholder.innerHTML = userProfileTemplate(response); $('#login').hide(); $('#loggedin').show(); } }); } else { $('#login').show(); $('#loggedin').hide(); } document.getElementById('login-button').addEventListener('click', function() { var client_id = 'ACA COLOCAMOS EL CLIENTE ID'; // Tu Client ID var redirect_uri = 'http://www.midominio.com/buscar/'; // Tu Redirect URI (Dirección URL a donde quieres que redireccione luego de iniciar Sesión Con tu cuenta de Spotify.) var state = generateRandomString(16); localStorage.setItem(stateKey, state); var scope = 'user-read-private user-read-email'; var url = 'https://accounts.spotify.com/authorize'; url += '?response_type=token'; url += '&client_id=' + encodeURIComponent(client_id); url += '&scope=' + encodeURIComponent(scope); url += '&redirect_uri=' + encodeURIComponent(redirect_uri); url += '&state=' + encodeURIComponent(state); window.location = url; }, false); } })(); [/js] Ahora, usaremos JavaScript para buscar música. Para lograrlo, crearemos nuestro archivo buscar.js: [js] // Buscador var templateSource = document.getElementById('resultados-template').innerHTML, template = Handlebars.compile(templateSource), resultadosPlaceholder = document.getElementById('resultados'), playingCssClass = 'playing', audioObject = null; var fetchTracks = function (albumId, callback) { $.ajax({ url: 'https://api.spotify.com/v1/albums/' + albumId, success: function (response) { callback(response); } }); }; var searchAlbums = function (query) { $.ajax({ url: 'https://api.spotify.com/v1/search', data: { q: query, type: 'album' }, success: function (response) { resultadosPlaceholder.innerHTML = template(response); } }); }; resultados.addEventListener('click', function (e) { var target = e.target; if (target !== null && target.classList.contains('cover')) { if (target.classList.contains(playingCssClass)) { audioObject.pause(); } else { if (audioObject) { audioObject.pause(); } fetchTracks(target.getAttribute('data-album-id'), function (data) { audioObject = new Audio(data.tracks.items[0].preview_url); audioObject.play(); target.classList.add(playingCssClass); audioObject.addEventListener('ended', function () { target.classList.remove(playingCssClass); }); audioObject.addEventListener('pause', function () { target.classList.remove(playingCssClass); }); }); } } }); document.getElementById('search-form').addEventListener('submit', function (e) { e.preventDefault(); searchAlbums(document.getElementById('query').value); }, false); // Ocultamos nuestro acces token por seguridad if(typeof window.history.pushState == 'function') { window.history.pushState({}, "Hide", "http://www.midominio.com/buscar/"); } [/js]

Creación de nuestra Vista Isomórfica con Handlebar JS

Ahora vamos a crear 2 vistas, una para iniciar sesión y otra para buscar música. Spotify nos aconseja usar isomorfismo. En la documentación oficial aconseja usar Handlebars JS. Pero podemos usar ReactJS y otra librería que sea de nuestro agrado también. Lo primero que debemos hacer es crear la vista para el inicio de sesión:

Login

[js] <div class="container"> <div id="login"> <h1>Inicia Sesión con tu Cuenta de Spotify</h1> <button id="login-button" class="btn btn-primary">Login</button> </div> <div id="loggedin"> <div id="user-profile"> </div> <div id="oauth"> </div> </div> </div> <script src="js/handlebars-v4.0.0.js"></script> <script id="user-profile-template" type="text/x-handlebars-template"> <h1>Logged in as {{display_name}}</h1> <div class="media"> <div class="pull-left"> <img class="media-object" width="150" src="{{images.0.url}}" /> </div> <div class="media-body"> <dl class="dl-horizontal"> <dt>Display name</dt> <dd class="clearfix">{{display_name}}</dd> <dt>Id</dt> <dd>{{id}}</dd> <dt>Email</dt> <dd>{{email}}</dd> <dt>Spotify URI</dt> <dd><a href="{{external_urls.spotify}}">{{external_urls.spotify}}</a></dd> <dt>Link</dt> <dd><a href="{{href}}">{{href}}</a></dd> <dt>Profile Image</dt> <dd class="clearfix"><a href="{{images.0.url}}">{{images.0.url}}</a></dd> <dt>Country</dt> <dd>{{country}}</dd> </dl> </div> </div> </script> <script id="oauth-template" type="text/x-handlebars-template"> <h2>oAuth info</h2> <dl class="dl-horizontal"> <dt>Access token</dt> <dd class="text-overflow">{{access_token}}</dd> </dl> </script> [/js] Ahora creamos la vista para buscar música: [js] <div class="row"> <div class="col-md-12"> <h1>Buscar Artista</h1> Escribe el nombre de un artista y luego has clic en el botón Buscar: <form id="search-form" role="form"> <div class="form-group"> <input type="text" id="query" value="" class="form-control" placeholder="Escribe el nombre de un Artista..."/> </div> <button type="submit" id="search" class="btn btn-primary" />Buscar</button> <button type="reset" id="search" class="btn btn-alert" />Limpiar</button> </form> </div> </div> <div class="row"> <div class="col-md-12"> <div id="resultados"> </div> </div> </div> </div> <!-- Handeblars JS --> <script src="../js/handlebars-v4.0.0.js" type="text/javascript"></script> <script id="resultados-template" type="text/x-handlebars-template"> {{#each albums.items}} <div style="background-image:url({{images.0.url}})" data-album-id="{{id}}" class="cover"> </div> <!-- <h6 class="nombre">{{name}}</h6> <h6 class="popularidad">{{href}}</h6> --> {{/each}} </script> [/js] ¡Y eso es todo! Puedes ver el ejemplo en este DEMO y descargar el código fuente del proyecto en un repositorio en GIT. Y si quieres aprender más acerca de JavaScript, Responsive Design, ECMAScript 6 y más; regístrate hoy a la Carrera de Front-end en Platzi. Y crea aplicaciones yendo más allá de HTML5 y CSS3.