Meniul
AcasăInstrucțiuni

Aplicații Web hibride, native și mobile: o privire din interior. De ce aplicațiile native sunt mai bune decât cele hibride

Mulți oameni cred că aplicațiile hibride nu pot avea performanță bună, mai ales în ceea ce privește construcția paginii (adică au FPS scăzut). Aceasta este o concepție greșită. Dacă asamblați cu pricepere o aplicație, puteți obține rezultate bune. Articolul discută un exemplu de asamblare a unei astfel de aplicații hibride pentru Android în Windows 7 (deși pentru iOS va fi aproape la fel).

Să zicem că avem aplicare gata pe HTML5, în care imaginea este afișată în întregime prin elementul Canvas (am folosit framework-ul Phaser, 50 de sprites în mișcare). Pe PC aceasta aplicație se lanseaza fara probleme (60 FPS). Pe smartphone-urile de marcă de top totul este, de asemenea, bun (50-60 FPS). Dar dacă luăm o tabletă medie, rezultatul va fi pur și simplu teribil (3-15 FPS), chiar și în ciuda caracteristici bune dispozitive.
Prin urmare, scopul nostru este să creăm un apk complet publicabil, cu indicatori buni de performanță.

În acest moment, există multe instrumente pentru a atinge acest obiectiv. Cele mai populare dintre ele:
Cordova
Ludei
Intel XDK

Proiect Ludei(Cocoon.js) construiește o aplicație în cloud, conceptul este destul de simplu de înțeles. Vă sfătuiesc să fiți atenți aplicație client Aplicația CocoonJS Launcher, care vă permite să depanați cu ușurință aplicația direct pe dispozitiv. Acest lucru poate fi foarte util atunci când dezvoltați o aplicație. Dar nu recomand folosirea acestui serviciu pentru a construi o aplicație, deoarece... Există destul de multe erori și un ecran de splash proprietar este adăugat la aplicație.

Intel XDK este un instrument grozav cu care recomand să începeți. Aplicația este construită și în cloud. În esență, Intel XDK este o interfață grafică convenabilă pentru Cordova, cu un set complet de setări, pluginuri și un emulator.

Prin utilizarea Cordova construcția este deja efectuată pe computerul dvs. Această abordare are doar două avantaje:
Asamblarea este mai rapidă
Sunt folosite ultimele versiuni componente.
Există un dezavantaj:
Este necesar să se organizeze mediul înconjurător.
În articol vom lua în considerare ultima opțiune, deoarece este în mare parte problema care apare cu ea și, pentru că în cele din urmă vei trece la ea oricum sau mai târziu.

Deci, să începem. Instalare:

  1. Kit de dezvoltare Java (JDK) 7
Apoi, deschideți Android Manager SDK si instaleaza:
SDK-ul platformei Android 5.1.1 (API 22).
Android SDK Build-tools versiunea 19.1.0 sau o versiune ulterioară
Depozitul de asistență Android (extra)

Apoi în Android Studio Să generăm un set de chei pentru semnarea apk. Pentru a face acest lucru, selectați din meniu Creați > Generați APK semnat . În fereastra care se deschide, faceți clic Creaza nou . Se va deschide o nouă fereastră în care introducem toate datele (bineînțeles, ne amintim singuri datele).


După toate, puteți închide Android Studio și nu-l mai deschide niciodată.

Apoi trebuie să modificați variabila de mediu PATH:
1. Faceți clic pe meniul Start din colțul din stânga jos al desktopului, faceți clic pe Click dreapta mouse-ul pe Calculatorul meuși apoi faceți clic pe butonul Proprietăți.
2. Apăsați butonul Opțiuni suplimentare sistemeîn coloana din stânga.
3. În caseta de dialog care se deschide, faceți clic pe variabile de mediu.
4. Selectați o variabilă CALEși faceți clic pe Editați.
5. Adăugați următoarele la PATH, în funcție de locul în care a fost instalat SDK-ul (pentru mine f:\AndroidSDK ), De exemplu:

C:\Utilizatori\Root\AppData\Local\Android\sdk\tools;c:\Program Files\Ant\bin;C:\Users\Root\AppData\Roaming\npm;f:\AndroidSDK\platform-tools;f :\AndroidSDK\instrumente

6. Salvați valoarea și închideți ambele casete de dialog.

Și abia acum instalăm efectiv Cordova. Deschideți linia de comandă și rulați:

Npm install -g cordova

Apoi ne creăm proiectul. Pentru a face acest lucru, rulați următoarea comandă:

Cordova crea proiectDirectory com.companyName.appName AppName

Această comandă are următorii parametri:
proiectDirectory – directorul dvs. de proiecte.
com.companyName.appName - indică ID-ul proiectului în format invers de nume de domeniu.
Numele aplicatiei - specifică numele afișat al aplicației.
Toți acești parametri pot fi modificați cu ușurință mai târziu în fișier config.xml.
După executarea comenzii, directorul de proiect va fi creat. În acest director va exista un director www, care va conține fișierele implicite ale paginii aplicației. Ștergeți conținutul acestui director și copiați fișierele aplicației dvs. web în el. Denumiți fișierul de pornire index.html.

Înainte de a putea fi construit un proiect, trebuie specificat un set de platforme țintă. În acest articol voi lua în considerare doar Android. Să executăm o comandă care va adăuga capacitatea de a construi un proiect pentru această platformă.

Platforma Cordova adauga Android

După executarea comenzii, va apărea directorul și puteți construi debug.apk (pachet de depanare). Pachetul de depanare este construit cu comanda:

