Michael Warda

Projekt: App-Entwicklung mit Web-Technologien lernen – Tag 3/4

—

von

Michael
in ,

Dies ist Teil 3 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 erste ToDo-App steht. Das Video-Tutorial brachte jedoch nur mäßig die Basics der App-Entwicklung mit Apache Cordova in Verbindung mit der Cloud-IDE Monaca und Onsen UI herüber, sodass ich zwar verstand, was ich tat, jedoch am Ende es sich eher wie ein Arbeitssieg anfühlte.

Einige Unwegsamkeiten kamen spontan hinzu, als eigentlich gut dokumentierte Funktionen anders funktionierten als im Tutorial angegeben. Hier scheint Cordova/Monaca einige „Besonderheiten“ zu besitzen. Meine Rechercheliste wuchs und wuchs.

Doch nun die spannende Frage: Was kommt nach der ToDo-App?

Auswahl des nächsten Projekts

Schon während der initialen Recherche war eine gut ausgebaute Tutorial-Sektion ein wichtiger Faktor, nach dem ich mein App-Framework ausgesucht habe. Onsen UI bietet hier zum Beispiel mehrere geschriebene Tutorials in seinem Blog-Bereich, sodass ich beim flüchtigen Lesen schon einige Inspiration für die weitere Ausbaustufen der App gesammelt habe.

Besonders die Pokédex-App schien interessant, weil sie einerseits auf dem Prinzip einer ToDo-App aufzusetzen schien und das Auslesen von REST-APIs behandelte – die perfekte Erweiterung also. Leider stellte sich nun heraus, dass dieses Tutorial nur dazu diente, die Angular2-Komponenten von Onsen UI vorzustellen und dementsprechend weit weg von meinem aktuellen Skillset befinden.

Als Inspiration für die nächste App erschien mir das Thema dennoch ideal, vor allem weil die verwendete PokeApi öffentlich zugänglich ist und somit man einen guten Spielplatz für GET-Anfragen erhält. Deswegen brach ich die Anforderungen an eine Pokédex-App herunter, um das Tutorial auf meinen JavaScript- und HTML-Level zu bringen:

  1. Verbindung zur PokeAPI herstellen
  2. Abfrage der PokeAPI für Namen, Standard-Sprite, Typ und Beschreibung von 151 Einträgen
  3. Anzeige der Namen, Standard-Sprite, Typ und Beschreibung in der App.
Das sieht ja vielversprechend aus.

Auf diese Weise heruntergebrochen bin ich in der Lage, entsprechende Dokumentationen und Tutorials zu suchen und in Monaca umzusetzen.

Auf der Suche nach der API

Als Tutorial für die API-Connection via JavaScript habe ich nach kurzer Suche „How to Connect to an API with JavaScript“ von Tania Rascia gefunden, das Schritt für Schritt durch den API-Implementierungsworkflow führt. So stelle ich mir ein gut geschriebenes Anfänger-Tutorial vor: Die Einstiegshürden sind klar umrissen und es gibt Ziele, die am Ende erreicht werden sollen, mit detaillierten Anweisungen dazwischen. 

Die im Tutorial verwendete Schnittstelle ist REST-basiert und sehr simpel; gerade weil die PokeAPI sehr komplexe Anfragen bietet, gehe ich davon aus, dass es dort einige Schwierigkeiten in der Adaption geben wird.

Mir ist direkt bewusst geworden, dass ich ab dem Kapitel „Displaying the Data“ auf ein Onsen-spezifisches Tutorial (oder die allgemeine Dokumentation) umschwenken muss. Meine Priorität an diesem Tag galt deswegen vor allem den Backend Handling der API.

Hallo, Bisasam.

Insgesamt zehn verschiedene Abfragen-Routen kennt die PokeAPI; mich interessiert jedoch nur der „Pokemon“-Endpunkt, der alle Eigenschaften eines Pokémons beinhaltet und somit das Kernstück meines Pokédex bilden soll. Neben den „Grundeigenschaften“ ließen sich noch viele weitere Charakteristika der Pokémon aus den verschiedensten Generationen der Spielereihe (ich bin mit Gold/Silber ausgestiegen) abfragen. Aber das ginge mir zu sehr in die Tiefe für eine erste Version. Stattdessen merke ich mir einfach, dass ich auch alle Fähigkeiten, Charaktereigenschaften, Farben, Formen, etc. nur einen API-Aufruf entfernt sind.

Mein erster Aufruf ist deswegen einfach nur:

var request = new XMLHttpRequest();
request.open('GET', 'https://pokeapi.co/api/v2/pokemon/', true);
request.send();

Viel passiert nicht. Aber das habe ich auch nicht erwartet. Immerhin fehlt noch die ganze Ausgabe. Also ergänze ich fix nach dem Tutorial folgendes Code für spontane Begeisterung:

request.onload = function () {
   Begin accessing JSON data here
var data = JSON.parse(this.response);

data.forEach(pokemon=> {
  console.log(pokemon.name);
});
  }
}

Aber es tut sich nichts in der Konsole. Stattdessen nur Fehlermeldungen, die mich nicht weiterbrachten: 

Uncaught TypeError: data.forEach is not a function
Uncaught TypeError: Cannot read property 'forEach' of undefined

Also begann an dieser Stelle eine sehr intensive Recherche, warum an dieser Stelle „data.forEach“ keine Funktion sei. Ich versuchte mehrere Umbauten und sprach verschiedene Endpunkte an, um den Unterschied zwischen der Tutorial-API und der PokeAPI zu erkennen. Für Tag 3 musste ich mich geschlagen geben.

Tatsächlich fiel mir am nächsten Tag mit frischem Kopf auf, dass die Tutorial-API einen String zurückgab, während die PokeAPI ein Array-Objekt lieferte. Ha! Erwischt. Mit einem kleinen Umbau („data = data.results;“) lief es nun.

Hallo Bisasam! Oder sollte ich sagen: Hello, Mr. Bulbasaur?

Wie geht es weiter?

Nun kann ich beginnen, die API-Daten direkt in die GUI zu injizieren – zumindest hoffe ich das. Dazu möchte ich jedoch nicht den etwas umständlichen Weg nehmen, der im Video-Tutorial verwendet wurde, sondern auf jQuery setzen, damit ich die Elemente leichter manipulieren kann. Anschließend werde ich versuchen, die weiteren benötigten Attribute aus der API zu holen: 

  • das Pokémon-Bild (pokemon.sprites)
  • der Elementar-Typ (pokemon.types)
  • die Beschreibung (wo ist sie?)

Eine Randnotiz: Monaca scheint aktuell ziemliche Performance-Probleme zu haben, die die Verbindung zwischen Cloud-IDE und meinem Smartphone sehr träge machen. Ich hoffe sehr, dass sich das für den nächsten Tage wieder legt.