OpenSAP MOBILE 1 Week 1 Transcripts

8/10/2019 OpenSAP MOBILE 1 Week 1 Transcripts

1/18

openSAPIntroduction to Mobile Solut ion Development for the Enterprise

WEEK 1, UNIT 1

00:00:12 Hello, and welcome to this introduction to mobile solution development for the enterprise. This isthe second course in the openSAP online eLearning platform. My name is Craig Haworth, and Ihave been working in the enterprise mobility space as a mobile developer for quite some time.

00:00:29 I'm now in the role of an enterprise mobility architect, and a trusted advisor on mobility topics inthe enterprise space. This openSAP course consists of 6 weeks, plus one additional week for the final exam.

00:00:43 In each week, there will be a number of videos quite like this one, and at the end of each video,there will be a self test to help you measure your learning progress.

00:00:52 We will also have weekly assignments, and these assignments are graded, and you will earnpoints towards your record of achievement. We also have an online forum where you can go andcollaborate with your fellow students and ask questions.

00:01:06 Finally, you can expect that it should take you at least half a day per week to complete thecourse. Now let's start with week 1 unit 1, where we begin by looking at what is driving the use of mobile technologies in business today.

00:01:22 Mobile technologies have profoundly changed the way we interact with each other. Althoughthere are many places in the world where there is no network coverage, we can go almostanywhere and be in contact with our business partners and the people that we care about.

00:01:38 It has become so normal for us that we cannot imagine a world without it. We are currentlyseeing an explosive growth in mobile device adoption. Today, more than 90% of the world'spopulation has a mobile phone.

00:01:53 It is estimated that the number of active cellular devices will reach 7.3 billion by 2014, whichexceeds the number of people on the planet. Just last year, the number of smartphones shippeddoubled to that of pc shipments.

00:02:10 And tablet adoption isn't that far behind, and will probably outpace laptops by the end of thisyear. A post-pc era is fast becoming a reality.

00:02:22 Some say that the mobile Internet connecting these billions of devices is one of the topdisruptive technologies of our time.

00:02:34 Mobility is rapidly spreading in key industries. Have you ever gone into a store and used your phone to look up a competitive price on a product?

00:02:42 Deloites have predicted that by 2016 19% of all total in store sales will be influenced bysmartphones. Many of you have probably even used an app to compare prices.

00:02:55 Mobile wallets will likely become one of the preferred methods of payments, and retailers aretaking advantage of this in store use of phones for loyalty programs and for precision marketing.

00:03:09 Our society is super tech savy; we are fast becoming a world of information workers, and havingthis information at our fingertips all the time gives us the opportunity to optimize our own lives.

00:03:20 We are interested in being more productive and more competitive, and smart devices are the

tools we use to make this happen. Mobility in its onset has always been consumer-orientated.


2/18

Page 2

00:03:32 It's always been a volume-driven business. Smart device users' experience of mobile apps isthat they're cheaper than pc apps, that there's more variety, and that there's a larger variety of free apps, to get you productive and connected to a wealth of news, entertainment, and socialcommunities.

00:03:50 This experience is what's driving expectation of what we want from our business mobileapplications. We want to interact with our business data on our devices, use similar tools we

have in our social and entertainment space to make our business lives more productive.00:04:06 Why can I access all I want with my phone, except the business systems I use to do my work?

Top businesses like SAP have realized the potential of harnessing mobile technologies tooptimize employee performance.

00:04:22 Further to improve the return on investment on their ERP systems by optimizing interaction witha system of record. Early adopters of mobile devices like the palm and Windows mobile deviceshave been using mobile technologies to optimize business processes for more than 10 years.

00:04:40 But this has typically been in the process workers' space, in industries such as supply chain,courier, warehousing, and more recently in field force and sales force automation.

00:04:50 The scales have tipped however, and it's the information worker who has the most need for realtime information to be at their fingertips.

00:04:58 SAP's investment in in-memory technologies like HANA, business analytics. mobile and cloudare core to each strategy to addressing the needs of the information worker in big businesstoday.

00:05:11 Adoption of mobile applications in business has been relatively slow as compared to theconsumer market. The main reason being businesses are very concerned around the security of their customer information, transactions, and intellectual property.

00:05:27 After a huge investment in intranet, pc, and server security, adoption of an intrinsically insecure,consumer-oriented technology as a means to access business data is a bitter pill to swallow.

00:05:39 Businesses have had to relook their entire security and infrastructure strategies, in order toaccommodated the demand for, and take up the advantage of mobile applications.

00:05:51 For most businesses, this started off with giving the employees access to email, and the firststrategy to deal with security was to create a homogeneous device environment, and demandtheir employees used a corporate-owned device.

00:06:05 Effective thought this was, it meant that employees would end up carrying 2 or more devices:their personal device of choice and the company-owned device.

00:06:14 It was from this that the bring your own device strategy, or BYOD arose, and with it thecomplications of supporting a multi-platform mobile landscape.

00:06:27 It is clear there is an opportunity here for application developers. There is an increase in demandfor developers, and mobile application developer skills and know-how.

00:06:40 However, as a mobile application developer for the enterprise, we must have a goodunderstanding of the non-functional requirements, such enterprise security and supportabilityrequirements, to ensure the adoption of our applications in the enterprise space.

00:06:55 It is the aim of this course to give you an introduction to what it takes to make an enterprise-ready mobile application.


3/18

Page 3

WEEK 1, UNIT 2

00:00:12 Welcome back to week 1 unit 2 of this course. In this unit, we're going to look at thefragmentation of the mobile device landscape, and the implications that this has on mobileapplication development techniques.

00:00:25 We will also look at the various development paradigms typically used in mobile applicationdevelopment today.

00:00:33 Over the past 40 years, what we consider to be a mobile device has changed. Just a fewyears ago, we thought a laptop was a mobile device, but today, when an average personhears mobile device, they're thinking their smartphones or tablets.

00:00:45 This continuously evolving landscape is great for consumers, who get to play with the nextgreatest thing every year, however, this is a struggle for businesses, who are typically risk-averse.

00:00:56 Each time they think they have a solution for mobile adoption, the market changes. Example:moving from a device that you carry in your hand to a wearable device like Google Glass.

00:01:07 We need to be continuously prepared as mobile developers to change and adapt.

00:01:17 Besides this high fragmentation of device type and form factor, there's also been a highfragmentation of the development techniques for these devices.

00:01:28 This has ranged from client-server type of scenarios, even using SMS as an interface, to low-level embedded languages such as Embedded C and Assembly, and even early attempts at amobile Web application such as WAP, which unfortunately had a poor uptake.

00:01:44 But typically apps developed in the past were developed natively for each platform, and thisbecame the norm. Today, however, with increasing power of smartphones, how we developthe mobile applications is changing.

00:02:01 So what are the typical app development paradigms today? Well certainly the first one I'd liketo mention is mobile Web applications.

00:02:10 Today, mobile browsers typically have a similar kind of power to desktop browsers. And withthe addition of mobile peripheral devices such as GPS, and touchscreens, we get additionalcapabilities when we are having a Web browser experience.

00:02:27 However, the perception of a mobile Web app is that it's not as responsive as a native app:the rendering is not as fast, the swipes are not as smooth. However, with the increase of CPUs and GPUs in our modern-day devices, the gap between the Web experience and thenative experience is becoming smaller.

00:02:48 With these added CPU cycles and new technologies such as HTML5 and CSS3, developerscan dynamically create content on the device, reducing latency experienced by the end users.

00:03:02 This allows the Web app experience to be comparable to a native app experience. We arefinding that there are many HTML5 application frameworks that have been developed outthere, and SAP has developed its own framework, called SAPUI5, which has become the coreof its modernized mobile application interfaces, like SAP Fiori.

00:03:25 We will be using SAPUI5 extensively throughout this course.

00:03:33 The next paradigm I'd say is probably the most popular amongst developers, is the nativeapplication development paradigm, and I think the reason why this is the most popular isbecause of the total control of the user experience.

00:03:47 And further, the de facto tools for each platform tend to be the best, such as XCode for IOS or Visual Studio for Windows 8, etc.


4/18

Page 4

00:03:57 Mobile devices tend to have many peripheral devices, such as GPS or gyroscope, or magneticcompass, camera, and others, and typically, these aren't accessible from your average Webbrowser, so writing a native app is necessary when using these kind of peripherals.

00:04:15 Also, there is this responsive experience with a native app that you just don't get with Webapps. and users appreciate and expect this.

00:04:23 We will be building native apps in week 4, and we'll be delving in depth into the pros and consof these different paradigms in week 5.

00:04:36 This brings us to the implementation paradigm that is growing in popularity, and that is thehybrid Web container.

00:04:45 This paradigm sits squarely between native and Web apps, and a loose definition is a nativeapplication that is executing locally available Web assets in an embedded browser.

00:04:58 This is not a new paradigm, but has typically suffered from a poor user experience in the pastdue to CPU limitations. Modern day computing architecture is increasing in power and theuser experience is now becoming comparable to that of a native application.

00:05:17 An example of the typical hybrid Web container used today is PhoneGap, which uses

javascript as its main controller language, HTML5 and CSS3 as its UI definition language, anda plug-in architecture from native code to plug-in switch, providing the javascript to nativebridge.

00:05:36 We'll be using this technology to build our first integrated mobile app in this course.

00:05:45 This is not an exhaustive list of mobile development paradigms; there are also other paradigms such as metadata-driven applications, like SAP's Agentry platform. Each paradigmhas its strengths and weaknesses, pros and cons, and there are many things you need to takeinto consideration when you design your mobile application architecture, and we'll go intothese in week 5.

00:06:13 For now, let's build our first mobile app.


5/18

Page 5

WEEK 1, UNIT 3

00:00:12 Welcome back to week 1 unit 3 of this course. So far, we've been looking at the mobility driversin business today, and the fragmentation of the mobile device landscape that has been hinderingadoption.

00:00:26 In this unit, we'll look at the tools that we'll require in order to build our first integrated mobileapplication.

00:00:36 To make building our first application accessible to all, I've selected a number of open sourcetechnologies, along with some free trial licenses from SAP.

00:00:47 The first free trial license we will use is for SAP NetWeaver Gateway. In order to build anintegrated mobile application you'll need a back-end system to integrate into. SAP NetWeaver Gateway will provide us that back end, plus the services we require for our mobile application.

00:01:05 For our application framework, we'll be using SAPUI5. And to write our code, we're going to beusing the Eclipse development environment.

00:01:14 To test out our code in an emulator, we are going to be using the android developer tools, or theemulator that comes with android developer tools.

00:01:22 And to embed our Web assets into a hybrid Web container, we're going to be using ApacheCordova, also knows as PhoneGap.

00:01:30 During our development, we'll be writing a lot of javascript and debugging a lot of javascript, andwe'll be using Google Chrome in order to do that.

00:01:41 So what is SAP NetWeaver Gateway? SAP NetWeaver Gateway was designed to expose SAPdata to non-SAP external systems.

