得能教育 Telearn

Vibe Coding 與軟體工程初探課程

課程總覽

哈囉,同學們!歡迎來到「Vibe Coding 與軟體工程初探課程」!

在這四週的課程中,我們將一起:

  • 探索主流 AI 語言模型:認識 ChatGPT、Google Gemini、Anthropic Claude,並學習如何與它們有效互動。
  • 運用 ChatGPT 概念深化 Python:前兩週我們將以 ChatGPT 的互動模式為藍本,強化 Python 技能。
  • 精通 Cursor AI 輔助開發:後兩週我們將深入 Cursor,用它來完成一個精彩的期末專案。
  • 成為小小軟體工程師:學習怎麼寫出漂亮、好懂、不容易出錯的程式碼。
  • 跟 AI 精準溝通:學習撰寫有效的 Prompt,讓 AI 成為你強大的學習與開發夥伴。

準備好了嗎?讓我們一起開始這趟全新的 AI 程式設計之旅吧!

第一週:AI 語言模型概覽與 ChatGPT 互動基礎

得能教育 Telearn

本週學習目標

  • 快速複習 Python 的重要觀念。
  • 認識主流 AI 大型語言模型:ChatGPT (OpenAI)、Gemini (Google)、Claude (Anthropic) 的基本特色與應用。
  • 學習如何像與 ChatGPT 互動一樣,有效地向 AI 提問以輔助 Python 學習。
  • 掌握 Prompt 工程初步:如何撰寫清晰、具體的指令讓 AI 更懂你的需求。
  • 初步建立程式碼風格與可讀性的觀念。
得能教育 Telearn

(一) Python 核心回顧

1. Python 暖身操

我們已經學過 Python 的基本功了,對吧?讓我們快速回憶一下:

  • 變數 (Variables):儲存資料的小盒子 (例如:my_name = "小明", age = 13)。
  • 資料型態 (Data Types):不同種類的資料 (例如:文字 str, 數字 int, float, 布林值 bool)。
  • 運算子 (Operators):做運算的符號 (例如:加減乘除 + - * /, 比較大小 > < ==)。
  • 控制流程 (Control Flow):讓程式決定下一步怎麼走 (例如:if...elif...else 條件判斷, forwhile 迴圈)。

小測驗:變數 (Variables)

下列哪一行 Python 程式碼可以正確「建立一個名為 student_score 的變數,並設定值為 100」?

小測驗:資料型態 (Data Types)

執行下列哪一行程式後,變數 x 的型態會是布林值 (Boolean)?

小測驗:運算子 (Operators)

下列哪一個運算子可以用來「判斷兩個變數是否相等」?

小測驗:控制流程 (Control Flow)

如果你想讓程式「根據不同條件分別執行不同區塊」,應該用哪一個語法?

得能教育 Telearn

(二) AI 語言模型大觀園

歡迎來到 AI 語言模型的世界!這些聰明的 AI 能理解和生成文字,甚至程式碼!

這週我們將認識幾位赫赫有名的 AI 大師:

  • ChatGPT (來自 OpenAI)
  • Gemini (來自 Google)
  • Claude (來自 Anthropic)

以及我們之後專案會用到的 Cursor (一個整合了 AI 功能的程式編輯器)。

得能教育 Telearn

(二) AI 語言模型大觀園

1. ChatGPT (OpenAI)

ChatGPT Logo
  • 特色:非常擅長對話、回答問題、撰寫文章、生成程式碼片段、除錯建議等。
  • 強項:自然語言理解與生成能力強,知識範圍廣泛(但要注意知識截止日期)。
  • 互動方式:主要透過聊天介面進行問答。
  • 應用:學習輔助、內容創作、程式碼初步生成與解釋。

我們前兩週會主要以 ChatGPT 的互動模式為範例,學習如何與 AI 協作。

得能教育 Telearn

(二) AI 語言模型大觀園

2. Gemini (Google)

Gemini Logo
  • 特色:Google 開發的多模態 AI 模型,能理解和處理文字、圖片、聲音、影片和程式碼。
  • 強項:與 Google 生態系統整合緊密,具有強大的搜尋與資訊整合能力,多模態理解是其亮點。
  • 互動方式:可透過 Bard (現在是 Gemini App) 聊天介面、API 等方式互動。
  • 應用:複雜問題解答、跨模態內容生成、程式碼輔助、研究分析。
得能教育 Telearn

(二) AI 語言模型大觀園

3. Claude (Anthropic)

Claude Logo
  • 特色:由 Anthropic 公司開發,特別強調 AI 的安全性、可靠性和可解釋性。
  • 強項:在處理長文本、遵循複雜指令、生成較為「無害」的內容方面表現突出。擁有較大的上下文視窗 (Context Window)。
  • 互動方式:主要透過聊天介面和 API。
  • 應用:長文件摘要與問答、創意寫作、需要高度遵循指令的任務、企業級應用。
