15分钟做完一个小程序,腾讯这个工具有点东西

我记得很久之前,我们都在讲什么低代码/无代码平台,这个概念很久了,但是,一直没有很好的落地,整体的效果也不算好。

自从去年 ChatGPT 这类大模型大火以来,各大科技公司也都推出了很多 AI 代码助手,包括国内很多互联网大厂很多程序员都开始使用 AI 来写代码了。但是,这些 AI 编程助手还是太专业化了,程序员使用起来很方便,但是,非程序员用起来还是很麻烦,比如:每个编程语言都有自己的 IDE ,需要搭建各种环境,这对于普通小白来讲,即使有 AI 帮助,门槛相对来讲还是挺高的。

其实,我就在想 AI 结合之前的低代码平台概念,或许真的有助于低代码/无代码平台更进一步的落地,有 AI 的帮助,低代码/无代码实现或许不是梦。

最近我体验了一下腾讯推出的「云开发 Copilot」,我认为它是目前市面上 AI + 低代码平台结合最好的一个工具。不管是从体验来讲,还是落地的实际使用效果来看,都非常好。

为什么说它是低代码 + AI 结合效果最好的工具呢?因为当你注册账号之后,它基于腾讯云的服务,提供了一站式的服务,帮你搭建好了云开发环境,不需要配置环境,帮你提供了云数据库,可以做到云存储和云函数,这些自动帮你搞定了,前端界面提供了各种组件,既可以用 AI 自然语言描述去写界面,也满足了你拖拽组件实现界面,整个过程几乎不用写代码。

我给大家举个例子。我想做一个「程序员老黄历」的小程序,该怎么做呢?首先,登录云开发平台,找到可视化开发。

fed11b623ec762f5e7a4bc8b39a5e309.png

这里提供了很多创建应用的方法,比如:

1、 空白创建,空白创建就是直接进入可视化操作界面,结合 AI 做应用就行;

2、Excel 创建、数据创建、数据模型创建,这是你就你提供的数据,根据数据会自动先帮你生成界面,然后再根据 AI 去修改微调成自己想要的界面。

3、从 AI 创建,就是输入一个 AI 指令,帮你创建一个应用,然后再去结合 AI 慢慢微调。

其实,都差不多,基于自己的需求,选择合适的新建应用方式。

这里我就从空白创建应用了,进去之后,我再用  AI 指令一步一步完成我的小程序。

2734a2e1279c8d0533892831691821fd.png

进入编辑之后,它会有一个默认的布局组件,大家可以删除没用的,留下一个自己需要的,然后点击,然后选择 AI 代码块。这时候,就会弹出一个 AI 编辑框,输入你的需求,它就可以帮你自动生成界面了。

比如,我的「程序员老黄历」的需求是:

我想制作一个跟程序员有关的微信小程序,叫:程序员老黄历。

思路是这样的,需要展示:

宜,也就是今天宜做什么,比如,今天宜使用 IDE 编程,今天适合跳槽,今天适合撸管。

忌,就是今天不宜做什么,比如:写代码不适合超过 79 行,不适合打 DOTA ,不适合跳槽。

座位朝向:适合面向东方写程序,BUG 最少。

今日宜饮:咖啡和可乐;

女神亲近指数:5 颗星。

上面的内容根据日期,需要每天变化。宜和忌做什么?你需要发挥自己的想象力,展示与程序员相关的内容,宜和忌当中,每天展示 3 条。

请根据我的描述,设计这个程序,并设计算法,根据日期展示上述内容。

看看效果:

ceb6594bd3d8aaa4ce49bfa7f9225b42.gif

最后,根据我的描述,生成的初始界面如下:

这个页面有个日历组件和程序员运势功能模块。

04b7be32176a6d06cd99e0b272dad501.png

5a169ee24b91191c6c202b654bbbfd80.png

通过看这两张图,我们就知道,在编辑界面,左边是页面的组织结构,中间是可视化的界面,右边组件、属性以及配置信息的界面。

看懂了这些,接下来,我们就一步一步的使用自然语言描述实现一个美观的「程序员老黄历」小程序。目前这个界面很丑,对吧?也不是我们想要的效果。我想把日期选择框隐藏,变成一个日期选择按钮,点击日期选择按钮,弹窗出日历选择组件。所以,我就需要选中要修改的地方,然后点击 AI 代码块,再点击编辑 JSX 代码。然后输入自己的需求指令。

