༺https://aistudio.google.com/prompts/111ysUKgf9_PR3y4WpkPTJiuEsCHn5DcG ༻

part1: 独立开发者穷鬼套餐介绍

(0:00-0:06) 1.1: 论坛热门话题：独立开发者穷鬼套餐 视频开头提到，在技术论坛中经常看到一个有趣的话题，即**“独立开发者省钱之穷鬼套餐”**。

(0:06-0:13) 1.2: 穷鬼套餐覆盖范围 这些免费工具涵盖了开发、代码托管、前后端部署、数据库以及用户行为分析等一系列功能。

(0:13-0:17) 1.3: 适用人群 这种套餐尤其适合学生党、独立开发者以及初创公司。

(0:17-0:24) 1.4: 零成本启动与迭代 开发者可以利用这些免费工具，零成本做出产品并发布上线，等到开始盈利以后再慢慢迭代扩容。

(0:24-0:34) 1.5: 本期视频目标 本期视频准备用一个小项目（贪吃蛇游戏）把这些免费的工具全部串联起来，展示如何不花一分钱就能上线一个可以赚钱的业务应用。

part2: 技术选型

(0:34-0:40) 2.1: 后端部署成本最低方案：Node.js 作者认为，对于后端，部署成本最低的方案是 Node.js。

(0:40-0:51) 2.2: Node.js 优势：Serverless Function 原因是 ♋Node.js 可以很轻松地改造成 Serverless Function（无服务器函数）。现在很多平台提供免费的云函数部署服务，♐例如 Cloudflare Worker、Vercel 和 Netlify 等。

(0:51-0:56) 2.3: 前端选型：影响不大 对于前端选型，作者认为其对于部署成本几乎没有影响，选择自己喜欢的就好。

(0:56-1:04) 2.4: 前端推荐：React 与 React Native 推荐使用 React，因为后续还可以使用 React Native 改造成跨端的手机应用。

(1:04-1:10) 2.5: ♈框架选择：Next.js ♋结合后端 Node.js 和前端 React，很自然会想到 Next.js，这是一个在海外十分流行的开发框架。

(1:10-1:18) 2.6: Next.js 优势：SEO 友好 Next.js 具有 SEO 友好的特点，使得网站更容易被搜索引擎收录。它结合了客户端（Client）渲染和服务器端（Server）渲染（SSR/Static HTML）的能力。

(1:18-1:24) 2.7: 本期项目选择与 AI 辅助 本期视频决定使用 Next.js 来搭建工程。由于作者对 Next.js 不太熟悉，计划将主要的开发任务交给 AI 来完成。

part3: AI开发工具与项目初始化

(1:24-1:35) 3.1: 推荐免费AI编程方案 (VSCode + Cline + OpenRouter) 推荐一个完全免费的 AI 编程方案：在 VS Code 上使用 Cline 插件，并接入 OpenRouter 的免费 API，以达到非常好的 AI 编程效果。

(1:35-1:44) 3.2: 安装VSCode 首先访问 code.visualstudio.com，下载并安装 VS Code。安装过程十分简单，一路点击下一步即可。

(1:44-1:47) 3.3: VSCode 基础使用参考 作者提到之前有一个完整视频介绍 VS Code 的使用。

(1:47-1:56) 3.4: 安装与配置Cline插件 进入 VS Code 后，在扩展市场搜索 Cline 插件，点击 Install 进行安装。

(1:56-2:05) 3.5: 获取 OpenRouter API Key 打开 Cline 插件界面，选择 “Use your own API key”，API Provider 选择 OpenRouter，然后点击 “Get OpenRouter API Key” 按钮。

(2:05-2:10) 3.6: OpenRouter授权 跳转到 OpenRouter 网站进行授权（该网站在国内可以直连），如果没有账号需要先注册。点击 Authorize。

