阿里云魔笔低代码应用开发平台快速搭建教程

devtools/2025/3/14 8:55:39/

AI+低代码,大模型时代应用开发新范式

什么是魔笔

介绍什么是魔笔低代码应用开发平台。

 魔笔是一款面向全端(Web、H5、全平台小程序、App)场景的模型驱动低代码开发平台,提供一站式的应用全生命周期管理,包括可视化开发、发布、运维。基于云原生架构的弹性扩展和低成本运维服务,帮助客户高效地解决应用研发、迭代、运维的问题1。

魔笔是为专业开发者量身打造的 AI 原生化低代码应用开发平台,集成了通义千问大模型,让开发更智能、应用更智能。魔笔提供一站式的应用全生命周期管理,包括可视化开发、发布、运维;基于云原生架构的弹性扩展和低成本运维服务,帮助开发者高效地解决应用研发、迭代、运维的问题。

易用性

魔笔提供了可视化的应用搭建工具,无需编写代码,只需拖拽组件、配置属性等方式,即可完成应用的搭建。同时,魔笔提供了丰富的组件库和模板,可以满足用户的不同需求3。

效率

相较于传统的开发方式,使用魔笔进行应用搭建可以大大降低开发成本和开发周期,提高开发效率。同时,魔笔提供了应用动态更新功能,可以实时更新应用内容,提高了应用的可维护性3。

稳定性

使用魔笔进行应用开发时,平台的稳定性非常高,无论是在应用搭建、环境管理、应用发布和版本管理等方面,都非常稳定可靠3。

扩展性

魔笔提供了物料集成和API集成功能,可以轻松实现应用的功能扩展。同时,魔笔还支持多端应用生成,可以满足用户在不同设备上的使用需求3。

您可以通过阅读本文,快速了解在魔笔低代码应用开发平台中构建应用的流程。

模板市场
魔笔内置了适用于各行业、场景和应用类型的应用模板。通过使用这些模板,您可以更轻松地编辑和发布应用,迅速启动项目。

AI 设计生成页面功能介绍

功能入口

有两个功能入口,分别位于设计器中的页面列表和魔笔智能助手的快捷操作栏。


快速体验魔笔

开通使用

判断用户类型

打开阿里云官网并完成登录,通过右上方用户卡片判断您当前使用账号是否是阿里云主账号,主账号会有主账号标识,如下图所示。

image

如果您使用的是主账号,请直接跳转到开通套餐环节。

空间成员添加

空间管理员在魔笔控制台上进行空间成员添加。

image

开通套餐

如果您首次进入魔笔,魔笔将默认为您开通试用版套餐,后续您可以根据业务场景调整套餐配额,详情见产品计费说明。

新手教程

如果您首次使用魔笔,强烈建议您观看教程 教学视频,来快速掌握魔笔平台的各部分功能使用。

体验 Web 应用开发

应用创建

登录魔笔控制台,点击「创建应用」, 选择应用类型为「Web 应用」并添加名称和描述后点击「确定」后创建应用。

image

搭建体验

您可以在魔笔的画布中拖拽任何内容,并为拖拽的组件的配置中编写任意 JavaScript 表达式,画布区域会根据您的输入即时响应。快来体验魔笔所见即所得和 JavaScript Anywhere 的奥秘吧 ~

页面搭建模块是魔笔平台的重要组成部分,旨在帮助用户高效设计和管理应用页面。通过页面搭建,用户可以灵活地创建复杂的页面布局、管理页面组件、处理弹窗与抽屉交互、设置页面路由以及绑定数据等,以满足各种应用需求。

在页面搭建模块中,用户将找到以下内容:

  1. 页面组件:说明如何进行添加、删除、修改(设置属性、改变大小、移动位置)以及克隆等操作。

  2. 页面路由:讲解如何设置和管理页面路由,实现应用的多页面导航和跳转。

  3. 网格画布:介绍网格画布的使用方法,通过拖拽和调整布局,用户可以快速构建和优化页面结构,并应用响应布局。

  4. 弹窗和抽屉:演示如何创建和管理弹窗与抽屉,实现复杂的用户交互和信息展示。

  5. 组件高度设置:说明如何设置组件的高度,以满足不同的设计和布局需求。

  6. 页面布局:提供关于灵活布局的说明,支持添加和自定义 Header、Footer、Left、Right 区域,以及设置其固定方式和排列顺序。

  7. 应用最大与最小宽度:设置页面最大宽度实现高分辨率下的留白效果,设置最小宽度启用横向滚动条防止内容压缩。

  8. 组件绑定数据:演示如何通过数据绑定,实现组件与变量的动态数据展示和交互。

通过掌握页面搭建模块,用户可以大大提升界面设计效率和应用的响应能力,为创建功能丰富且具有吸引力的应用奠定基础。

image

逻辑开发

