openSAP Introduction to Mobile Solution 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 is the second course in the openSAP online eLearning platform. My name is Craig Haworth, and I have 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 in the 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 earn points towards your record of achievement. We also have an online forum where you can go and collaborate 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 the course. 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. Although there are many places in the world where there is no network coverage, we can go almost anywhere 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 currently seeing an explosive growth in mobile device adoption. Today, more than 90% of the world's population has a mobile phone. 00:01:53 It is estimated that the number of active cellular devices will reach 7.3 billion by 2014, which exceeds the number of people on the planet. Just last year, the number of smartphones shipped doubled 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 this year. 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 top disruptive 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 by smartphones. 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 are taking 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 having this 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.

00:03:32 It's always been a volume-driven business. Smart device users' experience of mobile apps is that 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 social communities. 00:03:50 This experience is what's driving expectation of what we want from our business mobile applications. 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 to optimize employee performance. 00:04:22 Further to improve the return on investment on their ERP systems by optimizing interaction with a system of record. Early adopters of mobile devices like the palm and Windows mobile devices have 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 cloud are core to each strategy to addressing the needs of the information worker in big business today. 00:05:11 Adoption of mobile applications in business has been relatively slow as compared to the consumer 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 to accommodated 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 first strategy to deal with security was to create a homogeneous device environment, and demand their 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 the complications 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 demand for 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 good understanding of the non-functional requirements, such enterprise security and supportability requirements, 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 enterpriseready mobile application.

Page 2

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 the fragmentation of the mobile device landscape, and the implications that this has on mobile application development techniques.

00:00:25

We will also look at the various development paradigms typically used in mobile application development today.

00:00:33

Over the past 40 years, what we consider to be a mobile device has changed. Just a few years ago, we thought a laptop was a mobile device, but today, when an average person hears “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 next greatest thing every year, however, this is a struggle for businesses, who are typically riskaverse.

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 high fragmentation 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 lowlevel embedded languages such as Embedded C and Assembly, and even early attempts at a mobile 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 this became the norm. Today, however, with increasing power of smartphones, how we develop the mobile applications is changing.

00:02:01

So what are the typical app development paradigms today? Well certainly the first one I'd like to mention is mobile Web applications.

00:02:10

Today, mobile browsers typically have a similar kind of power to desktop browsers. And with the addition of mobile peripheral devices such as GPS, and touchscreens, we get additional capabilities 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 the native experience is becoming smaller.

00:02:48

With these added CPU cycles and new technologies such as HTML5 and CSS3, developers can 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 are finding that there are many HTML5 application frameworks that have been developed out there, and SAP has developed its own framework, called SAPUI5, which has become the core of 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 native application development paradigm, and I think the reason why this is the most popular is because 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.

Page 3

00:03:57

Mobile devices tend to have many peripheral devices, such as GPS or gyroscope, or magnetic compass, camera, and others, and typically, these aren't accessible from your average Web browser, 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 Web apps. 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 cons of these different paradigms in week 5.

00:04:36

This brings us to the implementation paradigm that is growing in popularity, and that is the hybrid Web container.

00:04:45

This paradigm sits squarely between native and Web apps, and a loose definition is a native application 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 past due to CPU limitations. Modern day computing architecture is increasing in power and the user 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, and a plug-in architecture from native code to plug-in switch, providing the javascript to native bridge.

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 paradigm has its strengths and weaknesses, pros and cons, and there are many things you need to take into consideration when you design your mobile application architecture, and we'll go into these in week 5.

00:06:13

For now, let's build our first mobile app.

Page 4

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 drivers in business today, and the fragmentation of the mobile device landscape that has been hindering adoption. 00:00:26 In this unit, we'll look at the tools that we'll require in order to build our first integrated mobile application. 00:00:36 To make building our first application accessible to all, I've selected a number of open source technologies, 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 an integrated 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 be using 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 the emulator 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 Apache Cordova, also knows as PhoneGap. 00:01:30 During our development, we'll be writing a lot of javascript and debugging a lot of javascript, and we'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 SAP data to non-SAP external systems. 00:01:52 Typically, the internal services of SAP are quite cryptic to developers that do not have an ABAP background. And SAP NetWeaver Gateway exposes these services as OData services, which can 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 trial account 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 in order 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 HTML5 browser rendering library for business applications, and this is the core of SAP's modern Web business apps like SAP Fiori. SAP typically has a service-side component, but it can also be embedded 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 that you 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, the Eclipse IDE for Java enterprise edition. You can download Eclipse from eclipse.org in the download 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 Java runtime installed, so if you don't have a Java runtime installed, I recommend that you go and download 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 EE Developers. You can download that from the platform of your choice.

