Boehrsi.de - Blog

An dieser Stelle eine kleine Erinnerung an das aktuelle Gewinnspiel zum Puzzle / Jump & Run Portal Dogs. Noch bis zum 31.05.2020 habt ihr Zeit einen von zehn Key für Android oder Steam abzustauben.
Dafür reicht der gewohnte Kommentar unter der hier verlinkten News und etwas Glück, schon habt ihr vielleicht bald etwas Neues zum Zocken. Der verlinkte Beitrag beinhaltet auch das eine oder andere Video zum Spiel, sowie mein Review des Indie Titels.

• Portal Dogs - Review und Gewinnspiel open_in_new
• Portal Dogs Website open_in_new
• Portal Dogs auf Steam open_in_new
• Portal Dogs auf Google Play open_in_new
• Portal Dogs im Nintendo Store open_in_new

Nachdem es durch die Neuinstallation des Servers und diverse andere Themen mal wieder ein paar Verzögerungen gab, geht es nun weiter mit meiner kleinen Futter Tutorialreihe. Heute gehe ich auf das Formular ein, welches das Hinzufügen und Bearbeiten von RSS Feeds erlaubt.
Ich werde heute lediglich eine Klasse beleuchten, da ich das Gefühl habe in anderen Beiträgen wurde etwas viel auf einmal erläutert. So hoffe ich etwas nachvollziehbarere Erklärungen liefern zu können. Wie gesagt ist auch für mich diese umfangreiche Tutorialreihe etwas Neues und zugleich ist sie sehr aufwendiges. Ich versuche entsprechend direkt während der Erstellung und wenn ich mir meine eigenen Beiträge später noch einmal anschaue, Dinge zu optimieren.
Doch nun zum eigentlichen Thema, dem Verwalten der RSS Feeds über ein Formular in Flutter, inklusive simpler Validierung der Eingaben und Übergabe der Daten an unseren BloC.

• Tutorial App Repository auf GitHub open_in_new
• Flutter Website open_in_new

Heute gibt es mal wieder etwas Besonderes, denn ich hatte die Chance ein Spiel für den PC und Android anzuspielen und darf euch heute mein Review dazu präsentieren. Die Jungs von Brain Connected kenne ich bereits aus meiner Studienzeit und entsprechend freue ich mich heute sehr ihr Indie-Spiel Portal Dogs testen zu dürfen. Das Spiel wurde mir für den Test kostenlos zur Verfügung gestellt.
Falls ihr übrigens Interesse an einem kniffligem Puzzle / Jump & Run habt, solltet ihr dran bleiben. Es gibt 10 Keys für Portal Dogs zu gewinnen, welche ihr mittels eines einfachen Kommentars unter dieser News und etwas Glück abstauben könnt.
Doch was ist Portal Dogs eigentlich genau? Im Prinzip handelt es sich um ein Jump & Run, welches allerdings eher auf puzzeln und Logik ausgelegt ist, als auf Schnelligkeit. Ihr startet mit einem Portal Dog und versucht durch die verschiedenen Level zu kommen. Unterwegs könnt ihr allerdings auch andere Dogs aktivieren, welche sich dann simultan zu eurem Hauptcharakter steuern lassen. Nun gibt es verschieden Ausgänge für verschiedene Dogs, diverse Power-Ups und allerhand andere Dinge, die ihr erst einmal logisch verbinden müsst. Am Ende hat man einen komplexen Puzzler, mit einem Hauch Lemmings und sehr schön gemachten Animationen.
Nun zu meinem eigentlichen Review, welches ich wie gewohnt mit dem Sound und der Grafik beginne. Wir haben hier einen 2D Titel mit handgemachten Grafiken und Animationen. Mir persönlich gefällt der Stil durchaus gut, denn er unterstreicht die sympathische Tollpatschigkeit der Figuren, während er gut zum generellen Genre passt. Auch im Audiobereich hat man ein schönes, zum Titel passendes Theme gewählt. Etwas Hintergrundmusik, kombiniert mit den allseits beliebten Sprung-, Aktivieren- und Sterben-Sounds und schon fühlt man sich zuhause. Ein gutes Gesamtkonzept für ein Indie-Spieler dieser Art.

• Portal Dogs Website open_in_new
• Portal Dogs auf Steam open_in_new
• Portal Dogs auf Google Play open_in_new
• Portal Dogs im Nintendo Store open_in_new

Aufgrund der Länge des Beitrags habe ich diesen Abschnitt des Tutorials noch einmal aufgeteilt. Die erste Hälfte (Main Logik) findet ihr hier.

