Guida a GDRCD: sviluppo in locale

Dopo aver visto più volte sviluppare progetti play-by-chat direttamente nell’editor di cPanel (il pannello di controllo usato dagli hosting, come Altervista, per gestire file e configurazioni dei siti web), ho pensato fosse utile spiegare perché questo approccio sia ormai non solo largamente superato, ma addirittura potenzialmente pericoloso.

Lavorare su un CMS come GDRCD modificando il codice direttamente sul server in produzione, senza un ambiente di sviluppo locale, è rischioso e poco pratico: basta una svista per compromettere tutto il progetto. Ogni modifica rischia di interrompere il gioco per i giocatori o, peggio, di esporre il sito a vulnerabilità e problemi di sicurezza.

Ecco perché uno sviluppo in locale, con strumenti gratuiti come XAMPP e Visual Studio Code, è essenziale per chiunque voglia creare un progetto solido, sperimentando in tutta sicurezza prima di andare online. In più, è una soluzione semplice e alla portata di tutti, anche di chi non ha mai configurato un ambiente di sviluppo.

Questa guida dimostra quanto sia più efficiente, sicuro e professionale adottare questa metodologia fin dalle prime fasi di sviluppo.

Quindi, per riassumere...

Perché sviluppare in locale è fondamentale?

• Comodità: Da locale puoi utilizzare strumenti decisamente più comodi per editare il codice ed evitare errori grossolani, oltre ad una navigazione decisamente più fluida tra le varie pagine.
• Libertà: Puoi creare e testare idee con totale libertà, sapendo che non influenzerà l'esperienza dei tuoi utenti giocanti.
• Sicurezza: Se qualcosa va storto e il sistema si rompe durante lo sviluppo puoi tornare indietro in tutta tranquillità, non lasciando cose "a metà" in produzione.

• XAMPP: un pacchetto software che include Apache (server web), MySQL (database) e PHP, il linguaggio di programmazione utilizzato da GDRCD.
• Visual Studio Code (VSCode): un editor di codice leggero ma potente, ideale per modificare i file del progetto.

Entrambi questi software sono disponibili per tutti i principali sistemi operativi; in questa guida, però, ci concentreremo solo sulle configurazioni per Windows e macOS.


Configurazione Rapida di XAMPP

1. Download e Installazione

- Windows: Vai su XAMPP, scarica la versione per Windows e segui le istruzioni di installazione.
- macOS: Lo stesso vale per macOS. Scarica la versione per Mac dal sito di XAMPP e segui le istruzioni per l’installazione. Su macOS, XAMPP installerà anche un’interfaccia grafica per gestire Apache e MySQL.

N.B.: durante il processo di installazione, a seconda del sistema operativo, potrebbe essere richiesto il tuo intervento per selezionare componenti aggiuntive; suggeriamo di installare sempre almeno phpMyAdmin, mentre le aggiunte facoltative sono a discrezione dell'utente. Se vi viene richiesta autorizzazione all'uso della rete da Apache dai pure il consenso.

2. Avvio di Apache e MySQL

- Windows: Una volta installato, apri il Pannello di Controllo di XAMPP e avvia Apache (il server web) e MySQL (il database).
- macOS: Anche su Mac, apri l’applicazione XAMPP e clicca su "Start" accanto ad Apache e MySQL per avviare i servizi.

Installazione di Visual Studio Code

Passiamo quindi all'installazione di Visual Studio Code, un editor gratuito, potente e ricco di utili funzionalità che semplificano notevolmente il lavoro di sviluppo, in modo da avere tutto pronto per le successive fasi della configurazione di GDRCD.

1. Vai al sito ufficiale di Visual Studio Code
2. Scarica la versione per il tuo sistema operativo (Windows o macOS) e segui le istruzioni di installazione.

Configurazione GDRCD

Download ed Estrazione

Dopo aver scaricato GDRCD dalla pagina dedicata su GDR-Online o dalla repository ufficiale, estrai i file nella cartella `htdocs` di XAMPP. La directory `htdocs` è dove vengono posizionati i file web da eseguire in locale.

- Percorso su Windows:
Il percorso predefinito per `htdocs` è:

C:/xampp/htdocs/

