Comment créer une application de chargement Imgur dynamique avec jQuery et PHP

De nombreux nouveaux services Web en ligne fournissent des API d’arrière-plan aux développeurs. Ceux-ci permettent à quiconque de se connecter à une application Web et d'extraire des informations spécifiques (ou d'insérer ou de modifier des bits de données). Aujourd'hui, nous examinons spécifiquement l'API pour Imgur.

Dans ce tutoriel, je souhaite montrer comment reproduire à distance une image trouvée ailleurs en ligne et le télécharger automatiquement sur Imgur. Il est également possible de créer un formulaire gérant les images téléchargées par l'utilisateur. Mais je voulais garder la démo en ordre sans avoir à déplacer le contenu de l'utilisateur sur le serveur. Ce processus est très simple une fois que vous avez compris le fonctionnement des API. Jetez un coup d'œil à ma démo en direct pour voir exactement ce que nous allons faire, puis suivez-le!

Live Demo - Télécharger le code source

Mise en page Web

L'interface de page réelle est très simple et il serait facile de l'adapter à n'importe quel autre design. J'ai une petite zone de saisie dans laquelle l'utilisateur doit entrer une URL directe renvoyant à une image en ligne. Au lieu de soumettre un formulaire sur une autre page, nous pouvons traiter la demande via Ajax. La seule dépendance est une copie de la dernière bibliothèque jQuery.

Lorsque nous recevons une réponse du script PHP, celle-ci devrait contenir la nouvelle URL de l'image. Il existe une longue liste de paramètres de réponse renvoyés par Imgur que nous pourrions utiliser. Cela comprend le nom d'utilisateur de l'éditeur, le titre de l'image, la date de téléchargement, entre autres fragments de métadonnées. Cependant, pour cette démo, je voulais garder les choses simples et faciles à suivre.

Après avoir cliqué sur le lien Télécharger, l'image sera transférée sur Imgur. Cela prendra quelques secondes avant que nous obtenions les données de retour, qui sont ensuite retransmises en JavaScript. Cibler le lien d'ancrage #newimgurllink nous pouvons ajouter l'URL directe à la valeur href, en ajoutant le texte d'ancrage lui-même. C'est une solution très basique pour créer des liens imgur dynamiques sans actualisation de page.

Fouiller dans jQuery

Il n'y a qu'un seul gros bloc de code qui doit être exécuté à l'aide de jQuery. Cela se produit lorsque l'utilisateur clique sur #imgurupl qui appelle la nouvelle requête Ajax. J'utilise le symbole de hachage (#) pour une valeur href car nous annulons l'action d'origine à l'aide de e.preventDefault ().

La première chose à faire est de créer une variable b64ajax pour accueillir la demande Ajax. Il va pousser la valeur du champ d'entrée vers une nouvelle page appelée upload.php qui le prend comme une variable POST. Ceci est important car nous devons accéder à cette valeur d'URL et renvoyer quelque chose à l'interface.

Ceci est appliqué à la variable Ajax elle-même en exécutant b64ajax.done (). C'est une fonction qui s'exécute automatiquement une fois le rappel terminé avec un résultat Ajax. En supposant que PHP récupère une valeur de chaîne, nous savons qu'une image a été téléchargée avec succès. Nous ajoutons donc cette valeur de lien dans le code HTML de manière dynamique.

API Imgur en PHP

En cherchant des démos de l'API Imgur v3, je suis tombé sur ce merveilleux script de Stack Overflow. Il fournit une application de téléchargement d'images hébergée localement, liée directement à Imgur. Leur code fournit une base de référence intéressante pour ce que nous créons.

Maintenant, la première chose à faire avant même de coder en PHP est de vous inscrire pour obtenir une clé API. Vous pouvez vous inscrire à partir de cette page uniquement après vous être connecté à un compte. Donc, si vous n'avez pas de compte Imgur, vous devez vous inscrire (c'est gratuit). Une fois que vous avez créé une nouvelle application, un nouveau client et un ID secret sont automatiquement générés.

Lors de l'accès à des données anonymes, tout ce dont nous avons besoin est l'ID client. Les ID secrets sont utilisés pour vérifier les sessions lorsque vous utilisez OAuth pour vous connecter à des comptes d'utilisateurs. Cela peut être une fonctionnalité très bénéfique, mais pas dans le cadre de ce tutoriel. Il n’ya pas beaucoup de PHP à comprendre, je vais donc le décomposer lentement.

Évidemment $ clientid devrait contenir votre nouvel identifiant d'application. La variable URL transmise via Ajax est également définie sur une nouvelle variable. cURL est une bibliothèque populaire de fonctions utilisée pour communiquer avec les serveurs via un certain nombre de protocoles. Dans ce cas, nous devons accéder au noeud final de téléchargement Imgur, défini comme CURLOPT_URL.

Une autre idée très importante à retenir de ces variables est la configuration de l'ID client. Dans la documentation de l'API Imgur, vous remarquerez qu'il existe une mise en forme spécifique que nous devons passer dans les en-têtes de demande Ajax. Cela ressemble à: Autorisation: Client-ID YOURIDHERE? qui peut jeter certaines personnes. N'oubliez pas que vous avez besoin du texte Identité du client précédant la chaîne d'ID réelle.

Ces dernières lignes de code exécutent simplement la requête HTTP, puis renvoient exactement ce dont nous avons besoin pour passer dans jQuery. curl_exec () et curl_close () devraient être assez explicites. Notez que la fonction d’exécution retournera les données du serveur qui se trouve dans la variable. $ réponse. Depuis que nous avons demandé des données JSON au serveur, nous devons les convertir en un tableau PHP en utilisant json_decode ().

Avec ce nouveau tableau de données de réponse, il suffit d'extraire l'URL directe de l'image. Ceci peut être consulté par $ reply-> data-> link$ reply-> data contient un sous-ensemble de variables alternatives. Si vous êtes curieux à propos de ce tableau, vous pouvez exécuter le code print_r ($ reply-> data) pour voir quelles autres informations sont renvoyées. Mais finalement, pour fermer le programme, nous renvoyons l’URL du lien de réponse et terminons avec exit ().

Une grande partie de ce code deviendra plus clair une fois que vous en jouerez plus. Les API sont un moyen amusant de s'exercer à développer des applications Web, car vous apprendrez en surmontant les défis qui se présentent. N'oubliez pas que, cette démonstration fonctionnant via PHP, elle ne fonctionnera correctement que si elle est hébergée sur un serveur Web local ou distant.

Live Demo - Télécharger le code source

Dernières pensées

Imgur est l'une des API les plus déroutantes avec lesquelles j'ai travaillé en raison du système d'identifiants client spécifiques. Une fois que vous avez tout configuré, il semble fonctionner de manière très fiable - n'hésitez pas à télécharger une copie de mon code source et à construire quelque chose de similaire dans l'un de vos propres projets, ou essayez de pousser le projet un peu plus loin avec le téléchargement direct du fichier de l'utilisateur ordinateur!