00:01:52 Typically, the internal services of SAP are quite cryptic to developers that do not have an ABAPbackground. And SAP NetWeaver Gateway exposes these services as OData services, whichcan be easily consumed by external systems.

00:02:07 We will delve into OData in a lot more detail in week 4. You'll find a link to register for this trialaccount on the Resources page for this unit.

00:02:19 That link should take you to this page, and you just need to click on the Register Now button inorder to initiate your registration for the NetWeaver Gateway consumption services.

00:02:35 So we've had a little look at SAPUI5, but what is it? It's an extensible javascript-based HTML5browser rendering library for business applications, and this is the core of SAP's modern Webbusiness apps like SAP Fiori. SAP typically has a service-side component, but it can also beembedded in a hybrid web container, and that's how we're typically going to use it.

00:03:03 However, during our development, we will use the online version. There is a great resource thatyou can use to extend further your knowledge on SAPUI5, and this resource can be found at

SAPUI5.netweaver.ondemand.com.00:03:21 ....and you will find a developer guide as well as an API reference.

00:03:31 So we'll be doing most of our development in Eclipse, and we'll be using a specific edition, theEclipse IDE for Java enterprise edition. You can download Eclipse from eclipse.org in thedownload section, and I'll take you to that page right now.

00:03:47 But before we go there, Eclipse does have a dependency, you need to have at least one Javaruntime installed, so if you don't have a Java runtime installed, I recommend that you go anddownload the Java SDK from Oracle.

00:04:03 The Eclipse download page looks like this, and we'll be using this Eclipse IDE for Java EEDevelopers. You can download that from the platform of your choice.


6/18

Page 6

00:04:19 We'll also be using the Android developer tools, or ADT, and you have a choice here: Androiddeveloper tools come in 2 flavors, you can have a full download that has an embeddeddeveloping environment; it actually embeds Eclipse in it, or you can download the developer tools separately, specifically if you have already got a developing environment that you want touse.

00:04:41 I prefer this method because then I can control the version of Eclipse I want to use. But the

choice is up to you.00:04:49 On the Android SDK page, you have an link here from which you can download the SDK with

everything embedded, or you can use the Existing IDE link to just download the ADT tools.

00:05:03 However, if you do go this route, you are going to have to do a number of things. First of all, youare going to have to extract of course the files that you get down to any directory, really.

00:05:13 I've just extracted mine to my C drive and put it under Android, and you can see, I've extractedmy Eclipse environment to the Eclipse directory. But you will need to link these two together. Inorder to do that, you'll need to use the ADT plug-in for Eclipse, and in order to get to the plug in,you'll need to install the plug-in.

00:05:37 To install the plug-in is quite simple: We just need to go to Eclipse, go Help Install NewSoftware, and here you just need to enter the update site.

00:05:49 The link to the update site will be on the Resources page. I already have mine here so I'm justgoing to select it. Once you've entered that site, you'll see that there are components that youcan install, inside here.

00:06:06 And I'll just select all of them, and then Next, follow the prompts, and you will install the ADTplug-in, so that you can link your Eclipse environment to the Android Development environment.

00:06:27 We'll need to download PhoneGap, also knows as Apache Cordova, and again, we have acouple of methods of doing this: One, you can use Node JS to install it, and you can use thenpm install command to install the Cordova code.

00:06:42 And then, we use a command line in order to generate the Cordova project that we're going touse. I find it a lot easier, though, just to go to the Cordova site, and... I'll show it to you here...

00:06:56 Click on the Download link and it takes you to Download & Archives, and you can just downloadthe source.zip file.

00:07:04 This source.zip file when extracted, I'll show you, has a very simple structure, and this is typicallythe way I prefer to use it, is... you can see I've already gone to this directory here, and basically,for each platform, android or IOS, there'll be a directory, and a bin directory, with a createcommand line....

00:07:31 ...function, where you can create your own Cordova android project.

00:07:42 Last but not least, we can download Google Chrome from the Google site, and this will provideus with the capability of doing javascript debugging in our Web browser.

00:07:56 So that pretty much brings us to the end of the tools section that we'll need to build our firstintegrated mobile application.


7/18

Page 7

WEEK 1, UNIT 4

00:00:12 Welcome back to week 1 unit 4 of this course. In the last unit, we looked at the tools that we'regoing to need to build our mobile app. In this unit, we're going to look at the programmingknowledge that we're going to require.

00:00:26 To give you an overview, we're going to be going through a number of examples. We're going to

first of all be looking at some javascript, getting some javascript knowledge; we're going to learnhow to manipulate the document object model, and we're going to learn how to incorporate thirdparty libraries like jQuery.

00:00:42 Next, we're going to be looking at HTML5 features and some code that uses the canvas tag,which is one of the new tags that are defined in the standard.

00:00:53 The we'll have a look at the principle of a model view controller by developing an SAPUI5application.

00:01:02 Finally, we'll briefly look at some OData examples, and as we do all of this, we're going to beusing Chrome GT bug.

00:01:14 So for javascript, this should be old hat for you Web developers out there. As the name implies, javascript is a scripting language, which is essentially a lightweight programming language.

00:01:24 Why should we use javascript for mobile application development? Well, what is so powerfulabout javascript and what makes it so relevant today, is that all mobile Web browsers supportit,...

00:01:35 ...which effectively means that it can be executed on pretty much any smartphone, any tablet,and most of the feature phones out there today.

00:01:44 This makes it an excellent cross-platform programming language for mobile applications.Javascript is essentially the programming language for our hybrid Web container application.

00:01:56 It is easy to learn, and I encourage you to go on to the net, they have a lot of learning material

out there for you to get familiar with javascript. And there are many resources which you can useto enhance your mobile applications.

00:02:07 For the newbies, I have created a simple exercise to get you started.

00:02:15 For this exercise, we'll be using 2 files: We'll be using this JavaScriptBasics.html file, and this iswhere we'll be loading our javascript code, through the body onLoad event, so we'll be using thisload value.

00:02:30 You can see that I have incorporated the other file, which is the source file for our javascript,which is called ColorList.javascript, and I've also incorporated the jQuery library, which we canuse to manipulate the document object model.

00:02:48 Let's have a look at colors, and some of the features of javascript. So in javascript, all objectsare represented in Json, which stands for javascript object notation.

00:03:00 And I'll just show you an example here of how quickly to build up a javascript object. Jsonnotation uses curly brackets to denote an object in javascript.

00:03:18 Within these curly brackets, all we need to do is specify name value pairs in order to denoteproperties and their values. So I will specify ColorName... and the property name, and the valueis separated by a colon... so here's the value, and then I can have multiple properties defined inthis object just by using commas, so comma.

00:03:45 And then I will define another property, so I'll just uncomment this one here to show you the fullobject. So here we have an object that's got 2 properties; a color name and a color value.

00:03:57 In javascript you can also dynamically build up an object, so for instance, I can specify this


8/18


9/18

Page 9

00:08:47 So the next piece of programming knowledge we need to address is HTML5. HTML5 is the nextmajor release of the HTML standard. It is still officially under development, but this hasn'tstopped browser developers from supporting this standard.

00:09:07 In HTML5 revolutionizes the way in which Web applications and mobile Web applications arebeing built. It introduces a number of new syntax features such as video, audio, and canvas, andin this example, which I'm going to run you through, I'm going to use the canvas tag to draw a

circle on this canvas.00:09:37 So for this example, we'll be using the HTML5Basics HTML page, and we'll be using the

RenderCircle javascript file. In the HTML5Basics you can see that I've just referenced or createda canvas tag, given it an ID again, so we can go and retrieve it using javascript, and specify itswidth and height.

00:10:04 You can see as this application loads up I'm going to run this RenderCircle function which isdefined inside RenderCircle.js. Inside RenderCirclejs I have 2 functions: one which draws 2arcs, so in order to draw my circle, I'm actually drawing an ring with 2 arcs, with a fill betweenthe two.

00:10:27 And within the circle is where I actually go and get my elements; in this case, I'm using the

standard way to get an element from the document getElementByID we could also haveused jQuery here. But here, I'm using a specific function from that element called getContext.

00:10:47 This gives me a drawing context which I can use to set properties such as this shadowColor andOffset, and then also a number of functions like drawArc or drawLine that I can use to render images to the canvas.

00:11:06 Here you can that all I'm doing is passing this context that I've retrieved into my draw function,and then in my draw function, I just render 2 arcs and a fill between the two. And of course,along with this drop shadow, I'll show you the effect that this achieves.

00:11:21 So let's go to HTML5 Basics. You see here I'm going to step through the code, as we did before.I'm getting a context; you can see the structure of the context, and then we can step through,save the state of that context, specify that I want a drop shadow for each stoke that I make onthe canvas, and then I draw the canvas.

00:11:46 And there you go. So we've drawn a circle with a shadow. Along with HTML5 we have CSS3.Now CSS3 stands for cascading style sheets. It's really the way we used to control the style andlayout of Web pages. And this CSS3 is the latest standard for CSS.

00:12:13 So let's have a quick look at some of the things we can do with CSS3. For this example, I will beusing the CSS3Basics.html. So CSS is defined between style tags, and you can see that I'vedefined some style here.

00:12:37 So here a normal div would be white, it wouldn't have a border or anything, it wouldn't have aspecific width; but here, what we're doing is specifying a style for all divs, actually, within thispage, by using a tag selector.

00:12:51 You'll notice that here I'm using another selector where I'm specifying a specific ID, by using thehash selector again, which you've seen before, so I'm saying, all divs with this identifier need tohave these additional styles.

00:13:09 So this is gong to give us a box which is 96 pixels by 96 pixels, blue background, it's going tohave round edges, and then this one will give us a box that has been rotated by 30 degrees.

00:13:23 So let's have a look at what this does to these 2 divs. So there we have our first div, and then wehave our div with an identifier.

00:13:40 Great, CSS Basics, so there you can see we've managed to manipulate what the normal

behavior of a div is, an we've even been able to do some transfer just using CSS.


10/18

Page 10

00:13:55 So again, another research topic. There's a lot to learn about CSS. Just go online. It's very goodto know this when developing hybrid Web applications.

00:14:07 Well, the second last bit is to look at SAPUI5, so we're going to do an example here where wetake the color list that we've been using before and we're going to now put it into an SAPUI5application.

00:14:29 So SAPUI5 combines the power of javascript, jQuery, and HTML5 into a cross-platform, robustWeb application framework. It allows the developer to maintain a strict model view controller design pattern.

00:14:46 And in this demo I will show you the basics of using SAPUI5 by extending what we've learnedon javascript so far.

00:15:04 We'll be using 2 files here again: the SAPUI5Basics.html file and the SAPUI5ColorList file. WithSAPUI5Basics, just like any other javascript library, we need to import the script into our Webpage.

00:15:30 And notice, I'm referencing an online javascript file, and this specific command doesbootstrapping, so essentially it is a small piece of code that loads a bigger piece of code.

