Node 全栈项目【划水AI】紧张准备一个月了,汇报一下成果

5,133 阅读5分钟

你有没有花很长时间坚持做一件事儿?我曾经有很多次,现在又是一次。

大家好,我是双越老师~ 你可能看过我的 ke程,也可能用过我开发的 wangEditor 编辑器。

开始

一个月之前我发布了一篇博客 前端转全栈: Next.js + ChatGPT 开发 AIGC 知识库(AI 写作) 欢迎围观~

宣布我要做一个 Node 全栈项目 划水AI ,一个 AIGC 知识库项目,仿 Notion AI 支持多人协同编辑(详细功能可参考上文博客,其中 AI 功能很有意思),而且我还招募大家和我一起开发。

PS:这个项目是要真实上线的,域名、证书、服务器都搞定了,这次就玩点真格的!

image.png

得到很多关注和支持

文章发布之后,得到近 1k 同学的关注、支持,以及很多同学申请参与到研发团队中。

image.png

当时计划 4 月开始开发,于是我 3 月就紧张准备了一个月,忙的我把 1v1 面试咨询 都暂停了。

现在给大家汇报一下,这一个月我都做了啥,我是如何规划一个项目的前期准备工作的。

前期准备

搭建官网

首先,我得准备一个官网,1. 展现项目的核心标题和内容;2. 证明这个项目是真的要上线,不是本地开发 demo 。

于是我购买域名 huashuiai.com ,并购买阿里云服务器(建议按量付费),在腾讯云申请 SSL 证书(可免费一年,挺好),并且部署了现在的官网: huashuiai.com/

现在还是一个静态的网站,介绍功能为主,待后面开发完成,上线以后,大家就可以看到真实的项目了。

调研 ChatGPT API

我在自己的 ChatGPT 账号充值了 20 刀,先用着,后面不够了再充值。PS:或者去某宝上买 API key 也可以

准备 React Next.js 入门资料

项目的核心技术栈是 React 和 Next.js ,但有部分参与者不熟悉 React ,于是我写了两篇文章,帮助他们快速入门 React 和 Next.js 。

PS:基于我这么多年的 jiang 师经验,写这种入门文章还是很有优势的,深入浅出,一看就会。

技术调研

主要对于项目的核心和难点,进行技术调研。

调用 ChatGPT API

【划水AI】项目的核心能力之一就是 AI 功能,所以我首先调研的就是 Node.js 调用 ChatGPT API ,并分享了文章 2024版: 用 Node.js 调用 ChatGPT API 实现 Stream 流式聊天效果

富文本编辑器

富文本编辑器主要调研了两个:tiptap 和 slate.js 。

tiptap 内部使用了 proseMirror,所以严格来说 tiptap 应该和 plate 一个等级,而 slate.js 和 proseMirror 一个等级。

最终我选择使用 tiptap,并且就要它开发了一个 block editor demo ,过程还是比较麻烦的。

image.png

第一,tiptap 支持的插件更多,而且商业化的有保障;第二,tiptap 对于协同编辑器支持更好,而且它也有自己的协同编辑服务,可选择性更多。

协同编辑

我基于 tiptap 的协同编辑功能开发了一个 demo ,是用它提供的在线服务做的。

如果不用在线服务,我们也可以选择使用开源的一些服务,自己搭建在服务器上,例如 github.com/ueberdosis/…

image.png

线上服务

Next.js 可以使用 Vercel 直接部署上线,Serverless 形式,可惜国内访问不了 —— 得考虑国内用户的可用性,不能说发布上线了就不管了。

国内阿里云和腾讯云都有 Serverless 服务,不过我担心可能会有备an 的限制问题(现在 AI 主题的网站不好备an,IOS 都考虑使用百度 AI 能力)。

不过其他的可选性也挺多的,亚马逊 AWS Lambda 和微软 Azure functions 都是非常成熟的 Serverless 服务,还有其他一些产品 laf airCode 我也都做了记录,到时候综合考虑服务、价格、速度,去选择。

image.png

其他的如数据库、存储、CDN 等我有都看了一下,只要 Serverless 搞定了这些都好说,就是得花钱。

提前开发部分功能

我说是 4 月开始研发,说是这么说,但不能真的人都进来了,我才开始做。得提前积累一些内容,4月开始以后大家可以一次性看个够。

image.png

已开发的功能

核心技术栈是 React 和 Next.js ,以及 shadcn-ui 和 tailwindcss ,这都是社区推荐的技术方案。

数据库使用 Prisma ORM 和 Suapbase 提供的 pqsql 在线数据库,使用方便,而且速度很快。

image.png

登录校验使用 NextAuth(或者 Auth.js),开发了 Github 登录和邮箱登录。后面再扩展短信验证码、微信扫码登录。

image.png

部署测试环境

现在已经搭建了一个基础的框架,当然还没有富文本编辑器、AI 等高级功能。

但是一些流程已经跑通了,已经部署到了我的云服务器上,使用 Docker 部署的。测试环境,不能公开访问。

image.png

接下来开发

接下来即将开发核心功能:富文本编辑器,集成 AI 能力,协同编辑等。

试运行和反馈

4 月正式开发,但提前一周我就开始试运行了,先一些人进来,大家一起看看,一起沟通,看有没有啥问题,有的话早提出早改正。

但试运行的结果出乎我所料 —— 反馈非常好,而且都开始贡献一些问题的解决方法了。

image.png

最后

4 月了,项目已正式开始,估计再有 2 个月就可以上线第一个版本。

想加入的可以私信我~