Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mash up

Web programming project

  • Be the first to comment

  • Be the first to like this

Mash up

  1. 1. Mash-up Utilizand Javascript Buliga Adrian Denis Anul III CTI, gr 3.1 UNIVERSITATEA POLITEHNICA TIMISOARA FACULTATEA DE AUTOMATICA SI CALCULATOARE
  2. 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. 3. Dispune de urmatoarele functionalitati: – Returneaza un JSON pentru books apeland functia: • loadBooksJSON() – Returneaza un JSON pentru recipes apeland functia: • loadRecipesJSON() – Returneaza un JSON pentru courses apeland functia: • loadCoursesJSON() – Returneaza un JSON pentru cuisines apeland functia: • loadCuisinesJSON()
  4. 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. 5. Functionarea Paginii
  6. 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. 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. 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-manag Pentru simplitate, am decis ca este util doar sa afisez continutul, vazand astfel functionalitatea aplicatiei.
  9. 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. 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. 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.

×