Ein Frontend bauen, bevor die API fertig ist. (Deutsch (German))

Ein Frontend bauen, bevor die API fertig ist.

Saturday, 13 December 2025

//

15 minute read

Comments Raw Edit
API Development ASP.NET Core LLM Mock APIs Testing

Einleitung

Wie oft wurden Sie blockiert warten auf Backend-APIs bereit zu sein, oder verbrachte Stunden Wartung spröde Mock-Daten, die den Moment Anforderungen ändern wird stagnieren

Eingabe mostlylucid.mockllmapi Eine Produktion von - ready ASP-. ®NET Core Spoting-Plattform, die Large Language Models verwendet, um realistische , kontextabhängige API-Antworten auf der Fly-MSC4 zu generieren Anstatt JSON-Fixtures zu erhalten, erhältst du intelligente Mocks, die sich an deine Anfragen anpassen und den Zustand über Anrufe hinweg erinnern.

Was es unterstützt Jedes Protokoll, das du benötigst, ist ,- , REST-, , GraphQL , , , gRPC , , , SignalR ,, , Server , - , Sende Events , und OpenAPI , . , Im Gegensatz zu statischen Fixtures werden die Antworten dynamisch basierend auf deinem Anforderungskontext generiert.

NuGet NuGet GitHub-Freigabe Lizenzierungsverbot

Drei Möglichkeiten, es zu nutzen

Du kannst meistlucid-.-mockllmapi auf drei Arten verwenden, je nachdem, wie isoliert du deine dev-Umgebung haben willst.

  1. ASP-.-NET Core NuGet-Paket Zu Ihren bestehenden Projekten hinzufügen
  2. Standalone CLI-Werkzeug Ausführbare Plattform ausführbares Herunterladen von Freigaben)
  3. Dockerbehältnis Keine Installation erforderlich

Das Killer-Feature-Feuerbild des Kontextspeichers

Vollständiger Leitfaden API Kontexte Dokumentation

Traditionelle Mock-APIs haben einen fatalen Fehler ,: , jede Anfrage ist unabhängig , . , Holen Sie sich einen Benutzer mit ID , 42, , dann holen sie ihre Aufträge , und Sie erhalten Bestellungen für die Benutzer-ID , 99. , keine Konsistenz .

API Kontexte Lösen Sie dies mit gemeinsamem Speicher über verwandte Anfragen hinweg.

// Request 1: Get a user
// Note: 'context' is a simple query parameter - no cookies or sessions needed
fetch('/api/users/123?context=checkout-session')
// Response: { id: 42, name: "Alice Smith", email: "[email protected]" }

// Request 2: Get orders (same context parameter)
fetch('/api/orders?userId=42&context=checkout-session')
// Response: { userId: 42, customerName: "Alice Smith", items: [...] }
// Perfect! Same user, consistent data

Die LLM sieht frühere Anfragen im gleichen Kontext und erzeugt konsistente Daten . Dies ist der Spiel-Wechsler für Multi---Schritt-Workflows

Merkmale

Lebenszyklus

  • Automatisches Ablaufdatum nach Inaktivitäts-Minuten
  • Jede Anfrage erfrischt den Timer

Verhalten

  • Intelligente Extraktion aller Felder aus den Antworten

Sicherheit

  • Null Speicher-Leaks Kontexte reinigen sich selbst

Anwendungsfälle

  • Perfekt für CI-/-CD ohne Zustand zwischen den Läufen

Schnellstart

Option - NuGet-Paket

dotnet add package mostlylucid.mockllmapi

// Program.cs
builder.Services.AddLLMockApi(builder.Configuration);
app.MapLLMockApi("/api/mock");

Option CLI-Werkzeug

# Download from https://github.com/scottgal/LLMApi/releases
llmock serve --port 5000

Option „3:" Docker

Vollständiger Leitfaden Anleitung für den Einsatz von Docker

git clone https://github.com/scottgal/LLMApi.git
cd LLMApi
docker compose up -d

Voraussetzungen für das LLM-Backend

Du brauchst einer derLM Studio oder LM-Studio

# Recommended: Ollama with ministral-3:3b (ultra-fast, accurate JSON generation)
ollama pull ministral-3:3b

Siehe Ollama Models Guide für alle Modellempfehlungen und Vergleiche

Versuchen Sie es sofort

Sobald Sie ausgeführt haben, machen Sie Ihre erste Anfrage.

curl http://localhost:5000/api/mock/users
# Response: [{"id": 1, "name": "Alice Johnson", "email": "[email protected]"}, ...]

Das ist es !. Sie haben jetzt eine Arbeits-Mock API, die realistische Daten auf Nachfrage erzeugt

