DART-Tutorial – erste Schritte ganz praktisch
Die junge Programmiersprache DART hat bereits Fuß gefasst, vor allem in der Programmierung von Apps für mobile Anwendungen. Das Unternehmen Google hat mit Flutter ein Software Development Kit (SDK) aufgesetzt, das DART nutzt, und so die Anwendung und Verbreitung dieser Programmiersprache befördert. Ein wesentlicher Pluspunkt ist, dass sich damit Apps für alle mobilen Betriebssysteme – also Apple iOS, Google Android oder Microsoft Windows Phone – programmieren lassen.
Lernen Sie Programmieren mit DART – unser DART-Tutorial führt Sie mit ersten Schritten in die Welt von Googles Programmiersprache ein. Das ist gar nicht so schwer. Mehr über die Sprache an sich bietet unser Ratgeber-Artikel „Was ist DART?“. Weiterführende Informationen erhalten Sie im Artikel über Googles Software Development Kit Flutter.
Der Ursprung von DART
Angetreten war DART ursprünglich, um Schwachstellen von JavaScript zu überwinden, die sich aus Sicht der Entwickler nicht mehr innerhalb dieser etablierten Programmiersprache bearbeiten ließen.
So begann die Suche nach Wegen, bestimmte innere Logiken zu vereinfachen oder zusammenzufassen, ohne dabei die Vielfalt der Möglichkeiten aus dem Auge zu verlieren. Um ein Beispiel aufzuführen: JavaScript hat
getElementsById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()
document.links
document.images
document.forms
document.scripts
formElement.elements
selectElement.optionsIn DART bleibt davon übrig:
elem.query('#foo');
elem.queryAll('.foo');Die ersten Schritte mit DART
Eine Programmiersprache besteht aus einer Welt von „Vokabeln“, mit denen Daten strukturiert und Abläufe (Algorithmen) gestaltet werden. Dazu bedient sich die Sprache einer festgelegten Anzahl von Begriffen – den Variablen, die nicht zu anderen Zwecken verwendet werden dürfen. Einige Beispiele dafür sind in DART „var“, „int“ „if“, „else“ oder „while“. Mehr Details zur Architektur von Programmiersprachen lesen Sie in unserem Ratgeber zu Internet-Programmiersprachen. Aus der Kombination von Variablen, Operatoren, Bedingungen, Funktionen und vielem mehr entsteht der Programmablauf, an dessen Ende ein Ergebnis ausgegeben wird.
DART ganz praktisch
Wir stellen Ihnen erste und einfache, nachvollziehbare Beispiele zum Lernen von DART-Programmieren vor, die Sie dann nach Belieben erweitern und mit denen Sie selbst experimentieren können. Jede Programmroutine beginnt mit dem Aufruf der Hauptfunktion – hier am Beispiel des Klassikers in der Code-Welt:
void main () {
print("Hallo Welt!"); // Druckbefehl mit Ausgabe: Hallo Welt
}Vor der Funktion „main“ steht der Rückgabetyp „void“, der nichts zurückgibt. Die runden Klammern „()“ deuten auf eine Funktion hin, und innerhalb der geschweiften Klammern „{ … }“ wird der DART-Code ausgeführt – hier der Befehl, etwas auf dem Bildschirm auszugeben. Was hinter den beiden Schrägstrichen „//“ steht, ist ein Kommentar, der unsichtbar bleibt; das geht ebenso mit „/* das ist ein mehrzeiliger Kommentar …*/“ – bekannt zum Beispiel aus PHP. Damit kann man den eigenen Code für sich oder andere Entwickler strukturiert kommentieren, was die Team-Arbeit an bestehenden Projekten wesentlich erleichtert.
Wie in Java, C oder PHP müssen alle DART-Statements mit einem Semikolon abgeschlossen werden.
Die nachfolgenden Beispiele können Sie einfach selbst ausprobieren. Dazu nutzen Sie die kostenlose Open-Source-Plattform DartPad. Dieses Pad hat u. a. den Vorteil, dass es die Zeilen des Programms nummeriert und ggf. Fehlermeldungen ausgibt. Zudem sind einige Programmierbeispiele in einem Drop-down-Menü verfügbar.
In den weiteren Code-Beispielen im Text wird „void main() {…}“ nicht mehr mitaufgeführt.
Variablen definieren und nutzen
Mit Variablen werden feste Größen für das Programm definiert. Wir beginnen mit Zahlen.
var meineGroesse = 174;Damit ist eine neue Variable „meineGroesse“ festgelegt worden. Ihr wurde der Wert „174“ zugewiesen. Diese Variable bleibt im Programmablauf mit Ihrem Wert erhalten, bis sie aktiv durch Operatoren oder Funktionen verändert wird. Um den Wert der Variablen auszugeben, kommt der Befehl „print“ ins Spiel.
var meineGroesse = 174;
print(meineGroesse);
int deineGroesse = 174;
print(deineGroesse);
double dieseGroesse = 1.74;
print(dieseGroesse);
dynamic eineGroesse = 'Hundertvierundsiebzig' + ': ' + '174';
print(eineGroesse);Das ergibt im DartPad per Befehl „print“ die folgenden Ausgaben aus den Zeilen 3, 6, 9 und 12 in der Konsole:
Die Variablen in DART nehmen bestimmte Typen an. Das können Ganzzahlen („int“) oder Gleitkommazahlen („double“) sein. Der Variablentyp „dynamic“ kann im Programmablauf verschiedene Werte und Ausdrücke annehmen. Dagegen werden Leerzeilen, Tabulatoren oder Absätze beim Abarbeiten der Routine nicht berücksichtigt. Deshalb stehen die Werte rechts in der Konsole auch direkt untereinander.
Der Versuch, einem bestimmten Variablentyp einen falschen Wert zuzuweisen, erzeugt eine Fehlermeldung mit Fehlerbeschreibung im DartPad:
int deineGroesse = 1.74; // Ganzzahl wird erwartet, Gleitkommazahl wird eingegeben
print(deineGroesse);
Die Bezeichnungen (Identifier) für die verwendeten Variablen dürfen keine Schlüsselwörter enthalten. Auch Zahlen am Anfang sowie Leer- und Sonderzeichen sind nicht zugelassen – Ausnahmen sind Unterstrich „_“ und Dollarzeichen „$“. Die Bezeichner berücksichtigen Groß- und Kleinschreibung und müssen einzigartig sein.
Zeichenfolgen im DART-Tutorial
Mit Zeichenfolgen, dem Datentyp „String“ (Achtung: mit großem S am Anfang), lassen sich beliebige Zeichen in der DART-Programmierung verarbeiten. In diesem Zusammenhang lernen Sie hier auch gleich, mehrzeilig formatierte Zeilen in DART zu programmieren.
String text1 = 'Das ist einzeiliger Text';
String text2 = '''Das ist ein mehr-
zeiliger Text mit Umbruch''';
print(text1);
print(text2);
Die Wiedergabe von Text per String erfolgt durch Umschließen des gewünschten Inhalts mit einfachen oder normalen Anführungszeichen: ' oder ". Wird der Text jedoch mit dreifach hintereinander angeordneten Anführungszeichen (''' oder """) begonnen und beendet, gibt DART den Text an der umbrochenen Stelle auch als Umbruch aus. Damit steht eine Möglichkeit zum Formatieren der Ausgabe zur Verfügung.
Typografische Anführungszeichen (meist in der korrekten englischen Version) lassen sich ganz einfach in Windows mit den Tastenkombinationen [Alt] + 0147 (Anführung) und [Alt] + 0148 (Abführung) im Text platzieren. Diese werden in einem String von DART auch als solche ausgegeben. In macOS erreichen Sie diese Anführungszeichen mit [Alt] +[Shift] + [W] und [Alt] + [2].
Zahlenakrobatik mit DART
Von der Festlegung von Variablen ist der Weg nicht weit zu Berechnungen mit Variablen. Dabei können Zahlen oder auch Ausdrücke zusammengerechnet werden. Um Ergebnisse zu berechnen, nutzt DART arithmetische Operatoren. Eine Aufgabe könnte beispielsweise darin bestehen, dass ein Artikel im Onlineshop ausgewählt wurde, der Kunde jedoch drei Stück davon kaufen möchte. Also muss in der Warenkorb-Funktion der Einzelpreis mit „3“ multipliziert werden und am Ende der Berechnung der Gesamtpreis dargestellt sein. Am nachfolgenden Code kann man die Verwendung verschiedener Methoden zur Zusammenführung von Daten sehen – und dazu die Kommentare in den relevanten Zeilen:
String produkt = 'Kalender';
String waehrung = 'EUR';
String fuer = 'für'; // drei Strings für spätere Verwendung in der Ausgabe
double einzelPreis = 7.96; // Gleitkommazahl Einzelpreis für einen Kalender
int anzahl = 3; // Ganzzahl für die Anzahl der bestellten Kalender
var gesamtPreis = (anzahl*einzelPreis); //Berechnung des Gesamtpreises mit Multiplikator *
var rgBetrag = '$gesamtPreis $waehrung'; /* Zusammenführung zweier Werte in neue Variable. */
var ergebnis = '$anzahl $produkt'; //ebenso
print (rgBetrag); // Erzeugung der Bildschirmausgaben
print (fuer);
print (ergebnis);
Es kommen Strings, Gleitkomma- und Ganzzahlen sowie die Zusammenführung von Elementen der Programmierung zu neuen Variablen vor. Eine Besonderheit ist beim Zusammenführen von zwei existierenden Variablen in einer neuen Variable zur Ausgabe auf dem Bildschirm zu beachten: Den bereits definierten Variablen wird in diesem Falle ein Dollarzeichen „$“ vorangestellt (Zeilen 8 und 9 in der obigen Abbildung des DartPads).
Bedingungen stellen
Beim Programmieren, spielen Bedingungen eine wichtige Rolle. Hier lernen Sie das Programmieren einer Bedingung mit DART. Eine Bedingung führt immer zu einer Entscheidung, im Sinn von: Wenn (if) Fall A eintritt, erscheint Anzeige X auf dem Bildschirm; tritt Fall B ein (elseif), dann kommt die Anzeige Y; wenn beide nicht zutreffen (else), wird Anzeige Z ausgegeben. Mit den in Klammern dargestellten DART-Befehlen entsteht daraus der folgende Code:
var werkzeug = 'Handschuh';
if (werkzeug == 'Zange' || werkzeug == 'Lineal')
{ print('Das ist Werkzeug.');
} else if (werkzeug == 'Pinsel')
{ print('Das ist ein Malerwerkzeug.');
} else { print('Das ist kein Werkzeug.');
}Im DartPad sieht das dann so aus:
Erweitern Sie Ihr eigenes Wissen im DART-Tutorial und wechseln Sie im DartPad das Wort „Handschuh“ einmal gegen „Zange“, „Lineal“ oder „Pinsel“ aus und beobachten Sie die Veränderungen der programmierten Ausgabe auf der Konsole. Das lässt sich beliebig erweitern und auf diverse Fälle anwenden. Neu erscheint hier erstmals der Operator „||“. Diese doppelte Pipe steht für den logischen Begriff „oder“, der in DART nicht als Wort „OR“ verwendet werden darf.
Auf und Ab geht auch mit DART
Um den nachfolgenden Abschnitt zu programmieren, müssen wir die sogenannten Inkremente und Dekremente in DART erlernen. Es handelt sich um das schrittweise Vergrößern oder Verkleinern eines Ausgangswerts. Im Beispiel wird die Zahl 50 mit den Operatoren „++“ und „--“ verändert.
var aufUndAb = 50;
print (aufUndAb);
print('----');
++aufUndAb;
print (aufUndAb);
print('----');
aufUndAb++;
print (aufUndAb);
print('----');
--aufUndAb;
print (aufUndAb);
print('----');
aufUndAb--;
print (aufUndAb);
Hier sehen Sie auch, dass man eine einfache Zeichenkette auch ohne vorherige Definition ausgeben kann, indem sie in runden Klammern mit Anführungszeichen per „print“ in den Programmcode eingefügt wird. Das dient hier lediglich der optischen Strukturierung des Ergebnisses. Mit diesem Wissen sind Sie vorbereitet, Schleifen zu programmieren.
Wir drehen uns im Kreis: Schleifen in DART
Schleifen sind ebenso wichtige Programmroutinen, die immer wieder benötigt werden, um beispielsweise Vergleiche mit vorhandenen Größen anzustellen. Dazu bedient man sich folgender „Formulierung“: Wir haben den Wert A; verändere diesen Wert solange, bis die Größe (der Zustand) B erreicht ist. Als DART-Code sieht das so aus:
String bezeichnung = ' Stück';
var stueck = 3;
while (stueck < 12) {
var gesamt = '$stueck $bezeichnung';
print(gesamt);
stueck++;
}Was macht das DartPad damit?
In diesem Beispiel könnte man auch wieder Bedingungen einsetzen, wenn sich beispielsweise Wörter in Einzahl und Mehrzahl unterscheiden:
int menge = 1;
var artikelEinzahl = 'Bluse';
var artikelMehrzahl = 'Blusen';
if (menge == 1)
{ print(artikelEinzahl);
} else { print(artikelMehrzahl);
}
}
Um mit DART programmieren zu lernen, kopieren Sie dieses Code-Beispiel in das DartPad und ändern die Ganzzahl-Variable „menge“, sodass der Artikel „Bluse“ in der Einzahl oder in der Mehrzahl ausgegeben wird.
DART-Operatoren auf einen Blick
Sie haben nun schon einige Operatoren zum Programmieren in DART erlernt. Mit der nachfolgenden Tabelle geben wir Ihnen den Überblick über die wichtigsten verfügbaren Operatoren.
In der Tabelle ist die Variable „Muster“ auf den Wert 35 gesetzt.
var muster = 35;| Operator-Typ | Bezeichnung | Symbol | Beispiel | Ausgabe |
|---|---|---|---|---|
| Rechnen | Addition | + | var muster + 2; | 37 |
| Substraktion | - | var muster - 2; | 33 | |
| Multiplikation | * | var muster * 3; | 105 | |
| Division | / | var muster / 7; | 5 | |
| Ganzzahl-Division | ~/ | var muster ~/ 7; | 11 | |
| Erhöhung um | += | var muster += 6; | 41 | |
| Verminderung um | -= | var muster -= 7; | 28 | |
| Multiplikation mit | *= | var muster *= 2; | 70 | |
| Division durch | /= | var muster /= 7; | 5 | |
| Vergleichen | Identisch | == | var muster == 35; | True |
| Nicht identisch | != | var muster != 44; | True | |
| Kleiner als | < | var muster < 44; | true | |
| Kleiner gleich als | <= | var muster <= 33; | False | |
| Größer als | > | 44 > var muster; | True | |
| Größer gleich als | >= | var muster>=23; | false | |
| Verändern | Aufsteigend | ++ | ++var muster; | 36 |
| Aufsteigend | ++ | var muster++; | 36 | |
| Absteigend | -- | --var muster; | 34 | |
| Absteigend | -- | var muster--; | 34 | |
| Restwert | % | %var muster%3; | 2 | |
| Logik | UND | && | muster1 && muster2 | … und |
| ODER | ll | muster1 ll muster2 | … oder | |
| Negation | ! | muster1 ! muster2 | … ist nicht | |
| Bedingungen | Wenn-Dann | ? … : | var y = muster < 34 ? 15 : 10; | 10 |
| Wenn-Dann | ? … : | var y = muster < 36 ? 15 : 10; | 15 | |
| Prüfung auf Null | ?? | var y = muster ?? 9; | 35 | |
| Prüfung auf Null | ?? | var z = 0 ?? muster; | 35 |
Mit diesem Basiswissen können Sie nun weitere Schritte in DART gehen, und der Weg zum Vorhaben, die eigene App zu programmieren, ist nicht mehr ganz so weit.
Ähnliche Artikel
Flutter-Tutorial: So entwickeln Sie Apps mit dem Google-SDK
Google hat in den vergangenen Jahren nicht nur zahlreiche nützliche Services wie Gmail, Maps oder die Google Workspace veröffentlicht, sondern auch diverse Tools für die Programmierung von Software auf den Markt gebracht. Eines dieser Werkzeuge ist das SDK Flutter, das insbesondere für Entwickler mobiler Apps interessant ist. Im nachfolgenden Flutter-Tutorial zeigen wir, wie Sie eine einfache App…
Billion PhotosShutterstock Eine eigene Native Mobile App entwickeln – Teil 5.1: Im Google Play Store eine App hochladen
Wer im Google Play Store eine App hochladen möchte, steht kurz vor dem Ziel: Die Android-Applikation liegt in der Release-Version vor und soll nun auf möglichst vielen mobilen Endgeräten landen. Allerdings erfordert das Einstellen einer App in den offiziellen App-Store von Google durchaus Zeit. Unter anderem benötigt man Konten bei verschiedenen Google-Diensten, damit man auf Google Play eine App…
Billion PhotosShutterstock Eine eigene Native Mobile App entwickeln – Teil 3: Das Mobile-App-Design
Das Design einer Applikation wird beileibe nicht nur von Formen und Farben bestimmt – Segmente des Mobile-App-Designs wie die Positionierung der Anwendungsinhalte oder die App-Usability sind mindestens ebenso wichtig. Die Arbeit, die Sie hier investieren, gibt am Ende den Ausschlag, ob Ihre App von den Usern überhaupt genutzt oder direkt nach dem Download deinstalliert wird.
Billion PhotosShutterstock Eine Native Mobile App selbst erstellen – Teil 2: Programmieren oder App-Baukasten?
Wenn Sie eine Native Mobile App selbst erstellen wollen, geht das mit einer Entwicklungsumgebung. Da dazu jedoch Kenntnisse der Software-Entwicklung erforderlich sind, stellt diese Variante meist keine Option für Anfänger dar. Unerfahrene App-Entwickler können allerdings auf spezielle App-Maker zurückgreifen. Diese setzen keine Programmierkenntnisse voraus und punkten teils mit überraschend vielen…
REDPIXEL.PLShutterstock Lua-Tutorial
Vielleicht haben Sie schon von der Script-Sprache Lua gehört: Sowohl für Game-Engines als auch in Web-Servern kommt diese aus Brasilien stammende Sprache zum Einsatz. Als eingebettete Sprache erlaubt Lua die Programmierung in einem einheitlichen Format, vollkommen unabhängig von der jeweiligen Umgebung. Lua dient damit als komfortable Schnittstelle zu komplexeren Systemen.
