Claude Code介紹和使用建議

Claude Code是由 Anthropic 推出的生成式 AI 程式助理,不僅能幫你寫程式、查文件、修 bug,甚至還能幫你整理 Git 記錄、整合團隊工具,是開發者最佳拍檔。

Cloud Code 可以做什麼

分析 Git 歷史

  • 自動分析 commit 記錄,幫你查出參數是誰加的、為什麼改、相關背景脈絡。
  • 無需額外提示,它會自己「幫你總結」。

整合 GitHub Issue

  • Claude 可以自動拉取 GitHub Issue 資訊,並讀出脈絡,協助你釐清問題或任務內容。

參與 Weekly Standup

  • 你可以問它:「我這週交付了什麼?」
  • Claude 會自動從你的 Git 日誌中整理出成果摘要。

有效使用流程:從 Q&A 到整合工具

  • 新手建議先從 Codebase Q&A 開始:比起直接改程式碼,先問問題(像「這個變數在哪裡定義?」)更容易上手,快速熟悉程式邏輯與架構。
  • 逐步導入工具:等你熟悉後,就可以進一步請 Claude 幫你「編輯程式碼」,並使用其內建工具,例如 bash、測試指令等。
  • 不必一個個指定工具:只要下目標,Claude 會自己判斷該用哪些工具,幫你串成完整流程。
  • 寫功能前先規劃設計:Claude 最強的能力在於「思考」,你可以先請它幫你規劃實作策略,再確認後由它代碼實作。
  • 告訴 Claude 你的 CLI 工具:你只要講「我們團隊有一個叫 build-image 的自定義指令」,它之後就能幫你正確下命令。
  • 一次設定全部工具(建議):在進入一個新專案時,建議一次告訴 Claude 這個專案會用到哪些工具,這樣它在處理任務時會更有效率。

安裝Claude Code

請先確認你的系統符合以下條件:

步驟 1:安裝 Claude Code CLI

開啟 Terminal(Mac/Linux)或 WSL 的 Ubuntu 終端機,執行:

npm install -g @anthropic-ai/claude-code

安裝完成後,輸入以下指令確認版本:

claude --version

步驟 2:設定 API 金鑰驗證

安裝好後,必須連結你的 Anthropic 帳號:

claude auth login

或是將 API 金鑰寫入環境變數(適合自動化流程):

export ANTHROPIC_API_KEY="你的-api-金鑰"

第一次執行 claude auth login 時,系統會開啟瀏覽器讓你登入並授權。

步驟 3:開始第一個專案

  1. 建立新的專案資料夾並切換進去: mkdir my-claude-project cd my-claude-project
  2. 啟動 Claude: claude

善用 CLAUDE.md

在 Claude Code 的運作中,CLAUDE.md 是建立上下文(context)最核心的元素之一。良好的 CLAUDE.md結構設計,能顯著提升 Claude 的理解力與團隊間的協同效率。

建議開發者各自維護 .cloud.local.md,記錄自己常用的 workflow、debug 技巧或指令,不簽入 Git,但可被 Claude 使用。

撰寫原則如下:

  • 保持簡潔明確:寫入常用指令、關鍵檔案與系統架構說明。避免冗長、過度複製 Readme 或歷史資訊,否則會稀釋 Claude 的關注焦點。
  • 依目錄嵌套設計:每個子模組(如 /api, /frontend, /infra)都可以放一份 Cloud.MD,Claude 會在該區域操作時自動讀取該目錄的說明。
  • 保留個人版:建議開發者各自維護 .cloud.local.md,記錄自己常用的 workflow、debug 技巧或指令,不簽入 Git,但可被 Claude 使用。

高階上下文管理技巧

組織層級的共享 CLAUDE.md

  • 公司可建立統一的 enterprise.CLAUDE.md(如專案政策、資安規範、CI/CD 標準),並在每個 repo 中引用。
  • 有助於新進工程師快速了解開發規範。

結合 Slash 指令與情境切換

  • Claude 支援 /commands 格式,例如 /deploy, /check-access,這些可事先存於專案或個人記憶中,讓 prompt 更精準。

階層式配置架構建議

├── CLAUDE.md(全域策略)
├── .CLAUDE.local.md(個人筆記)
├── frontend/
│   └── CLAUDE.md(UI 工具說明)
├── backend/
│   └── CLAUDE.md(API 路由與框架設定)
└── infra/
    └── CLAUDE.md(Terraform、MCP 配置)

MCP 與資源共享建議

  • 集中配置一次,團隊共享:MCP 伺服器(如 puppeteer, PostgreSQL 查詢機器人等)可部署在某一個共用專案中,設定好後所有開發者即可使用。

