So erstellen Sie Ihre eigene Instagram-Suchmaschine mit jQuery und PHP

Seit Google Instant-Search-Funktionen eingeführt hat, ist es zu einem beliebten Trend im Webdesign geworden. Es gibt einige lustige Beispiele wie die Google Images-App von Michael Hart. Die Techniken sind alle recht unkompliziert, wobei selbst ein Webentwickler mit mäßiger Erfahrung mit jQuery Programmierschnittstellen und JSON-Daten erwerben kann.

Für dieses Tutorial möchte ich erklären Wie können wir eine ähnliche Webanwendung für die sofortige Suche erstellen?. Anstatt Bilder von Google zu ziehen, können wir Instagram verwenden, das in wenigen Jahren enorm gewachsen ist.

Dieses soziale Netzwerk begann als mobile App für iOS. Benutzer können Fotos aufnehmen und mit ihren Freunden teilen, Kommentare hinterlassen und in Netzwerke von Drittanbietern wie Flickr hochladen. Das Team wurde kürzlich von Facebook übernommen und hatte eine brandneue App für den Android Market veröffentlicht. Ihre Userbase ist enorm gewachsen, und Entwickler können jetzt erstaunliche Mini-Apps genauso wie diese Instasearch-Demo erstellen.

Demo anzeigen
Quelle herunterladen

API-Anmeldeinformationen abrufen

Bevor wir Projektdateien erstellen, sollten wir uns zunächst mit den Ideen hinter dem API-System von Instagram beschäftigen. Sie benötigen ein Konto, um auf das Entwicklerportal zugreifen zu können, das nützliche Anleitungen für Anfänger bietet. Um die Instagram-Datenbank abzufragen, benötigen Sie lediglich eine “Kunden ID”.

Klicken Sie in der oberen Symbolleiste auf den Link Clients verwalten und dann auf die grüne Schaltfläche “Registrieren Sie einen neuen Kunden”. Sie müssen der Anwendung einen Namen, eine kurze Beschreibung und eine Website-URL geben. Die URL und der Umleitungs-URI können in dieser Instanz nur dann denselben Wert haben, weil wir keine Benutzer authentifizieren müssen. Geben Sie einfach alle Werte ein und generieren Sie die neuen Anwendungsdetails.

Sie sehen eine lange Zeichenkette mit Namen KUNDEN ID. Wir benötigen diesen Schlüssel später, wenn Sie das Backend-Skript erstellen. Wir kehren also zu diesem Abschnitt zurück. Jetzt können wir mit dem Aufbau unserer jQuery-Suchanwendung beginnen.

Standard-Webseiteninhalt

Der tatsächliche HTML-Code ist für die von uns verwendete Funktionalität sehr gering. Da die meisten Bilddaten dynamisch angehängt werden, benötigen wir nur wenige kleinere Elemente innerhalb der Seite. Dieser Code befindet sich im index.html Datei.

    Instagram Photo Instant Search App mit jQuery         Hinweis: Keine Leerzeichen oder Satzzeichen erlaubt. Die Suche ist auf ein (1) Stichwort beschränkt.

Ich verwende die neueste jQuery 1.7.2-Bibliothek zusammen mit zwei externen .css- und .js-Ressourcen. Das Eingabesuchfeld enthält keinen äußeren Form-Wrapper, da wir das Formular niemals senden und ein Neuladen der Seite veranlassen möchten. Ich habe ein paar Tastenanschläge im Suchfeld deaktiviert, so dass beim Eingeben der Benutzer eingeschränktere Einschränkungen gelten.

Wir füllen alle Fotodaten in der ID des mittleren Abschnitts auf #Fotos. Es hält unser grundlegendes HTML sauber und einfach zu lesen. Alle anderen internen HTML-Elemente werden über jQuery hinzugefügt und auch vor jeder neuen Suche entfernt.

Von der API abziehen

