Boehrsi.de - Blog

Heute geht es weiter mit den eigentlichen Einträgen eines RSS Feeds. Die dazugehörigen Dateien befinden sich im lib/entry_list/ open_in_new Package und sind verglichen mit der lib/feed_list/ open_in_new Logik etwas einfacher zu handhaben. Dieser Beitrag ist der Abschluss meiner kleinen Tutorialreihe und den gesamten Source-Code findet ihr auf Github. Links zu den gennannten Dingen findet ihr in den Related Links. Mit diesen kurzen Worten der Einleitung möchte ich heute direkt mit dem User Interface starten.

• Tutorial App Repository auf GitHub open_in_new
• Flutter Website open_in_new

Im Rahmen der Software-Entwicklung nutzt man oft Libraries, Tooling und andere Dinge die man selbst nicht komplett durchdringt. Dies ist zu bestimmten Teilen auch in Ordnung und an der Tagesordnung, doch manchmal ist eine Software-Blackbox ein extremes Problem.
Doch definieren wir erst einmal Blackbox. Für mich ist eine Blackbox im Software-Bereich eine Komponente, die man selbst nicht durchdringt und die nicht mit akzeptablem Zeitaufwand, aus welchen Gründen auch immer, verstanden werden kann. Gründe sind hier, auch wenn es sich um Open Source Software handelt, andere Programmiersprachen, zu komplexe Konzepte, fehlende Dokumentation oder ähnliches. Closed Source Software ist natürlich per-se eine Blackbox.

Wann ist eine Blackbox aber nun ein Problem? Meiner Meinung nach wenn sie grundlegende Konzept abstrahiert oder zu essentielle Abläufe übernimmt und dem Entwickler dabei nicht klar ist was wann passiert und warum. Nimmt man z.B. das Build-Tool Gradle open_in_new, so hätte man vielleicht eine Blackbox vor Augen. Diese funktioniert allerdings sehr gut, es gibt eine sehr umfangreiche Dokumentation und auch weitere Ressourcen sind vorhanden. Hier muss man also Vorsicht walten lassen bei Updates und ähnlichem, falls man nicht durchdringt was dies bedeuten könnte. Doch durch vorhandene Dokumentation kann man sich entsprechend und mit akzeptablem Zeitaufwand schlau machen. Insofern würde ich persönlich nicht von einer Blackbox reden, wenn es um Gradle geht.
Hat man nun aber ein derartig wichtiges Tool (z.B. für die Build-Toolchain) oder eine Library die grundlegende Funktionen der eigenen Software übernimmt (z.B. Netzwerk-Interaktionen oder die Implementierung von Protokollen) und eine derartige Informationsquelle ist nicht gegeben, kann man sich in große Probleme manövrieren.

Ich bin täglich auf GitHub unterwegs und da ist es natürlich praktisch auch eine mobile Version für unterwegs zu haben. Die GitHub App gibt es schon etwas länger, aber ich wollte sie trotzdem einmal erwähnen.
Denn mit selbiger könnt ihr eure Issues, Pull Requests, Repositories und Organizations durchaus übersichtlich im Blick behalten. Vor allem der Punkt der Übersicht war mir wichtig, da ich in verschiedenen Repositories unterwegs bin und sowohl Code beisteuere, wie auch Issues verwalte und Code-Changes einem Review unterziehe.
Dabei bietet die Hauptansicht sowohl die allgemeine Navigation für die genannten Bereiche, wie auch Informationen zu euren letzten Aktionen. Weiterhin sind die Notifications und die Suche schnell und praktisch zu erreichen. Was mich persönlich allerdings mehr interessiert sind die eigentlichen Issue Seiten, wie Reviews aufgebaut sind und derartige Dinge. Denn hier wird es auf dem kleinen Screen kompliziert und komplex. Doch sowohl Issues, wie auch Code-Diffs werden übersichtlich angezeigt und sind tatsächlich auch auf dem Smartphone halbwegs gut nutzbar.
Generell erreicht man über die AppBar die Hauptfunktionen, während der eigentliche Content-Bereich alle spannenden Informationen bereithält. Damit man nun aber Kommentare und ähnliches leicht erreichen kann, gibt es eine weitere Interaktionskomponente am unteren Ende des Bildschirms. Hier könnt ihr schnell verschiedene kontextrelevante Aktionen durchführen.
Positiv für mich fällt weiterhin auf das ein Dark-Mode vorhanden ist. Ob man selbigen nutzt ist wie so vieles, Geschmackssache. Im Allgemeinen bin ich mit dem Funktionsumfang und dem Look and Feel zufrieden und freue mich auf weitere Updates. Aktuell benötige ich die App zwar eher selten, aber wenn man bald wieder mehr in der Welt da draußen unterwegs sein kann, bietet es sich natürlich an ein paar Reviews aus der Natur zu machen.

