OpenBook este o aplicație de e-learning online, cu posibilitea de accesare de pe un dispozitiv mobil. Scopul aplicației Aplicația este făcută cu… [309093]

LUCRARE DE LICENȚĂ

SOFT EDUCAȚIONAL

ÎN INFORMATICĂ

Introducere

Ce este OpenBook?

OpenBook este o aplicație de e-[anonimizat].

Scopul aplicației

Aplicația este făcută cu scopul de a încuraja studiul limbajelor de programare și de a îndruma cât mai multe persoane către o carieră în domeniul IT.

Structura aplicației

Pentru a [anonimizat], [anonimizat] a informației.

Serverul API este accesat de clienți (aplicația web și aplicația mobilă) [anonimizat]-uri formate din metodă (GET, POST, PATCH și DELETE) și rută.

Figura 0.1

Terminologii

Framework

În general un framework este o [anonimizat].

În sistemele computaționale un framework este o structură stratificată indicând ce fel de program poate fi construit. [anonimizat], interfețe sau oferă mijloace de programere. Un Framework poate fi un set de funcții înauntrul unui sistem.

[anonimizat] o aplicație sau un sistem.

[anonimizat] o aplicație în trei părți distinctive pentru a separa reprezentarea internă a [anonimizat].

Model

Modelul reprezintă componenta centrală a pattern-ului, el are legătură cu logica și regulile aplicație.

View

View este reprezentația vizuala a informației, el generează o noua reprezentație vizuală în funcție de modificările aduse informației transmise.

Controller

Cea de-a [anonimizat]-ul acceptă informația și o transformă într-o comandă pe care o trimite mai departe

Repository Pattern

Repository Pattern este un loc unde informațiile sunt ținute.

Service Pattern

Service Pattern consumă informația

Composer

Composer este o unealtă care ajută la organizarea dependințelor în PHP dând voie declararea librăriilor de care depinde aplicația dezvoltată și le instalează sau updatează.

NPM

NPM este o unealtă care face ca lucrul cu JavaScript să fie mai ușor întreținând și updatând pachetele și codul care este utilizat în aplicație.

REST

REST este acronim pentru Representational State Transfer și este o conexiune prin HTTP utilizată la comunicarea între diferite tehnologii. Aplicațiile se folosesc de REST prin operațiile CRUD (Create Read Update Delete).

Din cauză că are la bază protocolul HTTP este independent de o platformă, lucru care face posibilă implementarea acestuia pe orice sistem de operare cu orice limbaj de programare.

HTTP

HTTP este un acronim pentru Hypertext Transfer Protocol și este o metodă prin care se accesează informațiile. Acesta oferă un mod de comunicare prin care paginile web se pot transfera de la un computer aflat la distanță la un alt computer.

URI

URI sau Uniform Resource Identifier este o [anonimizat], cum ar fi un site web sau un document. [anonimizat] (Uniform Resource Locator ).

API

API sau mai exact Application Programming Interface este mijloc comun de comunicare între mai multe aplicații.

Metode de acces HTTP

Metodele de acces sunt metodele prin care informația este trimisă și primită în aplicație.

GET

GET este utilizată pentru a cere informații serverului de informații. Nu poate fi folosită cu informații sensibile, are limită de lungime de date și trebuie utilizat doar pentru a aduce date.

POST

POST este utilizată pentru a trimite informații pentru a fi procesate. Nu are restricție de lungime de date precum metoda GET.

PATCH

PATCH este utilizată pentru a actualiza informații pe server.

DELETE

DELETE este utilizată pentru a șterge informații de pe server.

Mesaje de eroare HTTP

Mesajele de eroare sunt răspunsuri de la HTTP în consecință cu informațiile trimise către server și care anunță utilizatorul când acesta trimite date corespunzătoare sau nu.

200

200 este mesajul standard de la HTTP și semnifică faptul că cerința este în regulă și că aceasta a fost îndeplinită cu succes.

201

201 este mesajul de succes primit de la HTTP pentru o cerință de creare a unei noi informații.

204

204 este mesajul de la HTTP pentru o cerință procesată cu succes, dar care nu returnează nici un conținut.

400

