Crea la tua prima applicazione!

Conoscete il Nette Framework creando un semplice blog con i commenti. Cominciamo!

Dopo i primi due capitoli avrete il vostro blog funzionante e sarete pronti a pubblicare i vostri fantastici articoli, anche se dopo questi due capitoli le funzionalità saranno ancora piuttosto limitate. Dovreste leggere anche i capitoli seguenti, in cui realizzeremo l'aggiunta dei commenti, la modifica degli articoli e infine la messa in sicurezza del blog.

Questo tutorial presuppone che abbiate completato il documento Installazione e che abbiate preparato con successo i vostri strumenti. Presuppone inoltre che comprendiate la programmazione orientata agli oggetti in PHP.

Usate per favore PHP 8.1 o superiore. L'applicazione completa la trovate su GitHub.

La pagina di benvenuto

Cominciamo creando un nuovo progetto nella directory nette-blog:

composer create-project nette/web-project nette-blog

A questo punto dovrebbe girare la pagina di benvenuto del Web Project. Provate aprendo il browser e andando a questo URL:

http://localhost/nette-blog/www/

e dovreste vedere la pagina di benvenuto del Nette Framework:

L'applicazione funziona e potete cominciare a modificarla.

Se avete un problema, provate questi pochi consigli.

Contenuto del Web Project

Il Web Project ha questa struttura:

nette-blog/
├── app/              ← directory dell'applicazione
│   ├── Core/         ← classi di base indispensabili
│   ├── Presentation/ ← presenter, template e compagnia
│   │   └── Home/     ← directory del presenter Home
│   └── Bootstrap.php ← classe di avvio Bootstrap
├── assets/           ← asset grezzi (SCSS, TypeScript, immagini sorgente)
├── bin/              ← script per la riga di comando
├── config/           ← file di configurazione
├── log/              ← log degli errori
├── temp/             ← file temporanei, cache, ...
├── vendor/           ← librerie installate da Composer
│   └── autoload.php  ← autoloading di tutti i pacchetti installati
└── www/              ← cartella pubblica, l'unico posto accessibile dal browser
    ├── assets/       ← file statici compilati (CSS, JS, immagini, ...)
    └── index.php     ← file iniziale che avvia l'applicazione

La directory www/ è destinata a contenere immagini, file JavaScript, stili CSS e altri file accessibili pubblicamente. È l'unica directory raggiungibile direttamente da internet, quindi impostate il document root del vostro server web perché punti qui (lo potete configurare in Apache o Nginx, ma facciamolo più avanti, per ora non è essenziale).

La directory più importante per voi è app/. Qui trovate il file Bootstrap.php, che contiene la classe che carica il framework e configura l'applicazione. Attiva l'autoloading, imposta il debugger e configura le rotte.

Pulizia

Il Web Project contiene una pagina di benvenuto, che rimuoveremo prima di cominciare a programmare. Sostituite pure il contenuto del file app/Presentation/Home/default.latte con “Hello world!”.

Tracy (debugger)

Uno strumento estremamente importante per lo sviluppo è il debugger Tracy. Provate a introdurre un errore nel vostro file app/Presentation/Home/HomePresenter.php (per esempio togliete una parentesi graffa dalla definizione della classe HomePresenter) e guardate cosa succede. Comparirà una schermata rossa con una descrizione comprensibile dell'errore.

Tracy vi aiuterà moltissimo nel debug degli errori. Notate anche la Tracy Bar flottante nell'angolo in basso a destra dello schermo, che mostra informazioni importanti sull'esecuzione.

In modalità produzione Tracy è naturalmente disattivata e non mostra alcuna informazione sensibile. Tutti gli errori vengono invece salvati nella directory log/. Proviamo. Nel file app/Bootstrap.php trovate questo pezzo di codice, decommentate la riga e cambiate il parametro della chiamata al metodo in false, così che appaia così:

// ...
$this->configurator->setDebugMode(false);

Dopo aver aggiornato la pagina web non vedrete più la schermata rossa. Al suo posto verrà mostrato un messaggio comprensibile per l'utente:

Guardate ora nella directory log/. Qui (nel file exception.log) trovate l'errore registrato e anche la ormai familiare pagina con il messaggio di errore (salvata come file HTML con un nome che inizia con exception-).

Commentate di nuovo la riga // $this->configurator->setDebugMode(false);. Tracy attiva automaticamente la modalità di sviluppo nell'ambiente localhost e la disattiva altrove.

Ora possiamo correggere l'errore che abbiamo introdotto e continuare a costruire la nostra applicazione.

Mandate un grazie

Vi mostriamo un trucco che farà piacere agli autori open source. In modo semplice date su GitHub una stella alle librerie che il vostro progetto usa. Basta lanciare:

composer thanks

Provate!