4561567f452b48ef5d6507ae3ff5560e.png

2759fd71f4e1bda670caa7da03a4f9ba.png

我的需求指令是:

去掉界面中的程序员运势这几个字,另外,日期的右边增加一个日期选择按钮,点击按钮弹出日期选择框替换到界面最上方的日期选择框。

065f1d0302a6616a7e9d44d1c5cbd092.png

你看截图,我将指令输入到 AI 编辑框里了,点击回车键,AI 就开始自动帮我写代码了。AI 帮我修改后的界面如下:

892eda7d82fd55c61d647a96ab30a307.png

上边的日期选择框没有了,帮我换成了一个选择日期按钮。这就变成我想要的界面了。AI 最聪明的地方在于什么呢?下边的老黄历内容和日期选择按钮的 JS 代码自动关联,我只要选择一个日期,下边的内容会跟着联动改变。

但是,到这里,还不行,因为这里的算法有问题。比如:既然是黄历,当天的日期展示的黄历内容,不能每次点击都变,比如:11 月 18 日,我换成 11 月 19 日,再点回到 11 月 18 日的时候,黄历中的内容就变化了,每次点击随机变化,而不是根据日期随机变化。

67f7c38cc328ccacafb24f83aeafc5e2.png

大家可以跟上边的图片对比一下。所以,我重新写一个 AI 指令,让它帮我修改算法,看看它能不能做到,不是根据点击随机变化,而是根据日期变化内容。

指令:这个老黄历算法设计有问题,如果我当天重复打开这个小程序,里面的内容会随机变化。要求是:当天展示的内容,当天进去,应该显示的不变。展示的内容,跟日期有关。

548a3c757d88fc32b566373878bac9c2.png

在 AI 输入框里,我把指令输入进去,它就开始自动帮我修改算法了。

我测试了一下,确实改好了,当天展示的内容,不管如何点击,或者再点回来,内容都是不变的。

d80cb2d82beda190beab0cbe264229ce.gif

到这里,整体的逻辑实现了,对吧?但是,界面不好看,我们可以让 AI 助手,帮我们优化一下界面。

指令:整体界面不好看,请帮我美化一下这个页面,风格符合程序员的特色。

559bce4e744ede53c1e1c191996570e7.png

当我把指令发送给 AI 之后,看看 AI 给生成的效果,风格很简洁:

16b5fb987b161964fa2fa3e6d293660c.png

风格变得是很简约了,也还不错,但是,我想让把程序员老黄历的字体变小点,放到日期的位置,而展示的日期在选择日期按钮上显示。

再来一组指令:把界面最上方的程序员老黄历放到日期的位置,而日期的展示放到选择日期按钮上,日期按钮默认展示当天日期。

6c13c1315ddb8b784313c346a0cb96a4.png

发送给 AI ,然后看效果:

7bd531043513640433a604555268e811.png

就问大家好不好看吧?界面不仅简约,配色也挺好看的,全都是 AI 完成的,我只是说符合程序员特色的,简约点就行。

我最后,忘了,最后一个不叫代码质量,叫:女神亲近指数,AI 一开始给我生成代码质量了。我让 AI 帮我改一下。

指令:帮我把代码质量换成女神亲近指数,同时,将图标也换成符合女神亲近指数含义的。

232b98e6a348d4a81453a0fb7045fd94.png

看最终效果,不仅文字换了,图标都帮我换成了爱心形状的,符合女神亲近指数这个含义:

d515ef624a5defb632082550a240d471.png

最后,来个动态的终极 gif 图,展示一下小程序完成后的效果。

8e7100d37b4b6621ff2e3b07a9d3821c.gif

这么一个小程序,从设计到完成,用时只用了 15 分钟,一行代码都没写,全程都是用自然语言描述完成的,其中涉及到的 JS 代码,包括控件和内容之间的联动,都是 AI 自己完成的。这对于小白来讲,就很简单了。

另外,如果你的小程序涉及到了 API ,数据的存储和云数据库等功能,也不用怕,其实,腾讯的这个云开发 Copilot 平台也提供了,是一站式的,也可以借助 AI 自动生成。