400 este mesajul de la HTTP pentru o cerință procesată, dar care nu a putut fi înțeleasă de către server. Utilizatorul trebuie să aducă modificări informație trimise înainte de a mai face o cerere.

401

401 este mesajul de la HTTP pentru o cerință care trebuie satisfăcută de autentificarea utilizatorul. Dacă aceasta este deja satisfăcută și mesajul 401 încă persistă, atunci înseamnă că datele introduse nu sunt corecte. Este folosită atunci când o autentificare este posibilă, dar a eșuat sau nu a fost furnizată.

403

403 este mesajul de la HTTP pentru o cerință trimisă, dar serverul refuză să răspundă.

Tehnologii utilizate

Server

PHP

PHP sau PHP: Hypertext Preprocessor este un limbaj script foarte folosit și este cel mai des folosit în web development în combinație cu HTML.

Versiunea actuală este 7.1.6 prima versiune fiind publicată în 1998. PHP poate fi folosit în combinație cu HTML și există pe majoritatea serverelor, sistemelor de operare sau platformelor deoarece este gratuit.

MySQL

MySQL este un sistem de gestiune a bazelor de date și este cel mai des folosit împreună cu limbajul PHP. Versiunea actuală de MySQL este 5.7.

Laravel

Laravel este un framework pentru aplicații web, la baza lui stă PHP. Laravel încearcă să ușureze dezvoltarea proiectelor web prin : sistem ușor și rapid de creare de rute, stocare de cache și sesiuni, migrări de baze de date etc.

Versiunea actuală este 5.4, prima versiune fiind publicată in iunie 2011.

Pentru a instala Laravel pe un server este nevoie ca serverul să ruleze PHP cu cel puțin versiunea 5.6.4.

Laravel utilizează Composer pentru a administra dependințele. Înainte de a folosi Laravel trebuie instalat Composer pe server.

Client

Tehnologii comune

Javascript

JavaScript este un limbaj de programare orientată pe obiect. Este folosit pentru introducerea unor funcționalități în paginilor web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este bine cunoscut pentru folosirea sa în construirea site-urilor web.

Deși în numele lui este compus din Java și cuvântul Script, între JavaScript și limbajul Java nu există nicio legătură. La fel ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C.

A fost inventat în anul 1995 și a devenit un standard ECMA.

TypeScript

TypeScript este un super-set de JavaScript creat de Microsoft pentru a îmbunătăți limbajul cu anotări și tipuri de obiecte, lucru care duce la o strictețe a limbajului. La compilarea codului, se execută și o verificare a codului pentru a preveni erori la rulare, lucru pe care JavaScript nu îl face, astfel se elimină riscul de afișare a erorilor la rulare.

HTML5

HyperText Markup Language sau HTML este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser. Scopul HTML-ului este prezentarea informațiilor, paragrafelor, fonturilor, tabelelor etc.

Specificațiile HTML sunt dictate de către World Wide Web Consortium sau W3C, iar versiunea actuală este HTML5.

CSS

CSS sau Cascading Style Sheets este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa pe elementele HTML prin intermediul unor fișiere externe sau în cadrul documentului.

Versiunea actuală este CSS 3.

SASS (SCSS)

SASS sau Syntactically Awesome Stylesheets este un super-set de CSS care oferă structure noi de date cum ar fi variabile, nested rules și altele care la compilare se transformă în CSS.

Angular

Angular este o platformă care încurajează dezvoltarea de aplicații web, mobile sau de desktop , la baza lui stând JavaScript.

Angular este creat și este dezvoltat în continuare de Google, prima versiune fiind publicată în 2010, versiunea actuială fiind 4.2.3.

Web

Angular Material

Angular material este un framework pentru HTML și CSS care este bazat pe Angular și care crează site-uri responsive și înfrumusețate acestora pentru browsere de mobil și calculatoare.

Ca și Angular, el este dezvoltat de Google, prima versiune apărând în 2010, versiunea actuală fiind angular material.

Angular material se instalează cu ajutorul npm.

Bootstrap 4

Bootstrap este un framework pentru HTML CSS și JavaScript care realizează web site-uri responsive pentru browserele mobile.

