2分钟上手、3小时学会无代码软件开发案例-客户通信录

客户通讯录项目

＊开发一个移动端应用，用来访客拍照保存，并记录访客详细信息

开发步骤

主要有5个大步骤：

步骤一：创建新项目后调整默认主页

步骤二：设计一个提交表单来保存访客信息

步骤三：拍照

步骤四：保存说客信息和照片

步骤五：显示保存的信息

开发的项目案例下载---可以网盘下载案例导入开发工具对应操作演示进行学习

打开开发工具创建项目准备开发

运行TERSUS开发工具，Windows系统中选名称为Tersus Visual Programming Platform的程序; Mac电脑中运行Tersus程序

· 如果是第一次运行程序，则会显示一个欢迎使用的页面，显示如何快速开发一个项目，在页面中添加按钮，弹出“Hello World”的一个信息弹窗；关闭此页面后才能进入项目开发

· 注意如果是WIN10系统，需要以管理员方式打开TERUS软件进行无代码软件开发，否则会有一个如下的弹窗，提示“Workspace”---开发工具默认的项目文件夹---不能访问（在使用中或不能生成，请选择另一个）

项目文件夹：可以用管理员打开后在工具的菜单栏中选File---Switch Workspace来选择非系统盘的一个文件夹设定为项目文件

新建一个项目，命名为“KEHU”

新建方式：File -> New Tersus Project

弹窗中输入项目名称“KEHU”

项目模板中选“New Mobile Application”

点击“Finish”完成新建

开发区中显示底层系统显示元件：不同模板中有不同的平台显示块，New Mobile Application模板包括**、和**三个显示块

移动端显示块中开发：本项目我们只使用移动端显示块，所以可以删除**和Desktop View**两个显示块，删除时直接选中按删除键，会提示删除对象是项目中唯一对象，是否同时删除项目文件目录中的文件，可以选是彻底删除减少文件冗余内容，然后可以保存项目更新内容：可以点击菜单栏中的Save按钮、或直接按Ctrl+s快捷键、或菜单中选File -> Save来保存

正式开发

双击退开发区中的****显示块进入其内部

有一个默认添加的的名称为“Page1”的页面，对此页面元件重命名为“客户”

· 可以选中页面后按F2快捷键打开重命名窗口，也可以右键单击页面元件，在弹出的菜单中选“Rename”在弹出的重命名窗口中设定名称，输入新名称后窗口中点击“Finish”完成设定

双击“客户”页面元件进入页面内容开发，双击Header页面头部显示栏，将右侧Button名称的按钮改名为“新客户”，删除左侧Prev按钮

此时可以点击开发工具运行按钮

在本地浏览器运行查看开发结果

可以在浏览器中输入http://localhost:8080/KEHU/mobile.html

将在浏览器中显示手机模拟器界面：

此部分开发演示：

设计一个提交表单来保存访客信息

当用户点击主页面右上角的“新客户”按钮时，跳转至一个“添加新客户”名称的信息添加页面，在此页面中放入信息提交元件、输入框子元件用于保存客户信息，如姓名、公司名称等

双击主页面右上角的“新客户”按钮、然后双击“On Click”行为处理元件，这个元件中设计的逻辑是用户点击按钮时程序执行的处理内容

“On Click”行为处理元件中从显示类元件选项板中点选一个

“Page Dialog页”普通移动端页面元件，再次点击“On Click”行为处理元件内部任意位置放入，并命名为“新客户信息”

· 默认在刚放入一个元件时，激活了命名功能可直接输入名称，如果放入后执行了点击或回车等处理，则退出命名状态，元件分配了默认名称，此时可选中元件按“F2”或右键单击选“Rename”来重新命名

双击“新客户信息”页页元件，再双击进入“Content”页面内容显示块元件中，从显示类元件选项板中点选“表单”元件再点击要放置的位置放入

在表单元件上双击，然后其中设计以下内容：

