0
0
Lập trình
Flame Kris
Flame Krisbacodekiller

Tạo Demo Trực Tuyến Cho GitHub Repo Chỉ Trong 5 Phút

Đăng vào 7 tháng trước

• 10 phút đọc

Chủ đề:

KungFuTech

Vấn Đề “Miles Cuối” Trong Các Dự Án Mã Nguồn Mở

Có thể bạn đã từng tìm thấy những viên ngọc ẩn giấu trên GitHub: một README đầy hứa hẹn và các tính năng trông thật tuyệt vời. Bạn muốn thử nghiệm, nhưng khi nhìn thấy các bước cài đặt—"Cần Python 3.9+, PostgreSQL 14, Redis, và nhiều hơn nữa..."—sự hào hứng của bạn ngay lập tức giảm đi một nửa.

Nếu bạn là một tác giả mã nguồn mở, có lẽ bạn cũng đã cảm thấy sự thất vọng tương tự. Bạn dành tâm huyết để xây dựng một công cụ tuyệt vời, nhưng những cấu hình môi trường phức tạp khiến 99% người dùng và cộng tác viên tiềm năng không bao giờ thử nghiệm nó.

Giữa một repo GitHub và một demo sẵn sàng cho người dùng có một khoảng cách gọi là “cài đặt môi trường.” Đây là vấn đề “miles cuối” cho vô số dự án mã nguồn mở tuyệt vời.

Hôm nay, chúng ta sẽ khám phá cách AgentSphere giúp bạn dễ dàng vượt qua khoảng cách đó.


Một Nền Tảng Mới: Từ “Hướng Dẫn Cài Đặt” Sang “Liên Kết Trực Tiếp”

Chúng tôi tin rằng cách tốt nhất để giới thiệu một dự án mã nguồn mở không phải là với một hướng dẫn cài đặt dài dòng—mà là với một demo trực tiếp, tương tác chỉ với một cú nhấp chuột.

Hãy tưởng tượng bạn thêm một thẻ “Demo Trực Tiếp” nổi bật trong README của bạn trên GitHub. Người dùng chỉ cần nhấp vào đó và ngay lập tức bước vào một môi trường thực tế, làm việc để thử nghiệm dự án của bạn. Thật hấp dẫn đúng không?

AgentSphere làm điều này trở nên vô cùng đơn giản. Chỉ với một vài dòng mã, bạn có thể biến bất kỳ repo GitHub công khai nào thành một sandbox đám mây tạm thời, an toàn và có thể truy cập công khai.


Thực Hành: Tạo Demo Trực Tuyến Cho Một Dự Án Mã Nguồn Mở Phổ Biến

Hãy thử điều này với một dự án thực tế. Uptime Kuma là một công cụ giám sát tự lưu trữ phổ biến và có giao diện hấp dẫn. Việc cài đặt của nó không quá phức tạp, nhưng người dùng vẫn cần chuẩn bị một môi trường Node.js và một máy chủ.

Bây giờ, hãy cùng tạo một demo trực tuyến “không cần cài đặt” cho nó.

1. Chuẩn Bị Một Script Khởi Động Đơn Giản

Tất cả những gì bạn cần là một script Node.js đơn giản để cho AgentSphere biết phải làm gì:

javascript Copy
import { Sandbox } from 'agentsphere-js';
import 'dotenv/config';

// Lấy client ID từ sandboxId để đảm bảo tính duy nhất của URL trong môi trường nhiều client
async function getClientId(sandbox) {
  // Phương pháp 1: Kiểm tra biến môi trường (tùy chọn, cài đặt thủ công)
  const envClientId = process.env.AGENTSPHERE_CLIENT_ID;
  if (envClientId) {
    console.log('🔍 Sử dụng client ID từ biến môi trường:', envClientId);
    return envClientId;
  }

  // Phương pháp 2: Tự động lấy client ID từ sandboxId
  try {
    const info = await sandbox.getInfo();
    console.log('📋 Thông tin sandbox:', JSON.stringify(info, null, 2));

    // Định dạng sandboxId: "random_part-client_id"
    const sandboxId = info.sandboxId;
    if (sandboxId && sandboxId.includes('-')) {
      const parts = sandboxId.split('-');
      if (parts.length >= 2) {
        const clientId = parts[parts.length - 1]; // Lấy phần cuối cùng làm client ID
        console.log('🔍 Đã lấy client ID từ sandboxId:', clientId);
        return clientId;
      }
    }
  } catch (error) {
    console.log('⚠️ Không thể lấy thông tin sandbox:', error.message);
  }

  // Phương pháp 3: Nếu không lấy được client ID, trả về null và sử dụng URL cơ bản
  console.log('⚠️ Không tìm thấy client ID. Sử dụng định dạng URL cơ bản.');
  return null;
}