El este gratuit, versiunea actuală este Bootstap3, este creat și dezvoltat de Twiter și a fost lansat în 2011.

Mobile

Ionic 3

Ionic este un framework de dezvoltare a aplicațiilor mobile de tip hibrid. Aplicațiile sunt scrise în tehnologii web (HTML, CSS, JavaScript) și se poate compila codul sursă în aplicație Android, Windows Phone și iOS. Ca și framework de front-end, Ionic utilizează Angular și oferă elemente de design predefinite pentru fiecare din cele 3 platforme pe care poate rula și se injectează automat în aplicație la rularea lor, fapt care face aplicația să se simtă nativă ca și design când rulează pe platformele specifice.

Aplicațiile compilate pot fi distribuite prin magazinele de aplicații native pentru a putea fi instalate.

4Ionic Framework are la bază Cordova. Prima versiune a fost lansată în 2015.

Server API

Arhitectură

Figura 2.1.1

În figura 2.1.1 este explicată arhitectura API cu Service Pattern și Repository Pattern implementate. Clientul, respectiv aplicația folosită de utilizator face o cerere către API. Cererea este preluată de către Controller care mai departe este trimisă către un Service. Informația este apoi trimisă către un Repository care este trimisă către o bază de date. Un răspuns este trimis către Repository, apoi preluată de Service respectiv Controller și trimisă către aplicația folosită.

Baza de date

Figura 2.2.1

Baza de date este formată din șase tabele, reprezentate în figura 2.2.1 .Între tabele există relații de One-To-One și One-To-Many. De exemplu o categorie poate avea mai multe cursuri acesta este o relație One-To-Many. Un curs poate aparține unei singure categori, acesta fiind o relație One-To-One.

Securitate

JWT sau JSON Web Tokens este un mijloc de transmitere a datelor într-un mod sigur. Folosește obiecte de tip JSON, iar informația poate fi verificată .

Accesul informației

Figura 2.4.1

Figura 2.4.2

În figura 2.4.1 este prezentată crearea unei categorii iar în figura 2.4.2 se poate observa răspunsul în JSON.

Figura 2.4.3

Figura 2.4.4

În figura 2.4.3 este prezentată preluarea unei curs, iar în figura 2.4.4 se poate observa răspunsul în JSON.

Aplicația web

Scopul aplicației

Aplicația Web are rolul de introduce utilizatorului, un mediu online unde acesta are acces la cursurile pe care acesta dorește să le vadă.

Funcționalitate

În aplicația web se găsesc mai multe pagini HTML, care sunt conectate prin API la baza de date și între ele prin rute.

Înregistrare

Pagina de înregistrare permite utilizatorului să creeze un cont pentru a putea viziona sau lectura cursurile din aplicație.

Figura 3.2.1.1

Figura 3.2.1.2

În figura 3.2.1.1 și figura 3.2.1.2 putem observa un formular pentru înregistrarea utilizatorului. Acesta trebuie să completeze toate câmpurile pentru a putea crea un cont.

Autentificare

Pagina de autentificare permite utilizatorului să se autentifice în contul creat pentru a lectura sau viziona cursurile.

Figura 3.2.2.1

Figura 3.2.2.2

În figura 3.2.2.1 și 3.2.2.2 se poate observa un formular de autentificare. Utilizatorul trebuie să completeze câmpurile Adresa de email și Parolă pentru a se putea autentifica în cont.

Categorii

Pagina de categorii prezintă liste cu cursuri cu numele și descrierea lor, organizate pe categorii, utilizatorului aplicație.

Figura 3.2.3.1

În figura 3.2.3.1 se poate vedea o categorie cu o listă de cursuri pe care utilizatorul o poate răsfoi.

Cursuri

Pagina de curs prezintă utilizatorului aplicației, detalii despre curs, cum ar fi: titlul, descrierea, numărul de voturi, autorul, lista cu capitole și lecții.

Figura 3.3.4.1

Lecția

Pagina de lecție prezintă utilizatorului documentul, video-ul sau testul respectiv.

Pagina de lecție este de 3 tipuri:

Video, prezentată în figura 3.2.5.2

Document prezentata în figura 3.2.5.1

