Apr 23

Comandi di base

  • cd
    Change Directory
    Per entrare in una directory.
  • ls
    List
    Per mostrare il contenuto della cartella attuale (working directory)
  • pwd
    Print Working Directory
    Per mostrare il percorso della cartella attuale.
  • mkdir
    Make Directory
    Per creare una nuova cartella.
  • touch
    Crea un file (o ne aggiorna la data di ultima modifica in caso già esista).
    es. touch newfile.txt
  • nano / vim
    Apre un file testuale in modifica
    es. nano newfile.txt
  • sudo
    Lancia un comando come super user, ad esempio per modificare file in zone protette del sistema
    es. sudo nano newfile.txt
  • cat
    Stampa a video il contenuto di un file testuale
    es. cat newfile.txt
  • mv
    Sposta o rinomina un file
    es. mv newfile.txt subdir/
    mv newfile.txt ciao.txt
  • cp
    Copia un file in un altra directory
    es cp newfile.txt
  • rm
    Elimina un file
    es. rm newfile.txt
  • clear
    Pulisce il terminale

 

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-node-npm-su-mac

Homebrew è un packet manager per Mac. Simile ad apt-get e yum, permette di scaricare e installare software in modo semplice e veloce, sia veri e propri programmi che piccole utility. Può essere utile in molte occasioni in quanto consente di installare velocemente ciò di cui abbiamo bisogno a scelta da un grande repository.

Per installarlo è sufficiente lanciare il seguente comando da una finestra del terminale:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Per verificare che l’installazione sia andata a buon fine aprite una finestra del terminale e digitate

brew -v

dovreste vedere stampato a video la versione del vostre homebrew.

Installare un programma usando brew

D’ora in poi, quando vorrete installare un programma sul vostro Mac vi basterà digitare:

brew update
brew install <nome-programma>

e se il software è disponibile nel repository di brew, verrà automaticamente scaricato e installato!

Installare Node.js e npm

Per installare Node e npm basta adesso aprire una finestra del terminale e scrivere:

brew install node

e l’installazione avverrà in maniera completamente automatica!

A questo punto avrete installato Node e npm, e potrete iniziare lo sviluppo!

 

Sito ufficiale di brew: https://brew.sh/

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/

Apr 10
GIacomo Degl'Innocenti Sviluppo App Mobile Firenze

Il nuovo sito in italiano è online!

Dopo un anno dalla sua iniziale pubblicazione, il sito di Giacomo Degl’Innocenti Sviluppatore App Mobile e Web Software si rinnova con la sua versione in italiano, per venire incontro a tutte le esigenze e avvicinarsi specificatamente al mercato italiano.

Inoltre sono state aggiornate le sezioni Portfolio e Esperienze con le mie ultime avventure piratesche, e ovviamente stanno tutti attendendo questa misteriosa applicazione che è un anno che sto covando! Se sei interessato a scoprirne di più iscrivi alla newsletter!

Tags: