iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Build on Google AI

今天學什麼?30 天用 Google AI 打造智慧學習卡 系列

如果只要告訴 AI「今天想學什麼」,它能不能依照不同的學習對象、程度與學習目標,自動協助我們把知識轉換成簡單、好理解的學習卡?

本系列將以 Google AI Studio 與 Gemini 為核心,搭配 React、TypeScript,從 Prompt 實驗開始,逐步打造智慧學習卡產生器。從幼兒認知教材出發,再延伸至語言、問答與不同知識領域,實驗 AI 如何產生客製化的學習內容,協助家長、教師與學習者減少整理教材的時間。

30 天將記錄 Prompt 設計、結構產出、前端整合及 AI 內容正確性等實作過程,探索 Google AI 在個人化學習與教材製作上的可行性。

參賽天數 22 天 | 共 22 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11|Learning Card Schema 怎麼設計?把 AI 回傳格式定義清楚

昨天第一次使用 Structured Output,成功讓 Gemini 不再回傳一整段需要自己拆解的文字,而是按照設定好的 Schema 回傳 JSON。 最...

2026-09-25 ‧ 由 cherylcloud 分享
DAY 12

Day 12|一張不夠,那就一次來五張:讓 Gemini 回傳 Learning Card Array

昨天把 Learning Card 的 Schema 拆開來看,終於比較清楚 properties、description、required 分別在做什麼。 目...

2026-09-26 ‧ 由 cherylcloud 分享
DAY 13

Day 13|JSON 有了,TypeScript 呢?建立 LearningCard 型別

昨天我們終於讓 Gemini 一次回傳 5 張 Learning Cards,而且資料不再是一大段文字,而是有固定結構的 JSON: { "car...

2026-09-27 ‧ 由 cherylcloud 分享
DAY 14

Day 14|現在還需要自己刻前端嗎?讓 AI 幫我建立第一版 Learning Card UI

前幾天一路從 Gemini 的回傳格式,做到 Structured Output、Schema、Array,昨天又把 JSON 對應成 TypeScript 的...

2026-09-28 ‧ 由 cherylcloud 分享
DAY 15

Day 15|一段 React Code 還不夠?用 Make this an app 直接做成 Learning Card App

昨天我把 LearningCard 的資料格式交給 Gemini,請它幫我建立第一版 React UI。 原本只是想看看: 如果不自己從零刻 Componen...

2026-09-29 ‧ 由 cherylcloud 分享
DAY 16

Day 16|UI 有了,但資料還是假的:把 Learning Card JSON 接進 React

昨天透過 Make this an app,Gemini 已經幫我建立出一個可以實際操作的 Learning Card App。 除了基本的學習卡之外,它還自己...

2026-09-30 ‧ 由 cherylcloud 分享
DAY 17

Day 17|不想每次都改 Prompt:做一個 Learning Card 產生表單

昨天終於把 Day 12 透過 Structured Output 產生的五張海洋動物學習卡,成功放進 React UI。 現在資料是真的了,畫面也可以正常顯示...

2026-10-01 ‧ 由 cherylcloud 分享
DAY 18

Day 18|按下產生之後呢?從 React 呼叫 Gemini API

昨天完成「產生學習卡」表單後,App 終於可以知道使用者今天想學什麼。 測試時,我選擇: 7~8 歲兒童 浩瀚太空 3 張 React 也成功取得: {...

2026-10-02 ‧ 由 cherylcloud 分享
DAY 19

Day 19|API 接通了,但 Prompt 太簡單:把學習條件整理成 Prompt Template

昨天終於把 Gemini API 接進 Learning Card App。 從表單輸入: 學習對象 學習主題 卡片數量 按下「產生學習卡」後,資料會經過 S...

2026-10-03 ‧ 由 cherylcloud 分享
DAY 20

Day 20|讓 Gemini API 也回傳固定格式:把 Structured Output 接進程式

昨天把原本只有一句話的 Dynamic Prompt,整理成了獨立的 Prompt Template。 原本只是: 請幫我產生適合 {ageGroup} 的『{...

2026-10-04 ‧ 由 cherylcloud 分享