213 4 6 Imprimible

REST API per a
plataformes digitals
REST API per a plataformes digitals
Índex
1 QUÈ ÉS UNA API EN REST? .................................................................................... 1
1.1 DEFINICIÓ I GLOSSARI GENERAL ........................................................................ 4
1.2 INTERACCIONS D’UNA API EN REST ................................................................... 7
1.3 COM ES VINCULA REST AMB HTTP ..................................................................... 9
1.4 VIDEO TUTORIAL I: EXERCICIS AMB AJAX I JQUERY .......................................... 11
1.5 IDEES CLAU: QUÈ ÉS UNA API EN REST? .......................................................... 15
2 SOL·LICITUDS DE L'API ........................................................................................ 16

2.1 SOL·LICITUD EN REST A JQUERY ...................................................................... 16
2.2 RECURSOS DE LES API ..................................................................................... 19
2.3 VIDEO TUTORIAL II: CODI DE CONNEXIÓ EN AJAX.............................................. 22
2.4 IDEES CLAU: SOL·LICITUDS DE L'API ................................................................ 27
3 RESPOSTA DE L'API............................................................................................. 28
3.1 MISSATGES DE STATUS HTTP .......................................................................... 28
3.2 REQUERIMENTS DE LES API ............................................................................. 31
3.3 VIDEO TUTORIAL III: REQUERIMENTS DE LES API ............................................. 33
3.4 IDEES CLAU: RESPOSTA DE L'API ..................................................................... 35
4 RELACIÓ ENTRE SOL·LICITUD I RESPOSTA .......................................................... 36

4.1 RELACIÓ ENTRE SOL·LICITUD I RESPOSTA ....................................................... 37
4.2 INTEGRACIÓ DELS NOUS RECURSOS ............................................................... 40
4.3 VIDEO TUTORIAL IV: DESENVOLUPAMENT DE L'APLICACIÓ .............................. 42
4.4 IDEES CLAU: RELACIÓ ENTRE SOL·LICITUD I RESPOSTA .................................. 44
2
1 QUÈ ÉS UNA API EN REST?

Benvinguts i benvingudes!
Recorda que, per seguir el curs correctament, cal disposar de coneixements previs de
programació en JavaScript. En el cas que vulguis repassar conceptes de JavaScript abans de
començar el curs, aconsellem fer algun dels cursos que trobaràs a la web
www.codeacademy.com o bé els exercicis de www.w3schools.com.
Repassem els punts que tractarem en aquest primer mòdul on ens plantejarem la pregunta:
què és una API REST?
En primer lloc, coneixerem les bases teòriques de l’arquitectura web API REST que és
l’arquitectura de dades més utilitzada avui en dia per tal de permetre l’intercanvi de
informació entre un servidor i un client, o millor dit, entre un servidor i mil·lions de clients,
com és el cas dels grans serveis web com ara Google.
Tot seguit descobrirem AJAX, la tecnologia més utilitzada pel desenvolupament de pàgines i
aplicacions web interactives.
Analitzarem també els mètodes GET i POST de petició i enviament de dades via HTTP.
Amb aquests coneixements, farem la nostra primera petició de dades a una API REST
utilitzant AJAX segons el mètode HTTP GET i obtindrem un JSON com a resposta que haurem
de mostrar en pantalla.
El videotutorial ens servirà per veure exemples de codi real en pantalla i us facilitarà
l’aprenentatge. Us recomanem que aneu replicant els exercicis per anar-vos familiaritzant
amb el codi. Així afrontareu amb més probabilitats d’èxit els exercicis vehiculars del Posa’t a
prova! que us plantejarem al final de cada mòdul.
Recorda que l’objectiu final és la realització d’una aplicació web que consumirà recursos de
la API de Spotify i on qualsevol usuari o usuaria podrà introduir el nom d’un o una artista i,
com a resposta, obtindrà les seves deu millors cançons, amb enllaços directes per poder
reproduir cadascuna d’aquestes cançons a Spotify.
En tots els casos et podràs descarregar les solucions dels exercicis, però l’ideal és que, de
manera autónoma, vagis aprenent a solucionar els problemes que sorgeixen, tal com passa a
la vida real. Pensa que en la vida d’una persona que es dedica a la programació:
Les coses mai funcionen a la primera.
Totes les solucions són a Google.
Si quelcom no funciona, és perquè alguna cosa del nostre codi està malament. Així que,
primer de tot, revisa bé els teus exercicis. Acostuma’t també a utilitzar les eines per al
3
desenvolupament del teu navegador, principalment la consola, que és el únic lloc on podem
veure realment quina part del nostre codi està fallant.
Insistir és la millor manera d’aprendre.
Així que ànims i endavant!
1.1 DEFINICIÓ I GLOSSARI GENERAL

Comencem!
Què és una API?
Doncs bé, una API és una interfície de programació d’aplicacions o, dit d’una altra manera, un
conjunt de funcions i procediments ofert per una biblioteca informàtica per ser utilitzat per
un altre programa per interaccionar amb el programa en qüestió.
Posem un exemple ben senzill.
Així com les persones utilitzem un comandament a distància per tal d’interactuar amb la
nostra televisió, una aplicació web dinàmica necessita tenir implementat un programari de
connexió per tal de poder-se comunicar amb el servidor d’on recull les dades que mostra als
seus usuaris i usuàries en pantalla.
Aquest programari de connexió és el que es coneix com a API.
Cal tenir en compte que, en el moment de construir un sistema informàtic o biblioteca

informàtica, per donar suport a les invocacions a serveis fetes per un altre programa, cal
oferir sempre una API, tant als programes externs que podran usar els serveis oferts, com al
programador o programadora, que disposa del manual indispensable per poder treure el
màxim suc del component que ha adquirit.
Imaginem que treballem en programació web i que ens demanen desenvolupar una aplicació
web sobre un determinat cantant.
4
Una bona manera de poder realitzar l’encàrrec seria crear la nostra aplicació aprofitant els
recursos que ens ofereix l’API de Spotify per tal de poder accedir a la seva base de dades.
Per fer efectiva la connexió entre l’usuari o usuària final i l’API de Spotify caldrà que
disposem d’un programari de connexió integrat dins del codi de la nova aplicació que volem
desenvolupar.
Una vegada haguem establert la connexió entre la nova aplicació i la API corresponent,
podrem començar a enviar peticions de dades i rebre respostes concretes d’informació
contra el servidor web, aprofitant els recursos de la pròpia API, que es troben allotjats en
forma d’objectes JSON en una sèrie de rutes o endpoints definits al servidor, tots ells
accessibles via HTTP mitjançant tecnologia AJAX.
De fet, el terme servidor web pot tenir qualsevol d'aquests dos sentits:
1. Un ordinador que accepta els requeriments HTTP que fa l'usuari mitjançant el

navegador web i que, com a resposta, retorna les pàgines web que té allotjades en
forma de documents HTML.
2. Un programa que proveeix la funcionalitat descrita en el primer sentit d'aquest terme.
En informática, s'anomena arquitectura client-servidor la relació establerta entre dues

entitats: el servidor, que ofereix un recurs de qualsevol tipus al client perquè aquest en tregui
un profit o avantatge. El més habitual és que d'una entitat servidora se n'aprofitin diverses o
moltes entitats clients.
Tots els servidors web accepten requeriments HTTP des de la xarxa, i proveeixen respostes
HTTP al client que ha fet el requeriment. Aquestes respostes típicament consisteixen d'un
document HTML, però també poden ser simples fitxers de text, o altres tipus de documents
com ara XML o JSON, com és el cas de les API’s.
Un servidor es defineix com a:
• Passiu (esclau)
• Espera peticions
• Quan rep una petició la processa i retorna una resposta
Mentre que un client:
• Actiu (mestre)
5
• Envia peticions
• En enviar una petició, espera una resposta i la processa
Per exemple, un servidor de correu, conté el correu electrònic de múltiples clients. Un

programa client de correu electrònic demana al servidor de correu si hi ha nous missatges per
a l'usuari. El servidor li pot contestar que sí o que no. En cas afirmatiu, el client demana al
servidor que li enviï aquests correus i el servidor els envia al client i els elimina de la seva
base de dades.
Per acabar, ens fixarem breument en el cas de l’extensíssima API de Google per tal de
començar a entendre els conceptes més bàsics del funcionament de les API.
Si accedim al panell d’usuari de Google APIs, dins la Biblioteca, trobarem totes les API que
ens ofereix aquest gran servei web:
API de Gmail, Maps, Drive, YouTube… Infinitat de recursos a la nostra disposició!
Si entrem en qualsevol dels exemples, trobarem una descripció de l’API en particular que ens
permetrà saber per a què serveix i com implementar-la a la nostra aplicació. També, des
d’aquí, podrem habilitar les connexions a les diferents API que vulguem utilitzar.
Com és habitual en la majoria dels casos, per poder fer efectiva la connexió amb l’API, se’ns
demana que primer de tot registrem la nostra aplicació dins del seu sistema. En el cas de
Google APIs, això ho farem des del menú Projectes, que trobarem a la part superior del panell
d’usuari. Des d’allà, podrem crear un projecte nou i, una vegada creat, accedir al seu panell
de control simplement clicant el nom del projecte que acabem de crear.
Si ens desplacem a “Començar”, veurem que en el primer punt diu “Habilita les API i
aconsegueix credencials com a claus”. Clicarem aquí i el sistema ens redirigirà a l’apartat de
Biblioteca que vèiem abans. Aquí seleccionarem i habilitarem l’API que ens interessa i
novament el sistema ens redirigirà al panell d’usuari i ens indicarà que ja estem en disposició
de demanar les credencials.
Credencials? Quines credencials?
Les credencials són les claus secretes que ens proporciona el servei web i que hem
d’introduir al codi de la nostra aplicació per tal d’autoritzar la connexió amb la seva API.
Novament, des del panell d’usuari, podrem accedir a la gestió de les nostres credencials.
Cal tenir en compte que cada servei web especifica la manera com s’ha d’establir aquesta
connexió i si requereix o no autorització per part de l’API. Cal llegir els manuals per a
persones desenvolupadores específics de cada servei web per saber com realitzar
correctament aquesta connexió.
Fins aquí la lliçó!
6
1.2 INTERACCIONS D’UNA API REST

Tradicionalment, l’intercanvi de dades entre servidors es feia seguint una arquitectura de
dades força complexa, coneguda com a SOAP o també com a XML-RPC. Però, a partir de la
tesi de Roy Thomas Fielding de l’any 2000 sobre com aprofitar el protocol HTTP per tal de
desenvolupar aplicacions distribuïdes a través de la xarxa, la nova arquitectura de dades
coneguda com a REST o RESTful es va acabar imposant com l’estàndard per a la programació
d’aplicacions web dinàmiques.
De manera formal, perquè un servidor web es pugui anomenar estrictament REST o RESTful
ha de satisfer sis restriccions, essent l’última d’elles opcional. Acomplint amb les
restriccions, aconseguim unes propietats desitjables com rendiment, escalabilitat,
simplicitat, modificabilitat, portabilitat i fiabilitat:
• Uniform Interface. Es tracta de la part fonamental del servei REST. Defineix la interfície
entre el client i el servidor. Principis:
1. Identificació dels recursos. Els recursos individuals es troben identificats a les

peticions mitjançant els URI o URL. A més, aquests recursos es troben
conceptualment separats de la representació que es retorna al client.
2. Manipulació dels recursos per mitjà de les seves representacions. El client, sempre
que tingui permís i per mitjà de la representació d’un recurs, té prou informació per
modificar o esborrar aquell recurs del servidor.
3. Missatges autodescriptius. Cada missatge intercanviat entre el client i el servidor
conté la informació necessària per processar-lo.
4. HATEOAS (Hypermedia As The Engine Of Application State). El client interactua amb
el servidor per complet mitjançant hipermèdia proporcionada dinàmicament per
aquest segon.
• Client-Server. Separació entre client i servidor. D’aquesta manera, el client no es
preocupa de l’emmagatzematge de les dades i així s’aconsegueix que el seu codi font
sigui més portable. Quant al servidor, no es preocupa de l’estat del client, fent que
aquest pugui ser més escalable. El desenvolupament del client i del servidor pot ser
independent l’un de l’altre, mentre que la interfície uniforme entre els dos no es vegi
alterada.
• Stateless. La comunicació entre client i servidor no requereix que el servidor hagi de
guardar informació del client entre peticions consecutives. Com hem dit, cada missatge
del client conté prou informació per satisfer la petició.
• Cacheable. Les respostes del servidor poden guardar-se en una memòria cau, sigui de
manera implícita, explícita o negociada. L’objectiu és minimitzar les interaccions entre
client i servidor, fent que el client accedeixi a la representació del recurs guardada en
cau i millorant l’escalabilitat i rendiment del sistema.
• Layered system. El client no assumeix que hi ha una connexió directa amb el servidor
final. Poden existir sistemes de programació o maquinari entre ells. Per exemple, hi pot
haver un servidor intermedi que guardi en cau les respostes del servidor. Altres
7
elements situats entre el client i el servidor final poden ajudar a millorar les polítiques
de seguretat del sistema.
• Code on Demand (opcional). El servidor, de manera temporal, pot decidir ampliar la
funcionalitat del client, transferint-li un codi i executant aquesta lògica.
Una vegada coneguem els principis de l’arquitectura de dades d’un servidor construït en
REST, vegem quina utilitat pot tenir de cara a les persones usuàries de la nostra aplicació
web i també en relació amb qui programa:
• Beneficis per a l’USUARI/ÀRIA: un servei REST facilita enormement la càrrega de

l’aplicació web al dispositiu mòbil, ja que aquesta consumeix dades de l’API externa i, per
tant, no és necessari emmagatzemar cap dada a la memòria interna.
• Beneficis per al PROGRAMADOR/A: poder disposar de fonts de dades de tot tipus a les
quals poder accedir lliurement i permetre a l’USUARI o USUÀRIA interactuar amb
aquestes dades i obtenir-ne nous resultats, és, sens dubte, un gran avantatge.
Arribats en aquest punt, ens cal introduir un nou concepte: la TECNOLOGIA AJAX.
Les aplicacions web dinàmiques utilitzen tecnologia AJAX per tal de fer les peticions i
processar les respostes provinents del servidor REST. AJAX ens permet:
• Llegir dades d’un servidor web (una vegada la pàgina s’ha carregat).
• Actualitzar una pàgina web sense haver de recarregar la pàgina.
• Enviar dades a un servidor web.
AJAX són les sigles d’Asynchronous JavaScript And XML (JavaScript asíncron i XML), tot i que
el nom és una mica enganyós, ja que les aplicacions AJAX poden utilitzar no només XML per
transportar les dades, sinó que moltes vegades aquest transport es
fa via JSON, com veurem al llarg del curs. Això obre la porta a
aplicacions web interactives que poden treballar amb multitud de
recursos provinents de les API externes i treballar amb la resposta
d’una manera molt lleugera.
El fet que AJAX sigui asíncron vol dir que les dades que són demanades es carreguen en
segon pla, sense interferir en cap cas en la presentació i el comportament de la pàgina. És a
dir, que l’aplicació carrega, en primer lloc, els arxius HTML, CSS i JavaScript al frontend de
l’usuari o usuària, i posteriorment executa les peticions de dades via AJAX. Una vegada
s’obtenen els resultats de la consulta, la pàgina s’actualitza amb les noves dades sense
necessitat d’haver-se de recarregar de nou. Normalment, el que s’actualitza són parts d’una
pàgina i no la pàgina completa.
Una possible tècnica per programar en AJAX és mitjançant el framework jQuery, que assisteix
el treball de qui programa en dos nivells: en el costat client, ofereix funcions JavaScript per
enviar peticions al servidor via HTTP, i, en el costat servidor, processa les peticions, busca la
informació i transmet la resposta de tornada al client.
8
1.3 COM ES VINCULA REST AMB HTTP

Seguim.
El protocol web de transferència de dades HTTP (HyperText Transfer Protocol) va ser

dissenyat per permetre la comunicació entre servidors i clients.
Posem un exemple molt comú:
1. Un client, per exemple, Google Chrome, envia una petició a un servidor via HTTP.
2. El servidor retorna una resposta al client.
3. La resposta conté informació sobre l’estat de la petició i normalment també conté el
contingut que es demana.
Alguns casos típics de petició/resposta via HTTP serien els següents:
1. L’aplicació demana una pàgina HTML. El servidor retorna un arxiu HTML.

2. L’aplicació demana una fulla d’estils. El servidor retorna un arxiu CSS.
3. L’aplicació demana una imatge JPG. El servidor retorna una imatge JPG.
4. L’aplicació demana codi JavaScript. El servidor retorna un arxiu JS.
5. L’aplicació demana dades. El servidor retorna dades (en XML o JSON).
És important que coneguem quins són els mètodes principals que ens ofereix HTTP per tal de
poder treballar correctament amb aquest protocol dins les nostres peticions AJAX:
1. MÈTODE GET: s’utilitza per demanar dades d’un recurs específic, com ara una URI o
ENDPOINT en el cas de les API REST. No s’utilitza mai per modificar les dades del
servidor. Les dades que enviem es passen per l’URL i es poden interceptar. Per tant,
hem de ser curosos amb els paràmetres que enviem, com per exemple les credencials
secretes per autoritzar-nos a fer la petició. Com ja sabem, moltes API ens demanaran
autorització prèvia per poder fer les nostres peticions. Haurem de veure, en cada cas
concret, com hem de procedir correctament.
2. MÈTODE POST: també s’utilitza per recollir dades d’un servidor com el cas anterior, però
alhora ens permet enviar dades dins la mateixa petició, per tal de crear o actualitzar un
recurs del servidor. Les dades que enviem queden definides a la petició AJAX. Les dades
no es passen per l’URL i, per tant, no es poden interceptar, així que POST sempre resulta
un mètode més segur per realitzar les peticions més privades.
3. MÈTODE PUT: també s’utilitza per enviar dades a un servidor, per tal de crear o
actualitzar un recurs. PUT és la fórmula simplificada que ens permet repetir una
mateixa petició POST a diferents parts del nostre codi, per no alterar-ne els resultats.
4. MÈTODE DELETE: s’utilitza per esborrar un recurs determinat.
Cada vegada que vulguem fer una petició a un servidor, haurem d’utilitzar un d’aquests
mètodes per tal que el servidor ens autoritzi a utilitzar un dels seus recursos amb una
determinada finalitat. En el cas que utilitzem GET, com hem dit, estarem demanant
únicament les dades del recurs per poder-hi treballar. En canvi, si utilitzem POST, el que
9
estarem demanant és autorització per poder crear o actualitzar un recurs. Per tant,
utilitzarem un mètode o un altre en funció de les nostres necessitats.
Si obrim el terminal del nostre ordinador, podem provar d’executar directament una petició
HTTP segons el mètode GET de la manera següent:
curl -X GET https://jsonplaceholder.typicode.com/posts
La petició ens retorna, com a resposta, la informació que està allotjada a la web que li estem
indicant, en aquest cas, un arxiu en format JSON que conté un array de 100 posts separats
per claus. Cada clau conté un objecte JavaScript amb les seves propietats i els seus valors
corresponents.
Gràcies a la metodologia que ens proporciona AJAX, podem incloure aquestes peticions dins
del nostre codi i interactuar amb informació provinent d’altres servidors, així que vegem més
a fons com funciona aquesta metodologia.
L’element més important d’AJAX és l’objecte XMLHttpRequest. Tots els navegadors moderns
porten integrat aquest objecte de JavaScript que serveix per:
• Actualitzar una pàgina web sense haver de recarregar la pàgina sencera.

• Fer una petició de dades a un servidor, una vegada la pàgina s’ha carregat.
• Rebre dades d’un servidor, una vegada la pàgina s’ha carregat.
• Enviar dades al servidor, en el pla ocult o background de la nostra aplicació.
La comunicació entre clients i servidors respon, doncs, a una lògica de peticions i respostes
via HTTP que funciona de la manera següent. Vegem l’exemple:
1. Un usuari o usuària realitza una recerca a Google.

2. El client (Google) envia una petició HTTP request a la web.
10
3. El servidor web rep la petició.

4. El servidor executa l’aplicació que processa la petició.
5. El servidor retorna una resposta HTTP response (output) al client.
6. El client, en aquest cas Google, rep la resposta.
La manera més senzilla de poder veure què conté l’objecte de JavaScript que executa una
petició per qualsevol via AJAX és obrir la consola del nostre navegador i fer el següent:
new XMLHttpRequest();
Premem l’Intro per crear la nova petició i la consola ens torna una resposta. Si despleguem
aquest objecte de resposta, podem veure les diferents propietats que conté qualsevol petició
comuna, que en aquest cas apareixen buides perquè nosaltres no hem definit cap ruta ni cap
tipus d’argument a la petició que acabem de fer.
Fixem-nos que efectivament la propietat ‘status’ ens està tornant valor zero, que
precisament és el codi de petició fallida. Doncs bé, en cas que una petició es processi
correctament i el servidor retorni una resposta correcta, aquest valor ‘status’ serà sempre
igual a 200. Qualsevol altre valor haurem de veure a quin missatge d’error correspon i com el
podem solucionar.
Caldrà, doncs, definir sempre una ruta o endpoint i uns arguments o funcions per tal que la
petició es processi correctament i puguem obtenir i treballar amb la resposta, com podrem
veure a continuació més detalladament al primer videotutorial del curs que ens ocupa.
Som-hi!
1.4 VIDEOTUTORIAL I: EXERCICIS AMB AJAX I JQUERY

Ens disposem a fer la nostra primera connexió a una API REST.
Anem a Google i busquem “api rest online”. El primer resultat que ens apareix és
“https://jsonplaceholder.typicode.com”. Aquesta ruta ens servirà de base per fer el nostre
primer exercici de prova. Cliquem l’enllaç i, dintre de Routes, el primer endpoint que ens
apareix és ‘/posts’. Si fem clic a l’enllaç, anirem a parar a l’URL on hi ha allotjat l’objecte
JSON: un array d’objectes de JavaScript amb les seves propietats expressades en forma de “
clau : valor ”.
Imaginem que ens demanen recollir aquesta informació i mostrar només els títols en
pantalla. Com ho podríem fer?
Proposem utilitzar Adobe Brackets com a editor de codi, però podem fer
servir el que preferiu. Aquest el podeu descarregar gratuïtament a la web
http://brackets.io/.
11
Creem un nou arxiu HTML i el guardem amb el nom que vulguem. Creem una estructura
mínima i al <body> incloem únicament un <div> amb id ‘elements’, que serà d’on penjarem el
resultat de la consulta a l’API.
<!DOCTYPE html>
<html>
<body>
<h1>API REST – VIDEOTUTORIAL I</h1>
<br/>
<div id="elements"></div>
</body>
<script>
</script>
</html>
Abans de tancar l’</html>, inclourem les etiquetes <script>, que serà on carregarem el nostre
motor de recerca AJAX i farem la petició de dades utilitzant l’objecte XMLHttpRequest(). En
lloc de treballar l’<script> en línia dins de l’HTML, si volguéssim, el podríem treballar en un
arxiu independent de JavaScript i enllaçar-lo al nostre HTML. El resultat seria exactament el
mateix.
Començarem declarant la variable ‘xmlhttp’ on guardarem un nou objecte XMLHttpRequest() i

la variable ‘url’ on allotjarem l’URI de l’endpoint de l’API on volem fer la petició.
var xmlhttp = new XMLHttpRequest();

var url = "https://jsonplaceholder.typicode.com/posts";
A continuació, utilitzarem el mètode ‘xmlhttp.onreadystatechange’ per dir-li que la funció

que li passarem a continuació s’executi quan la propietat ‘readyState’ sigui igual a 4 i ‘status’
sigui igual a 200.
En el cas que això passi, transformarem l’objecte JSON que rebrem com a resposta a
‘responseText’ en un objecte de JavaScript i guardarem aquest valor en una nova variable
‘myArr’, que traurem per consola.
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
console.log(myArr);
}
};
xmlhttp.open("GET", url, true);

xmlhttp.send();
12
Per acabar, obrirem el nostre objecte ‘xmlhttp’ i li passarem els paràmetres de la petició
especificant que estem fent una petició GET per accedir a l’endpoint guardat a la variable ‘url’
i li passarem el valor ‘true’ que activa l’asincronia d’AJAX. Enviarem l’objecte i ja ho tindrem
llest.
Ara, si guardem els canvis i executem l’arxiu, no veurem res a la pantalla. Però, si obrim la
consola, hauríem de veure el ‘console.log’ del nostre array ‘myArr’ que hem fet dins la
petició. Efectivament, aquí podem veure l’array de JavaScript que ens ha retornat el servidor
després de fer la nostra petició AJAX. Si obrim aquest array, veurem que efectivament conté
els 100 objectes de JavaScript que abans vèiem al JSON d’on hem recollit les dades. Per
tant, estem recollint correctament la informació i ja podríem començar a treballar amb ella.
Recordem que ens han demanat que mostrem en pantalla només els títols.
Per fer això, hauríem de manipular el resultat de la petició AJAX amb una funció que ens
permeti recórrer l’array i accedir al valor de la propietat que volem treure per pantalla, en
aquest cas ‘title’.
Crearem aquesta funció just després de l’element xmlhttp.send() i abans de tancar

