Einstieg in die Webprogrammierung mit Dart

Einstieg in die Webprogrammierung mit Dart - das Template

Mai 03, 2021

Die Programmiersprache Dart ist nicht nur für Flutter wichtig.
Von Hause aus, ist sie in der Lage mit Html Dokumenten umzugehen. Damit ist jetzt nicht AngularDart gemeint, oder die Möglichkeit mit dem Flutter Framework Web Apps zu erstellen.

Vielmehr kann man Dart als Ersatz für JavaScript anwenden. Mit dart2js kann Dart Code in JavaScript gewandelt werden

Wieso sollte man dann nicht gleich zum Original greifen und JavaScript verwenden ?

Die Antwort auf diese Frage: Wenn Sie Dart lernen, können Sie mit einer Sprache alle wichtigen Gebiete abdecken. Web, Mobile, Serverprogrammierung, für alle diese Gebiete kann man Dart einsetzen.

Voraussetzungen

Dieser Post geht davon aus, das sie mit dem frei erhältlichen Visual Studio Code arbeiten. Benutzen sie einen anderen Code Editor, können die notwendigen Schritte um ein Projekt zu generieren, deutlich abweichen.
Sie sollten ausserdem natürlich Dart installiert haben. Sollten Sie Flutter bereits installiert haben, haben Sie Dart bereits auf der Festplatte. Aktuell wird Flutter und Dart als Paket zum download angeboten.
In Visual Studio Code selbst benötigen Sie noch die Erweiterungen für Dart und Flutter.

Als letzten Schritt sollten Sie mit

pub global activate webdev und mit pub global activate stagehand den Templategenerator installieren bzw. aktivieren.

Projekt generieren

In Visual Studio Code, mit aktiven Standard Einstellungen, können Sie mit CTRL+SHIFT+P die Kommando Eingabe Zeile aufrufen. Wählen Sie dort aus dem Drop Down Menu Dart: New Project aus, gefolgt von Bar-Bones Web App.

Anschliessend müssen Sie einen Ordner auswählen, in welchem das Projekt generiert wird. Zum Abschluss werden Sie noch nach dem Namen für Ihr Projekt gefragt. Mit der Hilfe von stagehand generiert Visual Studio Code die benötigen Strukturen, Ordern und Files. Sollte alles geklappt haben, sollte das so aussehen:

Was Ihnen sofort auffallen dürfte sind die Web bezogenen Files. Da wäre index.html, styles.css und favicon.ico.

Sollte alles korrekt installiert worden sein, können Sie in Visual Studio Code mit F5 das Programm starten. Es sollte sich ein Browser Fenster öffnen mit folgendem Inhalt:

Betrachten wir zuerst das Html index File:

<!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">
    <meta name="scaffolded-by" content="https://github.com/dart-lang/stagehand">
    <title>dartweb1</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script defer src="main.dart.js"></script>
</head>

<body>

  <div id="output"></div>

</body>
</html>

Was Ihnen vielleicht auffällt: <script defer src="main.dart.js"></script> . Dart wandelt unseren Code der in main.dart steht, in Javascript um !.
Im <body> Element sehen Sie ein einziges Element: <div id="output"></div> . Den Zusammenhang sehen wir, wenn wir das main.dart file anschauen:

import 'dart:html';

void main() {
  querySelector('#output').text = 'Your Dart app is running.';
}

Wichtig ist als erstes, das die dart:html Bibliothek eingebunden wird. Sie ermöglicht es Dart mit Html umzugehen. querySelector ist eine Funktion aus dieser Library und bezieht sich mit ('#output') auf das <div id="output"></div> Element in index.html.

Das war es für diesen Post. Bis bald !

Dieses Blog durchsuchen

Flutter, Dart und mehr !