Im 3. Semester der Masterklasse Mobile habe ich mein Semesterprojekt TripSync vom vorhergien Semester erweitert. Dabei fokussierte ich mich auf die Funktionalität, gemeinsam Notizen schreiben zu können. Im Zuge dessen ist auch ein kleines Nebenprojekt mit Zusatzfeatures entstanden, das unabhängig von der App erlaubt, mit anderen Notizen zu schreiben.

Kurzer Rückblick

TripSync ist eine React Native App, die die Urlaubsplanung in Gruppen vereinfacht. Man kann bereits generelle Reiseinformationen festhalten und eine gemeinsame Packliste führen. Siehe dazu auch meinen vorherigen Blogeintrag: https://mobile.fhstp.ac.at/allgemein/projekt-tripsync/. Nun hat unter anderem noch der Screen mit den geteilten Notizen gefehlt, weshalb ich mich darauf fokussierte.

Vorgehensweise

Als erstes probierte ich aus, direkt in React Native geteilte Notizen zu implementieren, wobei ich hier gleich einmal scheiterte. Deshalb entschied ich mich dann dazu, das Ganze mit einer WebView und einem zusätzlichen Webprojekt umzusetzen.

Um die Technologien und ihr Zusammenspiel zu verstehen, folgte ich anfangs vor allem einem Tutorial (https://www.youtube.com/watch?v=gq2bbDmSokU) und setzte ein eigenes, unabhängiges Projekt auf. Im Endeffekt wurden nur Teile übernommen und vieles angepasst. Das ist aber auch der Grund, warum zwei Projekte entstanden sind. Einerseits die geteilten Notizen allein (mit eigener Authentifizierung und Backend) und andererseits die Version für TripSync (für Mobile und WebView optimiert und mit bestehendem Backend verknüpft).

Screens und deren Features

Tripsync – geteilte Notizen

Auf dem Notizen-Screen der App können Notizen zum aktuell im Profil ausgewählten Urlaub verfasst werden. Dabei gibt es eine Toolbar, die alle wichtigen Bearbeitungs- und Formatierungsmöglichkeiten beinhaltet:

• Rückgängig machen
• Wiederholen
• Rechtschreibprüfung ein-/ausschalten
• Formatvorlage
• Fett/Kursiv/Unterstrichen
• Schriftfarbe
• Textmarkierungsfarbe
• Formatierung zurücksetzen
• Ausrichtung
• Aufzählung
• Checkliste
• Bild einfügen
• Tabelle einfügen/bearbeiten

Die Toolbar befindet sich immer am oberen Rand des Screens, wodurch das Formatieren erleichtert wird. Viele der Bearbeitungsmöglichkeiten werden sofort auf den ausgewählten Text angewendet. Beim Tippen auf das Tabellen-Icon hingegen öffnet sich ein Bottom-Sheet, wo die Anzahl an Spalten und Zeilen für eine neue Tabelle festgelegt werden können. Befindet sich der Cursor in einer Tabelle, ändert sich das Tabellen-Icon und das Bottom-Sheet beinhaltet diverse Bearbeitungsmöglichkeiten, wie z.B. Spalte/Zeile einfügen oder löschen.

Unter der Toolbar sieht man, wer gerade online ist und an den Notizen arbeitet. Daneben befindet sich ein Icon, das angibt, ob die Notizen synchronisiert sind. Mittels Live-Cursor wird einem angezeigt, wo sich die anderen Personen befinden. Dieser ist basierend auf dem Namen der Person in einer speziellen Farbe eingefärbt.

Im Header gibt es außerdem die Möglichkeit, den Link zu dieser Notizen-Seite zu teilen oder zu kopieren, wodurch die Notizen auch im Browser geöffnet werden können. Hier gilt ebenso: Man muss sich anmelden und dem Urlaub angehören, um die Seite öffnen zu können. Die Funktionen sind dieselben wie in der App, nur kann man die Notizen hier zusätzlich auch drucken.

Geteilte Notizen extra

Das Nebenprojekt erinnert an Google Docs. Es lassen sich Notizen verwalten sowie Texte schreiben, bearbeiten und formatieren. Hierbei wurden weitere Technologien genutzt und zusätzlich andere Funktionen eingebaut (Verwaltung mehrerer Notizen, Kommentare, Benachrichtigungen, Erwähnungen und Einstellung der Schriftgröße).

Home

Generell kann die Web-Applikation nur verwendet werden, wenn man sich über Clerk angemeldet oder registriert hat. Der angemeldete Account wird dann oben rechts in der Ecke angezeigt. Daneben gibt es die Möglichkeit, die aktuelle Organisation auszuwählen oder eine neue zu erstellen. Auf der Home-Seite werden alle Notizen aufgelistet, die dieser Organisation zugeteilt sind. Man kann diese über das Drei-Punkte-Menü umbenennen oder löschen, oder über den Button eine neue Notiz erstellen. Erstellt man eine neue Notiz oder klickt auf eine vorhandene drauf, so gelangt man zur Detailseite.

Detail

Auf der Detailseite kann man zusammen mit anderen, die ebenso der Organisation angehören, Notizen schreiben. Links oben wird der Name der Notiz angezeigt, mit der Möglichkeit diese zu bearbeiten. Auf der rechten Seite sieht man die Avatare aller aktuell anwesenden Personen. Hinter dem Glocken-Icon verbergen sich die Benachrichtigungen, die einem mitteilen, wenn man wo erwähnt wurde. Die Toolbar beinhaltet dieselben Funktionen wie beim Projekt für TripSync, nur gibt es zusätzlich noch die Möglichkeit, die Schriftgröße zu ändern und Kommentare zu verfassen. Die Kommentare werden auf der rechten Seite des Screens angezeigt und man kann auf diese reagieren und antworten. Auch bei diesem Projekt werden einem die Positionen der anderen Personen mittels Live-Cursor angezeigt.

Technologien

Tripsync – geteilte Notizen

App:

• React Native WebView

Web:

• Next.js + React
• TipTap Editor
• Liveblocks für Realtime Collaboration
• Zustand für State Management
• Shadcn als UI-Library

Geteilte Notizen extra

• Next.js + React
• TipTap Editor
• Liveblocks für Realtime Collaboration
• Zustand für State Management
• Shadcn als UI-Library
• Convex als DB
• Clerk für Authentication

Challenges und Learnings

Anfangs wurde ich direkt mit dem Problem konfrontiert, dass es eine neuere Version der Expo SDK gab und mein Projekt nicht mehr mit der Expo Go App kompatibel war. Ich musste also diverse Packages des Projekts updaten und dann feststellen, dass es einen Versionskonflikt mit einer Library gab. Glücklicherweise wirkte sich das nicht kritisch auf das Projekt aus, sodass die Anwendung weiterhin einwandfrei funktionierte.

Die nächste Hürde war herauszufinden, wie ich generell geteilte Notizen in React Native umsetzen kann. Ich musste feststellen, dass das nicht so einfach geht, weshalb ich mich dann dazu entschied, eine WebView herzunehmen und ein neues Projekt aufzusetzen. Durch ein Tutorial bin ich dann auf TipTap Editor und Liveblocks gestoßen, die mir die Arbeit erheblich vereinfacht haben.

Schwieriger wurde es, als es an den Feinschliff ging. Dabei musste ich besonders darauf achten, dass die Namen der Personen jederzeit korrekt angezeigt werden (auch in den Erwähnungen und Benachrichtigungen). In Bezug auf die Authentifizierung musste ich auch das ein oder andere ausprobieren. Vor allem in Zusammenhang mit der WebView brauchte ich eine Lösung, den JWT-Token übergeben zu können, der dann weiterverwendet werden kann. Allgemein musste ich mir auch überlegen, wie ich das mit der Authentifizierung mache, sodass das Webprojekt einerseits in der App verwendet werden kann, aber auch als eigenes Projekt im Browser funktioniert. Je nachdem, wo man sich befindet, wird man nämlich zur Login-Seite der App oder des Webprojekts geleitet, wenn man nicht authentifiziert ist.

Außerdem musste ich feststellen, dass es auf mobilen Geräten nicht so trivial ist, ein Element wie die Toolbar in Kombination mit einem Editor dauerhaft am oberen Bildschirmrand zu fixieren. Eine klassische position: sticky-Lösung, bei der die Toolbar zunächst einem anderen Element folgt und erst beim Scrollen oben “andockt”, funktionierte in diesem Fall gar nicht. Letztlich konnte ich das Problem lösen, indem ich die Toolbar als erstes Element platzierte und die Postion bei Scroll- oder Sprungbewegungen dynamisch aktualisiert habe, sodass sie zuverlässig am oberen Rand angezeigt wird.

Fazit

Durch das Projekt konnte ich wertvolle Erfahrungen mit verschiedenen neuen Technologien sammeln. Besonders im Bereich Realtime Collaboration habe ich gemerkt, wie mächtig Liveblocks in Zusammenhang mit TipTap Editor ist. Auch Convex als Realtime-Datenbank sowie Clerk für die Authentifizierung habe ich zuvor noch nie genutzt, war jedoch positiv überrascht, wie unkompliziert sich beide Lösungen integrieren lassen. Insgesamt hat mir das Projekt gezeigt, wie sinnvoll und effizient es manchmal sein kann, auf vorhandene Libraries zurückzugreifen, anstatt jede Funktionalität von Grund auf selbst zu entwickeln.