独立开发穷鬼套餐

独立开发者穷鬼套餐 👻💰

1. 技术选型 (Tech Stack Selection) 💻🧠💡

• 后端成本最低方案： Node.js
• 原因：可轻松改造成 Serverless Function (无服务器函数)。
• 免费部署平台：Cloudflare Worker, Vercel, Netlify。

• 前端选型： 对部署成本影响小，选择喜欢的即可。
• 推荐：React (后续可扩展到 React Native，实现跨端手机应用)。
• 组合方案： Node.js + React (很自然地会想到 Next.js)。

• Next.js：
• 在海外十分流行的开发框架。
• 具备 SEO 友好的特点，易被搜索引擎收录。
• 结合了 Client (客户端) 和 Server (服务器) 端渲染。
• 本次项目： 爬爬虾对 Next.js 不太熟悉，主要交由 AI 完成开发任务。

2. AI 开发工具 (AI Development Tools) 🤖🛠️

• 推荐方案： VS Code 插件 "Cline" + OpenRouter 的免费 API。
• 安装 VS Code： 从 code.visualstudio.com 下载安装，过程简单（视频中曾有完整教程）。
• 配置 Cline 插件：
1. 在 VS Code 插件市场搜索并安装 "Cline"。
2. 打开 Cline，选择 "Use your own API key"。
3. 点击 "Get OpenRouter API Key" 获取 API 凭证（国内可直连，需注册 OpenRouter 账号）。
4. 回到 VS Code，点击 "Open" 授权。
5. 在 Cline 设置中，Model (模型) 搜索并选择 deepseek free (免费模型)。
• 创建 Next.js 项目：
1. 下载并安装 Node.js。
2. 在 VS Code 终端，切换到项目目录。
3. 运行 npx create-next-app。
4. 项目名称输入 snake (贪吃蛇)。
5. 后续配置一路回车，使用默认设置（包括 TypeScript, Tailwind CSS）。
6. npm run dev 启动项目，验证空白页面。
• AI 编码实践：
• 向 Cline 提需求："把这个项目改造成一个贪吃蛇的网页版小游戏。" 🐍
• AI 生成代码并预览效果，一个网页版的贪吃蛇游戏生成成功。

3. 代码管理 (Code Management) 🐙🔐⚡

• 最佳选择： GitHub。
• 全球最大的代码仓库托管与协作平台。
• 可创建私有仓库（只有自己和授权协作者可访问），不用担心源码泄露。

• GitHub 访问加速（如果慢）：
• 在微软应用商店下载 "Watt Toolkit"。
• 打开工具，选择 "网络加速" -> "Github" -> "一键加速"。

• 上传项目到 GitHub：
• 安装 Git for Windows（从 git-scm.com/downloads/win 下载）。
• 在 VS Code 终端配置 Git 用户名和邮箱：
• git config --global user.name "your-name"
• git config --global user.email "your-email"
• 在 VS Code 的 "Source Control" (源代码管理) 中，点击 "Publish Branch" (发布分支)，选择 "Publish to Github private repository" (发布到 Github 私有仓库)。
• 项目成功备份到 GitHub 私有仓库。💾

4. 数据库 (Database) 🗄️🆓🐘

• 免费数据库服务：
• Neon： 提供 500MB 免费存储空间。
• Supabase： 提供 500MB 免费存储空间。

• 以 Neon 为例：
• 访问 neon.tech，点击 "Start for Free"。
• 选择 GitHub 登录。
• 选择一个 PostgreSQL 版本（如 17），给项目起名（如 tech-shrimp-db）。
• 点击 "Connect" 获取数据库连接信息（包括用户名、密码、地址、数据库名）。

• 数据库管理工具： DBeaver (开源免费)。
• 下载并安装 DBeaver (dbeaver.io/download/)。
• 打开 DBeaver，新建数据库连接，选择 "PostgreSQL"。
• 填入从 Neon 获取的连接信息（主机、端口、数据库、用户名、密码）。
• 点击 "测试连接"，DBeaver 会自动下载驱动。
• 连接成功后，在 public 模式下，右键 "表" -> "新建表"。
• 创建 player_score 表，包含 player_name (varchar) 和 score (int) 两个列。保存并执行建表语句。

5. AI 数据库集成与纠错 🧠🐛🛡️🧑‍💻

