Hoppscotch

Écosystème de développement d’API open-source et alternative légère à Postman pour tester les API REST, GraphQL, WebSocket et temps réel.

Installation

Web et bureau

Commande	Description
Naviguer vers `hoppscotch.io`	Ouvrir l’application web Hoppscotch (aucune installation nécessaire)
Télécharger depuis `hoppscotch.io/download`	Installer l’application de bureau (macOS, Windows, Linux)
Se connecter avec GitHub, Google ou email	Créer un compte pour la synchronisation d’équipe
Option d’installation PWA dans le navigateur	Installer comme Progressive Web App

Installation CLI

Commande	Description
`npm install -g @hoppscotch/cli`	Installer le CLI globalement avec npm
`npx @hoppscotch/cli`	Exécuter le CLI sans l’installer
`hopp --version`	Afficher la version du CLI
`hopp --help`	Afficher l’aide du CLI

Installation auto-hébergée

Commande	Description
`docker pull hoppscotch/hoppscotch`	Télécharger l’image Docker
`docker compose up -d`	Démarrer l’instance auto-hébergée

Docker Compose auto-hébergé

# docker-compose.yml pour Hoppscotch auto-hébergé
version: "3"
services:
  hoppscotch:
    image: hoppscotch/hoppscotch:latest
    ports:
      - "3000:3000"   # Interface web
      - "3100:3100"   # Tableau de bord admin
      - "3170:3170"   # API backend
    environment:
      DATABASE_URL: postgresql://user:pass@db:5432/hoppscotch
      JWT_SECRET: your-jwt-secret-here
      TOKEN_SALT_COMPLEXITY: 10
      MAGIC_LINK_TOKEN_VALIDITY: 3
      REFRESH_TOKEN_VALIDITY: 604800000
      ACCESS_TOKEN_VALIDITY: 86400000
      VITE_ALLOWED_AUTH_PROVIDERS: GITHUB,GOOGLE,EMAIL
    depends_on:
      - db

  db:
    image: postgres:15
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: hoppscotch

volumes:
  postgres_data:

Requêtes HTTP

Effectuer des requêtes

Commande	Description
Sélectionner la méthode (GET, POST, PUT, DELETE, PATCH)	Choisir la méthode HTTP depuis le menu déroulant
Entrer l’URL dans la barre d’adresse	Définir le point de terminaison de la requête
Cliquer sur “Send”	Exécuter la requête
`Ctrl + Enter`	Envoyer la requête (raccourci clavier)
`Ctrl + G`	Envoyer et télécharger la réponse
`Ctrl + K`	Ouvrir la palette de commandes

Corps de la requête

Commande	Description
Cliquer sur l’onglet “Body” → sélectionner le type	Définir le format du corps de la requête
Sélectionner “application/json”	Corps JSON (le plus courant)
Sélectionner “multipart/form-data”	Téléversement de fichiers
Sélectionner “application/x-www-form-urlencoded”	Données de formulaire
Sélectionner “text/plain”	Corps en texte brut
Sélectionner “application/xml”	Corps XML
Sélectionner “Binary”	Données binaires brutes

En-têtes et paramètres

Commande	Description
Cliquer sur l’onglet “Headers” → Ajouter un en-tête	Ajouter des en-têtes de requête personnalisés
Cliquer sur l’onglet “Parameters”	Ajouter des paramètres de requête URL
Mode d’édition en masse pour les en-têtes	Coller plusieurs en-têtes à la fois
Basculer un en-tête actif/inactif	Désactiver sans supprimer
Utiliser `<<variable>>` dans les valeurs	Référencer les variables d’environnement

Inspection de la réponse

Commande	Description
Voir le corps de la réponse	JSON, HTML, XML, binaire, image
Cliquer sur l’onglet “Headers” de la réponse	Inspecter les en-têtes de réponse
Code de statut et temps affichés	Statut HTTP, latence, taille
Cliquer sur “Copy” dans la réponse	Copier la réponse dans le presse-papiers
Cliquer sur “Download”	Télécharger la réponse en fichier
Réponse JSON auto-formatée	Vue en arbre dépliable
Cliquer sur “Timeline”	Voir la chronologie requête/réponse

Exemple de requête

Method:  POST
URL:     https://api.example.com/users
Headers:
  Content-Type: application/json
  Authorization: Bearer <<auth_token>>