可用資源範例

  • puppeteer-mcp: 自動產生截圖/ PDF 報告。
  • llm-lint-mcp: 代碼風格與品質審查。
  • qa-mcp: 單元測試結果解析與修復建議。

建議導入流程

階段重點行動
團隊導入初期建立統一的 Cloud.MD 與 MCP server,並教育每位成員撰寫 .CLAUDE.local.md
日常工作中透過 Claude 自動解析 commit、Issue、CI/CD log,提升團隊溝通效率
每週協作在 weekly stand-up 前,使用 Claude 整理每人當週交付與貢獻,快速對齊進度
長期優化定期檢視 Cloud.MD 內容,清理無效資訊、合併重複區段、補充新工具配置

善用 Cloude.MD 與其延伸機制,就像是幫你的 AI 工程夥伴安裝了「專案經驗記憶體」。不僅可以快速上手大型專案、減少重複溝通,還能真正讓 Claude 成為團隊知識管理與效率最佳化的幫手。

在VSCode建構NX的套件

官方教學文件:https://meta.nxvms.com/docs/developers/knowledgebase/234-preparing-a-workspace

官方範例套件:https://github.com/networkoptix/nx_open_integrations/tree/72d9c30658531d954e0de59e73b431122bcf29cc/cpp/vms_server_plugins/opencv_object_detection_analytics_plugin

下載所需的NX SDK:https://meta.nxvms.com/download/releases/sdk

設定安裝環境必備的套件

CMake(建議版本 3.15 以上):https://cmake.org/download

C++ 編譯器(MSYS):https://www.msys2.org/

安裝之後,打開MSYS,接著安裝GCC的套件

Empty MSYS2 terminal window
pacman -S mingw-w64-ucrt-x86_64-gcc
pacman -S mingw-w64-ucrt-x86_64-ninja
gcc --version

安裝VSCode CMake 插件

  • CMake Tools
  • C/C++ Extension Pack

設定 CMake Tools

打開C++的專案資料夾,資料夾根部應要有CMakeLists.txt

F1 → 搜尋 CMake: Configure → 點下去。

選擇編譯的環境,這邊我選擇自動搜尋,接著會搜尋到MSYS

再按 F1CMake: Build 就可以完成組建囉!

注意:CMake 在某些環境下會因為中文路徑編譯失敗,建議如果遇到奇怪問題,試試把專案搬到一個英文資料底下。

設定CMake的相關參數

新增 .vscode/settings.json 這個檔案

{
  "cmake.generator": "Visual Studio 17 2022",
  "cmake.configureSettings": {
    "metadataSdkDir": "D:/metadata_sdk",
    "SERVER_DIR": "C:/Program Files/Network Optix/Nx MetaVMS/mediaserver"
  },
  "cmake.buildDirectory": "${workspaceFolder}/build",
  "cmake.buildType": "Release",
  "cmake.configureArgs": [
    "-A", "x64"
  ],
  "cmake.installPrefix": "${workspaceFolder}/install"
}

接著就可以看到產生的dll檔案了

如何用 Playwright 撰寫參數化

網站在測試時有許多不同的「角色」該如何撰寫測試

當網站有許多不同的角色(例如管理員、一般使用者、訪客等)時,撰寫測試可以依照各角色的權限與流程,採用一些共用與參數化的技巧,讓測試能夠穩定且重複執行。

1. 分析與規劃角色需求

  • 定義各角色的權限與流程:先明確每個角色所能執行的功能,列出對應的使用情境。
  • 撰寫需求文件:將各角色的操作流程、期望結果記錄下來,方便後續撰寫測試案例。

2. 建立共用的流程與元件

  • 共用登入與登出:針對不同角色,撰寫一個共用的登入模組,再根據傳入的角色參數選擇不同的帳號與密碼。
  • 使用 Page Object Model (POM):把不同頁面的操作封裝成物件,依角色狀況調用不同的方法,減少重複程式碼。

3. 參數化測試

  • 利用測試資料陣列:將各角色的測試資料(例如帳號、密碼、預期結果)存成陣列,再透過迴圈或參數化的方式,讓同一份測試腳本覆蓋多個角色。
import { test, expect } from '@playwright/test';

const users = [
  { role: 'admin', username: 'adminUser', password: 'adminPass' },
  { role: 'user', username: 'normalUser', password: 'userPass' },
  // 可再加入其他角色
];

