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

17th鐵人賽 next.js gemini llm react

windate3411

2025-09-15 18:24:12

99 瀏覽

分享至

2025鐵人賽Day 1

前言

各位好！我是Danny！終於又再次來到鐵人賽了，原本去年就有打算繼續參賽，但眾多因素混在一起導致根本沒有心力參加，絕對不是我當時書籍進度落後愧對編輯所以不敢再開新副本。玩笑話放一邊，這幾年來的AI議題確實有讓我不斷反思許多事情，其中也包含了一些自我懷疑，像是繼續撰寫往年那樣的教學文章是否還真的有任何人能從中受惠之類的念頭。

我想這本質上就與現在滿天飛的AI言論相同，「我是不是要被取代了？」、「現在學寫程式還有什麼意義嗎？」，這類的說法不但在網路上隨處可見，我在現實中的各種場合也不斷聽到，印象特別深刻的一次是有一次去面試一個做AI Agents的新創公司，執行長侃侃而談之餘就指著我的臉說：「我會先從通用型的人力，像是人資、銷售等職位開始取代，下一步就是取代你們這些工程師！」。要說完全不受影響，我並沒有這麼強大的心理素質，我也迷惘、渾渾噩噩地去盲目追逐各種最尖端的AI工具與模型，搞得我有一陣子Youtube首頁10個影片中至少有8個AI技術相關的影片（少數剩餘的影片則多半是搞笑迷因或是英雄聯盟比賽精華），但隨著一段時間經過後的自我沉澱和實務上的驗證，我慢慢地回歸我之前那個比較理性一點的看法，也就是不管這些AI怎麼發展，短期內都脫離不了他們是工具的事實，現階段的我要處理的就是如何妥善應用並發揮他們的潛力就好，其餘的雜音我就先忽略！這麼一想事情就簡單多了，也因此萌生了這次系列文的想法，「我們可以不用是AI專家，但我們可以打造AI應用程式。」，就跟過去你所有用過的套件一樣，你也許並不完全理解套件的每一個底層原理，但你能理解用法並整合在你的專案中使用，最終達到你要的效果，那任務就算圓滿達成了是吧？因此今年的主題就很明確了，我們來看看這些市面上常見的AI應用到底裡面藏了什麼要吧！

系列文簡介

我們會以一個前端工程師的角色，試圖從頭打造一個AI驅動應用程式（AI Driven Application）╴「ＡＩ前端面試官」，協助任何前端工程師做面試練習，從文字提問到實際的程式碼測驗，最終給予你適當的回饋做加強。

過程中我們會從人人都會最基本的下提示詞一路到決定你應用程式價值的檢索增強生成（Retrieval-Augmented Generation），中間會牽扯到向量嵌入 (Embeddings)以及AI外部工具呼叫，最終打造一個可運行、功能完整的AI應用程式。聽起來很嚇人沒錯，我也不打算騙你，這會是個有點艱苦的旅程，中間的技術選用幾乎都是我沒接觸過的東西，勢必會包含很多試誤的過程，我的實踐也不見得是業界公認的最佳解，整個過程你可以把它看做一個跟我一起摸索的學習之旅，一同窺探現在隨處可見的AI應用程式他們背後到底是藏了什麼東西，你又該如何運用這樣的概念打造自己的AI應用。

我們會採用Next.js做為開發的框架選擇（理由後續會說明）以及一些UI套件讓我快速產出還能看的成品，用Next.js一方面是有一些開發上的考量，另一方面則是藉這個機會讓我碰一下新版本的Next.js更新自己對這個框架的理解，我也會時不時的使用一些AI工具例如Gemini, Claude code之類的熱門插件加速整個示範專案的開發過程，但有些事情我要先明確的講清楚免得你對於文章的期待與實際內容不符。
關於這個系列文，它

不會是一個Next.js教學文：
你也不需要真的會Next.js（我自己都不太會了），你可以用你擅長的框架跟著實作，我只會用到最基礎的Next.js路由之類的東西，會是所有框架都共用的概念。
不會是AI工具的使用分享：
我雖然過程會用到AI工具，也有習慣的AI開發流程，在後面的文章會花一部分篇文解釋最基本的提示詞結構，但我不打算花篇幅仔細介紹相關的設置、實用技巧等，這些雖然也蠻重要的，不過不會是本系列文的重點，我會更希望把重點放在如何整合AI技術到你的產品中。
不會是LLM底層理論的探究：
理論極端的重要，但就像我在前言部分說的，你不需要了解全部的理解才能真的實作，就像你不知道販賣機裡面發生什麼事但你還是可以投飲料一樣，這次系列文在這方面的理論著墨會相對薄弱許多，我會盡量尋找相關的文獻做必要的說明，但與第二點一樣，這並不會是本系列文的重點。

同時也有一些必須的事前準備，你會需要

一張刷得過的信用卡：
這不是要詐騙你，我也認同詐騙集團包含知法犯法的車手都該去死，不過在這次的專案實作中我們會透過api去與openai或是google gemini studio溝通，這部分的操作多半會按照你的用量與使用的模型向你收費，因此需要綁定一張信用卡，照我們的用量大概花不到一美元整個專案就結束了，不過如果你打算完全跟著我做，那我們確實可以善用免費額度而不使用信用卡。
至少熟練一個前端框架：
這次的專案會是一個較為通用的教學，我盡量做到不綁定框架的開發方式，語法方面都只會用到最基本渲染用的，應該不太會有框架專門的邏輯存在，但還是會需要你對於現代網路開發有著基本的概念，例如組件與資料綁定之類的概念，這樣你會比較能將我的程式碼整合到你的實作專案中，當然如果你熟悉React的話就最好不過了！
一個google帳號：
聽起來很像廢話，這年頭誰沒有個google帳號，但由於我的教學會牽扯到建立一個google cloud plaform的專案，這個最基本的必要前置我還是先講一下，畢竟世界很大，說不定還真有人沒有這玩意。

開始動手：Hello, AI Interviewer！

講了這麼多理念，是時候動手了。但別擔心，今天我們的目標很簡單：建立專案，看到第一個畫面。就這樣，不多不少，再多我也累了，持久的關鍵在於不總是用100%的力量去過日子，這也是作為工程師避免burn out的觀念！

前置準備

確認你的電腦有安裝 Node.js（建議 18 版本以上）：

node --version # 應該看到 v18.x.x 或更高

如果沒有，到 Node.js 官網下載安裝，選 LTS 版本就對了。

Step 1: 建立 Next.js 專案

打開終端機（Terminal 或 Command Prompt），執行：

npx create-next-app@latest ai-frontend-interviewer

會問你幾個問題，這樣選就對了：
✔ Would you like to use TypeScript? → Yes # 我知道這會增加一點點的複雜度，但型別檢查是好習慣
✔ Would you like to use ESLint? → Yes
✔ Would you like to use Tailwind CSS? → Yes # 方便快速寫樣式
✔ Would you like to use src/ directory? → No
✔ Would you like to use App Router? (recommended) → Yes
✔ Would you like to use Turbopack? (recommended) → Yes
✔ Would you like to customize the default import alias? → No
其實就是全部都照預設值，你一路Enter按到底就行了！我們真的不需要什麼額外的客製化設定，就像我說的，Next.js只是選擇的一種，我這次的專案真的沒有要用什麼只有Next.js才做得到的魔法，一切從簡即可！

Step 2: 進入專案，啟動看看

完成這些步驟後專案應該可以順利啟動了，請在你的終端機輸入以下的指令。

cd ai-frontend-interviewer
npm run dev

打開瀏覽器，輸入 http://localhost:3000
你應該會看到 Next.js 的預設畫面。恭喜！專案已經跑起來了。


圖1 : Next.js起始畫面

Step 3: 寫我們的第一個畫面

打開專案資料夾，找到 app/page.tsx，把內容全部刪掉，改成：

