Wiki
In dit project werken Amir, Mohamed en David aan een website voor een opdrachtgever van Oba.
Deze opdracht gaat over alle fases van de DLC
In deze fase bespreken we hoe wij willen gaan samenwerken, wat we precies gaan maken en maken we hiervoor een planning.
We beginnen door deze leertaak te forken en de repository klaar te zetten zodat iedereen met dezelfde codebase kan werken. Daarna vullen we een Teamcanvas in. We beginnen met het individuele deel en bespreken vervolgens onze persoonlijke doelen met elkaar. Vervolgens vullen we als team de andere vlakken van het Teamcanvas in.
Ook maken we afspraken over hoe wij gaan samenwerken:
- Niet vergeten te pushen
- Niet bang zijn om hulp te vragen mocht je ergens tegen aanlopen
- Niet aan andermans code zitten zonder overleg
- Blijf communiceren met elkaar
- Respecteer elkaar
- Probeer op school aanwezig te zijn bij standups & reviews
- Probeer in css de classes een specifieke naam te geven
In deze fase bespreken wij als team welke werkzaamheden er zijn, wie wat gaat doen en maken we een planning.
We beginnen met het maken van een project board op onze gezamenlijke repository om bij te kunnen houden wie wat doet en wanneer en of het gedaan is.
Vervolgens plannen we voor de aankomende weken alle standups en reviews en noteer we de planning in onze project board. Maandag 8 mei na de les in de laatste week houden we een code review. Hierin geven we feedback en issues aan elkaars code. Woensdag 10 mei na de les houden we vervolgens een standup. Hierin vertellen we aan elkaar hoe we het samenwerken vonden gaan, wat eventueel beter kan en wat goed is gegaan.
Daarna bekijken en bespreken we alle User Stories die wij aantrekkelijk vonden om te gaan maken. Een filter of zoeken functie sprak ons in het eerste oogomslag het meeste aan. Maar na overleg vonden we dit toch te weinig om hiermee een project te beginnen. Daarom kozen we uiteindelijk voor de user story #23 (Als student wil ik een studieplek kunnen reserveren). Deze user story is perfect voor ons omdat het groot genoeg is om voor ons de project op te verdelen tussen 3 taken onderling. Een overzichtspagina (David), een detail pagina (Mohamed) en een succes pagina (Amir).
De homepagina:
De detail pagina:
De succes pagina:
Dit is de mobile versie
Dit is de desktop versie
Hierbij de Miro link: https://miro.com/app/board/uXjVMPdBpFw=/#tpicker-content
Wij hadden moeite om de details van een geselecteerde vestiging te laten zien. Hierbij hielp Krijn ons doormiddel van een voorbeeld te maken in de api.oba.fdnd.nl/docs. Hierdoor krijgen wij een beter beeld hoe het gebouwd moet worden.
Link: https://api.oba.fdnd.nl/docs/vestigingen#get
Backend
In de homepage moet ik de overzicht van alle oba vestigingen laten zien. De gegevens zoals adres, naam en foto van de vestigingen word vest gesteld in een api. Door deze data in onze website te tonen moest ik fetchJson en response.render gebruiken. In de index.js file fetch ik de data van de vestingen uit de api, vervolgens response en render ik het naar de index. Ook geef ik de data een naam genaamd "vestigingen". Dit zorgt voor meer duidelijkheid nu dat we weten wat de data precies inhoud.
Frontend
Nu dat ik de backend heb gebouwd ga ik over naar de frontend. Dit doe ik onze index.ejs file. Hierin roep ik de gedefineerde data (vestigingen) aan doormiddel van een forEach. In de forEach toon ik de specifieke data van de vestigingen zoals de naam, adres en een image. De naam toon ik in een h2, de adres in een p en de image in een src van een img element. Ook zorg ik ervoor dat je doorgestuurd kan worden naar een detail pagina waarin je een studieplek kan reserveren. Dit deed ik doormiddel van een a met daarin een href naar de detail.ejs. Ook gaf ik hierin de id erin mee om later daarvan de data op te vragen.
CSS
vormgeven dat de overzichtspagina is ook belangerijk om te doen. Dit zorgt er namelijk voor dat de website voor de gebruiker prettiger is om naar te kijken.
Mijn plan was om de vestingen in een rij van 2 naast elkaar te tonen. Dit deed ik doormiddel van display flex. Flex zorgt ervoor dat het naast elkaar ligt, om er ook voor te zorgen dat het onder elkaar komt moest ik flex-wrap wrap gebruiken. Ook wou ik dat het in het midden getoond zou worden.
Links zou de gegevens van de vestiging komen te staan (de naam en adres) en recht de image. De image en gegevens wou ik onderscheiden door bepaalde vormgeving. Ik kwam uiteindelijk op het idee om het te onderscheiden met een schuine uitlijning. Dit creeér ik doormiddel van een before. De before defineer ik als het voorwerp dat schuin moet gaan liggen. Dit deed ik door de before een width, height en een transform te geven. In de transform zeg ik dat het moet gaan rotate doormiddel van een translateY en rotate. Dit zorgt ervoor dat het schuin gaat vallen waardoor het een mooie uitlijning maakt tussen de gegevens en image van de vestiging.
** Frontend **
Ik heb gewerkt aan de detail pagina(detail.ejs). Hierin heb ik een for loop gemaakt en data opgehaald uit de API om de naam en plaatje te laten zien. Voor het plaatje heb ik de webP datatype gekozen om de performance te verbeteren.
<section class="detail-main">
<h1><%= naam %></h1>
<p><%= adres %></p>
<div>
<img class="detail-image" src="<%= foto.originalAsWebP %>" alt="Roelof image">
</div>
</section>Ook heb ik ervoor gezorgd dat ik in me FORM een ID meegeef als hidden value. Hierdoor kan ik gegevens ophalen van 1 bepaalde vestiging:
<input type="hidden" name="vestigingId" value="<%= id %>">** Backend **
Voor het project ben ik eerst begonnen met het maken van de index.js en heb ik het skelet opgebouwd zodat iedereen aan het werk kon aan zijn individuele pagina. Ik heb hiervoor alle packages geïnstalleerd en express geïmporteerd. Ook heb ik de juiste URL opgebouwd waar alle vestigingen in zitten:
import express from "express";
const url = "https://api.oba.fdnd.nl/api/v1/vestigingen";
const urlDefault = "?first=100";
// Maak een nieuwe express app
const app = express();
// Stel in hoe we express gebruiken
app.set("view engine", "ejs");
app.set("views", "./views");
app.use(express.static("public"));
// Stel de afhandeling van formulieren in
app.use(express.json());
app.use(express.urlencoded({ extended: true }));Daarna ben ik begonnen met het maken van mijn detail page route. Ik heb hier een let id met daarin de id van de vestiging waar jij op hebt gedrukt en hiermee maak ik de URL compleet om zo gegevens van 1 bepaalde vestiging te laten zien.
// Maak een route voor de detail pagina
app.get("/detail", async (request, response) => {
let id = request.query.id;
const uniqueUrl = url + "?id=" + id;
const data = await fetch(uniqueUrl)
.then((response) => response.json())
.catch((err) => err);
response.render("detail", data.vestigingen[0]);
});In de data zit vestigingen en in vestigingen zit nog een array. Daarom heb ik [0] staan achter data.vestigingen om zo de gegevens van de eerste item van de array te krijgen. Als ik dit niet zou doen werkt het niet of moet ik in mijn html achter elke gegeven dat ik ophaal een [0] zetten wat meer werk is.
Ook heb ik gewerkt aan de POST. Ik bouw weer een URL voor waar de gegevens heen worden gestuurd, in dit geval is het de studieplekReserveringen API. Ook heb ik een IF en ELSE om zo te checken of het werkt of niet. Werkt het niet dan wordt je gestuurd naar een error pagina en als het wel werkt wordt je gestuurd naar de succes pagina.
//Hiermee reserveer ik en stuur ik data naar de API
app.post('/success', (request, response) => {
//De gestuurde data gaat naar de volgende URL:
const postUrl = 'https://api.oba.fdnd.nl/api/v1/'
const url = `${postUrl}studieplekReserveringen`
const newDate = new Date(request.body.beginTijd);
request.body.beginTijd = newDate;
postJson(url, request.body).then((data) => {
let newStudiePlekReservering = { ... request.body }
//In de data zit een data.id Hiermee check ik of er een ID aanwezig is voor een studieplek dat nog niet geresereerd is.
if (data.data.id) {
response.redirect('success')
} else {
//Als het boek al gereserveerd is dan heeft data.data.id geen id meer en krijg je dus een error message.
console.log("errorrrs")
const errormessage = `${data.message}: Mogelijk komt dit door het id die al bestaat.`;
const newData = {
error: errormessage,
values: newStudiePlekReservering,
};
//hiermee stuur ik de gebruiker daar de error pagina.
response.render("error", newData);
}
//console.log(JSON.stringify(data.id));
})
})** CSS **
Ik heb met mijn team besproken dat we extra gingen letten op de benamingen van de classes voor CSS. Wij wouden niet dat meerdere classes per ongeluk werden gestyled doordat we dus dezelfde classes gebruiken. Ik heb daarom express extra gelet hierop:
/* DETAIL PAGE CSS */
.detail-image{
width: 500px;
}
.detail-h1{
text-align: center;
}
.detail-main{
display: flex;
align-items: center;
flex-direction: column;
}
.detail-section{
display: flex;
justify-content: center;
flex-direction: column;
max-width: 550px;
margin: auto;
}
.detail-h1 {
background-color: #b40000;
color: white;
padding: 20px;
margin-top: 20;
}Wij wouden eerst met zijn allen in de main gaan werken maar we kozen er later voor om in branches te gaan werken. We hadden in het begin een beetje moeite met het pullen maar daarna ging het wel.
Wij hadden maandag 8-5 afgesproken om met elkaar een code design review te houden. Hierin vertellen we aan elkaar wat elkaars aandachtspunten zijn en eventuele issues wat betreft code.
Onze lighthouse score was niet al te goed. We hadden op de button geen alt of name tag dus is het voor screen readers niet al te handig. Ook is onze footer niet handig gestructureerd voor screen readers.
Voor de performance is het zo dat onze plaatjes veel te groot zijn en moeten op de juiste maten geconstrueerd zijn