API:Yakındaki yerler görüntüleyici
Bu sayfa MediaWiki Eylem API'si belgelerinin bir parçasıdır. |
Genel bakış
Bu eğitimde, MediaWiki Eylem API'si kullanarak bulunduğunuz yere yakın viki sayfalarını nasıl arayacağınızı öğreneceksiniz.
Bu eğitim size bunu kullanarak nasıl yapacağınızı öğretecektir:
- Python ve Flask çerçevesi
- JavaScript, jQuery ve Bootstrap çerçevesi The latter are loaded from Wikimedia Toolforge for privacy reasons.
- MediaWiki Eylem API'nin Geosearch modülü
- Coğrafi konum API'si
Bu uygulamayı oluşturmak için adım adım bir süreç
1. 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.
Uygulamayı oluşturmak için geliştirme ortamının nasıl kurulacağı aşağıda açıklanmıştır:
$ mkdir nearby-places-viewer
$ cd nearby-places-viewer/
This will create a new directory and change into it
$ python3 --version #Python 3.6.5
This command checks your Python version
$ python3 -m venv venv
This command will create a virtual environment named 'venv'
$ source venv/bin/activate
This will activate the virtual environment
$ pip install Flask
This command will install the Flask package with all its dependencies
|
2. adım: Basit bir Flask uygulaması oluşturun
Basit bir statik sayfa oluşturun
Aşağıdaki kodu $HOME/nearby-places-viewer/nearby.py
içinde yerleştirin
#!/usr/bin/python3
"""
nearby.py
MediaWiki Action API Code Samples
Nearby places viewer app: Demo of geo search for wiki pages
near a location using the Geolocation API and MediaWiki Action
API's Geosearch module.
MIT license
"""
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
""" Displays the index page accessible at '/'
"""
return render_template('places.html')
if __name__ == '__main__':
app.run()
|
Bu <h1>Nearby places viewer</h1>
kod satırını bir HTML dosyasına templates
klasörünün içine bırakın: $HOME/nearby-places-viewer/templates/places.html
Not:
Bu basit uygulamada, templates
dizininden places.html
adlı şablonu oluşturan render_template
yöntemini kullanıyoruz.
Ardından python nearby.py
komutuyla Flask uygulamanızı çalıştırın ve uygulamanızı tarayıcıda görüntülemek için http://127.0.0.1:5000/
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ı, Amatic
yazı tipi için bir CSS dosyasının URL'sidir.
$HOME/nearby-places-viewer/templates/places.html
içindeki mevcut kodu aşağıdaki ile değiştirin:
<link rel="stylesheet" href="//tools-static.wmflabs.org/fontcdn/css?family=Amatic+SC:700">
<link rel="stylesheet" href="/static/style.css">
<h1>Nearby places viewer</h1>
<button>Click here to search</button>
Aşağıdaki kodu $HOME/nearby-places-viewer/static/style.css
içinde yerleştirin
h1 {
font-family: 'Amatic SC', cursive;
font-size: 2.5em;
font-weight: normal;
color: black;
}
button {
font-size: 16px;
padding: 10px 25px;
cursor: pointer;
text-decoration: none;
color: white;
border-radius: 4px;
background-color: #7c7ce0;
margin-bottom: 20px;
}
|
Uygulama düzeni
$HOME/nearby-places-viewer ├── templates/ │ └── places.html ├── static/ │ └── static.css ├── nearby.py └── venv/
3. adım: Mevcut konumunuzun koordinatlarını alın
İlk adım olarak, yakındaki viki sayfalarını aramak için mevcut konumunuzun koordinatlarını almanız gerekir. Bunu yapmak için, bazı JavaScript kodlarıyla birlikte Geolocation API'yi kullanabilirsiniz.
Click here to search düğmesini tıkladığınızda, uygulama Geolocation API'sini arar ve API'nin Navigator.geolocation
nesnesi aracılığıyla cihazınızın mevcut konumunu alır.
API'nin yanıtı, enlem ve boylamı elde edebileceğiniz Position
değerindeki bir nesnedir.
Not: Uygulamanız API'yi aradığında size bilgi verilir ve tarayıcınızın konumunuza erişmesine izin vermeniz istenir.
Aşağıdaki kodu $HOME/nearby-places-viewer/static/places.js
içinde yerleştirin
$( document ).ready(function() {
var x = document.getElementById( "places-list" );
$( 'button' ).click(function() {
getLocation();
});
function getLocation() {
x.innerHTML = "Searching your location..";
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(fetchPlaces);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function fetchPlaces(position) {
x.innerHTML = position.coords.latitude + "|" + position.coords.longitude;
}
});
HTML
dosyasındaki özel JavaScript /static/places.js
ve jQuery
bağlayın:
$HOME/nearby-places-viewer/templates/places.html
<!-- Add these two lines at the top -->
<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/static/places.js"></script>
<!-- Add this line after the button element -->
<div id="places-list"></div>
4. adım: Konum verilerini AJAX ile sunucuya gönderin
Bu uygulama, 3. adımda elde edilen konum verilerini sunucuya göndermek için jQuery'nin AJAX yöntemini kullanır ve sayfa yenilemeden POST'u $HOME/nearby-places-viewer/nearby.py
içinde /
Python Flask rotasına gönderir.
Bir sonraki adım olarak, fetchPlaces
işlevine $HOME/nearby-places-viewer/static/places.js
içindeki AJAX çağrısını ekleyelim.
Not:
Bu noktada, uygulamanızı çalıştırmayı denerseniz, gönderi isteklerini işlemek için /
yoluna destek eklemediğimiz için tarayıcı penceresinde bir hata görmeniz olasıdır.
function fetchPlaces(position) {
var data = {
"latitude": position.coords.latitude,
"longitude": position.coords.longitude
};
$.ajax({
url: "/",
type: "POST",
data: JSON.stringify(data),
contentType: "application/json",
dataType: "json",
success: function (response) {
x.innerHTML = "Success!";
},
error: function () {
x.innerHTML = "An error occurred while fetching places!";
}
});
}
5. adım: MediaWiki Eylem API'si aracılığıyla yakındaki yerleri getirin
İlk olarak, POST isteklerini işlemek için Python Flask rotasını /
olarak $HOME/nearby-places-viewer/nearby.py
içinde genişletin.
Bunu, rota dekoratöründeki methods
bağımsız değişken listesine hem GET hem de POST ekleyerek yapabilirsiniz.
Ardından, request
nesnesinden JSON
formatında mevcut olan konum verilerini alabilir ve daha sonraki işlemler için fetch_places_nearby()
işlevine iletebilirsiniz.
@app.route('/', methods=['GET', 'POST'])
def index():
""" Displays the index page accessible at '/'
"""
if request.method == "POST":
data = request.get_json()
latitude = data['latitude']
longitude = data['longitude']
results = fetch_places_nearby(latitude, longitude)
return jsonify(results=results)
return render_template('places.html')
fetch_places_nearby()
işlevindeki kod, bir konumun yakınındaki viki sayfalarını aramak için Eylem API'den GET
talebinde bulunur.
API çağrısı, https://en.wikipedia.org/w/api.php
bitiş noktası ve sorgu dizesi parametrelerinden oluşur.
Anahtar parametrelerden bazıları şunlardır:
action=query
bilgileri sorgulamak için ana modülgenerator=geosearch
sorgu modülünün alt modülülist
, bir sayfa kümesi için arama sonuçlarını almak üzere jeneratör modülü olarak kullanılırprop=coordinates|pageimages|description|info
sayfalar için hangi özelliklerin döndürüleceğini söyler
Not: geosearch modülü hakkında daha fazla bilgi için API:Geosearch sayfasına ziyaret edin.
def fetch_places_nearby(lat, lon):
params = {
"action": "query",
"prop": "coordinates|pageimages|description|info",
"inprop": "url",
"pithumbsize": 144,
"generator": "geosearch",
"ggsradius": 10000,
"ggslimit": 10,
"ggscoord": str(lat) + "|" + str(lon),
"format": "json",
}
res = SESSION.get(url=API_ENDPOINT, params=params)
data = res.json()
places = data['query'] and data['query']['pages']
# TODO: further process 'places' list
return places
İçe aktarma ifadeleri ve işlenmiş places
listesi ile eksiksiz Python ve Flask kodunu görüntüleyin.
Bu uygulama, iki coğrafi koordinat arasındaki mesafeyi hesaplamak için Python'da bulunan Haversine
paketini kullanır.
$HOME/nearby-places-viewer/nearby.py |
---|
#!/usr/bin/python3
"""
nearby.py
MediaWiki Action API Code Samples
Nearby places viewer app: Demo of geo search for wiki pages near a location using
the Geolocation API and MediaWiki Action API's Geosearch module.
MIT license
"""
from flask import Flask, request, render_template, jsonify
import requests
from haversine import haversine
APP = Flask(__name__)
SESSION = requests.Session()
API_ENDPOINT = 'https://en.wikipedia.org/w/api.php'
@APP.route('/', methods=['GET', 'POST'])
def index():
""" Displays the index page accessible at '/'
"""
if request.method == "POST":
data = request.get_json()
latitude = data['latitude']
longitude = data['longitude']
results = fetch_places_nearby(latitude, longitude)
return jsonify(results=results)
return render_template('places.html')
def fetch_places_nearby(lat, lon):
""" Fetches nearby places via MediaWiki Action API's Geosearch module
"""
params = {
"action": "query",
"prop": "coordinates|pageimages|description|info",
"inprop": "url",
"pithumbsize": 144,
"generator": "geosearch",
"ggsradius": 10000,
"ggslimit": 10,
"ggscoord": str(lat) + "|" + str(lon),
"format": "json",
}
res = SESSION.get(url=API_ENDPOINT, params=params)
data = res.json()
places = data['query'] and data['query']['pages']
results = []
for k in places:
title = places[k]['title']
description = places[k]['description'] if "description" in places[k] else ''
thumbnail = places[k]['thumbnail']['source'] if "thumbnail" in places[k] else ''
article_url = places[k]['fullurl']
cur_loc = (lat, lon)
place_loc = (places[k]['coordinates'][0]['lat'], places[k]['coordinates'][0]['lon'])
distance = round(haversine(cur_loc, place_loc, unit='mi'), 2)
results.append({
'title': title,
'description': description,
'thumbnail': thumbnail,
'articleUrl': article_url,
'distance': distance
})
return results
if __name__ == '__main__':
APP.run(debug=True)
|
6. adım: JSON yanıtından yerlerin listesi için bir kullanıcı arayüzü oluşturun
AJAX'ın success
geri aramasında sunucudan döndürülen JSON verilerini işleyin ve div
içeriğini değiştirmek için HTML DOM innerHTML
özelliğini kullanın.
success: function (response) {
var places = response["results"],
no_thumb = "..";
x.innerHTML = "";
for (var p in places) {
var thumbnail = places[p].thumbnail || no_thumb;
x.innerHTML += "<div class=\"item\"><div class=\"col-xs-8 no-padding\"><h5><a href=\"" +
places[p]["articleUrl"] + "\" target=\"_blank\">" +
places[p]["title"] + "</a></h5><p>" +
places[p]["description"] + "</p><span>📍" + places[p]["distance"] +
" miles</p></div><div class=\"col-xs-4 no-padding\"><img src=\"" +
thumbnail + " \"></div></div>";
}
}
AJAX başarılı geri arama ile eksiksiz JavaScript kodunu görüntüleyin.
$HOME/nearby-places-viewer/static/places.js |
---|
$( document ).ready(function() {
var x = document.getElementById( "places-list" );
$( ".btn-search" ).click(function() {
getLocation();
});
function getLocation() {
x.innerHTML = "Searching your location..";
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(fetchPlaces);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function fetchPlaces(position) {
var data = {
"latitude": position.coords.latitude,
"longitude": position.coords.longitude
};
$.ajax({
url: "/",
type: "POST",
data: JSON.stringify(data),
contentType: "application/json",
dataType: "json",
success: function (response) {
var places = response["results"],
no_thumb = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Gnome-image-missing.svg/200px-Gnome-image-missing.svg.png";
x.innerHTML = "";
for (var p in places) {
var thumbnail = places[p].thumbnail || no_thumb;
x.innerHTML += "<div class=\"item\"><div class=\"col-xs-8 no-padding\"><h5><a href=\"" +
places[p]["articleUrl"] + "\" target=\"_blank\">" +
places[p]["title"] + "</a></h5><p>" +
places[p]["description"] + "</p><span>📍" + places[p]["distance"] +
" miles</p></div><div class=\"col-xs-4 no-padding\"><img src=\"" +
thumbnail + " \"></div></div>";
}
},
error: function () { x.innerHTML = "An error occurred while fetching places!"; }
});
}
});
|
7. adım: Bootstrap ile stil değişiklikleri
6. adımdaki kod parçacığının Bootstrap sınıf adlarını kullandığını fark etmiş olabilirsiniz. Evet, Places kullanıcı arayüzüne duyarlı bir düzen tasarımı eklemek için bu adımda Bootstrap çerçevesini entegre ediyoruz. Bunu yapmak için, CSS ve HTML dosyalarında biraz daha ince ayar yapalım.
Tam CSS ve HTML kodunu görüntüleyin.
$HOME/nearby-places-viewer/static/style.css |
---|
.places-container .no-padding {
padding: 0;
}
.places-container .info {
text-align: center;
}
.places-container .viewer-heading {
font-family: 'Amatic SC', cursive;
font-size: 2.5em;
font-weight: normal;
color: black;
}
.places-container .btn-search {
font-size: 16px;
padding: 10px 25px;
cursor: pointer;
text-decoration: none;
color: white;
border-radius: 4px;
background-color: #7c7ce0;
}
.places-container .list {
margin-top: 20px;
}
.places-container .item {
min-height: 100px;
}
.places-container .item p,
span {
font-size: 12px;
margin: 2px;
}
.places-container .item span {
color: gray;
}
.places-container .item img {
float: right;
width: 80px;
height: 80px;
border-radius: 5px;
object-fit: cover;
}
.places-container .item a {
color: #7c7ce0;
}
|
$HOME/nearby-places-viewer/templates/places.html |
---|
<title>Nearby places viewer</title>
<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/static/places.js"></script>
<link rel="stylesheet" href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//tools-static.wmflabs.org/fontcdn/css?family=Amatic+SC:700">
<link rel="stylesheet" href="/static/style.css">
<div class="container places-container col-lg-4 col-xs-12">
<div class="col-xs-12 no-padding info">
<h1 class="viewer-heading">Nearby places viewer</h1>
<button class="btn-search">Click here to search</button>
</div>
<div class="col-xs-12 no-padding list" id="places-list">
</div>
</div>
|
Sonraki Adımlar
- MediaWiki API'sini kullanarak geliştirdiğiniz bir demo uygulamasını bu kod örnekleri deposuna katkıda bulunun.
Ayrıca bakınız
- API:Geosearch
- Flask eğitimleri
- Nearby, yakınınızdaki Wikipedia maddelerini getiren Pebble akıllı saat için bir uygulamadır.