Aplicatie Mobile Cross

UNIVERSITATEA DIN ORADEA

FACULTATEA DE I NGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

PROGRAMUL DE STUDIU – ZI

PROIECT DE DIPLOMĂ

UNIVERSITATEA DIN ORADEA

FACULTATEA DE I NGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

PROGRAMUL DE STUDI- ZI

APLICAȚIE MOBILE CROSS – PLATFORM

CUPRINS

INTRODUCERE

Am ales sa realizez o aplicatie Cross – Platform pentru dispozitivele mobile deoarece este un domeniu nou pentru mine si vreau sa dobandesc cat mai multe cunostinte posibile despre acestea.

In ultima perioada au inceput sa ma intereseze tot mai mult aplicatiile mobile, de aceea am vazut lucrarea de diploma ca pe o oportunitate da a-mi continua cercetarile pe acest domeniu.

Nu am realizat o aplicatie nativa specifica pentru o platforma anume deoarece am considerat ca imi pot valorifica cunostintele de programare web la realizarea Lucrarii de Diploma mult mai usor decat sa invat un nou limbaj de programare specific dispozitivelor mobile.

In plus aplicatiile cross –platform sunt mult mai usor si mai rapid de realizat ceea ce imi ofera un sentiment de finalitate mult mai repede. Dupa finalizarea aplicatiei, aceasta imi ofera pe langa promovarea examenului de diploma si posibilitatea dea a genera profit in urma mucii depuse.

Consider ca toate cunostintele dobandite in urma realizara programului imi sunt de folost atat ca experinta profesionala cat si ca experienta personala.

Capitolul I

Cross – Platform

Introducere

Odata cu aparitiatelefoanelorinteligente, telefoanele mobile s-au schimbat din instrumenterelativ simple de comunicare in adevarate mini-computere. Piatatelefoanelorinteligenteabunda dediferiteplatforme de operare, celemaicunoscutefiind android si iOS, apartinand Google respectiv Apple.

Termenul de “cross-platform” sau “multiplatforma” definestecaracteristicaunuiunuilimbaj de programare de a dezvolta software-uri care sa fie capabilesarulezepemaimultdecat o platformasau un sistem de operare, cu scriereacoduluisursa o singura data.

Fiecaredintreacesteplatformeutilizeazasisteme de operareproprii, rezultand o piata a telefoanelorinteligentefoartefragmentata din acestpunct de vedere. Acestfaptgenereaza o serie de problemepentrucompaniile care vorsatinteascadezvoltarea de programepentrumaimulteplatforme, din cauzafaptului ca o aplicatieodatadezvoltataspecific pentru un dispozitiv nu vafunctionapealtul.

Exista mai multe metode de a dezvolta aplicatii “cross-platform”, unadintreacesteafiindconstruireauneiaplicatii web care saruleze in browser. Aceastaabordareintalnestetotusiunelerestrictii in coparatie cu aplicatiiledezvoltatenativ, printre care nevoiaconstanta a uneiconexiuni la internet saunivelul de performanta al dispozitivuluipe care aceastaesterulata.

“Pentrurezolvareaacesteiprobleme, au aparutdiferite “unelte” pentrudezvoltarea “cross-platform”, acesteaavand ca scopoferireadezvoltatorilor a uneisolutiicomune, capabilasaruleze correct, indiferent de platformasausistemul de operareutilizat. Acesteunelte “cross-platform” au formediferitesiutilizeazatehnologii diverse, toateavand ca unicscoparmonizareafunctionariiprogramelorpeorice tip de platformafolosita.”

Acesteuneltesuntextrem de folositoaredatoritafaptului ca scadcostulcrescandtotodatavitezadezvoltariiaplicatiilor. In plus, acesteasuntrelativusor de folosit, fiindbazatepelimbajecomune ca si CSS, HTML sau JavaScript.

Termenul de “platforma” poate face referire la tipulprocesoruluisau a alteipartiparti hardware pe care un sistem de operaredatsauaplicatieruleaza, tipul de sistem de operare de pe un calculator saucombinatiadintretipul de hardware sisistem. Unexemplu de platformaeste Microsoft Windows, functionandpearhitectura x86. Alteplatformecunoscutepentrucalculatoare tip desktop sunt Linux/Unix si Mac OS X, ambelefiind la randullor cross-platform.