// Tạo URL với việc xử lý client ID tự động
async function generateSecureUrl(host, port, sandboxId, sandbox) {
  const clientId = await getClientId(sandbox);

  // Nếu không có client ID, sử dụng URL cơ bản
  if (!clientId) {
    console.log('📍 Sử dụng định dạng URL cơ bản (chế độ một client)');
    return `https://${host}`;
  }

  // Kiểm tra định dạng host và xây dựng URL với client ID
  if (host.includes('-') && host.split('.')[0].split('-').length >= 2) {
    const [portPart, ...rest] = host.split('.');
    const domain = rest.join('.');
    const newHost = `${port}-${sandboxId}-${clientId}.${domain}`;

    console.log(`🔒 Đã cải thiện URL với client ID cho bảo mật nhiều client`);
    console.log(`🔍 Client ID: ${clientId}`);
    return `https://${newHost}`;
  }

  // Quay về URL gốc
  return `https://${host}`;
}

async function createUptimeKumaDemo() {
  console.log('Bắt đầu tạo demo trực tiếp cho Uptime Kuma...');

  const sandbox = await Sandbox.create({
    template: 'agentsphere-code-interpreter-v1',
    apiKey: process.env.AGENTSPHERE_API_KEY,
    timeoutMs: 10 * 60 * 1000,
  });

  console.log(`Sandbox đã được tạo: ${sandbox.sandboxId}`);

  try {
    console.log('Đang sao chép Uptime Kuma từ GitHub...');
    await sandbox.commands.run('git clone https://github.com/louislam/uptime-kuma.git');
    console.log('Repo đã được sao chép.');

    console.log('Đang chạy cài đặt chính thức... (Điều này có thể mất vài phút)');

    // Sử dụng lệnh cài đặt được khuyến nghị chính thức
    const setupResult = await sandbox.commands.run('cd uptime-kuma && npm run setup', {
      onStdout: (data) => console.log('Cài đặt:', data),
      onStderr: (data) => console.log('Lỗi cài đặt:', data)
    });

    console.log('Cài đặt hoàn tất.');
    console.log('Đang khởi động máy chủ Uptime Kuma...');

    // Khởi động máy chủ ở chế độ nền
    const proc = await sandbox.commands.run(
      'cd uptime-kuma && node server/server.js',
      {
        background: true,
        onStdout: async (data) => {
          console.log('Đầu ra máy chủ:', data);

          // Phát hiện động số cổng
          const portMatch = data.match(/(?:Listening on port|HTTP Server on port)\s*(\d+)/i) || 
                           data.match(/port\s*(\d+)/i);

          if (portMatch) {
            const port = parseInt(portMatch[1]);
            const host = sandbox.getHost(port);
            console.log(`🔍 Gỡ lỗi - getHost(${port}) trả về: ${host}`);

            // Xây dựng URL an toàn với định danh client
            const url = await generateSecureUrl(host, port, sandbox.sandboxId, sandbox);
            console.log('\n✅ Demo Trực Tiếp Uptime Kuma của bạn đã sẵn sàng!');
            console.log(`🔗 Truy cập tại đây: ${url}`);
            console.log(`🔢 Đã phát hiện cổng: ${port}`);
            console.log('⏰ (Sandbox này sẽ tự hủy sau 10 phút)');
          } else if (data.includes('Server is ready') ||
                    data.includes('Server Type: HTTP') ||
                    data.includes('Creating express and socket.io instance')) {
            // Nếu không phát hiện cổng cụ thể, thử cổng mặc định 3001
            const host = sandbox.getHost(3001);
            console.log(`🔍 Gỡ lỗi - getHost(3001) trả về: ${host}`);

            const url = await generateSecureUrl(host, 3001, sandbox.sandboxId, sandbox);
            console.log('\n✅ Demo Trực Tiếp Uptime Kuma của bạn đã sẵn sàng!');
            console.log(`🔗 Truy cập tại đây: ${url}`);
            console.log('🔢 Sử dụng cổng mặc định: 3001');
            console.log('⏰ (Sandbox này sẽ tự hủy sau 10 phút)');
          }
        },
        onStderr: (data) => {
          console.log('Lỗi máy chủ:', data);
        }
      }
    );

    console.log('Máy chủ đã được khởi động ở chế độ nền. Đang chờ hết thời gian chờ...');

    // Giữ cho chạy trong 10 phút
    await new Promise(resolve => setTimeout(resolve, 10 * 60 * 1000));

  } catch (error) {
    console.error('Đã xảy ra lỗi:', error.message);
    console.error('Lỗi đầy đủ:', error);

    // Không hủy sandbox ngay lập tức khi có lỗi - cho nó thời gian
    console.log('Giữ sandbox sống thêm 5 phút nữa để gỡ lỗi...');
    await new Promise(resolve => setTimeout(resolve, 5 * 60 * 1000));

  } finally {
    try {
      await sandbox.kill();
      console.log('Demo sandbox đã bị hủy.');
    } catch (killError) {
      console.log('Lỗi khi hủy sandbox:', killError.message);
    }
  }
}

createUptimeKumaDemo().catch(console.error);

2. Chạy Script

bash Copy
# Đầu tiên, cài đặt SDK AgentSphere
npm install agentsphere-js dotenv

# Sau đó, chạy script với API key của bạn
AGENTSPHERE_API_KEY=your_api_key node uptime-kuma-demo.mjs

3. Chứng Kiến Phép Màu

Chỉ sau vài phút (chủ yếu tùy thuộc vào tốc độ cài đặt npm), terminal của bạn sẽ in ra một URL công khai.

Bất kỳ ai cũng có thể sử dụng liên kết này để truy cập vào một phiên bản Uptime Kuma hoàn toàn hoạt động đang chạy trong một sandbox đám mây!

Ý Nghĩa Của Điều Này Đối Với Thế Giới Mã Nguồn Mở

Khả năng “demo một cú nhấp chuột” này mang lại giá trị lớn cho hệ sinh thái mã nguồn mở:

Đối với các chủ dự án:

  • Tăng sức hấp dẫn của dự án: Một demo trực tiếp nói lên nhiều hơn một ngàn từ trong một README.
  • Thu thập phản hồi nhanh hơn: Người dùng có thể “thử trước khi cài đặt” và cung cấp phản hồi sớm hơn.
  • Đơn giản hóa việc tham gia của cộng tác viên: Cung cấp môi trường phát triển chuẩn hóa, ngay lập tức cho các cộng tác viên tiềm năng.

Đối với người dùng dự án:

  • Thử nghiệm không tốn phí: Đánh giá an toàn một công cụ mà không chạm vào môi trường cục bộ của bạn hoặc phải trả tiền cho máy chủ.
  • Tránh rủi ro bảo mật: Chạy mã nguồn mở không rõ nguồn gốc trong một sandbox cách ly, bảo vệ máy tính và dữ liệu của bạn.

Kết Luận: Trở Thành Người Bảo Vệ Dự Án Mà Bạn Yêu Thích

AgentSphere không chỉ là một công cụ phát triển—nó là một kết nối và khuếch đại.

Lần tới khi bạn phát hiện một dự án mã nguồn mở tuyệt vời nhưng gặp khó khăn trong việc giới thiệu nó cho đồng nghiệp hoặc bạn bè, hãy thử tạo một demo trực tuyến với AgentSphere.

Bạn sẽ giúp dự án thu hút sự chú ý trong khi tận hưởng một trải nghiệm phần mềm mượt mà, an toàn và tương tác cho bản thân.

Xem thêm các demo từ nhân viên không kỹ thuật | Thử nghiệm AgentSphere Miễn Phí | Tham gia Cộng Đồng Discord của chúng tôi

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào