Article original : How to Make an Image Search App in React using the Unsplash API
Unsplash est un site où vous pouvez télécharger des images gratuites et libres de droits et les utiliser comme bon vous semble.
Dans ce tutoriel, nous allons créer une application de recherche d'images en utilisant l'API Unsplash pour accéder à sa énorme collection d'images et également les télécharger.
Avant de commencer le développement de notre application, voyons à quoi elle ressemblera exactement ici.
Commençons...
Sommaire
Comment créer l'application React
Comment construire l'interface utilisateur de notre application
Comment obtenir la clé d'accès et le point de terminaison de l'API depuis Unsplash
Comment utiliser les Hooks dans notre application
Comment afficher les images dans notre application
Comment gérer les erreurs
Conclusion
Que allons-nous apprendre ?
Ce projet est principalement destiné aux débutants, mais toute personne souhaitant rafraîchir ses compétences peut suivre. Dans ce tutoriel, vous apprendrez :
Comment obtenir les points de terminaison de l'API et les clés d'accès depuis le tableau de bord des développeurs Unsplash.
Comment utiliser les hooks useState et useEffect pour récupérer des données depuis l'API.
Comment utiliser la fonction map pour afficher des images ou toute autre donnée depuis l'API.
Comment créer l'application React
Il est très facile de créer une application React – il suffit d'aller dans votre répertoire de travail dans votre IDE préféré et d'entrer la commande suivante dans le terminal :
npx create-react-app image-search-app
Si vous n'êtes pas sûr de comment configurer correctement un projet create-react-app, vous pouvez vous référer au guide officiel ici à create-react-app-dev.
Après la configuration, exécutez npm start dans le même terminal pour démarrer localhost:3000 où notre application React sera hébergée. Nous pouvons également voir toutes nos modifications là-bas.
Comment construire l'interface utilisateur de notre application
Il y aura deux sections dans l'interface utilisateur de notre application :
La section d'entrée
La section des résultats où nous afficherons les images
Dans la section d'entrée, nous avons une balise input dans laquelle nous écrirons le terme de recherche ou la requête. Nous avons également un bouton avec un gestionnaire d'événements onClick qui déclenchera la fonction responsable de la récupération des données depuis l'API.
import React from "react";
const App = () => {
return (
<>
<div className="container-fluid">
<div className="row">
<div className="col-12 d-flex justify-content-center align-items-center input">
<input
className="col-3 form-control-sm py-1 fs-4 text-capitalize border border-3 border-dark"
type="text"
placeholder="Rechercher quelque chose..."
/>
<button
type="submit"
onClick={Submit}
className="btn bg-dark text-white fs-3 mx-3"
>
Rechercher
</button>
</div>
</div>
</div>
</>
);
};
export default App;
Le résultat sera le suivant :
Dans cet article, nous ne discuterons pas de la partie stylisation de l'application. Ainsi, nous pouvons rester plus concentrés sur la partie React qui est plus nécessaire à comprendre.
Comment obtenir la clé d'accès et le point de terminaison de l'API depuis Unsplash
Obtenons ces clés d'API depuis Unsplash pour les développeurs. Suivez les étapes ci-dessous pour obtenir votre clé d'API et autres détails :
Tout d'abord, allez sur le lien ci-dessus et cliquez sur s'inscrire en tant que développeur.
Ensuite, remplissez les informations d'identification demandées :
Après cela, vous serez dirigé vers le tableau de bord du développeur. Cliquez sur le nouveau projet.
Vous serez invité à accepter tous les termes écrits là. Lisez-les si vous le souhaitez ou cochez simplement tous les termes et cliquez sur le bouton à la fin pour continuer.
Ensuite, un formulaire modal apparaîtra comme montré ci-dessous dans lequel vous devrez écrire les informations de l'application comme le nom et la description.
Ensuite, cliquez sur Créer une application.
Maintenant que notre application a été créée, nous pouvons accéder à la Clé d'accès et à la Clé secrète sous la Section des clés :
Remarquez qu'au tout début de cette page, il est écrit Demo. Cela signifie que notre application a été acceptée mais est toujours en mode développement.
Dans ce mode, nous ne pouvons faire que 50 requêtes par heure. Si nous dépassons cette limite, notre API ne fonctionnera pas et les images ne se chargeront pas.
Après cela, dirigez-vous vers la documentation et sélectionnez l'option « Rechercher des photos par mot-clé ».
Faites défiler jusqu'à la section Réponse et copiez le lien comme indiqué :
Point de terminaison de l'API
Maintenant, nous avons à la fois notre clé d'API et le point de terminaison de l'API. Continuons avec notre application.
Comment utiliser les Hooks dans notre application
Nous utiliserons les hooks useState et useEffect dans notre application. Ils nous permettront de définir les états nécessaires pour obtenir la valeur de l'entrée et rechercher dans l'API les données concernant cette valeur.
Pour que les hooks fonctionnent, nous devons les définir tout en haut de notre application comme ceci :
import React, { useState, useEffect } from "react";
Comment définir l'état en utilisant le hook useState
Comme nous l'avons discuté ci-dessus, nous utiliserons des hooks pour extraire des données de l'API en utilisant la valeur recherchée dans le champ d'entrée. Cette valeur sera lue par notre application React en utilisant le hook useState.
Nous définissons des états en utilisant ce hook pour des objectifs spécifiques. Dans cette application, nous en définirons deux : l'un pour obtenir la valeur du champ d'entrée et l'autre pour afficher les résultats récupérés depuis l'API.
const [img, setImg] = useState("");
const [res, setRes] = useState([]);
Il y a deux paramètres dans le code ci-dessus utilisés pour définir le hook useState : l'un d'eux est l'état que nous utiliserons pour stocker les valeurs, et l'autre est la fonction que nous utiliserons pour mettre à jour les valeurs de l'état. Lisez plus sur le hook useState ici.
Nous avons défini le premier état comme une chaîne vide car il sera utilisé pour stocker l'entrée de la barre de recherche (et c'est aussi une chaîne).
L'autre état est initialisé comme un tableau vide car il stockera les données récupérées depuis l'API et les affichera ensuite dans notre section de résultats.
Par défaut, nous ne pouvons obtenir que jusqu'à 10 points de données par API, mais nous pouvons dépasser cela en utilisant un paramètre per_page que nous verrons plus tard dans ce tutoriel.
Comment utiliser l'état img
L'étape suivante consiste à stocker la valeur du champ de texte d'entrée dans l'état img en utilisant l'attribut value de la balise input. Ensuite, nous ajoutons un gestionnaire d'événements onChange(). Ce gestionnaire d'événements onChange() aura une fonction qui sera utilisée pour mettre à jour l'état en utilisant e.target.value.
<input
className="col-3 form-control-sm py-1 fs-4 text-capitalize border border-3 border-dark"
type="text"
placeholder="Rechercher quelque chose..."
value={img}
onChange={(e) => setImg(e.target.value)}
/>;
Comment faire des requêtes API à Unsplash en utilisant le hook useEffect
Nous allons maintenant utiliser l'API Unsplash et la clé d'accès que nous avons acquise dans l'étape précédente pour récupérer des données et les afficher dans notre application.
Pour cela, nous aurons à nouveau besoin d'un état pour stocker les données récupérées depuis l'API, que nous avons déjà défini dans la section précédente (res, qui est initialisé comme un tableau vide à cette fin uniquement).
Il existe de nombreuses méthodes en JavaScript que nous pouvons utiliser pour récupérer des données depuis une API, mais nous utiliserons la méthode async-await – c'est de loin la plus simple.
const fetchRequest = async () => {
const data = await fetch(
`https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${Access_Key}`
);
const dataJ = await data.json();
const result = dataJ.results;
console.log(result);
setRes(result);
};
useEffect(() => {
fetchRequest();
}, []);
Remarquez que nous avons écrit ${Access_Key} – ici, nous devons écrire notre clé d'accès. Nous complétons cette étape pour sécuriser notre clé d'API car n'importe qui peut en abuser.
Dans Unsplash, nous pouvons également demander la production de notre application, et en faisant cela, nous pouvons passer en ligne avec les images qu'Unsplash a à offrir.
Pour cette raison, tout le monde obtient un ensemble différent de clés d'accès et de clés de sécurité. Il est toujours préférable de cacher ces clés aux autres afin qu'elles ne soient pas mal utilisées et que nous en payions le prix.
Dans le code ci-dessus, nous avons initialement stocké les données récupérées depuis l'API dans la variable data qui est ensuite convertie en JSON pour simplifier. Cela nous permet de lire les données et d'extraire les valeurs nécessaires, qui sont stockées dans la variable dataJ et affichées dans la console pour vérifier si nous obtenons la valeur dont nous avons besoin ou non.
API au format JSON
Et si nous ouvrons l'un des résultats de recherche ci-dessus pour voir quelles valeurs nous pouvons extraire :
{
"total": 133,
"total_pages": 7,
"results": [
{
"id": "eOLpJytrbsQ",
"created_at": "2014-11-18T14:35:36-05:00",
width: 4000,
height: 3000,
color: "#A7A2A1",
blur_hash: "LaLXMa9Fx[D%~q%MtQM|kDRjtRIU",
likes: 286,
liked_by_user: false,
description: "Un homme buvant un café.",
user: {
id: "Ul0QVz12Goo",
username: "ugmonk",
name: "Jeff Sheldon",
first_name: "Jeff",
last_name: "Sheldon",
instagram_username: "instantgrammer",
twitter_username: "ugmonk",
portfolio_url: "http://ugmonk.com/",
profile_image: {
small:
"https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",
medium:
"https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",
large:
"https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=32085a077889586df88bfbe406692202",
},
links: {
self: "https://api.unsplash.com/users/ugmonk",
html: "http://unsplash.com/@ugmonk",
photos: "https://api.unsplash.com/users/ugmonk/photos",
likes: "https://api.unsplash.com/users/ugmonk/likes",
},
},
current_user_collections: [],
urls: {
raw: "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",
full: "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",
regular:
"https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",
small:
"https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",
thumb:
"https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef",
},
links: {
self: "https://api.unsplash.com/photos/eOLpJytrbsQ",
html: "http://unsplash.com/photos/eOLpJytrbsQ",
download: "http://unsplash.com/photos/eOLpJytrbsQ/download",
},
},
// plus de photos ...
],
},
Il est préférable d'utiliser cette fonction à l'intérieur du hook useEffect car cela empêchera tout re-rendu des données si nous avons apporté des modifications à l'interface utilisateur de notre application. Pour comprendre useEffect en profondeur, cliquez ici.
Nous utilisons la fonction setRes pour mettre à jour la valeur de res d'un tableau vide à un tableau qui stockera toutes les données récupérées au format JSON comme montré ci-dessus.
Nous avons déjà donné une fonction onClick au bouton au début de notre application dans la section d'entrée. Il est maintenant temps de définir une fonction pour ce gestionnaire d'événements qui sera déclenché dès que le bouton Rechercher sera cliqué. Cette fonction appellera la fonction fetchRequest qui récupérera les données et nous montrera le résultat dans la section des résultats.
const Submit = () => {
fetchRequest();
setImg("");
};
Comment afficher les images dans notre application
Dans la section précédente, nous avons stocké les données récupérées depuis l'API dans l'état res qui les a stockées sous la forme d'un tableau. Pour obtenir ces valeurs, nous devons utiliser la méthode map.
<div className="col-12 d-flex justify-content-evenly flex-wrap">
{res.map((val) => {
return (
<>
<img
className="col-3 img-fluid img-thumbnail"
src={val.urls.small}
alt="val.alt_description"
/>
</>
);
})}
</div>;
Si nous revenons en arrière et regardons la réponse en JSON, nous trouverons un type d'information différent : URLs qui contient le chemin vers l'image. Donc ici val.urls.small est le chemin réel vers l'image, et val.alt_description est la description alternative de l'image.
Il existe différents champs à l'intérieur de "urls" qui donnent différentes données, tels que :
Raw : Image brute réelle qui a été prise par un utilisateur.
Full : Image brute au format .jpg.
Regular : Meilleur pour les usages pratiques, largeur=1080px.
Small : Parfait pour une vitesse internet lente, largeur=400px.
Thumb : Version miniature de l'image, largeur=200px.
Dans cet article, nous utiliserons small, mais il y en a d'autres comme montré ci-dessus avec lesquels nous pouvons jouer et trouver celui qui nous convient le mieux.
Produit final
Par défaut, le nombre d'éléments qui peuvent être récupérés à la fois est de 10, mais ce nombre peut être augmenté ou diminué en fonction du nombre d'images que nous voulons que notre application affiche.
Pour cela, nous devons simplement ajouter un paramètre à la fin de notre appel API (per_page) comme montré dans le code, et le mettre égal au nombre d'images que nous voulons afficher.
const fetchRequest = async () => {
const data = await fetch(
`https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${Access_Key}&per_page=20`
);
const dataJ = await data.json();
const result = dataJ.results;
console.log(result);
setRes(result);
};
Il existe de nombreux autres paramètres qu'Unsplash a à offrir. Ci-dessous se trouve une liste de quelques-uns d'entre eux :
Paramètres de l'API Unsplash
Comment gérer les erreurs
Si nous faisons une recherche rapide maintenant sur, par exemple, des drapeaux, nous obtiendrons nos images. Mais il y a encore quelques problèmes à corriger. L'un d'eux est l'erreur que nous recevons dans la console.
Erreur dans la console
Pour corriger cela, passez une clé unique à chaque enfant en utilisant l'id de l'image. Cette propriété clé indique explicitement à React l'identité de chaque enfant dans une liste. Cela empêche également les enfants de perdre leur état entre les rendus.
<div className="col-12 d-flex justify-content-evenly flex-wrap">
{res.map((val) => {
return (
<>
<img
key={val.id}
className="col-3 img-fluid img-thumbnail"
src={val.urls.small}
alt="val.alt_description"
/>
</>
);
})}
</div>;
Conclusion
Dans ce tutoriel, nous avons développé une application de recherche de photos en React en utilisant l'API Unsplash. En construisant notre application, nous avons discuté de nombreuses choses comme comment utiliser les hooks React pour obtenir des données depuis une API et les utiliser pour afficher des images dans notre application.
Il y a beaucoup plus que vous pouvez faire avec cette application pour l'étendre. Par exemple, nous pourrions ajouter un bouton aléatoire pour afficher des images aléatoires, créer une case à cocher pour basculer entre la recherche de photos ou des utilisateurs qui les ont publiées selon la préférence de l'utilisateur, ajouter un défilement infini pour afficher plus d'images, et plus encore.
Vous pouvez parcourir certains de mes autres articles basés sur des projets et adaptés aux débutants ici :