Molti nuovi servizi web online forniscono API di back-end per gli sviluppatori. Questi consentono a chiunque di connettersi a un'app Web e di estrarre informazioni specifiche (o premere o modificare bit di dati). Oggi stiamo esaminando specificamente l'API per Imgur.
In questo tutorial voglio dimostrare come è possibile eseguire il mirroring remoto di un'immagine trovata altrove online e caricarla automaticamente su Imgur. È anche possibile creare un modulo per la gestione delle immagini caricate dall'utente. Ma volevo mantenere la demo pulita senza dover spostare il contenuto dell'utente sul server. Questo processo è molto semplice una volta capito come funzionano le API. Dai un'occhiata alla mia demo live per vedere esattamente cosa faremo, quindi segui!
Demo dal vivo - Scarica il codice sorgente
Layout della pagina Web
L'interfaccia della pagina reale è molto semplice e sarebbe facile da personalizzare per qualsiasi altro progetto. Ho una piccola casella di input in cui l'utente deve inserire un URL diretto che si collega a un'immagine online. Invece di inviare un modulo su un'altra pagina, possiamo gestire la richiesta tramite Ajax. L'unica dipendenza è una copia dell'ultima libreria jQuery.
Quando otteniamo una risposta dallo script PHP, dovrebbe contenere il nuovo URL dell'immagine. C'è una lunga lista di parametri di risposta che vengono restituiti da Imgur che potremmo usare. Questo include il nome utente dell'uploader, il titolo dell'immagine, la data di caricamento, tra gli altri frammenti di metadati. Tuttavia per questa demo ho voluto mantenere le cose semplici e facili da seguire.
Dopo aver fatto clic sul link Carica, l'immagine verrà spostata su Imgur. Ci vorranno alcuni secondi prima che i dati di ritorno vengano restituiti, che vengono poi restituiti in JavaScript. Targeting del link di ancoraggio #newimgurllink possiamo aggiungere l'URL diretto al valore href e aggiungere il testo di ancoraggio stesso. È una soluzione molto semplice per la creazione di collegamenti imgur dinamici senza un aggiornamento della pagina.
Esplorando in jQuery
C'è solo un grande blocco di codice che deve essere eseguito usando jQuery. Ciò accade quando l'utente fa clic #imgurupl che chiama la nuova richiesta Ajax. Sto usando il simbolo dell'hash (#) per un valore href perché cancelliamo l'azione originale usando e.preventDefault ().
La prima cosa che facciamo è creare una variabile b64ajax per ospitare la richiesta Ajax. Spingerà il valore del campo di input su una nuova pagina chiamata upload.php che la considera come una variabile POST. Questo è importante perché dobbiamo accedere a questo valore URL e restituire qualcosa al frontend.
Questo viene applicato alla variabile Ajax stessa eseguendo b64ajax.done (). È una funzione che si avvia automaticamente dopo che la callback termina con un risultato Ajax. Supponendo di ottenere un valore di stringa passato da PHP, sappiamo che un'immagine è stata caricata con successo, e quindi aggiungiamo questo valore di collegamento nel codice HTML in modo dinamico.
API Imgur in PHP
Quando ho cercato le demo di Imgur API v3 mi sono imbattuto in questo meraviglioso script di Stack Overflow. Fornisce un'applicazione di caricamento delle immagini ospitata localmente legata direttamente a Imgur. Il loro codice fornisce una buona base per ciò che stiamo creando.
Ora la prima cosa che devi fare prima ancora di programmare in PHP è iscriversi per una chiave API. È possibile registrarsi da questa pagina solo dopo aver effettuato l'accesso a un account. Quindi se non hai un account Imgur devi registrarti (è gratuito). Una volta creata una nuova applicazione, questo genererà automaticamente un nuovo client e un ID segreto.
Quando si accede a dati anonimi tutto ciò di cui abbiamo bisogno è l'ID cliente. Gli ID segreti vengono utilizzati per verificare le sessioni quando si utilizza OAuth per connettersi agli account utente. Può essere una funzionalità molto utile, ma non nell'ambito di questo tutorial. Non c'è un sacco di PHP da capire, quindi lo analizzerò lentamente.
Ovviamente $ clientid dovrebbe contenere il tuo nuovo ID applicazione. Anche la variabile URL passata tramite Ajax è impostata su una nuova variabile. cURL è una popolare libreria di funzioni utilizzate per comunicare con i server tramite numerosi protocolli. In questo caso è necessario accedere all'endpoint di caricamento Imgur definito come CURLOPT_URL.
Un'altra idea davvero importante da tenere lontana da queste variabili è l'impostazione dell'ID client. All'interno della documentazione API di Imgur noterete che esiste una specifica formattazione che dobbiamo passare nelle intestazioni delle richieste Ajax. Assomiglia a? Autorizzazione: ID cliente TUO? che può allontanare alcune persone. Ricorda solo che hai bisogno del testo Identificativo cliente precedente la stringa ID effettiva.
Queste ultime righe di codice eseguono semplicemente la richiesta HTTP e restituiscono esattamente ciò che dobbiamo passare in jQuery. curl_exec () e curl_close () dovrebbero essere abbastanza auto-esplicativi. Si noti che la funzione di esecuzione restituirà i dati dal server che è contenuto nella variabile $ risposta. Poiché abbiamo richiesto i dati JSON dal server, abbiamo bisogno di convertirli in un array PHP usando json_decode ().
Con questo nuovo array di dati di risposta abbiamo solo bisogno di estrarre l'URL dell'immagine diretta. Questo è accessibile da $ Reply-> Data-> Link dove $ Reply-> Dati contiene un sottoinsieme di variabili alternative. Se sei curioso di questo array potresti eseguire il codice print_r ($ reply-> Dati) per vedere quali altre informazioni vengono restituite. Ma alla fine di chiudere il programma echeggiamo l'URL del link di risposta e terminiamo con exit ().
Un sacco di questo codice diventerà più chiaro una volta che lo stai giocando di più. Le API sono un modo così divertente per esercitarsi nello sviluppo di applicazioni web perché puoi imparare superando le sfide lungo la strada. Ricorda che poiché questa demo è in esecuzione tramite PHP, funzionerà correttamente solo se ospitata su un server Web locale o remoto.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
Imgur è una delle API più confuse con cui ho lavorato a causa del sistema di credenziali ID cliente specifico. Una volta che hai configurato tutto, sembra che funzioni in modo molto affidabile - sentiti libero di scaricare una copia del mio codice sorgente e di costruire qualcosa di simile in uno dei tuoi progetti, o provare a portare il progetto un po 'oltre con il caricamento diretto del file da parte dell'utente computer!