Teil 1: Webapp erstellen | Dart Kanban - Die bessere Todo-Liste (Deutsch)

Eine Webapplikation erstellen

Erstelle zuerst einen Ordner auf deinem Computer für deine Webapplikation (z.B. dart-kanban).

Öffne den leeren Ordner in Visual Studio Code.

Öffne das Terminal unter dem Menu View | Terminal.

Gib den Befehl stagehand web-simple ein und drücke Enter.

Webapplikation erstellen

Hinweis: Wenn du hier eine Fehlermeldung erhältst, dann kann es sein, dass deine Installation noch nicht korrekt ist (siehe Dart Installation).

Dies erstellt alle Dateien, die es für eine Webapplikation braucht. Wir schauen uns nun die wichtigsten Dateien an.

Die HTML-Datei

Die Datei web/index.html ist die Datei, die vom Browser geladen wird und die Grundstruktur vorgibt.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <title>Kanban Board</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="icon" href="favicon.ico" />
    <script defer src="main.dart.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="page-header mt-4 mb-4">
        <h1>Kanban Board <small id="subtitle"></small></h1>
      </div>
    </div>
  </body>
</html>

Wir ändern die HTML Datei etwas ab und machen folgende Ergänzungen (siehe Markierungen):

Zeile mit Bootstrap.
Anpassung des Titels im Head.
Inhalt mit Container, Titel und Platzhalter für den Untertitel (werden wir später noch verwenden).

Speichere die Datei nach den Änderungen mit der Tastenkombination Ctrl+S.

Die Dart-Datei

Öffne die Datei main.dart und ändere den Code so ab, dass er wie folgt aussieht.

import 'dart:html';

void main() {
  var subtitle = querySelector('#subtitle');
  subtitle.text = 'by Marco';
}

Erklärungen zum Dart-Code

In der ersten Zeile wird Darts HTML-Bibliothek importiert. Diese beinhaltet die wichtigsten Klassen und Funktionen, um mit dem HTML-Dokument zu interagieren.

Die main()-Funktion

Dann folgt die main()-Funktion. Diese Funktion ist der Startpunkt des Dart-Programms. Jede Dart-Applikation muss genau eine main-Funktion haben.

querySelector() verwenden

Die Funktion querySelector() stammt aus der importierten dart:html Bibliothek. Damit kann man ein Element aus dem HTML-Dokument holen. In unserem Fall ist dies das Element mit der ID subtitle.

Wir speichern das Untertitel-Element in eine Variable. Mit dem Punkt-Operator können wir auf Eigenschaften zugreifen und diese verändern.

Mit dem Gleichheits-Zeichen (=) setzen wir den Text auf den String-Wert 'von Marco'.

Alternative: Wir könnten die zwei Schritte in unserem Programm auch auf einer Zeile zusammenfassen. Damit bräuchten wir keine Variable.

querySelector('#subtitle').text = 'von Marco';

Die Webapplikation starten

Öffne das Terminal (View | Terminal) und gib folgende Befehle ein:

pub get (ist nur das erste Mal nötig, um die benötigten Packages herunterzuladen).

webdev serve (startet den Webserver)

Starten

Klicke nun auf mit Ctrl+Click auf die URL, damit diese im Browser geöffnet wird.

Nun solltest du folgenden Bildschirm sehen. Der Dart-Code sorgt dafür, dass der Untertitel gesetzt wird, wie im folgenden Screenshot.

Erster Start

Zum Beenden: Um den Webserver zu beenden, nutze die Tastenkombination Ctrl+C im Terminal (geht für alle Prozesse, die im Terminal laufen).

Wie weiter?

Im Teil 2 bereiten wir die Grundstruktur der HTML-Datei für unser Kanban Board vor.