l’</script>. Declarem la nova funció, que es dirà ‘myFunction’, a la qual li passarem un
paràmetre que serà un array d’objectes i que farà el que li indicarem entre claus.
function myFunction(array) {
var sortida = "";
for(var i = 0; i < array.length; i++) {

sortida += array[i].title + "<br/>";
}
document.getElementById("elements").innerHTML = sortida;
}
Inicialitzarem també una variable buida que es dirà ‘sortida’ i que serà on després guardarem
els paràmetres que ens retorni la funció. Inicialitzarem un bucle ‘for’ que anirà recorrent
l’array des de la posició zero fins a l’última posició de l’array i que augmentarà el valor del
comptador en un per cada iteració o volta que faci el bucle.
Dins del bucle, recollirem la propietat ‘title’ de l’array que li estem passant a la funció com a
paràmetre amb el comptador ‘i’ inicialitzat, perquè reculli el títol de tots els elements.
Concatenem un salt de línia per separar-los entre si i igualem aquest valor a la variable
‘sortida’ que hem creat fa un moment.
Fora del bucle, però encara dins l’àmbit de la funció, agafarem l’element amb id ‘elements’
amb la funció de JavaScript ‘document.getElementById’ i concatenarem un valor en HTML
13
que serà igual al valor de ‘sortida’. Així les dades de ‘sortida’ quedaran penjades de l’element
‘elements’ de la vista.
L’únic que ens falta és cridar aquesta funció dins la resposta a la nostra petició AJAX. Per
tant, fem la crida a myFunction i li passem l’array ‘myArr’, que conté tots els objectes de
l’array. Ho fem just després del console.log(myArr) que havíem fet abans. D’aquesta manera,
la petició ens queda així:
console.log(myArr);
myFunction(myArr);
}
};
Si guardem els canvis i tornem a la nostra pàgina, ja veiem com se’ns ha actualitzat el
contingut de la nostra vista i com l’objecte s’està recollint correctament a la consola.
Si obrim l’objecte, veiem que, en efecte, es tracta d’un array d’objectes de JavaScript amb
una sèrie de propietats en forma de clau-valor.
function myFunction(array) {
var sortida = "";
for(var i = 0; i < array.length; i++) {

sortida += array[i].title + "<br/>";
console.log(array[i].title);
}
document.getElementById("elements").innerHTML = sortida;
}
Si introduïm un nou console.log al nostre codi del valor que hem especificat a la sortida de la
funció, en el cas que ens mostri únicament la propietat ’title’ de l’array, podem veure com a la
consola efectivament ara se’ns mostra exactament la ‘sortida’ tal com l’estem veient a la
nostra vista. Pensem a guardar els canvis al nostre HTML perquè s’actualitzi tot
correctament.
Anem ara a analitzar els valors del nostre objecte XMLHttpRequest per veure què ens ha
retornat el servidor després de fer la petició. Per això haurem de fer un console.log del valor
de la variable ‘xmlhttp’, que és la que conté el nostre objecte XMLHttpRequest, ja que així ho
hem definit just al principi de l’<script>. Farem el console.log just després d’acabar la petició,
després del ‘send’:
14
...
xmlhttp.send();
console.log (xmlhttp);
function myFunction (array) {
...
Guardem els canvis, tornem a la consola i ja tenim aquí el nostre objecte XMLHttpRequest.
L’obrim i comprovem que efectivament el valor de la propietat ‘status’ és de 200, fet que ens
indica que la petició s’ha processat correctament. També podem veure com el valor de
‘ResponseURL’ es correspon amb l’endpoint del servidor d’on estem recollint la informació.
Fixem-nos també com la propietat ‘withCredentials’ està definida com a ‘false’, ja que,
efectivament, no ens ha calgut cap tipus de credencial per autoritzar-nos a fer la petició. En
el cas de les API on siguin necessàries les credencials, el valor estarà definit com a ‘true’.
Fins aquí el nostre primer exemple de connexió.
Fins ara!
1.5 IDEES CLAU: QUÈ ÉS UNA API EN REST?

Arribats aquí, fem un breu resum dels conceptes principals que hem tractat al primer mòdul
del curs:
• Una API REST és una arquitectura de servidor determinada pensada especialment per a
l’intercanvi de dades entre servidors i clients.
• La comunicació entre clients i servidors respon, doncs, a una lògica de peticions i
respostes via HTTP.
• GET és el mètode HTTP que s’utilitza per demanar dades d’un recurs específic.
• POST és el mètode HTTP que ens permet enviar dades a un servidor per tal de crear o
actualitzar un recurs.
• AJAX és la tecnologia de JavaScript que ens permet implementar crides a altres
servidors des de la nostra aplicació.
• L’element més important d’AJAX és l’objecte XMLHttpRequest. Cada cop que vulguem
fer una petició AJAX a un altre servidor, haurem d’implementar un nou objecte
XMLHttpRequest i establir els paràmetres corresponents a la crida que vulguem fer.
• Podem accedir a la informació emmagatzemada a una API REST fent una petició
específica a l’endpoint que contingui la informació que vulguem recollir.
• En molts casos, haurem de sol·licitar credencials per tal que el servidor ens autoritzi a
accedir a les seves dades.
• Si el servidor ens torna un codi 200 és que la petició s’ha realitzat amb èxit.
• Sempre serà necessari que recorreguem l’array que ens torna el servidor com a
resposta, per tal de poder imprimir els seus valors a la vista HTML.
• Iterant pels objectes de l’array, podrem accedir a les propietats que contenen la
informació específica que volem recollir.
• Les propietats dels objectes i el seu valor s’expressen en forma de “clau”: ”valor”.
15
2 SOL·LICITUDS DE L'API
Al llarg d’aquest mòdul, aprendrem a treballar amb un dels frameworks de JavaScript més
coneguts i més utilitzats: jQuery. Coneixerem diferents mètodes que ens permetran
manipular fàcilment els elements del nostre HTML.
Farem peticions jQuery AJAX utilitzant els mètodes $.ajax(), $.get() i $.getJSON().
Aprendrem a vincular les peticions jQuery AJAX a esdeveniments de la nostra pàgina, com per
exemple que la petició s’executi quan l’usuari o usuària faci clic a un botó determinat de la
vista.
Manipularem amb JavaScript els objectes que obtinguem com a resposta i mostrarem per
pantalla només aquelles propietats de l’objecte que vulguem mostrar.
Recollirem imatges del servidor i maquetarem els objectes amb CSS.
Coneixerem més a fons el format JSON d’intercanvi de dades entre servidors i clients.
A la segona part del videotutorial podrem posar en pràctica tots aquests coneixements.
Abans d’acabar, farem un resum dels conceptes clau del segon mòdul i finalment trobarem
un qüestionari d’autoavaluació amb deu preguntes tipus test amb referència a conceptes
tant del primer com del segon mòdul.
Recordem que podrem descarregar les solucions dels exercicis però que és millor provar de
solucionar els problemes que vagin sorgint amb els nostres recursos, tal com ens trobarem a
la vida real.
2.1 SOL·LICITUD EN REST A JQUERY

Hola de nou!
Possiblement hem sentit a parlar de jQuery, però és probable que no sapiguem ben bé què és
o que no l’haguem utilitzat mai. Doncs bé…
jQuery és una de les llibreries o frameworks més populars de JavaScript.
jQuery facilita la manipulació dels objectes de l’HTML i simplifica les peticions AJAX.
L’API de jQuery és acceptada per tots els navegadors que coneixem i, per
tant, és un recurs fiable que podem utilitzar a les nostres aplicacions web.
Per poder treballar amb jQuery, una opció que tenim és instal·lar-nos l’última
versió local al nostre ordinador. Per fer-ho, obrirem el terminal i farem un
npm install jquery.
16
A continuación, se’ns descarregaran els paquets de jQuery al nostre ordinador. Per veure que
els tenim disponibles, fem cd node_modules/jquery/dist i un cop a dins d’aquesta carpeta
traurem una llista del que conté fent ‘ls’.
Un cop fet això, ja podríem treballar amb jQuery a la nostra aplicació, referenciant l’arxiu que
volem utilitzar en un <script> específic al nostre HTML. Per defecte, l’arxiu que utilitzarem
serà jquery.min.js.
De tant en tant, es publiquen noves versions de la llibreria, així que hauríem d’anar
comprovant les actualitzacions del framework a la web oficial http://www.jquery.com.
Ara bé, moltes vegades, en lloc d’allotjar directament els arxius de jQuery al nostre servidor,
el que farem és una crida al CDN de Google perquè el carregui directament a la nostra
aplicació.
Ho farem, introduint el següent script dins les etiquetes <head> del nostre HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
Vegem ara com seria una possible estructura de petició AJAX amb jQuery, en aquest cas,
seguint el mètode GET. Fixem-nos bé en el nou endpoint que estem utilitzant:
$.getJSON('https://api.myjson.com/bins/tar0f',
function(data){
console.log(data)
});
}
El que estem fent és executar el mètode getJSON() de jQuery per enviar una petició a l’URL
que li passem com a paràmetre i guardar la resposta a la variable que li indiquem, en aquest
cas ‘data’, però podríem anomenar-la com volguéssim. Si la petició a l’API és satisfactòria,
s’executarà el codi entre claus: que ens mostri per consola l’array d’objectes que conté l’arxiu
JSON que estem recollint de l’endpoint.
Fixem-nos que, si introduïm aquest mateix endpoint com a ruta del nostre navegador, ens
apareix un codi força il·legible però que, si ens hi fixem bé, es correspon amb el format JSON
que hem estat veient fins ara. Per comprovar que es tracta d’un JSON vàlid, podem copiar-lo i
validar-lo a la web jsonlint.com. Efectivament, el validador ens confirma que es tracta d’un
JSON vàlid.
Si integrem aquesta petició al nostre HTML en un <script>, el nostre codi ens queda així:
17
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”>
</script>
</head>
<body>
<div id="search"></div>
</body>
<script>
$.getJSON('https://api.myjson.com/bins/tar0f', function(data){
console.log(data)
});
</script>
</html>
Fixem-nos que dins del <head>, hem habilitat el CDN de jQuery que ens ofereix l’API de Google
i que, dins del <body>, hem col·locat un element div amb id ‘search’ per més endavant poder
penjar la resposta de la nostra petició i fer que es mostri a la nostra vista.
Si guardem i executem aquest arxiu al navegador, no veurem res en pantalla ja que la

resposta només l’estem enviant a la consola. Per tant, obrirem la consola i efectivament aquí
trobarem l’array de 17 objectes de JavaScript que hem sol·licitat a l’endpoint que hem indicat
a la petició.
La petició també ens retorna el valor del paràmetre “success” com a “true”, que ens indica
que la petició s’ha processat correctament.
Imaginem ara que ens demanen treure per pantalla únicament el valor del paràmetre ‘titulo’
de cadascun dels llibres del nostre JSON.
Lògicament, haurem d’afegir algun tipus de funció al nostre <script>, que ens permeti
manipular l’array que ens ha retornat l’API com a resposta a la nostra petició AJAX:
<script>
console.log(data)
function mostrarTitols(){
var cuentos = data.books;
$.each(cuentos, function(key, value){
var $titulo = $('<p/>').html(value.titulo);
$('#search').append($titulo)
});
};
mostrarTitols();
18
});
</script>
El primer que estem fent és, sempre dins l’àmbit de la funció getJSON(), per no perdre el valor
del resultat de la petició que hem fet, crear una nova funció que es digui, per exemple,
mostrarTitols.
Definim la nova variable ‘cuentos’, que contindrà un array de ‘data.books’. Recordem que
‘data’ és el nom que li hem donat a la variable on hem guardat el resultat de la nostra
consulta getJSON. Així, ens estarem posicionant just dins la propietat de l’objecte que conté
l’array de llibres que volem mostrar per pantalla i que, per tant, es correspon amb el
contingut que hem de donar a la nova variable ‘cuentos’.
Podem comprovar els resultats fent un console.log de ‘cuentos’.
Ara bé, un array d’objectes no es pot mostrar mai per pantalla: ens caldrà sempre construir
un bucle que ens permeti iterar pels objectes i, posteriorment, poder treure el valor de la
propietat ‘titulo’ de cadascun dels objectes en pantalla.
Farem el bucle utilitzant la funció jQuery Each on li estem dient que a cadascun dels
elements de l’array ‘cuentos’ li creï una clau que ens permeti comptar els elements de l’array
i el valor dels quals contingui cadascun dels ‘cuentos’ o objectes de l’array.
Una vegada fet això, instanciem la nova variable dolar titulo, que guardarà el valor de la
propietat ‘titulo’ de cada objecte dins d’una etiqueta <p>. Fixem-nos que, quan estem dins del
bucle, l’objecte passa a ser el ‘value’. jQuery ens permet crear nous elements HTML
d’aquesta manera tan senzilla que veiem. Els elements nous creats amb jQuery com $titulo
per convenció comencen amb el caràcter del dòlar per indicar precisament que són elements
creats amb jQuery.
Finalment, pengem el resultat de la variable que acabem de crear dins l’element amb id
‘search’, que havíem creat prèviament a la nostra vista i, per acabar, cridem la funció.
Guardem els canvis, executem l’arxiu i comprovem que tots els títols se’ns mostren en
pantalla.
Hem enllestit l’exercici.
Seguim!
2.2 RECURSOS DE LES API

