如何在5分鐘內建立臨床試驗搜尋應用程式 - 臨床試驗API教學

我們正在建立的

在接下來的5分鐘裡，你將建立一個簡單的網頁應用程式，讓用戶可以根據症狀和階段搜尋臨床試驗，以卡片形式顯示結果，並且可以分頁瀏覽結果。臨床試驗API 是一個將 ClinicalTrials.gov 包裝成開發者友好界面的 REST API。它提供結構化的資格標準（解析為年齡、性別、症狀、實驗室值等類別——不需要正則表達式），基於緯度/經度進行地理半徑搜索，新試驗的 HTTP webhook 訊息提醒，基於游標的分頁，以及匯總統計數據。免費版本不需要信用卡。超過 480,000 個試驗，涵蓋 220 個以上國家，每天由 FDA 更新。所有功能都由一個 API 支援。您需要基本的 HTML/JavaScript 知識和一個免費的 RapidAPI 帳戶。

第1步：獲取您的API金鑰（30秒內）

前往https://rapidapi.com/capifactory-capifactory-default/api/clinical-trials-api
在免費方案上點擊「訂閱」（無需信用卡）
從控制面板複製您的X-RapidAPI-Key

就這樣。您可以開始發出API調用了

第2步：進行您的第一次API調用

打開你的終端機並執行這個 curl 命令（替換 YOUR_API_KEY）：

curl --request GET \
  --url 'https://clinical-trials-api.p.rapidapi.com/v1/trials/search?query=breast+cancer&phase=Phase+2&status=Recruiting&limit=3' \
  --header 'X-RapidAPI-Key: YOUR_API_KEY'

你應該看到類似這樣的內容：

{
  "success": true,
  "data": [
    {
      "nct_id": "NCT04589845",
      "title": "Atezolizumab and Chemotherapy for Triple-Negative Breast Cancer",
      "brief_summary": "This phase II trial studies how well atezolizumab works with chemotherapy...",
      "condition": "Breast Cancer",
      "phase": "Phase 2",
      "status": "Recruiting",
      "enrollment_count": 280,
      "last_updated": "2026-05-15",
      "locations": [
        {
          "facility": "Dana-Farber Cancer Institute",
          "city": "Boston",
          "state": "MA",
          "country": "United States"
        }
      ]
    }
  ],
  "pagination": {
    "total": 847,
    "limit": 3,
    "next_cursor": "eyJvZmZzZXQiOjN9",
    "has_more": true
  }
}

這是 847 個匹配的試驗，以乾淨的 JSON 格式返回，並內建分頁功能。無需爬蟲，無需解析，無需管線維護。

第 3 步：建立測試搜尋應用程式

