生成式人工智慧在程式開發與程式學習的應用

Transcript

1. 彼得潘 生 成式 人 工 智慧在程式 開發與程式學習的應 用
2. 愛上蘋果的 大 學 生
3. 彼得潘簡介 App程式設計入 門 :iPhone.iPad 彼得潘的 Swift 程式設計入 門 正職: 作家 副業: 專欄 & blog 作家， 工 程師，程式課程講師，顧問，家 教，評審，接案，企業包班，創業家，iOS APP 金 牌擺渡 人 iOS App 工 程師/外包廠商的 面 試鑑賞師
4. 生 動有趣的程式教學 說真 心 話的電腦書 見 書如 見人 ，看了書就可以了解彼得潘 博客來單 月 Top 1， 2012年度 百 大 電腦類 Top 6 歡迎寄照片給我，我可以把你們的照片放到我的新書
5. 20 幾款APP
6. 相關教學資源 • blog: 彼得潘的App Neverland • FB粉絲團: 愛瘋 一 切為蘋果的彼得潘 • 個 人 網站 • 同學們的作業: 彼得潘的 Swift iOS App 開發教室
7. 小 王 子 、彼得潘、Peter、
 鬼 塚、情歌王 子 、 小 潘同學 莫叫我老師 連結
8. • 介紹各種 AI • 用 AI 學程式 • 用 AI 開發程式 主題
9. 請 AI 當 小 老師學程式 今天的投影片明天就過時了，因為 AI 日 新 月 異， 明天、下星期、下個 月 的 AI 更厲害，有更多新功能
10. • 台灣的學⽣比較不好意思問問題。 • 問 人 要考慮很多，問 AI 不 用 考慮。 • 時間: 半夜或假 日 怕吵到 人 。 • AI 不 用 休息，隨傳隨到。 • 怕問太多讓 人 覺得煩。 • AI 超有耐 心 ，問它 一 百遍也不會封鎖你。 • AI 可以溫柔地 用 學 生 感興趣的主題教學。 • ps: 不過有的 AI 有數量限制，有限制時間內的 對話次數 • 請 AI 當程式 小 老師 AI 是讓你問到飽的老師
11. • 全能 AI & 程式專 門 AI • 程式專 門 AI 後 面 會再介紹 • 全能 AI • OpenAI 的 ChatGPT • https://chat.openai.com • 不 用 登入即可聊天，登入可享有更多功能 • 付費 20 美 金 升級有更多功能，免費版雖然也可使 用 進階功能，但有數 量限制， 而 且不能畫圖 有哪些不錯的 AI ?
12. • 微軟的 Copilot
 背後的技術也是 GPT • https://copilot.microsoft.com/ • 不 用 登入即可聊天，登入可享有更多功能 • 使 用 Edge 瀏覽器會更 方 便 有哪些不錯的 AI ? 全能 AI