得能教育 Telearn

(二) AI 語言模型大觀園

以及我們之後的專案好夥伴:Cursor

Cursor Logo
  • 定位:一個「AI 優先」的程式編輯器,深度整合了 AI 輔助功能。
  • 特色:可以直接在編輯器中與 AI 對話、生成程式碼、修改現有程式碼、解釋程式碼、除錯等。
  • 為什麼我們後面要用它做專案? Cursor 將 AI 的能力直接融入到我們寫程式的每一個環節,可以大大提升開發效率和學習體驗。

我們會在第三週詳細學習如何使用 Cursor!

得能教育 Telearn

(三) 精準提問 AI:Prompt 工程初步

無論你使用 ChatGPT、Gemini、Claude 還是 Cursor 裡的 AI,要讓它們真正幫上忙,我們得學會怎麼「好好跟它們說話」。

我們給 AI 的指令或問題,就叫做 Prompt

得能教育 Telearn

(三) 精準提問 AI:Prompt 工程初步

為什麼 Prompt 很重要?

  • AI 不是萬能的,它需要我們清楚地告訴它「你想做什麼」。
  • 你給的 Prompt 越清楚、越具體,AI 給你的答案或程式碼就會越符合你的期望。
  • 口訣:垃圾進,垃圾出 (Garbage In, Garbage Out)!
得能教育 Telearn

(三) 精準提問 AI:Prompt 工程初步

如何寫出好的 Prompt?

  • 提供足夠的上下文 (Context):告訴 AI 你正在處理什麼問題,相關的程式碼片段是什麼。
  • 明確指出你的目標 (Goal):你希望 AI 幫你完成什麼?是產生程式碼、解釋、還是除錯?
  • 給予範例 (Examples):如果可以,給 AI 一些輸入和輸出的範例,它會更容易理解你的需求。
  • 逐步引導 (Iterative Prompting):不要想一次就得到完美的答案。可以先給一個簡單的 Prompt,然後根據 AI 的回應,再逐步修正或補充你的 Prompt。
得能教育 Telearn

(三) 精準提問 AI:Prompt 工程初步

活動時間:Prompt 大挑戰!

  1. 情境:假設你想寫一個 Python 函式,它可以判斷一個數字是不是偶數。
  2. 試著用至少兩種不同的 Prompt,想像你要問 ChatGPT (或其他聊天 AI),請它幫你寫這個函式。

    Prompt 範例1 (比較模糊):

    「寫個判斷偶數的 Python。」

    Prompt 範例2 (比較清楚):

    「請幫我寫一個 Python 函式,名稱叫做 is_even。這個函式接受一個整數作為參數,如果該整數是偶數,函式應該回傳 True,否則回傳 False。」

  3. 思考一下,這兩種 Prompt 可能會得到什麼不同的回應?
  4. 和同學討論一下,怎麼樣的 Prompt 才能讓 AI 更「懂你」?
得能教育 Telearn

(四) 軟體工程概念:程式碼風格與可讀性

寫程式不只是讓電腦看得懂,更重要的是讓人 (包括未來的你、你的同學、還有 AI) 也能看得懂!

得能教育 Telearn

(四) 軟體工程概念:程式碼風格與可讀性

為什麼可讀性很重要?

  • 容易理解、容易修改、容易除錯。
  • 方便團隊合作。
  • AI 也更能理解你的程式碼,提供更精準的協助。
得能教育 Telearn

(四) 軟體工程概念:程式碼風格與可讀性

如何提升程式碼可讀性?

  • 有意義的命名:變數名稱、函式名稱要能清楚表達它們的用途。
    • 壞例子:x = 10, a = "小明", func1()
    • 好例子:item_count = 10, student_name = "小明", calculate_average_score()
    • (小提示:可以參考 Python 的 PEP 8 風格指南)
  • 適當的註解:對於比較複雜的邏輯,加上簡短的說明。
  • 一致的排版:保持縮排、空格的一致性。
  • 函式不要太長:一個函式最好只做一件事情。
得能教育 Telearn

本週重點回顧

  • 我們認識了 ChatGPT、Gemini、Claude 等主流 AI 語言模型。
  • 學習了如何像與 ChatGPT 互動一樣,有效地向 AI 提問。
  • 掌握了 Prompt 工程的初步技巧,讓 AI 更能理解我們的需求。
  • 了解了程式碼風格與可讀性的重要性。
得能教育 Telearn

下週預告

我們將繼續以 ChatGPT 的互動模式為參考,深入探索 Python 的進階資料結構,學習如何處理程式中的錯誤,並思考如何運用 AI 輔助除錯!

第二週:從 Python 進階到軟體工程入門

得能教育 Telearn

本週學習目標

  • 精通 Python 進階資料結構: 深入了解 List, Tuple, Dict, Set 的效能與應用場景。
  • 掌握專業級錯誤處理: 學習捕捉、處理,甚至自訂錯誤 (Custom Exceptions),寫出更穩固的程式。
  • 升級 AI 協作技巧: 學習「多步驟提示」等進階 Prompt 策略,讓 AI 成為你的神隊友。
  • 入門軟體工程實務: 接觸測試驅動開發 (TDD)、文件字串 (Docstrings) 與程式碼風格 (PEP 8) 等核心概念。
  • 完成小型專題: 應用本週所學,從零到一打造一個簡易購物車系統。
得能教育 Telearn

2.1 Python 資料結構進階

Python 提供了多種強大的內建資料結構。這週,我們將思考如何透過向 ChatGPT 這樣的 AI 提問,來幫助我們更深入地理解和應用它們!

Python 資料結構與AI提問

2.1 Python 資料結構進階

不同的資料結構有不同的特性,適用於不同的場景。

資料結構特性適用場景
List有序、可變、允許重複儲存一連串需要修改或排序的資料
Tuple有序、不可變、允許重複儲存不應被修改的資料,如座標
Dictionary無序(3.7+ 有序)、鍵值對、鍵唯一需要快速透過鍵查找值的場景
Set無序、元素唯一去重、檢查成員資格

小測驗:如果要儲存一個班級所有學生的學號(不重複),用哪種資料結構最合適?

得能教育 Telearn

2.1 Python 資料結構進階

列表推導式 (List Comprehensions)

一種簡潔的方式來建立列表。例如,快速產生一個包含平方數的列表:

squares = [x**2 for x in range(10)]
    # squares 會是 [0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

🤔 思考與提問: 如果你想用列表推導式從一個字串中選出所有母音,你會怎麼問 ChatGPT (或類似 AI) 來獲得提示或程式碼?

小測驗:列表推導式應用

下列哪一個列表推導式可以正確產生所有大於 10 且為偶數的數字,範圍從 0 到 20?

得能教育 Telearn

2.1 Python 資料結構進階

字典推導式 (Dictionary Comprehensions)

類似地,用簡潔的方式建立字典:

square_dict = {x: x**2 for x in range(5)}
    # square_dict 會是 {0: 0, 1: 1, 2: 4, 3: 9, 4: 16}

🤔 思考與提問: 如果你想將兩個列表 (一個包含鍵,一個包含值) 合併成一個字典,你會如何向 AI 提問以獲得使用字典推導式的方案?

小測驗:字典推導式應用

以下哪一行程式碼可以將兩個列表 keys = ['a', 'b', 'c']values = [1, 2, 3] 合併成 {'a': 1, 'b': 2, 'c': 3}

得能教育 Telearn

2.1 Python 資料結構進階

常用內建函式操作資料結構

  • map(function, iterable)將函式應用到序列中的每個元素。
  • filter(function, iterable)根據函式過濾序列中的元素。
  • sorted(iterable, key=None, reverse=False)對序列進行排序。

🤔 思考與提問: 你會如何問 AI,請它示範如何使用 filter 過濾出一個數字列表中所有大於10的偶數?

小測驗:資料處理函式

有一個分數列表 scores = [58, 92, 75, 43, 86],要找出所有及格(60分以上)且分數從高到低排序,下列哪一行程式碼最合適?

得能教育 Telearn

2.1 Python 資料結構進階

活動:學生名單與成績處理 (AI 輔助思考)

假設你有一份學生成績資料 (例如,一個包含學生姓名和分數的字典列表)。

針對以下任務,思考你會如何向 ChatGPT (或類似 AI) 提問,以獲得解題思路或程式碼片段:

  • 計算全班的平均分數。
  • 找出最高分的學生及其分數。
  • 篩選出所有不及格 (例如低於60分) 的學生名單。
  • 將學生成績從高到低排序。

試著寫下你的 Prompt,並看 AI 會給你什麼樣的幫助。

得能教育 Telearn

2.2 錯誤處理與防禦性程式設計

程式出錯是家常便飯!學會處理「錯誤」和「異常」能讓你的程式更強壯。思考一下,AI 如何在這方面提供協助?

程式錯誤與AI輔助
得能教育 Telearn

2.2 錯誤處理與防禦性程式設計

什麼是防禦性程式設計?

這是一種程式設計的思維方式,目標是讓程式碼在面對未預期的輸入或情況時,依然能夠保持穩定和可預測的行為。

主要原則:

  • 檢查所有來自外部的輸入:不要信任任何來自使用者、檔案或網路的資料。
  • 處理所有可能的錯誤情況:使用錯誤處理機制。
  • 使用斷言 (Assertions):在程式中加入檢查點,確保某些條件必須為真。 (例如:assert age > 0, "年齡必須是正數")
  • 保持程式碼簡單清晰:複雜的程式碼更容易隱藏 bug。

良好的錯誤處理是防禦性程式設計的重要一環!

得能教育 Telearn

2.2 錯誤處理與防禦性程式設計

常見的 Python 錯誤類型 (Part 1)

複習一下常見的錯誤:

  • SyntaxError, NameError, TypeError, ValueError

🤔 思考與提問: 當你遇到一個 TypeError,但不太確定原因時,你會怎麼把錯誤訊息和相關程式碼提供給 ChatGPT,請它幫忙分析?

得能教育 Telearn

2.2 錯誤處理與防禦性程式設計

常見的 Python 錯誤類型 (Part 2)

  • IndexError, KeyError, FileNotFoundError, ZeroDivisionError, AttributeError

當程式出現錯誤時,仔細閱讀錯誤訊息是除錯的第一步!它通常會告訴你錯誤的類型和發生的位置。

得能教育 Telearn

2.2 錯誤處理與防禦性程式設計

使用 try-except 捕捉錯誤

我們可以使用 tryexcept 區塊來「捕捉」可能發生的錯誤,並優雅地處理它們。


    try:
        num_str = input("請輸入一個數字:")
        num = int(num_str) 
        result = 10 / num  
        print(f"結果是 {result}")
    except ValueError:
        print("輸入的不是有效數字!")
    # ... 其他 except 區塊 ...
    else:
        print("計算順利完成!")
    finally:
        print("程式區塊執行結束。")
    

🤔 思考與提問: 如果你不確定一段程式碼可能會拋出哪些具體的錯誤類型,你會如何請 ChatGPT 幫你分析並建議 except 區塊的寫法?

得能教育 Telearn

2.2 錯誤處理與防禦性程式設計

引發異常 (raise)

有時候,我們希望在特定條件下主動引發一個錯誤,可以使用 raise 關鍵字。


    def process_data(data):
        if not data:
            raise ValueError("輸入的資料不能是空的!")
        # ... 處理資料 ...
        print("資料處理完成。")

思考在什麼情境下,主動 raise 一個錯誤會比單純 print 錯誤訊息更好?

得能教育 Telearn

2.2 錯誤處理與防禦性程式設計

進階:自訂錯誤類型

當內建的錯誤不夠用時,我們可以建立自己的錯誤類型,讓程式碼的意圖更清晰。

class InvalidURLError(Exception):
        """當 URL 格式不正確時引發的自訂錯誤"""
        pass
    
    def fetch_website(url):
        if not url.startswith("http"):
            raise InvalidURLError(f"無效的 URL:'{url}',必須以 http 開頭")
        print(f"正在嘗試抓取 {url}...")
    
    try:
        fetch_website("www.google.com")
    except InvalidURLError as e:
        print(f"錯誤:{e}")

活動: 在您的筆記中,為成績設定函式建立一個 InvalidGradeError,當成績不在 0-100 範圍內時引發此錯誤。

得能教育 Telearn

2.2 錯誤處理與防禦性程式設計

活動:為程式碼加上防護罩!(AI 輔助思考)

老師會提供一段可能產生錯誤的程式碼。

你的任務是,思考你會如何向 ChatGPT (或類似 AI) 提問,來幫助你:

  • 分析這段程式碼可能會出現哪些錯誤?
  • 建議如何使用 try-except 結構來捕捉這些潛在的錯誤。
  • 為不同的錯誤類型提供友善的提示訊息。
  • 判斷是否需要使用 elsefinally 子句。

試著寫下你的 Prompt,並預想 AI 可能會提供哪些有用的建議。

得能教育 Telearn

2.3 AI 協作:Prompt 與除錯

即使有了錯誤處理,程式還是可能會有 bug (臭蟲)!像 ChatGPT 這樣的 AI 可以成為你強大的除錯夥伴,幫助你更快找到並解決問題。

AI 協助除錯示意圖
得能教育 Telearn

2.3 AI 協作:Prompt 與除錯

如何有效地向 AI (如 ChatGPT) 求助除錯?

  • 複製完整的錯誤訊息:這是最重要的資訊!
  • 提供相關的程式碼片段:讓 AI 知道錯誤發生在哪裡。
  • 描述你預期的行為:程式應該做什麼?
  • 描述實際發生的行為:程式實際上做了什麼?
  • 說明你已經嘗試過的解決方法 (如果有的話)。

