Planung & Technologien

Bereits im letzten Semester habe ich angefangen die App in NextJs zu entwickeln. Als Datenbank wird Firebase verwendet und zur Authentifizierung wird Next-Auth eingesetzt. Für das Deployment wurde ‘Vercel’ verwendet, zumal dies für NextJS Applikationen entwickelt wurde und auch sehr ‘straight-forward’ bezüglich der Einrichtung und Konfiguration ist. Für die End-2-End Tests wurde ‘Cypress’ verwendet. Außerdem habe ich mich im Zuge der Tests und des Deployment mit GitHub Workflows beschäftigt.

Umsetzung

Die Beta-Version von Muscle Hustle umfasst folgende Funktionen:

Registrierung / Login

Der User muss sich zuerst registrieren, um die App benutzen zu können. Die Notwenigkeit für diese Funktion ist ziemlich selbsterklärend. Für die Registrierung und den Login wird next-auth verwendet. In weiteren Schritten soll es auch ein Social-Login geben. Dies wird aber erst in ferner Zukunft umgesetzt werden.

Workouts

Der User kann beliebig viele Workouts erstellen, welche dann auf der Home-Seite angezeigt werden. Bei den Workouts kann ein Titel, eine Beschreibung, die Muskelgruppe, welche trainiert wird, und beliebig viele Übungen angegeben werden. Bei den Übungen können dann beliebig viele Sets hinzugefügt werden. Es besteht auch die Möglichkeit das erste Set als “Warm-up”-Set zu kennzeichnen. Bei den Sets können dann die kg und die Wiederholungen angegeben werden.

Bei den Workouts gibt es außerdem einen ‘Rest-Timer’, welcher für die Pausen zwischen den Sets gedacht ist. Wie lange der Rest-Timer läuft, kann jeder User individuell einstellen. (Per default sind es zwei Minuten.)

Exercises

Der User hat einerseits eine große Auswahl an bereits verfügbaren Übungen, welche von der App bereitgestellt werden. Andererseits hat der User die Möglichkeit eigene Übungen zu erstellen und auch diese bei den Workouts hinzuzufügen.

Disclaimer

In der Beta-Version werden die Beschreibungen und Bilder zu den Übungen laufend ergänzt und sind noch nicht vollständig.

Profil

Auf der Profil-Seite werden die Daten des Users, sowie die Einstellungen (Sprache und Dauer des Rest-Timers) angezeigt. Von hier aus gelangt der User zu den Einstellungen.

Einstellungen

Bei den Einstellungen hat der User die Möglichkeit seine Profil-Angaben zu ändern, den Account zu löschen, die Sprache der App zu ändern, die Dauer des Rest-Timers einzustellen und eine Bug-Report abzuschicken.

Der Bug-Report ist für die Verbesserung der App gedacht. Hier kann der User einen Fehler melden, welcher vielleicht auftritt, damit ich die App laufend anpassen und verbessern kann. Das Besondere an dem Report ist, dass beim Abschicken keine E-Mail oder dergleichen verschickt wird, sondern es wird in dem Github Repository von meiner App direkt ein Issue erstellt. Dies wurde über die Github API mit der Library ‘Octokit‘ umgesetzt.

const octokit = new Octokit({
  auth: 'YOUR-TOKEN'
})

await octokit.rest.issues.create({
    owner: "YOUR-OWNER",
    repo: "YOUR-REPO",
    title: "Issue Title",
    body: "Issue Body Text",
    labels: ['bug'],
    assignees: ['maxMustermann'],
})

Testing & Deployment

Wie bereits erwähnt wurde das Deployment mit Vercel umgesetzt. Zuerst wurde das Deployment automatisch angestoßen, wenn auf den jeweiligen Branch gepusht wurde (dev: Preview Deployment, main: Production Deployment). Im Zuge der End-2-End Tests habe ich mich Github Workflows auseinander gesetzt, zumal ich die Tests laufen lassen wollte, wenn auf den Branch gepusht wird. Nachdem das funktioniert hat, musste ich das Deployment auch anpassen, da es keinen Sinn ergibt, dass ich die Tests nach dem pushen laufen lasse und parallel direkt das Deployment läuft. Somit war der neue gewünscht Workflow: 1. pushen 2. Tests laufen lassen 3. wenn die Tests durchgelaufen sind, deployen, wenn nicht, dann nicht deployed

Dies wurde dann auch so umgesetz. Hierfür werden die sogenannte “Deploy Hooks” von Vercel verwendet und das automatische Deployment in der vercel.json deaktiviert. Beim Erstellen der Deploy Hooks muss man angeben für welchen Branch diese gebraucht werden und bekommt dann eine eindeutige URL. Bei der Github Action wird dann ein Post Request auf die jeweiligen URL geschickt, um das Deployment anzustoßen.

      - name: Deploy Staging
        if: github.ref == 'refs/heads/dev'
        run: curl -X POST 'YOUR-DEPLOY-HOOK-URL'

