logo CoderDojo

Javascript - Ninja-Chat

We gaan een chat programma maken!

Benodigdheden

Voordat we aan de slag kunnen, moeten we eerst een paar dingen regelen. We hebben een checklist gemaakt van alles wat je nodig hebt, daaronder volgt per stap de uitleg.

Checklist

  1. De skeleton app
  2. Een tekst editor
  3. Een web browser
  4. Een web server
  5. De chat server URL
  6. De developers tools

De skeleton app

Klik hier om de skeleton app te downloaden. Pak dit bestand uit naar een map, bijvoorbeeld op je bureaublad.

Dit zijn de bestanden die je nodig hebt om te beginnen: een html file, een css file en een javascript file. Elk bestand heeft z’n eigen hoofdstuk, waarin je dat bestand gaat bewerken en je eigen dingen toe voegt.

Als je ergens een foutje maakt, kun je de bestanden altijd opnieuw uitpakken.

Een tekst editor

Als je nog geen tekst editor hebt, adviseren wij Visual Studio Code. Gebruik je een Chromebook? Dan kun je de Text app gebruiken. Als het goed is, staat die al op je Chromebook.

Download, installeer en open VS Code. In VS Code klik je op “Open Folder”, selecteer dan de map waar je de skeleton app hebt uitgepakt.

Andere tekst editors zijn ook prima, als je aan iets anders gewend bent. Bijvoorbeeld: Notepad++ of Sublime Text.

Een webbrowser

In alle voorbeelden gebruiken wij Google Chrome. Andere browsers, zoals Firefox of Edge, zijn ook prima, mogelijk zien de app en developers tools er dan wel anders uit dan in Chrome.

Controleer ook of je de nieuwste versie hebt van de browser, om zeker te weten dat de app goed werkt.

Een webserver

Om je app te zien, moet je een webserver hebben die je browser de app laat openen. Als je een Chromebook gebruikt, ga dan naar Webserver voor Chromebooks.

Een eenvoudig programma om op je eigen computer een webserver te draaien is Caddy. Je kunt Caddy downloaden voor Windows, MacOS en Linux.
Pak Caddy uit en zet het in de map waar je eerder client.zip hebt uitgepakt. Nadat je het bestand hebt uitgepakt, heb je slechts één bestand: caddy (of caddy.exe voor Windows).

Open een command prompt (cmd) of terminal en start Caddy met het volgende commando:

caddy file-server --browse --listen :8123

Open vervolgens je browser en ga naar http://localhost:8123.

Als alles goed is gegaan, zie je dit:
Screenshot skeleton app

Als iets fout is gegaan, kun je iets zien zoals dit:

Screenshot Caddy file index

Vraag dan een mentor even mee te kijken.

Webserver voor Chromebooks

Dit stukje sla je over als je geen Chromebook gebruikt en Caddy hebt geïnstalleerd.

Wij adviseren Web Server for Chrome. Installeer de web server en open de app. Je ziet dan een instellingen pagina. Selecteer hier de uitgepakte map en stel de server in zoals op deze afbeelding:

Chrome web server settings

Let op: De CORS headers zijn heel belangrijk om de chat werkend te krijgen.

Klik vervolgens op de link onder “Web Server URL(s)” of open je browser en ga naar http://localhost:8887.

Lukt het niet? Vraag dan een mentor even mee te kijken.

De chat server URL

Je app moet weten waar de chat server is, zodat je met anderen berichtjes kunt uitwisselen.
Zoek serverIpAddresEnPoort in je index.html bestand om te zien waar de server is:

<script>
    var serverIpAdresEnPoort = "https://chat.coderdojo-nijmegen.nl";
</script>

De developers tools

Als het goed is, heb je nu alles om je app te bouwen. Open de link van je webserver in Chrome, als het goed is zie je dan drie gekleurde balken.

Klik met je rechter muisknop op èèn van die balken en klik op “Inspect”. Hiermee open je de developers tools van Chrome, waar je kan sleutelen aan alle onderdelen van de app. De aanpassingen die je in de developer tools maakt, worden niet opgeslagen en zijn weer weg zodra je de chat app ververst in Chrome.

Voor de chat app is het fijn om de developers tools rechts van je scherm te zetten met deze knop, rechts van je tools.