A continuació farem que les nostres peticions AJAX s’executin únicament quan succeeixi un
esdeveniment determinat, com per exemple quan l’usuari faci clic a un element determinat,
com pot ser un botó.
19
Un cop vist el mètode jQuery getJSON anem a veure el mètode jQuery AJAX. Analitzarem el
següent arxiu HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<button id="button">BUSCA</button>
</body>
<script>
$(document).ready(function(){
var url = 'https://api.myjson.com/bins/tar0f';
$('#button').click(function(){
$.ajax({
url: url,
type:"GET",
success:function(result){
console.log(result)
},
error:function(error){
console.log(error)
}
});
});
});
</script>
</html>
Cal tenir present que treballarem amb jQuery i que, per tant, hem de referenciar el framework
a la capçalera <head> del nostre codi.
Dins del <body>, hem creat un únic element <button> amb id ‘button’.
A l’<script> és on fem les operacions en JavaScript que ens permeten fer la petició AJAX i
treballar amb la resposta. Aquest <script> podríem perfectament guardar-lo en un arxiu JS
independent dins de la nostra aplicació i referenciar-lo a l’HTML, però, per ara, seguirem
treballant els scripts en línia, ja que així podrem veure l’estructura completa dels elements
de la vista al mateix temps.
$(document).ready(function(){...}) és una funció de jQuery que ens permet indicar que la

funció que definim a dins s’executa, un cop tota la resta d’elements de la pàgina estiguin
llestos. Precisament en això consisteix l’asincronia d’AJAX.
20
El primer que fem és guardar l’endpoint a una nova variable ‘url’, apuntar a l’element amb id
‘button’ de la vista i passar-li l’esdeveniment ‘click’ de jQuery perquè la petició AJAX s’executi
quan l’usuari o usuària cliqui el botó.
Com podem veure a l’exemple, el mètode jQuery AJAX recull molts paràmetres, alguns dels
quals són obligatoris i d’altres opcionals. Això sí, sempre conté dues opcions de callback,
‘success’ i ‘error’, per recollir la resposta que rebem del servidor. En cas de ‘success’,
JavaScript processa la consulta i actualitza la pàgina sense necessitat d’haver de recarregar-
la de nou.
Tot seguit veurem un nou exemple de petició AJAX, aquesta vegada utilitzant el mètode
jQuery GET, un mètode que recull dos paràmetres: l’endpoint i una funció de callback.
Simplement substituirem l’<script> d’abans pel següent:
<script>
$('#button').click(function(){
var url='https://api.myjson.com/bins/tar0f';
$.get(url, function(data,status){
console.log(data)
});
});
</script>
Dins la funció és on definim el nostre mètode jQuery GET i li passem la variable ‘url’ on hem
guardat l’endpoint com a primer paràmetre i una funció de callback com a segon paràmetre,
on definirem el que volem fer amb la resposta de la petició, ara mateix un ‘console.log’.
Així que ja coneixem tres maneres diferents de fer una petició AJAX amb jQuery: els mètodes
$.ajax, $.get i $.getJSON. Com que normalment el que haurem de recollir de les API són dades
en format JSON, podem utilitzar perfectament el mètode $.getJSON a l’hora de fer les
nostres peticions.
Parlem breument de JSON:
1. JSON respon a les inicials de JavaScript Object Notation.

2. JSON és un format lleuger d’emmagatzematge i intercanvi de dades.
3. JSON és fàcil d’entendre, ja que només és text amb sintaxi JavaScript.
4. Quan s’intercanvien dades entre un servidor i un client, les dades només poden ser de
text.
5. JSON és una manera de treballar amb les dades directament com a objectes de
JavaScript.
Quan es guarden dades, les dades han de respondre sempre a un cert format i,
independentment d’on vulguem guardar les dades, el format text és sempre un dels formats
legals.
21
JSON ens permet precisament això: guardar objectes JavaScript com a arxius bàsics de text i
poder compartir-los entre servidors i clients a la xarxa.
Si tenim dades guardades en un objecte de JavaScript, sempre podem convertir aquest

objecte a JSON i enviar-lo al servidor. Per fer-ho, utilitzarem el mètode JSON.stringify().
var myObj = {name: "John", age: 31, city: "New York"};

var myJSON = JSON.stringify(myObj);
window.location = "demo.php" + myJSON;
Si, al contrari, estem rebent dades guardades al servidor en format JSON, podem convertir-
ho en un objecte de JavaScript utilitzant el mètode JSON.parse().
var myJSON = '{"name":"John", "age":31, "city":"New York"}';

var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
2.3 VIDEOTUTORIAL II: CODI DE CONNEXIÓ EN AJAX

Hola de nou!
Anem a posar en pràctica els mètodes jQuery AJAX que ens permetran fer les peticions de
dades a les API.
Començarem fent una petició amb el mètode getJSON que s’executarà quan premem un botó
a la nostra vista.
Primer de tot, hem de crear un nou arxiu HTML al nostre editor de codi. Podem posar-li el nom
que vulguem.
Comencem declarant el nostre HTML5.
<!DOCTYPE html>
Obrim l’etiqueta <head>.
<head>
Introduïm l’<script> de jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”>
</script>
22
Tanquem el <head>.
</head>
Obrim el <body>.
<body>
I aquí dins farem el <div> on penjarem els resultats de la consulta.
<div id="search"></div>
Tanquem el <body>.
</body>
I creem l’<script> per fer la petició AJAX amb jQuery.
<script>
Utilitzarem el mètode getJSON per fer la petició, passant-li l’endpoint com a primer
paràmetre i com a segon paràmetre una funció de callback amb una variable com a
paràmetre, que serà el lloc on guardarem el resultat de la nostra petició AJAX. Li direm ‘data’.
Consolejarem aquest array dins la funció de callback, per poder veure la resposta per
consola.
console.log(data)
});
Tanquem l’<script> i tanquem l’<html>.
</script>
</html>
Si guardem el codi i l’executem, a la consola hi podrem veure com estem rebent correctament
les dades de l’array ‘data’.
Anem a treure, en primer lloc, només els títols per pantalla i, si ho aconseguim, intentarem
treure també les imatges de portada.
23
Sempre dins de l’àmbit de la petició AJAX –sinó perdríem els valors que obtenim amb la
petició–, declararem una nova funció, que es dirà, per exemple, ‘mostrarTitols’.
function mostrarTitols(){
I, dins de la funció, declararem la nova variable ‘cuentos’, on guardarem el resultat de

‘data.books’ per poder-nos posicionar just a la propietat de ‘data’ que conté l’array
d’objectes de JavaScript que volem mostrar en pantalla.
var cuentos = data.books;
Ara fem el bucle per poder iterar pels diferents objectes de l’array, seguint el mètode jQuery
Each. Per poder-ho fer, li diem que ens creï un nou comptador ‘key’ i un objecte ‘value’ per a
cadascun dels objectes de ‘cuentos’.
$.each(cuentos, function(key, value){
Un cop fet això, li hem de dir què volem fer amb aquest bucle que acabem de crear. Com hem
dit abans, per començar, mostrarem només els títols per pantalla. Per tant, ens crearem una
nova variable jQuery que anomenarem ‘dolar titulo’, on guardarem el resultat del
‘value.titulo’, que és el valor que volem recollir en fer el bucle.
Cal tenir en compte, mentre estiguem dins del bucle, que cada objecte JavaScript passa a ser
‘value’. Dit d’una altra manera, ‘value’ és l’equivalent de cadascun dels objectes de l’array
‘cuentos’ quan estem dins del bucle. Combinant ‘value’ amb ‘key’, podrem accedir a les
diferents posicions de l’array ‘cuentos’. Ara mateix els volem treure tots, així que no li
especificarem cap posició concreta de l’array. Aquest valor ‘value.titulo’, en contenir una
cadena de text, podem passar-lo com a element HTML d’una nova etiqueta <p> que ens
crearem directament en jQuery. Ara, la variable ‘dolar titulo’ contindrà un nou element <p>
que inclourà el valor de la propietat ‘titulo’ de cada ‘value’ (‘value.titulo’) per a cadascun dels
objectes de l’array ‘cuentos’.
var $titulo = $('<p/>').html(value.titulo);
Finalment, farem que ‘dolar titulo’ pengi de l’element amb id ‘search’, amb el mètode jQuery
‘append’.
$('#search').append($titulo)
Tanquem el bucle i la funció.
24
});
};
I, per acabar, cridem la funció que acabem de crear perquè s’executi automàticament quan
es carregui la pàgina al navegador.
mostrarTitols();
Guardem els canvis i a la vista ja apareixen els títols de tots els llibres de ‘cuentos’ que estem
recollint via AJAX. Si obrim la consola, podrem veure com estem rebent correctament les
dades del servidor.
Ara anem a provar de treure per pantalla la imatge de portada sota el títol, que, si ens hi fixem
bé, està prenent com a valor un enllaç HTTP que haurem de recollir dins del bucle i col·locar-
lo dins d’un element <img> per poder mostrar-lo a la vista.
Primer, ens crearem un nou <div> del qual anirem penjant cadascun dels elements del nostre
nou objecte de JavaScript, així que li afegirem la classe ‘object’ i aquest valor l’assignarem a
una nova variable ‘dolar object’, per poder recollir el seu valor.
var $object = $('<div class="object"/>');
Declararem també la nova variable ‘dolar image’ i crearem amb jQuery un element d’imatge
d’HTML al qual afegirem una classe ‘portada’ i com a atribut ‘src’ de la imatge li direm que
ens posi el valor de ‘value.portada’.
var $image = $('<img/>').addClass("portada").attr("src",value.portada);
Ara farem que ‘dolar titulo’ i ‘dolar image’ pengin de ‘dolar object’.
$object.append($titulo);
$object.append($image);
I, per acabar, penjarem cada objecte ‘dolar object’ de l’element amb id ‘search’ de la nostra
vista.
$('#search').append($object);
Guardarem els canvis, refrescarem el navegador i ja podrem veure que ens han aparegut
totes les imatges a cadascun dels objectes, tal com preteníem.
25
Evidentment, caldria maquetar mínimament la pàgina amb CSS per valorar bé el resultat.
Obrirem una etiqueta <style> dins del <head> de l’HTML i maquetarem els nostres objectes:
img {
width: 30%;
border: 1px solid grey
}
.titulo {
font-weight: bold;
color: yellow
}
.object {
width:300px;
margin: 10px;
padding: 10px;
text-align: center;
background-color: black;
border-radius: 5px
}
Per acabar d’enllestir la disposició dels elements fàcilment, utilitzarem Flexbox afegint un
‘display: flex’ a ‘search’ amb un ‘flex-wrap’ tipus ‘wrap’ perquè ens faci saltar de línia els
objectes, respectant la resta de paràmetres que li hem indicat.
#search {
display: flex;
flex-wrap: wrap;
}
Guardarem els canvis, refrescarem la pàgina i ja ho tindrem. Hem aconseguit treure per
pantalla les dades que hem recollit de l’API REST i les hem integrat a la nostra vista.
Si obrim la consola, veurem com se’ns han estructurat correctament els elements HTML que
hem creat amb jQuery: tenim un div ‘search’ principal d’on pengen cadascun dels objectes de
l’array amb la classe ‘object’ que li hem afegit. Si obrim l’objecte, veurem que en pengen un
paràgraf amb classe ‘titulo’ amb el valor de ‘dolar titulo’ i la imatge amb classe ‘portada’ amb
el valor de ‘dolar portada’.
Hem enllestit l’exercici.
Seguim!
26
2.4 IDEES CLAU: SOL·LICITUDS DE L'API

Vegem quines han estat les qüestions principals que hem tractat al llarg d’aquest segon
mòdul:
• jQuery és un framework de JavaScript, és a dir, una llibreria que es compila en

JavaScript i que ens permet afegir dinamisme al nostre HTML.
• jQuery facilita la manipulació dels objectes de la vista i simplifica les peticions AJAX.
• Per poder treballar amb jQuery, cal referenciar l’arxiu ‘jquery.min.js’ al nostre arxiu
HTML. Aquest podem descarregar-lo de la pàgina jquery.com o bé llegir-lo directament
en línia des del CDN de Google.
• El mètode $.getJSON() ens permet fer peticions AJAX sempre que estiguem recollint un
JSON de l’endpoint on fem la consulta.
• El mètode $.get() és equivalent a fer una petició XMLHttpRequest() utilitzant el mètode
HTTP GET en JavaScript.
• El mètode $.ajax() ens permet fer una consulta i manipular també el resultat de l’error a
diferència dels dos mètodes anteriors.
• El mètode $.each ens permetrà recórrer l’array d’objectes de JavaScript que obtinguem
com a resposta, adjudicant a cada objecte una clau ‘key’ en forma de comptador
ascendent i un ‘value’ que en aquest cas serà cadascun dels objectes de l’array que li
passem com a paràmetre al bucle. Per cada volta o iteració del bucle, es construirà un
nou objecte de l’array de sortida.
• Les peticions via AJAX són sempre peticions asíncrones. L’asincronia fa referència al fet
que les peticions a API s’executen sempre, un cop tota la resta d’arxius de la pàgina
estan llestos. En rebre la resposta, s’actualitza la informació de la pàgina sense
necessitat d’haver-se de carregar de nou.
• $(document).ready() és el mètode jQuery que fa que un cop el ‘document’ hagi enllestit
tota la resta de processos, executi la funció de callback que li passem entre claus, com
podria ser una petició AJAX.
• El mètode jQuery ‘click’ ens permet vincular l’execució de la petició AJAX a qualsevol
element de la nostra vista, com per exemple un botó.
• Abans de mostrar res en pantalla, el primer que farem és treure els valors dels
paràmetres de l’objecte que vulguem mostrar per pantalla a través de la consola,
introduint tants ‘console.log’ d’aquestes variables com necessitem.
• El mètode jQuery ‘append’ ens permet penjar els valors de les propietats de l’objecte a
qualsevol element de la nostra vista o de nous elements que podem crear directament
en jQuery dins de la funció de callback del bucle $.each().
• JSON és una manera de treballar amb les dades directament com a objectes de
JavaScript.
• Podem convertir un objecte de JavaScript a JSON per poder enviar-lo al servidor amb el
mètode JSON.stringify().
• Podem convertir un JSON guardat al servidor en un objecte de JavaScript, utilitzant el
mètode JSON.parse().
27
3 RESPOSTA DE L'API
Al llarg d’aquest mòdul, analitzarem els missatges de resposta i error més comuns de les API
i ens endinsarem en els processos d’autorització i autenticació.
Per fer-ho, ens centrarem en el cas de Spotify Web Api, una plataforma que ens permetrà
desenvolupar una nova aplicació que utilitzarà recursos de l’API de Spotify.
Seguirem el tutorial de la web Spotify Developers per tal de configurar correctament la nostra
nova aplicació.
El primer pas serà registrar la nova aplicació perquè l’API de Spotify accepti les peticions
AJAX del nostre usuari o usuària.
A partir d’aquí, prepararem el nostre entorn de treball instal·lant-nos Node.js i ens

