L’introduzione al terminale che avrei desiderato

Essere in grado di utilizzare il terminale è essenziale per qualsiasi sviluppatore web desideri approfondire le proprie conoscenze e velocizzare il proprio lavoro.

Sono sicuro che sei un bravo sviluppatore e che da anni crei le tue applicazioni web senza problemi ma potresti comunque non aver mai sentito parlare del terminale.

In questo articolo il mio compito sarà quello di guidarti alla conoscenza di questo potente strumento e di aiutarti a muovere i primi passi al suo interno così da aiutarti a velocizzare il tuo lavoro e a utilizzare gli strumenti più potenti sul mercato.

Dimentico forse di dire che stiamo parlando di uno strumento gratuito che puoi installare in qualsiasi sistema operativo?!?

Ok penso di aver appena rimediato al mio dubbio.

Adesso è giunto il momento di porsi la domanda delle domande:

Che cosa è un terminale?

Per rispondere è necessario tornare indietro nel tempo, alle prime versioni dei computer che erano collegati a uno schermo.

Lasciamo da parte tutta l’era dei computer programmabili con schede perforate che risulta irrilevante per questo argomento.

A quei tempi poter eseguire delle interfacce grafiche come quelle di adesso era troppo dispendioso (in termini di risorse) e nessuno aveva ancora pensato di creare un desktop environment in grado di sovrapporre finestre, impostare immagini di sfondo e aprire applicazioni con un doppio clic.

Non c’era bisogno di alcun desktop!

A parte il consumo di risorse, ai tempi non si pensava che per usare meglio un computer fosse necessario qualcosa di diverso dal terminale.

Anche se molto meno potenti dello smartphone che porti in tasca, i computer di allora erano in grado di svolgere le stesse operazioni che riteniamo comuni.

Soltanto non avevano bisogno di una Graphic User Interface (o GUI).

Operazioni come l’invio di una mail, la scrittura di codice o mandare un file in stampa venivano svolte interamente da terminale.

Nonostante l’indiscusso successo delle GUI che hanno avvicinato l’uso dei computer a qualsiasi tipo di persona, il terminale è sempre installato sui nostri sistemi operativi e possiamo usarli quando desideriamo.

Ci sono un paio di motivi che ritengo importanti che mi spingono a scrivere questo articolo e consigliarti questo potente strumento:

• attraverso il terminale puoi fare molte più cose che con una GUI – vuoi sincronizzare un sito locale con uno online? Vuoi installare dei pacchetti npm per la tua applicazione? Hai bisogno di eseguire specifici workflow con Gulp? Puoi fare tutto questo e molto altro dal terminale! In alcuni casi esistono delle GUI che ti facilitano nel compito da svolgere ma nessuna ti offrirà tutte le funzionalità che avrai a disposizione eseguendo i comandi dal terminale.
• il terminale permette di automatizzare i task più ripetitivi – sono sicuro che anche tu come sviluppatore sei sempre alla ricerca di automazioni che possono aiutarti nel tuo lavoro. Ebbene imparare a usare bene il terminale ti aiuterà anche in questo!

Chiunque potrà trovare altri motivi che in grado di validare la mia tesi ma preferisco passare direttamente all’azione e parlarti di alcuni dei comandi più interessanti.

Imparare a usare il terminale ha una sua curva di apprendimento, non te lo nascondo, ma se sai programmare gran parte dello sforzo lo hai già fatto e i benefici che potrai ottenere dall’uso di questo strumento ti aiuteranno a capire ancora meglio come funziona il tuo computer e il server online che ospita il tuo sito web.

Attenzione: esistono diversi tipi di terminale

Stiamo parlando di uno strumento che è stato inventato decine di anni fa ed è normale trovare diverse versioni e approcci. Apro questa parentesi per dirti che non devi preoccuparti se esistono diversi approcci.

A noi sviluppatori web questa varietà nelle versioni del terminale non interessa molto perché di base tutte comprendono la sintassi che possiamo usare in un caomune terminale Bash (il più diffuso).

