API:Nearby places viewer/fr

Présentation
Dans ce tutoriel, vous apprendrez comment rechercher les pages wiki qui sont en rapport avec l'endroit géographique où vous vous trouvez en utilisant l'Api Action de MediaWiki. Télécharger le code de GitHub Voir l'application dans Toolforge Ce tutoriel vous montrera comment faire cela en utilisant :


 * environnement de travail Python et Flask
 * environnements de travail JavaScript, jQuery et Bootstrap
 * module de l'API Action de MediaWiki
 * API Geolocation

Etape 1 : installer l'environnement de développement Python et Flask
Pour configurer l'environnement de développement Python pour une application Flask, vous devez installer Python, créer un environnement virtuel et installer Flask.

Note : Cette application utilise Python3, qui est la version recommandée pour les nouveaux projets Python. En savoir plus sur les différences entre Python2 et Python3. Pour installer Python3 sur votre machine locale, suivez pas à pas les instructions de ces guides d'installation.

Voici comment configurer l'environnement de développement pour construire l'application :

Générer une page statique simple
Insérer le code suivant dans

Sauvegardez cette ligne unique de code  dans un fichier HTML à l'intérieur du répertoire   :

Note : In this simple application, we are using  method which renders the template named   from the   directory.

Next run your flask app with the command  and open   to view your app in the browser. Vous devriez voir l'Afficheur de voisinage dans la fenêtre de votre navigateur.

Mettre en forme votre application
Remettons en forme un peu l'application. Add a button element for accepting search input in the HTML file and link tags to load an external and internal stylesheet. External stylesheet, in this case, is the URL of a CSS file for a Google Font.

Replace the existing code in  with the following:

Insérer le code suivant dans

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

Etape 3 : obtenir les coordonnées de votre lieu actuel
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.

Note : 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.

Insérer le code suivant dans

Link the custom JavaScript  and   from the   file:

Etape 4 : envoyer les coordonnées géographiques au serveur avec 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.

Note : 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.

Etape 5 : récupérer les lieux du voisinage avec l'API Action de MediaWiki
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. API call consists of an endpoint  and query string parameters. Voici quelques paramètres clés :


 * module principal pour demander les informations
 * query module's submodule  used as a  generator module to get search results for a set of pages
 * indique les propriétés à renvoyer pour les pages

Note : Pour plus d'informations sur le module geosearch, voir.

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.

Etape 6 : créer une interface utilisateur pour lister les lieux à partir de la réponse JSON
Handle the returned JSON data from the server in AJAX's  callback and use HTML DOM   property to alter the   contents.

Afficher le code JavaScript complet avec la procédure de rappel AJAX avec succès.

Etape 7 : modification du style avec Bootstrap
Vous avez peut-être remarqué que l'extrait de code de l'Etape 6 utilise des noms de classe Bootstrap. Effectivement, nous intégrons l'environnement de développement Bootstrap à cette étape pour ajouter l'architecture d'un affichage dynamique à l'interface utilisateur des lieux. Pour faire cela, apportons quelques modifications supplémentaires aux fichiers CSS et HTML.

Afficher l'ensemble du code CSS et HTML.



Étapes suivantes

 * Des questions à propos de ce tutoriel ? Posez les sur Discourse.
 * Contribute a demo app that you have developed using the MediaWiki API to this code samples repository.

Voir aussi

 * Démarrage rapide de Twilio Python
 * tutoriels Flask
 * Nearby est une application pour la montre intelligente Pebble qui récupère les articles Wikipedia de votre voisinage.
 * Nearby est une application pour la montre intelligente Pebble qui récupère les articles Wikipedia de votre voisinage.