Stwórz swoją pierwszą aplikację!
********************************

.[perex]
Poznaj Nette Framework, tworząc prostego bloga z komentarzami. Zaczynajmy!

Po pierwszych dwóch rozdziałach będziesz mieć własnego działającego bloga i będziesz gotowy publikować swoje świetne wpisy, choć po ukończeniu tylko tych dwóch rozdziałów funkcje będą dość ograniczone. Powinieneś przeczytać także kolejne rozdziały, w których zrealizujemy dodawanie komentarzy, edycję wpisów, a na koniec zabezpieczenie bloga.

.[tip]
Ten samouczek zakłada, że ukończyłeś dokument [Instalacja |nette:installation] i pomyślnie przygotowałeś swoje narzędzia. Zakłada też, że rozumiesz [programowanie obiektowe w PHP |nette:introduction-to-object-oriented-programming].

Używaj PHP 8.1 albo nowszego. Kompletną aplikację znajdziesz [na GitHubie |https://github.com/nette-examples/quickstart/tree/v4.0].


Strona powitalna
================

Zacznijmy od utworzenia nowego projektu w katalogu `nette-blog`:

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

W tym momencie powinna działać strona powitalna Web Projectu. Wypróbuj to, otwierając przeglądarkę i przechodząc pod ten URL:

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

i powinieneś zobaczyć stronę powitalną Nette Framework:

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

Aplikacja działa i możesz teraz zacząć wprowadzać w niej zmiany.

.[note]
Jeśli masz problem, [wypróbuj te kilka wskazówek |nette:troubleshooting#Nette nie działa, wyświetla się biała strona].


Zawartość Web Projectu
======================

Web Project ma następującą strukturę:

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← katalog aplikacji
│   ├── <b>Core/</b>         ← podstawowe niezbędne klasy
│   ├── <b>Presentation/</b> ← presentery, szablony i spółka
│   │   └── <b>Home/</b>     ← katalog presentera Home
│   └── <b>Bootstrap.php</b> ← klasa rozruchowa Bootstrap
├── <b>assets/</b>           ← surowe zasoby (SCSS, TypeScript, obrazki źródłowe)
├── <b>bin/</b>              ← skrypty dla wiersza poleceń
├── <b>config/</b>           ← pliki konfiguracyjne
├── <b>log/</b>              ← logi błędów
├── <b>temp/</b>             ← pliki tymczasowe, cache, …
├── <b>vendor/</b>           ← biblioteki zainstalowane przez Composera
│   └── <b>autoload.php</b>  ← autoloading wszystkich zainstalowanych pakietów
└── <b>www/</b>              ← folder publiczny - jedyne miejsce dostępne z przeglądarki
    ├── <b>assets/</b>       ← skompilowane pliki statyczne (CSS, JS, obrazki, …)
    └── <b>index.php</b>     ← plik początkowy uruchamiający aplikację
\--

Katalog `www/` przeznaczony jest do przechowywania obrazków, plików JavaScript, stylów CSS i innych publicznie dostępnych plików. To jedyny katalog bezpośrednio dostępny z internetu, więc ustaw document root swojego serwera webowego tak, żeby wskazywał tutaj (możesz to skonfigurować w Apache albo Nginksie, ale zróbmy to później, bo teraz nie jest to krytyczne).

Najważniejszym katalogiem jest dla Ciebie `app/`. Znajdziesz w nim plik `Bootstrap.php` zawierający klasę, która wczytuje framework i konfiguruje aplikację. Aktywuje [autoloading |robot-loader:], ustawia [debugger |tracy:] i konfiguruje [trasy |application:routing].


Sprzątanie
==========

Web Project zawiera stronę powitalną, którą usuniemy przed rozpoczęciem programowania. Śmiało zastąp treść pliku `app/Presentation/Home/default.latte` napisem "Hello world!".


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


Tracy (debugger)
================

Niezwykle ważnym narzędziem przy tworzeniu jest [narzędzie debugujące Tracy |tracy:]. Spróbuj wprowadzić błąd do swojego pliku `app/Presentation/Home/HomePresenter.php` (np. usuń nawias klamrowy z definicji klasy `HomePresenter`) i zobacz, co się stanie. Pojawi się strona z czerwonym ekranem i zrozumiałym opisem błędu.

[* qs-tracy.avif .{url:-}(ekran debuggera) *]

Tracy znacząco pomoże Ci przy debugowaniu błędów. Zwróć też uwagę na pływający Tracy Bar w prawym dolnym rogu ekranu, który wyświetla ważne informacje o działaniu.

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

W trybie produkcyjnym Tracy jest oczywiście wyłączona i nie wyświetla żadnych wrażliwych informacji. Wszystkie błędy zapisywane są zamiast tego do katalogu `log/`. Wypróbujmy to. W pliku `app/Bootstrap.php` znajdź poniższy fragment kodu, odkomentuj linię i zmień parametr wywołania metody na `false`, żeby wyglądało to tak:

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

Po odświeżeniu strony nie zobaczysz już czerwonego ekranu. Zamiast niego wyświetli się przyjazny dla użytkownika komunikat:

[* qs-fatal.webp .{url:-}(ekran błędu) *]

Teraz zajrzyj do katalogu `log/`. Tutaj (w pliku `exception.log`) znajdziesz zalogowany błąd, a także znajomą stronę z komunikatem o błędzie (zapisaną jako plik HTML o nazwie zaczynającej się od `exception-`).

Zakomentuj linię `// $this->configurator->setDebugMode(false);` z powrotem. Tracy automatycznie włącza tryb deweloperski w środowisku `localhost`, a gdzie indziej go wyłącza.

Teraz możemy naprawić wprowadzony błąd i kontynuować budowanie naszej aplikacji.


Wyślij podziękowanie
====================

Pokażemy Ci trik, który ucieszy autorów open source. Możesz w prosty sposób dać gwiazdkę na GitHubie bibliotekom, których używa Twój projekt. Wystarczy uruchomić:

```shell
composer thanks
```

Wypróbuj!

{{priority: -1}}