狠狠撸

狠狠撸Share a Scribd company logo
跟著 AI 學習 Angular
黃升煌 Mike Huang
多奇數位創意有限公司
Angular GDE
活用 AI 讓你輕鬆快速掌握任何知識
for NYCU GDSC
About Me
黃升煌 Mike
● 著作
○打通 RxJS 任督二脈
●Title
○多奇數位創意有限公司
○Angular GDE
○Microsoft MVP
● Awards
○第 12 屆 iT 邦幫忙鐵人賽冠軍
○2019 iT 邦幫忙鐵人賽優選
○2018 iT 邦幫忙鐵人賽冠軍
https://github.com/wellwind
https://www.facebook.com/fullstackledder
https://fullstackladder.dev
今天的主題是
Angular & AI
我只想講 AI…
其實我根本不想跟你講 Angular
跟著 AI 學習 Angular
黃升煌 Mike Huang
多奇數位創意有限公司
Angular GDE
活用 AI 讓你輕鬆快速掌握任何知識
for NYCU GDSC
學 Angular 不如學 AI
學會了使用 AI,想學什麼還會困難嗎?
黃升煌 Mike Huang
多奇數位創意有限公司
Angular GDE
跟著 AI 學習 Angular
活用 AI 讓你輕鬆快速掌握任何知識
for NYCU GDSC
https://technews.tw/2023/02/10/chatgpt-google-bard-openai/
簡介 ChatGPT
當紅 AI 工具
?基於 GPT 系列模型的聊天機器人
?具有對自然語言的深度理解與生成能力
?能與客戶進行對話,回答問題
GPT 運作原理
搞懂原理才不會亂用
?GPT 為 Generative Pre-trained Transformer 的縮寫
?預先學習大量的文本資料,產生出預測下一個單詞、句子等的模型
?目前訓練資料只到 2021/09 為止 (可以自行訓練)
?微調成可以處理各種自然語言的任務,如語言生成、文版分類、機器翻譯等
ChatGPT 使用模型
?目前 ChatGPT 主要使用 GPT-3.5 模型
?付費版可以「有限制」使用 GPT-4 模型
? GPT-4 的訓練資料更多,且推理、語言能力更強
? GPT-4 模型本身支援文字和圖片輸入 (ChatGPT 不支援)
GPT-3.5 vs GPT-4
簡單來說,就是透過一個
「文字接龍」的模型,
來產生高質量的內容!
文字接龍
天
氣
空
色
才
使
真
今天的
文字接龍
天
氣
空
色
才
使
真
今天的
很乾爽
很美麗
很明亮
如何訓練出文字接龍模型?
1. 數據收集:網絡上收集了大量的文字數據,包括百科全書、維基百科、新聞文章、小說等等。
2. 預訓練:使用「無監督學習」的技術,對大量文本數據進行預訓練。
3. 微调:完成预训练后,使用微调(蹿颈苍别-迟耻苍颈苍驳)方法,将模型应用於特定的自然语言任务中。
ChatGPT背後「血汗工廠」:時薪40、每小時標註2萬單詞,數據標註員有多慘?
任何新穎技術早期,都是血汗
雖然我不想教你 Angular,但還是看看
如何投透過 AI 學習 Angular 吧!
Demo
Prompting Engineering
與 AI 对话不可不知的沟通方式
Prompt Engineering
?Prompt Engineering:自然語言模型優化輸出的工程
?以指導者的角度提供上下文,讓自然語言模型能夠更精準的知道你的要求
?提供「角色、任務和格式」可以讓回答更貼近需求
咒語工程
角色
提供前提
任務
說明目標
格式
期望結果
Prompt Engineering 案例
請針對以下程式碼進行
code review 並告訴我結果
程式碼 code review
請你扮演 C# 的專家,
針對以下程式碼,根據
「可讀性、效能與安全性」
進行 code review,並告訴我結果
更加明確描述需求
Prompt Engineering 案例
語言偵測
限定格式
舉例說明
學習與人溝通,也要學習與 AI 溝通
享受一下當老闆或主管那種
只出張嘴的快感吧!
學習與人溝通,也要學習與 AI 溝通
其他 AI 工具介紹
Midjourney
?最強大的提示文字轉圖片工具
?需付費
https://www.midjourney.com/
Bing Image Creator
?微軟牌圖片產生器
?免費
https://www.bing.com/images/create
Bing Chat
?微軟牌 AI 聊天機器人
?需要安裝 Edge 瀏覽器
?具有連結網路搜尋功能
Google Bard
?Google 牌 AI 聊天機器人
?具有連結網路搜尋功能
?目前不支援中文
https://bard.google.com/
Chat GPT 指令大全
https://www.explainthis.io/zh-hant/chatgpt/posts
Gamma
給予目標、基本內容,即可自動透過 AI 產生文件、簡報
https://gamma.app
Tome
比較簡易的 AI 簡報產生器
https://beta.tome.app/
Open AI API
找不到想要的應用?自己串 API 吧!
https://platform.openai.com/docs/introduction
GitHub Copilot
?目前最強的 AI 程式碼撰寫輔助工具
? 30 天免費試用
?學生免費 (應該)
GitHub Student Developer Pack
https://github.com/features/copilot
如何用正確心態面對 AI?
AI 是否會取代我們的工作?
會!!這是是遲早的事
不過現在還不會…吧
https://www.businesstoday.com.tw/article/category/183015/post/202303230039/
AI 不一定永遠是對的
給你查網路,
總結出來的資料
依然還是錯的…
澄清一下,
台灣有 3 位
Angular GDE
Bing Chat 一定
是故意答錯的…
在 AI 取代我們之前
先學習出一張嘴 駕馭 AI 的能力!
Thank You & QA
黃升煌 Mike Huang
多奇數位創意有限公司
Angular GDE
for NYCU GDSC
https://github.com/wellwind
https://www.facebook.com/fullstackledder
https://fullstackladder.dev

