Hoppscotch - Kompletny Przewodnik po Open-Source API Client

Czym jest Hoppscotch?

Hoppscotch (wcześniej znany jako Postwoman) to lekki, błyskawicznie szybki i w pełni open-source'owy API client, który działa bezpośrednio w przeglądarce internetowej. Stworzony przez Liyas Thomas w 2019 roku jako alternatywa dla ciężkiego Postmana, Hoppscotch szybko zdobył popularność wśród deweloperów ceniących prostotę i wydajność.

W przeciwieństwie do tradycyjnych klientów API wymagających instalacji desktopowej aplikacji, Hoppscotch działa natychmiast - wystarczy wejść na hoppscotch.io i zacząć testować API. Zero instalacji, zero konfiguracji, natychmiastowa produktywność. Ta filozofia "instant access" przyciągnęła ponad 50 tysięcy gwiazdek na GitHub i miliony użytkowników miesięcznie.

Hoppscotch obsługuje wszystkie popularne protokoły API: REST, GraphQL, WebSocket, Server-Sent Events (SSE), Socket.IO, a nawet gRPC. Oferuje też zaawansowane funkcje jak środowiska (environments), kolekcje, pre-request scripts, testy oraz synchronizację przez chmurę. Wszystko to w przeglądarce, bez śladu na dysku.

Historia i rozwój projektu

Hoppscotch został stworzony w 2019 roku przez Liyas Thomas jako projekt open-source pod nazwą "Postwoman" - nawiązując do popularnego Postmana. Nazwa symbolizowała świeże podejście do testowania API - lżejsze, szybsze i bardziej dostępne.

W 2020 roku projekt przeszedł rebranding na "Hoppscotch", aby uniknąć prawnych problemów i stworzyć własną, unikalną tożsamość. Nazwa pochodzi od dziecięcej gry "hoppscotch" (klasyki), symbolizując przeskakiwanie między requestami.

W 2021 roku Hoppscotch otrzymał finansowanie venture capital i stał się pełnoprawnym startupem z zespołem rozwijającym wersję Enterprise. Mimo komercjalizacji, core produktu pozostał open-source na licencji MIT.

Dlaczego Hoppscotch?

Kluczowe zalety

Zero instalacji - Działa w przeglądarce, natychmiast gotowy do użycia
Błyskawiczna szybkość - Zbudowany na Vue 3 z Composition API, minimalny rozmiar
Pełny open-source - MIT License, możesz self-hostować
Wszystkie protokoły - REST, GraphQL, WebSocket, SSE, Socket.IO, gRPC
Prywatność - Opcja self-hostingu dla wrażliwych danych
Real-time - WebSocket i SSE z podglądem wiadomości na żywo
Offline support - PWA działa bez internetu
Ciemny motyw - Przyjazny dla oczu, oszczędza baterię

Hoppscotch vs Postman vs Insomnia

Cecha	Hoppscotch	Postman	Insomnia
Cena	100% darmowy	Freemium ($14/mo)	Freemium ($5/mo)
Open Source	Tak (MIT)	Nie	Częściowo
Wymaga instalacji	Nie (web)	Tak	Tak
Rozmiar aplikacji	~0 (web)	~500MB	~200MB
REST API	✅	✅	✅
GraphQL	✅	✅	✅
WebSocket	✅	✅	✅
gRPC	✅	✅	✅
SSE	✅	❌	❌
Socket.IO	✅	❌	❌
Self-hosting	✅	❌	❌
CLI	✅	✅	✅
Team sync	✅ (free)	Płatny	Płatny
Offline mode	✅ (PWA)	✅	✅

Szybki start

Metoda 1: Natychmiastowy dostęp (zalecane)

Code

Bash

# Otwórz w przeglądarce
https://hoppscotch.io

# Gotowe! Możesz zacząć testować API

Metoda 2: Self-hosting z Docker

Code

Bash

# Pojedynczy kontener
docker run -d \
  --name hoppscotch \
  -p 3000:3000 \
  hoppscotch/hoppscotch:latest

