Ogni volta che mi approccio ad imparare qualcosa di nuovo sono sempre impaziente di cominciare a mettere le mani in pasta.
Come promesso nell'articolo "Sviluppo Web: che cosa è e come si inizia", in questo articolo voglio iniziare a farti fare un pò di pratica.
Corso completo Web Developer - Parte 1 - 1.1
Introduzione
Come in ogni lavoro, ci sono svariati strumenti creati da aziende differenti, ognuno di questi con i suoi pro ed i suoi contro. Tutti risolvono lo stesso problema e ti faranno raggiungere lo stesso risultato.
La scelta degli strumenti è una cosa piuttosto personale. Ciò che funziona per me non necessariamente sarà la scelta migliore per te.
Non soltanto i programmi che installi sul tuo computer ma anche il sistema operativo stesso è una scelta personale e nel 90% dei casi non importa se hai Windows o macOS, potrai fare esattamente le stesse cose.
A testimonianza di questo discorso infatti le aziende tech molto spesso lasciano libera scelta ai loro programmatori di usare un PC Windows o un Mac.
Potresti ritrovarti in aziende che hanno dei requisiti più restrittivi in termini di quale antivirus utilizzare per esempio ma nessuno mai ti dirà che devi usare un text editor piuttosto che un altro.
In questo articolo andremo a vedere soltanto quello di cui abbiamo bisogno per iniziare programmare.
Nel frattempo ti voglio spoilerare che ci sarà un articolo relativo alla sicurezza sul web e qual è la mia personale strategia per gestire i logins, le passwords, etc. 🙂
Iscriviti qui alla mia Newsletter se non vuoi perdertelo 📧
Step 1 - Il Browser
Le migliori amicizie sono finite per giudicare qual è ad oggi il miglior Browser 😁
Scherzi a parte, senza scendere troppo nei dettagli tecnici, Google Chrome offre tante funzionalità ed è molto intuitivo. Detto ciò, se ci tieni minimamente alla tua Privacy è senza dubbio la scelta peggiore.
Dall'altro lato della sponda abbiamo Brave, è un ottimo browser, molto performante ed uno dei migliori in termini di Privacy.
In mezzo abbiamo Safari per gli utenti macOS o Firefox per qualsiasi utente.
Ci sono altri ottimi browsers come per esempio Vivaldi o Microsoft Edge.
Io personalmente ho utilizzato molto Firefox ed ora sto utilizzando Brave. L'ho utilizzato molto in passato ma smisi di utilizzarlo perchè aveva dei problemi di sincronizzazione di tabs aperte tra Macbook ed iPhone e quindi decisi di passare a Firefox. Questi problemi sono stati risolti e sono felicemente ritornato a Brave.
Step 2 - Organizzazione: un posto nel tuo computer dove salvare tutti i tuoi progetti
Iniziando a programmare ti troverai a lavorare con tanti files ed a fare tanti diversi progetti quindi è sicuramente una buona idea creare sin da subito una cartella dentro la quale salverai tutti i tuoi progetti. Questo ti eviterà di avere progetti sparsi nel tuo computer.
Personalmente ho nominato questa cartella coding e salvata sul Desktop. Spesso i programmatori tendono a creare questa cartella con il nome di projects. Chiamala con il nome che più ti piace.
Step 3 - Iniziare a programmare: un Text Editor ottimizzato per scrivere codice
Per scrivere codice puoi usare semplicemente “Note” o “Microsoft Word” ma utilizzando questi programmi sicuramente non avrai un'ottima esperienza di scrittura.
Il problema nell'usare programmi che non sono stati ideati per scrivere codice è che non hanno tutte quelle funzionalità di supporto che i text editors appositi invece hanno semplificandoci di molto la vita.
Ti faccio un esempio, con Microsoft Word ci viene corretto se mancassimo l'accento ad una parola che lo richiede. Con un Text Editor ideato per programmare avremo la stessa funzionalità (e tante altre) dove per esempio ci viene evidenziato un errore di sintassi del linguaggio di programmazione che stiamo utilizzando.
Il software che consiglio si chiama Visual Studio Code detto anche VS Code appartenente alla casa Microsoft.
👉 Scaricalo qui
Step 4 - Estensioni per il Text Editor
Le estensioni di VS Code hanno esattamente la stessa funzione che hanno le estensioni per un browser. Sono delle aggiunte al tuo text editor del tutto opzionali che ti semplificano la vita laddove il text editor ancora non è arrivato.
Ti elenco quali sono le mie preferite:
- Live Server - quando inizieremo a lavorare con pagine HTML questa estensione ti aiuterà ad aprire la pagina web sulla quale stai lavorando sul browser e fare l'auto refresh ogni qual volta facciamo un cambiamento al file senza quindi dover aggiornare la pagina manualmente;
- Prettier - tra le tante cose che fa, una delle principali è l'aiuto a mantenere il codice all'interno del foglio di lavoro nel formato corretto;
- HTML Snippets - aggiunge un supporto principalmente per HTML come per esempio l'auto completamento di tag HTML;
Le puoi installare anche stesso dall'interno di VS Code. Fai attenzione a non installarne troppe 😄
Step 5 - Il Terminale
Quando iniziai a programmare mi fu consigliato di usare il terminale sin dall'inizio per navigare fra le cartelle del mio Macbook. Non ti nascondo che le sensazioni furono esattamente: terrore ed eccitazione. Mi sentivo un Hacker in Matrix 😎
È stato uno dei migliori consigli. Imparare ad utilizzare il terminale significa capirci di più riguarda al tuo computer. Capire bene come il tuo computer funziona significa avere un rapporto migliore e più armonioso con uno dei strumenti più utilizzati nel mondo moderno e con quello che potrebbe diventare il tuo migliore amico se vuoi farne di questo il tuo lavoro.
Provo a semplificarti il concetto del terminale.
Immagina questi tre elementi come tutto il "sistema computer". Abbiamo Hardware, Terminale e Monitor e questi sono come se fossero tre strati di una piramide.
Tutto quello che tu puoi vedere e fare da un'interfaccia grafica (sul tuo Monitor) potrai farlo anche da terminale.
Noi lo useremo principalmente per comandi basilari come per esempio navigare fra le cartelle del computer, creare una nuova cartella, creare un file o eseguire il text editor.
Quale software utilizzare?
Se utilizzi Windows
- Windows PowerShell di default preinstallato su Windows
- Git Bash - questo lo installeremo durante lo step 6 nella fase Version Control System ed è anche quello che consiglio di utilizzare perchè ti permetterà di fare la maggior parte delle cose che si possono fare con Windows PowerShell ma utilizzando gli stessi comandi nel terminale come se fosse un Mac o Linux. Questo ti avvantaggia per una serie di motivi, uno di questi è se nel caso un domani dovessi lavorare per un'azienda dove ti verrà chiesto di utilizzare Mac o Linux tu sarai già abituato all'utilizzo del loro terminale.
Windows Power Shell che viene preinstallato con Windows. Nello step 6 di quest'articolo installeremo anche un altro terminale chiamato Git Bash.
Se utilizzi macOS
Puoi scegliere se usare il Terminale che viene pre-installato nel Mac o usare iTerm. Io ti consiglio quello di default per iniziare cosí da evitare di complicarci la vita.
- Terminale di default preinstallato su Mac
- iTerm2 se ti senti intraprendente
Step 6 - Terminale: Programmi basilari
Piuttosto di farti scoprire i concetti e gli strumenti per semplificarti il lavoro successivamente voglio subito introdurti a quelli che io considero gli strumenti di base che ogni persona che si avvicina al coding dovrebbe conoscere.
"L'attrezzo fa il mestiere" come dicevano i vecchi saggi 😁
I software che installiamo sul nostro computer possono anche essere definiti come Pacchetti. Sia per Windows che per macOS abbiamo i Package Manager ovvero dei Software che fungono da interfaccia di accesso ad una libreria di tanti altri pacchetti (Software).
Perchè avere un Package Manager quando possiamo semplicemente cercare su Google il software, scaricarlo ed installarlo manualmente? Un Package Manager ci permette di installare e gestire i software con molta più facilità, sicurezza e velocità.
Passiamo quindi all'installazione del Package Manager.
In ambiente Windows il package manager più utilizzato si chiama Chocolatey mentre in ambiente macOS si chiama Homebrew.
Segui gli steps relativi al tuo sistema operativo 👇
Se utilizzi Windows
- Cerca Windows Power Shell ed assicurati di Eseguire come Amministratore e conferma su Si nella finestra che apparirà subito dopo
- Controlla se l'Execution Policy è configurata come Restricted o qualcosa di similare. Esegui il comando sottostante come nell'immagine per controllare:
Get-ExecutionPolicy
- Molto probabilmente avrai i permessi configurati come
Restricted. Cambia questa configurazione dando tutti i permessi. Per cambiarla esegui quindi il comando sottostante rispettando tutti gli spazi e le lettere grandi e piccole:
Set-ExecutionPolicy AllSigned
Ti chiederà di confermare e dovrai inserire una s e premere Invio.
- In ultimo controlla se i permessi sono stati assegnati correttamente eseguendo di nuovo il comando
Get-ExecutionPolicy
Perfetto! Ora sei pronto ad installare Chocolatey 💪
- Trovi di seguito il comando da eseguire nel terminale:
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
Lo stesso comando lo puoi trovare anche sul sito ufficiale di Chocolatey:
➡️ https://chocolatey.org/install
- Aspetta qualche secondo mentre viene completata l'installazione e dopodichè scrivi nel terminale il comando sottostante.
choco -?
Se non vedi alcun errore nel terminale significa che tutto è andato per il meglio 🙂
Se utilizzi macOS
- Apri il
Terminale. Per prima cosa dobbiamo installare i comandixcode. - Esegui il comando sottostante. Ti chiederà di confermare, premi su
Si.
xcode-select --install
Quest'operazione ci potrà impiegare un pò di tempo per completare in base alla velocità della tua connessione internet.
- Una volta completata siamo pronti ad installare Homebrew. Ti basterà eseguire il comando sottostante per installarlo:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Lo stesso comando lo puoi trovare sul sito ufficiale: https://brew.sh/
- Ti chiederà di inserire la password del tuo computer e di confermare premendo Invio
Alla fine dovresti ritrovarti con una schermata simile all'immagine sottostante
- A questo punto devi copiare ed incollare le tre righe suggerite alla fine, una per volta
- E per concludere devi eseguire altri due comandi per confermare che sia tutto andato per il meglio
brew doctor
brew update
Proseguiamo con il Version Control System. Apri il menù a tendina in basso 👇
Esiste il concetto del version control system ovvero un sistema per gestire e controllare le versioni del tuo progetto man mano che avanza.
Più avanti scopriremo quanto è importante usare un sistema di controllo di versioni quando si scrive codice (e non solo).
Il software più utilizzato si chiama Git. È stato creato da Linus Torvalds mentre sviluppava il Kernel di Linux. Il 90% dei developers che hanno partecipato ad un sondaggio condotto dal famosissimo sito Stack Overflow hanno risposto di utilizzare Git come opzione per il version control system. Qui puoi trovare il risultato di questa statistica.
Segui gli steps relativi al tuo sistema operativo 👇
Se utilizzi Windows
Questo software è stato inizialmente ideato per utenti LINUX o per chi lavora in ambiente UNIX (es. macOS) ma non ti preoccupare, non hai bisogno ne di LINUX, ne di UNIX ne di sapere che cosa significano questi termini.
Windows si basa su MS-DOS.
Installeremo Git Bash, il pacchetto che installerà Git e Bash. Quest'ultimo è una sorta di emulatore UNIX per utenti Windows in modo da poterci far utilizzare Git senza problemi.
- Esegui
Windows PowerShellcome Amministratore (se stai proseguendo la guida dallo step precedente dovresti avere questo programma già aperto).
- Esegui quindi il comando...la comodità di avere un package manager e di installare software con facilità! 🙌
choco install git.install
- Quando chiederà di confermare scrivi
Ye premi Invio
- Dovrebbe essere stato installato tutto correttamente se vedrai alla fine una scritta in verde che dice
The install of git.install was successful.
- Ora cerca il nuovo terminale che abbiamo installato chiamato
Git Bashed eseguilo come Amministratore
- Conferma con il pulsante Si la finestra che si aprirà
- Ed ora puoi finalmente confermare di aver installato correttamente
Giteseguendo il comando sottostante
git --version
Se utilizzi macOS
Qui inizierai a notare i benefici nell'aver installato Homebrew.
- Apri il Terminale
- Esegui il comando sottostante. Lo trovi anche qui sul sito ufficiale.
brew install git
- Una volta completato dovresti avere Git installato sul tuo mac 😃
Step 7 - Linguaggi di Programmazione: Node JS
Attenzione: Avrai bisogno di installare Node JS solo se pianifichi di seguire la guida su Node altrimenti puoi saltare questo step.
Perchè Node?
È semplicemente JavaScript che inizieremo a studiare nella parte Frontend della guida. La differenza è che Node non esegue JavaScript nel browser come accade per il Frontend ma lo esegue direttamente sul tuo computer.
I benefits di studiare Node come primo linguaggio di programmazione Backend sono molteplici:
- È un linguaggio molto semplice da imparare;
- Utilizziamo lo stesso linguaggio sia per la parte Frontend che per la parte Backend;
- È un linguaggio molto utilizzato nel mondo del lavoro - quindi se vuoi trovare un lavoro come sviluppatore Backend, Node è un ottimo punto di partenza;
JavaScript è nato come linguaggio di programmazione solo per il Frontend e l'unico posto in cui potevamo eseguire JavaScript era nel browser. Poi è arrivato Node. La definizione di Node è: "Una versione di JavaScript in un ambiente Runtime".
Quindi fino a prima dell'arrivo di Node JS, per scrivere codice lato Server eravamo obbligati ad usare altri linguaggi di programmazione come PHP, Java, Python, Ruby ecc.
Imparare più di un linguaggio di programmazione è un grosso vantaggio ma voglio darti subito una bella notizia: una volta che avrai imparato bene il tuo primo linguaggio, impararne un altro sarà molto più facile.
E per questo motivo ti consiglio di iniziare con Node JS cosicchè possiamo focalizzarci il più possibile sull'imparare nuovi concetti anzichè dover imparare diverse sintassi. Quindi utilizzeremo JavaScript sia nella parte Frontend che nella parte Backend del corso.
Installazione
L'installazione è molto semplice. Basta andare sul sito ufficiale di Node JS e scaricare l'ultima versione stabile.
La dicitura "LTS" significa "Long Term Support" e indica che è una versione stabile del linguaggio. La versione "Corrente" è invece una versione ancora in sviluppo e non è ancora stabile.
Quindi installiamo la versione LTS. Nel caso dovessi notare che la versione LTS è diversa da quella che vedrai nella guida, non preoccuparti. È normale che le versioni cambino nel tempo. L'importante è che tu installi la versione LTS.
Ora se sei un utente Windows segui la guida Windows, altrimenti segui la guida macOS.
Se utilizzi Windows
Una volta che hai scaricato Node JS, apri il file eseguibile e dovresti ritrovarti con una finestra d'installazione simile a questa:
Quindi segui l'installazione normalmente cliccando su "Next" o "Avanti"
E assicurati di spuntare la casella "Automatically install the necessary tools. Note that this will also install Chocolatey. The script will pop-up in a new windows after the installation completes."
A questo punto l'installazione dovrebbe terminare come nella finestra seguente e dopodichè dovrebbe aprire in automatico una finestra del Terminale:
Come appunto viene detto nella finesta, premi un tasto per continuare con l'installazione dei file necessari per Node JS.
Quando proverà ad aprire la Windows Powershell clicca su "Si" per consentire l'esecuzione dello script.
A questo punto dovrebbe installare tutti i file necessari tra cui Python:
Ed una volta completata l'installazione apri una nuova finestra di Windows PowerShell come Amministratore e prova a digitare il comando node -v e npm -v per verificare che sia tutto andato a buon fine.
Se non riscontri nessun errore nell'eseguire i comandi node -v e npm -v allora hai installato Node JS correttamente.
Se utilizzi macOS
Una volta che hai scaricato Node JS, apri il file eseguibile e prosegui con l'installazione normalmente:
L'installazione dovrebbe terminare con una finestra simile a questa:
Adesso prova ad aprire una nuova finestra del Terminale e digitare i comandi node -v e npm -v per verificare che sia tutto andato a buon fine.
Conclusione
Innanzitutto voglio dirti che se sei arrivato fin qui sono orgoglioso di te.
Queste cose inizialmente ci sembrano complesse, fuori dalla nostra portata e possono farci sentire come "non fatti per questo" infatti pensieri come "questo non fa per me" sono più comuni di quello che si pensa.
Ti garantisco che anche la programmazione, come imparare a guidare la macchina, ci sembra complessa ma con la pratica acquisiamo sempre più sicurezza e diventiamo sempre più pratici.
Con questo step quindi concludiamo qui la prima fase di preparazione. Nel prossimo articolo passeremo alla configurazione del Version Control System.
Un anticipo a che cosa andremo a vedere nel prossimo articolo:
- configurare Git con nome ed e-mail nel tuo computer;
- registrazione su GitHub e creare un link tra il tuo account GitHub e il software Git nel tuo computer