Development lifecycle
Bij het analyseren van de opdracht ben ik dingen te weten gekomen zoals:
- Er bestaat al een API met informatie/data van Vini Mini
- Iedereen uit ons groepje gaat individueel aan een userstory werken
- De opdracht is om een user story te gaan uitwerken, gebruikmakend van de dynamische data uit de API (maak een overzichtpagina)
- Je kan kiezen uit user-story #23, #20 of #12
- Het is het beste om helemaal opnieuw een pagina te ontwerpen en bouwen, maak gebruik van node.js
Omdat ik niet veranderd ben van opdrachtgever heb ik al een debriefing van ViniMini geschreven.
Wat ik heb gemaakt voor Vini Mini in de vorige sprints komt gedeeltelijk overeen met user story '#12: Als ouder wil ik in mijn agenda stappenplan kunnen bekijken, zodat ik weet op welke dag ik een supplement voor een allergie moet geven.' Ik heb namelijk al een agenda gemaakt met een logboek waarin stappen afgevinkt kunnen worden. Daarom lijk het mij op dit moment ook leuk om misschien aan een andere user-story te gaan werken en eventueel later nog verder te gaan met de kalender, maar dan wil ik de kalender en logboek helemaal anders omdat ik het logboek nu iet zo mooi vind.
Ik heb nu gekozen voor user-story '#20: Als ouder wil ik van een product informatie en het stappenplan kunnen bekijken, zodat ik kan beslissen of ik een product wil kopen.'
Om een zo goed mogelijk idee te krijgen over wat ik wil gaan ontwerpen heb ik in de API gekeken welke gegevens ik allemaal kan gaan gebruiken.
Belangrijke info uit de API die ik kan gebruiken voor #20:
- 5 verschillende producten
- beschrijving product
- verschillende aantal stappen
- afbeeldingen/plaatjes
- tips, belangrijk om te vermelden, dus ergens duidelijk op de pagina
- 1 product is anders dan de anderen, het pindapresentje
Helaas hebben we geen gesprek gevoerd vandaag met Vini Mini, dus hebben we gezamenlijk de informatie die we nu hebben doorgenomen met elkaar, en de API bekeken.
Bekijk hier het miroboard dat we hebben gemaakt:
Bekijk hieronder een aantal schetsen die ik heb gemaakt:
Bekijk hieronder een aantal Figma ontwerpen die ik heb gemaakt:
Ik wil dat wanneer je op een product klikt je kan kiezen om de informatie of het stappenplan te lezen. Deze info blijft in dezelfde container maar kan je scrollen. ( Misschien moet er nog een winkelwagen knop bij.)
Na de les van woensdag heb ik besloten om eerst te filteren op categorie voordat je de verschillende producten te zien krijgt.
Tijdens het bouwen ben ik al verschillende errors tegen gekomen. Maar ik heb ook een idee weten uit te werken waar ik heel blij mee ben omdat het gelukt is. Bekijk de volgende code:
<% categories.forEach(category => { %>
<a class="article-a" href="/<%= category.titel %>">
<article>
<h2><%= category.titel %></h2>
<img class="article-img" src="/<%=category.titel%>.png">
</article>
</a>
<% }); %>In de bovenstaande code kan je een functie lezen die wordt uitgevoerd. Voor elke category word deze functie in gang gezet. Vervolgens wordt de titel weergegeven in <h2> en wordt de juiste img toegevoegd door src="/<%=category.titel%>.png">.
Ik heb geprobeerd om 2 data routes te sturen naar 1 ejs bestand, helaas lukte dit niet. Mijn idee was om een article te maken met alle tips bovenin.
Ik wilde heel graag een overlay menu maken zoals op de officiele vini mini website bij de mobile mode. Ik heb dit weten te maken met de volgende code. Ik heb hier Met JavaScript een addEventListener toegevoegd, waardoor als je op het menu klikt een functie uitvoerd die een class toevoegd waardoor de overlay manu naar beneden tevoorschijn komt.
<div class="overlay-content">
<div class="click-away-menu">+</div>
<div class="menu-link-container">
<a href="#">Voor Mini</a>
<a href="#">Vini Mini Producten</a>
<a href="#">Over Ons</a>
<a href="#">Nieuws</a>
<a href="#">Contact</a>
<a href="#">Zoeken</a>
</div>
</div>.overlay-content{
position:absolute;
width:100vw;
height:100vh;
opacity: .95;
top: -100vh;
transition: 1s;
text-align: center;
place-items: center;
left:0;
background-color: var(--vinimini-dark-blue);
z-index: 200;
}
.menu-link-container{
display:flex;
flex-direction: column;
padding-top:calc(50vh - 6rem - 2.5rem);
}
.overlay-content a{
margin-bottom: 1rem;
font-size: 2rem;
color: white;
text-decoration:none;
}
.visible-menu-overlay-content{
position:absolute;
left:0;
text-align: center;
width: 100vw;
top: 0vh;
}
.click-away-menu{
font-size: 5rem;
position:absolute;
right: 2rem;
top: .5rem;
rotate: 45deg;
color:white;
cursor: pointer;
}const menu = document.querySelector('.menu-button')
const overlayContent = document.querySelector('.overlay-content')
const html = document.querySelector('html')
const article = document.querySelector('article')
const clickAwayMenu = document.querySelector('.click-away-menu')
menu.addEventListener('click', menuContent)
clickAwayMenu.addEventListener('click', menuAway)
function menuContent(){
overlayContent.classList.add('visible-menu-overlay-content')
html.classList.add('overflow-y')
article.classList.add('pointer-event-none')
}
function menuAway(){
overlayContent.classList.remove('visible-menu-overlay-content')
html.classList.remove('overflow-y')
article.classList.remove('pointer-event-none')Ik heb tijdens de lessen geleerd hoe belangrijk gitignore kan zijn om sommige bestanden niet te uploaden naar github. Het kan bijvoorbeeld heel handig zijn om de node_modules niet allemaal up te loaden omdat deze heel veel ruimte in beslag zal nemen. Ik ben begonnen een file aan te maken die .gitignore heet, en daarna heb ik er de naam van de map ingezet die ik wil dat niet upgeload wordt naar github. Omdat ik de map al eerder op github had gezet heb ik die ook eerst moeten verwijderen voordat het zou werken. Daarna werd het door het fetchen ook lokaal van m'n computer verwijderd dus heb ik het er weer opgezet met npm install.
Ik heb een .prettierignore bestandje gemaakt die ik wil gaan gebruiken voor de head.ejs en de foot.ejs, helaas werkt het tot nu toe nog niet en probeer uit te vinden waarom.
In de API van Vini Mini staan meerdere url's met een afbeelding van het pinda presentje. Ik wil gewoon de eerste afbeelding laten weergeven. Ik vond het moeilijk hoe ik dit voor elkaar kon krijgen, ik dacht eerst aan een forEach loop, maar ik wil dus alleen het 1e plaatje dus dat werkte niet. Ik vroeg aan de chatgpt of het mogelijk was om te maken met een for loop, en chatgpt gaf mij de volgende code:
<% } else if(product.titel === "Pinda presentje") { %>
<% for (var i = 0; i < product.plaatjes.length; i++) { %>
<% if (i === 0) { %>
<img class="article-img" src="<%= product.plaatjes[i].url %>" alt="pinda presentje">
<% } %>
<% } %>
<% } %> In de bovenstaande code word eerst gecontroleerd of het om het 'Pinda presentje' gaat. Daarna word de for loop gebruikt. Hier staat de i voor url, en zolang het i/url nummer kleiner is dan het aantal dat er is telt die er eentje bij op, waarna het if statement ermee wordt uitgevoerd. Als het url nummer 0, oftewel de 1e url is dan word daar het plaatje van weergegeven. <%= product.plaatjes[i].url %>. Later bleek dat ik helemaal niet zo een uitgebrijde for loop nodig heb als ik gewoon dit schrijf in de src: <%= product.plaatjes[0].url %>. De [0] pakt hier de eerste url. 👍
Ik heb een slider gemaakt die de verschillende tips uit de database ophaald en weergeeft. Ik heb gebruik gemaakt van W3 school om dit te kunnen maken, uiteindelijk heb ik de code aangepast zodat ik het beter snap en geprobeerd in de comments uit te leggen hoe het werkt:
// tips slide
// definieer de variabelen
const buttonLeft = document.querySelector('.button-tips-left')
const buttonRight = document.querySelector('.button-tips-right')
// laat de slide bij de eerste beginnen
let slideIndex = 1
// laat de functie showdivs in actie treden (als de slideindex 1 is, zie je de eerste 'tip').
showDivs(slideIndex);
// Geef de knoppen een eventlistener
buttonLeft.addEventListener('click', function() { plusClick(-1) });
buttonRight.addEventListener('click', function() { plusClick(1) });
// deze functie wordt uitgevoerd wanneer je op de button klikt,
// Met showDivs(slideIndex += n); geeft die aan of de slideindex een pagina verder of terug moet gaan.
function plusClick(n){
showDivs(slideIndex += n);
console.log('click')
}
// Deze onderstaand functie showdivs besluit welke 'tip' te zien is.
// n staat voor de slideindex waarde
// x staat voor de slides
// met de i wordt er een loop uitgevoerd, i gaat gewoon getallen langs, en zolang het getal kleiner is dan
// de lengte van het aantal slider wordt er een nummer bij opgeteld
// [slideIndex-1] wordt gebruikt omdat bijvoorbeeld +3 eigenlijk overeenzou komen met index 2.
function showDivs(n) {
let i;
let x = document.getElementsByClassName("tips-slider");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "flex";
}Het integreren van de website heb ik weer via github en cyclic.sh gedaan. Cyclic.sh heeft de repository op github gebruikt om het te bouwen en online te publiceren.
Ik heb na bijna elke verandering die ik aanbracht getest of ik het gewenste resultaat had bereikt.
Ik heb een lighthouse test gedaan die de accessibility test van mijn website en daar waren nog een aantal verbeterpunten.
Ik heb aan alle afbeeldingen een alt toegevoegd waardoor ik een positief resultaat kreeg uit de lighthouse test.