00:15:43 This bootstrapping will load a specific control set or a specific library set that I specify in theseadditional tags, so there I'm specifying the style or the theme, and here I'm just specifying thesap.m or the mobile controls.

00:16:03 I'll also incorporate my javascript file and then again specify that on the load, I need to find aspecific script. Also note the root element here that we'll use to place our particular application.

00:16:20 So let's go and look at what this looks like. So this is really extending the color list example wehad before, but here, instead of just using jQuery and manipulating the document object modeldirectly, we're using a model view and controller design pattern.

00:16:43 So first of all we need to create the model. And there are a number of different types of modelyou can create in SAPUI5, but here we're creating a Json model, which means I can just assignmy Json object directly to this model, and I will tell the SAPUI5 core that this is the main modelthat I'm going to bind my controls to.

00:17:03 So SAPUI5 uses dynamic data binding, so you can bind your data model to your UI. So I've gotmy model, and next, I need to specify my view.

00:17:15 You specify a view by using this sap.ui.jsview class, and I specify the class name of my view. SoI'm basically creating a type of a view.

00:17:29 In here are the 2 main functions that you need to override: the getControllerName, so I need tolink a controller to my view, and then of course I need to specify how to create the content for myview.

00:17:42 In this createContent I'm creating a list; it's just a normal, typical list that you would see on amobile device, and I'm specifying a few types, saying that it's a DetailAndActive, so it shows atitle and a description, and it indicates an arrow that you're going to go to detail.

00:18:03 And then, in order to be able to bind the list to the data model, I need to specify a template, sohow do I bind the data to the UI. And in here, you can see that I'm specifying that I want to bindthe colorName property to the title property of the list item, and I'm going to bind the colorValueto the description.

00:18:27 Next I need to specify what object in the data model that I want to bind the view to, and you cansee that I'm specifying the Colors property which is, as you can see here, just this colorsproperty I specified on my data.

00:18:47 So we've got our view, and finally we embed that view into a page, and then the last part of the


11/18

Page 11

model view controller, of course, is the controller itself.

00:19:00 Also in my view here, when I specified my template, I specified the tap function. This is an event,so if I tap on the list, it needs to call a specific function on my controller, this colorListTapfunction...

00:19:16 And in my controller, I define this colorListTap function, and you can see, all I'm doing is justcalling window.alert, and just popping up the message saying that color was tapped.

00:19:27 There is another object we need to create; so, we've got pages which are embedded in views,and views are then embedded into an application.

00:19:38 That application is then used to navigate to the different views. So here I've created anapplication object, I've created an instance of my view, added that as a page to my application,and then told my application to navigate to that page.

00:19:54 I then place my entire application at that div that I pointed out earlier, and that is here, this rootdiv here. So let's have a look and see how that works inside Chrome.

00:20:13 So here I've got it up and running. You'll notice another thing here, is that I've appended this tothe URL to specify which OS I'm going to be rendering for.

00:20:25 Because depending on which device SAPUI5 runs on, it will look like the paradigm of thatdevice; if it's on IOS it'll look like an IOS app, if it's on android it'll look like an android app.

00:20:37 So I'm specifying I want it to look like android. So let's go through this; this is all the same, Icreate my model, set my model, create my view. And you'll notice that the create content wasn'tcalled yet, because I haven't created an instance on the view.

00:20:54 And then here, I'm going to put a breakpoint on the color was tabbed. Create my application,create an instance on my view, and now we go to this create content, and it creates mytemplate, binds the list, inserts it into a page, and voil!

00:21:13 We have our new list now, but it's looking much more like a mobile app would look. And of course if I tap on this, it will run the function that was associated with the tap event.

00:21:25 And then pop up a message, and that will work for all of them. So that's a brief introduction toSAPUI5, to give you an idea of the structure of a typical SAPUI5 application.

00:21:44 The last bit of programming knowledge we need for this unit is OData. OData is very much likean ODBC driver for the Web, and one can draw parallels with how OData and SQL works.

00:22:01 SAP has adopted OData as a service enablement standard for SAP Web and mobileapplications. And we'll delve into OData in a lot more detail in week 4, but for now I'd like toshow you a basic demo.

00:22:18 We'll be using a specific endpoint for this demo which you can get by registering for the SAPNetWeaver Gateway consumption service on the SEN.

00:22:36 You will find this endpoint on the resources page. So what you're seeing here is actually theservice document for the service, and it's specifying the number of collections, or the collectionsthat are available for the service.

00:22:52 So OData has collections and entities and functions. And the collections are collections of aspecific entity type. So here, for instance, I have a collection of products. And in order to see thatcollection of products, all I have to do is extend this URL, and get a collection of products back.

00:23:12 And there you go, you get a collection of products, and in order to see the entity type that this listis bringing back, I just specify $metadata on the service endpoint, and this will bring back all theentities that are used in this service.

00:23:36 So I can go down and I can see exactly what my product entity looks like.


12/18

Page 12

00:23:48 You can also do queries in OData, so for instance if I do not want to bring back the entire list of product collection, but just want to bring back the top 2, I can specify a query saying top equals2.

00:24:03 So again, very similar to select statements, you can bring filters, etc., but we'll go into that in alot more detail in week 4.

00:24:13 And that's all fine and well, I can bring up this data in a Web page, but how do I do this in javascript?

00:24:20 So I have an example here to do this in javascript. and we'll be using this ODataBasics.html

00:24:31 And in here you see that I've actually incorporated another javascript library called datajs

00:24:38 And in datajs we have this OData object, which has a function called read.

