Envelope Budgeting API: 손쉬운 자금 관리-JS 튜토리얼-php.cn

Envelope Budgeting API: 손쉬운 자금 관리

WBOY

풀어 주다： 2024-07-19 20:30:33

원래의

829명이 탐색했습니다.

6개월 동안 백엔드 웹 개발을 시작한 후 중요한 이정표인 Envelope Budgeting이 실제로 작동하는 모습을 보여주는 나만의 API를 공유하게 되어 기쁩니다.

프로그램은 무엇을 합니까?

API는 봉투를 생성, 업데이트, 보기, 삭제할 수 있는 사용자 친화적인 웹페이지를 제공합니다. 또한 봉투 간 예산 이전도 가능합니다. 그 기능을 자유롭게 탐색해 보세요. (참고: 무료 인스턴스 배포로 인해 초기 로딩이 느릴 수 있습니다.)

Screenshot of front-end

현재 제한사항

총 예산은 $5000로 하드 코딩되어 있으며 변경 사항은 일시적이며 서버가 다시 시작될 때까지만 지속됩니다. 향후 버전에는 데이터베이스 계층과 사용자 정의 가능한 총 예산이 포함될 예정입니다.

기술적인 세부사항

백엔드는 Node.js 및 Express.js로 구동되며 다음 HTTP 메서드를 지원합니다.

GET(1) -> 모든 봉투 표시
GET(2) -> 남은 총예산 표시
GET(3) -> 이름으로 개별 봉투를 가져옵니다
포스트(1) -> 새 봉투를 만들고 설정된 예산을 할당합니다
포스트(2) -> 한 봉투에서 다른 봉투로 예산 이체
넣기 -> 특정 봉투에 지출을 기록합니다
삭제 -> 봉투 삭제

과잉 지출을 방지하기 위해 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}".`);
    }  
});

로그인 후 복사

프런트엔드는 API 시연을 위한 사용하기 쉬운 인터페이스를 만들기 위해 HTML, CSS 및 JavaScript를 사용하여 개발되었습니다. 이를 통해 사용자는 코드를 다운로드하거나 Postman과 같은 도구를 사용하지 않고도 API와 상호 작용할 수 있으므로 의도적으로 스타일이 최소화됩니다.

프런트 엔드에는 입력 필드가 비어 있는 것을 방지하고 HTTP 응답 상태에 따라 서버 응답 표시 필드의 배경색을 변경하는 유효성 검사가 포함되어 있습니다. 다양한 색상은 성공, 오류 또는 검증 실패를 나타내므로 사용자가 작업 결과를 이해하는 데 도움이 됩니다.

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

프런트엔드와 백엔드를 연결하기 위해 JavaScript와 비동기식 fetch() 요청을 사용했습니다. 전체 스택으로 전환하려면 index.html 파일을 가져오기 위한 네 번째 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(Just-in-Time Learning)라는 전략을 사용하여 프런트엔드와 백엔드를 연결하는 데 가장 많은 어려움을 겪었습니다. ChatGPT를 포함한 온라인 리소스와 시행착오가 도움이 되었지만 몇 가지 핵심 사항을 명확히 한 수석 개발자와의 짧은 코칭 세션 후에 획기적인 발전이 이루어졌습니다. 따라서 선별된 콘텐츠를 제공하는 모든 사람과 플랫폼에 감사를 표하며 JIT와 결합하면 학습 속도가 크게 향상됩니다. 둘 다 필수입니다!