Flutter, Dart und mehr !

  Photo by James Forbes on Unsplash Im letzten Artikel in dieser Serie haben wir den ersten, sehr einfachen Http Server erstellt. Mit der Programmiersprache Dart geht das mit wenigen Zeilen Code. Server Code -- neue Version Den Code vom letzten Artikel ändere ich ab. Wenn Du Ihn Dir noch einmal anschaust, wirst Du feststellen, das er nicht so einfach zu erweitern ist. Die neue Version: Achtung. Achtung. Code nur im Debugg Modus ausführen !! Neu in diesem Code ist, das Du den Server in einer Variable speicherst, und die Auswertung des Request Objekts in einem for(...) Schleifenkörper. Wobei, eigentlich ist es ja keine richtige Auswertung. Der Code registriert das eine Anfrage vom Client kommt und schreibt dann "Hallo Welt" zurück.  In einem ersten Schritt änderst Du den Code zu: Die Verarbeitung des HttpRequest Objekts ist jetzt in eine Funktion ausgelagert. Dir fällt sicher das try..catch(e) Konstrukt auf. Im Code Körper zu try steht der Code, der einen Fehler liefern kön...

  Im letzten Artikel bin ich weiter ins Thema Server / Client eingetaucht. Sicher, es ist ein umfangreiches Gebiet. Aber da es nur darum geht , mir ein Basis Wissen anzueignen, hält es sich doch in Grenzen. Du weißt ja jetzt vom letzten Artikel her, was Du unter Http Protokoll zu verstehen hast. Neben der reinen Datenübermittlung ist ein weiterer Nutzen so eines Protokolls, das es Dir Informationen liefert, ob alles richtig funktioniert hat. Wenn wir einen Server programmieren, müssen wir mit beiden Situationen umgehen. Hier die wichtigsten Status Codes: Http Status Codes Das xx steht im übrigen dafür, das es noch mehr Codes in der jeweiligen Gruppe gibt. Ich nenne hier nur die wichtigsten. Eine umfassendere Liste findest Du hier . 2xx 200 - Erfolg 201 - Created 3xx 301 - Moved Permanently 304 - Not Modified 4xx 400 - Bad Request 401 - Unauthorized 403 - Forbidden 404 - Not Found 5xx 500 Internal Server Error 502 Bad Gateway Wenn wir einen Server programmieren, müssen w...

  Im ersten Teil hast Du die ersten Basis Informationen zum Thema erhalten. Während ich diese Serie schreibe, arbeite ich mich auch in das Thema ein. Im ersten, aber auch in diesem Post geht es nicht um konkrete Codebeispiele. Es geht darum zu wissen, in welchem technischem Umfeld wir uns bewegen. Kurze Auffrischung : Du kannst Dir unter Client (z.b. dein Browser) und Server (Computer System irgendwo im Internet) etwas vorstellen. Stehen geblieben sind wir im ersten Post bei dem HTTP Protokoll und haben die entsprechenden Schlüsselwörter ( Befehle ) kennengelernt. Wir wissen auch den Unterschied zwischen Request (Anfrage) und Response (Antwort). Und wie diese zwei im Format prinzipiell aufgebaut sind: In einen Kopfbereich ( Header ) und einen Körperbereich ( Body ). noch mehr Protokoll Wenn Du also auf einer Website surfst, entsteht ein Kreislauf zwischen Anfragen (von deinem Browser) und Antworten (vom Server im Internet). Dabei ist gut zu wissen, das diese Anfragen völlig ...

  In diesem Artikel geht es um die Überprüfung eine Html Formulars , unter Verwendung von Boostrap 5 und Dart . Diese erfolgt in diesem Beispiel auf der Client Seite und ist nur rudimentär. Bootstrap selbst stellt verschieden Klassen zur Verfügung die das unterstützen.  Mit Html kann man auf verschiedene Art und Weise ein Formular erstellen. Die wohl einfachste ist, das offizielle  form Element zu verwenden. Innerhalb dieses Elements können wir die benötigen Elemente einfügen. Das dürften in der Regel input, button, oder option Elemente sein, aber auch zum Beispiel ein Image ist möglich. Der Html Code Achtung: Sie müssen Bootstrap korrekt in ihr Html Dokument eingebunden haben, um das Beispiel nachzuvollziehen.  Der Code erzeugt ein form Element, das mit der Bootstrap 5 Klasse row formatiert ist. Zusätzlich wird auf row noch requires-validation angewandt.  Das ist keine Bootstrap Klasse, sondern eigentlich ein Marker, denn wir dann in Dart benötigen. ...

