Transbook - documentatie

30
- 2013 - Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin Proiect Tehnologii Web _ documentatie – o scurta prezentare _

description

Proiect Tehnologii Web 2013

Transcript of Transbook - documentatie

Page 1: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

- 2013 -

Proiect Tehnologii Web _ documentatie – o scurta prezentare _

Page 2: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

• Cerinta proiectului

• Mod de dezvoltare

• Arhitectura aplicatiei

• Tehnologii utilizate

• Bibliografie

Cuprins

Page 3: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Sa se realizeze un instrument Web capabil sa ofere traducerea in timp-real a unui flux de insemnari disponibil pe Facebook.

Utilizatorul va putea stabili limba, lista mesajelor de tradus pe baza unor filtre privind grupul de prieteni, o expresie, un interval de timp etc.

De asemenea, se va putea controla periodicitatea verificarii existentei noilor mesaje ce vor fi traduse. Rezultatele obtinute vor putea fi, la randul lor, partajate pe alte retele sociale.

Cerinta proiectului

Denumire proiect: “Transbook”

Page 4: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Autentificarea si autorizarea

Autentificarea in cadrul folosirii aplicatiei dezvoltate se realizeaza prin sistemul de login oferit de Facebook. Aceasta functionalitate a putut fi integrata in aplicatie cu ajutorul API-ului oferit de Facebook.

Modul de dezvoltare si arhitectura aplicatiei

Page 5: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Autorizarea aplicatiei se refera la drepturile ce sunt cerute utilizatorului in vederea accesarii informatiilor necesare de pe profilul de Facebook al utilizatorului.

• De exemplu, in cazul nostru, am avut nevoie de accesul la grupurile utilizatorului, sectiunea de NewsFeed , precum si dreptul de citire a unor informatii personale.

Page 6: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Pentru pastrarea identitatii utilizatorului logat precum si pentru setarile sale in cadrul aplicatiei (limba in care sunt traduse insemnarile, timpul de verificare a existentei noilor mesaje ce vor fi traduse precum si alte date) am construit o baza de date mysql.

Baza de date a aplicatiei

Page 7: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Dupa realizarea mecanismului de autentificare si autorizare cu Facebook am avut nevoie de accesarea unor “insemnari” din cadrul sectiunii NewsFeed precum si a grupurilor utilizatorului. Pentru realizarea acestui lucru ne-am folosit de API-ul public oferit de Facebook si anume “Graph API” care este un API-REST.

Accesarea informatiilor de pe Facebook

Page 8: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Specificarea serviciului precum si unealta “Graph API Explorer” – foarte folositoare pentru “invatarea” serviciului se gasesc pe

https://developers.facebook.com/

Page 9: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Apelarea serviciului “Graph API” a fost posibila folosind (la nivel de server) SDK-ul PHP oferit de Facebook pentru o mai usoara accesare a “grafului”.• acest SDK este disponibil pe

https://github.com/facebook/facebook-php-sdk

Page 10: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Avand in vedere ca aplicatia presupune traducerea in timp real a unor insemnari de pe Facebook, in vederea realizarii acestui lucru a fost necesara folosirea unui serviciu public de “traducere”. • Asadar am folosit serviciul public oferit de Bing care este de asemenea

un API – REST.

• Pentru interogarea serviciului ne-am folosit de resursele puse la dispozitie de Bing.

Traducerea insemnarilor

Page 11: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Lista limbilor disponibile pentru tradus, oferita de Bing, am stocat-o intr-un fisier XML, lista necesara pentru sectiunea de setari a aplicatiei.

Page 12: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

O alta cerinta a proiectului este posibilitatea de partajare pe alte retele sociale a insemnarilor traduse “in timp real” de pe Facebook.• Asadar am integrat in aplicatie posibilitatea de sharing pe Twitter

folosind widget-uri specifice Twitter.

Partajarea pe alte retele sociale

Page 13: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Cand utilizatorul va accesa URL-ul aplicatiei va fi intampinat cu un mesaj de bun venit avand posibilitatea sa se autentifice prin Facebook.

Arhitectura aplicatiei

Page 14: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

La apasarea butonului de login de sus dreapta utilizatorul se va putea autentifica

Page 15: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Dupa autentificare are loc autorizarea

Page 16: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Dupa logare utilizatorul are placerea de a vedea in timp real insemnarile sale de pe Facebook.

Page 17: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

In partea dreapta sus utilizatorul isi poate accesa profilul de Facebook, poate face Logout si poate schimba setarile aplicatiei.

La apasarea link-ului de logout, utilizatorul va fi delogat de pe Facebook si va fi redirectionat catre pagina de intampinare a aplicatiei.

Page 18: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

La apasarea butonului “Settings” se va deschide un dialog, dand posibilitatea utilizatorului sa-si modifice setarile personale.

Page 19: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Utilizatorul isi va putea stabili limba in care vor fi traduse insemnarile

Page 20: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

de asemenea si periodicitatea verificarii existentei de noi mesaje

Page 21: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

La apasarea butonului “Save Settings” se va apela un script la nivel de server care va prelua noile setari si va modifica informatiile din baza de date privind setarile utilizatorului.

Page 22: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Aplicatia ofera si posibilitatea cautarii de insemnari ce vor fi aduse de aplicatie in functie de o expresie.

Page 23: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Utilizatorul poate selecta categoria din care sa i se afiseze post-urile din meniul stanga.

Page 24: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Pentru partajarea informatiilor pe Twitter utilizatorul va apasa “widget-ul” din dreptul postului pe care doreste sa-l partajeze.

Page 25: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

La apasarea butonului pentru partajarea pe Twitter va aparea dialogul specific Twitter:

Page 26: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

La accesarea oricarui grup sau a sectiunii NewsFeed utilizatorul va putea realiza aceleasi actiuni.

Page 27: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

Pentru facilitarea interactiunii cu utilizatorul aplicatia pune la dispozitie actiunea “go top” care face automat “up-scrolling”.

Page 28: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

• La nivel de server am folosit PHP pentru partea de procesare : interogarea serviciilor necesare (Facebook + Bing), comunicarea cu baza de date, generarea continutului dinamic etc.

• Pentru stocarea informatiilor am folosit baze de date mySql si documente XML.

Tehnologii utilizate

Page 29: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

• Interfata este marcata in HTML5, si “stilata” cu CSS.

• Pentru o mai buna experienta cu utilizatorul am folosit JavaScript la nivel de client.

• Am folosit si tehnologii AJAX pentru o buna functionare a aplicatiei.

Page 30: Transbook - documentatie

Realizatori: Ursachi Claudiu-Cristian, Reut Nicu-Valentin

BIBLIOGRAFIE:

• https://developers.facebook.com/

• http://www.bing.com/developers/

• http://api.jquery.com/

• http://stackoverflow.com/

• http://www.w3schools.com