4. semesterprojekt

Introduktion

Dette er siden til mit 4. semestersprojekt på datamatikerudannelsen (UCL Odense).

Projektet går ud på at udvikle en ny hjemmeside til Den Frie Bibel, som er en organisation der ønsker at lave en udgave af den danske bibel, som er uden ophavsret (imodsætning til den autoriserede fra bibelselskabet). Der vil også blive udviklet en tilhørende app både til iOS og Android. Igennem denne platform skal brugere kunne hjælpe i oversættelsesarbejde fra den hebraiske og græske grundtekst til dansk. Derudover vil det være muligt at se argumentationen bag oversættelserne, give kommentarer, og dermed være med til at skabe en så god og åben oversættelse som muligt.

Her vil jeg også dokumentere mit læringsforløb i form af en blog, litteraturliste, produktliste, læringsplaner og læringsmål. I bloggen kan du følge med i processen fra start til ende, med alle de op- og nedturer det medfører. I litteraturlisten kan man se links til diverse hjemmesider og materialer som jeg har benyttet til min læring. På projektsiden kan man se alle diverse små projekter og produkter, som er kommet ud af semesterprojektet. Under læringsmål/-plan kan man se de mål og planer jeg har lagt for mit læringsforløb.

Dette er min personlige portfolio til projektet, men jeg arbejder også sammen med 3 andre herlige mennesker, som hver især har deres egne fag og fokusområder der bidrager til projektet.

Emner

Frontend webudvikling med React.js

Mit første fag omhandler frontend webudvikling med et særligt fokus på react.js. Til hjemmesiden skal der selvfølgelig være en brugergrænseflade, hvor man kan interagere med hjemmesiden. Her tænkes der særligt på at brugeren skal kunne læse i bibelen, men de skal også kunne hjælpe i oversættelsesarbejdet, enten i form af en ny oversættelse, eller ved at give kommentarer til den nuværende. Dette vil selvfølgelig kræve en brugergrænseflade, og det er her React.js kommer ind i billedet. React.js er et gratis open-source library til at lave frontends til hjemmesider med, og som navnet hentyder til, så bliver det skrevet i JavaScript.

React.js benytter sig af UI components som kan genbruges flere gange på sin hjemmeside. Dermed undgår man bøvlet fra simpel HTML, hvor man er nødt til at lave en del gentagelser i forskellige dokumenter. Dette gør også React til deklarativt, da man kan bygge disse diverse strukturer/komponenter. Problemet med React er at det er et frontend library, og dermed er det lidt tomt, hvis man ikke inkludere noget backend (jf. fag nr. 2 - Node.js).

Udfordringen for mig bliver at det er et helt nyt sprog (JavaScript), som jeg skal til at lære. Jeg har langt mere erfaring med C#, så først og fremmest skal jeg lære JavaScript syntax og særheder. Dernæst skal jeg lave diverse øvelser med React. Hvad kan man lave? Hvordan laver man det? Hvordan er det anderledes? osv. Planen er at jeg vil følge en YouTube tutorial (se litteraturliste), og sideløbende lave nogle små projekter.

Backend webudvikling med Node.js

Mit andet fag omhandler backend webudvikling med et særligt fokus på node.js. Hjemmesiden har en brugergrænseflade, men hvad er den grænseflade værd, hvis den først og fremmest ikke kan sendes til brugeren, og hvis bruger ikke kan interagere med den på en meningsfuld måde? Til dette kan vi bruge Node.js. Node er et backend server environment, hvormed man kan lave server og hoste en hjemmeside. Dette er selvfølgelig meget relevant i sammenhæng med den frie bibel, da der er behov for en en server som kan håndtere brugernes requests, og sende dem videre til relevante services (f.eks. en database).

Node.js bruger JavaScript ligesom React, og derfor er disse 2 et meget oplagt par. Det er en såkaldt "Event-Driven Architecture", som betyder at Node er drevet af de events som brugere sender til det. Disse events defineres som "a significant chagne in state", så f.eks. hvis en bruger vil sende en kommentar til en oversættelse, er det en event. Node.js er også særligt designet til at håndtere mange forbindelser ad gangen, hvilket kunne være praktisk til en bibel som måske mange vil læse.

Udfordringen bliver igen, at jeg skal lære et nyt programmingssprog, men også en ny tankegang i form af backend udvikling. Som nævnt vil jeg starte med at lære JavaScript, og få en god forståelse for dets syntax og brug. Derefter vil jeg gå igennem en Node.js tutorial på YouTube (se litteraturliste), og dermed få en grundlæggende forståelse for hvordan man bruger Node.js.

Se produkt på domæne

Se projektet på GitHub

Teamet

Betül K. Türkoglu

Appudvikling (Swift iOS) og UI/UX

Jakob G. Fredsøe

IT-sikkerhed og Database

Martin J. R. Jensen

Frontend (React.js) og Backend (Node.js)

Thor L. Hansen

Appudvikling (Android) og UI/UX

Blog

Retrospective

31-05-2023

Læs mere

Uge 21

29-05-2023

Læs mere

API

23-05-2023

Læs mere

Uge 20

22-05-2023

Læs mere

Udrulning

16-05-2023

Læs mere

Uge 19

15-05-2023

Læs mere

Uge 18

08-05-2023

Læs mere

Authentication

02-05-2023

Læs mere

Uge 17

01-05-2023

Læs mere

Uge 16

24-04-2023

Læs mere

Uge 15

24-04-2023

Læs mere

Databehandling

11-04-2023

Læs mere

Opsætning af Next.js

11-04-2023

Læs mere

Uge 13

10-04-2023

Læs mere

Uge 12

27-03-2023

Læs mere

Database

20-03-2023

Læs mere

Uge 11

20-03-2023

Læs mere

Uge 10

13-03-2023

Læs mere

Læseoplevelse

10-03-2023

Læs mere

Next.js

08-03-2023

Læs mere

Uge 9

06-03-2023

Læs mere

UI/UX

02-03-2023

Læs mere

Getting hooked

28-02-2023

Læs mere

Uge 8

24-02-2023

Læs mere

Wireframes

23-02-2023

Læs mere

Uge 7

20-02-2023

Læs mere

React.js introduktion

17-02-2023

Læs mere

Uge 6

13-02-2023

Læs mere

Node.js introduktion

09-02-2023

Læs mere

Første opslag

26-11-2022

Læs mere

Læringsplan

Uge 6-7

Plan

React.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Forstå React.js syntaks	Se tutorials, og kode det ind på en test hjemmeside	Når jeg kan lave en component og genbruge den	Det gik godt, men var måske også et alt for nemt mål.
Lære hvordan man kombinerer React med Node	Lave en simpel hjemmeside med en React component	Når Node.js serveren kan sende en side der benytter React	Ikke rigtig lykkedes, men vist fordi React gør det på en anden måde. Dog fungere Node som backend.

Node.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Undersøg hvilke IDE’s der kan bruges	Læse om de forskellige IDE’s og høre om andres holdninger	Når jeg har udvalgt en IDE	Jeg endte med at vælge Visual Studio Code som IDE/Text editor. Det virker som om det er den mest populære.
Få en forståelse for hvordan man laver en server	Se tutorials og implementere det i den valgte IDE	Når jeg kan lave en server og kan danne forbindelse til den	Det lykkedes, og var meget nemt med Express.js.

Mål

React.js

Viden - Den studerende har viden om:

Basal JavaScript programmering
Forståelse for hvordan en React component laves
Vide hvordan man ændrer en components udseende

Færdigheder - Den studerende kan:

Lave en React component
Indsætte en component på en hjemmeside

Kompetencer - Den studerende kan:

Genbruge React componenten i forskellige sammenhænge

Node.js

Viden - Den studerende har viden om:

Basal JavaScript programmering
Viden om hvordan en Node.js server laves
Kendskab til dets styrker og svagheder
Forklare forskellen mellem Node.js og andre backends

Færdigheder - Den studerende kan:

Sætte en server i gang
Lave persistens af data igennem serveren

Kompetencer - Den studerende kan:

Bruge en Node.js server til at vise en React component

Tidsplan

Mandag 06	Tirsdag 07	Onsdag 08	Torsdag 09	Fredag 10
Scrum planlægningsmøde Portfolio Læringsmål og -plan	Objektmodel, domænemodel, kravspecifikation Portfolio	Procesvejledning Portfolio Læringsmål og -plan	ERFA-møde (Node.js) Find IDE til Node.js Begynd på Node.js tutorial (Episode 1-6)	Use cases Node.js tutorial (Episode 7-12)

Mandag 13	Tirsdag 14	Onsdag 15	Torsdag 16	Fredag 17
Begynde på React tutorial (Episode 1-8) Begynd på at lave hovedsiden til produktet	React tutorial (Episode 9-14) Kombinér Bootstrap og React	Find font, farver og design template til produktet	Lav en simpel backend til produktet	ERFA-møde (React.js) Scrum review / retrospective

