【项目实训01】初始项目搭建

在本周的项目创新实训中，我们团队顺利开启了项目的初始搭建工作。接下来，将简要介绍我们项目的核心结构及所用技术栈。

项目结构

• actions 文件夹 ：处理学习相关业务逻辑。
• app 文件夹 ：是应用的核心部分，包含主要的组件和页面等。
• components 文件夹 ：存放通用组件，这些组件在应用的多个页面中重复使用，提供统一的界面元素和交互功能。
• config 文件夹 ：指数配置文件 index.ts，集中管理应用的各种配置选项，方便在不同环境下进行切换和管理。
• db 文件夹 ：包含 drizzle.ts、queries.ts、schema.ts，分别用于数据库连接配置、常用查询函数封装以及数据库数据表结构定义。
• public 文件夹 ：用于存放静态资源文件，目前为空，后续会添加图片、字体等静态文件。
• scripts 文件夹 ：包含 prod.ts、reset.ts、seed.ts，分别用于生产环境构建部署、重置数据库或项目状态以及向数据库填充初始数据。
• store 文件夹 ：定义管理弹窗或模态状态的自定义钩子。
• types 文件夹 ：包含 canvas.ts，定义与 Canvas 绘图相关的类型接口。

技术栈

Next.js

具备服务器端渲染和静态站点生成功能，提供良好的开发体验，如文件系统路由、API 路由等，方便前后端协同开发，提高首屏加载速度和 SEO，适合构建语言学习应用。

• 通过 npm 安装 Next.js 及其相关依赖 npm create next@latest
• 根据项目需求安装一些常用的插件npm install eslint-config-next

Neon DB

高性能云托管数据库服务，自动备份、高可用、弹性扩展，简化数据库搭建维护工作，确保数据安全存储和快速访问，满足项目数据存储需求。

• 项目创建完成后，到Neon DB官网注册账号并创建数据库实例，获取数据库连接URL，填写到.env文件中
  

• 安装 Drizzle ORM 及 Neon DB 驱动，命令如下：npm install drizzle-orm pg

• 在 db/drizzle.ts 文件中，通过引入 Neon DB 的连接 URL 和 Drizzle ORM 的相关函数，创建数据库连接池并定义数据模型的映射关系
  

Clerk

为实现用户身份认证功能，我们引入了 Clerk。Clerk提供一站式身份认证解决方案，提供用户注册、登录等丰富功能，简洁 UI 组件和灵活 API，简化开发，保障用户账户安全。

• 首先到 Clerk 官网注册账号并创建应用，获取 Clerk 所需的环境变量，填写到.env文件中
  
• 安装 Clerk 的 React SDK，命令如下：npm install @clerk/nextjs @clerk/clerk-sdk-node

Stripe

为了实现支付功能，我们集成了 Stripe。Stripe是一个领先在线支付平台，支持多种支付方式和订阅支付，强大风险管理功能，确保安全高效收费，满足用户支付需求。

• 首先到 Stripe 官网注册账号并创建应用，获取 Stripe 的 API 密钥。
  

• 安装 Stripe 的 Node.js SDK，命令如下：npm install stripe

• 在 lib/stripe.ts 文件中，引入 Stripe SDK 并使用获取到的 API 密钥初始化 Stripe 客户端。
  

• 在后端 API 路由中，使用 Stripe 客户端处理各种支付相关的请求，如创建订阅、处理支付会话等。同时，在前端调用这些 API 路由来实现支付功能。

Webhook

实现与外部服务（如 Stripe）的即时事件通知，及时响应订阅状态变化等事件，更新应用数据，保持业务逻辑连贯性。

本周我们完成了项目的基本搭建，确定了整体结构和技术栈，为后续功能开发奠定了基础。