00:24:43 Now inside here you see I'm just using the exact same URL but I've just added this format=json.

00:24:50 The format that was bringing before was an atom xml format, but it's much more efficient tobring it back in json format when using javascript.

00:25:00 I'm just using more jQuery here to manipulate the document object model, to basically take the

name of each product that is returned and just output it into a div into the page.00:25:11 So if we have a quick look at how this works, you can see I've actually got a breakpoint here,

and we run through this.

00:25:20 I've made a call to that endpoint and it's brought back a whole lot of results. We can look atthese results, I say data, you can see that there are objects that have been brought back.

00:25:32 Each object, you can see, has a product structure, and then I'm just using the name of theproduct, and now putting that as divs onto the page, and there you go.

00:25:47 As you can see, as we start combining all of these things we've got all the elements we need tobuild up our mobile application.

00:25:55 So that brings us to the end of all the programming knowledge that you require in order to builda mobile application.

00:26:02 In the next unit, we'll be combining all of this knowledge together to build our first integratedmobile app.


13/18

Page 13

WEEK 1, UNIT 5

00:00:12 Welcome back to week 1 unit 5 of this course. Now that we have some background information,and the requisite skills in order to build our integrated mobile application,

00:00:22 and by integrated, I mean uses data from a system of record, such as an EIS or enterpriseinformation system we will be using the SAP NetWeaver Gateway as our system or record,

so please make sure that you have registered as a user at the SEN developer center ES1system.

00:00:46 The overall process that we'll be following is that essentially we will be building our applicationfirst as a Web application using SAP UI5. Then we'll be using Cordova tools to generate anandroid Cordova starter application, which will become the native container for our Web assets.

00:01:06 We will import this generated object into Eclipse and incorporate our Web assets. And finally it'sa matter of building, and deploying and testing the application on an android device.

00:01:17 All the source files that you will need to build this application are in a downloadable archive thatis accessible from the resource page for this unit.

00:01:30 Our app is going to look as follows: Essentially, we're going to display a list of products, with theproduct name and some details around the product, and this will navigate to product details,whenever we click on one of these products, and then of course there's going to be a supplier page as well for each product, so we can click on a supplier link and look at the supplier details;so, a basic project.

00:01:56 As mentioned, you will need your trial account for the ES1 system in order to build this project,so if you haven't done so, please go to the ES1 system now and register. We'll be using thisimport that we used in a previous unit, and when you access this import for the first time you'llprobably be challenged for a user name and password just enter the credentials that weresent to you when you registered.

00:02.:23 With this service document you're going to see the number of collections that are available, etc.

We'll be using 2 of these collections we'll be using the product collection and the businesspartner collection. So let's go through to...

00:02:39 ...that site, and use those collections. You can see here I've got those collections up already. And what we're going to do here is, I'm going to try and call the product collection again, if I justtype in product collection...

00:02:58 Right, so this brings back all the products. Now, in our application we have a product list, andthen we go to product details and then to the supplier. The supplier is actually a businesspartner, so we need to go and look for the supplier property here. You can see there's a supplier ID.

00:03:19 And now we can use this supplier ID as an OData query to bring back just the business partner

we want. So I'm going to use business partner collection and then all that you do is you put thisprimary key in brackets and in inverted commas at the end of your URL and this will bring backthe specific business partner with that key. And there you go, we have that specific businesspartner coming back.

00:03:53 So essentially, we now know how to use OData to bring back the data we need, and we need tosee now how we can integrate this into our mobile application. Right, so, let's...

00:04:08 ...start off by opening up this downloaded resource and incorporating it into our Eclipseenvironment. So the first thing that we can do is...

00:04:23 ...that we'll just open up the Eclipse environment and we can import this project that I've createdfor you into Eclipse, so that's just a matter of right-clicking on the Project Expolorer Import Import to choose General Existing Projects into Workspace Next, and then Browse for that


14/18

Page 14

project; that project will be on your file system, and the project that I'm going to be using isMyFirstIntegratedWebApp, that's week 1 unit 5.

00:04:59 There you go, and once it's in, we can start looking at the source code. So I have this open inanother workspace, and I'm going to go there right now. Let's go to this workspace. Great.

00:05:16 So one of the main differences about the project that we have here today is that in the first SAPUI5 app that we built, we had all of the data in one file.

00:05:31 One of the big differences here is that we're going to separate all of our view and controllers intoseparate files to make the code a lot more manageable. We're also going to be using the centralmodel as we did before with a simple global access for our data and for our data binding.

00:05:48 So let's have a look at each of these views and controllers that we've created. So the first viewI'm going to look at is the product list view. The product list view is really just an SAP UI5 list.

00:06:10 Again, it's a detail and action list, and again, our product header, we'll give it a header calledproduct list. Once again, I'll create an item template for this list, and I am binding the name anddescription of the product.

00:06:29 And here, I'm binding the whole product list to a root object in my data model or products which

we will populate with an data.js query to our back-end system. This is called an aggregatedbinding, because we are not just binding one object, but we are binding a list of objects or anarea of objects.

00:06:54 So for each object in our product list, we will be binding each object to title and description,the property name and description, to those two. So if we go and look at the controller, we'll seehow we handle the navigate feature sorry, as soon as I tap on one of these products, I needto navigate to the details so...

00:07:24 ...the Navigate button on product list controller, the first thing it does is it goes and gets thesource of the event. The source of the event is essentially the list item that we touched, and inorder for me to get the data for that list item, all I need to do is get the binding context.