(2:10-2:23) 3.7: 完成Cline模型选择 (DeepSeek) 回到 VS Code，点击 Open 允许插件打开 URI。这样 OpenRouter API key 就配置好了。在 Model 选择处，搜索并选择免费的 DeepSeek free 模型（deepseek/deepseek-chat-v3-0324-free）。AI 编程软件配置完成。

(2:23-2:30) 3.8: 安装Node.js ♈访问 Node.js 官网 (nodejs.org)，下载并安装 Node.js（LTS 版本）。安装过程同样是一路点击下一步。

(2:30-2:54) 3.9: ♈ 创建Next.js项目 (Snake) ♓安装完 Node.js 后，♓重启 VS Code。打开一个新的终端（Terminal），切换到目标项目文件夹（例如 D:\Project2025）。♋输入命令 npx create-next-app 并按回车。

• 项目命名： 输入 snake（贪吃蛇）。
• 配置选项： 对于 TypeScript, ESLint, Tailwind CSS, src/ directory, App Router, import alias 等选项，♋全部一路回车使用默认配置。

(2:54-3:06) 3.10: 启动初始Next.js项目 项目创建成功后，使用 VS Code 打开新创建的 snake 目录，点击信任。♋在终端中输入 npm run dev 启动项目。♋浏览器访问 http://localhost:3000，可以看到一个空白的 Next.js 工程已成功运行。

(3:07-3:18) 3.11: 使用Cline生成贪吃蛇游戏页面 接下来，准备使用AI工具（Cline）将Next.js的初始页面改造。

• 目标： 将页面改造成一个贪吃蛇的网页小游戏。
• 操作： 在Cline中输入改造需求的prompt。（♋⌊把这个项目⌋改造成一个含吃蛇的网页版小游戏。）
• 结果： AI（Cline）成功生成了贪吃蛇游戏的代码，并在浏览器中演示了基本的游戏界面。

part4: 代码管理

(3:18-3:24) 4.1: 个人开发者代码管理最佳选择：GitHub 对于个人开发者来说，代码管理的最佳选择是 GitHub。

(3:24-3:38) 4.2: GitHub 功能与优势 GitHub 是全球最大的代码仓库托管与协作平台，可以在其中存储、分享并与他人一起编写代码。它支持创建私有（private）仓库，只有自己和被授权的协作者可以访问，不用担心源代码泄露。

(3:38-3:50) 4.3: 解决GitHub访问慢的问题 如果访问 GitHub 速度很慢，可以在搜索栏搜索"商店"，来到微软的应用商店（Microsoft Store），下载 Watt Toolkit 这个工具。

(3:50-3:53) 4.4: GitHub 账号注册 如果没有 GitHub 账号，需要先注册一个。

(3:53-4:07) 4.5: 安装 Git 为了将 Next.js 工程上传到 GitHub，需要先安装 Git。在 VS Code 的源代码管理（Source Control）面板，点击 “Download Git for Windows” 按钮，跳转到下载页面。下载 64 位的安装包并安装，安装过程同样是一路点击下一步。

(4:07-4:18) 4.6: 配置 Git 并发布到 GitHub 安装完 Git 后，在 VS Code 终端中配置 Git 用户名和邮箱： git config --global user.name "your_username" git config --global user.email "[email protected]" 然后，在 VS Code 的源代码管理面板♋点击 “Publish Branch” 按钮。选择 “Publish to GitHub private repository”♋⌊将代码发⌋ 布为私有仓库。

(4:18-4:23) 4.7: 确认代码备份 现在，项目代码已经提交备份到 GitHub 上面了，拥有了一个远程的 Git 仓库。

part5: 数据库

(4:23-4:33) 5.1: 免费数据库服务推荐：Neon 与 Supabase 对于免费的数据库服务，这里推荐两个：Neon 和 Supabase。它们都提供 500 MB 的免费存储空间。本视频选择使用 Neon。

(4:33-4:46) 5.2: 创建 Neon 数据库 来到 Neon 的官网 (neon.tech)，♋点击 “Start for free”。选择使用 GitHub 登录。