Nachdem wir nun die App initial laden können, geht es weiter mit der Liste der RSS Feeds. Dieser Bereich besteht bei mir aus fünf Dateien. Im feed_list Package open_in_new befinden sich die feed_list.dart open_in_new, feed_list_barrel.dart open_in_new, feed_list_bloc.dart open_in_new, feed_list_change.dart open_in_new und feed_list_events_states.dart open_in_new. Der Aufbau ist sehr ähnlich unserem Main Konstrukt, mit einer weiteren Datei, welche das Hinzufügen, Bearbeiten und Löschen über die UI ermöglicht. Die Event / State Datei (lib/feed_list/feed_list_events_states.dart open_in_new) und die Barrel Datei (lib/feed_list/feed_list_barrel.dart open_in_new) wird im Folgenden nicht weiter erläutert, da sie trivial sind.
Beginnen werden wir nun mit dem FeedListBloc. Dieser könnte als Herzstück der App bezeichnet werden, da er sowohl die RSS Feeds verwaltet, wie auch Updates aller Feeds durchführen kann. Die gesamte App arbeitet dabei mit nur einem FeedListBloc, welcher bereits in der lib/main.dart open_in_new erstellt und mittels eines Providers darunterliegenden Strukturen zur Verfügung gestellt wird. Damit kann sichergestellt werden, dass keine unnötigen Objekte erzeugt werden oder aber falsche States aktualisiert werden.

• Tutorial App Repository auf GitHub open_in_new
• Flutter Website open_in_new

Nun geht es in die vollen, denn heute bauen wir unsere erste richtige Logik. Am Ende des vierten Teils dieser Tutorialreihe soll die initiale Logik zum Start der App und die RSS Feed Logik implementiert sein. Zur Umsetzung erstellen wir den MainBloc (lib/main/main_bloc.dart open_in_new), der die Datenbank lädt und später z.B. das Laden der Konfiguration übernehmen kann. Sobald dieser Vorgang abgeschlossen ist, sollen alle RssFeed Objekte mit Hilfe des FeedListBloc (lib/feed_list/feed_list_bloc.dart open_in_new) aus der Datenbank geladen werden.
Damit die Datenbank auch mit Inhalt gefüllt ist, soll es über die UI möglich sein einen neuen Feed anzulegen. Sowohl für das Laden der RssFeeds, wie auch für das Hinzufügen wird der FeedListBloc genutzt. Außerdem erstellen wir geeignete Widgets zur Darstellung der Liste (lib/feed_list/feed_list.dart open_in_new) und des Formulars (lib/feed_list/feed_list_change.dart open_in_new), wobei letzteres im nächsten Teil der Reihe umgesetzt wird.
In diesem Zuge habe ich auch eine kleine Umbenennung vorgenommen, denn unser RssList Widget (nun FeedList Widget) und alle damit verwandten Klassen, befinden sich nun im FeedList Kontext open_in_new (Namen und Pakete). Dieser Name gefiel mir einfach besser und ist gleichzeitig kürzer und deutlicher. Die Bezeichnung für den Typ bleibt allerdings unverändert bei RssFeed.

Damit das Verstehen der folgenden Schritte leichter fällt, beginne ich mit einem schnellen Einblick in das BloC Konzept. Ich empfehle euch allerdings die offizielle Dokumentation open_in_new zum Thema anzuschauen, wenn ihr das Ganze aktiv nutzen wollt. Sie ist übersichtlich, gut gemacht und bietet außerdem diverse gute Beispiele.
BloC oder auch Business Logic Components ist mein aktuell favorisierter Weg, um Logik von UI und wiederum von Daten zu trennen. Dafür wird sehr intensiv auf das Konzept von Streams open_in_new gesetzt. Ein BloC interagiert immer mit zwei Streams, einem für den Input (Events) und einen für den Output (States), dabei sollte jedes Event zu mindestens einem passenden State führen. Im konkreten Library Kontext wird dafür die mapEventToState() open_in_new Methode genutzt. Sofern ihr einen BloC erstellt und Bloc open_in_new erweitert, müsst ihr sowohl die akzeptierten Events dieses BloC, wie auch die dazugehörigen States angeben. Diese definiert man meist in einer gesonderten Datei, wodurch ein übersichtlicher klarer Rahmen von erlaubten Eingaben und Ausgaben definiert wird.
Events können von der UI, z.B. durch einen Tap auf einen Button, kommen oder aber von anderen BloCs, bzw. tieferliegenden Komponenten. States werden vom BloC erzeugt und meist von der UI verarbeitet und führen zu automatischen Anpassungen von selbiger. Allerdings können auch andere BloCs auf State Änderungen hören und entsprechend Aktionen durchführen. Es ist außerdem erlaubt im Laufe der Verarbeitung mehrere States zu liefern. So macht es bei längeren Aktionen zum Beispiel Sinn, am Anfang einen Loading State zu übergeben und nach Abschluss einen State der die finalen Daten zurückgibt.
Entsprechend gibt es verschiedene Quellen für Events und verschiedene Ziele für States, auch mehrere gleichzeitig sind möglich. Streams bieten hier viele Freiheiten und Flexibilität, es ist allerdings extrem wichtig alles ordentlich zu dokumentieren und klare Flows zu etablieren. Denn mit großer Flexibilität kommt sonst großes Chaos.

• Tutorial App Repository auf GitHub open_in_new
• Flutter Website open_in_new

Nach dem der letzte Teil ein sehr langes Intro war, erstellen wir nun die Typen und die Datenbank, inklusive Wrapper-Objekten, welche uns die einfache Nutzung der Datenbankinhalte innerhalb der BloCs erlauben sollen. Neben einer sehr kleinen Basisklasse (lib/types/database_entry.dart open_in_new) für die Typen, gibt es zwei Haupttypen. Einmal den RssFeed (lib/types/rss_feed.dart open_in_new) und den RssEntry (lib/types/rss_entry.dart open_in_new). Diese beiden bilden die initiale Datenbasis, mit welcher ich arbeiten möchte. Im folgenden findet ihr Code-Teile der genannten Klassen und einige Erklärungen dazu.

lib/types/database_entry.dart (Code auf GitHub open_in_new)

abstract class DatabaseEntry {
  Map<String, dynamic> toMap();

  int get id;
}

Diese kleine Basisklasse zwingt unsere Typen dazu, sowohl ein Mapping Funktion zur Verfügung zu stellen, wie auch einen Getter für die Id. Die Mapping Funktion ist relevant, da unsere Datenbank JSON open_in_new als internes Format nutzt und entsprechend gerne mit Key-Value-Maps arbeitet. Ich hätte hier gerne noch Wrapper-Funktionen für die Erstellung der jeweiligen Objekte hinzugefügt, aber dafür wäre Generic-Black-Magic nötig gewesen, welche den Umfang dieses Tutorials sprengen würde.

• Tutorial App Repository auf GitHub open_in_new
• Flutter Website open_in_new

Womit geht es in Teil zwei weiter habe ich mich gefragt. Sowohl die UI, wie auch die eigentliche Architektur könnten ein Thema sein. Ich persönlich bevorzuge erst die Logik, dann die UI und entsprechend machen wir heute auch weiter. Bevor wir jetzt aber alles selber schreiben, binden wir erst einmal relevante Libraries ein. Denn es gibt ein paar Dinge die man nicht unbedingt selber schreiben möchte.

pubspec.yaml (Code auf GitHub open_in_new)

name: fss
description: Fluttery Site Summaries - RSS the Flutter way

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  bloc: ^4.0.0
  flutter_bloc: ^4.0.0
  flutter_html: ^0.11.1
  http: ^0.12.0+4
  intl: ^0.16.1
  path_provider: ^1.6.7
  sembast: ^2.4.2
  url_launcher: ^5.4.5
  webfeed: ^0.4.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  pedantic: ^1.9.0

flutter:
  uses-material-design: true

• Tutorial App Repository auf GitHub open_in_new
• Flutter Website open_in_new

Wie man es im Leben kennt, hat alles wesentlich länger gedauert, sowohl die Planung für diese Newsreihe, wie auch die Entwicklung der App und die eigentliche Erstellung der Beiträge, doch heute geht es nun wirklich los.
Diese Tutorialreihe richte sich an Entwickler die bereits einige Erfahrungen sammeln konnten, bzw. die ein Grundverständnis für Dart open_in_new und Flutter open_in_new haben. Ich werde versuchen alles so umfangreich wie möglich zu erklären, allerdings werde ich nicht jeden Parameter eines jeden Widgets beschreiben. Dieses Tutorial soll vor allem auch Einblicke in Konzepte und Ideen geben, aber explizit kein Copy & Paste One-Page Tutorial sein. Geschriebener Code wird nach Möglichkeit gemäß den Effective Dart Style Guidelines open_in_new entwickelt.
Das gesamte Repository open_in_new ist im finalen Zustand bereits auf GitHub hinterlegt. Im Laufe der Tutorialreihe haben sich einige interne Strukturen und Bezeichnungen geändert, dies wird in den jeweiligen Beiträgen erläutert.
Ein neues Flutter Projekt startet immer mit einem kleinen Counter-App Beispiel. Dieses soll vor allem komplett neuen Entwicklern etwas Arbeit abnehmen und eine grundlegende Idee von Strukturen und dem Aufbau einer Flutter App vermitteln. Generell eine gute Idee, für uns nicht wirklich hilfreich, also räumen wir erstmal auf.
Ich werde, aufgrund meines Android Hintergrunds und weil es eines der wenigen Designkonzepte ist die selbst ich wirklich nachvollziehen kann, auf Material Design open_in_new setzen. In Flutter nutze ich entsprechend eine MaterialApp open_in_new.
Zudem werde ich in der App keine Übersetzungslogik einbauen und sie nur auf Englisch anbieten. Allerdings möchte ich explizit darauf hinweisen, dass ihr Apps, welche jemals produktiv genutzt werden sollen, von Anfang an lokalisiert entwickeln solltet. Zu diesem Thema findet ihr hier im Blog bald mehr. Dies gesagt möchte ich von jeglicher Form von Magic-Strings abraten, egal ob für Text den der Nutzer sieht oder für interne Inhalte. Strings sollte immer konstant definiert werden, ansonsten beißt man sich früher oder später ins Hinterteil.
Doch nun zum eigentlich Code. Als erstes entferne ich erklärende Kommentare aus der pubspec.yaml open_in_new und lib/main.dart open_in_new, denn selbige brauchen wir nicht. Ich versuche übrigens bei jeder ersten Erwähnung einer Datei den gesamten relativen Projektpfad anzugeben und anschließend nutze ich nur noch den Dateinamen. Ich hoffe dies hilf euch beim Finden der jeweiligen Dateien, überfrachtet den Beitrag selbst aber nicht zu sehr.

