Hur man bygger din egen Instagram-sökmotor med jQuery och PHP

Ända sedan Google rullade ut direktsökningsfunktioner har det blivit en populär trend i webbdesign. Det finns några roliga exempel på nätet som Michael Harts Google Images-app. Teknikerna är alla ganska enkla, där även en webbutvecklare med måttlig jQuery-erfarenhet kan hämta programmerings API och JSON-data.

För denna handledning vill jag förklara hur vi kan bygga en liknande webbsökning med direktsökning. I stället för att dra bilder från Google kan vi använda Instagram som har blivit väldigt kraftigt på bara några få år.

Detta sociala nätverk startade som en mobilapp för iOS. Användare kan ta bilder och dela dem med sina vänner, lämna kommentarer och ladda upp till tredje parts nätverk som Flickr. Teamet förvärvades nyligen av Facebook och hade publicerat en helt ny app för Android Market. Deras användarbas har vuxit enormt, och nu kan utvecklare bygga fantastiska mini-appar, precis som denna instasearch-demo.

Visa demo
Hämta källa

Erhålla API-referenser

Innan vi skapar några projektfiler bör vi först titta på idéerna bakom Instagrams API-system. Du behöver ett konto för att komma åt utvecklarens portal som erbjuder användbara instruktioner för nybörjare. Allt vi behöver för att fråga Instagram-databasen är en “Klient ID”.

Klicka på länken Hantera klienter i den övre verktygsfältet och klicka sedan på den gröna knappen “Registrera en ny kund”. Du måste ge ansökan ett namn, en kort beskrivning och en webbadress till webbplatsen. URL-adressen och omdirigerings-URI kan vara samma värde i det här fallet bara för att vi inte behöver verifiera några användare. Fyll bara i alla värden och generera nya applikationsdetaljer.

Du får se en lång rad tecken som heter KLIENT ID. Vi behöver den här nyckeln senare när vi bygger backend-skriptet, så vi återkommer till det här avsnittet. För tillfället kan vi börja bygga vår jQuery direktsökningsapplikation.

Standard webbsida innehåll

Den faktiska HTML är väldigt smal för den mängd funktionalitet vi använder. Eftersom de flesta bilddata bifogas dynamiskt behöver vi bara några mindre element inuti sidan. Denna kod finns i index.html fil.

    Instagram Photo Instant Search App med jQuery         Obs! Inga mellanslag eller skiljetecken tillåts. Sökningar är begränsade till ett (1) sökord.

Jag använder det senaste jQuery 1.7.2-biblioteket tillsammans med två externa .css och .js-resurser. Inmatningsfältet har inget yttre formuläromslag eftersom vi inte vill någonsin skicka in formuläret och orsaka en sida omladdning. Jag har inaktiverat några tangenttryckningar inuti sökfältet så att det finns mer begränsade begränsningar när användarna skriver.

Vi kommer att fylla i alla fotodata i mellansektionens ID #photos. Det håller vår grundläggande HTML ren och lätt att läsa. Alla andra interna HTML-element kommer att läggas till via jQuery och tas bort före varje ny sökning.

Dra från API: n