00:07:44 So as soon as I've got the binding context, that means I have the object that was bound to thatlist, and I can now pass that object through to the product list detail so that I can show the detailof that object, and you can see this is exactly what I'm doing here. I'm basically using the app.to,which is a navigation feature, so remember, in our unit 4 when we built this application, we hadan application object which we added pages to, and then we navigate using that applicationobject to the various pages that we want to navigate to.

00:08:19 So in this case, this to function allows you to specify data in the event, and you can then actuallycreate that product object as your data that you're sending through to your product detail. Solet's look at the product detail view then.

00:08:36 Notice this, is that onBeforeShow, this is an event that gets thrown every time, just before a view

is being shown, I am actually getting the controller, and calling an event on that controller, andthis event will have the data that I actually need to display.

00:09:00 So when the application navigates to the screen, it passes event data to the screen, and part of that event data is the data for the product. So then we can just go straight into theProductDetailcontroller, and we can see that the event has data, and it has context.

00:09:22 That context there is the binding context that we passed through, so I'm setting the bindingcontext for this view to that data, so it means I'll show that specific product's data. In theProductDetail.view it's slightly different: although we're using a list, we are not doing anaggregation binding here, we're binding to a single object, so I'm creating display list items for each object that I want to show, and explicitly setting the bindings to the specific context thatwe've already set.


15/18

Page 15

00:09:58 So here I'm just using name, description, price, and I'm also using the supplier name. Noticehere as well that I'm creating some custom data for this list item. It means when I click on this listitem I'll be able to grab this custom data and use that custom data as part of my context.

00:10:21 So I'm getting the supplier ID, which of course is the business partner ID, which we're going touse to do an additional query to the business partner collection in order to get that data anddisplay it as the supplier information.

00:10:35 Another thing that you should notice here as well is that I'm also showing a product picture, sothe binding is quite sophisticated, in that I can specify a formatter for my binding. Now in theproduct information that I get back from the server, I get a URL, but it's not a complete URL, sothe base of the URL is not there. So I've created a formatter to add the base of the URL to thevalue I receive in the product entity.

00:11:08 This means I can actually reference that image. Finally, let's have a look now at how this isactually working. You can just go to Index Properties and actually grab that location, copy it,and then paste it into a Chrome browser.

00:11:36 One important aspect around using Chrome here is, there is a security feature in browsers thatdoesn't allow you to make ajax call across domains, so in order for this demo to actually work,

what you need to do is, you need to add a parameter, a command line parameter, to Chrome,and I'll show it to you here: It's called minus minus disable minus web minus security.

00:12:10 If you don't do that, your http calls aren't going to get through to the server and you get an error. Another thing to note is that if you have a Chrome browser up already, and you try and open upanother Chrome browser with this command line parameter, it's still not going to work. You haveto close all of them down, and then open it up with this command line parameter.

00:12:35 So here we see our first product list let me just run this again and step through the code.So here, I'm doing an aggregate binding on the entire list, and as soon as I click on one of these,obviously, it will respond to that tap event, it will take the binding context of that specific list itemand then pass it on to the product details screen.

00:13:02 And then here, I'm just showing display list items and of course making reference to the image.But how did I get this data? This data is done with a data.js query, and we're actually doing thisquery right in the index file, in a script. So I'm doing like we did in unit 4, an OData read. Thistime I'm actually passing in my user name and password so I don't get challenged for the user name and password each time.

00:13:38 And then, as before, creating a model, and then binding the results of this OData call to mymodel. And you can see here that the root of my model is myData, and one of the root objects of my model is Products, so I'm binding the product list to this root data object. And I've set it to thecore so it will automatically bind to all of my views.

00:14:07 One thing we haven't discussed yet is that the main controller of this application we've looked

at the product list and we've looked at the product list details the main controller is handled bythe app view.

00:14:36 So the app view is just a view like any other; the difference is that it contains an applicationobject. So what I've done here is within the app view I've created an application object and I'veset that as one of the properties of the app view.

00:14:36 I've then gone and created instances of all of the views that I've defined and I'm adding them aspages to this app object, and then I'm returning this application back.

00:14:51 So, you'll see here in the index that after I've got my data what I do is I create an instance of appand I place that at the root element in my document

00:15:10 Right, so that should be quite clear, and the last step is now to make that additional OData querywhen we select the supplier. So let's just look at an example of that. If I click on the supplier


16/18

Page 16

now, what it should do is make an OData query and bring back the business partner record, andthen I can display whatever fields I wish to in this business partner record.

00:15:36 So how that is achieved is that similarly to when I clicked on a product list item, I had an event.So let me go to that event now. This product detail controller handles the event; and this is theSupplierTap event.

00:16:00 So you'll see here that in this specific case, I looked at the event, I got the source object, and Igot the custom data object which we created before. Let me show you that again.

00:16:13 In the product detail view, there is this custom data object that I created. That custom dataobject is passed in to the event with this source object. So in this product detail controller now, Ican use that ID, and I can use it as part of my OData query, like we did in the beginning, to goand get the business partner record.

00:16:47 And here you can see I'm just using the business partner collection and I'm passing in thatsupplier ID as a parameter. And when I get it back, all I do is an app to to get it back to thesupplier detail and pass in the data I received as the binding context that will be bound to thesupplier detail page.

00:17:13 In the supplier detail view, I'm not doing an aggregate bind here, I'm just doing a bind to theindividual items that were passed in, in the business object.

00:17:28 Right, so that gives us a good idea of how to build up one of these applications. Let's continue.

00:17:40 So we've now built up our Web application, but what we need to do now is pull this together intoa hybrid Web container. So in this next part of the process, what we're going to be doing is we'regoing to be generating our application using the Cordova app generation tools.

00:18:02 We'll then be looking through this project structure, just getting familiar with the structure, seeingwhere we need to embed our web assets, seeing what modifications we need to make to thedefault Web assets that are put there.

00:18:17 And additionally, we'll do some modifications to the container. Especially if you are making along running query as the application starts up, you may need to do something like adjust theload time-out, because Cordova has a load time-out of 2 seconds. So if your initial query to theback end lasts longer than 2 seconds, it's going to time out and it's going to crash.

00:18:41 So that's sometimes what happens. Alright, so in this section, we first of all are going togenerate a Cordova project. In order to do that, you need to navigate to the Cordova source andalso navigate to the Cordova android version.

00:19:05 In the bin directory, there is a function called Create. If we just run this now, we'll be able to seeall the command line parameters. Essentially, to create a new Cordova or android project, weneed 3 command line parameters. The first one is the path, where the source must go, thesecond is the namespace of the application, and the third one is the name of the application,

which will essentially be your first android activity.00:19:37 So let me do this quickly... Create... and we'll just do a test run here... say MyFirstAppTest... so

that's where it's going to place the source code. We'll just give it the com.opensap.myfirstappnamespace, and of course we give the activity name, which will be myfirst, for instance.

00:20:10 We run that, it'll create the project... it takes a few seconds... we can go and have a look at that.So I should now be able to go and browse to that directory.... and we'll see that we've actuallygot an android project that has been generated for us.

00:20:40 We can now import this project into Eclipse.... let me just use my Eclipse here.... there we go Import, and we say Existing Android Code Into Workspace... we go and browse to the root folder we just created... and we're done.


17/18

Page 17

00:21:15 Now we can actually go and look through this code. You can see there's a lot of files here. Theimportant file to note from the beginning is this config file so there's some configurationsthat you can do in here, and especially later on, in week three, when we build our own Cordovaplug-in, we'll be using the config.xml file.

00:21:46 The other file that you should be aware of is this first activity or this main activity that is created,and it's here that we can do things like adjust the time-out or do different configuration settings

for the hybrid Web container itself.00:22:02 Finally, where we put all our Web assets is in the assets folder. So in the assets folder, you'll

see a www folder and you can see a typical structure that you'd see in most websites today.

00:22:19 The two main files that you'll want to adjust here is the index.js file and the index.html file. Bydefault when we run this it will just show a Cordova logo saying device is ready. We areobviously going to adjust this to load up and run our application.

00:22:41 Well I've already done this so I'll go and step you through what I've already done in this spaceand then we can build this and deploy it to our mobile device.

00:23:00 So this project is also downloadable from the resource page, so I'll grab this project and import itlike the other one, and we'll first have a look at a couple of the changes that I've made.

00:23:13 One of the first changes I've made is I've added this line of code here, which essentially changesthe load time-out value to 60 seconds instead of 2. So if you are making online queries, say, for instance, to load the SAP UI5 javascript from a server, then it could take longer than 2 seconds,so this will just prevent any errors happening during that process.

00:23:42 Additionally, I put all our Web assets into www directory, so I put all our controllers in here andall our views in here. Additionally, I've added data into the js folder, which we're going to use todo our OData queries to the back end.

00:24:05 So the modifications I've made is in index.html, I've deleted pretty much all that stuff that comesdefaulted, and I've just added in the root tag like we've done in all our other applications. I've

kept this app.initialize; it's quite important because when app.initialize runs it kicks off an eventonce the Cordova container is ready to start rendering html, and it's only at that point that I wantto start making calls into the back end when it's not showing our pages.

00:24:41 To respond to that on initialize event you have to modify index.js, and you can see here that onthis device onDeviceReady, this is where I've added the code that was originally in the index file,and this is really just doing the OData read to the back end service, and creating the data model,and then of course, initializing the app and navigating to our first page.

00:25:06 So let's go ahead and see how this runs on the device. So what I'm going to do is, I click, I'vegot my device ready here... and what I'll do is Debug As android application this willtake a couple of seconds to load up and run.

00:25:45 And there we go, we've got the same application up and running, and we can navigate throughto our detail page, and of course, click on our supplier, do that additional OData call and get thebusiness partner, and then we can of course navigate back, etc.

00:26:09 So there we have it, we've embedded our mobile application into our hybrid Web container andare running it on a device.

00:26:19 So we have built our first integrated mobile application. However, this is not the end of the story.We have not yet made our application enterprise-ready. Nest week we'll look into theconsiderations you'll need to take into account when deploying your mobile app into theenterprise environment.

00:26:39 And next week we'll introduce you to a tool that will help you do this: The cloud version of the

SAP Mobile platform.


18/18

2013 SAP AG or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form

or for any purpose without the express permission of SAP AG. The

information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and i ts distributors

contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP AG and its affi liated companies

("SAP Group") for informational purposes only, without representation or

warranty of any kind, and SAP Group shall not be liable for errors or

omissions with respect to the materials. The o nly warranties for SAP

Group products and services are those that are set forth in the express

warranty statements accompanying such products and services, if any.

Nothing herein should be construed as constituting an additionalwarranty.

SAP and other SAP products and services mentioned herein as well as

their respective logos are trademarks or registered trademarks of SAP

AG in Germany and other countries.

Please see http://www.sap.com/corporate-en/legal/copyright/index.epx

f ddi i l d ki f i d i

www.sap.com

OpenSAP MOBILE 1 Week 1 Transcripts

Documents

Transcript of OpenSAP MOBILE 1 Week 1 Transcripts