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. The latter are loaded from Wikimedia Toolforge for privacy reasons.
 * MediaWiki Eylem API'nin modülü
 * Coğrafi konum API'si

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:

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.

içindeki mevcut kodu aşağıdaki ile değiştirin:

Aşağıdaki kodu  içinde yerleştirin

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  nesnesi aracılığıyla cihazınızın mevcut konumunu alır. API'nin yanıtı, enlem ve boylamı elde edebileceğiniz  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  içinde yerleştirin

dosyasındaki özel JavaScript  ve   bağlayın:

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  içinde   Python Flask rotasına gönderir.

Bir sonraki adım olarak,  işlevine   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.

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   içinde genişletin. Bunu, rota dekoratöründeki  bağımsız değişken listesine hem GET hem de POST ekleyerek yapabilirsiniz. Ardından,  nesnesinden   formatında mevcut olan konum verilerini alabilir ve daha sonraki işlemler için   işlevine iletebilirsiniz.

işlevindeki kod, bir konumun yakınındaki viki sayfalarını aramak için Eylem API'den  talebinde bulunur. API çağrısı,  bitiş noktası ve sorgu dizesi parametrelerinden oluşur. Anahtar parametrelerden bazıları şunlardır:


 * bilgileri sorgulamak için ana modül
 * sorgu modülünün alt modülü, bir sayfa kümesi için arama sonuçlarını almak üzere jeneratör modülü olarak kullanılır
 * sayfalar için hangi özelliklerin döndürüleceğini söyler

Not: geosearch modülü hakkında daha fazla bilgi için sayfasına ziyaret edin.

İçe aktarma ifadeleri ve işlenmiş  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  paketini kullanır.

6. adım: JSON yanıtından yerlerin listesi için bir kullanıcı arayüzü oluşturun
AJAX'ın  geri aramasında sunucudan döndürülen JSON verilerini işleyin ve   içeriğini değiştirmek için HTML DOM   özelliğini kullanın.

AJAX başarılı geri arama ile eksiksiz JavaScript kodunu görüntüleyin.

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.



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

 * Flask eğitimleri
 * Nearby, yakınınızdaki Wikipedia maddelerini getiren Pebble akıllı saat için bir uygulamadır.
 * Nearby, yakınınızdaki Wikipedia maddelerini getiren Pebble akıllı saat için bir uygulamadır.