users.forEach(({ role, username, password }) => {
  test(`測試 ${role} 角色的功能`, async ({ page }) => {
    // 執行共用的登入流程
    await page.goto('https://example.com/login');
    await page.fill('#username', username);
    await page.fill('#password', password);
    await page.click('button[type="submit"]');

    // 根據角色執行不同操作與驗證
    if (role === 'admin') {
      // 驗證管理員專屬的功能
      await page.goto('https://example.com/admin');
      await expect(page.locator('text=管理後台')).toBeVisible();
    } else if (role === 'user') {
      // 驗證一般使用者的功能
      await page.goto('https://example.com/dashboard');
      await expect(page.locator('text=使用者儀錶板')).toBeVisible();
    }
    // 登出或清除測試狀態
  });
});

爬蟲行為設定避免卡在某個狀況

運用 try/catch 來處理找不到指定元素時所產生的 TimeoutError。流程大致如下:

  1. 嘗試執行主要操作
    try 區塊中,先使用 jsCopyawait page.getByText('移除成員').click({ timeout: 1000 }); 這表示 Playwright 會嘗試在 1 秒內尋找並點擊文字為「移除成員」的元素。如果在 1 秒內沒有找到,Playwright 就會拋出 TimeoutError
  2. 捕捉錯誤並執行備案操作
    一旦進入 catch 區塊,就代表在指定時間內沒有找到「移除成員」這個元素。程式碼會檢查錯誤類型:
try {
  await page.getByText('移除成員').click({ timeout: 1000 });
} catch (e) {
  if (e.name === 'TimeoutError') {
    await page.getByText('封鎖', { exact: true }).click({ timeout: 1000 });
  }
}

  1. 如果確實是 TimeoutError,就改用「封鎖」這個文字作為元素定位並點擊。
  2. 這表示如果「移除成員」按鈕不在網頁上(或是網頁加載的流程不同),就退而求其次去點擊「封鎖」按鈕。
  3. 應用場景
    • 可能是有些帳號沒有「移除成員」的選項,而需要改用「封鎖」。
    • 也可能是前端顯示的按鈕文字在不同情況下會變化,需要有個備案流程。

PlayWright Codegen

使用Codegen功能來錄製操作行為

透過互動錄製,快速產生測試骨架,再自行補充測試斷言與檢查條件。 大幅縮短手動撰寫測試的時間。產生的程式碼可直接套用在爬蟲腳本中,之後只要再針對抓取內容做進一步處理即可。

輸入指令為

npx playwright codegen

官方推薦的定位器

在撰寫 E2E(端對端)測試時,選擇好用、穩定且易維護的元素定位方式相當重要。使用 id 或自訂的 data-* 屬性(例如 data-testiddata-test),讓測試程式更容易精準地選取元素。

以下是使用自訂屬性的好處:

  1. 避免干擾視覺或結構調整
    • 如果測試依賴 CSS 選擇器(如 .class 或元素階層),一旦前端 UI 樣式或結構稍作修改,就可能導致測試失效。
    • 透過自訂屬性(例如 data-testid="submit"),可以與視覺或佈局的變動解耦,減少測試被破壞的風險。
  2. 可讀性佳
    • data-testid="submit"data-test="login-button" 這種命名能讓測試碼一目了然,也容易與設計稿或需求對照。
  3. 維護成本低
    • 若將來需要更改按鈕文字或新增 CSS 樣式,自訂屬性不會被影響,測試也不需要重新編寫。

例如使用以下的方式

使用 id

  • 在一個頁面中,id 屬性必須唯一。若你的頁面或元件很多,必須小心確保不會重複命名。
  • 有時候前端開發者可能保留 id 給特定功能,或是其他框架可能已經使用 id 作為錨點、錨點連結等等。

使用 data-* 屬性

  • data-testiddata-test 是常見做法,用於標記測試所需的元素。
  • 不會干擾其他既有的前端邏輯或樣式,並且易於辨識、維護。

網頁

<!-- example.html -->
<input type="text" id="username" />
<input type="submit" data-test-id="submit" value="Sign In" />

測試碼

// example.spec.js
await page.fill('#username', 'someUser');
await page.click('[data-test-id=submit]');

官方推薦的抓取定位點的方式

  • getByRole():Playwright 會依據 ARIA 的角色 (role) 或預設語意標籤 (如 <button><a><input> 等) 來定位。 g
  • etByText():依據元素內的文字內容匹配,適用於一般顯示文字的元素。
  • getByLabel():特別適用於表單控制項,依照 <label> 文字來定位對應的 <input><textarea> 等。
  • getByPlaceholder():根據表單輸入框的 placeholder 屬性值來定位。
  • getByAltText():專門用於根據圖片 (<img>) 的 alt 屬性值來定位。
  • getByTestId():可在 HTML 元素上自訂 data-testid 屬性,方便自動化測試或爬蟲精準定位。

什麼是getByRole

在 Playwright 裡面使用 page.getByRole() 來定位元素,是根據網頁對「輔助技術(Assistive Technology)」和使用者所暴露的角色(role)資訊來做搜尋。以下簡單說明其原理與優勢:

什麼是角色(Role)?

在網頁中,像是按鈕、標題、連結、清單、表格等,都有對應的 W3C ARIA 角色,或是隱含在原生 HTML 元素裡。

例如 <button> 通常就對應到 ARIA 的 role="button"<a> 則對應到 role="link"。這些角色不只對螢幕報讀軟體等輔助工具很重要,也能在自動化測試或爬蟲時,成為一個很直覺的定位方式。

為什麼要用 getByRole()

  • 可讀性佳:用「角色」來描述網頁元素,比起用繁雜的 CSS 選擇器或 XPath,更能清楚表達你想要找的元素「扮演什麼功能」。
  • 穩定度高:角色屬性通常是網頁結構的語意核心,較不會因為版面調整或細微改動就被破壞。
  • 符合無障礙標準:如果網頁設計有遵循 ARIA 標準,getByRole() 能幫助你自動化測試同時也檢查無障礙屬性的正確性。

使用範例

針對網頁上所有「按鈕」:

// 取得第一個按鈕
const button = await page.getByRole('button');

若按鈕上有文字(名稱),可以用 name 選項來過濾:

// 取得文字內容為「送出」的按鈕
const submitButton = await page.getByRole('button', { name: '送出' });

對其他角色也可以類似使用,例如 heading(標題)、link(連結)、list(清單)等。

隱含與自訂角色

  • 大部分常見的 HTML 元素都自帶角色,比如 <button> 本身就有 role="button"
  • 如果網頁中使用自訂元素(如 <div>)去模擬按鈕,可能需要開發者在 HTML 裡加上 role="button",讓輔助技術與 Playwright 都能正確辨識。
  • 倘若有使用額外的 ARIA 屬性(如 aria-label),也能與 getByRole() 搭配使用。

範例HTML

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>Playwright 定位器範例</title>
</head>
<body>

  <!-- 1. getByRole():可透過預設語意標籤 (如 button、link) 或 ARIA role 來定位 -->
  <button>送出</button>
  <!-- Playwright 使用範例:page.getByRole('button', { name: '送出' }) -->

  <!-- 2. getByText():根據元素的文字內容來定位 -->
  <p>這是一段測試文字</p>
  <!-- Playwright 使用範例:page.getByText('這是一段測試文字') -->

  <!-- 3. getByLabel():根據 <label> 文字來定位對應的表單元素 -->
  <label for="username">使用者名稱</label>
  <input id="username" type="text" />
  <!-- Playwright 使用範例:page.getByLabel('使用者名稱') -->

  <!-- 4. getByPlaceholder():根據 placeholder 屬性來定位 -->
  <input placeholder="請輸入電子郵件" />
  <!-- Playwright 使用範例:page.getByPlaceholder('請輸入電子郵件') -->

  <!-- 5. getByAltText():根據 <img> 的 alt 屬性文字來定位 -->
  <img src="cat.jpg" alt="可愛的小貓" />
  <!-- Playwright 使用範例:page.getByAltText('可愛的小貓') -->

  <!-- 6. getByTestId():根據 data-testid 屬性來定位 (可用於自訂屬性) -->
  <div data-testid="custom-element">這是自訂元素</div>
  <!-- Playwright 使用範例:page.getByTestId('custom-element') -->

</body>
</html>

使用 n8n + LineBot 搭建 RAG AI 應用

功能介紹

n8n 是一款開源的工作流自動化工具,旨在幫助用戶通過可視化的方式設計和執行自動化流程,實現跨應用和服務的數據整合與操作。是一個功能強大且靈活的工作流自動化平台,適合個人和企業用戶用於提升效率和簡化業務流程。無論是簡單的數據同步,還是複雜的跨平台自動化,n8n 都能提供可靠的解決方案。

簡單n8n 串接 LINE 教學

n8n 是一款強大的工作流自動化工具,能夠輕鬆串接 LINE 並實現多種自動化功能,例如發送通知、處理訊息或與其他應用整合。以下是串接 LINE 的詳細教學:

步驟 1:準備 LINE API 憑證

在串接 LINE 前,您需要取得 LINE 的 API 憑證。以下是準備步驟:

  1. 註冊 LINE Developers 帳戶:前往 LINE Developers 註冊帳戶。
  2. 建立 Channel
    • 登入後,建立一個新的 Messaging API Channel。
    • 記下 Channel ID、Channel Secret 和 Access Token,這些將用於 n8n 的認證設定。
  3. 設定 Webhook(可選):如果需要接收 LINE 的事件通知,需設定 Webhook URL,該 URL 可由 n8n 提供。

步驟 2:在 n8n 中新增 LINE 節點

N8N設定的畫面

LINE Bot的設定畫面

步驟 3:在OpenAI建立好的客製化機器人

網址: https://platform.openai.com/playground/assistants

以下是了解我的書的內容的機器人,這個是Open AI的Agent功能,可以在這邊上傳檔案,讓這個機器人有RAG的資料庫可以回答專屬於自己的知識

步驟4:在n8n呼叫已經建立好的機器人

可以選擇下面這個節點來和已經建立好的機器人聊天

要注意的是,這個節點輸入的文字要是前一個節點的”chatInput”變數。所以要在前面新增一個Edit Fields的節點,來改變前一個節點的值的結構

選擇剛剛建立好的機器人

步驟5:回覆LINE訊息

因為原本n8n只有notify的元件,而這個元件即將要廢棄

因此我自己參考這邊的API格式來呼叫send line message

https://developers.line.biz/en/docs/messaging-api/sending-messages/#reply-messages

curl -v -X POST https://api.line.me/v2/bot/message/reply \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {channel access token}' \
-d '{
    "replyToken":"nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
    "messages":[
        {
            "type":"text",
            "text":"Hello, user"
        },
        {
            "type":"text",
            "text":"May I help you?"
        }
    ]
}'

這邊因為要避免OPENAI回傳一些會打亂JSON格式的特殊字元,因此要用JSON.stringify(…)把回傳的字串包起來

{
    "replyToken":"{{ $('If').item.json.body.events[0].replyToken }}",
    "messages":[{"type":"text","text":{{ JSON.stringify($json.output) }}}]
}

完整的工作流

codeium的AI編輯器windsurf

VS Code的AI開發助手

官方網址: https://codeium.com/windsurf

使用手冊: https://docs.codeium.com/getstarted/overview

大力推荐文(別人的): https://codelove.tw/@tony/post/xNgR53

Codeium 是一款免費的人工智慧編程助手,支援多種程式語言(如 Python、JavaScript、TypeScript、Java、Go 等),並提供程式碼補全、聊天互動及智能搜索等功能。

Codeium 的主要功能

1. 程式碼補全與重構

利用其深度的上下文感知功能,Windsurf 能夠掃描整個程式碼庫,識別所有相關的程式碼片段。
開發者只需在 Cascade 模式中輸入指令,例如「將所有函式名稱改為駝峰式命名」,Windsurf 即可自動完成多個檔案的修改,並確保程式碼的一致性。
同時,Windsurf 提供即時的重構建議,協助優化程式碼結構並提升可讀性。

2. 自動生成測試案例

開發者在 Cascade 中輸入指令,例如「為 calculate_interest 函式生成單元測試,涵蓋所有邊界條件」。
Windsurf 會自動產生多個測試案例,並根據函式的邏輯自動檢查可能的異常情況。
測試案例生成後,開發者還可以進一步要求 Windsurf 優化測試邏輯,或新增更多測試場景,以確保應用的穩定性與可靠性。

3. 跨文件的依賴分析與優化

Windsurf 能夠自動掃描專案中的 package.json 或其他依賴檔案,生成模組之間的依賴圖,幫助開發者清楚掌握各模組的關聯性。
開發者可以要求 Windsurf 提供優化建議,例如「減少模組 A 和模組 B 之間的耦合」,Windsurf 會自動分析並建議重構方案,以降低系統的相依性並提升可擴充性。
此外,Windsurf 也支援自動更新依賴版本,確保專案始終使用最新的穩定版本,降低潛在的安全風險與相容性問題。

4. 自然語言生成程式碼

開發者在 Cascade 中輸入指令,例如:「建立一個使用 React 的網頁應用,包含用戶註冊和登入功能」。
Windsurf 隨即自動生成專案結構、前端介面程式碼以及後端 API,並內建基本的安全性驗證機制(如密碼加密與登入令牌處理)。
此外,在夜間啟用自動優化功能後,Windsurf 進一步改進資料庫查詢效能,優化 API 響應速度,並額外添加密碼強度檢測機制,以提升應用的安全性與使用者體驗。

5. 即時錯誤修復與優化

