學習如何使用 Next.js、MongoDB 和 Tailwind CSS 創建神奇的 AI 驅動型全端 Storybooks Web 應用程式
從這 5.5 小時的課程，你會學到
- 全端開發精通：使用 Next.js、Tailwind CSS、Shadcn UI 和 MongoDB 建立應用程式。
- AI 整合：利用生成式 AI 創建個人化故事書和圖像。
- 安全認證系統：實作密碼雜湊、使用者會話和受保護路由。
- 可擴充功能：新增分頁、搜尋、CRUD 操作以及使用者自訂主題。
要求
- 對 JavaScript 和 React Js 的基礎知識
課程說明
準備好探索令人興奮的AI應用世界了嗎？歡迎來到「建立 AI 兒童故事書產生器應用」課程，本課程將全面指導您創建一款創新的全端應用，它融合了Next.js、Shadcn UI、Tailwind CSS、Server Actions和MongoDB等前沿技術。無論您是希望拓展技能的開發者，還是致力於為兒童打造引人入勝的教育工具的創業者，本課程都將助您從零基礎成長為動態互動故事書應用的專家。
本課程兼顧理論知識與實務經驗，確保您瞭解從建立開發環境到部署功能齊全的應用的每一個步驟。課程結束時，您將建立一個強大的平台，使用者可以使用 AI 生成個人化的兒童故事書，自訂故事書的外觀，將其儲存到資料庫並與他人分享。
讓我們詳細了解您將學到的內容：
1. AI 故事書簡介
我們將首先介紹 AI 生成內容的概念及其在創意產業中日益重要的角色。您將探索如何利用生成式 AI 來創作獨特且可自訂的兒童專屬故事。我們還將討論此類應用在教育、娛樂和親子互動方面的潛在影響。
2. 設定靜態內容和圖片
在深入探討 AI 整合之前，我們首先要建立應用程式的基礎架構。在本節中，您將學習如何設計一個簡潔而美觀的介面來展示靜態故事內容和圖片。這包括建立 HTML 元件、使用 Tailwind CSS 設定樣式以及有效率地組織資源。
3. 導航和使用者體驗優化
流暢的使用者體驗是任何成功應用的關鍵。在這裡，您將添加導航選項，使用戶能夠輕鬆地在應用程式的不同部分之間切換。此外，我們還將實現動態更改背景顏色的功能，使用戶能夠控制其故事書的視覺主題。
4. API 金鑰和資料庫連接
任何現代 Web 應用程式都離不開與外部服務和資料庫的安全通訊。您將學習如何管理 Google Cloud 和 Replicate 等服務的 API 金鑰，以及如何建立與 MongoDB（一個強大的 NoSQL 資料庫）的連線。這些技能對於安全地儲存用戶資料並在需要時檢索資料至關重要。
5. 使用 Shadcn UI 設計美觀的介面
Shadcn UI 提供預先建置且高度可自訂的 React 元件，讓您輕鬆設計專業級介面。在本模組中，您將學習如何將 Shadcn UI 整合到您的專案中，並利用其功能提升應用程式的外觀和使用者體驗。
6. 身份驗證系統開發
安全性至關重要，尤其是在處理使用者帳戶時。您將從零開始建立一個強大的身份驗證系統，首先使用 Bcrypt 進行密碼雜湊處理。然後，您將定義一個 User 模型，實現登入操作，並設定身份驗證上下文以有效地管理使用者會話。
7. 受保護的儀錶板頁面和登出功能
用戶通過身份驗證後，需要存取應用程式的受限區域。我們將介紹如何透過身份驗證檢查來保護某些頁面，並建立專用的儀錶板選單以方便使用者導航。最後，您將實現註銷功能，以確保使用者可以安全地退出會話。
8. 利用 AI 生成書籍
現在到了應用的核心部分：利用 AI 生成故事書。您將深入學習生成式 AI 技術，學習如何設計有效的提示，從而產生高品質的文字和圖像。我們也將透過模擬 API 來模擬影像生成，然後再進行實際應用。
9. 保存與管理故事
每個故事都值得保存和重溫。在本部分，您將開發一個故事模型來表示資料庫中的書籍。然後，您將建立伺服器端操作，用於保存產生的故事、取得現有故事，並在專門的「書籍」頁面上以分頁格式顯示它們。
10. 個性化和自訂
讓使用者進一步個性化他們的故事書。您將新增使用自訂字體（例如透過 Google Fonts 使用 Fredoka 字體）、查看單一書籍的詳細資訊以及刪除不需要的條目等選項。這些功能不僅提高了可用性，還增強了使用者的歸屬感。
11. 搜尋與發現
為了方便使用者尋找特定內容，我們將實作基於關鍵字查詢資料庫的搜尋功能。這包括創建搜尋操作、設計搜尋結果頁面以及優化效能以實現快速回應。
12. 打造引人入勝的落地頁
第一印象至關重要。您將設計一個精美的落地頁，突出顯示應用的功能，鼓勵用戶註冊，並提供便利的核心功能存取途徑。精心打造的落地頁是用戶進入應用程式的門戶，吸引他們進一步探索。
為什麼要學習這門課？
本課程不僅教授技術技能，更著重培養你的創新思維，幫助你創造性地解決實際問題。透過將人工智慧與全端開發結合，你將深入了解塑造科技產業的新興趨勢。此外，本課程的實務性極強，確保你最終能完成一個足以展現你專業技能、足以放入作品集的專案。
本課程適合哪些人？
- 開發者：如果您熟悉 JavaScript 和 React，本課程將幫助您掌握伺服器端渲染、資料庫管理和 AI 整合等進階主題。
- 創業者：想要在教育科技領域推出產品？學習如何建立可擴展、用戶友好且滿足細分市場需求的應用程式。
- 教育工作者：探索利用科技驅動的敘事工具吸引年輕學習者的新方法。
先決條件
雖然無需任何人工智慧方面的經驗，但具備 JavaScript、React 和 Node.js 的基礎知識將大有裨益。熟悉 MongoDB 和 RESTful API 將是加分項，但並非強制要求，因為這些概念在本課程中會有深入解說。
您將構建什麼
在本課程結束時，您將擁有一個功能齊全的人工智慧兒童故事書生成器應用程序，其功能包括：
- 動態生成書籍，主題可自訂
- 安全的使用者身份驗證和授權
- 用於管理故事的 CRUD 操作
- 進階搜尋和分頁功能
- 精心設計的落地頁，有效提升轉換率
加入數位敘事的革命
故事講述的未來在於創意與科技的交融。隨著人工智慧工具的日益普及，現在正是發揮潛力的最佳時機。立即報名，開啟一段變革性的學習之旅，掌握建立突破性應用所需的技能。
不要只是空想——讓夢想照進現實。讓我們開始吧！
目標受眾
- React JS 學習者：非常適合希望在建立動態 AI 應用的同時提升 React 技能的開發者。
- 全端愛好者：非常適合熱衷於在實際專案中掌握前端和後端技術的開發者。
- 科技創業家：非常適合致力於在教育科技或創意內容領域打造創新應用的創業家。
- 創意程式設計師：非常適合渴望將程式設計與故事敘述相結合，並探索 AI 驅動的內容生成方式的開發者。
講師簡介
Ryan Dhungel 網站開發人員
Ryan Dhungel 是一位來自澳洲雪梨的 Web 開發人員。他使用 JavaScript、Node.js、React.js、Vue.js、Laravel 和其他新興平台建立 Web 應用程式。
他也致力於讓整個 Web 開發過程既輕鬆又高效，為此，他製作了講解清晰、實用性強的教程和培訓課程，供其他開發人員參考。
字幕：英文
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
- Udemy 永久擁有課程 許多課程約 NT400(點擊連結看更多)
- ✨年訂閱每月 NT350 🌈 悠遊 Udemy 的 26000+ 門課，最大化學習 ( 原價 NT635/月 )
- Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- ＄代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現
報名參加課程
也許你會有興趣
- AI 應用相關線上課程
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣！
- 從 Soft & Share 各種社團頻道挑選你喜歡的加入
發表迴響