Echtes Beispiel: :-Suche von meistlucid-.-net

Hier ist der eigentliche Suchcode aus diesem Blog. Dies ist unveränderter Produktions-Frontend-CodeKeine Anpassungen für die Mock-M:

// typeahead.js from mostlylucid.net
export function typeahead() {
    return {
        query: '',
        results: [],
        search() {
            fetch(`/api/search/${encodeURIComponent(this.query)}`)
                .then(response => response.json())
                .then(data => { this.results = data; });
        }
    }
}

Mock it

# Using CLI
llmock serve --port 5000

# Query returns contextual results
curl http://localhost:5000/api/search/markdown
# LLM generates blog posts about Markdown

curl http://localhost:5000/api/search/docker
# LLM generates blog posts about Docker

Jede Antwort ist einzigartig und realistisch.

Formsteuerung – Definieren Sie Ihr Schema

Über die Generierung von Zufallsdaten hinaus benötigen Sie häufig eine präzise Kontrolle über die JSON-Struktur.Mit der Formsteuerung können Sie dem LLM genau sagen, welche Struktur für die Erzeugung von - das leistungsstärkste Feature für Frontend-Entwicklung ist.

Grundform

# Without shape - random structure
curl http://localhost:5000/api/mock/users
# Response: { "userId": 1, "fullName": "Alice" }

# With shape - you control it
curl "http://localhost:5000/api/mock/users" \
  -H 'X-Response-Shape: {"id":0,"name":"string","email":"string"}'
# Response: { "id": 1, "name": "Alice", "email": "[email protected]" }

Drei Möglichkeiten, Form zu spezifizieren

  1. Parameter für die Abfrage ?shape={...}
  2. HTTP-Header X-Response-Shape: {...} Zu empfehlende Maßnahme:
  3. Bitten Sie die Karosserie an. {"shape": {...}}

Verschachtelte Form

const shape = {
  company: {
    id: 0,
    name: "string",
    employees: [{
      id: 0,
      firstName: "string",
      department: { id: 0, name: "string" },
      projects: [{ id: 0, title: "string" }]
    }]
  }
};

fetch('/api/mock/company', {
  headers: { 'X-Response-Shape': JSON.stringify(shape) }
});

TypScript Alignment

interface User {
  id: number;
  name: string;
  email: string;
}

const USER_SHAPE: Partial<User> = { id: 0, name: "", email: "" };

// Shape becomes your type definition AND mock schema!

Multi-Step Workflows mit Kontext

Jetzt lassen let-'s Formsteuerung mit API Kontexten kombinieren, um komplexe zu handhaben.,. mehrstufige Workflows.. Erinnern Sie sich an die Kontextspeicherfunktion von früheren ?. Hier zeigt ', wie es in realen asynchronen Operationen der -.Welt glänzt.

Dieses Beispiel aus dem Übersetzungsdienst meistlucid-.-net-MSC1 zeigt, wie die LLM den Zustand über einen kompletten async-Workflow aufrechterhält.

# Step 1: Start translation
curl -X POST http://localhost:5000/api/translate/start?context=translate-session \
  -d '{"language": "es", "markdown": "# Hello World"}'
# Response: { "taskId": "abc-123", "status": "processing" }

# Step 2: Check status (LLM remembers the task)
curl http://localhost:5000/api/translate/status/abc-123?context=translate-session
# Response: { "taskId": "abc-123", "status": "complete" }

# Step 3: Get result (same taskId!)
curl http://localhost:5000/api/translate/result/abc-123?context=translate-session
# Response: { "taskId": "abc-123", "translatedText": "# Hola Mundo" }

Beachten Sie, wie taskId ist konsistent über alle Anfragen . . Kontext macht dies möglich

Alle Protokolle jenseits von REST-:

Bislang haben wir uns auf REST-, konzentriert, aber moderne Anwendungen benötigen mehr .. . Ob Sie Gebäude mit GraphQL ., ? Implementierung real . - .time Features mit SignalR .SK6 ? oder Arbeiten mit gRPC Dienstleistungen ?, ? meistlucid .

