API:Nearby places viewer/cs

Přehled
V tomto průvodci se naučíte, jak vyhledávat wiki stránky v okolí vaší polohy pomocí MediaWiki Action API. Stáhněte si kód z GitHubu Procházejte aplikaci na Toolforge Tento průvodce vás naučí, jak to udělat pomocí:


 * Frameworku Python a Flask
 * Frameworku 1, jQuery a Bootstrap. The latter are loaded from Wikimedia Toolforge for privacy reasons.
 * Modulu MediaWiki Action API
 * Geolokační API



Postup pro vytvoření této aplikace krok za krokem


Krok 1: Nastavení vývojového prostředí Python a Flask
Chcete-li nastavit vývojové prostředí Python pro aplikaci Flask, budete muset nainstalovat Python, vytvořit virtuální prostředí a nainstalovat Flask.

Zde je návod, jak nastavit vývojové prostředí pro tvorbu aplikace:



Krok 2: Vytvořte jednoduchou aplikaci Flask


Vytvoření jednoduché statické stránky
Vložte následující kód do

Přesuňte tento jeden řádek kódu  do souboru HTML do složky  :

Poznámka: V této jednoduché aplikaci používáme metodu, která vykreslí šablonu s názvem   z adresáře.

Poté spusťte aplikaci Flask pomocí příkazu  a otevřete , abyste si aplikaci zobrazili v prohlížeči. V okně prohlížeče byste měli vidět "Nearby places viewer" (prohlížeč míst v okolí).



Styl vaší aplikace
Pojďme udělat nějaký styl aplikace. Chcete-li načíst externí a interní šablonu stylů, přidejte prvek tlačítka pro přijetí vyhledávacího vstupu do souboru HTML a značky odkazů. Externí šablona stylů je v tomto případě adresa URL souboru CSS pro písmo.

Nahraďte stávající kód v  následujícím:

Vložte následující kód do



Rozvržení aplikace
$HOME/nearby-places-viewer ├── templates/ │  └── places.html ├── static/ │  └── static.css ├── nearby.py └── venv/



Krok 3: Získejte souřadnice vaší aktuální polohy
Chcete-li hledat wiki stránky v okolí, musíte nejprve získat souřadnice své aktuální polohy. K tomu můžete použít Geolocation API spolu s některým kódem JavaScript.

Když kliknete na tlačítko Click here to search (kliknutím sem vyhledáte), aplikace zavolá Geolocation API a načte aktuální polohu vašeho zařízení prostřednictvím objektu API. Odpověď API je na oplátku objektem, ze kterého můžete získat zeměpisnou šířku a délku.

Poznámka: Když vaše aplikace zavolá rozhraní API, budete upozorněni a požádáni o udělení povolení vašemu prohlížeči pro přístup k vaší poloze.

Vložte následující kód do

Propojte vlastní JavaScript  a   ze souboru  :



Krok 4: Odešlete data o poloze na server pomocí AJAXu
Tato aplikace používá metodu AJAX jQuery k odeslání údajů o poloze získaných v kroku 3 na server a POST bez obnovení stránky na trasu Python Flask  na.

Jako další krok přidáme volání AJAXu k funkci  v.

Poznámka: V tomto okamžiku, pokud se pokusíte spustit svou aplikaci, je pravděpodobné, že se v okně prohlížeče zobrazí chyba, protože jsme do trasy  nepřidali podporu pro zpracování požadavků POST.



Krok 5: Získejte místa v okolí přes MediaWiki Action API
Nejprve rozšiřte cestu Python Flask  na , aby zpracovávala požadavky POST. Můžete tak učinit přidáním GET i POST do seznamu argumentů  v dekorátoru trasy. Dále můžete získat údaje o poloze dostupné ve formátu  z objektu   a předat je funkci   k dalšímu zpracování.

Kód ve funkci  odešle   požadavek na Action API k vyhledání wiki stránek v blízkosti místa. Volání API se skládá z koncového bodu  a parametrů řetězce dotazu. Některé z klíčových parametrů jsou:


 * hlavní modul pro dotazování informací
 * submodul modulu dotazu  používaný jako zdrojový modul k získání výsledků vyhledávání pro sadu stránek
 * říká, které vlastnosti se mají pro stránky vrátit

Poznámka: Pro více informací o modulu geosearch navštivte stránku.

Prohlédněte si kompletní kód Python a Flask s příkazy importu a zpracovaným seznamem. Tato aplikace používá balíček  dostupný v Pythonu k výpočtu vzdálenosti mezi dvěma zeměpisnými souřadnicemi.



Krok 6: Vytvořte uživatelské rozhraní pro seznam míst z odpovědi JSONu
Zpracujte vrácená data JSONu ze serveru ve zpětném volání AJAXu  a použijte vlastnost HTML DOM   ke změně obsahu.

Zobrazte kompletní kód JavaScriptu pomocí zpětného volání AJAXu.



Krok 7: Změny stylu pomocí Bootstrapu
Možná jste si všimli, že fragment kódu v kroku 6 používá názvy tříd Bootstrap. Ano, v tomto kroku integrujeme rámec Bootstrap, abychom do uživatelského rozhraní Places UI přidali responzivní návrh rozvržení. Abychom tak učinili, udělejme několik dalších úprav v souborech CSS a HTML.

Zobrazit kompletní CSS a HTML kód.





Další kroky

 * Přispějte ukázkovou aplikací, kterou jste vyvinuli pomocí MediaWiki API, do tohoto [$url úložiště ukázek kódu].



Související odkazy

 * Výukové programy pro Flask
 * Nedaleko je aplikace pro chytré hodinky Pebble, která načítá články z Wikipedie ve vašem okolí.
 * Nedaleko je aplikace pro chytré hodinky Pebble, která načítá články z Wikipedie ve vašem okolí.