descarregarem una estructura bàsica d’arxius de GitHub que ens proporcionarà la mateixa
guia de Spotify.
Analitzarem a fons aquests arxius, per entendre bé la funció que juga cadascun d’ells dins
l’aplicació, i crearem les noves carpetes on guardarem els nostres nous <scripts> i estils.
Executarem l’aplicació en entorn local i rebrem els tokens que ens permetran autenticar les
nostres peticions a l’API, perquè siguin acceptades.
Analitzarem els endpoints que haurem de cridar per aconseguir la resposta que ens interessa
recollir.
Tots aquests coneixements ens permetran avançar en el projecte final que us proposem
lliurar en el quart mòdul.
Ens podrem descarregar el codi complet de l’exercici al final de curs.
Som-hi!
3.1 MISSATGES DE STATUS HTTP

Veiem ara una descripció dels missatges de resposta i error més comuns de les API.
Per fer-ho, analitzarem l’objecte XMLHttpRequest que ens retornarà el servidor cada cop que
fem una nova petició de dades, en aquest cas de l’API de GitHub:
//crida 1
var url = "https://api.github.com";
28

console.log(myArr);:
}
};

xmlhttp.send();
console.log(xmlhttp);
Recordem que el primer que estem fent és igualar el resultat de l’execució del mètode
XMLHttprequest() que estem implementant a la variable que declarem a la primera línia
‘xmlhttp’. Si no ho féssim així, perdríem les dades de la crida AJAX i no podríem recuperar-les
ni treballar-hi posteriorment. El que fem a l’última línia és precisament consolejar el resultat
d’aquesta variable ‘xmlhttp’ que conté l’objecte de JavaScript per poder analitzar els codis de
resposta que ens torna el servidor.
Vegem les propietats principals que conté aquest objecte que ens retorna el servidor cada
cop que fem una nova petició:
• La propietat readyState conté l’estatus de la crida.

• La propietat onreadystatechange defineix la funció que ha de ser executada quan
readyState canvia.
• Les propietats status i statusText contenen els missatges d’status HTTP de l’objecte
XMLHttpRequest.
Vegem els valors principals que pot prendre la propietat readyState:
• readyState = 0 => petició no inicialitzada

• readyState = 1 => connexió de servidor establerta
• readyState = 2 => petició rebuda
• readyState = 3 => petició en procés
• readyState = 4 => petició finalitzada i resposta llesta
Ara veurem els valors més comuns que acostuma a prendre la propietat status en el cas que
la petició AJAX es processi satisfactòriament:
• Status 200 => Resposta estàndard quan la petició està OK.

• Status 201 => En cas de peticions per POST, petició completada i nou recurs creat.
Per la seva banda, els errors 400 fan referència als errors de la part client:
• Status 400 = Bad Request => La petició no es pot completar per un error de sintaxi.
• Status 401 = Unauthorized => La petició és legal peròel servidor la rebutja.
Acostuma a saltar en els casos que l’autorització és necessària però errònia.
• Status 403 = Forbidden => La petició és legal peròel servidor la rebutja.

• Status 404 = Not found => L’URL indicat no es troba.
29
I els errors 500 indiquen errors de servidor:
• Status 500 = Internal Server Error => Missatge d’error genèric.

• Status 503 = Service Unavailable => El servidor no està disponible.
Executem ara la consulta a l’API de GitHub que tenim preparada i obrim la consola per veure
els resultats de la petició.
Efectivament, aquí podem veure l’objecte XMLHttpRequest i totes les seves propietats.
Comprovem que el valor de readyState és 4, el valor de status és 200 i el valor de statusText
és ‘OK’. Aquesta és la resposta típica quan la petició és satisfactòria.
Fem ara una nova petició a la mateixa API, però canviant l’endpoint. Podem fer-la a
continuació de la primera petició, per poder comparar millor els resultats:
//crida 2
var url = "https://api.github.com/user";
console.log(myArr);
}
};

xmlhttp.send();
console.log(xmlhttp);
Guardem els canvis i recarreguem la pàgina. Obrim la consola i ja podem veure que se’ns han
executat les dues peticions. Vegem la resposta de la segona crida: tot i que readyState és 4,
el valor de status és 401 i statusText diu ‘Unauthorized’. Estem rebent, per tant, una resposta
d’error de client. El servidor no ens està autoritzant la petició a l’endpoint que li hem indicat.
La raó és que, per accedir a la informació dels usuaris i usuàries, GitHub demana autorització
prèvia. De fet, si anem directament a l’endpoint que estem cridant:
https://api.github.com/user, podrem veure com ens està demanant una autenticació d’accés.
També ens indica un URL on podem consultar tota la informació relativa a l’autenticació
d’usuaris de GitHub. Com que el procés d’autenticació d’usuaris acostuma a tenir una certa
complexitat, moltes plataformes, com és el cas de Github, ofereixen una drecera a la seva
API, per tal de poder fer certes proves sense autenticació.
30
Per poder-ho veure, entrem a https://api.github.com/users i veurem l’objecte JSON que conté
per pantalla. Fixem-nos que cada objecte té el seu propi endpoint, però que l’estructura
sempre és la mateixa: ‘https://api.github.com/users’ barra ‘login’. Per tant, si volem llançar
una consulta que ens retorni els valors del primer usuari, simplement hauríem de canviar
l’URL de l’endpoint de la consulta a https://api.github.com/users/mojombo
En efecte, si carreguem la pàgina de nou, se’ns executarà la nova petició correctament i ens
mostrarà l’objecte a la consola. Podem fer la prova d’entrar a l’URL directament a través del
cercador i així comprovarem que estem recollint exactament la mateixa informació.
Una altra opció que tenim és treure la consulta directament per terminal, fent un ‘curl
https://api.github.com/users/mojombo’ o el login de l’usuari que vulguem consultar.
3.2 REQUERIMENTS DE LES API

Hola de nou!
La majoria de les API ens demanaran una autorització prèvia per tal de permetre l’accés a les
seves dades. En cada cas haurem de veure com hem de procedir per tal d’aconseguir aquesta
autorització. En aquesta sessió ens centrarem en el cas concret de l’API de Spotify per tal
d’entendre millor en què consisteix aquest procés d’autorització i autenticació d’usuaris.
Si entrem a ‘https://developer.spotify.com/’ i accedim a DOCS > WEB API, trobarem tota la

informació relativa a com establir la connexió amb l’API de Spotify.
El primer que ens diu és que l’API està construïda en REST de manera que els endpoints
retornen els arxius JSON que contenen artistes de música, àlbums i cançons extretes
directament de la base de dades de Spotify.
A continuació ens diu que l’API també ens permet accedir a les dades del usuari o usuària,
com per exemple les llistes de reproducció i la música que guarda a la seva llibreria privada i
que, per permetre aquest accés, és indispensable que l’aplicació rebi un permís
d’autorització que es realitza via Spotify Accounts Service, concretament a l’URL
‘https://accounts.spotify.com/es/status’.
En relació amb l’autenticació, ens comenten que totes les peticions a l’API de Spotify
requereixen una autenticació que es realitza mitjançant l’enviament d’una clau secreta o
token a la capçalera de la petició AJAX. En el cas de consultes privades, aquest
‘access_token’ només es genera un cop l’usuari autoritza l’accés de l’aplicació a les seves
dades.
Estudiem ara el primer apartat del menú superior: ‘QUICK START’.
En aquest apartat ens expliquen com podem desenvolupar una aplicació del costat client
basada en els recursos de la API de Spotify, un servei que fa que les aplicacions externes
puguin rebre continguts de Spotify. Per accedir a les dades relacionades amb l’usuari o
31
usuària, cal que l’aplicació estigui autoritzada per part d’aquesta persona per poder accedir a
una informació determinada. Dit d’una altra manera, és com si haguéssim de donar d’alta la
nostra nova aplicació a Spotify, per tal de poder enviar consultes i rebre dades de la seva API.
L’exercici que ens proposen en el seu tutorial utilitza Node.js i JavaScript per tal de:
• Registrar una aplicació a Spotify.

• Autenticar un usuari o usuària i rebre l’autorització per accedir a la seva informació
privada.
• Rebre dades dels endpoints de l’API.
D’ara en endavant anirem seguint els passos que ens indica aquest tutorial proposat.
Configuració del compte
Cal que disposem d’un compte de Spotify, sigui Premium o gratuït. Si no en tenim cap,
haurem de crear-ne un a www.spotify.com. Un cop tinguem el compte d’usuari, hem d’entrar
a la nostra zona privada fent login a: https://developer.spotify.com/dashboard.
Aquí és on podrem autoritzar l’accés de la nostra aplicació a l’API de Spotify.
Registre de l’aplicació
Qualsevol aplicació pot demanar dades de qualsevol endpoint de Web API de Spotify i molts
d’aquests endpoints estan oberts i retornen dades sense requerir un registre. Però, si la nova
aplicació demana accés a les dades personals de l’usuari, caldrà que estigui registrat o
registrada. Podem registrar l’aplicació abans de crear-la, fent clic a “Register your
application”.
Seguirem els passos que ens indiquen:
Des del nostre dashboard, farem clic a CREATE A CLIENT ID que és simplement un
identificador únic de la nostra aplicació.
Introduirem el nom i la descripció de l’aplicació i clicarem a CREATE.
Entrarem dins la vista de la nova aplicació i aquí podrem trobar el CLIENT ID i el CLIENT
SECRET, que necessitarem durant la fase d’autenticació. “Client Secret” és la clau que
passarem a les crides perquè les peticions siguin més segures. És important que no fem mai
públiques aquestes claus.
Preparació de l’entorn de treball
32
Un cop registrada l’aplicació, el pas següent serà preparar el nostre entorn de treball
instal·lant-nos Node.js per poder treballar en un entorn d’execució de servidor en JavaScript.
Accedim a ‘https://nodejs.org/es’ i ens descarreguem la versió LTS.
Carpeta de projecte i arxius
Fem clic a l’enllaç ‘OAuth examples’ de Quick Start i ens descarreguem el repositori en format
Zip al nostre ordinador. El descomprimim i canviem el nom de la carpeta pel nom que
vulguem posar al nostre projecte.
Des del terminal, ens situem a la carpeta que acabem de crear i executem la comanda ‘npm
install’ que ens instal·larà els paquets i les dependències corresponents a la nostra aplicació.
Si traiem una llista del contingut de la nostra carpeta llançant la comanda ‘ls’, entre d’altres,
trobarem la carpeta ‘authorization code’. Entrem dins aquesta carpeta i comprovem que
conté l’arxiu ‘app.js’ i la carpeta ‘public’, que serà la carpeta on allotjarem totes les pàgines
web públiques de la nostra aplicació. Tota la resta d’arxius s’allotjaran fora d’aquesta
carpeta i, per tant, no seran mai accessibles a l’usuari de l’aplicació. Entrem a la carpeta
‘public’ i trobem l’arxiu ‘index.html’, la funció del qual és permetre al programador o
programadora fer login per accedir a la seva aplicació.
Deixem el terminal i obrim aquest mateix arxiu al nostre editor de codi. Veiem que, en primer
lloc, executa el codi de ‘app.js’ per poder autoritzar-nos a fer el login a la nostra app i, a
continuació, mostra una plantilla amb la resposta que recull de l’endpoint
‘https://api.spotify.com/v1/me’, corresponent a la informació pública de l’usuari o usuària.
Ja hem enllestit els primers passos de la configuració de la nostra nova aplicació de Spotify.
Seguim!
3.3 VIDEOTUTORIAL III: REQUERIMENTS DE LES API

