chasacademy-sandra-larsson/node-express-banksajt

Skapa backend i Node.js och Express för Banksajt

I dagens uppgift ska vi öva på att skapa en banksajt med backend i nodejs och express

Data i backend

I bankens backend finns tre arrayer: En array users för användare, en array accounts för bankkonton och en array sessions för engångslösenord`.

Users Varje användare har ett id, ett användarnamn och ett lösenord.

[{id: 101, username: "Joe", password: "hemligt" }, ...]

Accounts Varje bankkonto har ett id, ett användarid och ett saldo.

[{id: 1, userId: 101, amount: 200 }, ...]

Sessions När en användare loggar in skapas ett engångslösenord. Engångslösenordet och användarid läggs i sessions arrayen.

[{userId: 101, token: "nwuefweufh" }, ...]

Sidor på sajten

Banken har följande sidor på sin sajt:

Landningssida Ska innehålla navigering med länkar till Hem, logga in och skapa användare och en knapp till skapa användare

Skapa användare Ett fält för användarnamn och ett för lösenord. Datat ska sparas i arrayen users i backend och ett bankkonto skapas i backend med 0 kr som saldo.

Logga in Ett fält för användarnamn och ett för lösenord och en logga in knapp. När man klickat på knappen ska man få tillbaka sitt engångslösenord i response och skickas till kontosidan med useRouter.

Kontosida Här kan man se sitt saldo och sätta in pengar på kontot. För att göra detta behöver man skicka med sitt engångslösenord till backend.

Hur du klarar uppgiften

1. Klona detta repo
2. Kolla in frontend-mappen som innehåller komplett kod till uppgiften gjord i React och React Router. Du är fri att ändra om du vill ha annan layout / struktur.

Skapa backend

1. Skapa en folder i roten: backend och gå med cd in i foldern.
2. Skriv npm init och tryck Enter på alla frågor.
3. Lägg till "type": "module"i package.json
4. I scripts i package.json lägg till: "start": "nodemon server.js"
5. Installera dependencies: npm i express cors body-parser
6. Börja skriva kod i server.js

Endpoints och arrayer

1. I backend skapa tre tomma arrayer: users, accounts och sessions.
2. Skapa endpoints för:

• Skapa användare (POST): "/users"
• Logga in (POST): "/sessions"
• Visa salodo (POST): "/me/accounts"
• Sätt in pengar (POST): "/me/accounts/transactions"

3. När man loggar in ska ett engångslösenord skapas och skickas tillbaka i response.
4. När man hämtar saldot ska samma engångslösenord skickas med i Post.

Mer detaljerad skiss om hur det ska fungera

Se anteckning på Excalidraw

Startkod för server.js i backend

import express from 'express';
import bodyParser from 'body-parser';
import cors from 'cors';

const app = express();

// Middleware
app.use(cors());
app.use(bodyParser.json());

// Generera engångslösenord
function generateOTP() {
    // Generera en sexsiffrig numerisk OTP
    const otp = Math.floor(100000 + Math.random() * 900000);
    return otp.toString();
}

// Din kod här. Skriv dina arrayer


// Din kod här. Skriv dina routes:

// Starta servern
app.listen(port, () => {
    console.log(`Bankens backend körs på http://localhost:${port}`);
});

Exempel på fetch för POST i frontend

    try {
            const response = await fetch('http://localhost:3000/users', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: username,
                    password: password,
                }),
            });
            if(response.ok) {
                const data = await response.json();
                alert(`User ${data.user.username} created and account with balance ${data.account.balance} created`);
            } else {
                throw new Error('Fel användarnamn eller lösenord');
            }
        } catch (error) {
            console.error('Error:', error)
        }