# Lub z Docker Compose
git clone https://github.com/hoppscotch/hoppscotch.git
cd hoppscotch
docker-compose up -d

Metoda 3: CLI (Hoppscotch CLI)

Code

Bash

# Instalacja przez npm
npm install -g @hoppscotch/cli

# Uruchomienie testów z kolekcji
hopp test -e environment.json collection.json

# Eksport kolekcji z Hoppscotch UI i uruchomienie lokalnie
hopp test my-api-tests.json

Metoda 4: Rozszerzenie przeglądarki

Code

Bash

# Hoppscotch Browser Extension pozwala na:
# - Omijanie CORS w requestach
# - Testowanie lokalnych API
# - Dostęp do cookies

# Instalacja z Chrome Web Store lub Firefox Add-ons

REST API Testing

Podstawowy GET request

Code

TEXT

Method: GET
URL: https://jsonplaceholder.typicode.com/posts

Headers:
  Accept: application/json

# Response: Lista postów w JSON

POST request z body

Code

TEXT

Method: POST
URL: https://api.example.com/users

Headers:
  Authorization: Bearer <<authToken>>
  Content-Type: application/json

Body (JSON):
{
  "firstName": "Jan",
  "lastName": "Kowalski",
  "email": "jan@example.com",
  "role": "developer"
}

# Response
{
  "id": 123,
  "firstName": "Jan",
  "lastName": "Kowalski",
  "email": "jan@example.com",
  "role": "developer",
  "createdAt": "2025-01-25T10:30:00Z"
}

PUT/PATCH request

Code

TEXT

Method: PUT
URL: https://api.example.com/users/<<userId>>

Headers:
  Authorization: Bearer <<authToken>>
  Content-Type: application/json

Body (JSON):
{
  "firstName": "Jan",
  "lastName": "Nowak",
  "role": "senior-developer"
}

DELETE request

Code

TEXT

Method: DELETE
URL: https://api.example.com/users/<<userId>>

Headers:
  Authorization: Bearer <<authToken>>

# Response: 204 No Content

Query Parameters

Code

TEXT

Method: GET
URL: https://api.example.com/products

Query Parameters:
  category: electronics
  minPrice: 100
  maxPrice: 500
  sort: price
  order: asc
  page: 1
  limit: 20

# Hoppscotch automatycznie buduje URL:
# https://api.example.com/products?category=electronics&minPrice=100&maxPrice=500&sort=price&order=asc&page=1&limit=20

Różne typy Body

Code

TEXT

# 1. JSON (najczęściej)
Content-Type: application/json
{
  "key": "value"
}

# 2. Form Data
Content-Type: multipart/form-data
  name: "Jan"
  file: [wybierz plik]

# 3. URL Encoded
Content-Type: application/x-www-form-urlencoded
  username=jan&password=secret

# 4. Raw Text
Content-Type: text/plain
Plain text content here

# 5. XML
Content-Type: application/xml
<?xml version="1.0"?>
<user>
  <name>Jan</name>
</user>

GraphQL

Podstawowe Query

Code

GraphQL

# Endpoint: https://api.spacex.land/graphql/

query GetLaunches {
  launchesPast(limit: 5) {
    mission_name
    launch_date_local
    rocket {
      rocket_name
      rocket_type
    }
    ships {
      name
      home_port
    }
  }
}

Query z Variables

Code

GraphQL

# Query
query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
    posts(first: 10) {
      edges {
        node {
          title
          createdAt
        }
      }
    }
  }
}

# Variables (zakładka Variables)
{
  "id": "user_123"
}

Mutation

Code

GraphQL

# Mutation
mutation CreatePost($input: CreatePostInput!) {
  createPost(input: $input) {
    id
    title
    content
    author {
      name
    }
  }
}

# Variables
{
  "input": {
    "title": "Mój pierwszy post",
    "content": "Treść posta...",
    "authorId": "user_123"
  }
}

Subscription (Real-time)

Code

GraphQL

# Subscription
subscription OnNewMessage {
  messageAdded {
    id
    content
    sender {
      name
      avatar
    }
    createdAt
  }
}

