前端转全栈: Next.js + ChatGPT 开发 AIGC 知识库(AI 写作) 欢迎围观~
前端技术栈已趋稳定，纯前端与切图工在未来的趋势中变得不具竞争力。全栈开发结合人工智能才是出路。
开始：
大家好，我是前端双越老师！我打算花几个月的时间来创建一个AIGC方向的项目——“划水AI”。这个项目是一个知识库平台，包含AI写作和内容处理功能，类似于Notion AI。该项目将详细阐述其详细的功能介绍。
对于那些对人工智能在网页开发中的应用感兴趣的同学来说，“划水AI”绝对值得一看。它不仅能帮助我们提升工作效率，还能为我们带来更多的创意与灵感。
但这个项目不是随便搞一个 demo 然后写篇博客就结束了。我对它有更高的要求。
首先，我希望这个项目是真实上线并进行运维的项目，能让你实际使用并可见、可触的。这样的项目要有域名、备案和SSL证书，服务器或Serverless服务，数据库、CDN和OSS等基础服务，并且要具备统计和监控报警的功能。
其次，项目中需要包含完整的前端和后端开发，这是全栈项目的要求。我建议采用node.js进行全栈（或者使用单页应用）开发，因为这能更好地体现你的技术实力。
此外，项目还需要有一定的技术难度，比如编辑器的实现、AI能力集成、多人在线协同编辑等都要求高技能。这些技术挑战和难题在简历中都会显得非常亮眼。
最后，我希望这个项目有一个具有前途且实用的方向，比如AIGC（人工智能生成内容）。目前来看，这是一个值得发展的领域。
如果你对该项目感兴趣，欢迎来围观并学习从设计、开发到上线、运维的全过程。同时，也可以加入我们的远程团队进行合作和开发。请通过私信与我联系哦。
我的技术价值观
作为一名程序员，尤其是独立开发者，应该有自己的作品作为代表作。就像作家、画家、歌手一样，都需要有自己的作品才能称为这个职位。不过作为一个业余画手，我还是希望能有所作为的。
虽然我自称为“双越老师”，但我不想仅限于讲师的角色。无论你技术多么高超，如果只停留在讲课上而忽略了实践项目的第一线，时间长了就会逐渐落伍，并且只剩下靠口才和名气来“忽悠”学员。
我的第一个工作经历是在大厂（某度、某滴）任职。之后我凭借 wangEditor 开源富文本编辑器，在国内开源领域取得了一定成就，被很多开发者下载并使用。
半年前，我宣布暂停维护 wangEditor 富文本编辑器，并一直在寻找新的项目方向。虽然技术驱动型的项目并不随意选择，但这样的项目确实需要花费大量精力。
最终，我决定启动一个 AIGC（人工智能生成内容）项目。
项目介绍
项目的业务方向包括 AI 写作和 AIGC 方向。我早就想好了这两个领域，但在取名时却遇到了困难。
起初，我打算叫 “AI 小记”，并申请了域名 aixiaoji.com。这个名字比较符合“AI 写作” 的方向。
但是，当我把名字与我的项目理念联系起来后，我发现这个名称并不完全贴合。“划水AI”（Dodge AI）可能更适合我的项目理念，因为它传达了我想要创造一种创新和有趣的作品的愿景。
在选择网站域名时也遇到了一些挑战。虽然现在域名资源稀缺，但寻找新的域名还是需要时间和努力的。
我最初想的是另一个名字"划水AI"。在搜索过程中发现这个名称并没有被使用过，于是我毫不犹豫地购买并注册了它。同时，我还申请了一个SSL证书，并将域名解析到了服务器huashuiai.com上。
“划水”这个词有时带有懒散的意思，而 AIGC 则是设计用来帮助人们轻松工作的。回顾历史，很多发明都是因为想要省去一些劳动的过程。比如汽车有了自动挡系统，驾驶者只需使用左脚操作即可。
在功能介绍方面：
首先，它是一个知识库平台（类似于语雀、石墨文档和腾讯文档）。这个平台支持富文本编辑，并且还具备团队和多人协同编辑的功能。
通过这些功能，用户可以更加高效地完成工作，无需花费大量时间在繁琐的排版和协作上。这样的设计正好符合 AIGC 的初衷——让每个人都能轻松地使用新技术来提高工作效率和创造力。
在此基础上，在富文本编辑器中增加AI辅助写作功能。
具体来说，当用户在某一行输入完单词后，按下空格键时，会弹出一个AI输入框。这个设计能让用户更加流畅地进行内容创作。
下面是具体的步骤：
1. 在富文本编辑器的某个行，点击空格键。
2. 之后会出现一个小窗口，显示预设好的字词或句子模板，供用户选择。
3. 用户可以根据需要选取相应的选项，并生成新的文本。
4. 完成后，用户可以在新添加的文字下方继续输入。
以下是一个简化的gif动画效果：
这样设计不仅能让用户在写作时更加高效便捷，还能提供一些灵感和创意，帮助他们创作出更好的内容。
在您提供的提示语下，AI 将会生成与该 GIF 动图相关的文字内容。请确保您的提示语是关于 GIF 动图的内容或主题的，并提供足够的细节以便 AI 可以准确理解并生成相关的内容。
例如，如果提示语是关于一个特定角色或场景，请告诉我这个角色或场景的名字和背景故事。这样可以确保生成的文字内容与您期望的一致。
对不起，我无法直接查看或操作 GIF 图像。如果你有需要对文本进行某种修改或者处理的需求，请提供具体的内容和要求。我可以帮助你分析现有内容，给出改进建议或者指导如何使用AI工具来完成任务。例如，我们可以讨论如何用自然语言处理技术扩展、总结一段文字，或是如何利用机器翻译功能将一段英文文本翻译成其他语言。
还有更多有趣的功能，例如当你没有思路时AI来头脑风暴，再例如把一些内容整理为表格……不仅仅是文字和写作。
AI现在已经遍地开花。前几天OpenAI刚刚发布了Sora，它可以根据文字生成视频，刷爆朋友圈。
基于这个知识库平台，可以集成更多的形式，如AI生成图片、音频、视频，或者让AI自动审核、发布或评论。AI的想象力才刚被开发，亟待未来释放。
例如可以使用AI做PPT，输入内容即可生成大厂宣传片一样的动画效果，这都是即将要发生的。
类似产品
国外最出名的就是Notion。Notion本来是一个知识库平台（像国内语雀、腾讯文档），2023年Notion推出AI写作功能，直接惊艳了全世界的创作者，也让它和其他知识库平台立马拉开差距。
国内目前有火山写作（字节出品）、讯飞写作（科大讯飞出品）、百度智能写作平台。这些都是各大公司出品的，背后分别是他们自己的AI大模型。更多的是一种展示价值，并非商业价值。
这方面国内总是落后一步，但也得步步跟紧啊。
项目架构设计
项目架构设计图如下，概述所有的功能。
编辑器是知识库和AI写作项目的基石之一，尤其是在使用wangEditor进行此类项目时，这使得我在这一领域有显著的优势。
编辑器
作为一个知识库和AI写作文本的开发者，我拥有丰富经验并擅长富文本编辑器。在创作这款项目的过程中，这种优势尤为突出。
另外，AI写作需要将富文本编辑器的能力与 AI 能力结合起来。开发过程十分艰巨，一旦成功将效果加倍。
AI写作
上文已经讲到了，并给出 GIF 动图示例。
协同编辑
知识库项目需支持团队、多人协同编辑，这是一个最基本的需求。因此，在初期就应考虑这部分功能。
用户管理
开发注册用户，需要支持多种方式，如微信扫码、GitHub 登录、短信验证码和邮箱验证码等。这可能涉及注册（或购买）第三方服务。同时，需要严格制定用户的管理制度，及时封禁违规的举报者。
VIP 和支付功能
ChatGPT 等 AI 模型的 API 都是收费的，如果用户数量增加，完全免费是不可能的。因此，肯定得设计一个 VIP 机制，并收取相应的费用来持续运行项目。
另外，对于团队人数、协同编辑在线人数和作品数量等，可以按等级制定 VIP 相关的收费标准。毕竟线上项目需要各种服务和硬件。
免费是不可持续的，认真考虑收费机制。
导入导出
需支持网页、Word 文档的导入和 pdf、word 等格式的导出功能。
技术选型
技术栈
使用 React + Next.js 全栈开发。
React 是全球最火的前端框架，Next.js 这两年也在大力发展，尤其是在 v14 中引入了服务端组件和 Stream 流式渲染，性能和体验都非常好。
项目后台管理系统可能考虑 Nest.js 开发，采用前后端分离的方式。加入 Nest.js 可以扩充我们在 node 全栈领域的技术广度和深度。
PS：不会 React 和 Next.js 怎么办？我未来会出两套免费的入门教程，后面会发布博客到掘金。
数据库
选择 Prisma + MySQL 或 PostgreSQL ，这也是 Node 服务器常用的数据库解决方案。如果后期有需要，可以考虑增加其他数据库如 Redis 等。
AI 大模型
优先选择 ChatGPT（即 OpenAI 平台），3.5 Turbo 的接口我已经搞定了，后面看能否升级到 4.0。
国内用 ChatGPT API 还有些不确定性的，好在现在大模型有很多。国外有 ChatGPT Claude 等，国内也有文心一言、通义千问、科大讯飞等。项目会支持多种 AI 大模型，并供用户自由选择切换。
编辑器
Slate.js 是非常流行的编辑器底层能力，而且它就是使用 React 渲染 UI ，很灵活且 API 健全，非常适合搭建自定义的富文本编辑器。wangEditor v5 也是基于 slate.js 的。
Tiptap 也是一个非常火的编辑器，它是基于 ProseMirror 封装的，后者也是老牌的富文本编辑器。
Tiptap 封装好的东西比较多，有各种插件，而且它还内置了 AI 功能，对 AI 开发比较友好。
但 AI 功能是需要收费的，并且要接入国外的服务。国内稳定性是个风险。
至于选择哪个，我现在还不确定，待仔细调研后再认真选择一个。
PS：wangEditor 适合做一些传统文档的编辑器，不太适合这种高度自由定制、AI 能力集成的场景。
协同编辑
在线文档知识库发展了数十年，协同编辑器已有比较成熟的方案。可以使用 yjs 解决，它支持多种富文本编辑器。
上线和运维
使用 Next.js 开发，最好是用 Vercel 的部署和运维，但由于国内不能用。虽然是付费的，但 Vercel 支持 Serverless、pgsql 数据库、Edge runtime、CDN、统计等，用起来很方便。
国内的 Serverless 腾讯云的、阿里云的，感觉都没有做到很成熟。所以，可以先用云服务器 + Docker 部署起来用着，在探索 Serverless 的方案吧。
另外，既然要上线，那肯定也少不了数据库、CDN、OSS、统计、监控报警等基础服务，还有手机号注册、微信扫码登录、微信支付或退款等第三方服务。
项目可锻炼的技术能力
从前端到全栈
前端技术栈已经稳定，纯前端和切图仔是没有未来的。前端技术栈已经稳定了，React 一两年没更新了，Vue 升级也是小改动。打包构建工具也只能卷效率和速度（甚至不用 nodejs 改用 rust）配置就那些了。
技术栈稳定了，就不需要那么多精力去搞技术、搞配置、搞流程、造轮子了，纯前端也就没什么用武之地了（就搬砖搞业务）。
所以，node 全栈才是出路。不信你看 React 最近的一些实验性功能，都是服务端渲染相关的。
真实、复杂项目的架构能力
对于一个业务复杂的项目，作为技术负责人（架构师），你需要从 0 到 1 开始设计，并考虑哪些方面？该如何编写技术方案文档和画出架构设计图？这些我想大部分前端人员是没有经验的。
项目有哪些难点，有什么复杂度？如何识别出来、调研、得出解决方案并安全应用到项目中？这些都是高级（特别5+年经验）程序员需要掌握的能力。
一个真实项目从 0 开发、测试到最后上线和运维，如何保证安全稳定的运行？如何发布上线到云服务器，如何操作线上数据库，如何监控线上服务（出问题要报警），如何做日志和统计，如何保证安全性与稳定性？这些都是项目负责人最需要关心的事情。如果项目隔三差五 500 报错，那年终奖还要不要了？
所以，开发团队应该把精力放在技术栈稳定、架构能力提升以及真实复杂项目的设计与管理上，而不仅仅是前端技能的提高和短期任务的完成。
开始接触 AI 和 AIGC
你看全世界有多少人在搞 AI 相关的事情，国内和国外，看看有多少资本涌入了 AI 领域。当前大环境不好，AI 是唯一能吸引资本的领域，也是未来破局的唯一机会。
作为一名程序员，虽然我们不是直接搞 AI 大模型的，但也得近水楼台先得月、春江水暖鸭先知，得及早接触。AIGC AI 写作就是一个很好的方向。
还有更多
作为一个真实上线、全流程、业务复杂的项目，它涵盖的技术能力还有很多。如权限、中间件、日志、OAuth、CI/CD DevOps，安全，性能统计等。
过几天我会整理一篇《资深前端工程师（架构师）知识体系》整理成一个思维导图，到时会发布到掘金，可以关注我。
已做的准备
春节假期期间我已经做了一些基础准备，有了这些就可以做起来。
我已充值 ChatGPT API 并且可以正常使用。
目前余额充足，请随时使用。如需额外资金，可继续充值。PS：新用户首次注册时将获得额外 5刀 充值奖励，建议不要浪费这个机会。
最近 ChatGPT Plus 已经进行了更新，我已经重新注册了一个 Plus 账号，并且计划将 API 升级至 GPT 4.0。
在当今社会，一个“务虚”的年代已经到来，务实的人显得稀少。在这样的环境中，所谓的“务虚”往往意味着低成本高收益的活动，而务实则需要付出更多努力，并且能够实现实际成果。
古人云：“君子动口不动手”。中国人自古以来就是圣人坐而论道、舌战群儒，很少有人真正动手实践。看看那些搞开发的人，他们的资料和项目数量可能是海量的，但有多少真正的价值呢？
知乎上那些侃侃而谈的人们，他们对技术的理解或许是高大上的，但实际上能提供的内容有多少呢？例如他们可能会提供一个开发链接给你。
我即将36岁，依旧可以有创造力和执行力。在2014年就开始写博客，在2015年开发了wangEditor。至今已快10年，这些经历让我明白，即使是最伟大的人也有可能因为时间的流逝而失去创造力和激情。
回顾我的职业生涯，从2014年开始，我几乎没怎么停歇过。我在30岁之前都充满了好奇心和希望，对技术充满动力和热情。然而到了35岁以上，这种状态可能就慢慢消失了。
周杰伦虽然拥有创作黄金期，但他的创造时间并不长（例如他不是拿自己与周杰伦比较），也仅限于10年左右的时间段。所以，现在正是我们去追求自己的激情的时候，而不要等到将来有空或者有钱了再去尝试。
在这个“务虚”的年代里，我们可以选择去做一些有意义的事情，而不是无所事事地“划水”。你可以私信我了解更多详情。
最后与你共勉：想干什么就赶快去做吧。只要不违反法律和普世道德，现在就可以开始行动。不要等到将来有空或者有钱了再去尝试。因为随着时间的流逝，你可能就失去了这种动力和激情。