Aplicatii Hibride

Cuprins

INTRODUCERE

Pe măsură ce tehnologia avansează, metodele prin care se crează aplicații mobile se schimbă de asemenea. Pe măsură ce modalități noi și mai bune de a construi aplicații mobile devin disponibile, sunt încă utilizate metode mai vechi, în funcție de scopul și funcționalitatea aplicației.

În acest moment, există trei metode de a construi o aplicație mobilă:

aplicații native

aplicații web

aplicații hibride

Aplicații web

Aplicațiile web sau site-uri web mobile au cel mai larg public din cele trei tipuri principale de aplicații. Orice smartphone poate să afișeze conținutul unei pagini web și permite utilizatorului să interacționeze cu aceasta, deși unele fac acest lucru mai bine decât altele.

Două lucruri ce trebuie făcute pentru a crea un website mobil sunt: integrarea unui design adaptabil (responsive design) și restructurarea conținutului incat să funcționeze pe dispozitive cu ecran mic.

Pentru a realiza un design adaptabil se folosesc interogările media CSS (CSS media queries). Interogările media CSS sunt o modalitate de a coda CSS(Cascading Style Sheets) pentru a defini reguli care vizează diferite tipuri de dispozitive (telefoane, tablete, laptopuri si ecrane mari).

Exemplu de interogări media CSS:

Telefoane

Portret și peisaj

@media only screen and (min-device-width : 320px) and

(max-device-width : 480px) { … }

Peisaj

@media only screen and (min-width : 321px) { … }

Portret

@media only screen and (max-width : 320px) { … }

Tablete

Portret

@media only screen and (min-device-width : 768px) and

(max-device-width : 1024px) { … }

Peisaj

@media only screen and (min-device-width : 768px) and

(max-device-width : 1024px) and (orientation : landscape) { … }

Portret

@media only screen and (min-device-width : 768px) and

(max-device-width : 1024px) and (orientation : portrait) { … }}

Desktop, laptop, ecrane mari

@media only screen and (min-width : 1224px) { … }

@media only screen and (min-width : 1824px) { … }

Un dezavantaj al site-urilor web mobile este faptul că multe caracteristici disponibile pentru aplicații native, nu sunt disponibile in cazul website-urilor.

Accesul la sistemul de fișiere și resursele locale nu este disponibil în site-uri web, indiferent dacă sunt sau nu sunt mobile. Site-ul nu poate accesa camera web, senzorii sau alte componente hardware.

Pentru a putea folosi capabilitățile offline, trebuie utilizate tehnologii web, cum ar fi WebStorage, IndexedDB și AppCache. Website-urile mobile nu pot accesa resursele de sistem de fișiere, dar modelul lor sandbox permite totuși stocarea anumitor date pe dispozitiv. Multe site-uri web existente nu pot funcționa offline, facându-le inutile atunci când acestea sunt deconectate.

Aplicații native

Aplicațiile native sunt aplicații scrise în limbajul de programare specific platformei pentru care se dezvoltă. În tabelul 1 se observă câteva din sistemele de operare mobile împreună cu limbajul de programare specific, platformele pentru dezvoltare precum și cu medii de dezvoltare folosite de către programatorii de aplicații mobile.

O aplicație nativă care respectă regulile de dezvoltare specifice platformei pentru care este destinată, nu va folosi niciodată aceleași resurse grafice: butoane, icoane, fundaluri pentru liste, etc. pentru mai mult de o platformă. Aceasta din cauză că aplicațiile native trebuie să păstreze din comportamentul și designul sistemului de operare pe care rulează. Acestea trebuie să se integreze în platforma aleasă de utilizatorul final.

Dezvoltarea aplicațiilor native poate aduce următoarele beneficii celor care le dezvoltă:

Posibilitatea de a accesa diferite componente hardware (bluetooth, senzori de mișcare, leduri de notificare, camera și altele);

Timp mai scurt de răspuns pentru unele operații;

Programatorul are acces la ultimile API-uri apărute pe platformă încă de la versiunile beta;

Aplicația are o vizibilitate mai mare pe platforma unde este lansată datorită faptului că este distribuită prin piețele de aplicații folosite de majoritatea utilizatoriilor de dispozitive mobile;

Oferă utilizatorului o experiență de utilizare superioară fapt ce poate duce la creșterea utilizării aplicației;

Unelte de dezvoltare gratuite;

Mediile de dezvoltare vin de obicei cu unelte bune de testare a codului dar si de analiză a aplicației din punct de vedere a consumului de memorie si timpilor de răspuns.