Uge 8-9

Plan

React.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Lære hvordan man binder til en component	Se tutorials, og kode det ind på en test hjemmeside	Når en parent component kan læse og skrive til og fra en component's data	Det gik rigtig godt. Jeg fandt ud at man kan bruge props til at skrive til og fra components.
Forstå hvad React Hooks er, og hvordan de bruges	Læse om dem, og lave små øvelser med dem	Når jeg kan bruge react hooks i en component	Det lykkedes, så nu bruger jeg react hooks til at opbevare data med.
Undersøge hvad Next.js er og hvordan det hænger sammen med React.js	Se videoer om det på YouTube og kigge på deres hjemmeside	Når jeg kan lave et Next.js projekt og nogenlunde forstå projektstrukturen	Glemte jeg fuldstændig at kigge på, så det skal ses på næste gang

Node.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Lære hvordan API pathing fungere	Se eksempler og se Node.js' dokumentation	Når API'en kan hente fra forskellige filer og benytte parametre fra URL	Relativt lige til, så nu kan API'en hente data alt efter parametre givet i URL.
Undersøge hvordan man kan hente headers fra en HTTP request	Se tutorials og lave en lille test	Når jeg kan hente f.eks. en API key fra en request	Glemte jeg at kigge på som med Next.js. Jeg skal blive bedre til at indkludere mål i tidsplan.

Mål

React.js

Viden - Den studerende har viden om:

Hvordan komponenter sender data mellem hinanden
React hooks og hvordan de bruges
Basal viden om Next.js

Færdigheder - Den studerende kan:

Få react komponenter til at lytte til hinandes events og aflæse/sende data
Benytte React hooks

Kompetencer - Den studerende kan:

Bruge bruger input til at lave API requests

Node.js

Viden - Den studerende har viden om:

Pathing
Viden om hvordan en Node.js server laves
Kendskab til dets styrker og svagheder
Forklare forskellen mellem Node.js og andre backends

Færdigheder - Den studerende kan:

Aflæse headers fra en HTTP request til Node.js serveren
Aflæse body fra en HTTP request til Node.js serveren

Kompetencer - Den studerende kan:

Læse data fra en fil på baggrund af valgte parametre i en request

Tidsplan

Mandag 20	Tirsdag 21	Onsdag 22	Torsdag 23	Fredag 24
Scrum planlægningsmøde Læringsmål og -plan React tutorial 14-16	ES6 tutorial 17-20 Læs om Express.js routing Læs om Express.js Get request og dets parametre	Procesvejledning Node.js tutorial 13-16	ERFA-møde (Node.js) Wireframes og hjemmesidedesign	Frie hænder, lav på produktet hvad du vil

Mandag 27	Tirsdag 28	Onsdag 01	Torsdag 02	Fredag 03
Produktvejledning Node.js tutorial 17-21	ES6 tutorial 21-25 React tutorial 17-21	Frie hænder, lav på produktet hvad du vil	???	ERFA (React.js) Scrum review / retrospective

Uge 10-11

Plan

React.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Undersøge hvad Next.js er og hvordan det hænger sammen med React.js	Se videoer om det på YouTube og kigge på deres hjemmeside	Når jeg kan lave et Next.js projekt og nogenlunde forstå projektstrukturen	Det gik rigtig fint. Nu føler jeg, at jeg har en grundlæggende forståelse for Next.js og hvordan jeg kan bruge det.
Have kendskab til brugen af context i React.js	Læse dokumentation på React hjemmesiden, og se eventuelle tutorials	Når en komponent kan sætte noget data i context, og en helt anden kan hente dataen	Det vidste sig at være lidt det forkerte at lære. I stedet brugte jeg localStorage.

Node.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Lære hvordan Node.js kan etablere en forbindelse til en database	Læse om Express.js' dokumentation og se videoer	Når API'en kan hente data fra en database fremfor filer	Rigtig nemt, men jeg stødte ind i problemer med forbindelsen.
Undersøge hvordan man kan hente headers fra en HTTP request	Se tutorials og lave en lille test	Når jeg kan hente f.eks. en API key fra en request	Det er relativt nemt, men ikke så brugbart lige nu.

Mål

React.js

Viden - Den studerende har viden om:

