Envelope Budgeting API: 簡単な資金管理-jsチュートリアル-php.cn

Envelope Budgeting API: 簡単な資金管理

WBOY

リリース： 2024-07-19 20:30:33

オリジナル

846 人が閲覧しました

バックエンド Web 開発に取り組んでから 6 か月を経て、Envelope Budgeting の動作を実証する独自の API という重要なマイルストーンを共有できることを嬉しく思います。

プログラムは何をするのですか?

API は、エンベロープを作成、更新、表示、削除できるユーザーフレンドリーな Web ページを提供します。また、エンベロープ間で予算を移動することもできます。ぜひその機能を試してみてください。 (注: 無料のインスタンスにデプロイするため、初期読み込みが遅くなる可能性があります。)

Screenshot of front-end

電流制限

合計予算は $5000 にハードコードされており、変更は一時的なものであり、サーバーが再起動するまでのみ持続します。将来のバージョンには、データベースレイヤーとカスタマイズ可能な総予算が含まれる予定です。

技術的な詳細

バックエンドは Node.js と Express.js を利用し、次の HTTP メソッドをサポートします。

GET (1) ->すべての封筒を表示します
GET (2) ->残りの合計予算を表示します
GET (3) ->個々のエンベロープを名前で取得します
投稿 (1) ->新しいエンベロープを作成し、設定された予算を割り当てます
投稿 (2) ->予算をある封筒から別の封筒に転送します
PUT ->特定のエンベロープに支出を記録します
削除 ->エンベロープを削除します

過剰な支出を防ぐために、POST ルートと PUT ルートには制限チェックが設けられています。 POST、PUT、および DELETE の場合は、同じ名前のエンベロープがすでに存在するかどうかもチェックされます。チェックが失敗すると、エラーメッセージが送信されます。

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

ログイン後にコピー

フロントエンドは HTML、CSS、JavaScript を使用して開発され、API をデモンストレーションするための使いやすいインターフェイスを作成しました。これにより、ユーザーはコードをダウンロードしたり、Postman などのツールを使用したりせずに API を操作できるため、スタイルは意図的に最小限になっています。

フロントエンドには、空の入力フィールドを防ぐための検証チェックが含まれており、HTTP 応答ステータスに基づいてサーバー応答表示フィールドの背景色を変更します。異なる色は検証の成功、エラー、または失敗を示し、ユーザーがアクションの結果を理解するのに役立ちます。

screenshot of front-end with failed validation check message in front of orange background

フロントエンドとバックエンドを接続するために、JavaScript と非同期 fetch() リクエストを使用しました。フルスタック化には、index.html ファイルを取得するための 4 番目の GET メソッドの追加と、バックエンドの CORS の適切な設定も必要でした。

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); } } });

ログイン後にコピー

結論

初めての API の作成は非常にやりがいのあるものでした。理論を勉強した後、自分でそれを実装するという実践的な経験は非常に貴重でした。 HTTP リクエストが正常に完了したのを見るのは、勝利の瞬間でした。

謝辞

私が最も苦労したのは、ジャストインタイム学習 (JIT) と呼ばれる戦術を使用して、フロントエンドとバックエンドを接続することでした。 ChatGPT などのオンラインリソースと試行錯誤は役に立ちましたが、上級開発者との短いコーチングセッションでいくつかの重要な点が明確になった後、画期的な進歩が見られました。したがって、JIT と組み合わせることで学習を大幅に加速する、厳選されたコンテンツを提供してくださったすべての人々とプラットフォームに心から感謝します。どちらも必須です!