Intégration de l'API principale : récupérer et afficher les utilisateurs avec DummyJSON et JSONPlaceholder

Introduction
Dans cet article, nous allons créer une visionneuse de données utilisateur professionnelle et interactive qui récupère les données de manière dynamique à l'aide d'API telles que DummyJSON et JSONPlaceholder. Ce guide étape par étape vous aidera à créer une interface utilisateur époustouflante en utilisant HTML, CSS, JavaScript, des animations et des images clés. . Impressionnez vos intervieweurs ou dynamisez votre portefeuille de projets avec cet exemple pratique.

1. Présentation des API :
Nous utiliserons deux API pour récupérer les données utilisateur :

• DummyJSON : une API polyvalente fournissant des données utilisateur fictives avec des détails tels que le nom, le sexe, l'entreprise et l'adresse. Explorez l'API DummyJSON ici.
• JSONPlaceholder : une autre excellente API pour tester avec des données utilisateur fictives. Vérifiez l'API JSONPlaceholder ici.

2. Mise en place du projet :
Prérequis :
Compréhension de base de HTML, CSS et JavaScript.
Un éditeur de code (comme VS Code).
Un navigateur Web moderne.
Étapes :
Créez un dossier de projet et incluez les fichiers suivants :
index.html
style.css
script.js
Liez les fichiers CSS et JavaScript dans votre index.html.

3. Construire l'interface utilisateur :
Nous allons créer une interface utilisateur réactive avec les sections suivantes :

En-tête : Affiche le titre du projet.
Filtres : boutons pour filtrer les utilisateurs par sexe ou par département.
Liste des utilisateurs : affiche les noms d'utilisateurs chargés dynamiquement à partir de l'API.
Popup : affiche les détails de l'utilisateur lorsqu'un utilisateur clique sur un nom.

4. Récupération de données à partir des API :
Utilisez l'API Fetch en JavaScript pour obtenir des données :

fetch('https://dummyjson.com/users')
  .then((response) => response.json())
  .then((data) => {
    const users = data.users;
    console.log(users); // Display the user data in the console
  });

5. Implémentation des fonctionnalités de filtrage et de popup :
Filtrage :
Ajoutez des boutons pour filtrer les utilisateurs par sexe ou par service. Utilisez JavaScript pour afficher les données filtrées de manière dynamique.

Popup :
Créez une fenêtre contextuelle à l'aide d'animations HTML et CSS pour afficher des informations détaillées sur l'utilisateur, notamment des informations personnelles, l'entreprise et les années d'expérience.

6. Conclusion et prochaines étapes :
Félicitations! Vous avez créé une visionneuse de données utilisateur professionnelle avec des fonctionnalités de filtrage et de popup.

Prochaines étapes :
Ajoutez des options de tri pour les utilisateurs (par exemple, alphabétique, par département).
Améliorez avec plus d'animations et de thèmes.
Déployez votre projet en ligne (Netlify ou GitHub Pages).

Ressources :
Documentation DummyJSON
API JSONPlaceholder
Guide des images clés CSS

Ressources du projet
Dépôt GitHub : Projet de visionneuse de données utilisateur dynamique
Démo en direct : consultez le projet en direct ici

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!