På siden her er en beskrivelse af hele H2 forløbet med MAGS. For at se det som enkelte moduler, se under H2 - Booking side!

Inden H2

<aside> <img src="notion://custom_emoji/78111fd7-5d55-4196-af1c-1918b8dd24a0/12ddab5c-a237-80ae-a9d9-007a495f26e2" alt="notion://custom_emoji/78111fd7-5d55-4196-af1c-1918b8dd24a0/12ddab5c-a237-80ae-a9d9-007a495f26e2" width="40px" />

Slides til følgende del findes her - https://edumercantec-my.sharepoint.com/:p:/g/personal/mags_edu_mercantec_dk/EXDzIF7hM6RLt3tSFJq0gqMBleytr9TS1Tzpk0INnfF0Sg?e=c9zZ4U

</aside>

På H2 bygger vi videre på de ting som i lærte på jeres H1 forløb H1 - Markedsplads.

Her fik vi en grundlæggende forståelse inden for følgende emner:

C#, Database - specielt SQL & Blazor samt netværksteknologier på Netværk 1!

Det skal vi alt sammen bygge videre på under H2. Den største ændring er selvfølgelig kompleksiteten af jeres projekt samt at vi nu skal bruge API teknologier til at gøre vores applikation mere moderne. Vi går også fra ADO.NET til Entity Framework som er et nyt værktøj i vores værktøjskasse som vi skal mestre!

H2 tager, ligesom H1, 10 uger. I vil opleve at der er en smule mindre styring end der var på jeres H1, vi giver jer længere tid til direkte at lave projekt.

Ligesom på H1, modtager I et starter repository igennem GitHub - Classroom. I kan se standart udgaven her https://github.com/Mercantec-GHC/H2-Projekt og neden for kan I læse den inkluderede README.md fil.

Forudsætninger for H2

Fag under H2 Projekt, LUP og målpinde

Teknologier på H2 - C#, .NET og SQL

Projekt beskrivelse

Vi skal lave et bookingsystem, som hjælper et hotel med at holde styr på deres bookinger. Senere udvider vi det med ekstra funktioner og integrationer. Her er version 1 af de krav som hotel ejeren har.

Hotel Booking side

Gæst (Kunde)

Gæsterne har begrænset adgang til systemet for at administrere deres egne reservationer.


En hjemmeside som følger SPA koncepterne, hvor kunder kan følgende:

  1. Se alle ledige værelser og få et tilbud om prisen, ud fra deres tilvalg
  2. Lave en bookning af et vilkårligt værelse
  3. Håndtere deres booking, altså lave alle CRUD operationer
  4. Logge ind med deres egen bruger

Vælg en hotel-type

I skal nu vælge, hvilken type hotel I vil udvikle bookingsystemet for. Jeres valg vil påvirke, hvordan systemet skal designes og skaleres, så tænk nøje over de udfordringer og krav, som de forskellige hoteltyper præsenterer. Her er tre potentielle kunder, I kan blive udviklere for:

Hotel

1. Det store luksushotel – 400 værelser på én lokation

Forestil jer, at I arbejder for et stort luksushotel, der ligger midt i en travl storby. Hotellet har hele 400 værelser, som varierer i størrelse og pris. Det tiltrækker alt fra forretningsrejsende til turister, og det har en bred vifte af tilvalgstjenester som room service, spa, og konference lokaler.

image.png

Udfordringer:

Dette valg kræver, at I fokuserer på effektiv datastyring, så systemet kan håndtere et stort antal værelser og mange samtidige bookinger, mens der stadig er hurtig adgang til opdaterede priser og ledige værelser.

2. Hotelkæden – 3 hoteller på forskellige lokationer med 60-110 værelser

image.png

Her er I hyret af en hotelkæde, der driver tre hoteller fordelt på forskellige byer. Det største hotel har 110 værelser, mens det mindste har 60. Hvert hotel opererer med sin egen administration og lokalt personale, men de ønsker ét centralt system til at håndtere bookingerne.

Udfordringer:

Dette valg kræver, at I designer et system med multisite-funktionalitet, der kan håndtere flere lokationer med forskellige behov, samtidig med at det hele styres centralt.

3. Hostel-netværket – 10 hostels med 3-4 rum og 10-12 køjesenge