幫助開發者重構程式碼、添加注釋或精簡程式碼

  • 程式碼中選擇需要重構的部分,然後在聊天界面中輸入需求,例如「請重構這段程式碼」。
  • Codeium 會提供優化建議,並解釋修改原因。

Codeium 的優勢

  • 免費使用:Codeium 對個人用戶完全免費,且無使用次數限制。
  • 多語言支持:支援超過 70 種程式語言,包括 Python、JavaScript、TypeScript、Java、Go 等。
  • 高效開發:通過程式碼補全、聊天和搜索功能,顯著提升開發效率。

如何提高程式碼補全的準確性

1. 提供清晰的上下文

Codeium 的程式碼補全功能依賴於上下文感知,因此提供清晰且完整的上下文是提升準確性的關鍵:

  • 打開相關文件:Codeium 的上下文引擎會分析當前打開的文件以及專案中的其他文件,確保建議與整體程式碼邏輯一致。
  • 使用註解描述需求:在程式碼中添加清晰的註解,例如「# 寫一個計算斐波那契數列的函數」,Codeium 會根據註解生成相應的程式碼
  • 保持程式碼整潔:清晰的變數命名、結構化的程式碼和有意義的註解能幫助 Codeium 更準確地理解上下文。

2. 善用提示工程(Prompt Engineering)

提示工程是與 AI 工具互動的核心,以下是一些實用技巧:

  • 具體化需求:在提示中明確描述需求,例如「為函數 calculate_sum 寫一個單元測試,涵蓋所有邊界條件」。
  • 分步操作:對於複雜任務,將需求拆解為多個簡單步驟,逐步向 Codeium 提出請求。例如,先生成函數框架,再補充細節。
  • 使用 Codeium Chat:如果補全結果不符合預期,可以通過內建的聊天功能進一步詢問或要求修改。

3. 使用插件的高級功能

Codeium 提供多種功能來提升補全準確性,熟悉並善用這些功能可以顯著改善體驗:

  • 多選建議:按下快捷鍵(如 Alt + ]Alt + [)切換不同的補全建議,選擇最符合需求的版本。
  • 上下文固定(Context Pinning):在需要時固定特定的上下文,確保 Codeium 將其作為補全的參考。
  • 自定義上下文:對於專案中特定的 API 或內部庫,可以手動提供相關文檔或示例程式碼,幫助 Codeium 更好地理解。

4. 定期更新與設置優化

保持插件的最新版本並進行適當的設置調整,有助於提升補全效果:

  • 更新插件:Codeium 團隊會定期優化模型和功能,確保使用最新版本以獲得最佳性能。
  • 調整補全觸發條件:如果覺得補全建議出現過早或過晚,可以在設置中調整觸發條件。
  • 啟用語言伺服器:確保語言伺服器正常運行,這是 Codeium 提供高質量建議的基礎。

5. 適應專案需求的最佳實踐

根據專案特性採取針對性的措施:

  • 多語言支持:Codeium 支援超過 70 種程式語言,確保在專案中選擇正確的語言模式。
  • 程式碼風格一致性:Codeium 會嘗試匹配專案的程式碼風格,開發者應保持專案內部的命名規範和格式一致。
  • 小型專案與大型專案的區別:對於小型專案,Codeium 的單文件補全效果最佳;而在大型專案中,應充分利用其多文件上下文感知功能。

雛型程式開發AI工具介紹

v0 by Vercel

官方網站:https://v0.dev/

v0 by Vercel 是由 Vercel 推出的一個開發工具,旨在幫助開發者快速構建和部署各種網頁應用和元件。該工具的核心功能是提供一個開放的社群平台,開發者可以從中獲取靈感、分享項目,並基於現有的範例進行快速開發。

這個平台提供了大量由社群貢獻的範例項目,這些項目涵蓋了多種應用場景,例如: AI SDK 聊天機器人、加密貨幣儀表板、3D 登陸頁面、動態背景生成、卡片生成器、音樂播放器等。 每個範例都可以被 Fork(複製)並用於自己的項目,大大降低了開發的門檻。可以快速將範例或自定義項目部署到線上,並即時查看效果。

特別適合需要靈感或快速原型開發的開發者。其社群驅動的範例庫和快速部署功能是其主要亮點。然而,對於需要更高自定義或複雜功能的項目,可能需要搭配其他工具使用。

bolt

官方網站:https://bolt.new/

bolt.new 是一個專注於快速構建、運行、編輯和部署全棧網頁應用的平台。該網站的核心功能是提供一個簡化的開發環境,讓用戶能夠快速實現從構想到部署的完整流程。其目標用戶可能包括開發者、設計師以及需要快速原型開發的團隊。這是一款創新的 AI 驅動全端開發工具,特別適合需要快速構建原型或 MVP 的開發者和團隊。其零配置、即時預覽和一鍵部署功能大幅簡化了開發流程。然而,對於需要更高穩定性和複雜功能的專案,Bolt.new 可能仍需進一步完善。

網站首頁的標語為「Prompt, run, edit, and deploy full-stack web apps」,這表明該平台的主要特點是:

  • Prompt:快速啟動項目。
  • Run:運行應用程式。
  • Edit:即時編輯代碼。
  • Deploy:快速部署應用。

這樣的功能設計適合需要快速迭代和測試的開發場景。

Replit

使用心得的文章:https://blog.creatorhome.tw/ai-hackathon/

文章中介紹了他利用 AI 的協助,實現了兩大主要功能:一個是透過問卷內容和 AI API 推薦禮物的功能,另一個是客製化祝福卡片並提供可下載的信件圖片和語音轉換功能的功能。

官方網站:https://replit.com

Replit是一款具有多人協作和開發者社群功能的寫程式工具,且用戶不必在電腦設定複雜的環境安裝或程式下載,直接在瀏覽器中打開網站,就能開始寫程式、發作品。從2016年上線至今,用戶累積突破1,000萬人。這是一個線上集成開發環境(Integrated Development Environment,IDE),支援Python、Java、C++等50多種程式語言,並可將寫好的程式碼即時更新在GitHub儲存庫中,讓開發應用程式從無到有的過程,都能直接在Replit一站完成。

Replit還能像Google Docs一樣邀請多位用戶協作,學程式的過程可以不再孤單。Replit 更適合用來打造小型應用程式,使用體驗上可能不如本地開發環境順暢,且運行速度較慢。

主要功能:

  • 多語言支援: Replit 支援多種程式語言,讓開發者能夠在同一平台上進行不同語言的開發。
  • 即時協作: 多位使用者可以同時編輯同一專案,類似於 Google 文件的協作方式,方便團隊合作。
  • 一鍵部署: 使用者可以快速將應用程式部署並獲取公開連結,方便分享和展示專案。
  • AI 助手: 透過 Replit Agent,使用者只需描述需求,AI 即可自動生成程式碼並完成部署,適合沒有程式設計經驗的初學者。

21st.dev

官方網址:https://21st.dev/

21st.dev 是一個專為設計工程師打造的開源 React UI 元件平台,靈感來自 shadcn/ui。 21ST.DEV 該平台提供多樣化的預建元件和頁面模板,協助開發者快速構建高品質的使用者介面。 HUNTSCREENS.COM 使用者只需透過一條命令即可安裝所需元件,顯著提升開發效率。

主要功能:

  • 專業元件(Pro Components): 提供專業級的 React 與 Tailwind CSS 元件,協助開發者快速構建精緻的使用者介面。 21st.dev
  • 登陸頁面(Landing Pages): 包含多種頁面模板,如公告、背景、邊框、行動呼籲、客戶展示、比較、功能介紹、頁尾、英雄圖、圖片、地圖、導航選單、定價、捲動區域、推薦詞、文字、影片等,方便快速搭建網站。
  • UI 元素(UI Elements): 提供豐富的 UI 元素,如手風琴、AI 聊天、警示、頭像、徽章、按鈕、日曆、卡片、輪播、核取方塊、日期選擇器、對話框、下拉選單、空狀態、檔案樹、檔案上傳、表單、圖示、輸入框、連結、選單、通知、數字、分頁、彈出視窗、單選群組、選擇器、側邊欄、登入、註冊、滑桿、載入器、表格、標籤頁、標籤、文字區域、提示、切換、工具提示等,滿足不同的設計需求。
  • Hooks: 提供 React Hooks,簡化狀態管理和副作用處理。

shadcn/ui

官方網站:https://ui.shadcn.com/

shadcn/ui 是一個開源的 React 元件集合,專為開發者提供設計精美且可高度客製化的 UI 元件。 與傳統的元件庫不同,shadcn/ui 採用「複製貼上」的方式,開發者可以直接將所需的元件程式碼複製到自己的專案中,進行深度客製化。

主要功能:

  • 多樣化的元件: 提供多種常見的 UI 元件,如按鈕、表單、對話框等,滿足不同的開發需求。
  • 基於 Tailwind CSS: 所有元件均使用 Tailwind CSS 構建,方便開發者進行樣式調整和主題設定。
  • 無障礙設計: 元件設計時考慮了無障礙性,確保應用程式對所有使用者友善。