Prompt 範例:「我的 Python 程式出現了這個錯誤訊息 [貼上錯誤訊息]。這是相關的程式碼:[貼上程式碼]。我希望它能 [描述預期行為],但它卻 [描述實際行為]。請問可能是什麼問題?可以幫我看看程式碼哪裡有問題嗎?」

得能教育 Telearn

2.3 AI 協作:Prompt 與除錯

不只是語法錯誤,AI 也能幫忙找邏輯錯誤!

有時候程式可以執行,但結果不如預期,這就是邏輯錯誤。你可以:

  • 向 AI 描述你的程式碼片段和它應該實現的功能,詢問它是否能看出邏輯上的問題。
  • 描述你的演算法或邏輯思路,請 AI 檢查是否有缺陷。
  • 提供輸入範例和預期輸出,請 AI 幫你分析為什麼實際輸出不同。

2.3 AI 協作:Prompt 與除錯

技巧:多步驟提示 (Multi-step Prompt)

與其一次丟出複雜問題,不如分步驟引導 AI,逐步建構出最終答案。

範例:請 AI 幫你寫一個線上課程報名系統

  1. 第一步:「請幫我設計一個 Python 字典來表示一門線上課程,需要包含課程名稱、老師和一個空的學生名單。」
  2. 第二步:「基於上面的字典,請寫一個函式,可以將一個學生名字加入到學生名單中。」
  3. 第三步:「很好,現在請幫這個函式加上錯誤處理,如果學生已經在名單中了,就印出提示訊息。」

活動:在您的筆記中,練習使用多步驟提示,引導 AI 產生一個密碼驗證函式(例如,長度至少8碼,包含數字和字母)。

得能教育 Telearn

2.3 AI 協作:Prompt 與除錯

活動:「除錯大挑戰」!(AI 輔助思考)

老師會提供幾個帶有隱晦 bug 的 Python 程式片段。

你的任務是,思考你會如何運用與 ChatGPT (或類似 AI) 互動的技巧來:

  • 理解程式碼的功能。
  • 分析錯誤訊息或不符合預期的行為。
  • 向 AI 清晰地描述問題,並提供相關資訊以獲得幫助。
  • 根據 AI 的建議,嘗試找出並修復 bug。

和同學分享你的「提問策略」和 AI 可能給你的「啟發」。

2.4 軟體工程核心實務

測試驅動開發 (TDD) 與 assert

TDD 的核心精神是「先寫測試,再寫功能」。 assert 是我們實踐這個精神最簡單的工具。

assert 語句會在條件為 False 時,引發 AssertionError,直接中斷程式。


    def calculate_discount(price, discount_rate):
        # 我們斷言折扣率必須在 0 和 1 之間
        assert 0 <= discount_rate <= 1, "折扣率必須在 0 和 1 之間"
        return price * (1 - discount_rate)
    
    # 這會正常運作
    print(calculate_discount(100, 0.2))
    
    # 這會引發 AssertionError
    print(calculate_discount(100, 1.5))

2.4 軟體工程核心實務

撰寫清晰的文件字串 (Docstrings)

文件字串 (Docstring) 是說明函式、模組或類別用途的「內建說明書」。它不僅是給人看的,更是 AI 理解你程式碼意圖的關鍵!

def calculate_total_price(items, tax_rate):
        """計算包含稅金的總價格。
    
        Args:
            items (list): 一個包含商品價格 (數字) 的列表。
            tax_rate (float): 稅率,例如 0.05 代表 5%。
    
        Returns:
            float: 四捨五入到小數點後兩位的總金額。
                   如果輸入無效則返回 -1。
        """
        if not isinstance(items, list) or not items:
            return -1
        subtotal = sum(items)
        total = subtotal * (1 + tax_rate)
        return round(total, 2)
    
    # 你可以這樣查看說明書
    help(calculate_total_price)

AI 協作提示:寫好清晰的 Docstring 後,你可以請 AI:「根據這個函式的 Docstring,為它產生三個測試案例,包含一個邊界情況。」AI 能提供更高品質的協助!

2.4 軟體工程核心實務

程式碼風格 (PEP 8)

PEP 8 是 Python 的官方風格指南。遵循它能讓你的程式碼更具可讀性、更專業,也更容易與他人協作。

不推薦的風格 ❌

def calculate(x,y):
        result=x*y
        return result

推薦的風格 (PEP 8) ✅

def calculate(x, y):
        result = x * y
        return result

Linting 工具:flake8pylint 這樣的工具可以自動檢查你的程式碼是否符合 PEP 8 規範。

AI 協作提示:將一段程式碼貼給 AI,並請它「根據 PEP 8 風格指南重構這段程式碼」。

