How to access Spotify Web API

This week in #TC1019 class we will be talking about APIs; they are, as API Evangelist said:

At their most basic level, allows applications to talk to other applications, but they are so much more than this when you begin to explore the world of APIs further.

Kin Lane, the author, made an exceptional work writing down why these programs are important for our actual life and for the future. In his book “API 101” situates the topic and explain their many functionalities.

Just to give an example of how quickly can we (or at least a beginner of programming) can access an API of a popular website. Spotify is a leading music streaming provider, which allows users to listen to music using an internet connection.

On its web page, you can find on the bottom a section called “communities” and a link of the developers front page. There you can find an access for the Spotify Web API explanation

Captura de pantalla 2016-09-06 a las 9.22.48 a.m.

You can look for examples or you can read the well-documented information of the web API. If you want action right now, simply copy these lines of code I made:

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>JSON</title>
https://code.jquery.com/jquery-1.10.2.js
</head>
<body>

$( document ).ready(function() {
$(“#artista”).keyup(function(event){
if(event.keyCode == 13){
$(“#buscar1”).click();
}
});
$(“#buscar1”).click(function(){
var artista = $(‘input:text[id=artista]’).val();
document.getElementById(“artista”).value=””;
console.log(artista);
$.getJSON( “https://api.spotify.com/v1/search?q=”+artista+”&type=artist&#8221;,
function(datos){
var imagen = ““;
var nombre = datos.artists.items[0].name;
$( “#nombre” ).html(nombre);
$( “#imagen” ).html(imagen);
});
});
});

<center>
<h3>Ingrese el nombre de un artista</h3>
<input type=”text” size=”35″ id=”artista”><br>
<button id=”buscar1″>Buscar</button>
<br>
<h1>

</h1>

</center>
</body>
</html>

Save the file as .HTML and you will have a page where you can find any artist on the Spotify data base.