En aquesta tercera part del videotutorial seguirem amb el procés de configuració de la nostra
aplicació seguint el tutorial de Spotify Developers.
Un cop ens hem instal·lat l’estructura bàsica de fitxers, a l’editor de codi obrim la carpeta de
projecte que conté la carpeta ‘authorization_code’. Aquesta és la carpeta on treballarem tota
l’estona. Conté la carpeta ‘public’ i l’arxiu ‘app.js’ on hi ha el codi que executa l’aplicació.
Obrim ‘app.js’ i veiem que primer es declaren les variables ‘Client ID’, ‘Client Secret’ i
‘Redirect URI’. Traspassarem tota aquesta informació del nostre dashboard a l’arxiu ‘app.js’
de la nostra aplicació. Un cop hem definit aquests valors, afegim
‘http://localhost:8888/callback’ com a ‘Redirect_URI’. Copiem la ruta i guardem els canvis.
Tornem al dashboard i obrim Settings. Com a Web indiquem ‘http://localhost:8888’ i com a
Redirect URI habilitem la mateixa ruta que acabem de definir al nostre codi tal com suggereix
el tutorial de Spotify. Guardem els canvis.
33
Obrim el terminal i ens situem a la carpeta ‘authorization_code’ des d’on executarem la

nostra aplicació llançant ‘node app.js’. Ens llançarà la pàgina d’autorització de Spotify
Accounts pel port ‘localhost:8888’.
Introduïm les claus d’usuari i fem ‘Login’. Al mateix moment estarem enviant les credencials
privades que hem establert a ‘app.js’ i si no hi ha cap error ens obrirà el ‘index.html’ a la
Redirect URI que li hem indicat. També ens retornarà un ‘access_token’ per HTTP que
necessitarem per poder autenticar les nostres peticions.
Per ara, el que estem veient per pantalla és la nostra informació de usuari més el
‘access_token’ i el ‘refresh_token’, però en realitat el que ens agradaria és fer una web on el
usuari pugui introduir el nom d’un o una artista i l’aplicació torni les seves cançons principals.
Si ens fixem, per terminal estem rebent la resposta que ens retorna les dades del nostre
usuari que apareixen a la vista. El codi que està executant aquesta petició és el últim <script>
del ‘index.html’, que enlloc de deixar -lo aquí, el que farem és tallar-lo i crear-nos una nova
carpeta ‘scripts’ dintre de ‘public’ on crearem un nou arxiu ‘spotify.js’ on enganxem el tros de
codi que just acabem de tallar eliminant les etiquetes <script>. Aquí és on farem totes les
crides. També dins de ‘public’ crearem una segona carpeta ‘styles’ on guardarem una nova
fulla d’estils ‘spotify.css’.
Traspassarem la part CSS del index al nou arxiu ‘spotify.css’. Recorda que cal referenciar
aquests nous arxius JS i CSS a l’index perquè ens els reconegui l’aplicació. Fixem-nos que ja
ens han inclòs la llibreria de CSS Bootstrap i el <script> de jQuery més un segon <script> de
‘Handlebars’. Es important que primer es carreguin aquests dos arxius abans de carregar el
nostre, així que el <script> de ‘spotify.js’ el posarem en últim lloc. Guardem, tanquem el
procés que teníem iniciat al terminal i tornem a llançar la comanda ‘node app.js’ per executar
l’aplicació en una nova finestra.
Anem a analitzar la crida que està recollint la informació d’usuari que veiem per pantalla.
Veiem que l’arxiu comença declarant una funció que s’executa directament quan es carrega
‘spotify.js’. Es una funció equivalent a la funció ‘document ready’. Dintre d’aquesta funció
que engloba tot el codi, es defineix la nova funció ‘getHashParams’ que recull els paràmetres
que li arriben de la API per HTTP, que són els valors del ‘access_token’ i del ‘refresh_token’.
Centrem-nos ara en la part del codi que comença al primer IF on el que fa l’aplicació és
comprovar si ‘error’ existeix. Si existeix, s’executa el ‘alert’ que li estem passant, però si tot
funciona bé, entrem al ELSE i fem un IF anidat que comprova si existeix ‘access_token’. Si
existeix, s’executa la crida AJAX i, sinó, entrem al segon ELSE. Encara dintre del primer ELSE,
que és el que contindrà totes les crides que farem, afegim un esdeveniment clic al botó
‘obtain_new_token’ perquè ens refresqui el token mitjançant una nova crida AJAX, tot i que
nosaltres no implementarem aquesta funció a la vista perquè amagarem aquest botó que no
necessitem.
Tornem a l‘index i ens fixem un moment en els dos <scripts> que s’estan carregant al final de
la pàgina. El primer <script> amb id ‘user-profile-template’ el que fa és carregar en una
34
plantilla la resposta que conté la informació de l’usuari que prové de la primera crida AJAX
utilitzant un mètode d’interpol·lació. Aquesta part la reaprofitarem per a la nostra aplicació i
canviarem únicament el codi CSS. El segon <script> amb id ‘oauth-template’ el que està fent
és mostrar-nos per pantalla el ‘acces_token’ i el ‘refresh_token’, que són dades que
directament podem recollir de la ruta del navegador i que no ens estan aportant res a la vista.
Per tant, amagarem aquests elements de la vista que no volem ensenyar obrint ‘spotify.css’ i
fent un ‘display:none’ dels elements amb id ‘oauth’ i ‘obtain-new-token’
Si en algun moment l’aplicació ens deixa de funcionar i per consola veiem que ens torna un
error 401, el més probable és que ens hagi caducat el token. Simplement anem al terminal,
tanquem el procés que estàvem executant i tornem a llançar la comanda ‘node app.js’. Obrim
‘localhost:8888’ a una nova pàgina del navegador i fem login de nou.
Arribats a aquest punt és moment de fer la crida AJAX que hauria de recollir el nom del artista
que introdueixi l’usuari al ‘input’ de la vista i enviar-lo al servidor juntament amb el
‘access_token’ per aconseguir les ‘top-tracks’ de l’artista. Per poder fer això, haurem de
saber quin és el endpoint que hem de consultar, així que entrarem a l’apartat Reference de
Spotify Developers.
Seleccionem ‘Artists’ i ens mostra una llista dels endpoints que fan referència als artistes,
com per exemple ‘top-tracks’ que és l’endpoint que hauríem de consultar. Entrem i veurem
com hem de procedir. Ens diu que l’autorització és obligatòria i que l’endpoint treballa amb la
variable ‘id’ que es correspon amb el Spotify ID de l’artista. Per tant, abans d’arribar a les
‘top-tracks’, haurem d’implementar una petició AJAX prèvia que ens reculli el ‘id’ del artista.
Anem doncs a l’endpoint ‘/search’ on ens expliquen com fer una cerca a partir d’un nom
d’artista o cançó. Passem ‘queen’ com a artista, ‘ES’ com a ‘market’ i com a ‘access_token’
copiem el que ens està arribant per HTTP. Fixem-nos que no és tot l’URL sinó només fins que
começa el ‘refresh_token’. Cliquem ‘Try it’ i, si tot funciona bé, rebrem la resposta en
pantalla, així podrem comprovar si l’endpoint que hem de consultar funciona correctament.
Fins aquí la tercera part del videotutorial del curs.
3.4 IDEES CLAU: RESPOSTA DE L'API

Repassem les qüestions principals que hem tractat al llarg d’aquest tercer mòdul:
• Hem començat analitzant les propietats ‘readyState’ i ‘status’ que contenen els
missatges de status HTTP de l’objecte XMLHttpRequest que ens arriba de l’API.
• Hem vist que, quan ‘readyState’ és igual a 4, la petició està finalitzada i la resposta
llesta per ser recollida.
• Els valors 200 de ‘status’ són missatges d’èxit. Els valors 400 són errors de la part client,
com els errors de sintaxi del nostre codi. I els errors 500 indiquen errors de servidor, com
per exemple quan no està disponible.
• Totes les consultes es poden executar directament des del terminal. És una bona
pràctica de programació provar d’accedir als endpoints a través del terminal, per veure
35
que estiguin funcionant correctament abans de posar-se a fer la petició AJAX

directament al codi.
• La majoria de les API demanen autorització prèvia per tal de permetre l’accés de les
nostres consultes a les seves bases de dades. Cal instanciar els valors ‘Client ID’, ‘Client
Secret’ i ‘Redirect URI’ de ‘app.js’ amb els valors secrets d’autorització indicats al
dashboard de la nostra aplicació a la web de Spotify Developers.
• Node.js és un entorn d’execució de servidor en JavaScript.
• La carpeta ‘public’ serà la carpeta que contindrà tots els arxius de la nostra aplicació
quan treballem amb Node.js. Fora d’aquesta carpeta, només queda l’arxiu ‘app.js’, que
conté les nostres credencials privades i que, per tant, no es pot fer públic. ‘Index.html’
conté la vista principal on s’executa la nostra aplicació.
• Per executar la nostra aplicació, cal anar al terminal, situar-nos a la carpeta
‘authorization_code’ i llançar la comanda ‘node app.js’. Veurem el resultat a
‘http://localhost:8888’.
• Si el login és correcte, el servidor ens enviarà un nou ‘access_token’ com a resposta de la
crida a ‘https://accounts.spotify.com/api/token’ de ‘app.js’.
• La funció ‘getHashParams’ de l’arxiu ‘spotify.js’ serveix per recollir l’‘access_token’ que
ens arriba per HTTP, per tal que puguem autenticar les nostres peticions AJAX.
• Quan el token caduca, l’aplicació ens torna un error 401. Des del terminal, finalitzem el
procés d’execució que tenim iniciat fent ‘Control + C’ (Mac) i tornem a llançar la
comanda ‘node app.js’. Obrim de nou ‘localhost:8888’ en una nova pàgina del navegador
i fem el login.
• https://developer.spotify.com/documentation/web-api/reference conté tota la llista
d’endpoints que poden consultar i ens explica com utilitzar-los. També ens permet
testejar les nostres peticions (queries).
4 RELACIÓ ENTRE SOL·LICITUD I RESPOSTA

Al llarg d’aquest mòdul, farem les crides AJAX i enllestirem la nostra nova aplicació de
Spotify.
En primer lloc, analitzarem els endpoints que necessitem consultar des de l’apartat
Reference de la web Spotify Developers: https://developer.spotify.com/documentation/web-
api/reference
Farem la primera petició a l’endpoint ‘/search’ de l’API que ens retornarà tots els id
coincidents amb el nom de l’artista que cerquem.
Un cop tinguem aquests valors, farem la segona petició a l’endpoint ‘/top-tracks’, aprofitant
l’id de l’artista que li passem. Aconseguirem recollir un array de cançons executables a través
de l’aplicació de Spotify.
Per realitzar totes aquestes peticions de dades, haurem d’autenticar totes les crides AJAX
amb el token que rebrem com a resposta per HTTP. Hem de tenir en compte que aquest token
36
ens caducarà cada cert temps, així que veurem com podem solucionar fàcilment aquest
problema.
A l’última part del videotutorial, enllestirem el codi de la nostra aplicació, mostrant a la vista
els resultats de les crides i maquetant els nous elements al codi CSS de la nostra aplicació.
Endavant!
4.1 RELACIÓ ENTRE SOL·LICITUD I RESPOSTA

