Jak vytvořit svůj vlastní Instagram vyhledávač s jQuery a PHP

Od té doby, co Google zaváděl okamžité vyhledávací funkce, se stal populárním trendem ve web designu. Tam jsou některé zábavné příklady on-line, jako je Michael Hart aplikace Google Obrázky. Všechny tyto techniky jsou poměrně jednoduché, protože i webový vývojář s mírným zkušenostem jQuery může vyzvednout programovací rozhraní API a data JSON.

Pro tento tutoriál chci vysvětlit jak můžeme vytvořit podobnou webovou aplikaci pro rychlé vyhledávání. Namísto tahání obrázků z Googlu můžeme použít Instagram, který se ohromně rozrostl během několika málo let.

Tato sociální síť byla spuštěna jako mobilní aplikace pro systém iOS. Uživatelé mohou fotografovat a sdílet je se svými přáteli, zanechávat komentáře a nahrávat do sítí třetích stran, například Flickr. Tým nedávno získal Facebook a publikoval zcela novou aplikaci pro Android Market. Jejich userbase se ohromně rozrostla a nyní mohou vývojáři vytvářet úžasné mini-aplikace, stejně jako toto instasearch demo.

Zobrazit ukázku
Stáhněte si zdroj

Získání pověření API

Před vytvořením projektových souborů bychom se měli nejprve podívat na myšlenky systému Instagram API. Budete potřebovat účet pro přístup na vývojářský portál, který nabízí užitečné pokyny pro začátečníky. Vše, co potřebujeme k dotazu databáze Instagram je “ID klienta”.

V horním panelu nástrojů klepněte na odkaz Spravovat klienty a potom klikněte na zelené tlačítko “Zaregistrujte nového klienta”. Aplikace musí zadat název, krátký popis a adresu URL webu. Adresa URL a přesměrování URI mohou být v tomto případě stejné pouze proto, že nemusíme ověřit uživatele. Stačí vyplnit všechny hodnoty a vygenerovat nové detaily aplikace.

Zobrazí se dlouhý řetězec znaků s názvem ID KLIENTA. Tento klíč budeme potřebovat později při vytváření backendového skriptu, takže se vrátíme do této sekce. Prozatím můžeme začít stavět naši aplikaci pro vyhledávání jQuery.

Výchozí obsah webové stránky

Skutečné HTML je velmi tenké pro množství funkcí, které používáme. Protože většina obrazových dat je dynamicky připojena, potřebujeme uvnitř stránky pouze několik menších prvků. Tento kód se nachází uvnitř index.html soubor.

    Instagram Foto Instant Vyhledávání App s jQuery         Poznámka: Není povoleno žádné mezery ani interpunkční znaménka. Vyhledávání je omezeno na jedno klíčové slovo (1).

Používám nejnovější knihovnu jQuery 1.7.2 spolu se dvěma externími zdroji .css a .js. Pole pro vyhledávání vstupu nemá žádný vnější obal, protože nechceme formulář odesílat a způsobit opětovné načtení stránky. Ve vyhledávacím poli jsem zakázal několik stisknutí kláves, takže při zadávání uživatelů existují omezenější omezení.

Naplníme všechna fotografická data uvnitř ID střední části #fotky. Udržuje naše základní HTML čisté a snadno čitelné. Všechny ostatní interní HTML elementy budou přidány přes jQuery a také odstraněny před každým novým vyhledáváním.

Vytažení z API