2.5 綜合專題:簡易購物車系統

讓我們綜合運用所學,設計一個小型專案。這能幫助我們理解各個知識點如何協同工作。

需求:

  • 資料結構:設計一個結構來存放商品(名稱、價格)。
  • 新增商品:一個函式 add_to_cart()
  • 計算總價:一個函式 calculate_total()
  • 移除商品:一個函式 remove_from_cart(),需處理商品不存在的情況。

AI 協作提示:卡關時可以問 AI:「我該用哪種資料結構來設計購物車比較好?」或「請幫我寫一個從列表中移除指定商品的函式。」

得能教育 Telearn

第二週重點回顧

這一週我們從 Python 的基礎上,加入了軟體工程的重要概念與 AI 協作技巧:

  • 進階資料結構: 精通 List, Tuple, Dict, Set 的特性、效能與適用場景。
  • 進階錯誤處理: 不僅能用 try...except 捕捉錯誤,更能定義自訂例外 (Custom Exception) 處理特定狀況。
  • AI Prompt 實戰: 掌握「多步驟提示」技巧,能更精準地引導 AI 完成複雜任務。
  • TDD 測試驅動開發: 了解 TDD 核心精神,並學會使用 assert 為功能撰寫基本驗證。
  • 撰寫文件字串 (Docstrings): 學習為函式撰寫標準化的說明文件,讓程式碼更易於理解與維護,並能有效引導 AI 協作。
  • 程式碼風格 (PEP 8): 認識程式碼風格的重要性,並能利用 AI 輔助重構,提升程式碼品質。
  • 綜合應用: 透過「簡易購物車」小型專題,將本週所學知識點串連起來。
得能教育 Telearn

下週預告

我們將正式進入 Cursor 的世界!學習它的強大功能,如何將程式碼組織得更有條理 (模組化與函式設計),探索 Python 豐富的函式庫,並開始規劃我們的期末專案!

第三週:Cursor 實戰與 GUI 應用開發

得能教育 Telearn

本週學習目標

  • Cursor Power-User 訓練:透過實戰挑戰,精通 Cursor 的程式碼生成、重構與 AI 除錯技巧。
  • GUI 應用初體驗:告別黑白終端機!學習用 Python 內建的 tkinter 函式庫,打造你的第一個圖形介面 App。
  • AI 輔助 UI 設計:學習如何與 Cursor 協作,快速生成視窗、按鈕、輸入框等視覺元件。
  • 期末專案啟動:選擇一個有趣的 GUI 專案主題,並讓 AI 成為你的專案經理,協助你規劃藍圖。

這週,我們將從理論走向實踐,把 AI 變成你手中最強大的開發工具!

得能教育 Telearn

3.1 Cursor Power-User 訓練

我們將透過三個「小挑戰」,把 Cursor 從一個新工具,變成你最得力的程式設計夥伴!

得能教育 Telearn

練習1:AI 程式碼生成挑戰

任務

老師會提供一個有 3-4 個中文函式描述的 Python 檔案,你的目標是在每個註解下方,使用 Cursor 的「生成程式碼」(快捷鍵 Ctrl+K) 功能,讓 AI 自動完成這些函式。

# 函式一:計算一個圓形的面積,需要傳入半徑

# 函式二:檢查一個字串是否為有效台灣手機號碼 (09開頭,共10碼)

# 函式三:將一個句子中的所有英文單字轉為大寫
得能教育 Telearn

練習2:AI 程式碼重構挑戰

任務

老師會提供一段邏輯混雜的程式碼(例如:一段程式碼包辦了讀取、計算、判斷、輸出的所有工作)。

你的目標是練習使用 Cursor 的「編輯/聊天」(快捷鍵 Ctrl+L),選取特定區塊,並下達指令如:「將這段計算平均的邏輯,提取成一個名為 calculate_average 的新函式」,體驗一鍵重構的魔法。

得能教育 Telearn

練習3:AI 偵探除錯挑戰

任務

老師會提供一段含有隱晦邏輯錯誤的程式碼(例如:迴圈範圍少算一次)。

你的目標是執行程式、觀察到錯誤的結果,然後練習向 Cursor 的 AI 清晰地描述問題:「我的程式沒有報錯,但計算結果不對,這是我的程式碼,你能幫我看看邏輯問題嗎?」

得能教育 Telearn

3.2 從零到有:打造你的第一個 GUI 視窗

什麼是 GUI?就是我們每天都在用的圖形化介面!現在,我們要用 Python 的內建函式庫 tkinter,讓程式擁有視窗、按鈕和輸入框!

Hello, tkinter!

我們的第一個 AI 協作任務:在 Cursor 中,問 AI:
「請用 tkinter 幫我建立一個標題是『我的第一個 App』的空白視窗。」

