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

Hier ist Teil 2 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

Am ersten Tag lernte ich nicht nur das Onsen UI-Framework kennen, sondern auch seinen Zusammenhang mit der Cloud-IDE Monaca. Von Apache Cordova hingegen habe ich nicht viel mitbekommen.

Obwohl der Udemy-Kurs explizit an Anfänger mit minimalen Vorkenntnissen gerichtet war, war das Niveau und Tempo des Kurses hoch. Dank Onsen UI stand das User Interface schnell, im Backend lief es aber nicht rund.

Mehrere Bugs im Code verhinderten, dass ich am ersten Tag mit der App fertig wurde – trotz einer Netto-Videodauer von nur anderthalb Stunden. So habe ich zumindest das Debugging noch einmal aufgefrischt. Übrig bliebt das Problem, dass ein Platzhalter trotz replace-Funktion nicht funktionierte.

Debugging für Anfänger

Es blieb die Hoffnung, mit einem frischen Kopf dem Problem schneller auf die Schliche zu kommen. Tatsächlich aber war die Recherche, warum innerHTML.replace() in meinem Code nicht funktionierte, ergebnislos: Niemand hatte das Problem, dass die Funktion gar nicht auf die gesuchte Zeichenfolge ansprach. Auch der mehrmalige Vergleich mit dem Quellcode des Udemy-Kursleiters brachte keine neue Erkenntnis. Ich hatte alles so geschrieben, wie vorgegeben – also setzte ich mehrere console.log() an wichtige Punkte und führte so das Debugging fort.

Erst nach einer kurzen Weile kam ich auf die Idee, die zu ersetzenden Zeichenfolge im Script und Quelltext der Seite zu verändern, um die generelle Funktion zu testen. Und siehe da: es funktionierte!

Funktioniert nicht:

this.list.innerHTML = items.map(function(item){
       return document.querySelector('#todo-list-item').innerHTML
        .replace('{{label}}', item.label)
        .replace('{{checked}}', item.status === 'completed' ? 'checked' : '');
    }).join('');

Funktioniert:

this.list.innerHTML = items.map(function(item){
       return document.querySelector('#todo-list-item').innerHTML
        .replace('xxlabelxx', item.label)
        .replace('xxcheckedxx', item.status === 'completed' ? 'checked' : '');
    }).join('');

Warum replace() nicht mit geschweiften Klammern funktioniert? Keine Ahnung! Kommt aber auf die Recherche-Liste.

Der Durchbruch

Ab diesem Punkt wurde es einfach – oder besser gesagt: die Fehler wurden offensichtlicher. Denn Kursleiter Bryan machte sich gar nicht mehr die Mühe, den weiteren Quellcode mit mir durchzugehen. Statt also gemeinsam Zeile für Zeile zu schreiben (wie es bis zu diesem Zeitpunkt im Kurs gehandhabt wurde) sprang das Video einfach bis zu dem Moment, an dem die jeweilige Funktion komplett geschrieben wurde und wurde im nachhinein sehr schnell und flüchtig erklärt. Zur Erinnerung:

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

Kurs-Beschreibung

Nicht unbedingt, was ich als Anfänger-Tutorial verkaufen würde, wenn es explizit um wichtige Funktionen geht, die eine App erst nutzbar machen!

Aber trotzdem schaffte ich es, die App erfolgreich ohne weitere große Debugging-Runden abzutippen. Fertig ist die simple ToDo-App samt Filtermöglichkeit.

Wie geht es weiter?

Jetzt, wo ich das erste Tutorial abgeschlossen habe, ist es Zeit für eine Bestandsaufnahme: Was ist unklar geblieben? Wo muss ich mich noch tiefer einarbeiten? Die Liste ist relativ lang, denn das Tutorial ging nicht besonders in die Tiefe.

Eine Sache, die mir deutlich aufgefallen ist: Ich muss meine JavaScript-Kenntnisse auffrischen, vor allem die Grundlagen, die ich anscheinend beinahe komplett vergessen habe. 

Als nächstes Projekt wollte ich mir eigentlich die PokéDex-App vornehmen. Nachdem ich das dazugehörige Tutorial jedoch einmal überflogen habe, bin ich mir nicht mehr 100% sicher, ob dies mich zum Ziel führt: Statt JavaScript wird Angular als Skriptsprache benutzt und mich in zwei mehr oder weniger neue Sprachen einzuarbeiten könnte zu viel sein. Am Ende des zweiten Tags weiß ich jedoch zumindest, dass es Monaca eine ziemlich coole Testumgebung bereitstellt und der Ansatz mit Onsen UI nicht verkehrt ist.