Mag 1

Per vedere l’app Ionic che stiamo sviluppando sul proprio telefono è molto semplice, grazie alla funzionalità integrate del framework e dei suoi servivi integrati sul cloud.

Tra le funzioni che offre la registrazione troviamo:

  • Testare le applicazioni in remoto grazie a Ionic View
  • Utlizzo di Ionic Creator per un progetto (permette di progettare e creare mockup grafici delle schermate dell’app)
  • Buildare le app per i vari OS online

Creare un Account Ionic

Create un account dalla pagina di registrazione del portale.

Una volta creato segnatevi username e password e procedete con i prossimi step.

Caricare la propria app sul cloud

Anche qui, massima semplicità. Aprite una finestra del terminale, e spostatevi nella directory del vostro progetto.

Per vedere come creare un semplice progetto in Ionic, vedi la guida precedente.

Una volta nella cartella del vostro progetto, lanciate il seguente comando:

ionic upload

A questo punto da console vi verrà chiesto di effettuare il login con i dati dell’account che avete appena creato, dopodiché automaticamente la vostra app verrà caricata sul cloud.

Scaricare Ionic View sul proprio device

Bene, adesso non ci resta che vedere l’app sul nostro dispositivo, cellulare o tablet. Andiamo nell’App Store su iOs o sul Play Store su Android e scarichiamo l’app Ionic View. Una volta scaricata apriamola e facciamo di nuovo il login con gli stessi dati di prima.

Se tutto è andato bene, possiamo vedere la nostra app nella lista e cliccandoci sopra e selezionando “View App”, essa si aprirà nel telefono come se l’aveste scaricata dallo store!

Un ottimo modo di avere una preview della propria app per se stessi o da far vedere al cliente!

Tags:
Apr 23
ionic-creare-la-prima-app

In questa guida affronteremo come creare la nostra prima semplice App in Ionic utilizzando i template che ci vengono forniti.

Prerequisiti:

Installazione dell’ambiente di sviluppo come indicato nella guida n. 1.

Creazione della prima app

In Ionic ogni applicazione che creiamo verrà inserita all’interno di una cartella di progetto che conterrà sia i sorgenti che ci permetteranno di modificare e sviluppare la nostra app, sia i file di supporto propri di Ionic che ne consentono il funzionamento, i plugin e le piattaforme.

Quindi sarà bene sul proprio computer creare una cartella “Ionic” che conterrà tutti i nostri progetti. Un buon posto dove crearla è nei propri documenti. Creiamola come preferiamo e poi apriamo una finestra del terminare e spostiamoci al suo interno.

 cd /Users/jack/Documents/Ionic Apps/

quindi, lanciamo il seguente comando:

ionic start myApp tabs --v2

Notiamo alcune cose nei parametri di questo comando:

  •  myApp = il nome dell’app che volete creare.
  • tabs = il template di base scelto
  • --v2 per utilizzare il framework versione 2 di Ionic

Quando lanciamo il comando vediamo dal terminale le operazioni che vengono effettuate, tra cui il download e l’installazione del progetto template e delle sue librerie.

Una volta completato, l’applicazione di base è già pronta per partire!

Vedere l’app nel browser

Proviamo a vedere cosa abbiamo creato!

Ancora da terminale, spostiamoci nella cartella di destinazione che avevamo prescelto inizialmente e quindi nella cartella del progetto ( con il comando cd myApp ).

Tralasciamo per il momento il contenuto e la struttura della cartella di progetto che vedremo in seguito.

Per far girare la nostra applicazione, nel terminale digitiamo:

ionic serve

Dopo pochi secondi si aprirà il browser e vi permetterà di navigare all’interno dell’app, come se fosse dentro il vostro device, ma per simulare al meglio una visione come da smartphone sarà meglio ridimensionare lo schermo diminuendo la larghezza.

app ionic base guida

Adesso prepariamoci al prossimo step, torniamo nel terminale e chiudiamo la sessione corrente digitando CTRL + C. Così facendo, diremo al server di Ionic di spegnersi e di conseguenza il browser non potrà più mostrare l’app.

Per riavviare il server in un futuro momento basterà digitare nuovamente ionic serve dalla cartella del progetto, oppure seguire la procedura illustrata di seguito e utilizzare Visual Studio Code.

