“即使不是工程师，也想自己开发应用！”带着这样的想法，笔者尝试利用生成式AI进行自制应用开发（AI辅助编码），但很快遇到了“发布难题”，一时间陷入困境。
于是，笔者向日本GMO互联网集团的现役工程师石丸智辉请教，开始在Google AI Studio上进行应用开发。克服各种问题后，前端界面逐渐完善，手机端测试也顺利通过。应用名称定为“AiLA”，Google AI Studio上的开发工作顺利完成。
接下来，将Google AI Studio与GitHub连接，上传至今为止编写的源码。通过与导师的问答，细化前期设计，完成了应用基础设施“Firebase”的准备，以及开发工具“Visual Studio Code”的安装配置。虽然准备工作枯燥，但每一步都在稳步推进。
这是一段业余者与专业人士携手合作，真实而泥泞的开发纪实……
此前，笔者已完成了Visual Studio Code（VS Code）和Firebase的准备工作。这次，将在VS Code中安装AI编码助手“Claude Code”，并在本地电脑上启动应用，搭建重要的开发基础。
在VS Code中安装“Claude Code”并制作AI使用手册
首先，让VS Code支持Claude Code。按照Anthropic官方文档，通过VS Code扩展功能安装。VS Code属于“集成开发环境（IDE）”，简单来说就是功能强大的文本编辑器。
安装完成后，需登录Claude账户。可通过聊天框选择登录或输入“/login”命令执行。Claude Code支持多种斜杠命令，方便快捷地执行操作。（石丸智辉）
登录后，浏览器弹出认证页面。笔者订阅了付费版“Claude Pro”，选择后完成关联。VS Code右侧出现聊天界面，准备好与AI对话协作开发。
接着，创建名为“CLAUDE.md”的文件，作为Claude在项目中的行为指南。若无此文件，Claude每次都需重新解析代码，效率低下。输入“/init”命令，Claude会自动读取现有文件并生成该手册。（石丸智辉）
生成的文件为英文，包含“React”、“SPA”等专业词汇，笔者难以理解。请求Claude将其翻译成日语并用通俗语言表达，Claude回复指出该文件是给AI看的，非人类阅读。最终，Claude用带专业术语的日语版本重新编写。
API密钥不能直接粘贴聊天框！安全管理方法
完成基础设置后，开始尝试启动应用。
询问Claude启动步骤，首先提示需获取Gemini API密钥。此前在Google AI Studio的云端环境中，Google自动管理API密钥，但本地运行需自行申请。笔者在Google AI Studio界面生成新密钥，命名为“AiLA-dev”。
尝试将密钥直接粘贴到Claude聊天框时，石丸智辉立即制止。
“直接在AI工具聊天框输入API密钥是不可取的。不同服务有不同规定，聊天内容会被外部处理，存在泄露风险。非工程师容易犯此错误，API密钥必须严格管理。我们应询问Claude如何安全管理。”（石丸智辉）
按照建议，向Claude询问安全管理方法。
Claude建议将密钥存储在“.env.local”环境变量文件中，并通过“.gitignore”文件排除该文件，避免上传到GitHub。幸运的是，Google AI Studio已自动配置了“.gitignore”，省去手动设置。
还有一个复杂点，Claude Code会自动读取源码，默认会读取“.env.local”中的密钥。官方文档建议通过配置文件“.claude/settings.json”拒绝读取机密文件。石丸智辉指导创建该配置文件，限制Claude访问密钥。
笔者指示Claude创建配置文件，过程中出现格式错误，及时纠正后顺利完成。
完成安全设置后，将API密钥写入“.env.local”。Claude确认无法读取密钥。
石丸智辉提醒，这并非绝对安全。AI编码工具可能绕过此限制，工程师间对此持续讨论。最安全做法是不将密钥放置AI可读取位置。开发时应使用专用开发密钥，设置使用限制，避免泄露时影响扩大。
笔者惊讶于API密钥管理的复杂性，分开开发和生产密钥的做法也是首次听闻，深感非工程师与工程师之间的鸿沟。
另一鸿沟体现在“确认操作”上。
AI辅助编码在写文件或安装功能时会询问用户确认，必须回答“Yes”才能继续，虽烦但必要。
询问是否能自动全部“Yes”，得到肯定答复。但因曾发生删除本地文件等事故，建议执行命令时仍需确认内容，不懂时可询问AI。
笔者坦言之前为图方便曾自动“Yes”，今后将改正。
AI辅助编码的精髓！一键启动本地应用
接下来，启动应用。
专业工程师会在终端输入命令安装依赖包，但这次采用AI辅助编码，直接让Claude模糊指令：“准备好后，请安装依赖并启动应用。”
Claude自动检测环境，安装所需软件。屏幕上快速滚动陌生字符后，应用启动并显示URL。打开浏览器访问，初始显示黑屏。石丸智辉建议将情况反馈给Claude。
输入“打开后显示黑屏”，Claude自动调整，最终显示了Google AI Studio中开发的“AiLA”应用界面。上传威士忌图片后，AI成功返回解析结果。
“这意味着我们成功在本地复现了云端环境。环境搭建虽枯燥但极其重要。过去可能耗费整天，但AI编码工具大幅降低了门槛，助力快速启动开发。”（石丸智辉）
笔者按照指导顺利完成本地启动，但也感到不安。虽然操作简单，但“不能直接粘贴API密钥”“禁止AI读取密钥文件”等安全风险和对策，非工程师难以自行发现。
幸好有导师在旁指导，否则独自挑战AI辅助编码时，如何避免这些陷阱？对此，石丸智辉建议：
“非专业人士使用AI辅助编码时，应不断向AI询问不懂的词汇，且随时确认‘这样做安全吗？’。AI会忠实执行指令，但不会主动提醒安全隐患。AI编码工具的注意事项不断更新，不必全部深入理解，但保持关注能大幅提升风险意识。”
下一回，将利用本地环境，挑战Firebase登录功能和上传图片保存功能的实现。
（第6回待续）
作者简介：柳谷智宣
IT与商业领域资深撰稿人，拥有26年职业经验，涉猎数字设备、网络服务、消费品及企业产品。近年来专注于AI、SaaS和数字化转型领域。日常撰写大量稿件，已离不开生成式AI辅助工作。
- 作者网站：https://prof.yanagiya.biz/
