Învățare DE Tehnologii Web Prin Intermediul Aplicațiilor Mobile Interactive

Academia de Studii Economice din București

Facultatea de Cibernetică, Statistică și Informatică Economică

Specializarea Informatică Economică

Top of Form

ÎNVĂȚARE DE TEHNOLOGII WEB PRIN INTERMEDIUL APLICAȚIILOR MOBILE INTERACTIVE

Bottom of Form- lucrare de licență –

Coordonator: Prof. Zamfiroiu Alin

Absolvent: Radulescu Andrew

Top of Form

București 2016

Bottom of Form

Introducere

Examenul de licență se susține la finalizarea anilor de studiu universitar, ulterior promovării integrale a examenelor aferente profilului urmat. Scopul acestui examen este de a atesta însușirea de către studentul vizat a  unor cunoștințe de bază, specifice unui domeniu particular, către care acesta prezintă o înclinație aparte. Scopul acestei lucrări de licență este dorința de a demonstra capabilitatea de a utiliza în mod independent anumite tehnologii web, ulterior descrise în mod amănunțit, în vederea realizării unei aplicații, ce urmează a dobândi posibilitatea de a fi pusă în practică în lumea reală.

      1. Obiectivele avute în vedere

Lucrarea de licență este necesar a fi structurată în mod corespunzător, în vederea obținerii în mod vizibil a unui șir logic de pași, mai ales că însăși aplicația, ce se dorește a fi de succes, trebuie să se supună unei înșiruiri de etape. Întrucât tema lucrării de licență o reprezintă o platforma de învățare a unor tehnologii web, obiectivul acesteia este de a prezenta în mod detaliat aceste etape ce au stat la baza dezvoltării cu succes a aplicației, a tehnologiilor utilizate, precum și a funcționalitătilor implementate, ce vor contribui la sporirea gradului de aplicabilitate în lumea reală. Așadar, aplicația prezentată se dorește a fi o platformă de învățare a tehnologiei denumite AngularJS, apărute de curând (2009), aplicație ce oferă utilizatorilor din aproape orice categorie, posibilitatea de a acumula o serie de cunoștințe de bază ale acestei tehnologii, prin metode interactive. Având în vedere regulile ce se respectă în vederea dezvoltării unei astfel de aplicații, este necesar ca aceasta să atragă utilizatorul printr-o interfață simplă, intuitivă, prin intermediul căreia pașii urmați în parcurgerea modulelor cu lecții să vină în mod natural. Utilizatorul este necesar să aibă contact cu cât mai puțin conținut, iar cel care există să îl îndrume atât prin text, cât și prin imagini sugestive, către îndeplinirea scopului pentru care a ales aplicația. În plus față de interfața intuitivă, aplicația este necesar să ofere o bază teoretică în ceea ce privește AngularJS, astfel încât utilizatori dintr-o categorie mai largă (atât începători, cât și avansați) să fie capabili să o utilizeze în mod corespunzător.

Deși conceptul de m-learning nu a apărut de mult timp, rapiditatea cu care se dezvoltă tehnologiile în ziua de astăzi, conduce la o adoptare a acestui stil de studiu din ce în ce mai mare și de către o categorie din ce în ce mai largă de utilizatori. Obiectivul avut în vedere în dezvoltarea acestei aplicații nu este de a înlocui procesul clasic de învățare, care de altfel nici nu ar fi posibil prin intermediul unei aplicații mobile. Prin plusul de interactivitate pe care îl aduce cu ajutorul design-ului și a întrebărilor ce provoacă, aplicația dorește să stârnească interesul utilizatorilor, punând în valoare multitudinea de avantaje aduse de integrarea framework-ului într-o aplicație mobilă. În ceea ce privește testele, s-a dorit ca pe lângă baza teoretică pusă la dispoziția utilizatorului, acesta să aibă posibilitatea și de a-și testa cunoștințele acumulate, deoarece existența singulară a teoriei ar fi putut conduce la monotonie, ceea ce îndepărtează utilizatorii. Întrebările din cadrul unui test acoperă strict teoria prezentată și nu mai mult, cu scopul de a nu se ieși din aplicație pentru obținerea răspunsului corect. Apogeul de interactivitate este atins prin intermediul implementării unui joc bazat pe teste, adică un joc ce conține întrebări care nu mai sunt precedate de teorie. Astfel este testat nivelul cunoștințelor utilizatorului, ce este provocat a răspunde corect la cât mai multe întrebări cu putință.

     2. Motivarea alegerii temei

Nu mulți sunt cei care dispun de informații integrale privind funcționalitatea telefonului mobil în ziua de astăzi. Bineînțeles, aplicația vizează dispozitivele ce au integrat un anumit sistem de operare. Având totuși în vedere că un procent destul de mare utilizează telefoane ce permit instalarea acestui tip de aplicație, singurul inconvenient rămâne lipsa de timp cu care se confruntă societatea. Aplicația dorește în acest scop, promovarea ideii de învățare în orice moment, oferind acces permanent la informații de bază specifice acestei tehnologii nu de mult apărute.

Motivul alegerii temei prezentate anterior constă în a atrage atenția asupra unei noi tehnologii, ce prezintă noi funcționalități față de cele mai vechi. Platforma de învățare pune la dispoziție o serie de module, ce la rândul lor dispun de mai multe capitole, fiecare capitol fiind alcătuit dintr-o parte teoretică și una practică, pe care utilizatorul urmează a le parcurge, în vederea continuării celorlalte capitole, respectiv module. Faptul că aplicația oferă capitole introductive, prezentarea unei sintaxe accesibile, de bază și ușor de înțeles, conduce la familiarizarea cu Angular chiar și a unui utilizator începător, motivându-l astfel să continue procesul de învățare.

AngularJS are rolul de a facilita dezvoltarea aplicațiilor web, prin integrarea unei structuri robuste și simplu de implementat. Efectele vizuale remarcabile sunt unul din motivele pentru care Angular ar trebui ales, în detrimentul altor tehnologii.

       3. Plasarea temei în piață

Mobile learning, cunoscut și sub denumirea de M-learning, se consideră a fi o noțiune relativ nouă pe piață, fiind destinată utilizatorilor ce își doresc acumularea unor cunoștințe suplimentare, accesibile în orice moment de timp. Timpul fiind vital în acest mediu dinamic, această soluție este considerată la îndemână de către tot mai mulți utilizatori ai telefoanelor mobile, pentru că pune la dispoziție într-un mod interactiv informații pe care în mod normal majoritatea utilizatorilor nu le-ar accesa din proprie inițiativă în timpul liber.

Felul în care a fost percepută utilizabilitatea acestui mod de învățare a condus la inițierea unor cercetări în Statele Unite și în Europa, rezultatele fiind neașteptate. Ulterior obținerii acestor rezultate, s-a realizat un sondaj în rândul unui eșantion de 490 de studenți cu vârste cuprinse între 20 și 28 de ani ai unor universități cu profil tehnic. Principalele concluzii s-au redus la: o mai bună structurare a informațiilor, posibilitatea utilizării în orice moment de timp, independent de locație, acces la informații prin intermediul unei interfețe intuitive, precum și sporirea interesului utilizatorului, datorată menținerii pasului cu progresul informatic.

M-learning se află momentan încă în faza incipientă, nu pentru că dispozitivele deținute de majoritatea populației nu permit aplicarea acestei modalități de învățare, ci pentru că nu există deschidere/încredere din partea utilizatorilor de telefoane mobile.  Pe măsură ce evoluăm atât noi, cât și tehnologia și astfel aplicațiile ce oferă noi căi de învățare, se vor observa avantajele absolute ale acestei abordări, prin dovezi care să ateste acest lucru (teste, certificate). Este posibil ca foarte curând în viitor, această metodă viabilă să fie capabilă să înlocuiască anumite cursuri din cadrul școlilor și al universităților.

       4. Riscuri

Conceptul de m-learning pune la dispoziție o multitudine de avantaje pentru care ar trebui luat în seamă de către toate categoriile de vârstă. Accesul rapid la informație, precum și complexitatea oferită de aceste aplicații reprezintă soluția ideală pentru lipsa timpului cu care se confruntă societatea în ziua de astăzi. Costurile reduse, precum și ușurința în utilizare a platformelor de dezvoltare pentru dispozitivele mobile sunt de asemenea un avantaj.

Ca în orice domeniu, există bineînțeles și puncte mai slabe sau inconveniente din cauza cărora este posibil ca acest concept să nu fie agreat 100%. Dezvoltarea extraordinar de rapidă a tehnologiilor conduce la un număr mare de platforme de operare, de variații în ceea ce privește dispozitivele, precum și a tehnologiilor suport, fapt ce conduce la îngreunarea sau poate chiar imposibilitatea dezvoltării unei soluții/aplicații unice, care să funcționeze în mod optim pe orice fel de dispozitiv sau sistem.

Un alt risc ce este posibil să apară poate proveni din lipsa securității datelor, ce poate apărea din cauza lipsei unor standarde comune în ceea ce privește telefoanele mobile. Având în vedere că majoritatea aplicațiilor pretind utilizatorului să se logheze, informațiile furnizate de acesta este necesar să se deplaseze pe un canal securizat, ideal fiind ca acestea să fie și criptate, pentru a nu putea fi accesate sub nicio formă de indivizi neautorizați. Acest lucru este valabil în mod special pentru aplicații bancare de exemplu, a căror logare pretinde furnizarea datelor bancare, cum ar fi cele de pe card. Însă punctual vorbind pe aplicația dezvoltată, cu toate că logarea nu presupune decât furnizarea unei adrese de email și a unei parole, acest aspect nu trebuie neglijat.

După cum s-a menționat și în paragrafe precedente, conceptul de m-learning nu are scopul de a înlocui procesul clasic de învățare, așadar lipsa standardelor de învățare pe dispozitivele mobile ar putea apărea ca un inconvenient. Dar dacă aplicațiile sunt utilizate cu scopul pentru care au fost concepute și anume aducerea unui plus de interactivitate în procesul de învățare, atunci ele nu reprezintă altceva decât un avantaj, un plus pentru tinerii (și nu numai) doritori să își îmbunătățească cunoștințele existente.

Toate aceste constrângeri trebuie luate în seama de dezvoltator, ce poate nu reușește să le înlăture în întregime, dar care ar trebui să țină cont de ele în timpul dezvoltării. Bateria reprezintă unul dintre cele mai importante aspecte necesar a fi luate în considerare în cadrul dezvoltării unei aplicații mobile. O aplicație cu un timp al procesorului mare cu siguranță duce la un consum destul de rapid, ceea ce îndepărtează utilizatorii. Având în vedere că procesorul unui telefon mobil are o frecvență mult mai mică, aplicația este posibil să se miște mai greu decât ar trebui (de exemplu din cauza duratei interogării bazei de date), ceea ce poate deveni deranjant la un moment dat. Dimensiunea redusă a dispozitivului se află în același context cu realizarea unei interfețe intuitive și ușor de manevrat de către utilizator. Acesta trebuie să interacționeze cu cât de puțin text este posibil și să obțină informațiile dorite într-un mod cât mai natural cu putință.

Memoria dispozitivelor mobile poate conduce la un inconvenient, în sensul că această nu poate fi mărită prin folosirea cardului de memorie. Așadar, aplicația dezvoltată trebuie să rețină cât mai puține date în memorie, în vederea unei funcționari normale a dispozitivului.

Un alt tip de risc ce poate apărea și care trebuie cu siguranță luat în considerare în momentul dezvoltării unei aplicații mobile, este neacceptarea acesteia pe AppStore sau Google Market, din cauza nerespectării standardelor impuse. Update-urile neașteptate ale tehnologiilor utilizate pot conduce la inutilizabilitatea aplicației sau utilizarea ei în condiții ce nu sunt optime. Aceleași dezavantaje pot apărea de exemplu și atunci când nu există conexiune la internet. Punctual vorbind, aplicația dezvoltată necesită o conexiune la internet cel puțin atunci când este deschisă, în vederea obținerii unei sincronizări și astfel vizualizarea progresului corect realizat de utilizator, chiar dacă ulterior nu mai este necesară.

Logica aplicatiei

Descrierea aplicației

Aplicația mobilă dezvoltată reprezintă o platforma de învățare în mod interactiv a unei tehnologii nu de mult apărute, denumită AngularJS. Aplicația are drept scop punerea la dispoziție a unor informații menite să constituie o baza teoretică în ceea ceprivește framework-ul mai sus menționat. Structural vorbind, această conține o serie de module, ce la rândul lor sunt alcătuite dintr-un număr variat de lecții. Acestea conțin partea teoretică, ce este necesar a fi parcursă în vederea rezolvării cu succes atestelor aferente, fapt ce permite utilizatorului avansarea către următoarele capitole de o dificultate vizibil sporită. Ulterior parcurgerii fiecărei lecții, utilizatorului i se adresează o serie de întrebări, ale căror răspuns se găsește exclusiv în teoriaprezentată anterior. În cazul în care răspunsul oferit este greșit, aplicația îi prezintă utilizatorului răspunsul corect precum și alegerea greșită. În plus aplicația pune la dispoziție anumite hint-uri, ce au rolul de a îndrumă utilizatorul către răspunsulcorect. În ceea ce privește funcționalitățile adiționale implementate, aplicația va stoca în timp real progresul realizat de către utilizator, acesta având posibilitatea de a relua procesul de învățare de acolo de unde l-a lăsat precum și posibilitatea de aschimbă dispozitivul mobil fără a-și pierde progresul acumulat anterior.

Mai mult, aplicația oferă și o serie de statistici unde utilizatorul poate vedea câte module, lecții sau teste a finalizat, precum și procentaje relevante cu privire la progresul sau în aplicație.

Pentru sporirea dinamismului și a interactivității, aplicația oferă și un modul de Quiz Game unde utilizatorul poate învață într-un mod dinamic parcurgând numai teste.  În plus, utilizatorul poate alege dificultatea testelor și în final primește un număr de puncte în cazul în care testul a fost finalizat cu succes.

Aplicații similare

O aplicație similară, deja existentă pe piață poartă denumirea de Solo Learn și pune la dispoziție posibilitatea acumulării unor cunoștințe de bază în ceea ce privește numeroase limbaje de programare și nu numai: C++, Java, HTML, SQL, CSS, Excel etc. De exemplu, Learn CSS este unul din multele cursuri oferite de Solo Learn. Cu o interfață intuitivă, accesibilă oricărui tip de utilizator, aplicația oferă o serie de metode interactive de acumulare a cunoștințelor de bază privind stabilirea stilului și a layout-ului unei pagini web. Asemănător platformei de învățare AngularJS, Learn CSS pune de asemenea la dispoziție o serie de module cu nume sugestive, ce la rândul lor sunt formate din capitole, fiecare capitol fiind alcătuit dintr-o succesiune de pagini de teorie, urmate imediat de întrebări relevante. În plus, Learn CSS oferă posibilitatea vizualizării în paralel cu teoria prezentată, a unor filmulețe preluate de pe YouTube, relevante în ceea ce privește capitolul parcurs. Aplicația este destinată oricărui tip de utilizator, având în vedere faptul că pornește procesul de învățare cu cele mai elementare noțiuni (The Basics), astfel nemaifiind nevoie de acumularea unor cunoștințe anterioare. Exemple de module puse la dispoziție sunt: Working with text (ce oferă documentația necesară în ceea ce privește modul de afișare al textului), Properties (prezentarea pe scurt a Box Model-ului, a tabelelor, a background-ului, etc.),  Gradients; Backgrounds, Transitions; Transforms, etc, toate acestea fiind precedate bineînțeles de teste ce necesită a fi rezolvate.

Un alt exemplu este aplicația menită să învețe utilizatorul Excel, denumită așadar în mod sugestiv, Excel Tutorial. Această conține peste 27 de filmulețe teoretice interactive, ce împreună cu teoria prezentată în mod asemănător, acoperă o serie largă de noțiuni, precum formule, funcții de bază, moduri de formatare, etc. Structura este asemănătoare celei mai sus prezentate, așadar utilizatorul este posibil să prefere parcurgerea tutorialelor oferite tot de către Solo Learn, el fiind familiarizat cu modul de lucru. Din acest punct de vedere, Solo Learn prezintă un avantaj față de anumite aplicații, întrucât acoperă o serie mai largă de limbaje/tehnologii.

O altă aplicație similară celor prezentate anterior poartă denumirea de Udacity și cu toate că ideea privind modul de învățare este aceeași, modul de implementare și structura acesteia diferă într-o oarecare măsură. Udacity dispune de o interfață intuitivă, prin intermediul căreia utilizatorul poate accesa modulul ce prezintă interes. Modulele oferite se referă, printre altele, la: Data Science (Computer Science, A/B Testing, Data Analysis, etc.), Web Development (HTML, CSS, JavaScript, JQuery, Relational Databases, etc), Software Engineering (Java programming, Artificial intelligence, Software testing,etc), Android, iOS, etc. Fiecare modul în parte este alcătuit la rândul său dintr-o serie de cursuri, destinate diferitelor categorii de utilizatori  (începător, mediu sau avansat). Fiecare curs conține o scurtă introducere, ce are rolul de a familiariza utilizatorul în ceea ce privește noțiunile ce urmează a fi parcurse, informațiile ce se doresc a fi anterior cunoscute în vederea asimilării cu succes a elementelor teoretice (dacă este cazul), precum și o serie de întrebări puse frecvent de către utilizatori (FAQ), cu scopul obținerii răspunsurilor din cele mai variate categorii, care se mențin totuși în sfera de studiu. Începerea cursului se realizează ulterior logării utilizatorului, acesta având acces mai departe la o serie de lecții din care este alcătuit cursul. Aici apare diferența fundamentală dintre această aplicație și cele prezentate anterior, în sensul că lecțiile sunt oferite exclusiv sub forma unor filmulețe interactive. Un avantaj al aplicației îl reprezintă posibilitatea oferită utilizatorului de a-și scrie propriul cod, precum și de a-i testa corectitudinea  (Code Editor).

Concluzionând, deși modul de abordare al aplicațiilor ce fac parte din această categorie, este vizibil diferit, ele promovează același mod de acumulare a cunoștințelor și anume modul interactiv, accesibil oricărui tip de utilizator, care îl implică direct și pe acesta în procesul de învățare prin teste specifice și editoare, fapt ce reprezintă un avantaj față de oferirea în mod exclusiv a unei baze teoretice.

Avantaje si dezavantaje

Conceptul de M-learning este relativ nou, motiv pentru care este posibil ca în rândul utilizatorilor de telefoane mobile să existe anumite reticențe în ceea ce îl privește. Ca în orice domeniu, există atât avantaje cât și dezavantaje ale acestui mod de învățare. În ceea ce privește avantajele, o aplicație instalată de acest tip oferă posibilitatea utilizării sale oriunde și în orice moment de timp, telefonul fiind capabil să înlocuiască cu succes dispozitivele mai mari, atât în materie de dimensiuni fizice cât și de preț. Un alt avantaj îl reprezintă deschiderea căii de acces către o multitudine de informații prezentate într-o diversitate de formate, cu aspect plăcut, interactiv. Cu toate acestea, trebuie menționat faptul că acest mod de abordare nu trebuie să îl înlocuiască pe cel clasic, ci să ofere o posibilitate adițională, opțională de acumulare a cunoștințelor, într-un mod aparte. Astfel este posibil ca tinerii, în special, să manifeste o atracție față de noua tehnologie, fiind în pas cu progresul informatic, totodată alimentând dorința de învățare strict a domeniilor ce prezintă interes.

Pe de altă parte, există bineînțeles și o serie de dezavantaje ce ar putea conduce la alegerea altor moduri de învățare. Printre ele se evidențiază inconvenientul legat de mărimea fizică a dispozitivelor, în sensul că dimensiunile mici ale ecranelor este posibil să limiteze capacitatea de afișare a informațiilor. Un alt dezavantaj îl reprezintă memoria de dimensiuni mici, ce poate să conducă la instalarea unui număr limitat de astfel de aplicații, precum și dezinstalarea lor ulterioară, cu scopul de a face loc altora. Totodată, necesitatea de încărcare periodică a bateriei poate să devină la un moment dat un inconvenient demn de luat în seamă.

În concluzie, Mobile Learning-ul reprezintă o formă complementară procesului convențional de învățare, apărut ca urmare a dezvoltării tehnologiei, cu scopul oferirii unor soluții adaptabile resurselor limitate de timp cu care se confruntă societatea.

Arhitectura aplicatiei

Tehnologii utilizate

Pentru dezvoltarea aplicației mobile am folosit tehnologii web pentru dezvoltarea aplicațiilor mobile precum Ionic și Corova dar și două baze de date, una SQL și una NoSQL, SQLite respectiv Firebase.

Ionic Framework

Ionic este un SDK pentru HTML5 foate puternic, ce ajută la dezvoltarea aplicațiilor mobile native, prin utilizarea tehnologiilor web, precum HTML, CSS și JavaScript. Ionic este axat în mod principal pe aspectul și interacțiunea utilizatorului cu aplicația. Asta nu înseamnă că este un înlocuitor pentru vreun framework Java, în schimb pur și simplu se potrivește foarte bine în contextul acestor proiecte, în vederea simplificării unei părți semnificative a aplicației și anume partea de front-end. În vederea funcționării la întregul său potențial, Ionic necesită AngularJS. Cu toate că se poate utiliza în continuare porțiunea CSS a framework-ului, este posibil să se rateze numeroasele avantaje în ceea ce privește interfața, interacțiunea utilizatorului cu aplicația: animații, mișcări, etc.

Aplicațiile hibride sunt, în esență, site-uri mici ce rulează într-un browser dintr-o aplicație ce are acces la layer-ul nativ al platformei. Aplicațiile hibride aduc mai multe beneficii decât aplicațiile native pure, în special în ceea ce privește suportul platformei, viteză de dezvoltare și accesul la codul de tip 3rd party.

Spre deosebire de un framework responsive, Ionic vine cu elemente foarte asemănătoare celor native în ceea ce privește interacțiunea utilizatorului cu aplicația, care sunt obținute cu un SDK nativ pe iOS sau Android, dar care nu au existat cu adevărat înainte pe web.

Din moment ce Ionic este un framework HTML5, are nevoie de un ambalaj nativ precum Cordova sau PhoneGap pentru a rula ca o aplicație nativă. Se recomandă Cordova pentru aplicații, iar instrumentele Ionic vor utiliza Cordova la bază. Ionic s-a construit pentru că s-a crezut cu tărie faptul că HTML5 va domni în cadrul aplicațiilor mobile peste timp, exact așa cum a făcut-o pentru aplicațiile de tip desktop. Odată ce computerele desktop au devenit destul de puternice și tehnologia browser a avansat, aproape toată lumea își petrecea timpul navigând. Așadar, dezvoltatorii erau copleșiți de construirea unui număr cât mai mare de aplicații web.

Pentru cei familiarizați cu dezvoltarea de software web, structura unei aplicații Ionic li se va părea simplu de înțeles. Nucleul său conține o pagină web care rulează în interiorul unei aplicații native. Asta înseamnă că se poate folosi orice cod HTML, CSS și JavaScript. Singura diferență este că în loc de a se crea un site ce este doar o verigă a unui lanț, se va crea o aplicație de sine stătătoare. Cea mai mare parte a unei aplicații Ionic va fi scrisă în HTML, CSS și JavaScript. Dezvoltatorii dornici vor putea de asemenea merge mai departe, în stratul nativ cu plugin-uri personalizate de Cordova sau cod nativ, însă acest lucru nu este necesar pentru a obține o aplicație extraordinară.

Ionic folosește de asemenea AngularJS pentru o mare parte din funcționalitatea de bază a framework-ului. În timp ce Ionic se poate utiliza doar cu partea de CSS, se recomandă investirea în Angular, având în vedere că este unul dintre cele mai bune moduri de a dezvolta aplicații bazate pe browser în ziua de astăzi.

Cordova

Cordova este un framework open-source pentru dezvoltarea aplicațiilor mobile. Permite utilizarea tehnologiilor web standard pentru dezvoltarea platformelor. Aplicațiile se execută în interiorul ambalajelor direcționate către fiecare platformă și se bazează pe legături standard API pentru a accesa capabilitățile fiecărui dispozitiv, cum ar fi senzori, date, starea rețelei, etc.

În general, Cordova se folosește în următoarele cazuri:

   Un dezvoltator își dorește extinderea unei aplicații pe mai mult de o platformă, fără a fi nevoie să o reimplementeze cu limbajul și instrumentele specifice platformei respective

   Un dezvoltator web își dorește implementarea unei aplicații web ce este construită pentru a fi distribuită în diferite magazine de tipul App Store

   Un dezvoltator de aplicații mobile este interesat în combinarea componentelor native cu cele hibride (WebView), ce poate accesa API-uri la nivel de dispozitiv sau dacă dorește să dezvolte o interfață plugin între componente native și hibride.

Există mai multe componente într-o aplicație Cordova. Următoarea diagramă prezintă o imagine la un nivel înalt a arhitecturii unei astfel de aplicații:

Web App-ul reprezintă partea în care se află codul aplicației. Aplicația în sine este implementată ca o pagină web, implicit cu un fișier local denumit index.html, care face referire la CSS, JavaScript, imagini, fișiere media sau alte resurse ce sunt necesare pentru a rula. Aplicația rulează într-o fereastră de browser (WebView), în interiorul aplicației native.

Acest container conține un fișier foarte important – config.xml care oferă informații despre aplicație și specifică parametrii ce influențează modul în care funcționează, de exemplu dacă răspunde la schimbările de orientare ale dispozitivului mobil.

Plugin-urile reprezintă o parte foarte puternică integrată în Cordova. Acestea oferă o interfață pentru componentele native și Cordova, pentru ca acestea să comunice între ele; totodată oferă legături pentru API-uri ale dispozitivului standard. Acest lucru permite dezvoltatorului să invoce cod nativ din JavaScript.

Proiectul Apache Cordova menține un set de plugin-uri denumit Core Plugins. Aceste plugin-uri de bază oferă aplicației posibilitatea de a accesa funcționalitățile dispozitivului, precum bateria, camera, contactele, etc. În plus față de plugin-urile de bază, există mai multe plugin-uri third party care oferă legături suplimentare către diverse caracteristici ce nu sunt neapărat disponibile pe toate platformele. Plugin-urile Cordova se pot găsi folosind căutarea de plugin sau npm (Node Package Manager). De asemenea, dezvoltatorul își poate crea plugin-uri proprii, așa cum este descris în Ghidul Dezvoltării Plugin-urilor. Plugin-urile pot fi necesare de exemplu, în vederea comunicării între Cordova și componentele native personalizate.

Cordova nu oferă niciun UI widget sau un framework MV*. Oferă timpul de execuție al acestora. În cazul în care se dorește utilizarea widget-urilor UI și/sau a framework-ului MV*, este necesară selectarea acestora și includerea în aplicație.

AngularJS

AngularJS este un framework complet construit în JavaScript, open-source atât pentru partea de client cât și pentru partea de server, susținut de Google. Acesta a apărut cu scopul rezolvării multelor provocări întâmpinate în dezvoltarea aplicațiilor SPA (Single Page Application). Componentele JavaScript existente în cadrul Angular completează PhoneGap, framework-ul folosit pentru dezvoltarea aplicațiilor mobile pentru mai multe platforme. Angular folosește ca patternuri arhitecturale Model-View-Controller (MVC) și Model-View-Viewmodel (MVVM).

Acest framework extinde funcționalitatea HTML-ului și interpretează tag-urile acestuia sub formă de directive ce leagă părțile de intrare sau ieșire prin modele reprezentate de variabile JavaScript standard. Valoarea acestor variabile poate fi setată în mod manual în cadrul codului sau preluate din obiecte de tip JSON.

AngularJS este construit pe premisa că programarea declarativă ar trebui utilizată pentru a crea interfețe de utilizator și pentru a conecta componente software, în timp ce programarea imperativă se potrivește mai bine pentru a defini logica de afaceri a unei aplicații. Framework-ul adaptează și extinde tradiționalul HTML către un conținut dinamic prin intermediul two-way data binding, care permite sincronizarea automată a modelelor și a view-urilor. Drept rezultat, AngularJS nu mai scoate în evidență manipularea DOM explicită (jQuery) cu scopul de a îmbunătăți capacitățile de testare precum și performanță.

Angular implementează patternul arhitectural MVC pentru a separa prezentarea, datele și componentele logice. Utilizând injectarea dependințelor (dependency injection), Angular aduce serviciile tradiționale de pe partea de server, cum ar fi controlere dependente de view, către aplicațiile web de pe partea de client. În consecință, o mare parte din munca serverului poate fi redusă.  

Ca parte a arhitecturii MVC, scope-ul formează modelul și toate variabilele definite în scope pot fi accesate de View, precum și de Controller. Scope-ul se comportă ca un “lipici” între View și Controller. În Angular, scope-ul este un tip de obiect injectat în controlere căruia i se atașează funcții, proprietăți sau alte obiecte. În ultimul timp, urmărind cele mai bune practici în scrierea de cod Angular, obiectul $scope trebuie evitat în controlere, și expunerea sa să se facă doar dacă este într-adevăr necesar.

În cadrul aplicației dezvoltate, folosesc variabila $scope pentru expunerea variabilelor necesare precum și funcțiilor în controllere pentru accesarea acestora din cadrul view-urilor.

Firebase

Firebase este un furnizor de servicii cloud și backend, având sediul în San Francisco, California. Compania are ca scop dezvoltarea produselor software destinate dezvoltatorilor ce construiesc aplicații mobile sau web. Firebase a fost fondat în anul 2011 de către Andrew Lee și James Tamplin și a fost lansat cu o bază de date cloud reală în aprilie 2012. Primul produs Firebase reprezintă o bază de date sincronizată în timp real ce oferă un API care permite dezvoltatorilor să stocheze și să sincronizeze date între mai mulți clienți.

Mai mult, Firebase oferă un pachet de început gratuit, cu un spațiu de stocare de 1GB precum și posibilitatea de conectare a 100 de utilizatori simultan. Acest pachet a fost alegerea perfectă pentru aplicația mobilă dezvoltată pentru licență, datorită necesității unui spațiu de stocare relativ mic precum și necesitatea conectării a mai puțin de 100 utilizatori.  

Firebase Analytics reprezintă o aplicație gratuită ce are rolul de a oferi dezvoltatorilor o imagine în ceea ce privește utilizarea aplicației precum și implicarea utilizatorilor în acest context.

Firebase Auth este un serviciu care poate autentifica utilizatorii în aplicație verificând credențialele acestora, folosind numai cod pe partea de client. Acesta implementează și posibilitatea de autentificare si prin rețele de socializare precum Facebook, Twitter și Google. În plus, Firebase are implementat și un sistem de management al utilizatorului, prin intermediul căruia dezvoltatorii pot permite autentificarea prin email și parolă, stocate prin Firebase.

Una dintre cele mai interesante funcționalități oferite de Firebase dar și cea mai cunoscută, este baza de date în timp real. Acest serviciu oferă un API prin care adăugarea, interogarea precum și modificarea datelor este foarte ușor de gestionat. Mai mult, informațiile stocate în cloud-ul Firebase sunt actualizate în timp real, fapt ce duce la sincronizarea datelor instant pe dispozitivele mobile sau pe paginile web. Această funcționalitate este foarte folositoare pentru dezvoltarea aplicației mobile de învățare pentru licență, datorită necesității sincronizării progresului utilizatorului în aplicație precum și sincronizarea datelor în cazul schimbării dispozitivului mobil cu care utilizatorul este autentificat.  În momentul în care datele sunt modificate în Firebase, acesta notifică toți utilizatorii conectați, iar datele sunt actualizate în timp real.

O altă funcționalitate foarte importantă din cadrul Firebase este raportarea erorilor. Raportarea erorilor din cadrul aplicației se face în mod detaliat. Erorile sunt grupate în grupuri în funcție de similaritatea lor și triate în funcție de gradul de severitate al impactului asupra utilizatorilor. În plus față de rapoartele automate, dezvoltatorul poate conecta evenimentele personalizate pentru a ajută la stabilirea etapelor ce conduc la o eroare.

Schema arhitecturală a aplicației

Pentru dezvoltarea aplicației mobile am utilizat Ionic pentru structurarea și scrierea codului de pe partea de client în limbaj JavaScript precum și  definirea structurii și proprietăților interfețelor prin CSS și HTML.  Pentru asigurarea persistenței datelor în aplicație precum și pentru oferirea unui mediu sigur pentru utilizator am folosit baza de date de tip NoSQL stocată în cloud – Firebase –  precum și o bază de date locală pentru lucrul offline – SQLite. În continuare voi prezenta schema arhitecturală a aplicației și legăturile dintre principalele componente existente.

În containerul galben se pot observa cele două baze de date amintite mai sus. Prin intermediul datelor obținute din Firebase, aplicația mobilă creează și gestionează baza de date locală, dar în același timp când există nevoia de sincronizare, această operație se execută și în sens invers, de la aplicație prin interogarea bazei de date locale către baza de date din cloud. Astfel, utilizatorii pot folosi aplicația pe oricâte dispozitive mobile doresc, sincronizarea efectuându-se într-un mod transparent față de aceștia.

Putem observa componenta Web din schema arhitecturală care reprezintă Aplicația Web de gestionare a modulelor. Această aplicație are rolul de a insera date în baza de date din cloud în momentul în care se dorește adăugarea de noi module, lecții, întrebări sau conținut. Această componentă are doar rol de coordonare și nu este vizibilă utilizatorului aplicației ci doar administratorului pentru gestiunea acesteia.

În cele din urmă, în schemă sunt reprezentați clienții aplicației mobile (utilizatorii) care fac uz de componentele amintite mai sus, pentru care implementarea și structurarea acestora este total ascunsă. Datorită acestui mod de structurare a întregului sistem dezvoltat, clienții primesc date în timp real, iar progresul acestora în aplicație este sincronizat permanent.

Diagrame UML

Pentru o reprezentare cât mai clară a aplicației mobile dezvoltate, am proiectat diagrama cazurilor de utilizare, diagrama de clase detaliată, diagrama de stare pentru entitatea Test, diagrama bazei de date precum și diagrama de secvențe pentru entitatea Test.