得能教育 Telearn

tkinter 實作:放置你的積木 (Widgets)

整合練習:迷你「問候 App」

讓我們打造一個有輸入框和按鈕的視窗。當使用者在輸入框填入名字 (例如 "小明") 並按下按鈕後,一個標籤的文字會從 "你好,世界!" 變成 "你好,小明!"。這將是我們的第一個完整 GUI 互動練習!

  1. 問 AI 如何建立 Label (標籤)
  2. 問 AI 如何建立 Entry (輸入框),並取得使用者輸入的文字。
  3. 問 AI 如何建立 Button (按鈕),並讓它點擊後執行一個函式。
得能教育 Telearn

3.3 期末專案啟動:用 AI 當你的專案經理

技能已備!現在我們要啟動一個更大型、更有趣的專案。從下面三個選項中,選擇一個你最想挑戰的!

得能教育 Telearn

專案選項1:😂 簡單迷因 (Meme) 產生器

打造一個可以載入圖片,並在圖片上方和下方加上文字,製作出有趣迷因圖的工具。

  • GUI 元件:「選擇圖片」按鈕、兩個文字輸入框、一個「產生迷因」按鈕、一個成品顯示區。
  • 有趣之處:結合時事與創意,可以立刻做出好笑的圖片和朋友分享。
  • AI 協作點:問 AI「Python 如何在圖片上寫字?」來探索 Pillow 函式庫。
得能教育 Telearn

專案選項2:🎮 點擊英雄 (Clicker Hero)

一個簡單的點擊賺分遊戲。瘋狂點擊主角來賺取金幣,然後用金幣購買升級項目,讓每次點擊能賺更多金幣!

  • GUI 元件:大的「點擊」按鈕、金幣數量標籤、升級按鈕、數值標籤。
  • 有趣之處:簡單又有毒的遊戲機制,看著數字不斷成長非常有成就感。
  • AI 協作點:問 AI「如何動態更新視窗上顯示分數的文字?」
得能教育 Telearn

專案選項3:🎨 數位四格漫畫展示器

製作一個可以呈現多張圖片與對應文字的看圖說故事工具。使用者可以透過「上一頁」、「下一頁」按鈕來瀏覽你創作的漫畫或故事。

  • GUI 元件:圖片顯示區、文字標籤、「上一頁」和「下一頁」按鈕。
  • 有趣之處:結合AI繪畫或網路圖片,創造屬於自己的短篇故事,發揮無限想像力。
  • AI 協作點:問 AI「如何管理多個頁面,每個頁面都有一張圖片和一段文字?」來設計資料結構。
得能教育 Telearn

第三週重點回顧

  • 我們透過實戰挑戰,將 Cursor 變成了真正的開發夥伴。
  • 學習了 Python 的 tkinter 函式庫,並打造了第一個 GUI 互動應用。
  • 選擇了期末專案主題,並利用 AI 完成了專案的「設計藍圖」。
得能教育 Telearn

下週預告:

下週,我們將全力投入專案開發,學習如何測試和優化我們的 App,並準備一場精彩的成果發表會,向大家展示你的作品!

第四週:GUI 專案衝刺、測試與成果發表

得能教育 Telearn

本週學習目標

  • 專案開發衝刺:採用專業的「迭代開發」流程,在 AI 輔助下,將你的專案從藍圖變為現實。
  • App 品質保證:學習如何像玩家一樣測試你的 App,找出潛在問題並優化使用者體驗。
  • AI 輔助測試:利用 Cursor 幫你思考測試案例,提升你 App 的穩定性與強健度。
  • App Showcase:準備並進行一場精彩的個人專案成果發表會,分享你的創作與學習歷程!
得能教育 Telearn

4.1 專案開發衝刺 (Coding Sprint)

這是本週最主要的動手時間!我們將採用「先求有,再求好」的策略,分三階段完成你的 App!

得能教育 Telearn

衝刺第一階段:搭建骨架

目標

完成所有 GUI 元件的排版。此刻,按鈕可能還沒有功能,但整個 App 的「外觀」和「版面」已經成形。

AI 協作提示:如果不確定如何排版,可以問 AI:「請用 tkinter 的 grid 方法,幫我設計一個兩行兩列的佈局。」

得能教育 Telearn

衝刺第二階段:注入靈魂

目標

實現最核心的功能。例如,迷因產生器要能成功把文字畫到圖片上;點擊遊戲要能正確計分。

AI 協作提示:卡關時,練習具體提問!選取你的程式碼,問 AI:「我希望點擊這個按鈕後,圖片會換掉,但我這段程式碼沒反應,問題在哪?」

得能教育 Telearn

