Hands-on AI-Assisted Development, Mechanical and Electrical track, Day 2 handouts


[Where to put this folder]

Right-click the ZIP, choose "Extract All", and extract it to the desktop.
Extracting the ZIP creates a folder named ME_Day2. Do not move the files inside it.
01_data-loader.html works by using the components in the lib folder, so
it stops working if you move only the HTML file somewhere else.


[What is included]

01_data-loader.html
　　A page for opening equipment-data_2026Q1.xlsx in the browser to view its contents.
　　When you choose a sheet, a table with Excel row numbers appears.
　　Click "Copy this table" to copy that sheet as tab-separated text.
　　Paste the copied text into the Copilot Chat input box in VS Code.
　　The 10 practice rows for the first half of the afternoon are also near the bottom of this page.

equipment-data_2026Q1.xlsx
　　The equipment data for the afternoon exercises. It has 3 sheets.
　　　Operations    Operating hours, Stops and Defects count for 8 machines
　　　Inspections   Measured size (mm) and Result for 10 lots
　　　Defects       Defect type and Count by Process
　　It keeps the kinds of mess that shop-floor files often have.
　　If you open it in Excel and save over it, the mess disappears and the exercise no longer works.
　　To view the contents, use 01_data-loader.html.

equipment-data_2026Q2.xlsx
　　Data for Q2. The sheets are the same as in Q1, with more rows: 12 machines and 20 lots.
　　The mess is a little different from Q1. Operating hours are written with 2 units, "h" and "hours",
　　and Result is written 3 ways: OK, ○ and Pass.
　　Not used in the main exercises. It is material for those who finish the Q1 exercise early, to go through the same steps again.
　　You can tell whether you have learned the steps by running them on different data.

maintenance-records_2026H1.csv
　　Records of equipment maintenance work. There are 96 records.
　　Duration is written in mixed ways, such as "90分" (Japanese for 90 min), "1.5h" and "1h 30min",
　　and the same person is written 3 ways in Assignee, such as "Yamada", "Taro Yamada" and "ﾔﾏﾀﾞ" (Yamada in half-width katakana).
　　Before you aggregate, you need to make the units and spellings consistent. This is common in shop-floor files.
　　The file also has 1 blank row and 1 exact duplicate row mixed in.

lib folder
　　Components for running the tools in the browser. No installation needed.
　　　xlsx.full.min.js    Component for reading Excel
　　　papaparse.min.js    Component for reading CSV
　　　chart.umd.js        Component for drawing charts
　　In the afternoon chart exercise, copy this chart.umd.js into your own tpro-work folder and use it there.
　　Copy it from the lib folder. If you forget to copy it, the chart stays blank.
　　The sources and licenses are in lib/README_library-sources.md.

README.txt
　　This file.


[How to open a file in the browser]

1. Open the tpro-work folder on your desktop in File Explorer (Finder on Mac)
2. Double-click 01_data-loader.html
3. The browser opens and shows a dotted box
4. Drag equipment-data_2026Q1.xlsx from the same folder and drop it into the dotted box
　 (You can drop a CSV file the same way)
5. Operations, Inspections and Defects appear. Click the one you want to see

If double-clicking opens VS Code, right-click 01_data-loader.html
and choose your browser from "Open with".
It does not work inside VS Code. Open it in the browser.

Note that the index.html and chart.html you make today are saved not in this handout folder
but in the tpro-work folder you create yourself on your desktop.
Keep the folder you receive separate from the folder you create.


[If you need help]

First, talk to the instructor. The instructor walks around the room during the course.
Contact details for outside course hours will be given on the day.

If something does not work, check these points first.
- Did you open it in VS Code instead of the browser?
- Did you move 01_data-loader.html away from the lib folder?
- Are you dragging the xlsx while it is open in Excel?
- If characters are garbled, is the browser's encoding set to UTF-8?


[Notes]

All of this data is fictional. It is not related to any real equipment, products or companies.
Do not use real data from your own work in the exercises.
Generalize client names, product names, project names and partner names to the industry or process level.

Givery, Inc.
