Proiectul de Finalizare a studiilor a studentului________________________ 1). Tema proiectului de finalizare a… [303231]

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

CALCULATOARE

FORMA DE ÎNVĂȚĂMÂNT ZI

Proiect de diplomă

COORDONATOR ȘTIINȚIFIC

Prof.dr.ing. Robert GYORODI

ABSOLVENT: [anonimizat]

2018

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

CALCULATOARE

FORMA DE ÎNVĂȚĂMÂNT ZI

PROGRESSIVE WEB APPS

STUDIU DE CAZ

COORDONATOR ȘTIINȚIFIC

Prof.dr.ing. Robert GYORODI

ABSOLVENT: [anonimizat]

2018

UNIVERSITATEA DIN ORADEA

FACULTATEA de Inginerie Electrică și Tehnologia Informației

DEPARTAMENTUL __________________________________________________

TEMA_________

Proiectul de Finalizare a studiilor a student: [anonimizat]________________________

1). Tema proiectului de finalizare a studiilor:_________________________________________

_______________________________________________________________________________

_______________________________________________________________________________

2). Termenul pentru predarea proiectului____________________________________________

3). Elemente inițiale pentru elaborarea proiectului de finalizare a studiilor ________________

________________________________________________________________________________

________________________________________________________________________________

4). Conținutul proiectului de finalizare a studiilor _____________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

5). Material grafic:________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

6). Locul de documentare pentru elaborarea proiectului:

________________________________________________________________________________

________________________________________________________________________________

7). Data emiterii temei_____________________________________________________________

Coordonatori:

I. [anonimizat] a [anonimizat] : dacă o [anonimizat] o nouă schimbare asupra vieții sau pur și simplu va rămâne doar la stadiul de concept. De-a lungul anilor s-a dovedit că această nouă formă de dezvoltare a mediului ambiant este un fel de ”drum” [anonimizat] a organiza universul astfel încât omul sa nu fie nevoit să-l descopere.

[anonimizat], care este într-o continuă dezvoltare. [anonimizat], atât muncă cât și suflet. [anonimizat].

Dezvoltarea rapidă a resurselor software și hardware din domeniul tehnologiei informației oferă o mai bună comunicare și un acces mai bun la toate categoriile de informații.

În această lucrare sunt detaliate aspecte teoritice și practice ale modalităților de concepere și implementare a aplicației.

Capitolul I-Introducere este partea introductivă a lucrării unde se face o introducere în domeniul din care face parte aplicația și se prezintă tema propriu-zisă a aplicației.

Capitolul II-Tehnologii folosite reprezintă o scurtă prezentare a tehnologiilor folosite în aplicație cum ar fi: HTML, CSS, PHP, PWA, baze de date, jQuery, JavaScript. Limbajul PHP este descris prin câteva noțiuni de bază legate de acesta. În principal sunt chestiuni legate de logare cu PHP, conectarea și deconectarea de la server, interogarea unui API, interogarea tabelelor din baza de date.

Capitolul III-Arhitectura aplicației descrie modul cum este structurată aplicația. Fiind vorba despre un site web, este prezentat modul cum se face comunicarea între pagini, dar și partea de back-end a acesteia.

Capitolul IV-Implementarea aplicației pur și simplu descrie într-un mod detaliat felul cum s-a realizat aplicația, aici se și face referire în mod explicit la codul sursă. Se explică cum se face conectarea la baza de date, adăugarea în baza de date, retragerea de informții din aceasta dar și altele.

Baza de date este folosită doar pentru gestionarea unor lucruri mărunte cum ar fi: logarea clienților, păstrarea anumitor date pentru lista de filme favorite, păstrarea mesajelor dar și altele. Se prezintă API-ului de la TMDb, din care se face extragerea informației necesare pentru site. Se explică cum se folosește PWA(Progressive Web Application) în aplicație.

Capitolul V-Concluzii exprimarea opiniei personale despre aplicație dar și posibile îmbunătățiri și dezvoltări ale acesteia.

I.1. Tema Proiectului

”Când oamenii n-au mai avut curajul să creadă în viața de jos, când n-au mai avut candoarea să creadă în viața de sus, au început să creadă în viața ca-n filme ”.

Filmul reprezintă o artă, fiind produsul final al industriei cinematografice. Acesta este o combinație între fizică, optică, electrotehnică și chimie, dar și un mod de destindere după o activitate stresantă. [1]

Aplicația urmărește să exemplifice, bineînteles într-o idee simplă ce înseamnă aplicație pregresivă, progressive web apps. Aplicația de bază este adaptată astfel încât să fie progresivă, asta însemnând să funcționeze offline, fără accesibilitate la internet și să poată fi instalată pe telefon ca și o aplicație nativă. Funcționalitatea offline, în cazut aplicației respective, este limitată la încărcarea paginilor care au fost salvate în cache și la informațiile stocate local. În cazul când unele funcționalități necesită internet, cum ar fi autentificarea, vizionarea videoclipurilor pe youtube dar și altele, site-ul în acest caz va funcționa doar când există conexiune la internet.

Aplicația web dezvoltată este pentru ca cei care doresc să vizioneze un film dar nu știu multe lucruri despre acesta. Din acest motiv această aplicație le oferă posibilitatea să poată să se informeze despre film, să afle când a apărut, ce gen de film este, cât de popular este, să vizioneze un mic trailler din care află pe scurt despre ce este vorba, pe lângă toate acestea mai are și o scurtă descriere. În unele cazuri acest trailler are un impact destul de puternic asupra celui care il vizionează, astfel acesta poate decidă să vizioneze sau nu filmul respectiv. Dacă respectivul este pur și simplu acaparat de poveste are posibilitatea de a trimite trailler-ul și prietenilor pentru a le sugera o vizionare a acestuia. Datorită tehnologiei PWA aplicația este utilizabilă și pe mobil, iar în cazul în care se întâmplă să nu existe sursă de internet aceasta functionează si offline datorită faptului că își încarcă datele când este online.

Urmează capitolul II în care sunt descrise tehnologiile cu care a fost implementată aplicația.

Capitolul II.Tehnologii folosite

Calculatorul este un obiect fără discuții necesar, acesta fiind folosit pretutindeni începând dimineața la o cafea, continuând la locul de muncă și terminând acasă în momentul nostru de liniște, dar cu toate acestea nu ne dezlipim de acesta pentru că face parte din rutina noatră.

Internetul reprezintă un tot unitar de rețele de calculatoare interconectate din întreaga lume. Specialiștii susțin că Internetul nu se concretizează printr-o rețea ci printr-un ansamblu de reguli care asigură comunicarea între diferite rețele de pe glob și tranferul de date între acestea.

Astfel Internetul s-a transformat în cea mai utilizabilă sursă de informare. [2]

II.1 Limbajul PHP

PHP este limbaj de programare (PHP-Personal Home Page) dar numele său este un acronim recursiv PHP-Hypertext Preprocessor. Uzual se folosește înglobat în codul HTML, dar de la versiunea 4.3.0 este folosit și în ”linie de comandă”. Este un limbaj open-source și server-side, dezvoltat de către Rasmus Lerdorf, dar din cauza numărului mare de utilizatori acesta a fost preluat de noua entitate The PHP Group.

Fiind un limbaj stucturat, asemănător cu C, Perl sau Java, este simplu de utilizat. Una dintre cele mai semnificative facilități ale acestui limbaj este înglobarea sa cu lucrul bazelor de date relaționale: MySQL, Oracle, DB2 sau MS Sql Server. Este utilizat pe o arie destul de largă din care cauză este interpretabil și pe majoritatea sistemelor de operare: Windows, Unix sau chiar și pe Mac OS X. În arhitectura LAMP: L-Linux, A-Apache, M-MySQL, P-PHP, PHP-ul are rolul de cominicator și interpreter între toate celelalte.

Are o popularitate ridicată datorită următoarelor caracteristici:

– eficiența: datorită mediului multiutilizator, cum este web-ul, limbajul folosește mecanisme de alocare a resurselor

– flexibilitatea: PHP-ul a fost structurat pe module pentru a putea fi actualizat în permanență atunci când apar unele tehnologii. Este utilizat pentru o gamă largă de servere , deoarece el inițial nu a fost conceput pentru nici un server anume.

– simplitatea: sintaxa este practic suficient de liberă, asta datorându-se faptului ca tot codul este într-un fișier care nu are nevoie de includere de biblioteci sau de directive pentru compilare pentru că se execută între marcaje speciale.

