Pisanie pierwszej aplikacji!
****************************

.[perex]
Poznajmy razem Nette Framework, tworząc prosty blog z komentarzami. Zaczynajmy!

Już po pierwszych dwóch rozdziałach będziemy mieli swój własny działający blog i będziemy mogli publikować swoje wspaniałe posty, chociaż funkcje będą na razie w znacznym stopniu ograniczone. Powinieneś przeczytać również następne rozdziały, gdzie zaprogramujemy dodawanie komentarzy, edytowanie artykułów i na koniec zabezpieczymy blog.

.[tip]
Ten poradnik zakłada, że przeczytałeś stronę [Instalacja |nette:installation] i pomyślnie przygotowałeś potrzebne narzędzia. Zakłada również, że rozumiesz [programowanie obiektowe w PHP |nette:introduction-to-object-oriented-programming].

Używaj PHP 8.1 lub nowszej wersji. 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 już działać strona startowa Web Projectu. Wypróbujemy to, otwierając przeglądarkę pod następującym adresem URL:

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

i zobaczymy stronę startową Nette Frameworku:

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

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

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


Zawartość Web Project
=====================

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

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← katalog aplikacji
│   ├── <b>Core/</b>         ← podstawowe klasy niezbędne do działania
│   ├── <b>Presentation/</b> ← presentery, szablony itp.
│   │   └── <b>Home/</b>     ← katalog presentera Home
│   └── <b>Bootstrap.php</b> ← klasa startowa Bootstrap
├── <b>assets/</b>           ← surowe zasoby (SCSS, TypeScript, obrazy źródłowe)
├── <b>bin/</b>              ← skrypty uruchamiane z linii poleceń
├── <b>config/</b>           ← pliki konfiguracyjne
├── <b>log/</b>              ← logowanie błędów
├── <b>temp/</b>             ← pliki tymczasowe, cache, …
├── <b>vendor/</b>           ← biblioteki zainstalowane przez Composer
│   └── <b>autoload.php</b>  ← autoloading wszystkich zainstalowanych pakietów
└── <b>www/</b>              ← katalog publiczny - jedyny dostępny z przeglądarki
	├── <b>assets/</b>       ← skompilowane pliki statyczne (CSS, JS, obrazy, ...)
    └── <b>index.php</b>     ← plik początkowy, który uruchamia aplikację
\--

Katalog `www/` jest przeznaczony do przechowywania obrazów, plików JavaScript, stylów CSS i innych publicznie dostępnych plików. Tylko ten katalog jest dostępny z internetu, więc ustaw katalog główny swojej aplikacji tak, aby wskazywał właśnie tutaj (można to ustawić w konfiguracji Apache lub nginx, ale zróbmy to później, teraz to nie jest ważne).

Najważniejszy folder dla nas to `app/`. Tutaj znajdziemy plik `Bootstrap.php`, w którym znajduje się klasa służąca do załadowania całego frameworka i ustawienia aplikacji. Aktywuje się tutaj [autoloading |robot-loader:], ustawia się tutaj [debugger |tracy:] i [routing |application:routing].


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

Web Project zawiera stronę startową, którą usuniemy, zanim zaczniemy coś programować. Bez obaw zastąpimy więc zawartość pliku `app/Presentation/Home/default.latte` tekstem "Witaj świecie!".


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


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

Niezwykle ważnym narzędziem do rozwoju jest [narzędzie do debugowania Tracy |tracy:]. Spróbuj wywołać jakiś błąd w pliku `app/Presentation/Home/HomePresenter.php` (np. usuwając nawias klamrowy w definicji klasy HomePresenter) i zobacz, co się stanie. Pojawi się strona z powiadomieniem, która w zrozumiały sposób opisuje błąd.

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

Tracy ogromnie nam pomoże, gdy będziemy szukać błędów w aplikacji. Zwróć również uwagę na pływający pasek Tracy Baru w prawym dolnym rogu ekranu, który zawiera informacje z działania aplikacji.

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

W trybie produkcyjnym Tracy jest oczywiście wyłączona i nie wyświetla żadnych wrażliwych informacji. Wszystkie błędy są w tym przypadku zapisywane w folderze `log/`. Spróbujmy to zrobić. W pliku `app/Bootstrap.php` odkomentujemy następujący wiersz i zmienimy parametr wywołania na `false`, aby kod wyglądał tak:

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

Po odświeżeniu strony już nie zobaczymy Tracy. Zamiast niej wyświetli się przyjazna dla użytkownika wiadomość:

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

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

Zakomentujemy ponownie wiersz `// $configurator->setDebugMode(false);`. Tracy automatycznie włączy tryb deweloperski na localhost i wyłączy go wszędzie indziej.

Błąd, który stworzyliśmy, możemy naprawić i kontynuować pisanie aplikacji.


Wyślij podziękowania
====================

Pokażemy Ci sztuczkę, którą ucieszysz autorów open source. W prosty sposób dasz na GitHubie gwiazdkę bibliotekom, których używa Twój projekt. Wystarczy uruchomić:

```shell
composer thanks
```

Spróbuj!

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