Homework <<
Previous Next >> Git
Topics
w1:
https://mde.tw/w1 for 1a
利用 Codespaces 維護 Github Pages 網站內容
利用 portable_2026 可攜系統維護 Github Pages 網站內容
透過 Token 取得維護權限
y:\home_ipv6\.gitconfig 中設定
[http "https://github.com"]
sslVerify = false
表示當採 https 連線到 github.com 時，停用 SSL 憑證驗證，雖然方便，但若透過公眾網路上網，將會暴露在中間人攻擊(MITM)的風險。
或者
git config --global http.sslCAInfo "y:\PortableGit\usr\ssl\certs\ca-bundle.crt"
啟用 SSL 憑證驗證。
https://41423299.github.io/w1 for 1b
利用 Codespaces 維護 Github Pages 網站內容
Take Home 問題: 近端維護 Github Pages 網站時，有哪兩種管理權限驗證方式?
w2:
開始透過 https://mde.tw/cp2025/content/Robot_ex.html 學習 Python 程式語法。
當了解如何控制機器人直行之後，若又對機器人加了一個左轉的功能 - turn_left()，機器人是否已經可以在平面場區中自由行動。
假如又知道機器人在創始階段，是透過 World(10, 10) 方法，建立一個 10 x 10 的平面場區，那麼場景範圍應該可以自由控制大小。
接下來，請結合上述資訊，修改控制機器人直行程式，讓機器人的足跡踏遍 10 x 10 場區的每一格。
這樣，也能完成踏遍 20 x 20 場區的每一格嗎?
Python 基本語法: Python essential (只能在校網擷取)
應用函式定義與 for 重複迴圈，可以導引機器人在 20x20 的場景中走過每一格。
利用上列程式，再設定繞行所有網格的程式為 walk_all_grid() 函式，可以適用不同大小的網格場景行走。
程式練習: 上面的機器人行走範例，採水平路線行走，請各分組學員設法修改為採垂直路線繞行所有網格的版本。
1b w2_1.py
問題: 不知道您有沒有注意到，上面的網格尺寸都是整數，因此走過每一格，以及行走的程式都不會造成問題，
但若網格的尺寸不是整數而是奇數 (例如: 利用先前設計行走 11x11 網格)，應該如何修改? 目標是無論 size 是整數或是奇數，無論是水平或垂直繞行，機器人都要能順利完成繞行經過每一格的任務。
w3: Python 程式語法學習
利用 https://github.com/scrum-1/respysive-slide 製作簡報，設法可以多人採分散式版次管理流程製作協同專案的線上簡報內容。
讓簡報製作就像寫 Python 程式一樣，可以分散式協同，方便非同步內容管理與合併，可以直接在線上進行簡報。
w4: 機電系統設計，其實是一連串的數學解題與程式設計。
電腦輔助機械設計套件（Computer-Aided Mechanical Design Package），本質上是一種結合數學建模、工程物理、計算模擬與資訊技術的工具，主要目的是幫助工程師在數位空間中完成設計、分析與製造準備工作。
電腦輔助機械設計套件的本質是透過電腦建模與模擬技術，把機械工程師的設計概念數位化，並透過虛擬工具進行驗證與最佳化。
這些結合數學幾何模型與計算機程式的工具，讓工程師能夠 1) 在虛擬空間中繪製零件與組件 2) 模擬材料與力學行為 3) 取得最佳化設計參數 4) 快速修改與試驗不同方案 5) 避免昂貴的實體原型開發與測試。
設計案例: Plotter，Openduck
機器人行走模擬程式，存為程式模組之後，利用向量運算控制機器人行進方向
若直接在瀏覽器中執行較密集運算時，瀏覽器回覆執行速度過慢時，該如何處理?
w5-w12: 深入理解機器人行走模擬程式中的所有 Python 與 Brython 程式用法。
Prompt:
請針對 from browser import document, html, timer, bind 中導入的物件各舉 10 個案例詳細說明。
請詳細說明以下程式各行的用法: (隨後將程式碼附上)
說明如何將 Brython 程式直接放入網頁中執行。
接著將機器人行走模擬程式存為程式模組之後，利用向量運算控制機器人行進方向，或進行其他應用。
後續應用 Prompt:
利用以下的 Brython 機器人在格點中行走的模擬程式作為模組, 存為 robot_lib.py 之後, 請利用 import robot_lib 作為開端，舉八個可以用來學習演算法的典型範例，請注意這是 Brython, 因此可能無法進行密集的運算，因此另外再舉五個可以結合此 robot_lib.py 作為模組 import，但是卻利用與遠端 Flask 程式結合運算的案例，讓 Brython 負責前端的動態模擬，較為複雜的運算則透過 ajax 或其他方法，將運算送到 Server 運算後，有 Brython 前端程式負責模擬: (接著將 robot_lib.py 程式碼貼上)
十個學習演算法的典型範例:
一、隨機漫遊 (Random Walk)
讓機器人進行隨機行走，學習如何實現隨機選擇方向，並處理邊界條件。
二、迷宮尋路 (Maze Solving)
讓機器人在一個包含牆壁的地圖中尋找最短路徑，可以使用 A* 算法或深度優先搜尋 (DFS) 算法。
三、最短路徑搜尋 (Shortest Path Search)
給定一個有障礙物的地圖，讓機器人找到從起點到終點的最短路徑。可以學習使用 Dijkstra 演算法或 A* 演算法。
四、巡邏模式 (Patrolling)
讓機器人自動巡邏一個指定區域，並根據一定規則改變方向，學習簡單的自動化模式。
五、物品拾取與放置 (Pickup and Place)
讓機器人在地圖中尋找物品並將其放置到指定位置，學習如何控制機器人的移動與狀態轉換。
六、避障 (Obstacle Avoidance)
讓機器人避開障礙物，學習如何根據傳感器數據進行即時決策，避免碰撞。
七、圍繞物體行走 (Object Circling)
讓機器人圍繞地圖中的某個物體行走，學習如何調整其行為以保持固定的圓形路徑。
八、邊界探索 (Boundary Exploration)
讓機器人沿著邊界走，並學習如何使用循環條件處理邊界情況。(探索一圈後停止)
五個結合 Flask 程式的運算案例:
Brython 的運算能力有限，複雜的計算可交給後端 Flask 處理，前端用於動態顯示模擬。以下是五個結合 Flask 與 Brython 的範例：
一、迷宮生成與尋路
描述: 在 Flask 後端生成一個隨機迷宮，並使用 A* 或 Dijkstra 算法尋找最短路徑。前端使用 Brython 顯示迷宮與路徑。
流程:
使用 Flask 生成迷宮並計算最短路徑。
Flask 將結果回傳給前端。
Brython 使用動畫展示機器人如何行走。
二、多機器人協作 (Multi-Robot Collaboration)
描述: 使用 Flask 後端控制多個機器人的協作，並根據任務分配給各個機器人。在 Brython 前端展示機器人的動態協作。
流程:
前端傳送多個機器人的初始位置和任務。
Flask 計算每個機器人的路徑和協作策略。
Brython 以動畫形式展示機器人的動態協作。
三、物品搜尋與物品移動
描述: 機器人在地圖中搜尋物品，並將其搬移到指定位置。所有搜尋演算法（如深度優先搜尋、廣度優先搜尋）在 Flask 後端運算。
流程:
Flask 計算搜尋路徑與搬移策略。
Brython 顯示動態模擬，並控制機器人移動。
四、機器人學習與自適應控制
描述: 在 Flask 後端實現強化學習或 Q-learning 演算法，讓機器人學習如何在環境中尋找最優策略。
流程:
機器人根據前端操作回傳其行為與環境狀態。
Flask 訓練機器人並返回最優行為。
Brython 實時更新機器人的動作。
五、環境變化中的最優路徑規劃
描述: 當地圖中有障礙物或其他變化時，機器人需要動態調整路徑。所有路徑規劃的計算在 Flask 後端完成，前端展示機器人的調整過程。
流程:
Flask 接收環境變化訊息，重新計算最優路徑。
Brython 以動畫方式展示機器人根據新的路徑進行調整。
電腦輔助設計室電腦硬體與網路使用介紹
C: 為 SSD，網路協定可以自行決定使用 IPv4 或 IPv6 (若使用純 IPv6 則必須設定 Proxy 才能連結到 github.com 以及僅支援 IPv4 協定的網站)
Teams 線上教學:
以 "學號@nfu.edu.tw" 登入 https://login.microsoftonline.com/ Office 365
Teams 團隊代碼: w87x8do
下載可攜程式套件:
portable_2026.7z (387MB)
解開壓縮後，雙點擊 start_miniconda3.bat 啟動可攜系統，雙點擊 stop.bat 關閉可攜系統。
可攜系統啟動後，在命令列執行 conda activate y:\envs\cmsimde 可進入能執行 CMSiMDE 的環境。
若希望可攜系統啟動直接進入 cmsimde 環境，可將 start_miniconda3.bat 檔案中第 98 行: call "%CONDA_ROOT%\Scripts\activate.bat" %ENV_NAME% 更換為 call "%CONDA_ROOT%\Scripts\activate.bat" %Disk%:\envs\cmsimde。
各學員自行建立 Github 帳號
說明如何建立分組倉儲 Template
學習如何開啟可攜套件、關閉可攜套件
利用 Python 執行設計運算及維護倉儲與網站內容
Windows Batch file 與 Powershell 應用
Github Classroom 上的分組網站: https://github.com/mdecp2025
Github Classroom 是一套 Web based 工具，功能在於簡化採用 Github 倉儲進行教學與協同分組的工作
各組組長建立 Github Classroom 分組團隊，各組取得分組倉儲
學習如何在近端電腦與 Codespaces 上維護分組倉儲內容
近端: Github Token 與 SSH (Putty、Registry (中文版、英文版)應用)
利用 Reeborg 學習 Python 基本語法
計算機程式課程主題總覽
課程簡介
本課程以實作為導向，循序漸進學習 Python、JavaScript、HTML、CSS 等現代網頁與程式語言，最終應用於類 Reeborg 機器人程式開發。內容設計結合理論與實作，強調程式邏輯、問題解決與跨語言應用能力。
- 從零基礎學習程式語言的基本結構與語法
- 掌握網頁技術，為互動式機器人程式設計打下基礎
- 專題實作，應用於 Reeborg’s World 機器人操作與挑戰任務
課程主題與詳細內容
1. Python 基礎與 Reeborg 機器人程式設計
- Python 語言簡介： 特色、應用領域、開發環境介紹
- 基本語法： 變數、資料型態、運算子、輸入與輸出
- 流程控制： 條件判斷 (
if, elif, else)、迴圈 (while, for)
- 函式與模組： 函式定義與呼叫、自訂功能、模組導入
- Reeborg’s World 操作：
- 基本指令 (
move(), turn_left(), take(), put())
- 感測器判斷 (
front_is_clear(), wall_in_front(), object_here(), at_goal())
- 將 Python 程式邏輯應用於控制機器人走迷宮、撿物、解任務
- 實作練習： 關卡挑戰、流程規劃、錯誤偵錯與修正
2. JavaScript 程式設計基礎
- JavaScript 角色： 前端網頁互動語言，與 Python 差異與應用
- 基本語法： 變數 (
let, const)、資料型態、運算子、輸出 (console.log())
- 流程控制： 條件 (
if, else)、迴圈 (for, while)
- 函式與 ES6 新語法： 函式宣告、箭頭函式 (
() => {})
- 陣列與物件： 基本操作、方法應用
- 與網頁互動： 認識 DOM、事件處理等（為後續進階鋪路）
- 小專題： 建立簡單計算機或互動網頁按鈕
3. HTML 基礎 - 建構網頁內容
- HTML 結構： 了解
<html>, <head>, <body> 等標籤
- 常用標籤：
<h1>~<h6> 標題、<p> 段落、<a> 連結、<img> 圖片、<ul>/<ol> 列表、<table> 表格
- 表單與輸入：
<form>, <input>, <button> 等
- 結構化分區：
<div>, <span>, <section>, <nav> 等
- 專案實作： 製作個人簡歷網頁、Reeborg 世界說明頁等
4. CSS 樣式設計 - 美化網頁版面
- CSS 基本語法： 選擇器、屬性、值的語法結構
- 常用樣式： 顏色 (
color、background)、字型 (font-size、font-family)、邊框 (border), 間距 (margin, padding)
- 版面配置：
display、flex、grid 基礎
- RWD 響應式設計： 讓你的網頁適合不同裝置
- CSS 與 HTML 整合： 內嵌樣式、內部樣式表、外部 CSS 檔案
- 美化 Reeborg 機器人專案網頁： 實作練習
5. 綜合應用 - Reeborg 機器人專案開發
- 專案規劃與團隊合作： 需求分析、分工合作
- 跨語言整合： 利用 Python 控制邏輯、JavaScript 增強互動、HTML/CSS 展示結果
- 打造專屬 Reeborg 世界： 設計自訂任務與挑戰
- 成果展示： 發表與互評，分享學習心得
學習建議與資源
Homework <<
Previous Next >> Git