Henrik Høltzer (heho)
Programmering - PROG 3C

Semester: 3.sem., efterår 2020
Email: heho@zealand.dk

 

Uge Emner Materialer Opgaver
35

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

Begrebs-kort.
(OneNote til noter).

Microsoft Visual Studio Docs:
Unit test basics

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

Unit Testing (Power point)

Begrebs-kort (Power point)

Har du den nødvendige software:

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

Use code coverage to determine how much code is being tested

Bemærk: For at benytte code covarage i VS2019 med Bank eksemplet , højreklik på 'BankTest" i "Test Explorer" og kør "Analyze Code Covarage for Selected Test"

 

Gennemgå og diskuter parvist følgende eksempler: 
TryingUnitTesting
 | Animal farm | Zoo

Løs opgaven:
Brush Up: Student + Test + Documentation 

Extra: Hackerrank.com Programmerings-konkurrencer osv etc

36

Component + unit test

Microsoft .Net Core Guide:
Build a .NET Standard library with C# and the .NET Core SDK in ...
Test a .NET Standard library with .NET Core in ...

 

Læs og afprøv følgende tutorials:
Build a .NET Standard library with C# and the .NET Core SDK in ...
Test a .NET Standard library with .NET Core in ...

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

37 HTML, CSS, Bootstrap (cdn)

HTML5/CSS3
Semantic tags:
<nav>, <section>, <article>, <footer>

Flexible box model
(-webkit)
More CSS3 Features

Rounded corners
Shadows
Gradients
Alpha (transparencies)
Animation with transitions


More HTML5
querySelectorAll
<video>, <audio>, <embed>
Geolocation

Visual Studio Code (VSCode)
Links (VSCode):
Download: https://code.visualstudio.com/
Beginner's Guide: https://channel9.msdn.com/Blogs/raw-tech/Beginners-Guide-to-VS-Code

HTML

http://www.w3schools.com/htmL/

CSS(Cascading Style Sheets)
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/css/css3_intro.asp


HTML DOM
http://www.w3schools.com/js/js_htmldom.asp
Linkedin.com/learning:  What is the DOM


Video:

Lynda.com:
http://www.lynda.com/HTML-training-tutorials/224-0.html

 

Bootstrap
Links (Bootstrap):
Bootstrap: http://getbootstrap.com/
How to add a Navigation bar to your app:
https://www.youtube.com/watch?v=23bpce-5s8I ( Bootstrap 4 Navbar Concepts )

W3Schools Responsive Web Design - The Viewport

Free themes for Bootstrap
Bootstrap CDN: http://www.bootstrapcdn.com/#bootswatch_tab

W3schools: Bootstrap get started
http://www.lynda.com/Bootstrap-training-tutorials/1421-0.html

Google
Test tool: Mobile-friendly Test



Bemærk:
Er HTMLog CSS helt nyt for dig, kunne det være en god ide at gennemgå øvelserne i følgende tutorial fra Codecademy:
https://www.codecademy.com/learn/learn-html-css

Et alternativ eller suplement til Codecademy er W3Schools:
https://www.w3schools.com/

Er du allerede bekendt med HTML/CSS - kan du evt se nærmere på LinkedIn.learning (Lynda.com), her finder du mange interessante tutorials.

Eksempler (Kode vist i klassen):
TestHTML4.zip (VSCode)
TestHTML5.zip (VSCode)
SemanticTag.zip (VSCode)
FlexibleBoxModel.zip (VSCode)
RoundedCorner.zip (VSCode)

HTML5Stuff.zip (HTML5 Media tags)
Geolocation.zip (Geolocation with simple HTML5 and Google Maps API)

 

Opgave:
MyFirstMovies - HTML/CSS

 

 

Opgave: (LinkedIn Learning / Lynda.com)
Bootstrap 4: Essential Training with Ray Villalobos
Watch the video, redo the demonstrated stuff and do the Challenge.

Eksempler (Kode vist i klassen):
Bootstrap4Test.zip (Bootstrap 4 - VSCode)
BootstrapLynda.zip(VSCode)

38.1

Bootstrap fortsat, JavaScript, TypeScript

Linkedin/learning:
Morten Rand-Hendriksen: JavaScript Essential Training (video)

Anders Hejlsberg: Introducing TypeScript

Anders Hejlsberg: What's new in Typescript

TypeScript in 5 Minutes

Anders Børjesson Intro to TypeScript (PowerPoint)
TypeScript
  1. Basic Types
  2. Variable Declarations
  3. Functions (only the sections Introduction + Functions)
  4. Iterations and Generators


Linkedin/learning:
Jess Chadwick TypeScript Essential Training (video)

 

 

 



Exercise:
Bootstrap makeover (af eksisterende side)


Exercise:
 (Install: Node + npm, Git and TypeScript)
