ASP.NET Core 6 Blazor App Workshop - Instructor Live Readme

asp_dotnet_blazor_workshop_live.md

ASP.NET Core 6 Blazor App Workshop - Instructor Live Readme

Live workshop notes and flow are below. Use this as a reference day of the workshop to make sure you hit all the main points.

Introduction

Explain application here

Developer Setup

1. Setup Developer Workspace (30min)

   • Fork my repo
   • Use github editor and change devfile.yaml file to change origin: "https://github.com/jkeam/todolist.git" to their new fork (must be all lowercase)
   • Open up DevSpaces URL using the launcher in the upper right
   • Use new repo url
   • Wait for it to load up - in the meantime, go over next section, Devfile

2. Devfile

   • Open devfile
   • What it is, why is it
   • Go over main sections, environment, etc.
   • Blocked here until workspace is up

3. Devspace Pod

   • Navigate to pod and show containers
   • Pay attention to dotnet, adminer, and mssql

4. Database (15 min)

   • Select mssql container
   • Show side by side with devfile
     • Ports
     • Mounted volumes
     • Env vars

5. Adminer (15 min)

   • Show it in devfile
   • Crash course on how to use it with their live database
   • Validate no data there

6. Run App from OCP Dev Spaces (30 min)

   • Restore
   • Build
   • Test
   • Migrate
   • Verify db created in database with adminer
   • Run app, click "open in new tab"
   • Create TODO
   • Refresh adminer
   • Mark as done
   • Refresh adminer

Should be an hour and a half gone so far. Break: 20min

Code

Intro

1. Change h1 title in Index.razor and see live reload (5 min)

2. Coding Challenge I: Need to add validation for todos, no less than 3 chars and no more than 50 (Give them 15 min, then I take 15 min to code it for them -- 30min)

   • Test first! (TDD -- add this as a gist)
     • Write it in real time for them, both tests
     • Give attendees gist
   • Add validation rule - give them 15 min
     • Hints
       • https://docs.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.stringlengthattribute?view=net-6.0
       • https://seanmccammon.com/validating-string-length-in-the-model/
     • Answer: [StringLength(50, MinimumLength = 3)]
   • See test pass

3. Check code in together (15 min)

   • Set up Github token through Github UI (Settings/Developer settings)
   • Create secret
   • Restart workspace
   • In DevSpaces, set git email and username (in Preferences search for git user)
   • Stage
   • Commit
   • Push
   • Validate it was pushed into Github

Should be about an hour gone in this section. Break: 20min

Challenge

1. Coding Challenge II: Button to delete todo (Give them 30 min, then I take 30 min to code it for them -- 1hr) Purpose: Want them to get used to and comfortable on the IDE and actually developing on OpenShift (cloud-native dev)
   • Give them 30 min
   • Create button
   • Write failing test
   • Implement functionality
   • See passing test

Should be about an hour gone in this section. Break: 20min

Teardown

1. Teardown and destroy everything

   • Destroy workspace

2. Summary (15 min)

   • Cloud native dev!
   • All code located securely on VA network
   • Able to leverage cloud resources, so can develop literally on a chromebook/netbook
   • Can stand up whole stack, as needed
   • Support variety of languages not just .Net
   • Standarized developer toolchain
   • Same operating env as production

Should be about half an hour gone in this section. Done!

Gotchas

1. Enter in Git repo they own, remember to use lowercase

https://github.com/jkeam/todolist.git and not https://github.com/jkeam/TodoList.git