SAP UI5初步结构分析研究（七）（番外篇）

来源：互联网发布：网购比价软件编辑：程序博客网时间：2024/06/01 10:20

哎呀呀，距离上一篇博客已经过去了一周了呢，想想上一周好像。。。啥也没干，憋不出啥的东西，索性就浑浑噩噩地过去了吧，这篇为啥叫番外篇呢，就是和UI5也是有联系的，但是由于某些原因我并没有把两种技术都结合在一起，所以暂时算一个番外吧，我过两天再研究技术整合的问题。这篇文章呢我主要讲一下SAP UI5移动端的问题，这里使用的主要技术除了我们熟悉的UI5，还要涉及到一个全新的开发环境cordova，以及专属的资料库phonegap，再然后呢，还要再稍微讲一些关于安卓的知识，因为PO主最近刚换了手机，所以没法演示iOS端，这里先以Android为基础

按照惯例，我先来介绍一下这回的研究方向，主要是面对移动端，我们针对其特殊性，肯定跟PC端还是有些差异的，比如访问手机麦克风，摄像头等操作，所以这次我们主要实现一个在手机端打开摄像头实现扫码功能的小APP，所选用的机型为SAMSUNG Galaxy S8，先上一下效果图
这里写图片描述
HelloCordova是Cordova生成的安卓apk安装包安装之后的APP，SAP Fiori是SAP移动端的APP，因为后台大哥最近玩脱了，所以我暂时连不上服务器，里面的唯一一个test是我在之前博客中写过的一个连接后台数据的工程，是以一个metro的形式展现在桌面上的，很像win8和win10的开始菜单项
这里写图片描述

这里我们实现的效果是扫码之后返回一个result即为商品码，当然这个码就交由后台处理就可以了，这里我们只看前端该做什么

需要准备的工具/知识

Cordova
一台开发者模式的安卓手机
Android SDK && Android AVD（可选）
JAVA 环境（这个环境变量我就不赘述了自己搜吧，装WEB IDE也要用到的）
扫码插件 BarcodeScanner github地址
node.js环境 npm git bash（可选）
前端编辑器我用的sublime
gradle

Cordova

这东西比较简单，介绍一下就是一个能让前台代码在手机上跑的一个环境，能够让js调用安卓或iOS的API，并且能让HTML和css在手机上展现，当然，这个APP应该都是套了个浏览器的外壳，本质上还是浏览器来解析语法，给出官网地址，教程很丰富，这个搭起来比较快Cordova中文网
首先，你要有Node的环境，再然后，要有npm，不知道的，自己研究一下，非常快速就可以上手，全局安装Cordova之后，创建自己的项目，之后一步比较特殊，是在云平台上添加所要使用的场景（我是这么理解的= = 反正差不多）$ cordova platform add browser 最后，run后面加你要跑的场景，你电脑总要识别的嘛，你到底要在哪儿运行代码是不是，这样就好理解点了~

Android

这东西就恶心了啊，因为无论是环境变量的配置，还是安装包的下载，包括API的支持版本，以及虚拟机，如果没有使用Android studio一站式傻瓜操作的话，真的神烦好吗，我用Cordova的emulate跑一个项目就各种报错烦透了简直，下面一步步来讲解其核心搭建流程
当然这里我们选择用我们勤劳的双手一点点撘，请大家耐心地一点点看下去，我也给自己长个教训写个笔记，毕竟搞了一天心累啊~
首先，JAVA环境不多说，在系统变量和path里面加一个JAVA_HOME啥的，然后，就是去下载Android SDK，这里我下载的是SDK TOOLS这个网站提供的SDK TOOLS，导航栏中找到以后下载Windows版本即可，是一个rar格式的压缩包，这东西千万不要去百度搜索下载百度软件中心的！！！版本老到绝望！！现在都Android8了结果百度那个只有Android4.4选项这你敢信？坑哭我了简直~
这里写图片描述
下载好之后的结构目录，这个网址下来之后的文件和官方略有差异，官方是把文件放在SDK和eclipse两个文件夹中，然后SDK Manager放在根目录下，这个里面很明显多加了AVD，以及去掉了eclipse，我感觉这个比较方便，放一个他们配置的教程教程，这里面详细说明了咋配，我就不多说了，多说一句网上搜到的很多都是在环境变量配置中的path更多的都是找到了下载目录之中的sdk文件夹中，其实仔细看的话官网SDK文件夹中的文件和见图中的文件部署是一样的，所以在配置环境变量的时候只用遍历到这个安装目录的根目录就可以了（不知道这么讲有木有听懂，反正意思到位了= =！）环境变量都配置好了以后，因为是最新版的，所以我这里使用SDK装了Android 7的各种build tools以及API（啥？SDK Manager怎么开？双击那个.exe的程序，名字长得一样的~）
这里写图片描述

