canva-connect-api-starter-kit 的安装和配置教程

2025-05-22 04:36:38作者：胡唯隽

1. 项目基础介绍和主要编程语言

canva-connect-api-starter-kit 是一个开源项目，旨在帮助开发者快速开始使用 Canva Connect API。该项目提供了一个电商演示应用的示例，以及 Canva Connect API 的 OpenAPI 规范。项目主要使用 TypeScript 编程语言开发，是一个典型的 Node.js 应用。

2. 项目使用的关键技术和框架

该项目使用了以下关键技术框架：

Node.js: 项目的运行环境，用于构建后端服务。
Express.js: 用于创建 HTTP 服务和路由。
Multer: 用于处理文件上传。
openapi-ts: 用于根据 OpenAPI 规范生成 TypeScript 客户端 SDK。
TypeScript: 项目的主要编程语言，提供了类型安全。

3. 项目安装和配置的准备工作及详细安装步骤

准备工作

在开始安装之前，请确保您的系统已安装以下软件：

Node.js (推荐版本 v20.14.0)
npm (推荐版本 v9 或 v10)
Git

为了确保 Node.js 的正确版本，建议使用版本管理工具，如 nvm。

安装步骤

克隆项目仓库

在命令行中执行以下命令，将项目克隆到本地：
```
git clone https://github.com/canva-sdks/canva-connect-api-starter-kit.git
```
安装依赖

进入项目目录：
```
cd canva-connect-api-starter-kit
```
然后，安装项目依赖：
```
npm install
```
配置环境变量

在 demos/ecommerce_shop 目录中创建一个 .env 文件，并添加以下环境变量：
```
DATABASE_ENCRYPTION_KEY=your_encryption_key
CANVA_CLIENT_ID=your_client_id
CANVA_CLIENT_SECRET=your_client_secret
```
其中 DATABASE_ENCRYPTION_KEY 是自动生成的，如果 .env 文件中没有，可以运行 npm run generate:db-key 生成。CANVA_CLIENT_ID 和 CANVA_CLIENT_SECRET 是在 Canva 开发者门户创建集成时生成的。
运行应用

在 demos/ecommerce_shop 目录中，运行以下命令启动应用：
```
npm start
```
注意：访问应用时，使用以下地址：
```
http://127.0.0.1:3000
```
请勿使用 localhost:3000 访问，否则可能会遇到 CORS 错误。