13. • Google Gemini • https://gemini.google.com • 跟 GPT 一 樣，付費版更厲害 • 免費試 用 2 個 月 • Claude • https://claude.ai • 寫程式滿強的 • 訂閱 Claude Pro 和使 用 Calude 3 Opus 的初體 驗 • Perplexity AI • https://www.perplexity.ai • 結合搜尋引擎與 AI，包含豐富的相關連結 有哪些不錯的 AI ? 全能 AI
14. • 連結 • YouTube Apple Intelligence
15. 練習 GPT、Copilot、Germini、Claude、Perplexity AI • ChatGPT https://chat.openai.com • 範例 • Copilot • https://copilot.microsoft.com/ • Germini https://gemini.google.com • Claude https://claude.ai • Perplexity AI https://www.perplexity.ai
16. AI 長嘴巴跟眼睛了
17. 請 AI 講話: GPT & Gemini
18. 用 App 跟 ChatGPT 講話聊天 • 應 用 : 學程式 / 練習英 文 對話 • 對話也會被記錄成 文 字
19. • 連結 • AI 可以看到跟聽到 • 跟 AI 聊天就像跟 人 聊天，非常即時， 而 且 也可以隨時打斷 AI • 請 AI 角色 扮演，發出各種不同的聲 音 未來 GPT 的新語 音 模式會推出更厲害的聊天功能
20. GPT-4o coding assistant 連結
21. 英 文 選擇題(GPT、Claude、Gemini) 台 大 碩 士 班英 文 考試 上傳考試題 目 的圖片或 pdf
22. 英 文 閱讀測驗(GPT、Claude、Gemini) 上傳拍攝的書本內容
23. 利 用 AI 的圖片辨識複製圖片裡的程式(GPT、Claude、Gemini) 連結 影片、圖片、書本裡的程式都可以請 AI 打，不 用 再 自己一 字 一 字打了
24. • 連結 • 目 前有 Mac 版，Windows 版之後會推出 • 在操作電腦時可以更 方 便地使 用 ChatGPT，按快速鍵叫出 GPT • 方 便螢幕截圖問問題。 電腦版的 GPT App
25. • 寫程式英 文 也很重要 • AI 回答有可能會錯，不過英 文方面 它是專家，比較不會出錯 • AI 翻譯比 Google 翻譯好。 • 程式很多 文 件和教學都是英 文 。 • 練習英 文 對話 • 請當我的女朋友，跟我練習英 文 對話，只 用 英 文 回答我，並針對我的回答提出改善的地 方 。 • 連結 • 利 用 AI 看英 文 小 說學英 文 • 我是 小 朋友，請 用 更簡單的英 文 單字改寫。可以 用 來改寫技術 文 章。 • 連結 • 製作多國語 言 的 App / 網站 / 文 件 • 請 AI 翻譯 利 用 AI 學英 文 和翻譯
26. 練習: 上傳檔案給 AI 問問題 • ChatGPT https://chat.openai.com • Copilot • https://copilot.microsoft.com/ • Claude https://claude.ai
27. 這些都是 AI 畫的 ~ AI 會畫圖了
28. 用 AI 繪圖 Emilia from "Re:Zero" and Peter Pan from Disney sitting side by side, coding together with MacBook • Copilot / GPT • 請 AI 修改圖片 • MUSE AI • Ideogram • Stable Di ff usion • Midjourney • Adobe Fire fl y • Leonardo AI
29. • 只會寫程式，不會設計，沒有美感 • 請 AI 設計 • 設計 App / 網 頁 畫 面 ，設計 icon • 連結 請 AI 幫忙設計
30. 請 AI 畫程式教學的素材 • 請 AI 畫程式設計教學的圖片 • 請 AI 畫搭配對話泡泡的可愛插圖 / meme 教程式 • 請 AI 畫投影片的可愛貼圖說明程式問題
31. 練習: 請 AI 畫圖
32. AI 會唱歌了 • 請 AI 畫 blog 文 章的封 面 圖片 • prompt: 我正在寫 一 篇 AI 會唱歌了的 blog 文 章，請幫我畫 一 張封 面 圖片
33. • Suno • udio 請 AI 創作歌曲學程式
34. • Suno 練習: 使 用 AI 創作歌曲
35. • prompt 的組成元素 • Instruction • 想做的事 • 範例: 用 Swift 寫 一 個溫度轉換的程式 • Context • 幫助 AI 答得更好的額外資訊 • 範例: 我是程式初學者，你是資深的 iOS App 工 程師。 • Input data • 範例:上傳的程式檔 • Output format • 回答的格式 如何得到好的回答 Prompt Engineering
36. 請 AI 因材施教教程式 — 指定年紀/興 趣/ 角色 語氣，讓程式學習更活潑易懂 連結 聊天記錄 • 請對五歲 小 朋友以台灣中 文 介紹 IDE • 請對喜歡 皮 卡丘的學 生 以台灣中 文 介紹 IDE • 你是我的女朋友，請 用 可愛撒嬌貼 心 浪漫的語氣教我 IDE • 編 一首 國語流 行 歌，透過歌詞介紹 IDE • 請模仿論語介紹 IDE。 • 你是資深的 Python 工 程師，請說明什麼是 IDE Prompt Engineering 的 context 你是 xxx，我是 ooo
37. Customize ChatGPT AI 會依據我們在這裡設定的興趣和指 示 回答， 不需要每次展開新對話時重新說 一 次
38. 描述關於 自己 的資訊 我是 一 個正在學習 Swift 程式的初學者，想開發很多有趣的 iOS App，我很喜歡 小 王 子 的故事，興趣是打桌球 What would you like ChatGPT to know about you to provide better responses?
39. 希望 GPT 怎麼回答 你是 一 個幽默風趣的程式老師，善於 用 簡單易懂的 方 式講解複雜的 程式概念。請 用 可愛撒嬌的語氣跟我聊天，多講 一 些笑話和舉例 How would you like ChatGPT to respond?
40. 例 子 : 請問什麼是 IDE ? 嘿嘿，這是 一 個好問題呢！IDE 是 Integrated Development Environment（整合開發環境）的縮寫。它 是 一 種軟體應 用 程序，提供給程式設計師 用 來開發軟體的綜合 工 具集合。IDE 通常包括以下幾個主要功 能： 程式碼編輯器：這是 IDE 的核 心 ，允許你編寫和編輯程式碼，通常還會提供語法 高 亮、程式碼 自 動完成 和錯誤提 示 等功能。 編譯器/直譯器：幫助你將程式碼轉換成可執 行 的程式，這樣你就可以測試和運 行 你的程式。 除錯 工 具：幫助你發現和修復程式中的錯誤，允許你逐 行 執 行 程式碼並檢查變數的值。 版本控制整合：例如 Git，可以幫助你管理程式碼的版本，追蹤更改，協作開發。 圖形 用戶 界 面 （GUI）設計 工 具：如果你在開發有圖形界 面 的應 用 程式（比如 iOS App），這個 工 具可 以幫助你設計和預覽界 面 。 舉個例 子 ，就像你在學習 Swift 開發 iOS App， 一 個很受歡迎的 IDE 就是 Xcode。Xcode 不僅可以讓你 編寫 Swift 程式碼，還提供了非常 方 便的圖形界 面 設計 工 具（Storyboard 和 SwiftUI），讓你能夠直觀 地設計和測試你的 App。 希望這樣的解釋對你有幫助，讓你對 IDE 有更清晰的了解！如果還有其他問題，隨時問我哦！😊
41. 練習 Customize ChatGPT
42. GPT 的記憶功能
43. • 範例: Tutor Me • 不會直接給解答， 而 是透過提問 一 步步引導我們思考和解決問題。 • 請 AI 給提 示 ，不要直接給答案 使 用 GPTs 學程式
44. • 比 方 Tutor Me 練習: 玩玩各種有趣的 GPTs
45. 自 建 GPTs (訂閱 用 戶 ） • 將 自己 常 用 的功能變成客製的 GPT • 上傳檔案讓客製的 GPT 有特別的知識 • 免費 用戶 可以使 用 別 人 建立的 GPTs，不能 自己 建立 • 彼得潘 自 建的範例 • 縮排程式 • 將英 文 翻譯成中 文 ，可愛的中 文 ，簡單的英 文 • 將問題翻成英 文 ，然後 用 英 文 和中 文 回答程式問題
46. 自 建 GPTs (訂閱 用 戶 ）
47. 自 建 GPTs (訂閱 用 戶 ）
48. • Perplexity Pages • 連結 • YouTube • Google NotebookLM • 連結 • Notion AI • 連結 方 便整理知識寫筆記的 AI
49. 練習: 玩玩 Google NotebookLM
50. 請 AI 用 table format 說明比較 • give me a table, 用 台灣中 文 比較 Python & Swift • 請 AI 以 table 說明程式/演算法/資料結構 • 用 table format 說明遞迴(recursive) function 運算的過程 常指定的 AI 回答格式
 table、list、JSON
51. • 連結 • 目 前主流 AI 在網 頁 上回答的完整內容都是 markdown 格式 • GPT 分享的回答也可以公開讓 Google 搜尋 使 用 gist 存放 markdown 格式的 AI 回答
52. • 請 AI 小 老師教我輾轉相除法 • AI 對話 • https://mermaid.live/ 請 AI 用 mermaid 畫流程圖
53. 請 AI 畫 心 智圖 • 連結
54. 練習 請 AI 用 table format 說明、畫流程圖 & 心 智圖
55. • 範例: 你知道 Xcode 15 的 Quick Actions 嗎 ? VS Code 和 Android Studio 有類似的功能嗎 ? AI 對話 請 AI 教 IDE 的操作
56. 請 AI 比喻/寫押韻 文 章 / 編故事 / 知名筆記法 / 寫範例教程式 • 請 AI 用 比喻的 方 式說明 • AI 對話 • 寫押韻的程式教學 文 章 • 例 子 : 介紹 python 的變數 • 請 AI 編有趣的故事教程式 • 例 子 : 請編 一 個夏洛克福爾摩斯的猜凶 手 的推理故事，說明 python 的變數 • 用 知名筆記法製作上課筆記 / 重點整理 • 寫有趣的程式範例 • 幫助程式老師寫範例的 小 幫 手 GitHub Copilot
57. 請 AI 提供命名的建議 •連結 我想 用 python 宣告 一 個儲存某個學 生 名字的變數， 請列出三個建議的名字，並針對每個建議說明理由。
58. 搭配 GitHub Copilot VS Code 的 rename suggestions
59. 請 AI 出題 目 • 請 AI 出 一 些變數計算的練習題 • function 裡印出計算結果的題 目 — 請 AI 出題 • AI 出的 else if 題 目 • 適合新 手 的 for loop 迴圈練習題 • 寫不出來也可以請 AI 寫解答
60. 看不懂程式 • 請 AI 加注解或說明 • AI 對話 • 請 AI 將變數名改成容易理解的台灣中 文 • 對話
61. • 說明 • 範例: 請以 方文山 的風格寫注解，請以恐怖的風格寫注解 請 AI 幫程式加上各式風格的注解
62. 請 AI 修正錯誤(debug) • 貼上錯誤的程式 • 範例 • 貼圖請 AI debug
63. • 模擬上課學程式的體驗 ，等學 生 回答完成了 AI 才講解下個步驟 • 連結 • 請 一 步 一 步慢慢教，列出 一 連串的步驟 • 連結 • Demo 範例 請 AI 一 步 一 步慢慢教
64. 使 用 Edge Copilot chat 請 AI 說明程式的 文 件 https://developer.apple.com/documentation/swiftui/datepicker 教我如何使 用 它
65. 使 用 AI 快速建立程式資料 連結 用 struct Zodiac 定義型別，建立 一 個 array，成 員的型別是 Zodiac，array 裡包含 十二 星座，寫 中 文 var zodiacs = [ Zodiac(emoji: "♈ ", name: " 白羊 座", date: "3 月 21 日 -4 月 19 日 ", strengths: "勇敢，決 心 ， 自 信，熱情，樂觀"), Zodiac(emoji: "♉ ", name: " 金牛 座", date: "4 月 20 日 -5 月 20 日 ", strengths: "可靠，毅 力 ， 力 量，決 心 "), Zodiac(emoji: "♊ ", name: "雙 子 座", date: "5 月 21 日 -6 月 20 日 ", strengths: "靈活，多才多藝，好奇 心 ，溝通能 力 "), Zodiac(emoji: "♋ ", name: "巨蟹座", date: "6 月 21 日 -7 月 22 日 ", strengths: "感情智慧，照顧，關 心 ，保護"), Zodiac(emoji: "♌ ", name: "獅 子 座", date: "7 月 23 日 -8 月 22 日 ", strengths: "尊嚴，領導 力 ，魅 力 ， 自 信"), Zodiac(emoji: "♍ ", name: "處女座", date: "8 月 23 日 -9 月 22 日 ", strengths: "分析，注意細節，實 用 "), Zodiac(emoji: "♎ ", name: "天秤座", date: "9 月 23 日 -10 月 22 日 ", strengths: "外交，公平，正義"), Zodiac(emoji: "♏ ", name: "天蠍座", date: "10 月 23 日 -11 月 21 日 ", strengths: "激情，毅 力 ，決 心 "), Zodiac(emoji: "♐ ", name: "射 手 座", date: "11 月 22 日 -12 月 21 日 ", strengths: "熱情，冒險，幽默"), Zodiac(emoji: "♑ ", name: "摩羯座", date: "12 月 22 日 -1 月 19 日 ", strengths: "決 心 ，紀律，野 心 "), Zodiac(emoji: "♒ ", name: " 水 瓶座", date: "1 月 20 日 -2 月 18 日 ", strengths: "創新，創造 力 ，智慧"), Zodiac(emoji: "♓ ", name: "雙 魚 座", date: "2 月 19 日 -3 月 20 日 ", strengths: "同情 心 ，直覺，藝術天賦") ] struct Zodiac { let emoji: String let name: String let date: String let strengths: String }
66. 練習 使 用 AI 快速建立程式資料
67. 請 AI 解答程式問題 沒有連網的 GPT 用 python 程式計算 一 家五 口 (兩個 大人 ， 一 個學 生 ， 一 個 學童， 一 個幼童)去六福村主題遊樂園要付多少錢？ 票價資訊如下 成 人 （18歲以上）：NT$ 1,199 學 生 （12 至 18歲）：NT$ 1,099 學童（6 至 12歲或 身高 120cm）：NT$ 899 幼童（3 至 6歲或 身高 100cm）：NT$ 699 AI 對話
68. 請 AI 解答程式問題 連網和執 行 python 程式的 GPT 用 python 程式計算 一 家五 口 (兩個 大人 ， 一 個學 生 ， 一 個 學童， 一 個幼童)去六福村主題遊樂園要付多少錢？ 票價資訊參考以下連結 https://www.leofoovillage.com.tw/Infos/Tickets/ AI 對話 ps: 目 前 AI 只能執 行 Python 程式
69. 請 Gemini 寫 Python 程式 & 執 行 程 式，然後將程式輸出到 Colab / Replit 連結
70. 高 中 生 程式解題系統、APCS 題 目 、LeetCode，AtCoder 請 AI 寫程式解題 • 連結 • AI 也可以執 行 Python 程式測試結果是否正確， • 請 AI 出類似的題 目 • AI 的強項是模仿 • 連結
71. • 高 中 生 程式解題系統(ZeroJudge) • 歷屆 APCS 題號 1 的題 目 (比較簡單) 練習: 請 AI 寫 Python 程式 & 執 行 程式
72. 使 用 GPT 搜尋網路資料 連結 用 JSON 寫 一 個台灣公 車 307 的路線資訊，路線資訊如下 https://ebus.gov.taipei/EBus/VsSimpleMap?routeid=0100030700&gb=1
73. • 連結 請 AI 將網 頁 或 pdf 的資料整理成 array
74. 使 用 AI 寫 python 網 頁 爬蟲程式 連結
75. • 連結 • 請 AI 提供程式變數/function/型別命名的建議 • 提升程式可讀性。 • 幫程式加上注解。 • 程式縮排。 • 列出可改進的地 方 ，重構程式，打分數。(code review，refactor code) • 請 AI 寫作業，比較 AI 跟 自己 的差異。 • 範例 • 範例 1 • 範例 2 請 AI 幫忙改進程式
76. • 計算陣列中所有元素的和 • 將字串變成數字的各種 方 法 • 製作 水 平捲動畫 面 的各種寫法 利 用 AI 學習解決程式問題的各種 方 法
77. • 範例: 請問 curl 指令如何上傳圖片 請教 AI terminal 指令的操作
78. • 連結 請 AI 寫程式專案的 README
79. • 研究新功能 • 想在清單 頁面 加入搜尋功能，請 AI 產 生 清單 頁面 的程式，再 自 己 加入搜尋功能的相關程式 • 請 AI 寫 一 些常 用 功能 • 判斷 email 格式是否正確 • 測試 API 的串接 • 請 AI 製作登入畫 面 ，再加入 自己 寫的 API 串接程式　 請 AI 快速寫出某個畫 面 / 功能的程式(template / boilerplate code)
80. • 已經會 一 種程式語 言 /技術，利 用 AI 可快速學習另 一 種程式語 言 / 技術 • 彼得潘專長是寫 Swift iOS App，利 用 AI 快速學習開發 Dart Flutter App • 範例 • 將某段 Swift 程式變成 Dart 程式 • Dart 是否有類似 Swift 的 String interpolation ? • 請 用 iOS 17 的 SwiftData 寫 一 個教學範例 利 用 AI 快速學習新技術
81. • 寫 unit test • 寫程式 文 件 • 寫 大 量測資驗證程式是否正確 其它 AI 在程式上的應 用
82. 用 AI 學程式的書 • AI-Assisted Programming: Better Planning, Coding, Testing, and Deployment • Coding with AI For Dummies • Learn AI-assisted Python Programming: With GitHub Copilot and ChatGPT
83. 不會寫程式 ? 不想學程式 ? 請 AI 寫 ps: 不過 AI 也會出錯，懂 一 點程式才知道如何修正
84. 將美食 App 變成電影 App 請 AI 修改現有程式產 生 新 App 連結 AI 的強項是模仿
85. 上傳 App 畫 面 ，請 AI 製作圖片裡的畫 面 / 元件 • 製作 App 畫 面 的 小 元件 • 製作整個 App 畫 面
86. • 訂飲料 App • AI 通常不會 一 次寫對，要有耐 心 跟它不斷來回溝通修正問題。 • 請 AI 開發 • 連結 • 請 AI 依據範例和 Airtable API 文 件開發串接訂單 CRUD API 的 Swift 程式 • 請 AI 讀取飲料 menu 的網 頁生 成 JSON。 • 請 AI 用 SwiftUI 開發訂飲料 App，搭配 CURD API & menu 的 JSON。 請 AI 幫忙， 一 小 時開發訂飲料 App
87. 使 用 AI 開發英 文 單字的 App 和 JSON 資料 連結
88. 程式專 門 的 AI
89. • 未來 AI 應該會是 IDE 的必備功能 • 結合 AI 的 IDE • Xcode • GitHub Copilot • Android Studio 的 Gemini • Project IDX 的 Gemini • Google Colab • replit • JetBrains AI 結合 AI 的 IDE
90. • Visual Copilot • Cursor • Phind • Amazon Q Developer • Codestral • Meta Code Llama • Tabnine • CodiumAI 其它程式專 門 AI
91. GitHub Copilot • 連結 • 月 費 10 美 金 • 老師 / 學 生身 份可免費使 用 • Copilot 很常提 示 範例的程 式，常常程式碼都不 用自己 打 了。不過新 手 學程式最好還是 自己 打比較好
92. Code suggestions 打完注解後按 enter 或打程式時會出現程式的提 示 輸入 q: 的注解可以問答
93. 多個建議的程式區塊 點選 Open Completions Panel 可 看到更多建議
94. 跟 GitHub Copilot 聊天 在單獨的聊天視窗聊天 寫程式可以出 一 張嘴了
95. 聊天的特別指令
96. Inline Chat 在程式裡叫出聊天框框
97. 說明程式，修正問題、產 生 文 件，產 生 test 選取程式後再問 AI
98. • 連結 • predictive code completion Xcode
99. • Google Colab Colab
100. Colab
101. • Project IDX 的 Gemini Project IDX 例 子 : 將 文 字顏 色 設為紅 色 、將結果顯 示 在下 一頁
102. 練習: Project IDX 或 Google Colab
103. • OpenAI • 連結 • 可汗學院 用 GPT-4 協助孩 子 學習 • 串接 ChatGPT API • Gemini • 連結 • 大 獎是電動 車 的比賽 • Claude • 連結 串接 AI 的 API 開發 App
104. 從設計圖 生 成程式 Visual Copilot 連結
105. • 連結 • 介紹 開源的 AI 平台: Hugging Face
106. • 連結 AI 工 程師 Devin
107. • 連結 使 用 AI Gamma App 設計投影片
108. 學 生 常問我，有了 AI 還要學程式嗎？ 面 試時還是要有不靠 AI 寫出程式的能 力 ， 如果有兩個 面 試者， 志明靠 AI 寫出 面 試題 目 ， 春嬌不靠 AI 寫出 面 試題 目 ， 公司會選志明還是春嬌呢 ?
109. • 不會程式的 人 可以請 AI 當 小 老師學程式 • 會寫程式的 人 可以請 AI 當助理提升開發效率 AI 是我們的好朋友
110. 聯絡彼得潘 •LINE: deeplovepeterpan •FB: https://www.facebook.com/iphone.peterpan
111. Q & A