FN Globala Mål Projektet

Välkommen till första projektet under våren, i det här projektet kommer vi lära oss bygga applikationer över hela stacken, både backend och frontend.
Teknikerna vi kommer lära oss är:

1. Relationsdatabaser, SQL, och PostgresSQL

Relationsdatabaser är de vanligaste och populäraste typen av databaser i världen, där några exempel är PostgreSQL, MySQL, SQL Server m.m

2. Webbtjänster med Node & Express, och ORM (Object Relational Mapper) med Prisma

Vi kommer sedan titta på hur man bygger en webbtjänst med Node och Express som ska kommunicera med vår databas i del 1.
Därefter kommer vi använda en ORM som gör det enkelt att omvandla anrop till SQL frågor.

3. Webb- och apputveckling, Vue 3, Quasar Framework

Vi har sedan tidigare jobbat med Quasar men här kommer vi lära oss Vue 3 som vi inte jobbat med tidigare. Applikationen ska kommunicera med vår webbtjänst från del 2.

Dessa tekniker kommer appliceras på att lösa ett problem inom FNs globala mål.

Hitta ett problem inom något av de 17 globala målen som FN satt vilken kan förbättras lösas med hjälp av digitalisering. En hemsida eller app.
Ni ska bygga en prototyp på lösningen med det ni lärt er kursmomenten.
Ni jobbar med projektet inom era basgrupper. Jeton kommer gå igenom hur vi jobbar med Github Flow och kanbans för bästa resultat och samarbete inom gruppen.

1. Relationsdatabaser, SQL, och PostgresSQL

Vi kommer använda den här kursen från utbildningsplattformen Udacity när vi lär oss om relationsdatabaser och SQL.
I del två på kursen så använder dem Python men vi kommer hoppa över den delen utan ni ska göra delarna 1, 2 och 4.

https://www.udacity.com/course/intro-to-relational-databases--ud197

W3Schools har också bra information om SQL och testar i online miljö! https://www.w3schools.com/sql/default.asp

https://www.freecodecamp.org/news/what-is-sql-database-definition-for-beginners/

För information on normaliseringsreglerna se

Bra SQL resurser speciellt om normaliseringsreglerna.
https://www.studytonight.com/dbms/database-normalization.php

https://www.guru99.com/database-normalization.html

PostgresSQL

För att använda PostgresSQL på era datorer så behöver vi installera det enligt följande länk. Ni behöver troligtvis admin hjälp från lärare vid installationen.

https://www.postgresqltutorial.com/postgresql-getting-started/install-postgresql/

https://www.postgresqltutorial.com/postgresql-getting-started/postgresql-sample-database/

Grupp-uppgift del 1.

När kursen är klar för alla i basgruppen ska ni skapa ett databas/relationsdiagram för er applikation. Dvs ni ska bryta ner vilka entiteter/objekt som ingår och deras relationer.

Vilka tabeller och kolumner
Data typer på kolumnerna
Primary-keys och Foreign-keys för varje tabell
Uppfylla de 4 första normaliseringsreglerna

Exempel på ett diagram ett DVD film-hyrningstjänst.

För att skapa ett sådant diagram kan ni använda webbsidan: https://app.diagrams.net/

2. Webbtjänster med Node & Express, och ORM (Object Relational Mapper) med Prisma

Node & Express

Gå igenom innehållet under Resurser-länkarna nedan som beskriver hur man skapar webbtjänster med Node och Express.
Skapa sedan ett API dvs en Node-Express-app som kommunicerar med DVD databasen som ni skapade i del 1 i PostgresSQL.
Ni ska skapa api-request som kan göra alla CRUD operationerna på en valfri tabell.
När ni gör api-anrop installera en Visual Studio Code extension som heter Thunder Client och använd det.

Dvs CRUD:

Create - Skapa en ny rad med data i tabellen.
Read - Läsa data från tabellen.
Update - Uppdatera ett värde i en rad.
Delete - Radera en rad från tabellen.

Resurser

Fireship om Restful API med Node & Express

CRUD REST API with Node.js, Express, and PostgreSQL

ORM & Prisma

Prisma är ett ORM (Object-Relational-Mapper).

Kort beskrivning om ORM att läsa: https://www.freecodecamp.org/news/what-is-an-orm-the-meaning-of-object-relational-mapping-database-tools/

Processen när man använder ett ORM:

Vi kan skapa classer med egenskaper i JavaScript.
Sedan kan vi använda Prisma (ORM) för skapa databasen åt oss, det gör Prisma genom att omvandla classerna till tabeller och egenskaperna till kolumner på tabellen.
Prisma ger oss också JavaScript funktioner som vi kan använda för CRUD-operation på databasen istället för att skriva SQL querys.

Att göra:

Gå igenom innehållet under Resurser-länkarna nedan som beskriver hur man skapar webbtjänster med Prisma.
Definera sedan klasser för tabellerna i ert relationsdiagram från DEL 1 och dess relationer. Alla ska göra övningen även fast ni i slutändan kommer använda en kopia av er databas.
Skapa sedan databasen för klasserna. Då borde ni se en ny databas i PgAdmin.
Skapa sedan api-request som kan göra alla CRUD operationerna på en valfri tabell likt förra delen. Här ska JavaScript funktioner användas och inte SQL frågor som förra delen använde.

Resurser

https://www.prisma.io/

Prisma tutorial

Prisma video tutorial

3. Webb- och apputveckling, Vue 3, Quasar Framework

VUE

Vue 3 är den senaste versionen av Vue och versionen vi kommer att använda. När vi jobbar med Vue 3 som ska man använda extension Volar istället för Vetur, så ni kan avinstallera Vetur.

Intro

Vue är ett progressivt open-source ramverk för att bygga användargränssnitt, till en början utvecklad av en Google avhoppare som heter Evan You, men underhålls idag av ett team.
Core delen av ramverket är endast fokuserat på visningsskiktet och är enkelt att komma igång med.
Vue är också fullt kapabelt att bygga sofistikerade applikationer (Single Page Applications).
Vue är flexibelt och enkelt.
Vue tillåter dig att använde det i en del av en befintlig applikation (plugin) eller hantera hela applikationen från start (CLI).
Vue-Directives är den del av Vue.js som lägger speciell betydelse och beteende till vanliga html-element på sidan.
Vue förser oss med reaktivitet vilket gör att våra vyer/sidor automagiskt uppdateras när vårat data ändras.

Steg 1

Börja med att hämta ner powerpointen med namnet Vue.pptx och gå igenom innehållet på länken Vue 3 Hands On och lös övningsuppgifterna där. Vill man titta på en Youtube video om Vue 3 rekommenderas Vue 3 With Danny.