• Tutorial App Repository auf GitHub open_in_new
• Flutter Website open_in_new

Aufgrund der aktuellen Situationen werden viele Events abgesagt und auch die IT / Softwareentwickler-Welt ist davon natürlich betroffen. Damit der geneigte Android-Entwickler aber weiterhin sein Wissen aufbessern und sich mit anderen austauschen kann, habe sich die Droidcon Veranstalter etwas überlegt.
Droidcon Online ist eine Event-Reihe, bei welchen ihr zu festen Terminen in den nächsten Monaten einiges neues lernen könnt. Themen wie Jetpack, Multi-Platform Development, Kotlin, Tooling, Security, CI/CD, Testing und Design werden dabei bedient.
Ein jedes Webinar besteht aus zwei 30 Minuten Sessions, einem 15 Minuten Talk und anschließend einer Q&A Runde. Hier könnt ihr euch also Wissen aneignen, euch austauschen, Fragen stellen und mit der Community in Kontakt bleiben. Diese Onlineveranstaltungen sind kostenlos und stattdessen bittet man um eine Spende an den World Health Organization COVID-19 Solidarity Fund, sofern man etwas geben möchte.
Falls ihr übrigens keine Zeit an einem der Termine habt, könnt ihr auch Aufzeichnungen von selbigen anschauen oder z.B. zum zweiten Teil einer Vortragsreihe einsteigen. Weitere Informationen findet ihr in den Related Links. Dort findet ihr die Termine, den FAQ zur Aktion und alle weiteren Informationen. Ich werde auf jeden Fall an einigen Webinaren teilnehmen und bin gespannt was es neues in im Android Land gibt, denn durch Flutter bin ich aktuell ja eher wenig in der nativen Android Welt unterwegs.

• Droidcon Online Website open_in_new
• Droidcon Online - FAQ open_in_new

Bereits seit ein paar Wochen ist Android Studio 3.6 verfügbar, doch nicht jeder führt die Aktualisierung sofort durch. Vor allem wenn man Plugins, komplexe Build-System oder ähnliches nutzt, wartet man ja gerne einen Moment. Dies gibt Entwicklern von angeschlossenen Tools etwas Zeit entsprechende Updates zu entwickeln.
Ich persönlich arbeite mit Flutter, Android und nutze das eine oder andere Plugin und bin sehr zufrieden mit dem Update. Ich konnte keinerlei Probleme auf meinem privaten System feststellen und werde entsprechend nun auch meinen Arbeits-Laptop aktualisieren. Dazu sei aber auch gesagt, dass ich bereits Version 3.6.1 nutze, welche kleinere Fehler des initialen Releases behebt.
Doch was gab es eigentlich neues in Android Studio 3.6? Im Design Bereich wurde der Layout Editor und Resource Manager überarbeitet. Hier ist wohl mit am wichtigsten, dass es nun eine Split-View gibt, welche Code und UI nebeneinander anzeigt. Ebenfalls neu ist die Anordnung der Steuerungselemente, welche nun als Floating-Buttons unten recht positioniert sind. Zusätzlich bringt der Color Picker nun einen Resources Tab mit, welcher euch erlaubt aus diversen definierten Werten zu wählen. Der Resource Manager selbst unterstützt nun mehr Typen, die Suche wurde optimiert und das Filtern wurde verbessert.

• Android Studio Website open_in_new
• News zum Thema im Android Blog open_in_new