（iThome鐵人賽系列書）

ChatGPT × Ionic × Angular全方位技術整合實戰：輕鬆打造跨平台AI英語口說導師APP

Author 陳碩元

Publisher 博碩文化

Save Saved

Released

2024/10/16

Language

Traditional Chinese

File format

PDF (37MB), fit in large screen and Pubook

Pages

424

478869

ISBN

9786264140454

Provide Adobe DRM

Provide PDF

Offer DRM free license

Series iThome鐵人賽系列書

Buy products firstAnd download app to watch

Details

（iThome鐵人賽系列書）

ChatGPT × Ionic × Angular 全方位技術整合實戰：輕鬆打造跨平台 AI 英語口說導師 APP(iThome鐵人賽系列書)

Author 陳碩元

Publisher 博碩文化

Released

2024/10/21

Language

Traditional Chinese

Pages

424

545278

ISBN

9786263339743

eBook

NT$680

Get NT$102 off

查看適用禮券

Buy

Preview

Buy for others

Ionic × Angular，掌握AI應用開發技巧
從概念到實作，教你打造實用創新的行動應用程式！

本書內容改編自第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等跨平台框架開發中累積了豐富經驗。本書記錄了他的故事、程式經驗及實作經歷，將常用的範例以深入淺出的方式描述，內容生動實用。無論是網頁前後端開發，還是跨平台技術的應用，作者都以務實的態度分享他的所學，為讀者提供了清晰易懂的學習路徑。相信讀者們若用心理解，必能獲益良多。

──── 黃啓賢博士｜聯發科技資深工程師、國立清華大學數學系「高中數學人才培育計畫」教師

CH1 Ionic開發事前準備
CH2 ChatGPT、OpenAI API與Azure AI Services
CH3 實現AI英語口說導師「溝通」的核心
CH4 實現AI英語口說導師「對話」和「語音」的核心
CH5 AI英語口說導師進階功能實現
CH6 將AI英語口說導師上架到Google Play和App Store商店中

陳碩元

一名專業的軟體開發者，擁有多年開發經驗，熟悉Delphi、Angular、C#等程式語言及各類設計模式，專精於前後端應用程式的開發。此外，在Docker、Kubernetes、Jenkins等DevOps技術領域也具備豐富的實戰經驗。目前擔任鏵得企業股份有限公司研發主管。熱愛自學與科技研究，喜歡嘗試各種新技術。對我來說，程式開發的核心精神是持續學習，挑戰現有的限制，並追求卓越。

▍GitHub
https://github.com/MomoChenisMe

▍Blog
https://www.momochenisme.com/

Ionic × Angular，掌握 AI 應用開發技巧

從概念到實作，教你打造實用創新的行動應用程式！

本書內容改編自第 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 等跨平台框架開發中累積了豐富經驗。本書記錄了他的故事、程式經驗及實作經歷，將常用的範例以深入淺出的方式描述，內容生動實用。無論是網頁前後端開發，還是跨平台技術的應用，作者都以務實的態度分享他的所學，為讀者提供了清晰易懂的學習路徑。相信讀者們若用心理解，必能獲益良多。
──── 黃啓賢博士｜聯發科技資深工程師、國立清華大學數學系「高中數學人才培育計畫」教師

前言
致謝
這本書可以學到什麼？
開發過程中可能費用產生
開發 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 上架流程asnd 前言
致謝
這本書可以學到什麼？
開發過程中可能費用產生
開發 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 上架流程askw 前言
致謝
這本書可以學到什麼？
開發過程中可能費用產生
開發 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 上架流程

Details

Released

2024/10/16

Language

Traditional Chinese

File format

PDF: Fit in large screen

Provide Adobe DRM

Provide PDF

Offer DRM free license

478869

ISBN

9786264140454

Buy products firstAnd download app to watch

Details

All

Management

Investing

Marketing

All

LGBTQ

Literature

Fiction

Romantic Fiction

All

Recreation

Illustrated Book

Fortune Telling

Travel

Eating Habits

Fitness

All

History/Geography

Law

Politics/Military

Applied Sciences

Natural Sciences

Philosophy

Biographies

Sociology

All

Computers/Technology

Language

All

Motivational

Health/Nutrition

Christianity

Buddhism

Taoism

Islam

Other Religions

Relationships

All

Comics

Illustrations

Fan Works

Romance Mangas for Teens

Teenage Mangas

High School Mangas

Romance Mangas

Yaoi Mangas

GL Mangas

TL Mangas

Gay Mangas

Others

All

Performance Art

Art

Design

Photography

All

Education

Kids/Teenagers

Pregnancy/Childbirth

All

Study

Government Exams

Financial Licenses

Teacher Exams

Professional Exams

TOEFL/TOEIC

Learning Skills

Official Publications

Job Hunting Exams

All

Female Photo Books

Male Photo Books

All

Business Management

Investing

Direct Marketing

Advertising

Law

All

News Analysis