Unterstützte Protokolle

  • BESCHÄFTIGUNG
  • Abbildung QL
  • GRPC
  • SignalR
  • Server-Ausgesandte Ereignisse (Ausgestellte Veranstaltungen
  • OpenAPI-Swagger

SchaubildQL

Leitfaden für die EU-Mitgliedstaaten SchaubildQL-Abschnitt

curl -X POST http://localhost:5000/api/mock/graphql \
  -d '{"query": "{ users { id name email } }"}'

Die Abfrage ist die Form, die kein separates Schema benötigt wird.

gRPC

Vollständiger Leitfaden gRPC-Unterstützung

# Upload .proto file
curl -X POST http://localhost:5116/api/grpc-protos \
  --data-binary "@user_service.proto"

# Call via JSON or binary Protobuf
curl -X POST http://localhost:5116/api/grpc/userservice/UserService/GetUser \
  -d '{"user_id": 123}'

SignalR Real---Zeit

Leitfaden für die EU-Mitgliedstaaten SignalR-Demohandbuch

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/hub/mock")
    .build();

connection.on("DataUpdate", (message) => {
    console.log(message.data); // Live generated data
});

await connection.start();
await connection.invoke("SubscribeToContext", "stock-prices");

Perfekt für Dashboard-Prototyping

Server ,- ,Sende-Ereignisse , ( , SSE , )

Leitfaden für die EU-Mitgliedstaaten SSE Streaming-Modi

const eventSource = new EventSource('/api/mock/stream/users');
eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Token:', data.chunk); // Progressive generation
};

OpenAPI-Swagger

Vollständiger Leitfaden OpenAPI-Funktionen

# CLI: Load any OpenAPI spec
llmock serve --spec https://petstore3.swagger.io/api/v3/openapi.json

# All endpoints become live mocks automatically
curl http://localhost:5000/petstore/pet/123

Pluggable Tools :-Mix Reale Daten von Mock

Vollständiger Leitfaden Werkzeuge Aktionen

Manchmal benötigen Sie einen hybriden Ansatz -Mock-Daten aus der Produktion kombiniert mit generierten Mockdaten -. -Das Pluggable Tools-System können Sie aktuelle APIs während der Mock-Generierung anrufen --, - Schaffung unglaublich realistische Testszenarien - . -

{
  "Tools": [{
    "Name": "getUserData",
    "Type": "http",
    "HttpConfig": {
      "Endpoint": "https://api.production.com/users/{userId}",
      "Headers": { "Authorization": "Bearer ${PROD_API_KEY}" }
    }
  }]
}

curl "http://localhost:5000/api/mock/orders?useTool=getUserData&userId=123"

Der Mock holt REAL-Benutzerdaten, dann generiert der LLM mit ihm Bestellungen. Äußerst nützlich für realistische Tests mit hybriden mock-/-realen Workflows

Kernintegration des ASP-.-NET

Wenn you-'-Gebäude mit ASP-.-NET-Core-,-Integration nahtlos ist, ist die Schönheit dieses Ansatzes Null-Codeänderungen zu Ihren Diensten konfigurieren Sie einfach HttpClient auf den Mock während der Entwicklung und auf die reale API in der Produktion zeigen

// Real code from mostlylucid.net
builder.Services.AddHttpClient<IMarkdownTranslatorService, MarkdownTranslatorService>(
    client => {
        var baseUrl = builder.Configuration["TranslationService:BaseUrl"]
            ?? "http://localhost:5000";  // Mock during dev
        client.BaseAddress = new Uri(baseUrl);
    }
);

Appsettings.-Entwicklung.-json-:-

{
  "TranslationService": {
    "BaseUrl": "http://localhost:5000"  // Mock
  }
}

Appsettings.-Produktion.-json-:-

{
  "TranslationService": {
    "BaseUrl": "https://api.production.com"  // Real
  }
}

Dieses Muster funktioniert für jeden HttpClient in Ihrer Anwendung Übersetzungsservices von ,Bezahlungs-Gateways von externen APIs von,benannt Sie es

Wann dies zu verwenden ist

Bevor wir in erweiterte Funktionen eintauchen, sollten Sie sich darüber im Klaren sein, wann dieses Tool für Ihren Workflow Sinn macht.

Perfekt für

  • Frontend-Entwicklung bevor Backend existiert Stoppen Sie das Blockieren auf Backend-Teams
  • Mehrstufige Workflow-Tests Kontext Speicher behandelt komplexe Szenarien
  • API Prototyping Experimentieren Sie mit Antwortformen, bevor Sie
  • Offline-Entwicklung Arbeit ohne Netzwerkabhängigkeiten
  • Prüfung des Fehlerszenarios Ausfälle simulieren, ohne die Produktion zu unterbrechen
  • CIP-/-CD-Pipelines Keine externen Abhängigkeiten bedeutet schnellere Builds

Nicht ideal für

  • Produktionsumgebungen Dies ist ein Entwicklungs- und Testwerkzeug
  • Deterministische Testdaten Verwenden Sie Vorrichtungen, wenn Sie exakte Reproduzierbarkeit benötigen
  • Vertragsprüfung Immer gegen echte APIs für Produktionsverträge validieren

Jetzt, wo Sie wissen, wo es passt...

Erweiterte Funktionen

Diese Funktionen sind optional -- , können Sie enormen Wert von den Grundlagen allein erhalten -. , Aber wenn Sie Produktion benötigen , - , Grade Realismus im Maßstab , , , diese Werkzeuge sind hier ,. .

Mehrere LLM-Backends

Leitfaden für die EU-Mitgliedstaaten Mehrere LLM-Backends

# Fast for dev
curl http://localhost:5000/api/mock/users

# High quality for demos
curl "http://localhost:5000/api/mock/users?backend=quality"

# Cloud AI for production-like
curl "http://localhost:5000/api/mock/users?backend=openai"

Geschwindigkeitsbegrenzung Simulation

Leitfaden für die EU-Mitgliedstaaten Geschwindigkeitseinschränkung beim Batching

Testen Sie, wie Ihre App mit Geschwindigkeitsbegrenzungen umgeht.

{
  "EnableRateLimiting": true,
  "RateLimitDelayRange": "500-2000"
}

Fehlersimulation

# Test 429 rate limiting
curl "http://localhost:5000/api/mock/users?error=429&errorMessage=Rate%20limit%20exceeded"

# Test 503 unavailable
curl "http://localhost:5000/api/mock/users?error=503"

Unterstützt alle Codes von 4 xx und 5 xx.

Ansprech-Caching

# Generate and cache 10 variants
curl "http://localhost:5000/api/mock/users?shape={\"$cache\":10,\"id\":0,\"name\":\"string\"}"

Nachfolgende Anfragen erhalten instant zwischengespeicherte Antworten

Testen von Utilities-:-meistlucid.-mockllmapi-.-Testen

Packungsgröße Hauptsächlichlucid-.-Mockllmapi-.-Testing

Alle oben genannten Funktionen sind für die Entwicklung gut , aber was ist mit automatisiertem Testen Das Begleit-Testpaket bietet eine fließende API, die Integrationstests ein Kinderspiel macht , Mockverhalten deklarativ konfigurieren und lassen HttpClient tun Sie die Rest-.

Installation

dotnet add package mostlylucid.mockllmapi.Testing

Grundlegende Verwendung

using mostlylucid.mockllmapi.Testing;

// Create a client with a single endpoint configuration
var client = HttpClientExtensions.CreateMockLlmClient(
    baseAddress: "http://localhost:5116",
    pathPattern: "/users",
    configure: endpoint => endpoint
        .WithShape(new { id = 0, name = "", email = "" })
        .WithCache(5)
);

// Make requests - configuration is automatically applied
var response = await client.GetAsync("/users");
var users = await response.Content.ReadFromJsonAsync<User[]>();

Mehrere Endpunkte

var client = HttpClientExtensions.CreateMockLlmClient(
    "http://localhost:5116",
    configure: handler => handler
        .ForEndpoint("/users", config => config
            .WithShape(new { id = 0, name = "", email = "" })
            .WithCache(10))
        .ForEndpoint("/posts", config => config
            .WithShape(new { id = 0, title = "", content = "", authorId = 0 })
            .WithCache(20))
        .ForEndpoint("/error", config => config
            .WithError(404, "Resource not found"))
);

// Each endpoint automatically uses its configuration
var usersResponse = await client.GetAsync("/users");
var postsResponse = await client.GetAsync("/posts");
var errorResponse = await client.GetAsync("/error"); // Returns 404

Einstellungen

Konfiguration des Formulars

// Using anonymous objects
.WithShape(new { id = 0, name = "", active = true })

// Using JSON strings
.WithShape("{ \"id\": 0, \"name\": \"\", \"tags\": [] }")

// Complex nested structures
.WithShape(new
{
    user = new { id = 0, name = "" },
    posts = new[] { new { id = 0, title = "" } }
})

Fehler-Simulation

// Simple error
.WithError(404)

// With custom message
.WithError(404, "User not found")

// With details
.WithError(422, "Validation failed", "Email address is invalid")

Streaming-Verfahren

// Enable streaming with token-by-token output
.WithStreaming()
.WithSseMode("LlmTokens")

// Stream complete objects
.WithStreaming()
.WithSseMode("CompleteObjects")

// Stream array items individually
.WithStreaming()
.WithSseMode("ArrayItems")

Abhängigkeitsinjektion

Getippte Clients :

services.AddMockLlmHttpClient<IUserApiClient>(
    baseApiPath: "/api/mock",
    configure: handler => handler
        .ForEndpoint("/users", config => config
            .WithShape(new { id = 0, name = "", email = "" }))
);

