Projekt: App-Entwicklung mit Web-Technologien lernen – Tag 1

Hier ist Teil 1 meines Projekts, mithilfe von Web-Technologien mich in die App-Entwicklung einzuarbeiten. Mehr Details, wie ich dies angehe und welche Rahmenbedingungen ich mir warum ausgesucht habe, findet ihr in der Einleitung.

Was bisher geschah

Meine Framework-Recherche brachte zwei potentielle Kandidaten hervor: Ionic und Onsen UI. Beide Frameworks versprachen mir schnelle Ergebnisse bei gleichzeitig geringer Einarbeitungszeit, weil sie die Technologien nutzen, die ich bereits kenne – HTML, CSS und (sehr eingerostet) JavaScript. Weil ich für Onsen UI einen kostenfreien Udemy-Kurs gefunden habe, der gleichzeitig eine IDE-Einrichtung beinhaltet, habe ich mich für die ersten Schritte gegen Ionic und für Onsen UI entschieden.

Der Start mit Onsen UI und Monaca

Der Start mit Onsen UI und seiner cloudbasierten IDE Monaca gelang schnell. Monaca-Account erstellt, eingeloggt, neues Projekt erstellt, fertig. Besonders genial finde ich das Live-Debugger-Feature, das sowohl im Browser als auch auf dem Smartphone funktioniert, ohne das die erstellte App übertragen werden muss – speichern genügt. Top. Und das alles „kostenlos“ mit ausreichendem Umfang.

Die Preisbedingungen von Monaca sind sehr fair. Das Sternchen bei „Free“ bedeutet nur, dass man explizit von „Pro“ auf „Free“ downgraden muss. (Screenshot: monaca.io)

Ziel des zweistündigen Videokurses ist das Erstellen einer einfachen To-Do-App, mit der die grundlegenden Use Cases einer solchen Applikation abgedeckt werden:

Anlegen von Aufgaben
Erledigen von Aufgaben
Löschen von Aufgaben
Filtern der Aufgaben nach Status
Fehlerbehandlung für nicht ausgeführte Aktionen

Dazu dann noch dieser Satz in der Kursbeschreibung:

This course is suitable for beginners, but understanding basic concepts of HTML5, JavaScript and CSS would be very helpful.
Bryan Ellis, Kursleiter bei Udemy

Klingt doch perfekt, oder?

Videokurs mit Einstiegshürde

Die ersten fünf Lektionen des Kurses beschäftigten sich damit, das Konzept hinter Onsen UI, Monaca und Apache Cordova zu erklären, boten also das nötige Hintergrundwissen, das ich mir allerdings bei der Recherche bereits angeeignet hatte.

Ab Lektion 6 ging es dann endlich um die Programmierung der App – und ich freute mich bereits, wie einfach der Code gestrickt sein muss, um ihn in einer Stunde und 30 Minuten schreiben und erklären zu können. Das wäre doch genau das Framework meiner Wahl!

Leider kam bald die Ernüchterung: Während der Onsen UI-Teil sehr interessant und durchdacht wirkte (typische App-Elemente als eigene Tags zu definieren und automatisch mit visuellen Funktionen zu hinterlegen ist genau das was ich suchte), verkam der gesamte Backend-Teil des Kurs zu einem einzigen Code-Abschreibe-Marathon. Hier war es auch nicht mehr mit den basic concepts of JavaScript getan. Ich war schlichtweg verloren und musste den Kurs mehrmals unterbrechen, um den Sinn von Code-Schnippseln zu recherchieren, die der Kursleiter in einem Nebensatz auch hätte erklären können.

Schnell wurden mir zwei Dinge klar:

meine JavaScript-Kenntnisse muss ich dringend aufpolieren.
Ich weiß wieder, warum ich Videotutorials nicht mag – sie gehen nicht auf mein Tempo ein.

Die Frage-und-Antworten-Sektion des Kurses wurde in den nachfolgenden Stunden zu meinem besten Freund.

Fazit des ersten Tages

Nach mehreren Debugger-Runden, die sowohl durch Tippfehler meinerseits als auch durch falschen Code des Kursleiters ausgelöst wurden, hatte ich zumindest am Ende des ersten Tages einen Teil der Use Cases bereits umgesetzt. Das Backend stand, die App konnte Aufgaben entgegennehmen und die UI stand. Ich war allerdings auch erst bei Lektion 10 von 12.

Trotz langwierigem Debuggen und console.log( ) Marathon konnte ich allerdings einen Fehler nicht beheben: der Aufgabenname wurde als {{label}} angezeigt, obwohl dieser Platzhalter eigentlich aufgelöst werden sollte. Wurde er aber nicht. Hier ein Video des aktuellen Stands meiner ersten App:

Wie geht’s weiter?

Am nächsten Tag werde ich versuchen, den Platzhalter-Fehler zu beheben und den Kurs abzuschließen. Außerdem werde ich dann noch einmal Themen sammeln, in die ich mich intensiver einarbeiten möchte, und die Frage beantworten, ob Onsen UI das richtige Framework für mich ist.