SlideShare 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. 微調:完成預訓練後,使用微調(fine-tuning)方法,將模型應用於特定的自然語言任務中。
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)

PPTX
打造研发工程师的核心竞争力
毅 吕
 
PDF
Google analytics
Shih-En Chou
 
PDF
Why use dependency injection
彥彬 洪
 
PDF
20201208 au smart_image_classification_omni_xri
OmniXRI Studio
 
PDF
Event5-Build With AI 2025 Slide Vertex AI.pdf
grasonjas
 
PPTX
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
jasonzheng50
 
PDF
初探GitHub Copilot - 2025 Global AI Bootcamp
佳新 陳
 
PPTX
Codeigniter 3.0 之 30 分鐘就上手
Piece Chao
 
PPTX
极速 Angular 开发:效能调校技巧 (ngChina 2019)
Will Huang
 
PPTX
What's New In 2009
Lowell
 
PDF
北區13校GDSC聯合流會.pdf
ssuserded2d4
 
PDF
Web view on the way
Liddle Fang
 
PPTX
玩轉 Schematics - Modern Web 2018
升煌 黃
 
PDF
How to debug using GDB
Pinkus Chang
 
PDF
與設計架構當朋友
Win Yu
 
打造研发工程师的核心竞争力
毅 吕
 
Google analytics
Shih-En Chou
 
Why use dependency injection
彥彬 洪
 
20201208 au smart_image_classification_omni_xri
OmniXRI Studio
 
Event5-Build With AI 2025 Slide Vertex AI.pdf
grasonjas
 
Insider Dev Tour - Taipei Productive and Fun Web Development with NodeJS and ...
jasonzheng50
 
初探GitHub Copilot - 2025 Global AI Bootcamp
佳新 陳
 
Codeigniter 3.0 之 30 分鐘就上手
Piece Chao
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
Will Huang
 
What's New In 2009
Lowell
 
北區13校GDSC聯合流會.pdf
ssuserded2d4
 
Web view on the way
Liddle Fang
 
玩轉 Schematics - Modern Web 2018
升煌 黃
 
How to debug using GDB
Pinkus Chang
 
與設計架構當朋友
Win Yu
 

More from 升煌 黃 (12)

PDF
使用 Passkeys 打造無密碼驗證服務
升煌 黃
 
PDF
用 Standalone Component 來寫 Angular 吧! - STUDY4.TW 2023 小聚 - 聊前端
升煌 黃
 
PDF
.NET Conf Taiwan 2022 - Tauri - 前端人員也能打造小巧快速的 Windows 應用程式
升煌 黃
 
PDF
DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!
升煌 黃
 
PDF
gRPC - 打造輕量、高效能的後端服務
升煌 黃
 
PDF
Modern web 2020 - 使用 Nx 管理超大型前後端專案
升煌 黃
 
PDF
Angular Taiwan 2019 - Schematics Workshop
升煌 黃
 
PDF
Angular Meetup 04 - Angular PWA 之沒有網路的日子 20190731
升煌 黃
 
PPTX
OAuth2介紹
升煌 黃
 
PPTX
Docker - 30秒生出100台伺服器
升煌 黃
 
PPTX
敏捷開發與Scrum
升煌 黃
 
PPTX
Test Driven Development
升煌 黃
 
使用 Passkeys 打造無密碼驗證服務
升煌 黃
 
用 Standalone Component 來寫 Angular 吧! - STUDY4.TW 2023 小聚 - 聊前端
升煌 黃
 
.NET Conf Taiwan 2022 - Tauri - 前端人員也能打造小巧快速的 Windows 應用程式
升煌 黃
 
DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!
升煌 黃
 
gRPC - 打造輕量、高效能的後端服務
升煌 黃
 
Modern web 2020 - 使用 Nx 管理超大型前後端專案
升煌 黃
 
Angular Taiwan 2019 - Schematics Workshop
升煌 黃
 
Angular Meetup 04 - Angular PWA 之沒有網路的日子 20190731
升煌 黃
 
OAuth2介紹
升煌 黃
 
Docker - 30秒生出100台伺服器
升煌 黃
 
敏捷開發與Scrum
升煌 黃
 
Test Driven Development
升煌 黃
 
Ad

陽明交大 - 跟著 AI 學習 Angular