开始使用应用程序构建
  • 22 Sep 2022
  • 1 分钟阅读
  • 贡献者

开始使用应用程序构建


欢迎来到郁金香

本文将引导你了解入职经历,并分享资源,以帮助你迅速开展工作。

欢迎来到Tulip!

Tulip是一个为一线运营的独特需求而建立的无代码平台。有了Tulip,你可以为你最棘手的生产挑战设计出强大的、可组合的解决方案。本指南将重点介绍Tulip平台的基础知识。我们将回顾关键功能、位置和概念,并一起建立一个简单的 "Hello World "应用程序。

::(信息)(注意:)
这篇文章假设你能访问一个Tulip实例。如果你没有,你可以通过开始免费试用{target="_blank"},或联系为你的组织管理Tulip访问的个人或团体来获得访问权。
:::

帮助你学习的资源

在我们进一步讨论之前,让我们介绍一些关键的资源,你可以在熟悉Tulip的过程中使用。

知识库{target="_blank"}

知识库是一个文章、视频和文档的集合,帮助你学习如何使用Tulip。如果你正在阅读这篇文章,你已经找到了它。不错!

按照左侧导航的文件结构,或使用搜索栏来寻找与你需要更多信息的任何主题相关的内容。

郁金香大学{target="_blank"}

郁金香大学是一个免费的、按需学习郁金香的资源。郁金香大学包含数十个课程、认证和应用建设挑战,以帮助你将你的应用建设提高到新的水平。通过报名参加Tulip Essentials{target="_blank"}迈出第一步,通过Tulip Challenges练习你的技能,并通过成为Tulip Certified App Builder{target="_blank"}分享你的成就。

图书馆{target="_blank"}

郁金香图书馆是一个由郁金香专家开发的即用型内容的集合。你会发现大量的内容让你开始工作,从完整的应用程序和应用程序套件到模板、自定义小部件和连接器。

社区{target="_blank"}

有问题但在知识库或大学里找不到答案?有一个可以让你的生活轻松100倍的功能想法?需要一种方法来了解Tuliverse的最新和最重要的信息?请查看郁金香社区。

郁金香社区是一个活跃的在线论坛,用户可以发布问题,进行讨论,并帮助彼此使用郁金香来解决他们的问题。

熟悉情况 - 快速浏览你的实例

让我们从快速浏览你的实例开始。就本概述而言,你应该知道如何在Tulip中找到5个关键位置。

  • 应用程序和应用程序编辑器
  • 桌子
  • 商店楼层
  • 仪表板
  • 账户设置

我们可以依次看一下。

应用程序和应用程序编辑器

应用程序页面

当你登录到你的账户时,你会发现自己在应用程序主屏幕上。在这里,你可以查看和管理你实例中的所有应用程序。

Screen Shot 2022-09-19 at 3.13 1 (5).png

要找到这个页面,请将鼠标悬停在顶部导航的 "应用程序 "上,然后点击下拉菜单中的 "应用程序"。

Group 1 (1).png

应用程序主屏幕和应用程序编辑器

应用程序编辑器是你进行构建应用程序工作的地方。要进入应用程序编辑器,你可以选择一个现有的应用程序或创建一个新的。点击进入你的应用程序。在这个屏幕上,你可以查看应用程序的完成数据,管理应用程序的{{glossary.Permission}}s和{{glossary.Approval}}s,并发布应用程序的版本。

Group 13 (1).png

点击该菜单中的任何一个步骤,你就会被带入应用程序编辑器。

app editor 4 (1).png

现在我们在这里,让我们评估一下我们看到的情况。有几个关键领域,你会发现自己在工作。

::(信息)(注意:)
关于应用程序编辑器的深入参观,请查看这篇文章
:::

让我们回顾一下应用程序编辑器中的4个关键工具。

  • 拖放界面
  • 工具栏
  • 上下文窗格
  • 步骤和记录窗格

拖放界面

在屏幕的中央,你有你的拖放界面--你的白板。

Group 2 (1).png{height="" width=""}。

这是你要设计用户界面的地方。在这里,你将嵌入部件,创建互动元素,并组织用户与你的应用程序互动所需的所有信息和功能。

工具栏

在你的画布上方,你会看到一系列的下拉菜单,我们称之为工具条。使用这些菜单来添加文本、输入和其他Widget到你的应用程序。

Group 3 (2).png

上下文窗格

在右边,你会发现上下文窗格,在这里你可以配置应用程序、步骤和小工具的细节。在这里,你可以向应用程序添加逻辑,管理应用程序级别的设计设置,并调整你添加到应用程序中的小部件。

Group 15.png

步骤和记录窗格

最后,在左边的窗格中,你将为你的应用程序添加新的步骤,并管理你的应用程序所连接的表格。

Group 5 (1).png

表是你建立的自定义数据库,用于存储你的应用程序所收集的数据。

Screen Shot 2022-09-19 at 3.09 1.png

表格在Excel等电子表格工具和成熟的关系型数据库之间找到了一个合适的媒介,允许你根据自己的感觉来构建一个简单或复杂的数据模型。

::(信息)(注意:)
如果想快速了解用表格构建应用程序的情况,可以试试大学里的"构建一个简单的数据输入应用程序{target="_blank"}"课程。在知识库{target="_blank"}的其他地方也广泛涉及到了表。
:::

要找到表格,请浏览顶部导航中的 "应用程序 "标签,并从下拉菜单中选择 "表格"。

在 "表格 "主屏幕上,你可以选择查看现有的表格,或创建一个新的表格。

底层商店

车间选项卡用于管理与你的郁金香实例相关的站台和物理设备。在 "车间 "选项卡下,你可以找到创建和管理工位、管理边缘设备、机器和Tulip Vision等选项。

Group 6 (1).png

现在,让我们把重点放在 "工位 "上。当你点击 "站 "时,你会被带到一个页面,在那里你可以创建站并为它们分配应用程序--这是出版工作流程中的关键步骤。

::(信息)(注意:)
你可以在知识库郁金香大学{target="_blank"}中了解更多关于站点的信息。
:::

当你准备将你的成品应用程序转移到生产中时,你会与这个页面进行更多的互动。

仪表板

当你开始建立分析,它们会出现在你的实例的 "仪表板 "部分。通过点击顶部导航中的 "仪表盘 "选项来浏览这里。

你可以把仪表盘看作是分析的集合。你可以根据你想要的任何逻辑来组织你的仪表盘。

Group 7 (1).png

重要的是,仪表盘可以导出为一个URL,并与任何人分享--无论他们是否有一个郁金香账户。

这使你能够与你组织中的任何人分享你的结果和指标。

帐户设置

你的账户设置可以通过点击你的Tulip实例右上角的图标进行访问。在这里,你可以访问的选项将根据你的权限级别而有所不同。

Group 8 (1).png

郁金香播放器

郁金香最重要的部分之一--郁金香播放器--并不位于你的网络实例中。

郁金香播放器是一个专门为运行应用程序而设计的应用程序。它可以在多个操作系统的许多设备上运行。最重要的是,它需要被下载到你想运行应用程序的任何设备上。

要下载Tulip Player,请点击此链接。关于安装和配置说明,请查看这里

构建应用程序

现在你可以在你的实例中找到你的方式,让我们来上一个构建应用程序的速成课程。没有比一起建立一个应用程序更好的方法了。所以拉起你的实例,让我们一起建立一个 "Hello World "应用程序。

创建一个新的应用程序

我们需要做的第一件事是创建一个新的应用程序。要做到这一点,使用顶部导航中的 "应用程序 "菜单导航到平台的 "应用程序 "部分。

一旦到达那里,点击右上方的 "创建应用程序"。然后会有一个模式提示你,询问你是否想创建一个新的应用程序或从一个模板开始。我们鼓励你使用不同的模板,但现在,让我们点击模版右下方的 "创建",从一个空白应用程序开始。

ezgif-4-42b23129c0.gif

你将被引导到应用程序的主屏幕,在那里你将管理这个应用程序的设置,继续前进。点击左上方 "Untitled App "旁边的铅笔,将你的应用程序命名为 "Hello World"。然后,点击任何一个步骤,你就会被带到应用程序编辑器。

构建一个 "Hello World "应用程序

我们可以将应用程序的构建过程分成几个关键步骤,在你使用Tulip的整个过程中,你将在不同的规模和复杂程度上复制这些步骤。

  • 用户界面设计
  • 添加逻辑
  • 测试

我们将尽可能保持简单,只专注于设计一个基本的界面,添加一行逻辑,并使用开发者模式测试我们的应用程序。

设计一个应用程序的用户界面

你的用户界面是你的应用程序的各个步骤中的图形和交互元素的安排。设计一个好的用户界面对于使你的用户能够成功地与你的应用程序互动是至关重要的。

::(信息)(注意:)
用户界面设计在郁金香大学{target="_blank"}中有深入的介绍。
:::

现在,让我们保持它的基础。我们将为我们的用户界面添加4个元素。

  • 一个用于创建标题栏的形状
  • 一个显示应用程序名称的变量
  • 一个菜单按钮
  • 一个在点击时显示 "Hello World "信息的按钮

设计一个基础布局

基础布局是应用于你的应用程序中的每一步的设计模式。

我们将设计我们的用户界面作为我们应用程序的基础布局。

要访问Base Layout,请点击App Editor左下方的 "Base Layout "文字。当文本后面的背景显示为浅蓝色时,你就知道你正在编辑基础布局。

Group 9 (1).png

要添加你的标题栏,请导航到工具栏中的资产菜单,并选择 "矩形 "选项。如果它不是立即可见,使用搜索栏搜索 "矩形"。

当你点击 "矩形 "时,你会发现一个形状被添加到你的应用程序编辑器的沙盒区域。点击该形状来选择它。在右边的窗格中,你会看到调整资产设置的选项。将颜色改为深灰色。调整小组件的设置,使其尺寸为1920w x 100h,或者简单地将其拖到合适的位置,使其横跨你的应用程序的顶部。

在顶部导航中添加一个步骤名称

当用户访问我们的应用程序时,我们希望该应用程序显示他们当前使用的步骤的名称。在这种情况下,我们希望我们的应用程序在我们刚刚创建的顶部栏上显示 "Hello World"。

要做到这一点,请点击工具栏上的 "文本 "菜单,并从下拉菜单中选择 "变量"。或者,你可以使用键盘上的快捷键,直接按 "V"。

Tulip中的变量是数值的占位符。当你选择显示一个变量时,你的应用程序将显示当前存储在该变量中的任何值。

为了访问该步骤的名称,我们需要配置我们的变量。

确保嵌入式变量被选中,并导航到右侧面板上的部件窗格。在 "数据源 "下,选择 "应用程序信息"。从 "选择应用程序信息 "的下拉菜单中选择 "步骤名称"。

把你的变量拖到顶栏的位置上。你可能希望改变文本的颜色,使其在深色背景下更易读。

或者,你可以简单地从工具栏的文本菜单中添加一个 "步骤名称"。

我们需要做的最后一件事是命名我们的步骤。双击左边步骤窗格下的 "无题步骤",将你的步骤重新命名为 "Hello World"。

添加一个菜单按钮

使用工具栏上的 "按钮 "菜单,为你的应用程序添加一个菜单按钮。把它拖到顶栏的左上角或右上角。

重要的是,在你的应用程序中,每一步都可以访问一个菜单按钮,以便用户可以改变、取消或暂停他们的应用程序。

添加一个Hello World按钮

使用工具栏上的 "按钮 "菜单,为你的应用程序添加一个按钮。把它放在你的布局的中心。

我们将在下一节为这个按钮添加逻辑。

给应用程序添加逻辑

触发逻辑是使应用程序变得聪明的原因。它是将幻灯片软件与你将在Tulip中建立的动态、响应式应用程序区分开来的原因。

Tulip中的逻辑结构

Tulip中的逻辑语句遵循相同的模式。WhenIfThen

Group 10 (1).png

一个事件发生时,如果满足或不满足某些条件,那么应用程序就会执行指定的动作。

我们的 "Hello World "应用程序的触发器将遵循这个相同的结构。

当用户按下一个按钮时,应用程序将显示 "Hello World "的信息。我们不会在这个触发器中加入任何条件语句。

在Tulip中添加触发器的地方

在Tulip中,逻辑是与事件相关的。用户按下一个按钮,机器状态的改变,或者扫描条形码都是事件的例子。在Tulip中,有几个常见的位置你会添加触发器。

  • 到小部件,如按钮和交互式表格
  • 在步骤中,用于 "在步骤打开时 "或 "在步骤关闭时 "或 "当设备启动时 "这样的操作
  • 在应用程序中,用于 "当应用程序打开时 "这样的动作
  • 建立你的第一个触发器

让我们来写第一个触发器。

我们的触发器要做两件事。

  1. 在一个变量中存储一串文本
  2. 显示一条包含该变量的信息

当你完成后,它应该是这样的。

Screen Shot 2022-09-19 at 2.08.45 PM.png

继续前进,选择你放在用户界面中间的按钮。一旦你选择了小组件,在上下文窗格中找到标有 "触发器 "的文件夹,点击加号来添加一个触发器。这将弹出触发器模式。

给你的触发器起个名字,比如 "Print Hello World"。

因为这个触发器是连接到一个按钮上的,所以我们的WHEN语句已经帮我们处理好了。当按钮被按下时。

所以我们的任务是编写我们的动作语句,即THEN。让我们先把一串文本存储到一个变量中。

点击 "添加新动作"。使用下拉菜单,选择 "数据处理",然后是 "存储"。通过这个动作,我们需要指定我们想存储的数据,以及存储的位置。使用 "数据:"后的下拉菜单选择 "静态值",然后选择 "文本"。我们将把我们的信息放在这个静态值中。在输入字段中,写下你的信息,"Hello World"。

这个触发器的下一个部分是确定 "位置:",或者说你的数据将被储存在哪里。从下拉菜单中选择 "变量",然后选择创建一个新变量。给你的变量起个名字,比如 "Hello World Variable",然后点击绿色复选。

几乎完成了。我们需要做的下一件事是在一条信息中显示我们的变量。我们将在我们的触发器中创建另一个动作来做这个。

所以点击 "添加新动作",从下拉菜单中选择 "显示消息"。我们需要做的最后一件事是指定消息中的数据。由于我们已经创建了一个变量,你可以从下拉菜单中选择 "变量",然后选择你的 "Hello World "变量。

保存你的触发器。现在你已经准备好测试你的应用程序了。

测试你的应用程序

在设计过程的任何时候,你都可以使用应用程序编辑器中工具栏右侧的 "测试 "按钮来测试你的应用程序。这将打开开发者模式,这是一个沙盒环境,允许你在不危及生产数据或系统的情况下测试应用程序。

Group 17.png

一旦你打开了开发模式,你就可以测试你的应用程序。点击 "开始",然后按下你的按钮。你应该看到屏幕底部显示的信息是 "Hello World"。

发布你的应用程序

在你把你的应用程序推入生产之前,你需要发布该应用程序。这将创建你的应用程序的只读版本,你可以在一个站点访问。

应用程序被发布为版本。每当你对应用程序进行修改时,你需要发布一个新的版本,以便在播放器中访问你最近的修改。这有助于变更管理,并确保只有经过批准的版本和修改才能进入生产。

Group 16.png

要发布你的应用程序,请回到应用程序编辑器。点击屏幕右上角的 "发布 "按钮。这将会出现一个模态,提示你对这个版本的变化进行评论。添加任何你想要的评论。当你开始大规模工作时,评论会更加重要,但现在你可以保持简单。然后,点击 "发布版本1"。

你用郁金香建立的东西

Tulip是一个非常灵活的解决方案。因为它是一个真正的平台,你可以建立的应用类型没有限制。这就提出了一个重要的问题。我应该用Tulip构建什么?

当然,答案取决于你的操作需求。许多用户对Tulip有具体的目标,例如。

  • 减少手工装配操作中的错误
  • 跟踪机器的正常运行时间和停机时间
  • 增加对生产的可视性
  • 简化高混合环境中的产品谱系

这些具体的业务目标可以很容易地转化为一个应用程序或一系列的应用程序,以提供所需的结果。我们通常用用例来指代这些应用集,或者说他们帮助解决的具体业务挑战。解决上述业务目标清单的用例是。

  • 数字工作指令
  • 机器监控
  • 生产跟踪
  • 可追溯性和家谱

这些项目的范围可以从单个单元的单个工位上的有针对性的质量检测应用,到整个制药生产操作的大规模电子批次记录解决方案。通常情况下,郁金香的客户从一个简单的用例开始,提供快速的价值并建立能力,随着他们对郁金香的舒适度增加,扩大他们的解决方案。

::(信息)(注意)
这个{target="_blank"}中了解如何挑选你的第一个用例。郁金香大学课程。
:::

这里的基本收获是,同样的Tulip基本功能可以用来设计任何你能想象到的应用,以应对你可能面临的任何运营挑战,在任何规模下都可以。

通过学习Tulip的一些关键功能,你将使你的团队有能力为你今天、明天和明年的最棘手的挑战设计软件解决方案。


本文对您有帮助吗?