[控场AI]
· 8 分钟阅读· 4,355 字

MERN+生成式AI构建广告SaaS平台全拆解

MERN+生成式AI构建广告SaaS平台全拆解

AdCampaignManager以MERN叠加Socket.IO与Groq LLM,用三层策略保障AI输出可靠。

AdCampaignManager是一个面向小型代理商和自由职业者的全栈广告活动管理平台,采用MERN架构并叠加Socket.IO实时层与Groq LLM的AI层,包含仪表盘、认证、活动管理、受众、分析、订阅、评论、团队协作、支持工单和AI洞察共10个核心模块,每个模块配有专属AI服务。文章重点拆解了五项关键工程决策:强制JSON模式、cleanValue清洗、Socket.IO房间订阅、Node-Cron定时自动化,以及多角色权限与活动生命周期。作者的核心结论是,生产级AI的关键不在调用LLM本身,而在提示工程、错误处理与数据清理,可靠性优先于巧妙。

现有广告活动管理工具要么过于昂贵,要么过于复杂。大量小型代理商和自由职业者至今仍靠电子表格管理投放,市场上缺乏一个兼顾功能与易用性的中间选项。开发者为此构建了AdCampaignManager——一个将实时数据与生成式AI结合的全栈广告活动管理平台,本文拆解其技术架构与工程决策。

AdCampaignManager 完整模块总览

技术栈与十大核心模块

该项目采用经典MERN架构并叠加实时通信与AI层。前端为React + Vite + Tailwind CSS v4,后端为Node.js + Express.js,数据库使用MongoDB + Mongoose,实时层借助Socket.IO,AI层调用Groq LLM的openai/gpt-oss-120b模型。图片上传通过Cloudinary + Multer完成,邮件用Nodemailer,定时任务用Node-Cron,认证基于JWT + Bcrypt + OTP。

平台包含10个核心模块:仪表盘(实时展示展示量、点击、转化、收入、CTR、CPC、ROI、CVR等KPI,数据全部从MongoDB聚合管道实时拉取)、认证(注册、登录、邮箱OTP验证、2FA、密码重置、会话管理)、活动管理(完整CRUD,状态生命周期从草稿到排期到运行到暂停到完成到取消,支持复制与并排对比,创意素材经Cloudinary上传)、受众管理(年龄段、性别、50个国家、50个城市、50个兴趣标签、50种语言及设备定向,支持受众重叠检测)、分析与洞察(实时KPI、参与度热力图、流量来源、漏斗分析、活动排行榜)、订阅计划(12个以上付费层级、自动续费、企业套餐、用量分析)、评论与审核(五星评分、情感徽章、图片上传、管理员审批流程)、团队协作(Socket.IO实时聊天、看板、成员角色、活动流)、支持工单(分类、优先级、回复线程、内部备注、知识库)、AI洞察仪表盘(平台级KPI、异常告警、AI叙事)。

团队协作模块:成员列表与Socket.IO实时聊天

MERN架构指由MongoDB、Express.js、React和Node.js四个组件构成的全栈JavaScript技术栈。MongoDB是面向文档的NoSQL数据库,以类JSON格式存储数据,适合活动、受众等结构灵活的业务对象;Express.js是运行在Node.js上的轻量Web框架,负责路由、中间件与请求处理;React负责组件化前端渲染;Node.js提供服务器端运行时,使前后端共用同一门语言。

在AdCampaignManager中,MERN之上还叠加了Socket.IO实时通信层和调用Groq LLM的AI层,形成“请求-响应 + 实时推送 + 智能生成”的混合架构。Socket.IO在客户端与服务器之间维持长连接,适合聊天和状态同步;Groq LLM则以独立服务的形式被各模块调用。这种分层让业务逻辑、实时通道与AI推理互不耦合,也解释了为何平台能同时支撑十个模块和十个AI服务。

生成式AI层的十个专属服务

这是该平台区别于普通广告管理工具的关键。每个模块都配有自己的AI服务,全部由Groq LLM驱动。

分析AI负责叙述洞察、检测异常、预测30/60/90天收入、生成报告、提供KPI建议、解释趋势、重新分配预算、分析创意表现。活动AI可撰写文案、建议目标、优化预算、生成名称、质检、建议排期。受众AI能推荐受众、建议兴趣、估算触达、优化人口统计、构建相似受众、解决重叠。计划AI推荐套餐、撰写权益、建议升级、检测续费风险、建议定价、构建企业方案。评论AI做情感分析、假评论检测、评论摘要、起草管理员回复、审核、图片亮点提取。洞察AI叙述平台情况、检测异常、预测收入、生成报告、建议KPI、解释趋势。支持AI分类工单、起草回复、检测重复、建议FAQ、预测解决时间、自动撰写FAQ。团队AI总结聊天、自动分配任务、寻找会议时间、提供生产力洞察、建议文件标签、推荐负责人。

AI助手正在撰写文案,显示AI思考中的加载状态

五项关键工程决策

JSON模式强制约束。 每个AI提示都强制LLM返回合法JSON。作者指出,若不启用JSON模式,AI有时会返回Markdown,导致前端解析器崩溃。这是保证UI稳定的第一道防线。

cleanValue辅助函数。 AI时常返回N/A、短横线或空字符串等占位值,该函数在数据到达前端前做清洗。配合每次AI响应后的数组过滤(移除无效值),形成"生成+清理"的可靠模式。作者明确表示,先强制JSON模式、再用cleanValue清洗、最后在后期处理中过滤数组,这三层approach是解决AI输出不可靠的核心。

基于房间的实时同步。 团队聊天采用Socket.IO房间订阅,每个客户端只加入自己需要的房间,命名格式为team:teamId,从而降低带宽并保证更新即时。作者强调,向所有客户端广播会拖垮性能,房间订阅才是正确做法。

定时自动化。 Node-Cron运行两个任务:每分钟模拟运行中的活动,生成逼真的展示、点击、转化、花费和收入数据;每天午夜聚合前一日分析数据为单个快照文档,以便快速响应30/60/90天查询。

多角色权限与活动生命周期。 通过owner字段检查加isAdmin布尔值加后端authorize中间件实现管理员与普通用户的差异化访问。活动系统支持从草稿到排期到运行到暂停到完成到取消的自动状态流转。

JSON模式(JSON Mode)是部分大模型API提供的一种约束机制:开启后,模型被强制只输出符合JSON语法的内容,而不混入Markdown代码块、解释性文字或多余符号。对于需要程序化解析AI结果的前端而言,这能显著降低解析失败率。

文中提到作者曾遇到AI返回Markdown导致前端解析器崩溃的问题,正是缺少这一约束的典型症状。需要说明的是,JSON模式只保证“语法合法”,并不保证字段齐全或值有意义——模型仍可能填入N/A、空串或错误类型。因此它必须与cleanValue清洗和数组过滤配合使用,三者构成从“格式可靠”到“数据可用”的完整链路。这也是作者将其称为“第一道防线”而非万能方案的原因。

安全架构与UI设计理念

安全层面包含十项措施:JWT访问与刷新令牌、邮箱6位OTP验证(1分钟过期)、可选邮箱2FA、OTP加短时JWT的密码重置、全局限流500请求/15分钟与认证限流50请求/15分钟、Helmet.js安全头、带凭证的CORS、Cloudinary文件类型校验、Bcrypt 10轮加盐哈希、所有密钥走环境变量。

UI采用毛玻璃效果(backdrop-blur-xl、border-2 border-white/10、rounded-3xl)、从黑到#021d0f再到黑的绿色渐变主题、带tracking-[0.2em]的大写粗体排版、动画箭头自定义下拉、带背景模糊的模态传送门、颜色编码的Toast通知、每张卡片的角括号装饰、浮动图标动画、表格行的交错淡入,以及完全响应式设计。

受众重叠检测展示共享兴趣与语言

JWT(JSON Web Token)是一种自包含的令牌格式,服务端签发后由客户端保存并在每次请求时携带,服务端通过签名验证其真伪而无需查询会话表。AdCampaignManager同时使用访问令牌与刷新令牌:访问令牌有效期短,用于日常接口调用;刷新令牌有效期长,用于在访问令牌过期后换取新令牌,从而兼顾安全性与用户体验。

OTP(一次性密码)则是一条独立的验证通道,通常以6位数字形式发送到邮箱,1分钟过期。它被用于三个场景:注册后的邮箱验证、可选的登录二次验证(2FA),以及密码重置。密码重置流程把OTP与短时JWT结合,确保只有真正持有邮箱的人才能完成重置。Bcrypt则以10轮加盐哈希存储密码,即使数据库泄露也难以还原明文。这三者与限流、Helmet.js安全头共同构成了平台的基础安全边界。

六大挑战与对应解法

AI输出可靠性问题用三层方案解决(JSON模式、cleanValue清洗、后期过滤)。实时团队聊天用Socket.IO房间订阅实现无刷新通信。分析集合膨胀用每日快照定时任务聚合为轻量集合。多角色权限用owner字段加isAdmin加授权中间件。活动生命周期用自动状态流转。服务器less环境下的图片上传问题则用Cloudinary流式API解决——文件缓冲区直接推送到CDN,绕开本地磁盘存储在无服务器部署中的失效问题。

Serverless(无服务器)部署把应用运行在由云厂商管理的临时容器中,实例可随时创建和销毁,本地文件系统通常只读或随实例消失。这意味着传统的“把上传文件存到服务器磁盘再提供访问”的做法在Serverless下会失效:文件可能写入成功,但实例销毁后即丢失,且无法被其他实例读取。

Cloudinary的流式API正是针对这一限制的解法。Multer在内存中接收文件缓冲区后,不再落盘,而是直接把缓冲区以流的方式推送到Cloudinary的CDN,返回一个可公开访问的URL存入数据库。这样既绕开了本地磁盘,又天然获得了CDN的分发与缓存能力,同时Cloudinary还能承担文件类型校验,与平台的安全措施衔接。

后续规划

作者正在开发基于语音的AI助手,目标是让用户说出"为运动鞋创建一个新活动,日预算5000卢比"这类指令后,AI自动填充所有字段。其他规划功能包括带光标追踪的实时协作、React Native移动应用、面向第三方开发者的公开API,以及高级预测分析仪表盘。

核心心得

构建这个平台让作者认识到,生产级AI不只是调用LLM。它关乎提示工程、错误处理、后期处理,以及向用户交付干净数据。最大的教训是:可靠性比巧妙更重要——简单的JSON模式加清理逻辑,胜过有时会失败的复杂提示。第二个教训是实时功能需要谨慎的架构设计,向所有客户端广播会扼杀性能,房间订阅才是出路。

#MERN Stack#生成式AI#广告SaaS平台#Groq LLM#Socket.IO实时通信#React广告管理#AI提示工程#Node.js全栈开发
分享:

相关推荐