API de budgétisation d'enveloppe : gestion facile de l'argent

Après six mois de plongée dans le développement Web back-end, je suis ravi de partager une étape importante : ma propre API qui démontre la budgétisation d'enveloppe en action.

Que fait le programme ?

L'API fournit une page Web conviviale sur laquelle vous pouvez créer, mettre à jour, afficher et supprimer des enveloppes. Il permet également les transferts budgétaires entre enveloppes. N'hésitez pas à explorer ses fonctionnalités. (Remarque : le chargement initial peut être lent en raison du déploiement sur une instance gratuite.)

Limites actuelles

Le budget total est codé en dur à 5 000 $ et les modifications sont temporaires et ne durent que jusqu'au redémarrage du serveur. Les futures versions incluront une couche de base de données et des budgets totaux personnalisables.

Détails techniques

Le back-end est alimenté par Node.js et Express.js, prenant en charge les méthodes HTTP suivantes :

• OBTENIR (1) -> affiche toutes les enveloppes
• OBTENIR (2) -> affiche le budget total restant
• OBTENIR (3) -> récupère l'enveloppe individuelle par nom
• POST (1) -> crée une nouvelle enveloppe et attribue un budget défini
• POST (2) -> transfère le budget d'une enveloppe à une autre
• METTRE -> enregistre les dépenses dans une enveloppe particulière
• SUPPRIMER -> supprime une enveloppe

Pour éviter les dépenses excessives, un contrôle de limite est en place pour les itinéraires POST et PUT. Pour POST, PUT et DELETE, il est également vérifié si une enveloppe portant le même nom existe déjà. Si une vérification échoue, un message d'erreur est envoyé.

// 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}".`);
    }  
});

Le front-end a été développé en utilisant HTML, CSS et JavaScript pour créer une interface facile à utiliser pour démontrer l'API. Cela permet aux utilisateurs d'interagir avec l'API sans télécharger de code ni utiliser d'outils comme Postman, le style est donc intentionnellement minimal.

Le frontal inclut des contrôles de validation pour éviter les champs de saisie vides et modifie la couleur d'arrière-plan du champ d'affichage de la réponse du serveur en fonction de l'état de la réponse HTTP. Différentes couleurs indiquent le succès, les erreurs ou les échecs de validation, aidant ainsi les utilisateurs à comprendre les résultats de leurs actions.

J'ai utilisé des requêtes JavaScript et asynchrones fetch() pour connecter le front-end et le back-end. Passer au full-stack impliquait également l'ajout d'une quatrième méthode GET pour récupérer le fichier index.html et configurer correctement CORS pour le 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); } } });

Conclusion

Créer ma première API a été incroyablement enrichissant. L’expérience pratique de sa mise en œuvre moi-même, après avoir étudié la théorie, a été inestimable. Voir une requête HTTP aboutir a été un moment de triomphe.

Remerciements

J'ai eu le plus de mal à connecter le front-end et le back-end, en utilisant une tactique appelée Just-in-Time Learning (JIT). Bien que les ressources en ligne, notamment ChatGPT, et les essais et erreurs aient été utiles, une avancée décisive est survenue après une courte séance de coaching avec un développeur senior qui a clarifié certains points clés. Un grand merci donc à toutes les personnes et plateformes qui fournissent du contenu organisé, qui accélère considérablement l'apprentissage lorsqu'il est combiné avec le JIT. Les deux sont essentiels !

Lien de téléchargement

Explorez la base de code complète sur GitHub.

s-mehnert / API de budgétisation des enveloppes

Découvrez comment fonctionne la budgétisation d'enveloppe en utilisant l'API Envelope-Budgeting via le frontal fourni.

L'API a été créée à l'aide du nœud 20.11.1.

Image par freepik

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!