# Hoppscotch automatycznie nawiązuje WebSocket connection
# i wyświetla przychodzące wiadomości w real-time

Fragments dla reużywalności

Code

GraphQL

# Zdefiniuj fragment
fragment UserFields on User {
  id
  name
  email
  avatar
}

# Użyj w query
query GetUsers {
  activeUsers {
    ...UserFields
    lastActive
  }
  admins {
    ...UserFields
    permissions
  }
}

WebSocket Testing

Nawiązanie połączenia

Code

TEXT

URL: wss://socket.example.com

# Opcjonalne protokoły
Protocols: graphql-ws, graphql-transport-ws

# Po połączeniu status: Connected

Wysyłanie wiadomości

Code

JSON

// Subskrypcja kanału
{
  "type": "subscribe",
  "channel": "notifications",
  "userId": "user_123"
}

// Wysyłanie wiadomości
{
  "type": "message",
  "channel": "chat",
  "content": "Hello World!",
  "timestamp": "2025-01-25T10:30:00Z"
}

// Ping/Pong dla utrzymania połączenia
{
  "type": "ping"
}

Odbieranie wiadomości w real-time

Code

TEXT

# Hoppscotch wyświetla wszystkie przychodzące wiadomości
# z timestampami i formatowaniem JSON

← {"type":"pong","timestamp":1706180000}
← {"type":"message","channel":"chat","content":"Welcome!","from":"server"}
← {"type":"notification","data":{"id":1,"text":"New update available"}}

Socket.IO support

Code

TEXT

URL: https://socket-io-server.example.com

# Hoppscotch obsługuje Socket.IO z automatycznym:
# - Handshake
# - Reconnection
# - Room support
# - Acknowledgments

# Wysyłanie eventu
Event: chat:message
Data: {"text": "Hello!", "room": "general"}

# Nasłuchiwanie eventów
Listen: chat:message, user:joined, user:left

Server-Sent Events (SSE)

Połączenie SSE

Code

TEXT

URL: https://api.example.com/events/stream

Headers:
  Authorization: Bearer <<authToken>>
  Accept: text/event-stream

# Po połączeniu Hoppscotch wyświetla przychodzące eventy:
event: message
data: {"type":"update","data":{"id":1,"status":"processing"}}

event: notification
data: {"type":"alert","message":"Task completed"}

event: heartbeat
data: {"timestamp":1706180000}

SSE z retry i ID

Code

TEXT

# Serwer może wysyłać:
id: 12345
event: update
data: {"progress": 75}
retry: 3000

# Hoppscotch automatycznie:
# - Trackuje ID dla reconnection
# - Używa retry delay
# - Wyświetla wszystkie eventy

gRPC Testing

Konfiguracja gRPC

Code

TEXT

Server URL: grpc.example.com:443

# Załaduj .proto file lub użyj reflection
Proto File: user_service.proto

# Wybierz service i metodę
Service: UserService
Method: GetUser

Unary Call

Code

PROTOBUF

// Proto definition
service UserService {
  rpc GetUser (GetUserRequest) returns (User);
}

message GetUserRequest {
  string id = 1;
}

message User {
  string id = 1;
  string name = 2;
  string email = 3;
}

Code

JSON

// Request
{
  "id": "user_123"
}

// Response
{
  "id": "user_123",
  "name": "Jan Kowalski",
  "email": "jan@example.com"
}

Server Streaming

Code

PROTOBUF

service NotificationService {
  rpc StreamNotifications (StreamRequest) returns (stream Notification);
}

Code

JSON

// Request
{
  "userId": "user_123"
}

// Streaming responses (wyświetlane w real-time)
← {"id":"1","message":"Welcome!","timestamp":"..."}
← {"id":"2","message":"New feature available","timestamp":"..."}
← {"id":"3","message":"Task completed","timestamp":"..."}

Environments (Środowiska)

Tworzenie środowisk

Code

JSON

// Development Environment
{
  "name": "Development",
  "variables": [
    { "key": "baseUrl", "value": "http://localhost:3000/api" },
    { "key": "authToken", "value": "dev-token-12345" },
    { "key": "apiVersion", "value": "v1" },
    { "key": "debugMode", "value": "true" }
  ]
}

