專案批改與環境設定

有同學問了幾件事。首先，關於 QML Project，我提過我們的批改方式會分成兩種：

服務部署與金鑰管理

除了讓大家直接部署到網路版本供試用外，我們也會有一位助教將你的程式碼拉下來，在本機 (localhost) 安裝並執行。你可能還不清楚我接下來要說什麼。

如果你的服務會牽涉到第三方服務，例如你使用了 ChatGPT 的 API，那麼你應該知道使用 ChatGPT 並非隨意即可。你必須要有 API 金鑰才能呼叫其 API。因此，同學可能會擔心是否需要將金鑰告訴我。當然，這是不需要的。

未來我會告訴大家，在一個較完整的服務中，會有一個名為 .env 的環境設定檔。這個環境設定檔會儲存你所有的金鑰等機密資訊。請你在上傳到 GitHub 時，不要將這些檔案一併上傳。因為不只我，基本上所有看到你 repository 的人都能得知這些資訊。所以，屆時我們會再詳細說明。

簡單來說，屆時我們會使用我們自己的金鑰來呼叫你的服務。因此，請不要將金鑰硬編碼 (hardcode) 在你的程式碼中。這也是一種不明智的寫法，因為我一看程式碼就能知道金鑰是什麼。金鑰應該是從環境變數中讀取。我相信到了那個階段，大家應該不會犯這種低級錯誤。總之，你不用擔心。如果真的有問題，我們仍然可以私下與你約時間，設法讓你協助我們在我們的機器上運行你的服務。

本機環境重現的重要性

我認為能夠在本機重現你的服務，或者說重新安裝你的服務開發環境，是非常重要的。因為你不會希望你開發的產品，未來團隊有新人加入時，卻花了一個月都無法安裝起來。你的服務必須能夠讓新成員快速重現，這點非常重要。因此，我們一定會在 localhost 上進行批改。

課程錄影與旁聽資訊

錄影檔上傳進度

另外，有同學詢問我的錄影檔何時會上傳。我提過，這裡後面有一台錄影機。它應該是即時錄影，而且據說已經設定好會自動上傳到 臺大演講網。我猜臺大、師大、臺科大的同學應該... 其實我沒有看過，所以我不知道。所以我猜應該都有特定的方法可以存取並觀看。因此，這個應該會相當即時。

不過我剛才也提過，我其實有用我本機的 QuickTime 錄製我的演講，包含了我的畫面和收音。這個檔案我會上傳到 GitHub。我說過我會開源，所以只要有興趣的人都可以查看。雖然我事後聽到自己的聲音都會很想死，但沒辦法，我的聲音就是這樣。

有一件很有趣的事情是，你自己聽自己的聲音覺得還好，但事後聽錄影或錄音的聲音都會很想死。你會想：「我的聲音怎麼會是這樣？」我不知道，人腦好像會自動幫你補足好聽的部分，似乎是這樣。反正我已經決定了，我就是會放上去，我說過大家有興趣可以看。至於這個版本何時放上去，可能會稍微延遲一下，因為我需要整理、上傳等等。雖然這也是一個小時內就能完成的事情，但對我來說，這個優先級不見得是最高的。所以大家還是盡量來課堂上課。當然，課堂上不能快轉，如果你覺得這樣學習很痛苦，我會尊重你。你不來上課也沒問題，不過這會牽涉到另一個問題：

旁聽與出席率考量

剛才有旁聽的同學來問我，旁聽的是否一定只能線上，課堂有空位是否可以來。根據我的經驗，臺大學生的課程出席率很難超過 50%，尤其這門課有錄影。我覺得有 20% 就很不錯了。這個教室應該有 180 還是 100 多個座位。所以除非這門課有上千人修，否則我覺得座位不會滿。當然，修課人數好像還沒有突破 300，剛才查只有 170 幾人，所以我想應該不會有問題。我覺得旁聽的同學就可以過來旁聽，應該會有座位。因為我相信很多修課同學會寧願在家裡睡覺，然後之後再看影片。我沒有說這樣不好，我只是覺得這是事實，所以大家不用擔心。

第一單元內容概覽

好的，閒話說完，我們開始介紹第一個單元。第一個單元會很快讓大家了解我們會教什麼。

課程核心技術介紹