Install Node + npm (download: https://nodejs.org/en/)
Verify that it works by running: node -v (version 12.18.3 pr 14.09.2020)

Install Git (download: https://git-scm.com/)
Verify that it works by running: git --version (version 2.28.0 pr 14.09.2020)

Install the TypeScript compiler globally by issuing:
npm install -g typescript
Verify the compiler works by running
tsc -v (version 4.0.2 pr 14.09.2020)

Install the extension TSLint to Visual Studio Code
TSLint will help you write good (and human readable) TypeScript programs.


Exercise: (Typescript)
Exercise1-TypeScript.html
Exercise2-TypeScript.html


Solutions:

Exercise1-TypeScript.zip
Exercise2-TypeScript.zip

38.2 Vue.js

What is Vue: Introduction (video)

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

Vue Essentials Cheat Sheet, specially page 1

Exersice: (Vue.js)
Gennemgå Intro to Vue.js og løs diverse Challenge

 

Eksempler (Kode vist i klassen):
VueIntroduction.zip

39

Vue.js (fortsat)
Git / GitHub
Node, npm
Webpack 4


GitHub:
Hello World Guide
Understanding the GitHub flow

Webpack 4: https://webpack.js.org/
What is Webpack?
Webpack, a brief introduction to som files ...
What is npm?

Eksempler (Kode vist i klassen):
TypescriptSayHelloVue.zip
TypescriptVueExample.zip
TypescriptEventHandlingVue.zip
Bemærk: for at køre ovenstående eksempler, skal du først køre 'npm install' og 'npm run watch' fra projekt-mappen (jf nedenstående guide)

 

Når du skal lave TypeScript/VueJS-projekter så følg følgende guideline:

  • Open your terminal window (Command prompt) with CMD
  • In the command line go into the folder with your TS-projects (or make one)
  • Clone (using git) the WebPack template
    In the commandline type:
    git clone https://github.com/andersbor/Webpack-template.git 'name-of-your-project'
  • In the command line go into the new folder: 'name-of-your-project'
  • Run “npm install” to get the necessary modules.
  • Run “ code .” to start Visual Studio Code
  • Run “npm run watch” to ask WebPack to monitor and transpile your file.


Exercise:
 (Typescript)
Collect words
Calculator

Hint: Use Chrome Dev Tools to monitor your application, specially the Console
In Chrome type Ctrl+Shift+J

 

Upload your web applications to Microsoft Azure. Help!


Solutions:
CollectWords.zip
Calculator.zip

40

TypeScript: DOM, Pong Game

TypeScript: Consume REST (Axios),
promises

Første obligatoriske opgave

TypeScript

  1. Classes
  2. Interfaces
  3. Namespaces (export + import)


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. Extra: GitHub offers a REST API. Try it. How to display the data?

 

Eksempler (Kode vist i klassen):
Dom Manipulation (Ekstra - TS uden Vue)
Pong Game (Ekstra - TS uden Vue)
TypeScriptObjectCarousel (Ekstra - TS uden Vue)


Exercise:
 (Ekstra - TS uden Vue)
Make changes to the Pong Game
Make changes to the Object Carousel


Eksempler (Kode vist i klassen):

  1. My First REST (consuming a simple REST service from TypeScript using Axios)
  2. General REST consumer
  3. REST GET example (Vue Posts)
  4. REST GET, DELETE, POST example (Vue Cars) | REST service provider
  5. General REST consumer
  6. Extra: Generic Table
  7. List + detail
  8. Calculator REST (REST POST)


Exercise:
 (TypeScript, Axios)

  1. Go through Getting Started with Axios
    This is a JavaScript tutorial. You should convert to TypeScript.
  2. Consume the REST services you made in TEK class
    Like the Customer service
  3. High score list for Pong-like game (use REST service)
  4. Object Carousel, make it work with JSON

 

Bunden opgave (SemesterOpgave.zip)
Løsning opg1 (FanOutput.zip)

41 TypeScript: Consume REST (Axios, continue)

 

 

Anders Børjesson Uploading HTML, CSS and JavaScript to Azure using FTP

Bemærk:
For at kunne benytte de nye async/await fra JavaScript version: ES2018 skal tsconfig.json opdateres så "target" property ændres fra "es5" til "es2018".

TypescriptMyFirstRest.zip
(Opdateret version med ES2018, async/await)
AxiosDemo.zip (TS-løsning til Exercise 1 - TypeScript, Axios, med async/await)
VueToDoAxios.zip
(Vue-løsning til Exercise 1 - Vue,TypeScript, Axios, med async/await ) Nyt!

 

42 Efterårsferie  
43 Ingen UV i Programmering  
44 Selenium WebDriver GUI Test

Selenium
Unit testing Web applications (Power Point)
SeleniumHQ

A note on pair programming, including remote pair programming.

Eksempler (Kode vist i klassen):
CalculatorSeleniumTest.zip (Selenium WebDriver + MSTest)
CalculatorV2.zip

Bemærk: Før du kører CalculatorSeleniumTest, skal CalculatorV2 unzippes, åbnes i VSCode og installeres (nmp install) og køres (npm run watch)


Løsning til Semesteropgaven (opgave 1)
FanOutput.zip

 

 

Exercise: (UI Testing med Selenium + Azure deployment)
Hvis du ikke har prøvet at uploade et HTML projekt til Azure, så prøv Collect Word el Calculator (se evt:  Uploading HTML, CSS and JavaScript to Azure using FTP)

Lav en UI Test af Collect Word / Calculator med Selenium WebDriver og MSTest


Exercise: (Pair-programming)
REST + TypeScript from user stories (pair programming)

45-46

Sammenhæng: DB, REST, TypeScript
Python, Rasberry Pi, SenseHat


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)



Exercise: (Pair-programming)
  1. Disco and Christmas lights 
  2. Show temperature, humidity or pressure on the display using (very) simple graphs or digits.
  3. Play with some of the examples from W3Schools Python
  4. Simple Python (no Sense HAT): Download interpreter + write code in Notepad
  5. 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"

46

Mandag d. 9/11 kl. 9.00-13.00++ :
MOCK Eksamen 1 (Prog/Tek)

 
47

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)

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)

  1. Sensing the environment 
  2. Ball control | solution (joystick) + solution (orientation)
  3. Show the Pi’s IP address on the LED display
  4. Read data and send UDP broardcast
  5. Use the emulator to program Python

 

 

 

48-50 Projektarbejde
FR 14:00 code freeze
   
51

Mock exam 2 (Tek/Prog)
FR demo dag

 
2-4 Spørgetime:
Eksamen:

Pensumliste