Een game met HTML5, Dojo, Node.js en MongoDB (deel 1: Opzet)

March 17th, 2013 | 4 min read | Dojo, HTML5, JavaScript, Node.js, Web

In deze drie-delige tutorial ga ik een kleine “game” maken waarbij allerlei technologieën aan te pas gaan komen die de laatste weken in mijn tutorials aan bod zijn gekomen zoals Dojo toolkit en Node.js. In deze tutorial ga ik ook een nieuwe technologie aan bod laten komen, namelijk MongoDB.
Het resultaat waar we voor gaan is een multiplayer “game”, maar let vooral op de aanhalingstekens, want het enige wat je gaat kunnen doen is doelloos rondlopen. In onderstaande screenshot zie je hoe het spel eruit zal komen te zien.

example-game

NoSQL

Om de staat van de verschillende spelers te bewaren, ga ik gebruik maken van MongoDB. MongoDB is een database, maar niet zomaar één, het is namelijk een NoSQL database.

De meeste databases die door iedereen gekend zijn (MySQL, MSSQL, PostgreSQL, …) zijn allemaal relationele databases. Je maakt een database aan, je maakt tabellen aan met een vaste structuur en daarna maak je records aan volgens die vaste structuur.
Deze aanpak heeft enorm veel voordelen, maar waarschijnlijk net zoveel nadelen. Één van de zaken die je zal opmerken als je met relationele databases werkt is dat als je een kolom niet nodig hebt, je daarvoor een alternatieve waarde of NULL moet gaan gebruiken. Je bent dus strikt gebonden aan de structuur die je opgelegd is en je kan daar niet van afwijken. Mocht je zeer dynamische data hebben, dan kan je dus al zien dat dit veel lege waarden in je database gaat geven.

NoSQL werkt echter niet met tabellen of een vaste structuur maar kan werken op basis van documenten of objecten. In een op documenten gebaseerd NoSQL systeem geef je op voorhand wel een structuur op, maar kies je zelf welke velden je zoal nodig hebt. Je kan dus documenten hebben met misschien maar 3 velden, maar ook documenten die 20 velden hebben, in één systeem.

Daarentegen heb je ook de object-oriented NoSQL systemen die op basis van dynamische objecten (meestal via JSON notatie) werkt. het voordeel van zo’n object is dat je zelf bepaald welke velden er zoal moeten komen en kan je er ook voor zorgen dat je objecten kan gaan nesten enz.

MongoDB Installeren

Als eerste stap moeten we MongoDB installeren, dit kan je doen vanaf http://www.mongodb.org/. Ubuntu gebruikers kunnen MongoDB ook via de package manager downloaden via:

sudo apt-get install mongodb

Indien MongoDB gedownload is kan je het opstarten, ik heb enkel ervaring met de Ubuntu variant, het commando daarvoor is:

sudo mongod --config /etc/mongodb.conf --rest

Indien MongoDB succesvol gestart is, kan je dit verifiëren door in je browser te navigeren naar http://localhost:28017/.

mongodb-interface

Node.js

Uiteraard hebben we ook een Node.js project nodig. Dit project zal iets complexer zijn dan vorige keren, wat je in ieder geval wel nodig hebt zijn enkele packages, namelijk mongoose, simple-mime en websocket. Dit doe je via de volgende commando’s:

npm install simple-mime
npm install websocket
npm install mongoose

De simple-mime module hebben we ondertussen al enkele keren gebruikt, twee nieuwe modules echter zijn websocket en mongoose. Mongoose is een Node.js client voor MongoDB, hiermee gaan we dus MongoDB aanspreken (data toevoegen, verwijderen, updaten en lezen).

WebSocket daarentegen is een module die nodig is om een comet applicatie te kunnen schrijven. Zo’n comet applicatie is een webapplicatie waarbij een webserver in staat is om data te pushen naar de client. Hiervoor moet een langdurige connectie geopend kunnen worden met de server. Een eenvoudige HTTP request (AJAX) zal niet volstaan, hiermee kunnen we namelijk geen data pushen, maar enkel een pull verrichten.

Zo’n langdurige verbinding met de server kan opgezet worden via een (web)socket, hiervoor hebben we dus de WebSocket module nodig.

Project opzetten

Als je eenmaal de modules gedownload hebt kan je de project structuur gaan voorzien. Maak een map htdocs in je project folder aan en voorzie hierin een index.html en een map assets. In de map assets moeten de mappen js en img terecht komen.

In de map js maak je het bestand additions.js aan en de resources die in de map

img

terecht moeten komen kan je hier downloaden.

Ten slotte maak je ook nog het Node.js script aan in de projectmap, het project zou er nu moeten uitzien als in onderstaande afbeelding.

project-structure

Hiermee is deze eerste tutorial dan ook afgerond.

To be continued…

Het volgende deel kan je hier nalezen.

Back to tutorialsContact me on TwitterDiscuss on Twitter

Profile picture

Dimitri "g00glen00b" Mestdagh is a consultant at Cronos and tech lead at Aquafin. Usually you can find him trying out new libraries and technologies. Loves both Java and JavaScript.