2. Configurazione di un ambiente di sviluppo

Utilizzeremo i seguenti strumenti (su Windows 10 x64):

[Laragon] per eseguire il server web PHP;
[NetBeans] per modificare il codice PHP;
[Visual Studio Code] per scrivere il codice JavaScript;
[Node.js] per eseguirlo;
[npm] per scaricare e installare le librerie JavaScript di cui avremo bisogno;

2.1. Ambiente di sviluppo del server web

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

un ambiente composto da server web Apache / DBMS MySQL / PHP 7.3 denominato Laragon;
l'IDE di sviluppo NetBeans 10.0;

2.1.1. Installazione di Laragon

Laragon è un pacchetto che riunisce diversi componenti software:

un server web Apache. Lo useremo per scrivere script web in PHP;
il sistema di gestione di database MySQL;
il linguaggio di scripting PHP;
un server Redis che fornisce la memorizzazione nella cache per le applicazioni web:

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

https://laragon.org/download/

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

[6] contiene la directory 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 il database 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 il database MySQL utilizzando lo strumento [phpMyAdmin]. È necessario installare questo strumento in precedenza;
[5]: il pulsante [Terminal] apre una finestra di comando;
[6]: Il pulsante [Root] apre una finestra di Esplora risorse posizionata sulla cartella [<laragon>/www], che è la directory principale del sito web [http://localhost]. È qui che dovresti collocare tutte le applicazioni web gestite dal server Apache di Laragon;

Apriamo un terminale Laragon [5]:

in [1], il tipo di terminale. In [6] sono disponibili tre tipi di terminali;
in [2, 3]: la cartella corrente;
In [4], digitare il comando [echo %PATH%], che visualizza l'elenco delle cartelle in cui viene effettuata la ricerca quando si cerca un eseguibile. Tutte le cartelle principali di Laragon sono incluse in questo percorso degli eseguibili, cosa che non accadrebbe se si aprisse un prompt dei comandi [cmd] in Windows. In questo documento, quando è necessario digitare comandi per installare un particolare software, tali comandi vengono generalmente digitati in un terminale Laragon;

2.1.2. Installazione dell'IDE NetBeans 10.0

L'IDE NetBeans 10.0 può essere scaricato dal seguente indirizzo (marzo 2019):

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

Il file scaricato è un file ZIP che deve semplicemente essere decompresso. Una volta installato e avviato NetBeans, è possibile creare il proprio primo progetto PHP.

In [1], selezionare l'opzione File / Nuovo progetto;
In [2], selezionare la categoria [PHP];
in [3], selezionare il tipo di progetto [Applicazione PHP];

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

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

In [11], il progetto viene creato utilizzando uno script [index.php];
In [12], scriviamo uno script PHP minimale;
in [13], eseguiamo [index.php];

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

Il lettore può creare tutti gli script che seguono in cartelle diverse all'interno dello stesso progetto PHP. Il codice sorgente degli script presenti in questo documento è disponibile nella seguente struttura di directory di NetBeans:

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

In [1-2], andare alle opzioni di NetBeans;
in [3-4], configura le opzioni PHP;
in [5-7], configurare il [Global Include Path] di PHP: le cartelle elencate in [7] vengono automaticamente incluse nel [Include Path] di ogni progetto PHP;

in [9], accedere alle proprietà del ramo [Include Path];
in [10-11], le nuove librerie esplorate da NetBeans. NetBeans esplora il codice PHP in queste librerie e memorizza le loro classi, interfacce, funzioni, ecc., al fine di fornire assistenza allo sviluppatore;

in [12], uno snippet di codice utilizza la classe [PhpMimeMailParser\Parser] dalla libreria [vendor/php-mime-mail-parser];
in [13], NetBeans suggerisce i metodi di questa classe;
In [14-15], NetBeans visualizza la documentazione relativa al metodo selezionato;

Il concetto di [Include Path] è specifico di NetBeans. Anche PHP ha questo concetto, ma si tratta, in linea di principio, di due concetti diversi.

Ora che l'ambiente di sviluppo è stato configurato, possiamo trattare le nozioni di base di PHP.

2.2. Ambiente di sviluppo per JavaScript

Questi strumenti possono essere installati utilizzando Laragon (vedere la sezione dei link):

In [4], installare [node.js]. Una volta completata l'installazione, aprire un terminale Laragon (vedere la sezione dei link) e verificare la versione di [node.js] installata (1) e quella di [npm] (2):

Successivamente, installiamo Visual Studio Code, spesso indicato come [code] o [VSCode] [3-6]. Una volta fatto ciò, possiamo avviare questo strumento di sviluppo:

2.2.1. Configurazione di Visual Studio Code

Ora mostreremo come abbiamo configurato [VSCode] in modo che il lettore possa comprendere le schermate che appariranno di tanto in tanto. Il lettore è libero di configurare [VSCode] come meglio crede. Può persino impostare il proprio spazio di lavoro preferito. Questo non è importante per ciò che faremo in seguito.

Per prima cosa, modificheremo l'aspetto della finestra di [VSCode] per avere uno sfondo chiaro invece che nero:

Quindi nascondiamo la barra laterale sinistra [1-2], i cui elementi sono disponibili anche nel menu. In [3-6], impostiamo il codice in modo che si formatti automaticamente ogni volta che il file viene salvato e ogni volta che copiamo e incolliamo.

Dopo aver salvato la configurazione [Ctrl-S], puoi chiudere la finestra [Impostazioni] [7]. Puoi tornare alla configurazione di [VSCode] in qualsiasi momento [8-10]:

Queste impostazioni vengono salvate in un file [settings.json] che può essere modificato direttamente. Apriamo la finestra [Impostazioni] come mostrato:

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

in [1], il percorso del file [settings.json]. Un modo per ripristinare le impostazioni predefinite è eliminare questo file;
in [2], le impostazioni appena configurate;

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 i comandi di Windows;
in [6], è possibile aprire terminali aggiuntivi;
in [5], l'elenco dei terminali aperti;
in [7], chiude il terminale attivo;

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

Notiamo che il comando [npm] non è stato riconosciuto. Ciò significa che non fa parte del PATH del terminale (l'elenco delle cartelle in cui cercare un eseguibile, in questo caso [npm]). Possiamo scoprire il PATH utilizzato dal terminale:

L'eseguibile [npm] non è presente in queste cartelle. Come gli altri strumenti installati da Laragon, si trova nella cartella [<laragon>\bin] di Laragon, in particolare nella cartella [nodejs] [4-6].

Per avviare [VSCode] e accedere a [npm], avvieremo [VSCode] da un terminale Laragon. Se avviato in questo modo, [VSCode] erediterà il PATH del terminale Laragon, che contiene le cartelle degli eseguibili [node] e [npm]:

in [1]: digitare il comando [path];
in [2]: l'elenco delle cartelle nel PATH. Vediamo la cartella [node-v10] [2], che garantisce che gli eseguibili [node] e [npm] vengano trovati;

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

in [2], aprire un terminale PowerShell in [VSCode];
in [3-4], è possibile vedere che gli eseguibili [node] e [npm] sono accessibili;

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

Effettueremo un'ultima configurazione: cambieremo il terminale predefinito per [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] mostra il PATH del terminale;
in [4], è possibile vedere chiaramente le cartelle 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], la impostiamo come cartella corrente in [VSCode];
In [6], apri un terminale;
in [7], puoi vedere che ora ti trovi nella cartella selezionata. I passaggi seguenti verranno eseguiti in questa cartella;

In [1-3]: creare una nuova cartella;
In [4]: aggiungi un file a questa cartella;

nei passaggi [5-7]: crea il tuo primo programma JavaScript;

In [8-9]: Esegui il programma JavaScript;
Il risultato appare nella console di esecuzione [10]. In [11], vediamo il comando che è stato eseguito: l'applicazione [node] ha eseguito lo script [test-01.js]. Ciò è stato possibile perché questo eseguibile si trova nel PATH di [VSCode]; altrimenti, avremmo ricevuto un errore che indicava che il comando [node] era sconosciuto;

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

In [1-3] viene definito il nuovo script. L'istruzione [use strict] alla riga 1 richiede un controllo sintattico rigoroso. In questo contesto, ogni variabile deve essere dichiarata utilizzando una delle parole chiave [let, const, var]. Questo non è il caso della variabile [x] alla riga 2;
quando eseguiamo questo codice utilizzando [Ctrl-F5], otteniamo l'errore [5]. È possibile ricevere un avviso relativo a questo tipo di errore prima dell'esecuzione. Questa è la soluzione preferibile. Faremo due cose:
- installare una libreria chiamata [eslint] utilizzando [npm] che verifica se la sintassi dello script è conforme allo standard ECMAScript 6;
- installare un'estensione di Visual Studio Code, chiamata anch'essa ESLINT, che semplifica l'utilizzo della libreria [eslint] all'interno di [VSCode];

Per prima cosa, installiamo la libreria JavaScript [eslint] utilizzando lo strumento [npm]. Per installare una libreria [npm] (nota come pacchetto), è necessario conoscerne il nome esatto. Se non lo conosci, puoi visitare il sito web di [npm] all'URL (2019) [https://www.npmjs.com/]:

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

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

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

in [1], fare clic con il tasto destro del mouse nell'esploratore del progetto (non sulla cartella tests);
in [3-4], creare 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], aggiungi un oggetto JSON vuoto al file [package.json];

Quindi aprire un terminale [VSCode] per installare [eslint]:

In [2], ti trovi 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. La riga 3 mostra la versione di [eslint] installata. La riga 2, [devDependencies], corrisponde all'opzione [--save-dev] utilizzata durante l'installazione. Questo argomento significa che la dipendenza installata deve essere elencata nel file [package.json] come parte 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 durante lo sviluppo per verificare che il codice scritto sia conforme allo standard ECMAScript;
- in [6], nel progetto è apparsa una cartella [node_modules]. Questa è la cartella in cui vengono installate le dipendenze del progetto;

In [7], alcuni dei pacchetti installati. Ce ne sono parecchi. Infatti, non solo è stato installato il pacchetto [eslint], ma anche tutti i pacchetti da cui dipende;

[1-2], in un terminale [VSCode], esegui il comando per configurare il pacchetto [eslint]. Verranno poste diverse domande [3] per determinare come desideri utilizzare [eslint]. In caso di dubbio, lascia le opzioni predefinite così come sono. Per selezionare un'opzione, usa i tasti freccia su e giù sulla tastiera per scegliere l'opzione e poi confermala;
in [4], è stato creato un file [.eslintrc.js] nella directory principale del progetto;
in [6], il contenuto del file. Puoi copiare il contenuto nel tuo file;


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

