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. The latter are loaded from Wikimedia Toolforge for privacy reasons.
 * -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.

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



Schritt 2: Eine einfache Flask-Anwendung erstellen


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 die Schriftart.

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
 * Submodul  des Abfrage-Moduls, genutzt als Generator-Modul, um Suchergebnisse für eine Reihe von Seiten zu erhalten
 * Gibt an, welche Eigenschaften für Seiten zurückgegeben werden sollen

Hinweis: Für weitere Informationen zum Geosuche-Modul besuche.

Sieh dir den vollständigen Python- und Flask-Code mit Import-Aussagen und verarbeiteter -Liste an. Diese App nutzt das in Python verfügbare -Paket, um Entfernungen zwischen zwei geografischen Koordinaten zu berechnen.



Schritt 6: Aus der JSON-Antwort eine Benutzeroberfläche für Listen von Orten erstellen
Behandle die vom Server zurückgegebenen JSON-Daten im AJAX- -Callback und nutze die HTML-DOM- -Eigenschaft, um die -Inhalte zu ändern.

Sieh dir den vollständigen JavaScript-Code mit erfolgreichem AJAX-Callback an.



Schritt 7: Gestaltung ändern mit Bootstrap
Du hast vielleicht bemerkt, dass der Code-Ausschnitt in Schritt 6 Namen von Bootstrap-Klassen nutzt. Ja, wir integrieren in diesem Schritt das Bootstrap-Framework, um ein responsoves Layout-Design zum Orte-UI hinzuzufügen. Lass uns CSS- und HTML-Dateien optimieren, um dies zu tun.

Sieh dir den vollständigen CSS- und HTML-Code an.





Nächste Schritte

 * Trage eine Demo-App, die du mithilfe der MediaWiki API entwickelt hast, zu dem Code-Beispiel-Repositorium bei.



Siehe auch

 * 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.