Primi comandi da terminale

Come succede molto spesso i primi passi che facciamo in qualsiasi campo possono (talvolta) risultare noiosi o ripetitivi.

Quello che ti consiglio fin da ora è non perdere le speranze perché questi sono i comandi fondamentali che userai più frequentemente e che ti consiglio di imparare per bene.

Padroneggiarli ti permetterà inoltre di comprendere la logica che sta alla base nell’uso del terminale, grazie a questi concetti imparerai a utilizzare naturalmente anche i comandi più avanzati scoprendo facilmente i loro dettagli.

Il primo passo è non aver paura del terminale perché anche se questo strumento non presenta tutti i menu e le grafiche alle quali siamo stati abituati.

Diventa un vero cucciolone se impariamo a parlarci.

A prima vista può sembrare uno strumento molto “tetro”. Generalmente la sua impostazione di default comporta l’uso di un colore di sfondo molto scuro (o chiaro) che presenta strane stringhe che a prima vista non hanno significato.

Con l’immagine sopra ho cercato di introdurti alle informazioni principali che il terminale offre:

• iMac-di-Andrea il nome del computer sul quale stiamo lavorando – questo è molto utile perché con il terminale possiamo facilmente connetterci e gestire i nostri server online,
• ~ la cartella nella quale stiamo lavorando – il terminale non è in grado di mostrare una finestra con i file contenuti all’interno di una cartella e per questo motivo è utile sapere velocemente dove siamo (nello screenshot è presente il carattere ~ (tilde) che indica la cartella home dell’utente loggato),
• abarghigiani nome dell’utente loggato – il terminale è uno strumento nato principalmente su sistemi UNIX, tra i sistemi più famosi a portare la multiutenza all’interno dei sistemi operativi. Sapere “chi siamo” ci aiuta a eseguire i comandi corretti,
• $ ruolo utente loggato – anche se non è proprio la definizione corretta, il simbolo che si presenta nel terminale ci aiuta a capire quale sono i permessi che ha a disposizione l’utente loggato per lavorare sul computer. Con il simbolo $ (dollaro) si identifica un utente comune mentre con il # viene indicato l’utente amministratore che può fare qualsiasi cosa.

Adesso che sei in grado di capire le informazioni che che ti vengono fornite dal terminale è giunto il momento di scoprire quali sono i primi comandi che puoi utilizzare.

Muoviti tra file e cartelle

Tra i comandi più utili che potrai imparare possiamo mettere sicuramente quelli che ci permettono di capire dove siamo e che ci aiutano a muoverci all’interno del nostro sistema operativo.

Il terminale ci consente di muoverci facilmente all'interno del nostro sistema operativo, sia questo il computer nel quale stiamo sviluppando o un server online che esegue la nostra applicazione web.

Questo perché, appena aperto, il terminale ci fa trovare all’interno della cartella home dell’utente che sta utilizzando questa applicazione ma non sempre salviamo al suo interno i file sui quali stiamo lavorando.

Per rendere l’apprendimento il più utile e divertente trovi una lista dei comandi più interessanti seguita da un piccolo paragrafo dove descrivo come questi comandi si possono usare assieme.

Pronto per questo esperimento?

Perfetto.

Iniziamo con la lista di comandi che useremo per questo esempio:

• pwd (print working directory) – il terminale è in grado di farci sapere il nome della cartella dalla quale stiamo lavorando ma può capitare di avere più cartelle con lo stesso nome. Ecco che il comando pwd può aiutarci mostrando l’intero percorso che identifica univocamente il tuo file.
• ls (list directory contents) – sapere dove siamo non è sufficiente se non sappiamo quali file e cartelle sono contenute. Ecco che il comando ls viene in nostro soccorso elencando tutti i file e cartelle (volendo anche quelli nascosti) che contiene la cartella dove ci troviamo.
• cd (change directory) – tutto il nostro filesystem è organizzato in cartelle, ecco perché questo è uno dei comandi più fondamentali. Digitando cd <nome-cartella> sarai in grado di entrare all’interno della cartella e fare quello che desideri.

