Sport bei LaIsa Polysport
case studies

PWA für LaIsa Polysport

Für die LaIsa Polysport entwickelte Code Crush eine PWA mit Unterrichtsunterlagen, Videos und vielem mehr für Leiterinnen und Leiter von Sportaktivitäten, Vereine, Schulen und das Bewegungs- und Sportprogramm des Amts für Volksschule und Sport des Kantons Graubünden.

pwa

Woocommerce

LaIsa Polysport hat 12 Jahre Erfahrungen in einem neuen Lehrmittel zusammengetragen. Darin befindet sich eine Erfolgsformel, verschiedene Trainingsinhalte, Sportlektionen und Informationen zu den Polysport-Games und zur Beratung respektive zum Coaching für Leitende, Vereine, Schulen & Kantone.

Der Auftrag für uns sah so aus, dass all diese Informationen des Lehrmittels in einer modernen progressiven Webapplikation (kurz PWA) zusammengetragen werden. Zudem sollte es möglich sein, die App in eine Premium- und eine Gratisversion zu unterteilen. Zusätzlich sollte die Webapplikation so aufgebaut werden, dass weitere potenzielle Kunden die Möglichkeit haben, ihre eigene Applikation zu kaufen.

Die PWA


Aufbau & Umsetzung der App

Die App wurde so programmiert, dass aus einer Code-Basis zwei verschiedene Produkte hervorgehen. Einerseits ist es die Basis für die LaIsa Polysport App, anderseits ist es die Basis für die App für den dazugehörigen Editionspartners 0712 (Sportprogramm des Kantons Graubünden).


Durch diesen Aufbau ist es uns möglich, alleinstehende Apps für zukünftige Editionspartner zu kreieren.

PWA für LaIsa Polysport: Screenshot aus der App

Die PWA wurde ähnlich wie eine native App, also eine App, die man im App Store oder im Google Play Store herunterladen kann, aufgebaut. Dies, um eine bestmögliche User-Experience bieten zu können.

Zudem erkennt die Web App auf welchem Gerät sie gerade aufgerufen wird und ob eine intakte Internetverbindung besteht. Dementsprechend werden unterschiedliche Systemmitteilungen angezeigt. Dies ist nicht nur für die Funktionalitäten der App wertvoll, sondern stütz wiederum die User-Experience.

PWA für LaIsa Polysport: Screenshots aus der App

Wie in den obigen Bildern ersichtlich ist, kann die App auf dem Smartphone installiert werden. Dadurch wird nicht nur eine Verknüpfung zu der PWA hergestellt, sondern auch der statische Inhalt der App wird heruntergeladen. Inhalte, die aus einer Datenbank stammen, werden hingegen dynamisch geladen. Wenn eine Seite aufgerufen wird, wird der Inhalt dieser Seite auf dem Gerät gespeichert. So ist der Inhalt auch offline verfügbar. Die App testet bei jedem Aufruf, ob es Neuerungen in der Datenbank gibt, falls ja, werden diese heruntergeladen und innerhalb der App aktualisiert.


Premiuminhalte


Eine Anforderung an die App war es, dass gewiss Inhalte nur in einer bezahlten Premiumversion verfügbar sind und andere auch in einer Gratisversion.

Wir haben dies so gelöst, dass die App für jeden Nutzer und jede Nutzerin frei verfügbar ist. Wenn der Inhalt, den er oder sie anschauen möchte, zum Premiuminhalt der App gehört, erscheint eine Meldung.

PWA für LaIsa Polysport: Wie die Premiuminhalte aussehen

Durch die Anmeldung in der App und das Eingeben des Produktschlüssels werden die erworbenen Lektionen freigeschaltet.

Das Spezielle am Produktschlüssel ist, dass dieser nur einmal eingesetzt werden kann und für jeden Nutzer und jede Nutzerin einmalig ist. So können wir vermeiden, dass die Produktschlüssel an weitere Personen weitergegeben werden.


Der Online-Shop

Online Shop für LaIsa Polysport: Screenshot

Automatisierungen

Beim Online-Shop haben wir viele verschiedene Arbeitsschritte automatisiert, um die Arbeit damit zu erleichtern. Im Shop gibt es neben den virtuellen Produkten (Produktschlüssel für die App) auch physische Produkte, die gekauft werden können. So werden zum Beispiel Bestellbestätigungsmails automatisch an das jeweilig bestellte Produkt angepasst.

Zusätzlich werden bei den Mails direkt die Produktschlüssel für die App generiert, so müssen keine Produktschlüssel manuell erstellt werden. Hinzu kommt, dass die Produktschlüssel direkt an den jeweiligen Nutzer respektive an die jeweilige Nutzerin gesendet werden. So wird dieser komplette Arbeitsschritt automatisch durchgeführt und abgeschlossen.

Zusammenfassung


Damit die PWA so funktioniert, wie sie heute funktioniert, mussten drei verschiedene Systeme aufgebaut werden:

  • die PWA selbst

  • die Datenbasis mit den Inhalten und Produktschlüssel

  • der Online-Shop



An dieser Stelle möchten wir uns bei LaIsa Polysport für unseren Einsatz und das Vertrauen bedanken und hoffen auf viele weitere Kundinnen und Kunden der LIP-App!


Die PWA und der Online-Shop sind seit August 2021 online.

Direkt zu: LIP App
Direkt zu: LIP Online-Shop

Was Isa und Ladina über uns sagen:

CodeCrush ist der perfekte Ansprechpartner für schnelle Webseiten und Web-Apps. Ein motiviertes, kompetentes Team, das uns mit Ihrem Wissen und weitsichtigem Denken unterstützt hat. Ein Kompliment auch an Samuel Rhyner und sein Team für die stets freundliche und geduldige Art. Wir sind sehr zufrieden mit der Programmierung unserer Web-App und Homepage und freuen uns auf eine weitere gute Zusammenarbeit.

Isa Rest & Ladina Ehrler-Scharplatz - Gründerinnen von LaIsa Polysport