17

Click here to load reader

API - Einführung Teil 3

Embed Size (px)

DESCRIPTION

Kursunterlagen für SAE Institut Zürich

Citation preview

Page 1: API - Einführung Teil 3

APIApplication Programming Interface

Einführung2. Tag

Page 2: API - Einführung Teil 3

API - Zusammenfassung

● Hauptthemen von gestern:● Überblick über verschiedene APIs● Interface-Typen (REST, SOAP)● Rückgabe-Typen (XML, JSON)● Lab: Experimente mit Google Maps API v2 und Javascript

● Kleine schlechte Nachricht zu Beginn: Das Google Maps API v2 wird durch v3 abgelöst

● Gute Nachricht: Alles wird besser und Ihr könnt Euch gleich mit dem brandneuen API beschäftigen

Page 3: API - Einführung Teil 3

API – Google Code Highlights

● Grosse Unterstützung für API-Benutzer und API-Entwickler

● API-Console mit Übersicht über registrierte APIs und Benutzungsstatistik (https://code.google.com/apis/console/)

● API-Console ist (vorläufig) nur für eine Handvoll APIs aktiviert

● Und natürlich der Code-Playground von gestern(http://code.google.com/apis/ajax/playground/)

Page 4: API - Einführung Teil 3

Noch einmal...

Es ist keine Werbung!

Aber Google hat für API-Interessierte tatsächlich eine Menge zu bieten...

Page 5: API - Einführung Teil 3

API – Asynchrones Laden

● API-Provider kann ein Problem haben, das Netzwerk kann langsam sein

● Synchrones Laden:<script src="http://meinScriptProvider"></script>

Lädt externes Script, wartet bis es geladen ist...

● Asynchrones Laden:function initialize() {

  // Jetzt geladene Objekte benutzen

}

  

function loadScript() {

  var script = document.createElement("script");

  script.type = "text/javascript";

  script.src = "http://meinScriptProvider&callback=initialize";

  document.body.appendChild(script);

}

window.onload = loadScript;

Erst wenn Seite geladen wird, Script geladen – Erst nach dem Callback beginnt die Action

Page 6: API - Einführung Teil 3

APIApplication Programming Interface

Und schon genug der Theorie...

Page 7: API - Einführung Teil 3

APIApplication Programming Interface

LAB

Page 8: API - Einführung Teil 3

API – Lab Google MAPS

● Wieder alles Javascript● Das ferne Ziel zu Beginn:

● Datenquelle im RSS-Format auslesen● Daten aufbereiten und auf eine Map darstellen

● Vorgehen:● RSS-Quelle mit einer API nach JSON konvertieren● JSON analysieren und relevante Felder auspicken● Diese Felder für die Darstellung der Map verwenden

Page 9: API - Einführung Teil 3

API – Lab Google MAPS

● Details: (Ein nicht ganz erfreuliches Thema)● RSS-Quelle: Erdbeben M>2.5 der letzten 7 Tage

(Öffentliche Daten vom USGS)● API-Provider zur Konvertierung von RSS nach JSON:

Blastcasta.com● Erhaltenes JSON-Objekt mit Firebug studieren● Das neue Google Maps API v3 (Doku)● Relevante Felder für die Marker auf Map: geo:lat und geo:long

● Zu jedem Marker interessante Metadaten in die „Sprachblase“ einfügen (Name, Ort, Link zu den Details)

Page 10: API - Einführung Teil 3

API – reCAPTCHA

● Eine weitere interessante und nützliche API von Google

● CAPTCHA: Eingabefeld mit schwer leserlichen Texte („Completely Automated Public Turing test to tell Computers and Humans Apart“)

● Um sicher zu gehen, dass der Benutzer ein Mensch ist und keine Maschine (Bot)

Page 11: API - Einführung Teil 3

API - reCAPTCHA

● Wieso „re“ ?● Geniale Idee:

● Google digitalisiert Bücher● Alte Drucke sind für Maschine schwer leserlich● Nicht erkannte Wörter werden in CAPTCHA eingebaut● Eines der beiden Wörter ist bekannt● User löst das „Rätsel“ und hilft so, Bücher digitalisieren● Deshalb Spruch „Stop Spam Read Books“● Weitere Details hier

Page 12: API - Einführung Teil 3

API – reCAPTCHA

● Dokumentation ist hier● Sub-API: Mailhide API

● Ein API, das Mail Adressen versteckt und bei Bedarf anzeigt (Nach Lösung des CAPTCHA)

● Customization: Doku dazu

Page 13: API - Einführung Teil 3

APIApplication Programming Interface

Wir wollen gleich sehen, wie das geht...

Page 14: API - Einführung Teil 3

API - reCAPTCHA

● Verkehr zwischen Server und API wasserdicht zu programmieren ist nicht einfach

● Das Rad nicht x-mal neu erfinden● Dafür gibts sogenannte Bibliotheken● Wir benutzen sogleich eine PHP-Bibliothek für

reCAPTCHA im kommenden Lab

Page 15: API - Einführung Teil 3

APIApplication Programming Interface

LAB

Page 16: API - Einführung Teil 3

API – Lab reCAPTCHA

● Diesmal mit PHP

● Vorgehen:● Grundlage: Tutorial von diesem Link● Keys von http://deo.li/captchakeys.html laden● Tutorial ist nicht komplett. Die Datei form.php findet

ihr hier: http://deo.li/form.php.txt

Page 17: API - Einführung Teil 3

APIApplication Programming Interface

E N D E