Cordova construi Android

Acum să adăugăm semnarea automată a pachetului. Cordova semnează pachetul folosind Gradle. Prin urmare, putem seta imediat setările cheii. Pentru a face acest lucru în director projectDirectory\platforms\android crea fisier text eliberare-semnare.proprietăţi în care scrieți următoarele setări:

StoreFile=../../ keystore.jks
storeType=jks
keyAlias=mialia
keyPassword=parola aici
storePassword=parola aici

După cum înțelegeți, trebuie să utilizați datele care au fost specificate la crearea cheilor.

Cordova build android --release

Finalizarea comenzii va dura câteva minute. La finalizarea construcției, putem găsi apk-ul finit în director projectDirectory\platforms\android\build\outputs\apk

Să testăm apk-ul rezultat pe o tabletă medie și... vom obține din nou rezultate groaznice (5 FPS). În acest moment, mulți dezvoltatori își pierd speranța. După o asemenea mizerie, fie aleargă pe www.ludei.com (pentru că măcar la ieșire există ceva sănătos), fie se alătură „armatei nenorociților” care sunt convinși că aplicațiile hibride sunt naibii.

De fapt, este prea devreme pentru a renunța la speranță. Există un proiect atât de minunat - Crosswalk. Folosind acest proiect, puteți încorpora un browser într-o aplicație nativă Android Google Chromeși joacă-ți proiectul în el. Avantajele sunt evidente: performanța unui browser bun și independența față de sistemul de operare al dispozitivului.
Proiectul Crosswalk este adăugat la Cordova ca plugin. Așa că este timpul să ne extindem aplicația cu pluginuri. Acest lucru se face foarte ușor. ÎN Linie de comanda lansat din directorul proiectului, rulați comenzile:

Pluginul Cordova adaugă cordova-plugin-splashscreen

Capacitatea de a instala un screensaver de pornire va fi adăugată proiectului. Asigurați-vă că instalați acest plugin.
Apoi puteți adăuga pluginuri în funcție de solicitările dvs. Iată doar câteva dintre ele:

Pluginul Cordova adaugă cordova-plugin-vibration

(plugin-ul adaugă capacitatea de a controla vibrațiile)

Pluginul Cordova adaugă cordova-plugin-globalization

(plugin-ul adaugă capacitatea de a determina localizarea dispozitivului)

Pluginul Cordova adaugă cordova-plugin-inappbrowser

(plugin-ul adaugă posibilitatea de a face cereri către server)

Ei bine, în sfârșit, să adăugăm Crosswalk:

Pluginul Cordova adaugă cordova-plugin-crosswalk-webview

După instalare, vom construi următorul apk și îl vom testa pe dispozitiv. Cel mai probabil vom obține și rezultate proaste (15 FPS)...
Aici cei care nu l-au pierdut în timpul primului test își pierd speranța. Și acești dezvoltatori se alătură „armatei de nenorociți” care sunt convinși că aplicațiile hibride sunt naibii.
Dar este prea devreme să renunți... De aici începe „magia”.

Pentru browser Google Chrome există un special GPU-lista neagră, care limitează utilizarea WebGL. Aceasta este încă o altă funcție cu erori de la Google. De ce este buggy?
În primul rând, funcția limitează nu numai motorul WebGL, ci și reduce semnificativ performanța motorului Canvas.
În al doilea rând, deși funcția se numește „lista neagră GPU”, funcționează ca o „listă albă”. Adică, dacă ai un smartphone de marcă de top, atunci acesta se află pe această listă și aplicația ta funcționează excelent. Și dacă aveți un fel de telefon „chinezesc” (sau chiar un telefon de marcă, non-top-end), atunci acesta nu mai este pe listă și, în consecință, performanța aplicației este scăzută.
Google explică acest lucru prin grija de utilizatori. Ei spun că browserul poate fi instabil pe smartphone-urile de marcă care nu sunt de top. Da, desigur... Conform observațiilor mele, toată această „instabilitate” se reduce la închiderea aplicației sub sarcini extrem de mari (de exemplu, crearea simultană a 200-300 de obiecte).

Pentru a realiza performanță maximă. Să o oprim această funcție. Pentru a face acest lucru, creați în director projectDirectory\platforms\android\assets fisier text xwalk-linie de comandă care va conține o singură linie:

Xwalk --ignore-gpu-lista neagră

Toate. Mai punem cap la cap un alt proiect și îl testăm... Drept urmare, performanță excelentă (50-60 FPS). Rezultatul a fost atins.

O aplicație hibridă combină elemente atât ale aplicațiilor native, cât și ale aplicațiilor web. Dezvoltarea aplicației native se face pentru o anumită platformă și se instalează pe dispozitiv digital. În timp ce creați aplicatii mobile, HTML5 oferă mai multe alternative care au propria lor dinamică și funcționalitate.

Această structură este utilă și pentru proiectarea aspectului intern și extern al aplicației, atunci când aplicația este gata cu care va funcționa folosind HTML, JavaScript și CSS.

Deci, de ce sunt aplicațiile hibride atât de populare? Acest lucru se datorează ușurinței și simplității dezvoltatorilor care scriu aplicații și posibilității de funcționare ulterioară a acestora pe orice platformă.

Crearea de aplicații mobile hibride

Mai jos este un grup de cadre HTML5 pentru ușurință de programare și proiectare:

Sencha Touch este un cadru JavaScript MVC de top pentru crearea de aplicații mobile multiplatforme care facilitează procesul de dezvoltare a aplicațiilor web folosind HTML5 și javascript. Această platformă include o gamă largă de produse care funcționează de la început. Sencha Touch folosește tehnici de accelerare hardware pentru a oferi performanta ridicata componente interfața cu utilizatorul pentru dispozitive mobile.

Cu peste 50 de componente UI încorporate și navigare prin teme pentru toate cele mai importante platforme mobile Sencha Touch oferă tot ce aveți nevoie pentru a crea aplicații impresionante care rulează pe iOS, Android, BlackBerry, Windows Phone, și multe altele. Aspect adaptiv, animație linăȘi defilare lină permite dezvoltatorilor să creeze aplicații care răspund la acțiunile utilizatorului aproape instantaneu, similar tehnologiilor native.

Cadrul include un pachet de date de încredere care poate primi date de la orice sursă de date backend. Un pachet avansat de diagrame vă permite să vizualizați datele pe dispozitivele mobile. Temele cu aspect nativ pentru fiecare platformă majoră vă permit să creați aplicații hibride și web care se potrivesc cu aspectul și senzația platformelor dvs. țintă.

  1. ionic

Gratuit și open source, Ionic oferă o bibliotecă de componente și instrumente HTML, CSS și JS optimizate pentru mobil pentru crearea de aplicații web interactive native și progresive. Ionic, care vine cu un set de caracteristici exclusive, poate fi numit un pionier în domeniul dezvoltării de aplicații mobile hibride.

Clară, simplă și funcțională, platforma Ionic a fost concepută să funcționeze și să se afișeze frumos pe toate dispozitivele și platformele mobile moderne. Cu componente pregătite pentru mobil și o temă de bază uimitoare care se adaptează fiecărei platforme.

Telerik Kendo UI este o extensie a cadrului HTML5, acționând ca una dintre cele mai bune platforme pentru dezvoltatorii care doresc să creeze aplicații mobile multiplatforme. Aceste cadre se bazează în mare măsură pe JQuery și includ o serie de widget-uri bazate pe JQuery. Cadrul JavaScript este disponibil și în acest cadru deschis și aceasta este caracteristica sa distinctivă.

Fanii lui Angular (Angular este un cadru open source cod sursa) și bootstrap (Bootstrap este un set gratuit de instrumente pentru crearea de site-uri web și aplicații web) pot folosi interfața mobilă Angular UI și au, de asemenea, posibilitatea de a adăuga atât Bootstrap 3, cât și cadrul Angular pentru crearea HTML5. Extensia de bază Bootstrap 3 este foarte asemănătoare cu Angular; cu toate acestea, nu depinde de JS, Bootstrap sau JQuery. Mobile Angular UI folosește overthrow.js și fastclick.js pentru a obține experiențe mobile pentru toți cei care îl folosesc.

Intel XDK for vine cu un set complet de instrumente utilizate pentru a dezvolta, testa și emula, depana și publica aplicații hibride HTML5 multiplatformă. Acesta este, de asemenea, un cadru open source susținut de Intel Corporation. Temele furnizate de acest cadru acceptă Android, Windows, Blackberry etc.

Onsen UI este un cadru relativ nou; cu toate acestea, oferă o provocare platformelor grele existente, în special pentru Ionic. Este o platformă open source furnizată sub licența Apache. Pentru majoritatea componentelor sale de interfață cu utilizatorul, sunt utilizate directive Angular și cadre de nivel superior.

M Project, un cadru HTML5 JavaScript pentru mobil, este utilizat pentru a construi aplicații web cross-mobile instalate pe Backbone.js. Se integrează cu ușurință cu PhoneGap pentru a ajuta la crearea aplicației este una dintre caracteristicile sale principale. Acest cadru simplu este folosit pentru dezvoltarea rapidă a aplicațiilor.

În esență, o aplicație mobilă HTML open source, Jo se integrează cu ușurință cu PhoneGap și Cordova pentru dezvoltarea de aplicații. Poate folosi în mod liber cadrul open source, poate ajuta, de asemenea, la schimbare aspect aplicații care folosesc CSS.

Este timpul să vorbim despre evoluția aplicațiilor mobile. Pentru a înțelege cum funcționează majoritatea aplicațiilor, nu este nevoie să aveți cunoștințe profunde în acest domeniu. Este suficient să înțelegeți cum funcționează HTML, CSS și JavaScript. Folosind tehnologii web, sunt create aplicații care rulează diverse platforme, spre deosebire de aplicațiile native.

Astăzi, există diverse instrumente și cadre care ne ajută să creăm aplicații mobile fără prea multe dificultăți.

În acest articol ne vom uita la primele 7 astfel de cadre.

IONIC este unul dintre cele mai promițătoare cadre pentru aplicații mobile Bazat pe HTML 5. Construit folosind SASS, care oferă un numar mare de Componente UI care vă permit să creați aplicații interactive. Folosit pentru a lansa aplicații cadru JavaScript MVVM și AngularJS. Fixarea bidirecțională a datelor, interacțiunea cu serviciile backend și API-urile fac din AngularJS cel mai popular printre dezvoltatorii de aplicații. Nu există nicio îndoială că va deveni și mai popular după lansare versiune noua AngularJS 2.0, mai întâi pe mobil.

Echipa IONIC va prezenta în curând asistent nouîn crearea aplicațiilor IONIC numite „IONIC creator”. Va fi anunțat foarte curând și va suporta drag and drop, ceea ce va face crearea aplicației mult mai rapidă.

