Crea applicazioni web native su Android con Apache Cordova

Combinato con un framework di interfaccia utente, come jQuery Mobile o Dojo Mobile, questo consente un'applicazione in forma nativa ma sviluppata in HTML, CSS e Javascript. Ciò implica che se disponiamo di un'applicazione Web, possiamo convertirla in un'applicazione nativa per Android, poiché Apache Cordova funzionerà come un server Web incorporato sul nostro dispositivo mobile.
Questa API ci dà la possibilità di creare applicazioni mobili che verranno eseguite localmente sul dispositivo mobile e si baseranno su progettazione e sviluppo Web, quindi con Apache Cordova possiamo accedere tramite Javascript alle funzionalità del dispositivo mobile come la fotocamera, i dati, connessioni wifi o reti, tastiera o suono, geolocalizzazione, il nostro database incorporato e qualsiasi altra funzionalità disponibile.

Per questo tutorial useremo Netbeans 8.0.2 che viene con Apache cordova installato ma vedremo anche come installarlo da zero per poterlo utilizzare con qualsiasi altro editor incluso uno semplice come Blocco note ++ o pesce azzurro.
È necessario avere SDK di Android, Gestione dispositivi Android sì Java jre installato, puntando anche gli eseguibili alle variabili di sistema.
Per iniziare dobbiamo installare nodo.js, Quello è un framework che ti permette di creare un server che usa javascript come linguaggio client e Cordova viene installato utilizzando il gestore di pacchetti denominato NPM che fa parte di Node.js.
L'installazione verrà eseguita prima su Linux, accederemo al terminale in modalità root e scaricheremo il file nodo.js con il seguente comando:

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

Decomprimi e copia in un'altra directory

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

Installiamo i pacchetti corrispondenti

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

Quindi procediamo al programma di installazione di Apache Cordova

sudo npm install -g cordova

Per verificare che sia stato installato correttamente possiamo scrivere nel terminale cordova -v e restituirà la versione di Apache Cordova installata.
Dopo l'installazione possiamo creare applicazioni con Cordova, per creare un'applicazione andiamo in una directory del progetto che abbiamo e poi dal terminale scriviamo i comandi suggeriti:
La struttura del comando sarà:

cordova crea la directory del progetto component.package.class

quindi ad esempio la nostra applicazione sarà:

cordova crea misapp com.tutoriales.misapp MiApp01

Questo creerà la struttura del progetto e scaricherà tutti i pacchetti necessari e aggiornati che utilizzeremo nella nostra applicazione.

cordova emula Android

Possiamo vedere come è stata creata la directory misapp, all'interno della struttura dell'applicazione e lì possiamo trovare il seguente contenuto.
Nella cartella piattaforme Contiene i file necessari affinché Cordova possa interagire con i diversi dispositivi, qui aggiungeremo le piattaforme su cui vogliamo testare la nostra applicazione.
Esempio da terminale eseguiremo il seguente comando per utilizzare la piattaforma Android

piattaforma cordova aggiungi Android

Il risultato sarà:

 # / progetti / misapp / www $ piattaforma cordova add android Creazione progetto Android… Creazione progetto Cordova per piattaforma Android: Percorso: piattaforme / android Pacchetto: com.tutoriales.misapp Nome: MiApp01 Destinazione Android: android-19 Copia file modello… Progetto creato con successo. 

Questo configurerà un emulatore valido per Android versione 19 che cosa è lui Versione API 19 o anche Android 4.4 (KITKAT) vale a dire che possiamo emulare qualsiasi dispositivo che esegue questa versione o precedente. Alcune piattaforme supportate sono Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, In questo tutorial ci concentreremo su Android.
Nella rubrica www È dove verrà sviluppata l'applicazione stessa, saranno ospitati i file HTML, CSS, immagini e Javascript oltre a tutte le risorse necessarie per la nostra applicazione, ricorda che è una pagina web che verrà eseguita nativamente all'interno di un server e anche un browser Web incorporato che verrà eseguito come app nativa su Android.
Quando creiamo il nostro progetto all'interno della directory www, verrà creata una struttura di progetto generica definito con il codice necessario per eseguire una semplice applicazione di tipo "Ciao mondo“Quindi abbiamo un esempio o un modello di un'applicazione eseguibile per testare che funzioni prima di programmare, tuttavia, per eseguirlo dobbiamo prima aggiungere la piattaforma o le piattaforme, ad esempio se vogliamo testarlo su dispositivi Android e iOS dobbiamo usa il seguente comando:
Per Android

cordova build Android

Per ios

cordova build iOS

Ogni volta che eseguiamo il comando all'interno della directory dell'applicazione, saprà che questa è l'applicazione da compilare. Una volta compilato nella directory piattaforme / piattaforme / android / ant-build / genererà file per noi.

CordovaApp-debug.apk

Quale sarà il file apk installabile ed eseguibile su qualsiasi dispositivo Android. Per eseguirlo, la directory dell'applicazione deve disporre delle autorizzazioni di accesso completo. Ora lo eseguiremo per la prima volta con l'emulatore per questo scriviamo nel terminale.

cordova emula Android

Possiamo vedere un dispositivo generico che mostra l'applicazione, facciamo clic su di esso e possiamo vedere l'applicazione Apache predefinita.
Ora possiamo iniziare a creare la nostra applicazione modificando il file index.html che si trova nella directory www. Il codice è semplice, il meta rileva il tipo di dispositivo, i viewport adatteranno il contenuto alla risoluzione e alle dimensioni dello schermo del dispositivo.
Il resto del codice è HTML5, il file cordoba.js avrà la configurazione del server e il file index.js sarà dove programmeremo i nostri script per dare interattività all'applicazione.

 Miapp01
Connessione al dispositivo
Il dispositivo è pronto
Apportiamo alcune modifiche con Html5 e CSS3 da testare e testeremo anche un altro dispositivo Creiamo un form con due campi all'interno del livello appNome:
E-mail:
Cerchiamo la cartella css all'interno del file index.css e aggiungeremo il seguente codice per lo stile del pulsante .btn {background: # 3498db; background-image: -webkit-linear-gradient (top, # 3498db, # 2980b9); background-image: -moz-linear-gradient (top, # 3498db, # 2980b9); background-image: -ms-linear-gradient (top, # 3498db, # 2980b9); background-image: -o-linear-gradient (top, # 3498db, # 2980b9); background-image: linear-gradient (in fondo, # 3498db, # 2980b9); -webkit-border-radius: 28; -moz-bordo-raggio: 28; bordo-raggio: 28px; famiglia di caratteri: Arial; colore: #ffffff; dimensione del carattere: 20px; imbottitura: 10px 20px 10px 20px; decorazione del testo: nessuna; } .btn: hover {background: # 3cb0fd; background-image: -webkit-linear-gradient (top, # 3cb0fd, # 3498db); background-image: -moz-linear-gradient (top, # 3cb0fd, # 3498db); background-image: -ms-linear-gradient (top, # 3cb0fd, # 3498db); background-image: -o-linear-gradient (top, # 3cb0fd, # 3498db); background-image: linear-gradient (in fondo, # 3cb0fd, # 3498db); decorazione del testo: nessuna; } 

Quando hai apportato le modifiche, salviamo i file ed eseguiamo nuovamente con il comando cordova emulate android, precedentemente abbiamo configurato un altro dispositivo in Android Device Manager.

INGRANDIRE

Finalmente abbiamo le nostre modifiche funzionanti, in un altro tutorial vedremo come realizzare varie applicazioni con maggiore complessità.
Finora vediamo come creare un'applicazione con HTML5, CSS3 e Javascript o Jquery mobile per diversi dispositivi mobili indipendentemente dal fatto che si tratti di un telefono cellulare o di una TV che supporta Android. Un aspetto molto importante da tenere a mente è che l'intero design dovrebbe essere pensato come adattabile o reattivo.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo