Ako vytvoriť vlastný vyhľadávací nástroj Instagram S jQuery a PHP

Od chvíle, kedy spoločnosť Google spustila funkcie okamžitého vyhľadávania, stala sa populárnym trendom vo webovom dizajne. Na internete sa nachádzajú niektoré zaujímavé príklady, napríklad aplikácia Obrázky Google od Michaela Harta. Techniky sú celkom jednoduché, kde dokonca webový vývojár s miernym jQuery skúsenosťami môže vyzdvihnúť programovacie API a JSON dáta.

Pre tento návod chcem vysvetliť ako môžeme vytvoriť podobnú webovú aplikáciu okamžitého vyhľadávania. Namiesto toho, aby sme stiahli obrázky od spoločnosti Google, môžeme použiť Instagram, ktorý sa v niekoľkých krátkych rokoch.

Táto sociálna sieť začala fungovať ako mobilná aplikácia pre systém iOS. Používatelia mohli urobiť fotografie a zdieľať ich so svojimi priateľmi, nechať komentáre a nahrávať do sietí tretích strán, ako je Flickr. Tím bol nedávno zakúpený spoločnosťou Facebook a vydal úplne novú aplikáciu pre Android Market. Ich užívateľská základňa sa značne rozrástla a teraz môžu vývojári vytvoriť úžasné mini-aplikácie, rovnako ako toto demo.

Zobraziť demo
Stiahnuť zdroj

Získanie poverenia rozhrania API

Pred vytvorením akýchkoľvek projektových súborov by sme sa mali najprv pozrieť do myšlienok systému API systému Instagram. Budete potrebovať účet na prístup k portálu pre vývojárov, ktorý ponúka užitočné pokyny pre začiatočníkov. Všetko, čo potrebujeme nahliadnuť do databázy Instagram, je “ID klienta”.

Na hornom paneli nástrojov kliknite na odkaz Správa klientov a potom kliknite na zelené tlačidlo “Zaregistrujte nového klienta”. Budete musieť dať aplikácii názov, stručný popis a webovú adresu URL. Adresa URL a URI presmerovania môžu byť v tejto inštancii rovnaké, len preto, že nepotrebujeme overovať žiadnych používateľov. Stačí vyplniť všetky hodnoty a vygenerovať nové podrobnosti aplikácie.

Zobrazí sa dlhý reťazec s názvami ID klienta. Tento kľúč budeme potrebovať neskôr pri vytváraní backendového skriptu, takže sa vrátime k tejto časti. Teraz môžeme začať s konštrukciou našej aplikácie jQuery pre okamžité vyhľadávanie.

Predvolený obsah webovej stránky

Skutočný kód HTML je veľmi tenký pre množstvo funkcií, ktoré používame. Keďže väčšinu obrázkových údajov pripojíme dynamicky, potrebujeme len niekoľko menších prvkov vo vnútri stránky. Tento kód sa nachádza vo vnútri index.html súbor.

    Aplikácia Instagram Photo Instant Search s nástrojom jQuery         Poznámka: Nie sú povolené medzery alebo interpunkčné znamienka. Vyhľadávania sú obmedzené na jedno (1) kľúčové slovo.

Používam najnovšiu knižnicu jQuery 1.7.2 spolu s dvoma externými zdrojmi .css a .js. Pole vstupného vyhľadávania nemá žiadny vonkajší balík formulárov, pretože nechceme nikdy odoslať formulár a spôsobiť opätovné načítanie stránky. V rámci vyhľadávacieho poľa som zablokoval niekoľko úderov, takže pri zadávaní používateľov sú obmedzené obmedzenia.

Všetky údaje o fotkách sa nachádzajú v ID strednej časti #photos. Udržuje náš základný HTML čistý a ľahko čitateľný. Všetky ostatné interné prvky HTML budú pridané prostredníctvom jQuery a odstránené aj pred každým novým vyhľadávaním.

Vytiahnutie z rozhrania API