// Staging Environment
{
  "name": "Staging",
  "variables": [
    { "key": "baseUrl", "value": "https://staging.example.com/api" },
    { "key": "authToken", "value": "staging-token-67890" },
    { "key": "apiVersion", "value": "v1" },
    { "key": "debugMode", "value": "false" }
  ]
}

// Production Environment
{
  "name": "Production",
  "variables": [
    { "key": "baseUrl", "value": "https://api.example.com" },
    { "key": "authToken", "value": "prod-token-secret" },
    { "key": "apiVersion", "value": "v2" },
    { "key": "debugMode", "value": "false" }
  ]
}

Użycie zmiennych

Code

TEXT

# W URL
URL: <<baseUrl>>/<<apiVersion>>/users

# W Headers
Authorization: Bearer <<authToken>>

# W Body
{
  "debug": <<debugMode>>,
  "apiEndpoint": "<<baseUrl>>"
}

# Hoppscotch automatycznie podstawia wartości
# z aktywnego środowiska

Dynamic Variables

Code

TEXT

# Hoppscotch oferuje built-in dynamic variables:

<<$timestamp>>      # Unix timestamp: 1706180000
<<$isoTimestamp>>   # ISO date: 2025-01-25T10:30:00.000Z
<<$randomUUID>>     # UUID: f47ac10b-58cc-4372-a567-0e02b2c3d479
<<$randomInt>>      # Random integer: 42
<<$randomColor>>    # Random color: #a3f2c1
<<$randomAlpha>>    # Random string: abcxyz

# Przykład użycia
{
  "requestId": "<<$randomUUID>>",
  "timestamp": <<$timestamp>>,
  "testData": "<<$randomAlpha>>"
}

Collections (Kolekcje)

Organizacja requestów

Code

TEXT

My API Collection
├── 📁 Authentication
│   ├── POST Login
│   ├── POST Register
│   ├── POST Refresh Token
│   └── POST Logout
├── 📁 Users
│   ├── GET List Users
│   ├── GET Get User by ID
│   ├── POST Create User
│   ├── PUT Update User
│   └── DELETE Delete User
├── 📁 Products
│   ├── GET List Products
│   ├── GET Get Product
│   ├── GET Search Products
│   ├── POST Create Product
│   └── PUT Update Stock
└── 📁 Orders
    ├── GET List Orders
    ├── GET Get Order
    ├── POST Create Order
    └── PUT Update Order Status

Eksport/Import kolekcji

hoppscotch-collection.json

JSON

// hoppscotch-collection.json
{
  "v": 2,
  "name": "My API Collection",
  "folders": [
    {
      "v": 2,
      "name": "Authentication",
      "requests": [
        {
          "v": "3",
          "name": "Login",
          "method": "POST",
          "endpoint": "<<baseUrl>>/auth/login",
          "headers": [
            { "key": "Content-Type", "value": "application/json" }
          ],
          "body": {
            "contentType": "application/json",
            "body": "{\n  \"email\": \"user@example.com\",\n  \"password\": \"secret\"\n}"
          }
        }
      ]
    }
  ]
}

Import z Postman

Code

Bash

# Hoppscotch obsługuje import z:
# - Postman Collection v2.1
# - Insomnia
# - OpenAPI/Swagger
# - cURL
# - HAR (HTTP Archive)

# Po prostu przeciągnij plik lub użyj Import w UI

Pre-request Scripts

Generowanie dynamicznych danych

Code

JavaScript

// Pre-request script dla JWT
const timestamp = Date.now();
const payload = btoa(JSON.stringify({
  sub: "user_123",
  iat: Math.floor(timestamp / 1000),
  exp: Math.floor(timestamp / 1000) + 3600
}));

// Ustaw zmienną
pw.env.set("jwtPayload", payload);

// Możesz teraz użyć <<jwtPayload>> w request

Obliczanie signature

Code

JavaScript

