u11-fullstack-js

I denna uppgift ska du arbeta på ett eget projekt helt i JavaScript. Vad denna idé ska inrikta sig på lämnas upp till dig denna gång. Om du inte har en egen idé finns det en lista över förslag längre ned i denna beskrivning.

Målet med uppgiften går ut på att du ska visa på att du på egen hand kan ta dina kunskaper och färdigheter och gå från en idé och konceptfas till en fullständig applikation. Din inlämning ska visa på förståelse för, tillämpning, samt användning av ett RESTful API med JWT-baserad autensiering med dokumentdatabasen MongoDB.

Din lösning ska också innehålla grundläggande underlag för UX och design. Detta innefattar en grundläggande digital design.

Missa inte de funktionella och icke-funktionella kraven i dokumentet nedan

Teknisk kravspecifikation för u11

Övergripande mål

Notis: Målen nedan som denoteras med * är i fall din idé inte ska göras som en webbapplikation utan en inbäddad applikation, vilket är tillåtet. I sådan fall diskutera din idé med din lärare omgående för vilken omfattning som kommer krävas.

Uppgiften **skall uppfylla följande övergripande mål:

• Inlämning ska fungera i följande enheter och kommer testas i dem*:

  • PC desktop (upplösning 1920x1080p och uppåt)

  • Laptop (upplösning 1280 x 900 och uppåt)

  • Mobil (upplösning 414×746)

• Inlämning ska fungera i de senaste versionerna av följande webbläsare och kommer testas i dem*:

  • Chrome

  • Firefox

  • Safari

  • Edge

• Inlämning ska följa teknisk Teknisk kravspecifikation för u11

• Inlämning ska ha en design kopplad till Personas och Scenarios

• Inlämning ska deployas på webbleverantör som stödjer Node.JS. Heroku som är gratis, alternativt liknande tjänster. Tänk på begränsningar såsom CORS (Cross-Origin Resource Sharing) och HTTPS

• Inlämning ska nyttja en databas, i form av dokumentdatabasen (MongoDB)

• Inlämning ska använda Node.JS med Express för att implementera serverkod

Uppgiften bör uppfylla följande övergripande mål:

• Inlämning bör ha en användarstudie/användningsanalys med minst 10 svar från olika personer (det är okej att fråga i klassen)

  • Se guide på https://webbriktlinjer.se/anvandarcentrering-tjanstedesign/utfor-anvandningsanalys/

• Inlämning bör använda antingen React eller Angular för att implementera frontend, det är inte ett krav att använda Flux, Redux eller liknande för statehantering

• Inlämning bör göras tillgänglig för användning även offline (PWA)

• Inlämning bör ha fullgod dokumentation för API (via t.ex. Postman)

Generella krav på arbetsprocess

• Uppgiften måste versionshanteras i Git, inlämningar med en commit i vid inlämning kommer inte godkännas.

• För denna uppgift ska du följa GitHub Flow som arbetsmetodik när du arbetar med Git. Uppgiften kommer inte godkännas om denna metodik inte följs.

• Inlämning ska följa kodstandarder:

  • För JavaScript:

    • [ ] http://airbnb.io/projects/javascript/

  • För CSS:

    • [ ] https://github.com/airbnb/css

  Följ denna guide för konfiguration: https://travishorn.com/setting-up-eslint-on-vs-code-with-airbnb-javascript-style-guide-6eb78a535ba6

Inlämning

Uppgiften ska lämnas in via classroom.github.com i rätt projekt, länk till detta projekt kommer annonseras av läraren i samband med projektets början.

Förslag på planering

Vecka 1: Ta fram och skapa UX och design, användaranalys. Bygg samtliga vyer i applikationer och komponenter i React.

Vecka 2: Påbörja implementation av backend i Node. Utgå från vad som kommer behöver lagras i databasen och hur den datan ska behandlas, det är rekommenderat att använda sig av ett ER diagram. Börja sedan implementera authentication i backend, testa kontinuerligt med Postman för varje route och motsvarade metod som läggs till i API:et.

Vecka 3: Påbörja koppling med frontend och backend, saker som varit statiska i React i frontend kan nu börja kopplas mot API:et. Om tiden tillåter - testa deploya (många gånger).

Vecka 4: Testa, testa, testa igen och testa lite till. Se till att alla de tekniska kraven är uppnådda - deploya till produktion och testa allt igen (i olika webbläsare, be gärna om hjälp för att testa av)

Vecka 5: Försök lösa så många av de kritiska buggarna som möjligt innan inlämning eller bygg på med extra funktionalitet för att få försöka nå högre betyg

Förslag på projekt

• Webbshop

• Bokningssystem

• Fotoapplikation

• Twitter-klon

• Web-baserad emulator

Betygsättning

Den här inlämningen ger underlag för följande kursmål. Där inlämningen helt motsvarar och går att bedöma för de mål som står med svart text och bara delvis de som står med brun text.

• HC 2.1 Webbutveckla responsivt och browseranpassat med HTML och CSS enligt aktuella webbstandarder

• HC 2.2 Utveckla browseranpassad CSS

• HC 2.3 Optimera och validera HTML & CSS

• HC 2.4 Webbutveckla med anpassning för tillgänglighet

• —

• JS 1.1 JavaScript / ECMAScript

• JS 1.4 DOM-manipulation

• JS 1.7 Lexical scope

• JS 1.8 Event handling

• JS 2.1 Utveckla webblösningar med JavaScript

• JS 2.3 Använda befintliga API:er som en komponent i den egna appen

• —

• PG 2.2 Identifiera, formulera, analysera och lösa problem inom programmering

• PG 2.9 Arbeta med versionshantering både enskild och inom ett team

• PG 3.1 Identifiera, formulera, analysera och använda sig av informationssökning för att lösa problem inom programmering

• —

• UD 1.1 Grafik och design för webbsidor

• UD 1.2 UX och användbarhet

• UD 1.5 Personas och målgruppsanalys

• UD 2.1 Ta fram grundläggande grafik och design för webb

• UD 3.1 Arbeta som Fullstack-webbutvecklare med UX och grundläggande design

Godkänd

För att nå Godkänd som betyg på denna inlämning ska du:

• utför alla färdigheter (2.x) som uppgiften har som mål med gott handlag

• Med gott handlag syftas det till att inlämnad kod ska enhetligt följa standarder för frontend som är angivna i uppgiftsbeskrivningen

Väl godkänd

För att nå Väl godkänd som betyg på denna inlämning ska du:

• utför alla färdigheter (2.x) som uppgiften har som mål med mycket gott handlag

• Mycket gott handlag omfattar godkänd nivå men inlämning innehåller även utförlig och enhetlig dokumentation för hela kodbasen (i både kod och separat dokumentation)