Najskôr by som chcel vytvoriť náš dynamický PHP skript a potom sa presunúť do jQuery. Môj nový súbor je pomenovaný instasearch.php ktorý bude obsahovať všetky dôležité záložné háčiky do rozhrania API.

 Prvý riadok označuje, že naše vrátené údaje sú naformátované ako JSON namiesto textového textu alebo HTML. To je nevyhnutné pre funkcie správneho čítania údajov. Potom som mal niekoľko nastavení premenných obsahujúcich ID klienta aplikácie, hodnotu vyhľadávania používateľov a konečnú adresu API URL. Uistite sa, že aktualizujete $ client Hodnota reťazca zodpovedá vašej vlastnej aplikácii.
 Ak chcete získať prístup k týmto údajom adresy URL, potrebujete analyzovať obsah súboru alebo použiť funkcie cURL. Vlastná funkcia get_curl () je len malý kúsok kódu, ktorý kontroluje aktuálnu konfiguráciu PHP.
 Ak nemáte aktivovaný parameter cURL, pokúsi sa aktivovať funkciu a vytiahnuť dáta cez vlastnú knižnicu funkcií. V opačnom prípade môžeme jednoducho použiť file_get_contents (), ktorý má tendenciu byť pomalší, ale stále funguje rovnako dobre. Potom môžeme skutočne vytiahnuť tieto dáta do takej premennej:
 $ response = get_curl ($ api); 
 Organizovanie a vrátenie údajov
 Mohli by sme vrátiť túto pôvodnú odpoveď JSON od spoločnosti Instagram so všetkými načítavanými informáciami. Existuje však toľko dodatočných údajov a je to veľmi nepríjemné prekonávať všetko. Radšej zorganizujem reakcie Ajaxu a vytiahnem presne tie údaje, ktoré potrebujeme.
 Najprv môžeme nastaviť prázdne pole pre všetky obrázky. Potom vo vnútri a pre každý() smyčkou vytiahneme dátové objekty JSON jeden po druhom. Potrebujeme iba tri (3) špecifické hodnoty, ktorými sú $ src(webová adresa obrázka v plnej veľkosti), $ palec(webová adresa miniatúry obrázka) a $ url(jedinečná fotka permalink).
 $ images = array (); ak ($ response) foreach (json_decode ($ response) -> dáta ako $ položka) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> odkaz; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Tí, ktorí nie sú oboznámení s PHP slučkami, sa v procese stratia. Ak nerozumiete syntaxi, takýto úryvok kódu sa nebudete sústreďovať. Naša paleta obrázkov bude obsahovať maximálne 16-20 jedinečných záznamov fotografií vytiahnutých od posledného dátumu publikovania. Potom môžeme vygenerovať celý tento kód na stránku ako odpoveď jQuery Ajax.
 print_r (str_replace ('\\ /', '/', json_encode ($ images))); die (); 
 Ale teraz, keď sme sa pozreli za zákulisím, môžeme skočiť do frontend skriptovania. Vytvoril som súbor ajax.js ktorý obsahuje niekoľko obslužných programov udalostí viazaných na vyhľadávacie pole. Ak ste stále doteraz sledovať a potom vzrušený, sme tak blízko k dokončeniu!
 jQuery Key Events
 Pri prvom otvorení dokumentu ready () udalosť Nastavím pár premenných. Prvé dva sa chovajú ako priame selektory cieľa pre kontajnery vyhľadávacieho poľa a fotografií. Používam tiež časovač JavaScript na pozastavenie vyhľadávacieho dopytu až do 900 milisekúnd po ukončení písania používateľa.
 $ (dokument) .ready (funkcia () var sfield = $ ("# s"); var kontajner = $ ("# photos"); 
 Existujú iba dva hlavné funkčné bloky, s ktorými pracujeme. Primárny popisovač sa spúšťa pomocou udalosti .keydown (), keď je zameraný na vyhľadávacie pole. Najprv skontrolujeme, či sa kľúčový kód zhoduje s niektorým z našich zakázaných kľúčov, a ak tak neguje kľúčovú udalosť. V opačnom prípade vymažte predvolený časovač a počkajte 900 ms pred zavolaním instaSearch ().
 / ** * Slovník kľúčových kódov * 32 = SPACE * 188 = COMMA * 189 = DASH 190 = PERIOD 191 = BACKSLASH * 13 = ENTER 219 = ĽAVÝ BRACKET 220 = ) .keydown (funkcia (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 (); iný clearTimeout (časovač); timer = setTimeout (funkcia () instaSearch () ;, 900);); 
 Pri každom aktualizovaní hodnoty automaticky získa nové výsledky vyhľadávania. Existuje aj veľa ďalších kľúčových kódov, ktoré by sme mohli zablokovať pri spustení funkcie Ajax - ale príliš veľa na zaradenie do tohto tutoriálu.
 Funkcia Ajax instaSearch ()
 V rámci svojej novej vlastnej funkcie pridávame prvý “načítava” triedu do vyhľadávacieho poľa. Táto trieda aktualizuje ikonu kamery pre nový obrázok načítania gifu. Chceme tiež vyprázdniť všetky možné údaje, ktoré zostali v sekcii fotografií. Premenná dotazu je dynamicky vytiahnutá z aktuálnej hodnoty zadanej vo vyhľadávacom poli.
 funkcia instaSearch () $ (sfield) .addClass ("načítavanie"); $ (Kontajner) .empty (); Var q = $ (sfield) .val (); $ .ajax (typ: 'POST', url: 'instasearch.php', dáta: 'q =' + q, success: function (data) $ (sfield) .removeClass (dáta, funkcia (i, položka) var ncode = ' 
,; $ (Kontajner) .append (nCode); ); , chyba: funkcia (xhr, typ, výnimka) $ (sfield) .removeClass ("loading"); $ (kontajner) .html ("Chyba:" typ +); );  
 Ak poznáte funkciu .ajax (), všetky tieto parametre by mali vyzerať dobre. Predávam parameter vyhľadávania používateľov “q” ako údaje POST. Po úspechu a zlyhaní odstránime “načítava” triedy a pripojiť akúkoľvek odpoveď späť do #photos obálka.
 V rámci funkcie úspechu sme zakrúžkovali konečnou odpoveďou JSON na vytiahnutie jednotlivých elementov div. Môžeme dosiahnuť túto slučku pomocou funkcie $ .each () a zacielenie na naše pole údajov odpovedí. V opačnom prípade metóda zlyhania priamo vykáže akúkoľvek správu s chybovou správou z rozhrania Instagram API. A to je naozaj všetko pre to!
  
 Zobraziť demo
 Stiahnuť zdroj
 
Záverečné myšlienky
 Tím Instagram urobil skvelú prácu, ktorá takúto obrovskú aplikáciu vylepšila. Rozhranie API môže byť občas pomalé, ale údaje o odpovediach sú vždy správne formátované a veľmi ľahko pracujú. Dúfam, že tento návod môže preukázať, že je veľa práce s aplikáciami tretích strán.
 Bohužiaľ, aktuálne vyhľadávacie dopyty Instagram neumožňujú naraz viac ako 1 značku. To je obmedzené na naše demo, ale určite neodstraňuje žiadne jeho kúzlo. Mali by ste sa pozrieť na živý príklad vyššie a stiahnuť kópiu môjho zdrojového kódu hrať s. Dajte nám vedieť svoje myšlienky do diskusnej oblasti nižšie.