Aplicațiile native pot aduce utilizatori noi în timp ce-i păstrează pe cei care deja le folosesc. Majoritatea brand-urilor mari din lumea aplicațiilor sociale (facebook, twitter, linkedin, etc.) și-au dat seama de puterea aplicațiilor native de a atrage utilizatori și au ales să meargă pe această nișă.

Ca orice lucru, aplicațiile native au și părți negative care pot pune pe gânduri un starter. Părțile negative sunt următoarele:

Spre deosebire de aplicațiile web, distribuția aplicațiilor native este adesea limitată de forțarea acestora de a putea fi distribuite doar prin piețele de aplicații care pot impune diferite bariere (ex. Prin unele piețe de aplicații nu se pot vinde aplicații din anumite țări),

Dacă se urmărește lansarea produsului pe mai multe platforme, costurile cresc semnificativ, fiind nevoie de rescrierea codului pentru fiecare platformă în parte,

De regulă, specializarea programatorului pe o platformă poate dura ani de zile fapt ce duce și la o limitare a resurselor umane.

Aplicații hibride

Aplicațiile mobile hibride sunt aplicații care de regulă sunt dezvoltate folosind tehnologii WEB (JavaScript, HTML, CSS) dar au access la componentele hardware si la sistemul de fișiere. La ora actuală aplicațiile hibride încep să prindă rădăcini tot mai puternice datorită faptului că multe medii de dezvoltare devin tot mai stabile și oferă acces la tot mai multe funcționalități hardware ale dispozitivelor. În tabelul 2 sunt câteva dintre cele mai folosite medii de dezvoltare ale aplicațiilor hibrid:

Părțile pozitive:

Timp de dezvoltare mic pentru o acoperire largă de sisteme de operare;

Învățarea mai rapidă a tehnologiilor de dezvoltare, fiind vorba în principiu de tehnologi web;

Aplicația are o vizibilitate mai mare pe platforma unde este lansată datorită faptului că este distribuită prin piețele de aplicații folosite de majoritatea utilizatoriilor de dispozitive mobile;

Unelte de dezvoltare gratuite.

Părțile negative:

Dependență față de dezvoltatorii uneltelor de lucru, fapt ce poate întârzia lansarea aplicației care să funcționeze pe o versiune nouă a unui sistem de operare sau întârzieri în repararea problemelor tehnice ce pot apărea mai ales la versiuni noi ale sistemelor de operare pentru mediile mobile;

Performanță mai scăzută în unele locuri

Reputație scăzută în rândul utilizatorilor fideli a unei anumite platforme mobile;

Pierdere de timp pe repararea problemelor găsite în urma faptului că nu pe toate platformele aplicația o să ruleze la fel de bine.

Capitolul I

Sencha Touch

Sencha Touch este cea mai performantă platformă MVC(Model View Controller) pentru crearea de aplicatii mobile pentru diferite platforme. Sencha Touch foloseste tehnici de accelerare pentru a crea componenete foarte performante pentru interfețele grafice din aplicațiile mobile.

Având peste 50 de componente si teme asemănătoare cu cele native pentru majoritatea platformelor mobile, Sencha Touch poate crea aplicații foarte performante pentru iOS, Android, BlackBerry, Windows Phone și alte platforme.

Secțiunea 1

Prezentare generală

Componente performante, asemănătoare cu cele native

Sencha Touch are o cuprinzătoare colecție de componente performante cum ar fi: liste, meniuri, formulare, grile, grafice construite in mod special pentru platformele mobile.

Layout adaptabil, animații si scroll fluid

Sencha Touch are un motor de redare ce foloseste HTML5 și permite dezvoltatorilor să creeze aplicații foarte rapide pentru platformele mobile. Schimbarea din modul peisaj in portet și invers, se face aproape instantaneu, motorul de redare asigurând o experientă similară pe toate platformele mobile. Sencha Touch alege automat cele mai performante animații si metode de scroll în funcție de fiecare platformă.

Sistem de date agnostic

Sistemul de date inclus in Sencha Touch deconectează componentele interfeței grafice de stratul de date. Sistemul permite utilizarea colecțiilor de date la client folosind modele ce oferă funcții ca sortare si filtrare. Sistemul de date nu depinde de protocol și poate folosi informati de la orice sursă.

Sistemul de grafice

Sistemul de grafice permite vizualizarea datelor folosing diferite tipuri de grafice ca linie, bară sau circular. Graficele din Sencha Touch folosesc elementul canvas din HTML5 pentru a obțtine o experiența apropiată de cea nativă. Animațiile și interacțiunea cu graficele sunt bazate pe gesturi:pinch, zoom, swipe.

Accesarea dispozitivelor