• 数据库配置： Neon 是基于 PostgreSQL 的免费数据库。进入后，选择 PostgreSQL 版本（如 17），给 Project name 起个名字（如 tech-shrimp-db）。
• 结果： 瞬间就拥有了自己的免费数据库。

(4:46-4:50) 5.3: 查看数据库连接信息 在 Neon 的 ♈Project Dashboard，♋点击右上角的 Connect 按钮，可以查看数据库连接的相关信息（如连接字符串、用户名、密码、主机地址、数据库名）。

part6: 数据库工具与集成

(4:50-4:57) 6.1: 数据库管理工具推荐：DBeaver 推荐使用开源免费的数据库管理工具 DBeaver。先来到其官网 (dbeaver.io)，下载 DBeaver Community 版本。

(4:57-5:20) 6.2: ♈连接 DBeaver 到 Neon 数据库 打开 DBeaver 软件，新建数据库连接。

• 选择数据库类型： 选择 PostgreSQL。
• 填写连接信息： 回到 Neon 的♎connect连接信息界面，将对应的主机（Host）地址、数据库（Database）名、用户（User）名、密码（Password） 复制并粘贴到 DBeaver 的相应字段中。
• 测试连接： 点击 “测试连接”。DBeaver 会自动下载 PostgreSQL 驱动。
• 结果： 连接成功。点击完成。

(5:20-5:35) 6.3: 在 DBeaver 中创建数据表 在 DBeaver 左侧导航栏可以打开数据库。♋接下来准备创建一个表，用来保存玩家分数，做一个分数排行榜。

• 操作： 在 public 模式下的**表（Tables）**上右键，选择 “新建 表”。
• 表结构：
  • 表名： player_score
  • 列： 添加两列：player_name (类型 varchar) 和 score (类型 int)。
• 保存： 按 Ctrl+S 保存，点击执行（Persist）。

(5:35-5:58) 6.4: ♎使用 AI (Cline) 生成数据库操作代码 在 DBeaver 中右键点击刚创建的♈ player_score 表，选择 “生成 SQL” -> DDL，♐复制 CREATE TABLE 语句。

• Prompt 构建： ♐回到 VS Code 的 Cline，粘贴 CREATE TABLE 语句，并提出需求：
  1. ♐请把玩家的数据保存到 PostgreSQL 数据库里面，以下是建表语句。
  2. ♋游戏开始前弄一个输入框，让玩家自己填名字。

(5:58-6:10) 6.5: 向 AI 提供数据库连接信息 ♈⌊AI（Cline） 询问 ⌋PostgreSQL 数据库的连接信息。回到 Neon 复制完整的连接字符串（Connection string）。 ♈它的主要目的是获取这些信息，以便生成正确配置的、能够连接数据库的应用程序代码 ♋因为它需要这些信息来生成正确的应用程序代码 (6:10-6:16) 6.6: AI 生成代码并测试 将连接字符串粘贴给 AI（Cline）。AI 修改了代码。点击 Save 保存更改。在终端运行 npm run dev 启动项目进行测试。

(6:16-6:41) 6.7: 发现并分析错误 启动时出现构建错误：Module not found: Can't resolve 'dns'。

• 定位原因： 查看 AI 写的代码，发现 page.tsx（前端页面）直接 import 并调用了 lib/db.ts 中的 saveScore 方法。而 saveScore 方法内部使用了 pg 包进行数据库连接和操作 (await pool.connect(), client.query())，并读取了环境变量 process.env.DATABASE_URL。
• 问题分析： Next.js 默认会将 page.tsx 作为前端组件处理。在前端（浏览器）环境中直接调用包含后端数据库操作（需要 pg 包）和敏感信息（数据库连接字符串）的代码是错误的，并且存在严重的安全隐患，会导致敏感信息暴露。

(6:41-6:56) 6.8: 向 AI 反馈错误并寻求解决方案 与 AI（Cline） 交流，指出保存数据库的逻辑似乎不正常，询问♒⌊保存数据库这块的逻辑正常么？这是后台操作还是前端操作？⌋，♒AI肯定没有意识到自己的错误，让 AI 检查其生成的代码，特别是 db.ts 和 page.tsx。

(6:56-7:04) 6.9: AI 提出正确解决方案 (API Route) AI（Cline） 识别到错误，并提出了正确的解决方案：

• 创建 API 路由： 新建一个 API 端点（例如 /api/saveScore）。
• 前后端分离： 前端页面通过发送 POST 请求到这个 API 端点来触发后端的数据库保存操作。

(7:04-7:19) 7.1: 更简洁的 Next.js 解决方案 (use server) 作者指出，其实还有一种更简单的 Next.js 改法：

• 在 lib/db.ts 文件的顶部加上一行 'use server'; 指令。
• 作用： 这会告诉 Next.js，这个文件里的函数是服务器端的 Action。♋Next.js 会自动处理，♐生成相应的 API 端点，♋将前后端的逻辑分割开，无需手动创建 API 路由。

(7:19-7:51) 7.2: 对 AI 编程能力的思考 这个例子体现了作者对 AI 编程的看法：

• AI 的角色： 现阶段的 AI 水平相当于一个知识面广的初级程序员。
• 人类的角色： 人类依旧是高级程序员、项目架构师，需要负责系统架构设计、理解编程原理（如♈前后端交互、保护安全信息等系统架构的知识）。
• 协作方式： 不能完全依赖 AI，人类需要审查和指导 AI 的工作，将更多精力投入到架构设计和业务需求理解上。作为人类，掌握系统架构、编程原理等知识仍然是必学必会的。

part7: 部署

(7:51-8:00) 8.1: Next.js 项目最佳部署平台：Vercel 作为一个 Next.js 项目，最方便的部署方式就是部署到 Vercel 里面，♋因为 Vercel 目前是 Next.js 的母公司。

(8:00-8:08) 8.2: 开始 Vercel 部署流程 来到 Vercel 官网 (vercel.com)，♋点击 “Start Deploying”。选择 Continue with GitHub 登录。♈选择之前创建的 snake GitHub 仓库，点击 Import。

(8:08-8:18) 8.3: 配置环境变量并部署 项目设置基本保持默认。♐唯一需要修改的是在 Environment Variables（环境变量） 中添加数据库连接信息。

• Key: DATABASE_URL
• Value: 粘贴从 Neon 获取的连接字符串。 点击 Deploy 开始部署。

(8:18-8:32) 8.4: 部署完成与访问 等待大约 1 分钟左右，项目就部署完成了。点击 “Continue to Dashboard”。Vercel 会分配一个默认域名（例如 snake-bice-three.vercel.app）。

• 测试： 访问该域名，功能与本地一致，可以正常游戏并保存分数到 Neon 数据库。
• ♋注意： Vercel 的默认域名♋只能在国外的上网环境访问到。

(8:32-8:45) 8.5: Vercel 免费额度限制 在♋ Vercel 的 Dashboard -> Usage 页面，♈可以看到免费用户的用量限制。作者认为 Edge Requests（每月 100 万次）可能比较瓶颈。如果升级到 Pro 模式，这些用量限制可以提高 10 倍。

part8: 域名

(8:45-8:55) 9.1: 域名的重要性与选择 域名作为一个产品的排面，不建议用免费的，因为不稳定且非常折腾。

(8:55-9:05) 9.2: 推荐廉价域名注册商：NameSilo 可以来到 NameSilo (namesilo.com) 这个地址，以最低成本获得一个域名。

• 示例： 搜索一个6 位数字，发现 6位数字.xyz 的域名只需要 0.99 美元一年。

