API:Nearby places viewer/de

Überblick
In dieser Anleitung wirst du lernen, wie du mit der MediaWiki Action API nach Wiki-Seiten in deiner Nähe suchen kannst. Laden den Code von Github herunter Durchsuche die App auf Toolforge In diesem Lernprogramm lernst du, wie du dies tun kannst:


 * Python- und Flask-Framework
 * JavaScript-, jQuery und Bootstrap-Framework
 * -Modul der MediaWiki Action API
 * Geolocation-API

Eine Schritt-für-Schritt-Anleitung, um diese Anwendung zu erstellen:

Schritt 1: Python- und Flask-Entwicklungsumgebung aufsetzen
Um die Python-Entwicklungsumgebung für eine Flask-Anwendung aufzusetzen, musst du Python installieren, eine virtuelle Umgebung erstellen und Flask installieren.

Hinweis: Diese Anwendung nutzt Python3, die empfohlene Version für neue Python-Projekte. Lerne hier mehr über die Unterschiede zwischen Python2 und Python3. Um Python3 auf deiner lokalen Maschine zu installieren, befolge die Schritt-für-Schritt-Anleitung aus dem Installations-Leitfaden.

Die Entwicklungsumgebung, um die Anwendung aufzubauen, wird wie folgt aufgesetzt:

Eine einfache statische Seite rendern
Setze den folgenden Code in  ein

Setze die Code-Zeile  in eine HTML-Datei im Ordner   ein:

Hinweis: Bei dieser einfachen Anwendung nutzen wir die Methode, die die Vorlage mit dem Namen   aus dem Verzeichnis   rendert.

Führe als nächstes deine Flask-App mit dem Befehl  aus und öffne , um dir deine App im Browser anzusehen. Du solltest "Nearby places viewer" in deinem Browser-Fenster sehen können.

Gestalte deine App
Lass uns die App gestalten. Füge ein Schaltflächen-Element hinzu, um die Such-Eingabe in der HTML-Datei zu akzeptieren und verlinke Markierungen, um externe und interne Stylesheets zu laden. Externe Stylesheets sind in diesem Fall die URL einer CSS-Datei für einen Google-Font.

Ersetze den vorhandenen Code in  durch folgendes: Setze den folgenden Code in   ein

Anwendungslayout
$HOME/nearby-places-viewer ├── templates/ │  └── places.html ├── static/ │  └── static.css ├── nearby.py └── venv/

Schritt 3: Erhalte Koordinaten deines Aufenthaltsortes
Als erstes musst du die Koordinaten deines aktuellen Aufenthaltsortes erhalten, um nach Wiki-Seiten in der Nähe zu suchen. Um dies zu tun, kannst du die Geolocation-API zusammen mit JavaScript-Code nutzen.

Wenn du auf die Schaltfläche Click here to search klickst, ruft die App die Geolocation-API an und ruft den aktuellen Standort deines Gerätes über das -Objekt der API ab. Die Antwort der API ist ein -Objekt, aus dem du den Breitengrad und Längengrad erhalten kannst.

Hinweis: Wenn deine App die API anruft, wirst du benachrichtigt und gebeten, deinem Browser die Berechtigung zu erteilen, auf deinen Standort zuzugreifen.

Setze den folgenden Code in  ein Verlinke das benutzerdefinierte JavaScript   und   von der  -Datei:

Schritt 4: Sende Standortdaten an den Server mit AJAX
Diese App nutzt die AJAX-Methode von jQuery, um die in Schritt 3 erhaltenen Standort-Daten an den Server zu senden und sie ohne Neuladen der Seite an eine Python-Flask-Route  in   zu senden.

Lass uns als nächsten den AJAX-Anruf zur Funktion  in   hinzufügen.

Hinweis: Wenn du an diesem Punkt versuchst, deine App auszuführen, ist es wahrscheinlich, dass dir im Browser-Fenster ein Fehler angezeigt wird, da wir die Unterstützung der -Route, um mit POST-Abfragen umzugehen, noch nicht hinzugefügt haben.

Schritt 5: Nahegelegene Orte über die MediaWiki Action API erhalten
Erweitere als erstes die Python-Flask-Route  in , um POST-Abfragen zu nutzen. Du kannst dies tun, indem du GET und POST zur -Argumentliste im Route-Decorator hinzufügst. Du kannst als nächstes die in einem -Format verfügbaren Standort-Daten aus dem  -Objekt erhalten und es zur weiteren Verarbeitung an die  -Funktion übergeben. Der Code in der Funktion  stellt eine  -Abfrage an die Action API, um nach Wiki-Seiten in der Nähe eines Ortes zu suchen. Der API-Anruf besteht aus einem Endpunkt  und Parametern der Abfrage-Zeichenkette. Einige der Schlüsselparameter sind:


 * Hauptmodul zur Informationsabfrage
 * query module's submodule  used as a  generator module to get search results for a set of pages
 * tells which properties to return for pages

Hinweis: For more information on the geosearch module visit. View complete Python and Flask code with import statements and processed  list. This app uses  package available in Python to calculate distance between two geographic coordinates.

Step 6: Create a user interface for list of places from JSON response
Handle the returned JSON data from the server in AJAX's  callback and use HTML DOM   property to alter the   contents. View complete JavaScript code with AJAX success callback.

Step 7: Style changes with Bootstrap
You might have noticed that the code snippet in Step 6 uses Bootstrap class names. Yes, we are integrating the Bootstrap framework at this step to add a responsive layout design to the Places UI. To do so, let's make some more tweaks to CSS and HTML files.

View complete CSS and HTML code.



Nächste Schritte

 * Got questions about this tutorial? Ask here on Discourse.
 * Trage eine Demo-App, die du mithilfe der MediaWiki API entwickelt hast, zu dem Code-Beispiel-Repositorium bei.

Siehe auch

 * Twilio Python-Schnellstart
 * Flask-Anleitungen
 * Nearby ist eine App für die Pebble-Smartwatch, die Wikipedia-Artikel in deiner Nähe anzeigt.
 * Nearby ist eine App für die Pebble-Smartwatch, die Wikipedia-Artikel in deiner Nähe anzeigt.