2. Installazione di un ambiente di lavoro

Utilizzeremo i seguenti strumenti (su Windows 10 a 64 bit):

[Laragon] per eseguire il server web PHP;
[Netbeans] per modificare il codice PHP;
[Visual Studio Code] per scrivere i codici JavaScript;
[node.js] per eseguirli;
[npm] per scaricare e installare le librerie JavaScript di cui avremo bisogno;

2.1. Ambiente di lavoro per il server web

Gli script PHP sono stati scritti e testati nel seguente ambiente:

un ambiente server web Apache / SGBD MySQL / PHP 7.3 denominato Laragon;
l'ambiente di sviluppo NetBeans 10.0;

2.1.1. Installazione di Laragon

Laragon è un pacchetto che riunisce diversi software:

un server web Apache. Lo useremo per la scrittura di script web in PHP;
il SGBD MySQL;
il linguaggio di scripting PHP;
un server Redis che implementa una cache per le applicazioni web:

Laragon può essere scaricato (marzo 2019) al seguente indirizzo:

https://laragon.org/download/

L'installazione [1-5] genera la struttura directory seguente:

in [6] la cartella di installazione di PHP;

L'avvio di [Laragon] visualizza la seguente finestra:

[1]: il menu principale di Laragon;
[2]: il pulsante [Start All] avvia il server web Apache e SGBD MySQL;
[3]: il pulsante [WEB] visualizza la pagina web [http://localhost], che corrisponde al file PHP [<laragon>/www/index.php], dove <laragon> è la cartella di installazione di Laragon;
[4]: il pulsante [Database] consente di gestire SGBD e MySQL con lo strumento [phpMyAdmin]. È necessario prima installarlo;
[5]: il pulsante [Terminal] apre una finestra di comando;
[6]: il pulsante [Root] apre Esplora risorse di Windows con la cartella [<laragon>/www] selezionata, che costituisce la radice del sito web [http://localhost]. È qui che devono essere collocate tutte le applicazioni web gestite dal server Apache di Laragon;

Apriamo un terminale Laragon [5]:

in [1], il tipo di terminale. Sono disponibili tre tipi di terminali in [6];
in [2, 3]: la cartella corrente;
in [4], si digita il comando [echo %PATH%] che visualizza l'elenco delle cartelle esplorate durante la ricerca di un eseguibile. Tutte le cartelle principali di Laragon sono incluse in questo percorso degli eseguibili, cosa che non avverrebbe se si aprisse una finestra di comando [cmd] in Windows. In questo documento, quando si devono digitare comandi per installare un determinato software, questi comandi vengono generalmente digitati in un terminale Laragon;

2.1.2. Installazione di IDE NetBeans 10.0

NetBeans 10.0 può essere scaricato al seguente indirizzo (marzo 2019):

https://netbeans.apache.org/download/index.HTML

Il file scaricato è un archivio zip che basta decomprimere. Una volta installato e avviato NetBeans, è possibile creare un primo progetto PHP.

in [1], selezionare l'opzione File / New Project;
in [2], selezionare la categoria [PHP];
in [3], selezionare il tipo di progetto [PHP Application];

in [4], assegnare un nome al progetto;
in [5], scegliere una cartella per il progetto;
in [6], selezionare la versione di PHP scaricata;
in [7], scegliere la codifica UTF-8 per i file PHP;
In [8], selezionare la modalità [Script] per eseguire gli script PHP in modalità riga di comando. Selezionare [Local WEB Server] per eseguire uno script PHP in un ambiente web;
in [9,10], specificare la directory di installazione dell'interprete PHP del pacchetto Laragon:

selezionare [Finish] per completare la procedura guidata di creazione del progetto PHP;

in [11], il progetto viene creato con uno script [index.php];
in [12], si scrive uno script PHP minimale;
in [13], si esegue [index.php];

in [14], i risultati nella finestra [output] di NetBeans;
in [15], si crea un nuovo script;
in [16], il nuovo script;

Il lettore potrà creare tutti gli script che seguiranno in diverse cartelle dello stesso progetto PHP. I codici sorgente degli script di questo documento sono disponibili nella seguente struttura ad albero di NetBeans:

Gli script di questo documento sono collocati nella struttura del progetto [scripts-console] [1]. Utilizzeremo inoltre le librerie PHP, che saranno collocate nella cartella [<laragon-lite>/www/vendor] [2], dove <laragon-lite> è la cartella di installazione del software Laragon. Affinché NetBeans riconosca le librerie di [2] come parte del progetto [scripts-console], dobbiamo includere la cartella [vendor] [2] nel ramo [Include Path] [3] del progetto. Configureremo NetBeans in modo che la cartella [<laragon-lite>/www/vendor] [2] sia inclusa in ogni nuovo progetto PHP e non solo nel progetto [scripts-console]:

in [1-2], si accede alle opzioni di NetBeans;
in [3-4], si configurano le opzioni di PHP;
in [5-7], si configura il [Global Include Path] di PHP: le cartelle indicate in [7] vengono automaticamente incluse nel [Include Path] di qualsiasi progetto PHP;

in [9], si accede alle proprietà del ramo [Include Path];
in [10-11], le nuove librerie analizzate da NetBeans. NetBeans analizza il codice PHP di queste librerie e memorizza le loro classi, interfacce, funzioni… per poter offrire assistenza allo sviluppatore;

in [12], un codice utilizza la classe [PhpMimeMailParser\Parser] della libreria [vendor/php-mime-mail-parser];
in [13], NetBeans suggerisce i metodi di questa classe;
in [14-15], NetBeans visualizza la documentazione del metodo selezionato;

Il concetto di [Include Path] è qui specifico di NetBeans. Anche PHP presenta questo concetto, ma si tratta, a prima vista, di due concetti distinti.

Ora che l'ambiente di lavoro è stato installato, possiamo affrontare le nozioni di base su PHP.

2.2. Ambiente di lavoro per JavaScript

Questi strumenti possono essere installati tramite Laragon (vedi paragrafo "link"):

In [4], si installa [node.js]. Una volta completata l’installazione, si apre un terminale Laragon (cfr. paragrafo «link») e si verifica la versione installata di [node.js] (1) e quella di [npm] (2):

Successivamente installiamo Visual Studio Code, spesso denominato [code], [VSCode] o [3-6]. Fatto ciò, possiamo avviare questo strumento di sviluppo:

2.2.1. Configurazione di Visual Studio Code

Mostriamo ora come abbiamo configurato [VSCode] affinché il lettore possa comprendere gli screenshot che appariranno di tanto in tanto. Il lettore è libero di configurare [VSCode] come preferisce. Può persino installare il proprio ambiente di lavoro preferito. Questo aspetto non ha importanza per ciò che faremo in seguito.

Per prima cosa, modifichiamo l’aspetto della finestra di [VSCode] per avere uno sfondo chiaro anziché nero:

Poi nascondiamo la barra a sinistra [1-2], i cui elementi sono comunque disponibili nel menu. In [3-6], impostiamo la formattazione del codice ad ogni salvataggio del file e ad ogni operazione di copia/incolla.

Dopo aver salvato la configurazione [Ctrl-S], è possibile chiudere la finestra [Settings] [7]. È possibile tornare in qualsiasi momento alla configurazione di [VSCode] [8-10]:

Queste configurazioni vengono salvate in un file [settings.json] che è possibile modificare direttamente. Apriamo la finestra di configurazione [Settings] come illustrato in precedenza:

In [4] è possibile modificare direttamente il file [settings.json]:

in [1], il percorso del file [settings.json]. Un modo per ripristinare la configurazione predefinita è eliminare questo file;
in [2], le configurazioni che abbiamo appena effettuato;

Ora apriamo un terminale all’interno di [VSCode] [1-2]:

in [3], il tipo di terminale aperto, in questo caso PowerShell;
in [4] è possibile digitare comandi di Windows;
in [6], è possibile aprire altri terminali;
in [5], l'elenco dei terminali aperti;
in [7], si chiude il terminale attivo;

Utilizzeremo il terminale di [VSCode] per installare pacchetti (librerie) JavaScript con lo strumento [npm] (Node Package Manager). Verifichiamo, come abbiamo fatto in precedenza in un terminale Laragon, la versione di [npm] installata:

Si nota che il comando [npm] non è stato riconosciuto. Ciò significa che non appartiene al PATH (elenco delle cartelle da esplorare per cercare un eseguibile, in questo caso [npm]) del terminale. È possibile conoscere il PATH utilizzato dal terminale:

Il file eseguibile [npm] non si trova in nessuna di queste cartelle. Come gli altri strumenti installati da Laragon, si trova nella cartella [<laragon>\bin] di Laragon e, più precisamente, nella sottocartella di [nodejs] [4-6].

Per avviare [VSCode] e accedere a [npm], avvieremo [VSCode] da un terminale Laragon. Una volta avviato in questo modo, [VSCode] erediterà il percorso di PATH dal terminale Laragon, che a sua volta contiene la cartella degli eseguibili [node] e [npm]:

in [1]: si digita il comando [path];
in [2]: l’elenco delle cartelle di PATH. Qui si vedono le cartelle [node-v10] e [2], il che ci garantisce che gli eseguibili [node] e [npm] saranno trovati;

[VSCode] viene avviato da un terminale Laragon con il comando [code]:

in [2], si apre un terminale PowerShell all’interno di [VSCode];
in [3-4], si vede che gli eseguibili [node] e [npm] sono accessibili;

Nota: non bisogna chiudere il terminale Laragon che ha avviato l’ambiente di sviluppo [VSCode], altrimenti VSCode stesso si chiuderà.

Effettueremo un’ultima configurazione: modificheremo il terminale predefinito di [VSCode]:

Il file [settings.json] si aggiorna immediatamente:

Ora apriamo un nuovo terminale [VSCode] [1]:

in [2], un terminale [cmd] (non PowerShell);
in [3], il comando [path] restituisce il PATH del terminale;
in [4], si vede chiaramente la cartella degli eseguibili [node] e [npm]

2.2.2. Aggiunta di estensioni a Visual Studio Code

Creiamo un file JavaScript con [VSCode]:

in [3-4], creiamo una cartella;
in [5], lo si imposta come directory corrente di [VSCode];
in [6], si apre un terminale;
in [7], si vede che ci si trova nella cartella selezionata. Le operazioni successive verranno eseguite all’interno di questa cartella;

in [1-3]: si crea una nuova cartella;
in [4]: si aggiunge un file in questa cartella;

in [5-7]: si crea il nostro primo programma JavaScript;

in [8-9]: si esegue il programma JavaScript;
il risultato appare nella console di esecuzione [10]. In [11] si vede il comando che è stato eseguito: è stata l’applicazione [node] a eseguire lo script [test-01.js]. Ciò è stato possibile perché questo eseguibile si trova nel PATH di [VSCode]; altrimenti si sarebbe verificato un errore che indicava che il comando [node] non era conosciuto;

Procediamo allo stesso modo per eseguire un secondo script [test-02.js]:

in [1-3], si definisce il nuovo script. L’istruzione [use strict] della riga 1 richiede una verifica rigorosa della sintassi. In questo contesto, ogni variabile deve essere dichiarata con una delle parole chiave [let, const, var]. Questo non è il caso della variabile [x] alla riga 2;
quando si esegue questo codice tramite [Ctrl-F5], si ottiene l’errore [5]. È possibile ricevere un avviso relativo a questo tipo di errore prima dell’esecuzione. È preferibile così. Faremo due cose:
- installare con [npm] una libreria denominata [eslint] che verifica che la sintassi dello script sia conforme allo standard ECMAScript 6;
- installare un’estensione per Visual Studio Code, anch’essa denominata ESLINT, che facilita l’utilizzo della libreria [eslint] all’interno di [VSCode];

Installiamo innanzitutto la libreria JavaScript [eslint] utilizzando lo strumento [npm]. Per installare una libreria (detta anche pacchetto) [npm], è necessario conoscerne il nome esatto. Se non lo si conosce, è possibile visitare il sito di [npm] all’indirizzo URL (2019) [https://www.npmjs.com/]:

da [3], i pacchetti che iniziano con [esl];
in [4-6] si trova il pacchetto [eslint];

in [7], il comando [npm] per installare il pacchetto [eslint];
in [8], la configurazione del pacchetto;
in [9], il suo utilizzo per verificare la sintassi di uno script JavaScript;

Installiamo il pacchetto [eslint] in una finestra [Terminal] di [VSCode]. Per prima cosa, dobbiamo creare un file [package.json] nella directory principale della cartella di lavoro di [VSCode]. Questo file conterrà l'elenco dei pacchetti jS utilizzati dal progetto [VSCode]:

in [1], fare clic con il tasto destro del mouse nell’esploratore di progetto (non sulla cartella «tests»);
in [3-4], si crea il file [package.json] nella directory principale del progetto [javascript], allo stesso livello della cartella [tests] (ma non all'interno di [tests]);
in [4-6], si inserisce nel file [package.json] un oggetto jSON vuoto;

Quindi si apre un terminale [VSCode] per installare [eslint]:

in [2], ci si trova nella directory principale del progetto [javascript];
in [3], il comando che installa il pacchetto [eslint];
dopo l’esecuzione,
- in [4-5], il file [package.json] è stato modificato. Alla riga 3 si trova la versione installata di [eslint]. Alla riga 2, [devDependencies] corrisponde all’argomento [--save-dev] dell’installazione. Questo argomento significa che la dipendenza installata deve essere inserita nel file [package.json] come elemento della proprietà [devDependencies]. Questa proprietà elenca le dipendenze del progetto necessarie in modalità sviluppo ma non in modalità produzione. Infatti, la dipendenza [eslint] è necessaria solo in fase di sviluppo per verificare che il codice scritto rispetti lo standard ECMAScript;
- in [6], nel progetto è apparsa una cartella denominata [node_modules]. Si tratta della cartella in cui sono installate le dipendenze del progetto;

in [7], una parte dei pacchetti installati. Questi sono molto numerosi. Infatti, non solo è stato installato il pacchetto [eslint], ma anche tutti i pacchetti su cui esso si basa;

[1-2], in un terminale [VSCode] si esegue il comando di configurazione del pacchetto [eslint]. La procedura di configurazione porrà diverse domande [3] per determinare come si desidera utilizzare [eslint]. In caso di dubbio, lasciare le opzioni predefinite. Per selezionare un'opzione, utilizzare i tasti freccia su e giù della tastiera per scegliere l'opzione desiderata, quindi confermarla;
in [4], è stato creato un file [.eslintrc.js] nella directory principale del progetto;
in [6], il contenuto del file. È possibile copiarne il contenuto nel proprio file;


module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
  }
};

Tutto ciò non è sufficiente per segnalare gli errori del file [test-02.js]:

è necessario digitare il comando [2-3] affinché il file [tests/test-02.js] venga analizzato;
nel file [4] viene rilevato l’errore relativo alla variabile non dichiarata;

Aggiungeremo a [VSCode] un'estensione che consentirà di visualizzare gli errori JavaScript in tempo reale. Questa estensione si basa sul pacchetto [eslint] che abbiamo installato:

in [3-5], installiamo l’estensione denominata [ESLint];

in [1], una pagina informativa sull’estensione appena installata;
in [2], si nota che la modalità di verifica di [ESLint] è [type], il che significa che la sintassi degli script jS verrà verificata contemporaneamente alla digitazione del testo;

ESLint può essere configurato tramite il file di configurazione generale di [VSCode]:

in [6-7], la configurazione di [ESLint]. È qui che potrete modificarla;

Torniamo ora al file [test-02.js]:

in [3-4], gli errori relativi alla variabile [x] vengono ora segnalati;
in [5]: il numero di errori ESLint nel file;
in [6], indica che nella cartella [tests] sono presenti file errati;

Se si corregge l’errore, gli avvisi di ESLint scompaiono:

Installiamo ora un’estensione denominata [Code Runner]:

una volta installata l’estensione [Code-Runner] [1-5], è possibile configurarla con [6-7] (sopra);

in [1-2], gli elementi di configurazione di [Code-Runner];
in [3], si richiede che il terminale di output venga ripulito prima di ogni esecuzione;
in [4], si individua l’elemento [Executor Map] che elenca gli strumenti di esecuzione dei diversi linguaggi;
in [5-6], si copia la configurazione negli appunti;
in [7-8], si modifica il file [settings.json];

in [2], si aggiunge la virgola dopo l'ultimo elemento del file [settings.json] [1];
nel file [3], si incolla ciò che è stato copiato in precedenza nel file [5-6]: si tratta dell’elenco dei comandi che consentono di eseguire i diversi linguaggi supportati dal file [VSCode];
in [4], il comando che consente di eseguire i file JavaScript. Questo funziona solo se [node] si trova nel PATH di [VSCode]. In caso contrario, è possibile inserire il percorso completo dell’eseguibile [5];

Fatto ciò, salviamo la configurazione (Ctrl-S). Con l’estensione [Code Runner], i file JavaScript possono essere eseguiti con un clic destro sul codice [6] (sopra):

2.2.3. Alcuni comandi [VSCode] utili

per formattare il codice, clicca con il tasto destro su di esso [1];
per chiudere le finestre aperte, clicca con il tasto destro sui loro titoli [2-3];

per visualizzare una finestra specifica [4-5];
per salvare il progetto (Workspace) [6-9] ;
per salvare un progetto [10-11];

per aprire un progetto [11-16]:

per visualizzare le estensioni installate [19-20]:

Ora disponiamo di ottimi strumenti per lo sviluppo in JavaScript. Presenteremo ora questo linguaggio utilizzando brevi frammenti di codice. Poiché questa presentazione fa seguito a un corso PHP, a volte faremo dei confronti tra questi due linguaggi per evidenziarne le differenze.