衝刺第三階段:細節打磨

目標

優化使用者體驗,例如調整字體大小、顏色,或加入一些友善的提示訊息,讓你的 App 變得更漂亮、更好用。

AI 協作提示:問 AI「如何更改 tkinter 按鈕的背景顏色?」或「如何讓標籤的字體變大一點?」

得能教育 Telearn

4.2 應用程式品保:為你的 App "體檢"

專業的軟體不只看功能,更看重品質。現在我們要學習如何找出自己程式中的瑕疵,讓它更穩定!

得能教育 Telearn

練習1:程式強健度 (Robustness) 測試

任務:故意玩壞它!

試著做一些「不正常操作」。例如,在迷因產生器中不選擇任何圖片就按下「產生」按鈕。看看你的 App 會不會崩潰 (Crash)?

AI 協作

如果程式崩潰了,告訴 AI:
「如何在我點擊按鈕時,先檢查使用者是否已經選擇了圖片?如果沒有,就跳出一個錯誤提示視窗。」
AI 會引導你使用 tkinter.messagebox 來優雅地處理錯誤。

得能教育 Telearn

練習2:AI 輔助思考極端情況

任務:請 AI 當你的測試工程師

對於你的專案,問 AI:
「我做了一個[你的專案名稱],請幫我設想幾個使用者可能會不小心讓它出錯的『極端測試情況』(Edge Cases)。」

看看 AI 提出的建議,你是否都有考慮到?試著根據 AI 的建議來加強你的程式。

得能教育 Telearn

練習3:AI 程式碼健康檢查

任務:請 AI 幫你審查程式碼

當你的專案功能大致完成後,選取所有程式碼,然後對 AI 下達指令:
「請幫我審查這份程式碼,在複雜的地方加上註解,並確保它符合 PEP 8 風格指南。」

這是一個非常專業的開發習慣,可以讓你的程式碼變得更整潔、更易於他人閱讀!

得能教育 Telearn

4.3 App Showcase!成果發表會

恭喜你完成了專案!現在,是時候向大家展示你的學習成果,分享這段旅程中的創作與心得了!

得能教育 Telearn

特別加碼:一鍵變身網頁版!

你以為你的 App 只能在自己電腦上跑嗎?AI 還能幫我們做一件更酷的事:把它變成一個真正的網站!

即使我們只學了 Python 和 tkinter,完全不懂網頁三劍客 (HTML, CSS, JavaScript),我們依然可以讓 AI 幫我們完成這個魔法般的轉換。

魔法詠唱咒語 (AI Prompt)

選取你專案中所有的 tkinter 程式碼,然後對 Cursor 的 AI 說:

「請將這個 tkinter 應用程式,改寫成一個單一 HTML 檔案的網頁應用程式。請使用 Tailwind CSS 來美化外觀,並將所有的 Python 邏輯轉換成 JavaScript。」

AI 就會為你生成一個完整的網頁,讓任何人只要有瀏覽器就能使用你的作品!這也是你們可以在成果發表會上展示的超酷亮點!

得能教育 Telearn

AI 魔法成果展示:專案網頁版範例

這就是 AI 將我們上一週的三個專案範例,從 Python (tkinter) 桌面應用程式轉換成網頁版的成果!

你可以點擊下方的連結,直接在瀏覽器中體驗這些由 AI 生成的網頁應用程式。

得能教育 Telearn

我的開發故事:分享指南

每位同學上台分享時,可以包含以下幾點:

  • App Demo:實際操作你的 App,展示它的核心功能。
  • 開發歷程:分享你卡關最久的地方,以及你最終是如何解決的。
  • 我的 AI 神隊友:分享一個你與 Cursor 協作最成功的例子。你是怎麼問的?AI 給了你什麼關鍵的幫助?
  • 未來展望:如果還有時間,你最想為你的 App 添加什麼新功能?
得能教育 Telearn

課程總結

回顧這四週,我們一起:

  • 從 Python 基礎出發,掌握了軟體工程的核心概念。
  • 學會了如何像專家一樣,向 AI 精準提問來解決問題。
  • 精通了專業 AI 開發工具 Cursor 的使用技巧。
  • 從零到有,親手打造了一個屬於自己的 GUI 應用程式!
得能教育 Telearn

未來展望與鼓勵

程式設計的世界廣闊無垠,AI 的發展也日新月異。希望這次課程能為大家打開一扇窗,鼓勵大家在未來:

  • 持續學習:不斷探索新的技術和工具。
  • 動手實作:用程式解決生活中的問題,或創造有趣的小遊戲。
  • 參與社群:和別人交流學習,分享你的作品。
  • 保持好奇心,擁抱變化!

Happy Coding! 祝大家程式設計愉快!