最下面的那个Extras装啥，自己看着办，我感觉有些还是蛮重要的，有时候运行项目会报错，会提示要装哪个版本的patlform的API，找到相应数字再装一次即可，报错信息我忘了啥样了，反正装在一个中括号里的。
接着往下看，如果按照Cordova的教程，它是先在本机上用虚拟机跑了一回，所以我们要安装Gradle，配置环境变量，然后再配置AVD Manager，注意，这里的AVD我们要先create一个手机的模板，再去跑项目，不然会提示找不到虚拟模板报错的
这里写图片描述
这边要选择相应的API版本，安卓版本，手机型号（只有谷歌亲儿子可以选= =），处理器好像兼容性都不太好，反正就是电脑上运行巨卡，网上有说使用Intel Atom x64会好很多，还没试过，反正我用手机测（摔！）最后，记得勾选那个复选框，use host GPU，就是使用本机的GPU运行项目，不然这个小手机打开来估计会黑屏，最后运行的效果就跟在浏览器运行的效果是一样的，不多说了。这里我们为什么一定要用手机测试呢？因为虚拟机无法模拟打开摄像头的使用场景，所以还是决定在手机上走一遭
如果米娜桑跟到这一步了，都木有问题，那离手机成功测试也不远了，首先，你如果直接按照官网的要求插上数据线，用相应的命令要求在手机上跑，肯定是不行的，会报错找不到相应的target，这是因为你的手机并没有开启USB调试模式，找不到手机的目标就会自动开启本机的AVD运行，就很蛋疼。手机开启调试模式是先要开启开发者模式的，进入你的安卓手机的设置->关于手机->版本信息这东西，点击七次，然后返回，就会提示已经开启了开发者模式，最后进入设置的选项中，找到USB调试模式即可。然后运行自己的项目，就可以发现手机上多了一个app，运行成功后你的控制台中会提示build successful，然后在最后会说launch successful并且自动结束命令，然后手机上就会多一个APP，表示已经运行成功啦！

代码讲解

这里写图片描述
这个是使用Cordova创造的项目目录结构，所有的功能代码都放在了www文件夹之下了，config.xml文件是用来说明项目中使用到的插件，也就是说下载过来之后的插件是要在这个里面声明的，插件的内容放置在plugins文件夹之下，我们要下载的插件在目录中我已经放置了github地址了，里面有详细的下载教程和使用教程，当然源码我建议还是用我提供的比较好，比较稳，阅读性也更强

<!DOCTYPE html><html>    <head>        <meta name="format-detection" content="telephone=no">        <meta name="msapplication-tap-highlight" content="no">        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">        <link rel="stylesheet" type="text/css" href="css/index.css">        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *;script-src * 'unsafe-inline'">          <title>Hello World</title>    </head>    <body>        <div class="app">            <h1>Apache Cordo</h1>            <div id="deviceready" class="blink">                <p class="event listening">Connecting to Device</p>                <p class="event received">Device is Ready</p>            </div>            <button id="btn" onclick="inputScan();">扫码</button>        </div>        <script type="text/javascript" src="cordova.js"></script>        <script type="text/javascript" src="js/index.js"></script>        <script type="text/javascript">            function inputScan(){                cordova.plugins.barcodeScanner.scan(                     function (result) {                         alert("We got a barcode\n" +                               "Result: " + result.text + "\n" +                               "Format: " + result.format + "\n" +                               "Cancelled: " + result.cancelled);                     },                      function (error) {                         alert("Scanning failed: " + error);                     }                );            }        </script>    </body></html>

在这里会有一个小bug，我用官方的源码在浏览器中跑过一次，会提示找不到插件的声明，其实有两个方面，第一个是meta标签的问题，在里面要声明对于script标签的识别，因为我是直接写在html里面了media-src *;script-src *，第二个就是全局安装了phonegap之后，使用其下载BarcodeScanner之后，要在xml文件中注册该插件才能使用，相当于在页面中直接引入一样

    <feature name="BarcodeScanner">        <param name="android-package" value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />    </feature>

这段代码在config.xml中加入进去
这个插件我没试过二维码，不知道能不能识别，条形码是没问题的~结果会返回在一个叫result的参数中
好了，大体就是这么多，有问题可以评论提问找我，Cordova创建的项目目录结构比较简单可以自己研究一下我就不多说了

总结

为什么要研究Cordova？
怎么整合到SAP UI5中？
说实话我还没研究怎么整合进去，UI5和Cordova的整合还没有相同，毕竟两者都有自己的体系，我是在SAP官方文档中看到可以使用这种方式，贴出链接
https://help.sap.com/saphelp_smp3012sdkmfadev/helpdata/en/45/e53e1ee3f64263ad8537c8b5462ace/frameset.htm
注意不要使用SAP 提供的命令安装该插件，已经换了一个储存库了= =，所以你按照那个下载了之后，直接返给你个404
我在了解SAP Fiori的时候，看到网上的体系图中涉及到了Cordova，所以我猜测移动端的展现应该也会使用到这份技术，下面贴一下我对Fiori的理解图
这里写图片描述
移动端通过Cordova展现，前后台使用gateway作为数据连接，后台使用launchpad把项目都展现在Fiori的一个集成环境中，就是之前提到过的类似于win8的metro风格界面的一个平台上，而且看到资料上说还可以通过前端触发SAP GUI，进入程序之后完成一些复杂报表的处理业务，后台与数据库之间使用odata进行数据传递，后台可以使用自己的HANA，也可以是ANY DB，毕竟GUI以前的底层数据库还是Oracle嘛
经过了一个半月的研究，现在对于Fiori理解可以说不同与往日了，移动端通过Cordova来展现结果，可以说兼容性更佳，代码复用率更高，PC端使用UI5作为主要的开发框架，UI层面定制化更高，从思想架构上来看，虽然整个框架比较重，但是使用到的技术非常的新，包括栅格化布局bootstrap，angular中的多语言环境i18n，双向绑定技术以及Mvc思想，可以说走在潮流前线了。后台使用SAP自家的ABAP进行管理，更加得心应手，并且可以通过某种方式连接到传统的GUI平台上，可以说布局虽然激进但也并没有冒进，至于统一整合项目的Launch-Pad，把写好的一个个项目模块化展示，高内聚低耦合，数据之间并不会有什么影响，布局方面清晰可见，可以说越是学下去，越发觉得SAP的强大，后台数据库采用了最新的内存型数据库，可以说是非常可怕了，依靠Fiori的发展，SAP会继续保持自己在业内的龙头老大地位屹立不倒

阅读全文

0 0