Developer tools rechts zetten

Sleep de rand van de tools dan zo, dat het ongeveer de helft van je scherm in beslag neemt.

Breedte developers tools

Structuur (HTML)

Deze instructies bestaan uit drie hoofdstukken:

  1. Structuur (HTML) - hier gaan we de app onderdelen in elkaar zetten.
  2. Stijl (CSS) - hier gaan we veranderen hoe de onderdelen eruit zien.
  3. Scripts (Javascript) - hier gaan we veranderen hoe de app werkt.

Bij elk hoofdstuk hoort een bestand. Voor dit hoofdstuk werken we in de index.html.

HTML: blokjes en tekst

In het begin zul je nog niet alles snappen wat in de bestanden staat. Dat is okè! Laten we eerst rond kijken en dan gaan we onze eigen onderdelen toevoegen:

Je ziet de ‘div’ elementen in de Developers Tools oplichten. Dat zijn de ‘blokjes’ waarmee je begint. Een paar dingen moet je weten over die blokjes:

HTML tekst

In de HTML kun je tekst typen. Afhankelijk van waar je die tekst typt, komt het ergens anders op het scherm (of misschien zelfs helemaal niet).

Test teksten

Chat berichten

Nu dat je snapt hoe de HTML blokjes werken, kun je je eigen blokjes toe voegen.
Voeg deze code in, in het blokje “midden”:

<div class="berichten"></div>

Ververs de pagina. Als het goed is, verschijnen nu de chat berichten op je scherm! Zo makkelijk kan het zijn om onderdelen toe te voegen.

Chat bericht

Berichten typen

We willen natuurlijk ook berichten kunnen sturen.
Voeg deze code in, in het blokje “onder”:

<div class="berichtInput">Type hier...</div>

Als het goed is, zie je “Type hier…” op je scherm, maar als je daar klikt, kun je nog niet typen. Dat komt, omdat div daar niet voor is gemaakt. Verander het woord div in textarea, en ineens ziet het er heel anders uit:

<textarea class="berichtInput" placeholder="Type hier..."></textarea>

Textarea

Je kunt nu tekst typen. Als je op enter drukt, wordt je bericht verstuurd!

Meer onderdelen

Laten we nog wat meer onderdelen toevoegen. Kopieer deze blokjes en plak ze in de boven/midden/onder blokjes. Je mag zelf bepalen waar deze blokjes in je app komen en in welke volgorde. Je kan ook ons voorbeeld onderin deze pagina na maken.

Tips:

De blokjes

<h1>Ninja chat</h1>

Met h1 plaats je een titel, de letters zijn dan groter en dikker. Het heeft verder geen speciale effecten, dus h1 is net als een div. Probeer ook h2 en h3 voor verschillende grooottes.

<div>Naam: <input type="text" class="naamInput"></div>

Een input is een speciaal soort blokje, waar je iets kan typen of aanklikken. Een input hoeft niet afgesloten te worden, want er kan nooit html in een input staan. Met type=“text” wordt gezegd dat je tekst kan typen. De class ’naamInput’ is voor het invoeren van je naam. We hebben de input in een div blokje geplaatst, zodat de tekst “Naam” er mooi bij komt te staan. Verander de standaard naam in je eigen naam, omdat bij de berichten terug te zien.

<div>Kanaal: <input type="number" class="kanaalInput"></div>

Ook dit is een input, nu met type ’number’, zodat je alleen een getal kan invullen. Elk bericht hoort bij een kanaal en je kanaal is standaard ‘1’.

<button class="stuurBericht">Stuur bericht</button>

Button is Engels voor het woord ‘knop’. Tot nu toe stuurde je berichten door op ’enter’ te drukken, nu kan het ook door op deze knop te klikken.

<div class="deelnemers"></div>

Deze div is nog leeg, het doet niets totdat er op de deelnemers knop wordt gedrukt. Maar die knop heb je nog niet, dus die volgt nu:

<button class="bekijkDeelnemers">Bekijk deelnemers</button>

Je krijgt dus een knop waarmee je deelnemers kan bekijken, zodra daar op wordt geklikt wordt de ‘deelnemers’ div gevuld met de namen van de andere ninja’s en mentoren. Deze knop mag ook in de ‘deelnemers’ div staan, zodat de namen en de knop mooi bij elkaar staan.