許多開發者讚賞 shadcn/ui 的客製化能力,認為它提供了更大的靈活性,特別適合需要精細控制元件行為和樣式的專案。然而,也有使用者指出,對於僅需基本功能的專案,傳統的元件庫可能更為方便,因為它們提供了開箱即用的解決方案。

Lovable

官方網站:https://lovable.dev/

Lovable 是一款由人工智慧(AI)驅動的全端應用程式構建工具,旨在透過自然語言處理技術,讓使用者能夠以對話的方式快速建立網站和 Web 應用程式。 使用者只需描述想要的功能,Lovable 即可自動生成對應的程式碼,簡化了軟體開發流程,讓非技術人員也能輕鬆構建高品質的軟體。Lovable 的主要功能特點包括後端功能實現、精確編輯和支持大型代碼庫,這些特點使得 Lovable 在 AI 全栈應用程序構建器中具有獨特的優勢。

主要功能:

  • 自然語言生成程式碼: 使用者以自然語言描述所需功能,Lovable 會將其轉換為實際的程式碼。
  • 構建和部署網站/應用程式: 透過對話,使用者可以構建並部署完整的網站和 Web 應用程式。
  • 與 Supabase 整合: 支援與 Supabase 整合,方便使用者連接 Postgres 資料庫,處理資料儲存和使用者身份驗證。
  • GitHub 同步: 使用者可以將生成的程式碼同步至 GitHub,進行版本控制和程式碼管理。
  • 處理大型程式碼庫: Lovable 能夠處理包含超過 100,000 行程式碼的大型專案。

軟體工程師如何善用AI提升生產力

由於我本身是軟體工程師,同時也對AI工具的使用很擅長,本身由於過去主要在做概念驗證以及新技術研究,

對於軟體工程師如何利用AI提升生產力真的非常有心得,歡迎有以了解或者是期待更多利用AI來提升生產力邀約分享^^

簡報分享

活動剪影

好用的簡報生成AI工具

任務目標為生成一份【A11y 基礎入門講座內容】的投影片內容

A11y 基礎入門講座內容: https://docs.google.com/document/d/1TFuJXlBw4s_d70qTeoTOAuy-umeJB68ZkvF2v3SoOYM/edit?tab=t.0

免付費方案

工具介紹

工具名稱:超级PPT生成(Super PPT)

網址: https://chatgpt.com/g/g-RfusSJbgM-chao-ji-pptsheng-cheng-super-ppt

此工具的主要功能包括:生成清晰、邏輯嚴謹的 PPT 大綱以及具體內容,可以根據用戶提供的主題,產生結構化的大綱,為簡報奠定基礎。

此為一個使用範例:https://chatgpt.com/share/675fe1ca-7e78-8005-894a-a3601035dfd0

Prompt:

以下面的內容來生成一份投影片,每頁投影片應有標題、內容
&lt;&lt;在此附上文案>>

接著會產生簡報內容

利用Canva將產生的文案變成投影片

首先開啟一份新文件

接著按下魔法文案工具

在這邊不直接把原始文案貼上而選擇先經過ChatGPT整理後的文案(也就是步驟一的文案),是因為會整理得較好、較完整

接著就可以看見生成後的文案

將文件轉為投影片

按下【魔法切換開關】 > 【轉換為簡報】,即可將文件的內容轉換為投影片

會出現選擇版面設計的頁面,選擇好後點選建立簡報,你所建立的簡報就完成囉!

以下為生成的簡報連結:https://www.canva.com/design/DAGZcElQ6SE/Y-dYpRoBiDCSeELTBiQrrA/edit?utm_content=DAGZcElQ6SE&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

付費方案

Gamma

https://gamma.app

專門針對自動生成簡報、文件和網頁設計,讓用戶能夠快速生成高品質的簡報,而無需手動設計和編輯。你可以選擇使用Google帳號直接綁定並免註冊登入,之後點選「新建AI」即可開始使用AI生成簡報。免費版會提供新用戶400點生成點數,建立一份包含8個大綱標題的Gamma簡報需花費40點,而進行一般編輯或插入圖片等功能則不會扣除點數。

直接貼上文件內容,便可以產生如以下的簡報,整個品質還不錯

https://gamma.app/docs/-56gccf0lb5pwxoc

MindShow

https://www.mindshow.fun/

ChatGPT 和 MindShow 的結合,能以最少的時間和技術背景製作出專業且富有創意的簡報。ChatGPT 提供強大的文案生成功能,幫助快速整理內容結構,而 MindShow 則將這些內容轉化為視覺化的投影片,提升簡報的互動性與吸引力。