应用界面

“非工程师也想开发应用!”带着这样的愿望,笔者尝试利用生成式AI进行自制应用开发(称为“Vibe Coding”),却在“发布壁垒”前陷入困境。

随后,笔者向日本GMO互联网集团的现役工程师石丸智辉先生请教,开始在Google AI Studio上开发应用。经过频繁向AI提出需求,不到一小时,梦想中的“威士忌记录应用”便成功运行。

笔者兴奋地说:“太棒了!这不就是完成品吗?”

石丸先生冷静回应:“请试着刷新浏览器。”

刷新后,所有数据竟然消失了。原来,这个原型只是“空壳”(前端界面)而已。

这是一段业余与专业携手,真实且充满泥泞的开发纪录……

相关连载:非工程师用AI开发应用遭遇“发布壁垒”,求助现役专业人士

这次,笔者计划在确认手机端运行后,将Google AI Studio与GitHub连接,上传至今为止的源代码,为数据库创建做准备。

Google AI Studio制作的原型仅包含前端(界面与交互),下一步将通过GitHub迁移至其他工具,因此需要尽可能完善代码。独自作业时,调整商品名称显示效果时,屏幕突然变黑。

黑屏故障

遇到故障时,恢复至保存点

刷新页面和重启浏览器均无效,笔者求助石丸师傅。

“无论是Google AI Studio还是日常开发,出现错误或程序无法运行很常见。通常,若有错误提示或浏览器消息,连同这些信息一并交给AI,有助于缩小问题范围。首先,请告诉AI‘应用界面无显示,请调查并修复’。”(石丸先生)

按照建议发出修复指令后,AI进行了调查和修正,但屏幕依旧黑屏。

“若实在无法解决,就只能恢复到正常运行时的保存点。”(石丸先生)

恢复操作:点击Google AI Studio右上角图标,选择“打开版本历史”,从下拉菜单中选取故障前的保存点,点击“恢复至该版本”。保存点可通过点击“保存”按钮或在重大更改时自动生成。

版本历史

恢复至上次保存点后,应用正常运行。再次尝试相同指令改善UI,这次顺利完成。

UI改进

前端终于完成,应用命名为“AiLA”

笔者添加了想要的功能后,询问石丸先生是否还有建议。

他建议在分析和注册页面的头图上显示标签。威士忌瓶通常是竖拍,标签很难完美适配头图,且标签位置不固定,笔者之前对此感到无奈。

按建议指示显示标签部分,AI迅速改进。测试时标签放大显示,但对其他瓶子效果不佳。

“目前的实现基于固定位置规则,标签位置变化时显示效果会受影响。既然已用Gemini识别威士忌图像,不妨让Gemini推测标签区域坐标,再放大显示。这样自动化处理,既省力又能稳定视觉效果。”(石丸先生)

按建议输入提示词后,AI准确定位标签位置并自动放大显示。需注意,使用Gemini API会产生运营成本。

标签放大

前端制作完成。

启动应用,显示首页。照片可从相册选取或直接拍摄。下方设有“收藏”列表,展示过往拍摄的威士忌,显示数量后续调整。

首页界面

威士忌分析结果界面逐步完善。虽然标签放大尚不完美,数据偶有错误,但后续会调整。尤其是稀有威士忌,单靠网络搜索难以覆盖,需加强手动输入,暂时先放一放。

应用效果令人满意。石丸先生认为这只是起点,笔者则感受到满满成就感,深感生成AI的强大。

应用命名为“AiLA”,灵感来自笔者喜爱的日本爱尔岛威士忌及AI的谐音,纯属巧合。

AiLA应用

手机端测试及邀请同事体验

接下来在手机上测试。

只需用手机登录同一Google账号,打开Google AI Studio中的应用,即可测试。

测试结果显示,iPhone Safari浏览器顺利显示应用,拍照和注册功能正常。虽然无数据库和社交功能,但能在手中运行预想中的应用,令人感动。

手机测试

“建议让同事或亲友试用。通过‘分享应用’生成链接,发送给对方即可在其设备上运行。第三方使用能发现操作不便或显示异常等问题,便于优先改进。注意,分享的应用代码可被查看,避免包含API密钥等敏感信息。”(石丸先生)

分享功能

迈向GitHub,但遭遇同步故障

Google AI Studio阶段结束,下一步为实现认证和数据库功能,需迁移至其他工具,必须先将代码上传至GitHub。

GitHub是基于“Git”技术的全球最大软件开发平台。对非工程师来说,它是“高性能自动备份的协作白板和存储库”,支持多种外部服务,方便继续开发。

点击Google AI Studio右上角“同步至GitHub”,选择“登录GitHub继续”,弹窗中用Google账号登录即可。

GitHub同步

但界面无变化,虽已登录GitHub,却无法完成同步。

通常是用户操作问题。尝试刷新页面、重启浏览器、清理缓存,解除并重新授权Google AI Studio与GitHub的连接,甚至使用无痕模式和不同浏览器,均无效。

报告石丸先生后得知,Google AI开发者论坛也有类似反馈,建议耐心等待。若无法解决,可下载文件本地手动上传。

GitHub问题

下回将上传文件至GitHub,并同步至下一工具。希望届时Google AI Studio与GitHub的同步问题已修复……

(第4回待续)

作者简介:柳谷智宣

作者

IT与商业领域资深撰稿人,拥有26年职业生涯,涉猎数字设备、网络服务、消费品及企业产品。近年来专注AI、SaaS及数字化转型领域。日常撰写大量稿件,已离不开生成式AI辅助。

  • 作者网站:https://prof.yanagiya.biz/

“从零开始的AI应用开发实战”系列文章

柳谷智宣的AI观察系列文章