Die multi-platforme Appentwicklung war bis vor Kurzem neu für mich, weshalb ich mich gerne mehr mit Ionic beschäftigen wollte. Daher kam mir die Idee, zu versuchen, meine native (iOS), gamifizierte Task Management App mit Ionic nachzubauen. Um mich besonders auf die neue Technologie fokussieren zu können, war mein erstes Ziel, die “nicht gamifizierte” Version der Task Management App nachzubauen.

Somit war mein Hauptprojekt für die Masterklasse Mobile im 1. Semester eine cross-platforme Task Management App. 

Screens und deren Features

User*innen können Tasks hinzufügen, anschauen, updaten und löschen (CRUD). Mithilfe einer Tabbar können User*innen zwischen den Pages “Home”, “Add Task” und “Calendar” wechseln.

Add Task

Der “Add Task” Screen erlaubt das Hinzufügen eines neuen Tasks. Dabei können die folgenden Eigenschaften festgelegt werden:

• Title (mandatory)
• Description 
• Due Date
• Importance 
• Category 
• Workload (Wie viel Aufwand ist dieser Task?)
• Images
• Links

Subtasks können erst im “Task Detail” Screen hinzugefügt werden, sobald der Task erstellt wurde.

Home

Der Homescreen zeigt eine Liste der Tasks. Diese Liste kann nach den folgenden Eigenschaften sortiert werden:

• Due Date
• Category
• Workload
• Importance

Zusätzlich lässt sich die Reihenfolge der Categories anpassen und der*die User*in kann festlegen, ob die Liste im Fall von “Workload” und “Importance” ab- oder aufsteigend sortiert werden soll.

Weiters sind die einzelnen Sections (z.B. eine Section pro Kategorie, sowie eine “done” Section für schon erledigte Tasks) collapsible, d.h. der Sectioninhalt lässt sich ein- und ausblenden.

Die App merkt sich all diese Einstellungen (nach welcher Eigenschaft zuletzt sortiert wurde, der “isOpen” Status der einzelnen Sections, die Reihenfolge der Categories, …) für eine gute User Experience.

Mit dem Klick auf eine Checkbox wird der zugehörige Task erledigt. Ein Task kann allerdings erst erledigt werden, wenn alle seine Subtasks schon abgeschlossen wurden (falls er Subtasks hat). Wie viele Subtasks schon erledigt wurden, ist durch einen Circular Progress Indicator ersichtlich.

Ein Klick auf einen Task bringt den*die User*in zum “Task Detail” Screen des ausgewählten Tasks.

Task Detail

Der “Task Detail” Screen zeigt die Eigenschaften eines Tasks und erlaubt es, Subtasks hinzuzufügen, zu löschen, zu sortieren, und abzuschließen. Auf diesem Screen kann der Task auch gelöscht werden.

Ein Klick auf das “Edit” Icon rechts oben in der Toolbar öffnet ein fullscreen Modal, auf welchem der Task bearbeitet werden kann. Hierfür wird die UI des “Add Task” Screens wiederverwendet. 

Calendar

Der “Calendar” Screen zeigt eine Kalenderübersicht der anstehenden Tasks an. Tage, an welchen Tasks fertigzustellen sind, sind im Kalender markiert (auf jeden Fall nicht ausgegraut, im Idealfall durch einen oder zwei Punkte markiert – mehr dazu später).

Ein Klick auf einen der markierten Tage öffnet ein kleines Modal, in welchem die Tasks für diesen Tag noch einmal aufgelistet sind, ähnlich wie am Homescreen.

Technologien

Wie schon erwähnt, wollte ich mein Know-how in der multi-platformen Appentwicklung erweitern. Deswegen habe ich mich für Ionic entschieden, in Kombination mit React und TypeScript. Mit React und TypeScript hatte ich schon ein wenig Vorerfahrung, und es gefällt mir sehr gut.

Challenges und Learnings

Ionic Components

Ich habe sehr viel über Ionic, Ionic UI Components und Ionicons gelernt, und ich finde es super, dass so viel zur Verfügung steht! Besonders gut gefällt mir zum Beispiel das IonModal, welches unterschiedliche Größen annehmen kann.

Ein weiteres Component, mit welchem ich mich viel herumgespielt habe, und welches mir auch ein paar Schwierigkeiten bereitet hat, ist IonDateTime. Dadurch, dass IonDateTime nur mit ISO Strings arbeitet, musste ich oft umdenken und Funktionen schreiben, welche die Daten so hin- und herschicken, dass sie immer passen und dass von der User*innen-Seite her alles so passiert, wie es sich logisch und intuitiv anfühlt.

Eine weitere Challenge hatte ich beim Styling der Kalendertage. Tage, an welchen Tasks zu erledigen sind, sollen mit Punkten markiert werden.

• 1 lila Punkt = 1 Task ist fällig und noch offen
• 2 lila Punkte = 2 oder mehr Tasks sind fällig und noch offen
• 1 helllila Punkt = 1 Task ist fällig, wurde aber schon erledigt
• 2 helllila Punkte = 2 oder mehr Tasks sind fällig, wurden aber schon erledigt
• 1 lila Punkt und 1 helllila Punkt = 1 oder mehr Tasks sind fällig und noch offen und 1 oder mehr Tasks sind fällig aber wurden schon erledigt

Mit viel TypeScript und CSS Zauberei habe ich das gewünschte Ergebnis erzielt. Allerdings werden die Punkte trotzdem nicht immer angezeigt – manchmal kommen sie erst nach einem Refresh. Wieso das passiert, ist mir immer noch nicht ganz klar, aber ich glaube nicht, dass ich im Rahmen dieses Projekts noch eine Antwort darauf finden werde.

Ionic Storage

Meine App speichert Daten nur lokal. Zuerst habe ich dies mit @capacitor/preferences implementiert, allerdings war mir klar, dass dies nicht die endgültige Lösung sein sollte. Somit machte ich mich auf die Suche nach einer Alternative und landete bei Ionic Storage, welches im Gegensatz zu Preferences auf Android und iOS auch von SQLite Gebrauch machen kann.

Beim Umstellen auf Ionic Storage fingen die Date properties der Tasks jedoch an, mir Probleme zu bereiten. Die Lösung war allerdings recht einfach – ich (de)serialisiere die Tasks, damit Dates nur als Strings in Ionic Storage gespeichert werden.

Building for Android and iOS

Die größte Challenge am Ende war es, die App für die Plattformen zu builden. Zuerst hatte ich ein Problem mit der Installation von Capacitor, and die commands ließen sich nicht ausführen, aber nach einigem Nachforschen und Herumprobieren konnte ich auch dieses Problem lösen.

Zusätzlich wurde mir dann auch bewusst, dass manche Elemente auf Android noch nicht so ganz schön aussahen wie auf iOS, und ich lernte, wie ich mit Ionic plattformabhängige Styles festlegen kann.

Weiters weiß ich jetzt, wie ich Appicons und Splashscreens für alle Plattformen generieren kann.

Mögliche Weiterentwicklungen

Ich würde gerne die App weiter ausbauen und die ganze gamifizierte App nachbauen. Der Vergleich zwischen der nativen und multi-platformen App würde mich auch sehr für meine Masterarbeit interessieren.

Conclusion

Im Allgemeinen bin ich sehr zufrieden mit meiner App, und wie ähnlich sie der nativen App ist. Ich bin stolz auf meine Lernfortschritte und auf das, was ich geleistet habe. Ich habe sehr viel gelernt und ich würde in Zukunft gerne weiter mit Ionic und React an dieser App, und auch eventuell an anderen Apps, arbeiten!