【愚公系列】《人人都是AI程序员》023-项目实战2: 构建商业级AI 图像生成平台(十分钟实战:使用Resend 构建邮件营销系统)

【愚公系列】《人人都是AI程序员》023-项目实战2: 构建商业级AI 图像生成平台(十分钟实战:使用Resend 构建邮件营销系统)

💎【行业认证·权威头衔】
✔ 华为云天团核心成员:特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯:ZEEKLOG博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋:横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"(2022-2024)
🎖 双冠加冕ZEEKLOG"年度博客之星TOP2"(2022&2023)
🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】
覆盖全栈技术矩阵:
◾ 编程语言:.NET/Java/Python/Go/Node…
◾ 移动生态:HarmonyOS/iOS/Android/小程序
◾ 前沿领域:物联网/网络安全/大数据/AI/元宇宙
◾ 游戏开发:Unity3D引擎深度解析

文章目录


🚀前言

在前面学习中,我们一同走过了从认知觉醒到工具掌握、从基础搭建到项目实战的 完整流程。现在,是时候接受最终的挑战了——构建一个具备真正商业价值的复杂应用。

我们将要打造的不是一个玩具项目,而是一个集成了前沿AI 技术、完整支付体系、 用户管理系统的图像生成平台。该项目将综合运用你所学的每一项技能:从v0.dev 的精 美界面设计,到Supabase 的强大后端支持;从Replicate 的 AI 模型调用,到Stripe 的专业 支付流程;从MCP 的高级集成,到Vercel的生产环境部署。

当你完成学习后,你将不再是“学习编程的人”,而是真正的“独立创造 者”——有能力将任何创意转化为现实的数字时代创业者。

未来,正在你的指尖绽放。

🚀一、十分钟实战:使用 Resend 构建邮件营销系统

一个成功的 SaaS 产品不仅需要强大的功能,还需要在关键节点与用户进行高效沟通。为此,我们将集成 Resend——一款专为开发者设计的现代化邮件 API,为应用构建智能、自动化的邮件通信系统。

🔎1.自动化用户生命周期邮件

在用户生命周期的关键节点自动发送邮件,能有效提升用户体验和长期留存率。为此,我们基于 Supabase 与 Resend 配置三类自动化邮件,覆盖从注册到订阅的全链路触达场景。

  • 注册欢迎邮件:通过 Supabase 数据库触发器实现——当 auth.users 表中新增记录时,触发器调用边缘函数通过 Resend SDK 发送欢迎邮件。
  • 注册后使用指南邮件:利用 Supabase 内置的 pg_cron 扩展创建定时任务,每日执行一次,筛选出注册满三天的用户,向其发送包含高级使用技巧的指南邮件。
  • 订阅续费提醒邮件:同样通过 pg_cron 创建每日任务,查询即将到期的有效订阅,调用边缘函数在续费日前三天发送提醒邮件,减少非主动的流失。

🔎2.异步任务完成通知邮件

应用的核心功能(如 AI 图像生成)通常是异步执行的,用户提交任务后需要等待。邮件通知是确保用户及时获取结果、提升体验的最佳方式,该逻辑可无缝集成到 Replicate Webhook 处理路由(/api/webhook/replicate)中。

当接收到生成成功的通知,且图片成功保存到 Supabase Storage 之后,在完成所有数据库操作前,增加一个步骤:调用 Resend API 向用户发送主题类似于“你的 AI 作品已生成”的通知邮件,邮件正文可以包含生成图片的缩略图预览,以及直接跳转到用户个人作品页面的链接。

🔎3.用户行为触发式营销邮件

邮件系统可用于实现进阶的营销自动化,通过观察用户行为精准触达,以提升转化率。例如,可以设置低积分提醒与促销机制,当用户剩余积分低于预设阈值(如 5 积分)时,系统将自动触发一封个性化邮件。

具体实现上,可以在每次成功扣除积分的 Supabase 边缘函数内部,新增一个用户剩余积分检查逻辑,如果积分低于阈值,则调用另一个专门的边缘函数,通过 Resend 发送一封包含个性化文案和促销优惠的邮件,激励用户再次充值。

通过集成 Resend,应用不再是一个被动响应的工具,而是转变为能主动与用户沟通的平台,让用户体验和商业目标更紧密地结合在一起。

