ChatGPT × Ionic × Angular 全方位技術整合實戰：輕鬆打造跨平台 AI 英語口說導師 APP（iThome鐵人賽系列書）
陳碩元
買這商品的人也買了...
-
大話設計模式$620$490 -
HTML & CSS : 網站設計建置優化之道 (HTML and CSS: Design and Build Websites)$580$458 -
精通 PHP & MySQL 網頁開發, 5/e (PHP and MySQL Web Development, 5/e)$680$578 -
Python 也可以這樣學$580$452 -
RabbitMQ 實戰指南$474$450 -
JavaScript 資料結構及演算法實作 (暢銷回饋版)$300$234 -
晉昇軟體最高殿堂：Jenkins2 持續整合大師之路$600$510 -
Python 技術者們 - 練功！老手帶路教你精通正宗 Python 程式 (The Quick Python Book, 3/e)$780$616 -
爬蟲在手 資料我有：7堂課學會高效率 Scrapy 爬蟲（iT邦幫忙鐵人賽系列書）$450$225 -
矽谷工程師教你 Kubernetes：史上最全 CI/CD 中文應用指南（iT邦幫忙鐵人賽系列書）$600$468 -
Python 架站特訓班：Django 3 最強實戰, 2/e (附影音/範例)$480$379 -
大話 AWS 雲端架構：雲端應用架構圖解輕鬆學, 2/e$620$484 -
深入淺出 C# : 運用 C# 和 .Net Core 編寫真正的程式, 4/e (Head First C#: A Learner's Guide to Real-World Programming with C#, Xaml, and .Net, 4/e)$980$774 -
打通 RxJS 任督二脈：從菜雞前進老鳥必學的關鍵知識（iT邦幫忙鐵人賽系列書）$620$484 -
領域驅動設計與 .NET Core：應用 DDD 原則，探索軟體核心複雜度 (Hands-On Domain-Driven Design with .NET Core)$780$608 -
圖像 Angular 開發入門：打造高靈活度的網頁應用程式 (iT邦幫忙鐵人賽系列書)$600$468 -
Clean Architecture 無瑕的程式碼－整潔的軟體設計與架構篇 + 實作篇－在整潔的架構上弄髒你的手 (雙書合購)$1,080$820 -
駕馭 ChatGPT 4: 探索 Azure OpenAI 與 Cognitive Service for Language 開發實踐 (使用.NET 與 Node.js)$650$455 -
C# 也能完整 AI - TensorFlow.NET 實戰現場$1,080$853 -
K8S 自學聖經：10大核心模板快速入門【圖解教學】$790$624 -
新範式來臨 - 用 PyTorch 了解 LLM 開發微調 ChatGLM 全過程$980$774 -
新一代 Keras 3.x 重磅回歸：跨 TensorFlow 與 PyTorch 建構 Transformer、CNN、RNN、LSTM 深度學習模型$750$593 -
極速 ChatGPT 開發者兵器指南：跨界整合 Prompt Flow、LangChain 與 Semantic Kernel 框架$680$530 -
LangChain 奇幻旅程：OpenAI x Gemini x 多模態應用開發指南$680$530 -
Redmine 專案管理無痛攻略：70個問題集 x 專屬教學影片，從入門到精通一本全搞定！(iThome鐵人賽系列書)$650$507
商品描述
- 本書內容改編自第 15 屆 iThome 鐵人賽 Mobile Development 組冠軍系列文章《Ionic 結合 ChatGPT - 30天 打造 AI 英語口說導師 APP》。書中將帶領讀者深入瞭解 Ionic 和 Angular 兩大核心技術，並學習如何利用它們開發功能豐富的行動應用程式。同時，也會體驗到 Ionic 與 Flutter、React Native 這些等主流框架的異同，幫助你做出最適合的開發選擇。
此外，隨著人工智慧的快速發展，大型語言模型的應用將成為未來的趨勢。本書將帶你學習如何串接現在最流行的 ChatGPT 大型語言模型，並了解 OpenAI 和 AI 語音技術是如何融入我們的日常應用之中。
只要跟著本書一步一步實作，你將從無到有打造出一款 AI 英語口說導師 APP。並且學習到如何將應用程式上架到商店，讓你親自體驗從開發到上線的成就感。透過本書的引導，你將能夠利用所學到的技術，創造多元價值，並在未來打造出獨特且有趣的應用程式。
重點摘要
✦ 精通核心技術
深入掌握 Ionic 與 Angular
✦ 跨平台新視野
體驗 Ionic 與主流框架的不同之處
✦ AI 趨勢應用
將 AI 智慧融入日常應用之中
✦ 從零到上架
步步引導，實現應用上架的成就
目標讀者
● 對跨平台應用開發感興趣的技術愛好者
● 希望深入掌握 Ionic 和 Angular 技術的程式設計師
● 想要瞭解如何結合 AI 技術的軟體工程師
● 尋求技術多樣性和職業發展的專業人士
● 想要自主開發獨特且有趣應用的獨立開發者
專業推薦
本書以淺顯易懂的方式講解了開發 AI 英語口說導師應用程式的完整流程，從前端介面設計、語音錄製、語音轉文字、文字轉語音，到與 OpenAI API 和 Azure AI 服務的整合，涵蓋了所有必要的知識。書中提供了許多實際案例和程式碼範例，讓讀者可以ㄧ步一步地跟著操作，並在過程中學習到實用的技巧和解決方案。無論你是新手工程師、學生，或是對行動應用開發感興趣的愛好者，都能從中獲得豐富的知識與實戰經驗。
──── 徐千洋｜台灣駭客年會創辦人、CYBAVO 共同創辦人
本書的一大亮點是，作者毫無保留地分享了他在實際開發過程中的經驗與技巧。作者在本書中坦誠提到自己在開發中遇到的挑戰：像是如何提升應用效能、如何選擇適合的 GPT 模型、如何設計使用者友好的介面，甚至如何控制大型語言模型 API 的成本問題。這些實用的經驗，對於那些想將 AI 技術運用到實際專案中的開發者來說，無疑是非常寶貴的。這本書不僅是一本技術指南，更是一份充滿實戰經驗與創意的開發寶典。
──── Will 保哥｜多奇數位創意 技術總監、Google Developer Expert、Microsoft MVP
作者長期專注於網頁視覺技術，並在 Ionic 與 Angular 等跨平台框架開發中累積了豐富經驗。本書記錄了他的故事、程式經驗及實作經歷，將常用的範例以深入淺出的方式描述，內容生動實用。無論是網頁前後端開發，還是跨平台技術的應用，作者都以務實的態度分享他的所學，為讀者提供了清晰易懂的學習路徑。相信讀者們若用心理解，必能獲益良多。
──── 黃啓賢 博士｜聯發科技 資深工程師、國立清華大學數學系「高中數學人才培育計畫」教師
作者簡介
- 陳碩元
一名專業的軟體開發者，擁有多年開發經驗，熟悉 Delphi、Angular、C# 等程式語言及各類設計模式，專精於前後端應用程式的開發。此外，在 Docker、Kubernetes、Jenkins 等 DevOps 技術領域也具備豐富的實戰經驗。目前擔任鏵得企業股份有限公司研發主管。熱愛自學與科技研究，喜歡嘗試各種新技術。對我來說，程式開發的核心精神是持續學習，挑戰現有的限制，並追求卓越。
▍GitHub
https://github.com/MomoChenisMe
▍Blog
https://www.momochenisme.com/
目錄大綱
- 前言
致謝
這本書可以學到什麼？
開發過程中可能費用產生
開發 AI 英語口說導師的流程與技術
本書範例應用程式下載
CH1 Ionic 開發事前準備
1-1 介紹 Ionic 和 Capacitor
1-2 工具準備
1-3 建立和設定 Ionic 專案
1-4 編譯、執行和部署 Ionic 專案
1-5 Ionic 的進階開發技巧
1-6 使用 Tailwind CSS 搭配 Ionic
1-7 Angular 17 中的新功能 - Built-in Control Flow 和 Angular Signals
CH2 ChatGPT、OpenAI API 與 Azure AI Services
2-1 介紹 ChatGPT Plus
2-2 建立 AI 英語口說導師 GPTs
2-3 開始使用 OpenAI API
2-4 探索 GPT 聊天模型 - 認識Chat API
2-5 AI 英語口說導師「溝通」的核心 - 認識 Audio API
2-6 AI 英語口說導師「對話」的核心 - 認識 Assistants API
2-7 AI 英語口說導師「語音」的核心 - 認識 Azure AI Services 文字轉語音
CH3 實現 AI 英語口說導師「溝通」的核心
3-1 建立 3D 機器人模型 - 在 Ionic 中使用 Three.js
3-2 原生麥克風錄音 - Capacitor Microphone
3-3 實現長按錄音功能 - Ionic Gesture 元件介紹
3-4 實現錄音時的動畫 - Ionic Animation 元件介紹
3-5 為錄音按鈕加上觸覺震動反饋 – Capacitor Haptic
3-6 將錄音結果轉為文字 - Audio API 實戰
3-7 API 讀取狀態和動畫 - HttpInterceptor 實戰 1
3-8 攔截器的進階使用技巧 - HttpInterceptor 實戰 2
CH4 實現 AI 英語口說導師「對話」和「語音」的核心
4-1 建立聊天室選單 - Ionic Menu 元件介紹
4-2 聊天室選單結合本機資料庫 - Capacitor SQLite 實戰 1
4-3 建立詢問視窗 - Ionic Alert 元件介紹
4-4 整合聊天室選單 - Assistants API 實戰 1：串接 Thread API
4-5 實現對話功能 - Assistants API 實戰 2：串接 Run API
4-6 實現語音功能 – Azure AI Services 實戰：將文字轉語音
4-7 語音重播和 3D 動畫切換 - 解決 Angular Signals 的 NG0600 問題
4-8 儲存歷史訊息 - Capacitor SQLite 實戰 2
CH5 AI 英語口說導師進階功能實現
5-1 瀏覽歷史訊息 - Ionic Angular Navigation
5-2 下拉讀取功能實作 - Ionic Infinite Scroll 元件介紹
5-3 實作文法和口語提示 - Ionic Modal 元件介紹：使用 Sheet Modal
5-4 用 Chat Completion 完成文法和口語說明 - Chat API 實戰：Server-Sent Events
5-5 替換應用程式的圖示和啟動畫面 - Capacitor Splash Screen & Assets 實戰
CH6 將 AI 英語口說導師上架到 Google Play 和 App Store 商店中
6-1 Google Play - Android 上架流程
6-2 App Store - iOS 上架流程
