Ein Blog rund um moderne Webtechnologien. Schwerpunkte sind die Programmiersprache Dart, und das SDK Flutter von Google. Die Posts enthalten in der Regel getestete Code - Beispiele.
AngularDart Part 2 -- Installation Boiler Projekt
Link abrufen
Facebook
X
Pinterest
E-Mail
Andere Apps
AngularDart Logo
Im ersten Teil zu AngularDart, haben wir schon eine Annäherung versucht. In diesem Post setzten wir das fort und erstellen nun das BoilerProjekt in Visual Studio Code.
Wer regelmäßig alle Updates, sowohl für VSC, als auch für Dart installiert hat, sollte keine Probleme haben, schließlich erledigt die IDE alles für uns.
Wir öffnen die Befehlspalette in Visual Studio Code, wählen Dart: neues Projekt und dort AngularDart. Unten ein kleines Video dazu. Aber es ist wirklich einfach...
Nach dem das Boiler Projekt steht, sollte man noch sicherheitshalber die installierten Abhängigkeiten updaten. Entweder über $pub get im Terminal (bitte kontrollieren ob man sich im richtigen Verzeichnis befindet), oder einfacher über den vorhandenen Button von Visual Studio Code. Diesen erhält man, wenn man die pubspec.yaml Datei geöffnet hat, oben rechts. Wenn das geschehen ist und wir keine Fehlermeldungen bekommen haben, sind wir schon fast startbereit. Was jetzt noch fehlt ist die Möglichkeit unser Boiler Projekt im Browser anzuschauen.
Um das zu bewerkstelligen müssen wir das Terminal nutzen. Hier benötigen wir das Programm webdev, welches wir ganz einfach mit pub global activate webdev installieren. Global bedeutet im übrigen, das webdev in unserem path ist und wir keine Probleme mit dem Zugriff haben.
localhost:8080
Hier möchte ich noch einmal erwähnen wie wichtig das updaten aller Komponenten ist. Dart, AngularDart, Flutter, aber auch verwandte Programme werden ständig weiterentwickelt. Während sich einiges automatisch updaten lässt, muss man anderes "von" Hand machen. Man erspart sich im Zweifelsfall viel Arbeit bei der Fehlersuche...
Wenn alles fehlerfrei ist, sollten wir auf localhost:8080 dann unsere Page haben. An sich nichts weltbewegendes, aber ein guter Startpunkt für weitere Schritte in AngularDart.
Im Teil 1 dieses Kurses sind wir in das Thema programmieren mit Dart eingestiegen und haben uns das minimale Grundgerüst eines Dart Programmes angeschaut. Zum nachvollziehen der Beispiele sei hier das DartPad empfohlen. Die Programmiersprache lässt sich zwar mit diesem webbasierten Editor nicht in Gänze nutzen. Für die ersten Schritte aber reicht es allemal. Hier noch einmal das Beispiel: 1 2 3 void main() { } Natürlich ist dieses Grundgerüst sinnfrei, weil es macht, genau..es macht nichts . Der main() Block , wo weitere Befehle stehen sollten, ist leer. Mit einem Programm löst man eine Problemstellung Problemstellung : Wir möchten drei Zahlen addieren und das Ergebnis auf dem Bildschirm ausgeben . Natürlich, in der realen Welt würden wir versuchen, die Zahlen im Kopf zu berechnen, oder wir nehmen dazu einen Taschenrechner zur Hand. Wie aber lösen wir das mit Dart in einem Programm ? Die wichtige Rolle von Variablen Wir wollen also drei Zahlen addieren, d.h. wir müssen ...
Ein Flutter Programm zu erstellen, ohne sich näher mit Dart zu beschäftigen, ist nicht wirklich sinnvoll. Wer von Java / Javascript her kommt, kann das versuchen. Besser scheint mir aber, den "kleinen" Umweg zu gehen und sich mindestens rudimentär mit Dart zu beschäftigen. Als erstes ist dabei wichtig, sich vor Augen zu führen, das Dart von Anfang an, als Sprache konzipiert wurde, die die Entwicklung von Webapplikationen erleichtern bzw möglich machen sollte. Sie steht deshalb oft im direkten Vergleich zu Java / Javascript. Es ist deshalb kein Wunder, das mit AngularDart ein Framework entstanden ist, welches genau dieses unterstützt. Bei der Flutter Programmierung ist noch interessant zu wissen, das im Debug Mode, der Code in einer Dart VM (Virtual Machine) läuft. Typed oder Untyped ? Wenn wir folgenden Code schreiben: var frageZeichen = "Antwort"; Hier haben wir frageZeichen , als Variable vom Typ " var " deklariert und weisen ihr den We...
Dart und Klassen -- ein erstes Beispiel Objekte und Klassen sind wesentliche Bestandteile der objektorientierten Programmierung. Ich habe eine kleines Video zu meinen ersten Erkenntnissen in diesem Bereich gemacht: Im Video oben wurde die Klasse mitArbeiter definiert. Anschließend eine Funktion bzw im Klassen/Objekt Kontext eine Methode des selben Namens: mitArbeiter() . Sie übernimmt als Argumente 3 Strings. Was hat es damit auf sich ? Bei der Erstellung einer Klasse können wir Konstruktoren definieren, was an sich eine Funktion ist, die den gleichen Namen wie die Klasse trägt. Sie hat Zugriff auf die Variablen innerhalb der Klasse. Ganz am Anfang der Klasse definieren wir: String nachName; Diese Variable hat nach Erzeugung des neuen Klassenobjekts nmitarbeiter, den Wert NULL, was nichts anderes heißt, als das die Variable leer ist. Ein String den wir übergeben haben, den ersten, ist der Nachname. Mit this.nachName = nachName wird der anfangs leeren Stringva...
Kommentare
Kommentar veröffentlichen