Come costruire il tuo motore di ricerca Instagram con jQuery e PHP

Da quando Google ha implementato funzionalità di ricerca istantanee, è diventato una tendenza popolare nel web design. Ci sono alcuni divertenti esempi online come l'app Google Immagini di Michael Hart. Le tecniche sono tutte abbastanza semplici dove persino uno sviluppatore web con esperienza jQuery moderata può raccogliere API di programmazione e dati JSON.

Per questo tutorial voglio spiegare come possiamo costruire un'applicazione web di ricerca istantanea simile. Invece di estrarre immagini da Google, possiamo usare Instagram che è cresciuto enormemente in pochi anni.

Questo social network è iniziato come un'app mobile per iOS. Gli utenti possono scattare foto e condividerle con i propri amici, lasciare commenti e caricare su reti di terze parti come Flickr. Il team è stato recentemente acquisito da Facebook e ha pubblicato una nuova app per Android Market. La loro base di utenti è cresciuta enormemente e ora gli sviluppatori possono creare incredibili mini-app proprio come questa demo di instasearch.

• Visualizza la demo
• Scarica fonte

Ottenere le credenziali API

Prima di creare qualsiasi file di progetto dovremmo prima esaminare le idee dietro il sistema API di Instagram. Avrai bisogno di un account per accedere al portale dello sviluppatore che offre istruzioni utili per i principianti. Tutto ciò di cui abbiamo bisogno per interrogare il database di Instagram è a “Identificativo cliente”.

Nella barra degli strumenti superiore fai clic sul collegamento Gestisci clienti, quindi fai clic sul pulsante verde “Registra un nuovo cliente”. Dovrai fornire all'applicazione un nome, una breve descrizione e l'URL del sito web. L'URL e l'URI di reindirizzamento possono avere lo stesso valore in questa istanza solo perché non è necessario autenticare alcun utente. Basta compilare tutti i valori e generare i nuovi dettagli dell'applicazione.

Vedrai una lunga serie di caratteri chiamati IDENTIFICATIVO CLIENTE. Avremo bisogno di questa chiave più avanti quando creeremo lo script di backend, quindi torneremo su questa sezione. Per ora possiamo iniziare la costruzione della nostra applicazione di ricerca istantanea jQuery.

Contenuto della pagina Web predefinito

L'HTML effettivo è molto sottile per la quantità di funzionalità che stiamo utilizzando. Poiché la maggior parte dei dati dell'immagine viene aggiunta dinamicamente, nella pagina sono necessari solo alcuni elementi più piccoli. Questo codice si trova all'interno di index.html file.

           
 
 Nota: non sono consentiti spazi o segni di punteggiatura. Le ricerche sono limitate a una (1) parola chiave.  
 
 
   

Sto usando l'ultima libreria jQuery 1.7.2 insieme a due risorse esterne .css e .js. Il campo di ricerca di input non ha wrapper di moduli esterni perché non vogliamo mai inviare il modulo e causare il ricaricamento di una pagina. Ho disabilitato alcune sequenze di tasti all'interno del campo di ricerca in modo che ci siano restrizioni più limitate quando gli utenti digitano.

Inseriremo tutti i dati della foto nell'ID della sezione centrale #fotografie. Mantiene il nostro HTML di base pulito e facile da leggere. Tutti gli altri elementi HTML interni verranno aggiunti tramite jQuery e rimossi anche prima di ogni nuova ricerca.

Tirando dall'API

Mi piacerebbe iniziare prima creando il nostro script PHP dinamico e poi spostandomi in jQuery. Il mio nuovo file è chiamato instasearch.php che conterrà tutti gli importanti hook di backend nell'API.

 
La prima riga indica che i nostri dati di ritorno sono formattati come JSON invece di testo normale o HTML. Questo è necessario per le funzioni JavaScript per leggere correttamente i dati. Successivamente ho alcune configurazioni di variabili contenenti l'ID client dell'applicazione, il valore di ricerca utente e l'URL dell'API finale. Assicurati di aggiornare il $ cliente valore di stringa per abbinare la propria applicazione.
 
Per accedere a questi dati URL è necessario analizzare il contenuto del file o utilizzare le funzioni cURL. La funzione personalizzata get_curl () è solo un piccolo pezzetto di codice che controlla la configurazione PHP corrente.
 
Se non hai attivato CURL, tenterà di attivare la funzione e di estrarre i dati tramite la propria libreria di funzioni. Altrimenti possiamo semplicemente usare file_get_contents () che tende ad essere più lento, ma funziona comunque altrettanto bene. Quindi possiamo effettivamente inserire questi dati in una variabile in questo modo:
 
$ response = get_curl ($ api); 
 
Organizzazione e restituzione dei dati
 
Potremmo semplicemente restituire questa risposta JSON originale da Instagram con tutte le informazioni caricate. Ma ci sono così tanti dati extra ed è molto fastidioso fare il giro di tutto. Preferisco organizzare le risposte Ajax ed estrarre esattamente quali dati abbiamo bisogno.
 