I denne case arbejder I for et netværk af små hostels, der hver har 3-4 rum, og hvor hvert rum har 10-12 køjesenge. Disse hostels henvender sig primært til unge backpackere, der har brug for billige, fleksible overnatningsmuligheder. Da gæster ofte ikke booker hele værelser, men enkelte senge, kræver det en helt anden tilgang til bookingsystemet.

image.png

Udfordringer:

Dette valg vil udfordre jer til at fokusere på detaljeret bookingstyring, hvor hvert værelse kan håndtere flere bookinger samtidig, og der er behov for dynamiske priser afhængig af efterspørgsel.

Brug af RESTful API med Blazor (eller andet SPA-framework)

<aside> <img src="notion://custom_emoji/78111fd7-5d55-4196-af1c-1918b8dd24a0/12ddab5c-a237-80ae-a9d9-007a495f26e2" alt="notion://custom_emoji/78111fd7-5d55-4196-af1c-1918b8dd24a0/12ddab5c-a237-80ae-a9d9-007a495f26e2" width="40px" />

Slides til følgende sektion kan findes her - https://edumercantec-my.sharepoint.com/:p:/g/personal/mags_edu_mercantec_dk/ET98qMizJhNBkeNLrf3gRcoBo37nnPOgwf4b18V96LM0RA?e=yrovIr

</aside>

<aside> 🚨 Vi underviser i og bruger Blazor på alle vores hovedforløb. Hvis I bruger en anden SPA-teknologi på jeres arbejdsplads, kan I tale med jeres underviser om muligheden for at bruge den i stedet. Vi underviser dog stadig i Blazor og .NET, så det er jeres ansvar at implementere det i jeres egne teknologier.

</aside>

En af de større ændringer fra H1 til H2 er, at vi skal lære at bruge og lave en API. I næste modul lærer vi at opsætte en API, bruge den til at trække data ud af vores database og sende det til vores klientside med HTTPS.

Vi starter dog med at bruge en RESTful API. Vi har opsat en RESTful API, som I skal lave kald til for at få vist data fra en database.

Eksempler på at lave disse HTTPS-API-kald kan findes her: API kald fra Blazor

Visualisere Benzinpriser

Vi skal opgaven herunder. Vi skal lære hvordan vi bruger en API og lavet et HTTPS kald inde fra en Razor komponent!

Visualisere BenzinPriser

Vi bruger følgende API med benzinpriser ved CirkleK - der er data fra 2015 og fremad.

Der er som standard åbent cors adgang fra 127.0.0.1/5500 - andre kan også bruges, men er til tider lukket.

Generelt prøver vi at lave et produkt til en kunde - så tænkt hvad vi kunne bruge dataet til. Hvad kunden helt præcis efterspørger er lidt op til jer.

Graf over priser med JavaScript eller Blazor

Vi skal bygge en lille hjemmeside som kan vise os dataet fra API’en - Jeres underviser skal nok specificere om det er med JavaScript eller C# og Blazor!

Der skal laves en visualisering, enten i form af en graf eller anden passende data repræsentation

Untitled

Det er helt frit, hvad man vælger til at visualisere dataet, men et meget brugervenligt værktøj er plotly.js - dokumentation kan findes her:

Line

Den findes også til C# med Razor her: https://demos.blazorbootstrap.com/charts/line-chart

Når I har lavet det for Benzin, altså miles95, kan i tilføje Diesel og sammenligne dataet.

Er det den samme udvikling som er sket med begge produkter?

Er der problemer med vores datasæt, er det komplet?

Derudover kan man lave følgende

Denne sektion er mest tiltænkt, hvis man bliver hurtig færdig med ens graf som er hovedopgaven

Det er vigtigt at vores funktioner skalere, så hvis datasættet bliver større følger funktionen med. Dataet er beregnet til at blive opdateret dagligt.

  1. En boks som viser den seneste pris i datasættet - som om det var en live visning.
  2. Der er en del data, så man kan give sig i kast med lidt simpelt dataanalyse:
  3. Hente ekstra data ind og se sammenhænget, fx benzin priser og fragtpriser.
  4. Analyse ud fra hvilken dag på måneden eller ugen man skal tanke. Det kan være dataet viser at benzin altid er billigst om lørdagen.
  5. En oversigt med 52/u high and low. Altså et overblik over den laveste pris det seneste år og den højeste.
  6. En inflationsberegner, hvor man kan få nogle procent ud og se udviklingen år for år.

Opsætning af database