Herausforderungen

Obwohl ich am Anfang des Semesters dachte, dass mir das Deployment Probleme machen wird, ging das überraschend einfach und reibungslos. Die erste Herausforderung hatte ich als plötzlich nichts mehr funktioniert hat, was bisher schon reibungslos funktioniert hat (z.B. die Registrierung)… Nach etlichen Stunden Debugger und verzweifeln, bin ich irgendwann draufgekommen, dass es die .env Datei war… Es waren (warum auch immer) Beistriche nach den Variablen. Diesen Fehler werde ich nie wieder machen!

Weitere Herausforderungen kamen dann bei den End-2-End Tests, zumal ich mich damit noch nie beschäftigt habe und die ersten Schritte echt eine Herausforderung für mich waren. Als ich es dann geschafft habe zwei Tests zum Testen zu schreiben und manuell durchlaufen zu lassen, kam dann die Herausforderung ein GitHub workflow zu schreiben. Dies war auch nicht ganz einfach, da meine Recherche ergeben hat, dass es hundert verschiedene Varianten und Versionen gibt, wie ich den Workflow schreiben kann. Schlussendlich habe ich es dann geschafft und musste dann noch herausfinden, wie ich das Deployment nun auch über den workflow regeln kann.

Learnings

Mein Nummer Eins Learning ist definitiv: wenn aus heiterem Himmel nichts mehr funktioniert, schau ob in der .env Datei Beistriche sind. 😀

In dem Semester habe ich definitiv meine Fähigkeiten in NextJs verbessert, zumal ich auch endlich mich mit den globalen States auseinander gesetzt habe (was ich bis jetzt nicht verstanden/hinbekommen habe). Zusätzlich habe ich mich zum ersten Mal mit dem Deployment, mit End-2-End Tests und mit Github Workflows auseinandergesetzt und habe definitiv in diesen Bereichen einiges dazugelernt.

Beta-Version

Die Beta-Version ist unter folgenden Link erreichbar: MuscleHustle

Bitte beachten, dass die App eine PWA für mobile Geräte ist und die Beta-Version auch dafür optimiert ist. Die App sollte definitiv installiert werden, um das beste Ergebnis zu bekommen! (Am Laptop im Browser kann sie auch über die Smartphone-Simulation laufen.)

The post Muscle Hustle – Finale Version appeared first on Mobile USTP MKL.

Planung

Da die App schon fortgeschritten ist bezüglich ihrer Funktionsweisen, war der Plan, dass ich etwaige Bugs fixe, ein paar kleinere Funktionen noch einbaue und die App fertig mache, um die Beta-Phase rauszubringen und die App zu testen. Allerdings wurde dieser Plan im Laufe des Semesters um den Haufen geworfen. Der neue Plan war es dann die App auf einem neuen Technologie-Stack aufzusetzen. Wieso, weshalb, warum wird im Abschnitt „Technologie- Wechsel“ erläutert.

Entwicklungsphase 1.0

In der ersten Entwicklungsphase habe ich zuerst die groben Bugs, die unbedingt gefixed werden mussten, beseitigt und die App durchgehend getestet, um alle Bugs zu finden und zu fixen. Außerdem habe ich auch kleine Funktionen ergänzt, die noch gefehlt haben, wie zum Beispiel der „Plate Calculator“.

Bei dieser Funktion geht es darum, dass bei einer Übung die eine ‚Barbell‘ (Langhantel) verwendet, ausgerechnet wird, welche und wie viele Platten pro Seite verwendet werden müssen, um das gewünschte Gewicht zu erreichen. Um dies individueller zu machen, gibt es auch die Möglichkeit anzugeben, welche und wie viele Platten der User zur Verfügung hat. Zusätzlich muss/kann auch das Gewicht der ‚Barbell‘ angegeben werden, da dies auch in der Kalkulation berücksichtigt werden muss.

Ebenfalls in der ersten Entwicklungsphase habe ich die Funktionen, welche nicht für die Beta- Phase notwendig sind und auch noch nicht fertig sind, ‚ausgeblendet‘, um mich auf die wesentlichen Funktionen zu konzentrieren und nicht an den Funktionen hängen bleibe, da ich bis zum Ende des Semesters die Beta-Phase erreichen wollte.

Außerdem habe ich viel Refactoring betrieben, da teilweise viel Spagetti-Code vorhanden war oder Funktionen ausgelagert werden konnten, oder Funktionen generell entfernt werden konnten, etc.

Technologie-Wechsel

