Cette leçon contient 21 diapositives, avec quiz interactifs et diapositives de texte.
Éléments de cette leçon
Introductie C#
BBL-C#
Les 2
Slide 1 - Diapositive
We schrijven C# doorgaans in...
A
Visual Studio Code
B
Een code editor als 'Atom'
C
Visual Studio
D
Sublime Text
Slide 2 - Quiz
Slide 3 - Diapositive
Hoe noemen we dit scherm?
A
Autocomplete
B
Visual Studio
C
Intellisense
D
Intellicode
Slide 4 - Quiz
Gecompileerd
Geïnterpreteerd
PHP
C#
Javascript
Computer leest code regel-voor-regel
Computer bouwt alle code tot machinetaal
Uitvoerbaar bestand
Compile errors
Runtime errors
Bestanden handmatig "includen" of "requiren"
Slide 5 - Question de remorquage
Wat is dit rood onderstreepte deel van het Console object?
A
Een sub-object
B
Een eigenschap
C
Een modifier
D
A property
Slide 6 - Quiz
Wat voor project starten wij om een Console applicatie te maken?
A
Console App (.NET Core)
B
Class Library (.NET Framework)
C
Console App (.NET Standard)
D
Console App (.NET Framework)
Slide 7 - Quiz
Solution Bestand
Open altijd dit bestand als je aan een Visual Studio project wilt verder werken.
Je kunt het openen in Visual Studio via File > Open > Project/Solution of de Open a Project or Solution-knop op het begin scherm.
Project map
In dit voorbeeld het de projectmap hetzelfde als de solution "TowerOfHanoi". Hierin kun je alle code bestanden vinden, evenals de gebouwde Executable (.exe)
Slide 8 - Diapositive
Project bestanden
Hier vind je alle projectbestanden. Pas deze niet aan en verplaats ze niet! Als je dat doet zal Visual Studio ze niet terug kunnen vinden. Maak alleen wijzigingen aan projecten binnen in Visual Studio.
bin = Binaries = Computertaal bestanden = onder andere de .exe
In de bin/Debug map kun je jouw .exe bestand vinden. Dit bestand wordt pas gecompileerd wanneer je in Visual Studio het project bouwt (Build > Build Solution)
Slide 9 - Diapositive
Vorige week een Console App, vandaag een Windows Forms App
Enkele voorbeelden...
Slide 10 - Diapositive
Slide 11 - Diapositive
Slide 12 - Diapositive
Slide 13 - Diapositive
Slide 14 - Diapositive
Rechtsklik opties
Wanneer je met de rechtermuis op een formulier klikt krijg je een hoop opties. De belangrijkste:
View Code (F7): Dit brengt je naar de code die bij dit formulier hoort. Daar kun je code schrijven die uitgevoerd wordt bij bijvoorbeeld het klikken op een knop.
View Designer (Shift+F7): Dit brengt je terug naar de Form Designer, waar je Controls op het formulier kunt veranderen
Eigenschappen bewerken
Wanneer je in Visual Studio op iets klikt kun je daarvan hier de eigenschappen veranderen.
Nu zie je hier dat "ConfigForm.cs" is aangeklikt. Dat is een formulier en daar kunnen en willen we weinig eigenschappen van veranderen. Wanneer je op een Control klikt wordt het pas interessant!
Een Form bestand
Dit is een Windows Forms Project. Dat wil zeggen dat we kunnen werken met schermpjes die knoppen, invoervelden en plaatjes kunnen bevatten.
Je ziet hier "CalculateHanoiForm.cs":
Als je hier dubbel op klikt open het "Form Designer" Scherm.
Wanneer je op het pijltje (⏵) klikt zie je onderliggende code betanden. Hier doen we niets mee! Bewerk deze ook niet. Het *.Designer.cs bestand wordt automatisch gegenereerd door Visual Studio. Als je hier wijzigingen in maakt zullen die overschreven worden.
Project
Je ziet hier dikgedrukt TowerOfHanoi staan. Dit is een project binnen de Solution.
Een solution kan uit meerdere projecten bestaan. Kijk voor een voorbeeld maar eens in de installatiemap van je favorite software/game. Je ziet in de installatiemap een .exe, maar ook een hoop .dll bestanden. Al deze bestanden zjin vaak losse projecten met ieder een eigen doel. De ene is verantwoordelijk voor het tekenen van de game op je scherm, de ander voor het bewegen van monsters en weer de ander voor het bijhouden van quests. Zo houdt een programmeur het overzicht in de code én nog veel belangrijker: we kunnen onderdelen van ons programma makkelijk hergebruiken, omdat ze eigenlijk los staan van elkaar.
Wij gaan eigenlijk alleen maar aan de slag met één Project per Solution.
Formulier Designer
Dit scherm toont hoe het formulier er voor de gebruiker eruit gaat zien. Het is een soort tekenprogramma voor software.
Vanuit de Toolbox kun je hier Controls (knoppen, tekstvelden, text, etc) op slepen. Je bewerkt dan eigenschappen van die Controls in het Properties-scherm en kunt bij de code door op F7 of View Code te klikken.
Toolbox
De Toolbox bevat alle invoervelden, knoppen, teksten, plaatjes en andere zogenaamde "Controls" die op een formulier geplaatst kunnen worden.
Sleep een control vanuit hier naar het formulier om het te plaatsen, of klik 1 maal op een Control en sleep dan met de muis op het formulier hoe groot je dit Control wilt hebben.
De meeste Controls zijn zichtbaar voor de gebruiker, maar er zijn er ook die enkel voor de ontwikkelaar interessant zijn. Zo is er bijvoorbeeld een Timer Control, dat gebruikt wordt om code iedere X milliseconden te laten uitvoeren.
Solution Explorer Window
Dit schermpje bevat alle code bestanden die in jouw solution zijn inbegrepen.
Een "Solution" is een complete oplossing voor een probleem van een klant. Omdat wij programmeurs zijn lossen we die problem op met software.
Slide 15 - Diapositive
Code View
Na het klikken op "View Code (F7)" binnen een formulier kun je de code zien die bij het formulier hoort.
Toolbox verbergen
In de code view is de Toolbox niet beschikbaar.
Om je schermruimte voor code te vergroten kun je de toolbox minimaliseren. Klik op het punaise icoontje rechtsboven in de toolbox om het scherm naar links in te klappen.
Visual Studio Layout herstellen
Super handig dat je al die versleepbare en sluitbare schermpjes kan aanpassen in Visual Studio, maar het kan wel eens zijn dat je iets niet kunt terugvinden. Om de layout van Visual Studio terug te brengen naar de "fabrieksinstellingen" klik je via Window > Reset Window Layout
View menu
Via View kun je verschillende schermpjes tevoorschijn toveren. De meeste interessante zijn:
Het Toolbox scherm
Het Properties scherm
Het "Error List" scherm: hierin zie je alle errors die momenteel in je code aanwezig zijn.
Errors!
Hierin zie je alle errors en warnings die momenteel in je code aanwezig zijn. Begin bij oplossen altijd met de bovenste error.
Er zijn nu 9 errors, maar die kunnen in dit voorbeeld opgelost worden door regel 19 af te maken met "UpdateCalculations(); }"
Dan verdwijnen de rest van de errors ook. De reden dat er zo veel errors zijn is de vergeten accolade: }
Heb je dus veel errors? Ga na of je niet een accolade te veel of te weinig hebt.
Als je een error hebt lukt het Visual Studio niet om je programma te bouwen naar machinetaal! Als je de .exe dus probeert zul je een oude versie krijgen
Visual Studio Updates
Omdat er heel veel ontwikkelaars zijn die met Visual Studio werken én Microsoft zelf ook met Visual Studio werkt zijn er een hoop updates iedere week.
Houdt de updates bij. Dit heeft geen invloed op de werking van jouw code, maar het verhelpt problemen die je mogelijk ervaart in het gebruik van Visual Studio.
Slide 16 - Diapositive
🍪 Oefening 🍪
We gaan een simpele cookieclicker game maken
Gebruik eerst de Toolbox en Designer om een formulier te ontwerpen, daarna gaan we samen de achterliggende code schrijven.
Slide 17 - Diapositive
Koekje om op te klikken
Wanneer de gebruiker hierop klikt, krijgt deze een koekje
Aantal koekjes per seconde
Hierin komt hoeveel koekjes er automatisch per seconde bij komen
Bekijk de oog icoontjes, deze Controls gaan jullie ook in een Formulier maken. Gebruik hiervoor alleen deze elementen: Button en Text
Het zal er niet zo mooi uit zien als dit spel, maar dat is voor de oefening niet belangrijk.
Heading
Een kopje voor de winkel
Knop om automatische "cursors" te kopen
Wanneer de gebruiker deze knop aan klikt, verliezen ze 15 koekes, maar krijgen ze er vanaf nu per seconde automatisch 1 bij.
Aantal huidige koekjes
Slide 18 - Diapositive
Samen code schrijven
Wanneer de speler op de knop klikt, krijgt die een 🍪
De speler kan zien hoeveel 🍪🍪 deze heeft
De speler kan een 'auto-clicker' kopen, waardoor deze per seconde 1 🍪 meer krijgt
De speler kan zien hoeveel 🍪🍪 deze er per seconde bij krijgt
Slide 19 - Diapositive
Volgende weken
Volgende week gaan we meer oefenen met: Loops, Arrays, Methodes, Properties, Data tussen Forms
De week daarna gaan we zorgen dat onze Cookie Clicker koekjes opslaat in een database.