Canva Connect API Starter Kit 启动和配置教程

1. 项目的目录结构及介绍

Canva Connect API Starter Kit 的目录结构如下所示：

canva-connect-api-starter-kit/
├── assets/
├── client/
│   └── ts/ # TypeScript SDK 文件
├── demos/
│   ├── ecommerce_shop/ # E-commerce Shop 演示应用
│   └── playground/     # Connect API 演示沙盒
├── .github/
│   └── workflows/       # GitHub Actions 工作流配置
├── .gitignore           # Git 忽略文件
├── .npmrc               # npm 配置文件
├── .nvmrc               # Node.js 版本管理配置文件
├── CHANGELOG.md         # 更新日志
├── LICENSE.md           # 许可证文件
├── README.md            # 项目说明文件
├── package-lock.json    # 包版本锁定文件
└── package.json         # 项目配置文件

• assets/：存放项目的静态资源。
• client/：包含 TypeScript 客户端 SDK 相关文件。
• demos/：包含两个演示应用，分别是 ecommerce_shop 和 playground。
• .github/workflows/：存放 GitHub Actions 的配置文件，用于自动化项目流程。
• .gitignore：指定 Git 忽略跟踪的文件和目录。
• .npmrc：npm 配置文件，定义了项目使用的 npm 配置。
• .nvmrc：指定项目使用的 Node.js 版本。
• CHANGELOG.md：记录项目的更新历史和版本变更。
• LICENSE.md：项目使用的开源许可证。
• README.md：项目的基本信息，包括用途、安装和使用说明。
• package-lock.json：记录项目依赖的精确版本，以确保环境的可重现性。
• package.json：定义了项目的元数据和依赖。

2. 项目的启动文件介绍

项目的启动主要通过 package.json 文件中的 scripts 字段定义的命令进行。以下是 package.json 中定义的一些常用启动脚本：

"scripts": {
  "start": "node demos/ecommerce_shop/server.js",
  "playground": "node demos/playground/server.js"
}

• start：启动电商演示应用。实际执行的是 demos/ecommerce_shop/server.js 文件。
• playground：启动 API 演示沙盒。实际执行的是 demos/playground/server.js 文件。

3. 项目的配置文件介绍

本项目使用 .env 文件来管理环境变量。在 demos/ecommerce_shop/ 和 demos/playground/ 目录下都有一个 .env 文件，它们分别用于配置电商演示应用和 API 演示沙盒。

以下是 .env 文件中可能包含的一些配置项：

DATABASE_ENCRYPTION_KEY=your_encryption_key
CANVA_CLIENT_ID=your_client_id
CANVA_CLIENT_SECRET=your_client_secret

• DATABASE_ENCRYPTION_KEY：数据库加密密钥，用于加密和解密存储在 JSON 数据库中的令牌。
• CANVA_CLIENT_ID：Canva 集成中生成的客户端 ID。
• CANVA_CLIENT_SECRET：生成的客户端密钥。

在开始运行项目前，确保正确设置了 .env 文件中的所有配置项。