Introduktion til kurset
rust-fjerner bl.a. Unit test

Begrebs-kort.

Walkthrough: Create and run unit tests for managed code
Use code coverage to determine how much code is being tested

Thomas Hamilton:
Boundary Value Analysis and Equivalence Partitioning Testing, guru 99, 2021

Unit Testing (Power point)

Begrebs-kort (Power point)

Har du den nødvendige software:

• Visual Studio Enterprise 2022
  Du får licens-nøgle fra Azure Dev Tools (tidligere Microsoft Imagine)
  Bemærk, med VS2022 er det ikke nødvendigt med Resharper!
  
• GitHub Desktop

Gennemgå og diskuter parvist følgende eksempel: 
BookLibValidatorUnitTest

Læs og afprøv følgende tutorials:
Walkthrough: Create and run unit tests for managed code

Extra: Hackerrank.com Programmerings-konkurrencer osv etc

Component + unit test

SoftwareComponents.pptx

Microsoft .Net Core Guide:
Create a .NET class library using Visual Studio
Test a .NET class library with .NET using Visual Studio

Læs og afprøv følgende tutorials:
Create a .NET class library using Visual Studio
Test a .NET class library with .NET using Visual Studio

Calculator Part1 (.Net Standard library)
Calculator Part2 (program/applikation)

Bemærk:
Når man skal distribuere en dll fil med kommentarer, skal disse først genereres i et XML-dokument. Dette gøres ved under page properties -> output at afkrydse "generate XML- document". Det genererede xml-dokument skal medsendes sammen med dll filen.
Når dll-filen skal anvendes i et projekt er det nok at tilføje en reference til dll-filen (xml-dok skal ligge i samme mappe).

Bemærk:
Da vi anvender "open source" (koden er ikke obfuskeret), så kan vi højre-klikke på en metode og anvende "go to implementation" og se kilde koden.

JavaScript

JavaScript
http://www.w3schools.com/js/default.asp
 (læs det hurtigt - ikke alt er vigtigt)
Vi bruger Vue.js så document.getElementById(...) er sjældent nødvendigt for os.

Linkedin/learning (ekstra):
Morten Rand-Hendriksen: JavaScript Essential Training (video)
(Giver en udførlig gennemgang af JavaScript, skip "Linting and formatting" i første omgang)

Examples (Code demonstated in the class):

ES2015Test (VSCode)
JavaScriptObjects (VSCode)

Exercise:
Hvis JavaScript er helt "nyt" for dig kan du lave føglende exercises i Codecademy:
Codecademy: https://www.codecademy.com/learn/introduction-to-javascript

Er din webside mobilvenlig? er min?

Vue3 intro (slides)

Vue Mastery: Intro to Vue.js (video)
Vuejs.org: Vue Introduction

Vue Essentials Cheat Sheet, specielt side 1
Vue3 CheatSheet for developers

Obligatorisk studieaktivitet (hjemmeopgave startes)
Obligatorisk opgave 1 (studieaktivitet)

Eksempler (Kode vist i klassen):
SayHelloVue3
Vue3Examples

Exercise: (Bootstrap + validation)
Bootstrap makeover of an existing web page

Exercise: (Vue.js)
Gennemgå Intro to Vue.js og løs diverse Challenge (frem til section 6 Event handling)

Alternativ, gennemgå:

1. Microsoft: Get Started with Vue 
2.  Dynamic page display with Vue.js
3.  Work with data and event in Vue.js

Collect words using JavaScript and Vue.js
Calculator with JavaScript + Vue.js

Add some Bootstrap to your solution to Collect Words and Calculator exercises

Upload your web applications to Microsoft Azure.
Use FTP, or use the Kudu console (“Upload files and folder using drag and drop”)

Solution:
Calculator
Collect Words

Web-applikationer: UI test med Selenium

JavaScriptScript: DOM manipulation

1. Download a driver suitable for your browser: Chrome | FireFox
   Unzip the drivers and save them in a folder like c:\webDrivers.
   If your browser updates, you must download a new version of the webdriver (Chrome updates frequently …)
2. UI testing: Collect Words | solution
3. UI test for your Calculator web application | solution
   Hint: How to select an option from drop down using Selenium WebDriver C#?

JavaScript: Consume REST (Axios),
promises

Axios

1. Sebastian Eschweiler Getting Started with Axios
   This is a JavaScript tutorial. We should convert to TypeScript.
2. GitHub Axios documentation
3. Travis Horn Building json2table: Turn JSON into an HTML table
   
4. Joy Waguru: Asynchronous Javascript using Async - Await
5. Extra: GitHub offers a REST API. Try it. How to display the data?
   

Eksempler (Kode vist i klassen):
REST GET example (Vue Posts): JS, Vue, async/await
REST GET, DELETE, POST example (Vue Cars) | REST service provider
General REST consumer (check for CORS availability)
Extra Generic Table

Exercise:

1. Go through Getting Started with Axios
2. GET some data from http://jsonplaceholder.typicode.com/todos and show the data in the browser using Vue.js.
   Look at the REST GET example (Posts) for inspiration.
3. Use the Bookstore REST API to create a web application | solution
   Look at the Cars example for inspiration.
   Hint: First ignore query string parameters provided by the REST controller. Later you can use the query string parameters ...
4. Push your web application to GitHub.
5. Upload your web application to Microsoft Azure.
   Use FTP, or use the Kudu console (“Upload files and folder using drag and drop”).
   If your browser complains about mixed content … make sure you request your web-page using http://…., not https://….
6. Add some Bootstrap styling to one (or more) of your JavaScript + Vue.js applications.
   Make buttons etc look nicer + add some responsiveness (adapt to browser width)
