Hoe je je eigen Instagram-zoekmachine kunt bouwen met jQuery en PHP

Sinds Google instant-zoekfuncties heeft ontwikkeld, is het een populaire trend in webdesign geworden. Er zijn enkele leuke voorbeelden online, zoals de Google Images-app van Michael Hart. De technieken zijn allemaal redelijk eenvoudig, zelfs een webontwikkelaar met een gemiddelde jQuery-ervaring kan programmeer-API's en JSON-gegevens ophalen.

Voor deze tutorial wil ik uitleggen hoe we een vergelijkbare webtoepassing voor direct zoeken kunnen bouwen. In plaats van afbeeldingen van Google te halen, kunnen we Instagram gebruiken die enorm is gegroeid in slechts enkele jaren.

Dit sociale netwerk is begonnen als een mobiele app voor iOS. Gebruikers kunnen foto's maken en delen met hun vrienden, opmerkingen achterlaten en uploaden naar netwerken van derden, zoals Flickr. Het team is onlangs overgenomen door Facebook en had een gloednieuwe app voor de Android Market gepubliceerd. Hun gebruikersbasis is enorm gegroeid en nu kunnen ontwikkelaars verbazingwekkende mini-apps bouwen, net als deze instasearch-demo.

• Demo bekijken
• Download de bron

API-legitimeringen verkrijgen

Voordat we projectbestanden maken, moeten we eerst kijken naar de ideeën achter het API-systeem van Instagram. Je hebt een account nodig om toegang te krijgen tot de portal van de ontwikkelaar, die handige instructies voor beginners biedt. Het enige wat we nodig hebben om de Instagram-database te bevragen, is een “klant identificatie”.

Klik in de bovenste werkbalk op de link Clients beheren en klik vervolgens op de groene knop “Registreer een nieuwe klant”. U moet de app een naam, een korte beschrijving en de URL van de website geven. De url en omgeleide URI kunnen in dit geval alleen dezelfde waarde hebben omdat we geen gebruikers hoeven te verifiëren. Vul gewoon alle waarden in en genereer de nieuwe toepassingsdetails.

Je ziet een lange reeks met de naam genaamd KLANT IDENTIFICATIE. We hebben deze sleutel later nodig bij het bouwen van het script voor de back-end, dus we gaan terug naar deze sectie. Voor nu kunnen we beginnen met de bouw van onze instant search-applicatie jQuery.

Standaard webpagina-inhoud

De werkelijke HTML is erg klein voor de hoeveelheid functionaliteit die we gebruiken. Omdat de meeste afbeeldingsgegevens dynamisch worden toegevoegd, hebben we slechts enkele kleinere elementen op de pagina nodig. Deze code is te vinden in de index.html het dossier.

           
 
 Opmerking: spaties of interpunctie zijn niet toegestaan. Zoekopdrachten zijn beperkt tot één (1) zoekwoord.  
 
 
   

Ik gebruik de nieuwste jQuery 1.7.2-bibliotheek samen met twee externe .css- en .js-bronnen. Het invoerzoekveld heeft geen buitenste omslag, omdat we het formulier nooit willen verzenden en een herladen van de pagina veroorzaken. Ik heb een aantal toetsaanslagen in het zoekveld uitgeschakeld, zodat er meer beperkingen gelden wanneer gebruikers typen.

We vullen alle fotogegevens in de middelste sectie-ID in #photos. Het houdt onze eenvoudige HTML schoon en gemakkelijk te lezen. Alle andere interne HTML-elementen worden via jQuery toegevoegd en vóór elke nieuwe zoekopdracht ook verwijderd.

Trekken van de API

Ik wil graag eerst beginnen met het maken van ons dynamische PHP-script en vervolgens naar jQuery gaan. Mijn nieuw bestand is genoemd instasearch.php die alle belangrijke backend-hooks in de API zal bevatten.

 
De eerste regel geeft aan dat onze retourgegevens zijn geformatteerd als JSON in plaats van platte tekst of HTML. Dit is nodig voor JavaScript-functies om de gegevens correct te kunnen lezen. Daarna heb ik een aantal variabelen setup met de applicatie klant-ID, gebruikers zoek waarde en de uiteindelijke API URL. Zorg ervoor dat u de update uitvoert $ client tekenreekswaarde die overeenkomt met uw eigen toepassing.
 
Om toegang te krijgen tot deze URL-gegevens, moeten we de inhoud van het bestand parsen of cURL-functies gebruiken. De aangepaste functie get_curl () is slechts een klein stukje code dat controleert tegen de huidige PHP-configuratie.
 
Als u CURL niet hebt geactiveerd, probeert dit de functie te activeren en gegevens te verzamelen via hun eigen functiesbibliotheek. Anders kunnen we simpelweg file_get_contents () gebruiken die trager zijn, maar toch net zo goed werken. Dan kunnen we deze gegevens daadwerkelijk in een variabele als volgt tikken:
 
$ response = get_curl ($ api); 
 
Gegevens ordenen en retourneren
 
We zouden deze originele JSON-reactie van Instagram kunnen retourneren met alle informatie geladen. Maar er zijn zoveel extra gegevens en het is heel vervelend om alles door te lopen. Ik geef er de voorkeur aan om Ajax-reacties te organiseren en precies uit te zoeken welke gegevens we nodig hebben.
 
Eerst kunnen we een lege array instellen voor alle afbeeldingen. Vervolgens in een foreach () loop halen we de JSON-gegevensobjecten één voor één eruit. We hebben slechts drie (3) specifieke waarden nodig die de $ src(volledige afbeeldings-URL), $ thumb(URL van miniatuurafbeelding) en $ url(unieke foto permalink).
 
$ images = array (); if ($ response) foreach (json_decode ($ response) -> data als $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> link; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 
Degenen die niet vertrouwd zijn met PHP-loops kunnen tijdens het proces verdwalen. Richt niet zozeer op deze codefragmenten als u de syntaxis niet begrijpt. Onze reeks afbeeldingen bevat maximaal 16-20 unieke ingangen van foto's getrokken uit de meest recente publicatiedatum. Dan kunnen we al deze code op de pagina uitvoeren als een reactie van jQuery Ajax.
 
print_r (str_replace ('\\ /', '/', json_encode ($ images))); dood gaan(); 
 
Maar nu we een kijkje achter de schermen hebben genomen, kunnen we in frontend scripting springen. Ik heb een bestand gemaakt ajax.js die een paar gebeurtenishandlers bevat die zijn gekoppeld aan het zoekveld. Als je tot nu toe nog steeds volgt, word dan enthousiast en we zijn bijna klaar met afronden!
 
jQuery Key Events
 
Bij het voor het eerst openen van het document klaar() gebeurtenis Ik stel een paar variabelen op. De eerste twee werken als directe doelselectoren voor het zoekveld en de foto-container. Ik gebruik ook een JavaScript-timer om de zoekopdracht te onderbreken tot 900 milliseconden nadat de gebruiker klaar is met typen.
 
$ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); var timer; 
 
Er zijn slechts twee hoofdfunctieblokken waarmee we werken. De primaire handler wordt geactiveerd door een .keydown () -gebeurtenis die is gericht op het zoekveld. We controleren eerst of de sleutelcode overeenkomt met een van onze verboden sleutels en als dat het geval is dat de sleutel is opgeheven. Wis anders de standaardtimer en wacht 900ms voordat u belt instaSearch ().
 
/ ** * keycode woordenlijst * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIODE * 191 = BACKSLASH * 13 = ENTER * 219 = LINKERBEUGEL * 220 = VOORUITSCHAKELING * 221 = JUISTE HULP * / $ (veld ) .keydown (functie (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 (function () instaSearch ();, 900);); 
 
Telkens wanneer u de waarde bijwerkt, worden er automatisch nieuwe zoekresultaten opgehaald. Er zijn ook veel andere sleutelcodes die we geblokkeerd zouden kunnen hebben om de Ajax-functie te activeren - maar te veel om op te nemen in deze tutorial.
 
De Ajax instaSearch () functie
 
In mijn nieuwe aangepaste functie voegen we eerst een toe “bezig met laden” klas in het zoekveld. In deze klasse wordt het camerapictogram bijgewerkt voor een nieuwe afbeelding voor het laden van gif. We willen ook alle mogelijke gegevens die in de fotosectie zijn overgebleven leegmaken. De queryvariabele wordt dynamisch opgehaald uit de huidige waarde die is ingevoerd in het zoekveld.
 
function instaSearch () $ (sfield) .addClass ("laden"); $ (Container) .empty (); var q = $ (sveld) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', data: "q =" + q, success: function (data) $ (sfield) .removeClass ("loading"); $ .each (data, functie (i, item) var ncode = '
 
'; $ (Container) .append (nCode); ); , error: function (xhr, type, exception) $ (sveld) .removeClass ("laden"); $ (container) .html ("Fout:" + type); );  
 
Als u bekend bent met de .ajax () -functie, moeten al deze parameters bekend voorkomen. Ik ga de gebruikerszoekparameter voorbij “q” als de POST-gegevens. Bij succes en falen verwijderen we de “bezig met laden” klasse en voeg een antwoord terug in de #photos wikkel.
 
Binnen de succesfunctie doorlopen we de uiteindelijke JSON-respons om losse div-elementen tevoorschijn te halen. We kunnen deze looping uitvoeren met de $ .each () -functie en richten op onze array met reactiegegevens. Anders zal de foutmethode direct een antwoordfoutmelding uitvoeren vanuit de Instagram API. En dat is echt alles wat er is!
 
 
 
Demo bekijken
 
Download de bron
 
Laatste gedachten
 
Het Instagram-team heeft fantastisch werk geleverd met het schalen van zo'n geweldige applicatie. De API kan soms traag zijn, maar de responsgegevens zijn altijd goed geformatteerd en zeer gemakkelijk om mee te werken. Ik hoop dat deze tutorial kan aantonen dat er veel stroom werkt van toepassingen van derden.
 
Helaas staan ​​de huidige Instagram-zoekopdrachten niet meer dan 1 tag tegelijk toe. Dit is beperkt tot onze demo, maar het verwijdert zeker geen enkele van zijn charme. Bekijk hierboven het live-voorbeeld en download een kopie van mijn broncode om mee te spelen. Laat ons ook uw mening weten op het gebied van de nabespreking hieronder.