La precedente non è una lista completa dei comandi che ci vengono messi a disposizione dal terminale ma sono sicuramente quelli che ci permettono di muovere i primi passi e di rispondere alle domande fondamentali come:

Dove mi trovo?

Quali file ho a disposizione?

Come mi sposto da una cartella a un altra?

Verso la fine di questo articolo ti elencherò altri comandi molto utili da usare ma adesso è giunto il momento di fare l’esempio pratico di cui ti parlavo.

Caso d’uso per i comandi principali del terminale

Ecco un piccolo esempio che mira a descriverti un vero caso d’uso dove è preferibile avere a propria disposizione il terminale piuttosto che qualsiasi altra applicazione con GUI.

In questo esempio io sto lavorando alla creazione del nuovo tema per questo portale.

Dopo qualche ora di lavoro torno sul mio terminale e vedo che sono nella cartella skillsandmore. Il problema è che sul mio sistema ho diverse cartelle con questo nome, mi trovo all’interno di quella dove salvo i documenti relativi al progetto o in quella dell’installazione WordPress?

Per saperlo tutto quello che devo fare è digitare pwd.

Il terminale risponde con il seguente percorso: /Users/abarghigiani/Coding/skillsandmore. Dato che la cartella Coding/ è quella che utilizzo per lo sviluppo dei siti web; a questo punto so di trovarmi all’interno della cartella che contiene l’installazione WordPress.

Sapere dove sono è utile, però devo continuare a sviluppare il mio tema che prende il nome di sam-2019/.

Se non conoscessi la struttura di un’installazione WordPress dovrei lanciare diverse volte il comando ls per scoprire quali sono i file e le cartelle presenti e muovermi successivamente al loro interno con il comando cd.

Per fortuna conosco bene questa struttura, le installazioni WordPress sono molto simili tra loro (a meno di modifiche), quindi a questo punto so che la cartella che contiene il tema si trova dentro la cartella themes/ che a sua volta si trova all’interno della cartella wp-content/.

Tutto quello che devo fare adesso è utilizzare il comando cd e passargli il percorso relativo dalla mia posizione per aprire la cartella sam-2019.

$ cd wp-content/themes/sam-2019

Nel terminale inserisco cd wp-content/themes/sam-2019 e il gioco è fatto.

Il tuo percorso potrebbe essere diverso!

Ovviamente gli esempi precedenti (e quelli successivi) fanno riferimento al percorso dei miei progetti. I percorsi sul tuo computer potrebbero essere diversi.

Se ho dei dubbi, una volta entrato nella cartella, posso sempre eseguire il comando pwd per conoscere il percorso completo alla posizione in cui mi trovo.

Adesso ho la possibilità di vedere tutti i file del mio tema con un semplice ls ma come posso fare per lavorare al suo interno?

Ho bisogno di un editor di codice e la cosa bella è che grazie ad Atom posso aprire questa cartella direttamente da terminale e mettermi subito a lavorare senza neanche dover cercare il mouse.

Tutto quello che devo fare è digitare atom . e il mio editor di codice si aprirà automaticamente con i file della cartella presente nel mio terminale.

Caratteri speciali, opzioni e consigli utili

Spero che l’esempio pratico sia servito a farti capire meglio le potenzialità del terminale e anche se al momento può sembrare un approccio meno intuitivo ti invito a continuare la lettura perché il terminale dona un immenso potere che può veramente aiutarti nello sviluppo!

Come ti ho detto più volte in questo articolo, il terminale può aiutarci ad automatizzare i compiti più ripetitivi ma prima dobbiamo conoscere alcuni concetti base sul suo uso.

Al momento hai eseguito nel tuo terminale (se stai seguendo passo passo) tutti i comandi che ti ho proposto basandoti sulla fiducia ma sapevi che il terminale contiene la miglior documentazione disponibile sui comandi che puoi usare?