Voorbeeld app

HTML in berichten

Wat de ninja-chat zo bijzonder maakt, is dat je HTML in je berichten kan gebruiken. Type maar eens als bericht in de chat:

<h1>Hallo wereld!<h1>

Zoals eerder gezegd, is h1 een blokje zoals de div. Maar niet elke HTML code is een eigen blokje. Je kan ook HTML gebruiken om een woord of meerdere woorden op te maken. Type dit als bericht in de chat:

Hier is woord <strong>dikgedrukt</strong> en twee woorden <em>schuin gedrukt</em>!

Probeer ook andere HTML code die je hebt geleerd in je berichten. Alles mag!

Afbeeldingen

Het mooiste HTML blokje hebben we bewaard voor het laatst: je kan plaatjes zien in je app!

<img src="coderdojo.png">

Het plaatje is erg groot, eigenlijk te groot om mooi in de app te passen. Dit is makkelijk op te lossen door een width (= breedte) en een height (= hoogte) bij te voegen:

<img src="coderdojo.png" width="32" height="32">

Net als een input blokje, hoeft de img niet afgesloten te worden. De link voor het plaatje schrijf je in src="". We gebruiken nu de bijgesloten coderdojo.png als voorbeeld, maar het kan elk plaatje zijn wat je maar wilt.

Zo kies je je eigen plaatjes:

Tip: Op deze manier kun je ook plaatjes in je chat berichten plaatsen.

Stijl (CSS)

Je weet nu hoe je HTML blokjes kan plaatsen en je weet hoe je die een class naam kan geven. Die class namen gaan we nu gebruiken om ze te stylen: je kan helemaal veranderen hoe ze eruit zien!

Voor dit hoofdstuk werk je voornamelijk in het bestand basic-chat.css.

Kleuren en lettertypes

Laten we eerst kleuren aanpassen:

De kleuren die je nu in stelt worden nog niet opgeslagen. De volgende keer dat je refresht is alles weer terug naar hoe het was.

Styling opslaan

Dit is hoe je je kleuren kan opslaan:

Op deze manier kun je alle achtergrond kleuren instellen die je wilt. Zoek de andere onderdelen van je app op in het CSS bestand en geef ze een kleur die je leuk vindt.

Tekst

Je kunt ook teksten er anders uit laten zien. Voeg deze regels eens toe, bijvoorbeeld bij .bericht:

    color: yellow;  
    font-family: 'Indie Flower', cursive;

color verandert de kleur van de tekst. Je kunt dezelfde kleuren gebruiken als voor background-color.
font-family verandert het lettertype. Kun je ontdekken welk lettertype nog meer wordt gebruikt in de app?

Probeer deze kleuren eens na te maken. Tip: Geef de titel een nieuwe class naam en gebruik die class naam om in de CSS het lettertype in te stellen.

Kleuren

Vormen en randen

Alles op het scherm kunnen we groter of kleiner maken. Probeer dit eens uit:

Border

Het is makkelijker om te zien wat het doet, dan om het uit te leggen. In het kort:

Tip: Probeer eens een blokje helemaal rond te maken met border-radius.

Meer CSS

Met CSS kun je van elk blokje zeggen hoe het eruit moet zien. Als je het leuk vindt, kun je in de basic-chat.css nog andere blokjes aanpassen met de border en padding enzo. Je kunt ook kijken welke CSS opdrachten er nog meer in staan. We hebben zoveel mogelijk in het bestand beschreven wat we doen, als je twijfelt kun je altijd nog op internet zoeken. Succes!

Styling in berichten

Je kunt ook CSS in je berichten gebruiken! Schrijf bijvoorbeeld eens:

Hier is een stukje tekst <span style="color:blue;">blauw</span>

Met style="" kun je CSS in een HTML blokje stoppen. Dat werkt dan alleen voor dat ene blokje, maar dat is perfect voor in berichten. Probeer ook eens de andere CSS commando’s die je hebt geleerd, zoals border en font-family.

Tip: als je meerdere CSS commando’s in één blokje wilt, zet je er een ; tussen. Bijvoorbeeld:

<span style="color:white;background-color:black">Dit bericht is zwart/wit.</span>

Scripts (JavaScript)

Nu dat je een complete app hebt en zelf heb bepaald hoe het eruit ziet, gaan we een kijkje onder de motorkap nemen: hoe worden de berichten verstuurd en ontvangen?
Voor dit hoofdstuk werk je in het bestand basic-chat.js.

Javascript: de basis

Javascript is de programmeertaal van het web. Alle HTML blokjes die je nu in je app hebt, kun je met Javascript aan sturen. Je kunt ook berichten sturen naar de server en ontvangen van de server. Daar gaan we mee aan de slag.

console.log("Hallo console!")
socket.emit("maakBericht", "Hallo websocket!")

Je hebt nu een berichtje in de console én je hebt een berichtje via de chat verstuurd! Allebei kunnen ze heel handig zijn! Laten we zien wat we nog meer kunnen met Javascript.
Als je iets wilt weten van je app, kun je een commando geven dat iets terug geeft om te onthouden. Type eens:

$(".naamInput").val()

Je ziet je naam nu terug in de console! Deze commando ziet er misschien gek uit, dit is wat er gebeurt:

Kun je op die manier ook het kanaal op vragen? Of een bericht in de chat?

Variabelen

Met variabelen (var) kan de browser dingen onthouden:

var naam = $(".naamInput").val()
socket.emit("maakBericht", "Hallo, mijn naam is " + naam)

Je hebt nu een bericht verstuurd met je naam er in! Kun je hetzelfde doen met je kanaal?

Berekeningen

Computers zijn ook heel goed in rekenen. Het woord computer is zelfs Engels voor “berekenaar”! Type het volgende maar eens om uit te proberen:

var kanaal = $(".kanaalInput").val()
kanaal + 2

Dit gaat nog niet goed: het getal 2 is achter het kanaal nummer geplaatst. Dat komt omdat javascript niet gelijk snapt dat het een getal is:

parseInt(kanaal) + 2

Nu zie je je kanaal, met twee erbij opgeteld. Om de oefening af te maken, laten we de server vertellen dat we een nieuw kanaal willen:

socket.emit("zetKanaal", parseInt(kanaal) + 2)

Functies en parameters

Je hebt al verschillende commando’s aangeroepen, zoals socket.emit en parseInt, maar je kan ook je eigen commando’s maken. Dat noemen we functions. Type dit eens in je console:

function hallo(naam) {
    socket.emit("maakBericht", "Hallo " + naam + "!")
}

Er gebeurt nog niets. Dat komt omdat je de function eerst moet aanroepen, voordat er iets gebeurt:

hallo("ninjas")
hallo("ikzelf")
hallo("javascript")

Je kan de functie zo vaak aanroepen als je maar wilt.

Je eigen bot

Je weet nu al veel over hoe je commando’s geeft en maakt in Javascript. Met functions kun je ook reageren op dingen die gebeuren. Zo kun je een function schrijven die reageert op berichten in de chat:

function hoiDoei(bericht) {
    if (bericht.tekst == "hoi") {
        socket.emit("maakBericht", "doei")
    }
}

Het woord if is Engels voor ‘als’. Er staat dus: als het bericht “hoi” is, zeg dan “doei”. Maar hoe ontvangen we berichten?

socket.on("krijgBericht", hoiDoei)

Elke keer als er een bericht binnen komt, wordt de commando hoiDoei aangeroepen. Type maar eens het woord “hoi” in de chat!

Nog veel meer

Met HTML, CSS en Javascript kun je hele programma’s bouwen, zoals je ziet. Er valt nog ontzettend veel te leren! De eerst volgende stap is om de basic-chat.js te lezen en je kan dat bestand ook aanpassen, om andere dingen te doen: automatisch van kanaal wisselen bij een bericht, je naam veranderen via een bericht, enzovoorts. Je kunt ook altijd op internet zoeken naar wat je nog meer kan met HTML, CSS en Javascript, de website https://www.w3schools.com/ is een leuke plek om te beginnen. Heel veel plezier en heel veel succes!

Licentie

Deze instructies worden, net als alle andere instructies van CoderDojo Nijmegen, aangeboden onder een Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Licentie.

Creative Commons License