Share
Quindi hai sentito parlare di Ionic e ti stai chiedendo come iniziare? In questo tutorial imparerai come configurare un ambiente di sviluppo Ionic sul tuo computer e come creare un progetto Ionic.
Bene, congratulazioni, se stai visualizzando questo articolo tramite un computer, hai uno dei prerequisiti più importanti per lo sviluppo di app Ionic: ti occorrerà un personal computer (PC) per farlo. Questo può essere un computer con Windows, Mac o Linux.
Dal momento che costruiamo app Ionic utilizzando tecnologie web, avrai anche bisogno di strumenti di sviluppo web installati. Ciò include un browser web (preferibilmente Google Chrome) per eseguire e eseguire il debug delle nostre app e un editor di testo (come Sublime, Atom o Visual Studio Code) per scrivere e modificare il nostro codice. Se siete nuovi allo sviluppo, raccomanderei Visual Studio Code in quanto è comunemente usato e gratuito.
Con questi requisiti di base installati sul tuo computer, andiamo avanti e installiamo le dipendenze necessarie per creare app Ionic.
Sfortunatamente, non esiste un unico pacchetto di installazione che installa automaticamente un ambiente di sviluppo Ionic sul tuo computer. Indipendentemente dal tuo sistema operativo, devi installare manualmente ciascuna delle dipendenze richieste. Andiamo avanti e iniziamo a configurare il nostro ambiente di sviluppo ionico.
La prima dipendenza che dobbiamo installare è Node.js, che è un framework JavaScript lato server. Useremo Node.js per il suo gestore di pacchetti di nodi (npm), che ci permetterà di installare tutti i pacchetti e gli strumenti di cui abbiamo bisogno per i nostri progetti. Useremo anche Node.js per eseguire un servizio di sviluppo server che ci consentirà di visualizzare in anteprima le app nel browser.
Ionic raccomanda che, durante l'installazione di Node.js, sia necessario selezionare la versione più recente di Long Term Support (LTS). Nel mio caso, come potete vedere sopra, è la versione 8.9.1 LTS. Ionic consiglia di utilizzare le versioni LTS in quanto sono più stabili.
Quindi scarica semplicemente la versione LTS, segui le istruzioni per l'installazione e una volta completata l'installazione sarai pronto per continuare con il passaggio successivo.
Con Node.js installato, sei pronto per installare Cordova e Ionic. Qui è dove le cose potrebbero diventare un po 'complicate per alcuni, specialmente quelli che non hanno mai funzionato con la CLI (Command Line Interface) prima. All'inizio potrebbe sembrare un po 'scoraggiante, e potresti sentirti come se finissi per rompere qualcosa sul tuo amato computer! Beh, non lo farai, quindi rilassati e prova a seguire.
Su Mac e Linux, cerca Terminal, che è la CLI che useremo per installare Cordova e Ionic. Su Windows, cerca il prompt dei comandi. Questo è l'equivalente di Terminal su un PC Windows.
Con Terminale aperto su Mac o Linux, digitare il seguente comando ed eseguirlo premendo accedere sulla tua tastiera.
sudo npm install -g cordova ionic
Successivamente, potrebbe essere richiesto di inserire una password, in tal caso, inserire la password che si utilizza per accedere al proprio computer e premere accedere ancora.
Dal prompt dei comandi su Windows, digitare il comando seguente ed eseguirlo premendo accedere sulla tua tastiera.
npm install -g cordova ionic
Come avrete notato, stiamo usando Node Package Manager (npm) per installare sia Ionic che Cordova sopra, quindi è della massima importanza installare prima Node.js! Potresti averlo notato anche su Mac e Linux che stiamo usando sudo di fronte al nostro comando. Questo è necessario per consentire l'installazione di Ionic e Cordova a livello globale su questi sistemi.
Il processo di installazione può richiedere alcuni minuti, in base alla tua connessione Internet, ma una volta fatto, dovresti vedere qualcosa di simile a questo:
Fantastico, quindi con Ionic e Cordova installati con successo, passiamo alla sezione successiva e installiamo il software aggiuntivo di cui abbiamo bisogno per costruire con successo le nostre app iOS e Android dai nostri progetti ionici.
Non devi necessariamente installare questi strumenti software in questo momento; puoi continuare a costruire app Ionic usando le tecnologie web di cui abbiamo discusso in precedenza. Quindi sentitevi liberi di saltare questa parte se siete desiderosi di saltare direttamente dentro e creare il vostro primo progetto Ionic.
Tuttavia, se si desidera eseguire le app su un dispositivo mobile reale come un telefono o un iPhone Android, è necessario installare gli strumenti specifici della piattaforma per tali piattaforme. Esamineremo più da vicino lo sviluppo per dispositivi Android e iOS in future esercitazioni.
Se vuoi essere in grado di compilare app Android dal tuo progetto Ionic, devi prima installare Java Development Kit (JDK) 8 o successivo. Vai al sito Web di JDK, accetta il contratto di licenza e seleziona l'opzione di download pertinente in base al tuo sistema operativo. Quindi seguire le istruzioni di installazione.
Dopo aver installato con successo il JDK, devi installare anche Android Studio, l'IDE Android (ambiente di sviluppo integrato).
Con questi due pacchetti installati, sarai in grado di compilare e pacchettizzare un'app Android dal tuo progetto Ionic.
La creazione di app iOS dai tuoi progetti Ionic è possibile solo su un computer Mac OS, sfortunatamente, il che significa che non sarai in grado di compilare o creare app iOS da un computer con Windows o Linux. (Sebbene tu possa codificare la tua app ora su un computer Windows, e poi costruirla per iOS da un Mac.)
Per compilare app iOS su Mac OS, è necessario installare Xcode. Basta andare all'App Store sul tuo Mac e cercare Xcode. Questo è un download gratuito.
Dopo aver installato Xcode, sarà necessario installare anche ulteriori strumenti da riga di comando per Xcode. Per fare ciò, apri Terminale ed esegui il seguente comando.
xcode-select --install
Questo installerà ulteriori strumenti che Cordova utilizzerà per costruire i tuoi progetti iOS.
Per essere in grado di costruire i tuoi progetti iOS dalla riga di comando, dovrai anche eseguire il seguente comando.
sudo npm install -g ios-deploy
Con tutto configurato, sei pronto per creare app iOS dai tuoi progetti Ionic.
Ionic utilizza la riga di comando, e in particolare la CLI Ionic, che è stata automaticamente installata durante il nostro processo di installazione, per creare, testare e creare applicazioni Ionic. Quindi, hai di nuovo il coraggio di aprire Terminal o Command Prompt (a seconda del tuo sistema operativo).
Una breve parola di consiglio prima di continuare: imparare ad abbracciare lo strumento Ionic CLI. Ora è ufficialmente diventato il tuo nuovo amico, quindi impara ad amarlo!
La prima cosa che dobbiamo fare è specificare dove vogliamo salvare il nostro progetto Ionic. Ai fini di questo esercizio, lo salveremo semplicemente sul nostro desktop. Quindi vai al desktop con il seguente comando.
cd Desktop
Abbiamo alcune opzioni per il tipo di applicazione ionica che vorremmo creare e queste sono categorizzate come modelli di progetto Ionic. Per il principiante esistono tre tipi di modelli: a vuoto modello, a Tabs modello e a SideMenu modello. In questo esempio utilizzeremo il modello di schede, quindi procediamo e creiamo il nostro progetto.
Chiameremo il nostro progetto Ionic DemoApp. Quindi, per creare il nostro progetto DemoApp utilizzando il modello di schede e salvarlo sul desktop, è necessario eseguire il seguente comando nella nostra CLI.
avviare ionicamente le schede DemoApp
Questo comando impiegherà un po 'di tempo per essere eseguito mentre scarica tutti i pacchetti del modello di progetto e le dipendenze dell'applicazione. Durante l'installazione ti potrebbe essere chiesto se desideri installare gratuitamente Ionic Pro SDK e connettere la tua app. Risposta No e premere accedere di nuovo per continuare con l'installazione. Una volta completata l'installazione, dovresti vedere qualcosa di simile a questo:
Congratulazioni! Hai creato con successo il tuo primo progetto Ionic.
Con la configurazione del progetto completata, siamo ora pronti per visualizzare la nostra applicazione Ionic. Per farlo, passa alla cartella del progetto appena creata tramite la CLI eseguendo cd ./DemoApp e una volta all'interno di questa cartella esegui entrambi servire ionico o laboratorio ionico.
servire ionico e laboratorio ionico sono i comandi CLI Ionic che compilano la tua applicazione e avviano un server dev locale, che ti consente di visualizzare la tua applicazione Ionic all'interno di un browser web sul tuo computer.
Nell'immagine sopra, ho eseguito il laboratorio ionico comando, e come puoi vedere, sono in grado di visualizzare il mio progetto Ionic compilato come app web. Non siamo ancora riusciti a compilarlo come un'applicazione nativa, ma lo faremo nei tutorial successivi.
Ricordo che quando ho iniziato a sviluppare app Ionic, all'inizio mi è sembrato molto confuso, soprattutto dover fare un sacco di lavoro iniziale tramite la CLI. Come qualcuno che non era abituato a lavorare con la CLI, questo è stato un viaggio spaventoso per me, quindi posso immaginare come alcuni di voi potrebbero sentirsi là fuori. Il mio consiglio è quello di abbracciarlo: ti sentirai più a tuo agio e abituato ad andare avanti e non ti preoccupare, non infrangeresti nulla sul tuo amato computer!
Abbiamo parlato molto di questo post, ma con questa conoscenza sei uno degli ostacoli più grandi alla codifica delle app Ionic. Restate sintonizzati per il prossimo post di questa serie!
Fino ad allora, dai uno sguardo ad alcuni dei nostri fantastici post sulla codifica delle app Ionic o prova uno dei nostri corsi video completi sullo sviluppo di app Ionic!
Accentsconagua