Ich möchte zuerst mit dem Erstellen unseres dynamischen PHP-Skripts beginnen und dann zu jQuery wechseln. Meine neue Datei heißt instasearch.php die alle wichtigen Backend-Hooks in die API enthält.

 Die erste Zeile zeigt an, dass unsere Rückgabedaten als JSON anstelle von Klartext oder HTML formatiert sind. Dies ist notwendig, damit JavaScript-Funktionen die Daten richtig lesen können. Anschließend habe ich einige Variablen eingerichtet, die die Anwendungs-Client-ID, den Benutzersuchwert und die endgültige API-URL enthalten. Stellen Sie sicher, dass Sie das aktualisieren $ client Stringwert, der Ihrer eigenen Anwendung entspricht.
 Um auf diese URL-Daten zuzugreifen, müssen wir den Inhalt der Datei analysieren oder cURL-Funktionen verwenden. Die benutzerdefinierte Funktion get_curl () ist nur ein kleiner Code, der die aktuelle PHP-Konfiguration überprüft.
 Wenn Sie cURL nicht aktiviert haben, wird versucht, die Funktion zu aktivieren und Daten über ihre eigene Funktionsbibliothek abzurufen. Andernfalls können Sie einfach file_get_contents () verwenden, das tendenziell langsamer ist, aber dennoch genauso gut funktioniert. Dann können wir diese Daten tatsächlich in eine Variable ziehen:
 $ response = get_curl ($ api); 
 Daten organisieren und zurückgeben
 Wir könnten diese ursprüngliche JSON-Antwort von Instagram mit allen geladenen Informationen zurückgeben. Es gibt jedoch so viele zusätzliche Daten und es ist sehr ärgerlich, alles durchzugehen. Ich bevorzuge es, Ajax-Antworten zu organisieren und genau herauszufinden, welche Daten wir benötigen.
 Zuerst können wir ein leeres Array für alle Bilder einrichten. Dann in einem für jeden() Schleife ziehen wir die JSON-Datenobjekte nacheinander aus. Wir benötigen nur drei (3) spezifische Werte $ src(Bild-URL in voller Größe), $ Daumen(Miniaturbild-URL) und $ url(einzigartiger Foto-Permalink).
 $ images = array (); if ($ response) foreach (json_decode ($ response) -> Daten 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));  
 Diejenigen, die mit PHP-Schleifen nicht vertraut sind, können dabei verloren gehen. Konzentrieren Sie sich nicht so sehr auf diese Codeausschnitte, wenn Sie die Syntax nicht verstehen. Unser Bildersortiment enthält höchstens 16-20 eindeutige Einträge von Fotos, die aus dem letzten Veröffentlichungsdatum stammen. Dann können wir den gesamten Code als jQuery Ajax-Antwort auf die Seite ausgeben.
 print_r (str_replace ('\\ /', '/', json_encode ($ images))); sterben(); 
 Nun, da wir einen Blick hinter die Kulissen geworfen haben, können wir in das Frontend-Scripting einsteigen. Ich habe eine Datei erstellt ajax.js Das enthält ein paar Event-Handler, die an das Suchfeld gebunden sind. Wenn Sie bis jetzt noch weitermachen, dann freuen Sie sich auf den Abschluss!
 jQuery-Schlüsselereignisse
 Beim ersten Öffnen des Dokuments bereit() Ereignis Ich stelle ein paar Variablen auf. Die ersten beiden verhalten sich als direkte Zielselektoren für das Suchfeld und den Foto-Container. Ich benutze auch einen JavaScript-Timer, um die Suchabfrage bis 900 Millisekunden zu unterbrechen, nachdem der Benutzer die Eingabe abgeschlossen hat.
 $ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); var timer; 
 Es gibt nur zwei Hauptfunktionsbausteine, mit denen wir arbeiten. Der primäre Handler wird durch ein Ereignis .keydown () ausgelöst, wenn er sich auf das Suchfeld konzentriert. Wir prüfen zunächst, ob der Schlüsselcode mit einem unserer verbotenen Schlüssel übereinstimmt, und negiert dann das Schlüsselereignis. Deaktivieren Sie andernfalls den Standardzeitgeber und warten Sie 900 ms, bevor Sie anrufen instaSearch ().
 / ** * Tastencode-Glossar * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERIODE * 191 = BACKSLASH * 13 = ENTER * 219 = LINKES BRACKET * 220 = FORWARD SLASH * 221 = RECHTSHALTER * / $ (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 (function () instaSearch ();, 900);; 
 Bei jeder Aktualisierung des Werts werden automatisch neue Suchergebnisse abgerufen. Es gibt auch viele andere Schlüsselcodes, die wir für das Auslösen der Ajax-Funktion hätten blockieren können - aber zu viele, um in diesem Lernprogramm aufgeführt zu werden.
 Die Ajax-Funktion instaSearch ()
 In meiner neuen benutzerdefinierten Funktion fügen wir zuerst eine “Wird geladen” klasse auf das Suchfeld. Diese Klasse aktualisiert das Kamerasymbol für ein neues Ladegif-Bild. Wir möchten auch alle möglichen Daten im Fotobereich leeren. Die Abfragevariable wird dynamisch aus dem im Suchfeld eingegebenen aktuellen Wert abgerufen.
 function instaSearch () $ (sfield) .addClass ("loading"); $ (container) .empty (); var q = $ (sfield) .val (); $ .ajax (Typ: 'POST', URL: 'instasearch.php', Daten: "q =" + q, Erfolg: Funktion (Daten) $ (sfield) .removeClass ("loading"); $ .each (Daten, Funktion (i, Artikel) var ncode = ' 
'; $ (container) .append (ncode); ); , Fehler: Funktion (Xhr, Typ, Ausnahme) $ (sfield) .removeClass ("loading"); $ (container) .html ("Error:" + type); );  
 Wenn Sie mit der .ajax () - Funktion vertraut sind, sollten alle diese Parameter bekannt sein. Ich übergebe den Benutzersuchparameter “q” als die POST-Daten. Bei Erfolg und Misserfolg entfernen wir die “Wird geladen” Klasse und fügen Sie jede Antwort zurück in die #Fotos Verpackung.
 Innerhalb der Erfolgsfunktion durchlaufen wir die letzte JSON-Antwort, um einzelne div-Elemente herauszuziehen. Wir können diese Schleife mit der $ .each () - Funktion und dem Targeting unseres Antwortdatenarrays erreichen. Andernfalls gibt die Fehlermethode direkt eine Antwortfehlermeldung der Instagram-API aus. Und das ist wirklich alles, was dazu gehört!
  
 Demo anzeigen
 Quelle herunterladen
 
Abschließende Gedanken
 Das Instagram-Team hat eine wunderbare Arbeit geleistet, um eine solche großartige Anwendung zu skalieren. Die API kann zeitweise langsam sein, die Antwortdaten sind jedoch immer richtig formatiert und sehr einfach zu bearbeiten. Ich hoffe, dass dieses Tutorial zeigen kann, dass Drittanbieteranwendungen mit viel Power betrieben werden.
 Leider erlauben die aktuellen Instagram-Suchanfragen nicht mehr als 1 Tag. Dies ist einschränkend für unsere Demo, aber sie nimmt sicherlich nichts von ihrem Charme. Sie sollten das Live-Beispiel oben lesen und eine Kopie meines Quellcodes herunterladen, um damit herumzuspielen. Teilen Sie uns bitte Ihre Meinung im nachstehenden Diskussionsbereich mit.