Erstellen Sie Ihre erste Anwendung!
***********************************

.[perex]
Lernen Sie das Nette Framework kennen, indem Sie einen einfachen Blog mit Kommentaren erstellen. Fangen wir an!

Nach den ersten beiden Kapiteln haben Sie Ihren eigenen funktionierenden Blog und können Ihre großartigen Beiträge veröffentlichen, auch wenn die Funktionen nach diesen beiden Kapiteln noch recht begrenzt sind. Sie sollten auch die folgenden Kapitel lesen, in denen wir das Hinzufügen von Kommentaren, das Bearbeiten von Beiträgen und schließlich das Absichern des Blogs umsetzen.

.[tip]
Dieses Tutorial setzt voraus, dass Sie das Dokument [Installation |nette:installation] durchgearbeitet und Ihre Werkzeuge erfolgreich eingerichtet haben. Es setzt außerdem voraus, dass Sie die [objektorientierte Programmierung in PHP |nette:introduction-to-object-oriented-programming] verstehen.

Bitte verwenden Sie PHP 8.1 oder neuer. Die vollständige Anwendung finden Sie [auf GitHub |https://github.com/nette-examples/quickstart/tree/v4.0].


Die Willkommensseite
====================

Beginnen wir damit, ein neues Projekt im Verzeichnis `nette-blog` zu erstellen:

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

Zu diesem Zeitpunkt sollte die Willkommensseite des Web Project laufen. Probieren Sie es aus, indem Sie Ihren Browser öffnen und zu folgender URL navigieren:

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

und Sie sollten die Willkommensseite des Nette Frameworks sehen:

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

Die Anwendung funktioniert, und Sie können nun beginnen, Änderungen daran vorzunehmen.

.[note]
Wenn Sie ein Problem haben, [versuchen Sie diese paar Tipps |nette:troubleshooting#Nette funktioniert nicht, eine weiße Seite wird angezeigt].


Inhalt des Web Project
======================

Das Web Project hat die folgende Struktur:

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← Verzeichnis der Anwendung
│   ├── <b>Core/</b>         ← grundlegende notwendige Klassen
│   ├── <b>Presentation/</b> ← Presenter, Templates und Co.
│   │   └── <b>Home/</b>     ← Verzeichnis des Home-Presenters
│   └── <b>Bootstrap.php</b> ← Startklasse Bootstrap
├── <b>assets/</b>           ← rohe Assets (SCSS, TypeScript, Quellbilder)
├── <b>bin/</b>              ← Skripte für die Kommandozeile
├── <b>config/</b>           ← Konfigurationsdateien
├── <b>log/</b>              ← Fehlerlogs
├── <b>temp/</b>             ← temporäre Dateien, Cache, …
├── <b>vendor/</b>           ← von Composer installierte Bibliotheken
│   └── <b>autoload.php</b>  ← Autoloading aller installierten Pakete
└── <b>www/</b>              ← öffentlicher Ordner - der einzige, der vom Browser aus zugänglich ist
    ├── <b>assets/</b>       ← kompilierte statische Dateien (CSS, JS, Bilder, …)
    └── <b>index.php</b>     ← Startdatei, die die Anwendung startet
\--

Das Verzeichnis `www/` ist zum Speichern von Bildern, JavaScript-Dateien, CSS-Styles und anderen öffentlich zugänglichen Dateien gedacht. Es ist das einzige Verzeichnis, das direkt aus dem Internet zugänglich ist, richten Sie den Document-Root Ihres Webservers also so ein, dass er hierher zeigt (das können Sie in Apache oder Nginx einstellen, aber machen wir das später, denn im Moment ist es nicht entscheidend).

Das wichtigste Verzeichnis für Sie ist `app/`. Hier finden Sie die Datei `Bootstrap.php`, die eine Klasse enthält, die das Framework lädt und die Anwendung konfiguriert. Sie aktiviert das [Autoloading |robot-loader:], richtet den [Debugger |tracy:] ein und konfiguriert die [Routen |application:routing].


Aufräumen
=========

Das Web Project enthält eine Willkommensseite, die wir entfernen, bevor wir mit dem Programmieren beginnen. Ersetzen Sie den Inhalt der Datei `app/Presentation/Home/default.latte` ruhig durch "Hello world!".


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


Tracy (Debugger)
================

Ein außerordentlich wichtiges Werkzeug für die Entwicklung ist das [Debugging-Werkzeug Tracy |tracy:]. Versuchen Sie, in Ihrer Datei `app/Presentation/Home/HomePresenter.php` einen Fehler einzubauen (entfernen Sie zum Beispiel eine geschweifte Klammer aus der Definition der Klasse `HomePresenter`) und sehen Sie, was passiert. Es erscheint eine Seite mit einem roten Bildschirm und einer verständlichen Fehlerbeschreibung.

[* qs-tracy.avif .{url:-}(Bildschirm des Debuggers) *]

Tracy hilft Ihnen beim Beheben von Fehlern erheblich. Beachten Sie außerdem die schwebende Tracy Bar in der rechten unteren Ecke des Bildschirms, die wichtige Informationen zur Laufzeit anzeigt.

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

Im Produktionsmodus ist Tracy natürlich abgeschaltet und zeigt keinerlei sensible Informationen an. Alle Fehler werden stattdessen im Verzeichnis `log/` gespeichert. Probieren wir das aus. Suchen Sie in der Datei `app/Bootstrap.php` den folgenden Codeabschnitt, kommentieren Sie die Zeile ein und ändern Sie den Parameter des Methodenaufrufs auf `false`, sodass es so aussieht:

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

Nach dem Aktualisieren der Webseite sehen Sie den roten Bildschirm nicht mehr. Stattdessen wird eine benutzerfreundliche Meldung angezeigt:

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

Sehen Sie nun in das Verzeichnis `log/`. Hier (in der Datei `exception.log`) finden Sie den protokollierten Fehler und außerdem die bekannte Fehlerseite (als HTML-Datei gespeichert, deren Name mit `exception-` beginnt).

Kommentieren Sie die Zeile `// $this->configurator->setDebugMode(false);` wieder aus. Tracy aktiviert den Entwicklungsmodus in einer `localhost`-Umgebung automatisch und schaltet ihn anderswo ab.

Nun können wir den eingebauten Fehler beheben und mit dem Aufbau unserer Anwendung weitermachen.


Senden Sie ein Dankeschön
=========================

Wir zeigen Ihnen einen Trick, der Open-Source-Autoren erfreut. Sie können den Bibliotheken, die Ihr Projekt verwendet, auf einfache Weise einen Stern auf GitHub geben. Führen Sie einfach aus:

```shell
composer thanks
```

Probieren Sie es aus!

{{priority: -1}}