API:Nearby places viewer/tr

Genel bakış
Bu eğitimde, MediaWiki Eylem API'si kullanarak bulunduğunuz yere yakın viki sayfalarını nasıl arayacağınızı öğreneceksiniz. Kodu GitHub'dan indirin Toolforge'da uygulamaya göz atın Bu eğitim size bunu kullanarak nasıl yapacağınızı öğretecektir:


 * Python ve Flask çerçevesi
 * JavaScript, jQuery ve Bootstrap çerçevesi
 * MediaWiki Eylem API'nin modülü
 * Coğrafi konum API'si

Bu uygulamayı oluşturmak için adım adım bir süreç:

== 1. A adım: Python ve Flask geliştirme ortamını ayarlayın ==

Bir Flask uygulaması için Python geliştirme ortamını kurmak için Python'u kurmanız, sanal bir ortam oluşturmanız ve Flask'ı kurmanız gerekir.

Not: Bu uygulama, yeni Python projeleri için önerilen sürüm olan Python3'ü kullanır. Python2 ve Python3 arasındaki farklar hakkında buradan daha fazla bilgi edinin. Python3'ü yerel makinenize kurmak için, bu kurulum kılavuzlarında adım adım talimatları izleyin.

Uygulamayı oluşturmak için geliştirme ortamının nasıl kurulacağı aşağıda açıklanmıştır:

Basit bir statik sayfa oluşturun
Aşağıdaki kodu  içinde yerleştirin

Bu  kod satırını bir HTML dosyasına   klasörünün içine bırakın:

Not: Bu basit uygulamada,  dizininden   adlı şablonu oluşturan   yöntemini kullanıyoruz.

Ardından  komutuyla Flask uygulamanızı çalıştırın ve uygulamanızı tarayıcıda görüntülemek için   açın. Tarayıcı pencerenizde "Nearby places viewer" görmeniz gerekir.

Uygulamanızı şekillendirin
Biraz uygulama stili yapalım. HTML dosyasında arama girişini kabul etmek için bir düğme öğesi ekleyin ve harici ve dahili bir stil sayfası yüklemek için etiketleri bağlayın. Bu durumda harici stil sayfası, bir Google Font  için bir CSS dosyasının URL'sidir.

Replace the existing code in  with the following: Place the following code in

Application layout
$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.

 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.

Place the following code in  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.

 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.

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. API call consists of an endpoint  and query string parameters. Some of the key parameters are:


 * 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

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



Sonraki Adımlar

 * Got questions about this tutorial? Ask here on Discourse.
 * Contribute a demo app that you have developed using the MediaWiki API to this code samples repository.

Ayrıca bakınız

 * Twilio Python quickstart
 * Flask tutorials
 * Nearby is an app for the Pebble smart watch that fetches Wikipedia articles near you.
 * Nearby is an app for the Pebble smart watch that fetches Wikipedia articles near you.