Mobile-Applikation realisieren

Mobile Apps haben eigene Regeln: wenig Platz, Bedienung mit dem Daumen, schwankendes Netz, begrenzter Akku und strenge Berechtigungen. Du planst Screens und Navigation für den mobilen Einsatz, setzt sie mit einem Cross-Platform-Framework oder nativ um und bindest Kamera, Standort oder Benachrichtigungen ein. Daten holst du von einer API und speicherst sie lokal, damit die App auch im Funkloch weiterläuft. Zum Schluss testest du auf echten Geräten und bereitest die Verteilung an Testpersonen vor.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Screens und Navigation für die mobile Nutzung planen

   Kompetenz A

   Du denkst vom Einsatzort her: Wer nutzt die App, mit welcher Hand, unter welchen Bedingungen? Daraus leitest du wenige, klar fokussierte Screens und eine einfache Navigation ab. Wichtige Aktionen liegen im Daumenbereich.

   Situation

   Ein Sanitärbetrieb in Winterthur will, dass Monteure auf der Baustelle Arbeitsrapporte per App erfassen, oft mit Handschuhen und in schlechtem Licht.

   Deine Aufgabe

   Entwirf die wichtigsten Screens und die Navigation.

   Gutes Ergebnis

   Vier Screens: Tagesaufträge, Auftragsdetail, Rapport erfassen, Fotos. Tab-Navigation unten, grosse Buttons mit mindestens 48 dp, hoher Kontrast. Der Hauptbutton 'Rapport abschliessen' sitzt unten rechts im Daumenbereich.

   Mobile FirstStack- und Tab-NavigationTouch-ZielePlattform-Richtlinien (Material, HIG)
2. 2

   Den passenden technischen Ansatz wählen und begründen

   Kompetenz A

   Du vergleichst native Entwicklung, Cross-Platform-Frameworks und Web-Apps (PWA) nach Kriterien wie Gerätezugriff, Teamwissen, Wartung und Kosten und triffst eine nachvollziehbare Entscheidung.

   Situation

   Eine Stiftung für betreutes Wohnen braucht eine App für 60 Betreuende, die Hälfte mit iPhone, die Hälfte mit Android. Das IT-Team kennt TypeScript und React.

   Deine Aufgabe

   Empfiehl einen Ansatz mit Begründung.

   Gutes Ergebnis

   React Native mit Expo: eine Codebasis für beide Plattformen, vorhandenes React-Wissen nutzbar, Kamera und Push über Expo-Module. Eine PWA wurde verworfen, weil Push-Benachrichtigungen auf älteren iPhones im Betrieb nicht zuverlässig sind.

   Native AppCross-PlatformPWAEntscheidungsmatrix
3. 3

   Responsive Oberflächen mit Komponenten und Zustand umsetzen

   Kompetenz B

   Du baust die Screens aus wiederverwendbaren Komponenten, verwaltest den Zustand sauber und sorgst dafür, dass Layouts auf kleinen und grossen Geräten, im Hoch- und Querformat und mit grösserer Schrift funktionieren.

   Situation

   Die Rapport-App bricht auf einem iPhone SE: Buttons verschwinden unter der Tastatur, und bei grosser Systemschrift überlappen sich Texte.

   Deine Aufgabe

   Mach die Erfassungsmaske auf allen Testgeräten bedienbar.

   Gutes Ergebnis

   ScrollView mit KeyboardAvoidingView, flexible Layouts statt fixer Höhen, Textgrössen über die Systemeinstellung skaliert. Getestet auf iPhone SE, Pixel 8 und einem Tablet.

   KomponenteState / PropsFlexboxSafe AreaDynamische Schriftgrösse
4. 4

   Kamera, Standort und Benachrichtigungen einbinden

   Kompetenz C

   Du nutzt Gerätefunktionen über die Schnittstellen des Frameworks, fragst Berechtigungen zum richtigen Zeitpunkt mit einer verständlichen Begründung an und reagierst sauber, wenn jemand ablehnt.

   Situation

   Ein Entsorgungsunternehmen im Kanton Aargau will, dass Fahrer überfüllte Sammelstellen mit Foto und Standort melden.

   Deine Aufgabe

   Baue die Meldefunktion inklusive Berechtigungen ein.

   Gutes Ergebnis

   Erst beim Tippen auf 'Meldung erfassen' fragt die App nach Kamera und Standort, mit kurzem Erklärungstext. Lehnt jemand den Standort ab, kann die Sammelstelle aus einer Liste gewählt werden. Fotos werden vor dem Upload auf 1600 px verkleinert.

   Berechtigung (Permission)Kamera-APIGeolocationPush-BenachrichtigungGraceful Degradation