Wie bereits im Abschnitt „Planung“ erwähnt, habe ich meinen ursprünglichen Plan im Laufe des Semesters um den Haufen geworfen und die App mit einem neuen Technologie-Stack aufgesetzt. Dieser Plan ist daraus resultiert, da ich damals Ionic nur gewählt habe, weil wir es in der Masterklasse gelernt haben und ich so noch mehr dazulernen konnte. Allerdings wusste ich damals so gut wie nichts über das Framework und konnte demnach damals nicht sagen, ob die Technologie das Richtige für mich ist. Wie sich herausgestellt hat, war sie es nicht. Im Großen und Ganzen habe ich nichts gegen Ionic, aber es ist nicht das Framework, mit dem ich gerne arbeite und für meine App, welche ich auch nach dem Master weiterentwickeln will, verwenden will. Es hat lange gebraucht bis ich ein Framework gefunden habe, wo ich wirklich sagen kann, dass es Potential hat, mein ‚Go-To‘-Framework zu werden. Nun bin ich der Meinung, dass ich es gefunden habe und wollte deswegen meine App neu mit „NextJS“ aufsetzen.

Alter Technologie-Stack: NestJS, Ionic, MySQL, JWT

Neuer Technologie-Stack: NextJS, Firebase, NextAuth

Entwicklungsphase 2.0

In der zweiten Entwicklungsphase habe ich mal damit begonnen die Next-App aufzusetzen, Firebase einzurichten und in der App integrieren. Danach habe ich begonnen das Grunddesign zu implementieren und die ersten Seiten zu erstellen. Anschließend habe ich das Login und die Registrierung umgesetzt, mit Next-Auth und begonnen die ersten Funktionen einzubauen.

Da ich vor dem Technologie-Wechsel noch vor hatte zwei neue Funktionen einzubauen, habe ich, bevor ich die vorhandenen Funktionen weitereingebaut habe, begonnen diese zu entwickeln.
Zum einen war das die Mehrsprachigkeit, zumal die App ursprünglich nur Englisch war, aber ich auch Freunde habe, welche die App auch verwenden wollen und auch die Möglichkeit

haben wollen die App auf Deutsch zu verwenden. Die Logik hierbei ist, dass zuerst die Standardsprache, welche im Browser bzw. auf dem Gerät eingestellt ist, verwendet wird und wenn der User dann eingeloggt bzw. registriert ist, kann dann zwischen den Sprachen gewechselt werden.

Zum anderen wollte ich die Möglichkeit haben den Usern E-Mails zu schicken, was aber nicht nur „Marketing“-Gründe hat, sondern auch verwendet wird, um das Passwort zurückzusetzen, Bugs zu melden und generell Feedback zu geben.
Zu guter Letzt habe ich mir Zeit genommen, um den bereits vorhanden Code zu refactoren und die Struktur zu überarbeiten und anzupassen, damit ich nicht wieder das gleiche Problem habe, wie davor.

Herausforderungen

Eine Herausforderung war es die endlosen Zeilen an Code gescheit zu refactoren. Ich bin kein Fan davon zu früh den Code zu refactoren und „over engineering“ zu betreiben. Meistens schaue ich, dass die Funktion, welche ich gerade entwickle, im Großen und Ganzen funktioniert und dann Refactoring betreibe. Allerdings passiert es mir leider oft, dass ich dann zu enthusiastisch bin und gleich die nächste Funktion entwickeln will und somit dann das Refactoring immer mehr nach hinten verschoben wird.

Zusätzlich hatte ich einen innerlichen Kampf, ob ich wirklich neu beginnen soll, da ich somit wieder viele Schritte zurück gegangen bin in meinem Fortschritt. Allerdings habe ich eingesehen, dass es auf längere Sicht viel Sinn ergibt.
Zusätzlich sind auch Probleme mit Next-Auth aufgekommen, welche ich leider bis jetzt noch nicht lösen konnte. Der normale Login mit Benutzerdaten funktioniert, aber mit der Registrierung/Login über Google macht mir ein paar Probleme. Ein paar andere kleine Next- Probleme sind auch aufgetaucht, aber die konnten durch Recherche und mit bisschen Geduld behoben werden.

Meine Learnings

In diesem Semester bestehen meine Learning nicht so viel aus neuen technologischen Fähigkeiten, sondern eher aus Erkenntnissen über die Planung und das Vorausdenken bei Projekten.

Zum einen ist ein großes Learning, dass ich mit dem Refactor früher beginne, wobei ich das aber bei der zweiten Entwicklungsphase eh schon umgesetzt habe. Zusätzlich ist mir beim Neuaufsetzen aufgefallen, dass sich an der Struktur, egal ob Datenbank oder Generell, viel während dem Projekt geändert hat und somit viele Stellen angepasst werden mussten und demnach nicht die beste Lösung bzw. die beste Struktur für die App gegeben war. Aufgrund dessen ist ein weiteres Learning, dass der Anfang des Projektes wirklich wichtig ist und man sich genügend Zeit nehmen sollte das Konzept zu entwickeln und 0gut durchzudenken. Dies betrifft auch den Technologie-Stack, damit man nicht während des Projektes einen Technologie-Wechsel vornehmen muss.