More Related Content

Similar to 陽明交大 - 跟著 AI 學習 Angular (15)

打造研发工程师的核心竞争力
打造研发工程师的核心竞争力打造研发工程师的核心竞争力
打造研发工程师的核心竞争力
毅 吕
?
Google analytics
Google analyticsGoogle analytics
Google analytics
Shih-En Chou
?
Why use dependency injection
Why use dependency injectionWhy use dependency injection
Why use dependency injection
彥彬 洪
?
20201208 au smart_image_classification_omni_xri
20201208 au smart_image_classification_omni_xri20201208 au smart_image_classification_omni_xri
20201208 au smart_image_classification_omni_xri
OmniXRI Studio
?
Event5-Build With AI 2025 狠狠撸 Vertex AI.pdf
Event5-Build With AI 2025 狠狠撸 Vertex AI.pdfEvent5-Build With AI 2025 狠狠撸 Vertex AI.pdf
Event5-Build With AI 2025 狠狠撸 Vertex AI.pdf
grasonjas
?
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
jasonzheng50
?
初探GitHub Copilot - 2025 Global AI Bootcamp
初探GitHub Copilot - 2025 Global AI Bootcamp初探GitHub Copilot - 2025 Global AI Bootcamp
初探GitHub Copilot - 2025 Global AI Bootcamp
佳新 陳
?
Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手
Piece Chao
?
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
Will Huang
?
What's New In 2009
What's New In 2009What's New In 2009
What's New In 2009
Lowell
?
北区13校骋顿厂颁联合流会.辫诲蹿
北区13校骋顿厂颁联合流会.辫诲蹿北区13校骋顿厂颁联合流会.辫诲蹿
北区13校骋顿厂颁联合流会.辫诲蹿
ssuserded2d4
?
Web view on the way
Web view on the wayWeb view on the way
Web view on the way
Liddle Fang
?
玩轉 Schematics - Modern Web 2018
玩轉 Schematics - Modern Web 2018玩轉 Schematics - Modern Web 2018
玩轉 Schematics - Modern Web 2018
升煌 黃
?
How to debug using GDB
How to debug using GDBHow to debug using GDB
How to debug using GDB
Pinkus Chang
?
与设计架构当朋友
与设计架构当朋友 与设计架构当朋友
与设计架构当朋友
Win Yu
?
打造研发工程师的核心竞争力
打造研发工程师的核心竞争力打造研发工程师的核心竞争力
打造研发工程师的核心竞争力
毅 吕
?
Why use dependency injection
Why use dependency injectionWhy use dependency injection
Why use dependency injection
彥彬 洪
?
20201208 au smart_image_classification_omni_xri
20201208 au smart_image_classification_omni_xri20201208 au smart_image_classification_omni_xri
20201208 au smart_image_classification_omni_xri
OmniXRI Studio
?
Event5-Build With AI 2025 狠狠撸 Vertex AI.pdf
Event5-Build With AI 2025 狠狠撸 Vertex AI.pdfEvent5-Build With AI 2025 狠狠撸 Vertex AI.pdf
Event5-Build With AI 2025 狠狠撸 Vertex AI.pdf
grasonjas
?
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
jasonzheng50
?
初探GitHub Copilot - 2025 Global AI Bootcamp
初探GitHub Copilot - 2025 Global AI Bootcamp初探GitHub Copilot - 2025 Global AI Bootcamp
初探GitHub Copilot - 2025 Global AI Bootcamp
佳新 陳
?
Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手Codeigniter 3.0 之 30 分鐘就上手
Codeigniter 3.0 之 30 分鐘就上手
Piece Chao
?
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
Will Huang
?
What's New In 2009
What's New In 2009What's New In 2009
What's New In 2009
Lowell
?
北区13校骋顿厂颁联合流会.辫诲蹿
北区13校骋顿厂颁联合流会.辫诲蹿北区13校骋顿厂颁联合流会.辫诲蹿
北区13校骋顿厂颁联合流会.辫诲蹿
ssuserded2d4
?
Web view on the way
Web view on the wayWeb view on the way
Web view on the way
Liddle Fang
?
玩轉 Schematics - Modern Web 2018
玩轉 Schematics - Modern Web 2018玩轉 Schematics - Modern Web 2018
玩轉 Schematics - Modern Web 2018
升煌 黃
?
How to debug using GDB
How to debug using GDBHow to debug using GDB
How to debug using GDB
Pinkus Chang
?
与设计架构当朋友
与设计架构当朋友 与设计架构当朋友
与设计架构当朋友
Win Yu
?