Potenti strumenti e un’approfondita documentazione all’interno dello stesso strumento, mica male questo terminale 😉

Puoi accedere alla documentazione di qualsasi comando a tua disposizione precedendolo con man.

Per esempio se nel terminale digiti man ls e successivamente premi il pulsante Invio ecco cosa ti troverai di fronte:

Non è la documentazione più bella che puoi trovare ma è tutto ciò che ti serve per chiarire velocemente i tuoi dubbi.

Prima di approfondire le informazioni che troverai al suo interno mettiamo subito in chiaro come uscire dalla documentazione.

Tutto quello che devi fare è premere il pulsante q della tua tastiera.

Le informazioni principali che troverai al suo interno sono il nome completo del comando, la sintassi utilizzata per personalizzare il suo comportamento e la lista completa di tutte le opzioni che puoi utilizzare.

Le opzioni di un comando

Le opzioni di permettono di modificare il risultato standard di un comando. Ti ricordo che con ls siamo in grado di elencare tutti i file presenti in una cartella ma hai notato che ti viene fornita soltanto una lista di nomi senza distinzione tra cartelle e file?

Inoltre cosa dovresti fare se desideri organizzare questi file in colonne per facilitarti la lettura?

Ecco che le opzioni risultano veramente interessanti!

Per esempio se aggiungo -al al comando ls il terminale mi mostrerà anche i file nascosti e i permessi applicati a file e cartelle.

Come puoi vedere adesso abbiamo molte più informazioni rispetto all’esecuzione di un classico ls. Con queste opzioni possiamo facilmente scoprire quali sono i file nascosti nella cartella (sono quelli che iniziano con un .) e anche quali sono le cartelle e quali semplici file (grazie alla d che sta per directory presente nella prima colonna).

Esistono molte altre opzioni interessanti che ti invito a scoprire andando a consultare la documentazione del comando con man ls perché adesso voglio introdurti un altro importante concetto del terminale.

Caratteri Speciali

Se hai guardato con attenzione la lista degli elementi elencati precedentemente avrai notato che i primi due file sono . e .., ma cosa sono?

Questi sono i primi due caratteri speciali che hai incontrato utilizzando il terminale. Il punto . è una scorciatoia che ci permette di fare riferimento alla cartella in cui siamo (ecco perché il comando atom . ha aperto la finestra dell’editor con i nostri file al suo interno).

L’altro carattere, i due punti .., è una scorciatoia che ci permette di fare riferimento alla cartella superiore a quella che stiamo consultando.

È una scorciatoia incredibilmente utile perché posso muovermi con un singolo cd .., ma questo è soltanto l’inizio.

L’uso dei .. ci permette di navigare facilmente all’interno di un progetto perché possono essere concatenati e farci navigare più cartelle alla volta.

Però questi non sono gli unici caratteri speciali che puoi passare in un terminale. Ti faccio una veloce lista dei più comuni:

• ~– indipendentemente dalla tua posizione all’interno del sistema questo carattere punterà sempre alla home dell’utente che è loggato. Quindi anche se stai lavorando sul terminale e devi tornare alla tua home (o semplicemente farci riferimento per costrire un percorso) puoi usare questo carattere.
• # – anche se è più usato quando si creano degli script che ci facilitano la vita (il terminale può essere programmato) con questo carattere specifichiamo l’inizio di un commento in singola linea mentre, come già visto, se è il nostro terminale che mostra questo carattere significa che lo stiamo usando come amministratori.
• \ – il backslash viene utilizzato come carattere di escape, questo ci permette di costruire stringhe complesse o soltanto selezionare il nome di file o cartelle contenenti degli spazi. Spesso lo puoi vedere in azione quando premi TAB per avviare l’autocompletamento di Documents/File\ Name\ 1\ def.pdf

Esistono molti altri caratteri utili che puoi usare all’interno di un terminale ma sto scrivendo molto e forse ti sto confondento un po’ le idee.

