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.
