Creați aplicații web native pe Android cu Apache Cordova

Combinat cu un cadru de interfață cu utilizatorul, cum ar fi jQuery Mobile sau Dojo Mobile, acesta permite o aplicație în formă nativă, dar dezvoltată în HTML, CSS și Javascript. Acest lucru implică faptul că, dacă avem o aplicație web, o putem converti într-o aplicație nativă pentru Android, deoarece Apache Cordova va funcționa ca un server web încorporat pe dispozitivul nostru mobil.
Acest Api ne oferă posibilitatea de a construi aplicații mobile care vor rula local pe dispozitivul mobil și se vor baza pe proiectarea și dezvoltarea Web, astfel încât cu Apache Cordova putem accesa prin Javascript funcționalitățile dispozitivului mobil, cum ar fi camera, datele, conexiuni wifi sau rețele, tastatură sau sunet, geolocalizare, propria noastră bază de date încorporată și orice altă funcționalitate disponibilă.

Pentru acest tutorial vom folosi Netbeans 8.0.2 care vine cu Apache cordova instalat, dar vom vedea și cum să-l instalăm de la zero pentru a-l putea folosi cu orice alt editor, inclusiv unul la fel de simplu ca Notepad ++ sau Bluefish.
Este necesar să aveți Android sdk, Manager dispozitiv Android Da Java jre instalat, indicând de asemenea executabilele către variabilele de sistem.
Pentru a începe trebuie să instalăm node.js, acea este un cadru care vă permite să creați un server care utilizează javascript ca limbă client iar Cordova este instalat folosind managerul de pachete numit NPM care face parte din Node.js.
Instalarea se va face mai întâi pe Linux, vom accesa terminalul în modul root și vom descărca fișierul node.js cu următoarea comandă:

wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz

Dezarhivați și copiați într-un alt director

sudo tar -C / usr / local --strip-components 1 -xzf node-v0.10.34-linux-x86.tar.gz

Instalăm pachetele corespunzătoare

 ls -l / usr / local / bin / node ls -l / usr / local / bin / npm 

Apoi trecem la instalatorul Apache Cordova

sudo npm install -g cordova

Pentru a verifica dacă a fost instalat corect putem scrie în terminal cordova -v și va returna versiunea de Apache Cordova instalată.
După instalare putem crea aplicații cu Cordova, pentru a crea o aplicație mergem la un director de proiect pe care îl avem și apoi de la terminal scriem comenzile sugerate:
Structura de comandă va fi:

cordova creează directorul de proiect component.package.class

deci, de exemplu, aplicația noastră va fi:

cordova create misapp com.tutoriales.misapp MiApp01

Aceasta va crea structura proiectului și va descărca toate pachetele necesare și actualizate pe care le vom folosi în aplicația noastră.

cordova emulează Android

Putem vedea cum a fost creat directorul misapp, în cadrul structurii aplicației și acolo putem găsi următorul conținut.
În dosar platforme Conține fișierele necesare pentru ca Cordova să poată interacționa cu diferite dispozitive, aici vom adăuga platformele pe care dorim să le testăm aplicația.
Exemplu de la terminal vom executa următoarea comandă pentru a utiliza platforma Android

platforma cordova adaugă android

Rezultatul va fi:

 # / projects / misapp / www $ cordova platform add android Crearea proiectului Android … Crearea proiectului Cordova pentru platforma Android: Calea: platforme / android Pachetul: com.tutoriales.misapp Nume: MiApp01 Țintă Android: android-19 Copierea fișierelor șablon … Proiect creat cu succes. 

