Voor het vak Realtime Web gaan we samen een basic Chatroom app maken. Deze app gaan we maken met Node.js, Express en Socket.io.
(description of our project)
Voor dit project hebben we de taken verdeeld over de drie teamleden. Hieronder kan je zien welke taken we hebben bedacht en wie ze heeft gedaan.
| Taak | Wie? |
|---|---|
| Setup project | Ine |
| Logo | Pip |
| Readme | Ine en Pip |
| Design | Eva, Pip, Ine |
| CSS | Eva |
Wij hebben in Figma alle drie een eigen ontwerp gemaakt en vervolgens samengevoegd tot één ontwerp. Hieronder kan je de drie verschillende ontwerpen het uiteindelijke ontwerp bekijken.
Ontwerp 1 - Eva:
Ontwerp 2 - Pip:
Ontwerp 3 - Ine:
Nadat we allemaal een ontwerp hadden gemaakt zijn we gaan kijken welke we het mooist vinden. Hieruit kwam dat we niet specifiek een konden kiezen, daarom hebben we de drie ontwerpen bij elkaar gevoegd. Zo hebben we van Eva de kleuren gekozen, van Pip de achtergrond en van Ine hebben we het input veld gepakt. Dit is het uiteindelijke ontwerp geworden.
Om ervoor te zorgen dat onze code overzichtelijk en netjes is, hebben we een aantal regels opgesteld. Deze regels zijn:
Html
- Schrijf semantische HTML en gebruik niet onnodige
<div>'s - Schrijf comments waar nodig om de code te verduidelijken
- Gebruik regelmatig formatters om de code op te schonen
CSS
- Maak gebruik van CSS variabelen
- Groepeer CSS met comments, alles van hetzelfde onderdeel bij elkaar
- Gebruik relatieve eenheden voor afmetingen (Rem, em, %, etc.)
Javascript
- Gebruik camelCase voor variabelen
- Gebruik const en let in plaats van var
- Schrijf comments waar nodig om de code te verduidelijken
- Gebruik arrow functions
Om deze app te gebruiken, moet je deze repository clonen. Je kunt dit doen door het volgende commando in je terminal te typen:
git clone https://github.com/Inevdhoven/chatroom
Na het clonen van de repo, moet je de dependencies installeren. Dit kun je doen door het volgende commando in je terminal te typen:
npm install
Zodra de dependencies zijn geïnstalleerd, kan je naar de projectmap gaan met dit commando:
cd chatroom
Vervolgens kun je de app starten met dit commando:
npm run start
Yes, je bent nu helemaal klaar! Ga naar http://localhost:4200/ en geniet van SpeakEasy!
- Kies een nickname
- Verstuur berichten
- Ontvang berichten van andere gebruikers
- Zie wanneer een een andere gebruiker aan het typen is
Deze Chatroom app is gemaakt door:
Copyright © 2023
Dit project is MIT licensed.