Hvordan Next.js kan bruges sammen med React
Alternativer til Next.js
React context

Færdigheder - Den studerende kan:

Lave et Next.js projekt
Benytte React context som 'global' dataopbevaring

Kompetencer - Den studerende kan:

Kan omdanne et alment React projekt til Next.js

Node.js

Viden - Den studerende har viden om:

MySQL serverer
Hvor headers opbevares i en request i express

Færdigheder - Den studerende kan:

Etablere en forbindelse til en MySQL server i Node.js
Hente information fra headers i Node.js

Kompetencer - Den studerende kan:

Benytte Headers til at tjekke efter en API-key
Omdanne data fra databasen til JSON

Tidsplan

Mandag 06	Tirsdag 07	Onsdag 08	Torsdag 09	Fredag 10
Læringsplan Blogopslag	Læs om Next.js Lav et projekt i Next.js	Procesvejledning Lav hvad du vil på projektet	ERFA (Node.js) Undersøg context i React.js Brug context til at lave læseoplevelse	Lav hvad du vil på projektet

Mandag 13	Tirsdag 14	Onsdag 15	Torsdag 16	Fredag 17
Lav simpel database i MySQL Få forbindelse til database i Node.js Blogopslag	Projektvejledning Praktik workshop	Lav hvad du vil på projektet	Læs om headers i Node.js Brug headers til content negotiation	ERFA (React.js) Lav hvad du vil på projektet

Uge 12-13

Plan

React.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Vide hvordan man laver en login form	Se tutorials og læse artikler	Når jeg kan lave en React form til loginoplysninger	Det blev til en kontakt form, men den kan nemt omdannes

Node.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Undersøg hvordan man håndtere login med API	Se videoer og læse artikler	Når man kan logge ind med API'en	Fejlet pga. sygdom
Brug databasen i stedet for filer til API	Læse artikler og se videoer	Når API'en kan hente fra databasen uden fejl	Fejlet pga. sygdom

Mål

React.js

Viden - Den studerende har viden om:

Hvordan man laver forms i React
Hvad skal der tages højde for til en loginside

Færdigheder - Den studerende kan:

Lave en login-form i React

Kompetencer - Den studerende kan:

Benytte login-form i sammenhæng med en login API

Node.js

Viden - Den studerende har viden om:

Færdigheder - Den studerende kan:

Håndtere en login request igennem en API

Kompetencer - Den studerende kan:

Lav et logud system

Tidsplan

Mandag 20	Tirsdag 21	Onsdag 22	Torsdag 23	Fredag 24
Læringsplan Blogopslag Planlægningsmøde	Ikke tilgængelig	Procesvejledning Forbered PO-præsentation Projektarbejde	ERFA-møde (Node.js) PO-møde on location	React.js tutorial (22-26) Projektarbejde

Mandag 27	Tirsdag 28	Onsdag 29	Torsdag 30	Fredag 31
Blogopslag Node.js tutorial (22-26)	Lav hvad du vil på projektet Produktvejledning	Undersøg login igennem API Lav en loginside	Lav et mini-projekt i Next.js	ERFA (React.js) Review/Retrospective

Uge 15-16

Plan

React.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Vide hvordan man laver en login form	Se tutorials og læse artikler	Når jeg kan lave en React form til loginoplysninger	Det lykkedes, og fik også tilføjet user validation.
Registrering side til login	Se tutorials og læse artikler	Når jeg kan lave en React form til registrering	Uden backend, men nu er der en registrerings side.
Logud side	Se tutorials og læse artikler	Når man kan logge ud og sessionen bliver glemt	Ikke nødvendig alligevel, da man sjældent har en logud side.

Node.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Undersøg sikkerhedshuller i login	Læs artikler og se videoer	Når der er dokumenteret for min. 5 sikkerhedshuller	Gjort.
Find ud af hvordan man bruger cookies i Node.js/Next.js	Læs artikler og se videoer	Når jeg kan få cookieinformation fra en request	Jeg ved hvordan, man har ikke et godt use case endnu.

Mål

React.js

Viden - Den studerende har viden om:

Hvordan man laver forms i React
Hvad skal der tages højde for til en loginside

Færdigheder - Den studerende kan:

Lave en login-form i React

Kompetencer - Den studerende kan:

Benytte login-form i sammenhæng med en login API

Node.js

Viden - Den studerende har viden om:

Færdigheder - Den studerende kan:

Håndtere en login request igennem en API

Kompetencer - Den studerende kan:

Lav et logud system

Tidsplan

Mandag 10	Tirsdag 11	Onsdag 12	Torsdag 13	Fredag 14
Helligdag	Blogopslag Scrum planning Læringsplan	Lav login form til projekt Gør så form'en sender en request til backend Procesvejledning	IT-dag på Cortex park	ERFA (React.js) Læs om hvordan man kan lave login system fra bunden Fri leg på projektet

Mandag 17	Tirsdag 18	Onsdag 19	Torsdag 20	Fredag 21
Blogopslag Læs videre om login på backend siden	Produktvejledning Fortsæt med PBI'er	Læs om sikkerhedshuller i login system Dokumentér de pitfalls der normalt er i loginsystemer	Fri leg på projektet ERFA (Node.js)	Sørg for at man kan logge ind og ud og at login bliver persisteret

Uge 17-18

Plan

React.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Lære hvordan man laver en pop-up vindue	Se videoer på YouTube	Når jeg ved at trykke på en HTML knap, kan vise et vindue.	Var faktisk ikke nødvendigt med videoer, så det var faktisk nemt.

Node.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Gør så man kan registrere en ny bruger	Se eksempler i andre projekter, og læse Next-Auth dokumentation.	Når der kommer en ny bruger i backenden	Next-Auth viste sig at være lidt for underligt til mig, så jeg har lavet mit eget system.
Opret relevante tabeller i databasen	Læs om MySQL library til JS	Når der min. er en kapitel, vers, og bog tabel	Det blev ikke til kapitel, vers eller bog tabel, men i stedet til user og session. Altså til login system.
Lav et session system	Se kode eksempler og youtube videoer	Når brugeren kan logge ind, og deres session bliver gemt til næste gang	Det var faktisk ikke så slemt. Faktisk gøre Next-Auth det for kompliceret, så det var godt med mit eget system.

Mål

React.js

Viden - Den studerende har viden om:

Vide hvordan React hooks can bruges til at åbne/lukke en div

Færdigheder - Den studerende kan:

Lave et pop-up vindue

Kompetencer - Den studerende kan:

Bruge en form til at registrere en ny bruger

Node.js

Viden - Den studerende har viden om:

Basic MySQL syntaks

Færdigheder - Den studerende kan:

Koble backenden på en MySQL database

Kompetencer - Den studerende kan:

Designe en passende database

Tidsplan

Mandag 24	Tirsdag 25	Onsdag 26	Torsdag 27	Fredag 28
Blogopslag Læringsplan PO-møde	Begynde at kigge på pop-up i React.js Lav et simpelt pop-up Læringsmål	Procesvejledning Kig på MySQL	"Fri leg" på projektet	ERFA møde (React.js) "Fri leg" på projektet

Mandag 01	Tirsdag 02	Onsdag 03	Torsdag 04	Fredag 05
Kig på registrering af bruger	Produktvejledning Finpudsning af produktet	Fysisk PO-møde	ERFA møde (Node.js) Express.js backend øvelse	"Fri leg" på projektet

Uge 19-20

Plan

React.js

Jeg har besluttet, at jeg har fokuseret for meget på React.js, så fremover vil jeg kun lære mere om backend. Det vil selvfølgelig stadig være nødvendigt at lave mere frontend, men jeg vil ikke lære nye React koncepter.

Node.js

Delmål	Hvordan vil jeg gøre det?	Hvornår er det gjort?	Evaluering
Upload en Next.js hjemmeside til en webhost	Finde en webhost der tillader node, og læse dokumentation	Når andre kan finde hjemmesiden	Det lykkedes delvist. Min webhost tillader kun gamle versioner af node, så kunne kun vise simple hjemmesider.
Lære hvordan Next.js håndtere HTTP koder i API'en	Læse Next.js dokumentation	Når min API kan se forskel på HTTP koder	Det fungere rigtig godt. På den måde kan jeg sikre, at API'en kun godtager korrekte requests.
Opnå kendskab til almindelige sikkerhedshuller	Læse artikler og se YouTube videoer	Når jeg kan nævne 5 sikkerhedshuller	Jeg har valgt at droppe sikkerheds-aspektet. Jeg beskytter med SQL injections, men der kunne være meget mere.

Mål

React.js

Node.js

Viden - Den studerende har:

Basal kendskab til HTTP koder og deres anvendelse

Færdigheder - Den studerende kan:

Uploade en Next.js hjemmeside til en webhost
Anvende HTTP koder i en API kontekst