1e0ef53c8166e55f419112b5664f2a8f.png

大家可以自己去查看文档,体验一下,非常简单和方便。

到这里,是不是已经很厉害了?但是,我感觉这并不是最牛的,最牛的地方在于它一套代码兼容了三个平台,既可以是小程序,还可以是手机 H5 页面,还可以是 Web 网页。

11561cc332a8d7f8605c72dd1d70a523.png

看到了吗?三个箭头对应的是三个平台,在这里点击切换,代码可以自动适应成适合该平台的布局,刚才这张图是手机 H5  布局,跟小程序界面几乎一样。

我再切换到电脑 Web 端,一起看看效果。如下:

66365e6adad741d2d0e7b3d7bc670005.png

看到了吗?自动变成宽屏布局了。

通过整个流程的体验,如果你的业务不是特别复杂,完成可以使用这个云开发平台来做,既可以做小程序,也可以做手机 H5 页面,还可以做 Web 页面或者一些网站,都能满足你的需求。

关键是,在这里开发完成之后,直接点击发布之后,就部署完成了,不需要买个服务器,把代码打包,部署到服务器之中。这个云开发的环境都包含其中了。

就问牛不牛吧?是不是够小白化,够低代码化了吧?

大家可以去体验一下。

地址:https://docs.cloudbase.net/ai/copilot/introduce

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/887578.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python学习——猜拳小游戏

import random player int(input(“请输入:剪刀 0,石头 1,布2”)) computer random.randint(0,2)# print(“玩家输入的是%d,电脑输入的是%d” %(player,computer)) 用于测试 if (player 0) and (computer 0) or (player 1) a…

从零样本到少样本学习:一文读懂 Zero-shot、One-shot 和 Few-shot 的核心原理与应用!

爆款标题: 《从零样本到少样本学习:一文读懂 Zero-shot、One-shot 和 Few-shot 的核心原理与应用!》 正文: 在自然语言处理(NLP)领域,Zero-shot、One-shot 和 Few-shot 学习已经成为衡量大语言…

Kafka知识体系

一、认识Kafka 1. kafka适用场景 消息系统:kafka不仅具备传统的系统解耦、流量削峰、缓冲、异步通信、可扩展性、可恢复性等功能,还有其他消息系统难以实现的消息顺序消费及消息回溯功能。 存储系统:kafka把消息持久化到磁盘上&#xff0c…

JVM调优篇之JVM基础入门AND字节码文件解读

目录 Java程序编译class文件内容常量池附录-访问标识表附录-常量池类型列表 Java程序编译 Java文件通过编译成class文件后,通过JVM虚拟机解释字节码文件转为操作系统执行的二进制码运行。 规范 Java虚拟机有自己的一套规范,遵循这套规范,任…

@sun.misc.Contended

某个类有以下两个属性 volatile int a; volatile int b; int为4字节,两个int为8字节,一个缓存行大小为64字节 故一旦缓存行a失效了,但是b没失效,会连带着b一起失效,因为失效最小的单位就是一个缓存行 这样子会导致效率…

【Petri网导论学习笔记】Petri网导论入门学习(十一) —— 3.3 变迁发生序列与Petri网语言

目录 3.3 变迁发生序列与Petri网语言定义 3.4定义 3.5定义 3.6定理 3.5例 3.9定义 3.7例 3.10定理 3.6定理 3.7 有界Petri网泵引理推论 3.5定义 3.9定理 3.8定义 3.10定义 3.11定义 3.12定理 3.93.3 变迁发生序列与Petri网语言 对于 Petri 网进行分析的另一种方法是考察网系统…

Flink--API 之Transformation-转换算子的使用解析

目录 一、常用转换算子详解 (一)map 算子 (二)flatMap 算子 (三)filter 算子 (四)keyBy 算子 元组类型 POJO (五)reduce 算子 二、合并与连接操作 …

解锁Scala编程:深入文本分析与数据处理的艺术

引言: 在数据科学的世界里,Scala以其强大的并发能力和简洁的语法,成为处理大规模数据集的理想选择。本文将带您踏上一段Scala编程的探索之旅,从基础的文本分析到复杂的数据处理,每一步都精心设计,让您在实…

Top 10 Tools to Level Up Your Prompt Engineering Skills

