NTU Web Programming (2025_09) – 01_ Introduction to Web Programming (Part 2)
使用 AI 工具建立前端應用程式
我已經截圖好了，現在就到 cursor 這邊來。我不是使用複製貼上，雖然複製貼上最方便，但我剛剛是截圖。沒關係，我會上傳一個檔案，就是這張圖給 AI。接著，我會輸入我的 prompt。
撰寫詳細的 Prompt
這個 prompt 寫了什麼呢？我告訴 AI：
- 使用三種語言：幫我用這三種語言，做一個純前端的 app。
- 簡化需求：我不希望有後端。通常 todo web 應用程式可能會有後端，但我想要簡化一點，所以只做純前端。
- 指定目錄名稱：這個專案會幫我開一個新的目錄，名稱叫 todo-js。
- 避免框架：我跟 AI 說不要套用這些框架，因為我想要純前端，就簡單用 JavaScript 就好。
* 其實這句話多講了，因為這樣做完之後，它其實不會用任何套件。不過我 just in case 有套件，我請它用 yarn 來管理。
- 解釋畫面元素：我會向 AI 解釋畫面是什麼意思。底下這部分就是在解釋畫面：
* 新待辦事項輸入框：包含 new todo 作為文字框，可以輸入新的 todo 名稱。 * 預設待辦事項：最下面是，大家可以看到我一開始會有兩個 default 的 todo，所以要跟它講說，這個是一開始就有的。 * 避免捲動問題：另外我也告訴它不要捲動 (scroll)。這是我個人的應用習慣，就是當我的 todo 越加越多時，會超過畫面。預設情況下，整個畫面會往上捲動，然後 todo list 這個東西就不見了。 * 保持輸入框可見：我不希望輸入框不見。如果你沒跟 AI 講，它到時候做出來，它不見了會處理這件事情，你就會覺得它很笨，其實是你沒講清楚。 * 指定捲動行為：所以我就跟它說，這個東西如果超過的話，不要自己捲動，就它自己捲動就好了，上方的這個東西不要隨著捲動。 * 預設項目：預設就是這兩個 todo item。 * 右側小方框：我跟它講一下，右邊的小方框可以用來複選。雖然現在沒什麼用，這個未來可以用來 filter 或是當作完成之類的。 * 目前無功能：可是目前我沒有給它這個功能，我說目前沒有功能，不用雞婆幫我做什麼功能。 * 刪除按鈕：右邊的是刪除 (delete)。 * 直接刪除：刪除就直接刪掉不用詢問。這也是要講清楚，因為如果你期待的是沒有詢問，它可能按下去之後會跳出一個 pop up。如果你不要的話，你就不要跟它講。 * 新增待辦事項效果：這個畫面看不出來，但我跟它講說，按下去之後它會有這個 declusion，而且 declusion 是直接在下方出來。這是畫面看不到的，所以你要跟它講。 * 重新開啟行為：重新開啟 app，因為它是純前端，所以比如說我現在重新載入 (reload)，它就回到剛剛的一開始的兩個 todo1 跟 todo2 畫面。
- Git 管理：我請它幫我加上 git 的管理。
AI 的生成過程與結果
直接複製下來，然後把它貼上來，enter 就出去了。它是 auto mode，確定沒有寫錯。這邊字有點小，可以讓大家看看。
可以看到它就開始自言自語了，它會弄個 todo list。然後根據它自己分析我的 prompt 之後，它做了一個 todo list。它決定要初始化目錄和檔案，創建這個，todo 不見了，反正第二件事是創建 HTML。
所以我們就可以看一下，你看它把目錄建好了，那我們可以隨時看 HTML 寫好了。它的兩個 todo 是寫在這邊的，大家等一下會看到它理論上應該會不見。CSS 也寫好了，這是用來控制我的整個網頁的 style，就是外觀的。
它現在會幫我去完成這個動態互動的部分。你想人怎麼可能寫那麼快？打字速度再快也沒那麼快。所以我覺得人類就不要掙扎了，這種動作就是交給 AI 做就好了。
它現在做完，它現在檢查它到底有沒有做錯，也幫我檢查有沒有 linting error。它現在做完了，它還幫我寫了一個 readme，告訴我它做了什麼。它已經做完了。
檢視與調整 AI 產出的應用程式
它告訴我怎麼去用，用完就打開這個網頁就可以。它是一個靜態網頁，就打開這個，就點，就打開這個。我們來看它到底產生什麼。跟這個還蠻像的，就做好了。
這是剛剛做的，跟我之前做的還蠻像的。它是響應式 (responsive) 的，我是把它放大它下面不會爛掉。我剛剛是按把螢幕放大這樣。然後 2，2，3，這邊隨便寫個東西，enter。有點醜，這個就不能接受了。這個可能就要叫它等一下改一下，像我之前一樣就比較好。我就不示範改了，就可以跟它說你這個有點醜，就解讀跟它說這個應該放在下面之類的，那就幫它改好了。
AI 真的可以做很多類似這種難度的東西，你可以真的坐在海邊跟它做。
AI 在其他應用上的潛力
還有什麼東西其實 bytecoding 其實可以做得很好的？我剛剛開了一兩個簡單大家可能比較可以看得懂的東西在這邊，這個不見得都會示範。
案例一：小蜜蜂遊戲
不過這個開個聲音，這是一個很簡單，我小時候的遊戲叫小蜜蜂。它可能看不進去子彈，它有子彈掉下來。總之它就是要設置一個記錄分析，讓它死。像這個我大概就跟它溝通幾次之後，畫面才好看一點就好，就可以重新開始，還有聲音。這聲音是什麼？大家不知道可不可以聽到的聲音。
這個怎麼做大家知道嗎？這個我就要上網去這個遊戲的一段影片，我直接把那個影片貼上去給它，就幫我做這個影片，根據這個影片做一個這樣的遊戲。我當然有描述一下我期待的是什麼，就來回幾次就修好了。
案例二：五子棋遊戲
像五子棋，這個真的是 one shot 就可以做好了。這個就是你可以跟著下，我知道這樣很笨，不過讓它死，稍微來點變化。One shot 是做好這個東西，後面的彩帶是我後面多跟它講的，我並沒有一開始就想要有彩帶。不過這東西都是真的你跟它講就可以寫好的東西，所以大家有沒有覺得人類不知道在掙扎什麼？
像這種程度的東西它真的就是我有計時，就是十分鐘內就可以寫好。那大家可以看到我上次運氣比較好，那 one shot 就完全做對了。
調整 AI 產出的細節
剛才這個我覺得它這個不 ok，所以你可以跟它講說我叫你的下面應該是，所以你要跟它講。所以你有沒有覺得它的按鈕什麼都跟我給它的其實是很像的？當然圓的弧度不一樣。你可以跟它說你幫我稍微圓一點點之類的，都可以這樣修改。
我覺得今天的時間後面有關於程式的部分，我就沒時間講，那我們就下次講。
課程作業說明
我們現在有幾分鐘時間跟大家講一下作業。下面這個歡迎大家稍微自己看一下，包含了我在這邊很仔細地跟大家解釋。
程式語言基礎
我前面會先跟大家講比如說 HTML 語法是什麼，那我也會跟大家講 JavaScript 它的一些語法。這些其實都是精華，大家也許花點力氣看懂，那我都有舉例子，你可以看一下。那只是沒有時間跟大家示範跟講。
接下來講 CSS 的語法跟例子。這些大家都不用在作業一二可能都不用自己寫，我會自己幫大家弄好，只是你要看懂它寫什麼。那看懂我在最後面會跟大家去解釋它的 code 在寫什麼，那這個大家自己可以看一下。
我後面會讓大家去了解一下，不過剛剛已經講過了，所以這可能下次可以略過。
作業一：個人網頁製作
我們來看一下作業一。那作業一其實就是沒有什麼，那就是要大家做一個個人網頁。不過簡單的說，這個主要目的是讓大家練習用 AI tool。所以如果你本來就很熟的話，這個對你應該是非常簡單，應該是一個鐘頭內就可以交件的東西。
作業要求
- 純前端：這個作業只有純前端，也就是說你不用管後端資料庫。那只是說這件事情你要跟 AI 講，不然它可能就會幫你雞婆弄一大堆後端資料庫的東西。
- 技術棧：這個作業除了 HTML、CSS 之外，我會要求大家用 TypeScript。TypeScript 下節課才會教。
* 不過既然你不用自己寫，你就不用理它。你當然可以先叫它用 JavaScript 寫，寫完之後叫它幫你改成 TypeScript，這應該也是 one shot 就改完了。
- 框架與套件：基本上你可以利用這些做好。那你如果想要用一些框架或套件像 React 或是像這個 ShareCN 這樣一個套件上的自變，這我們以後都會教。
- 網頁風格與內容：這個作業內容是什麼？同樣是因為每個人希望的網頁風格內容都不相同，所以我不會提供大家網頁一定要做什麼。
* 參考範例：請你自己去瀏覽搜尋一個你自己喜歡的網頁風格，然後截圖會給 AI 參考。 * 描述風格：當然截圖是一個常用的方法，另外一個你也可以告訴它說，比如說你還蠻喜歡 Notion 的這個風格，你可以跟它說幫我做一個 Notion 風格的網頁，這是它真的會 follow 的。
- 網頁佈局 (Layout)：另外就是網頁的 layout。Layout 有時候用文字很難講，所以會建議大家就是畫一個圖，你可以用手畫也可以。那當然如果有用投影片或什麼做的話，你可以顏色可以自己指定一下。
* 事後調整：當然你這些都可以事後去調，不過這個你可以利用這樣去餵給 cursor。 * 動態描述：當然要加上一些描述，尤其是一些動態的部分，比如說我點擊這個可能畫面會變成什麼。這個你不要期待它完完全全可以自己幫你腦補起來，最好還是跟它講清楚這樣。
- 非程式檔案：如果有些圖片是非像圖片或是非程式的檔案，比如說你想給它一個音檔。
* 音檔處理：我剛剛漏講一個就是其他音檔，大家剛剛聽到的這些聲音，這個射擊遊戲音檔還蠻多那種 low-fi 的音效，這些都是它我就從開源下載下來或是它 synthesize 下來。 * 它現在可能聽不清楚，它有一些類似經濟戰爭的這種聲音，是它 synthesize 下來，寫在 JavaScript 裡面的。所以你這些都可以跟它溝通說我想要有一個太空感的聲音，它就會幫你創造出一個太空感。 * 版權與放置：這些都不會有版權，因為它是利用調整頻率，調整時間什麼去做出來的聲音。那它也會幫你放在適當的地方，在適當的背景幫你播放。 * 自訂音檔：所以這些都是它會幫你做好，可是如果你想要比如說網頁要放一首歌，自己唱的歌，這個音檔你要自己上傳上去，它不會自己幫你。
- 重新打造：當然如果你已經有網頁，你覺得已經沒有辦法更好，當然可以。不過還是希望你能夠適用 AI 去重新複製這樣的東西，所以你如果要想根據某一個網頁重新打造一份也很 ok，我希望你透過 AI 溝通說幫我打造這份網頁什麼時候收。
作業練習重點
這個作業練習的重點就是：
- 熟悉 AI 工具：熟悉這些 Cursor 這些 AI tool。
- 學會與 AI 溝通：學會跟 AI 溝通。
- 調整與修正：它如果出來有差距的時候，像這個狀況，像我的話，我就不會直接跟它講，當然可以直接跟它講試試看。
* 如果講完還是做不夠好，我就會跟它重做，我就會把它下面的圖畫給它看，我要的是這樣。 * 像這個簡單的東西其實跟它講應該就會做對了，比如說我就跟它講說，它可以想要怎麼跟它講。 * 比如說點擊之後這些東西的位置不能改變，所以它把我的體力移到這邊來，而且變寬，這不是我要的，所以我會跟它講清楚這件事情。 * 但你沒講它可能還是會變掉，然後我會希望描述這東西在下面，希望說到這個效果，這兩個描述還沒有出現，有點落差。我講的是像這樣。 * 這個 mouseover 換色這個東西你不用跟它講它應該都會自己做。
Readme 檔案
最後呢請你補上這個 readme，雖然它會幫你產生一個 readme，不過請你自己 refine 一下，然後自己把它修改一下。因為最主要我希望你可以講一下你的網頁設計的概念以及內容，當然這個可能 AI 都幫你寫了七八十趴了，不過希望你自己稍微修改一下。如果你懶得打字你也可以叫 AI 幫你復盤。
評分標準與同學互評
評分的話，不像每個人評分不同，所以在評分的時候請尊重同學們的設計理念。比如說有個同學的網頁設計起來太前衛了，那你不喜歡，可是請尊重人家的這種前衛感，不能因為這樣子就給它零分或很低分。
當然你的主觀的評斷，主觀的評斷還是可以的，不過我希望你評論它有沒有用心在做，而不是美觀。美觀就是可能太主觀，當然有一點點太醜了，你覺得十個人十個人都覺得太醜了，那當然還是可以給它扣一點分數這樣。所以我希望大家是以用心著作為主，就是八十趴，美觀為輔，大概二十趴。
review 的規定這邊再貼一片，不過簡單的說，請發揮同學愛啦。那當然我覺得給六分真的就是你覺得它真的做的是蠻棒的。所以我覺得五分應該是算滿分的，那如果你覺得它真的是做得太棒了，可以給六分。那當然這個部分就有三個人 review 的誤差啦，不過這也沒關係，平均起來你可能可以，如果真的做得很好，我想你拿到五點多分應該不是問題。
期末成績調整與課程提醒
最後的學期成績我們會做一個線性的調整，所以大家看到最後學期平均是 80.03。這並不是這麼剛好，而是我們調整過的。那通常都會往上調，就是因為期末的成績我們會打比較殘忍一點點，會做出拉出一個差距，所以也許大家差距不大，所以我們最後會，假設最後平均是 75 分，我會幫大家調到 80 分以上，所以大家不用擔心這件事情。那評分這個就不囉嗦了，總之不要失焦。
review 等我們一下，我們會再跟助教討論一下，去把這個 review 機制設計給大家。
好，大家有沒有問題？沒有問題，大家還有一個禮拜多的時間，下堂課也是可以再來聽一下，再來決定要不要退選或停修。再次強調就是會有五個月 Cursor Pro 的 coupon，那你如果在 10 月 26 號停修，我們應該在 10 月底就被你停用。