I diversi template di app

A questo punto notiamo che la nostra app è suddivisa in 3 schermate, accedibili premendo i “tab”, ovvero i pulsanti nella barra orizzontale in basso nella schermata. Ma non per forza la nostra app dovrà avere questo design.

Ionic ci offre diversi tipi di template da cui iniziare, a seconda dell’app che vogliamo realizzare.

guida ionic creazione semplice app

  •  blank che permette di creare un app vuota,
  • tabs, che abbiamo appena usato e creare il menù di navigazione con i tab in basso
  •  sidemenu, che crea il menù di navigazione in un menù verticale che si apre sul lato della schermata.

Quando avremo poche voci di menù potremo usare le tabs, mentre quando ne avremo tante sarà consigliato scegliere sidemenu.

Far girare l’app dall’IDE

Per iniziare a sviluppare la nostra app può essere utilie Visual Studio Code, come indicato nella guida precedente.

ionic-guida-prima-appApriamo la cartella della nostra app in VS Code.

Una volta dentro il programma, clicchiamo sull’icona dei file nella barra laterale e poi clicchiamo apri cartella.

Spostiamoci nella cartella del progetto che abbiamo appena creato e scegliamo apri.

A questo punto VS Code caricherà la cartella e sarà possibile navigarci dentro e aprirne i file.

Avviamo il server Ionic

Familiarizziamo con i comandi rapidi: per accedervi basta digitare

  • CTRL + SHITF + P su Windows
  •  CMD + SHIFT + P su Mac

Si dovrebbe aprire in alto una barra di inserimento al cui interno digitiamo:

ionic serve

Allo stesso modo di prima, dopo qualche secondo si aprirà il browser permettendoci di usare la nostra app.

Il vantaggio di utilizzare VS Code sta proprio nel poter accedere alle funzioni del framwork direttamente dall’IDE, risulta così molto veloce procedere nella fase di sviluppo e testing.

Vediamo adesso come fare una semplice modifica.

Fare una modifica all’app e visualizzarla

Proviamo a fare una modifica all’app.

Dentro Code potete vedere tutti i file della cartella di progetto che avete creato, nelle lezioni successive vedremo nel dettaglio cosa sono questi file e a cosa servono, per adesso fidatevi e limitatevi a aprire il file src/pages/home/home.html da VS Code e modificare l’h2 come nell’esempio sotto, sostituendo il titolo con una frase a piacimento.

<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Benvenuto nella tua app!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
</ion-content>
Benissimo, adesso dobbiamo salvare il file, (CTRL+S) e poi ri-apriamo la finestra del browser sulla nostra app.
Vedremo la pagina ricaricarsi automaticamente e il testo della pagina sarà cambiato con le nostre modifiche!
Nella prossima guida, spiegherò come vedere la vostra app su di uno smartphone e poi anche la struttura dei files all’interno del progetto ionic per poter iniziare ad aggiungere o modificare le pagine!
A presto!

 

Tags:
Apr 12
giacomo-deglinnocenti-guida-installare-ionic

In questa guida vi illustrerò come installare tutto il necessario per essere in grado di sviluppare un applicazione con Ionic 2.

La creazione di app in Ionic ci consente, con una sola applicazione, la distribuzione sia su Android che su iOs, andando così a coprire una fetta di mercato più grande rispetto a una programmazione di un app in codice nativo. D’altra parte, soprattutto in fase di testing, sarà bene testare l’app su più device possibili, e non solo su una singola piattaforma. Ionic si caratterizza per un impegno consistente dei suoi sviluppatori nell’ottimizzazione e velocizzazione delle risorse sui device, e per una grafica ready to use. E’ anche veloce in termini di tempi di sviluppo e deploying.

Prerequisito: Installazione di Node.js e npm

Sempre più negli ultimi anni si è diffuso l’utilizzo del programma npm (Node Packet Manager) come sistema di download&install nell’ambito dello sviluppo software. Si tratta di un packet manager con un enorme repository di software JavaScript, basato su Node.js. Ma non solo, npm è molto utile anche nella creazione e gestione di progetti Node.js.

Se hai Mac puoi usare il seguente metodo: Installare Node.js e npm utilizzando Brew

