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:

2 Responses to “Ionic, Guida 2. Creare la prima app Ionic”

  1. Lorenzo Sieni

    sono alla seconda lezione del corso,non ho avuto nessun problema a eseguire tutto ciò che c’è scritto all’interno ottima guida,e ottimo insegnante grazie

    Rispondi
    • Giacomo

      Grazie a te! E’ nel mio interesse fare guide facili da seguire ma con risultati concreti! Spero continuerai a seguirmi! Saluti!

      Rispondi

Leave a Reply

ISCRIVITI ALLE NEWS