Diagrama cazurilor de utilizare

Pentru descrierea generală a sistemului și a modului în care acesta va fi utilizat am dezvoltat diagrama cazurilor de utilizare prin care putem observa acțiunile utilizatorilor în cadrul aplicației pe diferitele ramuri existente precum și cazurile în care utilizatorul poate ajunge folosind aplicația.

La intrarea în aplicație, utilizatorul are posibilitatea de a se autentifica prin metoda standard cu email și parolă sau poate alege autentificarea prin una dintre rețelele de socializare integrate (Facebook, Twitter, Google+). După autentificarea reușită a utilizatorului, acesta poate alege să înceapă parcurgerea lecțiilor, să își administreze contul sau să înceapă un joc de tip quiz.

În cazul în care utilizatorul alege să parcurgă o lecție, după citirea efectivă a bazei teoretice acesta este îndrumat către susținerea unui test pe baza căruia să-și testeze cunostințele acumulate. Finalizarea testului se poate termina cu un rezultat pozitiv sau cu unul negativ în funcție de corectitudinea răspunsurilor acordate.

În cazul în care utilizatorul dorește să-și administreze contul, acesta poate să își modifice parola existentă sau email-ul, dar poate să verifice și statisticile calculate în funcție de progresul acestuia.

Mai mult, dacă utilizatorul alege să înceapă un joc de tip quiz, acesta este îndrumat spre alegerea unui nivel de dificultate, apoi spre începerea efectivă a jocului. În cazului unui rezultat pozitiv la terminarea jocului, acesta primește un anumit număr de puncte.

Diagrama de clase detaliată

În cadrul aplicației am avut nevoie de mai multe clase pe baza cărora am dezvoltat funcționalitatea. Acestea se regăsesc în următoarea diagramă, reprezentând diagrama de clase detaliată, împreună cu funcțiile și atributele fiecăreia.

La prima vedere, se poate observa în cadrul acestei diagrame că există relații strânse între clasele existente. Fiecare modul poate conține una sau mai multe lecții pe care utilizatorul le poate parcurge. Pentru crearea unei experiențe diferite, fiecare lecție prezintă mai multe obiecte de tip quiz în care rezidă mai multe întrebări. Utilizatorul deține obiecte de tip progres, unde există informații în legătură cu traseul acestuia în aplicație.

Diagrama de stare pentru entitatea Test

Următoarea diagramă, reprezintă diagrama de stare pentru entitatea Test prin care se definesc un număr finit de stări pe care utilizatorul le întâlnește în timpul parcurgerii efective a testului.

În cadrul parcurgerii unui quiz, această entitate trece prin mai multe stări până să ajungă în starea finală. Ințial, când utilizatorul începe testul, se vor încarca întrebările specifice testului început. În momentul în care testul este pregătit, se vor servi întrebările către utilizator, iar testul ajunge în starea de execuție unde clientul răspunde efectiv la întrebări.  În momentul în care aplicația ajunge în starea în care nu mai există întrebări, testul este finalizat.

Diagrama bazei de date

În următoarea diagramă, voi prezenta structura bazei de date relațională detaliată, evidențiind relațiile dintre entități precum și atributele fiecărei entități în parte. Prin această diagramă se pot înțelege și relațiile de business logic și modul în care aplicația gestionează datele.

Tabela MODULES reprezintă o unitate de tip container dacă este privită ca entitate de business și reprezintă cea mai mare unitate existenta în care rezidă lecțiile. După cum se poate observa și în diagramă, această tabelă conține câmpurile id, title, subtitle, imageBase64 și prevKey.

Tabela LESSONS reprezintă a doua entitate ca mărime și este folosită pentru păstrarea informațiilor generale despre o lecție în aplicație. Această tabelă conține câmpurile id, title, description, position, prevKey și cheia externă moduleId, prin care se identifică apartenența unei lecții în cadrul unui modul.

În continuare, tabela CONTENT este containerul în care rezidă efectiv bucăți din conținutul lecțiilor. O înregistrare în cadrul acestei tabele poate reprezenta un text, o imagine sau o bucată de cod. Câmpurile definite în această tabelă sunt id, type, text, image și cheia externă lessonId, prin care se reprezintă legătura și apartenența conținutului la o lecție.

Cu ajutorul tabelei QUESTION sunt construite întrebările pe baza cărora se construiesc testele. Pentru crerea unei structuri ușor de gestionat și în aplicație am considerat ca fiind necesare următoarele câmpuri: id, question, correctAnswer, answer1, answer2, answer3, answer4 precum și lessonId, cheia externă către tabela lessons.

În cele din urmă, prin tabela PROGRESS se reprezintă explicit informațiile despre progresul utilizatorului în cadrul unei lecții. Aceste informații sunt folosite mai departe în aplicație pentru operații și computații complexe. Câmpurile existente în această tabelă sunt id, status, score, quizAttempts, quizFailed, quizPassed, moduleId și lessonId, cheia externă pentru legătura cu tabela LESSONS.

Diagrama de secvențe pentru acțiunea Test

În următoarea diagramă voi evidenția relațiile dintre client și bazele de date în cadrul acțiunii Test.

În prima instanța, clientul invocă începerea lecției printr-o interogare către baza de date locală, precum și trimiterea unei notificări către baza de date din cloud, cum că o lecția a fost începută. În tot acest timp, clientul așteaptă și primește de la baza de dată locală întrebările specifice lecției începute. După parcurgerea efectivă a testului, clientul trimite către cele două baze de date, entitățile actualizate în urma parcurgerii testului.

Implementarea aplicației

Alegerea platformei de dezvoltare

În cadrul alegerii platformei de dezvoltare, am pus în balanță mai multe elemente decisive precum: performanță, ușurința în dezvoltare, aspectul,  portabilitatea, precum și nivelul de noutate al platformei folosite. În urma acestui proces, am decis să folosesc framework-ul Ionic pentru dezvoltarea aplicației mobile.

Aplicația mobilă dezvoltată se consideră a fi hibridă, datorită combinării a mai multor tehnologii precum AngularJS (librărie Javascript), HTML5 și CSS, precum și Cordova, pentru accesarea funcțiilor native ale dispozitivului mobil.  Această proprietate a aplicației mobile de a fi hibridă oferă posibilitatea compilării acesteia pentru sistemul de operare Android sau pentru sistemul de operare iOS, fără necesitatea modificării aplicației.

În plus, performanța oferită de către aplicația hibridă nu este cu mult diferită față de o aplicație nativă, atât timp cât funcțiile telefonului nu sunt folosite pentru operații foarte complexe sau nivelul de date încărcate în aplicație nu este foarte mare. Acest subiect este dezbătut frecvent de către marile companii în momentul în care se alege opțiunea de dezvoltare a unei aplicații mobile. În ultimul timp, datorită actualizărilor tot mai frecvente ale tehnologiilor de creare de aplicații mobile hibride și a creșterii performanței de execuție pentru Javascript, acestea tind să aleagă această variantă. În viitor se așteaptă că aceste tehnologii să se maturizeze complet, iar diferența dintre nativ și hibrid să fie aproape nesemnificativă.

Mai mult, datorită dezvoltării interfeței cu HTML5 și CSS3, aspectul aplicației poate fi spectaculos. Poți dezvolta o aplicație hibridă care arată și răspunde mai bine decât o aplicație nativă, utilizând elementele oferite de către Ionic ca și componente de sine stătătoare precum: liste, butoane, meniuri, etc.

Portabilitatea este unul din cele mai vizate aspecte în momentul alegerii unei astfel de aplicații, datorită posibilității de a o folosi pe mai multe sisteme de operare fără necesitatea modificării acesteia.

Un alt aspect foarte important care m-a făcut să aleg Ionic este comunitatea foarte puternică și activă care oferă soluții foarte rapide și solide la orice problema apărută, în cel mai scurt timp, precum și o bogată librărie de plugin-uri și o interfață de linie de comandă foarte intuitivă, ușor de folosit și instalat.

Alegerea si implementarea bazei de date

În vederea alegerii bazei de date folosite pentru dezvoltarea aplicației mobile am avut în vedere mai multe aspecte decisive după cum urmează: performanța, scalabilitatea, integrarea cu Ionic și siguranța datelor. În urma acestor criterii, am comparat mai multe soluții existente pe piață (CouchBase, Firebase, Cordova SQLite, Google Cloud), care s-ar fi putut potrivi pentru soluția dezvoltată. În final soluția cea mai potrivită la care se pretează aplicația mobilă a fost alegerea a două baze de date, Firebase și Cordova SQLite.

Decizia de a alege două baze de date se bazează pe oferirea posibilității utilizatorului de a folosi aplicația mobilă atunci când are acces la internet precum și atunci când internetul este oprit sau conexiunea a fost întreruptă, în timp ce acesta o folosea. Acest lucru este posibil datorită Firebase, care este o bază de date de tip NOSQL, accesată online și găzduită de către furnizor, precum și un Backend-As-A-Service și Cordova SQLite care este baza de date de tip SQL generată pe dispozitiv cu ajutorul Cordova, de unde aplicația interoghează datele foarte rapid.

Firebase este baza de date folosită pentru servirea datelor către aplicație, sincronizarea datelor, managementul utilizatorilor în aplicație precum și pentru managementul progesului utilizatorilor în aplicație. Pe de altă parte, SQLite este baza de date locală care se ocupă cu servirea datelor către utilizator, servirea datelor către Firebase, precum și pentru gestiunea operațiilor făcute fără conexiune la internet în cadrul aplicației.

Cele două baze de date sunt sincronizate automat, periodic, când utilizatorul are acces la internet și se detectează existența diferențelor între cele două. Acest eveniment se declanșează în momentul logării utilizatorului în aplicație. În acel moment se face o interogare către Firebase pentru utilizatorul logat, de unde se cere câmpul “hasChanges”. În cazul în care acest câmp este evaluat pozitiv iar baza de date locală există, se va face o interogare pentru cererea tututor datelor actualizate iar  baza de date locală își va actualiza toate câmpurile în oglindă cu rezultatele obținute din interogarea către Firebase. În cazul în care baza de date locală nu există, aceasta va fi creată automat în oglindă cu datele primite din interogarea online. Acest lucru facilitează utilizarea aplicației atât în mediul online cât și în mediul offline, precum și posibilitatea utilizatorului de a-și păstra datele sau progresul făcut în aplicație în cazul în care își schimbă dispozitivul mobil.

Mai mult, în timp ce utilizatorul folosește aplicația fără internet, toate modificările făcute în baza de date locală sunt dublate către baza de date online. Evident, din cauza lipsei conexiunii, aceste modificări nu pot fi făcute, dar în schimb acestea sunt adăugate într-o coadă prioritizată, care va fi executată în momentul în care conexiunea la internet este restabilită. În acest mod, sincronizarea dintre cele două baze de date este menținută constant în ambele sensuri (de la baza de date locală către cea online și invers), fără a afecta în vreun fel performanța sau acțiunile făcute de utilizator în aplicație.

În plus, Firebase oferă un sistem de analiză și statistici cu privire la utilizarea aplicației. Acesta înregistrează automat evenimente declanșate, proprietățile afectate, precum și posibilitatea ascultării evenimentelor personalizate care contează pentru creatorul soluției. Mai mult, creatorul aplicației are o viziune clară asupra datelor, utilizatori activi, demografie, etc. Această funcționalitate oferită de către Firebase îți permite să înțelegi cum folosesc utilizatorii aplicația, în ce pagini stau cel mai mult, precum și timpul total petrecut în aplicație.