So geht es weiter

Ich werde an der App weiterarbeiten, alle Funktionen einbauen und hoffentlich bis Herbst die Beta-Phase erreichen und das Live-Testing beginnen.

The post Muscle Hustle – Back To the Start appeared first on Mobile USTP MKL.

Jobbeschreibung

In der Jobbeschreibung wurde angegeben, dass die Masterklasse AVE im 2. Semester einen Animationsfilm erstellen wird und sie hierfür eine Website benötigen, welche den Projektverlauf dokumentiert und in Breakdown visualisiert. Hierfür werden von den Mitarbeiter und den Mitarbeiterinnen Bilder, Videos ,Renderings, etc. zur Verfügung gestellt.

Das Hauptkriterium, zur Erfüllung der Jobausschreibung, war es eine Website zu designen und zu programmieren, welche den Projektverlauf dokumentiert und visualisiert. Das Design der Website sollte dem Look des Animationsfilmes entsprechen.

Ein Nebenkriterium war es einen Vorher-Nachher-Slider einzubauen, um den Fortschritt und den Verlauf besser visuell darzustellen.

Umsetzung

Ich habe die Website mit WordPress umgesetzt, da dies die einfachste und schnellste Lösung war, um die Website umzusetzen. Zusätzlich hat die Website keine hohen technischen Anforderungen, weshalb sich WordPress gut dafür eignet.

Im ersten Schritt habe ich das Grundkonzept erstellt, wo die Farbpalette, die Schriften, die Sitemap, etc. definiert und dargestellt war. Im Weiteren habe ich nach einem passenden Template gesucht, welches zu dem Projekt und dem Theme passt.

Im zweiten Schritt habe ich das Template nach dem Grundkonzept angepasst und die verschiedenen Seiten angelegt. Danach habe ich die verschiedenen Areas erstellt und designed.

Im dritten Schritt habe ich ein paar Beiträge für die Making-Of-Seite erstellt, um ersten Content zum Testen zu kreieren und zweitens damit die Mitarbeiter und Mitarbeiterinnen des Animationsfilms ein Gefühl dafür bekommen, wie so ein Beitrag ausschauen kann. Zwischendurch habe ich ebenfalls immer wieder Anpassungen bei der mobile Version vorgenommen.

Nach Absprache mit meiner Kontaktperson habe ich noch Anpassungen gemacht, wie eine neue Kategorie hinzufügen, die Teams-Seite entfernen und das Team nur auf der Home-Seite darstellen, usw.. Danach habe ich noch an dem Layout und dem Design herum probiert und diverse Animationen eingebaut.

Die Website ist noch nicht fertig, da ich bis heute leider noch keinen Content von den Mitarbeitern und Mitarbeiterinnen bekommen habe und deswegen die Website nicht mit echten Content befüllen konnte.

Zukunftsaussichten

Ich habe die Absicht, dass ich die Website noch fertig stelle, sofern ich Material zur Befüllung zur Verfügung gestellt bekomme. Der weitere Plan ist dann, dass sie die Website auf eine eigene Domain geben.

The post Projektwebsite – Animationsfilm appeared first on Mobile USTP MKL.

Die Grundfunktionen stehen mal im Großen und Ganzen, wobei allerdings noch einiges an Error-Handeling fehlt. Das Design ist noch ganz am Anfang und braucht definitiv noch Arbeit.

Konzept

Das Konzept der App ist sehr simple gehalten. Der User kann ein ‘Tagebuch’ erstellen bzw. die Reise, der er/sie machen wird. Dort kann der Titel, eine Beschreibung, das Start- und Enddatum, das Land und ein Coverimage angegeben werden. Wenn der Trip erstellt ist, können Einträge erstellt werden. Hierzu muss der Trip von der Liste auswählt werden. Beim Eintrag kann man dann ebenfalls einen Titel vergeben, eine Beschreibung schreiben, das Datum, das Land und die Stadt angeben. Der Text wird mithilfe eines Rich-Editor erstellt, wo es verschiedene Einstellungen gibt, um den Text anzupassen. Überschriften, Schriftgröße und -farbe, Ausrichtung, Listen, etc.. Außerdem können auch direkt im Text Foto und Videos hinzugefügt werden. Es besteht aber auch außerhalb des Editors die Möglichkeit weitere Bilder hinzuzufügen.

Technologien

