Hvordan bygge din egen Instagram-søkemotor med jQuery og PHP

Helt siden Google rullet ut øyeblikkssøkfunksjoner, har det blitt en populær trend i webdesign. Det er noen morsomme eksempler på nettet, for eksempel Michael Harts Google Images-app. Teknikkene er alle ganske enkle hvor selv en webutvikler med moderat jQuery-opplevelse kan plukke opp programmerings-APIer og JSON-data.

For denne opplæringen vil jeg forklare hvordan vi kan bygge et lignende øyeblikksøk webapplikasjon. I stedet for å trekke bilder fra Google kan vi bruke Instagram som har vokst enormt på bare noen få korte år.

Dette sosiale nettverket startet som en mobilapp for iOS. Brukere kan ta bilder og dele dem med vennene sine, legge igjen kommentarer og laste opp til tredjepartsnettverk som Flickr. Teamet ble nylig kjøpt av Facebook og hadde publisert en helt ny app for Android Market. Deres brukerbase har vokst enormt, og nå utviklere kan bygge fantastiske mini-apps akkurat som denne instasearch demo.

Se demo
Last ned kilde

Innhente API-legitimasjon

Før du oppretter noen prosjektfiler, bør vi først se på ideene bak Instagrams API-system. Du trenger en konto for å få tilgang til utviklerens portal som gir nyttige instruksjoner for nybegynnere. Alt vi trenger for å spørre Instagram-databasen er en “klient-ID”.

I øverste verktøylinje klikker du koblingen Administrer klienter, og deretter klikker du på den grønne knappen “Registrer en ny klient”. Du må gi søknaden et navn, en kort beskrivelse og en nettadresse. Nettadressen og omadresser-URI kan være den samme verdien i dette tilfellet bare fordi vi ikke trenger å autentisere noen brukere. Bare fyll ut alle verdiene og generer de nye programopplysningene.

Du får se en lang rekke tegn som heter KLIENT-ID. Vi trenger denne nøkkelen senere når du bygger backend-skriptet, så vi kommer tilbake til denne delen. For nå kan vi starte oppbyggingen av vår jQuery-søkesøknad.

Standard websideinnhold

Den faktiske HTML er veldig slank for hvor mye funksjonalitet vi bruker. Siden de fleste bildedataene legges til dynamisk, krever vi bare noen få mindre elementer på siden. Denne koden er funnet inne i index.html fil.

    Instagram Photo Instant Search App med jQuery         Merk: Ingen mellomrom eller tegnsetting tillatt. Søker er begrenset til ett (1) søkeord.

Jeg bruker det nyeste jQuery 1.7.2-biblioteket sammen med to eksterne .css og .js-ressurser. Inngangssøkfeltet har ingen ytre form-omslag fordi vi ikke ønsker å sende inn skjemaet og føre til en sideoppdatering. Jeg har deaktivert noen tastetrykk i søkefeltet, slik at det er mer begrensede begrensninger når brukerne skriver.

Vi vil fylle alle fotodataene inn i den midterste delen ID #photos. Det holder vår grunnleggende HTML ren og enkel å lese. Alle de andre interne HTML-elementene vil bli lagt til via jQuery, og også fjernet før hvert nytt søk.

Trekker fra API

Jeg vil gjerne starte først ved å lage vårt dynamiske PHP-skript og deretter flytte inn i jQuery. Min nye fil er oppkalt instasearch.php som vil inneholde alle viktige backend kroker i API.

 Den første linjen angir at våre returdata er formatert som JSON i stedet for ren tekst eller HTML. Dette er nødvendig for JavaScript-funksjoner for å lese dataene riktig. Etterpå har jeg noen variabler oppsett som inneholder applikasjonsklient-ID, brukersøkverdi og den endelige API-nettadressen. Pass på at du oppdaterer $ klient strengverdien som passer til din egen applikasjon.
 For å få tilgang til denne nettadressedata må vi analysere filinnholdet eller bruke cURL-funksjonene. Den egendefinerte funksjonen get_curl () er bare en liten kode som sjekker mot gjeldende PHP-konfigurasjon.
 Hvis du ikke har CURL aktivert, vil dette forsøke å aktivere funksjonen og trekke data via eget bibliotek. Ellers kan vi bare bruke file_get_contents () som pleier å være tregere, men fungerer fortsatt like bra. Da kan vi faktisk trekke disse dataene inn i en variabel som slik:
 $ respons = get_curl ($ api); 
 Organisere og returnere data
 Vi kunne bare returnere dette originale JSON-svaret fra Instagram med all informasjon som er lastet opp. Men det er så mye ekstra data, og det er veldig irriterende å gå gjennom alt. Jeg foretrekker å organisere Ajax-svar og trekke ut nøyaktig hvilke deler av data vi trenger.
 Først kan vi sette opp et tomt utvalg for alle bildene. Så inne i a for hver() loop vi trekker ut JSON dataobjektene en-for-en. Vi trenger bare tre (3) spesifikke verdier som er $ src(bilde i full størrelse), $ tommelen(miniatyrbilde URL), og $ url(unikt 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; $ bilder [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 De som ikke er kjent med PHP-løkker, kan gå seg vill i prosessen. Ikke fokus så mye på disse kodene hvis du ikke forstår syntaksen. Vårt utvalg av bilder vil inneholde maksimalt 16-20 unike oppføringer av bilder trukket fra den nyeste publiseringsdatoen. Da kan vi sende ut denne koden på siden som en jQuery Ajax-respons.
 print_r (str_replace ('\\ /', '/', json_encode ($ bilder))); dø(); 
 Men nå som vi har tatt en titt bak scenene kan vi hoppe inn i frontend scripting. Jeg har laget en fil ajax.js som inneholder et par hendelseshåndterere knyttet til søkefeltet. Hvis du fortsatt følger opp til nå, så bli spent, vi er så nær ferdigstillelse!
 jQuery-nøkkelhendelser
 Når du åpner dokumentet først klar() hendelsen jeg setter opp et par variabler. De to første oppfører seg som direkte målvelger for søkefeltet og fotoboksen. Jeg bruker også en JavaScript-timer for å stoppe søket inntil 900 millisekunder etter at brukeren er ferdig med å skrive.
 $ (dokument) .ready (funksjon () var sfield = $ ("# s"); var container = $ ("# photos"); var timer; 
 Det er bare to hovedfunksjonsblokker vi jobber med. Den primære handleren utløses av en .keydown () -hendelse når den er fokusert på søkefeltet. Vi kontrollerer først om nøkkelkoden samsvarer med noen av våre forbudte nøkler, og i så fall negerer nøkkelhendelsen. Ellers slettes standardtimeren og venter 900ms før du ringer instaSearch ().
 / ** * nøkkelord ordliste * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = BACKSLASH * 13 = ENTER * 219 = VENSTRE BRACKET * 220 = FORWARD SLASH * 221 = HØYRE BRACKET * / $ ) .keydown (funksjon (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 (funksjon () instaSearch ();, 900);); 
 Hver gang du oppdaterer verdien, vil den automatisk hente nye søkeresultater. Det er også mange andre nøkkelkoder vi kunne ha blokkert fra å utløse Ajax-funksjonen - men for mange til notering i denne opplæringen.
 Ajax instaSearch () -funksjonen
 I min nye tilpassede funksjon legger vi først til “lasting” klassen i søkefeltet. Denne klassen vil oppdatere kameraikonet for et nytt lastgiftsbilde. Vi vil også tømme eventuelle data igjen i bildeseksjonen. Søkevariabelen trekkes dynamisk fra gjeldende verdi som er angitt i søkefeltet.
 funksjon instaSearch () $ (sfield) .addClass ("loading"); $ (Container) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', data: "q =" + q, suksess: funksjon (data) $ (sfield) .removeClass ("loading"); $ .each (data, funksjon (jeg, element) var ncode = ' 
'; $ (Beholder) .append (NCode); ); , feil: funksjon (xhr, type, unntak) $ (sfield) .removeClass ("loading"); $ (container) .html ("Feil:" + type); );  
 Hvis du er kjent med .ajax () -funksjonen, bør alle disse parametrene bli kjent. Jeg passerer brukersøkeparameteren “q” som POST-data. Etter suksess og fiasko fjerner vi “lasting” klasse og legg til noe svar tilbake til #photos wrapper.
 Innen suksessfunksjonen løser vi gjennom det endelige JSON-svaret for å trekke ut individuelle div-elementer. Vi kan oppnå denne looping med $ .each () -funksjonen og målrette vår responsdata array. Ellers vil feilmetoden direkte sende ut en hvilken som helst responsfeilmelding fra Instagram API. Og det er egentlig alt der er til det!
  
 Se demo
 Last ned kilde
 
Siste tanker
 Instagram-teamet har gjort en fantastisk jobbskalering slik en enorm applikasjon. API-en kan være treg til tider, men svardata er alltid riktig formatert og veldig lett å jobbe med. Jeg håper denne opplæringen kan demonstrere at det er mye strøm som fungerer av tredjepartsprogrammer.
 Dessverre tillater ikke de nåværende Instagram-søkene mer enn 1 tagg om gangen. Dette begrenser vår demo, men det fjerner absolutt ingen av sin sjarm. Du bør sjekke ut liveeksempelet ovenfor og laste ned en kopi av kildekoden for å leke med. Gi oss også beskjed om dine tanker i det etterfølgende diskusjonsområdet nedenfor.