• AI 初次集成：
• 向 Cline 提需求：将玩家数据保存到 PostgreSQL 数据库，游戏开始前输入玩家姓名。
• AI 生成的代码（在 db.ts 中实现数据库操作）在前端 page.tsx 中直接调用了 saveScore 方法。
• 问题出现： 运行 npm run dev 报错 Module not found: Can't resolve 'dns'，并提示 "Cross origin request"（跨域请求）。
• 问题分析：
• 前端（浏览器环境）无法直接操作数据库相关的包。
• 更重要的是，将数据库连接信息暴露在前端代码中会导致严重的安全隐患。
• 与 AI 交流：
1. 爬爬虾先问 AI ：“保存数据库这块逻辑正常吗？这是后台操作还是浏览器操作？”
2. AI 没有意识到问题，仍认为是后台操作。
3. 爬爬虾将报错信息贴给 AI。
4. AI 修正： 认识到错误，在 page.tsx 中将数据库操作封装成一个 API 端点 (/api/saveScore)，前端通过 POST 方法调用该 API。
• 更简单的修正（爬爬虾的建议）： 在 db.ts 文件顶部添加 "use server"。这样 Next.js 会自动将其识别为后端方法，并生成对应的 API 端点，从而分离前后端逻辑。

• 心得体会：
• 现阶段的 AI 水平就像一个知识面广的“初级程序员”。
• 人类（高级程序员、项目架构师）仍然至关重要。
• 人类需要掌握系统架构、安全保护、业务需求理解等核心知识。
• AI 辅助开发，能将开发者从基础的编程语言和技术细节中解放出来，专注于更高级的架构设计和业务理解。

6. 部署 (Deployment) 🚀☁️📈

• 部署平台： Vercel (Next.js 的母公司，部署 Next.js 项目最方便)。

• 部署流程：
1. 访问 vercel.com，点击 "Start Deploying"。
2. 选择 "Continue with GitHub" 登录。
3. 导入 GitHub 上的 snake 项目。
4. 在 "Environment Variables" (环境变量) 中添加 DATABASE_URL，并将 Neon 的连接字符串作为值粘贴进去。
5. 点击 "Deploy"。
6. 等待约 1 分钟即可完成部署。

• 免费额度：
• Edge Requests (请求次数)：每月 100 万次。
• Fast Data Transfer (数据传输)：每月 100 GB。
• （Pro 模式可提升 10 倍额度）

7. 域名 (Domain Name) 🌐💸🔗🇨🇳

• 建议： 不使用免费域名（不稳定，折腾），购买便宜域名。

• 推荐购买平台： NameSilo (www.namesilo.com)。
• 例如，.xyz 后缀的域名可能只需 $0.99/年。

• 域名托管： 托管到 Cloudflare (免费 DNS、CDN)。
• （详细操作可参考爬爬虾之前的视频：“如何低成本获得一个域名，托管Cloudflare免费DNS”）

• Vercel 绑定域名：
1. 在 Vercel 项目页面，点击 "Settings" (设置) -> "Domains" (域名)。
2. 点击 "Add" (添加)。
3. 输入你的域名（如 snake.tech-shrimp.com），点击 "Add"。
4. 选择 "Configure Automatically" (自动配置)。
5. Vercel 会自动检测并配置 DNS 记录。

• 结果： 网站可通过自定义域名访问，且在国内可直连。

8. 邮箱服务 (Email Service) 📧✅📤

• 收邮件： Cloudflare 的电子邮件路由 (免费，可获取无限多个邮箱别名)。
• 在 Cloudflare DNS 页面，开启电子邮件路由，添加 MX 和 TXT 记录。

• 发邮件： Resend (提供免费 API)。
• 免费套餐：每天可发送 100 封邮件，每月最多 3000 封。
• （详细用法可参考爬爬虾之前的视频：“白嫖Cloudflare无限多企业邮箱，可收发邮件”）

9. DDoS 防御 (DDoS Protection) 🛡️🚧

• 工具： Cloudflare (免费套餐)。

• 防御方法：
• 配置 CDN (内容分发网络)。
• 配置 IP 白名单。
• 使用 Cloudflare 防火墙。
• （详细内容可参考爬爬虾之前的视频：“两种免费防御DDoS攻击的实战攻略”）

10. 其他工具 (Other Tools) 🎨📝📋👴💪

• UI 设计： Figma (免费)。

• 文档管理： Notion (免费)。

• 工单管理： GitHub Projects (免费)。

• 爬爬虾的开发理念： "老夫写代码就是一把梭!" (不做设计、不写文档、不创建 ticket)。

• 总结： AI 辅助编程，能大幅提高效率，但人类开发者依然需要深入理解系统架构、业务需求和安全，扮演好“高级程序员”和“项目架构师”的角色。