Für die Umsetzung dieser App habe ich mich für Flutter und Dart entschieden, zumal ich meine Fähigkeiten mit Flutter und mit der Programmiersprache Dart verbessern wollte und dies eine gute Gelegenheit war. Für die Datenbank habe ich mich für HiveDB entschieden, da diese auch offline funktioniert (was bei der App essentiell ist).

Lesson Learned

Ich habe bei der Umsetzung definitiv einiges gelernt, zumal alle verwendeten Technologien Neuland für mich waren. Die größten Probleme die ich bei der App hatte, waren zum Einen, dass Flutter bzw. Dart noch relativ jung sind und es nicht für alle Fehler bereits eine Lösung im Internet gibt und somit die Fehlerbehebung teilweise länger dauerte. Zum Anderen habe ich für das Projekt definitiv weniger Zeit eingeplant, als ich investiert habe. Ich habe unterschätzt, dass ich mich erst mit den neuen Technologien beschäftigen muss und somit mehr Zeit für die Umsetzung der Grundfunktionen gebraucht habe.

Zukunftsausblick

Wie man sieht, ist die App noch nicht fertig und wird im Sommer weiterentwickelt, damit meine Mutter die App im September verwenden kann. Ich bin gespannt, wie viel Zeit ich noch investieren muss, damit die App einwandfrei einsatzbereit ist. Auf jeden Fall habe ich gelernt, dass ich nicht unterschätzen sollte, wie viel Zeit eine App (auch wenn sie nur einen kleinen Funktionsumfang hat) zum Entwickeln braucht.

The post Travel Diary – SS22 appeared first on Mobile USTP MKL.

Dadurch, dass ich die App selber im Alltag nutzen möchte, habe ich die Möglichkeit ergriffen die Fitness-App im Sommersemester weiterzuentwickeln, zu verbessern und meinen Bedürfnissen anzupassen.

Technologien

Die App verwendet im Backend NestJS in Verbindung mit TypeORM und MySQL als Datenbank. Zusätzlich werden JSON Web Token für die Autorisierung und Authentifizierung verwendet. Im Frontend wird Ionic Angular verwendet.

Bisheriger Stand

Im Wintersemester wurden die Grundfunktionen umgesetzt. Unter Anderem konnte ein Workout erstellt werden, Übungen und Sets mit den jeweiligen Gewichten und Wiederholungen hinzugefügt werden. Das Workout konnte gestartet und die Sets als ‘erledigt’ markiert werden. Es gab eine Liste an Übungen mit der jeweiligen Kategorie und Muskelgruppe und es konnten eigene Übungen erstellt werden.

Design

Für das Design habe ich mir Hilfe von einer anderen Studentin im Zuge der Lehrveranstaltung ‘Tun, Forschen, Gründen’ geholt. Am Anfang des Semesters habe ich ihr meinen aktuellen Stand gezeigt, die Funktionen der App erklärt und ein Board erstellt, wo ich Farbpaletten und andere App-Design eingefügt habe, damit sie die Design-Richtung erkennt, in welche ich gehen wollte. Als erstes musste ich mich auf einen Namen festlegen, da sie für mich ein Logo gestaltet hat. Der Name der App wurde: Mustle Hustle. Ich bin wirklich sehr zufrieden mit dem Design und habe es auch Großteils bereits umgesetzt. Ein paar Kleinigkeiten fehlen noch oder müssen noch angepasst werden.

(Der Kalendar ist noch nicht an dem Design angepasst, da es ein Package ist und ich noch bisschen damit kämpfe.)

Neue Funktionen

Die neuen Funktionen, welche ich in diesem Semester entwickelt habe, sind unter Anderem:

• Ein Rest-Timer für die Pausen zwischen den Sets
• Die Übungen können durchsucht und nach Kategorie oder Muskelgruppe gefiltert werden
• Bei den Einstellungen kann die Zeit des Rest-Timer individuell angepasst werden.
• Ebenfalls bei den Einstellungen kann der Wirkout-Split (an welchem Tag, man welches Workout machen will) eingegeben werden.
• Der Workout-Split wird dann in einem Kalendar angezeigt. Wenn man allerdings doch nicht dazu kommt das geplante Workout zu machen, kann man es einfach überspringen oder auf den nächsten Tag verschieben. Der gesamte Kalendar passt sich dann daran an.
• Ebenfalls werden die Workouts, welche erfolgreich gemacht wurden, in dem Kalender angezeigt.
• …

Lesson Learned