1. Todo 範例示範：首先，我們會用一個非常簡單的 Todo 範例 來示範如何使用 Cursor 寫出程式。
2. Web Service 基礎：接著，我們會從各個角度說明如何實現這項功能，以及其背後的程式碼與技術，讓大家快速了解 Web Service，例如什麼是前端 (frontend)，什麼是後端 (backend)。
3. AI 輔助開發：然後我們會快速檢視 AI 到底幫你寫了什麼東西。
4. 核心網頁技術：接著，我們會開始教授我們將使用的三項技術：HTML、JavaScript 和 CSS。
5. DOM 概念：在教學過程中，我們會穿插 DOM (Document Object Model) 的概念。這個概念是一項非常基本的技術，能讓大家動態地改變網頁內容。

之後會再仔細檢視我的 Prompt 和程式碼，作為本單元的結尾。

作業一：個人網頁

最後是 作業一，內容是撰寫一個個人網頁，非常簡單。你不用擔心，最後我會保留兩三分鐘向大家解釋。

Cursor 示範：Todo App 實作

好的，那我們就開始。第一個示範是讓大家先做一個 todo.app.example。如果你已經有 Cursor 或已經下載過，就可以同步試試看。還沒試過的，我覺得你聽就好。

預期畫面與 Cursor 的一鍵生成能力

我們會請 AI 協助，我會提供它一個這樣的畫面。這是我心中期待的畫面。你應該能理解，這個畫面完全可以用投影片製作出來，不需要寫程式碼。有了這樣的畫面之後，我們來試試看使用 Cursor。因為我自己的 Cursor 幫我 一次性生成 (one-shot)。我什麼程式碼都沒寫，它就幫我做了一個版本。這是真的可以操作的，是真的有功能的，可以使用的，可以刪除。一次性生成就完成了。

我那天正好心情不錯，因為我開車 45 分鐘跑到八斗子海邊去完成這件事。順便記錄一下 即時編碼 (live coding)，我老婆也陪我去了。那我們就可以用輕鬆的心情來做這件事情。

Cursor 操作環境設定

首先，打開 Cursor。請允許我現場示範一下。第一件事是在適當的地方建立一個目錄，當然你隨意。我今天會建立一個 example 目錄，因為我之前建過，等一下我會建立另一個目錄。Cursor 長這樣。你可以看到我開新視窗，然後我開一個新的東西。我這邊請你在適當的地方建立一個目錄。然後我等一下會讓 Cursor 打開這個地方。那我就在這個地方直接建立一個名為 DEMO 的新目錄。我等一下就會在這裡。你應該可以看到，這裡當然是空的，證明沒有詐騙。

好的，我們就來試試看。那我就開啟一個專案 (project)。這個專案就可以打開我剛才建立的那個目錄。打開後，當然是空的。

Cursor 介面導覽

好的，我們回到講義。開啟專案後，你會看到這樣一個畫面。動作很像，它其實分成三個部分：

1. 目錄與檔案區：第一部分是你的目錄與檔案區。當然，現在沒有東西。不過我們來看一下我剛才先前在海邊寫好的這個東西。所以你可以看到它的目錄和檔案在這裡。應該跟大家一般的 檔案瀏覽器 (file browser) 很像，所以應該沒有什麼學習門檻。
2. 程式碼區：中間這塊是你的程式碼區。這個程式碼目前當然沒有東西。屆時你就會看到你的程式碼，點選不同的檔案，程式碼就會顯示在這裡。
3. 輸出與終端機區：現在這裡有一個區域，它會作為你的輸出 (output) 或終端機 (terminal)，也就是你的輸出部分。它也可以作為終端機。終端機就是大家可以看到我剛才在... 如果你不知道什麼是終端機，可能需要稍微了解一下。終端機就是你可以直接下指令與電腦溝通的地方。就像這個是我的目錄。你至少要知道有終端機這個東西。如果你不知道怎麼開啟終端機，沒關係，因為這裡下方就有。這個功能可以從右上角找到，那裡有三個按鈕：左邊、中間、右邊。中間這個按鈕可以開啟或關閉這個區域，你把它打開就好。等一下我會在這裡示範如何讓 Cursor 執行任務。
4. AI 聊天室：最右邊這裡是用來與 AI 聊天的地方，也就是聊天室。這裡有點小。不過沒關係，我等一下會直接貼上去，你不需要完全看清楚。我就會在這裡直接與 AI 聊天，這樣就可以了。

AI 模型與模式選擇

好的，如果你有 Cursor，可以打開右上角。右上角這裡有兩個地方需要你注意。

AI 模型選項