Body (JSON):
{
  "name": "Alice Smith",
  "email": "alice@example.com",
  "role": "admin"
}

Response: 201 Created (145ms, 234 B)
{
  "id": 42,
  "name": "Alice Smith",
  "email": "alice@example.com",
  "role": "admin",
  "created_at": "2024-01-15T10:30:00Z"
}

Collections

Gestion des collections

Commande	Description
Cliquer sur ”+” dans le panneau Collections	Créer une nouvelle collection
Clic droit sur la collection → “New Request”	Ajouter une requête à la collection
Clic droit sur la collection → “New Folder”	Organiser avec des sous-dossiers
Glisser les requêtes entre les dossiers	Réordonner les éléments de la collection
Clic droit → “Duplicate”	Cloner une collection
Clic droit → “Properties”	Modifier les paramètres de la collection
Clic droit → “Delete”	Supprimer la collection
`Ctrl + Shift + P`	Rechercher dans les collections

Import et export

Commande	Description
Cliquer sur “Import” → sélectionner le fichier	Importer une collection
Clic droit → “Export”	Exporter la collection en JSON
Import depuis Postman Collection v2	Compatibilité Postman
Import depuis une spécification OpenAPI/Swagger	Générer automatiquement les requêtes
Import depuis Insomnia	Compatibilité Insomnia
Import depuis cURL	Coller une commande cURL
Import depuis HAR	Importer une archive HTTP

Exemples d’import

Formats d'import pris en charge :
  - Hoppscotch Collection (JSON natif)
  - Postman Collection v2
  - OpenAPI 3.0 / Swagger 2.0
  - Insomnia v4
  - Commandes cURL
  - HAR (HTTP Archive)

Import depuis cURL :
  Coller une commande cURL directement dans la barre d'URL
  Hoppscotch analyse automatiquement la méthode, les en-têtes, le corps et l'URL

Variables d’environnement

Gestion des environnements

Commande	Description
Cliquer sur “Environments” dans la barre latérale	Ouvrir le gestionnaire d’environnements
Cliquer sur ”+” pour créer un environnement	Créer un nouvel environnement
Ajouter des paires `clé: valeur`	Définir les variables
Utiliser `<<nom_variable>>` dans les requêtes	Référencer une variable dans n’importe quel champ
Sélectionner l’environnement dans le menu déroulant	Activer un environnement
Cliquer sur l’onglet “Global”	Définir des variables globales (toujours actives)
Clic droit → “Export”	Exporter l’environnement en JSON
Clic droit → “Duplicate”	Cloner l’environnement

Types de variables

Type	Description
Variable régulière	Visible dans l’interface, exportée dans les collections
Variable secrète	Masquée dans l’interface, non exportée
Variable globale	Disponible dans tous les environnements
Variable d’environnement	Disponible uniquement quand l’environnement est actif

Exemple d’environnement

Environnement : "Production"
┌───────────────┬──────────────────────────────┬──────────┐
│ Clé           │ Valeur                       │ Type     │
├───────────────┼──────────────────────────────┼──────────┤
│ base_url      │ https://api.example.com      │ Regular  │
│ api_version   │ v2                           │ Regular  │
│ auth_token    │ eyJhbGciOiJIUzI1NiIsIn...    │ Secret   │
│ timeout       │ 30000                        │ Regular  │
└───────────────┴──────────────────────────────┴──────────┘

Utilisation dans les requêtes :
  URL :    <<base_url>>/<<api_version>>/users
  En-tête : Authorization: Bearer <<auth_token>>

Authentification

Types d’authentification

Commande	Description
Sélectionner “Bearer Token”	Ajouter l’authentification par Bearer token
Sélectionner “Basic Auth”	Authentification nom d’utilisateur/mot de passe
Sélectionner “OAuth 2.0”	Configurer le flux OAuth 2.0
Sélectionner “API Key”	Ajouter une clé API dans l’en-tête ou le paramètre de requête
Sélectionner “AWS Signature”	Authentification AWS Signature V4
Sélectionner “Inherit from parent”	Hériter l’authentification de la collection
Sélectionner “None”	Supprimer l’authentification
Les champs de token supportent `<<variables>>`	Utiliser des variables d’env dans les tokens d’auth

Configuration OAuth 2.0