Ich habe definitiv ein besseres Verständnis für NestJS und Ionic bekommen. Allerdings mehr für Ionic, zumal das Backend schon ziemlich fertig war und dort nicht mehr viel angepasst/verändert/hinzugefügt werden musste. Mein Problem dieses Semester war es, dass ich immer fünf Schritte vorausgedacht habe. Während ich dabei war eine Funktion umzusetzen und die Bugs zu fixen, kam mir gleich eine Idee für eine Erweiterung oder eine neue Funktion, welche ich dann direkt begonnen habe einzubauen. An einem gewissen Punkt hatte ich dann fünf angefangene, unfertige Funktionen und keine Zeit mehr alle ordentlich umzusetzen. Ich habe dann Prioritäten gesetzt und ein paar der Funktionen für die Zukunft geplant.

Zukunftsausblick

Ich habe definitiv vor, dass ich an der App weiterarbeite. Da mittlerweile die wichtigsten Funktionen eingebaut sind und auch ohne Bugs funktionieren, ist der nächste Schritt, dass ich das Design komplett fertig mache und dann geht es ans testen in der Praxis. Mein Plan ist es, dass ich spätestens im Herbst die App einwandfrei bei meinem Training verwenden kann. Wenn das der Fall ist, werde ich erst die nächsten Funktionen und Verbesserungen einbauen.

The post Fitness-App – SS22 (Muscle Hustle) appeared first on Mobile USTP MKL.

Heutzutage reicht es oft nicht mehr aus, die App für eine einzige Plattform zu programmieren, um erfolgreich zu sein. Am besten sollte die App auf allen Geräten und in allen Umgebungen verwendet werden können. Damit die Entwickler und Entwicklerinnen aber nicht den Code für jede Umgebung und für jedes Betriebssystem anpassen müssen, gibt es die Lösung von Cross-Plattform-Entwicklung, wie Flutter. 

Was ist Flutter?

“Flutter ist ein Software Development Kit für mobile Apps, mit dem sich leistungsstarke und realitätsnahe Apps für iOS und Android aus einer einzigen Codebasis erstellen lassen.”

— flutter.io

Flutter ist ein Open-Source-Framework von Google zur Entwicklung von Apps auf unterschiedlichen Plattformen aus einer einzigen Codebasis. Mit Flutter können Apps für Android- und iOS-Geräte entwickelt werden, aber auch Web-Apps oder native Anwendungen für Windows, Linux und MacOS. Die entwickelte App in Flutter kann somit mit einer einzigen Codebasis auf vielen verschiedenen Zielplattformen laufen, ohne dass Entwickler und Entwicklerinnen größere Anpassungen durchführen müssen. 

Die Apps, welche in Flutter, in der Programmiersprache Dart, entwickelt werden, sehen aus wie native Apps und verhalten sich auch wie jene. Dadurch, dass sie vor der Veröffentlichung für die jeweilige Plattform kompiliert werden, benötigen sie weder ein Runtime-Modul noch einen Browser. Laut Google fokussiert sich Flutter auf eine kurze Entwicklungszeit, schnelle Geschwindigkeit bei der Ausführung und ‚nativer User Experience‘. Flutter wird von Google selbst unter anderem für verschiedene Module des Google Assistant und für die Benutzeroberfläche des Google Home Hubs verwendet. 

Dash

Das Maskottchen von Flutter

Flutter SDK

Das Flutter Software-Development-Kit beinhaltet alle wichtigen Bibliotheken und Kommandozeilentool zur Entwicklung, hat aber jedoch keine eigene grafische IDE. Die Entwicklung kann in jedem beliebigen Texteditor gemacht werden, wobei die Entwickler Android Studio oder Visual Studio Code empfehlen. Flutter stellt passende Plug-Ins für die IDEs zur Verfügung, um die Bibliotheken einzubinden und Auto-Complete für die Syntax zu ermöglichen. 

Wofür wird Flutter eingesetzt?

Flutter wird hauptsächlich zur Entwicklung von Android- und iOS-Apps verwendet, wobei für die unterschiedlichen Systeme nur eine Codebasis geschrieben werden, muss. Die Apps werden vor der Veröffentlichung für die entsprechende Plattform kompiliert und laufen als native Apps auf den Endgeräten. Zugleich können aus der gleichen Codebasis auch native Desktop-Anwendungen für Windows, Linux und MacOS oder Web-Apps für den Browser erstellt werden. 

Flutter wird zum Beispiel von Google selbst, für verschiedene Module des Google Assistant, oder von, dem bekannten E-Commerce-Anbieter, eBay verwendet. 

Key Features von Flutter

Aufbau von Flutter

Im Generellen ist Flutter in Schichten konzipiert. Jede Ebene baut auf der vorherigen auf und ist erweiterbar. Die Schichten bestehen aus unabhängigen Bibliotheken, welche von der unteren Schicht abhängen. Um näher ins Detail einzugehen, werden die verschiedenen Schichten genauer beschrieben, wobei ganz oben, beim Dart-Framework, begonnen wird, dann kommt die Engine, welche von einem Embedder veraltet wird.

Framework