// HMAC signature dla API
async function generateSignature(secret, message) {
  const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    "raw",
    encoder.encode(secret),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );

  const signature = await crypto.subtle.sign(
    "HMAC",
    key,
    encoder.encode(message)
  );

  return Array.from(new Uint8Array(signature))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

const timestamp = Date.now().toString();
const signature = await generateSignature(
  pw.env.get("apiSecret"),
  timestamp + pw.env.get("requestBody")
);

pw.env.set("signature", signature);
pw.env.set("timestamp", timestamp);

Request chaining

Code

JavaScript

// Pierwszy request: Login
// Zapisz token z response

// W następnym request, użyj pre-request script:
const loginResponse = pw.env.get("loginResponse");
if (loginResponse) {
  const token = JSON.parse(loginResponse).token;
  pw.env.set("authToken", token);
}

Tests (Testy)

Pisanie testów

Code

JavaScript

// Test script (wykonuje się po response)

// Sprawdź status code
pw.test("Status is 200", () => {
  pw.expect(pw.response.status).toBe(200);
});

// Sprawdź response body
pw.test("Response has correct structure", () => {
  const body = pw.response.body;
  pw.expect(body.users).toBeType("array");
  pw.expect(body.users.length).toBeGreaterThan(0);
});

// Sprawdź specific field
pw.test("First user has required fields", () => {
  const user = pw.response.body.users[0];
  pw.expect(user.id).toBeDefined();
  pw.expect(user.email).toContain("@");
  pw.expect(user.createdAt).toBeDefined();
});

// Sprawdź response time
pw.test("Response time is acceptable", () => {
  pw.expect(pw.response.time).toBeLessThan(500);
});

// Sprawdź headers
pw.test("Content-Type is JSON", () => {
  pw.expect(pw.response.headers["content-type"]).toContain("application/json");
});

// Zapisz dane do environment
pw.test("Save first user ID", () => {
  const userId = pw.response.body.users[0].id;
  pw.env.set("firstUserId", userId);
});

Uruchamianie testów z CLI

Code

Bash

# Instalacja CLI
npm install -g @hoppscotch/cli

# Uruchom testy
hopp test \
  -e environments/production.json \
  collections/api-tests.json

# Output
Running collection: API Tests
  ✓ Authentication
    ✓ Login (245ms)
    ✓ Get Profile (123ms)
  ✓ Users
    ✓ List Users (189ms)
    ✓ Create User (312ms)
    ✓ Update User (156ms)
  ✗ Products
    ✓ List Products (98ms)
    ✗ Create Product (502ms)
      - Expected status 201, got 400

Results: 6 passed, 1 failed
Duration: 1625ms

CI/CD Integration

.github/workflows/api-tests.yml

YAML

# .github/workflows/api-tests.yml
name: API Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install Hoppscotch CLI
        run: npm install -g @hoppscotch/cli

      - name: Run API tests
        run: |
          hopp test \
            -e tests/environments/ci.json \
            tests/collections/api-tests.json
        env:
          API_BASE_URL: ${{ secrets.API_BASE_URL }}
          API_TOKEN: ${{ secrets.API_TOKEN }}

Self-Hosting

Docker Compose (zalecane)

docker-compose.yml

YAML

# docker-compose.yml
version: '3.8'

services:
  hoppscotch-db:
    image: postgres:15
    container_name: hoppscotch-db
    environment:
      POSTGRES_USER: hoppscotch
      POSTGRES_PASSWORD: secretpassword
      POSTGRES_DB: hoppscotch
    volumes:
      - hoppscotch-data:/var/lib/postgresql/data
    networks:
      - hoppscotch-network

  hoppscotch-backend:
    image: hoppscotch/hoppscotch-backend:latest
    container_name: hoppscotch-backend
    environment:
      DATABASE_URL: postgresql://hoppscotch:secretpassword@hoppscotch-db:5432/hoppscotch
      JWT_SECRET: your-super-secret-jwt-key
      SESSION_SECRET: your-session-secret
      REFRESH_TOKEN_SECRET: your-refresh-secret
      VITE_BASE_URL: https://hoppscotch.yourdomain.com
      VITE_BACKEND_GQL_URL: https://hoppscotch.yourdomain.com/graphql
      VITE_BACKEND_WS_URL: wss://hoppscotch.yourdomain.com/graphql
      VITE_BACKEND_API_URL: https://hoppscotch.yourdomain.com/api
    depends_on:
      - hoppscotch-db
    networks:
      - hoppscotch-network

  hoppscotch-frontend:
    image: hoppscotch/hoppscotch-frontend:latest
    container_name: hoppscotch-frontend
    ports:
      - "3000:3000"
    environment:
      VITE_BASE_URL: https://hoppscotch.yourdomain.com
      VITE_BACKEND_GQL_URL: https://hoppscotch.yourdomain.com/graphql
      VITE_BACKEND_WS_URL: wss://hoppscotch.yourdomain.com/graphql
      VITE_BACKEND_API_URL: https://hoppscotch.yourdomain.com/api
    depends_on:
      - hoppscotch-backend
    networks:
      - hoppscotch-network

volumes:
  hoppscotch-data:

networks:
  hoppscotch-network:

Nginx Reverse Proxy

Code

NGINX

# /etc/nginx/sites-available/hoppscotch
server {
    listen 80;
    server_name hoppscotch.yourdomain.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name hoppscotch.yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/hoppscotch.yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hoppscotch.yourdomain.com/privkey.pem;

    # Frontend
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # GraphQL API
    location /graphql {
        proxy_pass http://localhost:3170/graphql;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
    }

    # REST API
    location /api {
        proxy_pass http://localhost:3170/api;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Kubernetes Deployment

hoppscotch-deployment.yaml

YAML

# hoppscotch-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: hoppscotch
  labels:
    app: hoppscotch
spec:
  replicas: 2
  selector:
    matchLabels:
      app: hoppscotch
  template:
    metadata:
      labels:
        app: hoppscotch
    spec:
      containers:
        - name: hoppscotch-frontend
          image: hoppscotch/hoppscotch-frontend:latest
          ports:
            - containerPort: 3000
          env:
            - name: VITE_BASE_URL
              valueFrom:
                configMapKeyRef:
                  name: hoppscotch-config
                  key: base-url
          resources:
            limits:
              memory: "256Mi"
              cpu: "250m"
            requests:
              memory: "128Mi"
              cpu: "100m"
---
apiVersion: v1
kind: Service
metadata:
  name: hoppscotch-service
spec:
  selector:
    app: hoppscotch
  ports:
    - port: 80
      targetPort: 3000
  type: ClusterIP
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: hoppscotch-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
spec:
  tls:
    - hosts:
        - hoppscotch.yourdomain.com
      secretName: hoppscotch-tls
  rules:
    - host: hoppscotch.yourdomain.com
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: hoppscotch-service
                port:
                  number: 80

Authentication w Hoppscotch

Basic Auth

Code

TEXT

Authorization Type: Basic Auth
Username: api_user
Password: api_secret

# Hoppscotch automatycznie generuje header:
Authorization: Basic YXBpX3VzZXI6YXBpX3NlY3JldA==

Bearer Token

Code

TEXT

Authorization Type: Bearer Token
Token: <<authToken>>

# Header:
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...

API Key

Code

TEXT

Authorization Type: API Key
Key: X-API-Key
Value: <<apiKey>>
Add to: Header (lub Query Parameter)

OAuth 2.0

Code

TEXT

Authorization Type: OAuth 2.0

# Authorization Code Flow
Grant Type: Authorization Code
Auth URL: https://auth.example.com/authorize
Token URL: https://auth.example.com/token
Client ID: your-client-id
Client Secret: your-client-secret
Redirect URL: https://hoppscotch.io/oauth
Scope: read write profile

# Po autoryzacji Hoppscotch automatycznie
# pobiera i używa access token

AWS Signature v4

Code

TEXT

Authorization Type: AWS Signature v4
Access Key: AKIAIOSFODNN7EXAMPLE
Secret Key: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Region: eu-central-1
Service: execute-api

# Hoppscotch automatycznie generuje:
# - Authorization header
# - X-Amz-Date
# - X-Amz-Security-Token (jeśli dotyczy)

Browser Extension

Instalacja

Code

Bash

# Chrome Web Store
1. Otwórz Chrome Web Store
2. Szukaj "Hoppscotch Browser Extension"
3. Kliknij "Add to Chrome"

# Firefox Add-ons
1. Otwórz Firefox Add-ons
2. Szukaj "Hoppscotch"
3. Kliknij "Add to Firefox"

Możliwości rozszerzenia

Code

TEXT

# 1. Omijanie CORS
Pozwala testować API bez problemów z CORS,
nawet dla serwerów bez odpowiednich headerów.

# 2. Dostęp do localhost
Testuj lokalne API bezpośrednio z hoppscotch.io:
http://localhost:3000/api/users

# 3. Cookies
Przekazuje cookies z przeglądarki do requestów,
przydatne dla session-based auth.

# 4. Origin header
Modyfikuje Origin header dla cross-origin requestów.

Konfiguracja rozszerzenia

Code

JSON

// Ustawienia rozszerzenia
{
  "interceptor": {
    "enabled": true,
    "mode": "browser"  // lub "proxy"
  },
  "cors": {
    "allowCredentials": true,
    "allowedOrigins": ["*"]
  },
  "localhost": {
    "ports": [3000, 3001, 8080, 8000, 5000]
  }
}

Integracje i narzędzia

OpenAPI/Swagger Import

Code

Bash

# Hoppscotch może importować:
# - OpenAPI 3.0/3.1 (YAML/JSON)
# - Swagger 2.0
# - Postman Collection
# - Insomnia Export

# Automatycznie tworzy:
# - Kolekcje z endpoints
# - Environment ze zmiennymi
# - Request body schemas
# - Authentication config

Generate Code

Code

Bash

# Hoppscotch generuje kod dla żądań w językach:
# - JavaScript (Fetch, Axios, XHR)
# - TypeScript
# - Python (requests, http.client)
# - cURL
# - Go
# - PHP
# - Ruby
# - Java
# - C#
# - Swift
# - Kotlin

# Przykład wygenerowanego kodu (Fetch)

Code

TypeScript

// Wygenerowany kod JavaScript/TypeScript
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer token123',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Jan Kowalski',
    email: 'jan@example.com'
  })
});

const data = await response.json();
console.log(data);

VS Code Extension

Code

Bash

# Hoppscotch for VS Code
# Pozwala testować API bezpośrednio z edytora

# Instalacja
code --install-extension hoppscotch.hoppscotch-vscode

# Użycie
# 1. Otwórz Command Palette (Cmd/Ctrl + Shift + P)
# 2. Wpisz "Hoppscotch"
# 3. Wybierz "Open Hoppscotch"

Keyboard Shortcuts

Code

Bash

# Globalne
Ctrl/Cmd + Enter    - Wyślij request
Ctrl/Cmd + S        - Zapisz request
Ctrl/Cmd + Shift + S - Zapisz jako nowy
Ctrl/Cmd + K        - Szukaj w kolekcjach
Ctrl/Cmd + /        - Toggle dokumentacja

# Edytor
Ctrl/Cmd + Space    - Autouzupełnianie
Ctrl/Cmd + F        - Szukaj
Ctrl/Cmd + D        - Duplikuj linię
Tab                 - Indentuj
Shift + Tab         - Usuń indent

# Nawigacja
Ctrl/Cmd + 1-9      - Przełącz między tabami
Ctrl/Cmd + W        - Zamknij tab
Ctrl/Cmd + Shift + T - Przywróć zamknięty tab

# Interface
Ctrl/Cmd + \        - Toggle sidebar
Ctrl/Cmd + ,        - Ustawienia

Cennik

Self-hosted (Open Source)

Plan	Cena	Features
Self-hosted	Darmowy	Pełna funkcjonalność, własna infrastruktura

Hoppscotch Cloud

Plan	Cena	Features
Free	$0/mo	Unlimited requests, podstawowe kolekcje
Personal	$7/mo	Historia, więcej przestrzeni
Team	$12/user/mo	Współdzielone workspace, role
Enterprise	Custom	SSO, audit logs, SLA

Co jest darmowe?

Code

TEXT

✅ Wszystkie protokoły (REST, GraphQL, WS, SSE, gRPC)
✅ Environments i Collections
✅ Pre-request scripts i Tests
✅ Browser Extension
✅ CLI
✅ Import/Export
✅ Code Generation
✅ Self-hosting
✅ Nieograniczone requesty

FAQ - Najczęściej zadawane pytania

Czy Hoppscotch jest naprawdę darmowy?

Tak, Hoppscotch jest 100% darmowy i open-source na licencji MIT. Możesz go używać, modyfikować i self-hostować bez żadnych ograniczeń. Hoppscotch Cloud oferuje płatne plany z dodatkowymi funkcjami zespołowymi, ale core funkcjonalność jest zawsze darmowa.

Czy mogę używać Hoppscotch offline?

Tak, Hoppscotch jest Progressive Web App (PWA). Po pierwszym załadowaniu strony możesz ją "zainstalować" i używać offline. Oczywiście same requesty wymagają połączenia z API, ale interface i zapisane kolekcje są dostępne offline.

Jak omijać CORS w Hoppscotch?

Zainstaluj Hoppscotch Browser Extension dla Chrome lub Firefox. Rozszerzenie działa jako proxy i automatycznie omija ograniczenia CORS. Alternatywnie możesz self-hostować Hoppscotch z własnym proxy backend.

Czy mogę zaimportować kolekcje z Postmana?

Tak, Hoppscotch obsługuje import kolekcji Postman v2.1. Eksportuj kolekcję z Postmana jako JSON i zaimportuj w Hoppscotch przez menu Import. Większość funkcji zostanie przeniesiona, choć niektóre zaawansowane scripty mogą wymagać dostosowania.

Jak bezpieczne są moje dane w Hoppscotch?

Dla maksymalnego bezpieczeństwa użyj self-hosted wersji - wtedy wszystkie dane pozostają na Twojej infrastrukturze. W wersji cloud, dane są szyfrowane w spoczynku i transmisji. Hoppscotch nigdy nie przechowuje wrażliwych danych jak tokeny w formie plain text.

Czy Hoppscotch obsługuje GraphQL subscriptions?

Tak, Hoppscotch w pełni obsługuje GraphQL subscriptions przez WebSocket. Wystarczy wybrać typ "Subscription" w GraphQL mode i Hoppscotch automatycznie nawiąże połączenie WebSocket i wyświetli przychodzące dane w real-time.

Jak udostępnić kolekcje zespołowi?

W Hoppscotch Cloud możesz tworzyć Team Workspaces i zapraszać członków zespołu. Dla self-hosted, eksportuj kolekcję jako JSON i udostępnij przez Git lub dowolny system file sharing.

Czy mogę używać zmiennych środowiskowych z systemu w CLI?

Tak, Hoppscotch CLI obsługuje zmienne środowiskowe. Możesz użyć --env flag lub zdefiniować zmienne w pliku JSON, który może odwoływać się do process.env:

Code

JSON

{
  "baseUrl": "${API_URL}",
  "token": "${API_TOKEN}"
}

Podsumowanie

Hoppscotch to idealne narzędzie dla deweloperów szukających lekkiego, szybkiego i darmowego klienta API. Działa w przeglądarce bez instalacji, obsługuje wszystkie popularne protokoły (REST, GraphQL, WebSocket, SSE, gRPC) i oferuje zaawansowane funkcje jak środowiska, kolekcje, testy i pre-request scripts.

Główne zalety Hoppscotch:

Instant access - działa od razu w przeglądarce
100% open-source - MIT License, pełna transparentność
Self-hosting - kontrola nad danymi
Wszystkie protokoły - REST, GraphQL, WS, SSE, gRPC
Zero kosztów - darmowy na zawsze dla indywidualnych użytkowników

Czy to do szybkiego testowania API podczas developmentu, czy do pełnoprawnych testów automatycznych w CI/CD - Hoppscotch dostarcza wszystko czego potrzebujesz.