Chtěl bych začít nejprve vytvořením dynamického PHP skriptu a pak přesunem do jQuery. Můj nový soubor je pojmenován instasearch.php který bude obsahovat všechny důležité háky backendu do API.

 První řádek označuje, že naše návratová data jsou formátována jako JSON místo prostého textu nebo HTML. To je nutné pro správné fungování funkcí JavaScriptu. Poté mám několik nastavení proměnných, které obsahují ID klienta aplikace, hodnotu pro vyhledávání uživatelů a konečnou adresu URL rozhraní API. Ujistěte se, že aktualizujete $ klient hodnotu řetězce, která odpovídá vaší vlastní aplikaci.
 Pro přístup k těmto datům URL musíme analyzovat obsah souboru nebo použít funkce cURL. Vlastní funkce get_curl () je jen malý kousek kódu, který kontroluje aktuální konfiguraci PHP.
 Pokud nemáte aktivovanou funkci cURL, pokusí se aktivovat funkci a vytáhnout data prostřednictvím vlastní knihovny funkcí. Jinak můžeme jednoduše použít file_get_contents (), který má tendenci být pomalejší, ale stále funguje stejně dobře. Pak můžeme tato data skutečně přetáhnout do proměnné:
 $ response = get_curl ($ api); 
 Uspořádání a vrácení dat
 Tuto původní odpověď od společnosti JSON jsme mohli vrátit z Instagramu se všemi načtenými informacemi. Ale je tu tolik extra dat a je to velmi nepříjemné, aby se smyčka přes všechno. Raději organizuji Ajax reakce a vytáhnu přesně ta data, která potřebujeme.
 Nejprve můžeme nastavit prázdné pole pro všechny obrázky. Pak uvnitř pro každého() smyčku vytáhneme datové objekty JSON po jednom. Potřebujeme pouze tři (3) specifické hodnoty, které jsou $ src(adresa URL plné velikosti), $ palec(URL obrázku miniatury) a $ url(jedinečná fotografie).
 $ images = pole (); if ($ response) foreach (json_decode ($ response) -> data jako položka $) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> link; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Ti, kdo nejsou obeznámeni s PHP smyčkami, se mohou v tomto procesu ztratit. Nezaměřujte se na tyto úryvky kódu, pokud nerozumíte syntaxi. Naše řada obrazů bude obsahovat nejvýše 16-20 unikátních záznamů pořízených z posledního data vydání. Poté můžeme tento kód na stránku odeslat jako odpověď jQuery Ajax.
 print_r (str_replace ('/', '/', json_encode ($ images))); zemřít(); 
 Ale teď, když jsme se podívali do zákulisí, můžeme skočit do skriptování frontendu. Vytvořil jsem soubor ajax.js který obsahuje pár obsluh událostí vázaných na vyhledávací pole. Pokud jste stále až do teď, pak se nadšeni, že jsme tak blízko k dokončení!
 jQuery Klíčové události
 Při prvním otevření dokumentu připraven () událost nastavuji pár proměnných. První dvě se chovají jako přímé cílové selektory pro vyhledávací pole a foto kontejner. Používám také časovač JavaScriptu k pozastavení vyhledávacího dotazu do 900 milisekund poté, co uživatel dokončil psaní.
 $ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); var timer; 
 Pracujeme pouze se dvěma hlavními funkčními bloky. Primární obslužná rutina je spuštěna událostí .keydown (), když je zaměřena na vyhledávací pole. Nejprve zkontrolujeme, zda klíčový kód vyhovuje některému z našich zakázaných klíčů, a pokud ano, tak klíčovou událost negujeme. V opačném případě vymažte výchozí časovač a počkejte před voláním 900 ms instaSearch ().
 / ** * glosář kódů * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = OBDOBÍ * 191 = BACKSLASH * 13 = ENTER * 219 = LEFT BRACKET * 220 = FORWARD SLASH * 221 = RIGHT BRACKET * / $ (sfield ) .keydown (function (e) if (e.keyCode == '32' || e.keyCode == '188' || e.keyCode == '189' || e.keyCode == '13' | | e.keyCode == '190' || e.keyCode == '219' || e.keyCode == '221' || e.keyCode == '191' || e.keyCode == '220') e.preventDefault (); else clearTimeout (timer); timer = setTimeout (function () instaSearch ();, 900);); 
 Pokaždé, když aktualizujete hodnotu, automaticky přejde na nové výsledky vyhledávání. Existuje také mnoho dalších klíčových kódů, které jsme mohli zablokovat spuštění funkce Ajax - ale příliš mnoho pro zápis v tomto tutoriálu.
 Funkce Ajax instaSearch ()
 Uvnitř mé nové vlastní funkce nejprve přidáme “načítání” třídy do vyhledávacího pole. Tato třída aktualizuje ikonu kamery pro nový načítaný obrázek gif. Chceme také vypustit případná zbylá data v sekci fotografií. Proměnná dotazu je dynamicky tažena z aktuální hodnoty zadané do vyhledávacího pole.
 function instaSearch () $ (sfield) .addClass ("loading"); $ (container) .empty (); var q = $ (sfield) .val (); $ .ajax (typ: 'POST', url: 'instasearch.php', data: "q =" + q, úspěch: funkce (data) $ (sfield) .removeClass ("loading"); $ .each (data, funkce (i, položka) var ncode = ' 
"; $ (container) .append (ncode); ); , chyba: funkce (xhr, typ, výjimka) $ (sfield) .removeClass ("loading"); $ (container) .html ("Chyba:" + typ); );  
 Pokud jste obeznámeni s funkcí .ajax (), všechny tyto parametry by měly vypadat dobře. Předávám parametr hledání uživatele “q” jako data POST. Po úspěchu a neúspěchu odstraníme “načítání” a přidejte jakoukoliv odpověď zpět do #fotky obal.
 V rámci úspěšné funkce jsme se smyčky přes poslední odpověď JSON vytáhnout jednotlivé div prvky. Můžeme dosáhnout této smyčky s funkcí $ .each () a zacílením na pole dat odpovědí. V opačném případě způsob selhání přímo vygeneruje chybovou zprávu odezvy z Instagram API. A to je opravdu všechno, co je k tomu!
  
 Zobrazit ukázku
 Stáhněte si zdroj
 
Závěrečné myšlenky
 Tým Instagramu udělal skvělou práci, která takovou obrovskou aplikaci škálovala. Rozhraní API může být občas pomalé, ale data odezvy jsou vždy správně formátována a velmi snadno se s nimi pracuje. Doufám, že tento návod může ukázat, že existuje spousta práce mimo aplikace třetích stran.
 Aktuální vyhledávací dotazy Instagram bohužel neumožňují současně více než 1 značku. To je omezující na naše demo, ale rozhodně neodstraní žádné jeho kouzlo. Měli byste se podívat na výše uvedený živý příklad a stáhnout si kopii mého zdrojového kódu. Kromě toho dejte nám vědět své myšlenky v post diskusní oblasti níže.