B is jetzt haben wir in diesem Blogg nur die  Clientseitige Programmierung beachtet. Es wird Zeit jetzt auch einmal die Server Seite zu betrachten. Bevor Sie mit dem programmieren loslegen können, muss Klarheit über Begriffe und Konzepte bestehen. Server und Client Wie überall in der  IT  sind englischsprachige Ausdrücke dominant. Der Browser der auf Ihrem System läuft ist der  Client . Wenn Sie eine Webadresse aufrufen, steht irgendwo in der Welt ein Computersystem, der Ihnen diese Website "liefert". Dieses System ist der  Server . Auf Ihrem System kann nicht nur der Browser als Client dienen. Heute ist es üblich, das viele Softwarepakete auf das Internet zugreifen. Sei es um auf installierbare Updates zu prüfen, oder um ganz einfach Daten in der Cloud zu speichern. Alles hat eine Adresse Was eine URL ist, wissen heute die meisten. Eine Uniform Resource Locator  ist, wie häufig in der IT, ein Standard. Er dient dazu bestimmte Inhalte aufzurufen. Er legt d...

  In diesem Artikel betrachte wir die display Klasse(n) von Bootstrap 5. Diese Klasse hilft bei der Umsetzung eines Responsive Webdesign's . Letztendlich ist damit gemeint, das Sie einen Code schreiben, der auf verschiedenen Bildschirmgrössen benutzerfreundliche Ergebnisse generiert. Es ist noch gar nicht so lange her, da musste man für unterschiedliche Bildschirmgrössen, auch komplett unterschiedliche Websiten erstellen. In der Gegenwart können Sie das mit einer Codebasis erreichen. Block Element - Inline Element Bevor wir uns display im Detail anschauen, sollten Sie den Unterschied zwischen Block Elementen und Inline Elementen kennen. Ein Block Element beginnt immer auf einer neuen Linie. Es nutzt die maximal verfügbare Breite und besitzt oben und unten einen margin Wert. Inline Elemente besitzen diesen nicht. Ein Inline Element  startet nicht auf einer neuen Linie und nimmt nur soviel Platz in Anspruch, wie es benötigt. Jedes Html Element gehört einer dieser zwei...

  In einem älteren Artikel hatte ich bereits das Thema Statefull - / Stateless Widgets angeschnitten. Zur Auffrischung : Flutter kennt zwei Sorten von Widgets (Objekten) . Solche die so angelegt sind, das sie Veränderungen umsetzen können, und solche, die nach der Erstellung in ihrem Zustand verbleiben. Da gerade die Fußball EM läuft ein Vergleich: Das Fußballfeld und die zwei Tore würden Sie über Stateless Widgets realisieren. Es bleibt immer gleich. Die Mannschaften über Statefull Widgets . Die Mannschaften wechseln, die Spieler sind andere. Jedes Mal also, wenn eine neue Mannschaft auf das Spielfeld läuft, muss Ihr Statefull Widget diese Veränderung abbilden. Um den weiteren Artikel gut nachzuvollziehen sollten Sie bereits grundlegende Kenntnisse über Flutter bzw. Dart besitzen. Der Artikel basiert auf einem YouTube Video von Nick Manning (englisch).  State Von Haus aus ist Flutter so eingerichtet, das Sie den Teil des Codes, der eine Veränderu...

  In diesem Post geht es um die praktische Arbeit mit dem Gridsystem von Bootstrap 5 . Falls Sie die letzten Posts zu diesem Thema gelesen haben, wissen Sie dass das System auf 12 Kolumnen aufbaut. Das System spielt seine Stärke vor allem im responsive Webdesign aus. Diese modische, englische Schlagwort meint eine einfache Tatsache: Eine Website soll auf allen Bildschirmgrössen benutzerfreundlich dargestellt werden . Praxisbeispiel: Auf einem großen Bildschirm können Sie horizontal mehr darstellen, als auf kleinen Bildschirmen. Früher musste der Benutzer auf kleinen Bildschirmen scrollen, um die nicht sichtbaren Elemente der Website zu erreichen. Heute können Sie eine Website so erstellen, das sie sich dem Gerät anpasst. Der Html Code oben enthält folgende Bootstrap 5 Klassen: row, col-2 Den css3 Code für das Beispiel erspare ich Ihnen. Er legt nur Farben fest für .div{...} und .div div{...} . Mit col-2 definieren Sie : Diese Kolumne soll von den maximal 12 verfügbaren K...