第一個是這裡的一個功能，它可以在這裡選取不同的 模式 (Mode)。你可以看到，我先把 Max Mode 關掉好了。它這裡可以選取各種 AI 模型 (Model)。原則上，Claude 是 Anthropic 的模型，它現在被認為是生成程式碼最厲害的 AI 模型。它也有 xAI 的 Grok。這可以在設定中進行調整。設定中可以選擇各種模型。所以你可以點選之後，它支援這些模型，包含了 DeepSeek 等等。你可以在這裡直接點選，就直接加進去。預設情況下，它沒有把這個加進去，我應該點一下。不過沒關係，光是這些模型就 綽綽有餘，足夠使用了。

預設情況下，它會是 Auto Mode。如果你不知道怎麼選擇模式，使用 Auto Mode 就好。它會自動幫你挑選。另外一個你需要知道的，是關於這個模式的。

Max Mode 的功能與成本

另一個功能是 Max Mode。大家都知道，AI 在使用時，如果你關閉 Auto Mode，就可以選擇 Max Mode。Max Mode 會用 非常強大的思考能力 來幫助你寫程式。包含了它... 你知道，現在這樣使用與在外面使用，例如 ChatGPT 或 Claude，差別在於外面它就是 一次性生成 (one-shot)。但如果在這裡使用 Max Mode，它會自己用一次性生成寫完程式後，自動產生測試並執行。如果有錯誤，它會自己發現錯誤，然後進行修改，並不斷地嘗試。所以執行時間會比較久，而且會使用更強大、更昂貴、更長的 Token 來處理。因此費用會比較高。對於我們前幾個作業來說，完全不需要 使用這個模式。我等一下會直接示範使用 Auto Mode 就能完成。只是讓大家知道有這個功能。你不要一直開啟 Max Mode，然後沒幾天就把 20 美元用完再來跟我抱怨。當然，這是你的事情。對，但是 20 美元用完之後，你可以選擇 隨用隨付 (Pay as you go)，你還是可以儲值繼續使用。如果你決定不想使用，只用課程提供的額度來繳交作業，這是你的自由。不過根據我的經驗，我們的七個作業，20 美元應該是 綽綽有餘 的。

當然，你應該知道這個聊天室可以把它當作 ChatGPT 或其他 AI 來使用。也就是說，你可以問一些與程式碼無關的問題，因為它其實還是會在這裡回答。所以有些人其實 ChatGPT 使用量不大，發現 Cursor 的額度用不完，真的有人用這個來取代 ChatGPT。

Prompt 設計的重要性

所以這個簡單的應用程式 (Symbol App)，Auto Mode 就 足夠了 (good enough)。如果你有 Cursor，其實就可以用這個畫面去思考你要下什麼 提示 (Prompt)，然後寫出這樣的程式碼就可以了。你可以看到，這段程式碼已經寫好了，而且不只兩三行。像這段 JavaScript 程式碼也有一百多行，CSS 程式碼也有一百多行。雖然不算很多，但這真的是 一次性生成 (one-shot) 就寫好了。你可以思考一下，你要怎麼跟 AI 說明，讓它去寫。你可以試一下，給大家一分鐘時間，我也會示範。我下方有貼我的參考 Prompt。這個我還有一個防雷的標題。

如果打開這個就是我的 Prompt。我的 Prompt 其實寫得還蠻囉嗦的。不過先關掉。你思考一下，如果你要叫 AI 寫這個，如果你只是貼這張圖說：「幫我做一個如圖的 Todo List」，也許可以成功。可是你做出來的東西可能就會與你想像的不一樣。如果你覺得這樣就是 AI 很笨，那麼，再次重申我剛才說的：如果你是一位主管，然後丟了一份三百頁的規格書說：「來，幫我做出來。」然後一個月或一個禮拜後，別人做出來的東西與你想像的不同，你不能怪他。一位好的主管，你還是要與下屬溝通，說明你真正想要的是什麼。其實因為我們知道，語言總有其溝通的限制。所以我到底說的是什麼意思？你就是要懂得去跟 AI 溝通。

現場示範準備

它跟規格書是兩回事。好的，那我們現在就來現場示範一下。再次強調，AI 背後其實是統計模型。所以它有點像樂透，等一下會不會有什麼問題，我也不知道。不過我們就試試看。我先把這個截圖一下。糟糕，我在錄影。有沒有這張圖啊？看一下，應該有。我要暫停錄影一下。好吧。