Test prezentată în figura 3.2.6.1

Figura 3.2.5.2

Test

Pagina pentru test prezintă utilizatorului detalii despre testul respectiv. Întrebările sunt de trei tipuri: cu răspuns multiplu, cu un singur răspuns sau cu răspuns adevărat/fals.

Figura 3.2.6.2

Figura 3.2.6.3

Figura 3.2.6.4

În figurile 3.2.6.2, 3.2.6.3 și 3.2.6.3 sunt afișate întrebări cu diferite tipuri de răspuns.

Pagina principală

Pagina principală introduce utilizatorului aplicația OpenBook, îi pune la dispoziție informații despre cursurile disponibile și mijloace pentru descărcarea aplicației mobile.

Figura 3.2.7.1

Despre

Pagina despre informează utilizatorul despre aplicația OpenBook și scopul acesteia.

Figura 3.2.8.1

În figura 3.2.8.1 se observă detalii despre aplicația OpenBook.

FAQ

Pagina FAQ (Frequently Asked Questions) pune la dispoziția utilizatorului o listă cu întrebări des întâlnite despre aplicație și răspunsuri pentru aceste întrebări.

Figura 3.2.9.1

În figura 3.2.9.1 se observă lista cu întrebările în partea stângă și răspunsul întrebării selectate în partea dreaptă.

Administrator

Pagina de administrator ajută pe cel care administrează aplicația să introducă informațiile necesare ușor, punându-i la dispoziție formulare.

Categorii

Pagina de categorii prezintă lista cursurilor cu numele și descrierea specifică, organizate pe categorii.

Figura 3.3.1.1

În figura 3.3.1.1 se observă un tabel cu categoriile care sunt în baza de date.

Figura 3.3.1.2

Figura 3.3.1.3

În figura 3.3.1.3 se observă încărcarea formularului de adăugare a unei categorii. În figura 3.3.1.2 se observă completarea unui formular de adăugare a unei noi categorii

Figura 3.3.1.4

În figura 3.3.1.4 se observă editarea unei categorii și vizualizarea acesteia în partea dreaptă.

Cursuri

Pagina de curs prezintă utilizatorului aplicației, detalii despre curs, cum ar fi: titlul, descrierea, numărul de voturi, autorul, lista cu capitole și lecții.

Figura 3.3.2.1

În figura 3.3.2.1 se observă un tabel cu cursurile existente. În figura 3.3.2.2 se observă editarea unui curs.

Figura 3.3.2.2

(formular editare curs)

Figura 3.3.2.3

(formular editare curs)

Figura 3.3.2.4

În figura 3.3.2.4 se observă vizualizarea unui curs în curs de editare.

Test

Pagina pentru test prezintă utilizatorului detalii despre testul respectiv. Întrebările sunt de trei tipuri: cu răspuns multiplu, cu un singur răspuns sau cu răspuns adevărat/fals.

Figura 3.3.3.5

Figura 3.3.3.6

Figura 3.3.3.7

În figurile 3.3.3.7 și 3.3.3.6 se observă alegerea răspunsului corect într-un test. Figura 3.3.3.5 reprezintă alegerea tipului de întrebare.

Figura 3.3.3.8

În figura 3.3.3.8 se observă adăugarea multiplelor întrebări pentru a crea un test.

Figura 3.3.3.9

În figura 3.3.3.9 se observă vizualizarea unui test înainte de a salva modificările.

Aplicația mobilă

Scopul aplicației

Aplicația mobilă face accesul către informație mult mai ușor pentru utilizator. Acesta poate urmări cursuri de pe telefonul propriu oriunde.

Funcționalitate

În aplicația mobilă se găsesc mai multe pagini HTML care sunt conectate prin API la baza de date și între ele de către rute.

Autentificare

Pagina de autentificare permite utilizatorului să se autentifice în contul creat pentru a lectura sau viziona cursurile.

Figura 4.2.1.1

În figura 4.2.1.1 se poate observa un formular de autentificare a utilizatorului .Câmpurile email și parolă sunt obligatorii pentru a putea fi făcută autentificarea.

Înregistrare