Structura bazei de date online Firebase

Datorită naturii NoSQL a bazei de date online (Firebase), mecanismul de stocare și interogare a datelor din baza de date este diferită față de cea SQL. Acest tip de bază de date este folosit predominant în big data precum și în aplicații în timp real. În cadrul aplicației dezvoltate, datele sunt descrise sub formă de JSON (Javascript Object Notation), care conține perechi de cheie-valoare, care pot fi șiruri de caractere, numere sau alt obiect.

Firebase oferă o interfață intuitivă și ușor de utilizat, de unde datele pot fi modificate în timp real. Nu este nevoie să se reîmprospăteze pagina pentru vizualizarea datelor actualizate.

Problema apare în momentul structurării bazei de date de tip NoSQL. Acest tip de stocare este diferit și necesită denormalizarea datelor pentru o performanță sporită a interogărilor, precum și pentru o accesare mult mai facilă.

În cadrul aplicației, structura bazei de date NoSQL conține două mari noduri legate de nodul principal: DATA și USERS. După cum indică și numele, primul nod (echivalent oarecum cu o tabelă în SQL) semnifică partea de date din aplicație și este structurat în patru noduri, după cum urmează: MODULES, LESSONS, CONTENT, QUESTION iar al doilea nod legat de nodul principal USERS, conține noduri generate automat în momentul autentificării utilizatorului în aplicație pentru prima dată, în funcție de modul în care acesta s-a logat. În cazul autentificării cu email și parolă, nodul generat va fi unul aleator, de lungime variabilă prin care se asigura unicitatea. În cazul autentificării cu una din cele trei rețele de socializare (Twitter, Facebook sau Google) nodul generat va fi unul de formă denumireReteaSocializare:randomGen unde denumireReteaSocializare este denumirea rețelei de socializare sub care utilizatorul a făcut autentificarea iar randomGen reprezintă o succesiune de cifre generate automat, pentru asigurarea unicității.

Nodurile din cadrul nodului DATA conțin informații cu privire la modulele existente în aplicație și sunt adăugate cu ajutorul aplicației web de gestiune a modulelor aplicației (punctul 4).

Conținutul nodurilor din cadrul nodului USERS reprezintă informațiile despre utilizator, precum: nume, provider, progres și flag-ul hasChanges. În cazul autentificării cu email și parolă, nodul nume reprezintă șirul de caractere extras din email de dinaintea semnului @ iar nodul provider va fi password. În cazul autentificării cu una din rețelele de socializare, același nod reprezintă numele primit de la respectiva rețea în momentul autentificării, iar nodul provider va fi denumirea rețelei cu care utilizatorul s-a autentificat.  

Nodul progres în schimb, reprezintă cel mai important nod. Acesta conține datele despre progresul utilizatorului în aplicație pentru fiecare lecție. În cadrul fiecărei lecții de sub nodul de progres, există moduleId, quizAttempts, quizFailed, quizPassed, score și status. Nodul moduleId reprezintă modulul din cadrul căruia lecția face parte, quizAttempts reprezintă numărul de încercări ale utilizatorului în cadrul quiz-ului, quizFailed și quizPassed reprezintă numărul încercărilor eșuate respectiv reușite, score reprezintă cel mai bun scor obținut de către utilizator din totalul încercărilor reușite, iar status reprezintă starea lecției. Starea lecției este considerată neterminată atunci când nodul status este 1, iar starea este terminată atunci când nodul status este 2.

 Structura bazei de date locale SQLite

După cum am specificat mai sus, baza de date locală SQLite este creată în oglindă cu baza de date online Firebase la prima autentificare a unui utilizator și actualizată frecvent atunci când apar modificări, sau în momentul în care un alt utilizator se autentifică pe același dispozitiv mobil pentru păstrarea datelor corecte, specifice utilizatorului.

Funcția getData() din cadrul serviciului lessonsService prezentată în imaginea de mai sus, arată exact procedeul de pregătire a datelor extrase din baza de date Firebase pentru crearea tabelelor SQL. Funcția adaugă progresiv într-un vector promisiuni de rezolvare a datelor cerute și returnează promisiunile rezolvate pentru garantarea integrității datelor în momentul finalizării apelului.

După cum se poate observa, dacă revenim la structura creată în Firebase, lipsește cererea pentru nodul care reprezintă progresul. Acest lucru se datorează unicității acestui nod, personalizat pentru fiecare utilizator în parte. Dat fiind acest fapt, progresul utilizatorului este gestionat într-un serviciu separat.

În tabela MODULES sunt reprezentate datele ce gestionează modulele. Această tabelă are rolul de container pentru viitoare lecții și conține următoarele câmpuri: id, title, subtitle, imageBase64 și prevKey. Câmpurile id, title și subtitle sunt auto-explicative în timp ce imageBase64 reprezintă șirul de caractere în Base64 pentru imaginea modulului, iar prevKey reprezintă legătura cu modulul anterior pentru posibilitatea implementării unui sistem progresiv de module.

Tabela LESSONS conține datele de identificare ale lecțiilor. Fiecare înregistrare reprezintă o lecție din cadrul unui modul. De asemenea această tabelă reprezintă un container pentru conținutul ce urmează a fi adăugat și conține următoarele câmpuri: id, title, description, position, prevKey, moduleId. Câmpurile id, title, description și prevKey sunt auto-explicative datorită denumirii și explicațiilor anterioare, iar position reprezintă poziția lecției în cadrul modulului și moduleId este cheia externă către tabela MODULES.

În continuare, tabela CONTENT reprezintă conținutul propriu-zis al unei lecții. Acest conținut poate fi text sau imagine. Mai mult, textul poate fi interpretat ca paragraf sau ca o bucată de cod. Tabela în cauza conține următoarele câmpuri: id, type, text, image, lessonId. În funcție de tipul de conținut adăugat, câmpurile text și image alternează și niciodată nu pot exista în același timp într-o înregistrare.

În cele din urmă, în cadrul tabelei QUESTION se vor crea înregistrări ce reprezintă întrebări din cadrul unei lecții, pe baza cărora se construiește setul de întrebări aferent lecției. Pentru acest lucru, tabela conține următoarele câmpuri: id, question, correctAnswer, answer1, answer2, answer3, answer4, lessonId. Câmpul correctAnswer reprezintă dublura unuia dintre cele patru răspunsuri, pentru posibilitatea verificării răspunsului corect la întrebare.

Separat de tabelele prezentate mai sus, tabela PROGRESS reprezintă progresul utilizatorului în cadrul lecțiilor din aplicație și  nu se referă la datele lecțiilor propriu-zise. Această tabela conține: id, lessonId, status, score, quizAttempts, quizFailed, quizPassed, moduleId. În cadrul acestei tabele se creează o înregistrare nouă în momentul accesării unei lecții pentru prima dată și se actualizează datele în momentul finalizării unui test cu succes.

Implementarea interfeței

Pentru implementarea interfeței și stabilirea aspectului ecranelor am creat design-ul în Sketch, ca apoi să export fiecare ecran în Zeplin. Datorită acestei soluții web de găzduire a părților de design, implementarea propriu-zisă a interfeței în cadrul aplicației prin intermediul HTML5 și CSS3 a devenit mult mai ușoară, existând posibilitatea extragerii paletelor de culori, dimensiunilor containerelor, iconițelor,etc.

Pentru construirea efectivă a paginilor HTML + CSS, nu am folosit nicio librărie externă, ci toate containerele HTML  împreună cu atributele CSS ale acestora au fost personalizate pentru un aspect cât mai aproape de o aplicație nativă. Mai mult, interfața este full-responsive (răspunde corect la modificările dimensiunilor ecranelor dispozitivelor mobile), adaptată pentru orice ecran, atât pentru telefoane cât și pentru tablete, atât în poziția portrait cât și în landscape.

În cadrul descrierii claselor pentru containerele și elementele de HTML realizate în CSS, am modularizat clase pe cât posibil pentru o modificare ulterioară ușoară, dar și pentru evitarea conflictelor pentru clase sau proprietăți moștenite. Fiecare pagină din aplicație deține un container separat, astfel încât pagina de module este descrisă sub clasa .modulesWrapper, pagina de lecții sub clasa .lessonsWrapper s.a.m.d. În plus, am abordat scrierea în linie a proprietăților pentru clasă, elemente sau id-uri pentru o regăsire mult mai ușoară și pentru o vizualizare totală în momentul în care complexitatea crește foarte mult.

Implementarea aplicației web pentru gestionarea modulelor

În urma creșterii bruște în complexitate a datelor din aplicație, am considerat necesară dezvoltarea unei aplicații web externe pentru gestionarea modulelor, lecțiilor, conținutului și întrebărilor ce rezidă în baza de date a aplicație. Dat fiind faptul că adăugarea manuală în baza de date online este mult prea neprofesională, cât și foarte costisitoare în materie de timp, această soluție răspunde cu succes la problema apărută și rezolvă problema actualizărilor lecțiilor când acest lucru este necesar.

Pentru  dezvoltarea și implementarea acestei soluții să fie făcută cât mai rapid, fără să afecteze timpul de dezvoltare al aplicației mobile, am generat un proiect Ionic gol pe care l-am modificat în așa fel încât să folosesc doar partea de AngularJS.

Diferit față de aplicația mobilă, pentru creșterea eficienței, scăderea timpului de dezvoltare și păstrarea unui aspect plăcut, am folosit pentru implementarea interfeței Bootstrap 3, pentru crearea formularelor cu ușurință.

Această aplicație este de mici dimensiuni, rulează pe un server local și se conectează la baza de date doar în momentul adăugării datelor. Interfața este relativ simplă: conține patru containere sugestiv denumite (modules, lessons, content, quizzes).

Foarte ușor de folosit, utilizatorul acestei aplicații trebuie doar să apese pe unul din containere, iar un modal reprezentând un formular se va deschide. În urmă completării acelui formular acesta finalizează acțiunea și baza de date online este actualizată în timp real iar flag-ul hasChanges (prezentat în cadrul secțiunii 2.1) se va actualiza cu valoarea ‘true’ pentru toți utilizatorii.

Din cauza limitărilor impuse de către baza de date, precum și din cauza limitărilor impuse de AngularJS, cazurile speciale sunt tratate după cum urmează:

Imaginile încărcate de utilizator pentru module sau conținut, sunt convertite în formatul Base64, înainte de încărcare cu ajutorul directivei angular-base64-upload.

Bucățile de cod adăugate în cadrul secțiunii CONTENT necesită schimbarea tag-urilor < și > cu &lt; respectiv &gt; iar în cadrul aplicației este necesară crearea unui filtru prin care AngularJS este anunțat că conținutul adăugat este sigur și poate fi afișat ca atare. Mai mult, pentru afișarea bucăților de cod formatate și colorate precum în cadrul unui editor, am folosit librăria Highlight.js.

Funcționalități implementate

În zilele noastre, produsele software se dezvoltă foarte rapid, actualizările sunt aproape zilnice și utilizatorul consideră natural ca aplicația să funcționeze fără nicio problemă. Din punctul de vedere al dezvoltatorului, acest lucru ar trebui să fie considerat o prioritate, chiar dacă nivelul de muncă și complexitate în tratarea și rezolvarea erorilor este unul imens.