In diesem Post machen wir unsere ersten Schritte in Flutter . Dabei nehmen wir einen anderen Ansatz, als in älteren Artikeln in diesem Blog. Ich gehe davon aus, das Sie, im Editor ihrer Wahl, ein Flutter Projekt generiert haben.  Dieses Projekt enthält eine Ordner Struktur für Ihr Projekt und unter anderem ein main.dart File. Diese File enthält den Boiler Plate Code. Ein kleines lauffähiges Programm, das Sie auf verschiedenen Plattformen (Mobile / Web) ausführen lassen können. Löschen Sie diesen komplett, da wir eine kleine Flutter Anwendung von Grund auf entwickeln werden . Wir importieren ! Im letzten Artikel haben Sie schon gelernt, das alles in Flutter ein Widget ist, einfacher: ein Objekt.  In der objektorientierten Programmierung haben wir es mit Klassen zu tun. Klassen können erweitert werden, neue Objekte aus ihnen generiert werden und einiges mehr. Sollten Sie sich ernsthaft mit Flutter, und damit auch unweigerlich mit Dart, beschäftigen wollen, sind Grundkenntniss...

Das Beste an Flutter ist der einfache Einstieg. Wer es sich aktuell zum Ziel gemacht hat, in die Entwicklung von Apps einzusteigen, findet wenig Frameworks, die es einem so einfach machen wie Flutter. Die Vorteile von Flutter: hervorragende Dokumentation auf der Entwicklerseite von Google, ein inzwischen ausgebautes Ecosystem (Librarys, Integration in IDE's etc.) und eine steigende Akzeptanz in der Business Welt. Wie alles hat auch Flutter zwei Seiten. Nicht für jede Problemstellung ist Flutter die richtige Wahl. Flutter zu lernen, oder mehr über Flutter zu lernen, ist sicher keine Zeitverschwendung. Schliesslich wird Flutter von Google aktiv weiter entwickelt. Das ist fast eine Garantie dafür, das Flutter auch mittel- bis langfristig relevant bleiben wird. Aber legen wir los: Alle ist ein Widget Der Begriff Widget ist gar nicht so einfach ins deutsche zu übersetzen. Vor Flutter hat man sich darunter mehrheitlich kleine Programme vorgestellt, die einer bereits bestehenden Umgebu...

Bei diesem Code sind wir im ersten Teil stehen geblieben. Die erste Funktion die hier im main Code aufgerufen wird ist addAufgabe. Bevor wir aber diese Funktion anschauen, ein kurzer Blick auf die Klasse, die dort verwendet wird: Die Klasse enthält drei Variablen . int _id =0;  als private Integer Variabel , int id und String text. Im Konstruktor Aufgabe(...) wird die Zeichenkette gesetzt. Besondere Beachtung verdient :this.id = _id++ ; . Dieser Code erhöht die private Variable int um eins. addAufgabe(...) Diese Funktion wird aufgerufen, wenn eine Eingabe im Inputfeld gemacht und mit der Return Taste abgeschlossen wurde. Dieser Funktion übernimmt das Event als Argument. Dieses stammt von aufgabenInput.onChange.Listen(...) . Da wir das input Html Element im main Code bereits einer Variablen zugewiesen haben, können wir seinen Inhalt (Zeichenkette) einem neuen Objekt vom Typ Aufgabe zuweisen. Dieses Objekt fügen Sie der Liste mit aufgabenListe.add(...) hinzu. Da die Liste jetz...