此文章文字是转载翻译,图片是自已用AI 重新生成的。文字内容来自 https://www.aifire.co/p/top-10-ai-prompt-engineering-tools 供记录学习使用。 Introduction to AI Prompt Engineering AI Prompt Engineering 简介 1,Prompt Engineering 提示工程…

【RK3588 Linux 5.x 内核编程】-内核线程与读写自旋锁

内核线程与读写自旋锁 文章目录 内核线程与读写自旋锁1、读写自旋锁介绍2、Linux内核中的读写自旋锁2.1 初始化2.1.1 静态方法2.1.2 动态方法3、读写自旋锁加锁与解锁3.1 在用户上下文之间锁定3.1.1 读锁3.1.2 写锁3.2 下半部分之间的锁定3.3 在用户上下文和下半部分之间锁定3.…

Rust语言俄罗斯方块(漂亮的界面案例+详细的代码解说+完美运行)

tetris-demo A Tetris example written in Rust using Piston in under 500 lines of code 项目地址: https://gitcode.com/gh_mirrors/te/tetris-demo 项目介绍 "Tetris Example in Rust, v2" 是一个用Rust语言编写的俄罗斯方块游戏示例。这个项目不仅是一个简单…

Spring Boot 与 Spring Cloud Alibaba 版本兼容对照

版本选择要点 Spring Boot 3.x 与 Spring Cloud Alibaba 2022.0.x Spring Boot 3.x 基于 Jakarta EE,javax.* 更换为 jakarta.*。 需要使用 Spring Cloud 2022.0.x 和 Spring Cloud Alibaba 2022.0.x。 Alibaba 2022.0.x 对 Spring Boot 3.x 的支持在其发行说明中…

Oracle, PostgreSQL 字符串排序不一致及调整

有一个使用了不同数据库的应,Oracle 和 PostgreSQL,数据库中的记录完全相同,相同的查询语句(相同的排序,至少从字面上来说是的)取到的记录排序却不同,从而产生了 Bug。 简单演示一下默认排序各自在这两种数据库中的行为…

(免费送源码)计算机毕业设计原创定制:Java+ssm+JSP+Ajax SSM棕榈校园论坛的开发

摘要 随着计算机科学技术的高速发展,计算机成了人们日常生活的必需品,从而也带动了一系列与此相关产业,是人们的生活发生了翻天覆地的变化,而网络化的出现也在改变着人们传统的生活方式,包括工作,学习,社交…

Ubuntu Opencv 源码包安装

说明: ubuntu20.04 建议 使用 opencv-4.6.0版本 ubuntu18.04 建议 使用 opencv-4.5.2-版本 安装包准备 1、下载源码包 OpenCV官网 下载相关版本源码 Sources # 克隆方式 OpenCV 源码git clone https://github.com/opencv/opencv.gitcd opencvgit checkout 4.5.2 …

Linux 下自动化之路:达梦数据库定期备份并推送至 GitLab 全攻略

目录 环境准备 生成SSH 密钥对 数据库备份并推送到gitlab脚本 设置定时任务 环境准备 服务器要有安装达梦数据库(达梦安装这里就不示例了),git 安装Git 1、首先,确保包列表是最新的,运行以下命令: …

极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【一】

GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料: 极狐GitLab 官网极狐…

<项目代码>YOLOv8 停车场空位识别<目标检测>

YOLOv8是一种单阶段(one-stage)检测算法,它将目标检测问题转化为一个回归问题,能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法(如Faster R-CNN),YOLOv8具有更高的…

【智能制造-46】人机工程(工厂自动化)

工作空间设计 设备布局规划 根据人体测量学数据,合理安排自动化设备、生产线和工作区域的布局。例如,考虑工人的操作空间和活动范围,确保他们能够舒适地接近和操作设备。在汽车装配车间,机器人和工人的工作区域应划分明确&#…

Spring Boot 集成 Knife4j 的 Swagger 文档

在开发微服务应用时,API 文档的生成和维护是非常重要的一环。Swagger 是一个非常流行的 API 文档工具,可以帮助我们自动生成 RESTful API 的文档,并提供了一个友好的界面供开发者测试 API。本文将介绍如何在 Spring Boot 项目中集成 Knife4j …