• GitHub Mobile Website open_in_new
• GitHub auf Google Play open_in_new
• GitHub im Apple App Store open_in_new
• GitHub Website open_in_new

Von Zeit zu Zeit baue ich Java Programme mit einem User Interface. Dies tue ich gerne mit dem IDEA GUI Designer, denn auch wenn Java UI generell eher nicht das idealste ist, manchmal ist sie einfach passend für den Einsatzzweck.
Zusätzlich nutze ich aber auch gerne Gradle als Build-Tool meiner Wahl. Die Kombination aus Gradle + IntelliJ IDEA + GUI Designer ist aber leider etwas problematisch und so hatte ich einige Probleme nach diversen Updates meiner Projekte, eine lauffähige JAR zu erzeugen.
Um euch diese Arbeit zu ersparen habe ich aus verschiedenen Stack Overflow Beiträgen (Beitrag #1 open_in_new, Beitrag #2 open_in_new, Beitrag #3 open_in_new) und der offiziellen Dokumentation für Gradle Einstellungen zusammengesucht, welche ich an euch weiterleiten möchte.
Initial benötigt ihr die forms_rt.jar aus dem JetBrains/IntelliJ IDEA Community Edition/IntelliJ IDEA Community Edition/lib Ordner in eurem Projekt. Um dies zu erreichen und auch Updates automatisch mitnehmen zu können, habe ich einfach einen Symlink erstellt. Somit liegt die Datei nun ebenfalls in meinem Projekt im libs Ordner. Ihr könnt die Datei aber natürlich auch einfach manuell in euer Projekt kopieren.

• IntelliJ IDEA Website open_in_new
• GUI Designer Website open_in_new
• Gradle Website 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

GitHub ist in meinem Daily-Doing nicht mehr wegzudenken. Ich nutze es täglich im privaten und beruflichen Umfeld und entsprechend freue ich mich immer wieder über Neuerungen. Egal ob es um mehr kostenlose Features für jedermann geht oder aber um technischen Ausbauten der Plattform.
Derzeit freue ich mich über die neue Code Navigation die Stück für Stück auf GitHub verfügbar wird. CodeQL, Go, Java, JavaScript, PHP, Python, Ruby und TypeScript werden aktuell unterstützt. Sofern ein Repository diese Sprachen nutzt, könnt ihr wie aus eurer IDE gewohnt verschiedene Dinge, wie Klassen und Methoden, anklicken und schauen wo sie definiert oder genutzt werden.
Vor allem die Navigation in fremden Repositories dürfte damit um einiges einfacher werden, auch wenn wir hier natürlich noch nicht auf dem Level von z.B. IntelliJ Idea sind. Ich finde diese Erweiterung sehr sinnvoll und freue mich auf den Support von Dart und Kotlin. Falls ihr euch das Ganze mal anschauen wollt, könnt ihr es z.B. im Repository meines Image-Resizer Resizy open_in_new sehen.

• Navigating code on GitHub - Dokumentation open_in_new

Vor ca. einer Woche erschien Version 1.17 des Flutter Frameworks. Googles Cross Platform Lösung erfreut sich bei mir weiterhin großer Beliebtheit, auch wenn man hier und da natürlich den einen oder anderen Stolperstein aus dem Weg räumen muss.
Unter anderem dafür sind ja bekanntlich auch neue Framework Versionen gedacht. Das letzte Update bringt allem voran massive Verbesserungen für die Performance unter Android und iOS. Wobei iOS durch den nun gegebenen Metal Support hier mit Abstand am meisten zulegt hat. Zusätzlich wurde teils extrem am Speicherverbrauch geschraubt. Wir reden hier von einer Beschleunigung um bis zu 35 Prozent, während für bestimmte Probleme bis zu 70 Prozent weniger Ram benötigt wird.
Dieser Release basiert auf Dart 2.8 open_in_new, bringt einige neue Material Widgets mit sich und behebt Probleme mit den Popupmenüs, welche bei einem Long-Press auf Text anzeigt werden. Die neue Version aktualisiert außerdem die gegebenen Text Styles, sodass selbige mit den aktuellen Material Design Guidelines Konform sind. Weitere Verbesserungen gab es im Bereich der Accessibility und Internationalization, zwei Bereiche die durchaus wichtig sind und wo es auf jeden Fall noch Verbesserungsbedarf gab.
Darüber hinaus hat das Google Font Package open_in_new die Version 1.0 erreicht und das neue Animations Package open_in_new soll euch mit vorgefertigten und häufig genutzten Animationen Arbeit abnehmen. Auch diverse Entwickler-Tools wurden aktualisiert oder optimiert und diverse weitere Kleinigkeiten angepasst.
Ich arbeite bereits seit einer Woche mit der neuen Version und konnte bis dato keine Probleme feststellen, sodass ich zum jetzigen Zeitpunkt durchaus meine Empfehlung zur Durchführung des Updates aussprechen kann.

• News im Flutter Blog zum Thema open_in_new
• Flutter 1.17 Changelog open_in_new
• Flutter Website 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

Beim Programmieren ist es wichtig bestimmte Regeln einzuhalten, dabei geht es nicht nur darum das der Code kompiliert, sondern auch das er verständlich, übersichtlich und dadurch wartbar ist und auch bleibt. Diese Dinge erzielt man meist indem man sich an bestimmte Guidelines hält. Diese gibt es oft von den Entwicklern der Sprache selbst, von großen Organisationen oder aus anderen Quellen. Woran man sich konkret hält ist zwar Geschmackssache, aber man sollte auf jeden Fall einen konsistenten Pfad verfolgen.
Da wir aber alle nur Menschen sind, dadurch Dinge vergessen oder einfach übersehen, ist eine technische Hilfe durchaus willkommen. Lint Checker open_in_new helfen uns mit Warnings und teilweise bietet die dazu passende IDE sogar Autokorrekturfunktionen an. Im Flutter Kontext habe ich zuletzt die genannten Dinge kombiniert.
Ich habe mir das Pedantic Package open_in_new geschnappt, welches die Lint Regeln von Googles Dart / Flutter Entwicklern beinhaltet, selbige mit meinen privaten Projekten in Android Studio verknüpft und somit mit extrem wenig Aufwand, noch einmal diverse kleine Baustellen aus der Welt geschafft.
Das Package selbst wird wie gewohnt als Dependency eingebunden, meinem Fall aber im dev Bereich der pubspec.yaml Datei, da ich nur die Checks während der Entwicklung nutzen möchte.

dev_dependencies:
  pedantic: ^1.8.0

Neben eurer pubspec.yaml benötigt ihr eine weitere Datei. Falls noch nicht vorhanden erstellt die analysis_options.yaml im Root Verzeichnis eures Projektes und fügt die folgende Zeile ein.

include: package:pedantic/analysis_options.yaml

Ich führte anschließend noch einmal ein flutter pub get aus und schon flogen mir die Warnings nur so um die Ohren. So schlimm war es nicht, aber den einen oder anderen Tipp gab es dann doch noch für mich. Tatsächlich alle nachvollziehbar und mit wenigen Klicks via Android Studio Quick Fix behoben. Meiner Meinung nach ein einfacher Weg, um die Codequalität eines Projektes weiter zu heben. Alternativ gibt’s übrigens auch noch das Effective Dart Package open_in_new , welches direkt alle Regeln des Effective Dart Guides anwenden soll. Selbiges werde ich in der Zukunft auch noch ausprobieren.

• Pedantic Package open_in_new
• Effective Dart Guide open_in_new
• Customizing Static Analysis Guide open_in_new