项目教程仓库https://github.com/ZIQI-a/AI_Agent_study 成品项目地址https://github.com/ZIQI-a/huamiao_Agent本章目标要做的事安装所有开发工具注册 AI 服务确保环境可用学到的知识包管理器是什么为什么用 pnpm 而不是 npm环境变量的作用和安全注意事项API Key 是什么如何安全使用1.1 安装 Node.jsNode.js 是 JavaScript 的运行环境让 JS 可以在浏览器之外运行。我们的 Next.js 项目依赖它。推荐用 nvm 安装版本管理器nvm 可以让你在同一台电脑上安装和切换多个 Node.js 版本就像 Python 的 pyenv。# macOS / Linux安装 nvmcurl-o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh|bash# 重新打开终端或执行source~/.zshrc# 如果你用 zshsource~/.bashrc# 如果你用 bash# 安装 Node.js 20 LTS推荐nvminstall20# 设置默认版本nvmaliasdefault20# 验证安装node-v# 应该显示 v20.x.xnpm-v# 应该显示 10.x.xWindows 用户直接从 nodejs.org 下载 LTS 版本安装即可。知识点LTS 是什么LTS Long Term Support长期支持版。Node.js 有两个发布线LTS稳定适合生产环境推荐使用Current最新特性可能有 bug1.2 安装 pnpmpnpm 是包管理器用来安装项目依赖的第三方库。为什么用 pnpm 而不是 npmnpm Node.js 自带最基础 yarnFacebook 出品曾经流行 pnpm更快、更省磁盘空间现在主流推荐 pnpm 的优势 ✅ 安装速度快比 npm 快 2-3 倍 ✅ 磁盘占用小全局存储项目间共享 ✅ 严格的依赖管理不会幽灵依赖 ✅ Monorepo 支持好# 安装 pnpmnpminstall-gpnpm# 验证pnpm-v# 应该显示 9.x.x 或更高知识点什么是包就像前端的 npm 包Python 的 pip 包。别人写好的代码你通过包管理器安装后直接使用。pnpm add react就是把 React 的代码下载到你项目的node_modules目录里。1.3 安装 GitGit 是版本控制工具管理代码的变更历史。部署到 Vercel 需要 Git 仓库。# macOS通常自带检查一下git--version# 如果没有通过 Xcode 命令行工具安装xcode-select--install# 配置用户信息替换为你自己的gitconfig--globaluser.name你的名字gitconfig--globaluser.email你的邮箱1.4 安装 VS Code从 code.visualstudio.com 下载安装。推荐插件安装后打开 VS Code按CmdShiftXMac或CtrlShiftXWindows打开插件市场搜索安装必装 - Chinese (Simplified) Language Pack → 中文界面 - Tailwind CSS IntelliSense → Tailwind 智能提示 - ES7 React/Redux/React-Native snippets → 代码片段 - Prettier - Code formatter → 代码格式化 - ESLint → 代码检查 推荐 - GitLens → Git 增强 - Error Lens → 错误高亮显示 - Auto Rename Tag → HTML 标签自动重命名1.5 注册 DeepSeek API KeyDeepSeek 是国产大模型中文能力强价格便宜是我们项目的主力 AI 引擎。注册步骤打开 platform.deepseek.com注册账号手机号即可进入控制台找到「API Keys」点击「创建 API Key」复制保存充值DeepSeek 的价格非常便宜输入1 元 / 百万 Token约 75 万汉字 输出2 元 / 百万 Token 对比 GPT-4o 输入约 18 元 / 百万 Token DeepSeek 便宜约 18 倍 学习阶段充 10 元够用很久验证 API Key创建一个临时测试文件# 创建测试目录mkdir-p~/ai-testcd~/ai-test# 初始化pnpminit# 安装 OpenAI SDKDeepSeek 兼容 OpenAI 格式pnpmaddopenai创建测试文件test.mjsimportOpenAIfromopenai;constclientnewOpenAI({apiKey:你的DeepSeek-API-Key,// 替换为你的 KeybaseURL:https://api.deepseek.com,});asyncfunctionmain(){constresponseawaitclient.chat.completions.create({model:deepseek-chat,messages:[{role:user,content:你好请用一句话介绍你自己}],});console.log(AI 回复,response.choices[0].message.content);}main().catch(console.error);运行测试nodetest.mjs如果看到 AI 的回复说明 API Key 配置成功。知识点API Key 安全API Key 就像密码泄露后别人可以用你的额度调用 AI。绝对不要把 API Key 写在代码里提交到 Git使用环境变量存储后面会教不要在前端代码中使用 API Key前端代码用户可以看到1.6 注册通义千问 API Key可选作为备选模型可以先注册好。打开 dashscope.console.aliyun.com用阿里云账号登录开通 DashScope 服务创建 API Key通义千问同样兼容 OpenAI SDKconstqwennewOpenAI({apiKey:你的通义千问API-Key,baseURL:https://dashscope.aliyuncs.com/compatible-mode/v1,});constresponseawaitqwen.chat.completions.create({model:qwen-turbo,messages:[{role:user,content:你好}],});1.7 环境变量配置环境变量是存储敏感信息如 API Key的标准方式。它们不会被提交到代码仓库。创建全局环境变量文件# 在用户目录创建 .env 文件全局使用cat~/.zshrc **知识点环境变量 vs 代码中的变量**代码中的变量写在代码里提交到 Git所有人可见环境变量 存在操作系统中不进 Git只有本机可见敏感信息密码、Key、密钥必须用环境变量## 1.8 清理测试文件bash# 删除测试目录rm-rf~/ai-test本章小结工具用途验证命令Node.js 20JS 运行环境node -vpnpm包管理器pnpm -vGit版本控制git --versionVS Code代码编辑器打开即可DeepSeek API KeyAI 模型服务测试脚本通过下一章预告我们将创建 Next.js 项目了解项目的目录结构学习 App Router 的路由系统。你将第一次运行起话喵的开发服务器看到一个空白的页面。如果这个教程对你有帮助欢迎 ⭐ Star 支持一下 教程仓库https://github.com/ZIQI-a/AI_Agent_study 成品项目https://github.com/ZIQI-a/huamiao_Agent
【零基础AI应用开发】第01章：环境搭建与工具安装（入门篇）
项目教程仓库https://github.com/ZIQI-a/AI_Agent_study 成品项目地址https://github.com/ZIQI-a/huamiao_Agent本章目标要做的事安装所有开发工具注册 AI 服务确保环境可用学到的知识包管理器是什么为什么用 pnpm 而不是 npm环境变量的作用和安全注意事项API Key 是什么如何安全使用1.1 安装 Node.jsNode.js 是 JavaScript 的运行环境让 JS 可以在浏览器之外运行。我们的 Next.js 项目依赖它。推荐用 nvm 安装版本管理器nvm 可以让你在同一台电脑上安装和切换多个 Node.js 版本就像 Python 的 pyenv。# macOS / Linux安装 nvmcurl-o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh|bash# 重新打开终端或执行source~/.zshrc# 如果你用 zshsource~/.bashrc# 如果你用 bash# 安装 Node.js 20 LTS推荐nvminstall20# 设置默认版本nvmaliasdefault20# 验证安装node-v# 应该显示 v20.x.xnpm-v# 应该显示 10.x.xWindows 用户直接从 nodejs.org 下载 LTS 版本安装即可。知识点LTS 是什么LTS Long Term Support长期支持版。Node.js 有两个发布线LTS稳定适合生产环境推荐使用Current最新特性可能有 bug1.2 安装 pnpmpnpm 是包管理器用来安装项目依赖的第三方库。为什么用 pnpm 而不是 npmnpm Node.js 自带最基础 yarnFacebook 出品曾经流行 pnpm更快、更省磁盘空间现在主流推荐 pnpm 的优势 ✅ 安装速度快比 npm 快 2-3 倍 ✅ 磁盘占用小全局存储项目间共享 ✅ 严格的依赖管理不会幽灵依赖 ✅ Monorepo 支持好# 安装 pnpmnpminstall-gpnpm# 验证pnpm-v# 应该显示 9.x.x 或更高知识点什么是包就像前端的 npm 包Python 的 pip 包。别人写好的代码你通过包管理器安装后直接使用。pnpm add react就是把 React 的代码下载到你项目的node_modules目录里。1.3 安装 GitGit 是版本控制工具管理代码的变更历史。部署到 Vercel 需要 Git 仓库。# macOS通常自带检查一下git--version# 如果没有通过 Xcode 命令行工具安装xcode-select--install# 配置用户信息替换为你自己的gitconfig--globaluser.name你的名字gitconfig--globaluser.email你的邮箱1.4 安装 VS Code从 code.visualstudio.com 下载安装。推荐插件安装后打开 VS Code按CmdShiftXMac或CtrlShiftXWindows打开插件市场搜索安装必装 - Chinese (Simplified) Language Pack → 中文界面 - Tailwind CSS IntelliSense → Tailwind 智能提示 - ES7 React/Redux/React-Native snippets → 代码片段 - Prettier - Code formatter → 代码格式化 - ESLint → 代码检查 推荐 - GitLens → Git 增强 - Error Lens → 错误高亮显示 - Auto Rename Tag → HTML 标签自动重命名1.5 注册 DeepSeek API KeyDeepSeek 是国产大模型中文能力强价格便宜是我们项目的主力 AI 引擎。注册步骤打开 platform.deepseek.com注册账号手机号即可进入控制台找到「API Keys」点击「创建 API Key」复制保存充值DeepSeek 的价格非常便宜输入1 元 / 百万 Token约 75 万汉字 输出2 元 / 百万 Token 对比 GPT-4o 输入约 18 元 / 百万 Token DeepSeek 便宜约 18 倍 学习阶段充 10 元够用很久验证 API Key创建一个临时测试文件# 创建测试目录mkdir-p~/ai-testcd~/ai-test# 初始化pnpminit# 安装 OpenAI SDKDeepSeek 兼容 OpenAI 格式pnpmaddopenai创建测试文件test.mjsimportOpenAIfromopenai;constclientnewOpenAI({apiKey:你的DeepSeek-API-Key,// 替换为你的 KeybaseURL:https://api.deepseek.com,});asyncfunctionmain(){constresponseawaitclient.chat.completions.create({model:deepseek-chat,messages:[{role:user,content:你好请用一句话介绍你自己}],});console.log(AI 回复,response.choices[0].message.content);}main().catch(console.error);运行测试nodetest.mjs如果看到 AI 的回复说明 API Key 配置成功。知识点API Key 安全API Key 就像密码泄露后别人可以用你的额度调用 AI。绝对不要把 API Key 写在代码里提交到 Git使用环境变量存储后面会教不要在前端代码中使用 API Key前端代码用户可以看到1.6 注册通义千问 API Key可选作为备选模型可以先注册好。打开 dashscope.console.aliyun.com用阿里云账号登录开通 DashScope 服务创建 API Key通义千问同样兼容 OpenAI SDKconstqwennewOpenAI({apiKey:你的通义千问API-Key,baseURL:https://dashscope.aliyuncs.com/compatible-mode/v1,});constresponseawaitqwen.chat.completions.create({model:qwen-turbo,messages:[{role:user,content:你好}],});1.7 环境变量配置环境变量是存储敏感信息如 API Key的标准方式。它们不会被提交到代码仓库。创建全局环境变量文件# 在用户目录创建 .env 文件全局使用cat~/.zshrc **知识点环境变量 vs 代码中的变量**代码中的变量写在代码里提交到 Git所有人可见环境变量 存在操作系统中不进 Git只有本机可见敏感信息密码、Key、密钥必须用环境变量## 1.8 清理测试文件bash# 删除测试目录rm-rf~/ai-test本章小结工具用途验证命令Node.js 20JS 运行环境node -vpnpm包管理器pnpm -vGit版本控制git --versionVS Code代码编辑器打开即可DeepSeek API KeyAI 模型服务测试脚本通过下一章预告我们将创建 Next.js 项目了解项目的目录结构学习 App Router 的路由系统。你将第一次运行起话喵的开发服务器看到一个空白的页面。如果这个教程对你有帮助欢迎 ⭐ Star 支持一下 教程仓库https://github.com/ZIQI-a/AI_Agent_study 成品项目https://github.com/ZIQI-a/huamiao_Agent
