Summer of Dart: JSON via HTTP abrufen und in HTML ausgeben

Nach der letzten theoretischen Session ging es heute ans Coden. Eigentlich wollte ich mit der Facebook Authentifizierung beginnen. Aber da stieß ich an meine Verständnisgrenzen und da außer dem stackoverflow post wenig Infos zu Dart-Facebook gab, habe ich es weiter nach hinten geschoben. Stattdessen habe ich begonnen die Facebook-Graph-API zu bespielen.

Zum Start habe ich mir die Infos von Facebookgruppen angesehene. Man nimmt die ID der Gruppe, wirft sie gegen die Graph API und bekommt JSON mit den Infos zurück.
Bsp: http://graph.facebook.com/v1.0/229552893839458
{
"id": "229552893839458",
"name": "Uni Wien",
"description": "Inoffizielle Gruppe f\u00fcr alle Studierende und Lehrende der Uni Wien.\n\nInhalte rund ums Studieren sind erw\u00fcnscht. Werbung und Spam werden ohne Diskussion gel\u00f6scht.\n\nKontaktadressen aller Studienvertretungen: http://www.studienplattform.at\n\nCoverbild: CC-BY https://www.flickr.com/photos/univienna/9093430218",
"venue": {
"street": ""
},
"privacy": "OPEN",
"icon": "https://fbstatic-a.akamaihd.net/rsrc.php/v2/yt/r/_9rFHMj4DIY.png",
"updated_time": "2014-08-13T12:05:37+0000",
"email": "univienna\u0040groups.facebook.com"
}

Dieses JSON soll dann in ein Dart Objekt konvertiert werden, womit ich anschließend weiterarbeiten kann. Heute wollte ich es lediglich auf einer HTML-Seite ausgeben.

Als Vorlage diente mir das Fetch Data Dynamically Tutorial nachdem ich eine andere Anleitung wieder verwarf, weil mir der Dart Editor die Hälfte des Codes als überholt markierte.

Am längsten habe ich am Fehler „type ‚_LinkedHashMap‘ is not a subtype of type ‚List‚ of ‚info‘.“ gekaut. Das Problem war, dass ich nicht beachtet habe, dass das JSON im Beispiel eine Liste war (erkennbar durch []), aber Facebook mit Dictionaries bzw. Maps, wie sie in Dart heißen, arbeitet (erkennbar an {}). Nachdem ich das verstand konnte ich den Code entsprechend anpassen und alles funktionierte.

Den kompletten Code gibt es wieder als Github Gist:

Im HTML File braucht es einen Button mit der ID „load“ sowie ein Element (zBsp. pre) mit der ID „json_content“.

Das Error-Handling funktioniert noch nicht ideal. Im Screenshot kann man etwa sehen was passiert, wenn man die Internetverbindung abdreht. Erster Request normal (dann wird die Liste ausgegeben), zweiter und dritter Request ohne Verbindung. Hat im Moment aber keine Priorität.

Als nächstes möchte ich probieren, ob ich authentifizierte API Zugriffe über den httpRequest.send(“) Befehl machen kann und somit, ohne die Authentifizierung selbst implementiert zu haben, mit mehr Inhalten arbeiten kann, um unterschiedliche Funktionen des Projekts austesten zu können.