Facciamo una cosa, io ora voglio mostrarti alcuni usi pratici in cui il terminale vince 10 a 0 rispetto a qualsiasi altro strumento con GUI in termini di velocità (e in mia opinione anche in facilità di utilizzo).

Se l’articolo ti è piaciuto e vuoi scoprire meglio come usare il terminale al massimo commentalo o scrivimi una mail così capirò chiaramente quanto interesse c’è dietro questo argomento.

Piccoli esempi in cui è utile conoscere il terminale

All’interno di questa sezione finale dell’articolo voglio mostrarti alcuni esempi pratici in cui la conoscenza del terminale semplifica la nostra vita da sviluppatori.

Esistono migliaia di casi d’uso per i quali il terminale risulta essere lo strumento migliore da usare e in molti è l’unico strumento che puoi usare.

Creazione di uno script Bash

Sicuramente questo non è un argomento che interessa tutti noi ma voglio proportelo come primo perché avere la possibilità di creare degli script che automatizzano il nostro lavoro può essere molto comodo.

Creare degli script Bash ci aiuta infinitamente quando dobbiamo compiere azioni ripetitive all'interno del terminale.

Sono convinto che sai bene che per installare WordPress in locale esistono molte soluzioni.

C’è chi utilizza MAMP, altri Local by Flywheel mentre altri ancora (come il sottoscritto ed Eugenio) preferisce affidarsi a una macchina Docker configurata per bene.

Ora, configurare diversi container Docker per avere un’installazione WordPress funzionante è un compito molto arduo per il sottoscritto che non ha profonde conoscenze sulla gestione di un server web ma per altri è un gioco da ragazzi.

Conoscere i server e il terminale rende possibile creare un semplice script Bash che guida anche un tonto-Docker come il sottoscritto a installare WordPress completamente funzionante (anche con strumenti utilissimi come WordMove).

Avviare un preprocessore CSS

Nel corso dedicato al preprocessore Sass (che sto rilanciando proprio adesso) ti ho presentato Prepros, un’applicazione che ti aiuta a sviluppare compilando al posto tuo i file .scss in classici fogli di stile .css perfettamente comprensibili da qualsiasi browser.

Sicuramente avere un’applicazione con una GUI può essere un aspetto comodo quando ci approcciamo ad un nuovo workflow ma spesso queste soluzioni sono poco performanti e poco configurabili.

Avere il controllo del proprio terminale ti consente di accedere a strumenti che prendono il nome di task automation, ovvero delle regole che vengono eseguite dopo qualche varizione nei file presenti nel progetto.

Grazie a Gulp, uno dei task runner più famosi, puoi configurare il tuo ambiente di sviluppo in modo che esegua le seguenti operazioni ad ogni modifica oppure lanciandoli singolarmente:

• ottimizzazione immagini – puoi far eseguire delle ottimizzazioni sulle immagini in modo che il loro peso sia minore senza perdita di qualità.
• browser live reload – incredibilmente comodo quando si sviluppa! Praticamente ogni volta che modifichi qualcosa il browser si ricarica automaticamente mostrandoti le modifiche effettuate!
• compilare Sass in CSS – forse la cosa più “standard” da fare con un task manager è proprio la generazione automatica dei file .css ogni volta che vengono salvate modifiche nei file .scss che compongono il progetto.

Questi sono soltanto alcune delle attività che puoi avviare automaticamente grazie a Gulp e la cosa più bella è la sua facilità di utilizzo.

Prima di metterti al lavoro non devi far altro che scrivere gulp (oppure gulp <nome-task>) all’interno della cartella che contiene il progetto e il gioco è fatto!

Ovviamente questa sezione rappresenta soltanto un esempio e non è stato spiegato l’approccio pratico a questa soluzione.

Se sei curioso di sapere come configurare il tuo ambiente di sviluppo per sfruttare Gulp commenta questo articolo o iscriviti alla nostra newsletter, in entrambi i casi ti contatterò per farti sapere quando pubblicherò l’articolo dedicato a questo potente task runner!

