体验最新的gemini cli工具来实现一个简单的网页小程序
谷歌新出了个对标claude code的命令行工具,叫gemini-cli,还是开源的,所以赶紧来体验下,就是前提是有科学上网,要去google的ai studio申请gemini的api key
然后在有科学网络的情况下用node 18及以上的版本安装1
npm install -g @google/gemini-cli
然后在环境变量里设置gemini key1
export GEMINI_API_KEY="xxxxxxxx"
接着运行gemini
就可以啦
这里我是刚好有个需求,因为娃最近有点不太爱喝奶,经常剩下,想要记录统计下,看看每天的总的奶量
那我就建了个空的目录,并在这个目录下运行了 gemini
,然后输入了我的需求,
原始的诉求是这样我想要写个网页版小程序,可以按时间记录宝宝每次的奶量,包括泡了多少,剩了多少,能按天统计每天的奶量,以及查看趋势
然后gemini就开始运行1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30✦ 好的,这个需求很明确,我们可以创建一个名为“奶量备忘” (Milk Memo) 的网页应用来实现它。
这是一个很好的项目,完全可以通过前端技术实现,将数据存储在浏览器中,无需复杂的后端。
这是我的计划:
应用名称:奶量备忘 (Milk Memo)
核心功能:
1. 记录喂奶量:一个简洁的表单,用于输入“冲泡量”和“剩余量”。提交后,应用会自动计算“实际饮用量”并记录当前时间。
2. 每日记录列表:清晰地展示当天的所有喂奶记录,包括时间、冲泡量、剩余量和实际饮用量。
3. 今日统计:在页面顶部或底部显眼地展示当天累计的总饮用量。
4. 历史趋势:一个图表页面,用柱状图或折线图展示最近7天或30天的每日总饮用量,帮助您直观地了解宝宝的饮奶趋势。
技术选型:
* 前端框架: React - 用于构建用户界面,组件化的思想很适合这个应用。
* 样式与布局: Bootstrap - 一个流行的CSS框架,可以快速构建出简洁、美观且移动端优先的响应式布局。
* 图表: Chart.js - 一个强大的图表库,用于实现“历史趋势”功能。
* 数据存储: 浏览器本地存储 (Local Storage) - 无需后端和数据库,所有数据将安全地存储在您自己的浏览器里,简单快捷。
用户体验与设计:
我将采用现代化、简洁的设计风格,确保在手机浏览器上也能获得良好的操作体验。界面会以卡片的形式展示数据,按钮和输入框都会清晰易用。
这个计划听起来如何?如果同意,我将开始着手创建这个应用。
然后我输入了同意他就开始帮我实现了
它会请求我的同意来运行比如npm命令,安装依赖等等
然后就自己运行了npm start
来演示运行这个应用
不算非常有设计感,但是基本的功能是已经实现了
接着我又让它帮我增加了时间选项,以及趋势图查看功能,
接着它就又生成了一版1
2
3
4
5
6
7
8
9✦ 功能已经更新完毕。
现在应用具备了以下功能:
* 自定义时间:您可以在添加记录时,精确选择到分钟。
* 视图切换:通过顶部的按钮,可以在“记录列表”和“历史趋势”图表之间自由切换。
* 趋势图表:在“历史趋势”视图中,您可以看到一个折线图,展示了每天的总饮奶量。
* 数据排序:所有记录现在会按时间从近到远排序,方便查看最近的条目。
感觉完成了所需的95%的功能,除了在设计上还能再美观些,以及增加一些服务端存储数据的功能,基本是个比较完善的,我自己都完全没介入,的确ai的发展真的一日千里,另外我还是比较看好谷歌的,没有什么大新闻,就一直努力追赶,现在基本已经是第一梯队了,很好很强大