Programele pot fi scriseastfelincatsa fie in stransalegatura cu caracteristicileuneiplatformeanume, fie ca vorbim de partea de hardware, sistem de operaresau “masinavirtuala” (virtual machine) pe care functioneaza.

Pentru ca un program sa fie considerat “cross-platform”, acestatrebuiesa fie capabil de a function a pemaimult de o arhitectura de computer sausistem de operare. Dezvoltareaunuiastfel de program poatesa consume multtimpdeoarecesistemele de operarediferite au siinterfete de programare a aplicatiilordiferite. De exemplu, Linux foloseste o interfatadiferitapentru software-ulaplicatiilor fata de ceafolosita de Windows.

Chiardaca un sistem de operareoarecarepoaterulapearhitecturi de calculator diferite, acesta nu inseamna ca software-ulscrispentruacelsistem de operarevafunctiona automat petoatearhitecturilesuportate deacelsistem. De asemeneaacestlucrupoateinsemna ca desi un program estescrisintr-un limbaj popular de programare, ca si C++, nu inseamna ca acestavarulapetoatesistemele de operare care suportaacellimbaj, sauchiarpeacelasisistem de operarepe o arhitecturadiferita.

Aplicatiile web suntdescrise de obicei ca fiind de tip “cross-platform” pentru caelesuntaccesibileprinoricefel de browsere web, parte a orcaruisistem de operare. Astfel de aplicatiiimplica de regula o arhitectura de sistem de tip client – server sivariazamult in complexitatesifunctionalitate. Aceastavariatiecomplicamultscopulcapabilitatii “cross-platform”, care esteacelasi cu scopuluneifunctionalitatiavansate.

Aplicatiile web de bazaisiefectueazaproceseledintr-un server sitrimitrezultatul browser-ului web client. Toatainteractiuneautilizatorului cu aplicatiaconsta in simple schimburi de cereri de date siraspunsuri de la server. Acest tip de aplicatiieraunorma in primele faze ale dezvoltariiaplicatiilor, acestaurmand un model model de tranzactiisimplu, similar cu cel al paginilor web statice.

Exempleclare de aplicatii web avansateincludinterfata web a Gmail, A9.com sau maps.live.com. Asemeneaaplicatiiavansatedepind constant de caracteristiciaditionale , care se afla in versiunimairecente a celormaipopularebrowsere web. Acestedependenteinclud Ajax, JavaScript, Dynamic HTML, SGV sialtecomponenteaaplicatiiloravansate. Versiunilemaivechi a browserelor web tindsa nu aiba support pentruanumitecaracteristici.

Cordova

Cordova este un framework open source care permite convertirea fisierelor HTML, JavaScript si CSS intr-o aplicatie nativa care poate rula pe IOS, Android si alte platforme. Cordova foloseste un invelis nativ in jurul unui web view (un browser incorporat) de unde ii deriva numele de aplicatie mobile hibrid. De asemenea acesta ofera posibilitatea de a accesa componente hardwere precum camera, accelerometru, etc. Spre deosebire de o pagina web, aplicatiile Cordova pot fi gasite in diferite magazine de aplicatii precum Google Play si App Store.

Cordova creaza o aplicatie hibrida, care este de fapt un minibrowser incorporat intr-o aplicatie nativa. Aceasta poate rula pe dispozitivele mobile fara o conexiune la internet.

Ca sa putem discuta despre Cordova trebuie mai intai sa incepem cu PhoneGap. PhoneGap a fost creat de compania Nitobi in anul 2008. Deoarece acesta a fot lansat ca un proiect gratuit open source , a devenit foarte rapid popular printre dezvoltatori de aplicatii care au dorit sa creeze programe pentru diferite platform si care nu aveau cunostine de programare native specifice platformei respective. Pe 4 Octombrie 2011, Adobe a achizitionat Nitobi. In acelas timp proiectul PhoneGap a fost prezentat la Apache Software Foundation, initial numinduse Apache Callback dar cum numele era aprope imposibil pentru Google a fost schimbat in Cordova.

Apache Cordova este un proiect open source coordonat de Apache Foundation, iar PhoneGap este o implementareaAdobea proiectuluiCordova, acesta fiind de asemena open source dar Adobe a adaugat anumite servicii suplimentare care nu sunt gratuite.

Proectul Cordova este format din trei lucruri principale : un instrument de linie de comanda, acces la caracteristici hardware si capacitatea de a suporta viitoare functionalitati necunoscute.

Linia de comanda

Linia de comanda este folosita pentru a crea proiecte si pentru a compila codul pe platformele mobile. Acesta preia fisierele HTML, CSS ,JavaScript si le converteste in fisiere binare necesare fiecarei platforme suportate de Cordova. De asemenea linia de comana mai este folosita pentru a adauga anumite caracteristici si pentru a trimite codul la un simulator sau la un dispozitiv fizic.

Acces la hardware

A doua caracteristicămajoră pe care Cordova o pune la dispozitie este accea accea de a accesa anumite caracteristici ale dispozitivelor. In cea mai mare parte sunt lucruri pe care nu le poti realiza cu o aplicatie normala care ruleaza in browser. Cordova extinde functionalitatile JavaScriptului si pune la dispozitie diferite API-uri care pot fi integrate in codul sursa.

Capitolul II

Life Moments

3.1 Scopul aplicației

Inca de la inceputul timpurilor oameni au vazut necesitatea si importanta stocarii informatiei pe termen lung. De accea acestia marcau momentele importante din viata sau istorie in carti, jurnale,schite etc. pe care sa le poata comemora sau sa le transmita mai departe urmatoarelor generatii. Aceasta necesitate exista si in zilele noastre, dar spre deosebire de acum cateva decenii, informatia este stocata tot mai rar in carti si tot mai frecvent in format electronic. Desi aceasta tranzitie a revolutionat modul de stocare si transmitere a datelor, multe persoane nu au renuntat la modul vechi de a stoca informatiile. Desigur ca ambele modaitati sunt importante, dar cele in format electronic au cateva avantaje pe care scrisul pe hartie nu le ofera. De exemplu, acestea sunt susor de compus si stocat. Spatiul fizic ocupat de acestea este mult mai mic si ofera o securitate a dateloermult mai buna. Un alt avantaj este acela ca sunt usor de transmis. Aparitia Internetului a deschis noi orizonturi in ceea ce inseamna transmitere de date. Cu o simpla apasare de buton toata lumea poate avea acces la informatia dorita. Desi cele in format electronic sunt net superioare celor scrise pe hartie, ambele prezinta acelasi dezavantaje, care sunt cauzele naturale si cauzele omenesti. Inundatiile, eruptiile vulcanica, cutremurele, razboaile, toate reprezinta un grad de amenintare la asupra informatiei. In multe dintre aceste situatii o gramda de date sunt prierdute sau deteriorate ceea ce face ca recuperarea lor sa fie mult mai dificila sau chiar imposibila. Oameni au gasit solutii la aceste probleme realizand mai multe exemplare pentru cele scrise pe hartie, iar pentru cele electronice depozitandule in difeite parti ale lumi astfel, acelas set de informatii pot fi depozitate in diferite orase, tari sau chiar continente ceea ce ofera o flexibilitate crescuta.

Aplicatia mobila „Life Moments” vine in ajutorul persoanelor care doresc să își rețină într-un mod detaliat evenimete importante din viața într-un loc sigur și portabil. Fiind o aplicatie corss – platform are avantajul de a fi disponibila pentru cele mai importante sisteme de dispozitive mobile actuale precum IOS, Android, Windows, BlackBerry, etc.Aceasta ofera securitate a datelor prin mecanismul de autentificare si posibilitatea de depozitarea a acestora pe un server securizat in cazul in care datele din aplicatie au compromise. Life Moments este disponibilă în 10 limbi: Engleză, Română, Germană, Italiană, Franceză, Spaniolă, Portugheză,Japoneză, Chineză și Coreană ceea ce ofera o flexibilitate din punct de vedere lingistic.

Deasemena aceasta ofera posibilitatea extrageri tuturor informatiilor din dispozitiv si stocarea acestora in formate care pot fi tiparite.

Life Moments a fost creat cu scopul ca orice persoana, indiferent de varsta sau gen, cu cunostinte minime in ceea ce priveste utilizarea dispozitivelor mobile sa poata sa acceseze si sa utilizeze functionalitatile aplicatie, avand o interfata simplista si usor de inteles.

3.2 Functionalitate si utilizare

Life Moments suporta un singur utilizator pe dispozitiv si este disponibila pe toate dispozitivele mobile care suporta HTML5 si CSS3. Toate datele sunt stocate local si nu pe un server.Aplicatiaeste impartita in 4 module importane: notitele, obiectivele, listele si rapoartele.

In continuare vor fi prezentate cele 4modulele si ferestre aferente.

3.2.1 Autentificare

La lansarea in executie a apicatiei, utilizatorul este directionat catre o pagina de autentificare.De asemenea in acels timp este verifica limba curenta a dispozitivului si se seteaza aplicatia in aceeasi limba daca ea face parte din cele 10 limbi suportate. In caz contrar, limba engleza este selectata ca si limba curenta. In figura 3.1 este prezentata pagia de autentificare in limba romana pe o tableta android.

Figura 2.1 – Pagina de autentificare

Daca persoana care a lansat in executie este un utilizator nou, acesta va trebui sa isi seteze o parola. Parola trebuie sa fie din minim 5 silabe ca sa fie valida. Dupa alegerea parolei,o fereastra de confirmareintreaba utilizatorul dacaparola introdusa este cea dorita, deasemena parola fiind vizibila acestuia. In metoda de autentificare nu exista un nume de utilizator ci doar o parola din cauza existentei unui singure persoane pe dispozitiv.

In cazul in care o parola a fost setata si utilizatorul s-a delogat, la redeschiderea aplicatiei acesta va fi nevoit sa se autentifice. Daca acesta nu introduce parola corecta se afiseaza un mesaj corespunzator.

Figura 2.2 – Mesajul afisat la o autentificare gresita in limba romana

3.2.2 Pagina de Informare

Odata autentificat, utilizatorul este redirectionat catre pagina de informare. Aici se gaseste meniul principal, care permite navigarea intre principalele module ale aplicatiei Life Moments. Tot aici sunt prezentate numatul toatal de notie, obiective si liste stocate, de asemeneapoza de profil si numele utilizatorului.

Pagina de informare a fost realizata cu scopul ca navigarea intre module sa fie cat mai usoara.

Figura 2.3 – Pagina de informare in limbaromana si chineza

3.2.3 Notitele

Notitele reprezinta cea mai importanta parte a acestei aplicatii.

Structura unei notite

Titlul – prezinta sumar despre ce este notita

Descrierea – prezinta evenimentul in detaliu

Data si timpul – Prezinta momentul cand s-a petrecut evenimentul

Eticheta – Fiecare notita are o eticheta pentru a fi mai usor de identificat tipul acesteia

Culoare – Folosit pentru o evidentiere si mai amanuntita

Figura 2.4 – Pagina de vizualizare a notitelor in modul portret șipeisaj in limba engleza

Figura 2.4 prezinta pagina de vizualizare de notite. Aici utlizatorul are o privire de ansabmlu asupra tuturor notitelor. Acestea sunt ordonate in funtie de data si timp, cele mai recente fiind deasupra Dupa cum se poate observa din imagine, acestea sunt responsive, adica isi schimba aspectul in functie de dimensiunile ecranului. De exemplu, daca acestea sunt vizualizate pe o tableta pe o singura line vor fi vizibile mai multe notie. Din pricina faptului ca dispozitivele IOS nu au buton de mers inpoi iar cele pe android-ul are, au fost implementate 2 butoane de mers inapoi. Utilizatori de andoid au posibilitatea de a naviga inapoi prin apasarea butonului standard al dispozitivului ori fie prin apasarea butonului din partea stanga- sus. Utilizatori dispozitivelor care nu au buton standard de mers inapoi se vor folosi de butonul de sus.

Figura 2.5 – Pagina de cautare a unei notie pentu diferite limbi

In partea de jos se gaseste butonul de adaugare de notie, iar sus este butonul de cautare care permite gasirea unie notite specifice. Daca utilizatorul apasa pe icoana in forma de lupa se afiseaza pagina de cautare a unei notite (Figura 2.5).