Kompetencer - Den studerende kan:

Vurdere hvilke webhosts der kan bruges til Next.js

Tidsplan

Mandag 08	Tirsdag 09	Onsdag 10	Torsdag 11	Fredag 12
Blogopslag Læringsplan Fortsæt på script PO-møde	Upload al tekst til databasen Kobl API'en til bibelteksten i databasen	Procesvejledning 'Fri leg' på projektet	Generel læsning	ERFA møde (React.js) 'Fri leg' på projektet

Mandag 15	Tirsdag 16	Onsdag 17	Torsdag 18	Fredag 19
Begynde at uploade hjemmeside til webhost	Produktvejledning	'Fri leg' på projektet	ERFA møde (Node.js) Arbejd med POST og PUT i API'en	'Fri leg' på projektet

Uge 21-22

Plan

React.js

Node.js

Der vil ikke være ny læring indenfor Node.js. (Ihvertfald ikke store ny emner), så derfor vil jeg fokusere på at finpudse det jeg har.

Mål

React.js

Node.js

Der vil ikke være ny læring indenfor Node.js. (Ihvertfald ikke store ny emner), så derfor vil jeg fokusere på at finpudse det jeg har.

Tidsplan

Mandag 22	Tirsdag 23	Onsdag 24	Torsdag 25	Fredag 26
Blogopslag Læringsplan Database og API	Kommentarspor	Kommentarspor Procesvejledning Start på videoproduktion	Kommentarspor	ERFA møde (React.js) Udrulning af hjemmeside

Mandag 29	Tirsdag 30	Onsdag 31	Torsdag 01	Fredag 02
Færdiggør video Gør endelig aflevering klar	Aflevér projekt (senest) Lav præsentation	Lav 'retrospective' blogopslag Små finpudsninger på produkt og præsentation	Sidste forberedelser til eksamen Øv præsentation	Eksamen

Læringsmål

Frontend webudvikling med React.js

Viden - Jeg har

Grundlæggende forståelse for state management i React
Kendskab til de væsentlige forskelle mellem komponenttyper
Basal forståelse for projektstrukturen i Next.js

Færdigheder - Jeg kan

Udvikle simple genanvendelige komponenter
Bruge CSS modules og Bootstrap til at style en komponent
Benytte React hooks til håndtering af en komponents state
Sende requests til en backend og anvende resultater derfra

Kompetencer - Jeg kan

Kombinere relevante komponenter til en ny hjemmeside
Forsvare designbeslutninger i udvikling af en frontend
Diskutere fordele og ulemper ved React

Backend webudvikling med Node.js

Viden - Jeg har

Kendskab til JSON formatet, og hvordan det benyttes
Elementær forståelse for forskellen mellem Node og alternativer
Generel viden om hvordan man kan lave en server i Node

Færdigheder - Jeg kan

Installere og anvende npm packages
Udrulle en Node.js-baseret hjemmeside til et webhotel
Udvikle produktrelevante JavaScript modules
Behandle API requests og sende passende repons
Persistere en hjemmesides data til en database (f.eks. MySQL)

Kompetencer - Jeg kan

Kombinere en Node.js backend med en frontend
Planlægge strukturen af en database
Designe et authentication/authorization system

Litteratur

React.js

Introduktion

React.js hjemmeside
Her kan der læses om React overordnet fra React selv. Dokumentation, små tutorials og mere!

React.js - Wikipedia
Lidt mere om Reacts historie, og tanker om React som ikke kommer direkte fra React (f.eks. fordele og ulemper), som et hurtigt overblik over de vigtigste elementer i React.

YouTube tutorial til React.js
Denne tutorial serie går igennem alt React, og han fortæller på en simpel måde hvordan man kan bruge React. Et problem er at han ikke laver et større produkt igennem projektet, så det man lærer kommer meget i brudstykker og isoleret. På den anden side, så behøver man ikke følge alt, for at kunne bruge et givent afsnit.

React.js frontend / Node.js backend tutorial
En god tutorial til et få opsat et simpelt frontend/backend projekt med React og Node.

Components

Functional vs. Class components
Artikel som fortæller om forskellene mellem funktionelle og klasse komponenter. Her er det især tydeligt, hvor meget mere kompakt en funktionel komponent er.

Functional components
Her læste jeg om hvad der lægger bag en functional componenet, hvordan virker, og hvordan den kan bruges.

Component performance
Jeg havde hørt, at class components skulle have værre performance end functional, men her viser han faktisk, at der ikke er en meningsfuld forskel.

State management

Introduktion til React hooks
Kort side der giver React hooks basics med et lille eksempel.

React hooks typer
Jeg fandt senere ud af, at der faktisk er flere typer React hooks. Her er dokumentationen til det.

useEffect
useEffect er en metode som man kan koble på React hooks. Så f.eks. hvis en hooks værdi ændres, kan man kalde en useEffect. Meget god hvis man skal ændre en hook, når en andens værdi bliver ændret.

React context
Artikel om hvordan man bruger React Context til state management i React.js.

localStorage i React.js
God video om hvordan man bruger localStorage i React.js til at persistere data mellem sessions.

TypeScript

JavaScript vs. TypeScript
En artikel om forskellen mellem TypeScript og JavaScript samt deres indbyrdes fordele og ulemper. TypeScript er nok "bedre" til mig personligt, man jeg har valgt at bruge JavaScript, da jeg tror det er nemmere at gå fra JavaScript til TypeScript end omvendt i fremtiden.

YouTube tutorial til ES6 / JavaScript
I denne tutorial serie går han igennem ES6 aka. JavaScript, og fortæller om de forskellige features der i programmeringssproget. Han fokuserer nok lidt for meget på det nye i ES6 fremfor ES generelt, men jeg har stadig lært nogle gode ting derfra.

Opsætning tutorial
Denne tutorial kan bruges til at opsætte et simpelt TypeScript projekt i VS Code.

Next.js

Typer af rendering - video
Der bruges forskellige typer af rendering når det gælder hjemmesider, og denne video giver et fint overblik over disse.

Next.js
Next.js' egen hjemmeside hvor man kan finde dokumentation, små kurser osv.

Next.js vs. Node.js
Et quora spørgsmål om forskellen mellem Node.js og Next.js. Jeg synes selv det lød ens, så jeg ville lære om forskellen mellem dem.

Next.js tutorial
Tutorial til et lave et simpelt Next.js projekt med post its.

Next.js introduktion kursus
Next.js' eget introduktions kursus hvor man laver en simpel blog. Her fik jeg et introducende kig på Next.js og hvordan det fungere.

Styling

React bootstrap library
Link til et godt library til bootstrap i React.

React bootstrap installation
Tutorial til installation af Bootstrap i React (og node.js generelt)

Best way to choose colors for UI design - YouTube
Kort video der snakker om designprincipper ift. hjemmesider. F.eks. farvevalg.

Bootstrap display
Med disse forskellige display klasser i Bootstrap, kan man vælge hvilke elementer der skal vises på forskellige skærme. Virkelig god til at designe hjemmesider til mobil og pc.

CSS Modules i React
Dokumentation om hvordan man kan benytte CSS modules i sin React app.

Typografi

Whats the most readable font for the screen
Artikel om hvilke fonts der er gode til skærme, der er ikke så mange eksempler, men mere tanken bag typografi.

10 Principles for readable web topygraphy
En artikel der går lidt mere i dybden med de forskellige principper, som lægger bag en god font til et givent formål.

Top 12 easy to read fonts
Her er en artikel med en liste af fonts, som kan være gode til hjemmesider.

Forms

Form samples i Bootstrap
God side til at finde eksempler på hvordan man kan designe en form med Bootstrap.

Forms i React.js
Artikel om de måder man kan lave en form i React.js.

Form validation
Artikel om hvordan man kan lave validering af input felter i React.js forms.

Email validation
Artikel om hvordan man kan lave validering af særligt E-mails i JavaScript.

Node.js

Introduktion

Node.js hjemmeside
Node.js' egen hjemmeside med dokumentation og små tutorials.

Node.js - Wikipedia
Wikipedia side med Node.js' historie og et overblik over hvad Node.js er og hvad det kan bruges til.

Node.js og alternativer
Artikel som beskriver Node.js' fordele og sammenligner det med andre backend teknologier.

NVM - Node Version Manager
Med NVM kan man installere forskellige version af Node.js, og så kan håndtere det. Jeg tog Windows versionen, da jeg arbejder på Windows, men der er også til andre OS'. Rigtig god og nem måde at få node og npm op at køre hurtigt.

YouTube tutorial til basic omsætning af Node.js
Simpel tutorial hvor man lærer at opsætte en simpel backend med Node.js.

YouTube tutorial til Node.js
Tutorial serie / kursus, hvor man lærer om de forskellige elementer i Node.js. Var rigtig god i starten, men senere har den ikke været ligeså brugbar fordi emnerne ikke altid matchede det man havde brug for i projektet.

Valg af IDE

Top 11 Node.js IDE's
En liste over alle de mest brugte IDE's til Node.js. VS Code lader til at være den mest almindelige (især på YouTube), så tror at jeg vælger den.

Quora - Should I use Visual Studio or Visual Studio code to develop Node.js projects?
Jeg lagde mærke til at man kunne bruge JavaScript og Node.js i Visual Studio, og jeg er meget mere vant til VS fremfor VS Code, så jeg håbede egentlig at VS var bedst. Men jeg ville alligevel høre andres mening.

Top Node.js IDE's for App Development in 2022
Endnu en liste med de bedste/mest brugte IDE's til Node.js.

TypeScript og Node.js

YouTube tutorial til opsætning
Tutorial til opsætning af Node.js med TypeScript.

Express.js

Routing
En guide til hvordan man kan bruge Routing i Express.js. Dette er meget relevant, hvis man gerne vil benytte sig af URL routing på sin hjemmeside (og til API).

Hvordan får man parametre fra en request?
Et Stackoverflow svar der viser hvordan man går data ud af en request i Express.js, så man kan bearbejde den ordenligt.

Login

Should you Implement Authentication Yourself?
Video hvor han fortæller om man burde lave sit login system fra bunden.

Authentication vs. Authorization
God video hvor han fortæller om forskellen mellem authentication og authorization, samt giver et eksempel på en simpel flow i Auth.

Node.js authentication eksempel
Et simpelt eksempel på hvordan en backend kan håndtere en authentication request.

Identity Guidelines - NIST
Artikel om aspekter man skal være opmærksom på, når man laver et login system. Særligt sektion 5.1.1.1 blev brugt.

Krypterings package til Node.js
Denne package er god til at hashe f.eks. adgangskoder, og har også en Salt funktion inkluderet.

Input / Output

Read from files in Node.js
En artikel om hvordan man kan se hvordan man læser filer i Node.js.

Write to files in Node.js
En artikel om hvordan man kan skrive til filer i Node.js. Meget praktisk til log filer.

Working with folders in Node.js
En artikel om hvordan man f.eks. laver mapper i Node.js.

Udrulning

Node.js hosting muligheder
Artikler om de mest populære Node.js hosting services. Man kan læse om fordele og ulemper ved de forskellige services.

Simply.com
Simply.com tillader Node.js på PHP-suiten, men man kan desværre ikke lave en Node-server, hvilket begrænser væsentligt.

A2 Hosting & Node.js
Artikel om hvordan man laver en Node.js server på A2 hosting. Den er faktisk misvisende da den node.js version man installere, ikke rigtig kan benyttes. Brug derfor i stedet deres indbygget "Node.js selector". Dog er .htaccess filen et god udgangspunkt.

Getting started - Node.js
Her kan man læse om hvordan man kan lave en simpel Node.js server. Meget brugbart til at teste udrulning services.

Database

MySQL i JavaScript
Simpel tutorial til hvordan man får forbundet til en MySQL database i JavaScript / Node.js. Meget brugbar, men jeg stødte på nogle fejl. Måske bare i min implementation?

Serverless MySQL
Package der kan bruges til at håndtere MySQL forbindelser. Uden dette, skal man selv håndtere forbindelser og lukke dem manuelt.

Create Table - MySQL
Side der beskriver hvordan man bruger CREATE keyworded i MySQL, og dermed hvordan man laver en ny tabel.

Datatypes - MySQL
Brugerbar artikel om de forskellige datatyper i MySQL, samt derfor formål og størrelser. Meget relevant til at vælge den bedste datatype til formålet.

Andet

JavaScript string.replace()
Jeg opdagede problemer med string.replace() i JavaScript, da den kun udskiftede det første tilfælde, så jeg måtte læse op på hvordan man bruger replace.

HTTP koder dokumentation
På denne side kan man se hvad de forskellige HTTP status koder betyder. Meget brugbart til API'er, så man kan sende en passende kode tilbage.

Set-Cookie dokumentation
Side hvor man kan læse om Set-Cookie funktionen, og hvad den modtager af parametre samt deres betydning.

Artikel om Cookies i backenden
Denne artikel er god til at forklare, de forskellige måder man kan give cookies til en request. Meget brugbart til session-tokens i auth.