發佈日期: 2025-05-11 上午 5:28 作者: Claire Chang

在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的套件

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

再按 F1 → CMake: 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檔案了

發佈日期: 2025-03-12 下午 9:232025-03-24 上午 11:16 作者: Claire Chang

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

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

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。流程大致如下：

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

try {
  await page.getByText('移除成員').click({ timeout: 1000 });
} catch (e) {
  if (e.name === 'TimeoutError') {
    await page.getByText('封鎖', { exact: true }).click({ timeout: 1000 });
  }
}

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

發佈日期: 2025-03-12 下午 7:022025-03-12 下午 7:33 作者: Claire Chang

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

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

輸入指令為

npx playwright codegen

官方推薦的定位器

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

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

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

例如使用以下的方式

使用 id

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

使用 data-* 屬性

data-testid 或 data-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>

發佈日期: 2025-02-01 下午 9:442025-02-28 下午 7:45 作者: Claire Chang

功能介紹

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

簡單n8n 串接 LINE 教學

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

步驟 1：準備 LINE API 憑證

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

註冊 LINE Developers 帳戶：前往 LINE Developers 註冊帳戶。
建立 Channel：
- 登入後，建立一個新的 Messaging API Channel。
- 記下 Channel ID、Channel Secret 和 Access Token，這些將用於 n8n 的認證設定。
設定 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) }}}]
}

完整的工作流

發佈日期: 2025-02-01 下午 6:212025-02-28 下午 7:48 作者: Claire Chang

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 的單文件補全效果最佳；而在大型專案中，應充分利用其多文件上下文感知功能。

發佈日期: 2025-02-01 下午 2:582025-02-28 下午 7:50 作者: Claire Chang

雛型程式開發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 行程式碼的大型專案。

發佈日期: 2024-12-16 下午 4:392025-02-28 下午 7:55 作者: Claire Chang

好用的簡報生成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 則將這些內容轉化為視覺化的投影片，提升簡報的互動性與吸引力。

發佈日期: 2024-12-09 下午 3:182025-02-28 下午 7:57 作者: Claire Chang

產品體驗設計概念介紹

本篇是我上溫明輝老師的UX‧三刀流課程的學習筆記

https://hahow.in/courses/5e95c5b8845c8bf74c0102df

什麼是使用者體驗設計？

使用者體驗設計是一個以使用者為中心的設計過程，專注於改善使用者與產品或服務互動的整體感受與滿意度。這不僅僅是關於美觀的界面設計，而是關注使用者在與系統或產品互動時的功能性、操作性與情感體驗。

使用者體驗設計深入分析

主觀感受的元素

時間軸角度：前中後互動中的感受。
- 例子：閱讀書籍前的期待，閱讀過程中與內容展開對話，以及閱讀後的回想。
需求縱面：功能面、操作面和情感面。
- 功能面：產品是否能滿足使用者的基本需求。
- 操作面：是否易於上手，並提供明確指導。
- 情感面：是否能讓使用者感到喜悅與完成滿足感。

設計例子：訂餐 App

前期：通過 App 名稱和介紹，解釋軟體功能，帶來使用者期待。
中期：操作元素簡單明確，用戶能順利完成訂餐。
後期：感受帶來滿足與喜悅，加強品牌對使用者的意義。

面向	互動前	互動中	互動後
情感面	如果用這個 App 在家訂餐，感覺可以讓我的時間更彈性自由	真的非常快速便利，只需3分鐘就完成付款與預約，也不容易出錯	太高興了，有了這個 App 讓我感到生活更豐富
操作面	這個 App 看起來和其他軟體差不多，應該不難操作	從開啟、選單、購物車、付款到輸入地址都能順利完成	真是一大福音，所有操作步驟整體而言讓人覺得非常簡單
功能面	這個 App 看起來好像可以幫我不用出門就能夠享受美食	這個 App 提供了多種選色，滿足我在家生活的各式需求	有了這個 App 我在家就能輕鬆享受各種豐富的佳餚

HX (人類體驗設計）角度

HX 是從更宏觀的角度考慮人類與產品的互動關係，將個人影響力延伸至群體與社會。

CX（消費者體驗）:將廣告、品牌信任、定價策略等商業元素納入考量，影響消費者的整體體驗。

案例：Clubhouse 語音社群 App

吸引力來源：透過有聲望的名人與影響者，創造話題性與吸引力。
稀缺性設計：採用限量邀請機制，增強使用者的獲得感。
情感體驗：進入後的連結感與臨場感，讓使用者感到興奮與參與感。

設計成功的關鍵

結合功能、操作與情感面，創造好用且有意義的產品，並讓其被廣泛採用與分享。

UX 有多種研究方法，設計師可在不同的設計時期運用這些方法。

這些方法幫助設計師深入掌握使用者需求，調整產品設計，提供更好的使用經驗。

設計實作中的心智模型應用

心智模型如何運用到設計實作中
- 設計「物」來創造使用者體驗，並通過設計產品本身及其溝通方式來滿足使用者需求。
- 使用者介面（UI）作為產品與使用者溝通的橋梁，包括資訊架構、圖示與互動元素等。
正向回饋與迭代設計
- 透過使用者的探索與反饋，設計師不斷進行優化與迭代，逐步完善產品的體驗。
- 要點：UX 設計是一門科學，透過假設與驗證，逐步達成最佳化的使用者體驗。

UXer 在產品研發流程中的扮演角色

產品研發流程：

了解市場現況：確認商業目標與設計目標。
了解使用者需求：洞察使用者需求與設計機會。
設計人與電腦之間的溝通與互動：進行產品概念發展。
產品設計：產品設計與研發實作。
設計評估：產品測試與優化。

UXer 最需要的三大能力

用戶需求 (User Flow)

確保使用者需求滿足，基於 UX 研究探索用戶的正確需求和痕跡。
關聯用戶互動流程，讓用戶在最低阻力下達成目標。

商業分析研究 (Business Flow)

分析產品對企業成本和效益的影響，確保商業目標能與 UX 目標保持互相配合。
要確保產品不僅給用戶予优護體驗，更能讓企業獲得不錯的回報。

數據分析能力 (Data Flow)

收集和分析使用者數據，解釋行為模式，以負責設計方向。
基於數據，定義產品上線後需要調整與優化的重點。

平衡使用者需求與企業目標

UX 設計的核心在於找到「使用者需求」與「企業目標」之間的平衡。這意味著設計不僅要滿足使用者的期待，也必須支持企業的商業策略與盈利目標。

平衡理念：

企業「有利可圖」，才會投入資源發展產品。
使用者「需求滿足」，產品才能實現其價值。

企業「有利可圖」，才會投入資源發展產品。產品才會有機會到達人們的手上，那些被設計的更好的產品體驗才能夠開始被人們使用。

在《UX 策略》這本書中，原本的「殺手級的 UX 設計」已經被修訂為「無摩擦力的 UX 設計」。這一改變反映出 UX 設計的核心在於：

並不追求一味地運用新技術： 創新設計不應單純圍繞科技，而應注重使用者的實際體驗。
快速上手與無痛體驗： 無摩擦的設計應讓使用者能輕鬆進入產品，快速理解其功能與價值。

設計目標

設計的起點： 讓使用者能真正開始體驗服務的內容與內涵。
深入思考： 如何在技術創新與使用者友好之間達成平衡。

設定安裝環境必備的套件

設定 CMake Tools

設定CMake的相關參數

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

1. 分析與規劃角色需求

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

3. 參數化測試

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

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

官方推薦的定位器

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

範例HTML

功能介紹

簡單n8n 串接 LINE 教學

步驟 1：準備 LINE API 憑證

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

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

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

步驟5：回覆LINE訊息

完整的工作流

VS Code的AI開發助手

Codeium 的主要功能

1. 程式碼補全與重構

2. 自動生成測試案例

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

4. 自然語言生成程式碼

5. 即時錯誤修復與優化

Codeium 的優勢

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

1. 提供清晰的上下文

2. 善用提示工程（Prompt Engineering）

3. 使用插件的高級功能

4. 定期更新與設置優化

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

v0 by Vercel

bolt

Replit

21st.dev

shadcn/ui

Lovable

簡報分享

活動剪影

免付費方案

工具介紹

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

將文件轉為投影片

付費方案

Gamma

MindShow

什麼是使用者體驗設計？

使用者體驗設計深入分析

主觀感受的元素

設計例子：訂餐 App

HX (人類體驗設計）角度

設計成功的關鍵

設計實作中的心智模型應用

UXer 在產品研發流程中的扮演角色

產品研發流程：

UXer 最需要的三大能力

用戶需求 (User Flow)

商業分析研究 (Business Flow)

數據分析能力 (Data Flow)

平衡使用者需求與企業目標

設計目標