Jag vill börja med att skapa vårt dynamiska PHP-skript och flytta sedan till jQuery. Min nya fil heter instasearch.php som kommer att innehålla alla viktiga backend krokar i API.

 Den första raden anger att vår returinformation är formaterad som JSON istället för rentext eller HTML. Detta är nödvändigt för att JavaScript-funktioner ska kunna läsa data korrekt. Efteråt har jag några inställningar för variabler som innehåller applikationsklient ID, användarsökvärde och den slutliga API-URL-adressen. Se till att du uppdaterar $ klient strängvärde som matchar din egen applikation.
 För att komma åt denna URL-data måste vi analysera filinnehållet eller använda cURL-funktionerna. Den anpassade funktionen get_curl () är bara en liten kod som kontrollerar den nuvarande PHP-konfigurationen.
 Om du inte har CURL aktiverad, försöker du aktivera funktionen och dra data via sitt eget funktionsbibliotek. Annars kan vi helt enkelt använda file_get_contents () som tenderar att vara långsammare, men fungerar fortfarande lika bra. Då kan vi faktiskt dra dessa data till en variabel som så:
 $ respons = get_curl ($ api); 
 Organisera & återkommande data
 Vi kunde bara returnera det här ursprungliga JSON-svaret från Instagram med all information som laddades upp. Men det finns så mycket extra data och det är väldigt irriterande att gå igenom allt. Jag föredrar att organisera Ajax-svar och dra ut exakt vilka bitar av data vi behöver.
 Först kan vi installera en tom matris för alla bilder. Sedan inuti a för varje() loop vi kommer att dra ut JSON-dataobjekten en-för-en. Vi behöver bara tre (3) specifika värden som är $ src(bildstorlek i full storlek), $ thumb(miniatyrbildswebbadress) och $ url(unik foto permalink).
 $ images = array (); om ($ svar) foreach (json_decode ($ response) -> data som $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> länk; $ bilder [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 De som inte känner till PHP-loopar kan gå vilse i processen. Fokusera inte så mycket på dessa kodfragment om du inte förstår syntaxen. Vårt utbud av bilder innehåller högst 16-20 unika poster av bilder som dras från det senaste publiceringsdatumet. Då kan vi mata ut all denna kod på sidan som ett jQuery Ajax-svar.
 print_r (str_replace ('\\ /', '/', json_encode ($ bilder))); dö(); 
 Men nu när vi har tittat bakom kulisserna kan vi hoppa in i frontend-skript. Jag har skapat en fil ajax.js som innehåller ett par händelsehanterare knutna till sökfältet. Om du fortfarande följer upp tills nu blir du upphetsad vi är så nära att slutföra!
 jQuery nyckelhändelser
 När du öppnar dokumentet först redo() händelse Jag ställer in ett par variabler. De första två beter sig som direkta målväljare för sökfältet och fotonbehållaren. Jag använder också en JavaScript-timer för att pausa sökfrågan till 900 millisekunder efter att användaren har skrivit.
 $ (dokument) .ready (funktion () var sfield = $ ("# s"); var container = $ ("# foton"); var timer; 
 Det finns bara två huvudfunktionsblock vi jobbar med. Den primära hanteraren utlöses av en .keydown () händelse när den fokuseras på sökfältet. Vi kontrollerar först om nyckelkoden matchar någon av våra förbjudna nycklar, och om det är så, negerar nyckelhändelsen. Annars rensa standardtimern och vänta 900ms innan du ringer InstaSearch ().
 / ** * nyckelkod ordlista * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = BACKSLASH * 13 = ENTER * 219 = VÄNSTER BRACKET * 220 = FRAMSTÄLLNING * 221 = HÖGRE BRACKET * / $ sfield ) .keydown (funktion (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 (funktion () instaSearch ();, 900);); 
 Varje gång du uppdaterar värdet kommer det automatiskt att hämta nya sökresultat. Det finns också många andra nyckelkoder som vi kunde ha blockerat från att utlösa Ajax-funktionen - men för många för att kunna noteras i denna handledning.
 Funktionen Ajax instaSearch ()
 Inom min nya anpassade funktion lägger vi först en “läser in” klassen i sökfältet. Den här klassen uppdaterar kamerans ikon för en ny laddnings-gifbild. Vi vill också tömma eventuella data kvar i bilderna. Frågevariabeln dras dynamiskt från det nuvarande värdet som anges i sökfältet.
 funktion instaSearch () $ (sfield) .addClass ("loading"); $ (Behållare) .empty (); var q = $ (sfield) .val (); $ .ajax (typ: 'POST', url: 'instasearch.php', data: "q =" + q, framgång: funktion (data) $ (sfield) .removeClass ("loading"); $ .each (data, funktion (jag, objekt) var ncode = ' 
'; $ (Behållare) .append (nCode); ); , fel: funktion (xhr, typ, undantag) $ (sfield) .removeClass ("loading"); $ (behållare) .html ("Fel:" + typ); );  
 Om du är bekant med funktionen .ajax () ska alla dessa parametrar bli bekanta. Jag passerar användarsökparametern “q” som POST-data. Efter framgång och misslyckande tar vi bort “läser in” klass och lägg till något svar tillbaka till #photos omslag.
 Inom framgångsfunktionen går vi igenom det slutliga JSON-svaret för att dra ut enskilda div-element. Vi kan åstadkomma denna looping med funktionen $ .each () och rikta in vår response data array. Annars kommer felmetoden direkt att mata ut något felmeddelande från Instagram API. Och det är verkligen allt som finns där!
  
 Visa demo
 Hämta källa
 
Slutgiltiga tankar
 Instagramlaget har gjort ett underbart jobb som skalar så stor ansökan. API kan vara långsamt ibland, men svardata är alltid korrekt formaterad och mycket lätt att arbeta med. Jag hoppas att den här handledningen kan visa att det finns mycket kraft som fungerar av tredjepartsprogram.
 Tyvärr tillåter inte de aktuella Instagram-sökfrågorna mer än 1 tagg i taget. Detta begränsar vår demo, men det tar verkligen inte bort någon av dess charm. Du borde kolla in liveexemplet ovan och ladda ner en kopia av min källkod för att leka med. Låt oss även veta dina tankar i det efterföljande diskussionsområdet nedan.