Pentru a cunoaște mai bine IONIC, puteți citi articole despre începerea cu aplicațiile mobile și dezvoltarea de jocuri bazate pe Firefox OS.

Mobile Angular UI este un cadru bazat pe HTML 5 care utilizează bootstrap 3 și AngularJS pentru a crea aplicații mobile interactive.

Principalele caracteristici ale Mobile AngularUI includ:

  • Bootstrap 3
  • AngularJS
  • Componentele mobile Bootstrap 3, cum ar fi ramificarea, suprapunerile și barele laterale care nu erau prezente în bootstrap obișnuit.
  • Module AngularJS, cum ar fi angular-route, unghiular-touch și unghiular-animate.

Interogările media de răspuns sunt separate de program bootstrapși tot ce trebuie să faci este să alegi ceea ce îți trebuie. Mobile Angular UI este independent de jQuery, așa că tot ce aveți nevoie pentru a crea o aplicație mobilă sunt câteva directive AngularJS.

Pentru a vedea Mobile Angular UI în acțiune, aruncați o privire pe pagina demo. De asemenea, vă recomandăm să citiți instrucțiunile despre cum să începeți cu Mobile Angular UI.

Intel XDK este o dezvoltare multiplatformă de la Intel. Este destul de ușor de lucrat, trebuie doar să descărcați aplicații gratuite, care sunt compatibile cu Linux, Windows și Mac. Conține multe șabloane pentru a începe și acceptă cadre UI, cum ar fi Twitter bootstrap, jQuery Mobile și Topcoat.

Intel XDK oferă previzualizareîn timp real pe dispozitivul conectat, în timp ce puteți explora alte instrumente interesante.

În opinia noastră, Intel XDK este cel mai ușor de utilizat. Folosește glisare și plasare, ceea ce evită multă muncă.

În introducerea în lucrul cu Intel XDK, veți găsi o cantitate mare de materiale de instruire despre lucrul cu platforma.

Appcelerator Titanium este o resursă deschisă pentru cadre de aplicații mobile care oferă un cadru pentru crearea de aplicații native pentru mai multe platforme mobile.

Titanium este o dezvoltare excelentă în care veți găsi tot ce aveți nevoie pentru a crea aplicații mobile hibride. Pentru a lucra cu Titanium, descărcați Titanium Studio. Titanium SDK conține mai multe API-uri de platformă și un serviciu Cloud care funcționează ca stocare. Vine cu o platformă API independentă, care facilitează accesul pe un dispozitiv mobil.

Titanium folosește Alloy, un cadru MVC pentru a accelera aplicațiile mobile. Modulele create cu Alloy sunt ușor de reutilizat în mai multe aplicații, reducând astfel în mod semnificativ timpul de rulare și liniile de cod.

Titanium Studio conține câteva exemple de cod și sperăm să avem videoclipuri de instruire pe SitePoint în curând.

Sencha Touch este un cadru HTML 5 pentru crearea de aplicații pentru platforme precum iOS, Android și Blackberry și multe altele. Există de câțiva ani, dar a devenit relativ recent popular printre dezvoltatorii de aplicații mobile hibride.

Sencha Touch este mai avansat decât adversarii săi când vine vorba de crearea de aplicații native pentru diverse platforme.

Lucrul cu el nu este, de asemenea, dificil, dar pentru a obține tot ce este mai bun din el, va trebui să petreci destul de mult timp.

Pentru a aprecia pe deplin beneficiile Sencha Touch, aruncați o privire la exemplele de coduri de pe site-ul oficial.

Interfața de utilizare Kendo de la Telerik - cadru HTML 5 pentru crearea de aplicații mobile multi-platformă. Kendo UI se bazează în mare măsură pe jQuery și conține o serie de widget-uri bazate pe jQuery.

Nu este greu să lucrezi cu el. Dezvoltatorii familiarizați cu jQuery vor aprecia ușurința de a lucra cu Kendo UI. Kendo UI are o resursă deschisă de instrumente și cadre JavaScript.

Cu toate acestea, majoritatea widget-urilor utilizate sunt încă disponibile numai sub o licență comercială.

Vedere documentație oficială pentru lucrul cu Kendo UI. Acolo vei găsi tutoriale video care te vor ajuta să înveți acest cadru.

PhoneGap este puțin în afara listei noastre, deoarece nu este un cadru pentru crearea unei aplicații, ci pentru ambalarea și lansarea acesteia. Programul plătit PhoneGap este open source Cordova și deținut de Adobe. Popular printre mulți dezvoltatori de aplicații mobile.

Pentru a lucra cu PhoneGap, puteți alege între cadre JavaScript sau UI. Combinațiile de jQuery Mobile și KnockOut.js sau AngularJS sunt bune. Odată ce ați terminat cu codul, PhoneGap termină toate lucrările rămase pe platforma cu care lucrați. Aplicațiile create cu PhoneGap folosesc o vizualizare web pentru a furniza conținut. PhoneGap conține set minim API web pentru accesarea capabilităților unui dispozitiv mobil și vă permite să scrieți pluginuri solicitate.

Veți găsi instrucțiuni pentru lucrul cu PhoneGap.

Primă

App.js - Biblioteca JavaScript pentru crearea de aplicații mobile. Acest cadru, spre deosebire de altele, nu folosește AngularJS. Acesta oferă mai multe teme și widget-uri de bază. Puteți scrie o aplicație folosind zepto sau jQuery.

Concluzie