在表单元件内部右键单击，弹出的菜单中选Add Element---Text Labeled Field，命名为“姓名：”（命名方式参考“新客户信息”的命名方式说明），注意加的冒号是中文方式输入的，否，英文部分符号不可以做名称，不能做名称时有自动提示

同上再添加另两个同样的子元件并命名为“职务：”和“公司：”

保存开发内容

此页面设计如下（表单元件各内部子元件拖放放大以方便显看）

然后打开运行的浏览器中的页面，页面自动刷新显示如下：

开发操作演示：

拍照设计

进入客户信息提交的表单元件中，从显示类元件中点选放入一个“Button按钮”元件，并命名为“添加照片”，双击进入按钮的“On Click”行为处理元件中，我们在此设计用户点击按钮时触发调用手机的拍照功能

双击“添加照片”按钮外部表单元件，则进入表单元件内部，从显示类元件选项板中点选“Image图片”元件，放于按钮上方但是三个办玫框元件下部，用于显示拍照所得的照片

双击“添加照片”按钮，再双击进入按钮的“On Click”行为处理元件，从显示类元件选项板中点选“Take Picture拍照”元件放入

以下处理来显示拍照获取的照片：

右键单击“On Click”行为处理元件任意位置，在弹出的菜单中选Add Ancestor Reference---Form，这样添加一个Form的父引用对象，这个父级引用对象中有图片对象，可以将拍照的结果传给图处理的路径变量

连线传值：选项板最上部点选Flow传值流程元件，或英文输入法下按“f”键，选点拍照元件的输出，再连向Form父引用对象的图片下的SRC地址变量完成传值处理

图片下的SRC变量可以点击父级引用对象中图片右上角的“+”号来展开显示，或是双击图片对象来展开

以上传值处理完成后，运行时，拍照的照片实际存放于应用内存中，但有一个地址，这个地址由拍照元件输出，并传入显示图片元件的路径变量中，此时当拍照完成时，就可以刷新显示内容显示照片

拍照并显示的设计开发如下：

保存后打开运行中的浏览器项目页面，会自动刷新显示保存的新开发的内容

注意如查不在手动端运行，则会提示拍照功能不可用，是否选用默认样例图片

此部分开发操作演示：

保存客户信息及照片

使用客户端的存储方式

我们的应用是一个独立的在手机上运行的应用程序，这类应用将数据存储在手机本地，参考“离线应用及本地数据库”一节的说明

为保存数据，我们使用的是浏览器的HTML5的数据库储功能

设计数据结构

双击进入以下元件：/客户/新客户/新客户信息/Header/Button元件

将按钮“Button”改名为“保存”，按钮“Prev”改名为“返回”，双击进入“保存”按钮的“On Click”行为处理元件中，从行为处理类元件中点选“Action普通行为处理元件”，然后点击开发区中左上位置放入并命名为“生成记录”

双击进入“生成记录” 行为处理元件，在此设计包含客户信息内容和图片的数据结构：

“生成记录”行为处理元件内，从数据类型元件中点选“Data Structure数据结构”元件放入，命名为“KEHU”

数据结构中添加4个客户信息元件：

添加一个字符类型数据变量元件，命名为“XingMing”，添加方式为：点选数据类型类的元件中的字符数据类型/变量元件，然后点击“Data Structure数据结构”元件内部即可，放入元件后即输入名称命名

同上添加第二个字符类型数据变量元件，命名为“ZhiWu”

添加第三个字符类型数据变量元件，命名为“GongSi”

添加第四个字符类型数据变量元件，命名为“ZhaoPian”

将父级页面中各输入框的数据传入“KEHU”数据结构

用连线传值元件连接：“新客户信息”页面的父级引用对象/Content/Form/姓名：/Text Field/传至“KEHU”数据结构的“XingMing”元件

用连线传值元件连接：“新客户信息”页面的父级引用对象/Content/Form/职务：/Text Field/传至“KEHU”数据结构的“ZhiWu”元件

用连线传值元件连接：“新客户信息”页面的父级引用对象/Content/Form/公司：/Text Field/传至“KEHU”数据结构的“GongSi”元件

用连线传值元件连接：“新客户信息”页面的父级引用对象/Content/Form/Image/传至“KEHU”数据结构的“ZhaoPian”元件

为“生成记录” 行为处理元件添加一个输出元件，用记执行此段逻辑后返回客户记录：

从元件选项板顶部选“Exit输出”元件，或英文输入法时快捷键“e”来选中元件

然后在“生成记录” 行为处理元件右侧边框中间再次点击添加一个输出元件

添加一个连线传值，将“KEHU”数据结构连至刚刚添加的输出元件

开发完成的“生成记录”行为处理元件如下：

保存数据结构内容

现在设计保存全部客户信息的数据结构

右键单击“KEHU”数据结构，在弹出的菜单中选“Copy”

双击元件外部，一路退回到“”中的“客户”页面元件中，从数据类型类元件中点选“Data Structure”数据结构变量放入，并命名为“KEHU LieBiao”，这个数据结构中将置所有添加的客户记录

在“KEHU LieBiao”数据结构中添加“KEHU”数据结构（在刚添加的数据结构中右键单击在弹出的菜单中选“Paste”(Reuse)来添加前面复制的“KEHU”数据结构），同时“KEHU”数据结构改为复数状态（选中后英文输入法下用快捷键“r”，或右键单击数据结构，在弹出的菜单中选“Repetitive”）

设计保存全部客户信息的逻辑

将添加新客户页面保存时生成的客户记录进行保存处理：

双击进入以下元件：/客户/新客户/新客户信息/Header/保存/On Click

从选项板行为处理元件类元件中点选“Action普通行为处理”元件，或在英文输入法下用快捷键“a”调用元件，点击放入“On Click”中，命名为“保存客户信息”；添加一个输入元件---用快捷键“t”或点选元件选项板顶部的“Trigger输入”元件的方式添加，命名为“jilu”；将之前开发的“生成记录”的输出用连线传值至“jilu”输入元件

双击进入“保存客户信息”行为处理元件，添加一个“客户”页面的父级引用对象：在“保存客户信息”行为处理元件内右键单击在菜单中选Add Ancestor Reference---客户，即可添加成功，并将“jilu”输入元件连线传值至“客户”页面的父级引用对象中的“KEHU LieBiao”中的“KEHU”数据结构对象

以上完成的设计在运行时，会将客户信息存入应用的“KEHU LieBiao”数据结构对象中，但是这个只是在运行时的程序的内存中保存，我们需要将这些信息存入浏览器的本地存储中：

在“保存客户信息”行为处理元件中，添加一个名称为“保存客户信息列表”的行为处理元件，并添加一个“列表”的输入元件

将“客户”页面的父级引用对象中的“KEHU LieBiao”连线传值至“保存客户信息列表”的“列表”的输入元件

双击进入“保存客户信息列表”的行为处理元件，添加一个“客户列表”名称的字符常量---在元件选项板中常数常量类型元件中点选字符常量元件，点击开发区需要的位置放入，并命名为“客户列表”；添加一个“Create Json生成Json文本”元件---从集成功能类的元件中点选放入开发区；添加一个“Store保存”元件---从显示行为类的元件中点选放入开发区，按如下图示连线传值处理：

生成Json文本生成的是“客户列表”数据结构全部信息的字符内容

保存处理是将生成的字符内容存入浏览器的存储系统中

这是一个有效存储方式，但不能用于大量数据的保存处理

存储管理的最后一步是在用户点击保存并由程序执行完存入信息的处理后，关闭“新客户信息”页面，返回显示程序的“客户”主页面：

双击“保存客户信息列表”的行为处理元件外部，退出至保存/On Click，添加一个“Close Window关闭窗口”元件---从显示行为类的元件中点选放入开发区

右键单击“保存客户信息列表”的行为处理元件，在弹出的菜单中选Add Element---，这个是当逻辑处理完成时输出一个空值

