Come creare un app multipiattaforma con Apache Cordova


Un app ha enormi vantaggi rispetto ad un sito web, i servizi esposti sono accessibili sempre, anche off-line. Grazie ad Apache Cordova, potrai creare un app multipiattaforma per dispositivi mobili.
di Antonio Lamorgese


I dispositivi mobili, attualmente in funzione, ammontano a circa 20 miliardi. Questo significa che ogni individuo sulla terra ne possiede piĆ¹ di uno. Quindi se hai unā€™azienda, oppure, se vuoi portare a conoscenza al mondo del web un tuo prodotto ĆØ il momento di prendere seriamente in considerazione di sviluppare un app. Oggi, molte aziende richiedono lo sviluppo di un app parallelamente allo sviluppo del loro sito web. Ora, se non sai come creare un app troverai questa guida un ausilio utile per iniziare con il piede giusto. Un app porta enormi vantaggi rispetto ad un sito web, basti considerare che i contenuti esposti tramite un app sono accessibili anche se il tuo dispositivo ĆØ temporaneamente off-line.

Creare una app aziendale ti permetterĆ  innanzitutto di aumentare notevolmente la visibilitĆ  del tuo brand aziendale che sarĆ  cosƬ piĆ¹ facilmente ricordato dal cliente. Grazie a una app, infatti, ĆØ possibile avere da subito un’immagine digitale, sempre riconoscibile e sotto gli occhi dei tuoi potenziali clienti, di tutti i servizi e prodotti offerti. Ma come creare un app senza insabbiarti in procedure e linguaggi poco conosciuti? Beh, per fortuna cā€™ĆØ Apache Cordova precedentemente noto come PhoneGap. Con questo strumento non solo potrai progettare app native multipiattaforma per dispositivi mobili, ma potrai tradurre anche una Web Application in unā€™applicazione mobile.

Creare app con questo tool ĆØ un’operazione estremamente semplice, bastano infatti pochi minuti un po’ di pazienza e impegno per realizzarne una. Prima di iniziare, ĆØ necessario scaricarlo e installarlo. In questa guida ti spiegherĆ² come creare app con questo straordinario strumento gratuito.


Leggi anche: WordPress non funziona? Ecco 5 modi infallibili per ripristinare un sito


1. Cosā€™ĆØ Apache Cordova?

Apache Cordova, ĆØ un framework di sviluppo che ti permetterĆ  di creare app multipiattaforma utilizzando HTML, CSS e JavaScript. SƬ, hai capito bene, creare app con Apache Cordova ĆØ semplice come creare un sito web. Questo significa che le tue app potranno girare sia su iOS che su Android, senza dover ogni volta ricreare da zero il tuo progetto. Non dovrai conoscere i framework di sviluppo proprietari per iOS e Android ma potrai creare app programmando esclusivamente in HTML, il linguaggio utilizzato per sviluppare siti web. Prima dā€™ora, per creare un app, era necessario scaricare e installare complessi sistemi di sviluppo. Oggi, grazie ad Apache Cordova, non dovrai fare altro che scaricare le API tramite npm, il package manager di NodeJS, e sarai subito pronto per creare app multipiattaforma che potranno funzionare su qualsiasi dispositivo mobile. Attualmente Apache Cordova supporta tutti i sistemi operativi proprietari di ogni dispositivo mobile. Quindi, la tua app, potrĆ  funzionare su qualsiasi dispositivo. Al progetto Apache Cordova contribuiscono tuttā€™ora: AdobeBlackBerryGoogleIBMIntelMicrosoftMozilla e tanti altri marchi ancora. Ad ogni modo ĆØ utile sapere che originariamente la piattaforma aveva giĆ  il nome Apache Cordova, prodotta dalla Nitobi, quando Adobe acquisƬ Nitobi, cambiĆ² il nome del software in PhoneGap. Quando PhoneGap venne rilasciata come piattaforma open source riprese nuovamente il nome Apache Cordova. In questa guida ti mostrerĆ² nello specifico come creare app, e mobile application, con Apache Cordova essendo PhoneGap disponibile solo su piattaforme di terze parti come Altova MobileTogheter Designer.

come creare app multipiattaforma con Altova Mobile Togheter
Altova Mobile Togheter Designer

