对 SAP UI5 一无所知的新手,从哪些材料开始学习比较好?-阿里云开发者社区

开发者社区> jerrywangsap> 正文

对 SAP UI5 一无所知的新手,从哪些材料开始学习比较好?

简介: 这是 Jerry 2021 年的第 32 篇文章,也是汪子熙公众号总共第 308 篇原创文章。 我经常收到不少朋友这样的问题:如果对 SAP UI5 一无所知的新手,想学习 SAP UI5,从哪些材料开始学习比较好?有没有一些推荐的书? 我自己 2014 年底,出于工作需要学习 SAP UI5 时,把 SAP UI5 官网上提供的一套 Walkthrough (这个词的中文翻译应该是教程,辅导,攻略) 认真做了一遍,其中的代码一个字符一个字符照着敲了一遍,很快就可以上手工作了。后来有新同事入职到我们团队时,我也推荐这套教程让新同事们学习。
+关注继续查看

这是 Jerry 2021 年的第 32 篇文章,也是汪子熙公众号总共第 308 篇原创文章。


我经常收到不少朋友这样的问题:如果对 SAP UI5 一无所知的新手,想学习 SAP UI5,从哪些材料开始学习比较好?有没有一些推荐的书?


我自己 2014 年底,出于工作需要学习 SAP UI5 时,把 SAP UI5 官网上提供的一套 Walkthrough (这个词的中文翻译应该是教程,辅导,攻略) 认真做了一遍,其中的代码一个字符一个字符照着敲了一遍,很快就可以上手工作了。后来有新同事入职到我们团队时,我也推荐这套教程让新同事们学习。


这是 SAP 官网例子程序的网址,包含了大量 SAP UI5 例子程序可供下载:


image.png


滑动屏幕到下方,就能看到 Walkthrough 这套教程了。


image.png


该教程包含 38 个步骤,涵盖了 SAP UI5 开发和单元测试的方方面面,按照教程最终能做出一个 SAP UI5 应用。


image.png


每个步骤均是在前一步骤的基础上,添加新的特性,实现一个新目标。既有文字描述,也有较之前一步骤,需要新开发的代码块, 这些代码块通过黄色高亮显示如下图所示:


image.png


如果迫不及待想查看,根据这 38 个步骤做完之后的 SAP UI5 长什么样,可以从官网直接下载最终的完成版:

image.png



Jerry 的技术交流群里,有朋友提了一个问题:从 SAP 官网下载的这些 SAP UI5 示例工程文件,如何在本地 IDE 比如 Visual Studio Code 里启动?


image.png


之前从事 ABAP 开发的朋友,刚接触 SAP UI5,可能会遇到类似问题:SAP UI5 官网下载的例子,不知道如何本地运行。


image.png


本文就来帮助这些只有 ABAP 背景的朋友们来解决这个很多 SAP UI5 初学者都会遇到的问题。


首先解压官网下载的工程文件压缩包,发现包含 webapp 文件夹,和两个文件 package.json 以及 ui5.yaml.


image.png


webapp 文件夹里的目录结构:


image.png


我们直接用浏览器打开 SAP UI5 应用的入口页面 index.html, 是无法看到期望的应用正常运行的,因为 SAP UI5 应用需要部署在本地或者远端的 Web 应用服务器里运行。


image.png


我在自己的技术交流群里,曾建议想在本地进行 SAP UI5 开发的朋友们,学一点简单的 nodejs 基础,至少会用 npm 和 node 的基本命令。


image.png


在本地安装好 npm 和 node 工具,在命令行里使用它们。


image.png


下面介绍两种将下载的 SAP UI5 应用在本地启动的方式。


方法1:使用 Visual Studio Code 启动 SAP UI5 应用

把 Visual Studio Code 的目录添加到 Path 环境变量里,这样我们可以在命令行里,使用 code 命令启动它了:


image.png


进入下载并解压的 Walkthrough 文件夹里,使用 code . 命令启动 Visual Studio Code (其中 . 代表当前目录)。


image.png


安装名为 UI5-Tools 的 Visual Studio Code 扩展:


image.png


这个扩展提供了一个嵌入的 Web 服务器,默认名称为 UI5 Server, 端口号为 3000. 在扩展配置里能够对这些默认设置做修改。


image.png


选中 webapp 文件夹下的 index.html, 点击下图红色高亮图标,启动该嵌入 Web 服务器:


image.png

因为目前该嵌入服务器上只部署了 Walkthrough 这一个应用,所以单击唯一的 tile,即可打开 Walkthrough 应用:


image.png


启动的 Walkthrough 应用如下图所示:


image.png


方法2:使用 nodejs express

express 是基于 nodejs 平台的一个 web 开发框架,只需短短几行语句就能实现一个简单的 web 服务器。


如果不想使用 UI5-Tools 提供的嵌入 Web 服务器,我们可以用 nodejs express 来代替。


从 Jerry 文章 一个用于SAP UI5学习的脚手架应用,没有任何后台API的依赖 提到的代码仓库,下载该应用到本地:


https://github.com/wangzixi-diablo/WebAppCollection


这个 nodejs 应用的核心代码,位于文件 local.js 里,下图高亮区域的语义是:


如果 localhost:3002 后面加上 /ui5,就用 express 加载 webapp 文件夹里的 index.html 文件


如果 localhost:3002 后面加上 /wt,就用 express 加载 walkthrough 文件夹里的 index.html 文件


以此类推。


image.png


因此,对于方法2,我们先把 Jerry 的脚手架应用下载到本地,然后进入其目录,新建一个 forwechatblogs 文件夹,最后把 SAP UI5 官网下载的例子工程的 webapp 文件夹里全部的内容,拷贝到 forwechatblogs 文件夹里即可。


别忘了在 Jerry 脚手架应用的 local.js 文件里,增添一行如上图第12行代码,告诉 express,当 url /wechatexample 被访问时, 加载 forwechatblogs 文件夹里的 index.html 文件。


image.png


最后,用命令行启动脚手架应用:


node local.js


image.png


使用 localhost:3002/wechatexample 即可访问 SAP UI5 应用了:


image.png


通过观察浏览器地址栏能够看出,通过 express,可以自定义访问 SAP UI5 应用的 url.


SAP 官网还提到了另外一个 SAP UI5 本地开发工具,即 SAP WebIDE Personal Edition, 不过 Jerry 没有用过。欢迎尝试过该工具的朋友留言,分享使用体验。


https://tools.hana.ondemand.com/#sapui5


image.png


此外,如果想使用在线工具,SAP Business Technology Platform (即以前的 SAP云平台) 提供的 Full-Stack WebIDE 和 Business Application Studio,也可以用来开发 SAP UI5 应用。因为本文着重介绍的是本地开发,所以这里略过。想尝试 Business Application Studio 的朋友,请参考这个链接里的步骤。


image.png


感谢阅读。


更多阅读


(0) SAP UI5应用开发人员了解UI5框架代码的意义


(1) SAP UI5 module懒加载机制


(2) SAP UI5 控件渲染机制


(3) HTML原生事件 VS SAP UI5 Semantic事件


(4) SAP UI5控件元数据的元数据实现


(5) SAP UI5控件的实例数据修改和读取逻辑


(6) SAP UI5控件数据绑定的实现原理


(7) SAP UI5控件数据绑定的三种模式:One Way, Two Way和OneTime实现原理比较


(8) 谈谈 SAP UI5 的视图控件 ID,以及其和 Angular 视图的异同


(9) SAP UI5控件的多语言(国际化,Internationalization,i18n)支持的实现原理


(10) XML视图里的button控件


(11) button控件和它背后的DOM元素

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26797 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10092 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10886 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13893 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9161 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11819 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4660 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22412 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载