Készítsd el az első alkalmazásodat!
***********************************

.[perex]
Ismerkedjen meg a Nette Frameworkkel, miközben létrehoz egy egyszerű blogot kommentekkel. Kezdjük el!

Az első két fejezet után saját működő blogod lesz, és készen állsz arra, hogy közzétedd a fantasztikus bejegyzéseidet, bár a funkciók eléggé korlátozottak lesznek a két fejezet befejezése után. Hogy a felhasználók számára még szebb legyen, érdemes a következő fejezeteket is elolvasnod, és folyamatosan fejlesztened az alkalmazásodat.

.[tip]
Ez a bemutató feltételezi, hogy befejezte a [Telepítés |nette:installation] dokumentumot, és sikeresen beállította a szerszámokat. Feltételezi továbbá, hogy ért az [objektumorientált PHP programozáshoz |nette:introduction-to-object-oriented-programming].

Kérjük, használjon PHP 8.1 vagy újabb verziót. A teljes alkalmazás megtalálható a [GitHubon |https://github.com/nette-examples/quickstart/tree/v4.0].


Az üdvözlő oldal .[#toc-the-welcome-page]
=========================================

Kezdjük egy új projekt létrehozásával a `nette-blog` könyvtárban:

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

Ebben a pillanatban a webes projekt üdvözlő oldalának kell futnia. Próbálja ki, ha megnyitja a böngészőjét, és a következő URL-re lép:

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

és meg kell látnia a Nette Framework üdvözlő oldalát:

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

Az alkalmazás működik, és most már elkezdhet változtatásokat végezni rajta.

.[note]
Ha problémája van, [próbálja ki ezt a néhány tippet |nette:troubleshooting#Nette Is Not Working, White Page Is Displayed].


A webes projekt tartalma .[#toc-web-project-s-content]
======================================================

A Web Project a következő felépítésű:

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← application directory
│   ├── <b>Core/</b>         ← alapvető szükséges osztályok
│   ├── <b>UI/</b>           ← prezenterek, sablonok és társai.
│   │   │ └── <b>Home/</b>   ← Főoldal prezenter könyvtár
│   └── <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
\--

A `www` könyvtár a képek, JavaScript, CSS és egyéb nyilvánosan elérhető fájlok tárolására szolgál. Ez az egyetlen könyvtár, amely közvetlenül elérhető a böngészőből, ezért a webszerver gyökérkönyvtárát ide irányíthatjuk (ezt az Apache-ban is beállíthatjuk, de tegyük ezt később, mert most nem fontos).

A számodra legfontosabb könyvtár a `app/`. Ott találod a `Bootstrap.php` fájlt, benne egy osztályt, amely betölti a keretrendszert és konfigurálja az alkalmazást. Aktiválja az [automatikus betöltést |robot-loader:], és beállítja a [hibakeresőt |tracy:] és az [útvonalakat |application:routing].


Tisztítsa meg a .[#toc-cleanup]
===============================

A webes projekt tartalmaz egy üdvözlő oldalt, amelyet eltávolíthatunk - nyugodtan töröljük a `app/UI/Home/default.latte` fájlt, és cseréljük ki a "Hello world!" szövegre.


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


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

A fejlesztés rendkívül fontos eszköze a [Tracy nevű hibakereső |tracy:]. Próbálj meg néhány hibát elkövetni a `app/UI/Home/HomePresenter.php` fájlodban (pl. távolíts el egy szögletes zárójelet a HomePresenter osztály definíciójából), és nézd meg, mi történik. Egy piros képernyős oldal fog felugrani egy érthető hibaleírással.

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

A Tracy jelentősen segít a hibák felkutatásában. Figyelje meg a jobb alsó sarokban lebegő Tracy sávot is, amely tájékoztatja Önt a fontos futásidejű adatokról.

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

Termelési üzemmódban a Tracy természetesen le van tiltva, és nem árul el semmilyen érzékeny információt. Helyette minden hiba a `log/` könyvtárba kerül mentésre. Csak próbálja ki. A `app/Bootstrap.php` könyvtárban keresse meg a következő kódrészletet, vegye ki a megjegyzést a sorból, és változtassa meg a metódushívás paraméterét `false`, így néz ki:

```php .{file:app/Bootstrap.php}
...
$this->configurator->setDebugMode(false);
...
```

A weboldal frissítése után a piros képernyős oldal helyébe a felhasználóbarát üzenet lép:

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

Most nézze meg a `log/` könyvtárat. Ott megtalálja a hibanaplót (az exception.log fájlban) és a hibaüzenetet tartalmazó oldalt is (egy HTML fájlba mentve, amelynek a neve `exception`).

Kommentáld újra a `// $configurator->setDebugMode(false);` sort. A Tracy automatikusan bekapcsolja a `localhost` környezetben a fejlesztési módot, máshol pedig letiltja.

Most már kijavíthatjuk a hibát, és folytathatjuk az alkalmazásunk tervezését.


Köszönet küldése .[#toc-send-thanks]
====================================

Mutatunk egy trükköt, aminek a nyílt forráskódú szerzők örülni fognak. A GitHubon egyszerűen adhatsz csillagot azoknak a könyvtáraknak, amelyeket a projekted használ. Csak futtasd le:

```shell
composer thanks
```

Próbálja ki!

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