逻辑开发是指开发者通过可视化配置或编写代码,描述应用的交互流程和行为逻辑,使其能够根据用户输入(例如:点击页面上某个按钮)或其他一些系统事件(例如:调用某个后端接口并成功返回了数据),完成相应的处理与响应(例如:刷新页面上某个组件,并弹出消息提示)。

在魔笔低代码开发平台中,大部分常规逻辑都可以通过简单的可视化配置方式完成,从而大幅提升开发者的搭建效率,同时降低人员沟通与维护成本。对于更复杂和定制的业务逻辑,魔笔也提供了表达式、前端函数等开发者所熟悉的代码级能力,在效率提升基础上进一步满足开发者的灵活性和可控性需求。

创建数据库集成

1. 创建数据库集成

  1. 登录魔笔平台,进入管控台。

  2. 导航至“资源”->“集成”,点击“创建集成”。

  3. 选择“数据库类型的集成”(当前支持 MySQL 和 PostgreSQL),并填写集成名称及描述。

  4. 配置不同环境的数据库连接信息,包括hostport、数据库名称、用户名和密码。自定义参数中支持使用serverTimezone指定数据库时区,例如使用GMT%2B8指定东八区。

    image

    说明

    自定义参数需要使用 URL 编码,例如GMT+8需要使用GMT%2B8

  5. 若账号下已有阿里云 RDS 数据库,可选择“从当前云账号录入”,快捷选择已有的数据库资源。

image

  1. 点击“确定”以创建数据库集成。

2. 在应用内部创建集成操作

  1. 打开“代码”面板,点击对应作用域的“+”后选中“集成操作”。

    image

  2. 选择之前创建的数据库集成作为资源,输入 SQL 查询语句后,根据需求,选择集成操作的触发方式。

image

  1. 点击“运行”预览查询效果。

应用发布

在搭建完成后,您可以通过设计器右上角的「发布」按钮将应用发布到「开发环境」或「生产环境」,发布成功后可以访问链接尽情体验 ~

image


http://www.ppmy.cn/devtools/166974.html

相关文章

Spring 事务失效的 8 种场景!

在日常工作中,如果对Spring的事务管理功能使用不当,则会造成Spring事务不生效的问题。而针对Spring事务不生效的问题,也是在跳槽面试中被问的比较频繁的一个问题。 点击上方卡片关注我 今天,我们就一起梳理下有哪些场景会导致Sp…

Flutter 常用组件大全

Flutter 常用组件大全 Flutter 提供了丰富的组件来构建 UI,以下是常见的组件,按 功能类别 分类。 1️⃣ 基础布局组件 组件作用示例Container盒子容器,支持装饰、边距、大小Container(width: 100, height: 100, color: Colors.red)Padding内…

MySQL 技术浅析(聚簇索引、UndoLog、RedoLog、MVCC)

MySQL 核心技术深度解析 一、聚簇索引与非聚簇索引 1. 聚簇索引结构 存储方式 InnoDB 中,聚簇索引的叶子节点直接存储完整数据行,数据按主键值物理排序存储。 主键索引即数据文件,非叶子节点存储主键范围和子节点指针数据行与主键索引绑定&…

JavaScript class

1. 抽象类 抽象类定义之后不能被实例化,只能被继承,抽象方法定义之后,必须由继承类实现 abstract class Animal {name: string;constructor(name) {this.name name;}abstract say():void }class Dog extends Animal {constructor(name) {s…

小程序酒店:如何实现智能预订与在线支付?

在移动互联网快速发展的今天,酒店行业面临着前所未有的机遇与挑战。用户需求日益多样化,市场竞争愈发激烈,传统酒店预订方式已经难以满足现代消费者的需求。而小程序作为一种轻量化、便捷化的移动应用形式,正在成为酒店行业数字化转型的重要工具。通过小程序开发,酒店可以…

用DasViewer的时候3Dtiles 转osgb 可以直接指定目标坐标系吗?

没有指定坐标系选项,可以转换后,再进行一次坐标系转换。 DasViewer是一款免费极速实景三维模型浏览器,采用多细节层次模型逐步自适应加载技术,让用户在极低的电脑配置下,也能流畅的加载较大规模实景三维模型,提供方便快捷的数据浏览操作。 目…

从零开始的python学习(五)P75+P76+P77+P78+P79+P80

本文章记录观看B站python教程学习笔记和实践感悟,视频链接:【花了2万多买的Python教程全套,现在分享给大家,入门到精通(Python全栈开发教程)】 https://www.bilibili.com/video/BV1wD4y1o7AS/?p6&share_sourcecopy_web&v…

QQuick-Binding的介绍

QQuick-Binding的介绍 Binding的概述 属性绑定:在qml中两个对象的属性和属性之间可以形成依赖,直接属性绑定 如 width: parent.width; 即 对象宽度 与父对象的宽度进行绑定;除了默认的属性绑定,还可以通过Bingding对象建立显示的…