În acest articol am analizat unele dintre cele mai bune cadre mobile aplicații HTML 5. HTML mobil 5 se dezvoltă bine și oferă noi opțiuni în fiecare zi. Ce cadre preferi? Distribuie in comentarii.

Dezvoltare de aplicații hibride

Articolul oferă informații de bază despre aplicațiile hibride pentru sistemele de operare mobile, folosind sistemul de operare ca exemplu. sisteme Android. Sunt luate în considerare principalele avantaje și dezavantaje, aspecte comuneși diferențele dintre aplicațiile mobile native și hibride și elementele necesare ale aplicațiilor hibride.

Laptop, Tablet PC, carte electronică, smartphone - aceasta este doar o listă parțială de dispozitive mobile pe care oamenii le folosesc în fiecare zi pentru muncă, studiu, comunicare și petrecere a timpului liber. Cu toate acestea, aceste dispozitive sunt de obicei gestionate de propriul sistem de operare (OS) separat (iOS, Android, Windows Phone, BlackBerry etc.). Acest lucru creează anumite inconveniente pentru schimbul de informații între ei prin intermediul aplicațiilor încorporate.

Pentru a crea o aplicație mobilă încorporată pentru orice sistem de operare, trebuie să înveți un limbaj de programare, precum și un SDK - kit de dezvoltare software - un pachet de dezvoltare specializat care ține cont de caracteristicile unui anumit sistem de operare mobil. De exemplu, pentru a crea o aplicație mobilă încorporată pentru un sistem de operare, trebuie să cunoașteți limba Programare Javași pachet Android SDK. Această condiție impune anumite restricții asupra dezvoltatorilor care trebuie să aleagă o direcție specifică pentru a lucra.

Soluția la această problemă, pe de o parte, poate fi considerată crearea de aplicații web, această opțiune familiar pentru dezvoltatorii web care folosesc HTML, PHP și JavaScript în munca lor. Cu alte cuvinte acest tip aplicații este un serviciu web pe Internet. Pentru a-l utiliza, utilizatorul trebuie să deschidă un browser web pe dispozitivul său mobil, să introducă adresa site-ului în bara de adrese și să înceapă să folosească serviciul. Algoritmul de mai sus este adesea foarte incomod.

Aceste două tehnologii au propriile lor avantaje și. Aplicațiile încorporate sunt descărcate o singură dată dintr-un depozit public de aplicații și, în viitor, nu necesită o conexiune la Internet, dar, pe de altă parte, așa cum am menționat mai sus, procesul de creare a aplicațiilor încorporate pentru diferite sisteme de operare mobile este un sarcină complexă și intensivă în muncă. Aplicațiile web sunt multiplatforme și necesită doar un browser web și o conexiune la internet. Pe de altă parte, astfel de aplicații au un acces semnificativ limitat la resursele interne ale dispozitivului.

Aplicațiile mobile hibride sunt o soluție unică. Pentru a le crea, aveți nevoie de cunoștințe minime despre aplicațiile mobile încorporate și Android, precum și cunoștințe despre tehnologiile web. Aplicațiile hibride, cum ar fi aplicațiile web, sunt programate folosind tehnologii web, dar sunt ambalate ca aplicații încorporate. Aceste aplicații mobile sunt distribuite prin magazine publice de aplicații, la fel ca și cele încorporate. Spre deosebire de aplicațiile web, acestea au acces direct la resursele dispozitivului mobil, ceea ce le face mai funcționale.

Cel mai popular instrument pentru dezvoltarea aplicațiilor mobile hibride este platforma software PhoneGap. Acesta este un cadru open-source gratuit pentru crearea de aplicații mobile care vă permite să creați aplicații pentru dispozitive mobile folosind JavaScript, HTML5 și CSS3, fără a fi nevoie să cunoașteți limbaje de programare „native” pentru toate sistemele de operare mobile. Motorul PhoneGap extinde API-ul browserului și adaugă următoarele caracteristici: acces la accelometru, acces la cameră, busolă, lista de contacte, înregistrare și ascultare de fișiere audio, oferă acces la Sistemul de fișiere, vă permite să lucrați cu diferite stocări HTML5 localStorage, Web SQL și vă permite să accesați fără probleme orice adresă între domenii.

PhoneGap oferă un set de interfețe JavaScript pentru a accesa multe caracteristici ale dispozitivului care nu sunt disponibile din browserele Web mobile pentru aplicațiile Web tipice. Acest lucru se realizează prin utilizarea unei aplicații Web în interiorul unui wrapper încorporat. PhoneGap combină codul aplicației Web cu redarea browserului dispozitivului pentru a crea o aplicație nativă care poate fi implementată în magazinul de aplicații și instalată pe dispozitiv.

În plus, funcționalitatea de bază a PhoneGap poate fi extinsă prin utilizarea pluginurilor suplimentare dintr-un depozit special. În prezent există un set de pluginuri pentru patru sisteme de operare: iOS, Anfroid, BlackBerry și Palm.

Pe lângă platforma în sine pentru aplicații mobile, PhoneGap oferă acces la „clodul” său, în care poți asambla un proiect și îl poți descărca pe dispozitivul tău mobil fisier executabil. Pentru a accesa „norul” trebuie să vă înregistrați pe site-ul oficial PhoneGap Build și după aceea „colectorul” online de programe va deveni disponibil. Demnitate a acestui serviciu este disponibilitatea sa generală și o bibliotecă mare de dezvoltări open source de la alți utilizatori. Pe de altă parte, acest avantaj este și un dezavantaj. Faptul este că în versiunea gratuită a serviciului este disponibil doar ansamblul aplicațiilor open source, adică. Odată construit, codul aplicației dvs. este publicat în biblioteca de aplicații și devine disponibil pentru alți dezvoltatori ca Sursa deschisa proiect. Construirea de aplicații cu cod închis disponibil numai în versiunea platita serviciu.

