Web programming project.

1. Mash-up
Utilizand
Javascript
Buliga Adrian Denis
Anul III CTI, gr 3.1
UNIVERSITATEA POLITEHNICA TIMISOARA
FACULTATEA DE AUTOMATICA SI CALCULATOARE

2. Tema proiectului
Dezvoltarea unui mash-up in care sa fie incluse cel putin 5
apeluri ale unui API de tip Educational.
Un mash-up in web development, este o pagina web sau o
aplicatie web care pune cap la cap informatii din mai multe
surse, pentru a crea o noua pagina .
Am ales ca si API, un site care este un ghid in arta bucatariei.
Asadar, serverul returneaza cate un JSON pentru fiecare
request in parte.

3. Dispune de urmatoarele functionalitati:
– Returneaza un JSON pentru books
– Returneaza un JSON pentru recipes
– Returneaza un JSON pentru courses
– Returneaza un JSON pentru cuisines

4. Dupa cum se poate vedea si in urmatoare imagine, site-ul are posibilitatea
sa iti furnizeze un raspuns la o cerere de tip GET in interiorul lui.
Apasand butonul Try it out! , o sa primiti in return exact ceea ce
returneaza site-ul pentru JSON-ul books.

5. Functionarea Paginii

6. Dupa cum se poate vedea am facut cele 5 apeluri de functii in spatele
unor butoane. Asadar in prima etapa pe pagina web sunt dispuse doar
butoanele.
Fiecare buton are desemnata cate o functie in interiorul careia se face o
cerere la server ca si in modul urmator:
$.ajax({
dataType: "json",
url: "http://api.pearson.com:80/kitchen-
manager/v1/courses",
type : "GET",
success: function (data) {
alert(“success”);
},
error: function (response) {
alert("error: " + response.responseText);
}
});

7. In cazul API-ului pe care l-am ales, acesta dupa cum am
precizat si mai sus returneaza un JSON si nu un XML.
Dupa ce se face respectiva cerere catre server, acesta
raspunde punand informatia in variabila “data”. Prelucrand
variabila “data” efectiv afisez JSON-ul pentru a demonstra
functionalitatea apelului functie, adica a cererii de tip GET.

8. Dupa cum se poate observa in
imaginea din stanga, accesarea
butonului “Request Courses” duce
la afisarea continutul JSON-ului
acestuia. Se poate vedea clar url-ul
de pe care a fost facuta aceasta
cerere si anume:
https://
api.pearson.com/kitchen-manager/v1/co
Pentru simplitate, am decis ca este
util doar sa afisez continutul,
vazand astfel functionalitatea
aplicatiei.

9. Absolut in mod identic
si urmatoarele trei
butoane returneaza
JSON-ul alocat lor.
In schimb pentru functionalitate ultimului buton, am
decis ca sa afisez un mesaj urmat de url din care a
fost facuta respectiva cerere.

10. Resurse utilizate
• API-ul de la site-ul:
• http://developer.pearson.com/apis/pearson-kitchen-manager
• Un JSON formatter:
• http://jsonformatter.curiousconcept.com/
• Wikipedia:
• http://en.wikipedia.org/wiki/Mashup_
%28web_application_hybrid%29
• MOOC – Youtube API and Parse API
• http://www.codecademy.com/en/tracks/parse
• http://www.codecademy.com/en/tracks/youtube

11. Din respectivele MOOC-uri de pe CodeAcademy am inteles ce
este un JSON , cum este facut un request catre un server si
cum returneaza serverul raspunsul in cauza.