7. More JavaScript projects: Consume the REST services you made in TEK class.

Første obligatoriske opgave afleveres i wiseflow senest: d 4/10 kl 12.00

Selenium UI test fortsat
- Test af WebApps der benytter REST services

Sorting + filtering af data i JavaScript (front-end) eller i REST (back-end)

Vue components

Selenium: Explicit and implicit waits

Vue Components
Getting started with Vue CLI and single-file components in Vue.js, Microsoft

Components Basic, Vue.js.
Stop før afsnittet Emitting a Value With an Event

Example: 
How-to video om hvordan man uploader fra Visual Code til GitHub.

Make a UI test for your web application - an application consuming a REST service.
Example UI test

Eksempler (Kode vist i klassen):
Selenium
REST GET, DELETE, POST example (Vue Cars) + UITestCarsAsynRest

Sorting/filtering:
booksSortingJavaScript, sorting + filtering books in JavaScript (VSCode)
booksSortingREST, JavaScript calling REST to sort books (VSCode)
RESTbooksStatusCodes, REST including methods for sorting (VS2019)

Components
Vue3ComponentButtonCounter

Exercise:

• Make a UI test for your web application - an application consuming a REST service.
  Example UI test
• Make some web applications (HTML + JavaScript) using other peoples REST services. Start interacting with the REST services in a browser or in Postman.
  A list of some REST services. If you find one REST service difficult to use, go to the next in line - or find another REST service yourself.
  You can use the CORS checker to see if a REST service supports CORS

• GitHub REST API https://api.github.com/ 
• Try Googling “weather rest api free”: Find a REST service and try it..
  Maybe you’ll find this: https://vejr.eu/pages/api-documentation (notice no CORS, not useful) or https://openweathermap.org/api (more useful)
  Simple weather forecast https://www.7timer.info/bin/civillight.php?lon=12.1&lat=55.6&ac=0&unit=metric&output=json&tzshift=0 
  More advanced weather forecast (more data = a lot of JSON) https://www.7timer.info/bin/civil.php?lon=12.1&lat=55.6&ac=0&unit=metric&output=json&tzshift=0   
• Danish car register https://www.motorapi.dk/ , https://www.nummerpladeapi.dk/ (cars from Denmark, Sweden and Norway)
• DAWA Danmarks Adresser REST API including BBR (Bygnings og Bolig-registret = all Danish buildings)
• DataForderdeleren, a lot of Danish data
• Marine Traffic
• FBI Most Wanted 
• Wine etc (using POST, not GET!)
  Since you must send a POST request, use Postman to try the service

Exercise:
Gennemfør eksemplerne fra Components Basic, Vue.js.
Stop før afsnittet Emitting a Value With an Event
Der er 2 eksempler (button-counter, blog-posts), så lav 2 selvstændige projekter.

Parprogrammering

A note on pair programming, including remote pair programming.

Visual Studio Live Share
Live Share Extension Pack for Visual Studio Code
Inviting Collaborators to a private repository

REST + JavaScript from user stories 

Tek+Prog - Prøveeksamen: Fredag d. 4 november 9-14

Rasberry Pi SenseHat
Getting started with the SenseHat
Sense Hat API Reference
W3School: Python
Python Quick Guide

Extra: Learn more Python3:
Tutorials Point: Python Tutorial
The Python Tutorial
Python Software Foundation
Guru99: Python Tutorial for Beginners

Examples:
Python + Sense HAT examples
Tamagotchi in the emulator (see: Processing.py)

1. Try (some of) the examples from Getting started with the SenseHat
   Try to change the example code slightly.
2. Disco and Christmas lights 
3. Python + Sense HAT: Measurements IMPORTANT
4. Play with some of the examples from W3Schools Python
5. Simple Python (no Sense HAT): Download interpreter + write code in Notepad
6. Extra: Download PyCharm. Same company as ReSharper = same license

Bemærk, hvis du ønsker at benytte PyCharm sammen med din PI (kan absolut godt anbefales!!) skal du benytte en remote connection, se: https://www.hackster.io/Jolley71717/connect-jetbrains-pycharm-to-raspberry-pi-72be15
Opret en ny mappe på din PI ala HEHO, den kommer til at ligge under: /home/pi/HEHO. Denne sti benyttes til "remote project location"

IoT: begrebet, Raspberry Pi, Putty, Linux
IoT: UDP fra Python

1. Wikipedia: Internet of Things
2. Lopez Research An Introduction to the Internet of Things, 2013
3. Libelium: 50 Sensor Applications for a Smarter World
4. Introduction to Lora
5. Internet of Things (slides)

Examples

1. UDP broadcast example (Python)
2. UDP broadcast sender (C#)
   May be used to broadcast fake measurements (if you don’t have a Raspberry Pi)
   How to open ports in Windows Firewall
3. UDP broadcast receiver (C#)
   May be used as a starting point for your Proxy (receiving UDP broadcast and sending REST POST requests)

Exercise:

1. Download and install Putty (Putty.exe)
   Putty will enable you to communicate from your laptop to Raspberry Pi: Use the laptop keyboard + screen with the Pi.
   Use the IP address printed at the bottom of the Raspberry Pi
2. Download and install WinSCP

With WinSCP you can easily move files from Raspberry Pi to your laptop (and vice versa)

3. Python + Sense HAT: Measurements IMPORTANT
4. Ball control | solution (joystick) + solution (orientation)
5. Show the Pi’s IP address on the LED display
6. Read data and send UDP broardcast
7. Use the emulator to program Python

Prøve-eksamen PROG+TEK
Tirsdag kl 9-13++.

Prøve-eksamen er en af de obligatoriske studie-aktiviteter jf. Studieordningen

PROG+TEK eksamen (10-13. januar)