Voorwoord

Dit onderwerp heb ik gekozen omdat het mij een leuk en uitdagend onderwerp leek. ik weet nog niet zo veel over het ontwikkelen van software en juist daarom koos dit onderwerp! Aan het einde van het werkstuk zou ik willen weten hoe je games maakt en hoe je een website maakt. Door het maken van een website en een game hoop ik meer te weten komen over software ontwikkeling. (aantal woorden: )



1. De geschiedenis van software ontwikkeling

Verschillen in software ontwikkeling vroeger en nu

Vroeger ontwikkelde mensen software alsof het gebouwen waren. Eerst werd de betonnen bodem gemaakt, daarna de muren en het dak. Er werden maanden besteed aan het ontwerp en daarna maanden aan het bouwen. Aan het einde kwam de controleur en moesten de eventuele fouten worden hersteld. Fouten in de bodem waren hierbij onherstelbaar dit moest dus echt goed zijn.

Pas als het gebouw was gecontroleerd op fouten en deze fouten waren hersteld, kon je het gebouw opleverden aan de eigenaar. Dit noemde ze de "waterval methode", net als een waterval kom je van de ene fase in de ander fase van het software ontwikkel proces. De ontwikkeling van software ging dus heel lang (zo'n 30jaar) op dezelfde manier als het ontwikkelen van een gebouw. Met het ontwerpen, bouwen en testen waren ze al snel 6 tot 9 maanden bezig voor er een nieuwe versie van de software beschikbaar was. Maar nu is software bouwen niet hetzelfde als een gebouw bouwen.

Als je nu software ontwikkeld heb je niet te maken met een betonnen bodem, muren en vloeren. Je past de software van deze tijd heel gemakkelijk aan en de eerste versie hoeft niet perfect te zijn. Er is niks in beton gegoten!

Door de fases ontwerp, bouw en test korter en vaker op elkaar te laten volgen, kan de eigenaar ook makkelijk bijsturen in het proces. Dit wendbaar ontwikkelen van software wordt Agile Software development genoemd. Dit is de "agile methode".

2. Agile scrum software ontwikkeling

Geen einddoel maar het doel constant aanpassen

Anders dan 20 jaar geleden gebruiken mensen nu de agile scrum (software ontwikkel) methode. Ze gaan daarbij niet meer, eerst twee maanden ontwerpen en dan twee maanden programmeren en dan nog eens twee maanden te testen en fouten te herstellen. Maar ze doen het ontwerp, programeer en test werk in korte "sprints", waardoor het product snel aangepast kan worden. In deze "sprints", die twee tot vier weken duren, gaat het erom dat je aan het einde iets bruikbaars heb.

Het woord scrum komt van de sport rugby, waarbij 8 spelers van elk team dicht bij elkaar staan en ze de bal naar voren te brengen. Bij agile scrum software ontwikkeling, werken de teamleden ook aan een gezamelijk doel en proberen ze het software product te verbeteren. Hierbij is communicatie, haalbare doelen stellen en commitment aan het team belangrijk. Binnen het team helpen de teamleden elkaar en verbeteren zichzelf. Als er een keer iemand uitvalt kunnen anderen het werk overnemen in de sprint.

De productowner heeft de rol om te bepalen wat er moet worden gedaan, maar laat het team zelf weten hoe ze dat gaan doen. De productowner helpt bij discussies over het product en stelt een duidelijke prioriteit over de te maken software. De planning van de productowner is ongeveer drie maanden voorruit, dat zijn dus 3 tot 6 sprints. De product owner staat tussen de klant en het team hij weet de eisen waaraan het software product moet voldoen.

Tijdens de sprint werk je als teamlid met de ander teamleden samen. Als teamlid maak je deel uit van een team van ongeveer 5-8 mensen. Binnen agile scrum moeten deze mensen een zelfstandig team vormen die het gewenste product kunnen realiseren. Elke teamlid heeft zijn eigen specialisme maar kan ook andere taken overnemen binnen de sprint. Een team kan bijvoorbeeld bestaan uit 3 programmeurs, een tester en ontwerper.

Naast de rol "team lid" en "product owner" is er nog een derde rol, die van "scrum master". De taak van de scrum master is om het process te begeleiden en te zorgen dat er volgens de Agile scrum wijze wordt gewerkt. Want binnen elke "sprint" zijn er vaste gebeurtenissen die plaats vinden. In het volgende hoofdstuk vertel ik je hier meer over.

3. Wat is een scrum sprint?

Wat er nou eigenlijk in een sprint gebeurt

Als eerste is er elke dag de stand-up, met behulp van het scrumboard bespreken we de voortgang van elke taak. Elk team lid geeft dan antwoord op de volgende vragen.

Wat heb je gister gedaan?
Wat ga je vandaag doen?
en wat houd je tegen?

Als tweede gebeurtenis is er de story refinement, hier verduidelijken de teamleden de taken voor de volgende sprint om ze later beter te kunnen inschatten. Vragen die de teamleden zich stellen zijn:

Is het een makkelijke taak of een moeilijke?
Is het duidelijk genoeg om te beginnnen?

Als derde gebeurtenis is er de plannings sessie, de teamleden geven nu hun inschatting hoe compelx een taak, door "story points" toetekennen aan een taak. Bijvoorbeeld 1 voor een makkelijke taak, 2, 3, 5 voor een medium taak en 8, 13 voor een complexe taak. De scrum master kan op basis van de eerdere sprints inschatten hoeveel "story points" een team kan doen in een sprint.

Als vierde is er de demo, aan het einde van de sprint wordt er een demo aan de product owner en klant gegeven. Het team geeft een presentatie van de nieuwe software en ze krijgen feedback van de klant.

Als laatste is er de retrospective, Tijdens deze terugblik op de afgelopen sprint geven de teamleden aan hoe blij ze waren met de sprint en bespreken ze verbeterpunten en maken ze afspraken. Het team stelt dan de vragen:

Wat ging er goed?
Wat ging minder?
Wat spreken we af voor de volgende sprint?

4. Benodigdheden voor het maken van een website

Wat heb je nodig om een website te maken?

Elke website die je kan bedenken wordt in dezelfde taal geschreven, deze "taal" heet HTML, HTML staat voor Hyper Tekst Markup Language. Met Hyper text bedoelen ze bijvoorbeeld een klikbare link en met markup bedoelen ze dat je de tekst kan stylen. Als een website online staat, kun je hem bekijken in een browser, zoals Chrome, Safari, Firefox of Microsoft Edge. HTML-pagina's zijn gevuld met onderdelen, zoals tekst, afbeeldingen, video's, tabellen, titels, knoppen of links.

Als je een website wilt bouwen heb je dus een browser en een tekst editor nodig. Een simpele teksteditor zoals kladblok (windows) of tekstedit(mac) staat al op je computer. Maar voor dit werkstuk hebben we een uitgebreide teksteditor gedowload namelijk "Microsoft visual studio". Deze teksteditor is geïntegreerd met ons versiebeheer software.

Wij hebben voor dit werkstuk gebruik gemaakt van "Git" versiebeheer software. Met versiebeheer kan je namelijk makkelijk in de tijd je wijzigingen opzoeken als je nog eens iets wil opzoeken. Versiebeheer is ook handig omdat je code niet alleen lokaal op je computer staat maar ook op een centrale plek. Je moet je werk "committen" (lokaal opslaan) en "pushen" (opslaan op de centrale plek) Iedereen in het team kan dan makkelijk samen werken aan code door jouw wijzigingen te "pullen" (wijzigen uit de centrale plek ophalen).

Om de website toegangelijke te maken op het internet maken we gebruik van "github pages". Als je je code pushed dan maakt github pages van jouw code een toegankelijk website op het internet. In het volgende hoofdstuk gaan we samen een website maken met een eenvoudige tekst editor. Dit is genoeg om aan de slag te gaan en lokaal op jouw computer een website te maken.

5. Een website bouwen met HTML

Zelf aan de slag met HTML en CSS

De website begon heel simpel met een bestand genaamd "index.html" met daarin tags. In HTML hebben alle elementen een begintag en de meeste hebben ook een sluittag. Tags staan altijd tussen punthaken < en >. Je kan dit zelf proberen met het programma kladblok, open dit programma in windows door links onder te zoeken op kladblok. Meestal staat dit in de accessoires. Open dit programma en plak dan de onderstaande code erin. Sla deze file op als index.html en open deze file dan met je browser, je ziet meteen of het is gelukt.

<html> <body> <h1> hoofdstuk 1 </h1> <p> hoi, dit is je eerste website </p> </body> </html>

De styling van de website doen we in een file genaamd "style.css", de afkorting css staat voor Cascading Style Sheet. Daarin kun je het uiterlijk van alle links, letters en nog veel meer in een keer veranderen. We bepalen in deze file bijvoorbeeld hoe een titel eruit moet zien, dit doen we door de gewenste styling aan de tag te koppelen. Deze tags gebruiken we dan weer in de "index.html" we hoeven dan geen styling meer te doen want dat is al geregeld in de "style.css" file. Maak een nieuwe file, plak onderstaande code erin en noem dit nieuwe bestand "style.css".

body { font-family: sans-serif; background-color: rgb(207, 181, 181); text-align:center; } h1 { font-size: 3rem; padding-top: 3rem; }


Niet vergeten "style.css" te linken in je html pagina anders snapt je browser het niet. Voeg deze link toe aan je "index.html", door deze te open met kladblok.

<link rel=stylesheet href=style.css>



Net als bij het lezen van een boek, kun je op internet de bladzijdes omslaan. Veel Pagina's zijn met elkaar verbonden via (hyper)links. Door te klikken op een link ga je naar een andere pagina. Een voorbeeld van een hyper link uit het volgende hoofdstuk.

<a href=hoofdstuk-6-Een-game-maken.html>spelen</a>

Je start met de ankertag <a. Met href voeg je de link naar je html pagina toe en tussen de > en < voeg je de naam van de link toe.

6. Een game bouwen met javascript

Beweging toevoegen

Om onze eigen game te programmeren, moesten we een paar nieuwe technieken leren. We moesten een afbeeldingen toevoegen als achtergrond. Ook moesten we een afbeelding op een bepaalde plek neerzeten en vervolgens deze afbeelding laten bewegen. Om dit allemaal te laten werken gebruikten we zowel html-code, als javascript.

Als je een simpele game maakt, moet je html gebruiken om een afbeelding toe te voegen en wat tekst om de score weer te geven. Maar html kan de afbeelding niet laten bewegen of de score aanpassen, met javascript lukt dit wel. Javascript is gemaakt om html pagina wat meer beweging te geven.

Het javascript gedeelte start altijd met <script> We hebben een script geschreven om de score bij te houden en we hebben een script geschreven om de klikbare afbeelding te laten bewegen. Als er op weet te klikken kom hier weer terug.

Je kan de code hier bekijken.
De game kan je hier spelen.

Nawoord

Dit was echt een heel leuk project. Ik heb erg veel geleerd over software ontwikkeling. Mijn week plannen met een scrumboard was wel handig maar we deden meestal gewoon wat in ons ons op kwam. We hebben wel ons doelen bereikt van een januari versie en de huidge februari versie. Maar de week planning lukte niet altijd. Het was leuk om te programmeren en het was een beetje moeilijk maar ook weer niet te moeilijk.

Het debuggen van de game was wel lastig, maar uiteindelijk lukte toch. De februari versie heeft veel geleend van andere ontwikkelaars, zie de gebruikte websites, maar dat mag bij software ontwikkeling. Je hoeft het wiel niet opnieuw uit te vinden maar je moet het wel kunnen repareren.

Ik heb bij dit werkstuk hulp gekregen van mijn vader, die software tester is en dus veel met software ontwikkeling doet. Hij heeft mij geholpen met dit project en hij heeft nu samen met mij geleerd om websites maken en aan te passen.

Als hier klikt vlieg je je weer helemaal terug naar het voorwoord

moeilijke woorden:

gebruikte boeken:

gebruikte websites: