Skapa en Banksajt och publicera på aws

I dagens uppgift ska vi öva på att skapa en react-sajt med backend i express och publicera den på en ec2 instans i aws med scp.

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 hero-section med 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. Öppna en terminal och gå med cd där du vill skapa projektet.
2. Skapa där en folder: bank och gå med cd in i foldern.

Skapa frontend

1. Skriv npx create-next-app frontend.
2. Gå in i projektet: cd frontend.

Skapa backend

1. Backa en nivå med cd ...
2. Skapa en folder: backend och gå med cd in i foldern.
3. Skriv npm init och tryck Enter på alla frågor.
4. Lägg till "type": "module"i package.json
5. I scripts i package.json lägg till: "start": "nodemon server.js"
6. Installera dependencies: npm i express cors body-parser
7. 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.

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

fetch('http://localhost:3001/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        username: 'Användarnamn',
        password: 'Lösenord',
    }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => {
    console.error('Error:', error);
});

Publicera på aws

1. Gå med cd upp en nivå så att du är i bank-mappen. Överför filerna med scp (radera node_modules först så går det snabbare) :

scp -i <din-nyckel>.pem -r ./ ubuntu@<din-ec2-instans>:/home/ubuntu/bank

2. logga in på din instans med ssh.

3. Installera Node.js om det inte redan är installerat.

4. Navigera till din backend-mapp och starta din server med node server.js.

5. Navigera till din frontend-mapp. Kör följande:

npm install
npm run build
npm run start

Hur du lämnar in

1. Skapa ett repo på github.
2. Ladda up dina filer till github:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <Adressen till ditt repo>
git push -u origin main

3. Klicka på uppgiften i canvas och ange länken till ditt repo.

---

💥 Success!

Efter denna uppgift ska ni kunna skapa en fullstack sajt med api och publicera på aws.

---

🏃 Extrauppgifter

Klar? Här är lite mer att göra:

1. Installera pm2 på backend och se till att frontend och backend körs även när terminalen stängs.