5. 5

   Daten lokal speichern und mit dem Server synchronisieren

   Kompetenz D

   Die App holt Daten über eine API, speichert sie lokal und funktioniert auch ohne Verbindung weiter. Neue Einträge landen in einer Warteschlange und werden automatisch übertragen, sobald wieder Netz da ist.

   Situation

   Die Monteure arbeiten oft in Kellern ohne Empfang. Rapporte gehen verloren, wenn das Absenden fehlschlägt.

   Deine Aufgabe

   Sorge dafür, dass kein Rapport verloren geht.

   Gutes Ergebnis

   Rapporte werden zuerst in SQLite gespeichert und mit Status 'ausstehend' markiert. Ein Synchronisationsdienst sendet sie bei Netz mit eindeutiger ID, damit der Server Duplikate erkennt. Ein Symbol zeigt die Anzahl noch nicht übertragener Rapporte.

   Offline-FirstLokale DatenbankSync-QueueNetzwerkstatusKonfliktbehandlung
6. 6

   Die App auf echten Geräten testen und an Testpersonen verteilen

   Kompetenz E

   Du testest nicht nur im Emulator, sondern auf echten Geräten mit unterschiedlichen Bildschirmen und Betriebssystemversionen. Danach erstellst du einen Build und verteilst ihn über TestFlight, Google Play Internal Testing oder Expo an Testpersonen.

   Situation

   Vor dem Rollout bei 25 Monteuren will die Geschäftsleitung eine Pilotphase mit fünf Personen.

   Deine Aufgabe

   Bereite Testplan und Verteilung vor.

   Gutes Ergebnis

   Testplan mit 15 Szenarien, darunter Flugmodus, Kamera abgelehnt und App im Hintergrund. Builds über TestFlight und Google Play Internal Testing, Rückmeldungen über ein kurzes Formular. Zwei Fehler werden vor dem Rollout behoben.

   Emulator vs. GerätBuild / SignierungTestFlightInternal TestingCrash-Reporting

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Dario ist im 3. Lehrjahr als Informatiker Applikationsentwicklung bei der Valbau AG in Landquart, einer Bauunternehmung mit 180 Mitarbeitenden. Die Poliere schreiben ihre Tagesrapporte auf Papier und tippen sie abends im Büro ab, was pro Tag rund 45 Minuten kostet. Dario erhält den Auftrag, eine App zu entwickeln, mit der Rapporte direkt auf der Baustelle erfasst werden.

1. Kapitel 1

   Ein Morgen auf der Baustelle

   Dario begleitet einen Polier einen Vormittag lang auf eine Baustelle in Schiers. Er sieht, dass dieser mit Arbeitshandschuhen tippt, oft in grellem Sonnenlicht steht und das Handy meist mit einer Hand hält. Daraus leitet Dario grosse Schaltflächen, hohen Kontrast und Hauptaktionen im Daumenbereich ab. Er skizziert vier Screens, nämlich Baustellenliste, Rapport, Fotos und Senden, verbunden über eine Tab-Navigation.

   Ziel 1

2. Kapitel 2

   Flutter oder React Native?

   Die Firma setzt eine Mischung aus iPhones und robusten Android-Geräten ein, und das interne Team programmiert bereits in TypeScript. Dario vergleicht nativ, Flutter und React Native in einer gewichteten Entscheidungsmatrix mit Kriterien wie Gerätezugriff, Teamwissen und Wartungsaufwand. React Native mit Expo gewinnt mit 4.2 zu 3.6 Punkten vor Flutter, vor allem wegen des vorhandenen Know-hows. Kamera und Standort sind über Expo-Module abgedeckt, was er mit einem kleinen Spike bestätigt.

   Ziel 2

3. Kapitel 3

   Formular mit Handschuhen

   Dario lädt die Baustellenliste aus der bestehenden REST-API und ergänzt Pull-to-Refresh, Ladeanzeige und eine Fehlermeldung bei fehlendem Netz. Im Rapportformular verdeckt die Tastatur das Feld "Bemerkungen", und der Speichern-Button ist nicht mehr erreichbar. Mit KeyboardAvoidingView und einer ScrollView löst er das Problem. Ein Test mit grosser Systemschrift zeigt zudem abgeschnittene Labels, die er auf mehrere Zeilen umbrechen lässt.

   Ziel 3

4. Kapitel 4

   Fotos und Standort

   Mängel sollen mit Foto und Standort dokumentiert werden, doch die Originalfotos sind je 6 MB gross. Dario verkleinert sie vor dem Upload auf 1600 Pixel Breite und landet bei rund 400 KB pro Bild. Als ein Polier die Standortberechtigung ablehnt, stürzt die App ab. Dario fragt die Berechtigung jetzt erst beim ersten Foto mit einer kurzen Erklärung an und bietet bei Ablehnung eine manuelle Baustellenwahl an.

   Ziel 4

