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. The latter are loaded from Wikimedia Toolforge for privacy reasons.
 * module de l'API Action de MediaWiki
 * API Geolocation



Processus pas à pas pour construire cette application


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.

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



Etape 2: créer une application Flask simple


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 : Dans cette application simple, nous utilisons la méthode  qui génère le modèle   du répertoire.

Puis exécutez votre application Flask avec la commande  et ouvrez   pour voir votre application dans le navigateur. 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. Ajoutez un élément de type bouton pour valider les données à rechercher dans le fichier HTML et reliez les balises pour charger une feuille de style externe et une autre interne. La feuille de style externe est dans ce cas l'URL d'un fichier CSS pour la fonte.

Remplacer le code existant dans  par :

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
D'abord, pour obtenir les pages wiki liées à votre voisinage, vous devrez disposer des coordonnées géographiques de là où vous vous trouvez. Pour faire cela, vous pouvez utiliser l'API Geolocation avec un peu de code JavaScript.

Si vous cliquez sur le bouton Cliquez ici pour chercher, l'application fait un appel à l'API Geolocation et récupère la position actuelle de votre appareil via l'objet  de l'API. La réponse renvoyée par l'API est un objet  à partir duquel vous pouvez obtenir la latitude et la longitude.

Note : Quand votre application réalise un appel à l'API, vous être notifié et on vous demande d'autoriser votre navigateur à accéder à votre emplacement.

Insérer le code suivant dans

Reliez le JavaScript personnalisé  et   à partir du fichier   :



Etape 4 : envoyer les coordonnées géographiques au serveur avec AJAX
Cette application utilise la méthode AJAX de jQuery pour envoyer les données de localisation obtenues à l'étape 3 au serveur et les POSTer sans rafraîchir la page vers une route Python Flask  dans.

Pour l'étape suivante, nous ajoutons un appel AJAX à la fonction  dans.

Note : A ce point, si vous essayez d'exécuter votre application, vous aurez probablement une erreur dans la fenêtre de votre navigateur parce que nous n'avons pas ajouté de support pour la route  pour de gérer nos requêtes POST.



Etape 5 : récupérer les lieux du voisinage avec l'API Action de MediaWiki
D'abord, étendez la route Python Flask  dans   pour gérer les requêtes POST. Vous pouvez faire cela en ajoutant à la fois GET et POST dans la liste des arguments de  du paramètre de route. Ensuite, vous pouvez obtenir les données de géolocalisation disponibles au format  à partir de l'objet   et les passer à la fonction   pour un traitement ultérieur.

Le code de la fonction  fait une requête   à l'API Action pour rechercher les pages du wiki à proximité d'un lieu. L'appel de l'API se fait avec le point d'accès  et les paramètres de la chaîne de requête. Voici quelques paramètres clés :


 * module principal pour demander les informations
 * des sous-modules du module de requête utilisé comme module générateur pour obtenir les résultats de recherche d'un ensemble de pages
 * indique les propriétés à renvoyer pour les pages

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

Voir le code complet de Python et Flask avec les directives import et la liste  traitée. Cette application utilise le paquet  disponible dans Python pour calculer la distance entre deux coordonnées géographiques.



Etape 6 : créer une interface utilisateur pour lister les lieux à partir de la réponse JSON
Gère les données JSON renvoyées par le serveur dans la procédure de rappel AJAX  et utilise la propriété DOM   du HTML pour modifier le contenu de.

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

 * Contribuez en enregistrant l'application de démonstration que vous avez réalisée utilisant l'API MediaWiki, dans ce dépôt d'exemples de code.



Voir aussi

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