More from 升煌 黃 (12)

使用 Passkeys 打造無密碼驗證服務
使用 Passkeys 打造無密碼驗證服務使用 Passkeys 打造無密碼驗證服務
使用 Passkeys 打造無密碼驗證服務
升煌 黃
?
用 Standalone Component 來寫 Angular 吧! - STUDY4.TW 2023 小聚 - 聊前端
用 Standalone Component 來寫 Angular 吧! - STUDY4.TW 2023 小聚 - 聊前端 用 Standalone Component 來寫 Angular 吧! - STUDY4.TW 2023 小聚 - 聊前端
用 Standalone Component 來寫 Angular 吧! - STUDY4.TW 2023 小聚 - 聊前端
升煌 黃
?
.NET Conf Taiwan 2022 - Tauri - 前端人員也能打造小巧快速的 Windows 應用程式
.NET Conf Taiwan 2022 - Tauri -前端人員也能打造小巧快速的 Windows 應用程式.NET Conf Taiwan 2022 - Tauri -前端人員也能打造小巧快速的 Windows 應用程式
.NET Conf Taiwan 2022 - Tauri - 前端人員也能打造小巧快速的 Windows 應用程式
升煌 黃
?
DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!
DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!
DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!
升煌 黃
?
gRPC - 打造輕量、高效能的後端服務
gRPC - 打造輕量、高效能的後端服務gRPC - 打造輕量、高效能的後端服務
gRPC - 打造輕量、高效能的後端服務
升煌 黃
?
Modern web 2020 - 使用 Nx 管理超大型前後端專案
Modern web 2020 - 使用 Nx 管理超大型前後端專案Modern web 2020 - 使用 Nx 管理超大型前後端專案
Modern web 2020 - 使用 Nx 管理超大型前後端專案
升煌 黃
?
Angular Taiwan 2019 - Schematics Workshop
Angular Taiwan 2019 - Schematics WorkshopAngular Taiwan 2019 - Schematics Workshop
Angular Taiwan 2019 - Schematics Workshop
升煌 黃
?
Angular Meetup 04 - Angular PWA 之沒有網路的日子 20190731
Angular Meetup 04 - Angular PWA 之沒有網路的日子 20190731Angular Meetup 04 - Angular PWA 之沒有網路的日子 20190731
Angular Meetup 04 - Angular PWA 之沒有網路的日子 20190731
升煌 黃
?
翱础耻迟丑2介绍
翱础耻迟丑2介绍翱础耻迟丑2介绍
翱础耻迟丑2介绍
升煌 黃
?
Docker - 30秒生出100台伺服器
Docker - 30秒生出100台伺服器Docker - 30秒生出100台伺服器
Docker - 30秒生出100台伺服器
升煌 黃
?
敏捷开发与厂肠谤耻尘
敏捷开发与厂肠谤耻尘敏捷开发与厂肠谤耻尘
敏捷开发与厂肠谤耻尘
升煌 黃
?
Test Driven Development
Test Driven DevelopmentTest Driven Development
Test Driven Development
升煌 黃
?
使用 Passkeys 打造無密碼驗證服務
使用 Passkeys 打造無密碼驗證服務使用 Passkeys 打造無密碼驗證服務
使用 Passkeys 打造無密碼驗證服務
升煌 黃
?
用 Standalone Component 來寫 Angular 吧! - STUDY4.TW 2023 小聚 - 聊前端
用 Standalone Component 來寫 Angular 吧! - STUDY4.TW 2023 小聚 - 聊前端 用 Standalone Component 來寫 Angular 吧! - STUDY4.TW 2023 小聚 - 聊前端
用 Standalone Component 來寫 Angular 吧! - STUDY4.TW 2023 小聚 - 聊前端
升煌 黃
?
.NET Conf Taiwan 2022 - Tauri - 前端人員也能打造小巧快速的 Windows 應用程式
.NET Conf Taiwan 2022 - Tauri -前端人員也能打造小巧快速的 Windows 應用程式.NET Conf Taiwan 2022 - Tauri -前端人員也能打造小巧快速的 Windows 應用程式
.NET Conf Taiwan 2022 - Tauri - 前端人員也能打造小巧快速的 Windows 應用程式
升煌 黃
?
DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!
DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!
DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!
升煌 黃
?
gRPC - 打造輕量、高效能的後端服務
gRPC - 打造輕量、高效能的後端服務gRPC - 打造輕量、高效能的後端服務
gRPC - 打造輕量、高效能的後端服務
升煌 黃
?
Modern web 2020 - 使用 Nx 管理超大型前後端專案
Modern web 2020 - 使用 Nx 管理超大型前後端專案Modern web 2020 - 使用 Nx 管理超大型前後端專案
Modern web 2020 - 使用 Nx 管理超大型前後端專案
升煌 黃
?
Angular Taiwan 2019 - Schematics Workshop
Angular Taiwan 2019 - Schematics WorkshopAngular Taiwan 2019 - Schematics Workshop
Angular Taiwan 2019 - Schematics Workshop
升煌 黃
?
Angular Meetup 04 - Angular PWA 之沒有網路的日子 20190731
Angular Meetup 04 - Angular PWA 之沒有網路的日子 20190731Angular Meetup 04 - Angular PWA 之沒有網路的日子 20190731
Angular Meetup 04 - Angular PWA 之沒有網路的日子 20190731
升煌 黃
?
翱础耻迟丑2介绍
翱础耻迟丑2介绍翱础耻迟丑2介绍
翱础耻迟丑2介绍
升煌 黃
?
Docker - 30秒生出100台伺服器
Docker - 30秒生出100台伺服器Docker - 30秒生出100台伺服器
Docker - 30秒生出100台伺服器
升煌 黃
?
敏捷开发与厂肠谤耻尘
敏捷开发与厂肠谤耻尘敏捷开发与厂肠谤耻尘
敏捷开发与厂肠谤耻尘
升煌 黃
?
Test Driven Development
Test Driven DevelopmentTest Driven Development
Test Driven Development
升煌 黃
?

陽明交大 - 跟著 AI 學習 Angular