🟢 My SPA product idea from business plan to MVP.🟢

Webbutvecklare inom .NET, YH-utbildning – Vt. 2021. Inlämningsuppgifter i kursen Dynamiska Webbsystem 2 som bygger vidare på affärsidé framtagen i inlämningsuppgifter i kursen Affärsmannaskap för IT

• SPA
• React
• Recat-Redux
• HTML5
• JavaScript
• CSS3

I denna uppgift berörs framför allt läranderesultaten:

• förklara användning av något eller några moderna klientramverk för webbapplikationer
• redogöra för tekniker för att utveckla en ”Single Page Application” samt beskriva fördelar och utmaningar med angreppssättet
• redogöra för olika former av lagring av data på klientsidan och beskriva deras användningsområden för webbutveckling

• utveckla klientprogram med hjälp av modernt ramverk som nyttjar serverkommunikation med REST
• skapa och manipulera dynamiska användargränssnitt i en webbapplikation
• planera och genomföra en produktpresentation av ett programmeringsprojekt

• självständigt tillämpa lämpliga metoder för källkodshantering av mjukvaruprojekt

1. Planering och förutsättningar 100/100 (G)
2. The proof of concept 100/100)(G)
3. Från koncept till prototyp
   • Rapport 92/100 (VG)
4. A Minimum Viable Product
   • Rapport 100/100 (VG)

1. Produktidé (affärsidé) 100/100 (VG)
2. Effektiva team och gruppdynamik 100/100 (VG)
3. Affärsplan 100/100 (VG)

1. klona ner repot från GitHub
2. öppna i din kodeditor 💻
3. kör npm ci i terminalen
4. följt av npm start följande medelande visas:

parcel index.html --open
Server running at http://localhost:1234 
✨  Built in ??ms.

5. 🚀 That´s it! ✨

Troligtvis öppnas localhost: 1234(/index.html) automatiskt i din förvalda webbläsare, du kommer vidare till app via länken i nav-baren eller lägg till: /app.html i webbläsarens adressfönster.

Används för att bygga de komponenter som applikationens UI består av

Används för att kunna rendera react komponenterna

Används för att smidigare kunna göra avgränsade HTTP-anrop utan att behöva tänka på JSON format.

Används för att visuallisera användarens "förbrukning" som ett cirkeldiagram.

Används för att navigara mellan "sidor", genom fejk URL möjliggörs att gå fram och bak i webbläsarhistoriken.

Används för att validera (dokumentera) mina komponenters props.

Används för tillståndshantering.

Används för att kunna dispatcha funktioner

Används för att integrera en kalendervy med "inbyggd" formatering och språkinställningar.

Kan används för att underlätt tillståndshanteringen.

Jag har skapat tre mock-API: med hjälp av retool men för tillfället används bara två.

Med användare (hushåll) främst för att få slumpade värden för "förbrukning" av respektive sop-fraktion. Email för att knyta en ny användare. Anropas från

• för att hämta användaren, GET(/id)
• eller ny användare (första med tom email, jag ser till att det finns ett antal att testa på), GET(?email)

• för att uppdatera email på den nya användaren, PATCH(/id, {email: email})

{
  "id": 1,
  "glas": 19,
  "email": "[email protected]",
  "metal": 28,
  "water": 29,
  "organic": 50,
  "plastic": 34,
  "residual": 19,
  "cardboard": 24,
  "newspaper": 30,
  "electricity": 17,
  "garbagehouse": "1-003"
}

För att hämta alla fraktioner i samma "garbagehouse" (typ kvarter/fastighet) som användaren. Anropas från

• för att hämta fraktioner, GET(/garbagehouse)

[
   {
        "id": 1,
        "allFractions": [
            {
                "max": 90,
                "name": "Organisktavfall",
                "unit": "kg",
                "price": 0.5,
                "isFull": false,
                "source": "organic",
                "hatchOpen": false,
                "fractionId": "ow",
                "garbagehouse": "1-001"
            },
            ... + 7 objekt ...
            {
                "max": 50,
                "name": "El",
                "unit": "kWh",
                "price": 3,
                "isFull": false,
                "source": "electricity",
                "hatchOpen": false,
                "fractionId": "el",
                "garbagehouse": "1-001"
            }
        ]
    }
]

Anger hur fyllda sopkärlen är i procent.

[
    {
        "id": 1,
        "glas": "87%",
        "metal": "12%",
        "organic": "73%",
        "plastic": "54%",
        "residual": "60%",
        "cardboard": "56%",
        "newspaper": "63%",
        "garbagehouse": "1-001"
    },
    {
        "id": 2,
        "glas": "47%",
        "metal": "30%",
        "organic": "54%",
        "plastic": "65%",
        "residual": "82%",
        "cardboard": "32%",
        "newspaper": "82%",
        "garbagehouse": "1-002"
    },
    {
        "id": 3,
        "glas": "41%",
        "metal": "17%",
        "organic": "52%",
        "plastic": "89%",
        "residual": "63%",
        "cardboard": "99%",
        "newspaper": "80%",
        "garbagehouse": "1-003"
    }
]