Creează-ți prima aplicație!
***************************

.[perex]
Faceți cunoștință cu Nette Framework în timp ce creați un blog simplu cu comentarii. Să începem!

După primele două capitole, veți avea propriul blog funcțional și veți fi gata să vă publicați postările minunate, deși funcțiile vor fi destul de limitate după finalizarea acestor două capitole. Pentru ca lucrurile să fie mai frumoase pentru utilizatori, ar trebui să citiți și următoarele capitole și să continuați să vă îmbunătățiți aplicația.

.[tip]
Acest tutorial pornește de la premisa că ați finalizat documentul de [instalare |nette:installation] și că ați configurat cu succes uneltele. De asemenea, se presupune că înțelegeți [programarea orientată pe obiecte în PHP |nette:introduction-to-object-oriented-programming].

Vă rugăm să utilizați PHP 8.1 sau o versiune ulterioară. Puteți găsi aplicația completă [pe GitHub |https://github.com/nette-examples/quickstart/tree/v4.0].


Pagina de bun venit .[#toc-the-welcome-page]
============================================

Să începem prin a crea un nou proiect în directorul `nette-blog`:

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

În acest moment, pagina de bun venit a Proiectului Web ar trebui să ruleze. Încercați-o deschizând browserul și accesând următoarea adresă URL:

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

și ar trebui să vedeți pagina de bun venit a Nette Framework:

[* qs-welcome.webp .{url: http://localhost/nette-blog/www/} *]

Aplicația funcționează și acum puteți începe să faceți modificări la ea.

.[note]
Dacă aveți o problemă, [încercați aceste câteva sfaturi |nette:troubleshooting#Nette Is Not Working, White Page Is Displayed].


Conținutul proiectului web .[#toc-web-project-s-content]
========================================================

Proiectul Web are următoarea structură:

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← application directory
│   ├── <b>Core/</b>         ← cursuri de bază necesare
│   ├── <b>UI/</b>           ← prezentări, șabloane & co.
│   │   └── <b>Home/</b>     ← Directorul prezentatorilor de acasă
│   └── <b>Bootstrap.php</b> ← booting class Bootstrap
├── <b>bin/</b>              ← scripts for the command line
├── <b>config/</b>           ← configuration files
├── <b>log/</b>              ← error logs
├── <b>temp/</b>             ← temporary files, cache, …
├── <b>vendor/</b>           ← libraries installed by Composer
│   └── <b>autoload.php</b>  ← autoloading of libraries installed by Composer
└── <b>www/</b>              ← public folder - the only place accessible from browser
    └── <b>index.php</b>     ← initial file that launches the application
\--

Directorul `www` este destinat să stocheze imagini, JavaScript, CSS și alte fișiere disponibile publicului. Acesta este singurul director direct accesibil din browser, așa că puteți îndrepta directorul rădăcină al serverului web aici (îl puteți configura în Apache, dar să o facem mai târziu, deoarece nu este important acum).

Cel mai important director pentru dumneavoastră este `app/`. Acolo găsiți fișierul `Bootstrap.php`, în interiorul căruia se află o clasă care încarcă cadrul și configurează aplicația. Aceasta activează [încărcarea automată |robot-loader:] și configurează [depanatorul |tracy:] și [rutele |application:routing].


Curățați .[#toc-cleanup]
========================

Proiectul Web conține o pagină de bun venit, pe care o putem elimina - nu ezitați să ștergeți fișierul `app/UI/Home/default.latte` și să îl înlocuiți cu textul "Hello world!".


[* qs-hello.webp .{url:-} *]


Tracy (Depanator) .[#toc-tracy-debugger]
========================================

Un instrument extrem de important pentru dezvoltare este [un depanator numit Tracy |tracy:]. Încercați să faceți câteva erori în fișierul `app/UI/Home/HomePresenter.php` (de exemplu, eliminați o paranteză curly bracket din definiția clasei HomePresenter) și vedeți ce se întâmplă. Va apărea o pagină pe ecran roșu cu o descriere inteligibilă a erorii.

[* qs-tracy.avif .{url:-}(debugger screen) *]

Tracy vă va ajuta în mod semnificativ în timpul vânătorii de erori. Rețineți, de asemenea, bara Tracy plutitoare din colțul din dreapta jos, care vă informează cu privire la datele importante din timpul execuției.

[* qs-tracybar.webp .{url:-} *]

În modul de producție, Tracy este, bineînțeles, dezactivat și nu dezvăluie nicio informație sensibilă. În schimb, toate erorile sunt salvate în directorul `log/`. Încercați doar. În `app/Bootstrap.php`, găsiți următoarea bucată de cod, decomentați linia și schimbați parametrul de apelare a metodei în `false`, astfel încât să arate astfel:

```php .{file:app/Bootstrap.php}
...
$configurator->setDebugMode(false);
$configurator->enableTracy(__DIR__ . '/../log');
...
```

După reîmprospătarea paginii web, pagina cu ecran roșu va fi înlocuită cu mesajul ușor de utilizat:

[* qs-fatal.webp .{url:-}(error screen) *]

Acum, căutați în directorul `log/`. Acolo puteți găsi jurnalul de erori (în fișierul exception.log) și, de asemenea, pagina cu mesajul de eroare (salvată într-un fișier HTML cu un nume care începe cu `exception`).

Comentați din nou linia `// $configurator->setDebugMode(false);`. Tracy activează automat modul de dezvoltare în mediul `localhost` și îl dezactivează în altă parte.

Acum, putem remedia eroarea și putem continua proiectarea aplicației noastre.


Trimiteți mulțumiri .[#toc-send-thanks]
=======================================

Vă vom arăta un truc care îi va face fericiți pe autorii open source. Puteți să acordați cu ușurință o stea pe GitHub bibliotecilor pe care le folosește proiectul dumneavoastră. Trebuie doar să executați:

```shell
composer thanks
```

Încearcă-l!

{{priority: -1}}
{{sitename: Nette Quickstart}}