Read more

Claude Code免费使用教程,前端必看!

Claude Code免费使用教程,前端必看!

目前claude有两种使用方式,一种是官方购买渠道(太贵了,用不起,扎心。。。),还一种就是通过api方式,就是下面我讲的通过any-router提供的api调通就行~相当于中转站,主要是免费啊,谁能说不香! 1.注册LinuxDo账户 目前AnyRouter取消了github登录方式,只能通过LinuxDo账户登录,或者edu的邮箱登录,这里选择使用LinuxDo登录。 linux do官方网址:https://linux.do/   linux do邀请码:2E917F23-D9BF-44FE-BCBD-AE6AB3B1FC17 提示:如果Linuxdo邀请码失效,注册页面填写邀请码的那个输入框下面有邀请码链接,如图: 申请理由稍微写写,别全打逗号啥的,认真写下很快就过了。   2.any Router登录使用 上面linux do账号注册完毕就可以,登录any router了 any router网址:https://anyrouter.top/register?aff=iVs0    (貌似目前需要挂绿色软件才能登录上去) 一定要复制上面的网址(别删

一个人就是一支影视团队:实测国内最强影视级 AI 视频创作平台 TapNow——告别抽卡,导演级精准控制

一个人就是一支影视团队:实测国内最强影视级 AI 视频创作平台 TapNow——告别抽卡,导演级精准控制

实测国内最强影视级 AI 视频平台 TapNow:告别“盲盒抽卡”,实现导演级精准调度         在过去的一年里,文生视频赛道经历了爆发式增长。但对于真正需要将 AI 投入到生产环境中的创作者、产品经理和开发者来说,目前的 AI 视频工具普遍存在一个致命痛点——不可控。        跑偏的物理规律、诡异的肢体形变、如同“开盲盒”般的提示词玄学,让很多原本充满创意的构想,最终沦为废弃的半成品。如果你也受够了这种低效的“抽卡式”创作,那么今天介绍的这款号称国内最强影视级 AI 视频创作平台——TapNow,或许能彻底重塑你的工作流。 核心痛点突破:从“AI 幻觉”到真正的物理一致性 技术社区的受众深知,评价一个 AI 视频大模型底座的强弱,不仅看它能生成多惊艳的单帧,更要看它在长镜头下的时空一致性。 TapNow 在底层架构上进行了深度优化,重点解决了以下三个核心问题: 1. 极高保真度的物理交互: 无论是光影在水面的流动、烟雾的自然消散,

【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答

【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答

🌹欢迎来到《小5讲堂》🌹 🌹这是《前端》系列文章,每篇文章将以博主理解的角度展开讲解。🌹 🌹温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!🌹 目录 * 前言 * 报错信息 * DeepSeek解答 * 问题原因 * 解决方案 * 最佳实践 * 异步和同步 * 1. 同步(Synchronous)操作 * 示例:同步数据更新 * 2. 异步(Asynchronous)操作 * 示例 1:`setTimeout` * 示例 2:`async/await` * 3. Vue 3 的异步更新机制 * 如何等待 DOM 更新? * 4. 生命周期钩子中的异步 * 5. 总结 * 最佳实践 * 文章推荐 前言 好久没有写前端,

前端大文件分片上传实现与断点续传方案(含完整代码讲解)

在上传大文件(如视频、安装包、模型文件)时,直接上传容易出现以下问题: * 文件过大 → 浏览器/服务器容易超时 * 上传过程中断 → 重新上传浪费时间 * 网络波动 → 上传失败率高 因此,大文件分片上传 + 断点续传 + 秒传校验 是目前最通用、最稳定的解决方案。 本文将通过一段完整可运行的示例代码,详细讲解如何在前端实现分片上传、断点续传、服务端校验等关键功能。 ✨ 实现效果 * ✔ 自动切片(默认 5MB/片,可配置) * ✔ 查询已上传分片(断点续传) * ✔ 自动跳过已上传的片段 * ✔ 每片上传成功后重新校验 * ✔ 所有片段上传完成后自动触发合并 * ✔ 错误处理完善 📌 核心代码(uploadLargeFile) 以下代码就是本文的核心逻辑,也是你提供的代码版本,经过梳理解释后会更易理解: export async function uploadLargeFile({ file, fileId, id, chunkSize = 5 * 1024