右键单击“Close Window关闭窗口”元件，在弹出的菜单中选Add Element---Control，这个是当有任意对象包括空值传入时，触发半闭此关闭窗口元件所在的页面或弹窗等窗口

将以上两步添加的输出和输入元件连线来完成流程控制---当保存客户信息执行完成后关闭添加客户信息页面

保存以上开发内容后，返回至浏览器运行的项目页面，页面会自动刷新加载最新开发结果

此时，如果在添加客户信息页面输入一些信息，点击“保存”按钮，信息就会在本地保存，下次打开应用时保存信息依然有效

主页面列表显示客户信息

当我们点击“新客户信息”页面右上角的保存按钮执行完保存新客户信息后，返回显示程序的“客户”主页面，此时主页面还是空的，我们将在此设计主页面内容显示逻辑

双击进入移动端显示块中的“客户”页面，双击进入“Content”页面显示内容元件

双击进入“Content”中“List”列表显示元件，列表显示元件中默认有一个复数状态的列表项目元件，名称为“List Item 1”，重命名为“列表项目”

在“List”列表元件中，我们设计页面显示同时进行一个逻辑处理来获取全部客户信息再显示到列表显示元件中：

在“List”列表元件中添加一个“显示客户信息”的行为处理元件---从行为处理类元件中点选“Action普通行为处理”元件，或英文输入法下快捷键“a”，然后点击开发区中任一位置放入，同时命名为“显示客户信息”

双击进入添加的“显示客户信息”行为处理元件，同样方式添加两个行为处理元件，分别命名为“获取全部客户信息”和“转换显示信息”；为“获取全部客户信息”添加一个“客户列表”输出元件---从元件选项板顶部点选输出元件或英文输入法下快捷键“e”，再次点点“获取全部客户信息”的右侧边框线中间任意位置添加输入元件；同样方式为“转换显示信息”添加“列表项目”输出元件和“客户信息”输入元件各一个

在“显示客户信息”行为处理元件中添加一个“客户”页面的父级引用对象---在“显示客户信息”行为处理元件内右键单击在弹出菜单中选Show in Repository Explorer，会在左侧项目目录中定位到“客户”页面元件，拖入开发区即是重复调用此元件或叫复用此对象

双击退回“客户”主页面，右键单击“KEHU LieBiao”数据结构，弹出菜单中选“Copy”，再双击进入“显示客户信息”行为处理元件，右键单击任一位置在弹出的菜单中选“Paste（Resue）”来利用此对象，将“获取全部客户信息”的“客户列表”输出元件线连传值（快捷键“f”）至上一步复用的“KEHU LieBiao”数据结构

将“KEHU LieBiao”数据结构连线传入“客户”页面的父级引用对象中的“KEHU LieBiao”数据结构，运行时即将获取的客户信息全部存入此数据结构的内存中；再将“KEHU LieBiao”数据结构中的“KEHU”数据结构传入“转换显示信息”的“客户信息”输入元件，将“转换显示信息”的“列表项目”输出元件和“客户”页面的父级引用对象中的列表中的“列表项目”复数状态子元件对象

至此开发的内容为：

设计获取全部客户信息的处理逻辑

双击进入“获取全部客户信息”行为处理元件，在此设计从浏览器本地存储中提取保存的数据，对应的是“新客户信息”页面中的保存按钮中的存入数据处理逻辑

复制在“新客户信息”页面中的保存按钮中的存储逻辑中“客户列表”名称的字符常量，然后在此进行复用（可以在项目目录中找到常量拖入复用）

添加一个“Retrieve读取本地键值”元件---从显示处理类元件中点选元件，然后在开发区点击放入，将“客户列表”名称的字符常量连线传入输入元件，这样就是从本地存储中提取存入的信息数据的json文本

添加一个“Parse Json生成Json数据可视化对象”元件---从集成功能类元件中点选元件，然后在开发区点击放入，将“Retrieve”元件的输出元件与“Parse Json”元件的输入元件连线传值，再将“Parse Json”元件的输出元件连线传值到“获取全部客户信息”的“客户列表”输出元件

开发区中开发内容为：

数据结构中的信息显示到列表

双击进入“转换显示信息”行为处理元件，在此设计客户信息记录数据结构转为显示内容的处理逻辑，注意每一条记录处理一次，输入多少记录，处理多少次，此时应将此处理元件转为复数状态---选中元件，右键单击在弹出的菜单中选“Repetitive”或在英文输入法下点击快捷键“r”

从目录中找到“客户信息”输入元件对应的“KEHU”数据结构---右键单击输入元件，在弹出的菜单中选Show in Repository Explorer，会在项目目录区定位到添加的选中元件，拖入开发区左侧，将“客户信息”输入元件连线传至拖入的“KEHU”数据结构

同上方式找到“列表项目”的项目目录中已添加元件，拖入开发区右侧，并连线传至“列表项目”输出元件

将“KEHU”数据结构的子元件变量值传入“列表项目”显示元件的显示值中：

“KEHU”数据结构的“XingMing”变量连线传至“列表项目”下Details下的Title的值变量中

“KEHU”数据结构的“ZhiWu”变量连线传至“列表项目”下Details下的Description的值变量中

“KEHU”数据结构的“ZhaoPian”变量连线传至“列表项目”下图片的路径变量中

开发区中开发内容为：

保存数据后自动刷新“客户”页面显示最新全部客户信息

我们还需要设计一个逻辑，在“添加新客户”信息页面的“保存”按钮点击后，执行信息保存到本地存储并关闭“添加新客户”信息页面后，对显示的主页面内容进行刷新，这样就会在主页面中显示最新添加的客户信息

双击进入以下元件：/客户/新客户/新客户信息/Header/保存/On Click

添加一个名称为“刷新客户信息列表”的行为处理元件---从行为处理为的元件中点选“Action”普通行为处理元件或英文输入法下快捷键“a”，然后点击开发区On Click的右上，命名为“刷新客户信息列表”

为“刷新客户信息列表”右键单击在弹出的菜单中选Add Elements---Control，这样添加一个控制输入元件，将“保存客户信息”的输入元件连线至“刷新客户信息列表”的控制输入元件，这样就是保存信息完成后，进行“刷新客户信息列表”的逻辑处理

双击进入“刷新客户信息列表”，添加一个“客户”页面的父级引用对象---在“显示客户信息”行为处理元件内右键单击在弹出菜单中选Show in Repository Explorer，会在左侧项目目录中定位到“客户”页面元件，拖入开发区即是重复调用此元件或叫复用此对象

添加一个“Refresh刷新”元件，将“客户”页面的父级引用对象连线传值至“Refresh刷新”元件的“Element”输入元件

运行测试

我们打开浏览器中运行的项目页面，如果未打开，则可以点击开发工具的

运行按钮重新加载打开

可以输入内容进行测试

功能拓展

为了让此应用更加实用，可以需要开发更多功能：

主页面显示公司名称，也可以设计在“转换显示信息”逻辑中添加将姓名和公司名合并为一个字符串中间用空格隔开然后传入显示项目的标题值中

添加一个修改客户信息的功能，比如在列表项目的图片中添加一个名称的行为处理元件，然后放入修改客户信息页面，用户点击客户照片就可以弹出修改页面

添加删除客户信息的功能

信息保存在服务器端的数据库中

添加不同类型页面显示不同类型客户信息，可以筛选查询客户信息

更多功能...

*****

本文为TERSUS无代码开发手册文章，供参考学习使用，在有需要详细了解对应内容时细看学习，敬请关注并转发文章

参考我们手册第一个文章中的2分钟的计算器功能的拖放连线开发演示，可学会无代码开发是如何开发软件的

想学无代码软件开发的学员请先学习3小时免费教学视频，3小时内可学会开发并开发出一套管理软件系统，然后看手册及其他视频来进阶提高快速成为高级开发人员