Aceasta va configura un emulator valid pentru Versiunea Androd 19 ceea ce este el Versiunea API 19 sau, de asemenea Android 4.4 (KITKAT), adică putem emula orice dispozitiv care rulează această versiune sau o versiune inferioară. Unele platforme acceptate sunt Sistem de operare Amazon Fire, Android, BlackBerry, OS Firefox, iOS, Windows Phone, În acest tutorial ne vom concentra pe Android.
În agenda de adrese www Acolo va fi dezvoltată aplicația în sine, vor fi găzduite fișierele HTML, CSS, imagini și Javascript, precum și toate resursele necesare pentru aplicația noastră, amintiți-vă că este o pagină web care va rula nativ pe un server și, de asemenea, un browser web încorporat care va rula ca aplicație nativă pe Android.
Când ne creăm proiectul în director www, va fi creată o structură generică de proiect definit cu codul necesar pentru a rula o aplicație simplă de tip "Salut Lume„Așadar, avem un exemplu sau șablon al unei aplicații executabile pentru a testa că funcționează înainte de programare, totuși, pentru a o rula, trebuie mai întâi să adăugăm platforma sau platformele, de exemplu, dacă vrem să o testăm pe dispozitivele Android și iOS utilizați următoarea comandă:
Pentru Android

cordova build Android

Pentru ios

cordova build iOS

Ori de câte ori executăm comanda în directorul aplicației, va ști că aceasta este aplicația de compilat. Odată compilat în director platforme / platforme / android / ant-build / va genera fișiere pentru noi.

CordovaApp-debug.apk

Care va fi fișierul apk instalabil și executabil pe orice dispozitiv Android. Pentru a-l rula, directorul aplicației trebuie să aibă permisiuni de acces complete. Acum îl vom executa pentru prima dată cu emulatorul pentru aceasta scriem în terminal.

cordova emulează Android

Putem vedea un dispozitiv generic care arată aplicația, facem clic pe el și putem vedea aplicația Apache implicită.
Acum putem începe să ne creăm aplicația editând fișierul index.html găsit în directorul www. Codul este simplu, meta detectează tipul de dispozitiv, ferestrele vor adapta conținutul la rezoluția și dimensiunea ecranului dispozitivului.
Restul codului este HTML5, fișierul cordoba.js va avea configurația serverului și fișierul index.js va fi locul în care vom programa scripturile noastre pentru a da interactivitate aplicației.

 Miapp01
Conectarea la dispozitiv
Dispozitivul este gata
Să facem câteva modificări cu Html5 și CSS3 pentru a testa și vom testa și un alt dispozitiv Să creăm un formular cu două câmpuri în stratul aplicațieiNume:
E-mail:
Căutăm folderul css din fișierul index.css și vom adăuga următorul cod pentru a stiliza butonul .btn {background: # 3498db; imagine de fundal: -webkit-linear-gradient (sus, # 3498db, # 2980b9); imagine de fundal: -moz-gradient-liniar (sus, # 3498db, # 2980b9); imagine de fundal: -ms-gradient-liniar (sus, # 3498db, # 2980b9); imagine de fundal: -o-liniar-gradient (sus, # 3498db, # 2980b9); imagine de fundal: gradient liniar (în jos, # 3498db, # 2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; raza chenarului: 28px; font-family: Arial; culoare: #ffffff; dimensiunea fontului: 20 px; umplutură: 10px 20px 10px 20px; decor-text: nici unul; } .btn: hover {background: # 3cb0fd; imagine de fundal: -webkit-linear-gradient (sus, # 3cb0fd, # 3498db); imagine de fundal: -moz-gradient-liniar (sus, # 3cb0fd, # 3498db); imagine de fundal: -ms-gradient-liniar (sus, # 3cb0fd, # 3498db); imagine de fundal: -o-liniar-gradient (sus, # 3cb0fd, # 3498db); imagine de fundal: gradient liniar (în jos, # 3cb0fd, # 3498db); decor-text: nici unul; } 

După ce ați făcut modificările, salvăm fișierele și rulăm din nou cu comanda cordova emulate Android, anterior am configurat un alt dispozitiv în Android Device Manager.

MARI

În cele din urmă, schimbările noastre funcționează, într-un alt tutorial vom vedea cum să realizăm diverse aplicații cu o complexitate mai mare.
Până acum vedem cum să creăm aplicația cu HTML5, CSS3 și Javascript sau Jquery mobil pentru diferite dispozitive mobile, indiferent dacă este un telefon mobil sau un televizor care acceptă Android. Un aspect foarte important de reținut este că întregul design ar trebui considerat adaptabil sau receptiv.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv