使用码匠，您可以通过拖拽组件、连接数据源和创建查询来快速搭建内部应用。开始之前，需要先了解应用编辑界面。如下图，主要包括五个区域：

1. 工具条
2. 画布
3. 数据浏览器
4. 查询编辑器
5. 属性/组件面板

工具条

工具条分为顶部工具条和左侧工具条两部分。

顶部工具条中间的三个小按钮用于控制显示或隐藏数据浏览器、查询编辑器和属性/组件面板。此外，顶部工具条还支持：

• 应用重命名
• 导出应用为 JSON 文件
• 预览、发布、分享当前应用
• 浏览应用历史版本

左侧工具条支持：

• 显示或隐藏数据浏览器
• 设置画布尺寸和应用主题
• 管理 JS 脚本和 CSS 样式
• 获取帮助（新手引导、联系客服、快捷键列表、更新日志等）

画布

可视化应用将在画布中搭建，通过拖拽码匠提供的 UI 组件到画布中并进行组合，可搭建能实现您所需功能的应用。

所见即所得的画布可以让您轻松地新增组件和调整 UI 布局，下图是一个网站管理后台的例子。

数据浏览器

在数据浏览器面板，您能以树形结构查看组件、查询和全局变量内部的数据。您如果不确定查询或组件实际返回的是什么数据，那么可以在数据浏览器面板展开具体数据：

查询编辑器

查询编辑器面板用以创建应用所必要的查询，查询是连接您的数据库或者 API 和应用的桥梁。通过创建查询，可以对数据进行创建、读取、更新和删除操作。

属性/组件面板

从属性/组件面板插入需要使用的组件——选择组件，将其拖放到画布上（如下左图）。使用多个组件可以搭建可交互的应用。

当用光标选中画布中的某一组件时，该面板自动切换为该组件的属性设置面板，在该面板可以对组件的数据、样式等进行调整（如下右图，展示了表格组件的属性面板）。