Come creare un app multipiattaforma con Apache Cordova

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.

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.

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.

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ù....

x