08 - Projekt: Backend anbinden

Notizen mit GET laden und mit POST erstellen

Lernziele dieser Lektion

• Notizen vom bereitgestellten Backend laden
• Neue Notizen per Formular erstellen
• Backend-Antworten im UI anzeigen
• Fehlerfälle sauber behandeln

Stand des Projekts

• Frontend-Struktur der Notiz-App steht
• Heute: echte Daten statt statischer Testdaten
• Ziel: Lesen + Erstellen von Notizen

Allgemeiner Datenfluss

Browser UI ->
Fetch Request ->
Backend API ->
JSON Response ->
DOM Update

Bereitgestellte Endpoints

Sie finden ein Pocketbase Backend unter der URL notes.iso.lmeier.ch

• GET auf /api/collections/notes/records - alle Notizen laden
• POST auf /api/collections/notes/records - neue Notiz erstellen

HTML-Basis

<form id="note-form">
    <input id="title" placeholder="Titel" required />
    <textarea id="content" placeholder="Notizinhalt" required></textarea>
    <button type="submit">Speichern</button>
</form>

<ul id="notes-list"></ul>
                

Konfiguration im JS

const BASE_URL = "http://notes.iso.lmeier.ch";
const NOTES_ENDPOINT = `${BASE_URL}/api/collections/notes/records`;

const form = document.querySelector("#note-form");
const notesList = document.querySelector("#notes-list");
                

Notizen laden (GET)

async function loadNotes() {
    const response = await fetch(NOTES_ENDPOINT);
    if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
    }
    const notes = await response.json();
    renderNotes(notes);
}
                

Notizen darstellen

function renderNotes(notes) {
    notesList.innerHTML = "";

    for (const note of notes) {
        const li = document.createElement("li");
        li.textContent = `${note.title}: ${note.content}`;
        notesList.append(li);
    }
}
                

Notiz erstellen (POST)

async function createNote(noteData) {
    const response = await fetch(NOTES_ENDPOINT, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(noteData)
    });

    if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
    }

    return response.json();
}
                

Formular absenden

form.addEventListener("submit", async (event) => {
    event.preventDefault();

    const noteData = {
        title: document.querySelector("#title").value,
        content: document.querySelector("#content").value
    };

    await createNote(noteData);
    form.reset();
    await loadNotes();
});
                

Fehlerbehandlung im UI

async function init() {
    try {
        await loadNotes();
    } catch (error) {
        console.error(error);
        notesList.innerHTML = "<li>Fehler beim Laden der Notizen</li>";
    }
}

init();
                

Typische Fehlerquellen

• Falscher Endpoint oder Port
• Backend nicht gestartet
• Fehlender Header Content-Type
• CORS blockiert Request

Mini-Checkliste

• Kann ich Notizen laden?
• Kann ich eine Notiz erstellen?
• Sehe ich neue Notizen direkt in der Liste?
• Sind Fehler im Browser nachvollziehbar?

Arbeitsauftrag heute

1. GET-Integration fertigstellen
2. POST-Integration via Formular umsetzen
3. Nach POST erneut laden und rendern
4. Code committen und pushen