export default function Home() {
  return (
    <main className="min-h-screen bg-gray-900 text-white">
      <div className="container mx-auto px-4 py-16">
        <h1 className="text-4xl font-bold text-center mb-8">
          AI 前端面試官 🤖
        </h1>
        
        <div className="max-w-2xl mx-auto">
          {/* 題目區 */}
          <div className="bg-gray-800 rounded-lg p-6 mb-6">
            <div className="text-sm text-blue-400 mb-2">題目 #1</div>
            <p className="text-lg">
              請解釋 JavaScript 中的 hoisting 是什麼？
            </p>
          </div>
          
          {/* 作答區 */}
          <div className="bg-gray-800 rounded-lg p-6 mb-6">
            <textarea 
              className="w-full h-32 bg-gray-700 rounded p-3 text-white"
              placeholder="在這裡輸入你的答案..."
            />
          </div>
          
          {/* 按鈕 */}
          <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
            提交答案
          </button>
          
          {/* AI 回饋區（暫時是空的） */}
          <div className="bg-gray-800 rounded-lg p-6 mt-6">
            <div className="text-sm text-green-400 mb-2">AI 回饋</div>
            <p className="text-gray-400 italic">
              提交答案後，AI 將在這裡提供回饋...
            </p>
          </div>
        </div>
      </div>
    </main>
  );
}

Step 4: 儲存，看成果！

儲存檔案後，回到瀏覽器（http://localhost:3000），你應該會看到：

一個深色背景的頁面
「AI 前端面試官」的標題
一個簡單的題目
可以輸入答案的文字框
一個提交按鈕（還不能真的做什麼）
AI 回饋的預留位置
就這樣！我們的第一個介面完成了！


圖2 : 修改後的初始畫面

補充說明

不熟悉或沒用過tailwind的讀者可能會覺得有點莫名其妙，明明一行css都還沒寫畫面就已經有套用基本的樣式了，這其實就是 Tailwind CSS 的魔法所在。它奉行一個叫做「Utility-First」的理念，簡單來說，就是把各種常用的 CSS 屬性，比如 padding: 24px 或 font-weight: bold，都變成了一個個獨立的 className。
這麼做最大的好處是，我們完全不用離開 page.tsx 這個檔案，就能像拼積木一樣快速拼湊出想要的畫面，也不用再花心思想 class 到底該怎麼命名（title? main-title? page-header? 算了吧！）。對於我們想快速驗證功能的 Side Project 來說，這簡直是天作之合。
我們不會在這系列文深入 Tailwind 的所有細節，你只要知道，看到 className 裡有一長串看起來像咒語的東西，那其實就是我們正在「用 class 寫 CSS」就行了。這讓我們能專注在功能開發，而不是在 CSS 檔案之間切來切去。

額外挑戰（選擇性）

如果你還有力氣，可以試試：

改改顏色 - 把 bg-blue-600 改成 bg-purple-600 看看
加個 emoji - 在標題或按鈕上加些表情符號
調整文字 - 把題目換成你想問的問題

今日回顧

今天我們完成了：
✅ 建立 Next.js 專案
✅ 啟動開發伺服器
✅ 建立第一個介面
✅ 使用 Tailwind CSS 快速設計樣式
這個介面現在還很陽春，按鈕按了也不會怎樣，但這就是我們的起點。從明天開始，我們會一步步讓這個介面活起來。

明天預告

明天（Day 2）我們要做一件很酷的事：申請 Google AI Studio 帳號（免費！）
拿到我們的第一個 AI API Key，讓 AI 真的回應我們的問題（對，明天它就會說話了！）
這會是整個系列最關鍵的一步，因為我們要開始接觸真正的 AI 了。

心得小語

還記得文章開頭說的嗎？「我們可以不用是AI專家，但我們可以打造AI應用程式」。今天你已經踏出第一步了。這個簡單的介面，將在接下來的 29 天內，逐漸進化成一個真正的 AI 應用。
羅馬不是一天造成的，我們的 AI 面試官也是。但只要每天進步一點點，30 天後你會驚訝於自己的成長。
明天見！🚀
今日程式碼: GitHub Day-01 Branch