1.概述
SAP WEB IDE的简单使用和Build项目导入
2.登录 SAP Cloud Platform
2.1 登录
使用账号登录https://account.hanatrial.ondemand.com(没有账号先注册),点击Neo试用,跳转到图.1-2
图.2-1
图.2-2
3.在SAP Cloud Platform中打开SAP Web IDE
3.1 您现在应该位于SAP Cloud Platform Cockpit中，如下所示。点击左边的服务菜单项
图.3-1
如果上图的IDE那里显示未启用,则点击SAP Web IDE进入详情页面,点击左上角的启用即可.
图.3-2
3.2 在SAP Web IDE屏幕中，您将看到一个名为“采取措施”的段落。在该段落的底部，有一个名为转到服务的链接。点击此链接
图.3-3
图.3-4
注意:记得把网址收藏起来,以后可以直接使用.
4.新建一个SAPui5项目
4.1 点击左上角的File->New->Project from Template
图.4-1
4.2 选择SAPUI5 Application,然后Next
图.4-2
图.4-3
注意:这里的namespace可以不填,因为web ide会默认把你的project Name和Namespace拼到一起做一个根路径,
图.4-4
输入view Name,然后点击finish即可
图.4-5
默认建成的项目如下:
图.4-6
5.SAP BUILD的使用
SAP Build是一款基于云的协作设计工具，提供知识，工具和灵感来创建用户喜爱的漂亮应用。亲眼看看使用SAP Build来学习设计思维，创建交互式原型，收集用户反馈以及在不编写单行代码的情况下快速开始开发是多么容易。借助SAP Build，根据SAP Fiori设计指南可以轻松创建，设计和开发应用程序。《摘自SAP官网》
5.1 注册一个账号
a.点击链接进入https://standard.build.me/,因为是国外网站,所以有时候可能访问失败,多试几次就好了.
b.点击右上方sign up按钮,如果已有账号直接登录即可
图.5-1
c.输入邮件地址,点击proceed
图.5-2
d.输入对应信息,点击注册
图.5-3
e.根据指示,到邮箱里激活你的账号
f.返回到SAP Build主页，点击登录。提供您在前面的步骤中创建的凭据。
g.成功登录后，您现在可以看到更多的SAP Build工具，包括您的工作区和项目。
图.5-4
5.2 创建低保真SAP Build原型
使用SAP Build将您的应用程序想法草图变成低保真原型。
a.点击右中角的new project
图.5-5
b.点击create new project
图.5-6
c.在新建项目页面输入名称和描述。
图.5-7
d.绘制你的应用程序。使用笔和纸或电脑工具画出你想创建3个屏幕。如:
1.产品清单
2.产品细节
3.订单细节
图.5-8
图.5-9
图.5-10
e.在您的BUID项目中，选择您也可以做什么部分下的上传文件磁贴。
图.5-11
f.您可以点击上传链接，也可以将文件拖入空间以开始上传.上传完成后,可以看到上传列表.
图.5-12
g.通过单击菜单栏中的文件下拉菜单切换到原型模式。从选项列表中选择原型。
图.5-13
h.您可以使用文件工具来使用刚上传的文件来创建原型。点击链接。
图.5-14
i.按住Shift键并单击文件以多选所有文件。选中所有3个文件后，单击选择。
图.5-15
j.创建热点.
要创建热点，请将鼠标悬停在产品列表图片上。你会看到一个工具提示，说明你如何添加一个热点。
图.5-16
在Flying car上拖动并创建一个热点。创建热点后，您需要设置其导航到的位置。将箭头指向产品详细信息屏幕以完成热点导航。你的原型应该看起来像下面的截图。
图.5-17
在导航箭头和创建订单按钮上添加更多热点。导航箭头返回到上一页，创建订单按钮导航到订单明细屏幕。最终的配置应该看起来像下面的屏幕截图。
图.5-18
k.要预览原型并测试热点，请单击屏幕右上角的眼睛图标。这将切换预览模式。
图.5-19
l.按照前面箭头所示点击您的应用程序，试试低保真原型的导航。
图.5-20
m.如果您需要帮助查找热点，您可以检查顶部工具栏中的显示热点框。如果您需要对应用程序进行更改或完成测试，则可以单击返回到页面地图以退出预览模式。
图.5-21
5.3 创建一个SAP Build原型
.使用SAP Build创建高保真原型。
使用SAP Build的图库和易于使用的拖放界面创建原型应用程序。
a.从顶部菜单栏中选择gallery。这会将您带到可用于SAP Build的所有可用模板应用程序原型的列表。该库允许您快速启动应用程序原型而无需从头开始构建它。
图.5-22
b.选择一个图库应用程序
在图库中，找到搜索栏并键入Inventory
图.5-23
这将过滤掉应用程序列表。从已过滤的列表中选择库存仪表板应用程序。(见图.5-23).
原型概述将为您提供有关包含哪些屏幕及其导航以及包含哪些文件的详细信息。
图.5-24
c.克隆原型
克隆原型将把原型添加到您的项目集合中。一旦收藏，您可以对本地版本进行编辑和修改。
在原型概述中，单击克隆按钮。(见图.5-24中的clone)
验证您是否想要在单击克隆时出现提示时克隆应用程序原型。
图.5-25
克隆完成后，SAP Build会通知您。出现提示时，单击确定在工作区中查看克隆的原型。
图.5-26
d.修改原型
要打开UI编辑器，请点击Prototype部分下的一个屏幕。
图.5-27
在这里，您可以搜索控件，将它们拖放到屏幕上，并修改控件的属性。您也可以重新排序数据并删除不需要的控件。
图.5-28
e.添加一个表格
要将表格添加到主图表区域，请先点击灰色的图表区域。这将选择这个视图。
图.5-29
在左侧，你会找到一个控制列表。在此列表中搜索table。
图.5-30
在List控件类型下找到Table控件,并将控件拖到图表下方.
图.5-31
f.将列添加到表中
您可以从GUI界面自定义控件。要添加列，先左键点击选中,然后右键单击表格中的一列。
这会带来一个本地菜单栏。从选项中选择左侧添加列以创建新列。重复这个动作。你应该有2个新的列。
图.5-32
图.5-33
g.重命名列标题
这些列的名称也可以在GUI中修改。为此，请双击标题名称。
图.5-34
这将突出显示标题名称并使其可编辑。重命名标题以匹配下面的名称。(为了能和后面填充数据名称相对应)
Part ID | Image | Part’s Name | Availability | Demand |
图.5-35
h.将控件添加到表格单元格
在左侧的控件列表中，搜索label。将标签控件拖放到第一列第一个单元格中。
图.5-36
在控制列表中搜索图像。,将图像控件拖放到第二列第一个单元格中。
图.5-37
您可以修改右侧栏中的控件属性。在图像控件的属性窗格中，找到Size属性。将高度（h）从自动更改为50px
图.5-38
i.填充数据
要将数据填充到表中，请在左侧菜单栏中找到“ 数据”选项卡。这将显示此原型的预填充数据源。
图.5-38
选择parts实体并将其拖放到表上。
图.5-39
匹配实体属性的列名将自动映射。您还可以手动将特定字段绑定到控件。要将列绑定到特定字段，请展开数据窗格上的实体以查看可用字段
图.5-40
将图像字段拖放到图像控件。
j.预览视图
要预览最终视图，请单击顶部工具栏中的眼睛图标。
图.5-41
这会向您显示您的原型的“实时”版本。您可以预览您的应用程序原型在桌面，平板电脑和移动设备上的外观。要返回UI编辑器，请单击UI Editor按钮。
图.5-42
k.更改主题
您可以修改SAP Fiori中称为“主题”的整体配色方案。(先返回到UI编辑器)
图.5-43
l.分享你的应用程序(随便一提:只有分享过的程序才能在WEB IDE里面导入)
一旦你的原型完成，SAP Build让你以几种不同的方式共享你的应用程序。要共享您的应用程序，请在用户界面编辑器中点击共享按钮。
图.5-44
一个对话框将弹出一个共享链接，一个Slack集成和一个下载选项。复制链接。
要关闭对话框并返回到UI编辑器，请单击关闭。
图.5-45
将复制的链接在新的页面打开也可查看页面效果.
5.4 在SAP Build中收集用户反馈
.将您的应用程序发送给您的团队以收集和查看SAP Build的反馈。
详情:
*获得用户对原型的反馈。
*创建问题以查看应用程序流是否直观。
*收集关于屏幕的反馈和感受。
*分析用户的结果，了解您应该保留哪些功能以及可能需要重新考虑哪些功能。
a.创建一个新的研究
要创建一份新调查发送给最终用户，您必须创建一项新研究。要创建新研究，请点击UI编辑器顶部工具栏中的创建研究按钮或原型概览页面上的。
图.5-46
给研究一个名字，比如用户反馈。点击Crete and go ro feedback。
图.5-47
b.添加一个新问题
研究有一个提出的问题，以提供有关应用程序的一般情感和评论。如果您希望用户更深入地了解某些功能，则可以添加其他问题。
创建一个新的问题，测试屏幕上数据的导航和位置。点击新问题。
图.5-48
您可以在项目中添加关于图像或原型的问题。选择原型。
图.5-48
从列表中选择原型1，然后单击选择。
图.5-49
有四种类型的问题可以提出：注释，评论，多项选择和导航。选择从多项选择中选择答案。您必须至少提供2种选择，但您可以提供2个以上的答案。
图.5-50
设置问题以查看用户是否可以找到Flying Car的零件的指定需求。以下是一个示例问题：
What is the demand for Flying Car's Bumper?
对此的正确答案是450. 将选项设置为250（部件的可用性），450（正确需求）和700（初始屏幕上部件的需求）。
图.5-51(a)
图.5-51(b)
点击done
c.预览研究
在发送给参与者之前，您可以查看“实时”研究报告，确保您有所有问题并且顺序有意义。你甚至可以进行自己的调查，但你的回答不会被记录下来。
要预览调查，请点击调查页面顶部的预览链接。
图.5-52
以预览模式开始调查。但不会记录任何响应。
图.5-53
点击start study进入研究,根据问题在原型里找到答案.
图.5-54
选择答案,点击done
图.5-55
图.5-56
d.发布研究
为了让您的用户提供反馈，您需要发布您的研究并分享网址。
在调查的信息中心上，点击发布。
图.5-57
一旦你发布你的调查，你不能编辑它。确保里面有你想问的所有问题。如果您正在创建一个真正的研究，但尚未准备好分享，请单击取消。现在可以点击发布了.
一旦你发布，你将有一个共享链接。复制链接并单击确定。(https://standard.build.me/user-research/018157ef707c810b0f650b1c/participant/9330cfff0ed6fb8a0f6514e9)
图.5-58
发送链接给用户收集反馈。您也可以填写自己的调查问卷，以在您的申请中获得一些样本反馈
e.提供反馈
在完成调查时，用户将看到应用原型的实时预览以及问题。
将上一步中复制的URL粘贴到浏览器中。单击测量屏幕上的开始测量按钮。
图.5-59
接下来的过程与上述的预览相似
f.查看反馈回复
一旦您的用户提供反馈，您可以探索他们的回应。要查看反馈，请从SAP Build主菜单顶部栏中选择反馈。点击名为用户反馈的调查。
图.5-60
图.5-61
点击其中一个反馈,加载反馈分析。你可以看到有多少人参加了，他们完成调查需要多长时间，他们回答了多少个问题。您也可以获取个别问题统计资料。
图.5-62
要查看各个问题的回答，请从调查菜单栏单击问题。通过点击特定问题，您可以看到该问题的汇总回复。
图.5-63
在创建真实应用程序之前，请审查用户的反馈并根据需要进行调整。
图.5-64
6.将您的SAP Build项目导入SAP Web IDE
前面说过只有分享过的原型才能被导入(据我研究是这样);
原型完成后，您可以将其作为模板导入SAP Web IDE以将其转换为SAPUI5代码。
6.1 启用SAP Build服务看当前字符集
.打开您的SAP Cloud Platform帐户,转到服务。在搜索栏中搜索构建。
图.6-1
单击用户体验部分下的构建磁贴,启用服务
图.6-2
6.2 导入目标
在SAP Cloud Platform下，选择目标。
图.6-3
选择导入目标,导入下面的所有文件。
图.6-4
图.6-5
因为我已经导入过,所以这里报错.正常直接点保存就可以了,其他三个文件类似.
6.3 启动SAP Build插件
打开之前收藏的SAP WEB IDE或者按前面介绍那样打开也行.
在您的SAP Web IDE中，单击齿轮图标以打开首选项视图,然后按照图中步骤启动插件
图.6-6
点击保存之后,会弹出提示框要刷新页面,直接点击refresh即可.
6.3 创建一个新项目
单击尖括号图标（）返回代码视图。
图.6-7
在代码视图中，通过选择文件>新建>从模板项目来创建新项目。
图.6-8
在Category下拉菜单中，选择BUILD Project。选择BUILD项目图块。点击下一步。
图.6-9
给你的项目起个名字。点击下一步。
图.6-10
一般第一次导入的时候,会提示输入BUILD的用户名和密码的(因为我已经导入过几次,所以没有提示)
图.6-11
这里我们点击我们之前建的那个inventory Dashboard原型,点击finish.(这个过程可能会有点长)
6.4 运行你的程序
右键点击你的项目名称。
从菜单选项中，选择运行>运行方式> Web应用程序。
图.6-12
如果出现提示，请选择testFLPService.html作为要运行的文件。点击确定。
图.6-13
在新窗口会打开你的UI5程序(可能会慢)
图.6-14
