做视频免费模板下载网站,群晖怎么做网站,微博推广的好处,建一个展示的网站要多少钱引言
早在大学的时候#xff0c;我就期望做一款属于自己的 APP#xff0c;可惜那时不懂技术。现在有了技术#xff0c;但却没有时间。好在 AI 的快速发展终于让我完成了这个愿望。于是#xff0c;我用半天的时间#xff0c;用 AI 生成了一个纯前端的 H5 程序#xff1a;…引言
早在大学的时候我就期望做一款属于自己的 APP可惜那时不懂技术。现在有了技术但却没有时间。好在 AI 的快速发展终于让我完成了这个愿望。于是我用半天的时间用 AI 生成了一个纯前端的 H5 程序随心记。 在线体验地址https://aicoding.juejin.cn/aicoding/work/7519454663779811366 什么是随心记
随心记是一个由 AI 生成的网页备忘录它支持语音录入可下载、图文视频记录。最重要的是它支持离线使用所有数据都储存在浏览器中不依赖后端刷新页面数据也不会丢失 此外它还做了语音兼容处理支持在 iOS 和安卓设备中通过 WebView 嵌套使用。 功能介绍
欢迎页 信息录入页
支持图文 支持语音录入、播放、下载 数据离线缓存刷新页面不丢失 仅点击退出会清空数据 技术栈
本项目通过TraeClaude-3.7生成纯科技不夹杂人工代码项目最终通过掘金MCP一键部署发布。 作品发布体验地址https://aicoding.juejin.cn/aicoding/work/7519454663779811366 AI的代码技术栈如下
星空背景Cnavas实现录音功能纯原生实现后为了兼容改用record-core图片/视频功能Vant-UI数据离线储存采用IndexDB
AI实践过程
开发工具准备
要使用AI实现这样一个小程序首先要选取合适的AI编程工具。比如字节的Trae或国外的Cursor都行由于要使用掘金的MCP一键部署还是建议使用Trae。
不同的AI模型可能影响代码生成效果因此建议使用Claude编码能力更强。
产品及prompt设计
要使用 AI 生成你想要的项目首先一定要设计好你的产品比如它包含哪些模块有哪些功能交互逻辑如何等等。因为这些内容最终都将作为 promptAI模型提示词 投喂给 AI而 prompt 的详细程度往往直接决定了你生成的产品质量。
当然如果你实在不知道怎么设计产品也可以请教 ChatGPT比如这样问 我想通过AI编译器生成一个记事本APP帮我设计一个详细的prompt 设置自定义智能体
为了让AI开发代码更准确符合我们的开发、编码习惯我们可以创建一个智能体让AI通过我们的预设信息来进行代码生成。 通过AI提问开发项目
一切都准备好后我们就可以使用AI生成项目了。首先我们需要让AI帮我们搭建项目框架。 我要创建一个名为“随心记”的APP使用Vue3typeScriptless帮我搭建项目框架不要写入任何内容等待我的指示 搭建项目的过程中我们只需要按照提示运行相应的命令即可 项目搭建好我们就可以按照模块让AI帮我们一步步完善代码。我们以生成星空背景手机框架为例。 promot帮我生成星空背景样式要炫酷屏幕中间显示一个Ihone的手机框架。 我们可以用过上下文协议选中某个文件将代码生成在指定位置 代码生成后我们先预览效果如果效果不达标我们可以通过不断提问去增加细节如给背景的星星增加闪烁效果给背景增加流星之类的。通过不断优化promot效果会越来越接近我们想要的效果。
给出我通过AI生成的星空背景代码 templatediv classmedia-wrapcanvas classstar-canvas/canvas/div/templatescript setupimport { onMounted } from vue
onMounted(() {const canvas document.querySelector(.star-canvas)const ctx canvas.getContext(2d)function resize() {canvas.width canvas.offsetWidthcanvas.height canvas.offsetHeight}resize()window.addEventListener(resize, resize)// ⭐ 星星类星星变大class Star {constructor() {this.reset()}reset() {this.x Math.random() * canvas.widththis.y Math.random() * canvas.heightthis.radius Math.random() * 2.5 0.5 // ⭐ 更大0.5 ~ 3pxthis.alpha Math.random()this.fade Math.random() * 0.02this.speed 0.1 Math.random() * 0.3}update() {this.y this.speedthis.alpha this.fadeif (this.alpha 0 || this.alpha 1) this.fade -this.fadeif (this.y canvas.height) this.reset()}draw() {ctx.beginPath()ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)ctx.fillStyle rgba(255,255,255,${this.alpha})ctx.fill()}}// ☄️ 流星类左下 → 右上class Meteor {constructor() {this.reset()}reset() {this.x Math.random() * canvas.width * 0.5 // 左侧this.y canvas.height - Math.random() * canvas.height * 0.5 // 下方this.len Math.random() * 80 100this.speed Math.random() * 4 6this.angle Math.PI / 4 // ↗ 从左下到右上this.alpha 1}update() {this.x this.speed * Math.cos(this.angle)this.y - this.speed * Math.sin(this.angle)this.alpha - 0.01if (this.alpha 0) this.reset()}draw() {const x this.xconst y this.yconst len this.lenctx.save()ctx.beginPath()ctx.moveTo(x, y)ctx.lineTo(x len * Math.cos(this.angle),y - len * Math.sin(this.angle))ctx.strokeStyle rgba(255,255,255,${this.alpha})ctx.lineWidth 2ctx.shadowColor #fffctx.shadowBlur 10ctx.stroke()ctx.restore()}}const stars Array.from({ length: 200 }, () new Star())const meteors Array.from({ length: 3 }, () new Meteor())function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height)stars.forEach(star {star.update()star.draw()})meteors.forEach(meteor {meteor.update()meteor.draw()})requestAnimationFrame(animate)}animate()
})
/scriptstyle langless scoped
.media-wrap {width: 100%;height: 100vh;overflow: hidden;background: linear-gradient(to bottom, #1b1e3f, #2c3e50, #3b2c59); // 深蓝紫色// ✨ 动态渐变星云背景background: linear-gradient(-45deg, #1b1e3f, #2c3e50, #3b2c59, #1b1e3f);background-size: 400% 400%;animation: galaxyMove 20s ease infinite;.star-canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;}.iphone {width: 380px;height: 85%;border-radius: 30px;position: relative;box-shadow: 0 0 0 10px black;margin: 40px auto;z-index: 1;.screen {width: 100%;height: 100%;border-radius: 30px;margin-top: 5%;overflow: hidden;}.notch {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 130px;height: 30px;background: #000;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;z-index: 2000;}.side-button {position: absolute;width: 4px;background: #666;border-radius: 2px;.power {height: 40px;right: -6px;top: 120px;}.volume-up {height: 30px;left: -6px;top: 100px;}.volume-down {height: 30px;left: -6px;top: 140px;}}}
}.title {position: relative;z-index: 2;text-align: left;margin-top: 20px;font-weight: 600;letter-spacing: 1px;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);.gradient-text {font-size: 28px;background: linear-gradient(45deg, #f9d423, #ff4e50, #7b4397, #00c6ff);background-size: 300% 300%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: gradient-shift 8s ease infinite, pulse 2s infinite alternate;}
}.info {color: #fff;position: fixed;bottom: 10px;right: 10px;cursor: pointer;font-size: 16px;
}keyframes galaxyMove {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}keyframes gradient-shift {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}keyframes pulse {0% {transform: scale(1);}100% {transform: scale(1.05);}
}
/style
在我用AI 生成的这个项目中最复杂的部分莫过于录音功能了通过大约半小时的反复提问与细节优化终于通过代码实现了语音录入、自定义语音样式、语音播放的功能。 AI的核心实现原理是通过原生录音事件完成的
// 创建音频上下文
const AudioContext window.AudioContext || (window as any).webkitAudioContext
audioContext new AudioContext()// 创建分析器
analyser audioContext.createAnalyser()
analyser.fftSize 256 // 必须是2的幂次方
const bufferLength analyser.frequencyBinCount // 通常是fftSize的一半
dataArray new Uint8Array(bufferLength)// ...// 请求录音权限
navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) {resolve(stream)}).catch((err) {console.error(获取录音权限失败:, err)Toast(获取录音权限失败请检查权限设置)reject(err)})// 创建MediaRecorder实例
recorder new MediaRecorder(stream as MediaStream)但经过实际测试在IOS的webview中这种方案兼容性不好在低版本的IOS中录音播放异常这与原生录音方法生成的录音格式有关。
于是通过搜索最终使用了record-core实现了录音功能并让AI帮我重构了代码。
对于数据的离线储存通过提问AI后选用了indexDB的储存方案。但在实测中播放语音时会报错 于是通过提问AI继续修复与优化。 在经过不断地测试与AI修复后功能终于是没有任何问题了。在整体项目生成后就是利用AI提问不断完善一些小功能 用AI生成项目的过程需要一步步的提问让AI优化细节这个过程其实是比较漫长的但对于不懂技术或者不想自己写代码的同学而言这都不是什么问题。
项目开发完毕就可以部署在线上体验了。
项目部署
要发布线上目前最方便的方式就是在Trae中配置MCP一键部署。 部署前我们需要先配置掘金的MCP,在 Trae 或 IDE 的 MCP 配置中添加以下 JSON 配置
{mcpServers: {juejin-deploy-mcp: {command: npx,args: [--registryhttps://registry.npmjs.org,-y,juejin-team/mcp-serverlatest],env: {JUEJIN_TOKEN: }}}
}注意配置项中的JUEJIN_TOKEN需要填写你自己的掘金Token获取地址如下 https://www.zhihu.com/ 点击添加后你就可以在你的内置智能体中看到到 现在你只需要切换到这个智能体给出对应的部署提示即可。 部署成功后会在对话框看到部署链接点击后就可以看到效果。 总结
通过本文可以看出借助 AI 从零开发一个完整的程序已不再是梦想这让越来越多的人有机会成为创作者。而要用好 AI 开发产品提示词prompt的质量至关重要。令人惊喜的是优秀的提示词本身也可以由 AI 生成。用 AI 生成 prompt再用这个 prompt 指导 AI 开发产品这种“AI 调用 AI”的方式既魔幻又充满趣味。
