Inleiding
Dit is onze realtime oba chatart app.
Userstory: Als Oba lid wil ik chatten met andere Oba leden. Door te verbinden met andere leden kan ik informatie delen en visueel communiceren, aan de hand van realtime tekenen.
Ons groepsproject was gericht op het creëren van een interactieve online omgeving waar gebruikers met elkaar konden chatten en tegelijkertijd samen konden tekenen. We hebben Socket.io, Node.js en JavaScript gebruikt om deze functionaliteit te realiseren.
Het eerste aspect van ons project was het implementeren van een chatfunctionaliteit. Met Socket.io konden we realtime communicatie tussen de gebruikers mogelijk maken. Gebruikers konden berichten versturen en ontvangen, waardoor ze direct konden communiceren met andere deelnemers in de chatroom. Dit zorgde voor een interactieve en dynamische chatervaring.
Daarnaast wilden we ook een Art room implementeren waar gebruikers samen konden werken aan kunstwerken. We hebben gebruik gemaakt van HTML5 Canvas en JavaScript om dit te realiseren. Met behulp van Socket.io konden we ervoor zorgen dat de wijzigingen die één gebruiker aanbracht in de Art room direct zichtbaar waren voor alle andere gebruikers. Dit stelde gebruikers in staat om gezamenlijk kunstwerken te maken, in realtime wijzigingen aan te brengen en elkaars werk te bewonderen.
-
Open je favoriete webbrowser, zoals Google Chrome, Mozilla Firefox, Safari, etc.
-
Ga naar de website waar de chat- en Artroom beschikbaar is.
-
Wacht tot de website volledig is geladen. Je ziet mogelijk een welkomstscherm of een startpagina met instructies.
-
Je ziet een chatinterface waar je berichten kunt typen en verzenden. Typ je bericht in het daarvoor bestemde invoerveld en druk op Enter of klik op de knop "Verzenden" om het bericht te versturen.
-
Om de Art room te openen, zoek je naar de knop op de website die verwijst naar de Art room. Klik erop om toegang te krijgen tot de Art room.
-
Binnen de Art room zie je mogelijk een canvas of tekengebied waar je kunt tekenen. Gebruik de beschikbare tekeninstrumenten, zoals pennen, penselen, kleuren, enz., om je kunstwerk te maken. Je kunt ook samenwerken met andere gebruikers door tegelijkertijd op het canvas te tekenen.
- Tools
🖥️ Visual Studio Code 🖥️ Adaptable 🖥️ Figma
- Gebruikte technieken
💻 HTML 🎨 CSS 💡 JavaScript 🔋 Node.js ⚙️ Socket.io
- Ga naar de repository
- Zoek naar de knop "Clone" of "Code" en klik erop om de URL van de repository te kopiëren.
- Open je favoriete code-editor, zoals Visual Studio Code, Atom of Sublime Text.
- Ga naar de optie "Open" of "Open Folder" in de code-editor en selecteer een geschikte locatie op je computer om het project op te slaan.
- Gebruik de ingebouwde terminal van je code-editor of open een externe terminal en navigeer naar de locatie waar je het project hebt opgeslagen.
- Nadat de repository is gekloond, kun je de code openen in de code-editor en de gewenste wijzigingen aanbrengen. Houd er rekening mee dat je mogelijk de vereiste afhankelijkheden moet installeren door npm install uit te voeren in de terminal, zoals eerder vermeld.
LottieFiles animatie Loading state
Youtube video crash course socket
This project is licensed under the terms of the MIT license.