Bouwen⚙️
Deze sprint werken wij uit 1 bestand. Ik heb eerste in de terminal de packages geïnstalleerd daarna heb ik de mappen aangemaakt en de node omgeving geïnstalleerd. Ik heb de head en footer.ejs erin gezet en de aparte ejs bestand aangemaakt zodat we een basis hebben om te beginnen.
We hebben een spinner loader toegevoegde op de webiste.
Eerst heb ik de gif converd naar webp want de originele gif bestand is te groot en niet Performance vriendelijk.
In de body een id gemaakt voor de loader
<body>
<div id="preloader"></div>Styling van de loader(Critical CSS)
De css van de loader staat in de html.
/*loader */
#preloader{
background: #E5EFF1 url(img/loader.gif) no-repeat center center;
background-size: 13%;
width: 100%;
height: 100vh;
position: fixed;
z-index: 100;
}JS gekoppeld aan de loader waneer de data ingehaald is is de loader niet meer zichtbaar.
/* loader */
var loader = document.getElementById("preloader");
window.addEventListener("load", function(){
loader.style.display = "none";
})De community pagina is een statisch pagina waar ouders hun ervaring kunnen delen en doormiddel van de chat icon te klikken kom je terecht bij de chat.
Ik heb eerst mobile first gecodeerd.
Voor de afbeeldingen heb ik opgelet op performance ik heb de afbeeldingen eerst geconverteerd naar webp en ik heb de een img element gegeven met een width en height en styling.
<img class="container-img" alt="avatar" src="/img/sara.webp" width="100%" height="100%" style="width:80px">Issues
Amber had wat problemen met de chat er waren wat element en variable in de ejs , server en js die verschillende waren en daarom dat de chat niet werkte. Ik heb het opgelost door paar kleine aanpassingen te maken in de ejs zoals de link naar JS in de server waren de variable socket en client
// Start de socket.io server op
ioServer.on("connection", (socket) => {
// Log de connectie naar console
console.log(`user ${socket.id} connected`);
count++;
ioServer.emit("usercount", count);Disconnect
// Luister naar een disconnect van een gebruiker
socket.on("disconnect", () => {
// Log de disconnect
console.log(`user ${socket.id} disconnected`);
count--;
ioServer.emit("usercount", count);
});In Js haalt hij de de variabele Count op
let count = document.querySelector("#count");Hier geeft hij aan hoeveel mensen online zijn in de chat
// How many users are online
socket.on("usercount", (data) => {
count.innerHTML = data;
}); socket.on("typing", (data) => {
// Broadcast the 'typing' event and data to all connected clients except the sender
socket.broadcast.emit("typing", data);
});
});/*waneer gebruiker typt*/
input.addEventListener("keypress", function () {
socket.emit("typing", handle.value);
});
/*melding waneer andere gebruiker aan het typt is */
socket.on("typing", (data) => {
feedback.innerHTML = `<p class="typing"><em> ${data} is aan het typen...</em></p>`;
});
});```
### De bericht bevat ook tijd doormiddel van:
```js
/*haalt de tijd op en stuurt mee met het bericht*/
time: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) /*tijd bij de bericht*/,In de document.querySelector("form") geef ik de element die worden meegestuurd
De input value is de bericht
De handle.value is de gebruikernaam
De user: socket.id is de gebruiker unieke id code zodat we de berichten kunnen scheiden tussen verzender en ontvanger.
input: input.value,
handle: handle.value,
user: socket.id,Hier geef ik aan wat er mee moet worden gestuurd in de bericht
function addMessage(message) {
messages.innerHTML += `
<li class="message-post message-${message.user === socket.id ? 'send' : 'recieved'}"> //hier berkent hij of de bericht die wordt verstuurd of ontvangt van de gebruiker is met de unieke id code.
<div class="message-background">
<p class="time">${message.time}</p> //tijd wordt meegestuurd
<p>${message.input}</p> //bericht waarde
</div>
<h3 class="message-handle">${message.handle}</h3> //gebruikernaam
<li>
`Bij het bouwen van mijn ontwerp voor de index.ejs wilde ik de image mooi responsive maken maar ook denken aan de performance en layout shift voorkomen. Ik vond dit heel lastig om te maken omdat de afbeelding een aspect ratio heeft en ik daardoor niet de precieze width en height mee kan geven in de <img> tag.
Daarom heb ik een container om de image geplaatst die de de precieze grootte van de image berekend en inneemt al voordat de image geladen is. Als de image is geladen komt die mooi netjes in de container. Dit voorkomt layout shift. Bekijk de volgende code:
<div class="index-img-container">
<img class="index-img" alt="Vini Mini" src="https://cdn.shopify.com/s/files/1/0530/6718/6365/files/MG_5012_960x640.jpg?v=1642663774" width="100%"
height="100%" >
</div>.index-img-container{
position: relative;
width: 100%;
height: 0;
padding-bottom: calc(100% / (375 / 250)); /* Berekening van de aspectverhouding */
overflow: hidden;
}
.index-img{
object-fit: cover;
position: absolute;
}Deze sprint was het mijn taak om de chat te bouwen en de verschillende states (loading, empty en error) erin te verwerken. Ik wilde me deze sprint meer gaan verdiepen in het Javascript gedeelte, en heb daarom ervoor gekozen om de chat te gaan ontwerpen en te gaan bouwen. Justus had een simpele chat gemaakt waarin de drie states voorkomen. Ik heb de code van Justus gebruikt in onze leertaak. Het project van Justus kan je hier vinden: Ju5tu5 - Barebone chat.
Ik heb de code van de chat al uitgelegd in mijn persoonlijke deeltaak (die je hier kan vinden), dus zal ik het eigenlijk vooral gaan hebben over de states en de history en hoe ik dit heb gedaan aangezien ik dit het moeilijkste gedeelte vond van het bouwen.
Ik heb drie verschillende spans in de chat gezet met ieder hun eigen bericht. Deze spans staan standaard op display: none in de css en zijn dus echt alleen zichtbaar wanneer er iets gebeurd. Dit heb ik met JavaScript gedaan.
<section class="chat">
<!-- Empty state and error state (not working yet) -->
<span class="loading">Berichten aan het inladen...</span>
<span class="empty">Er zijn nog geen berichten. Typ iets om te kijken of er iemand reageert.</span>
<span class="offline">Er gaat iets mis met de verbinding, we proberen de connectie te herstellen...</span>Daarnaast heb ik in de server.js een array aangemaakt genaamd history, waar de oude berichten worden opgeslagen die eerder zijn verstuurd wanneer een nieuwe gebruiker de chat in gaat. Die kan de oude berichten dus teruglezen. Er kunnen ook max. 50 berichten terug worden gelezen.
let history = []
const historySize = 50Dit stukje code heb ik er ook in gezet zodat de geschiedenis van de chat, wordt meegestuurd wanneer de chat wordt geopend. Als er een geschiedenis is.
// Stuur de history
ioServer.emit('history', history)Voor mijn chat.ejs heb ik een chat.js gemaakt. Hierin gebeurd het JavaScript gedeelte waar ik de states laat werken. Hier heb ik de states gedefinieerd. De classes loading, empty en offline worden geselecteerd uit chat.ejs.
const loadingState = document.querySelector("span.loading");
const emptyState = document.querySelector(".empty");
const errorState = document.querySelector(".offline");De code onderin spreekt eigenlijk voor zich omdat er comments bij staan. In de code wordt ervoor gezorgd dat de states werken zoals het moet. We hadden hier trouwens erg veel problemen mee omdat we een loader hadden en eigenlijk de span loader niet hadden toegevoegd aan de chat.ejs. Hierdoor kreeg de code eigenlijk een grote error waardoor die niet wilde werken. Ik was ook helemaal vergeten om de array toe te voegen aan de server.js waardoor we de hele tijd steeds meer errors kregen.
Na zelf veel proberen heb ik hulp gevraagd aan Rick en Stefan. Stefan kwam erachter dat ik de array nog moest toevoegen waardoor het uiteindelijk soort van begon te werken. Rick gaf als tip dat we de span loader er niet in hebben staan en we dan of de code weg moeten halen, of de loader gewoon moesten toevoegen. We hebben de keuze gemaakt om de loader gewoon toe te voegen waardoor de states soort van werkte.
Uiteindelijk heb ik hulp moeten vragen aan Dorien, want Zenit en ik hadden de chat gebroken, berichten kwamen dubbel aan en we wilden nog extra features hebben. De error state kwam ook steeds knipperend het scherm in, wat niet de bedoeling is natuurlijk. Dorien heeft ons geholpen met wat code weg commenten om zo het probleem te vinden en zo was de chat weer werkende + werkende states.
// Luister naar de historie van de chat
socket.on("history", (history) => {
// Als er geen historie is tonen we de empty state
if (history.length === 0) {
loadingState.style.display = "none";
emptyState.style.display = "inline";
// Er zijn berichten, haal de states weg en loop ze op het scherm
} else {
loadingState.style.display = "none";
emptyState.style.display = "none";
history.forEach((message) => {
addMessage(message);
});
}
});
// Er gaat iets mis bij het verbinden
socket.io.on("error", (error) => {
loadingState.style.display = "none";
emptyState.style.display = "none";
errorState.style.display = "inline";
});
// Poging om opnieuw te verbinden
socket.io.on("reconnect_attempt", (attempt) => {
console.log("attempting reconnection");
});
// Verbinding geslaagd
socket.io.on("reconnect", (attempt) => {
loadingState.style.display = "none";
emptyState.style.display = "none";
errorState.style.display = "none";
});Daarnaast wilden we nog extra features voor de chat. Dit waren uit mijn hoofd een gebruikersnaam, timestamp, hoeveel mensen er online zijn en dat je verschillende chat bubbel posities hebt voor de receiver en de sender. Ik vond dit een moeilijk onderwerp en heb dus om hulp gevraagd aan Zenit. Zij had deze features namelijk in haar deeltaak chat. Je kan er meer over lezen bij Zenit haar stukje in de bouwfase.