Cum de a construi propriul motor de căutare Instagram Cu jQuery și PHP

De când Google a lansat funcții de căutare instantanee, a devenit o tendință populară în designul web. Există câteva exemple de divertisment online, cum ar fi aplicația Google Images a lui Michael Hart. Tehnicile sunt destul de simple în cazul în care chiar și un dezvoltator de web cu experiență jQuery moderată poate prelua API-urile de programare și datele JSON.

Pentru acest tutorial vreau să explic cum putem construi o aplicație web similară de căutare instantanee. În loc să tragem imagini de la Google, putem folosi Instagram, care a crescut foarte mult în doar câțiva ani.

Această rețea socială a început ca aplicație mobilă pentru iOS. Utilizatorii ar putea să facă fotografii și să le împărtășească cu prietenii, să lase comentarii și să încarce în rețelele terțelor părți, cum ar fi Flickr. Echipa a fost recent achiziționată de Facebook și a publicat o aplicație de brand nou pentru Android Market. Userbase lor a crescut enorm, iar acum dezvoltatorii pot construi mini-apps uimitoare la fel ca acest demo instasearch.

Vizualizați demonstrația
Descărcați sursa

Obținerea acreditărilor API

Înainte de a crea fișiere de proiect, ar trebui să analizăm mai întâi ideile din spatele sistemului API al Instagram. Veți avea nevoie de un cont pentru a accesa portalul dezvoltatorului care oferă instrucțiuni utile pentru începători. Tot ce trebuie să interogăm baza de date Instagram este a “ID-ul clientului”.

În bara de instrumente de sus, faceți clic pe linkul Gestionați clienții, apoi faceți clic pe butonul verde “Înregistrați un nou client”. Va trebui să oferiți aplicației un nume, o scurtă descriere și un URL al site-ului web. URL-ul și URI-ul de redirecționare pot avea aceeași valoare în această instanță numai pentru că nu este nevoie să autentificăm utilizatori. Doar completați toate valorile și generați detaliile aplicației noi.

Veți vedea un șir lung de caractere numit ID-ul CLIENTULUI. Vom avea nevoie de această cheie mai târziu când construim scriptul backend, așa că vom reveni la această secțiune. Pentru moment, putem începe construcția aplicației noastre de căutare instant JQuery.

Conținutul implicit al paginii web

HTML-ul real este foarte subțire pentru cantitatea de funcționalitate pe care o folosim. Deoarece majoritatea datelor de imagine sunt atașate dinamic, avem nevoie doar de câteva elemente mai mici în interiorul paginii. Acest cod se găsește în interiorul index.html fişier.

    Aplicația Instagram Photo Instant Search cu jQuery         Notă: nu sunt permise spații sau punctuație. Căutările sunt limitate la un (1) cuvânt cheie.

Folosesc ultima bibliotecă jQuery 1.7.2 împreună cu două resurse externe .css și .js. Câmpul de căutare de intrare nu are un wrapper de formă exterioară, deoarece nu dorim să trimitem vreodată formularul și să provocăm reîncărcarea paginii. Am dezactivat câteva apăsări de taste din interiorul câmpului de căutare, astfel încât să existe restricții mai limitate când utilizatorii scriu.

Vom umple toate datele de fotografie din ID-ul secțiunii medii #photos. Acesta păstrează codul HTML de bază curat și ușor de citit. Toate celelalte elemente HTML interne vor fi adăugate prin jQuery și, de asemenea, eliminate înainte de fiecare nouă căutare.

Tragerea din API

Aș vrea să încep prin crearea scriptului nostru dinamic PHP și apoi mutarea în jQuery. Noul fișier este numit instasearch.php care va conține toate cârligele de backend importante în API.

 Prima linie indică faptul că datele noastre de returnare sunt formatate ca JSON în loc de textul plaintext sau HTML. Acest lucru este necesar pentru ca funcțiile JavaScript să citească corect datele. După aceea, am câteva setări de variabile care conțin codul de client al aplicației, valoarea de căutare a utilizatorului și adresa URL finală API. Asigurați-vă că actualizați $ client valoare string pentru a se potrivi cu propria aplicație.
 Pentru a accesa aceste date de URL trebuie să analizăm conținutul fișierului sau să folosim funcțiile cURL. Funcția personalizată get_curl () este doar un mic fragment de cod care verifică configurația curentă a PHP.
 Dacă nu aveți activat cURL, aceasta va încerca să activeze caracteristica și să tragă date prin biblioteca de funcții proprii. În caz contrar, putem folosi file_get_contents () care tinde să fie mai lent, dar funcționează la fel de bine. Apoi, putem trage aceste date intr-o variabila ca aceasta:
 $ răspuns = get_curl ($ api); 
 Organizarea și returnarea datelor
 Am putea returna acest raspuns original JSON de la Instagram cu toate informatiile incarcate. Dar sunt atat de multe date suplimentare si este foarte enervant sa treci peste tot. Prefer să organizez răspunsurile Ajax și să scot exact care date de care avem nevoie.
 Mai întâi putem configura o matrice goală pentru toate imaginile. Apoi, în interiorul a pentru fiecare() vom extrage obiectele de date JSON unul câte unul. Avem nevoie doar de trei (3) valori specifice care sunt $ src(adresa URL a imaginii de dimensiune completă), $ thumb(adresa URL imagine miniatură) și $ url(fotografie unică permalink).
 $ imagini = array (); dacă ($ răspuns) foreach (json_decode ($ răspuns) -> date ca element $) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ element-> imagini-> miniatură-> url; $ url = $ item-> link; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Cei care nu sunt familiarizați cu buclele PHP se pot pierde în acest proces. Nu vă concentrați prea mult pe aceste fragmente de cod dacă nu înțelegeți sintaxa. Gama noastra de imagini va contine cel mult 16-20 intrari unice ale fotografiilor scoase de la cea mai recenta data de publicare. Apoi putem scoate tot acest cod pe pagină ca un răspuns jQuery Ajax.
 print_r (str_replace ('\\\', '/', json_encode ($ images))); a muri(); 
 Dar acum că am aruncat o privire în spatele scenei, putem să sarăm în scripting frontend. Am creat un fișier ajax.js care conține o serie de handlers de evenimente care sunt legate de câmpul de căutare. Dacă continuați să continuați până acum, atunci vă puteți bucura că suntem atât de aproape de finalizare!
 jQuery Key Events
 Când deschideți primul document gata() Eveniment am setat o pereche de variabile. Primele două se comportă ca selectori țintă direct pentru câmpul de căutare și pentru containerul de fotografii. De asemenea, folosesc un timer JavaScript pentru a întrerupe interogarea de căutare până la 900 milisecunde după ce utilizatorul a terminat de scris.
 $ (document) .ready (funcție () var sfield = $ ("# s"); var container = $ ("# photos"); 
 Există doar două blocuri de funcții principale cu care lucrăm. Primul handler este declanșat de un eveniment .keydown () atunci când este focalizat pe câmpul de căutare. Mai întâi verificăm dacă codul cheie se potrivește cu oricare dintre cheile noastre interzise și, dacă nu, negăm evenimentul cheie. În caz contrar, ștergeți cronometrul implicit și așteptați 900 ms înainte de a apela instaSearch ().
 / ** * glosar pentru coduri de taste * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIOADA * 191 = BACKSLASH * 13 = ENTER * 219 = BACKETUL STÂNGA 220 = ). keydown (funcția (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 (); altceva clearTimeout (timer); timer = setTimeout (functie () instaSearch ();; 900);); 
 De fiecare dată când actualizați valoarea, acesta va prelua automat rezultate noi de căutare. Există, de asemenea, multe alte coduri cheie pe care le-am fi putut bloca de la declanșarea funcției Ajax - dar prea multe pentru a fi înscrise în acest tutorial.
 Funcția Ajax instaSearch ()
 În interiorul noii funcții personalizate, adăugăm mai întâi a “se incarca” clasă pe câmpul de căutare. Această clasă va actualiza pictograma camerei pentru o nouă imagine de încărcare gif. De asemenea, dorim să golim toate datele posibile din secțiunea de fotografii. Variabila de interogare este trasă dinamic din valoarea curentă introdusă în câmpul de căutare.
 funcția instaSearch () $ (sfield) .addClass ("încărcare"); $ (Container) .empty (); var q = $ (sfield) .val (); $ .ajax (tip: 'POST', url: 'instasearch.php', data: 'q =' + q, succes: function (data) $ (sfield) .removeClass (date, funcție (i, element) var ncode = ' 
„; $ (Container) .append (nCode); ); , eroare: funcție (xhr, tip, excepție) $ (sfield) .removeClass ("încărcare"); $ (container) .html ("Eroare:" tip +); );  
 Dacă sunteți familiarizat cu funcția .ajax (), atunci toți acești parametri ar trebui să pară familiari. Transmit parametrul de căutare al utilizatorului “q” ca date POST. După succes și eșec eliminăm “se incarca” și adăugați orice răspuns înapoi în #photos învelitoare.
 În cadrul funcției de succes, ne confruntăm prin răspunsul final al JSON pentru a scoate elemente div separate. Putem realiza această looping cu funcția $ .each () și direcționând matricea de date de răspuns. În caz contrar, metoda de eșec va afișa direct orice mesaj de eroare de răspuns din API-ul Instagram. Și asta este cu adevărat totul!
  
 Vizualizați demonstrația
 Descărcați sursa
 
Gândurile finale
 Echipa Instagram a făcut o treabă minunată care a scos o aplicație atât de extraordinară. API-ul poate fi lent uneori, dar datele de răspuns sunt mereu corect formate și foarte ușor de utilizat. Sper că acest tutorial poate demonstra că există o mulțime de putere care lucrează la aplicații de la terțe părți.
 Din păcate, interogările curente de căutare Instagram nu permit mai mult de o etichetă la un moment dat. Acest lucru este limitat la demo-ul nostru, dar cu siguranță nu elimină nici un farmec. Ar trebui să verificați exemplul live de mai sus și să descărcați o copie a codului meu sursă pentru a juca cu el. În plus, să ne comunicați gândurile dvs. în zona de discuții de mai jos.