Envelope Budgeting API: Einfache Geldverwaltung

Nachdem ich sechs Monate lang in die Back-End-Webentwicklung eingetaucht bin, freue ich mich, einen bedeutenden Meilenstein vorstellen zu können: meine ganz eigene API, die Envelope Budgeting in Aktion demonstriert.

Was macht das Programm?

Die API bietet eine benutzerfreundliche Webseite, auf der Sie Umschläge erstellen, aktualisieren, anzeigen und löschen können. Es ermöglicht auch Budgetübertragungen zwischen Umschlägen. Entdecken Sie die Funktionen. (Hinweis: Das anfängliche Laden kann aufgrund der Bereitstellung auf einer kostenlosen Instanz langsam sein.)

Aktuelle Einschränkungen

Das Gesamtbudget ist fest auf 5.000 US-Dollar festgelegt und Änderungen sind vorübergehend und nur bis zum Neustart des Servers gültig. Zukünftige Versionen werden eine Datenbankschicht und anpassbare Gesamtbudgets enthalten.

Technische Details

Das Back-End wird von Node.js und Express.js betrieben und unterstützt die folgenden HTTP-Methoden:

• GET (1) -> zeigt alle Umschläge an
• GET (2) -> Zeigt das verbleibende Gesamtbudget an
• GET (3) -> ruft einzelne Umschläge nach Namen ab
• POST (1) -> Erstellt einen neuen Umschlag und weist das festgelegte Budget zu
• POST (2) -> überträgt Budget von einem Umschlag auf einen anderen
• PUT -> protokolliert Ausgaben in einem bestimmten Umschlag
• LÖSCHEN -> löscht einen Umschlag

Um Mehrausgaben zu vermeiden, gibt es eine Limitprüfung für POST- und PUT-Routen. Bei POST, PUT und DELETE erfolgt zusätzlich eine Prüfung, ob bereits ein Umschlag mit demselben Namen existiert. Wenn eine Prüfung fehlschlägt, wird eine Fehlermeldung gesendet.

// Transfer budget between envelopes
app.post("/envelopes/transfer/:from/:to", (req, res) => {
    const from = req.params.from;
    const to = req.params.to;
    const amount = Number(req.query.transfer);
    if (!envelopeExists(from) || !envelopeExists(to)) {
        res.status(403).send(`Operation declined. \nPlease make sure to enter names of existing envelopes to transfer money between them.`);
    } else if (envelopes[from].budget >= amount) {
        envelopes[from].budget -= amount;
        envelopes[to].budget += amount;
        res.status(201).send(`New balance: \nEnvelope "${from}" - $${envelopes[from].budget}, \nEnvelope "${to}" - $${envelopes[to].budget}`);
    } else {
        res.status(403).send(`Operation declined. \nNot enough money left in envelope "${from}".`);
    }  
});

Das Frontend wurde mit HTML, CSS und JavaScript entwickelt, um eine benutzerfreundliche Oberfläche zur Demonstration der API zu erstellen. Dadurch können Benutzer mit der API interagieren, ohne Code herunterladen oder Tools wie Postman verwenden zu müssen, sodass das Design bewusst minimal gehalten wird.

Das Frontend umfasst Validierungsprüfungen, um leere Eingabefelder zu verhindern, und ändert die Hintergrundfarbe des Serverantwort-Anzeigefelds basierend auf dem HTTP-Antwortstatus. Verschiedene Farben zeigen Erfolg, Fehler oder fehlgeschlagene Validierungen an und helfen Benutzern, die Ergebnisse ihrer Aktionen zu verstehen.

Ich habe JavaScript und asynchrone fetch()-Anfragen verwendet, um das Front-End und das Back-End zu verbinden. Der Full-Stack-Umstieg erforderte auch das Hinzufügen einer vierten GET-Methode zum Abrufen der index.html-Datei und die ordnungsgemäße Einrichtung von CORS für das Back-End.

postButton.addEventListener("click", async () => {
    const envName = postName.value;
    const envBudget = Number(postBudget.value);
    if (envName === "" || envBudget === 0) {
        serverResponseField.innerHTML = "Please enter a name and budget before clicking the CREATE button.";
        alertServerResponseField("orange");
    } else {
        try {
            const response = await fetch(`${apiUrl}/envelopes`, {
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({newEnv: envName, newBudget: envBudget}) 
            });
            if (response.ok || response.status === 403) {
                const jsonResponse = await response.text();
                clearDisplay();
                serverResponseField.innerHTML = `
                <h4>--- creating envelope ---</h4>
                <pre class="brush:php;toolbar:false">${jsonResponse}

`; if (response.status === 403) { alertServerResponseField("red"); } else { alertServerResponseField("green"); } } else { throw new Error("Request failed!"); } } catch (err) { console.log(err); } } });

Abschluss

Die Erstellung meiner ersten API war unglaublich lohnend. Die praktische Erfahrung, es nach dem Studium der Theorie selbst umzusetzen, war von unschätzbarem Wert. Zu sehen, wie eine HTTP-Anfrage erfolgreich durchging, war ein Moment des Triumphs.

Danksagungen

Am meisten hatte ich Probleme mit der Verbindung von Front-End und Back-End mithilfe einer Taktik namens Just-in-Time Learning (JIT). Während Online-Ressourcen, einschließlich ChatGPT, und Versuch und Irrtum hilfreich waren, gelang der Durchbruch nach einer kurzen Coaching-Sitzung mit einem leitenden Entwickler, der einige wichtige Punkte klarstellte. Ein großes Lob und ein großes Dankeschön an alle Personen und Plattformen, die kuratierte Inhalte bereitstellen, die in Kombination mit JIT das Lernen erheblich beschleunigen. Beides ist unerlässlich!

Download-Link

Entdecken Sie die vollständige Codebasis auf GitHub.

s-mehnert / Envelope-Budgeting-API

Erfahren Sie, wie Envelope Budgeting funktioniert, indem Sie die Envelope-Budgeting-API über das bereitgestellte Frontend verwenden.

Die API wurde mit Knoten 20.11.1 erstellt.

Bild von freepik

Das obige ist der detaillierte Inhalt vonEnvelope Budgeting API: Einfache Geldverwaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!