Per installarlo è sufficiente visitare https://nodejs.org/ e scaricare l’ultima versione di Node. Potete scegliere sia l’LTS, che è la versione più stabile, che la “current” che invece è l’ultima rilasciata, quindi con le ultime features da provare ma anche meno stabile perché meno testata.

Una volta scaricato il pacchetto di installazione sarà possibile installarlo come per tutti i programmi per computer, cliccando sul file .exe o .pkg .

Una volta terminata l’installazione, assicuriamoci che il tutto sia andato a buon fine aprendo una finestra del terminale e digitando:

npm -v

Se tutto è andato bene, dovreste vedere stampata a schermo la versione del vostro npm, altrimenti qualcosa è andato storto e sarà necessario indagare sulle cause del problema e risolverlo prima di continuare.

Installazione di Ionic

Adesso che abbiamo un packet manager pronto all’uso, lo possiamo usare per installare l’ambiente Ionic.

Spesso quando utilizzeremo npm per installare un pacchetto, avremo cura di aggiungere il parametro -g che indica a npm di installare il pacchetto globalmente sulla macchina, e non al contrario in una specifica cartella, facendo in modo che quindi sia sempre disponibile a livello di sistema.

Installiamo Ionic e Cordova globalmente: apriamo una finestra del terminale e digitiamo quanto di seguito

npm install -g ionic cordova

Se siamo su ambiente Mac/Unix potremmo dover aggiungere sudo prima del comando per operare con i permessi del super user.

Anche stavolta, assicuriamoci che l’installazione sia andata a buon fine, lanciando il seguente comando nel terminale:

ionic -v

dopo qualche secondo dovremmo vedere comparire il numero di versione del nostro ionic. Se così abbiamo completato l’installazione con successo. Altrimenti dovremo investigare sul problema e risolverlo.

Installazione dell’ambiente di sviluppo VisualStudio Code

Sviluppare software può essere anche bello, se abbiamo però un buon ambiente di sviluppo!

La mia scelta per sviluppare in Ionic è Visual Studio Code, un prodotto di Microsoft gratuito che unisce la velocità, semplicità e modularità di Sublime Text alla capacità di aprire una cartella come fosse un progetto e navigarci dentro.

Per scaricarlo andiamo su https://code.visualstudio.com/ e facciamo il download. Dopodiché installiamolo nella cartella delle applicazioni/programmi del nostro computer, creando eventualmente un collegamento sul Desktop o su una barra di accesso rapido.

Una volta installato, apriamolo e installiamo le estensioni che ci serviranno.

Installazione dei moduli Ionic per VisualStudio Code

Per facilitarci ancora di più il compito di sviluppo, andiamo adesso ad aggiungere al nostro IDE due moduli importanti. Uno servirà a darci aiuto nella scrittura del codice, suggerendo ed auto completando gli snippet di codice. L’altro invece, ci permetterà di lanciare comandi Ionic direttamente dall’IDE invece che da linea di comando! Inoltre, quando avremo realizzato la nostra prima applicazione vedremo che quando faremo una modifica sarà Code stesso a fare il deploy in automatico delle modifiche senza dover lanciare nessun comando aggiuntivo!

Una volta dentro Code, clicchiamo sulla barra verticale a sinistra sul pulsante Guida Installazione Ionic che apre il pannello dei moduli.

Adesso cerchiamo e installiamo i seguenti due moduli:

Ionic 2 Snippets
Ionic2-vscode

Installateli tutti e due e riavviate Code quando richiesto.

Adesso vediamo se abbiamo a disposizione i nuovi comandi installati. Digitiamo CMD + SHIFT + P (Mac) oppure CTRL+SHIFT+P (Windows) e si aprirà una barra orizzontale in alto, al cui interno digiterete “ionic” e dovreste vedere apparire i seguenti comandi:

Giacomo Degl'Innocenti Guida Ionic

 

Se riuscite a vederli, complimenti! Avete installato con successo il vostro ambiente di sviluppo Ionic!

Potete adesso proseguire con Creare la prima applicazione Ionic

Per qualsiasi aiuto o informazione scrivete nei commenti!

 

Sito ufficiale di riferimento e documentazione: https://ionicframework.com/