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

相关推荐
余生H2 小时前
前端Python应用指南(二)深入Flask:理解Flask的应用结构与模块化设计
前端·后端·python·flask·全栈
XinZong2 小时前
【AIGC】深入解析变分自编码器(VAE):理论、数学原理、实现与应用
人工智能·aigc
羑悻的小杀马特2 小时前
【AIGC篇】畅谈游戏开发设计中AIGC所发挥的不可或缺的作用
c++·人工智能·aigc·游戏开发
魔术师卡颂2 小时前
最近看到太多 cursor 带来的焦虑,有些话想说
前端·aigc·openai
Domain-zhuo3 小时前
Git和SVN有什么区别?
前端·javascript·vue.js·git·svn·webpack·node.js
涔溪3 小时前
node.js高级用法
node.js
懒羊羊我小弟4 小时前
包管理工具npm、yarn、pnpm、cnpm详解
前端·npm·node.js·yarn·cnpm
anyup_前端梦工厂14 小时前
初始 ShellJS:一个 Node.js 命令行工具集合
前端·javascript·node.js
芝麻粒儿15 小时前
Android修行手册 - 移动端几种常用动画方案对比
aigc·动画·lottie
canonical_entropy15 小时前
DeepSeek AI的技术理解力超越普通程序员--以Delta定制概念的理解为例
低代码·aigc·openai