In der Regel interagieren die Entwickler und Entwicklerinnen mit Flutter über das Framework. Hier werden Organisations- und Technologieentwicklungen miteinander verbunden. Das Framework von Flutter ist in Dart geschrieben und beinhaltet eine Reihe an grundlegenden Bibliotheken, aber auch Plattform- und Layout-Bibliotheken.

Ganz unten befindet sich die grundlegende Basisklassen (‚Foundation‘), welche die Funktionen beinhaltet, die von allen anderen Schichten des Frameworks verwendet werden. Danach kommen die Block-Services wie Animation, Painting und Gestures, welche die Bausteine für die Implementierung von Animationen, für die Painting-API und für die Gestenerkennung. 

Die nächste Schicht ‚Rendering‘ ist der Flutter-Rendering-Baum und ist für den Umgang mit dem Layout zuständig. Mit dieser Schicht kann ein Baum von renderbaren Objekten aufgebaut werden. Die Objekte können dynamisch manipuliert werden, wobei der Rendering-Baum das Layout automatisch aktualisiert, um die Änderungen widerzuspiegeln. 

Die ‚Widget‘ Schicht ist das Flutter-Widget-Framework und hier wird das reaktive Programmiermodell eingeführt. Jedes Rendering-Objekt in der Rendering-Schicht hat eine entsprechende Klasse in der Widgets-Schicht.

Die Material- und Cupertino-Bibliotheken bieten eine Reihe an Steuerelementen. Die Bibliotheken verwenden die Kompositionsprimitive der Widget-Schicht, um die Material- oder iOS-Designsprachen zu implementieren. 

Engine

Die Engine von Flutter ist zum größten Teil in C++ geschrieben und unterstützt die Funktionalitäten, welche zur Unterstützung aller Flutter-Anwendungen erforderlich sind.  Die Engine stellt die Low-Level-Implementierung der Kern-API von Flutter bereit, inklusive Grafiken, Textlayout, Unterstützung für Barrierefreiheit, Plugin-Architektur, etc. 

Embedder

Für das Betriebssystem werden die Anwendungen von Flutter, wie jede andere native Anwendung verpackt. Der Embedder wird in einer Programmiersprache geschrieben, welche für die jeweilige Zielplattform geeignet ist und bietet einen Einstiegspunkt für die Anwendung. Zusätzlich kordiert er den Zugriff auf die Dienste und verwaltet. Die Nachrichten-Ereignisschleife. 

Programmiersprache von Flutter

Flutter verwendet die Programmiersprache Dart, welche ebenfalls von Google entwickelt wurde und 2013 veröffentlicht wurde. Dart soll eine moderne Alternative zu JavaScript sein und einige grundsätzliche Probleme lösen, welche -laut den Entwicklern von Dart- nicht durch eine Weiterentwicklung von JavaScript behoben werden können.

Dart ist ähnlich zu den Programmiersprachen Swift, C# und Java und ist, unteranderem deswegen, sehr einfach für Umsteiger zu lernen. Das Ziel der Entwickler ist es, dass Dart die produktivste Programmiersprache für die Cross-Plattform-Entwicklung wird. Laut den Herstellern liegt der Fokus hierbei auf kurze Entwicklungszeiten, schnelle Ausführungsgeschwindigkeit und ‘nativer User Experience’.

Widgets – Das Prinzip von Flutter

Bei Flutter lautet die Strategie „Alles ist ein Widget!“. Das Framework setzt sie objektorientierte Programmierung bis in die Benutzerfläche um. Eine Anwendung besteht aus verschiedenen Widgets, welche ineinander verschaltet sein können. Jeder Button, jeder Text, jeder Container, etc. ist ein Widget. Ein Widget beinhaltet die gesamte Logik, Interaktion und Darstellung innerhalb eines Objektes. Zusätzlich haben sie unterschiedliche Eigenschaften, welche sich verändern lassen, sie können sich gegenseitig beeinflussen und auf Statusänderungen reagieren. 

In Flutter gibt es bereits eine große Anzahl an vorgefertigten Widgets, welche die bekanntesten und am häufigsten benötigten Interaktionen abdecken, wie z.B. Buttons, Listen, Checkboxe, etc. und den Designvorgaben entsprechen und den jeweiligen Richtlinien der jeweiligen Zielplattform folgen. Die vorhandenen Widgets können erweitert bzw. verändert werden oder es können auch eigene Widgets erstellt werden, welche sich einfach mit den bereits Bestehenden kombinieren lassen.  

Vor- und Nachteile von Flutter

Jedes Software-Development-Kit und jede Programmiersprache hat sowohl Vorteile, als auch Nachteile. Ein paar der Vor- und Nachteile von Flutter sind hier dargestellt. 

Installation von Flutter

