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 月结束"早鸟"待遇就没有了。

相关推荐
程序员X小鹿2 小时前
这5个AI文本可视化工具太强了!一键把文本转信息图、流程图等多种可视化形式!PPT秒变高级!(建议收藏)
aigc
墨风如雪2 小时前
智谱GLM-4.6V开源:不仅仅是“看懂”,它终于长出了“双手”
aigc
阿杰学AI3 小时前
AI核心知识39——大语言模型之World Model(简洁且通俗易懂版)
人工智能·ai·语言模型·aigc·世界模型·world model·sara
realhuizhu6 小时前
屏幕上那一行刺眼的红色 `Time Limit Exceeded`,是不是你我再熟悉不过的场景?
aigc·算法优化·性能调优·ai提示词·程序员生产力
韭菜炒大葱7 小时前
别等了!用 Vue 3 让 AI 边想边说,字字蹦到你脸上
前端·vue.js·aigc
清水寺小和尚8 小时前
RAG (检索增强生成) 深度实战知识库
aigc
冴羽8 小时前
Nano Banana Pro 零基础快速上手
前端·人工智能·aigc
程序员爱钓鱼10 小时前
Node.js 编程实战:理解 Buffer 与 Stream
后端·node.js·trae
top_designer10 小时前
PS 样式参考:3D 白模直接出原画?概念美术的“光影魔术手”
游戏·3d·prompt·aigc·技术美术·建模·游戏美术
程序员爱钓鱼11 小时前
Node.js 编程实战:npm和yarn基础使用
后端·node.js·trae