Aplicațiile create cu Sencha Touch pot rula pe orice browser mobil, dar accesul la dispozitiv si compilarea nativă este de multe ori esentială pentru aplicațiile mobile. Sencha Touch se integrează perfect cu Phonegap/Cordova pentru a avea access la API-urile native cum ar fi camera si accelerometrul.

Secțiunea 2
Structura unei aplicații Sencha Touch

O aplicație Sencha Touch este o colectie de modele, view-uri, controlere, magazine și profiluri, plus metadate adiționale pentru componente ale aplicației cum ar fi pictograme sau imaging pentru ecranul de pornire.

Model : un tip de date din aplicație – o aplicație de comerț electronic ar avea modele pentru Utilizator, Produs și Comenzi.

View: este responzabil pentru afișarea datelor si componentelor din Sencha Touch

Controler: asigura interacțiunea cu aplicația in funcție de acțiunile utilizatorului

Magazin: incarcă datele in aplicatie și in componente de genul listă sau grilă

Profil: permite adaptarea interfeței aplicației pentru telefon sau tabletă

Modele

Cel mai simplu model este un set de câmpuri ce conțin date.

Un exemplu de model:

Modelele pot fi legate intre ele folosind API-ul de asociere. Majoritatea aplicațiilor folosesc diferite modele, iar de cele mai multe ori acestea sunt legate. De exemplu o aplicație pentru un blog ar putea avea modele pentru Utilizator, Articol și Comentariu. Relația dintre ele este afișată mai jos:

Modelele au metode de validare a datelor. Următoarele metode de validare sunt definite implicit:

presence – câmpul trebuie sa aibă o valoare. 0(zero) este valid, dar un șir gol nu este valid

length – valoarea câmpului trebuie să aiba o lungime între un minim și un maxim. Ambele limite sunt opșionale

format – valoarea câmpului trebuie să fie de un anumit format cum ar fi număr

inclusion – valoarea câmpului trebuie să facă parte din un set specific de valori

exclusion – valoarea câmpului trebuie sa nu faca parte din un set specific de valori

View-uri

Deși marea parte a unei aplicații este formata din modele și controlere, din punct de vedere al utilizatorului o aplicație este o colecție de view-uri.

Controlere

Controlerele “ascultă” evenimente declanșate de interfața grafică si executa anumite acțiuni in funcție de eveniment. Folosind controlerele, codul este curat și usor de citit și păstram separat logica de afișare.

Controlerele au două proprietăți de configurare importante: refs și control.

refs – folosit pentru a gasi diferite componente

control – folosit pentru a atașa o metodă a controlerului la o componentă selectată cu refs

Un exemplu de controller:

Magazine

Magazinele sunt o parte importantă din Sencha Touch și sunt folosite pentru componentele ce afișează date. Cel mai simplu magazin este o colectie de instanțe ale unui model. Componentele ca liste si grile afișează câte o elementpentru fiecare instanță a modelului din magazin. Pe măasură ce instanțele unui model sunt adăugate sau scoase din magazin, se declanșează evenimente ce sunt folosite de componente pentru a se actualiza.

Profiluri

Sencha Touch functionează pe o gamă largă de dispozitive cu diferite capabilități și ecrane de diferite dimensiuni. O interfață ce functionează bine pe tablete nu o să functioneze la fel de bine pe telefoane și invers, așa ca are sens folosirea view-urilor diferite pentru diferite tipuri de dispozitive.

Profilurile sunt clase simple ce permit definirea diferitelor tipuri de dispozitive și comportamentul aplicației pe aceste dispozitive. Fiecare profil definește o functio isActive care returnează adevarat(true) dacă profilul trebuie să fie active pe dispozitivul curent, plus un ser de modele, view-uri și controlere ce sunt folosite daca profilul este detectat.

Un exemplu de profil:

Capitolul II

Apache Cordova

Apache Cordova este o platformă pentru dezvoltarea aplicațiilor de mobil. Permite folosirea tehnologiilor web standard ca HTML5, CSS si JavaScript pentru a crea aplicații pentru diferite platforme, evitând limbajul de dezvoltare nativ al fiecarei platforme. Aplicațiile se bazează pe API-uri standard pentru a accesa senzorii, datele si rețeaua dispozitivului.

Aplicațiile Apache Cordova se bazează pe un fisier numit config.xml ce specifică informații despre aplicație și cum ar trebui să funcționeze aceasta, de exemplu daca raspunde la schimbarea orientării dispozitivului.

Aplicația este implementată ca o pagina web, implicit numită index.html, care apelează fișiere CSS, JavaScript, imagini, fișiere media sau orice alte resurse necesare pentru a funcționa. Aplicația se execută ca un WebView in mediul nativ.

Cordova are o interfață pentru module prin care comunica cu componentele native. Acest lucru permite apelarea funcțiilor native din JavaScript.

MODURI DE DEZVOLTARE

Independent de platformă (CLI)

Folosind această abordare, aplicația va funcționa pe cât mai multe platforme, fară a fi nevoie de cod specific pentru fiecare platformă. Acest mod de lucru foloseste un program utilitar numit Cordova CLI(Comand Line Interface). Cordova CLI este un program de nivel înalt ce permite crearea unei aplicații pentru mai multe platforme odată, abstractizând mult din funcționalitatea scripturilor de nivel scăzut. Cordova CLI copiază un set de resurse web comune in directoare separate pentru fiecare platformă, configurează fiecare platformă și generează aplicația.

Dependent de platformă

Această abordare este folositoare cand se crează aplicația pentru o singură platformă si este nevoie de modificări la nivel scăzut, de exemplu folosirea componentelor native cu componente web Cordova, folosind Embedded WebViews.

PLATFORME

În Anexa 1 sunt afișate modulele suportate și pe ce platforme funcționează acestea.

MODULE APACHE CORDOVA

Apache Cordova are un set minim de API-uri ce poate fi extins prin module. Modulele Cordova sunt următoarele:

Baterie – monitorizează starea bateriei

Cameră – Poate face poze folosind camera foto a dispozitivului

Consolă – Adaugă funcționalitate suplimentară metodei console.log();

Contacte – Poate interacționa cu baza de date de contacte

Dispozitiv – Poate accesa informații despre disozitiv

Accelerometru – Poate accesa senzorule de miscare al dispozitivului

Busolă – Poate accesa senzorule de orientare al dispozitivului

Notificări – Afișează notificari pe dizpozitiv

Sistem de fișiere – Se poate conecta la sistemul de fișiere folosind JavaScript

Transfer de fișiere – Poate realiza transfer de fișiere folosind JavaScript

Geolocație – Poate accesa GPS-ul

Globalizare – Permite traducerea elementelor din interfața grafică

Browser – Poate acces URL-uri în on instanță de browser din aplicație

Media – Poate înregistra și reda fișiere audio

magazinele de aplicații – Poate crea fișiere media folosind aplicațiile de captură media ale dispozitivului

Rețea – Poate accesa informații despre rețeaua mobilă

Ecran de start – Afișează o imagine pâna la inițializarea aplicației

Bară de stare – Permite configurarea bării de stare

FIȘIERUL CONFIG.XML

Multe aspecte din comportamentul aplicației pot fi controlate cu un fișier de configurare global numit config.xml. Acest fișier independent de platformă este bazat pe specificațiile W3C pentru aplicații web și extins pentru Cordova pentru a specifica funcționalități, module și setări specific pentru fiecare platformă.

Elemente de configurare de bază:

Următoarele elemente apar in fișierul config.xml și sunt suportate de toate platformele:

Atributul id al elementului <widget>crează identificatorul de domeniu invers, iar version este versiunea aplicației sub forma versiune majoră/minoră/patch. Elementul widget poate avea atribute ce specifica versiuni alternative, versionCode pentru Android și CFBundleVersion pentru iOS.

Elementul <name>specifică numele aplicației așa cum apare pe dispozitiv și in magazinele de aplicații

Elementele <description> și <author> specifică metadata si date de contact ce pot apărea in magazinele de aplicații

Elementul opțional <content> definește pagina de start a aplicației. Valoarea implicită este index.html din directorul www.

Elementele <access> specifică ce domenii externe pot fi accesade de aplicație.

MEDII DE STOCARE

Apache Cordova are mai multe API-uri pentru stocarea de date:

LocalStorage – Cunoscut și sub numele de stocare web, stocare simplă sau stocare de sesiune, acest API folosește perechi cheie/valoare pentru stocare de date și este present in implementarile WebView-urilor.

WebSQL – Acest API oferă tabele de date mai complexe accesate prin interogări SQL. Sunt suportate următoarele platforme:

Android

Blackberry10

iOS

Tizen

IndexedDB – Acest API oferă mai multă funcționalitate decât LocalStorage dar mai puțină decat WebSQL. Sunt suportate următoarele platforme:

BlackBerry 10

Firefox OS

Windows Phone 8

Windows 8

Pe lângă API-urile de stocare, mai exista si API-ul de fișiere ce permite salvarea de date in sistemul de operare al dispozitivului.

BIBLIOGRAFIE

http://www.sencha.com/

https://cordova.apache.org/

http://phonegap.com/

http://ionicframework.com/

http://www.smashingmagazine.com/2014/10/21/providing-a-native-experience-with-web-technologies/

https://www.ng.bluemix.net/docs/

https://crosswalk-project.org/

http://training.figleaf.com/Courses/sencha.cfm