Page 5

00:04:19 We'll also be using the Android developer tools, or ADT, and you have a choice here: Android developer tools come in 2 flavors, you can have a full download that has an embedded developing 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 to use. 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, you are 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 extracted my Eclipse environment to the Eclipse directory. But you will need to link these two together. In order 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 New Software, 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 just going to select it. Once you've entered that site, you'll see that there are components that you can 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 ADT plug-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 a couple of methods of doing this: One, you can use Node JS to install it, and you can use the npm 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 to use. 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 download the source.zip file. 00:07:04 This source.zip file when extracted, I'll show you, has a very simple structure, and this is typically the 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 create command 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 provide us 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 first integrated mobile application.

Page 6

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're going to need to build our mobile app. In this unit, we're going to look at the programming knowledge 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 learn how to manipulate the document object model, and we're going to learn how to incorporate third party 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 SAPUI5 application. 00:01:02 Finally, we'll briefly look at some OData examples, and as we do all of this, we're going to be using 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 powerful about javascript and what makes it so relevant today, is that all mobile Web browsers support it,... 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 use to 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 is where we'll be loading our javascript code, through the body onLoad event, so we'll be using this load 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 can use 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 objects are 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. Json notation 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 denote properties and their values. So I will specify ColorName... and the property name, and the value is separated by a colon... so here's the value, and then I can have multiple properties defined in this 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 full object. 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

Page 7

GreenColor object as an empty object, and then just by referencing properties on that object, I'm adding properties to the object, so there I'm adding a color name and a color value. 00:04:17 And we'll see how the object gets built up when we debug through this application. Arrays in Json are defined between square brackets. 00:04:27 And here I've created another variable which starts with square brackets, and all I've done is I've listed a number of objects inside the square brackets. 00:04:39 You can see that I can do an inline definition of an object and also refer to existing objects in this array list. 00:04:50 Finally, an array is also an object, so I can just define another empty object and assign this array that I've created to another property on the object, as I've done here... so we can see that colors is now a property of this myData object which I've created. 00:05:10 Here is our first use of jQuery. So what we're trying to do here in this example is, we're going to take this color list that we've created, and we're going to dynamically create a dropdown of colors in an HTML element. 00:05:26 We're going to use this HTML input called Select... so you can see here that I've got this select tag, and it's got an ID called colors. 00:05:37 Normally within the select tag we have a whole load of option tags which define the dropdown list, but we are going to dynamically create that dropdown list with javascript. 00:05:51 As you can see here in javascript we have the typical program structures like If and For, and here I'm just checking to see that the length of my color array is greater than zero, and then I'm using a typical For loop to get direct through that. 00:06:10 In order to get the tags from my document I'm using a selector — this is called a CSS selector — and the hash represents that I want to select a tag in my document that has got the ID Colors. 00:06:28 And this is just using the jQuery notation to do that. Once I've got my ComboBox back, which is really just a Select tag, I can now add options to it dynamically with my javascript code. 00:06:44 Another great thing about using jQuery is that you can chain commands together, so here you can see that I'm using jQuery to create a tag, and then I'm using the result of that to set that tag's value, and then I'm using the result of that to set the inner HTML value of that tag, so I'm setting the value of the tag to ColorValue and the inner HTML to colorName. 00:07:11 So let's run through this in the Chrome browser so that we can debug through it. So I've already started this up, and we can see that I've got the Chrome debugger on it. To get to the Chrome debugger, you just use Ctrl-Shift, and “i”. 00:07:29 So here we're on this blue color and I can just step over this, and we can see the structure of the blue color object that has been created, so it's colorName, colorValue. 00:07:38 And let's see how we build up an object... so we can see greenColor, it's an empty object, there are no properties in it, and then as we reference a property, it adds the property to that object. And then here with have the same structure. 00:07:54 And then when we create a colors array, you can see we create an array of objects, and we can look at each object and we see that they have also got the same structure. 00:08:06 Stepping through this, we can use a jQuery with our selector to get our ComboBox back, which is really just a Select, and then we can iterate through our list and add options to it, and eventually end up with a dropdown box with a list of colors. 00:08:32 So a very basic simple intro example, and I encourage you as a research topic to go online and learn some more javascript.