Reprenem, a continuació, el projecte de Spotify que hem començat.
En aquest quart mòdul farem les crides AJAX que abans hem deixat pendents i manipularem
la resposta per tal de poder mostrar-la a la vista.
El primer que farem és construir-nos a l’arxiu index.html els nous elements que necessitem
dins de ‘loggedin’ per poder recollir els resultats de les noves peticions de dades que farem a
‘spotify.js’.
<div id="loggedin">
<div id="user-profile"></div>
<div class="input">
<input id="name">
<button id="button">¡Get your favourite artist's Top Tracks!</button>
<button id ="clear_results">Clear results</button>
</div>
<dl id="resultats" class="dl-horizontal">
<dt>Artists</dt>
<dd id="artists" class="text-overflow"></dd>
<dt>Top Tracks</dt>
<dd id="top_tracks" class="text-overflow"></dd>
</dl>
<div id="oauth"></div>
<button class="btn btn-default" id="obtain-new-token">Obtain new token using the refresh
token</button>
</div>
En primer lloc, crearem un <div> amb id ‘input’ que tindrà un quadre de text perquè el públic
pugui introduir el nom de l’artista amb id ‘name’, un botó que llanci la primera crida i un altre
botó que permeti netejar els resultats de la vista. A sota, crearem un nou <div> on es penjaran
els resultats de les crides, que es dirà ‘resultats’. I, a dins, hi crearem el <div> ‘artists’, on
mostrarem els resultats de la crida a l’endpoint ‘/search’ i a continuació el <div> ‘top-tracks’,
on mostrarem els resultats de la crida a ‘/top-tracks’. Utilitzarem els elements <dl> i <dt> de
Bootstrap.
Un cop hem enllestit la nostra vista, és el moment d‘implementar les crides dins de l’arxiu
‘spotify.js’.
37
Recordem que, abans, hem pogut comprovar que la petició que hem realitzat a l’endpoint
‘/search’ s’ha executat correctament. Provem ara de fer la crida de nou amb l’‘access_token’
que estem rebent per HTTP. El copiem i anem a ‘Search for an item’ dins de les References
del tutorial de Spotify Developers. Li indiquem “queen” com a “artist” i “ES” com a “market” i
enganxem el valor del nou ‘access_token’ a Oauth Token. Si tot funciona bé, rebrem la
resposta a la pantalla.
Copiarem aquesta consulta (query) dins de ‘spotify.js’, que ens servirà de base per fer la
query final, però la deixarem comentada perquè no s’executi. Nosaltres farem la petició per a
AJAX just on acaba l’‘addEventListener’ del ‘refresh_token’. Ens hem de fixar que sempre
estiguem dins de l’àmbit del primer ELSE.
Per recollir el valor de l’endpoint, només haurem de substituir l’artista concret que li estem
passant a la query per una variable que guardi el valor que l’usuari o usuària introdueixi a
l’input ‘name’. Prendrem d’exemple el model del ‘refresh_token’ per afegir un nou
‘addEventListener’ a ‘button’ perquè la crida s’executi quan l’usuari o usuària faci clic.
Com a últim pas abans de fer la crida, declararem la nova variable ‘artistName’ que recollirà
el nom de l’artista que introdueixi l’usuari o usuària a ‘Name’, utilitzant la funció de jQuery
‘.val()’. Cal comprovar que si el nom conté algun espai en blanc, substitueixi aquest espai per
un ‘%20’, que és el valor que pren l’espai a HTTP. També utilitzarem la funció ‘.trim()’ per
eliminar qualsevol espai que pugui haver-hi per davant o per darrere del nom.
Un cop tenim llesta la variable ‘artistName’, obrim un nou IF on comprovarem si

‘access_token’ existeix i, si existeix, ara sí que farem la crida a ‘/search’:
$.ajax({
38
url: 'https://api.spotify.com/v1/search?q=' + artistName + '&type=artist',

market: ‘ES’,
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response) {
console.log(response)
}
});
Utilitzem el mètode jQuery AJAX perquè hem de passar-li diferents paràmetres.
En primer lloc, definim l’‘url’ aprofitant l’endpoint que hem cridat abans i que hem copiat en
aquest mateix arxiu. Substituïm ‘queen’, concatenem ‘artistName’ i ja tenim l’‘url’ llest.
Com a paràmetre de país, li passem “ES”, que és el corresponent al nostre mercat.
Dins de les capçaleres o ‘headers’, li passem l’‘access_token’ que es recull directament de la

barra HTTP quan s’executa la funció ‘getHashParams’ que hem definit a ‘spotify.js’.
A la variable ‘success’, definirem què volem fer quan la petició s’executi correctament. Per
ara, farem un ‘console.log’ de ‘response’, que és la variable que hem definit per guardar la
resposta.
Guardem els canvis i refresquem la pàgina. Si introduïm qualsevol artista i premem el botó de
cerca, ens hauria de retornar la resposta per consola. Efectivament, aquí tenim el JSON i, si
despleguem ‘items’, trobarem l’array d’objectes de JavaSript amb cadascun dels artistes
coincidents amb el nom d’artista que li hem passat. Si despleguem qualsevol d’aquests
objectes, veurem que conté la propietat ‘id’ que haurem de passar a la petició següent per
poder recollir les ‘top-tracks’ de l’artista que seleccioni l’usuari o usuària dins de l’array
d’artistes de la primera crida.
En el cas que tot funcioni bé, haurem de substituir el ‘console.log’ de prova per tot el codi que
ens permetrà mostrar els nous elements a la vista. Comencem definint una nova variable
‘artistsArray’ on guardem el valor de ‘response.artists.items’ que conté l’array d’artistes on
hem de fer el bucle per poder mostrar els objectes a la vista.
Declarem la variable ‘$id’ fora del bucle per poder tenir-la disponible de manera global, ja que
haurem de passar-la a l’endpoint de la pròxima crida. Si definíssim la variable dins del bucle,
perdríem el seu valor. Declarem el bucle i comencem instanciant aquesta variable ‘$id’ que
acabem de crear amb la propietat ‘id’ de cada element d’‘artistArray’. Seria exactament el
mateix si li donéssim el valor de ‘value.id’. Seguim definint la nova variable ‘$name’, que
guardarà la propietat ‘name’ de cada element de l’array (‘value.name’ seria equivalent).
Construïm també un <div> per a cada ‘$name’ i li afegim la classe ‘.name’. Ara definim la
variable ‘$button’, que contindrà un ‘button’ per a cadascun dels artistes. Li posarem classe
‘.button’ i com a id li passarem el valor d’‘$id’ de l’artista que correspongui a cada posició de
39
l’array. És important que li passem aquest valor al botó per després poder-lo recollir a la
segona crida AJAX. Acabem construint un ‘$object’ per a cada element de l’array que serà
d’on penjarem tots els elements anteriors per poder-los manipular alhora.
Només ens queda fer els ‘appends’: fem que $name pengi de $nameDiv; que $nameDiv pengi
de $button; que $button pengi de $object; i, per últim, que $object pengi de l’id ‘artists’ de la
nostra vista. Sempre hem d’anar dels elements més petits als més grans i entendre que, per a
cada volta del bucle, es construirà un nou objecte a la nostra vista, iterant la clau (‘key’) a
cada volta.
Guardem els canvis i refresquem el navegador. Si cerquem qualsevol artista, ens ha de

retornar a la pantalla tots els artistes que coincideixin amb la nostra cerca, en forma de
botons.
A la propera lliçó, procedirem amb la segona crida AJAX al nou endpoint ‘top-tracks’,
aprofitant el valor de l’‘$id’ de l’artista que l’usuari o usuària seleccioni en aquest punt i
donarem estils CSS a la nostra aplicació.
4.2 INTEGRACIÓ DELS NOUS RECURSOS

Hola de nou!
És el moment de començar a preparar la segona crida AJAX.
En aquesta segona petició, recollirem el valor ‘id’ del botó de l’artista que hagi seleccionat
l’usuari o usuària per poder fer la segona crida i poder recollir les seves top-tracks.
Necessitem que les dues peticions estiguin relacionades perquè necessitem recollir el valor
‘id’ d’artista de la primera petició per poder fer la segona. Per tant, ens haurem de mantenir
tota l’estona dins l’àmbit del ‘success’ de la primera crida. Es tracta, doncs, d’una crida dins
d’una altra crida.
Comencem afegint un esdeveniment ‘click’ a tots els botons amb classe ‘button’. No ens hem
de confondre amb el botó que llança la primera crida amb l’id ‘button’. Allarguem les claus de
la funció de callback perquè aquí dins és on haurem de fer la segona petició.
Però, abans, provarem de fer la consulta pel terminal. Tornem a Spotify Developers i entrem
de nou a l’apartat References. Seleccionem Artists i entrem a l’endpoint Get an Artist’s top
Tracks. Cliquem “Try it”, per fer la prova.
Com a valor ‘id’, li passem el valor del primer artista que ens torna la consola de la primera
crida. Com a “Country” li definim “ES” i com a “Oauth Token” copiem el que ens està arribant
a través de la barra de navegació de la nostra aplicació per HTTP. Recordem que per aquí
també ens estan passant el ‘refresh_token’, però que ara mateix no hem de recollir.
40
Cliquem a “Try it” per executar la petició i, si tot funciona correctament, Spotify ens torna la
resposta a la pantalla. Un cop fet, copiem el codi de la petició al nostre arxiu ‘spotify.js’ i el
deixem comentat per poder-lo tenir present.
Fem, a continuació, la segona crida AJAX, que s’executarà quan l’usuari o usuària faci clic a
qualsevol dels botons dels artistes:
$.ajax({
url: 'https://api.spotify.com/v1/artists/'+ this.id +'/top-tracks?country=ES',
type:"GET",
headers: {
'Authorization': 'Bearer ' + access_token,
'Content-Type': 'application/json',
'Accept': 'application/json'
},
success:function(result){
console.log(result)
},
error:function(error){
console.log(error)
}
});
Comencem fent un ‘console.log’ de la variable ‘result’ que conté la resposta de l’API.

Guardem els canvis i refresquem el navegador a la finestra de la nostra aplicació. Cada cop
que caduqui l’‘access_token’, recordem que hem d’anar al terminal, tancar el procés que
tinguem iniciat i tornar a llançar la comanda ‘node.app.js’ des de la carpeta
‘authorization_code’ de la nostra aplicació. Hem de tancar la finestra on estàvem executant
l’aplicació que ja no funciona, obrir-ne una de nova i cridar ‘localhost:8888’. Quan fem el nou
login ja ens tornarà a funcionar. No té massa complicació, perquè l’aplicació recull i
actualitza el token directament des de la barra de navegació HTTP gràcies a la funció
‘getHashParams’ definida a ‘spotify.js’.
Fixem-nos que, per recollir el valor ‘id’ del botó que clica l’usuari o usuària, estem utilitzant la
propietat ‘this.id’ dins de la ruta de l’endpoint (‘url’). ‘This’ fa referència al botó exacte que
l’usuari o usuària clica i ‘this.id’ ens torna a la propietat ‘id’ d’aquest botó concret, que, a la
primera crida, hem definit que fos el valor de l’‘id’ de l’artista.
Amb l’aplicació en funcionament i la consola oberta, busquem un artista. Rebrem per

pantalla i per consola la llista d’artistes coincidents amb el terme introduït. Fem clic al botó
de l’artista que coincideix exactament amb el que volíem buscar, i el cliquem per executar la
segona crida. Per consola, hauríem de rebre el nou JSON que recollim a la segona crida. El
despleguem i veiem que conté un array de deu objectes de JavaScript. Aquestes són
cadascuna de les top-tracks de l’artista que ens ha tornat l’API.
41
En aquest punt, hem de decidir quines propietats volem mostrar per pantalla. Podríem
recollir, per exemple, el ‘name’ de la cançó i l’‘uri’, que és una ruta HTTP executable que ens
ofereix obrir la cançó a l’aplicació de Spotify. Per tant, cada nou botó que fem haurà de
convertir-se en un nou enllaç a la propietat ‘uri’ de cada objecte.
Tornem al nostre arxiu spotify.js i, dins del ‘success’ de la segona crida, declarem la nova
variable ‘$top_track’, que contindrà el ‘value.name’. Declarem també una variable ‘$link’, que
contindrà un enllaç a ‘value.uri’. Construïm un nou botó amb classe ‘new_button’ per a cada
cançó i un div ‘$new_object’ d’on penjarem tots els elements que acabem de crear.
Per acabar, pengem $top_track de $new_button, $new_button de $link, $link de $new_object

i $new_object de l’element amb id ‘top_tracks’ del nostre ‘index.html’. Guardem els canvis i
refresquem el navegador, i provem l’aplicació tot comprovant que les dues peticions es
mostren per pantalla i per consola.
Si tot funciona correctament, només ens queda resoldre un problema per acabar el codi
JavaScript: si fem una segona cerca, els resultats de la nova cerca se’ns acumulen amb els
de la primera. Per tant, li haurem de dir que cada cop que fem clic al botó de cerca, abans de
llançar la nova petició, ens netegi els resultats que hi hagi en pantalla. Per tant, tornem a
‘spotify.js’ i utilitzem la funció jQuery ‘empty()’ per esborrar el contingut dels id d’artists i
top_tracks. A continuació, copiem les funcions ‘empty()’ que acabem de crear fora de la
petició i les aprofitem com a paràmetres d’una nova funció ‘click’, que definirem amb el botó
amb id ‘clear_results’, que ja ens havíem creat a la vista. Així, podrem netejar la vista en
qualsevol moment que vulguem.
Ara, només ens quedarà acabar de maquetar l’aplicació amb CSS.
4.3 VIDEOTUTORIAL IV: DESENVOLUPAMENT DE