5. Kapitel 5

   Kein Netz im Tunnel

   Auf einer Tunnelbaustelle ohne Empfang geht der erste echte Rapport verloren. Dario speichert Rapporte nun in SQLite, legt sie in eine Warteschlange und überträgt sie automatisch, sobald wieder Netz da ist, jeweils mit einer eindeutigen ID gegen Doppelte. Seinen Testplan mit Flugmodus, App-Wechsel und Rotation arbeitet er auf vier Geräten ab und verteilt danach einen Build über TestFlight und Internal Testing an sechs Poliere. Ein Absturzbericht zeigt einen Fehler bei leerer Stundenliste, den er in Version 1.0.2 behebt.

   Ziel 5Ziel 6

1. 1

   Mobil denken

   ca. 4 Std.

   Du analysierst Nutzungssituationen und skizzierst eine App, bevor du ein Framework öffnest.

   • Drei Apps auf deinem Handy analysieren: Navigation, Daumenbereich, Berechtigungen
   • Für ein Szenario aus deinem Lehrbetrieb Wireframes in Figma erstellen
   • Eine Entscheidungsmatrix nativ, Cross-Platform und PWA ausfüllen

   Trainiert Kompetenz A1A2

   Lernziel12

2. 2

   Erste App lauffähig machen

   ca. 5 Std.

   Du richtest die Entwicklungsumgebung ein und bringst eine erste App mit Navigation auf dein eigenes Gerät.

   • Expo, Flutter oder Android Studio installieren und eine Beispiel-App starten
   • Stack- und Tab-Navigation mit drei Screens aufbauen
   • Die App über Expo Go oder USB-Debugging auf dem eigenen Handy testen

   Trainiert Kompetenz B1A1E1

   Lernziel31

3. 3

   Oberfläche und Daten

   ca. 5 Std.

   Du baust Listen und Formulare und holst Daten von einer API.

   • Eine Liste mit Pull-to-Refresh aus einer REST-API füllen
   • Ein Formular mit Validierung und Tastaturbehandlung bauen
   • Das Layout im Querformat und mit grosser Systemschrift prüfen

   Trainiert Kompetenz B2B3

   Lernziel3

4. 4

   Gerätefunktionen nutzen

   ca. 5 Std.

   Du bindest Kamera, Standort und Benachrichtigungen ein und gehst bewusst mit Berechtigungen um.

   • Ein Foto aufnehmen, verkleinern und hochladen
   • Den Standort abfragen und auf einer Karte anzeigen
   • Den Fall 'Berechtigung abgelehnt' für jede Funktion sauber behandeln

   Trainiert Kompetenz C1C2

   Lernziel4

5. 5

   Offline zuverlässig

   ca. 5 Std.

   Du machst die App robust gegen Funklöcher.

   • Daten lokal in SQLite oder AsyncStorage zwischenspeichern
   • Eine Warteschlange für ausstehende Einträge mit automatischer Übertragung bauen
   • Im Flugmodus Einträge erfassen und nach dem Einschalten die Synchronisation prüfen

   Trainiert Kompetenz D1D2

   Lernziel5

6. 6

   Testen und ausliefern

   ca. 4 Std.

   Du testest auf mehreren Geräten und verteilst einen Build an Testpersonen.

   • Einen Testplan mit Sonderfällen wie Flugmodus und App-Wechsel erstellen und abarbeiten
   • Einen signierten Build erzeugen und über TestFlight oder Internal Testing verteilen
   • Rückmeldungen von zwei Testpersonen einholen und umsetzen

   Trainiert Kompetenz E2E3

   Lernziel6

Native App

App, die mit den Werkzeugen und Sprachen einer Plattform entwickelt wird, z.B. Kotlin für Android oder Swift für iOS.

Cross-Platform

Entwicklungsansatz, bei dem eine Codebasis für mehrere Plattformen genutzt wird, z.B. React Native oder Flutter.

PWA

Progressive Web App: Webanwendung, die sich installieren lässt und teilweise offline funktioniert.

Permission

Erlaubnis der Benutzerin, dass die App auf eine Gerätefunktion wie Kamera oder Standort zugreifen darf.

Offline-First

Gestaltungsprinzip, bei dem die App lokal funktioniert und im Hintergrund synchronisiert.

Safe Area

Bildschirmbereich, der nicht von Notch, Statusleiste oder Home-Indikator verdeckt wird.

Build

Fertig paketierte, signierte Version der App, die auf Geräten installiert werden kann.

Passende Module