2. Come creare un app con Apache Cordova

Installare sul tuo computer Apache Cordova ĆØ estremamente semplice. Nel prossimo paragrafo scoprirai come scaricare i pacchetti necessari, sia per ambiente Windows che per Mac e Linux. La procedura ĆØ identica per tutti i sistemi operativi, essendo un progetto Apache Cordova, implementabile solo ed esclusivamente con comandi impartiti da riga di comando tramite npm e NodeJS.

2.1 Come installare NodeJS e npm

Prima di procedere con la creazione della tua prima app con Apache Cordova, devi installare Java SE, NodeJS e npm. Anche qui si tratta di scaricare il file di installazione per ognuno di questi tools e procedere con lā€™installazione lanciando il file scaricato. Per quanto riguarda lā€™installazione di Java, non devi fare altro che cliccare su questo link, scegliere il sistema operativo e selezionare la versione piĆ¹ recente del linguaggio.

download Java per Windows
Download Java per Windows

Terminata lā€™installazione di Java puoi procedere con lā€™installazione di NodeJS. Installando NodeJS installerai anche npm. A questo punto clicca su questo link e scarica la versione piĆ¹ recente di NodeJS per il sistema operativo selezionato.

download NodeJS
Download NodeJS e NPM

Assicurati di installare anche tutti i pacchetti necessari a NodeJS per permettere il funzionamento di Apache Cordova, come ad esempio, npm. Senza il package manager di NodeJS non ti sarĆ  permesso di installare Cordova e lanciare i comandi necessari per creare il tuo primo progetto con Apache Cordova. Quindi, in fase di installazione di NodeJS ricordati di spuntare la voce rappresentata in figura.

installazione di NodeJS e npm
installazione di NodeJS e npm

2.2 Come verificare installazione di Java, NodeJS e npm

Per verificare la corretta installazione di Java, NodeJS ed npm devi digitare tre comandi direttamente nella console dei comandi o del terminale del tuo sistema operativo. Per quanto riguarda Windows non devi fare altro che aprire il prompt dei comandi premendo contemporanemente i tasti WIN + R, digitare il comando CMD e premere il pulsante ā€œOKā€.

apri prompt dei comandi windows
apri prompt dei comandi windows

Allā€™apertura del prompt dei comandi, o del terminale, digita uno per volta i 3 comandi rappresentati in figura e, se ognuno ti ritornerĆ  la versione del software installato, ĆØ segno che i 3 tools sono stati installati con successo.

verifica della corretta installazione di Java, NodeJS e npm
verifica della corretta installazione di Java, NodeJS e npm

Ora hai tutto il necessario per installare Apache Cordova e procedere con la creazione della tua prima app.

2.3 Come installare Apache Cordova

Per installare Apache Cordova non devi scaricare nulla, lā€™unica cosa da fare e digitare un comando da terminale o command prompt. Il comando in questione ĆØ questo per windows:

npm install ā€“g cordova

mentre per Linux devi digitare questo comando:

sudo npm install ā€“g cordova

Anche in questo caso ĆØ necessario verificare la corretta installazione di Apache Cordova. Per farlo basta digitare questo comando il quale restituirĆ  le versioni di tutti i package installati con npm, compresa la versione di npm stesso:

npm outdated ā€“g ā€“depth=0

Windows dovrebbe restituirti un output del genere:

come creare app multipiattaforma

Ora, finalmente, puoi creare la tua prima mobile application multipiattaforma.

2.4 Come creare la tua prima app con Apache Cordova

Come ti ho anticipato allā€™inizio di questa guida, per creare un app con Apache Cordova ĆØ necessario impartire comandi da terminale o command prompt. Quindi, per creare una tua ipotetica app chiamata HelloWorld devi creare una cartella sul desktop di nome ā€œhelloworldā€, e con il comando ā€œcd helloworldā€, da prompt dei comandi, cambiare la directory corrente. A questo punto devi digitare il seguente comando:

cordova create helloworld com.example.helloworld HelloWorld

Terminata lā€™esecuzione del comando create, allā€™interno della cartella ā€œhelloworldā€, presente sul desktop, sono presenti alcuni file, tra cui, config.xml e index.html. Successivamente aggiungi le piattaforme dove desideri che la tua app possa funzionionare. Per questo esempio verranno aggiunte le piattaforme Android, iOS e Browser. Quindi, digita questo comando:

cordova platform add android ios browser --save

Ora, apri il file index.html e modificalo a tuo piacimento. Salva le modifiche e torna nuovamente al prompt dei comandi. Per avviare la tua app ā€œHelloWorldā€, devi digitare questo comando passandogli la piattaforma su cui eseguire la tua app. Per lo scopo di questa guida eseguiremo lā€™app allā€™interno del nostro browser web predefinito.

cordova run browser

Questo comando aprirĆ  il tuo browser ed eseguirĆ  lā€™app ā€œHelloWorldā€.

2.5 Come eseguire la tua app su Android

Con il comando ā€œcordova buildā€, Apache Cordova, creerĆ  il file da installare sui vari device o piattaforme specificate con il comando ā€œcordova platform addā€. Quindi, verrĆ  creato anche il file apk, specifico per Android, il quale potrĆ  essere installato direttamente sul dispositivo e subito pronto allā€™uso. Lā€™output prodotto dal comando ā€œcordova buildā€ sarĆ  pressappoco simile a questo:

come creare app multipiattaforma
file apk creato con successo

Apache Cordova, possiede un emulatore per tutte le piattaforme disponibili. Per cui, con il seguente comando, cordova avvierĆ  un emulatore android ed eseguirĆ  lā€™app direttamente al suo interno.

cordova emulate android
come creare app con apache cordova e l'elumatore integrato
L’elumatore integrato di Apache Cordova

Leggi anche: Come realizzare un sito web con Python e Flask


3. Come creare app con Altova Mobile Togheter Designer

In questa guida ti ho parlato anche di un altro strumento gratuito. Questo tool, che prende il nome di Altova MobileTogheter Designer, ĆØ uno strumento professionale dalle eccellenti caratteristiche che vale la pena valutare. ƈ uno dei pochi IDE che ti permette di creare un app con PhoneGap. Ti ho giĆ  spiegato che PhoneGap, dopo la sua pubblicazione come prodotto open source ĆØ diventato nuovamente Apache Cordova, ma ancora ĆØ possibile sfruttare le sue API per creare app alla stessa stregua e con le stesse caratteristiche di Apache Cordova. Per cui ti consiglio di dare comunque unā€™occhiata a questo video tutorial, da cui potrai prendere spunti interessanti per creare app in futuro. In ogni caso seguendo questo video potrai iniziare subito a creare app native per le piĆ¹ diffuse piattaforme per dispositivi mobili.

Come costruire la tua prima web app cross platform

4. Sistema alternativo per installare Apache Cordova su Windows 10

In questa guida ti ho parlato di come installare Apache Cordova seguendo la procedura ufficiale prevista dal team di sviluppo. Tale procedura ĆØ preferibile in quanto attuabile indipendentemente dal sistema operativo installato sul computer utilizzato per lo sviluppo. Quindi, su Windows, Linux e MacOS puoi seguire la procedura descritta in questa guida eseguendo tutti i comandi riportati. PuĆ² essere utile, per gli utenti Windows, avere una procedura ad-hoc per lā€™installazione di Apache Cordova su Windows 10. Questa procedura ĆØ descritta in dettaglio nel video tutorial che segue. Ti sarebbe di grande aiuto seguire il tutorial anche perchĆ© fa uso della Bash di Git. Questa versione di Git per Windows fornisce un’emulazione della BASH, cioĆØ del terminale di Git, utilizzata per eseguire comandi Git dalla riga di comando in perfetto stile LINUX ma in ambiente Windows.

Come installare GIT su Windows
Antonio Lamorgese


Desideri acquisire nuove competenze?

corsi.it

Seguire questo corso online ti offrirĆ 
l'opportunitĆ  di acquisire nuove competenze e di
migliorare il tuo curriculum professionale.
Clicca qui per seguire le prime lezioni gratuite online

Corsi.it - Il portale Nr.1 al mondo di corsi online


Amministratore di rete e sviluppatore. Dopo anni di esperienza nel settore, ho ideato un sistema di gestione dati MYSQL in PHP senza scrivere una sola riga di codice. Scopri di piĆ¹....