– familiaritatea: are sintaxa limbajului destul de apropiată de limbajele: Perl sau C.

– gratuitatea: pentru că este un limbaj open-source a facilitat integrarea rapidă la nevoile web-ului și la securizarea codului.

Are o utilitate destul de importantă mai ales când vine vorba despre trimitere de date sau trimitere de cereri.

$_GET este o variabilă introdusă în versiunea 4.1.0 fiind utilizată pentru trimiterea de variabile asignate cu valori prin intermediul link-urilor.

$_POST este to o variabilă array care prin intermediul formularelor trimite variabile cu valori.

$_REQUEST este o combinație între $_POST, $_GET, $_COOKIE oferindu-i utilizatorului posibilitatea de a trimite date.

Este utilizat datorită faptului că se emulează perfect după toate cererile. [4]

II.2. Limbajul HTML

HyperText Markup Language (HTML) este unul dintre cele mai importante limbaje folosite pentru crearea de pagini web, dar mai degrabă scopul lui este de a prezenta infomațiile: tabele, imagini ,videoclipuri, fonturi dar și altele. A fost dezvolat de World Wide Web Consortium (W3C).

Pentru că este un format text este oșor de editat și citit de către utilizatori cu un simplu editor de text cum ar fi: Notepad.

Paginile cu formatul HTML au etichete sau tag-uri, iar în cea mai mare parte aceste echite sunt pereche, un tag de deschidere <div> și unul de închidere </div>. Pagina unui domeniu este un fișier numit în general index.html care este setată să pornescă la încarcarea unui domeniu.

Un document HTML are următoarele componente necesare:

– versiunea de HTML <!DOCTYPE HTML> (HTML5).

– zona head, cap, care conține titlul maginii, script-uri dar și legături cu fișiere CSS sau descrieri mai speciale de tip <meta>.

– zona body, practic este tot conținutul care este afișat pe browser-ul în care rulează.

Este un limbaj nu greu, dar îți ia destul de mult timp pentru realizarea unui fișier care să arate profesional. [3]

<!DOCTYPE html>
<html>
<head>
<title>Titlul Pagini</title>
</head>
<body>
<h1>Paragraf scris mai mare</h1>
<p>Paragraf<p>
</body>
</html> [5]

Aceste tag-uri sunt utilizate de autorii paginilor web pentru a marca paginile de text, iar browsere le utilizează pentru a afișa informațiile care vor fi ulterior vizualizate.

II.3.Limbajul CSS

Între HTML și CSS este o legătură destul de strânsă pentru că este imposibil să se utilizeze unul fără celălalt. CSS-ul este folosit pentru a stiliza conținutul redat de HTML în așa fel încât să arate așa cum ne dorim.

Numele CSS este prescurtare de la ”cascading style sheet” și în principiu este o foaie cu reguli de stilizare ce se execută în cascadă. Există 3 modalități de aplicare a regulilor de stilizare pe elementele HTML:

1. Le putem scrie pe un tag HTML , fiind valoarea unui atribut

2. Le putem scrie în același fișier cu tag-urile HTML dar în interiorul unui tag <style>

3. Le scriem într-un fișier separat și ulterior îl încărcăm prin intermediul tag-ului <link/>

În cazul în care se folosește stilizarea în cadrul aceluiași fișier dar separat de tag-urile HTML aceasta este introdusă în tagul <head>, iar elementele HTML sunt adresate prin intermediul unor selectori care sunt clase sau id-uri. Dăm nume clasei, de exemplu: class=”stilizare1”, astfel putem apela numele acestei clase și să-i atribuim anumite elemente de stilizare pentru a ne șlefui elementele HTML. Clasele le putem folosi pentru mai multe elemete, dar de exemplu id-ul este unic . Id-ul nu-l putem utiliza pentru mai multe tag-uri HTML.

.stilizare1 {
   text-align: center;
   color: red;
}

Utilizăm id-ul pentru că putem stiliza doar elementul căruia îi este atribuit acest id. De exemplu dacă utilizăm o stilizare pe un element HTML atunci acea stilizare se aplică pe toate elementele de aceeași categorie:

h1 {

color: blue;

font-size:35px;

}