PhoneGap este un cadru care vă permite să „reprocesați” un site web și să îl transformați într-o aplicație încorporată condiționat. Datorită utilizării interfețelor JavaScript încorporate, este oferit accesul la multe funcții ale dispozitivului care nu sunt disponibile de pe dispozitivele mobile. Browsere web. Când utilizați funcționalitatea PhoneGap, puteți extinde semnificativ funcționalitatea serviciului web, dar acesta va rămâne în continuare o resursă pe Internet. Pentru ca un serviciu web să devină o aplicație mobilă, este, de asemenea, necesar să se creeze o interfață mobilă care va face parte din aplicația încorporată. Există un număr mare de cadre pentru creare interfata mobila. Un astfel de cadru este Dojo.

Dojo

Elementele de interfață Dojo sunt pachete formate din componente: cod JavaScript, Marcaj HTMLși CSS. De fapt, nu sunt elemente View „native” pentru aplicațiile Android, sunt încă aceleași elemente web, dar special adaptate și stilate pentru dispozitive mobile; Astfel, utilizatorul are senzația deplină că lucrează cu o aplicație mobilă încorporată.

Părți ale pachetului Dojo pot fi folosite pentru a adăuga diverse caracteristici interactive site:

  • meniu, marcaje, sfaturi cu instrumente;
  • selectoare de dată, oră, ceas;
  • tabele sortabile, diagrame dinamice, grafică vectorială 2D;
  • elemente de interfață „tree” cu capabilități de glisare și plasare (seturi imbricate);
  • Editor de text îmbogățit;
  • efecte animate și construirea proprie.

În consecință, PhoneGap adaptează site-ul pentru un dispozitiv mobil și, folosind elemente de interfață Dojo, îl face să arate ca o aplicație încorporată, astfel încât elementul principal al părții încorporate este aplicații Android va fi un Webview, adică un browser web încorporat într-o aplicație mobilă simplă. Pentru a crea aplicații hibride, partea sa încorporată, dezvoltatorii sistemului de operare mobil Android recomandă utilizarea mediului de dezvoltare Eclipse.

La fel ca pentru o aplicație încorporată obișnuită, pentru o aplicație hibridă Android standard Applicatoin este un proiect care conține, ca adaos, biblioteca PhoneGap.jar și un set de script-uri Dojo incluse în proiect după cum este necesar sub formă de fișiere js.

Diferența față de proiectul standard este utilizarea metodei loadurl() în fișierul principal App.java, care, în principiu, face ca aplicația încorporată să fie parte a uneia hibride, de exemplu. Când pornește aplicația, se încarcă serviciul web, nu Activitatea încorporată.

Când dezvoltați aplicații hibride, mai întâi trebuie să creați o aplicație web simplă folosind tehnologii web, să o depanați și să o testați cu atenție într-un browser pe un computer și apoi să începeți să o adaptați pentru dispozitive mobile prin crearea unei părți încorporate a aplicației.

Acum vreo 2 ani am vrut sa cumpar un microfon. Ca de obicei, înainte de a cumpăra, m-am uitat la câteva recenzii dintre cele mai multe modele populare, am aflat despre caracteristicile care disting microfoanele și am mers pe site-ul magazinului de unde urma să achiziționez dispozitivul. Alegerea mea a căzut pe modelul M1 (pentru a exclude acuzațiile de publicitate și plasare de produse, vom schimba numele microfonului). Acest model a venit în două configurații: un microfon obișnuit și o opțiune cu conexiune USB, care era mai scumpă. În afară de asta, cele două variante nu au fost diferite. Bine, hai să luăm banii și să mergem la magazin. Ambele modele au fost expuse în magazin. Am prins-o pe fata consultantă și am cerut să-mi arate microfonul care mi-a plăcut. „Vrei să iei acest model?” a întrebat fata, arătând spre o versiune mai scumpă cu USB. „Este ea mai bună? Mai exact in ceea ce priveste sunetul? Fata s-a gândit o clipă: „Da, desigur că e mai bine!” Sfatul meu: nu aveți încredere în vânzători!

Dar pe cine să creadă? Când dorim să cumpărăm un produs sau un serviciu, comunicăm cu vânzători care, din păcate, nu sunt experți în această problemă. După părerea mea, există o singură cale de ieșire în această situație. Luați totul în propriile mâini și, cel puțin superficial, înțelegeți problema care vă interesează sau găsiți un profesionist în acest domeniu și aflați-i părerea. Hai să facem asta. Întrebarea pe care o vom înțelege este: „Ce este mai bine – aplicații native sau hibride pentru platformele mobile?”

Hibrizi vs linii drepte