Connettersi a un server remoto

Un altro aspetto in cui il terminale mostra il meglio di sè è quado abbiamo la necessità di collegarci a un server remoto e dobbiamo fare alcune operazioni.

Sono sicuro che sai benissimo che molti hosting mettono a disposizione dei pannelli di gestione per i propri server, Plesk e cPanel sono i più comuni, pannelli che permettono di fare molte operazioni:

• modificare la versione PHP in esecuzione
• navigare i file salvati nel nostro spazio
• impostare e leggere caselle email
• …

In effetti questi pannelli ci offrono delle interfacce per fare praticamente qualsiasi cosa ma, come già detto nei confronti delle GUI, molto spesso per arrivare a questi comandi abbiamo un’esperienza più lenta perché siamo costretti ad aprire un browser e puntarlo sull’indirizzo giusto, eseguire il login, entrare nel nostro pannello e trovare la funzionalità di cui abbiamo bisogno.

Con il terminale tutto questo non succede perché non dovrai far altro che utilizzare il comando ssh per collegarti in modo sicuro al tuo server online e utilizzare i comandi per applicare modifiche instantanee al tuo server.

$ ssh <utente>@<server> -p<porta>

Ecco la sintassi che ti permetterà di collegarti al tuo server online, sempre se il tuo hosting ti permette di farlo.

Modificare un database WordPress

Voglio concludere con un comando incredibilmente utile che puoi installare sia sul tuo ambiente di sviluppo in locale che all’interno del tuo server online (anzi molti hosting, come SiteGround, preinstallano questo comando).

Lo strumento al quale faccio riferimento è WP CLI e ci permette di fare tutto quello che WordPress ci permette di fare dalla sua bacheca e anche molto di più!

Partiamo subito dal tallone di achille quando lavoriamo in un ambiente di sviluppo locale che dovrà essere spostato successivamente online.

A meno che tu non usi la tecnica dei Virtual Host il dominio che usi nel tuo ambiente di sviluppo sarà diverso da quello sul quale pubblicarai il sito e dato che WordPress salva queste informazioni nel database dovrai sostituire questi riferimenti.

Facciamo un esempio pratico, io uso Docker per creare i miei ambienti di sviluppo e lo script con il quale li creo genera la URL http://0.0.0.0:8080 che mi consente di visualizzare il sito in sviluppo.

Però il mio cliente desidera pubblicare il proprio sito sul dominio https://pianteefiori.it ed ha già installato il proprio certificato di sicurezza per una connessione in HTTPS.

Come posso risolvere questo problema?

Come consigliato più volte anche all’interno di questo blog, potrei caricare file e database e inserire questo script PHP per modificare i domini con una GUI web, però torniamo ai problemi di velocità e immediatezza…

Ecco allora che un bel comando come wp search-replace torna veramente utile!

Tutto quello che devo fare, una volta caricati file e database sul server online, è collegarmi a questo via SSH e lanciare il seguente comando:

Una volta che il server avrà finito di eseguire questo comando mi fornirà una comoda tabella che comunicherà quante e dove sono state le stringhe cambiate.

Conclusioni

Siamo giunti al termine di questo articolo e, come sempre, se sei arrivato a questo punto ti ringrazio di cuore. Spero veramente che tu abbia potuto capire meglio il potere di questo importante strumento.

Usare un terminale è incredibilmente comodo perchè una volta messa da parte la paura di usarlo tutto diventa un gioco da ragazzi!

Ti consiglio di iscriverti alla newsletter perché l’argomento terminale verrà sicuramente trattato nuovamente in futuro in modo da mostrarti ancora meglio come questo strumento potrà beneficiare la tua vita di sviluppatore.

Se sei rimasto con qualche curiosità o dubbio usa pure la sezione dei commenti qua sotto, sarò più che felice di aiutarti a migliorare la tua comprensione.