API:Nearby places viewer/de

Überblick
In this tutorial, you will learn how to search for wiki pages near your location using the MediaWiki Action API. Laden den Code von Github herunter Durchsuche die App auf Toolforge This tutorial will teach you how to do this using:


 * Python- und Flask-Framework
 * JavaScript, jQuery and Bootstrap framework
 * MediaWiki Action API's module
 * 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. You should be able to see "Nearby places viewer" in your browser window.

Gestalte deine App
Lass uns die App gestalten. Add a button element for accepting search input in the HTML file and link tags to load an external and internal stylesheet. 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/

Step 3: Obtain coordinates of your current location
As a first step, to search for wiki pages nearby, you will need to obtain coordinates of your current location. To do so, you can use the Geolocation API along with some JavaScript code.

When you click the Click here to search button, the app makes a call to the Geolocation API and retrieves the current position of your device via the API's  object. The API's response in return is a  object from which you can obtain the latitude and longitude.

Hinweis: When your app makes a call to the API you will be notified and asked to grant permission to your browser to access your location.

Setze den folgenden Code in  ein Link the custom JavaScript   and   from the   file:

Step 4: Send location data to the server with AJAX
This app uses jQuery's AJAX method to send the location data obtained in Step 3 to the server and POST it without page refresh to a Python Flask route  in.

As a next step, let's add AJAX call to the function  in.

Hinweis: At this point, if you try to run your app, it is likely that you will see an error in the browser window as we have not added support to the route  to handle post requests.

Step 5: Fetch nearby places via MediaWiki Action API
First, extend the Python Flask route  in   to handle POST requests. You can do so by adding both GET and POST in the  argument list in the route decorator. Next, you can obtain location data available in  format from the   object and pass it to   function for further processing. The code in the  function makes a   request to the Action API to search for wiki pages near a location. Der API-Anruf besteht aus einem Endpunkt  und Parametern der Abfrage-Zeichenkette. Einige der Schlüsselparameter sind:


 * main module to query information
 * 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.