Viele neue Online-Webdienste bieten Backend-APIs für Entwickler. Auf diese Weise kann jeder eine Verbindung zu einer Web-App herstellen und bestimmte Informationen abrufen (oder Datenbits pushen oder ändern). Heute schauen wir uns speziell die API für Imgur an.
In diesem Tutorial möchte ich Ihnen zeigen, wie Sie ein Bild, das Sie online gefunden haben, aus der Ferne spiegeln und automatisch nach Imgur hochladen können. Sie können auch ein Formular erstellen, das von Benutzern hochgeladene Bilder verarbeitet. Aber ich wollte die Demo sauber halten, ohne dass Benutzerinhalte auf den Server verschoben werden mussten. Dieser Vorgang ist sehr einfach, wenn Sie die Funktionsweise von APIs verstanden haben. Werfen Sie einen Blick auf meine Live-Demo, um genau zu sehen, was wir machen werden, und folgen Sie uns dann!
Live Demo - Quellcode herunterladen
Webseitenlayout
Die eigentliche Seitenoberfläche ist sehr einfach und für jedes andere Design leicht anpassbar. Ich habe ein kleines Eingabefeld, in das der Benutzer eine direkte URL eingeben sollte, die online auf ein Bild verweist. Anstatt ein Formular auf einer anderen Seite einzureichen, können wir die Anfrage über Ajax bearbeiten. Die einzige Abhängigkeit ist eine Kopie der neuesten jQuery-Bibliothek.
Wenn wir eine Antwort vom PHP-Skript erhalten, sollte es die neue Bild-URL enthalten. Es gibt eine lange Liste von Antwortparametern, die von Imgur zurückgegeben werden und die wir verwenden könnten. Dazu gehören der Benutzername des Uploaders, der Bildtitel, das Datum des Uploads und andere Metadatenreste. Für diese Demo wollte ich jedoch die Dinge einfach und leicht nachvollziehen.
Nachdem Sie auf den Upload-Link geklickt haben, wird das Bild auf Imgur verschoben. Dies dauert einige Sekunden, bis wir die Rückgabedaten erhalten, die dann wieder an JavaScript übergeben werden. Targeting der Ankerverbindung #newimgurllink Wir können die direkte URL an den href-Wert anhängen und den Ankertext selbst hinzufügen. Es ist eine sehr einfache Lösung zum Erstellen dynamischer Imgur-Links ohne Seitenaktualisierung.
In jQuery eintauchen
Es gibt nur einen großen Codeblock, der mit jQuery ausgeführt werden muss. Dies geschieht, wenn der Benutzer auf klickt #imgurupl das ruft die neue Ajax-Anfrage auf. Ich verwende das Hash-Symbol (#) für einen Href-Wert, da die ursprüngliche Aktion mit e.preventDefault () abgebrochen wird.
Als erstes erstellen wir eine Variable b64ajax die Ajax-Anfrage unterbringen. Der Eingabefeldwert wird auf eine neue Seite namens upload.php verschoben, die ihn als POST-Variable übernimmt. Dies ist wichtig, da wir auf diesen URL-Wert zugreifen und etwas an das Frontend zurückgeben müssen.
Dies wird durch Ausführen auf die Ajax-Variable selbst angewendet b64ajax.done (). Es ist eine Funktion, die automatisch ausgeführt wird, nachdem der Rückruf mit einem Ajax-Ergebnis beendet wurde. Angenommen, wir erhalten einen String-Wert, der von PHP zurückgegeben wird, wissen wir, dass ein Bild erfolgreich hochgeladen wurde, und fügen diesen Linkwert dynamisch in den HTML-Code ein.
Imgur-API in PHP
Bei der Suche nach Imgur v3 API-Demos stieß ich auf dieses wunderbare Skript von Stack Overflow. Es bietet eine lokal gehostete Anwendung zum Hochladen von Bildern, die direkt an Imgur gebunden ist. Ihr Code bietet eine gute Grundlage für das, was wir erstellen.
Das erste, was Sie vor dem Programmieren in PHP tun müssen, ist die Anmeldung eines API-Schlüssels. Sie können sich auf dieser Seite nur registrieren, nachdem Sie sich bei einem Konto angemeldet haben. Wenn Sie also keinen Imgur-Account haben, sollten Sie sich registrieren (kostenlos). Sobald Sie eine neue Anwendung erstellt haben, wird automatisch eine neue Client- und Geheimnummer generiert.
Für den Zugriff auf anonyme Daten benötigen wir lediglich die Client-ID. Geheime IDs werden verwendet, um Sitzungen zu überprüfen, wenn Sie mit OAuth eine Verbindung zu Benutzerkonten herstellen. Dies kann eine sehr nützliche Funktion sein, jedoch nicht im Rahmen dieses Tutorials. Es gibt nicht viel PHP, das ich verstehen kann, also baue ich es langsam auf.
Offensichtlich $ clientid sollte Ihre neue Anwendungs-ID enthalten. Die durch Ajax übergebene URL-Variable wird ebenfalls auf eine neue Variable gesetzt. cURL ist eine beliebte Bibliothek von Funktionen, die zur Kommunikation mit Servern über verschiedene Protokolle verwendet werden. In diesem Fall müssen wir auf den Imgur-Upload-Endpunkt zugreifen, der als definiert ist CURLOPT_URL.
Eine weitere wirklich wichtige Idee, die Sie von diesen Variablen nehmen müssen, ist die Einrichtung der Client-ID. In der Imgur-API-Dokumentation werden Sie feststellen, dass es eine bestimmte Formatierung gibt, die wir in die Ajax-Request-Header übergeben müssen. Das sieht so aus: Autorisierung: Client-ID YOURIDHERE? das kann einige Leute wegwerfen. Denken Sie daran, dass Sie den Text benötigen Kunden ID Vor dem eigentlichen ID-String.
Diese letzten Codezeilen führen einfach die HTTP-Anforderung aus und geben dann genau das zurück, was wir an jQuery übergeben müssen. curl_exec () und curl_close () sollten ziemlich selbsterklärend sein. Beachten Sie, dass die Ausführungsfunktion Daten vom Server zurückgibt, die in der Variablen gespeichert sind $ antworten. Da wir JSON-Daten vom Server angefordert haben, müssen wir diese mit json_decode () in ein PHP-Array konvertieren.
Mit diesem neuen Antwortdatenarray müssen wir nur die direkte Bild-URL abrufen. Dies kann durch erreicht werden $ reply-> data-> link woher $ reply-> data enthält eine Teilmenge alternativer Variablen. Wenn Sie sich für dieses Array interessieren, können Sie den Code ausführen print_r ($ reply-> data) um zu sehen, welche anderen Informationen zurückgegeben werden. Aber um das Programm zu schließen, wiederholen wir die Antwort-Link-URL und beenden mit exit ().
Viele dieser Codes werden klarer, wenn Sie mehr damit spielen. APIs sind eine sehr unterhaltsame Methode, um das Entwickeln von Webanwendungen zu üben, da Sie durch das Bewältigen von Herausforderungen lernen lernen. Denken Sie daran, dass diese Demo nur dann funktioniert, wenn sie auf einem lokalen oder Remote-Webserver gehostet wird.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Imgur ist eine der verwirrenderen APIs, mit denen ich aufgrund des spezifischen Anmeldeinformationssystems für die Client-ID gearbeitet habe. Sobald Sie alles eingerichtet haben, scheint es sehr zuverlässig zu funktionieren. Sie können gerne eine Kopie meines Quellcodes herunterladen und in einem Ihrer eigenen Projekte etwas Ähnliches erstellen oder versuchen, das Projekt mit direktem Dateiupload vom Benutzer ein wenig weiterzuführen Computer!