Pentru a ajunge de unde să începem, să apelăm la o metodă încercată și adevărată - Google problema care ne interesează. Google returnează zeci de articole scrise ca și cum ar fi copii. Diverse tipuri de bloggeri, programatori, manageri, agenți de publicitate, mame ale agenților de publicitate, bunici ale managerilor și alți oameni care sunt „excelenti” în acest număr încearcă să ne transmită următoarele lucruri într-un mod interesant, individual și plin de umor:

  1. Există aplicații web pure care arată aproape ca cele native. De exemplu, app.ft.com. Ele ar trebui separate de cele hibride.
  2. Aplicațiile web pure nu funcționează fără o rețea.
  3. O observație interesantă: conținutul aplicațiilor web pure este mai ușor de căutat. Doar introduceți interogarea care vă interesează într-un motor de căutare și, dacă Google vă iubește, utilizatorul vă va vedea site-ul pe prima pagină a rezultatelor căutării.
  4. O altă observație interesantă: hibrid și aplicații native trebuie să respecte anumite reguli pentru a fi publicat în AppStore sau GooglePlay. Pe de altă parte, vă puteți crea cu ușurință propria dvs. aplicație web confortabilă, cu un design murdar și atrăgător, și nimeni nu vă va spune un cuvânt.
  5. Costurile forței de muncă la scrierea aplicațiilor hibride sunt mai mici în comparație cu cele native, deoarece tot codul este scris pe toate platformele simultan.

    6. Și sunt necesari mai puțini dezvoltatori. Să găsim doar câțiva băieți puternici care știu HTML și JavaScript. Ne vor scrie totul. În caz contrar, căutați tot felul de dezvoltatori Java, C#, C++, Objective-C și apoi plătiți toată mulțimea.

  6. Sprijinirea aplicațiilor hibride este mai ieftină, deoarece, din nou, se pare că codul este același pentru toate platformele. Îl schimbăm într-un singur loc - și ai terminat.
  7. Aplicațiile native sunt mult mai rapide decât aplicațiile hibride și web.
  8. O aplicație nativă poate funcționa cu toate componentele dispozitivului, în timp ce aplicațiile hibride și web au acces limitat. De exemplu, accesul la cameră în aplicațiile native este un dat. Dar pentru ca hibridul să facă o fotografie cu camera dvs., trebuie să o evitați.>
  9. Când dezvoltăm aplicații native, obținem o interfață de utilizare originală pentru fiecare platformă. Hybrid și web nu pot face acest lucru.

Smulgem copertele

S-ar părea că acum știm diferența dintre aplicațiile hibride și cele native. În acest moment, puteți termina cu calm articolul și puteți trece la treabă - mergeți să scrieți codul. Dar nu! Ne amintim: „Nu aveți încredere în vânzători!” Și cei mai mulți dintre cei care au scris toate aceste puncte sunt vânzători, într-o formă sau alta. Deci, să ne dăm seama mai departe.

Aplicații Web

Însăși ideea unui site web care arată ca o aplicație este, desigur, interesantă. Această abordare are atât dezavantaje, cât și anumite avantaje. Dar există o mare întrebare: „De ce?” Imaginați-vă că sunteți un utilizator care nu este împovărat cu cunoștințe speciale despre tehnologiile IT. Deschizi un site web și... Doamne! Aplicația mea s-a deschis! Demoni! Probabil este un fel de virus! Dar stai, de ce este vizibilă linia browserului? Acesta este un site sau ceva? Sau mai este o aplicație? Hmm, nu este în lista instalate. Funcționează teribil de încet. O sa-l instalez mai bine aplicare normală, dar nu inteleg ce este asta.

În general, sensul tuturor acestor mime nu este pe deplin clar. De ce să induceți în eroare utilizatorul? La urma urmei, cineva ar putea crede că aceasta este o aplicație și s-ar putea aștepta la un comportament în concordanță cu aplicare regulată. Aș dori să fac următoarea comparație: să găsim o piatră sănătoasă forma rotundași pictează-l ca să arate ca o minge de fotbal. Și apoi îl vom întreba pe primul potențial jucător de fotbal cu un picior rupt despre impresiile sale despre mișcarea noastră de design original.

Hibrizi

Din experiența cu PhoneGap și alte cadre acest fel Nu am multe, așa că am decis să discut această problemă cu dezvoltatorul nostru JS/HTML, care a scris programul folosind cadrul PhoneGap. Se pare că majoritatea problemelor descrise au fost acum rezolvate. Pe această pagină, Black Lordul deghizat ne promite că acum răspunsul la clicuri va fi rapid și nedureros. Există un vagon și un mic cărucior cu diverse plugin-uri care vă permit să accesați diverse sisteme dispozitivul țintă. Și dacă ceva lipsește, atunci poți să-ți scrii propriul plugin. Și se pare că aici este - o soluție excelentă pentru dezvoltarea de aplicații mobile pe mai multe platforme! Dar să ne gândim mai profund la această problemă.

