嗨，大家好
你是不是曾遇过一种情况
就是很喜欢某个 App
却觉得它偏偏少了一个自己最需要的功能？
过去遇到这些问题
通常我们只能默默接受
但现在有了像 ChatGPT 或 Claude 这样的 AI 助理
即使我们没有任何程式的背景
也能轻松打造出专属于自己的 App
好，那假设今天我们在网路上看到一则新闻
是 Google 新推出了一个可以边思考和边说话的 AI 模型
于是你突发奇想
想要打造一个 AI 语音助理
让我们能透过口说的方式来设定提醒事项
等到时间一到
AI 就会自动透过 LINE 发送提醒讯息给自己
甚至还能传给家人或朋友
好，那这边我以 Claude 来作示范
一步一步带着大家打造出这个 App
如果你平常习惯使用 ChatGPT 也完全没有问题
因为两边在开发时思路是相通的
如果你未曾使用过 Claude
你可以先用自己的 Google 信箱注册一个私人帐号
而要用 Claude 协助开发电脑或手机的 App
我们至少需要订阅 Pro 以上的方案
计费方式可以采用月缴或着是年缴
完成订阅之后
如果你希望能有一个简单且友善的开发环境
你可以下载 Claude 官方的桌面版软体
下载完成后
对着它双击滑鼠左键就可以完成安装
好，那第一步我们要先在电脑中
建立一个空白资料夹
这个资料夹会用来存放所有跟这个 App 相关的档案
建立完成后
我们回到 Claude 点击下面的按钮
来将刚建立的资料夹指定为目前的专案路径
点击「打开」
再按下「信任此工作区」
而在右下角我们可以指定想要使用的 AI 模型
其中 Fable 5.1 需要另外购买点数才能够使用
因此这边我们就选择预设的 Opus 就好了
那底下我们还可以选择 AI 模型的思考强度
强度愈高 Claude 会花更多的时间
来分析复杂的问题
但相对地也会消耗更多的额度
而这边我们先维持预设的 Medium (中等) 就足够了
而如果想要查看目前用量的状态
你可以点击最右边的小按钮
它会列出你最近 5 个小时
以及整周的额度使用状况
如果其中一项额度用完的话
就必须等待下一次的重置才能够继续使用
好，那在请 Claude 正式开始实作之前
我们可以先做几个简单的准备工作
首先一个 App 理所当然要有一个具有辨识度的图示
只是 Claude 本身并没有生成图片的能力
因此我们可以改前往 ChatGPT 的网站
从 + 号选单中启用「制作影像」的功能
接着再写一段提示词
譬如请 ChatGPT 帮我们生成一个向量插画风格的图示
按下 Enter 键送出指令
图片生成好后
我们就对着它执行「另存图片」
把它储存到自己的电脑
并且把图档存放到我们的专案资料夹内
此外由于开发 App 的过程中
最重要的就是 App 的安全性
因此我们可以考虑替 Claude 安装所谓的「外挂」(Plugins)
来增强它的防护功能
例如这边有个官方的外挂
叫做 Security Guidance (安全性指引)
安装之后 Claude 就会自动检查
开发 App 时常见的安全问题
好，准备工作完成之后
接着我们就可以正式向 Claude 提出开发的需求
那许多初学者在提需求时
最常犯的错误就是描述得太简略
导致 AI 只能凭空摸索
做出来的成品往往不符合预期
而比较适合的作法
是在提需求时
我们要先厘清几个核心的问题
譬如这个 App 是要解决什么问题？
它的目标使用者是谁？
是要在电脑还是手机上使用？
App 的介面大概长什么样子？
以及实际的操作流程要如何进行？
以我们这次的案例来说
我主要是希望透过口说的方式请 AI 建立提醒
并在指定时间透过 LINE
自动发送讯息给自己或亲朋好友
那这个 App 目前我只想要个人自用
并没有上架和贩售的打算
而在执行环境方面
我希望电脑和手机都能支援
但要做成 App 还是网页版
则要请 Claude 评估之后给我们合适的建议
那这个 App 我希望采用现代极简的风格
画面中要包含一个圆形的麦克风按钮
同时我们要提醒 Claude
App 的图示已存放在专案资料夹之中
至于 App 的操作流程
刚开启时我希望要先输入密码才能登入
接着点击麦克风之后 AI 会先主动跟我们打招呼
然后我们可以说出想要提醒的内容与时间
AI 在口头跟我们确认之后
就会建立提醒事项的排程
等到时间一到就会准时送出通知
最后你也可以把一些特别要注意的事项一并写给 Claude
譬如我想要采用 Google 的 Gemini 3.8 Live 模型
并且要求 Claude 在实作前
必须先跟我们进行讨论
过程中如果需要 AI 解释的地方
也必须用浅显的语言来向我们说明
好，那我把整段的提示词贴到输入框内
按下 Enter 键送出
Claude 在看完我们的需求之后
它会提出一些问题来确认实作的方向
你可以依照自己的想法逐一作答
而如果你没有特别的主意和偏好
也可以直接采纳 Claude 提供的建议选项
全部作答完毕后
Claude 就会照着我们的指示
开始写 App 的开发计划书
大约需要花上几分钟的时间
等计划书写好后
你就可以打开这份文件
里面详细说明了 Claude
会如何设计这个 App 的功能架构
同时后面也提到了有些地方 Claude 并无法代劳
而必须由我们亲自操作
不过 Claude 也很贴心地说明
它会「一步一步」带着我们完成这些设定
计划书看过觉得没有问题之后
接着我们要做一个非常重要的步骤
就是要把这个专案加入 Git 的版本管理
它有点像平常我们在玩电玩游戏时
打魔王之前必须先做个「存档」
万一打输了还能随时读取记录重来一次
而要将专案进行存档并备份到云端
我们可以先到一个叫做 GitHub 的网站
注册一个免费的帐号
同样使用自己的 Gmail 信箱就 OK 了
除此之外
如果你希望 Claude 能直接帮我们处理存档和上传的任务
你可以安装一个小工具叫做 GitHub CLI
你只要把它的网址拷贝下来
回到 Claude 请它帮我们安装
再按下 Enter 键送出指令
安装完成后
Claude 会请我们先进行帐号的授权
于是你可以到右上角打开终端机的视窗
点击「播放」来执行 Claude 提供的指令
接着再按下 Y 代表同意
如此画面就会显示一组 8 码的验证码
你可以把它拷贝下来
按下 Enter
系统就会自动开启浏览器
如此我们就可以把刚复制的验证码执行贴上
按下「继续」
这样我们就顺利完成了 GitHub 的授权啰
好，那我们就来写一段提示词
请 Claude 做第一次的存档
并且在 GitHub 建立一个私人的空间
来把目前的进度完整备份上去
备份完成后
我们就可以放心地请 Claude
开始进行 App 的开发实作啰
好，大约过了数分钟之后
Claude 已经完成了第一阶段的进度
同时它也列出了几个
必须由我们亲自操作的步骤
首先是要注册一个免费的云端主机
叫做 Cloudflare
因此你可以直接打开页面上的连结来到它们的官网
接着再使用自己的 Gmail 信箱
注册一个免费的帐号
注册完成后
我们就回到原来的页面
跟 Claude 说「已经注册好了」
如此 Claude 就会开始处理授权的程序
而我们只要在弹出来的视窗内
点击蓝色的「授权」按钮
Claude 就能顺利登入到这个网站
帮我们建立好云端资料库和相关的设定
好，第二个步骤是要替这个 App 设定一组登入密码
以防止别人进入到这个 App 的管理介面
于是我们同样去执行 Claude 提供的程式码
然后在右侧的窗格内
将想要的密码输入进去
再按下 Enter 就完成了密码的设定
好，那接下来我们还要去申请一组 Gemini 的金钥
有了金钥
我们才能使用 Gemini 的 AI 语音模型
所以你可以直接前往 Google AI Studio 的网站
在左下角点击钥匙的图示
再去点击右上角的「建立 API 金钥」
按下 Create Key (建立金钥)
这样我们就能看到一组
由英文和数字组成的金钥密码
你可以把它拷贝下来
回到 Claude 执行底部的程式码
最后再到右侧按下 Ctrl +V 来把金钥贴上
按下 Enter
如此我们就顺利完成了第三个步骤啰
好，最后我们要来设定 AI 语音助理跟 Line 的连接
要完成这个步骤
我们首先必须注册一个 Line 的官方帐号
你可以直接使用自己的 Line 帐号登入
然后到左侧点击「建立」
那这里你可以随意输入一个帐号名称
而底下的业种分类也可以随意作答
点击「确定」
然后官方帐号的认证步骤可以直接略过
接着一直点击「同意」或「继续」按钮
就会来到官方帐号的主要操作介面
由于我们的 AI 语音助理
并无法直接连系 Line 用户
而必须透过 Line 机器人 (官方帐号) 这个中介才能传送讯息
因此我们必须先把这个通道打开
在左侧进入 Messaging API 的页面
再去点击中间的绿色按钮
服务的提供者就选择自己
点击「同意」
然后隐私权的政策可以先略过
再按下「确定」就 OK 了
而除了打开这个通道之外
我们还需要取得两个关键的资讯
一个叫做 Channel Secret
另一个叫做 Channel Access Token
它们就像是这条通道的两把钥匙
用来确保讯息在传递的过程中是安全的
好，那要取得这两把钥匙
我们可以点击左下角的连结
再点进去刚建立的 Line 官方帐号
接着把页面往下卷
就能看到第一把钥匙 Channel Secret
你可以把它复制下来
然后照着 Claude 的说明
执行它提供的程式码
接着再把 Channel Secret 贴到右边的窗格就 OK 了
再来第二把钥匙是位于隔壁的分页
切换过来之后我们把页面卷到最底部
就能看到 Channel Access Token 这一行标题
然后我们去点击底下的黑色按钮
就会跑出一组很长的密码
我们同样把它复制起来
回到 Claude 执行程式码
最后再把这一组金钥按下 Ctrl +V 执行贴上就 OK 啰
好，最后一个步骤
是要在 Line 设定一个 Webhook 网址
Webhook 有点像是 AI 语音助理留给 Line 的电话号码
如果有人加好友了
Line 就会透过这个网址通知我们的 AI 语音助理
所以我们就把 Claude 提供的网址做个复制
回到 Line 网站点击 Webhook 的「编辑」
来将这个网址执行贴上
点击 Update (更新)
接着再按下「验证」
一切都没有问题的话
我们就可以把 Webhook 的功能启用
而由于 Line 机器人预设会回覆一些罐头讯息
因此我们还必须把页面卷下来
点击「自动回覆讯息」旁边的编辑按钮
来把这个功能关闭
全部都设定完成后
Claude 会提供这个 App 的网址让我们来进行测试
于是你可以打开手机的浏览器前往这个网址
并且在登入页面中输入之前设定好的密码
那你可以考虑把这个网站
加入到手机的主页
让它看起来像是一个真正的 App
所以我们就选择「加入主画面」
这样主页就可以看到之前我们设计好的图示
那只要有其它人
像是你的家人或亲朋好友加入这个官方帐号的话
他们的名称就会显示在「联络人」的分页
有需要的话
你可以为每个人设定一个昵称
设定完成后
我们就可以准备来做个测试
我按下底部的麦克风按钮
嗨，Papaya 你好
有什么我们可以帮忙的吗？
请提醒我两分钟之后去洗衣服
好的
我会在 3 点 54 分提醒你去洗衣服
这样对吗？
是的，没错
OK，于是过了两分钟之后
我的 Line 就自动跳出「洗衣服」的提醒讯息啰
好，那我们来测试传一则讯息给其它人
请提醒小花 10 分钟之后去倒垃圾
好的
我会在 4 点 8 分的时候提醒小花去倒垃圾
这样对吗？
是的，没问题
好，已经帮你设定完成啰
OK，那这样小花在 4 点 8 分的时候
就会收到我们要提醒她的讯息啰
好，做到这边
整个 App 的核心功能已大致完备
而为了方便日后的维护
我们可以请 Claude 替自己写一份专案备忘录
说明这个 App 使用了什么程式架构和相关技术
之后当我们想要新增功能或修改程式码时
Claude 就能迅速掌握整个专案的脉络
而要生成这个备忘录
我们只要在对话框内输入 /init 指令
Claude 就会自动扫描整个专案环境
并且在资料夹内建立一份
名为 CLAUDE.md 的说明文件
日后只要我们每开启一个新的对话
CLAUDE.md 就会自动载入
作为这个专案的背景知识
除此之外
现在也是一个非常适合存档的时间点
因此我们可以请 Claude 将目前的进度
进行存档并备份到 GitHub
或着如果你想要使用较为正式的术语
你也可以说请你将目前的进度进行提交 (Commit)
并推送 (Commit) 到 GitHub
而之后如果我们想要针对这个 App
做一些功能上的调整
操作流程也非常简单
譬如我想要把画面中的麦克风按钮改成蓝色
并且将尺寸加大 1.5 倍
于是你可以开启一个新的对话
并且把你的需求写成一段提示词
同时我们要提醒 Claude
修改好后先不要覆盖正式的版本
而是先做个预览版
让我们能用手机先做个测试
过了一会儿
当 Claude 修改完成后
我们就可以用手机打开它提供的预览连结
来确认按钮的外观是否符合预期
看过后觉得没有问题的话
我们就可以请 Claude 将改好的内容部署到正式的网址
并且做提交和推送到 GitHub 来完成此次的更新
而如果你在修改 App 的功能或调整介面时
发现效果不如预期也不用担心
你只要请 Claude 列出所有的存档记录
并且从清单中找出想要返回的历史版本
例如我想要将麦克风的按钮
变回到原本小尺寸的黑色外观
于是我在提示词内特别标明该笔存档的编号
请 Claude 协助还原
同时还原时我们还要做一个决定
就是要「舍弃」该存档点之后的所有修改
还是要「保留」后续的所有纪录
以新增一笔提交的方式覆盖回去
决定好后我们就将提示词送出
于是麦克风就立即变回原来蓝色放大前的样子
而且当我们再次请 Claude 列出所有的存档点时
原来的旧存档也都有完整保留下来喔
OK，最后我们来聊一下
如果想要替这个 App 开发新功能的话
要采用什么样的流程会比较理想
举例来说
假设我希望可以用口说的方式
请 AI 帮忙制作一张贺卡
并且在指定时间传送给亲朋好友
而由于在开发过程中我们无法确定
新功能做出来的效果是否能符合预期
因此最安全的作法
是请 Claude 从现有的正式版中
另外建立一个独立的分支来进行实作
如果做好的新功能结果令人满意
我们就把分支合并回主线
让它变成正式的版本
而如果测试后觉得不合适
我们也可以直接将分支删除
完全不会影响原本正常运作的 App
好，那我们就同样写一段提示词
说明想要新增的功能与需求
并且请 Claude 开一个新分支来进行实作
同时我们也可以指定
想要使用的图片生成模型
例如 Google 自家的 Nano Banana 2
最后按下 Enter 键将提示词送出
那 Claude 此时会跳出一则讯息
提醒我们 Nano Banana 2 并没有提供免费的额度
询问我们想要如何处理
而这边我就选择使用现有的金钥来绑定帐单
而在 Claude 执行任务的期间
我们可以回到先前申请 Gemini 金钥的网站
点击「设定帐单」
接着再输入信用卡的资料
至于储值的金额
我就选择最低的台币 150 元
点击「继续」
再按下「完成」
那生成图片的功能制作好后
我们就可以用手机来做个测试
请帮我生成一张早安图
在三分钟之后传到我的 Line
图片的背景是荷花
前面写着平安喜乐四个字
好的
我现在准备来生成图片
图片生成好了
有需要修改的地方吗？
这样 OK
请帮我送出吧
于是三分钟之后
我的 Line 就收到了刚生成的早安图
那我们接着来测试传送贺卡给其它人
请帮我生成一张中秋节的贺卡
在 9 月 25 号的早上 8 点传给小花
并祝她中秋节快乐
贺卡制作好啰
有没有什么需要修改的地方呢？
这样很好
请帮我送出吧
好的
已帮你排定在中秋节当天
早上 8 点传送这张贺卡给小花啰
OK，确认新功能运作一切正常之后
我们就可以请 Claude 帮我们做一次提交
而如果此时我们列出所有的提交记录
就可以看到这笔提交
是独立记录在新建立的分支上
如果你决定要正式发布这项新功能
你可以请 Claude 将这项变更部署到正式的网址
并且将分支合并回主线
推送到 GitHub
最后再把这一个分支删除掉就 OK 啰
好，那今天关于 App 开发的流程介绍
我们就聊到这边
我们下回再见
拜拜