Hands-on AI-Assisted Development, IT track, Day 1 handouts

[Where to extract]
Extract this ZIP to your desktop and check that the folder is named tpro-work.
If the extracted folder has another tpro-work folder inside it (nested twice), move its contents up one level.
If your PC cannot write to the desktop, create tpro-work directly under your Documents folder and extract the ZIP there.
From here on, when the materials say "tpro-work on the desktop", read it as your own extraction folder.

[What is included]
worklog-app/index.html      The existing app that records 4 columns: date, category, description and hours. Open it in the morning to check it,
                            and in the afternoon have Copilot read it and add a filter and the total hours.
                            On Day 2, you design tests for the features you add today.
worklog-app/README.txt      What this app can do now and what it cannot do yet.
spec5.txt                   The 5-line spec you paste into the chat in the afternoon. Copy it from this file instead of typing it.
worklog-complete.html       The finished version of the app you build in the afternoon. Use it as a replacement if generation does not work.
                            If your app works, you do not need to open it.
lib/xlsx.full.min.js        Library that reads and writes Excel files. Used on Day 2 and later.
lib/papaparse.min.js        Library that reads CSV files. Used on Day 2 and later.
lib/chart.umd.js            Library that draws charts. Used on Day 2 and later.
README.txt                  This file.

The 3 files in lib are about 1.1 MB in total. You do not open them on Day 1.

[Files you create in this folder today]
worklog.html                      The app you build from the 5-line spec.
model-memo.txt                    Write the differences you see when you switch models, and the result of cross-checking the total.
before.txt / after.txt            Paste the answers from before and after you add the instructions file.
.github/copilot-instructions.md   Create a .github folder directly under tpro-work and put the file there.
AGENTS.md                         Only if you finish early. Put it directly under tpro-work.
None of these files are in the handouts. Create them yourself during the exercises.

[How to open a file in the browser]
1. Open the tpro-work folder in File Explorer (the Windows file manager).
2. Double-click the HTML file you want to open. It opens in your default browser.
3. If the address bar starts with file:///, the file is open correctly.
4. If double-clicking opens another app such as VS Code, right-click the file
   and choose your browser from "Open with".
5. After you edit a file, save it in VS Code (Ctrl+S), then reload the browser (F5).
   If you reload without saving, the page does not change.

[How to open the folder in VS Code]
Start VS Code, choose File > Open Folder, and select tpro-work.
Open the folder, not a single file. When you open the folder, Copilot can read the files around it.
If worklog-app and lib appear in the Explorer on the left, you have opened the right folder.

[Notes]
You do not use Python, Node.js or the command line. You do not need to install anything.
The apps do not load libraries from the internet. They load the files in lib with relative paths.
All materials are fictional. In the exercises, do not use real data or code from your work, or names of your clients.
Put all files you create today in tpro-work.

[If you need help]
On the day, the instructor and support staff are in the room. Raise your hand to call them.
The contact for questions before and after the course will be confirmed before the course starts.

Givery, Inc.