L'APLICACIÓ
Arribem a la quarta i última part del videotutorial.
En aquest moment, la nostra aplicació hauria d’estar funcionant perfectament i només ens
quedaria retocar l’arxiu CSS per acabar d’enllestir la nostra feina.
Per tant, entrem a ‘spotify.css’ i a ‘loggedin’ li posarem un ‘margin-top’ de 20px per separar-
lo una mica de la part superior de la vista. Als elements amb classe ‘text-overflow’ que ja
teníem definits els posarem un ‘background-color’ d’un to verdós i li canviarem la propietat
‘white-space’ de ‘nowrap’ a ‘normal’. A ‘user-profile’ li posem un fons de color negre, padding
de 20px a dreta i esquerra, i color de lletra negre. A la classe ‘media’ li posem un color de
lletra blanc i a <h2> un color verd llampant semblant al del logotip de Spotify i li establim tots
els marges a zero. A ‘resultats’ li fem un ‘display:flex’ perquè ‘artists’ i ‘top-tracks’ se’ns
mostrin un al costat de l’altre. Definim una altura de 650px, una amplada del 90 % de la
pantalla, marge dret automàtic i un padding de 25px a la part inferior.
42
Ho tenim gairebé llest. Podríem separar una mica ‘artists’ de ‘top-tracks’ amb un marge dret
de 30px i fer que els botons dels artistes i les cançons també se separin amb un marge de 5px
a ‘object’ i a ‘new_object’. Definirem també que la seva amplada sigui ‘auto’. Per acabar,
centrarem a la vista el div ‘input’ amb un ‘text-align:center’ i amb un marge superior i inferior
de 30px.
Bé, doncs, ja tenim l’aplicació enllestida. Hem aconseguit les dades que necessitàvem de
l’API de Spotify i les hem integrat perfectament a la nostra aplicació, passant-li les
credencials requerides per poder autoritzar les peticions AJAX. Però això només és un
exemple.
Del que es tractaria ara és de solucionar els possibles problemes que puguem tenir, que ens
impedeixin el funcionament correcte de la nostra aplicació. En el cas que haguem finalitzat
amb èxit l’aplicació, podem provar d’incorporar alguna propietat més de l’artista a la vista,
com per exemple la fotografia, o fins i tot podem fer una crida a un nou endpoint, aprofitant
que ja disposem de l’‘id’ de l’artista.
En cas d’error, hem de revisar el codi a fons i intentar esbrinar on és el problema a través de
l’inspector, ja sigui a Elements, a Console o a Sources. Quan rebem un error de petició AJAX,
recordem que la resposta sempre indica de quin tipus d’error es tracta, per tant, revisem la
sessió 3.2. del curs per saber quin tipus d’error és. També trobarem molts recursos a Google
que ens serviran per aclarir qualsevol dubte que puguem tenir, com per exemple la web de
www.w3schools.com on trobarem un munt de contingut i exercicis relacionats amb tot el que
hem estat treballant al llarg del curs, que ens servirà per aprofundir en els nostres
coneixements. També tenim a mà tota la informació de la web Spotify Developers, on
trobarem el tutorial que hem estat seguint en aquest curs amb aplicacions més extenses
sobre la matèria.
Si, malgrat tot, no aconseguim solucionar el problema, haurem de descarregar-nos la carpeta

sencera del projecte al nostre ordinador. El codi que tenim inclou uns quants comentaris que
ens ajudaran a entendre millor quina és la funció de cada part del codi i, d’aquesta manera,
també ens facilitarà la localització de l’error.
Recordem que haurem d’establir els valors de les variables ‘client_id’ i ‘client_secret’ de
l’arxiu ‘app.js’ que ens indica el dashboard de la nostra aplicació a Spotify Developers, i que
hem de passar-li ‘http://localhost:8888/callback’ com a ‘redirect_uri’, que haurem d’haver
definit prèviament a l’apartat Settings del dashboard. Com a web, podem deixar
‘http://localhost:8888’.
Guardem tots els canvis i executem, com sempre, l’aplicació des del terminal, llançant ‘node
app.js’ des de la carpeta ‘authorization_code’. Tanquem l’aplicació que teníem oberta al
navegador, obrim una nova finestra i anem a ‘http://localhost:8888’, on ja hauríem d’estar
rebent la pantalla de login. Si hem configurat bé les variables ‘client_id’, ‘client_secret’ i
‘redirect_uri’ d’‘app.js’, entrarem a l’aplicació i rebrem per HTTP el token que necessitem per
autenticar les crides.
43
Ara seria qüestió de revisar el codi del nostre projecte que ens està fallant amb aquest codi
nou que ens hem descarregat. Per tant, hem de tenir obertes a l’editor de codi tant la carpeta
del nostre antic projecte com la nova carpeta que ens acabem de descarregar. Revisar
detingudament les diferències entre els arxius és l’única manera que tenim per intentar saber
on hi ha l’error. Per tant, revisem ‘app.js’, ‘spotify.js’ i ‘spotify.css’, que són els tres arxius
que hem estat tocant.
Si els errors que obtenim són de variables ‘undefined’, intentem treure el valor de la variable
o variables que ens estiguin fallant per consola, fent tants console.log com calguin de la
variable i així podrem esbrinar en quin punt precís del codi està perdent el seu valor.
Amb tots aquests recursos, estem segurs que ens en sortirem i que aconseguirem
desenvolupar la nostra primera aplicació de Spotify. Un cop aconseguim que la nostra
aplicació ens funcioni correctament, hem de seguir millorant l’experiència d’usuari o usuària,
aprofitant que ja disposem de l’‘id’ de l’artista. Per exemple, podríem afegir una miniatura
com a imatge de cada artista, fent una nova crida a l’endpoint
‘https://api.spotify.com/v1/artists/{id}’ on {id} és la variable que conté l’‘id’ de l’artista. Però
això ja és cosa nostra.
Esperem que aquest curs hagi resultat útil i que això de les API hagi despertat curiositat
suficient com per seguir treballant en el tema. Hem de pensar que avui en dia la majoria
d’aplicacions web consumeixen recursos que provenen de les API, per tal de no haver
d’emmagatzemar grans recursos de dades en la memòria local del dispositiu de l’usuari o
usuària. Un cop s’obté una resposta d’una API, normalment aquesta resposta acostuma a
emmagatzemar-se en memòria cau, per tal de no haver de fer la crida de nou. És important
tenir clars tots aquests conceptes i actualitzar constantment els nostres coneixements per
tal de poder avançar en el món de la programació web.
Ànims i fins a la propera!
4.4 IDEES CLAU: RELACIÓ ENTRE SOL·LICITUD I

RESPOSTA
Acabarem fent un repàs del que hem estat tractant al llarg d’aquest últim mòdul i del curs
sencer:
• Podríem començar dient que el fet d’aprendre a treballar amb una API ens ha permès
entendre amb més profunditat el funcionament intern de les aplicacions web
dinàmiques modernes.
• Actualment, hi ha moltes marques que fabriquen el seu propi programari i que
implementen aplicacions utilitzant serveis de les API externes com ara Google Maps,
YouTube o Spotify.
• La metodologia AJAX de JavaScript ens permet fer requeriments de dades a servidors
externs construïts segons el protocol API REST, a través de crides per HTTP, i integrar
aquestes dades a les nostres aplicacions web.
44
• AJAX és una tecnologia asincrònica que consisteix en què la pàgina carrega sempre en
últim lloc les peticions de dades a les API, un cop tota la resta d’arxius de la pàgina s’ha
carregat. En el moment que arriba la resposta, es carreguen automàticament els
resultats a la vista, sense necessitat d’haver de recarregar la pàgina de nou.
• L’element més important d’AJAX és l’objecte ‘XMLHttpRequest’. Cada cop que volem fer
una petició AJAX, hem d’implementar un nou objecte ‘XMLHttpRequest’, establint els
paràmetres corresponents a la crida que vulguem fer.
• La comunicació entre clients i servidors respon sempre a una lògica de peticions i
respostes via HTTP. GET és el mètode HTTP que s’utilitza per demanar dades d’un recurs
específic.
• jQuery és un framework de JavaScript que ens facilita una extensa llibreria de funcions i
simplifica molts mètodes JavaScript. jQuery també ens permet crear fàcilment nous
elements HTML a la nostra vista.
• $(document).ready() és el mètode jQuery que fa que, un cop el ‘document’ hagi enllestit
tota la resta de processos, s’executi la funció de callback que li passem entre claus, com
per exemple una petició AJAX.
• El mètode $.each ens permet recórrer el JSON que ens torna l’API, adjudicant a cada
objecte una clau ‘key’ en forma de comptador i un ‘value’, que seria cadascun dels
objectes de l’array que li passem com a paràmetre al bucle. Haurem de recórrer l’array
sempre que vulguem treure per pantalla els seus valors. Iterant pels objectes de l’array,
podrem accedir a les propietats que contenen la informació específica que volem
recollir, expressades en forma de
• “clau”: “valor”.
• Quan treballem amb les API, acostumem a treballar amb dades emmagatzemades en
objectes JSON al servidor extern. Aquests objectes es troben concretament allotjats a
diferents URL o endpoints del servidor en qüestió, per tant, les nostres crides hauran
d’apuntar sempre a algun dels endpoints de l’API amb la qual estiguem treballant.
• Normalment ens demanaran autoritzar les noves aplicacions al servidor per tal que
aquest accepti les noves peticions de dades. També ens caldrà, en molts casos,
autenticar cadascuna de les crides amb algun tipus de token que normalment ens
arribarà per HTTP i que haurem de recollir per poder-lo enviar al servidor.
• En molts casos, haurem d’incloure la crida a una API, aprofitant la resposta de la crida
anterior, per tal de no perdre el valor de les variables que recollim a la primera petició de
dades que li passem al servidor.
• És important saber analitzar quins són els missatges de resposta i error més comuns de
les API i aprendre a analitzar l’error, utilitzant les eines de l’inspector, principalment
Elements, Console, Sources i Network.
• Hem desenvolupat la nostra aplicació de Spotify utilitzant Node.js, que és una manera
de construir el backend de la nostra aplicació utilitzant únicament JavaScript.
Aquí acaba el quart i últim mòdul de síntesi del curs.
45
© Barcelona Activa
Darrera actualització 2018
Cofinançat per:
Segueix-nos a les xarxes socials:

213 4 6 Imprimible

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

213 4 6 Imprimible

Uploaded by

Copyright:

Available Formats

REST API per a

2 SOL·LICITUDS DE L'API ........................................................................................ 16

4 RELACIÓ ENTRE SOL·LICITUD I RESPOSTA .......................................................... 36

1 QUÈ ÉS UNA API EN REST?

Les coses mai funcionen a la primera.

Totes les solucions són a Google.

Insistir és la millor manera d’aprendre.

Així que ànims i endavant!

1.1 DEFINICIÓ I GLOSSARI GENERAL

Què és una API?

Posem un exemple ben senzill.

Aquest programari de connexió és el que es coneix com a API.

Cal tenir en compte que, en el moment de construir un sistema informàtic o biblioteca

1. Un ordinador que accepta els requeriments HTTP que fa l'usuari mitjançant el

En informática, s'anomena arquitectura client-servidor la relació establerta entre dues

Un servidor es defineix com a:

Mentre que un client:

Per exemple, un servidor de correu, conté el correu electrònic de múltiples clients. Un

API de Gmail, Maps, Drive, YouTube… Infinitat de recursos a la nostra disposició!

Credencials? Quines credencials?

Fins aquí la lliçó!

1.2 INTERACCIONS D’UNA API REST

1. Identificació dels recursos. Els recursos individuals es troben identificats a les

• Beneficis per a l’USUARI/ÀRIA: un servei REST facilita enormement la càrrega de

1.3 COM ES VINCULA REST AMB HTTP

El protocol web de transferència de dades HTTP (HyperText Transfer Protocol) va ser

Posem un exemple molt comú:

Alguns casos típics de petició/resposta via HTTP serien els següents:

1. L’aplicació demana una pàgina HTML. El servidor retorna un arxiu HTML.

curl -X GET https://jsonplaceholder.typicode.com/posts

• Actualitzar una pàgina web sense haver de recarregar la pàgina sencera.

1. Un usuari o usuària realitza una recerca a Google.

3. El servidor web rep la petició.

1.4 VIDEOTUTORIAL I: EXERCICIS AMB AJAX I JQUERY

Començarem declarant la variable ‘xmlhttp’ on guardarem un nou objecte XMLHttpRequest() i

var xmlhttp = new XMLHttpRequest();

A continuació, utilitzarem el mètode ‘xmlhttp.onreadystatechange’ per dir-li que la funció

xmlhttp.open("GET", url, true);

Crearem aquesta funció just després de l’element xmlhttp.send() i abans de tancar

for(var i = 0; i < array.length; i++) {

for(var i = 0; i < array.length; i++) {

Fins aquí el nostre primer exemple de connexió.

1.5 IDEES CLAU: QUÈ ÉS UNA API EN REST?

Recollirem imatges del servidor i maquetarem els objectes amb CSS.

2.1 SOL·LICITUD EN REST A JQUERY

jQuery és una de les llibreries o frameworks més populars de JavaScript.

Si guardem i executem aquest arxiu al navegador, no veurem res en pantalla ja que la

Podem comprovar els resultats fent un console.log de ‘cuentos’.

Hem enllestit l’exercici.

2.2 RECURSOS DE LES API

$(document).ready(function(){...}) és una funció de jQuery que ens permet indicar que la

Parlem breument de JSON:

1. JSON respon a les inicials de JavaScript Object Notation.

Si tenim dades guardades en un objecte de JavaScript, sempre podem convertir aquest

var myObj = {name: "John", age: 31, city: "New York"};

var myJSON = '{"name":"John", "age":31, "city":"New York"}';

2.3 VIDEOTUTORIAL II: CODI DE CONNEXIÓ EN AJAX

Comencem declarant el nostre HTML5.

Obrim l’etiqueta <head>.

Introduïm l’<script> de jQuery.

I aquí dins farem el <div> on penjarem els resultats de la consulta.

I creem l’<script> per fer la petició AJAX amb jQuery.

Tanquem l’<script> i tanquem l’<html>.