Crea una nuova cartella, ad esempio `gdr`, e copia i file di GDRCD in questa directory. Ora puoi accedere al progetto GDRCD digitando `http://localhost/gdr` nel browser.

- Percorso su macOS: Su macOS, la cartella `htdocs` si trova nel percorso:

/Applications/XAMPP/htdocs/

Anche qui, crea una nuova cartella `gdr` e copia i file di GDRCD in questa directory. Accedi al progetto GDRCD digitando `http://localhost/gdr` nel browser.

Configurazione del database

GDRCD richiede un database per funzionare. Puoi gestire il database usando phpMyAdmin, un'interfaccia grafica per la gestione dei database MySQL inclusa in XAMPP. Accedi a phpMyAdmin digitando `http://localhost/phpmyadmin/` nel browser.

1. Crea un nuovo database, ad esempio chiamandolo `gdr_db` o `my_gdr`.
2. Ricorda il nome del database, poiché lo utilizzerai durante il processo di installazione di GDRCD.

Per avviare l'installazione di GDRCD, accedi a `http://localhost/gdr/` nel browser. Prima di poter completare il processo, è necessario configurare i parametri di connessione al database nel file `config.inc.php`, situato nella directory principale del progetto GDRCD.


Modifica dei parametri di connessione in config.inc.php

Apri Visual Studio Code e usa l’opzione Apri cartella per accedere alla cartella `gdr` che hai creato in `htdocs`.

N.B.: in fase di apertura della cartella potrebbe richiedere una conferma sul contrassegnare come verificato quel percorso file. Non ti spaventare e dai pure il consenso!

Scorri i file presenti nel pannello a sinistra fino a trovare il file `config.inc.php`, quindi cliccalo due volte. Una volta mostrato il contenuto del file, modifica i seguenti parametri di connessione per permettere a GDRCD di collegarsi al database:

⚬ $PARAMETERS['database']['username']: per la configurazione base di XAMPP, l'utente predefinito è `root`.
⚬ $PARAMETERS['database']['password']: XAMPP, di default, non imposta una password per l’utente `root`, quindi lascia il campo vuoto.
⚬ $PARAMETERS['database']['database_name']: inserisci il nome del database creato, ad esempio `gdr_db`.
⚬ $PARAMETERS['database']['url']: imposta l’host su `localhost`, specificando così che il database è in locale.

Per salvare le modifiche al file `config.inc.php` usa il relativo comando Salva (CTRL + S o CMD + S).

Torna al browser e completa i passaggi dell'installazione guidata di GDRCD. A questo punto, sarai pronto per iniziare a personalizzare il tuo gioco di ruolo con un ambiente di sviluppo completo e ben configurato.

Usare Visual Studio Code per modificare GDRCD

Ora che tutto è pronto, si può finalmente passare al vero sviluppo del proprio progetto e in questo Visual Studio Code può fornire un grande aiuto.

Ecco alcuni consigli su come sfruttarlo al meglio.

Apertura del progetto in VS Code

Apri Visual Studio Code e utilizza l’opzione Apri cartella per selezionare la cartella `gdr` che hai creato in `htdocs`. Una volta aperto, vedrai un elenco di file e cartelle nella barra laterale a sinistra.

Modifica dei file

Naviga tra i vari file di GDRCD (come `config.inc.php`, `index.php` e altri) e fai doppio clic su quelli che vuoi modificare. L’editor offre una visualizzazione chiara, con diverse colorazioni che facilitano la lettura del codice.

Segnalazione di errori e suggerimenti

Una delle funzioni più utili di VS Code è che ti segnala immediatamente eventuali errori. Se scrivi qualcosa di sbagliato, vedrai una linea rossa sottile sotto il codice errato, e potresti ricevere suggerimenti su come correggerlo. Questo ti aiuta a scrivere codice corretto fin da subito!

Estensioni utili

Per rendere la tua esperienza ancora migliore, puoi installare alcune estensioni. Eccone due che ti consiglio:

⚬ PHP Intelephense: offre autocompletamento e avvisi per gli errori nel codice PHP, rendendo la scrittura più fluida.
⚬ Live Server: ti consente di visualizzare le modifiche in tempo reale nel browser, senza dover ricaricare manualmente la pagina. È davvero comodo quando lavori su file HTML e CSS.


