Sådan opbygger du din egen Instagram-søgemaskine med jQuery og PHP

Helt siden Google rullede ud instant search-funktioner, er det blevet en populær tendens i webdesign. Der er nogle sjove eksempler online som Michael Harts Google Images-app. Teknikkerne er alle ret ligefrem, hvor selv en webudvikler med moderat jQuery-erfaring kan hente programmerings-API'er og JSON-data.

Til denne øvelse vil jeg gerne forklare hvordan vi kan opbygge en lignende øjeblikkelig søgning webapplikation. I stedet for at trække billeder fra Google kan vi bruge Instagram, der er vokset enormt om blot nogle få korte år.

Dette sociale netværk startede som en mobil app til iOS. Brugere kunne tage billeder og dele dem med deres venner, forlade kommentarer og uploade til tredjepartsnetværk som Flickr. Holdet blev for nylig erhvervet af Facebook og havde offentliggjort en helt ny app til Android Market. Deres brugerbase er vokset enormt, og nu kan udviklere bygge fantastiske mini-apps ligesom denne instasearch demo.

Se Demo
Download kilde

Indhentning af API-referencer

Før vi opretter nogen projektfiler, skal vi først se på idéerne bag Instagrams API-system. Du skal bruge en konto for at få adgang til udviklerens portal, der indeholder nyttige instruktioner til begyndere. Alt vi behøver for at forespørge Instagram-databasen er en “Klient-id”.

Klik på linket Administrer klienter i øverste værktøjslinje, og klik derefter på den grønne knap “Tilmeld dig en ny kunde”. Du skal give applikationen et navn, en kort beskrivelse og en webadresse. URL-adressen og omdirigerings-URI'en kan være den samme værdi i dette tilfælde, fordi vi ikke behøver at godkende nogen brugere. Udfyld blot alle værdierne og generer de nye applikationsdetaljer.

Du får se en lang række tegn, der hedder navn Klient ID. Vi skal bruge denne nøgle senere, når du bygger backend scriptet, så vi vender tilbage til dette afsnit. For øjeblikket kan vi begynde opførelsen af vores jQuery-øjebliksøgningsprogram.

Standard websideindhold

Den egentlige HTML er meget slank for mængden af funktionalitet, vi bruger. Da de fleste billeddata tilføjes dynamisk, kræver vi kun et par mindre elementer inde på siden. Denne kode findes i index.html fil.

    Instagram Photo Instant Search App med jQuery         Bemærk: Ingen mellemrum eller tegnsætning tilladt. Søgninger er begrænset til et (1) søgeord.

Jeg bruger det seneste jQuery 1.7.2 bibliotek sammen med to eksterne .css og .js ressourcer. Indtastningsfeltet har ingen ydre formularindpakning, fordi vi ikke ønsker at sende ind formularen og forårsage en sideindlæsning. Jeg har deaktiveret et par tastetryk i søgefeltet, så der er mere begrænsede begrænsninger, når brugerne skriver.

Vi vil udfylde alle fotodata inde i den midterste sektion ID #photos. Det holder vores grundlæggende HTML ren og nem at læse. Alle de andre interne HTML-elementer vil blive tilføjet via jQuery og fjernes også før hver ny søgning.

Træk fra API'en

Jeg vil gerne starte først ved at oprette vores dynamiske PHP script og derefter flytte ind i jQuery. Min nye fil er navngivet instasearch.php som vil indeholde alle vigtige backend kroge i API.

 Den første linje angiver, at vores returdata er formateret som JSON i stedet for plaintext eller HTML. Dette er nødvendigt for JavaScript-funktioner til at læse dataene korrekt. Herefter har jeg fået nogle variabler opsætning indeholdende applikationsklient-id, brugersøgningsværdi og den endelige API-URL. Sørg for at opdatere $ klient strengværdi for at matche din egen applikation.
 For at få adgang til disse URL-data skal vi analysere filens indhold eller bruge cURL-funktioner. Den brugerdefinerede funktion get_curl () er kun en lille smule kode, der kontrollerer den nuværende PHP-konfiguration.
 Hvis du ikke har CURL aktiveret, vil dette forsøge at aktivere funktionen og trække data via deres eget funktionsbibliotek. Ellers kan vi simpelthen bruge file_get_contents () som har tendens til at være langsommere, men fungerer stadig lige så godt. Så kan vi faktisk trække disse data til en variabel som sådan:
 $ respons = get_curl ($ api); 
 Organisering og returdata
 Vi kunne bare returnere dette originale JSON-svar fra Instagram med alle de indlæste oplysninger. Men der er så meget ekstra data, og det er meget irriterende at gå gennem alt. Jeg foretrækker at organisere Ajax-svar og trække præcis ud af hvilke data, vi har brug for.
 Først kan vi opsætte et tomt array for alle billederne. Så inde i a for hver() loop vil vi trække JSON dataobjektene en-for-en ud. Vi har kun brug for tre (3) specifikke værdier, som er $ src(billedwebadresse i fuld størrelse), $ tommelfinger(miniaturebilledwebadresse) og $ url(unik foto permalink).
 $ images = array (); hvis ($ respons) foreach (json_decode ($ response) -> data som $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> link; $ billeder [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Dem, der ikke er bekendt med PHP-sløjfer, kan gå tabt i processen. Fokus ikke så meget på disse kodestykker, hvis du ikke forstår syntaksen. Vores udvalg af billeder vil højst indeholde 16-20 unikke indgange af billeder trukket fra den seneste offentliggørelsesdato. Derefter kan vi udføre al denne kode på siden som et jQuery Ajax svar.
 print_r (str_replace ('\\ /', '/', json_encode ($ billeder))); dø(); 
 Men nu hvor vi har kigget bag kulisserne, kan vi hoppe ind i frontend scripting. Jeg har oprettet en fil ajax.js som indeholder et par begivenheder håndterer bundet til søgefeltet. Hvis du stadig følger op indtil nu, så bliver du begejstret, vi er så tæt på færdiggørelsen!
 jQuery Key Events
 Når du åbner dokumentet først parat() begivenhed jeg opretter et par variabler. De to første opfører sig som direkte målvælger for søgefeltet og fotosbeholderen. Jeg bruger også en JavaScript-timer til at stoppe søgningen indtil 900 millisekunder, efter at brugeren er færdig med at skrive.
 $ (dokument) .ready (funktion () var sfield = $ ("# s"); var container = $ ("# fotos"); var timer; 
 Der er kun to hovedfunktionsblokke, vi arbejder med. Den primære handler udløses af en .keydown () begivenhed, når den er fokuseret på søgefeltet. Vi kontrollerer først, om nøglekoden matcher nogen af vores forbudte nøgler, og i så fald negerer nøglehændelsen. Ellers rydder du standardtimeren og venter 900ms før du ringer instaSearch ().
 / ** * nøgleord ordliste * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIODE * 191 = BACKSLASH * 13 = ENTER * 219 = VENSTRE BRACKET * 220 = FORWARD SLASH * 221 = HØJRE BRACKET * / $ ) .keydown (funktion (e) hvis (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 (funktion () instaSearch ();, 900);); 
 Hver gang du opdaterer værdien, vil den automatisk hente nye søgeresultater. Der er også mange andre nøglekoder, vi kunne have blokeret for at udløse Ajax-funktionen - men for mange til notering i denne vejledning.
 Funktionen Ajax instaSearch ()
 I min nye brugerdefinerede funktion tilføjer vi først en “Indlæser” klasse på søgefeltet. Denne klasse opdaterer kameraikonet til et nyt loading gif-billede. Vi vil også tømme eventuelle resterende data i fotosektionen. Forespørgselsvariablen trækkes dynamisk fra den aktuelle værdi, der er indtastet i søgefeltet.
 funktion instaSearch () $ (sfield) .addClass ("loading"); $ (Beholder) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', data: "q =" + q, succes: funktion (data) $ (sfield) .removeClass ("loading"); $ .each (data, funktion (i, element) var ncode = ' 
'; $ (Beholder) .append (ncode); ); , fejl: funktion (xhr, type, undtagelse) $ (sfield) .removeClass ("loading"); $ (container) .html ("Fejl:" + type); );  
 Hvis du er bekendt med funktionen .ajax (), så skal alle disse parametre kende. Jeg passerer brugersøgningsparameteren “q” som POST-data. Efter succes og fiasko fjerner vi “Indlæser” klasse og tilføj eventuelle svar tilbage i #photos indpakning.
 Inden for succesfunktionen løber vi igennem det endelige JSON-svar for at trække individuelle div-elementer ud. Vi kan opnå denne looping med funktionen $ .each () og målrette mod vores responsdata array. Ellers vil fejlfindingsmetoden direkte sende enhver responsfejlmeddelelse fra Instagram API. Og det er virkelig alt der er til det!
  
 Se Demo
 Download kilde
 
Afsluttende tanker
 Instagram-teamet har gjort en vidunderlig jobskalering sådan en enorm applikation. API'en kan være langsom til tider, men svardata er altid korrekt formateret og meget nem at arbejde med. Jeg håber, at denne tutorial kan vise, at der er en masse strøm, der arbejder med tredjeparts applikationer.
 Desværre tillader ikke de nuværende Instagram-søgninger mere end 1 tag ad gangen. Dette begrænser vores demo, men det fjerner bestemt ikke nogen af sin charme. Du bør tjekke liveeksemplet ovenfor og downloade en kopi af min kildekode for at lege med. Lad os også vide dine tanker i det efterfølgende diskussionsområde nedenfor.