De cele mai multe ori utilizatorul se așteaptă ca o aplicație să funcționeze ca oricare altă aplicație pe care o are instalată pe dispozitivul mobil. Acest lucru a împins dezvoltarea aplicațiilor mobile spre o standardizare forțată. Dezvoltatorul nu își poate permite să nu respecte standardele deoarece acest lucru duce la neutilizarea aplicației, implicit la pierderea utilizatorilor în cazul în care aceștia nu sunt mulțumiți.

Dat fiind acest concept de standardizare, aplicația mobilă dezvoltată în cadrul licenței încearcă pe cât posibil să respecte aceste standarde, implementând diferite funcționalități necesare sau suplimentare pentru îmbunătățirea acesteia.

Autentificare cu platforme externe

Autentificarea utilizatorilor în aplicație cu platforme externe cunoscute și sub numele de social login, se referă la înregistrarea și autentificarea utilizatorilor pe baza credențialelor oferite de rețelele de socializare cum ar fi Google+, Twitter, Facebook, etc. Mai mult, acest tip de autentificare este considerat a fi mult mai potrivit pentru dezvoltatori, datorită datelor demografice și statistice oferite în momentul autentificării.

În plus, social login-ul oferă un mecanism stabil de autentificare și autorizare prin care aplicația poate cere utilizatorului diferite drepturi asupra rețelei de socializare cu care se autentifică. Acest lucru simplifică cu mult clasicul proces de autentificare cu nume de utilizator și parolă, adeseori greoi și dezagreat de mulți dintre utilizatori.

În același timp, diferite studii au arătat că autentificarea clasică cu utilizator și parolă este ineficientă, din cauza datelor false introduse la crearea conturilor, pierderea datelor de conectare sau chiar refuzul înregistrării în prima fază.

În cadrul aplicației dezvoltate pentru licență, am utilizat sistemul de autentificare integrat în soluția Firebase. Utilizând această funcționalitate, reușesc cu ușurință să autentific utilizatorii atât în modul clasic cât și cu platforme de socializare, utilizând numai cod în partea de client. Mai mult, Firebase returnează pe dispozitivul mobil al clientului datele cu care s-a făcut autentificarea, ușurând personalizarea datelor pentru utilizator, oferă un identificator unic pentru care garantează unicitatea și posibilitatea de setare de restricții și drepturi de acces în cadrul aplicației.

Pentru că autentificarea de tip social login să poată fi posibilă, este necesară o configurare personalizată în cadrul fiecărei rețele de socializare prin care respectiva rețea recunoaște aplicația mobilă și permite cererea datelor în momentul autentificării. În aplicația mobilă dezvoltată, am integrat autentificarea cu Facebook, Twitter și Google+, în așa fel încât utilizatorul se poate autentifica în cel mai scurt timp. Dat fiind faptul că dispozitivul pe care rezidă aplicația este unul mobil și nu există conceptul de pop-up, a fost necesară adăugarea unui plug-in de Cordova (InAppBrowser), prin care dispozitivul este notificat în momentul în care se încearcă apelul funcției window.open() și în loc de pop-up se deschide o pagină web în cadrul aplicației.

În cazul în care încercarea de autentificare a utilizatorului ridică o eroare, Firebase gestionează acest lucru printr-o serie predefinită de erori ușor de gestionat pe partea de client. Cele mai frecvente sunt: EMAIL_TAKEN, INVALID_CREDENTIALS, INVALID_EMAIL, NETWORK_ERROR.

Particular, m-am axat pe gestiunea erorii de tip NETWORK_ERROR deoarece utilizatorul al cărui cont nu este cache-uit în aplicație se poate autentifica numai dacă există conexiune la internet. Acest fapt se datorează necesității de păstrare a integrității și corectitudinii datelor din aplicație. Dacă un utilizator care înregistrează progres pe un dispozitiv iar apoi se conectează la același cont, pe alt dispozitiv fără internet, progresul acestuia nu poate fi actualizat, iar acest lucru este catastrofal.

Mai mult, pentru o autentificare transparentă și păstrarea sesiunii utilizatorului între perioadele de utilizare, am setat perioada sesiunii active până la 24 de zile, în care userul nu este nevoit să refacă operațiunea de autentificare. Acest lucru este posibil cu ușurință din interfața Firebase, secțiunea Login&Auth.

Implementarea sistemului de module

Modulul reprezintă unitatea de tip container din cadrul aplicației în care se află lecțiile. Modulele pot fi parcurse numai progresiv. Un modul deblocat este acel modul unde cel puțin o lecție poate fi începută, iar cercul de progres este prezent în colțul dreapta sus al acestuia. Un modul blocat este acel modul în care toate lecțiile sunt blocate și imaginea specifică unui modul blocat (lacăt) este prezența peste imaginea modulului.

În cadrul aplicației, modulul este reprezentat sub forma unui obiect cu mai multe proprietăți decât cele prezente în baza de date. Acest lucru este necesar pentru construirea corectă și coerentă a interfeței precum și pentru logica prezentă. În plus față de proprietățile existente în baza de date, în cadrul obiectului modul mai există următoarele proprietăți calculate dinamic: lessons (vector de obiecte de tip lecție), finishedLessons (întreg fără semn, reprezentând numărul de lecții finalizate în cadrul modulului) și count (întreg fără semn, reprezentând numărul de lecții din cadrul modulului).

Mai mult, un modul este finalizat numai în momentul în care toate lecțiile din cadrul acestuia sunt parcurse și finalizate cu succes cel puțin o dată și cercul de progres reprezentat în colțul dreapta sus este la 100%. În momentul în care un modul este finalizat, modulul imediat următor este deblocat iar prima lecție poate fi începută.

Implementarea sistemului de lecții

Lecția, este unitatea de bază din cadrul aplicației dezvoltate. Toată logica aplicației gravitează în jurul conceptului de lecție, care reprezintă unitatea de învățare unde există conținut relevant. După cum am specificat la descrierea bazei de date, lecțiile se parcurg progresiv, iar o lecție nu poate fi începută până când lecțiile precedente nu sunt finalizate cu succes. Dat fiind acest fapt voi explica în continuare procesul prin care aplicația gestionează lecția, dar și procesul prin care utilizatorul parcurge o lecție și o finalizează printr-un test.

În cadrul aplicației, lecția este reprezentată sub forma unui obiect care conține pe lângă proprietățile extrase din baza de date, următoarele proprietăți generate dinamic necesare atât pentru interfață cât și pentru construirea logicii: progress (obiect de tip progress în care rezidă informații legate de progresul utilizatorului în cadrul lecției) și badge (șir de caractere, reprezentând tipul de medalie câștigat în funcție de scorul obținut în aplicație). Proprietatea de tip badge poate fi de patru tipuri: inactiveBadge, bronzeBadge, silverBadge și goldBadge. Aceste valori posibile reprezintă și denumirile claselor de CSS prin care medalia potrivită este afișată utilizatorului în interfață.

O lecție este finalizată în momentul în care utilizatorul răspunde corect la mai mult de jumătate din întrebările existente în test și finalizează testul. În acel moment, lecția următoare este deblocată automat și utilizatorul o poate parcurge. Mai mult, cercul de progres din cadrul modulului este actualizat.

Pagina în care lecția este prezentată este construită pe bază de elemente relativ simple, ușor de înțeles, fără aglomerări inutile de elemente care nu îi sunt necesare utilizatorului. Această pagină conține în partea de header, titlul lecției, precum și o scurtă descriere. În corpul paginii se află secțiunea efectivă a lecției, unde pot exista împreună trei tipuri de elemente: text, imagine, cod. Bucățile de cod sunt prezentate într-un mod interactiv, aliniate și subliniate precum într-un editor de cod. În cadrul aceleiași pagini mai există un buton special, intuitiv, care conduce utilizatorul către test.

Odată apăsat acest buton, utilizatorului îi este deschis un modal de confirmare pentru începerea testului împreună cu alte informații relevante despre progresul deja existent, cum ar fi numărul de încercări anterioare și cel mai bun scor. În cazul confirmării modalului, utilizatorul este trimis către test, pentru unde are 5 minute să îl finalizeze.

Implementarea sistemului de teste

În momentul în care utilizatorul confirmă modalul de începere a testului, aplicația interoghează baza de date și cere un număr fix de cinci întrebări aleatoare din totalul întrebărilor pentru lecția respectivă. După ce interogarea este finalizată și promisiunea că datele au ajuns în context este finalizată, timpul începe să se scurgă și utilizatorul poate începe testul efectiv.

Utilizatorului îi este prezentată în partea de antet întrebarea propriu-zisă, numărul întrebării și ceasul care indică timpul rămas. În corpul paginii sunt prezentate răspunsurile posibile pentru întrebarea curentă, precum și instrucțiuni privind folosirea punctelor obținute în secțiunea Game Quiz pentru afișarea răspunsului corect. În plus, un buton special, sub formă unui semn de întrebare este așezat cu o poziție absolută peste partea de antet și partea de corp, reprezentând funcționalitatea oferită utilizatorului pentru indicarea răspunsului corect în cazul în care acesta îl apasă.

În cazul în care timpul pe care utilizatorul îl are la dispoziție s-a scurs, aplicația îl va notifica pe acesta că testul curent nu a fost terminat și implicit este o încercare eșuată. În modalul prezentat utilizatorului sunt prezente două butoane care reprezintă posibilitatea de refacere a testului sau abandonarea acestuia și întoarcerea către pagina de module.

Pe de altă parte, utilizatorul poate trece testul dacă acesta răspunde la toate întrebările înainte ca timpul afișat să se scurgă și răspunde corect la cel puți 50% + 1 din întrebările existente în test. În acest caz, aplicația calculează scorul curent. Scorul curent se calculează prin formula correctAnswers * remainingSeconds unde correctAnswers reprezintă numărul de răspunsuri corecte din cadrul testului iar remainingSeconds reprezintă numărul de secunde rămase în momentul în care testul a fost finalizat. În acest caz favorabil, aplicația verifică dacă utilizatorul a obținut un scor mai bun decât în încercările anterioare (dacă există) și în acest caz îi setează cel mai bun scor ca fiind cel curent. După finalizarea testului, utilizatorul are opțiunea de a continua seria de lecții prin trimiterea acestuia către pagina principală de module, unde îi este atribuită o medalie în funcție de scorul obținut, cercul de progres este actualizat, lecția este setată ca fiind finalizată, iar următoarea lecție este deblocată.

Implementarea sistemului de Quiz Game

Pentru crearea unui efect mai dinamic al aplicației asupra utilizatorului, am considerat de cuviință să implementez un sistem de Quiz Game, unde utilizatorul poate să își testeze cunoștințele necondiționat, în funcție de pregătirea sa, dar să și câștige puncte pe care le poate folosi mai departe în procesul de învățare standard din cadrul modulelor.

Sistemul de teste existent în această secțiune este identic cu cel din procesul de învățare standard, dar la sfârșitul testului în loc de obținerea unui scor, acesta obține un număr de puncte.

Quiz Game-ul se desfășoară pe trei nivele de dificultate (Beginner, Intermediate, Advanced). În funcție de nivelul de dificultate ales, utilizatorului îi vor fi prezentate mai multe întrebări în cadrul testului, precum și recompensa în puncte aferentă nivelului de dificultate va fi diferită.

Mai mult, utilizatorul primește puncte de experiență după finalizarea testelor pentru creșterea nivelului acestuia.

Suport aplicație mobilă fără internet

Datorită sistemului integrat de sincronizare automată oferit de soluția Firebase precum și datorită bazei de date locale SQLite, utilizatorul se poate bucura de o experiență completă atât în mediul online, cât și în mediul offline. După cum am amintit în capitolele anterioare, conexiunea la internet este necesară doar în cazul în care utilizatorul se autentifică în aplicație pentru prima dată, sau contul cu care utilizatorul se autentifică este diferit față de cel cu care se autentifică de obicei, pentru asigurarea corectitudinii progresului.

În cazul în care sesiunea curentă a utilizatorului a expirat, aplicația verifică cache-ul, iar dacă acesta corespunde cu utilizatorul care încearcă să se autentifice, conexiunea la internet nu este necesară.

Mai mult, aplicația sincronizează frecvent datele din aplicație cu cele din baza de date online, ori de câte ori conexiunea la internet există.

Actualizarea datelor transparentă utilizatorului

Dat fiind faptul că aplicația dezvoltată este o aplicație de tipul M-Learning, este de la sine înțeles că actualizările acesteia vor fi foarte dese, datorită dezvoltării continue ale tehnologiilor prezentate. Acest fapt poate duce la stresarea utilizatorului, prin trimiterea frecventă de notificări prin care se cere actualizarea aplicației, precum și îngreunarea muncii dezvoltatorului, care va trebui să actualizeze frecvent aplicația în magazinele unde aceasta există.

Luând în calcul aceste posibilități, am considerat că actualizările datelor din aplicație să se facă transparent față de utilizator prin verificarea frecventă a datelor din aplicație cu datele de pe “server”. În cazul în care datele nu corespund, acestea vor fi actualizate fără ca utilizatorul să aibă cunoștință de acest lucru.

Sincronizarea datelor între dispozitive

Considerând faptul că utilizatorii își pot schimba frecvent dispozitivele mobile pe care lucrează, aplicația trebuie să sincronizeze progresul acestora la fiecare autentificare, într-un mod transparent față de aceștia. Acest lucru a fost implementat prin interogarea bazei de date online, ori de câte ori un utilizator se autentifică în aplicație sau în momentul în care aplicația web de gestionare a modulelor notifică toți utilizatorii că există modificări.

Gestionarea cazurilor de eroare

În anumite cazuri de utilizare ale aplicației, utilizatorul poate omite anumiți pași, iar aplicația nu poate finaliza procesul început. O gestiune coerentă și corectă a mesajelor de eroare este necesară pentru oferirea unui mediu plăcut utilizatorului. Cazuri precum completarea incorectă a unui formular, lipsa conexiunii la internet, conectarea cu date de autentificare greșite pot frustra utilizatorul în cazul în care aplicația nu îl notifica corespunzător. Considerând aceste cazuri am implementat mesaje interactive și intuitive prin care cel care folosește aplicația să înțeleagă situația și să o gestioneze cu ușurință.

 Testarea aplicației

Testare unitara

Pentru crearea și rularea testelor unitare am folosit Jasmine pentru descrierea testelor iar pentru rularea acestora am folosit Karma. În continuare voi descrie aceste două tehnologii.

Karma este un task runner care deschide o fereastră de browser și un server node în care dezvoltarea testelor se face rapid și agil. Karma oferă integrare continuă și refresh în timp real împreună cu plugin-urile de browser (Chrome, PhantomJS). Nu există moduri prestabilite cu privire la scrierea testelor. În esență, Karma lansează instanțe ale browser-ului ales, încarcă fișierele specificate și raportează rezultatele testului de la browser înapoi la terminal. Karma și fiecare dintre browsere utilizează serviciul karma ce rulează în terminal folosind socket.io. De fiecare dată când un test este rulat, Karma înregistrează statusul său, apoi decide ce țeste au eșuat și care dintre ele s-au realizat cu succes. Acest lucru face ca fiecare test să funcționeze nativ în fiecare browser fără necesitatea testării în mod individual. De asemenea, din moment ce serviciul Karma rulează pe un port și ține singur evidența browserelor, alte browsere și dispozitive se pot conecta cu ușurință, prin accesarea portului pe care se face broadcast.

Jasmine este limbajul de descriere al testelor ce oferă metode intuitive pentru descriere precum describe, it, expect, etc. Acest limbaj a devenit cea mai populară alegere în ceea ce privește testarea aplicațiilor Angular. Jasmine pune la dispoziție o serie de funcții și metode de verificare în vederea structurării testelor realizate. O suită de teste începe cu un apel al funcției globale describe, ce deține 2 parametri: un șir de caractere și o funcție. Șirul de caractere este de obicei un nume reprezentativ al suitei – ceea ce este testat. Funcția reprezintă un bloc de cod ce implementează suita. Specificațiile (specs) sunt definite prin apelarea funcției globale it, care, la fel ca describe, deține drept parametri un string și o funcție. O metodă de verificare în Jasmine reprezintă un assert, ce este, fie adevărat, fie fals. O specificație cu toate assert-urile adevărate, trece testul, în caz contrar, nu.  

Testare automata

Pentru identificarea erorilor din cadrul aplicației, precum și pentru ușurarea executării regresiilor din cadrul procesului de testare, am considerat necesar crearea unui framework de testare pentru aplicația mobilă folosind Appium și TestNG.  

Appium este un software care deschide un server node prin intermediul căruia se transmit informații (comenzi) unui dispozitiv mobil sau emulator. Este un instrument open-source pentru automatizarea aplicațiilor mobile, native și hibride pe platformele iOS și Android. Ceea ce este important este faptul că Appium permite realizarea testelor pentru mai multe platforme (iOS, Android), utilizând același API. Acest lucru permite reutilizarea codului între suitele de teste iOS și Android. Appium a fost conceput în vederea satisfacerii cerințelor de automatizare a aplicatiilor mobile.

TestNG este un framework de testare conceput în vederea simplificării unei game largi de cerințe de testare, de la unit testing (testarea unei clase, separate de celelalte), până la testarea integrată (testarea unor întregi sisteme alcătuite din numeroase clase, pachete și chiar framework-uri externe, cum ar fi serverele de aplicații). TestNG este inspirat din Junit și NUnit, dar aduce în plus noi funcționalități ce îl fac mai puternic și mai ușor de utilizat. Câteva dintre caracteristicile specifice TestNG sunt: faptul că suportă adnotări, folosește mai multe concepte specifice limbajului Java și programării orientate obiect, suportă testarea integrată a claselor (de exemplu, nu este necesară crearea unei noi instanțe de clasă pentru fiecare metodă de testare), suportă metode de testare dependente, testare paralelă și eșecul parțial. De asemenea, configurarea este flexibilă la rulare, iar plug-in-ul de API este flexibil.

Am structurat acest proiect de testare în mai multe pachete în așa fel încât să fie ușor de parcurs, înțeles și modificat. Principalele pachete sunt cases, flows, pages și util.  În cadrul pachetului cases, există clasele de test cu fiecare test case creat pentru aplicație. În cadrul pachetului flows, rezidă clase create pentru definirea unor pași repetitivi în aplicație. În pachetul pages am introdus clasele pentru fiecare pagină a aplicației de unde identific toate elementele dintr-o pagină. Iar în cele din urmă în pachetul util există diferite funcții ajutătoare precum regex-uri prin care reușesc să identific dinamic elemente din pagină.  

Utilizarea aplicatiei

Aplicația are rolul de a oferi utilizatorului o metodă interactivă de învățare a tehnologiei AngularJS, aplicația fiind astfel structurată pe capitole, fiecare capitol conținând o parte de teorie și o parte de teste, ce vor fi stocate într-o baza de date noSQL online precum și într-o bază de date locală.  În plus, aplicația va fi prezentată utilizatorului sub formă unui joc, pentru satisfacerea cerințelor acestuia cât și pentru sporirea dinamismului în timpul învățării.

Învățare de tip M-Learning

Conceptul de mobile learning (m-learning) nu datează de mult timp, însă rapiditatea dezvoltării tehnologiilor noi, a comunicațiilor wireless, precum și a telefoanelor mobile, a condus la îndreptarea atenției cercetătorilor din ce în ce mai mult către această metodă de învățare și dezvoltare, caracterizată prin rapiditatea utilizării, mobilitate, accesibilitate sporită. M-learning în niciun caz nu ține locul unui proces clasic și complet de acumulare a cunoștințelor, ci reprezintă o modalitate complementară de învățare, ce datorită caracteristicilor sale, este adoptată în ultimul timp din ce în ce mai mult și de către majoritatea tinerilor. Mai presus de dorința tinerilor de concepte noi, această metodă de învățare ar putea fi integrată și în procesele clasice de predare a cursurilor în cadrul instituțiilor de învățământ, cadrele didactice reușind astfel poate să aducă un plus de interactivitate materiilor predate, sporind interesul elevilor/studenților.

Dispozitivele hardware necesare utilizării unei astfel de aplicații sunt diverse și includ, pe lângă clasicele telefoane mobile, tablete, netbook-uri, etc, cu condiția ca formatul lecțiilor din cadrul aplicației să fie adaptabil oricărui dispozitiv, indiferent de tipul sau mărimea lui. Caracteristica principală a acestui tip de aplicații o reprezintă accesarea la orice moment de timp a informației dorite, acesta fiind poate printre cele mai importante motive pentru care tinerii înclină spre utilizare, având în vedere lipsa de timp cu care se confruntă din ce în ce mai mult în ultimul timp.

În ceea ce privește transmiterea informației, acest concept este mai complex decât pare, în sensul că există numeroase căi de transmitere a cunoștințelor: de exemplu pe cale vizuală/auditivă, prin filmulețe interactive, prezentări, fișiere audio, etc. Ca în orice domeniu, există bineînțeles și puncte slabe: multitudinea de dispozitive și caracteristici ale acestora poate face dificilă, uneori chiar imposibilă dezvoltarea unei aplicații unice, ce funcționează în mod optim pe toate sistemele. O altă piedică întâmpinată poate fi securitatea datelor sau mai bine spus lipsa sa, fapt ce se datorează lipsei standardelor comune a telefoanelor mobile.

La modul general, o aplicație de tip m-learning este necesar să respecte un set de reguli definite, precum:

Crearea unei interfețe intuitive – deși pare o sarcina ușoară, trebuie luate în considerare o serie de principii, în vederea respectării cu succes a acestei reguli. Eliminarea redundanței este un concept de multe ori trecut cu vederea și care astfel conduce la pierderea utilizatorilor. Redundanța se referă în principiu la multitudinea de modalități de a face practic același lucru, așadar funcționalități duplicat. Acest lucru poate conduce uneori la confuzie din partea utilizatorului, întrucât atunci când este pus în fața unui exces de alegeri, tinde să se piardă. Tot ceea ce este inclus în luarea unei decizii trebuie să conțină strictul necesar și nimic mai mult, utilizatorul ajungând astfel la o mai bună înțelegere a conținutului ce îi este transmis. O altă idee se referă la faptul că în timpul navigării prin aplicație, denumirile din cadrul acesteia trebuie să fie cât mai sugestive, reprezentative, iar elementele asemănătoare grupate împreună. Acest lucru limitează ceea ce utilizatorul este nevoit să preia în mod vizual de fiecare dată, ceea ce reprezintă un avantaj.

Diminuarea interacțiunilor utilizatorului cu aplicația – acest concept se leagă mult de cel mai sus prezentat, în ideea că o interfață ușor de utilizat conduce întotdeauna la o mai bună înțelegere de către utilizator a conținutului

Definirea în mod clar a grupului de utilzatori căruia i se adresează aplicația – acest concept este vital în dezvoltarea unei astfel de aplicații, întrucât nivelul de cunoștințe și aria de cunoaștere a utilizatorilor hotărăște posibilitatea utilizării sale.

Introducerea în aplicație