Benannter Client„:"

services.AddMockLlmHttpClient(
    name: "MockApi",
    baseApiPath: "/api/mock",
    configure: handler => handler
        .ForEndpoint("/data", config => config
            .WithShape(new { value = 0 }))
);

// Usage
var client = httpClientFactory.CreateClient("MockApi");

Beispiel für Integrationstests

[Fact]
public async Task Should_Handle_User_Creation()
{
    // Arrange
    var client = HttpClientExtensions.CreateMockLlmClient(
        "http://localhost:5116",
        "/users",
        config => config
            .WithMethod("POST")
            .WithShape(new { id = 0, name = "", email = "", createdAt = "" })
    );

    // Act
    var newUser = new { name = "John Doe", email = "[email protected]" };
    var response = await client.PostAsJsonAsync("/users", newUser);

    // Assert
    response.EnsureSuccessStatusCode();
    var created = await response.Content.ReadFromJsonAsync<User>();
    Assert.NotNull(created);
    Assert.NotEqual(0, created.Id);
}

[Fact]
public async Task Should_Handle_Not_Found_Error()
{
    // Arrange
    var client = HttpClientExtensions.CreateMockLlmClient(
        "http://localhost:5116",
        "/users/999",
        config => config.WithError(404, "User not found")
    );

    // Act
    var response = await client.GetAsync("/users/999");

    // Assert
    Assert.Equal(HttpStatusCode.NotFound, response.StatusCode);
}

Wie es funktioniert

Das MockLlmHttpHandler ist ein DelegatingHandler dass-:-

  1. Abhört ausgehende HTTP-Anfragen
  2. Passt Anfragen mit konfigurierten Endpunktmustern an
  3. Injiziert die Mock-Konfiguration über Abfrageparameter und HTTP-Header
  4. leitet die geänderte Anfrage an die eigentliche Mock LLM API weiter

Dies ermöglicht es Ihnen, eine echte HttpClient in Ihren Tests bei der einfachen Steuerung von Mock API-Verhalten ohne Änderung Ihres Anwendungscodes

Best Practices Tipps

Nach der Arbeit mit diesem Tool über mehrere Projekte, sind hier die Muster, die am besten funktionieren

  1. Verwenden Sie immer Kontexte für Workflows Sichert konsistente IDs und Daten über mehrstufige Operationen
  2. Form für die Typsicherheit verwenden Machen Sie es passend zu Ihren TypeScript-Schnittstellen
  3. Reale und Mock-Daten mit Werkzeugen mischen Das Beste aus beiden Welten
  4. Wählen Sie das richtige Modell Siehe auch: Ollama Models Guide für vollständige Details
    • EMPFEHLUNG FÜR: ministral-3:3b Kontext von (3-B-Params,-32-K KILLER für JSON-! Ultra---schnell – hochpräzise – minimaler RAM
    • Herstellung ,-, ähnlich: llama3 Die beste Balance aus Qualität und Leistung
    • Hohe Qualität: mistral-nemo (12-B-Params,-Kontext 128-K-Konsum )---Komplexe Schemata und massive Datensätze
    • Ressourcen , - Beschränkt: gemma3:4b oder phi3 Leichtere Alternativen

Vollständige Dokumentation

Schlußfolgerung

Frontend-Entwicklung doesn's'.t müssen auf Backend-APIs warten mostlylucid.mockllmapi gibt Ihnen

  • Kontextspeicher Konsistente , stateful Daten über mehrstufige Workflows
  • Formregelung Präzise Schema-Definitionen, die zu Ihren Typen passen
  • Universelle Protokollunterstützung REST-,, GraphQL, ,, gRPC, MSC3, SignalR.,, SSE, MKS5, OpenAPI
  • Hybridprüfung Vermischen Sie reale Produktionsdaten mit generierten Mocks
  • Keine Wartung Keine JSON-Halterungen zum Aktualisieren, wenn sich die Anforderungen ändern
  • Prüfprogramme Fluent API für Integrationstests

Der Unterschied zwischen diesem und traditionellem Hohn??-Ihr Frontend arbeitet gegen realistische, kontextbewusste Daten vom ersten Tag an..-Nicht mehr mit Mock-Daten gearbeitet, aber mit realen Daten fehlgeschlagen?"-Überraschungen!.-

Ob du einen einfachen Blog oder eine komplexe Enterprise-Anwendung baust – du wirst schneller iterieren!, Teste gründlicher - , und verschiffe vertrauensvoll..

Bereit zum Starten

docker compose up -d

Dass ,' , es , . , kein Backend erforderlich

Finding related posts...
logo

© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.