Practic id-ul este utilizabil doar pe o singură pagină , dar în cazul în care dorim să refolosim codul utilizăm clasele pentru că acestea se pot folosi pe mai multe magini. Pentru a ne referi la clasa unui element folosim semnul (.), iar pentru a ne referi la id-ul unui element folosim(#).

Trebuie să combinăm limbajele HTML și CSS pentru a ne stiliza site-ul în așa fel încât totul să fie estetic și foarte bine structurat. [6]

II.4.Limbajul JavaScript

JavaScript (sau ”JS”) este un limbaj de programare dinamic care adaugă interactivitate site-ului (animații, jocuri, reacții la apăsarea unor butoane) fiind aplicat unui document HTML. A fost proiectat de Brendan Eich.

În principiu este suficient de compact dar pe de aceeași parte este și flexibil. Pornind de la JavaScript s-au construit o varietate de instrumente, care au o gamă largă de utilizare:

– librării terțe si framework-uri cu care se pot construi rapid aplicații și site-uri.

– aplicații de browser (API) care oferă diferite funcționalități pentru a crea un HTML dinamic.

Codul JavaScrip se poate introduce direct în fișierul HTML între tagurile <script> </script>, dar în același timp se poate scrie într-un fișier separat, iar acesta este introdus în fișierul curent, de exemplu <script src=”javascript.js”> </script>. Interactivitatea de pe un site are nevoie de evenimente. Acestea sunt bucăți de cod care execută un cod ca răspuns, de exemplu la acționarea unui buton să se declanșeze un eveniment în pagină.

Dacă se dorește o interactivitate sporită în site-ul dezvoltat atunci JavaScript este una dintre cele mai bune opțiuni în acest caz. [7]

II.5. Limbajul MySQL

Este un limbaj produs de compania suedeză MySQL AB, fiind un sistem de gestiune a bazelor de date relaționale. Este open source și este o componentă importantă a platformelor LAMP SAU WAMP (Linux/Windows-Apache-MySQL-PHP). În principiu merge mână în mână cu PHP-ul dar se poate utiliza de asemenea și în combinație cu limbajele: C, C++, Java, Perl, Python dar și altele fiindcă acestea folosesc anumite tipuri specifice de API.

” Pentru a administra bazele de date MySQL se poate folosi modul linie de comandă sau, prin descărcare de pe internet, o interfață grafică: MySQL Administrator și MySQL Query Browser. Un alt instrument de management al acestor baze de date este aplicația gratuită, scrisă în PHP, phpMyAdmin.” [8]

II.6. PWA (Progressive Web Apps)

În 2015, designerul Frances Berriman și inginerul Google Chrome, Alex Russell au inventat termenul de “aplicații web progresive”, pentru a descrie aplicațiile care beneficiază de noile caracteristici suportate de browserele modern, inclusiv lucrătorii de serviciu și manifestările de aplicații web.

Potrivit dezvoltatorilor Google, aceste caracteristici sunt:

Progresiv: lucrează pentru fiecare utilizator, indiferent de alegerea browserului deoarece este construit cu o îmbunătățire progresivă ca principiu de bază.

Responsiv: se potrivesc tuturor ecranelor: desktop, mobil, tabletă sau formulare care urmează să apară.

Conectivitate independentă: lucrătorii care lucrează în servicii permit lucrul offline sau în rețea de calitate scăzută.

App-like: se simte ca o aplicație a utilizatorului cu interacțiuni în stilul aplicației și navigație.

Actualizată: întotdeauna actualizate grație procesului de actualizare a angajaților (service workers).

Sigure: servit prin HTTPS pentru a preveni snooping-ul și pentru a vă asigura că conținutul nu a fost modificat.

Descoperite- sunt indentificabile ca aplicații mulțumită fișierului manifest.json și domeniului de înregistrare al angajaților care permit motoarelor de cautare să le găsească.

Reangajarea- se face reangajarea ușor prin caracteristici cum ar fi notificări push.

Instabilă- permite utilizatorilor să păstreze aplicațiile pe care le consideră cele mai utile pe ecranul lor de pornire, fără a avea probleme cu un magazin de aplicații.

Distribuibilă- partajat cu ușurință printr-o adresă URL și nu necesită instalare complexă. [12]

O aplicație progresivă Web se folosește de capabilitățile moderne pentru web și astfel oferă o experiență de utlizare asemănătoare unei aplicații. Aplicațiile native din magazinul de aplicații se ocupă de trimiterea notificărilor push, lucrul offline, simularea și aspectul unei aplicații (în felul în care cei de la Google și Apple și-au imaginat), încărcarea pe ecranul de pornire și altele. Aplicațiile mobile Web accesate într-un browser mobil, din punct de vedere istoric nu au realizat aceste lucruri. Aplicațiile Web Progresive remediază această problemă cu noile API-uri Web, noile concepte de design și noile buzzwords.

Buzzword este un cuvânt sau o expresie nouă care devine populară în timp. Acesta provine adesea din termeni tehnici, dar în cea mai mare parte fac parte din semnificația tehnică originală dar transpusă într-o interpretare modernă, pur și simplu folosită pentru a impresiona pe alții. Buzzwords-urile provin adesea din jargon, neologisme sau acronime. Exemple de buzzwords-uri: verticală, dinamică, cibernetică, strategie, ”gândiți-vă în afara cutiei”. [9]

Pentru a fi cât de clar posibil este vorba despre aplicațiile web mobile pentru browser. Aplicațiile hibride, cum ar fi Ionic cu Cordova, rulează neinhibat în mediul aplicației native cu toate funcțiile care se așteaptă de la orice aplicație nativă. Dacă extrageți conținutul web

dintr-o aplicație hibrid și îl încărcați într-un browser mobil, aplicația este limitată de caracteristicile browserului, din cauza unor standardizări API și din motive de securitate.

Aplicațiile Web Progresive aduc funcții, pe care le așteptăm de la aplicațiile native, la experiența browserului mobil într-un mod care utilizează tehnologiile bazate pe standarde și se execută într-un container securizat accesibil oricui de pe web.

Aplicațiile Web Progresive descriu în ansamblu, o colecție de tehnologii, concepte de design și API-uri web care funcționează în tandem pentru a oferi o experiență asemănătoare unei aplicații pe mobil.

Serviciul de Lucru (Service Workers) este o tehnologie incredibil de puternică, la fel de confuză, în spatele unei aplicații web progresive. Acesta activează funcționalitatea offline, notificările push, cache-ul de conținut și multe altele.

La un nivel înalt, un serviciu de lucru este un script de lucru care funcționează în spatele scenei, independent de aplicația propriu zisă și funcționează ca răspuns la evenimente cum ar fi solicitările de rețea, notificările push, modificările de conectivitate dar și altele.

Există așa zișii “Slujitorii Seviciilor” descriși ca un proxy. Se pot executa evenimente cum ar fi preluarea care se întâmplă de fiecare dată când are loc o solicitare de rețea. Se poate gestiona ecest eveniment cu control complet, verificând datele stocate în memoria cache și returnându-le imediat sau lăsând cererea să continue spre serverul de la distanță. Scriptul funcționeză ca proxy, sau middleware pentru solicitare.

Serviciul de Lucru dispune de o mare putere și flexibilitate care face ca rețelele să devină foarte complicate, dar dezvoltatorii vor dori să utilizeze rețele pre-făcute pentru cazuri obișnuite de utilizare a serviciilor, cum ar fi modul offline. Mozilla dispune de o experiență excelentă pentru rețele lucrătorilor de serviciu care demonstrează numeroasele aplicații cu cod reutilizabil.

Lucrătorul de serviciu este doar un fișier JavaScript ca oricare altul, care rulează în fundal și este declanșat prin intermediul evenimentelor și depinde de cine scrie codul pentru a gestiona memorarea cache, notificări push și preluare de conținut. Pentru că dezvoltatorii ajung să utilizeze aceleași “rețele” pentru a face sarcini comune (cum ar fi asistența offline), se va dori cel mai probabil să se folosească rețelele existente pentru a ne ușura viața. Serviciile de lucru sunt disponibile pe Android cu Chrome 50 și nu sunt acceptate în prezent de alte browsere mobile.

Modelul App Shell este un concept simplu de design, prin care încărcarea inițială a unei aplicații web mobile oferă o ramă de bază a unui UI (User Interface) de aplicație, iar conținutul aplicației este încărcat ulterior. App Shell nu este un API Web sau un cadru , ci mai degrabă o abordare de proiectare pe care dezvoltatorii o pot alege să adere la acest lucru, fiind îmbunătățită de abilitățile de caching ale serviciilor de lucru.

Cu modelul App Shell, ne concentrăm pe menținerea separată a shell-ului aplicației UI și a conținutului din interiorul acesteia și le stocăm separat. În mod ideal, aplicația Shell este stocată astfel încât să se încarce cât mai repede posibil atunci când un utilizator vizitează și se întoarce la o dată ulterioară. Având shell-ul și încărcarea de conținut separat, teoretic îmbunătățește percepția utilizatorului asupra performanței și utilizabilității aplicației.

Folosind acest lucru în contextul ionic, putem încărca imediat aspectul aplicației noastre ionice (tab-uri, controler de navigație, meniul lateral,etc.), cache-ul prin intermediul unui lucrător de serviciu, apoi preluat și actualizat conținutul prin JavaScript încărcat. Pe măsură ce se adaugă tot mai mult suport PWA la Ionic, se poate aștepta ca o abordare App Shell să iasă la iveală pentru toate aplicațiile ionice care sunt implementate ca aplicații web mobile, cu rețele prestabilite Service Worker pentru cache, suportul offline și reînoirea conținutului de fundal.

Din punct de vedere istoric, aplicațiile web mobile nu au fost instalate ca o aplicație pe ecranul de start. Sigur, un utilizator ar putea fixa un site mobil pe ecranul lor de pornire pe iOS și Android, dar experiența a fost secundă, iar aplicația încă nu a venit cu funcțiile locale pe care le așteptăm de la aplicațiile native.

Acest lucru se schimbă. Recent, Chrome pe Android a adăugat suport pentru instalarea aplicațiilor web pe ecranul de start cu un banner nativ de instalare, la fel ca bannerele de aplicatii native cu care suntem obișnuiți.

Pentru a spune Chrome-ului că site-ul nostru mobil este instalabil ca o aplicație, vom scrie un fișier manifest.json și link-ul acestuia din pagina principală HTML. În prezent iOS nu are caracteristici suplimentare mai mult de Pin to Homescreen, așa că experiența nu va fi la fel de fluidă, dar aici sperăm că Apple să ofere niște îmbunătățiri în curând. [10]

Aplicațiile Web Progresive au devenit rapid o țintă importantă de implementare. Versiuni recente precum Starbucks PWA, oferă validarea aplicațiilor web progresive. Deaoarece Ionic este construit pe web, aplicațiile ionice pot lucra oriunde rulează web-ul, inclusiv ca PWA.

Aplicațiile Web Progresive sunt experiențe ale utilizatorilor care au acces la Internet și sunt:

Fiabile- Se încarcă rapid și nu se arată niciodată descărcarea, chiar și în condiții de rețea incerte.

Rapide- Răspunde rapid la interacțiunile utilizatorilor cu animații mătăsoase și fără derulare infinită.

Angajarea- Este ca o aplicație nativă pe mobil cu o experiență imersivă a utilizatorului.

Acest nou nivel de calitate permite Aplicațiilor Web Progresive să câștige un loc pe ecranul de pornire al utilizatorului. [11]

Aplicațiile web progresive reprezintă o îmbunătățire a tehnologiei web existente. Ca atare, acestea nu necesită gruparea sau distribuirea separată. Publicarea unei aplicații web progresive este la fel cum ar fi pentru orice altă pagină web. Începând cu aprilie 2018, aplicațiile web progresive sunt susținute de browserele Microsoft Edge, Mozilla Firefox, Safari și Chrome, dar mai multe browsere o să poată susține funcțiile necesare în viitor.[18]

II.7. API (Application Programming Interface )

În programarea pe calculator, o interfață de programare a aplicațiilor (API) este un set de definiții, protocoale și instrumente de subrutină pentru construirea de software de aplicație. În termeni generali este un cumul de metode clar definite de comunicare între diferite componente software. Un API face mai ușor dezvoltarea unui program pe calculator prin furnizarea tuturor blocurilor de construcție care sunt apoi realizate de către programator. Un API se poate utiliza pentru un sistem bazat pe web, sistem de operare, sistem de baze de date, bibliotecă de software sau hardware de calculator. Specificația unui API poate lua mai multe forme, dar de cele mai multe ori include specificații pentru clase de obiecte, variabile sau apeluri la distanță, rutine, structuri de date.

La fel ca o interfață utilizator grafică, facilitează utilizarea de către utilizatori a programelor, interfețele de programare a aplicațiilor, și astfel facilitează dezvoltatorii să utilizeze anumite tehnologii în construcția de aplicații.

Prin abstractizarea implementării care stă la bază și expunând doar acțiunile de care dezvoltatorul are nevoie, un API simplifică programarea. În timp ce o interfață grafică pentru un client de e-mail ar putea oferi utilizatorului un buton care să îndeplinească toți pașii de preluare și evidențiere a mesajelor noi, un API pentru intrarea/ieșirea fișierelor ar putea oferi dezvoltatorului o funcție care copiază un fișier de la o locație la alta fără să ceară dezvoltatorului să înțeleagă operațiile sistemului de fișiere care are loc în spatele acestuia.

API-urile Web sunt interfețe definite prin care se produc interacțiuni între o întreprindere și o aplicație care utilizeză activele acesteia, care este de asemenea un acord privind nivelul serviciilor pentru a specifica furnizorul funcțional și a expune calea sau adresa URL a serviciilor pentru utilizatorii API. Este o abordare arhitecturală care se învârte în jurul furnizării unei interfețe de program la un set de servicii pentru aplicații diferite care deservesc diferite tipuri de consumatori. Când se utilizeză în contextul dezvoltării web, un API este de obicei definit un set de specificații, cum ar fi mesajele de solicitare a protocolului de transfer al protocolului Hypertext Transfer (HTTP), împreună cu o definiție a structurii mesajelor de răspuns care este de obicei într-o limbă extensibilă de marcare XML sau format JSON (JavaScript Object Notation).

API-urile web au permis comunităților web să faciliteze partajarea conținutului și a datelor între comunități și aplicații. În acest fel, conținutul creat într-un singur loc poate fi postat și actualizat dinamic în mai multe locații de pe web. De exemplu, programul REST API al Twitter-ului permite dezvoltatorilor să acceseze datele de bază ale Twitter-ului, iar API-ul de căutare oferă metode pentru dezvoltatori de a interacționa cu datele de căutare din Twitter și tendințe.

Designul unui API are un impact semnificativ asupra utilizării acestuia. Principiul ascunderii informațiilor descrie rolul interfețelor de programare care permite programarea modulară prin ascunderea detaliilor de implementare a modulelor astfel încât utilizatorii modulelor să nu înțeleagă complexitatea din cadrul modulelor. Astfel proiectarea unui API încearcă să ofere doar instrumente pe care le-ar aștepta un utilizator. Reprezintă o parte importană a arhitecturii software, organizarea unui software complex.

Mai mulți autori au creat recomandări privind modul de proiectare a API-urilor, cum ar fi Joshua Bloch, Kin Lane și Michi Henning. [13]

II.8. Bootstrap

Este cel mai popular framework din lume pentru a crea site-uri responsive, utilizabile pe diferite dispozitive, cu rezoluție a ecranului diferită.

Pentru a utiliza acest framework trebuie introdusă foaia de stil <link> în <head> înainte de toate celelalte foi pentru a putea încărca acest CSS: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" >.

Multe dintre componente necesită folosirea funcțiilor JavaScrip, mai exact jQuery. Bootstrap folosește o mulțime de stiluri globale importante și setări care trebuie cunoscute atunci când se folosesc, toate fiind aproximativ orientate spre normalizarea stilurilor de browser încrucișat.

Necesită doctype HTML5, fără el stilul se va vedea incomplet, dar nu foarte exagerat.

Bootstratp este dezvoltat în primul rând pe mobil, o strategie în care se optimizează mai întâi codul pentru dispozitivele mobile și apoi se scalează componentele după cum este necesar utilizând interogările media CSS. Pentru a asigura redarea corectă și zoom-ul la atingere pentru toate dispozitivele, trebuie adăugat meta-tag-ul de vizualizare în <head>: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">. [15]

Suportă cele mai recente versiuni stabile ale tuturor browserelor și platformelor majore. Browserele alternative care utilizează cea mai recentă versiune de WebKit, Blink sau Gecko, fie direct, fie prin API-ul de vizualizare web a platformei, nu sunt acceptate în mod explicit. Cu toate acestea, Bootstrap ar trebui să fie afișat și să funcționeze corect și în aceste browsere. În general, Bootstrap acceptă cele mai recente versiuni ale browserelor implicit ale platformei principale. De reținut este faptul că browserele proxy, cum ar fi Opera Mini, modul Turbo Opera Mobile, UC Browser Mini, Amazon Silk, nu sunt suportate.

Figura 2.1 Platformele mobile care suportă Bootstrap

Figura 2.2 Platformele desktop care suportă Bootstrap

În figurile 2.1 și 2.2 este ilustrat ce platforme suportă Bootstrap, în funcție de dispozitivul pe care este aplicat. [16]

Bootstrap oferă un cadru ușor de utilizat, de stiluri gata făcute, instrumente de configurare și componente interactive, permițând dezvoltatorilor să creeze site-uri web și aplicații care sunt atractive, bogate din punct de vedere funcțional.

Accesibilitatea globală a fiecărui proiect construit cu Bootstrap depinde în mare măsură de marcajele autorului, stilul suplimentar și scripting-ul pe care l-a introdus. Stilul și aspectul Bootstrap pot fi aplicate unei game largi de structuri.

Componentele interactive Bootstrap, cum ar fi: dialogurile modale, meniurile derulante și tooltip-urile personalizate, sunt proiectate să funcționeze pentru utilizatorii touch, mouse și tastatură. Deoarece componentele Bootstrap sunt concepute intenționat pentru a fi destul de generice, autorii ar putea fi nevoiți să includă roluri și atribute suplimentare , precum și comportamentul JavaScript, pentru a realiza cu mai multă exactitate natura exactă și funcționalitatea componentei acestora. [17]

Capitolul III. Arhitectura aplicației

În acest capitol o să tratez pur și simplu structurarea aplicației, felul cum este dezvoltată și ceea ce cuprinde. Aplicația este dedicată celor care, vor să vizioneze un film dar nu știu foarte multe despre acesta. Accesând această pagină pot descoperi cele mai noi filme, anumite genuri de filme , filme care urmează să apară dar și cele mai vizionate. În figura 3.1 se poate observa structura site-ului.

Figura 3.1 Structura site-ului

Figura 3.2 Meniul site-ului

În figura 3.2 se poate observa cum putem să navigăm pe site-ul respectiv. De asemenea este vizibilă și logarea care este de două feluri: logare cu facebook și logare simplă care presupune transpunerea datelor personale în baza de date.

Figura 3.3 Afișarea unui film

Toate datele despre filme sunt preluate printr-un API de la TMDb. TMDb este o baza de date bazată pe comunitate și filme TV. Fiecare bucată din baza de date a fost adăugată de comunitatea respectivă care și-a început activitatea din 2008. TMDb are un focus și o lărgime internațională puternică, care după părerea lor este de neegalat, pentru simplul fapt că ei trăiesc și respiră comunitatea. În fiecare an , din 2008, numărul de contribuții la baza de date a crescut. Peste 150.000 de dezvoltatori și companii utilizează platforma, iar TMDb a devenit o adevărată sursă pentru metadate.

Pe lângă metadatele extinse pentru filme, emisiuni TV și oamenii de asemenea oferă și una dintre cele mai bune selecții de postere de înaltă rezoluție. Conform statisticilor furnizate de companie, peste 1.000 de imagini sunt adăugate zilnic. Platforma este internațională, susține oficial 39 de limbi, având și date regionale extinse. În fiecare zi serviciul furnizat de această platformă este utilizat de milioane de oameni în timp ce se face procesarea a peste 3 miliarde de cereri. [14]

Datele despre filme le preiau cu ajutorul API-urilor puse la dispoziție de cei de la TMDb. Aceste API-uri se pot accesa de oricine are un api_key furnizat de aceștia.

Dacă se dorește vizionarea unui anumit gen de film aceasta se poate realiza prin selectarea genului de film din meniu de la Genre, după cum se observă în figura 3.4.

Figura 3.4 Selectarea genului de film dorit.

Figura 3.5 Comentarii

La fiecare film se pot adăuga comentarii , care sunt memorate într-o bază de date, doar că pentru a putea adăuga aceste comentarii este necesar să fii logat pe pagină, acest lucru este vizibil în figura 3.5.

Figura 3.6 Baza de date

Site-ul dispune și de o bază de date în care sunt memorate comentariile, filmele favorite pentru fiecare utilizator și nu în ultimul rând utilizatorii care se loghează pe bază de e-mail, dar sunt reținute și date despre cei care se loghează cu facebook-ul. Aceste date sunt necesare pentru tabela cu filmele favorite și tabela cu comentarii. În figura 3.6 este ilustrată componența bazei de date.

Toate paginile au aceeași structură, în mici mari măsuri.

Acum că am povestit și v-am introdus în tematica lucării o să trecem la următorul capitol unde o să prezint pur și simplu implementarea sit-ului.

Capitolul IV. Implementarea aplicației

În acest capitol o să explic mai amănunțit implementarea aplicației. Fiind o aplicație web bineînțeles că am folosit HTML, CSS, PHP, JavaScript dar și alte tehnologii pentru a putea să realizez această aplicație.

IV.1. Navigarea

Figura 4.1 Meniul site-ului

În figura 4.1 se poate observa sistemul de navigare a site-ului, care este prezent pe fiecare pagină. Acest meniu face legătura între toate paginile site-ului.

În partea stângă “FOXMOVIE.” este un logo al site-ului care este un link spre pagina principală, index.php: <a href="index.php">FOXMOVIE<em>.</em></a>.

În partea dreaptă este meniul site-ului care cuprinde tot așa link-uri spre alte pagina dar și partea de logare. Meniul este realizat cu ajutorul unei liste neordonate, <ul><ul/>, unde sunt amplasați și itemii listei, <li></li>. Fiecare item are un link spre pagina dorită. Link-ul este interpretat prin tagul, <a>Action</a>, care are o referință, href=”action.php” spre pagina dorită. “Genres” este dropdown, practic la un click se deschide o altă listă care conține tot așa link-uri spre alte pagini, aici putându-se selecta genul de film dorit, figura 4.3.

Această listă conține de asemenea și tag-rile care corespund pentru autentificare.

Site-ul oferă posibilitatea utilizatorilor de a se loga in două moduri: să se logheze pe baza contului de pe Facebook, dar de semenea au și posibilitatea să își creeze un cont care este înregistrat în baza de date, în tabelul users, figura 4.2.

Figura 4.2

Figura 4.3 Meniul dropdown.

Figura 4.4 Sign up vs Login

În formularul “Sign up ”, după completarea câmpurilor se face click pe butonul cu același nume, iar datele respective sunt memorate în baza de date. La acționarea acestui buton este apelată funcția singnup din fișierul functions.php, figura 4.5.

Figura 4.5

În funcția singup se face practic un insert în tabela users. Datele care urmează să fie inserate sunt luate din $data, care practic primește aceste date la apăsarea butonului. În baza de date parola este criptată cu ajutorul lui md5.

Algoritmul MD5 este o funcție hash utilizată pe scară largă, producând o valoare hash de 128 de biți. Deși MD5 a fost inițial concepută pentru a fi utilizată ca o funcție hash criptografică, s-a constatat că suferă de vulnerabilități extinse. Acesta poate fi utilizat ca sumă de control pentru a verifica integritatea datelor, dar numai împotriva corupției neintenționate. Ca majoritatea funcțiilor hash, MD5 nu este nici criptare, nici codificare. Poate fi spart de atacuri de forță brute și suferă de vulnerabilități estinse.

În cazul înregistrării cu email câmpul fb_id este setat pe NULL, pentru că acesta este dedicat pentru conturile care sunt bazate pe contul de pe facebook.

Figura 4.6

În figura 4.6 se face înserarea în baza de date a utilizatorilor care se loghează cu ajutorul contului de facebook. Câmpul password este setat cu NULL pentru că nu se dorește reținerea parolei utilizatorului, ci doar a datelor despre acesta. Datele care se rețin despre utilizator sunt memorate în $userData, în momentul în care este accesat contul de Facebook. Aceste date sunt luate cu ajutorul unui get:

$response = $FB ->get("/me?fields=id, first_name, last_name, email, picture", $accessToken).

Pentru a putea realiza autentificarea cu facebook a fost necesară înregistrarea aplicației în cadrul, facebook developers, pentru a putea face o configurare între aplicație și facebook. Astfel înregistrată aplicația pe platforma de la developers s-a obținut un id unic și un id secret pentru aplicație, pe baza cărora s-a realizat sincronizarea aplicației cu facebook-ul. Tot aici sunt introduse și rutele care sunt accesate la logarea realizată cu Facebook.

IV.2. Încărcarea filmelor

Informațiile despre filme le iau cu ajutorul unor API-uri din baza de date online TMDb. Pentru a putea avea acces la aceste API-uri a fost necesară înregistrarea pe platforma acestora și astfel am obținut o cheie, cu ajutorul căreia pot să am acces și să fac cereri pentru a obține informatii despre filme. Pentru a obține URL-ul API-ului facem un request pe baza cheii proprii și a altor criterii în funcție de ce dorim să ne returneze API-ul.

Figura 4.7 Opținerea URL-ului

În figura 4.7 se poate observa cum se optine URL-ul pentru API. Api_key-ul este cerut obligatoriu restul câmpurilor sunt opționale. Acesta este un exemplu în care se cere doar un fild dar sunt și alte cereri care au mai multe filduri obligatorii. Facem cererea și obținem un răspuns: 200 OK dacă cererea a fost făcută corectă și am opținut un răspuns sau alte răspunsuri cum ar fi 401 neautorizat când api_key-ul nu este corect. Dacă obținem 200 OK, atunci ni s-a returnat informațiile cerute în format JSON, după cum se poate observa în figura 4.8.

În figura 4.9 se observă că în $jsondata pun datele pe care le obțin din accesarea

URL-ului, dupa care le transform într-un șir cu ajutorul funcției json_decode(). Din cauză că obțin mai multe obiecte trebuie să fac o iterare pe acestea pentru a le putea obține pe toate, acest lucru îl realizez cu ajutorul lui foreach(). Cu ajutorul celui menționat mai înainte pun informațiile din obiecte în $movie. În acest fel pot să accesez orice proprietate a obiectului, de exemplu dacă vreau să obțin titlurile filmelor fac referire la fildul respectiv: $movie[‘original_title’] și obțin valoarea acestuia.

Figura 4.8 Răspunsul obținut la cerere

Figura 4.9 Prelucrarea API-ului.

În cazul fotografiilor, posterelor filmelor, prin $movie[‘poster_path’] nu avem tot

URL-ul pentru a putea încărca imaginile și în acest fel trebuie să adăugăm $movie[‘poster_path’] la un URL pentru a putea încărca imaginea: https://image.tmdb.org/t/p/w185/<?php echo $movie['poster_path']; ?>.

Pentru a putea avea acces și la videoclipuri trebuie să mai fac o cerere la un API pe baza id-ului filmului.

Figura 4.10 Încărcarea videoclipurilor.

Partea de obținere a informațiilor necesare o fac pe parte de client, iar încărcarea videoclipurilor o fac pe parte de server pentru a putea lucra în paralel cu cele două și asfel câștig timp la rapiditatea de încărcare a site-ului.

Din API-ul nou accesat am nevoie de un key pentru a putea avea acces la videoclipurile de pe youtube. Videoclipul se accesează adăugând key-ul, obținut din cererea făcută la API, la un URL specific spre youtube: https://www.youtube.com/embed/' + data.results[0].key.

Datorită implementării cu youtube, acestea pot fi distribuite pe Facebook, Twitter, Google+, dar se poate și ajunge direct pe site-ul Youtube-ului pentru a putea vizualiza mai multe videoclipuri asmănătoare.

Acest mic beneficiu este bineînțeles în favoarea noastră pentru că trăim acele zile în care tot ceea ce facem ne place să facem public. Dacă ne și place ceea ce am descoperit, desigur că dorim să împărtășim cu cei mai buni prietemi sau chiar cu prietenii noștri. Mai putem de asemenea sugera prietenilor o ieșire la filmul respectiv pentru că pur și simplu ne place ceea ce am aflat despre el.

În figura 4.11 este redată exemplificarea unei distribuiri pe Facebook a unui videoclip de pe site.

Figura 4.11 Distribuirea pe diferite site-uri.

Pentru fiecare pagină fac cereri la diferite API-uri, pentru că pe fiecare pagină doresc să încarc diferite filme. Pe unele pagini anumite filme se repetă pentru că acestea fac parte din diferite categorii. Am diferite pagini cum ar fi: cele mai populare filme, cele mai noi, filme clasificate după gen, iar pe pagina principală încarc filmele care rulează în prezent.

Actualizarea paginilor se face în funcție de cum se face actualizarea în baza de date a celor de la TMDb.

Pentru a putea încărca filmele corespunzătoare fiecărui gen de film a trebuit să fac mai întâi o cerere pentru afla ce id are fiecare gen, după cum se poate observa în figura 4.12.

Figura 4.12 Id-urile genurilor

Unele filme sunt definite pe mai multe genuri din care cauză unele se află pe mai multe pagini nu numai pe una singură.

În fond și la urma urmei site-ul dispune de filme pentru toate gusturile și dorințele, exemplificat și în figura 4.13.

Figura 4.13 Filme animate

IV.3. Paginarea

Pentru că fiecare API conține mai multe pagini și fiecare pagină aproximativ 20 de rezultate a fost nevoie de paginare, pentru a putea extrage toate paginile.

Figura 4.14 Paginarea

Paginarea în structura HTML este implementată printr-o listă neordonată, ale cărei elemente sunt link-uri pentru a putea încărca pe aceeași pagină conținutul din cadrul API-ului ale carui obiecte sunt distribuite pe mai multe pagini. În momentul în care facem cererea de GET la API putem să cerem și pagina, practic în cadrul URL-ului putem să jonglăm cu pagina deoarece răspunsul cererii are în propria componență 2 obiecte de care avem nevoie: pagina și numărul total de pagini, după cum se poate observa în figura 4.15.

URL-ul către care facem cererea putem să-i atribuim pagina în funcție de ce butom apăsăm, figura 4.14, și astfel URL-ul arată în felul următor: "https://api.themoviedb.org/3/movie/now_playing?api_key=75b07651ff3029e843531a2d3edca730&language=en-US&page=".$page.

Figura 4.15 Obiectele necesare pentru paginare

Figura 4.16 Codul pentru paginare

După cum se poate obseva în figura 4.16, codul implementează atât funcționalitatea cât și partea de front-end a paginării. La început am 2 condiții. Prima condiție verifică daca pagina este mai mare decât 1, în cazul în care este adevărata atunci de face o decrementare cu 1, iar în caz contrar celor două variabile le este atribuită valoarea 1. A doua condiție verifică dacă pagina este mai mică decât totalul de pagini din API, dacă este atunci cele două variabile sunt incrementate cu 1, iar în caz contrar sunt asignate cu valoarea numărului total de pagini din API. [19]

$_SERVER['PHP_SELF'] reține pagina curentă și în acest fel se pot face încrementări și decrementări. Pentru link-ul “Previous”, paginii curente îi este asignată valoarea lui $minPage. În schimb pentru link-ul “Next”, trebuie făcută o iterare cu for astfel încât pagina curentă să se poată încrementa cu o poziție pentru a putea trece la pagina următoare.

IV.4. Adăugarea de comentarii

Fiecare utilizator are posibilitatea să adauge comentarii la fiecare film și să vizualizeze comentariile altor utilizatori. Adăugarea de comentarii este posibilă doar dacă utilizatorul respectiv este logat, în caz contrat îi apare mesajul următor: “You need to be logged for comment at this movie!”. În momentul în care este logat pagina arată ca în figura 4.17.

Figura 4.17 Adăugarea comentariilor

Pentru a ști dacă utilizatorul este logat sau nu se face următoarea verificare : if(isset($_SESSION['userData'])), practic prin acest if se verifică dacă în SESSION este prezent un, userData. Daca există un userData în SESSION, apare inputul și butonul care îi permite utilizatorului să adauge comentarii la fiecare film, iar în caz contrar utilizatorul poate doar să vizualizeze comentariile care îi sunt atribuite fiecărui film.

În momentul în care butonul “Comment” este acționat, funcția setComments este apelată.

Figura 4.18 Înregistrarea comentariilor

Funcția aceasta preia în variabilele sale datele necesare care sunt introduse în baza de date. După ce a fost făcută această preluare a informațiilor acestea sunt introduse în baza de date în tabela commentsection. Prefigurarea id-ului filmului în această funcție este necesară pentru ca comentariile să fie adăugate la filmul corespunzător, iar la reîmprospătarea paginii mesajele să nu fie adăgate iar și iar.

Mai este prezentă și funcția getComments, figura 4.19.

Figura 4.19 Preluarea comentariilor

Prin această funcție sunt preluate toate mesajele din tabela commentsection și afișate la fiecare film în funcție de id-ul filmului respectiv. În primul rând se face un SELECT pe tabelă, iar mai apoi se face o buclă while cu care se parcurge fiecare rând pentru a prelua informațiile, care urmează să fie afișate.

Adăugarea de mesaje este un mod de a interacționa cu ceilalți, un mod plăcut sau nu, de a afla și opinia altora despre ceea ce tu ai văzut sau ești pe punctul de a viziona.

IV.5. Filmele favorite

Utilizatorul are posibilitatea să-și creeze propria listă cu filme favorite. Adăugarea filmelor în lista de favorite este posibilă doar dacă utilizatorul este logat pe pagină. Dacă este logat îi apare un buton la fiecare film cu ajutorul căruia poate să adauge filmele la favorite. Această adăugare se face mai întâi în baza de date de unde filmele favorite vor fi preluate și afișate în funcție de utilizator.

În figura 4.20 este ilustrat modul în care am gândit adăugarea filmelor favorite la o listă. Prima dată fac 2 verificări: prima dată se verifică dacă utilizatorul este logat, dacă este atunci i se permite acestuia să-și adauge filmele dorite la favorite. Dacă este logat se mai face o verificare în tabelul din baza de date dacă acel film a fost adăgat la favorite sau nu. Dacă este deja adăugat la lista de favorite îi este afișat un mesaj cu ecest lucru , iar butonul de adăugare nu mai este afișat, la fel ca în figura 4.21.

Figura 4.20 Adăugarea filmelor la favorite

Figura 4.21 Mesaj

Dacă filmul nu este adăgat la lista de favorite a utilizatorului atunci este afișat butonul de adăugare, la fel ca în figura 4.22.

Figura 4.22 Butonul de adăugare la favorite

Când este acționat butonul “Add to favorite”, este accesat fișierul save-to-favorite.php care face salvarea filmelor favorite în tabelul favorite din baza de date. În acest tabel sunt memorate id-ul filmului care este adăgat ca fiind favorit și id-ul utilizatorului pentru a se putea ști cine a adăugat acel film.

Figura 4.23 Adăgarea în baza de date

IV.6 Căutarea unui film

În cadrul aplicației există și posibilitatea de a căuta, în funcție de titlu, după un anumit film. Sub meniul, există un câmp unde se scrie titlul filmului căutat, figura 4.24, iar prin acționarea butonului Search, se face căutarea.

Figura 4.24 Căutarea filmelor

Pentru a putea căuta un anumit film accesez un API, specializat de pe platforma celor de la TMDb. Chiar dacă acest API este specializat pentru acest lucru, căutarea, trebuie să-i prefigurez în URL, titlul, pe care îl primește în momentul în care este accesat butonul Search. La acționarea acestui buton, textul care este scris este transmis în URL, iar URL dă datele pe care le-a găsit într-un format JSON. Din acest fișier, se preia titlul, posterul și descrierea filmelor și afișate în pe pagină. În figura următoare, se poate observa rezultatul căutării filmului Avatar.

Figura 4.25 Filmul căutat

IV.7. Baza de date

Aplicația dispune și de o bază de date. Aceasta nu este foarte complexă deoarece este folosită doar pentru păstrarea unor mici date: utilizatorii, comentariile și filmele favorite. Baza de date este creată pe phpmyadmin, fiind serverul local.

După cum se poate observa în figura 4.26, baza de date se numește foxmovie și are 3 tabele.

Primul tabel este commentsection, tabela dedicată comentariilor, figura 4.27. Aceasta are 5 coloane: cid- este id-ul unic al comentariului, uid- numele celui care a realizat comentariul, date- data și ora la care s-a făcut înregistrarea mesajului, message- mesajul care a fost adăugat, iar id_film este id-ul filmului la care s-a adăugat mesajul, astfel încât mesajele de la fiecare film să fie identificate.

Figura 4.26 Baza de date

Figura 4.27 Tabela pentru comentarii

Al doilea tabel este pentru filmele favorite, figura 4.28. Acest tabel are 3 coloane: id- este id-ul unic al fiecărei înregistrări în tabel, id_film este id-ul filmului care a fost adăugat la favorite, iar ultima coloană id_user este id-ul utilizatorului care a adăugat filmul respectiv. Această ultimă coloană leagă tabelul de față cu tabelul utilizatorilor. Un utilizator poate să adauge mai multe filme la favorite, dar un film poate fi adăgat doar o singură dată de același utilizator.

Figura 4.28 Tabelul pentru filme favorite

Al treilea tabel este tabelul în care sunt înregistrați utilizatori, figura 4.29.

Figura 4.29 Tabelul pentru utilizatori

Tabela utilizatorilor are 5 coloane: id- care este id-ul unic pentru fiecare utilizator, email- este email-ul înregistrat la logarea simplă sau avem și email-ul contului de Facebook, password- parola contului în cazul celor înregistrați cu datele dorite, pe baza căruia se face și logarea, name- este numele cu care se dorește să se afișeze unele date, fb_id- este id-ul contului de Facebook. În cazul contului de pe Facebook câmpul parolei este null, deoarece nu se face logarea prin baza de date ci printr-o cerere la platforma celor de la Facebook. Pentru conturile înregistrate direct pe site, câmpul fb_id eeste configurat ca fiind null, deoarece acela nu este un cont de Facebook. Câmpul parolei este criptat pentru siguranța contului.

Este o bază de date cât se poate de simplă, deoarece restul datelor sunt încărcate online din API-uri, iar datele care sunt reținute în baza de date sunt doar pentru gestionarea site-ului.

IV.8. Implementarea cu PWA (Progressive Web Apps)

Lucrarea urmărește implementarea unei aplicații care să fie integrată cu Progressive Web Apps. Studiul urmărește doar principiul de implementare, mai exact pașii care trebuie urmați, ce probleme pot să apară și anumite funcționalități. Aplicațiile progresive urmăresc ca aplicațiile să fie funcționale pe telefon, ca și aplicații native, să funcționeze offline sau în cazul în care nu există o foarte bună conexiune la Internet.

IV.8.1 Fișierul manifest.json

Prima fază a implementării constă în adăugarea unui fișier JSON, manifest.json care conține unele proprietăți astfel încât aplicația să poată fi instalată ca și o aplicație nativă.

În figura 4.30 este afișat conținutul fișierului manifest.json care este încărcat în momentul în care aplicația este adăugată pe ecranul utilizatorului.

Figura 4.30 Fișierul manifest.json

Acest fișier conține proprietăți cum ar fi: pagina care să se încarce prima când aplicația este pornită, start_url, numele aplicației care va fi afișat sub icoană, icoana aplicației care este pe diferite mărimi datorită faptului că aplicația poate rula pe diferite dispozitive, culoarea din spate când este încărcată, background_color, orientarea aplicației dar și altele. Aplicația în cauză are orietarea ca fiind portret, iar display-ul este prefigurat cu standalone pentru a oferi utilizatorilor o mai bună experiență a UI-ului (User Interface). Dir arată direcția aplicației, iar în aplicația de față forțez browser-ul să utilizeze aplicația de la stânga la dreapta.

Acest fișier trebuie introdus în fiecare pagină din proiect pentru că în acest fel fiecare pagină este recunoscută ca făcând parte din același proiect și astfel prorietățile pot fi aplicate pentru fiecare pagină.

IV.8.1 Service Workers

Etapa următoare în dezvoltarea aplicației este implementarea Service Worker-urului, cel care rulează în spatele aplicației și prin care este posibilă și funcționarea aplicației în mare parte.

Service Worker-ul rulează în mai multe thread-uri în același timp și rulează în spatele aplicației chiar dacă aceasta nu rulează în acel moment. Practic fiind inclus într-o aplicație cu mai multe pagini, acesta le poate prelucra toate aceste pagini, având acces la toate.

Figura 4.31 Service Worker

Din momentul în care Service Worker-ul este înregistrat pe aplicație cererea de acces se face către el când aplicația este rulată. Astfel acesta ia decizia: dacă Internetul este este bun încarcă datele cele mai recente, iar în cazul în care nu avem conexiune la Internet sau avem o conexiune slabă la Internet, datele sunt încărcate din cache.

Mai întâi de toate Service Worker-ul trebuie să fie înregistrat.

Figura 4.32 Înregistrarea Service Worker-ului

Înregistrarea acestui serviciu este declanșată de un eveniment. La încărcarea paginii serviciul este înregistrat: dacă nu există nici un serviciu înregistrat deja acesta este înregistrat: Registration succeeded. Scope is https://30944c9b.ngrok.io/splash/ , iar dacă acesta este deja înregistrat nu se mai face înregistrarea ci doar unele actualizări sau modificări care au apărut ulterior. La metoda “.register” specificăm fișierul pentru Service Worker, calea spre acesta, iar cu “scope” determinăm care fișiere să fie controlate de către acest serviciu, cu alte cuvinte locul de unde serviciul o să primească cereri. Scopul este prestabilit pe locația serviciului și de aici se extinde la toate fișierele și directoarele aferente. Acea verificare de la înregistrarea serviciului se face datorită faptului că nu toate browserele suportă Service Worker și astfel se face o verificare pentru a putea verifica dacă serviciului este înregistrat sau a apărul vreo eroare.

După ce s-a realizat înregistrarea trebuie ca serviciul să fie activat și instalat. La instalare încarcă toate fișierele pe care le dorim, în cache. Definim un array de fișiere pe care o să le pună în cache. În figura 4.33, în partea dreaptă sunt fișierele care au fost definite pentru a putea fi încărcate in cache, iar în partea stângă este vizibil cache-ul, care conține toate fișierele pe care am dorit să fie încărcate în el.

Figura 4.33 Cache-ul

Service Worker-ul este bazat pe evenimente, deci orice se face, se face în momentul în care apare un eveniment. Avem un eveniment pentru instalare care practic încarcă și fișierele in cache, după cum se poate observa în figura 4.34.

Figura 4.34 Adăugarea fișierelor în cache

Pentru ca serviuciul să funcționeze acesta trebuie și activat, figura 4.35.

Figura 4.35 Serviciul este activat și rulează

Evenimentul fetch este activat pentru a putea creea un cache, în care obiectele sunt încărcate dinamic. La aplicația de față sunt încărcate imagini ale filmelor, după cum se poate observa în figura 4.36.

Figura 4.36 Cache-ul dinamic

Tot cu acest eveniment, fetch, oblig browserul ca în momentul în care nu dispune de o bună conexiune la rețea sau chiar deloc, imaginile care nu au putut să fie memorate în cacheul dinamic să fie înlocuite cu o imagine prestabilită, ca și un placeholder. Figura 4.37, arată exact în cod cum acest lucru este prelucrat. În acest eveniment mai am încă un lucru prelucrat și anume în momentu în care o pagină nu este adăugată în cache-ul serviciului atunci acea pagină să fie înlocuită cu altă pagină stabilită.

Astfel este posibilă funcționarea ofline a site-ului, dar cu toate acestea unele lucruri chiar nu pot funcționa fără să existe conexiune la Internet, de exemplu logarea, filmulețele de pe youtube, căutarea filmului favorit. Aceste funcționalități sunt legate de conexiune la Internet deoarece se fac cereri la Api-uri de la o bază de date online, iar înregistrarea trebuie să facă adăugare de date în baza de date sau să acceseze platforma de la Facebook pentru a se putea face înregistrarea cu acesta.

Figura 4.37 Evenimentul fetch

În figura 4.38 se poate vedea că în modul offline, site-ul funcționează, practic încarcă funcționalitățile de bază, încarcă imaginile care au fost salvate în mod dinamic în cache înainte ca să nu mai existe conexiune la Internet. Dar se poate observa de asemenea că dacă în cache nu au fost salvate și alte imagini, în locul celor care ar trebui să fie este imaginea care a fost stabilită ca și placeholder.

Figura 4.38 Modul ofline

Figura 4.39 Ngrok.exe

Pentru ca Service Worker-ul să se înregistreze și să funcționeze, are nevoie ca site-ul să fie sigur, HTTPS. Datorită faptului că site-ul este local, pe localhost, nu este sigur și astfel primesc eroare că serviciului nu se poate înregistra doarece adresa nu este sigură. Pentru a rezolva această problemă am ales, doar pentru a putea să testez, să lucrez cu ngrok. Acesta îmi furnizează adrese sigure pe portul 80, fiind portul pe care îmi lucrează localhost-ul. Aceste adrese expiră tot la 8 ore, din care cauză sunt nevoită să-mi generez constant adrese, dar după cum am mai spus il folosesc doar pentru a putea vedea funcționalitatea Service Worker-ului.

În figura 4.39 se poate observa și configurarea lui ngrok, într-o fereastră de comandă, unde de altfel și avem afișate anumite informații despre statutul aplicației.

Capitolul V. Concluzii

Lucrarea de față prezintă o aplicație care prelucrează informațiile despre filme, informații pe care le iau dintr-o bază de date online, de la TMDb. La informații am acces prin API-uri furnizate de la ei, pe baza unei chei unice, care se obține printr-o simplă înregistrare pe platforma lor.

Asupra acestui site am realizat un studiu de caz privind PWA. Aplicațiile web progresive îmbunătățesc experiența utilizatorului pe aplicație. Aceste aplicații au ca scop utilizarea aplicației ca și aplicație nativă pe telefon, dar și funcționarea acesteia fară conexiune la Internet, bineînțeles în linii mari. Fiind o tehnologie nou apărută, de vreo 2 ani, anumite implementări ale acesteia nu funcționează pe toate browserele, din care cauză este cerută actualizarea browserelor la cea mai nouă versiune.

Aplicația a fost testată pe laptop ca și o aplicație normală dar la fel ca și una mobilă. Pe telefonul personal am putut să instalez aplicația ca și o aplicație nativă, dar funcționalitatea offline pe telefon nu am putut să o testez pentru că am o versiune mai veche de browser și nu am cum să fac actualizările necesare. În schimb pe laptop am un browser mai nou care recunoaște funționalitatea de aplicație progresivă și astfel am reușit să-i testez și funcționalitatea modului offline.

Datorită acestei aplicații am reușit să mă dezvolt pe mine personal, învățând lucruri noi, PWA, dar de asemenea am și aprofundat lucrul cu PHP, JavaScript și MySQL. Faptul că am ales să fac acest studiu de caz pe o tehnologie care nu este foarte aplicată în site-urile de masă, m-a făcut să reflectez la faptul că orice lucru care la un moment dat ți se pare imposibil de realizat, uite că se poate realiza. Nu mi-am putut imagina faptul că un site ar putea să aibă capabilitatea să ofere utilizatorilor un minus la nervozitate, pentru că nu funcționa fără Internet, dar se pare că în lumea tehnologiei totul este posibil.

Bineînteles aplicația nu este perfectă de aceea pe viitor aș dori să fac și alte îmbunătățiri cum ar fi: încărcarea tuturor filmelor dintr-un API nu doar cele care se încarcă în momentul în care site-ul este lansat în execuție, mă refer aici la modul offline, hostarea site-ului pe un domeniu permanent nu doar pentru test și integrarea aplicației cu PWA în întregime.

CAPITOLUL VI. Bibliografie

Anexa 1 – Manual de utilizare

În această anexă o să vă explic cum să accesați aplicația. Din cauză că este integrată cu ngrok pentru securitate, la fiecare 8 ore adresa furnizată expiră și este necesară furnizarea alteia. Eu o furnizez în linie de comandă, conform figurei 1.

Figura 1 Ngrok

La secțiunea fordwarding se găsește adresa care este furnizată pentru portul 80 de pe localhost pentru a fi într-un spațiu sigur. Copiem adresa de acolo și o introducem în browser, la care mai adăugăm /splash, exemplu: https://67b04b9d.ngrok.io/splash/ .

După ce accesați această pagină o să se încarce pagina principală, care arată ca și în figurile 2 și 3.

După cum se poate observa în figura 2, există posibilitatea de logare și navigare între pagini. Există posibilitatea să te loghezi prin contul de pe Facebook sau prin creearea unui cont cu datele personale. Dacă se dorește logarea cu Facebook se accesează butonul pe care scrie “Login with Facebook” și astfel datele dumneavoastră vor fi luate de pe contu personal, după cum puteți observa în figura 4. Tot în figura 4 se poate observa butonul de Log out care dacă este apăsat te deloghează de pe contul personal, bineînțeles doar de pe site-ul actual nu și de pe alt site-uri.

Figura 2 Pagina principală

Figura 3 Pagina principală

Figura 4 Logare Facebook

Dacă doriți să vă logați cu alt cont diferit de contul de Facebook accesați butonul “Log in ”, figura 1, și o să vă apară un formular ca și în figura 5. Acest formular are 2 opțiuni “Sign up” și ” Login”. Prima opțiune oferă posibilitatea de a creea un cont pe acest site, iar a doua de a te loga pe site, cu contul creat.

Figura 5 Logarea cu date personale

După ce v-ați logat pe pagină aveți posibilitatea să adăgați filme la lista de favorite sau să adăugați comentarii la fiecare film. Conform figurei 6, se poate observa că în momentul în care sunteți logat pe pagină o să vă apară butonul “Add to favorite” care vă permite să vă adăugați filmul favorit la lista proprie. Dar dacă filmul a fost adăugat deja la favorite atunci butonul nu mai apare, dar în schimb aveți un mesaj afișat care vă aduce la cunoștință faptul că filmul respectiv îl aveți deja în lista proprie de favorite.

Dacă doriți să vă vedeți lista de filme favorite acesați din meniu “Favorite”, figura 1. Accesând această pagină, o să aveți posibilitatea de a vă vizualiza filmele favorite, figura 7.

Mai aveți și posibilitatea să ștergeți un film de la favorite, printr-un simplu click pe butonul “Delete”.

Figura 6 Adăugarea de filme favorite

În figura 1 puteți observa că aveți posibilitatea să vă alegeți genul de film dorit, “Genres”, figura 8. Accesând oricare dintre acele link-uri, o să ajungeți pe pagina cu filmele preferate, grupate după gen. De exemplu dacă doresc filme romantice, accesez “Romance” și o să se încarce pagina aferentă, ca și în figura 9.

Dacă doriți să adăugați mesaje la filme, bineînțeles aveți și această posibilitate, dar trebuie să fiți logați pe pagină, figura 10. În cazul în care nu sunteți logat pe pagină nu o să aveți posibilitatea să adăugați comentarii fiind întâmpinați de un mesaj prin care sunteți informați că pentru a putea adăuga mesaje trebuie să vă logați pe pagină. În schimb dacă sunteți logat o să vă apară un dreptunghi unde o să puteți scrie mesajul dorit, iar prin acționarea butonului “Comment” o să puteți adăuga mesajul dorit.

Figura 7 Pagina cu filmele favorite

Figura 8 Genul de film favorit

Figura 9 Pagina Romance

Figura 10 Adăugarea de comentarii

Dacă doriți să căutați un film anume aveți posibilitatea să o faceți. În figura 11 puteți observa acest lucru. Scrieți titlul filmului favorit și dați ”Search” .

Figura 11 Search

După ce ați apăsat Search o să primiți o listă cu filmele care se potrivesc cu ceea ce a-ți tastat, figura 12.

Figura 12 Lista cu filmele căutate

DECLARAȚIE DE AUTENTICITATE

A

LUCRĂRII DE FINALIZARE A STUDIILOR

Titlul lucrării ________________________________________________________

___________________________________________________________________

___________________________________________________________________

Autorul lucrării _____________________________________________

Lucrarea de finalizare a studiilor este elaborată în vederea susținerii examenului de finalizare a studiilor organizat de către Facultatea _________________________________________ din cadrul Universității din Oradea, sesiunea_______________________ a anului universitar ______________.

Prin prezenta, subsemnatul (nume, prenume, CNP)_____________________

___________________________________________________________________

___________________________________________________________________,

declar pe proprie răspundere că această lucrare a fost scrisă de către mine, fără nici un ajutor neautorizat și că nici o parte a lucrării nu conține aplicații sau studii de caz publicate de alți autori.

Declar, de asemenea, că în lucrare nu există idei, tabele, grafice, hărți sau alte surse folosite fără respectarea legii române și a convențiilor internaționale privind drepturile de autor.

Oradea,

Data Semnătura