diff --git a/articles/inhetkort/normaal - hoe werktmanrooster.md b/articles/inhetkort/normaal - hoe werktmanrooster.md index 5c5f471..4d46c71 100644 --- a/articles/inhetkort/normaal - hoe werktmanrooster.md +++ b/articles/inhetkort/normaal - hoe werktmanrooster.md @@ -1,37 +1,23 @@ #### In het kort - Hoe werktmanrooster --- -Hoewel broodjes heel erg lekker zijn, is het doel van Werkmanrooster (nog) niet om broodjes te maken. Bij Werkmanrooster of rooster.io gaat het om de informatie van je rooster zo snel en efficient mogelijk op je scherm krijgen. Hoewel we in dit hoofdstuk niet heel diep in gaan op elk deel van rooster.io, maar gaan we vooral alles globaal uitleggen. De genoemde kopjes zijn natuurlijk apart uitgelegd in hoofdstukken, dus het klikken van de links na het lezen zou voor de benodigde diepgang zorgen. Maar voor we beginnen wat basis begrippen. +We hebben het eigenlijk wel genoeg gehad over broodjes, balies en archieven. Laten we beginnen met het echte werk, de laag van dit profielwerkstuk waar we wat dieper ingaan op alle stof van Werkmanrooster. Bij Werkmanrooster of rooster.io gaat het om de informatie van je rooster zo snel en efficient mogelijk op je scherm krijgen. Hoewel we in dit hoofdstuk niet heel diep in gaan op elk deel van rooster.io, maar gaan we vooral alles globaal uitleggen. De genoemde kopjes zijn natuurlijk apart uitgelegd in hoofdstukken, dus het klikken van de links na het lezen zou voor de benodigde diepgang zorgen. Maar voor we beginnen wat basis begrippen. -* Server -Je hebt vast wel een keer gehoord van een "server", maar wat dat ding eigenlijk is en doet heb je waarschijnlijk nooit bij stil gestaan. Een server is een computer die verschillende opdrachten kan uitvoeren voor een gebruiker (client), meestal omdat de handeling te zwaar is voor de gebruiker zelf of omdat het centraliseren van die handelingen efficienter is. -* rooster.io (zonder hoofdletter) -Het naam van Werkmanrooster als project in code, Werkmanrooster en rooster.io kunnen constant uitgewisseld worden voor benaming in zinnen. - -* Templates -Sjablomen ##### [Je gaat naar werkmanrooster.nl](/intypen) Voordat je naar de website gaat zijn er een paar dingen die gebeuren tussen jouw computer in het internet. Je computer vraagt aan een DNS (Domain Name System) waar werkmanrooster.nl word omgezet in een internet telefoonnummer, zo genaamd een "IP adres" waar je computer naar toe gaat om verbinding te maken met de website. -###### Je typt je naam in en je drukt op enter. -Dit is misschien wel het snelste proces wat er gebeurd binnen het systeem. Er is namelijk geen informatie nodig van de gebruiker en de website kan gelijk reageren zonder roosters op te halen. Het enige wat rooster.io hoeft te doen is een pagina te laten zien aan de gebruiker. -Dit is waar je een heel groot proces aan het werk zet. Op het moment dat de gebruiker op enter drukt wordt namelijk de naam die je hebt ingetypt geüpload naar rooster.io, dat wil zeggen, de informatie wordt vanaf de gebruiker gedeeld naar de server. De server controleerd wat je gestuurd hebt en reageerd op wat je hebt ingevuld. Bijvoorbeeld als je specifieke dingen intypt zoals "hoewerkt" word je naar deze paginas gestuurd. Als je zoekopdracht niet overeenkomt met die speciale gevallen dan doet hij een standaard zoekopdracht naar een rooster. +Rooster.io stuurt dan de hoofdpagina, dit is misschien wel het snelste proces wat er gebeurd binnen het systeem. Er is namelijk geen informatie nodig van de gebruiker en de website kan gelijk reageren zonder roosters op te halen. Het enige wat rooster.io hoeft te doen is een pagina te laten zien aan de gebruiker. +Wanneer de gebruiker op enter drukt nadat hij zijn of haar naam heeft ingetypt wordt een heel groot proces aan het werk gezet. -##### [Rooster.io gaat een match zoeken van je zoekopdracht.](/opzoek) -Bijvoorbeeld als je `Bram van der Veen` in typt zal het systeem [de informatie](http://werkmanrooster.nl/api/search?name=Bram van der Veen) vinden die daar bij hoort. Als je op de link klikt zul je verschillende waardes zien. Een waarde word gedefineerd als : -```javascript -//In dit voorbeeld heeft naam_voor_de_data, de waarde "data". -{ - "naam_voor_de_data": "data", - "id": "16374bram" -} -``` -Wat hier belangrijk is, is dat je je beseft dat als je iets in typt dat rooster.io de verschillende waardes bij langs gaat om te kijken of ze overeen komen met de zoekopdracht. -In dit geval komt `Bram van der Veen` overeen met de waarde van het variabele `name`. Maar hetzelfde geld als ik bijvoorbeeld alleen `Bram` of `van der Veen` in typ, het systeem zal alleen [meerdere ](http://werkmanrooster.nl/api/search?name=Bram)[mensen](http://werkmanrooster.nl/api/search?name=van der Veen) vinden met dezelfde waardes. -Als rooster.io meerdere mensen vindt voor dezelfde zoekopdracht dan maakt hij een lijst zodat de gebruiker kan kiezen uit welk van de mensen hij of zij het rooster wil zien. Als er maar één persoon gevonden wordt dan gaat rooster.io verder met de volgende stap. + + +##### [Rooster.io gaat een match zoeken van je zoekopdracht.](/opzoek/normaal) +Rooster.io gaat bezig met het vergelijken van je zoekopdracht met wat het kan vinden in de database. Deze database bestaat uit meerdere datasets van leerlingen, docenten en lokalen. Als er meerdere datasets overeenkomen met de zoekopdracht laat hij een lijst zien van alle gevonden datasets. Als de zoekopdracht overeenkomt met maar één van de datasets uit de database dan gaat rooster.io verder met de volgende stap. ##### Het verkrijgen en verwerken van het rooster. -Nu dat het voorwerk is gedaan, is het eindelijk tijd voor rooster.io om bezig te gaan met waar het om gaat: roosters. Zoals je misschien gezien hebt bij [de informatie](http://werkmanrooster.nl/api/search?name=Bram%20van%20der%20Veen) is er een data waarde genaamd "url". Als je naar deze [url](http://roosters5.gepro-osi.nl/roosters/rooster.php?school=934&type=Leerlingrooster&afdeling=l_atheneum 6&leerling=16374) gaat dan zul je de normale roostersite zien van Schoolmasters. Waar je nu naar kijkt is de informatie die rooster.io ontvangt als hij opzoek gaat naar je rooster. De hoeveelheid informatie die uit deze pagina te halen is lijkt op het eerste gezicht triviaal, maar als je verder kijkt dan wat de gebruiker ziet zul je een grote cluster vinden van informatie die allemaal te gebruiken is voor verschillende doeleindes. +In deze stap gaat rooster.io bezig met het gebruiken van de gevonden dataset om een rooster op te halen. Hij doet dit door het gerelateerde rooster te downloaden en vervolgens te filteren om het rooster er uit te halen. Hoe deze filter werkt is waar rooster.io het meeste tijd over doet. Om meer functionaliteit toe te voegen zijn wordt alle informatie in de gedownloade pagina zoveel mogelijk gebruikt. + + ##### Het renderen van het rooster. -Maar hoe zorgen we ervoor dat [dit](http://werkmanrooster.nl/api/schedule?name=Bram%20van%20der%20veen) er uit gaat zien als [dat](http://werkmanrooster.nl/rooster/Bram van der Veen)? -Simpel is het niet, maar het systeem gebruikt aan aantal "[templates](http://git.werkmanrooster.nl/werkmanrooster/rooster-io/tree/master/resources/jade)" of sjablomen. Deze templates zijn gemaakt voor het laten zien van verschillende paginas. Rooster.io heeft er een voor de hoofdpagina, roosters, login en lijsten van mensen. Voor een rooster word het template "schedule" gebruikt. Deze template sorteerd de informatie van het dataobject in een tabel van een webpagina. Het is alsof het dataobject gesmolten ijzer is en het gegoten word in een vorm zodat het bruikbaar word. Er wordt bij het renderen van het rooster ook nog wat extra dingen bij gedaan voor beter gebruiksgemak. +Maar hoe zorgen we ervoor dat [dit](http://werkmanrooster.nl/api/schedule?name=Bram%20van%20der%20veen) er uit gaat zien als [dat](http://werkmanrooster.nl/rooster/Bram van der Veen)? +Rooster.io maakt gebruik van "templates" om de pagina's zo efficient mogelijk te bieden terwijl de informatie op de pagina wel dynamisch blijft. + + diff --git a/articles/opzoek/makkelijk - archiefkast.md b/articles/opzoek/makkelijk - archiefkast.md index 924f983..e56677a 100644 --- a/articles/opzoek/makkelijk - archiefkast.md +++ b/articles/opzoek/makkelijk - archiefkast.md @@ -8,7 +8,7 @@ In de eerste 0.2 seconden gebeurd er namelijk een kleine zoektocht naar jouw naa ```json Naam: Bram van der Veen Leerlingnummer: 16374 - Klas: Atheneum 6 + Klas: Atheneum Voornaam: Bram Achternaam: van der Veen Soort: Leerling @@ -19,4 +19,4 @@ Voor de secretaresse gaat dus alles bij langs en kijkt of wat jij hebt gevraagd Heb je uiteindelijk een keuze gemaakt dan stuurt ze het dossier uit het archief naar de volgende balie waar het verder word verwerkt. --- -[Volgende >>](#) +[Volgende (Verkrijgen en verwerken) >>](/verkrijgen) diff --git a/articles/opzoek/normaal - zoeken naar een naald in een naaldberg.md b/articles/opzoek/normaal - zoeken naar een naald in een naaldberg.md new file mode 100644 index 0000000..8fec7d3 --- /dev/null +++ b/articles/opzoek/normaal - zoeken naar een naald in een naaldberg.md @@ -0,0 +1,31 @@ +##### Opzoek naar je naam - Zoeken naar een naald in een naaldberg +--- +Bijvoorbeeld als je `Bram van der Veen` in typt zal het systeem [de informatie](http://werkmanrooster.nl/api/search?name=Bram van der Veen) vinden die daar bij hoort. Als je op de link klikt zul je verschillende waardes zien. Een waarde binnen een dataset word gedefineerd als : +```javascript +//In dit voorbeeld heeft naam_voor_de_data, de waarde "data". +{ + //De ":" wil zeggen dat de een waarde word gebonden aan een variabele + //in dit geval "data" aan de "naam_voor_de_data" variabele. + "naam_voor_de_data": "data" +} +``` +Wat hier belangrijk is, is dat je je beseft dat als je iets in typt dat rooster.io de verschillende waardes bij langs gaat om te kijken of ze overeen komen met de zoekopdracht. +Hier is een dataset zoals laten zien werd bij de eerste link in dit hoofdstuk. +```javascript +//Een dataset voor de zoekopdracht "Bram van der Veen" of "16374" +{ + "id": "16374", //Leerlingnummer + "group": "A6A", //Groep waaraan de leerling behoort + "username": "16374bram", //De geschatte gebruikersnaam van de leerling + "name": "Bram van der Veen", //De hele naam van de leerling + "first_name": "Bram", //De voornaam van de leerling + "last_name": "van der Veen", //De achternaam van de leerling + "studentcategory": "l_atheneum 6", //Een variabele wat nodig is voor het opzoeken van het rooster. + "type": "leerling", //Of deze dataset een leerling is of iets anders. + "_id": "Mc5vtoIrhMM8e2dN", + //De link naar het rooster van de leerling. (Deze link is verkort en doet het niet) + "url": "roosters5.gepro-osi.nl/?school=934&type=Leerlingrooster&afdeling=l_atheneum 6&leerling=16374" + } +``` +In dit geval komt `Bram van der Veen` overeen met de waarde van het variabele `name`. Maar hetzelfde geld als ik bijvoorbeeld alleen `Bram` of `van der Veen` in typ, het systeem zal alleen [meerdere ](http://werkmanrooster.nl/api/search?name=Bram)[mensen](http://werkmanrooster.nl/api/search?name=van der Veen) vinden met dezelfde waardes. +Als rooster.io meerdere mensen vindt voor dezelfde zoekopdracht dan maakt hij een lijst zodat de gebruiker kan kiezen uit welk van de mensen hij of zij het rooster wil zien. Als er maar één persoon gevonden wordt dan gaat rooster.io verder met de volgende stap. diff --git a/articles/verkrijgen/makkelijk - de volgende balie.md b/articles/verkrijgen/makkelijk - de volgende balie.md index df45679..5258693 100644 --- a/articles/verkrijgen/makkelijk - de volgende balie.md +++ b/articles/verkrijgen/makkelijk - de volgende balie.md @@ -23,4 +23,4 @@ Dit is essentieel en makkelijk uitgelegd hoe werkmanrooster werkt, en waarom men --- -[Volgende (Frequently Asked Questions) >>](/faq) +[Volgende (Frequently Asked Questions) >>](#) diff --git a/hoewerkt.js b/hoewerkt.js index 87a67e4..a97489a 100644 --- a/hoewerkt.js +++ b/hoewerkt.js @@ -6,7 +6,8 @@ var articles = [ 'moeilijkheidsgraad:Moeilijkheidsgraad', 'inhetkort:In het kort', 'intypen:Je gaat naar de website', - 'opzoek:Op zoek naar je naam' + 'opzoek:Op zoek naar je naam', + 'verkrijgen:Verkrijgen en verwerken' ] module.exports = function (req, res, next) { diff --git a/resources/jade/article.jade b/resources/jade/article.jade index eafc6a9..d0f48fa 100644 --- a/resources/jade/article.jade +++ b/resources/jade/article.jade @@ -9,7 +9,7 @@ html body .container .row - .sidebar.five + .sidebar.five div h5 Profielwerkstuk p Hoe werkt Werkmanrooster? diff --git a/resources/less/style.less b/resources/less/style.less index 7057105..21cfcec 100644 --- a/resources/less/style.less +++ b/resources/less/style.less @@ -6,6 +6,7 @@ left: 0px; bottom: 0px; top: 0px; + display: none; h5, p, sup { text-align: center !important;