SAP UI5初步结构分析研究（九）（HAT安装以及云ide部署Android App）

这篇博客的标题可能说的不是很清楚，我在开头细说一下是什么意思，如果我的博客有幸被一样在学习UI5的小伙伴一路跟下来，应该会知道我现在的进度在哪里了。

根据上一篇的进度，我在本章要完成对本地HAT（Hybrid Application Toolkit）软件的安装，以此来达成通过云端版本的web ide来在Android设备上测试我的程序，上篇博客说明过，在云端版本中会有一些改变，最根本的改变就是可以使用plugins选项去做一些移动端程序的写入，并且，在右键Index.html进行运行选项时，会多出几栏，其中就有preview in local…啥的我给忘了，这里就不这么严谨了，意思就是通过在本地安装cordova，HAT，Android SDK & AVD，就可以在手机/平板或者虚拟机上看到SAP UI5的移动版本，听起来是不是很酷，SAP 确实做到了把一切最潮流的技术都集中在了Fiori体系中，但是！！！！妈的这个是真的变态难装，下面我会对一些坑进行一些小小的提示

上篇博客的链接我再贴一次，这个博客非常重要，如果一路跟下来，基本上就已经可以实现环境的搭建了。

How to install Hybrid Application Toolkit (HAT) on Windows

How to use Hybrid Application Toolkit (HAT) and test the apps – Preview

再说一遍，这两篇博客非常重要，你只有在本地部署了HAT并且成功测试链接之后，才可以进行app preview，过程虽然麻烦但是配置完成以后非常地舒爽到是真的。

安装HAT

上图是需要在安装之前所要安装的所有依赖，由于我在第七篇博客就已经对于传统cordova-cli配置过一遍环境，所以我已经完成了node git cordova android java的所有配置，在这里我只差了plugman以及kapsel还有最后的HAT安装包

特别注意

node的版本必须使用5.4.1及其向下版本，SAP最高只支持到了这个版本

cordova的版本必须使用6.5.0及其向下，同样太高无法识别会出现很奇怪的报错信息

照着第一篇博客的教程走，唯一费劲点的也就是环境变量的配置，还有要注意的就是中间有过程是让你进入根目录去用npm install一些依赖，为了保险起见我建议所有没有特别说明的都进行全局安装就是-g，博客中间有些步骤看不懂的就回想一下我现在说的，去执行目录里面下载依赖，应该是安装kapsel那一步，我也是看报错提示才知道要这么干，因为我的下载目录和博客作者的不一样，还有要注意的，存放以上需要配置环境变量的安装项，绝对不允许路径中带有中文，不然环境变量配置会出问题

如果都认为环境没问题了，就到最后一步安装HAT

首先解压之后直接进入主目录点击setup.cmd，这是一个命令行程序，执行完毕后会用你的默认浏览器打开一个界面，千万主要要看提示标签，上面有说明要安装Android API 19才能在WEB IDE中使用虚拟机运行，我也是吃了个大亏，中间的步骤就是不断的check all，检查你的环境变量，项目配置版本等等，在第二步中会让你输入HAT的密码，初始化一个就行，很重要的另一步就是会让你输入一个用于连接你的云平台的链接，这个东西你把你进入云端webide的url地址复制过来就行，格式差不多跟网站发了你一个token一样，其中带了一串数字的，这些博客上写的都非常详细，可以一直跟着走，亲测有效！最后成功界面贴图



中间步骤执行时间会很长，大家稍安勿躁，如果中间有疑问，可以在评论区留言

使用WEB IDE在手机上测试程序

首先，进入你的云端web ide，链接自己先跟完上一篇教程，那个上面我放了入口，这里就不放了，进入设置界面，首先先进入你的HAT根目录，启动HAT



点击run.cmd之后会弹出命令窗口，会提示你输入密码，输入你在安装过程中自己初始化的密码即可，就显示在9010端口启用，这个地方一般不用动，因为web ide中用于测试的也是这个端口

之后进入web ide的设置界面，测试连接



勾选后点击test connection，如果显示字样跟我的一样，说明已经连接成功了

之后返回代码界面，右键你要启动的项目，如图



选择在安卓设备上发布，然后通过命令台，就可以看见程序在滚动了，SAP会在手机上生成一个WebideCompanion的APP用于测试，如图



成功之后程序并不会直接运行，而且要使用SAP的账号进行登录操作，因为进入之后APP会提示没有一个URL可以用于测试（当然我这个界面已经没有了= =）

这时候，请大家先使用web application来运行项目，然后点击右上角的二维码



在手机程序中双击空白区域，会出现一个顶部menu的菜单，点击一个类似于全屏的按钮，可以打开一个扫码器，扫完之后就可以把项目部署到手机上查看了，这里因为软件和SAP Fiori一样的限制，我不能使用手机进行截屏操作，所以效果图就不贴出来了，有问题可以向我提问，到这里为止，在SAP UI5上部署cordova的进程可以暂时告一段落了，接下来我会尝试使用云端ide连接本地的后台进行开发