Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Design & Code · Flipscore 🏀

Gestaltung und Umsetzung einer Single-View-App mittels SwiftUI.

SpaceDanielSalaw.png
SpaceDanielSalaw.pngSpaceDanielSalaw.png

Headline-01-Problematik.pngHeadline-01-Problematik.png

Flipscore-01-Hochschulsport.png
Flipscore-01-Hochschulsport.pngFlipscore-01-Hochschulsport.png

Im Rahmen des Hochschulsports spiele ich regelmäßig Basketball. Die Auswahl an Apps zum Zählen der Punkte ist recht groß, jedoch sind diese fast alle visuell lieblos gestaltet und im Querformat zu bedienen.

BrowserPreview_tmp.gif
BrowserPreview_tmp.gifBrowserPreview_tmp.gif

Ich würde eine solche App gern mit nur einer Hand bedienen können. 

Vor einiger Zeit hatte ich daher mal versucht eine Webapp zu basteln. Ihre Funktion war jedoch stark limitiert und ihre größte Schwäche der eingefrorene Timer nach dem Appwechsel oder Screenlock.

Flipscore-03-WebApp-Basketball.gif
Flipscore-03-WebApp-Basketball.gifFlipscore-03-WebApp-Basketball.gif

SpaceDanielSalaw.png
SpaceDanielSalaw.pngSpaceDanielSalaw.png

Headline-02-Ziele.png
Headline-02-Ziele.pngHeadline-02-Ziele.png

Flipscore-10-Teamfarben.png
Flipscore-10-Teamfarben.pngFlipscore-10-Teamfarben.png

Beim Hochschulsport teilen wir die Teams mit farbigen Trikots ein. So gibt es die Teams Gelb, Orange, Grün und Blau. Zusammen mit den oben aufgeführten Punkten habe ich mir folgende Ziele für die App gestellt:

→ Wählbare Teams (unsere Farben der Leibchen)

→ Spielhistorie des Abends

→ Portrait-Orientierung

→ Simple Handhabung

SpaceDanielSalaw.png
SpaceDanielSalaw.pngSpaceDanielSalaw.png

Headline-03-Umsetzung.png
Headline-03-Umsetzung.pngHeadline-03-Umsetzung.png

Flipscore-20-Features-Teams.gif
Flipscore-20-Features-Teams.gifFlipscore-20-Features-Teams.gif

Flipscore-21-Fallblattanzeige.gif
Flipscore-21-Fallblattanzeige.gifFlipscore-21-Fallblattanzeige.gif

Flipscore-22-Spielhistorie.gif
Flipscore-22-Spielhistorie.gifFlipscore-22-Spielhistorie.gif

Flipscore-25-CustomTime.gif
Flipscore-25-CustomTime.gifFlipscore-25-CustomTime.gif

Flipscore-24-Notification.gif
Flipscore-24-Notification.gifFlipscore-24-Notification.gif

Flipscore-23-dauerhafteDatenspeicherung.gif
Flipscore-23-dauerhafteDatenspeicherung.gifFlipscore-23-dauerhafteDatenspeicherung.gif

SpaceDanielSalaw.png
SpaceDanielSalaw.pngSpaceDanielSalaw.png

Headline-04-Huerden.png
Headline-04-Huerden.pngHeadline-04-Huerden.png

Flipscore-30-DoppelPunkt.png
Flipscore-30-DoppelPunkt.pngFlipscore-30-DoppelPunkt.png

Während bei der SF Pro der Doppelpunkt bei Uhrzeiten ein Stück nach oben korrigiert wird, geschieht dies bei der SF Mono leider nicht. Weder am Mac in Sketch, noch in der ausgeführten App am iPhone.

Der Workaround bestand in der Splittung des Countdowns in einen separaten Minuten- und Sekunden-String, sodass ich den Doppelpunkt in der Mitte händisch anheben konnte.

SpaceDanielSalaw.png
SpaceDanielSalaw.pngSpaceDanielSalaw.png

BrowserPreview_tmp-4.gif
BrowserPreview_tmp-4.gifBrowserPreview_tmp-4.gif

Eine weitere große Hürde bildet die Ausführung des Timers im Hintergrund. Während die Simulation in Xcode + der Simulator-App keine Unterbrechung aufwies, werden Hintergrundaufgaben die sich nicht auf Audio- und Standortabfragen beziehen auf dem physischen Gerät unterbunden.

Flipscore-33-HintergrundVerboten.png
Flipscore-33-HintergrundVerboten.pngFlipscore-33-HintergrundVerboten.png

Der Workaround sieht vor, dass beim Eintreten der App in den Hintergrund die Zeit des Ablaufs des Timers in den UserDefaults hinterlegt wird und beim Wiedereintreten in den Vordergrund der Timer mit der Differenz zu der hinterlegten Zeit geupdatet wird.

Gegenwertig erhalte ich nach einmaliger Ausführung jeden Tag zur Uhrzeit der letzten Ausführung eine Benachrichtigung auf dem Telefon, dass der Timer abgelaufen sei. Unabhängig davon, dass die App das letzte Mal vor einer Woche gestartet wurde. Sollte ich jenes Problem zusammen mit eins, zwei kleineren Bugs behoben haben, freue ich mich auf die Veröffentlichung in Apples Appstore.

SpaceDanielSalaw.png
SpaceDanielSalaw.pngSpaceDanielSalaw.png

Headline-05-NaechsteSchritte Copy.png
Headline-05-NaechsteSchritte Copy.pngHeadline-05-NaechsteSchritte Copy.png

Bereits vor der Flipscore App bin ich ein anderes Projekt angegangen. Ich habe mit der Gestaltung in Sketch gestartet und anschließend versucht in Swifts aktueller/alter Vorgehensweise Storyboard das Interface in Xcode zu bauen. Ich war recht schnell frustriert. Es gab keine korrekte visuelle Darstellung des UIs vor der Kompilierung und Ausführung im Simulator. 

Mit SwiftUI bekommt während des Codens eine Live-Preview seines Interfaces und kann seinen Sketch-Entwurf nahezu 1:1 übertragen. Das ist ein wirklich zufriedenstellendes Gefühl. Durch den Wegfall der Kompilierung und Ausführung kommt man hier sehr schnell voran. Wirklich phantastisch ist die interaktive Komponente der Live-Preview. Wenn man Gesten/Buttons/… geschrieben hat, kann man diese ebenfalls testen und ein Stück weit benutzen.

Die wahre Stärke von SwiftUI sehe ich daher im Prototyping. Man muss nicht über AfterEffects oder diverse andere Prototyping-Tools gehen, sondern kann direkt im Code Interaktionen und Animationen prototypen, ohne das Ergebnis noch einmal von Tool A auf Tool B übersetzen zu müssen.

Ich denke, dass SwiftUI noch ein wenig zu wachsen und von UiKit zu lernen hat, aber bereits heute ein vergleichsweise leicht zu lernendes Tool sein kann, um sich von anderen Gestaltern deutlich abzuheben.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Martin Lexow

Entstehungszeitraum

Sommersemester 2020

Keywords