Perché scegliere Visual Studio Code rispetto all'editor di cPanel?

Potresti chiederti: "Perché dovrei usare VS Code invece di modificare i file direttamente nell'editor di cPanel?" Beh, l'editor di cPanel è limitato e spesso lento. Con Visual Studio Code, hai un ambiente molto più ricco e funzionale, dove puoi gestire più file contemporaneamente, ricevere feedback immediato e migliorare la tua produttività. In questo modo, lavorare al tuo GDR diventa molto più semplice e piacevole!


Trasferimento dei file modificati con VSCode

Come avrai intuito, con VSCode è anche possibile trasferire i file modificati localmente direttamente sul tuo spazio web. Per farlo, avrai bisogno di installare l’estensione chiamata SFTP.

Configurazione SFTP

Una volta installata l’estensione, il prossimo passo è quello di creare la configurazione con le informazioni di connessione. Apriamo quindi la palette dei comandi col tasto F1 e digitiamo SFTP:Config, dopodichè premiamo il tasto Invio.

L’IDE ci mostrerà un nuovo file da lui creato chiamato sftp.json. Qui dovremo salvare le informazioni di connessione che il provider del nostro spazio web ci ha fornito.

Breve spiegazione dei campi che ci interessano:

⚬ name: è un nome di riferimento che diamo alla connessione, possiamo scegliere quello che preferiamo!
⚬ host: l’host di connessione, nel caso di altervista è identico a quello che digitiamo nella barra degli indirizzi del browser per aprire il sito.
⚬ protocol: assicurarsi di scrivere “ftp” in questo campo
⚬ port: nel caso di altervista, la porta 21 è quella corretta, ma con altri provider potrebbe essere differente.
⚬ username: è la username necessaria per autenticarsi al servizio, nel caso di altervista è uguale a quella presente nell’host.
⚬ remotePath: indica la cartella principale sul nostro spazio web in cui caricare i file.
“/” indica che vogliamo caricare i file nel percorso di base del nostro spazio, ma se ad esempio volessimo caricarli a partire da una cartella specifica,ci basterà scrivere così: “/miacartella”
⚬ ignore: elenco di file o cartelle che non vogliamo trasferire online! Questo parametro non viene creato automaticamente col file di configurazione, bisogna inserirlo manualmente.

Una volta salvato il file configurazione non sarà più necessario ripetere questo passaggio in futuro e non sono necessarie altre operazioni: possiamo chiuderlo e passare allo step successivo.


Caricamento dei File

Nel file explorer di VSCode, clicchiamo col tasto destro sulla cartella principale del nostro progetto e selezioniamo dal menù contestuale la voce “Upload Folder”.

A questo punto ci verrà richiesto di inserire la password dell’account ftp che abbiamo specificato nel file di configurazione di prima (per altervista è la stessa password che si usa per l’accesso al pannello di controllo) e, una volta schiacciato il tasto invio, dovrebbero volerci pochi secondi prima che il trasferimento cominci.

Possiamo seguire il processo dalla barra di stato in basso, dove verranno elencati tutti i file che vengono trasferiti man mano che l’upload prosegue.

Una volta completato, tutti i file sono stati trasferiti sul nostro spazio web!

Se in seguito modifichiamo qualche file possiamo caricarlo semplicemente cliccando sul nome dello stesso col tasto destro e selezionando la voce “Upload File”.

Un ultima funzionalità che vale la pena segnalare nello stesso menù è “Diff with Remote” che permette di comparare il file in locale con quello online ed evidenziare le modifiche.

Ricorda di prestare attenzione ai parametri di configurazione nel file `config.inc.php`, che devono corrispondere a quelli del tuo server online, per assicurarti che il tuo progetto funzioni correttamente.


Conclusione

Sviluppare GDRCD in locale utilizzando XAMPP e Visual Studio Code ti offre un ambiente sicuro e controllato per personalizzare il tuo gioco di ruolo online. Questo approccio ti permette di testare e modificare il codice senza rischi, garantendo una maggiore stabilità e sicurezza per il tuo progetto. È un passo fondamentale per un lavoro più efficace e meno "grezzo".