Skip to content

WiviWonderWoman/GreenSway

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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


Syfte

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

Tekniker

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

LĂ€randeresultaten

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

Kunskaper:

  • 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

FĂ€rdigheter:

  • 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

Kompetenser:

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

PoÀng (Betyg)

Dynamiska Webbsystem 2
  1. Planering och förutsÀttningar 100/100 (G)
  2. The proof of concept 100/100)(G)
  3. FrÄn koncept till prototyp
  4. A Minimum Viable Product
AffÀrsmannaskap för IT
  1. Produktidé (affÀrsidé) 100/100 (VG)
  2. Effektiva team och gruppdynamik 100/100 (VG)
  3. AffÀrsplan 100/100 (VG)

Instruktioner

  1. klona ner repot frÄn GitHub :octocat:
  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.
  1. 🚀 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.


Dependencies

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.

Dependencies som inte anvÀnds Ànnu:

Kan anvÀnds för att underlÀtt tillstÄndshanteringen.


TjÀnster

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

app.jsx

  • 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)

user-form.jsx

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

Exempel:

{
  "id": 1,
  "glas": 19,
  "email": "demo@greensway.com",
  "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

drop-down.jsx

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

Exempel:

[
   {
        "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"
            }
        ]
    }
]

TjÀnster som inte anvÀnds Ànnu:

Anger hur fyllda sopkÀrlen Àr i procent.

Exempel:
[
    {
        "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"
    }
]