Guia de Hoppscotch

Paso a paso

1. 1

   Que es Hoppscotch y cuando usarlo

   Hoppscotch es ideal cuando: 1) quieres probar un endpoint rapido sin instalar nada, 2) necesitas compartir un request con un link, 3) estas en una maquina donde no puedes instalar software (cybercafe, computadora del trabajo). NO es ideal si quieres collections versionadas.

2. 2

   Abre tu navegador y ve a hoppscotch.io

   https://hoppscotch.io. Funciona en Chrome, Firefox, Safari, Edge. No requiere login. Si quieres, puedes instalarlo como PWA desde el icono de "+" en la barra de URL de Chrome.

3. 3

   Familiarizate con la UI

   Izquierda: sidebar con collections. Centro: editor del request (method, URL, headers, body, params). Derecha: response (status, headers, body, tiempo).

4. 4

   En el sidebar, click derecho en "Collections" > "Import" o usa el icono de importacion

   Veras un menu con opciones: "From File", "From URL", "From cURL", "From Insomnia", "From Postman", "From OpenAPI". Elige "From URL".

5. 5

   Pega https://api.cfdi4.com/docs/openapi-spec y click "Import"

   Hoppscotch descarga la spec OpenAPI 3.0. En unos segundos tendras las 33 peticiones organizadas por tag en el sidebar.

6. 6

   Abre una peticion del sidebar (ej: "POST /api/v1/usuario/datos-fiscales")

   La peticion se carga automaticamente en el editor central. Veras: method = POST, URL ya armada, headers vacios por ahora, body con un JSON de ejemplo.

7. 7

   Ve a la tab "Headers" debajo del URL

   Aqui es donde anades los headers HTTP. Necesitas anadir 2: Authorization y Content-Type.

8. 8

   Anade header "Content-Type: application/json"

   En la primera fila vacia, escribe "Content-Type" en la columna "Header" y "application/json" en la columna "Value". Esto le dice al servidor que el body viene en formato JSON.

9. 9

   Anade header "Authorization: Bearer sat_xxxxxxxxxxxxxxxxxxxx" (tu API key)

   En otra fila, "Authorization" y el valor "Bearer " seguido de tu API key de SAT API. Asegurate de que haya un espacio entre "Bearer" y la key.

10. 10

    Click en el icono de candado al lado del header Authorization para marcarlo como "secret"

    Esto hace que Hoppscotch oculte el valor en la UI (mostrara "***"). Util para no mostrar tu API key si alguien ve tu pantalla.

11. 11

    Click en "Send" (boton verde en la esquina superior derecha del editor)

    Hoppscotch envia el request al servidor. En la derecha aparece la respuesta: status code, tiempo en ms, tamano, headers, y body JSON formateado.

12. 12

    Revisa la respuesta

    Status 200 con {"cfdi_codigo": 1, "data": {...}} = exito. Status 4xx/5xx = error. Lee el catalogo de errores en /docs/errores.

13. 13

    Para guardar la peticion con auth, click en el icono de estrella y "Save as"

    Dale un nombre descriptivo. Esto la guarda en tu sidebar para reutilizarla despues.

14. 14

    Para compartir el request, click en el icono de "Share" arriba a la derecha

    Hoppscotch te da una URL tipo https://hoppscotch.io/... con tu request serializado. Si la pegas en otra pestana o se la mandas a alguien, la peticion se restaura.

15. 15

    Para generar codigo, click en el icono "</>" (Generate Code)

    Te da snippets en cURL, Python, JavaScript (fetch/axios), Go, PHP, etc. Elige el lenguaje que uses, copy-paste, y ya tienes codigo listo.

16. 16

    Para instalar como PWA (opcional), en Chrome click en el "+" en la barra de URL

    Te permite usar Hoppscotch como una app nativa, sin la barra del navegador, y con algunos features offline.

{
  "cfdi_codigo": 1,
  "cfdi_texto": "OK",
  "data": { ... }
}