iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

前端工程師的AI應用開發實戰:30天從Prompt到Production - 以打造AI前端面試官為例 系列

這是一趟以前端工程師角度切入的 AI 應用開發之旅。這個系列文的核心理念很簡單:「我們不需要成為 AI 專家,但我們絕對可以打造完整的 AI 應用」。在這 30 天裡,我們將以一個前端工程師最熟悉的視角,使用 Next.js 和 React 作為主要技術棧,從零開始,一步步打造一個功能完整的 Side Project,在過程中我們會一同摸索常見的AI相關技術,從基本的Prompt Engineering、RAG與向量資料庫最終到外部工具的調用,了解市面上現在滿街跑的AI 應用程式背後究竟搞了那些花招,讓你有能力也打造自己的AI 應用!

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

我不是AI專家,但我能打造AI應用:環境設置

2025鐵人賽Day 1 前言 各位好!我是Danny!終於又再次來到鐵人賽了,原本去年就有打算繼續參賽,但眾多因素混在一起導致根本沒有心力參加,絕對不是我當時...

2025-09-15 ‧ 由 windate3411 分享
DAY 2

讓應用程式動起來:Gemini API串接

前言 歡迎回來!如果你正在讀這篇,代表你昨天成功建立了專案,恭喜你已經打敗了 50%在 Day 1 就放棄的參賽者(我瞎掰的數據,但應該差不多,健身房也是過年假...

2025-09-16 ‧ 由 windate3411 分享
DAY 3

設計我們的面試系統:提出基本架構設計

前言 歡迎來到第三天!賽程雖然才剛開始,但說實在話我已經累了:P 每次參賽前我都在心裡發誓一定要有一些存稿再來參加,結果每次參賽都是裸賽當天拚生死,怪不得當初研...

2025-09-17 ‧ 由 windate3411 分享
DAY 4

設計題庫系統:JSON是個好幫手

前言 嘿,歡迎回來!經過昨天的「純開會」行程,你可能覺得有點手癢,想開始寫點程式碼了。昨天我們定義了使用者故事、畫了架構圖和線框稿,把整個「AI前端面試官」專案...

2025-09-18 ‧ 由 windate3411 分享
DAY 5

打造專業作答區:整合 Monaco Editor

前言 週末了我卻還在這寫文章,真你他...嘿!歡迎回來!我絕對沒有在偷偷抱怨,昨天的 Day 4 我們成功地在本地建立了一個,呃,我們就先叫他資料庫吧!雖然不是...

2025-09-19 ‧ 由 windate3411 分享
DAY 6

讓 AI 更聰明:Prompt Engineering 初探

前言 歡迎回來!再堅持一下,很快第一週就要結束了! 沒意外的話到明天就會將我們目前所有的進度都整合成一個堪用的產品,你很快就可以至少跟那樣簡陋的頁面道別了!我們...

2025-09-20 ‧ 由 windate3411 分享
DAY 7

整合與部署:將專案整合一週的內容後推上Vercel吧!

前言 第一週的收尾終於來了!一路上我們從一個空蕩蕩的專案開始,一路加上了 API 串接、動態題庫、程式碼編輯器,最後到學習基本的 Prompt Engineer...

2025-09-21 ‧ 由 windate3411 分享
DAY 8

AI 的開卷考試:初探 RAG 與 Embedding

前言 歡迎來到第二週!真虧你看完昨天那篇落落長的鬼東西還沒棄坑,真有你的!我打完看了一下字數約四萬字,自己也傻了一下,但為了系列文的完整度我又不能直接跳過那些程...

2025-09-22 ‧ 由 windate3411 分享
DAY 9

解鎖語意搜尋:親手計算向量的餘弦相似度

前言 歡迎來到第九天!昨天我們透過了解了 RAG 的基本概念並透過 Gemini Embedding API 實際看到了文字是怎麼轉為向量陣列的,我自己相當喜歡...

2025-09-23 ‧ 由 windate3411 分享
DAY 10

為 AI 建立長期記憶:Supabase 向量資料庫實戰

前言 歡迎來到第十天!你應該多少有發現第二週開始之後每天文章的內容變少了些,原因也相當簡單,整個專案我只有第一週是我熟悉的領域,後面開始我就是跟你們一樣邊做邊學...

2025-09-24 ‧ 由 windate3411 分享