Page 8

00:08:47 So the next piece of programming knowledge we need to address is HTML5. HTML5 is the next major release of the HTML standard. It is still officially under development, but this hasn't stopped browser developers from supporting this standard. 00:09:07 In HTML5 revolutionizes the way in which Web applications and mobile Web applications are being built. It introduces a number of new syntax features such as video, audio, and canvas, and in 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 created a canvas tag, given it an ID again, so we can go and retrieve it using javascript, and specify its width and height. 00:10:04 You can see as this application loads up I'm going to run this RenderCircle function which is defined inside RenderCircle.js. Inside RenderCirclejs I have 2 functions: one which draws 2 arcs, so in order to draw my circle, I'm actually drawing an ring with 2 arcs, with a fill between the 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 have used 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 and Offset, 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 on the 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 and layout 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 be using the CSS3Basics.html. So CSS is defined between style tags, and you can see that I've defined 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 a specific width; but here, what we're doing is specifying a style for all divs, actually, within this page, 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 the hash selector again, which you've seen before, so I'm saying, all divs with this identifier need to have 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 to have 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 we have 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.

Page 9

00:13:55 So again, another research topic. There's a lot to learn about CSS. Just go online. It's very good to 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 we take the color list that we've been using before and we're going to now put it into an SAPUI5 application. 00:14:29 So SAPUI5 combines the power of javascript, jQuery, and HTML5 into a cross-platform, robust Web 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 learned on javascript so far. 00:15:04 We'll be using 2 files here again: the SAPUI5Basics.html file and the SAPUI5ColorList file. With SAPUI5Basics, just like any other javascript library, we need to import the script into our Web page. 00:15:30 And notice, I'm referencing an online javascript file, and this specific command does bootstrapping, 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 these additional tags, so there I'm specifying the style or the theme, and here I'm just specifying the sap.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 a specific 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 we had before, but here, instead of just using jQuery and manipulating the document object model directly, 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 model you can create in SAPUI5, but here we're creating a Json model, which means I can just assign my Json object directly to this model, and I will tell the SAPUI5 core that this is the main model that 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 got my 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. So I'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 to link a controller to my view, and then of course I need to specify how to create the content for my view. 00:17:42 In this createContent I'm creating a list; it's just a normal, typical list that you would see on a mobile device, and I'm specifying a few types, saying that it's a DetailAndActive, so it shows a title 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, so how do I bind the data to the UI. And in here, you can see that I'm specifying that I want to bind the colorName property to the title property of the list item, and I'm going to bind the colorValue to 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 can see that I'm specifying the Colors property which is, as you can see here, just this colors property 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

Page 10

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 colorListTap function... 00:19:16 And in my controller, I define this colorListTap function, and you can see, all I'm doing is just calling 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 an application 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 root div 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 to the 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 that device; 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, I create my model, set my model, create my view. And you'll notice that the create content wasn't called 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 my template, 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 to SAPUI5, 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 like an 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 mobile applications. And we'll delve into OData in a lot more detail in week 4, but for now I'd like to show 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 SAP NetWeaver 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 the service document for the service, and it's specifying the number of collections, or the collections that are available for the service. 00:22:52 So OData has collections and entities and functions. And the collections are collections of a specific entity type. So here, for instance, I have a collection of products. And in order to see that collection 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 list is bringing back, I just specify $metadata on the service endpoint, and this will bring back all the entities 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.

Page 11

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 equals 2. 00:24:03 So again, very similar to select statements, you can bring filters, etc., but we'll go into that in a lot 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 to bring 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 at these 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 the product, 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 to build 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 build a mobile application. 00:26:02 In the next unit, we'll be combining all of this knowledge together to build our first integrated mobile app.

Page 12

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 enterprise information 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 ES1 system. 00:00:46 The overall process that we'll be following is that essentially we will be building our application first as a Web application using SAP UI5. Then we'll be using Cordova tools to generate an android 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's a 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 that is 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 the product 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 this import that we used in a previous unit, and when you access this import for the first time you'll probably be challenged for a user name and password — just enter the credentials that were sent 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 business partner 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 just type in “product collection”... 00:02:58 Right, so this brings back all the products. Now, in our application we have a product list, and then we go to product details and then to the supplier. The supplier is actually a business partner, 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 this primary key in brackets and in inverted commas at the end of your URL and this will bring back the specific business partner with that key. And there you go, we have that specific business partner coming back. 00:03:53 So essentially, we now know how to use OData to bring back the data we need, and we need to see 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 Eclipse environment. 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 created for 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