(9:05-9:18) 9.3: 使用 Cloudflare 托管域名 有了域名以后，可以把它♐托管到 Cloudflare 上面。作者提到，关于如何把域名托管到 Cloudflare，在之前的视频里有过详细介绍，这里不再赘述。

(9:18-9:34) 9.4: Vercel 绑定自定义域名 回到 Vercel 的项目♋设置（Settings） -> Domains 页面，点击 Add。

• 输入域名： 输入自己购买并托管到 Cloudflare 的域名（或子域名），♋例如 snake.tech-shrimp.com。
• 自动配置： 点击 Add 后，♋选择 Configure Automatically。Vercel 会自动通过 Cloudflare API 配置 DNS 记录。

(9:34-9:40) 9.5: 测试自定义域名 配置完成后，页面上会显示两个蓝色的对勾，表示配置完成。使用这个自定义域名（snake.tech-shrimp.com）同样可以访问到刚才部署的网站，并且♉这个域名在国内是可以直连的。

part9: 用户行为分析

(9:40-9:51) 10.1: 免费用户行为监控工具：Microsoft Clarity 推荐使用 Microsoft Clarity (clarity.microsoft.com)，这是微软推出的免费用户行为监控工具。它提供了热点地图（Heatmaps）、♈用户行为录像（Session Recordings）、**报表（Dashboard）**等一系列功能。

(9:51-10:02) 10.2: 集成 Clarity 到 Next.js 项目 登录 Clarity（可以使用 Google 账号）。♋在 Clarity 项目设置中，♉选择手动安装（Manual install），♈获取跟踪代码（Tracking Code）。

• 操作： 回到 VS Code，打开 ♋⌊app/layout.tsx 文件⌋。在 <body> 标签内，定义一个 <Script> 组件（从 next/script 导入），。将 Clarity 的跟踪代码粘贴到 <Script> 组件内部。

(10:02-10:10) 10.3: 验证 Clarity 集成 保存 layout.tsx 文件。在本地重新启动项目 (npm run dev) 并进行一些操作。♈回到 Clarity 网站，在录制（Recordings）页面，♐可以看到作为用户的操作已经被录制下来了。

(10:10-10:17) 10.4: Clarity 其他功能说明 Clarity 的仪表板（Dashboard）和热点地图（Heatmaps）需要过 24 小时才能呈现数据。至此，♉已将网站轻松接入了 Clarity。

part10: 邮件

(10:17-10:39) 11.1: 免费邮件收发方案 作者之前有一期视频介绍如何使用 Cloudflare 获取无限多个免费邮箱。

• 收邮件： 主要使用 **Cloudflare 的电子邮箱路由（Email Routing）**功能。
• ♉发邮件「白Cloudflare无限多企业邮箱，可收发邮件」： 借助 Resend (resend.com) 的免费 API。Resend 的免费套餐每天可以发送 100 封邮件，每个月最多 3000 封。
• 说明： 详细用法在之前的视频里，本期不再赘述。

part11: DDoS 防御

(10:39-10:55) 12.1: 免费 DDoS 防御方案 之前也有一期完整视频介绍使用 Cloudflare 防御 DDoS 攻击。

• 主要方法：
  1. 配置 CDN。
  2. 配置 IP 白名单。
  3. 使用 Cloudflare 防火墙（Firewall）。
• 说明： 这三种方法可以有效防御 DDoS 攻击，详细内容在那期视频里，这里不再赘述。

part12: 其他免费工具与总结

(10:55-1:01) 13.1: 其他推荐的免费工具

• ♎UI 设计： 可以选择 Figma (figma.com)。
• 文档工具： 可以选择 Notion (notion.so)。

(11:01-1:04) 13.2: 工单管理工具 ♎工单管理可以使用 GitHub 的 Project 功能。

(11:04-11:13) 13.3: 作者开发习惯与视频总结 作者自嘲写代码风格是**“一把梭”，通常不做设计**、不写文档、也不创建 ticket。视频到此结束。