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

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。

安装步骤

1. 克隆项目仓库

   在命令行中执行以下命令，将项目克隆到本地：

   git clone https://github.com/canva-sdks/canva-connect-api-starter-kit.git
   

2. 安装依赖

   进入项目目录：

   cd canva-connect-api-starter-kit
   

   然后，安装项目依赖：

   npm install
   

3. 配置环境变量

   在 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 开发者门户创建集成时生成的。

4. 运行应用

   在 demos/ecommerce_shop 目录中，运行以下命令启动应用：

   npm start
   

   注意：访问应用时，使用以下地址：

   http://127.0.0.1:3000
   

   请勿使用 localhost:3000 访问，否则可能会遇到 CORS 错误。

按照以上步骤，您应该能够成功安装和配置 canva-connect-api-starter-kit 项目，并开始您的开发工作。祝您开发顺利！