Care sunt aceste pastile magice - pluginuri care rezolvă toate problemele? Poate că acesta este un fel de magie? Din păcate, nu există magie în lumea noastră. Cel putin in IT. Pluginurile sunt pachete JavaScript peste codul nativ Android sau iOS. Deci, în esență, PhoneGap este o interfață grafică care este de fapt o aplicație web care rulează într-un WebView. Partea logică a programului, executată folosind plugin-uri, care sunt de fapt apeluri la codul nativ prin JavaScript, interacționează cu dispozitivul. Acum, cunoscând componentele unei aplicații fongap, putem specula despre cum va funcționa totul.

  1. Ce știi despre durere? WebView pentru versiuni Android 4.3 este teribil de lent atunci când trebuie să afișați ceva mai complex decât informațiile text. În versiunea 4.4, motorul pentru WebView a devenit Chromium, așa că poate că acest lucru va îmbunătăți puțin situația. În general, pentru toți utilizatorii și oamenii lor, acest lucru înseamnă durere și suferință atunci când încercați să rulați o aplicație pe Android. Pe iOS situația cu aceasta este mult mai bună, deoarece motorul Safari funcționează mai bine.
  2. - Scuză-mă, ești femeie? „Voi fi orice vrei tu, iubito.”În funcție de dispozitiv, aplicațiile pot fi folosite pentru interfață stiluri diferite. Acest lucru, desigur, nu este rău, dar nu schimbă logica designului. Există un buton „Înapoi” pe iOS, ceea ce înseamnă că va fi și pe Android. Și nu contează că nimeni nu are nevoie de ea acolo. Un alt exemplu este Actionbar. Pe iOS este situat în mod tradițional în partea de jos a ecranului, pe Android este în partea de sus a ecranului. În aplicația PhoneGap, Actiobar-ul tău nu își va schimba poziția în funcție de dispozitiv, ci doar va arăta diferit. Și încă ceva: fiecare OC are anumite caracteristici. De exemplu, animație. Uită-te la iOS și Android. Animație de tranziții între ecrane. Ea este diferită! Aplicațiile hibride nu vor putea replica aceste funcții.
  3. Devastarea nu este în dulapuri, ci în capete. O alta factor important, care dintr-un motiv oarecare nu ia în calcul nimeni. Dezvoltatorii de pe PhoneGap sunt de obicei dezvoltatori front-end. Nu au idee cum ar trebui să arate interfața pentru Android sau iOS, deoarece nu au citit ghidurile de stil. Nu știu nimic despre caracteristicile platformei pentru că nu au citit documentația. Dar sunt buni la crearea de site-uri web. În consecință, veți primi o aplicație similară site-ului web. Ai nevoie de el? Chiar ai nevoie de ea? Uită-te la această poză? Mai ești încrezător în alegerea ta?
  1. Gnomi? Esti tu? Alături de pluginuri. Acestea sunt doar bucăți de cod care rezolvă unele probleme. Le puteți folosi și într-o aplicație nativă. Problema este că adesea aplicația dvs. trebuie să rezolve probleme care sunt puțin diferite de cele pe care le rezolvă aceste bucăți de cod. Adică vor trebui schimbate, dar cine o va face? Dezvoltatorul dvs. cunoaște numai JavaScript și HTML. Un alt punct subtil este combinația de pluginuri de la diferiți dezvoltatori. Dacă pluginurile funcționează în domenii conexe, ele pot folosi aceleași componente. Acest lucru poate duce la efecte secundare interesante. Și ultima piatră din grădina pluginurilor: unele dintre ele nu sunt deosebit de populare și, ca urmare, prost testate. Fii pregătit pentru faptul că tu însuți va trebui să acționezi ca un tester.

În general, ce vreau să spun? Multiplatformă în în acest caz, imaginare, iar aplicațiile vor părea ciudat. Cred că aplicațiile hibride ar trebui folosite ca prototipuri în care puteți evalua reacția utilizatorilor la ideea dvs. și puteți obține feedback. Pentru versiunea de producție este mai bine să folosiți aplicații native. Aceste considerații sunt relevante pentru toți hibrizii care lucrează pe o combinație de HTML/JS.

Nativ

Nu voi scrie nimic special despre cei nativi. Totul este clar aici. Lucrează rapid, arată bine, oportunități ample personalizare. Și costă în consecință. Deși primele trei puncte sunt relevante doar dacă nu ați angajat o echipă de profesioniști puternici cu șapte ani de experiență din New Delhi.

Cu adevărat multi-platformă

În opinia mea, singurul cadru care vă poate permite cu adevărat să scrieți o aplicație mobilă multiplatformă în acest moment este C++ Qt. Acest cadru generează cod Android nativ cu folosind Android NDK. Prin urmare, performanța ar trebui să fie la nivelul codului scris de un programator care utilizează SDK-ul Android, iar pentru fragmentele care folosesc calcule grele chiar mai mari - datorită NDK-ului. Qt este o bibliotecă de înaltă calitate, testată. Aceasta înseamnă că nu veți prinde niciun bug stupid în acest proces. În cazul oricărei probleme, puteți arunca o privire la sursele Qt. Aceasta este într-adevăr o caracteristică foarte necesară pentru dezvoltatori. În unele cazuri, aceasta este singura modalitate de a depăși bug-ul. Pentru a obține programul pentru platforma tinta(Android sau iOS), trebuie doar să recompilați sursele. Deși, din câte știu, uneori mai trebuie să scrieți cod nativ pentru platformă, deoarece nu toate caracteristicile sunt disponibile prin bibliotecile Qt. Sperăm că acest lucru va fi rezolvat în curând.

Dar există și dezavantaje. Pentru dezvoltarea producției, va trebui să achiziționați o licență Qt - care, în consecință, costă bani. Aceasta este o problemă serioasă pentru dezvoltatorii noi. În plus, în acest moment, Qt pentru dezvoltare mobilăîncă umed. Așteptăm următoarele lansări.

Concluzie

În momentul de față, nu există niciun instrument care ar putea fi numit, în bună conștiință, un adevărat mediu multiplatform pentru dezvoltarea aplicațiilor mobile. Poate că în viitor acest loc va fi ocupat de Qt, dar în acest moment este vacant. Pentru a-ți testa ideea prin dezvoltarea unui prototip, poți folosi cu ușurință diverse cadre JS/HTML, dar nu aș recomanda să le folosești pentru dezvoltarea aplicațiilor complexe de producție. În acest domeniu de dezvoltare, în prezent nu există nicio alternativă la aplicațiile native.