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

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

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

开始

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

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

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

得到很多关注和支持

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

当时计划 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 ,过程还是比较麻烦的。

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

协同编辑

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

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

线上服务

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

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

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

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

提前开发部分功能

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

已开发的功能

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

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

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

部署测试环境

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

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

接下来开发

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

试运行和反馈

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

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

最后

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

想加入的可以私信我~ PS:等 3 月结束"早鸟"待遇就没有了。

相关推荐
芯小途20264 小时前
微短剧新规 9 月 1 日施行:AIGC 微短剧的「AI 标识 + 占比追溯」怎么在制作流水线里落地(附自查脚本)
人工智能·aigc
kaliarch4 小时前
WorkBuddy Skill:把重复 SOP 打成可调用的手册包
aigc
倾颜6 小时前
NestJS 核心概念梳理:从 Module、Controller 到 Guard、Interceptor
后端·node.js·nestjs
Dawson Zhu6 小时前
图结构(Graph)如何重构智能体认知?从DAG规划到GraphRAG的技术拆解
人工智能·语言模型·重构·架构·aigc
奈斯先生Vector7 小时前
从 127.0.0.1:3080 到插件运行时:DeepSeek Harness 远程开发与版本治理实战
linux·运维·人工智能·ubuntu·aigc
VIP_CQCRE8 小时前
Veo API 实战:用一句镜头语言,批量生成商业级 AI 视频
aigc·api·ai视频·acedatacloud·veo
用户938515635078 小时前
从一个"房子"讲起:为什么 Next.js 是面向 AI 的全栈框架(附博客实战拆解)
ai编程·全栈·next.js
wangruofeng11 小时前
1.17 万赞的 Claude 技能,源码只有 321 字节:拆解 Anthropic 内部疯传的 ELI5
aigc·ai编程·claude
苦夏木禾13 小时前
tree-fs 批量创建文件
node.js