Pagina de înregistrare permite utilizatorului să creeze un cont pentru a putea viziona sau lectura cursurile din aplicație.

Figura 4.2.2.1

În figura 4.2.2.1 se poate observa un formular de înregistrare pentru utilizatori. Câmpurile Nume, Email cât și cele două câmpuri parolă sunt obligatorii pentru a putea face înregistrarea.

Categorii

Pagina de categorii prezintă liste cu cursuri cu numele și descrierea lor, organizate pe categorii, utilizatorului aplicație.

Figura 4.2.3.1

În figura 4.2.3.1 putem observă lista categoriilor disponibile.

Cursuri

Pagina de curs prezintă utilizatorului aplicației, detalii despre curs, cum ar fi: titlul, descrierea, numărul de voturi, autorul, lista cu capitole și lecții.

Figura 4.2.4.1

În figura 4.2.4.1 se poate observa o listă de cursuri dintr-o categorie.

Figura 4.2.4.2

În figura 4.2.4.2 se poate observa un curs cu titlul autorul voturile descrierea și o listă de lecții și capitole afișate.

Lecții

Pagina de lecție prezintă utilizatorului documentul, video-ul sau testul respectiv.

Pagina de lecție este de 3 tipuri:

Video, prezentată în figura

Document prezentata în figura

Test prezentată în figura

Figura 4.2.5.1

În figura 4.2.5.1 se observă o lecție de tip text cu titlul și autorul afișat.

Figura 4.2.5.2

În figura 4.2.5.2 se observă un test cu numele descrierea întrebările descrierea întrebărilor și răspunsurile posibile.

Figura 4.2.5.3

În figura 4.2.5.3 se poate observa o lecție de tipul video cu cursul, autorul și descrierea lecției.

Despre

Pagina despre informează utilizatorul despre aplicația OpenBook și scopul acesteia.

Figura 4.2.6.1

În figura 4.2.6.1 se poate observa o pagină care informează utilizatorul ce anume face aplicația OpenBook.

FAQ

Pagina FAQ( Frequentrly Answered Questions) pune la dispoziția utilizatorului o listă cu întrebări des întâlnite despre aplicație și răspunsuri pentru aceste întrebări.

Figura 4.2.7.1

În figura 4.2.7.1 se poate observa o listă de întrebări frecvent întrebate.

Figura 4.2.7.2

În figura 4.2.7.2 se poate observa răspunsul unei întrebări frecvent întrebate.

Profil

Pagina de profil introduce utilizatorului un formular pentru a putea schimba datele contului cât și cursurile pe care le-a vizionat sau care îl interesează.

Figura 4.2.8.1

În figura 4.2.8.1 se poate observa o pagină de profil a unui utilizator. Aceasta conține un formular de schimbare a datelor profilului și o listă de cursuri pe care utilizatorul le-a început.

Pagina principală

Pagina principală introduce utilizatorului aplicația OpenBook, îi pune la dispoziție informații despre cursurile disponibile și mijloace pentru descărcarea aplicației mobile.

Figura 4.2.9.1

În figura 4.2.9.1 se observă pagina principală a aplicației aceasta se poate observa o listă cu cursuri care sunt cele mai votate de către utilizatori.

Concluzii

Aplicația OpenBook face ca învățarea de noi tehnologii să fie mai plăcută și mai ușor de realizat, oferidu-i utilizatorului un serviciu complet.

Aplicația OpenBook oferă comoditatea utilizării unei aplicații mobile, dar și stabilitatea unei aplicații web.

Utilizatorul poate accesa aplicația și informația cu ușurință .

Bibliografie

www.php.net – Pentru informațiile despre PHP

www.angular.io – Pentru informațiile pentru Angular

http://material.angular.io – Pentru informațiile despre Angular Material

www.laravel.com – Pentru informațiile despre Laravel

www.ionicframework.com – Pentru informațiile despre Ionic Framework

www.getbootstrap.com – Pentru informațiile despre Boostrap

www.apache.org – Pentru informațiile despre Apache

www.mysql.com – Pentru informații despre MySQL

www.w3schools.com – Pentru informații despre CSS, SASS și HTML

www.javascript.com – Pentru informații despre JavaScript