Page 13

project; that project will be on your file system, and the project that I'm going to be using is MyFirstIntegratedWebApp, 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 in another 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 SAP UI5 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 into separate files to make the code a lot more manageable. We're also going to be using the central model 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 view I'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 called product list. Once again, I'll create an item template for this list, and I am binding the name and description 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 aggregated binding, because we are not just binding one object, but we are binding a list of objects or an area 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 see how we handle the navigate feature — sorry, as soon as I tap on one of these products, I need to 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 the source of the event. The source of the event is essentially the list item that we touched, and in order 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 that list, and I can now pass that object through to the product list detail so that I can show the detail of 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 had an application object which we added pages to, and then we navigate using that application object 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 actually create that product object as your data that you're sending through to your product detail. So let'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, and this 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 the ProductDetailcontroller, 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 binding context for this view to that data, so it means I'll show that specific product's data. In the ProductDetail.view it's slightly different: although we're using a list, we are not doing an aggregation 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 that we've already set.

Page 14

00:09:58 So here I'm just using name, description, price, and I'm also using the supplier name. Notice here as well that I'm creating some custom data for this list item. It means when I click on this list item 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 to use to do an additional query to the business partner collection in order to get that data and display 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, so the binding is quite sophisticated, in that I can specify a formatter for my binding. Now in the product information that I get back from the server, I get a URL, but it's not a complete URL, so the base of the URL is not there. So I've created a formatter to add the base of the URL to the value 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 is actually 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 that doesn'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 up another Chrome browser with this command line parameter, it's still not going to work. You have to 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 item and 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 this query right in the index file, in a script. So I'm doing like we did in unit 4, an OData read. This time 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 my model. 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 the core 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 by the app view. 00:14:36 So the app view is just a view like any other; the difference is that it contains an application object. So what I've done here is within the app view I've created an application object and I've set 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 as pages 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 app and 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 query when we select the supplier. So let's just look at an example of that. If I click on the supplier Page 15

now, what it should do is make an OData query and bring back the business partner record, and then 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 the SupplierTap 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 I got 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 data object is passed in to the event with this source object. So in this product detail controller now, I can use that ID, and I can use it as part of my OData query, like we did in the beginning, to go and 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 that supplier ID as a parameter. And when I get it back, all I do is an app to to get it back to the supplier detail and pass in the data I received as the binding context that will be bound to the supplier 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 the individual 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 into a hybrid Web container. So in this next part of the process, what we're going to be doing is we're going 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, seeing where we need to embed our web assets, seeing what modifications we need to make to the default Web assets that are put there. 00:18:17 And additionally, we'll do some modifications to the container. Especially if you are making a long running query as the application starts up, you may need to do something like adjust the load time-out, because Cordova has a load time-out of 2 seconds. So if your initial query to the back 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 to generate a Cordova project. In order to do that, you need to navigate to the Cordova source and also 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 see all the command line parameters. Essentially, to create a new Cordova or android project, we need 3 command line parameters. The first one is the path, where the source must go, the second 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.myfirstapp namespace, 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 actually got 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.

Page 16

00:21:15 Now we can actually go and look through this code. You can see there's a lot of files here. The important file to note from the beginning is this — config file — so there's some configurations that you can do in here, and especially later on, in week three, when we build our own Cordova plug-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. By default when we run this it will just show a Cordova logo saying device is ready. We are obviously 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 space and 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 it like 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 changes the 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 and all our views in here. Additionally, I've added data into the js folder, which we're going to use to do 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 comes defaulted, 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 event once the Cordova container is ready to start rendering html, and it's only at that point that I want to 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 on this 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've got my device ready here... and what I'll do is — Debug As — android application — this will take 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 through to our detail page, and of course, click on our supplier, do that additional OData call and get the business 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 and are 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 the considerations you'll need to take into account when deploying your mobile app into the enterprise 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.

Page 17

www.sap.com

© 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 its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP AG and its affiliated 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 only 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 additional warranty. 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 for additional trademark information and notices.