Configuration OAuth 2.0 :
  Grant Type :       Authorization Code
  Auth URL :         https://auth.example.com/authorize
  Token URL :        https://auth.example.com/token
  Client ID :        <<client_id>>
  Client Secret :    <<client_secret>>
  Scope :            read write
  Redirect URI :     Auto-configuré

Types de grant supportés :
  - Authorization Code (+ PKCE)
  - Client Credentials
  - Implicit
  - Password Credentials

Tests en temps réel

WebSocket

Commande	Description
Cliquer sur “Realtime” → “WebSocket”	Ouvrir le client WebSocket
Entrer l’URL `wss://`	Définir le point de terminaison WebSocket
Cliquer sur “Connect”	Établir la connexion
Taper un message → cliquer sur “Send”	Envoyer un message au serveur
Voir les messages dans le panneau de log	Surveiller les messages entrants/sortants
Cliquer sur “Disconnect”	Fermer la connexion
Ajouter des protocoles/en-têtes	Configurer les paramètres de connexion

Server-Sent Events (SSE)

Commande	Description
Cliquer sur “Realtime” → “SSE”	Tester les Server-Sent Events
Entrer l’URL du point de terminaison SSE	Définir l’URL du flux d’événements
Cliquer sur “Connect”	Commencer à recevoir les événements
Événements journalisés en temps réel	Surveiller le flux d’événements
Cliquer sur “Disconnect”	Arrêter la réception

MQTT

Commande	Description
Cliquer sur “Realtime” → “MQTT”	Tester les connexions MQTT
Entrer l’URL `mqtt://` ou `wss://`	Définir l’URL du broker MQTT
Définir le Client ID, nom d’utilisateur, mot de passe	Configurer les identifiants
S’abonner aux topics	Écouter les messages
Publier sur les topics	Envoyer des messages

Socket.IO

Commande	Description
Cliquer sur “Realtime” → “Socket.IO”	Tester les connexions Socket.IO
Entrer l’URL du serveur	Définir le point de terminaison Socket.IO
Écouter les événements	S’abonner aux événements nommés
Émettre des événements avec des données	Envoyer des événements nommés
Voir le statut de connexion	Surveiller connexion/déconnexion

GraphQL

Tests GraphQL

Commande	Description
Cliquer sur l’onglet “GraphQL”	Passer en mode GraphQL
Entrer l’URL du point de terminaison GraphQL	Définir l’URL du serveur GraphQL
Écrire la requête dans le panneau d’édition	Composer la requête GraphQL
Cliquer sur “Schema” pour récupérer le schéma	Charger le schéma du serveur pour l’autocomplétion
Ajouter des variables dans le panneau Variables	Définir les variables de requête en JSON
Ajouter des en-têtes pour l’authentification	Définir les en-têtes d’authentification
Cliquer sur “Run” ou `Ctrl + Enter`	Exécuter la requête
Utiliser l’autocomplétion depuis le schéma	Obtenir des suggestions de champs

Exemple GraphQL

Endpoint: https://api.example.com/graphql

Query:
  query GetUsers($limit: Int!) {
    users(limit: $limit) {
      id
      name
      email
      posts {
        title
        createdAt
      }
    }
  }

Variables:
  {
    "limit": 10
  }

Headers:
  Authorization: Bearer <<auth_token>>

Utilisation du CLI

Exécution de collections

Commande	Description
`hopp test collection.json`	Exécuter les tests de la collection
`hopp test collection.json -e environment.json`	Exécuter avec un environnement
`hopp test collection.json --delay 500`	Délai entre les requêtes (ms)
`hopp test collection.json --reporter junit`	Rapport de tests au format JUnit
`hopp test collection.json --reporter json`	Rapport de tests au format JSON
`hopp test collection.json --bail`	Arrêter au premier échec
`hopp test collection.json --env-var KEY=VALUE`	Remplacer une variable d’environnement

Exemples CLI

# Exécuter une collection avec un environnement
hopp test api-tests.json -e production.json

# Exécuter avec un délai et arrêter au premier échec
hopp test api-tests.json --delay 1000 --bail

# Générer un rapport JUnit pour CI/CD
hopp test api-tests.json --reporter junit > results.xml

# Remplacer des variables spécifiques
hopp test api-tests.json \
  --env-var "base_url=https://staging.example.com" \
  --env-var "auth_token=test-token-123"

# Exemple de pipeline CI/CD
hopp test api-tests.json -e staging.json --bail --reporter junit

Scripts pré-requête et post-requête

Scripting