Um mit Flutter entwicklen zu können, wird das Flutter-SDK benötigt, welche kostenlos zur Verfügung steht. Zuerst muss das Software-Development-Kit für das jeweilige Betriebssystem installiert werden. Um während der Entwicklung auch die App simulieren zu können, muss dies auch eingerichtet werden. Wie bereits erwähnt gibt es keine eigne IDE für Flutter und somit kann dies frei entschieden werden. Dennoch bietet Flutter für Android-Studio und VSCode Plug-Ins, welche die Entwicklung vereinfachen.

Quellen

https://flutter.dev

https://de.wikipedia.org/wiki/Flutter_(Software)

https://de.wikipedia.org/wiki/Dart_(Programmiersprache)

https://dev.to/sudarasach/intro-to-flutter-2odk

https://www.ionos.de/digitalguide/websites/web-entwicklung/was-ist-flutter/

https://www.tenmedia.de/de/glossar/flutter

https://docs.flutter.dev/resources/architectural-overview

The post Flutter – Vorstellung des Frameworks appeared first on Mobile USTP MKL.

Deswegen habe ich die Möglichkeit des Semesterprojektes (WS21), der Masterklasse Mobile, genommen, um meine eigene Fitness-App zu programmieren, welche alle, für mich, essenzielle Funktionen enthält und ich in meinem Alltag verwenden kann. 

Konzept

Im Allgemeinen soll es eine Fitness-App werden für „Fortgeschrittene“. Für Menschen, die schon länger trainieren und eine App suchen, wo sie ihr Workout festhalten können, eigene Workouts und Übungen erstellen können, die Fortschritte verfolgen können, etc.  Die App ist für das Fitness-Studio ausgerichtet oder kann auch für Home-Workouts angewandt werden. Der Kern des Konzeptes ist, dass verschiedene Workouts für die verschiedenen Muskelgruppen erstellt werden können. 

Backend

Für die Umsetzung des Backends habe ich mich für NestJS entschieden in Verbindung mit TypeOrm und MySQL als Datenbank. Die Relations zwischen den Workouts, Exercises und Sets war am Anfang ein bisschen herausfordernd und hat ein paar Trail-and-Error Versuche benötigt. Die Logik wurde besser, wie die Bibliothek der vorgefertigten Übungen eine eigene Entity und in einer eigenen Datenbank-Tabelle gespeichert wurden. Die Autorisierung und Authentifizierung wurden mit JSON Web Token umgesetzt. 

Frontend

Für die Umsetzung des Frontends habe ich mich für Ionic Angular entschieden. Die Umsetzung wurde ebenfalls ein bisschen komplizierter, als zuvor gedacht, zumal es viele verschiedene Unterseiten gibt, welche Daten austauschen müssen. Der aktuelle Stand umfasst eine Übersichtsseite, welche die verschiedenen Workouts anzeigt und wo neue Workouts erstellt werden können, wobei sich hier eine neue Unterseite öffnet. Auf der Übersichtsseite öffnet sich bei Klick auf ein Workout die Details mit Übungen. Von dieser Detailseite aus können Aktionen, wie Start, Bearbeitung oder Löschung des Workouts, ausgeführt werden. Zusätzlich gibt es eine Übersichtsseite für die Übungen mit einem Button zur Erstellung von neuen Übungen. Bei der Übersicht wird zwischen den vorgefertigten Übungen und den angelegten von dem User unterschieden, wobei die eigenen Übungen bearbeitet und gelöscht werden können. 

Lesson Learned

Ich habe das Projekt allein durchgeführt und musste mich somit mit allen Teilen des Projektes intensiv auseinandersetzen. Dies hat Vor- und Nachteile, wobei hier für mich der große Vorteil, dass ich meine Kenntnisse im Back- und Frontend weiterentwickeln konnte, definitiv gewinnt. 

Für die Zukunft habe ich gelernt, dass ich mit viel mehr Zeit für das Konzept nehmen sollte und im Detail die Logik vor der Implementierung überlegen und durchspielen sollte, zumal hier einige Probleme aufkamen und ich öfters die Logik und Struktur deswegen ändern musste. 

Zukunftsausblick

Mir war am Anfang des Projekts schon klar, dass ich die App im nächsten Semester weiterentwickeln möchte, da ich die App irgendwann im Alltag verwenden will und mir bewusst war, dass dies nach einem Semester noch nicht möglich sein wird. Neben der Verfeinerung der bisherigen Funktionen habe ich vor noch einige andere essenzielle Funktionen einzubauen. Geplant ist eine Kalenderübersicht, eine Fortschrittsansicht des Workouts, ein Protein-Tracker, ein Rest-Timer und noch einiges mehr. So Stay Tuned! 

The post Fitness-App – WS21 appeared first on Mobile USTP MKL.