Questo non è sufficiente per segnalare gli errori nel file [test-02.js]:

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

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

nei punti [3-5], installiamo l'estensione chiamata [ESLint];

In [1], una pagina informativa sull'estensione appena installata;
in [2], possiamo vedere che la modalità di validazione di [ESLint] è [type], il che significa che la sintassi degli script JavaScript verrà validata man mano che si digita il testo;

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

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

Ora torniamo al file [test-02.js]:

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

Se correggiamo l'errore, gli avvisi di ESLint scompaiono:

Ora installiamo un'estensione chiamata [Code Runner]:

Una volta installata l'estensione [Code-Runner] [1-5], è possibile configurarla utilizzando [6-7] (sopra);

in [1-2], le opzioni di configurazione per [Code-Runner];
In [3], specifichiamo che il terminale di output deve essere cancellato prima di ogni esecuzione;
in [4], individuare l'elemento [Executor Map], che elenca gli strumenti di esecuzione per i diversi linguaggi;
in [5-6], copiare la configurazione negli appunti;
in [7-8], modifichiamo il file [settings.json];

in [2], aggiungi una virgola dopo l'ultimo elemento nel file [settings.json] [1];
in [3], incolla ciò che è stato precedentemente copiato in [5-6]: questo è l'elenco dei comandi per l'esecuzione dei vari linguaggi supportati da [VSCode];
in [4], il comando per eseguire i file JavaScript. Funziona solo se [node] è nel PATH di [VSCode]. In caso contrario, è possibile inserire il percorso completo dell'eseguibile [5];

Ora salviamo la configurazione (Ctrl-S). Con l'estensione [Code Runner], i file JavaScript possono essere eseguiti cliccando con il tasto destro del mouse sul codice [6] (sopra):

2.2.3. Alcuni comandi utili di [VSCode]

Per formattare il codice, fare clic con il tasto destro del mouse 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]:

Visualizza le estensioni installate [19-20]:

Ora disponiamo di ottimi strumenti per lo sviluppo in JavaScript. Introdurremo questo linguaggio utilizzando brevi frammenti di codice. Poiché questa introduzione fa seguito a un corso su PHP, di tanto in tanto confronteremo i due linguaggi per evidenziarne le differenze.