Eerste feedback ronde gecorrigeerd
This commit is contained in:
Bram van der Veen
parent
b201966071
commit
0e3ef419c1
|
|
@ -1,9 +1,34 @@
|
|||
#### Leerlingen, Lokalen en Docenten
|
||||
---
|
||||
We weten al hoe werkmanrooster jouw informatie gebruikt om het zoeken naar je rooster makkelijker te maken. Maar hoe komt werkmanrooster eigenlijk aan die informatie? Dat gaan we bespreken in dit hoofdstuk.
|
||||
|
||||
|
||||
Werkmanrooster maakt gebruik van een zelfgeschreven script genaamd een "`crawler`". Deze crawler kan meerdere webpagina's afgaan om informatie te verkrijgen en deze opslaan. Dit doet hij door bepaalde patronen te herkennen in de webpagina's en daarmee de benodigde informatie herkennen. Het script heet in `spider.js` in het project.
|
||||
|
||||
---
|
||||
#### Een diepere ontleding
|
||||
Laten we wat beter kijken naar de manier waarop `spider.js` werkt.
|
||||
We nemen het gedeelte waar het belangrijkste gebeurd.
|
||||
|
||||
```javascript
|
||||
var listOfStudents = cheerio('select', download).children();
|
||||
|
||||
for (student in listOfStudents) {
|
||||
|
||||
var name = cheerio(listOfStudents[student]).text().split(' - ')[1];
|
||||
var group = cheerio(listOfStudents[student]).text().split(' - ')[0];
|
||||
var id = cheerio(listOfStudents[student]).val();
|
||||
|
||||
var databaseEntry = {
|
||||
'id' : id,
|
||||
'group' : group,
|
||||
'username' : id + name.split(' ')[0].toLowerCase(),
|
||||
'name' : name,
|
||||
'first_name' : name.split(' ')[0],
|
||||
'last_name' : name.split(' ').splice(1).join(' '),
|
||||
'studentcategory' : studentcategory,
|
||||
'type' : page.type.replace(/rooster/g, '').toLowerCase()
|
||||
}
|
||||
|
||||
collection.insert(databaseEntry);
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
#### Hoe werkt Werkmanrooster?
|
||||
---
|
||||
Welkom bij mijn profielwerkstuk. Dit werkstuk bestaat uit een serie webpagina's die stap voor stap laten zien hoe Werkmanrooster werkt. Klik aan de link aan de onderkant van de pagina om naar de volgende pagina te gaan.
|
||||
Welkom bij mijn profielwerkstuk. Dit werkstuk bestaat uit een serie webpagina's die stap voor stap laten zien hoe Werkmanrooster werkt. Klik op de link aan de onderkant van de pagina om naar de volgende pagina te gaan.
|
||||
Bedankt voor het lezen!
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
#### In het kort - De broodjeszaak
|
||||
---
|
||||
Ik hoop dat ik je geen honger heb gegeven met deze titel, ik moet toegeven dat ik zelf ook honger kreeg toen ik dit voorbeeld bedacht.
|
||||
Laten we beginnen. Hoe Werkmanrooster werkt is vergelijkbaar met een broodjeszaak, een soort Subway. Als jij binnen komt bij een broodjeszaak, dan loop je naar de balie en bestel je een broodje. Dit broodje wordt dan vervolgens voor je gemaakt: er worden ingrediënten voorbereid en uiteinelijk op je broodje gedaan. Uiteindelijk word het broodje ingepakt in wat papier met wat servetten, daarna kan je genieten van je broodje.
|
||||
Laten we beginnen. Hoe Werkmanrooster werkt is vergelijkbaar met een broodjeszaak, een soort Subway. Als jij binnen komt bij een broodjeszaak, dan loop je naar de balie en bestel je een broodje. Dit broodje wordt dan vervolgens voor je gemaakt: er worden ingrediënten voorbereid en uiteindelijk op je broodje gedaan. Het broodje ingepakt in wat papier met wat servetten, daarna kan je genieten van je broodje.
|
||||
|
||||
Dit lijkt allemaal vrij triviaal. Tuurlijk zou je zeggen, dat is inderdaad hoe een broodjeszaak werkt, dat hoef je me niet uit te leggen. Meeste mensen zullen ook vragen wat dit nou te maken heeft met Werkmanrooster. Een goede vraag om te stellen. Het is namelijk zo dat Werkmanrooster en heel veel andere websites, apps en programma's op een soortgelijke manier werken. Laten we kort kijken wat je doet bij Werkmanrooster om je rooster te krijgen.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
#### Inleiding
|
||||
---
|
||||
Heel veel mensen op het Werkmancollege locatie Stadslyceum gebruiken een alternatieve manier van hun rooster bekijken. Dit doen ze via Werkmanrooster, een door leerlingen opgerichte website voor het bekijken van je eigen rooster. [Het eerste initiatief](http://web.archive.org/web/20101216064457/http://werkmanrooster.nl/) was van een paar leerlingen, later [overgenomen](http://web.archive.org/web/20140103031959/http://werkmanrooster.nl/) door Daniël Koster & Friso Wobben. Sinds December 2014 was het mijn beurt om het domein te beheren.
|
||||
Heel veel mensen op het Werkmancollege locatie Stadslyceum gebruiken een alternatieve manier om hun rooster bekijken. Dit doen ze via Werkmanrooster, een door leerlingen opgerichte website voor het bekijken van je eigen rooster. [Het eerste initiatief](http://web.archive.org/web/20101216064457/http://werkmanrooster.nl/) was van een paar leerlingen, later [overgenomen](http://web.archive.org/web/20140103031959/http://werkmanrooster.nl/) door Daniël Koster & Friso Wobben. Sinds December 2014 was het mijn beurt om het domein te beheren.
|
||||
|
||||
Mijn passie voor programeren en dingen uitzoeken heeft me de laatste paar jaar bezig gehouden met het steeds beter worden in het ontwikkelen van websites, applicaties en andere technische snufjes. Werkmanrooster is daar geen uitzondering van. Dit is dan ook de reden dat ik mijn profielwerkstuk hierover schrijf, omdat ik het heel leuk vind om uit te leggen hoe programeren te werk gaat en misschien mensen iets nieuws laten leren.
|
||||
|
||||
Toen het mijn beurt was om Werkmanrooster te beheren, zijn er al veel versies van Werkmanrooster langsgekomen. Dit profielwerkstuk gaat over mijn tweede versie van Werkmanrooster, genaamd [`rooster.io`](http://git.werkmanrooster.nl/werkmanrooster/rooster-io). Dit is de versie van werkmanrooster die iedereen heeft gebruikt voor de twee jaar. Ik ga in dit profielwerkstuk aan jou uitleggen hoe het internet werkt, hoe Werkmanrooster werkt, wat data-gedreven applicaties zijn en nog veel meer.
|
||||
Mijn passie voor programeren en dingen uitzoeken heeft me de laatste paar jaar bezig gehouden met het steeds beter worden in het ontwikkelen van websites, applicaties en andere technische snufjes. Werkmanrooster is daar geen uitzondering op. Dit is dan ook de reden dat ik mijn profielwerkstuk hierover schrijf. Ik vind het heel leuk vind om uit te leggen hoe programeren te werk gaat en misschien mensen iets nieuws laten leren.
|
||||
|
||||
Toen het mijn beurt was om Werkmanrooster te beheren, zijn er al veel versies van Werkmanrooster langsgekomen. Dit profielwerkstuk gaat over mijn tweede versie van Werkmanrooster, genaamd [`rooster.io`](http://github.com/96aa48/rooster.io). Dit is de versie van werkmanrooster die iedereen heeft gebruikt voor de laatste twee jaar. Ik ga in dit profielwerkstuk aan jou uitleggen hoe het internet werkt, hoe Werkmanrooster werkt, wat data-gedreven applicaties zijn en nog veel meer.
|
||||
|
||||
---
|
||||
[Volgende >>](/moeilijkheidsgraad)
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
##### Je gaat naar de website - Telefoonboek
|
||||
---
|
||||
Iedereen gebruikt het internet dagelijks, en vaak zonder te weten wat er eigenlijk allemaal gebeurd achter de schermen. Een van de dingen die vrijwel het vaakste word uitgevoerd is het gaan naar een website. Wat veel mensen niet weten is dat het internet net zo werkt als dat wij onze telefoons gebruiken.
|
||||
|
||||
Wanneer jij je beste vriend of vriendin wil opbellen toets je niet hun naam in je telefoon in, maar hun telefoonnummer. Het internet bestaat uit vergelijkbare nummers genaamd `ip`-addressen. `ip`-addressen zijn het fundament van hoe computers met elkaar communiceren. Elke computer, smartphone en laptop die verbonden is met een netwerk heeft een `ip` adres. Websites hebben ook een `ip` adres. Een `ip` adres kan van `0.0.0.0` tot `255.255.255.255` varieren. Maar hoe weet jouw computer nou welk ip adres hij moet hebben? Dat gaat via het `DNS` systeem. `DNS` staat voor 'Domain Name System', wat dat systeem doet is het vertalen van een 'domain name', zoals `werkmanrooster.nl`, naar een `ip` adres (`85.214.232.210`).
|
||||
|
||||
|
||||
Wanneer jij je beste vriend of vriendin wil bellen toets je niet hun naam in je telefoon in, maar hun telefoonnummer. Het internet bestaat uit vergelijkbare nummers genaamd `ip`-addressen. `ip`-addressen zijn het fundament van hoe computers met elkaar communiceren. Elke computer, smartphone en laptop die verbonden is met een netwerk heeft een `ip` adres. Websites hebben ook een `ip` adres. Een `ip` adres kan van `0.0.0.0` tot `255.255.255.255` varieren. Maar hoe weet jouw computer nou welk ip adres hij moet hebben? Dat gaat via het `DNS` systeem. `DNS` staat voor 'Domain Name System', wat dat systeem doet is het vertalen van een 'domain name', zoals `werkmanrooster.nl`, naar een `ip` adres (`85.214.232.210`).
|
||||
|
||||
Op deze manier weet jouw computer waar hij moet zijn voor Werkmanrooster. Dit is handiger dan het `ip` adres uit je hoofd leren!
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
#### Moeilijkheidsgraad
|
||||
---
|
||||
#### EL15
|
||||
Als je naar de titel van deze pagina kijkt dan denk je zeker, wat is dit nou weer voor een rare term. Vast voor iets gerelateerd aan programeren of zo iets moeilijks. Gelukkig voor jou, de lezer, is dat het omgekeerde. ELI5 is een term die is onstaan voor het makkelijker te begrijpen van moeilijke begrippen. ELI5 word vaak gebruikt in online gemeenschappen om te vragen naar de meeste makkelijk begrijpbare uitleg van een begrip, namelijk een uitleg die je ook zou geven aan een vijf jarige. Dit is om ervoor te zorgen dat mijn uitleg voor iedereen begrijpbaar zou moeten zijn. Bij elke pagina zal het van makkelijk naar steeds moelijker gaan verlopen om het zo goed mogelijk uit te leggen.
|
||||
#### ELI5
|
||||
Als je naar de titel van deze pagina kijkt dan denk je zeker, wat is dit nou weer voor een rare term. Vast voor iets gerelateerd aan programeren of zo iets moeilijks. Gelukkig voor jou, de lezer, is dat het omgekeerde. ELI5 is een term die is onstaan voor het makkelijker te begrijpen van moeilijke begrippen. Het staat letterlijk voor "Explain Like I'm 5". ELI5 word vaak gebruikt in online gemeenschappen om te vragen naar de meeste makkelijk begrijpbare uitleg van een begrip, namelijk een uitleg die je zou geven aan een vijf jarige. Dit is om ervoor te zorgen dat mijn uitleg voor iedereen begrijpbaar zou moeten zijn. Bij elke pagina zal het van makkelijk naar steeds moelijker gaan verlopen om het zo goed mogelijk uit te leggen.
|
||||
|
||||
Mocht je de uitdaging aan willen om meer inzicht te krijgen in Werkmanrooster, dan daag ik je uit om de [code](http://github.com/96aa48/rooster.io) te lezen. Gelukkig heb ik rekening gehouden met potentiele lezers van de code. De code is goed gedocumenteerd met verschillende "comments" aangeduid met `//` en `/*`. Het is namelijk ook belangrijk dat je code leesbaar blijft voor mensen, naast de code optimaliseren van code voor computers voor maximale effeci"entie.
|
||||
Mocht je de uitdaging aan willen om meer inzicht te krijgen in Werkmanrooster, dan daag ik je uit om de [code](http://github.com/96aa48/rooster.io) te lezen. Gelukkig heb ik rekening gehouden met potentiele lezers van de code. De code is goed gedocumenteerd met verschillende "comments" aangeduid met `//` en `/*`. Het is namelijk ook belangrijk dat je code leesbaar blijft voor mensen, naast de code optimaliseren voor computers voor maximale effeci"entie.
|
||||
|
||||
---
|
||||
#### Rooster.io en code
|
||||
|
||||
Werkmanrooster is meer dan alleen wat webpagina's met roosters. Werkmanrooster is een kleine data-gedreven-webapplicatie. Dit wil zeggen dat Werkmanrooster zijn functioneren volledig afhangt van de data die ze heeft. Werkmanrooster is geschreven in verschillende programeertalen in de vorm van `code`. `Code` is een manier om een computer te laten weten wat hij moet doen. Dit klinkt allemaal heel moeilijk, maar het is niets meer dan een manier voor programmeurs te communiceren met computers. Wees vooral niet bang om wat nieuws te leren, want ik moet helaas soms de 'naakte' code laten zien om deze uitleggen.
|
||||
Werkmanrooster is meer dan alleen wat webpagina's met roosters. Werkmanrooster is een kleine data-gedreven-webapplicatie. Dit wil zeggen dat Werkmanrooster zijn functioneren volledig afhangt van de data die ze heeft. Werkmanrooster is geschreven in verschillende programeertalen in de vorm van `code`. `Code` is een manier om een computer te laten weten wat hij moet doen. Dit klinkt allemaal heel moeilijk, maar het is niets meer dan een manier voor programeurs te communiceren met computers. Wees vooral niet bang om wat nieuws te leren, want ik moet helaas soms de 'naakte' code laten zien om deze uitleggen.
|
||||
|
||||
De code die we nu kort gaan bekijken is geschreven in de taal "`Javascript`" soms verkort naar "`js`". `Javascript` is een van de makkelijkste talen om op te pakken en snel dingen mee te maken die werken. `Javascript` wordt vaak gebruikt voor het toevoegen van interactiviteit aan webpagina's of soms wel voor een heel project. `Javascript` (maar ook andere programeertalen) zijn geschreven zodat er op verschillende manieren aan de computer duidelijk gemaakt kan worden wat de programeur de computer wil laten doen. Dit wordt vaak gedaan met het gebruik van zogenaamde "`keywords`". Dit zijn dingen zoals "`var`" voor het defineren van een variabele, "`function`" voor het defineren van een functie (vergelijkbaar met een wiskundige functie) nog veel meer. Ook word er met code sommige afwegingen gemaakt. Denk dan vooral aan het nakijken van dingen. Hoe dit word beschreven in `code` is te herkennen van wiskunde bijvoorbeeld de `<`, `>` en `=` tekens.
|
||||
De `code` die we nu kort gaan bekijken is geschreven in de taal "`Javascript`" soms verkort naar "`js`". `Javascript` is een van de makkelijkste talen om op te pakken en er is snel dingen mee te maken die werken. `Javascript` wordt vaak gebruikt voor het toevoegen van interactiviteit aan webpagina's of soms wel voor een heel project. `Javascript` (maar ook andere programeertalen) zijn geschreven zodat er op verschillende manieren aan de computer duidelijk gemaakt kan worden wat de programeur de computer wil laten doen. Dit wordt vaak gedaan met het gebruik van zogenaamde "`keywords`". Dit zijn dingen zoals "`var`" voor het defineren van een variabele, "`function`" voor het defineren van een functie (vergelijkbaar met een wiskundige functie) nog veel meer. Ook word er met code sommige afwegingen gemaakt. Denk dan vooral aan het nakijken van dingen. Hoe dit word beschreven in `code` is te herkennen van wiskunde bijvoorbeeld de `<`, `>` en `=` tekens.
|
||||
|
||||
Laten we kijken naar een klein stukje code met verschillende `keywords` en een afweging, aangegeven met `if`. De dingen tekst die volgt na de `//` word genegeerd door de computer, dit is om opmerkingen achter te laten aan potentiele lezers.
|
||||
Laten we kijken naar een klein stukje code met verschillende `keywords` en een afweging, aangegeven met het `keyword` `if`. De dingen tekst die volgt na de `//` word genegeerd door de computer, dit is om opmerkingen achter te laten aan potentiele lezers.
|
||||
|
||||
```javascript
|
||||
//Defineer het variabele fount_students en geef het een waarde van 10.
|
||||
var found_students = 10;
|
||||
var aantalStudenten = 10;
|
||||
|
||||
//We weten dat found_students 10 is. 10 is groter dan 1, dus deze afweging klopt.
|
||||
if (found_students > 1) { //Afweging: als er meer dan één leerling is gevonden
|
||||
//We weten dat aantalStudenten 10 is. 10 is groter dan 1, dus deze afweging klopt.
|
||||
if (aantalStudenten > 1) { //Afweging: als er meer dan één leerling is.
|
||||
//Als de bovenstaande afweging klopt, wordt deze code uitgevoerd.
|
||||
}
|
||||
else {
|
||||
//Als de eerste afweging niet klopt dan wordt deze code uitgevoerd.
|
||||
//Als de eerste afweging niet klopt, wordt deze code uitgevoerd.
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ Werkmanrooster beschikt over een grote archiefkast van leerlingen, docenten, kla
|
|||
Rooster: roosters5.gepro-osi.nl/roosters/rooster.php?school=934&type=Leerlingrooster&afdeling=l_atheneum 6&leerling=16374
|
||||
```
|
||||
|
||||
Wat de secretaresse doet is elk bestand bij langs gaan en dit vergelijken met jouw zoekopdracht. Als jij vraagt naar "Bram" dan zal ze alle Brammen pakken. Vraag jij bevoorbeeld naar "Atheneum 6" dan zal zij alle bestanden pakken die uit Atheneum 6 komen. Mocht ze alleen maar een bestand vinden bij de zoekopdracht, dan stuurt ze het gevonden bestand naar haar collega die het rooster zal opzoeken en uitprinten.
|
||||
Wat de secretaresse doet is elk bestand bij langs gaan en dit vergelijken met jouw zoekopdracht. Als jij vraagt naar "Bram" dan zal ze alle Brammen pakken. Vraag jij bijvoorbeeld naar "Atheneum 6" dan zal zij alle bestanden pakken die uit Atheneum 6 komen. Mocht ze alleen maar een bestand vinden bij de zoekopdracht, dan stuurt ze het gevonden bestand naar haar collega die het rooster zal opzoeken en uitprinten.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -35,8 +35,8 @@ Bij het intypen van `Bram van der Veen` zal `rooster.io` [de informatie](http://
|
|||
}
|
||||
```
|
||||
|
||||
Wat we hier zien is ook een soort van `code`. Het is misschien niet direct een manier van vertellen wat een computer moet doen, maar een manier waarop code informatie kan vasthouden en organiseren. De structuur (of syntax) is vergelijkbaar met die van `Javascript`, dat klopt ook zeker. Dit is namelijk een dataobject genoteerd in zogenaamd "**J**ava**s**cript **O**bject **N**otation", `JSON` in het kort. Eigenlijk staat er precies hetzelfde als in het bestand uit de archierkast, maar er zijn wat tekens aan toegevoegd zodat de computer het kan lezen.
|
||||
|
||||
Wat we hier zien is ook een soort van `code`. Het is misschien niet direct een manier van vertellen wat een computer moet doen, maar een manier waarop code informatie kan vasthouden en organiseren. De structuur (of syntax) is vergelijkbaar met die van `Javascript`, dat klopt ook zeker. Dit is namelijk een dataobject genoteerd in zogenaamd "**J**ava**s**cript **O**bject **N**otation", `JSON` in het kort. Eigenlijk staat er precies hetzelfde als in het bestand uit de archiefkast, maar er zijn wat tekens aan toegevoegd zodat de computer het kan lezen.
|
||||
|
||||
`Rooster.io` werkt hier net zoals de secretaresse. Hij gaat alle bestanden bij langs om te kijken of jouw zoekopdracht overeenkomt met een van de vele bestanden in de database. Zo'n bestand ziet er zo uit:
|
||||
```javascript
|
||||
//Een dataset voor de zoekopdracht "Bram van der Veen"
|
||||
|
|
|
|||
|
|
@ -18,6 +18,6 @@ Hij bekijkt het bestand en richt zich gelijk op de laatste waarde van het bestan
|
|||
#### Data verkrijgen en algoritmes
|
||||
`Rooster.io` gaat ook verder, door het bestand uit de database te verwerken. Hij doet hetzelfde als de collega in het verhaal hierboven. Hij knipt en plakt het rooster in een nieuw jasje. Maar dan op een geprogrameerde en effici"ente manier.
|
||||
|
||||
Hij gaat naar de link die is gegeven in het bestand en download het daar gevonden rooster als tekstbestand. Vervolgens gaat hij door dit tekstbestand heen om het rooster uit te vissen. Hij leest dit bestand volgens een bepaald algoritme. Dit algoritme is voorgeprogrameerd om bepaalde informatie er uit te halen. De informatie die verkregen word uit de webpagina is bijvoorbeeld de rooster informatie. Dit zijn dingen zoals welk uren je welke lessen hebt met welke docenten en in welk lokaal. Het algoritme verkrijgt ook informatie zoals het naam van het rooster. Hij vertaalt dan deze door mensen te lezen informatie, in een soortgelijk [database bestand](http://werkmanrooster.nl/api/schedule?name=16374) zodat een computer het kan lezen. Het verschil in database bestanden tussen een rooster en die van een leerling, is het verschil van inhoud. Een database bestand van een leerling houdt informatie vast over de leerling, terwijl een database bestand van een rooster informatie vasthoud over een specifiek rooster. Nu moet er van dit database bestand een webpagina gemaakt worden.
|
||||
Hij gaat naar de link die is gegeven in het bestand en download het daar gevonden rooster als tekstbestand. Vervolgens gaat hij door dit tekstbestand heen om het rooster uit te vissen. Hij leest dit bestand volgens een bepaald algoritme. Dit algoritme is voorgeprogrameerd om bepaalde informatie er uit te halen. De informatie die verkregen word uit de webpagina is bijvoorbeeld de rooster informatie. Dit zijn dingen zoals welke uren je welke lessen hebt met welke docenten en in welk lokaal. Het algoritme verkrijgt ook informatie zoals het naam van het rooster. Hij vertaalt dan deze door mensen te lezen informatie, in een soortgelijk [database bestand](http://werkmanrooster.nl/api/schedule?name=16374) zodat een computer het kan lezen. Het verschil in database bestanden tussen een rooster en die van een leerling, is het verschil van inhoud. Een database bestand van een leerling houdt informatie vast over de leerling, terwijl een database bestand van een rooster informatie vasthoud over een specifiek rooster. Nu moet er van dit database bestand een webpagina gemaakt worden.
|
||||
|
||||
[Volgende >>](/templates)
|
||||
|
|
|
|||
Loading…
Reference in a new issue