Per prima cosa possiamo impostare un array vuoto per tutte le immagini. Quindi dentro a per ciascuno() loop estraiamo gli oggetti dati JSON uno per uno. Abbiamo solo bisogno di tre (3) valori specifici che sono i $ src(URL immagine a dimensione intera), $ pollice(URL immagine miniatura) e $ url(permalink fotografico unico).
 
$ images = array (); if ($ response) foreach (json_decode ($ response) -> data come $ 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));  
 
Coloro che non hanno familiarità con i loop PHP potrebbero perdersi nel processo. Non concentrarti troppo su questi frammenti di codice se non capisci la sintassi. La nostra serie di immagini conterrà al massimo 16-20 voci uniche di foto estratte dalla data di pubblicazione più recente. Quindi possiamo inviare tutto questo codice sulla pagina come risposta jQuery Ajax.
 
print_r (str_replace ('\\ /', '/', json_encode ($ images))); morire(); 
 
Ma ora che abbiamo dato un'occhiata dietro le quinte, possiamo passare allo scripting del frontend. Ho creato un file ajax.js che contiene un paio di gestori di eventi collegati al campo di ricerca. Se stai ancora seguendo fino ad ora, allora eccitatoci siamo così vicini al completamento!
 
Eventi chiave jQuery
 
Alla prima apertura del documento pronto() evento sto impostando un paio di variabili. I primi due si comportano come selettori di destinazione diretti per il campo di ricerca e il contenitore di foto. Sto anche utilizzando un timer JavaScript per mettere in pausa la query di ricerca fino a 900 millisecondi dopo che l'utente ha finito di digitare.
 
$ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); var timer; 
 
Ci sono solo due blocchi funzione principali con cui stiamo lavorando. Il gestore principale viene attivato da un evento .keydown () quando è focalizzato sul campo di ricerca. Per prima cosa controlliamo se il codice chiave corrisponde a una qualsiasi delle nostre chiavi vietate e, in tal caso, annulla l'evento chiave. Altrimenti, cancella il timer predefinito e attendi 900 ms prima di chiamare instaSearch ().
 
/ ** * glossario codice chiave * 32 = SPAZIO * 188 = COMMA * 189 = DASH * 190 = PERIODO * 191 = BACKSLASH * 13 = ENTER * 219 = STAFFA SINISTRA * 220 = AVANZAMENTO SLASH * 221 = STAFFA DESTRA * / $ (sfield ) .keydown (function (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);); 
 
Ogni volta che aggiorni il valore, andrà automaticamente a recuperare i nuovi risultati di ricerca. Ci sono anche molti altri codici chiave che avremmo potuto bloccare dall'attivazione della funzione Ajax - ma troppi per elencare in questo tutorial.
 
La funzione Ajax instaSearch ()
 
All'interno della mia nuova funzione personalizzata stiamo per prima cosa aggiungendo un “Caricamento in corso” classe sul campo di ricerca. Questa classe aggiornerà l'icona della fotocamera per una nuova immagine di caricamento GIF. Vogliamo anche svuotare tutti i dati possibili rimasti all'interno della sezione foto. La variabile di interrogazione viene estratta dinamicamente dal valore corrente inserito nel campo di ricerca.
 
function instaSearch () $ (sfield) .addClass ("caricamento"); $ (Contenitore) .empty (); var q = $ (sfield) .val (); $ .ajax (tipo: 'POST', url: 'instasearch.php', dati: "q =" + q, success: function (data) $ (sfield) .removeClass ("loading"); $ .each (dati, funzione (i, articolo) var ncode = '
 
'; $ (Contenitore) .Append (nCode); ); , errore: function (xhr, type, exception) $ (sfield) .removeClass ("loading"); $ (container) .html ("Errore:" + tipo); );  
 
Se hai familiarità con la funzione .ajax (), allora tutti questi parametri dovrebbero sembrare familiari. Sto passando il parametro di ricerca dell'utente “q” come i dati POST. In caso di successo e fallimento, rimuoveremo il “Caricamento in corso” classe e aggiungere qualsiasi risposta indietro nel #fotografie involucro.
 
All'interno della funzione di successo stiamo eseguendo il ciclo della risposta JSON finale per estrarre i singoli elementi div. Possiamo eseguire questo ciclo con la funzione $ .each () e mirare al nostro array di dati di risposta. In caso contrario, il metodo di errore emetterà direttamente qualsiasi messaggio di errore di risposta dall'API di Instagram. E questo è davvero tutto quello che c'è da fare!
 
 
 
Visualizza la demo
 
Scarica fonte
 
Pensieri finali
 
Il team di Instagram ha fatto un ottimo lavoro ridimensionando un'applicazione così straordinaria. L'API può essere lenta a volte, ma i dati di risposta sono sempre formattati correttamente e molto facili da utilizzare. Spero che questo tutorial possa dimostrare che c'è molto potere lavorando su applicazioni di terze parti.
 
Purtroppo le attuali query di ricerca di Instagram non consentono più di 1 tag alla volta. Questo è un limite per la nostra demo, ma certamente non rimuove nulla del suo fascino. Dovresti controllare l'esempio dal vivo qui sopra e scaricare una copia del mio codice sorgente con cui giocare. Inoltre fateci sapere i vostri pensieri nell'area di discussione successiva di seguito.