Aplicația dezvoltată reprezintă o platformă de învățare în mod interactiv a tehnologiei AngularJS. AngularJS este un framework open-source Javascript ce oferă un plus de ușurință în dezvoltarea aplicațiilor web, caracterizate astfel prin fluiditate și rapiditatea utilizării, motiv pentru care este una dintre cele mai bune alegeri în ceea ce privește aplicațiile web destinate dispozitivelor mobile.

Utilizatorul este inițiat în aplicație cu un scurt tutorial, ce îi formează în mod succint o idee în ceea ce privește aplicația pe care urmează să o acceseze. Cele trei slide-uri atrag în mod vizual utilizatorul, sporind curiozitatea acestuia pe măsură ce sunt parcurse. Cel de-al treilea oferă posibilitatea accesării aplicației. În cazul în care utilizatorul nu deține o conexiune la internet, aplicația îi va pune la dispoziție un mesaj de atenționare, menit să îl informeze că va avea nevoie de conexiune, cu scopul de a-și actualiza progresul în cadrul aplicației. După autentificare, utilizatorul nu mai are nevoie de internet în timpul utilizării.

Ulterior, utilizatorul este nevoit să se autentifice prin introducerea adresei de e-mail și a parolei aferente, având totodată opțiunea de a-și salva parola pe dispozitivul pe care este utilizată aplicația. De asemenea, în cazul în care nu dorește să își introducă credentialele, el se poate autentifica prin intermediul Facebook, Google+ sau Twitter. În situația în care utilizatorul accesează aplicația pentru prima dată și nu deține un cont și nu dorește nici autentificarea prin Facebook, Google+ sau Twitter, el are posibilitatea de a-și crea un cont nou. Astfel, el este invitat să introducă o adresă de email valabilă, precum și o parolă și confirmarea acesteia. Dacă din cauza neatenției, utilizatorul uită să bifeze opțiunea de acceptare a termenilor și condițiilor, este atenționat prin intermediul unui mesaj, că acest lucru este obligatoriu în vederea creării unui cont nou. Este posibil ca utilizatorul să acceseze această pagină din greșeală, el având deja un cont creat, caz în care are la dispoziție opțiunea de a reveni la pagina anterioara.

În cazul în care utilizatorul încearcă să își creeze un cont nou prin folosirea unei adrese de email deja existente, va primi un mesaj de atenționare și va trebui să utilizeze altă adresa, sau să se logheze pe pagina de start cu acest e-mail și parola potrivită.

Parcurgerea modulelor

Autentificarea cu succes introduce utilizatorul în aplicație, ce conține pe prima pagină meniul principal. Prima opțiune din cadrul meniului conduce la vizualizarea modulelor. Fiecare modul conține denumirea și progresul, în procente, ce se actualizează în mod dinamic, în funcție de cât a reușit utilizatorul să parcurgă cu succes din modulul respectiv. Dacă modulul curent nu este finalizat, nu se va putea accesa cel următor, acest lucru fiind pus în evidență de o iconiță reprezentativă cu un lacăt, în dreptul modulului.

Așadar, modulul în curs conține o serie de lecții teoretice, ce au drept scop punerea la dispoziție a unei baze teoretice privind tehnologia menționată. Progresul în ceea ce privește lecțiile din cadrul unui modul este reprezentat de o serie de iconițe sugestive astfel: în cazul în care lecția este parcursă în mod integral, iconița sugerează acest lucru. O lecție parcursă integral se referă la faptul că utilizatorul a parcurs porțiunea teoretică, menită să îl îndrume în rezolvarea testelor, acestea fiind la rândul lor rezolvate cu succes. Odată cu terminarea sa, lecția poate fi accesată în orice moment, fără restricții. Mai departe, o altă iconiță sugerează faptul că lecția este în curs de desfășurare. Această poate fi accesată numai în cazul în care cea precedentă este finalizată, la fel cum următoarea lecție va avea în dreptul sau o iconiță sugestivă reprezentată de un lacăt, ce arată faptul că respectiva lecție este blocată și nu poate fi accesată până când cea precedentă nu este finalizată intergal.

Parcurgerea lecțiilor și a testelor

În momentul în care utilizatorul accesează o lecție, acestuia i se va pune la dispoziție o porțiune teoretică, menită a fi cât mai interactivă, pentru a-l atrage, dar totodată conținând toate elementele importante ce este necesar a fi avute în vedere pentru înțelegerea conceptelor de baza. Posterior parcurgerii teoriei, utilizatorului i se va pune la dispoziție posibilitatea să înceapă un test alcătuit dintr-o serie de întrebări, ce vor fi preponderent în legătură cu teoria parcursă anterior. În momentul în care utilizatorul alege să înceapă testul, va primi un mesaj informativ, ce conține numărul de încercări, cel mai bun scor obținut, precum și atenționarea ce îl informează că dacă va opri testul înainte că acesta să se termine, niciun progres nu va fi salvat și testul va fi considerat eșuat. După ce utilizatorul alege să continue, testul va începe și odată cu el și cronometrul. Utilizatorul are la dispoziție 5 minute pentru a rezolva întrebările și cu cât aceastea sunt rezolvate mai rapid, cu atât punctajul final va fi mai ridicat. Utilizatorul va fi motivat să obțină un punctaj cât mai ridicat datorită faptului că aplicația pune la dispoziție posibilitatea obținerii unor medalii fictive, în funcție de punctajul obținut în cadrul unei lecții. Astfel, dacă  utilizatorul obține între 1-500 puncte, va obține o medalie de bronz, în cazul în care obține între 501-1000 de puncte, va obține o medalie de argint, iar în cazul în care obține între 1001-1500 de puncte, utilizatorul obține medalia de aur. Regulile necesare finalizării unei lecții din cadrul unui modul, chiar cu un punctaj mare, nu sunt atât de stricte, întrucât este implementată funcționalitatea ce permite utilizatorului să își folosească punctele acumulate în vederea obținerii răspunsului corect, în cazul în care nu îl știe și dorește să treacă mai departe. Numărul de puncte necesar în vederea dezvăluirii răspunsului corect este de 5. După scurgerea timpului alocat, dacă utilizatorul nu oferă niciun răspuns sau da un răspuns greșit, fără a continuă testul, acesta se consideră a fi picat și se poate relua. Condiția ca testul să fie trecut este ca jumătate din numărul de întrebări, plus una, să aibă un răspuns corect. În cazul în care răspunsul ales este unul greșit, acesta va fi scos în evidență de culoarea roșie, timp în care răspunsul corect ce trebuia ales se va evidenția prin culoarea verde. În cazul în care răspunsul este corect, utilizatorul trece la următoarea întrebare. După parcurgerea testului în mod integral cu succes, utilzatorul primește un mesaj în care este felicitat, care îi arată punctajul obținut și care îi oferă posibilitatea de a trece mai departe. Bineînțeles, progresul la nivelul modulului se va actualiza în momentul în care se parcurg lecții cu succes.

Quiz Game

În vederea sporirii gradului de interactivitate, aplicația are implementată funcționalitatea ce permite desfășurarea unui joc (Game Quiz), dezvoltată cu scopul de a provoca și mai mult utilizatorul să obțină punctaje ridicate, învățând în același timp. Punctele obținute în cadrul unui joc se pot utiliza ulterior în rezolvarea lecțiilor, în cazul în care nu se cunoaște răspunsul corect. Vor există 3 nivele de dificultate și anume: ușor, mediu și greu, pe care utilizatorul îl poate alege în funcție de nivelul la care consideră că se află.

Mai mult decât gradul de dificultate al întrebărilor, aceste nivele se mai diferențiază și prin numărul de întrebări astfel: cel mai ușor va conține 10 întrebări, cel mediu 20 de întrebări, iar cel greu 30 de întrebări. Punctajul maxim ce poate fi obținut pentru fiecare în parte este: 10 puncte nivelul ușor, 20 de puncte cel mediu, iar în urma rezolvării celui mai greu nivel, punctajul maxim obținut este de 30 de puncte. În cadrul quiz-ului întrebările nu mai sunt precedate de o baza teoretică, ceea ce provoacă utilizatorul să acumuleze cât mai multă informație în vederea obținerii unui punctaj ridicat.

 Statistici

Cea de-a treia opțiune din cadrul meniului principal se numește ‘Statistici’  și conține informații privind progresul făcut de către utilizator în cadrul aplicației, astfel: se evidențiază modulele completate din totalul de module existente, progresul per total în procente, precum și scorul per total, calculat în puncte, din totalul posibil de 100. În vederea aducerii unui plus de interactivitate, aplicația pune la dispoziție posibilitatea vizualizării progresului printr-un grafic, ce se actualizează în mod dinamic, la fiecare accesare a paginii. Astfel, utilizatorul este capabil să vadă colorat în verde procentul de module parcurse cu succes, iar cu roșu cele eșuate.

Profilul utilizatorului

Cea de-a patra opțiune a meniului principal conține datele aferente utilizatorului curent, în materie de: nume, email, ce apare doar dacă logarea s-a făcut cu introducerea email-ului și a parolei. În cazul în care logarea s-a realizat prin intermediul Facebook, Google+ sau Twitter, se poate vizualiza numai numele utilizatorului. În ceea ce privește posibilitatea schimbării parolei, această se poate face doar când aceeași condiție anterioară este îndeplinită și anume numai în cazul în care logarea se face prin introducerea email-ului și a parolei de către utilizator. Totodată, utilizatorului i se oferă opțiunea de a-și șterge contul curent.

În ceea ce privește categoria de persoane vizate, aplicația este adresată tinerilor familiarizați cu tehnologia de ultima ora și care își doresc aprofundarea unor concepte teoretice de baza în ceea ce privește tehnologia AngularJS. Aplicația este ușor de descărcat, deține o interfață intuitivă, ce permite utilizarea aplicației și de către utilizatorii mai puțin experimentați.

Concluzii

Aplicația mobilă pentru învățarea tehnologiei web AngularJS dorește să aducă un plus de interactivitate în cadrul aplicațiilor mobile de acest gen. Aceasta oferă o interfață prietenoasă utilizatorului, ușor de folosit și înțeles precum și funcționalități complexe transparente acestuia precum sincronizarea datelor pe mai multe dispozitive mobile. Mai mult, aplicația este suportată de orice dispozitiv mobil Android sau iOS indiferent de API-ul acestuia.

Un alt avantaj pe care aplicația dezvoltată îl aduce utilizatorului față de alte aplicații mobile de învățare a tehnologiilor de acest gen, este nivelul de interactivitate crescut prin oferirea posibilității de testare a cunoștințelor imediat după ce acestea au fost acumulate precum și posibilitatea transformării învățării clasice într-un joc, pe care tinerii îl preferă în locul teoriei statice.

În viitor aplicația poate fi îmbunătățită prin adăugarea de module noi precum un modul de “Code Fight” prin care utilizatorii pot efectua teste împreună și își pot măsură cunoștințele în acest fel. Acest modul poate fi ușor de integrat datorită bazei de date stocate în cloud  prin care datele sunt transferate în timp real între utilizatori.

Mai mult, aplicația poate fi modificată în viitor să suporte mai multe limbi străine. Acest lucru poate fi realizat modificând partea de client în așa fel încât limba prestabilită să fie preluată din dispozitivul mobil al utilizatorului iar partea de server să trimită informațiile cerute pentru limba selectată.

Datorită tehnologiilor de ultima generație folosite pentru dezvoltarea aplicației, îmbunătățirile și actualizările sunt foarte ușor de făcut, precum și integrarea acestei aplicații cu posibile versiuni viitoare.