Chuyển đến nội dung chính
Đây là một ví dụ về cách triển khai và mẫu thiết kế như một điểm khởi đầu cho các nhà phát triển plugin Figma muốn tích hợp API khóa bản quyền Dodo Payments để cấp quyền truy cập cho các plugin của họ. Mẫu này thể hiện đầy đủ chức năng xác thực và kích hoạt khóa bản quyền, cung cấp mọi thứ bạn cần để tạo ra các plugin Figma cao cấp với tính năng cấp phép tích hợp sẵn.

​
Tính năng

  • Xác thực khóa bản quyền: Xác thực khóa bản quyền với API Dodo Payments
  • Kích hoạt khóa bản quyền: Kích hoạt khóa bản quyền với xác định người dùng
  • Hỗ trợ môi trường: Có thể cấu hình cho cả môi trường thử nghiệm và môi trường thực
  • Proxy CORS: Sử dụng proxy Cloudflare Worker để xử lý các hạn chế CORS
  • Hỗ trợ TypeScript: Triển khai hoàn toàn có kiểu với xử lý lỗi đúng cách

​
Bắt đầu

1

Tạo Plugin Cơ Bản

Tạo dự án plugin Figma của riêng bạn bằng cách sử dụng hướng dẫn nhanh về plugin của Figma. Điều này sẽ tạo ra một khung với một manifest.json file.
Bước này chỉ để có một tên và ID duy nhất cho plugin của bạn. Bạn có thể bỏ qua các tệp được tạo ra sau khi cam kết ID và tên vào kho git của bạn trong bước tiếp theo.
2

Nhân Bản Triển Khai Ví Dụ

Nhân bản kho dodopayments-figma và cập nhật manifest.json của nó với tên và ID từ thư mục plugin mà bạn đã tạo.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
Ví dụ này phục vụ như điểm khởi đầu của bạn cho việc tích hợp.
Bạn cần thay đổi URL nguồn từ xa thành kho của riêng bạn để kiểm soát phiên bản.
3

Cài Đặt Phụ Thuộc

Chạy lệnh sau trong thư mục gốc của dự án bạn:
npm install
4

Cấu Hình Môi Trường

Đặt API_MODE trong src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Luôn sử dụng test_mode trong quá trình phát triển để tránh xử lý các khoản thanh toán thực.
5

Tùy Chỉnh Các Thành Phần

Tùy chỉnh các thành phần của plugin để phù hợp với nhu cầu của bạn:
  • Cập nhật Authenticated.tsx để cung cấp chức năng cho người dùng có khóa giấy phép hợp lệ
  • Tùy chỉnh LicenseKeyInput.tsx để phù hợp với sở thích thiết kế của bạn
Thành phần Authenticated.tsx là nơi bạn sẽ thêm các tính năng cao cấp của plugin yêu cầu giấy phép hợp lệ.

​
Cấu Hình

1

Cấu Hình Truy Cập Mạng

Plugin cần truy cập mạng để giao tiếp với proxy CORS. Thêm những điều sau vào manifest.json:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
Điều này cho phép plugin xác thực và kích hoạt các khóa bản quyền bằng cách sử dụng API Dodo Payments.
Proxy CORS là cần thiết vì API Dodo Payments hiện không cho phép các cuộc gọi API từ các ứng dụng dựa trên trình duyệt.
2

Cấu Hình Chế Độ API

Trong src/ui/api.ts, cấu hình chế độ API:
const API_MODE = "test_mode"; // or "live_mode"
Chuyển sang live_mode chỉ khi bạn đã sẵn sàng cho sản xuất và đã thử nghiệm kỹ lưỡng trong chế độ thử nghiệm.

​
Phát Triển

1

Nhập Plugin

Nhập plugin vào Figma bằng cách sử dụng “Nhập Manifest” từ ứng dụng Figma trên máy tính.
Bạn sẽ cần cài đặt ứng dụng Figma trên máy tính để phát triển và thử nghiệm các plugin cục bộ.
2

Bắt Đầu Máy Chủ Phát Triển

npm run dev
Điều này khởi động máy chủ phát triển với việc theo dõi tệp để tự động tái xây dựng.
Plugin của bạn sẽ tự động tái xây dựng khi bạn thực hiện thay đổi đối với mã nguồn.

​
Lệnh Xây Dựng

LệnhMô Tả
npm run buildXây dựng plugin cho sản xuất
npm run devBắt đầu máy chủ phát triển với theo dõi tệp
npm run lintKiểm tra kiểu mã và lỗi
npm run formatĐịnh dạng mã với Prettier

​
Tích Hợp Khóa Bản Quyền

Triển khai ví dụ bao gồm xác thực và kích hoạt khóa bản quyền hoàn chỉnh mà bạn có thể tùy chỉnh cho plugin của mình:
  1. Nhập liệu của người dùng: Người dùng nhập khóa bản quyền của họ trong giao diện plugin
  2. Xác thực: Plugin xác thực khóa với API Dodo Payments
  3. Kích hoạt: Các khóa hợp lệ được kích hoạt với xác định người dùng
  4. Kiểm soát truy cập: Chức năng của plugin được mở khóa cho những người sở hữu khóa bản quyền hợp lệ

​
Xuất Bản

Khi plugin của bạn đã sẵn sàng:
  1. Xây dựng cho sản xuất: npm run build
  2. Thử nghiệm kỹ lưỡng trong cả chế độ thử nghiệm và chế độ trực tiếp
  3. Làm theo hướng dẫn xuất bản plugin của Figma
  4. Gửi để xem xét qua Cộng đồng Figma

​
Kho Lưu Trữ

Triển khai ví dụ hoàn chỉnh có sẵn tại: github.com/dodopayments/dodopayments-figma Sử dụng điều này như điểm khởi đầu của bạn để xây dựng plugin Figma cao cấp của riêng bạn với tích hợp khóa bản quyền Dodo Payments.