建立一個單一的 HTML 檔案 (index.html) 並貼上這段程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clinical Trial Search</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; background: #f5f5f5; }
        h1 { color: #1a1a2e; }
        .search-box { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
        input, select, button { padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
        input { flex: 1; min-width: 200px; }
        button { background: #1a56db; color: white; border: none; cursor: pointer; font-weight: 600; }
        button:hover { background: #1647b8; }
        .trial-card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .trial-card h3 { margin: 0 0 8px 0; color: #1a1a2e; font-size: 16px; }
        .trial-meta { display: flex; gap: 15px; font-size: 13px; color: #666; margin-bottom: 8px; flex-wrap: wrap; }
        .badge { padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; }
        .badge-recruiting { background: #d4edda; color: #155724; }
        .badge-phase { background: #cce5ff; color: #004085; }
        .summary { font-size: 14px; color: #444; line-height: 1.5; }
        .pagination { display: flex; gap: 10px; align-items: center; margin-top: 20px; justify-content: center; }
        .loading { text-align: center; padding: 40px; color: #666; }
        .error { text-align: center; padding: 20px; color: #dc3545; background: #f8d7da; border-radius: 8px; }
        .nct { color: #1a56db; font-family: monospace; font-size: 14px; }
        .location { font-size: 12px; color: #888; margin-top: 6px; }
    </style>
</head>
<body>
    <h1>Clinical Trial Search</h1>
    <p style="color: #666; margin-bottom: 20px;">Powered by <a href="https://rapidapi.com/capifactory-capifactory-default/api/clinical-trials-api">Clinical Trials API</a> -- 480K+ FDA trials, free tier, no credit card.</p>

    <div class="search-box">
        <input type="text" id="query" placeholder="Search condition or keyword (e.g., breast cancer)" value="breast cancer">
        <select id="phase">
            <option value="">All Phases</option>
            <option value="Phase 1">Phase 1</option>
            <option value="Phase 2" selected>Phase 2</option>
            <option value="Phase 3">Phase 3</option>
            <option value="Phase 4">Phase 4</option>
        </select>
        <select id="status">
            <option value="">All Statuses</option>
            <option value="Recruiting" selected>Recruiting</option>
            <option value="Not yet recruiting">Not Yet Recruiting</option>
            <option value="Active not recruiting">Active, Not Recruiting</option>
            <option value="Completed">Completed</option>
        </select>
        <button onclick="searchTrials()">Search</button>
    </div>

    <div id="results"></div>

    <script>
        const API_KEY = 'YOUR_RAPIDAPI_KEY'; // Replace with your key
        const BASE_URL = 'https://clinical-trials-api.p.rapidapi.com';

        let currentCursor = null;
        let currentQuery = null;

        async function searchTrials(cursor = null) {
            const query = document.getElementById('query').value;
            const phase = document.getElementById('phase').value;
            const status = document.getElementById('status').value;

            const params = new URLSearchParams({ query, limit: '5' });
            if (phase) params.append('phase', phase);
            if (status) params.append('status', status);
            if (cursor) params.append('cursor', cursor);

            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<div class="loading">Searching 480K+ clinical trials...</div>';

            try {
                const r = await fetch(`${BASE_URL}/v1/trials/search?${params}`, {
                    headers: { 'X-RapidAPI-Key': API_KEY }
                });

                if (r.status === 401) {
                    resultsDiv.innerHTML = '<div class="error">Invalid API key. Get your free key at <a href="https://rapidapi.com/capifactory-capifactory-default/api/clinical-trials-api">rapidapi.com/clinical-trials-api</a></div>';
                    return;
                }

                if (!r.ok) {
                    resultsDiv.innerHTML = `<div class="error">API error: HTTP ${r.status}</div>`;
                    return;
                }

                const body = await r.json();
                if (!body.success) {
                    resultsDiv.innerHTML = `<div class="error">${body.error?.message || 'Unknown error'}</div>`;
                    return;
                }

                currentCursor = cursor;
                currentQuery = { query, phase, status };
                renderResults(body);

            } catch (e) {
                resultsDiv.innerHTML = `<div class="error">Network error: ${e.message}</div>`;
            }
        }

        function renderResults(body) {
            const resultsDiv = document.getElementById('results');
            const pagination = body.pagination;

            let html = `<p style="color: #666; margin-bottom: 15px;">Found <strong>${pagination.total.toLocaleString()}</strong> trials. Showing ${(currentCursor ? 'next page' : 'first')} ${body.data.length} results.</p>`;

            body.data.forEach(trial => {
                const loc = trial.locations && trial.locations[0] ? `${trial.locations[0].facility}, ${trial.locations[0].city}, ${trial.locations[0].state}` : '';
                html += `
                    <div class="trial-card">
                        <h3>${trial.title}</h3>
                        <div class="trial-meta">
                            <span class="nct">${trial.nct_id}</span>
                            <span class="badge badge-phase">${trial.phase}</span>
                            <span class="badge badge-recruiting">${trial.status}</span>
                            ${trial.enrollment_count ? `<span>${trial.enrollment_count} participants</span>` : ''}
                        </div>
                        <p class="summary">${(trial.brief_summary || '').substring(0, 200)}${(trial.brief_summary || '').length > 200 ? '...' : ''}</p>
                        ${loc ? `<p class="location">${loc}</p>` : ''}
                    </div>
                `;
            });

            html += '<div class="pagination">';

            if (currentCursor) {
                html += `<button onclick="searchTrials(null)">First Page</button>`;
            }

            if (pagination.has_more) {
                html += `<button onclick="loadNextPage('${pagination.next_cursor}')">Next Page (${pagination.total - (currentCursor ? parseInt(currentCursor.match(/\d+/)?.[0] || 0) : body.data.length)} remaining)</button>`;
            } else if (body.data.length > 0) {
                html += '<span style="color: #666;">All results loaded.</span>';
            }

            html += '</div>';
            resultsDiv.innerHTML = html;
        }

        function loadNextPage(cursor) {
            document.getElementById('query').value = currentQuery.query;
            document.getElementById('phase').value = currentQuery.phase;
            document.getElementById('status').value = currentQuery.status;
            searchTrials(cursor);
        }

        // Search on load
        searchTrials();
    </script>
</body>
</html>

第 4 步：執行它

將行 ~70 的 YOUR_RAPIDAPI_KEY 替換成您的實際 API 金鑰
在您的瀏覽器中打開 index.html （只要雙擊該檔案即可）
您有一個可用的臨床試驗搜尋應用程式

嘗試搜尋 "Alzheimer", "diabetes", 或保留預設的 "breast cancer" -- 您會在不到一秒鐘內看到真實的 FDA 試驗數據出現

下一步是什麼？

加入地理半徑搜尋終點 (/v1/trials/nearby) 以使用 HTML5 地理位置建立 "附近的試驗" 功能
透過呼叫加入結構化的資格顯示/v1/trials/{nct_id}/eligibility 當使用者點擊試用卡 (Pro 層級：$19/月)
透過 POST /v1/alerts 設置 webhook 訊息提醒，以便在新的試用符合使用者儲存的搜尋標準時收到通知
部署到 Vercel、Netlify 或 GitHub Pages 以進行實時示範
使用 Tailwind CSS 進行樣式設計，以達到專業的外觀

API

免費層級： 每天一百次請求，基本搜尋，附近搜尋，統計，條件瀏覽器，三個儲存的警報
Pro: 每月19美元 -- 十萬次請求，結構化資格解析，二十五個webhook警報，電子郵件支援
Ultra: 每月49美元 --五十萬次請求，無限警報，優先支援
文件: https://rapidapi.com/capifactory-capifactory-default/api/clinical-trials-api/docs

在RapidAPI訂閱 - 免費方案，無需信用卡.

如果你用這個 API 建立了某個東西，請標註我 - 我很喜歡看看你創造了什麼。在評論中提出問題，我會回答它們。

推薦訂閱源

DEV Community