Commande	Description
Cliquer sur l’onglet “Pre-request”	Ajouter un script qui s’exécute avant la requête
Cliquer sur l’onglet “Tests”	Ajouter un script qui s’exécute après la réponse
`pw.env.set("key", "value")`	Définir une variable d’environnement
`pw.env.get("key")`	Obtenir une variable d’environnement
`pw.expect(response.status).toBe(200)`	Vérifier le code de statut
`pw.expect(response.body).toHaveProperty("id")`	Vérifier une propriété du corps

Exemples de scripts de test

// Pré-requête : Générer un horodatage
pw.env.set("timestamp", Date.now().toString());

// Pré-requête : Générer un ID aléatoire
pw.env.set("random_id", Math.random().toString(36).slice(2));

// Test : Vérifier le code de statut
pw.test("Status is 200", () => {
  pw.expect(pw.response.status).toBe(200);
});

// Test : Vérifier le corps de la réponse
pw.test("Response has user data", () => {
  const body = pw.response.body;
  pw.expect(body).toHaveProperty("id");
  pw.expect(body).toHaveProperty("name");
  pw.expect(body.name).toBe("Alice");
});

// Test : Vérifier le temps de réponse
pw.test("Response is fast", () => {
  pw.expect(pw.response.status).toBeLessThan(500);
});

// Test : Sauvegarder le token pour la prochaine requête
pw.test("Extract auth token", () => {
  const token = pw.response.body.access_token;
  pw.env.set("auth_token", token);
});

Raccourcis clavier

Globaux

Raccourci	Description
`Ctrl + Enter`	Envoyer la requête
`Ctrl + K`	Palette de commandes
`Ctrl + S`	Sauvegarder la requête courante
`Ctrl + Shift + P`	Rechercher dans les collections
`Ctrl + /`	Basculer la barre latérale
`Alt + ↑`	Requête précédente dans l’historique
`Alt + ↓`	Requête suivante dans l’historique
`F11`	Basculer le plein écran

Équipes et collaboration

Commande	Description
Créer une équipe depuis la barre latérale	Configurer l’espace de travail d’équipe
Inviter des membres par email	Ajouter des collaborateurs
Collections partagées	Bibliothèques de requêtes à l’échelle de l’équipe
Environnements partagés	Ensembles de variables à l’échelle de l’équipe
Collaboration en temps réel	Voir les modifications de l’équipe en direct
Contrôle d’accès basé sur les rôles	Rôles propriétaire, éditeur, lecteur

Bonnes pratiques

Organiser les collections par domaine d’API — Regroupez les endpoints liés dans des collections et utilisez des dossiers par type de ressource (utilisateurs, commandes, produits) pour garder les choses faciles à trouver.
Utiliser les environnements pour staging vs production — Créez des environnements séparés pour dev, staging et production avec les mêmes noms de variables mais des valeurs différentes. Basculez en un clic.
Stocker les secrets comme variables secrètes — Marquez les clés API et tokens comme type “secret” pour qu’ils soient masqués dans l’interface et exclus des exports.
Utiliser les scripts pré-requête pour l’auth — Générez des horodatages, calculez des signatures ou rafraîchissez des tokens automatiquement avant chaque requête au lieu de les copier manuellement.
Écrire des tests pour les endpoints critiques — Ajoutez des scripts de test pour vérifier les codes de statut, la structure de la réponse et les valeurs clés. Exécutez-les via le CLI dans les pipelines CI/CD.
Importer depuis les spécifications OpenAPI — Quand vous travaillez avec des API documentées, importez la spécification OpenAPI/Swagger pour générer automatiquement tous les endpoints avec les paramètres corrects.
Utiliser l’authentification au niveau de la collection — Définissez l’authentification au niveau de la collection et utilisez “Inherit from parent” dans les requêtes individuelles pour éviter de dupliquer la configuration d’auth.
Exporter les collections vers le contrôle de version — Exportez les collections en JSON et committez-les dans votre dépôt pour le versioning et le partage en équipe.
Utiliser le CLI en CI/CD — Ajoutez hopp test à votre pipeline pour exécuter les tests d’API à chaque déploiement, garantissant que les endpoints fonctionnent avant la mise en production.
Auto-héberger pour les API sensibles — Si vous testez des API internes ou sensibles, déployez la version Docker auto-hébergée pour garder toutes les données dans votre infrastructure.