Daca se doreste crearea unei notite, trebuie apasat butonul plus din coltul din dreapta jos (Figura 2.4).

La apasarea acestuia se lanseaza pagina de crearea/editare a informatiilor ( Figura 2.6)

Figura 2.6 – Pagina de scriere a notiteler in limba japoneza si engleza

La aparitia acestei pagini, tastatura apre automat pe ecran pentru spori eficienta iserarii datelor. De asemenea data notiei este setata la data curenta. Acelas principiu este aplica si pentru setarea timpului. Pentru a schimba data, trebuie apasat pe textul unde este afisata aceasta. Procedand astfel se afiseaza calendarul care da posibilitatea utilizatorului sa schimbe data. Aceeasi procedura se aplica si in cazul timpului (Figura 2.7).Figura 2.7 – Calendarul Life Moments in limba engleza

La o notita pot fi atasate poze. Acestea pot fi adaugate prin intermendiul celor 2 butoane (de la stanga la dreapta) din bara de meniu (Figura 2.6). Primul care simbolizeaza o camera este folosit pentru a face o poza. La apasarea acestuia se deschide aplicatia nativa de facut fotografii a dispozitivului. Dupa realizarea fotografiei, imaginea este adaugata la notite curenta. Numarul de poze la o notita este nelimitat. Al doilea buton este folosit pentru a adauga o fotografie existenta in dispozitiv. Life Moments nu permite inserarea multipla a fotografiilor ci doar secvential.Ultimul buton din meniu este butonul care salveaza continutul notitei. Daca acesta este apasat, continutul este salvat in dispozitiv si utilizatorul este redirectionat catre pagina de vizualizare a tuturor notitelor.De asemenea, tot aici, poate fi seta eticheta si culoarea. Nu se pot insera etichete si culori noi, acestea fiind predefinite.

Figura 2.8 – Selectarea etichetelor si a culorilor in limba engleza

Pagina de vizualizare a notitelor nu iti ofera decat posibilitatea de a naviga mai rapid la o notita anume. Pentru a vedea intreg continutul, utilizatorul trebuie sa apese pe notita dorita, astfel acesta va fi redirectionat catre pagina de citire a notitei (Figura 2.9)

Figura 2.9 – Pagina de citire a notitelor in limba engleza

Aceasta fereastra permite stergerea notitei sau editarea acesteia. De asemenea tot aici pot fi vizualizate pozele atasate. Navigarea intre notie se realizeaza prin intermediul butoanelor din bara de jos a ecranului.

Continutul notitei poate fi distribuit pe retelele de socializare prin simpla apasare a butonului din partea de mijloc jos.

Figura 2.10 – Fereastra cu aplicatiile de socializare existente in dispozitiv

3.2.4 Obiectivele

3.2.5 Listele

3.3 Arhitectura si implementare

La realizarea aplicatiei s-au folosit tehnologii precum HTML5, CSS3,Javascript, Jquery. De aceea aceasta poate fi instalata orice dispozitiv care suporta HTML5.

Stocarea datelor in dispozitiv este realizata prin localStorage. Acesta este o caracteristica HTML5 care permite stocarea datelor in browser-ul utilizatorului. Inaite de acesta datele erau stocate in cookies. LocalStorage este mult mai sigur si ofera o capacitate de stocare a datelor mult mai mare fara sa afecteze performantele websiteurilor. Spre deosebire de cookies, localstoregeul poate stoca date pana la 5MB, iar informatia nu este niciodata transferata catre server. De asemenea HTML5 pune la dispozitie si sessionStorage care stocheaza datele pentru o singura sesiune (datele sunt pierdute cand freastra este inchisa). LocalSorage este un obiect care stocheaza datele pe termen nelimitat si care este format dintr-o cheie si o valoare. Crearea/setarea unei chei este realizata prin urmatoarea expresie: localStorage.setItem("lastname", "Smith"); . Primulparametruestecheiaiar al doileaestevaloarea. Obtinereavaloriuneichei se realizeazaaplandmetogagetItem in loc de setItem, iarstergereauneicheiesterealizataprinapelareametodeiremoveItem.

Figura 3.3.1 – Browserele care suporta localStorage