- Creación de nuestra API en Spotify Developers
- Deployment de nuestra Aplicación
- Creación de nuestra Vista Isomórfica con Handlebar JS
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.0 Comentarios
para escribir tu comentario
