Sie sind auf Seite 1von 16

openS SAP Introd duction to Mobile M Solution De evelop pment for the En nterpr rise

WEEK 3, UNIT 1 00:00:12 00:00:24 Welcome back b to week three, unit o one. So far we w have deve eloped a bas sic, integrated d mobile application using the Hy ybrid Web Co ontainer and d the SAPUI5 5 application framework in week one. In week two o, we delved into the issu ues business ses face whe en they deplo oy mobile applications into the ent terprise. We also establis shed that the ere are variou us personas in such an organization o that have ty ypically non-f functional re equirements in i the mobile e context that t need to be satisfied. For instanc ce, there is th he IT infrastru ucture specia alist, who is concerned a around capac city, failover, and redund dancy. The IT T security off ficer is conce erned with se ecurity holes in the netwo ork. Line-ofbusiness managers m are e concerned w with evolving g requiremen nts and usag ge analysis. The T development manager wants w tools a and services s to consume e, and is conc cerned with the t total cost t of developm ment. Execut tives are con ncerned with protection of personal in nformation an nd company intellectual property. In this week k, we will loo ok at how we e start to satis sfy some of these t require ements by us sing the SAP P Mobile Plat tform to make our mobile e application enterprise-re eady. In this brief f introduction, we will reviiew the SAP Mobile Platf form cloud ve ersion's featu ures that were introduced in week two. We w will also have a look at the e minimum re equirements to make an enterprise-r ready app. As the nam me implies, th he cloud vers sion of the SA AP Mobile Platform is a h hosted mobile enablement service. An nd the trial ed dition we are e using is being hosted in the SAP HA ANA NEO cloud enviro onment. If you have not yet regis stered for yo our trial accou unt, please do d so now. W We will be usi ing the platform ex xtensively in all a the demos s and exercises this wee ek. So what are e the main fe eatures of the e cloud version of the SA AP Mobile Pla atform, and what w can we e add with this platform to o the toolbox x for the deve eloper and ad dministrator? ? ure is the abi lity to consolidate push notifications. n rm has its First of all, a great featu Each platfor own way of f doing this. We W use APN NS for Apple, GCM for Go oogle, Andro oid Base push in BlackBerry, and MPNS for Microsof ft. Once a de evice has bee en registered d for push no otification in e Platform, th he SAP Mob bile Platform provides a single endpoin nt for pushin ng messages s SAP Mobile to a device and abstrac cts the need t to deal with each e provide er separately y. Another aspect that var ries greatly fr rom company to company is the user r repository and a authenticat tion mechanism. The clou ud version of f SAP Mobile e Platform pr rovides a com mmon security infr rastructure and a supports a variety of commonly used authentiication mech hanisms. This is set up u centrally in i the cloud, so for the most m part, a mobile m develo oper can dep ploy their app p to multiple businesses with w different t security with minimum to t no impact on their code. This author rization mech hanism is als so then used in the onboa arding proce ess. Without the t onboarding g process, an n SAP Mobile e Platform clo oud-enabled d application cannot comm municate to the back en nd, and henc ce provide tha at first level of o security ex xpected of e enterprise apps. Other featu ures available e are two-fac ctor authentic cation and a CAPTCHA a approach to prevent denial-of-se ervice attacks on enterpr rise ports. An nd of course, all commun ication from a device to the cloud ve ersion of SAP Mobile Pla atform is enc crypted via HTTPS. Each applic cation define ed can have a service end dpoint. And the t cloud ver rsion of SAP P Mobile Platform ha as the ability to rewrite UR RLs in HTTP P responses, adding furth her protection n to an enterprise endpoint. e More often, , however, IT T security do oes not wish to t allow inbo ound connect tions via thei ir firewall.

00:00:41

00:01:12 00:01:23

00:01:36

00:01:49 00:02:01 00:02:13

00:02:46

00:03:03 00:03:18

00:03:39

00:03:56

00:04:10

The cloud version v of SA AP Mobile Pl atform cater rs for this with h the SAP HA ANA Cloud Connector, C appliance th which is a Linux-based L hat can be ins stalled in a virtualized v en nvironment, providing p reverse-pro oxy-type features to prote ect the integr rity of an ente erprise firewa all and DMZ. 00:04:34 For adminis strators, the cloud versio n of SAP Mo obile Platform m provides ce entral administration of apps. Using g the cloud version v provid des the administrator with logs and th he ability to create c and manage ap pplication mid ddleware com mponents. And A some bas sic lifecycle m management with application versioning. rting on application Finally, the cloud versio on provides s some analytic cs and easy-to-use repor usage char racteristics. So we have e some tools s that we can n use. I certainly think tha at some of the ese are the minimum m required to make our ap pp enterprise e-ready. First we have the conce ept of what a an application n means in th he context of f the SAP Mo obile Platform, and that is ess sentially a m middleware en ntity representing our mo obile applicat tion and its setting, so that t it can be e centrally m anaged. We will onb board our use ers against t his middlewa are entity, an nd we will ach hieve this by y creating a connection with our app plication entit ty. We will wan nt to secure our o endpoint ts and we will create a se ecurity profile e that connec cts into the . This will ensure that wh security pro ovider for our r application. hen our users s access enterprise data, , they will alw ways be chal llenged for c redentials. When we re egister a con nnection with h our applicat tion, we will receive an a application co onnection ID from the SA AP Mobile Platform. Any subsequent calls we make through th he platform will w require us to embe ed this ID in the request. T This is used by the platfo orm for monit toring and tra acing purposes. So this brin ngs us to the end of the S SAP Mobile Platform, P clou ud version, re review. I hope that we have some clarity at this s point as to why we're using u it and what w benefits s it brings. In the next unit, we'll be looking at setting up ou ur application n in the SAP Mobile Platf form.

00:04:53 00:05:05 00:05:14

00:05:27 00:05:36

00:05:51

00:06:08

Page 2

WEEK 3, UNIT 2 00:00:12 Welcome back b to week three, unit tw wo of this co ourse. Now th hat we have a good idea as to what aspects of the t SAP Mob bile Platform m we'll be usin ng, in this un nit we'll be cre reating our fir rst application configuration for our inte egrated mobi ile application. In this unit, we will cove er creating an nd configurin ng our application object. We'll be set tting up an application endpoint and, of course, , creating a new n security profile for ou ur application n. We will also o have a look k at a numbe er of settings s that we'll no ot be using in n this week's s lessons, but they will be ecome releva ant in weeks to come. So first, let's log on to our o SAP Mob bile Platform account. You u can find the e link to the admin logon n page in the e links provided for this un nit. If you hav ven't register red yet, I rec commend tha at you go register now w. Of course, I am register red, and we'lll just log in with w my SCN N credentials. . First I just need n to paste the URL U into the browser. Right. So th his should br ring you to th he SAP HANA Cloud Plat tform cockpit t. In order to get to the SAP Mobile e Platform, what w we need d to do is go to Services and a then clic ck on SAP Mobile M Platform, enterprise edition, cloud v version. You should d now see a page p with us sage statistics and a varie ety of tabs an nd functions. You should be familiar with this inte erface from w week two. To create a new applica ation, you ca an either click k on the quic ck link to the right or go to o the Applications tab and click on the Ne ew button. So let's go to Applicatio ons and click on New. An applicat tion definition n in the cloud d version of SAP S Mobile Platform nee eds a minimu um of a unique app plication ident tifier and a u unique name. In a multi-a application en nvironment u under a single e tenant, it is s good practiice to use na amespaces to help uniq quely identify y your app. S So I'm going to t use com.o opensap.myf first as my ID D. In fact, I'm going to copy that and use u it for the name as we ell. The rest of the fields are optional, b but I will fill them in here nonetheless. n And then we w just click Save. S This will bring us to the settings pag ge for our application con nfiguration. So we now have a new application, but as you can c see in the bottom left t-hand corne er, there are e configuratio on that need d to be addre essed before we can save e the applica ation. errors in the The first err ror is that the e endpoint is s not set up. What W is this endpoint? It is just the se ervice endpoint that we have been b using a all alongthe e one that is provided by the SAP De eveloper Center ES1 1 system. Ou ur SAP NetW Weaver Gatew way OData endpoint. e I wiill just copy and a paste this endpoint into the fie eld provided. . I have this endpoint e in the Notepad here. Let's ju ust grab it an nd we can co opy it into this s endpoint here. We have a couple of se ettings here. The first is a radio button n indicating w whether the endpoint e is on premise e. We would require r the S SMP HANA Cloud C Conne ector in order r to use this option. o But since our endpoint is re eadily availab ble on the Int ternet, we are just going t to use the In nternet option. I will leave the Rewrite URL switch o on. This adds an addition nal bit of sec curity to our endpoint. e What this means m is that t we will be a able to acces ss this endpo oint from a dif fferent URL hosted in the cloud. If we didn't se elect this opt tion, we would have to insert the URL L we want to access in ests that we s send to the cloud. c Essentially, we cre eate some an nonymity for the header of the reque our enterpr rise endpoint. The next se etting is whet ther to make e this service e an anonymo ous service o or not. What this essentially means is ba asically openiing up the se ervice to our app that can n access this s endpoint without providing credentials. There e are often ca ases where this t is require ed, and you would w have to enter the e technical us ser name an d password to use this mechanism. m W We, however, want to

00:00:29 00:00:42 00:00:52

00:01:12 00:01:26

00:01:45 00:01:56 00:02:06 00:02:13 00:02:25

00:02:51 00:03:00 00:03:05 00:03:11 00:03:25

00:03:52 00:04:07

00:04:27

00:04:57

Page 3

authenticat te our user, and a so we wiill not use this option. 00:05:30 So now we have set up p our applicat tion endpoint t. But there's s still the nex xt area that we w have to deal with, and a that is the lack of a se ecurity profile e. If we recall, from last w week, this is how we ed before the protect our enterprise connections a and ensure our o users are e authenticate ey can access ente erprise data. So let's go b back and set t this up. Clicking on the Authentication tab b brings us to th he settings page p where w we can either select an existing pro ofile or we ca an create a n new one. If th his is not our first app, an d our apps share s a security pro ofile, this is a useful featu ure. We will cho oose New he ere and I will type an iden ntifier for this profile. I will just use a simple identifier for this. Please note e that there are a additiona al configuratio on settings here h for this p profile. We have h the ability to ca ache credentials for a cer rtain time per riod, specified in seconds s. This param meter is typically used for perfor rmance, beca ause authenticating the user u on each h request has sa processing cost. We can als so specify the e number failled login atte empts before e the account t is locked, and a then further to sp pecify how lo ong that acco ount should remain r locke ed before it is s automatica ally unlocked. . This really helps preven nt brute force e attacks on our endpoint ts. We also ha ave this Enab ble CAPTCH A feature, which provides two-factor authenticatio on. In this case, when n a user initia ally onboards sor should I say, when an initial req quest to crea ate a new application connection is i madethe ey are not au utomatically on o board, ev ven if credentials are correct. Ins stead, the use er gets challe enged with a CAPTCHA image. The image is sen nt down as part of the HTTPS H response to the iinitial reques st. This can be b displayed to the user, who needs to enter the e read value and a subse equent reque est is sent to the server w with the CAPT TCHA value in the reque est header. Again, this is to prevent t brute force attacks on our o endpoints s. Next, we ha ave to choos se an authen tication type. As mention ned in week t two, you will see that in this edition we support four f types. We support t Basic Authe entication, S SAP Single Sign-On, SiteM Minder Singlle Sign-On, and a Client Certificate Authenticatio A on. We will just t be using Ba asic Authentiication here, but we enco ourage you to o have a look at the r with them. documenta ation on the other o authent tication meth hods and bec come familiar We will be taking t advan ntage of the b basic authorization provid ded by the S SAP NetWeaver Gateway y service we are consuming. Remem ber, we were e challenged for our ES1 user name and a password when w access sing the endp point from the e browser. We can use e this to auth henticate our r user. Note that t you will need to sele ect Internet ag gain because we e are not using the SAP HANA Cloud d Connector. So we just c copy in the URL U and we are done. Copy in the e URL...it's ex xactly the sa ame as our endpoint. And d then select t Internet. There is on ne setting tha at we did not address, but will become e relevant as s we start adding more d be an appl features to our applicati ion. Certainly y one of thos se security fe eatures would lication PIN. An applicat tion PIN is typically used instead of cr redentials an nd is usually used to unlo ock a data vault on the e device whe ere credentia als are stored d. Here is a great g use for the passwor rd policy settings tha at can be cen ntrally manag ged from the e cloud versio on of the SAP P Mobile Pla atform. If we select t this, we can n see that we e can specify y what length h and other a attributes tha at the application PIN must ha ave. We will g go into more e detail about t client-side s security conc cepts, such as data vau ults and application PINs , in week six x. What we ha aven't covere ed yet is the other tabs th hat you will see s here. The Push ta ab allows yo ou to set up p push notificat tion services for the four supported platforms: iOS, Android, BlackBerry, and Wind dows. We wil ll be using th his feature wh hen exploring g the benefits of the native de evelopment p paradigm in week five.

00:05:54

00:06:11 00:06:27

00:06:45

00:07:03

00:07:44 00:07:49 00:08:01 00:08:12 00:08:23

00:08:40

00:08:56 00:09:06

00:09:40

00:10:01 00:10:08

Page 4

00:10:29

In the Clien nt Resources s section, we e can specify resource bu undle files for r your applica ation. This is s a great plac ce to centrall ly manage th he string reso ources of you ur application n. A good ex xample, for instance, would w be to su upport locale es. Again, we e will address s this feature e in week five e. The last tab b allows four r custom sett tings values that t you can download a and use in yo our application. . We have cr reated our ap pplication co onfiguration and a set up ou ur endpoint a and security profile. And t means we can save it. we can see e here that ou ur status is th hat our application is con nsistent. That That is pret tty much all you y need to d do to set up an applicatio on profile in t the SAP Mob bile Platform. In the next unit, we will see what mo odifications we w need to do in order to o make our app use these features in the clo oud version o of the SAP Mobile M Platform, to make our application enterprise-r ready.

00:10:49 00:11:00 00:11:19 00:11:30

Page 5

WEEK 3, UNIT 3 00:00:12 W Welcome ba ack to week three, unit thr ree of this co ourse. So far we have rev viewed the fe eatures and b benefits of us sing the SAP P Mobile Plat tform. And we w have set up u our first ap pplication us sing the a admin tool. But B before ou ur application n can take ad dvantage of these t mobile e enablemen nt services, w we need to le earn how to use the SMP P Cloud APIs s and incorpo orate them in nto our applic cation. In this unit I will w demo us sing the SAP Mobile Platf form Cloud client c APIs to o onboard an n application user by crea ating an appli ication conne ection. In the e process of creating this application connection, w we will receiv ve back an application a co onnection ID D, which we'll need to use e in subsequent calls t through the platform. p Requests witho out an applica ation ID will be b rejected b by the SAP Mobile M Platform. So o we'll need to o provide a w way of injecting an applic cation ID whe en calling our services f from our app plication. T The cloud ve ersion of SAP P Mobile Pla atform provides a REST API A in OData a service doc cument board a user v version 1.0 format. f Essentially, to onb r, we are add ding an entry y to the connections c collection for r the applicat tion. So we'lll need to per rform an HTT TP POST, wiith a body, in n Atom XML f format. Let's s try this first with a REST T client so we e can see ho ow the reque ests and resp ponses are handled. m this POST, we're firs rst of all going g to need a URI. U The UR RI for our con nnections In order to make a are going to look similar to this, wher re we have a base URL, which w has an n optional pu ublic section, , OData applic cations, a ve ersion, our ap pp ID, and th hen reference e to the conn nections colle ection. S So let's build d up the URL L. W Well the first t part is quite e easy becau use we just need n to copy the base UR RL of the adm ministration t tool. And it's the same ba ase URL for creating con nnections and d calling thro ough the plat tform. S T next par rtwe're not t going to use e public beca ause we require that the So we'll just add that in. The ticate themse elves. Public c is used for anonymous a connections . We're going g to use user authent o odata/applications/latest and then ou ur app ID. So o what's our app a ID? Our app ID is com.opensap.myfirst. c S t in. And then refer to the Connect tions collectio on. Here we go. So let's put that S So now we can c put this into REST cl ient and use it to make a POST. Here e we go...tha at looks right. That lo ooks correct. S So we need to make this s a POST req quest, and th hen we need to add a bod dy. The body y is (I've got o one here)...a a body is ess sentially...we ll, it's in Atom m format, so it's got a lot tags around it. But the e essential par rt of the body y is just this DeviceType, , and here yo ou can see w we're specifying Android in the Device eType. Now, a conn nection objec ct can hold a lot of applica ation settings s, and one of s is this f the settings DeviceType. . There are other o settings ssuch as phone p numbe er and IMSI n number and whether w we're using push p notifica ations or not that can be e posted up to t this conne ection. But he ere, just to s start it off, we just need to t have this D DeviceType. W We have one e last thing we w haven't do one yet, is we w haven't authenticated o our user. So I'm going to g go to the Aut th section, and you can s see here that I've put in my m user nam me and my pa assword to a authenticate myself. This s is effectivelly the same thing t as putting in an aut thorization he eader with a v value Basic, and then a Base64 B enco oded user na ame and pas ssword. S asically read dy to kick this s off. So if all goes well, we w should ge et back a 201 1 Created So we are ba response. So o let me play y that. A And it looks like we did. We W got a 201 A if we go look in the bo ody of the re esponse, we 1 Created. And can actually see the resp c ponse that w we got back. And A we can also a see a w whole lot of application s settings that have come down. We ca an see an ap pplication connection ID t that is being provided to us. This has also been provided to us s as a cookie e in the respo onse header r. Y You can see e a whole lot of informatio on. Bringing down d the push informatio on, even brin nging down t the password policies tha at can be de fined on the admin tool. S se more of th hose in later units. So we will us

00:00:38

00:01:15

00:01:47

00:02:14 00:02:18 00:02:39

00:03:11 00:03:27 00:03:48

00:04:17

00:04:43

00:05:11 00:05:26

00:05:54 00:06:12

Page 6

00:06:20

S So we've ma anaged to do o this with a R REST client, however we e still need to o be able to do d this w within our ap pplication. To o incorporate e it into our application, we w are going to have to le earn how to d do the same e process in JavaScript. J I've created us a...well, before b we do o that, let's just go and quickly have a look at this connection c w we've create ed. So we should see a c connection no ow...oh, I'm not n logged in n. Let me log back in. W We should be b able to see e a connectio on that we've e created. Th here it is. A And we shou uld also be able a to compa are that code e coming bac ck to the cod de we got in the t REST c client. It start ted with bb5c...and it sho ould be bb5c c. Let's magn nify that so w we can see it. Y Yes. It's definitely the same number. Okay. Great t. e got a project that we ca an use to learn how to do o this in Java aScript. It starts off with Okay, so I've t this HTML fil le, which is called c Onboa ardingBasics s. And in this HTML file w we've got two buttons a and we're ca alling two Jav vaScript func ctions. T The first one e is to connec ct our applica ation, and all of this is de efined in Onb board.js, so le et's go to Onboard.js. Y You'll see that I've put in all the basic c information we need, su uch as the ba ase URL, our app name, user name, password, p et tcetera. We h have a succe ess and error function, an nd then we're setting up t the request. at is all we ne eed in terms of body beca ause we are posting this request Interestingly enough, tha f from JSON. JSON is much more ligh htweight than n Atom XML. tion request is i specifying our URI. Ou ur headers you can see e I'm doing an n Our connect a authorization n, and I'm do oing a Base6 64 encode of the user nam me and pass sword. The method m is POST and I'm specifying g to use that connection data. d And the en we post th he request. Let's L see how this wor rks in the bro owser. Let's go to Properties, P gr rab that URI, and then we e can go pas ste it in the br rowser. Okay. We ca an go into de ebug mode, a and I've got a couple of breakpoints b h here. We're going g to break here fi irst, at the re equest, so I w want to show w you what this request lo ooks like. And d then if all g goes well we e should get an onSucce ss. If we get a failure, the e two main fa ailures that we'll w probably get t is either a 403, 4 which sa ays it's forbid dden, or a 40 01, which me eans that our r credentials w were incorre ect. Now, what can c happen is s that when t these reques sts are made e from a brow wser, the coo okie data t that is return ned from the response ge ets saved and forwarded on with the n next request t, which same applica c could cause us to try and d create the s ation connec ction ID in a r row, which is s forbidden. S ent that from happening, all we have t to do is clear the cookie So that's why we got a 403. To preve cache of the browser. c Let's try this out. So let me m click on C Create Conne ection. We co ome through h here. Let pu ut on the magnifier so o we can see what's going g on. S So here we'v ve got our co onnection da ata, very simp ple. And here e we've got o our request. You Y can s see we've go ot our data again a in here . Headers is just our auth horization he eader. Metho od POST, a and then our r request UR RI, which is th he same as what w we've been b using be efore. Okay, let's ru un that and see s if it goes through. Okay. So we e hit onSucce ess, which is s really great. And you ca an see we go ot an applicat tion c connection ID backit's a new one. A And if we loo ok at data, we w can see th hat there's a lot of information here. h This is all that same e information n that was re eturned in the e body of the e response in the REST clientpass sword policy , etcetera. hould tell me e that I create ed a success sful connectio on and the ID D is there. Great. Let's run that. It sh A And now what we can do o is actually g go back to our admin and d refresh this s, and now we w should s see two conn nections. That's great. W We've got one e Windows and we've got t one Android. Excellent. S So that's working. S arned how to o incorporate the request into our code, but we'll n need an additional So we've lea s screen to us se this in our application b because we'll need to capture the cre edentials inst tead of hard

00:06:40

00:07:04 00:07:28 00:07:38

00:07:58 00:08:10

00:08:24 00:08:37

00:08:57 00:09:10

00:09:40

00:10:08 00:10:17

00:10:40 00:10:38

00:11:11

00:11:38

Page 7

c coding them. So in the projects...I'll s show you a project p here. In the projec ct MyFirstEnter rpriseReadyW WebApp, I've e incorporate ed a very sim mple login sc creen. 00:12:22 Now that's th here. WebCo ontent. This v very simple login screen has a view c called Login.view. And inside Login.view, we have a page, a as before, bu ut we have an n additional e element here e, which is a f footer. So ef ffectively, wh hat I've done here is created a normal list view wh hich has got two t inputs in it, so it's got these two input list items s: one for use er name and d one for pas ssword. And I specify the content to be c e Input control types. You u can see in the passwor rd one I've to old it that it's a password t type so it wo on't show the e password a as we type it. And then at the bottom, at the footer r, I've added a Login butto on, which we e can, you kn now, respond d to the tap event e and the en perform all a those o onboarding pieces p that we've w just lea arned how to o do. S So all those onboarding pieces are im mplemented now inside the controller r. So the Log gin.controller has this login nTap function, which is li nked to the Login L button. A And here we e are again setting up our r basic param meters for ou ur URI, formi ng our URI. Again, we have an onS Success, and d we have an n onError fun nction. Again, the connect ction data is very v similar. A And we're just basically using u the sam me JavaScript that we us sed in our On nboardingBa asics e example. w that means m that it should take us to onSuccess, but in o onSuccess, we want to If this code works, now do an additional lookup. We wan nt to go and look for prod ducts. ngs us to ano other aspect t which I'd like us to look at. And that is the application Now this brin c connection ID. We got ba ack the appliication conne ection ID when we create ed this new application a connection and c a we will be using this ID for each call c to our en ndpoints, our r services, through the platform. Thi is is basically y the key pie ece of information that is required for reporting in the t cloud It's very usef v version of the SAP Mobile Platform. I ful for tracing g, as well. We e can use it to isolate log files that we're interested in. W We will use this t connecti ion ID by add ding X-SUP-APPCID hea ader into the request mes ssage. Let's t try this out with w an example through t the REST cli ients. S So first of all l, let's look at t how we for rm the URI fo or making req quests to our r endpoint th hat we've d defined in the platform. A All requests through the platform will have this ba asic format, will w have our cloud base, as we had before, publi ic if it's anony ymous, and remove public if it's not, and then we e will have the e c connection name. n When we created our applicati ion and we added a an end dpoint to it, it t a automatically y created a connection c n name that is the t same name as our ap pp ID. S So our URL is going to lo ook as follow ws. It'll be the e base URL. It will then ju ust have our app ID. S d that rewrite e URL, this endpoint now actually is a proxy for ou ur back-end So because we specified the REST client. e o let's go and d use that in t endpoint. So S So I'm going g to add this in i here. I'm g going to switc ch the magnifier on. So t there it is. In this s scenario, we e are going to o need the a pplication co onnection ID, , so I'm going g to copy this s application c connection ID and I'm go oing to put it into the head der. Let's go to Header, a add a new he eader called X X-SUP-APPCID. Specify y the value, a and then add d it. A Also, the me ethod we're going g to use is a GET, be ecause I wan nt to get data a. And then th he Auth remains the samewe also a need to send an Aut th with every message. s now, theore etically we sh hould get the e service doc cument. So le et's run that. Ah. We've If we run this g got an argum ment exceptio on. Oh, I've g got two HTTPs here. So that's a prob blem. Let's ta ake this one a away. Here we w go. Let's try and run t that again. Okay. Going g through, we e've got a 20 00 OK, that means m the res sponse was correct. And d if we look a at the body, we should actually just b be looking at our service document. A And there it is s. We're s seeing all ou ur collections s that we wer re seeing bef fore. That me eans that I s hould be abl le to just a append Prod ductCollectio on to the end of this URI and a I should get back all my products s. A And there yo ou go. Another 200 OK b ack, and her re we have all a our produc cts back. that's great. S So how we'v ve incorporat ted this into t the code, is that t after a lo ogin (let me s switch this of ff)in our Login.contoller, in our on nSuccess fun nction for cre eating the con nnection, I go o and get the e data

00:13:29 00:13:45

00:14:17 00:14:29

00:15:04 00:15:18 00:15:31

00:15:59 00:16:16 00:16:34

00:17:20 00:17:30

00:17:53

00:18:28 00:18:40

Page 8

model, and I capture the APPCID as part of the data d model so we can use e it later on. 00:19:10 or. If we hav I then create e two more ca allback funct tions: one for r product and d one for erro ve a s success, and d get the dat ta back for th he product, I set the result to the Prod ducts variable e or member on the t data mod del and push h that data model m back into the system m. And then I tell the a application object o to navigate to the p product list. Y You can see e the only ma ajor differenc ce here is tha at our header rs, in addition n to the auth horization, w we are now also specifying an APPC CID. So let's try th S his out. Let's go to index, let's go and grab it, go to o Properties . And we can n run this in t the browser. . A Alright. We need n to spec cify a fake UI . Specify Android as our fake OS, an nd that looks a bit better. Okay. Let's also a incorpor rate the debu ugger. And le et's look at th he Login.con ntroller. S So I have ac ctually pre-em mbedded the e user name and password just for de emonstration n purposes. Obviously, normally n you wouldn't hav ve this. I've actually a boun nd the user n name and password right in the beginn ning. If we go and look at the index...actua ally not here...it's actually in the mode el.js file that I created. So in the model.js file I created, I initializ zed the mode el with additio onal membe rs, which is user u name and passwor a rd. And then in the login screen, I bou und that user name and p password to these inputs. So th hat's what's showing s up. B But now I can basically ju ust click on L Login and it should s go t through the process. p Before I do that, t let me clear c the cach he, because we were using the brow wser to create e c connections. So let's make sure that the cache is s clear and it doesn't give e us an error back. Clear browsing data. Okay, gre eat. S ould be able to log in. It s should do the e initial regist tration for ad dding of a connection, So now I sho a and then do GET the pro oduct list. An d there we have h the prod duct list back k. S ee three app plication conn nections now w in our back k end. Within the admin So actually, we should se t tool. So let me m go and re efresh this...o oh, we logged d out again. Let me log b back in. A And let's go and look at our o Applicatio ons. Let's go o look at App plication Con nections. An nd we can s see that we have three application a co onnections, which w makes s a lot of sens se. S ve seen how to integrate this in. So now we'v W We can also o go and now w look at the llogs on the platform p and see the requ uests that ha ave been c coming throu ugh. For...I th hink this one e is our latest t one...we ca an just go loo ok at Logs. And A we'll c choose ALL. . We'll choos se everything g. Do a Searc ch. And you can see here e we did a GET, G and we c can even vie ew the trace for that GET T. You can se ee the interac ction in all th he messages s that are passed back k and forth. You Y can see this is the pr roduct data that is being r returned. So o you can do s some interim m tracing here e. Great. So. Let's go back here. So eve erything should just work k. The only a additions and changes t that we have e made is a login screen to capture cr redentials, cr reating an ap pplication connection f from code, and a storing th he applicatio n connection n ID returned d. And then u using a different endpoint t f for calling ou ur server and d, of course, including the e application connection ID in our hea ader. T This is great t; however, I don't want to o have to go through all of o my code a and add this header information into each req quest I make . I want to do o this centrally. And there e are many ways w to do t this, but in th he example code c I've cre eated a custo om HTTP clie ent for datajs s. Let's exam mine how this w works. S o back to the code and lo ook at this custom HTTP client. So wh hat this does, So let me go e essentially, is I've stored the old clien nt and then create c a new one. And in this newly created client, I just add c a the APP PCID into the request hea ader. In this way, w it doesn n't matter where I make a request. I won't w have to o specify the e header beca ause it will ju ust come in h here and it will w use this new HTTP client. c In orde er to use that t HTTP client...I've got an n example of f how to do th hat...is you w would basica ally need to tell t the datajs s OData obje ect that the default d HTTP P client is this s new HTTP c client. And in n that way yo ou can build up your own n client that changes the b behavior of your y HTTP

00:19:40 00:19:53 00:20:14 00:20:33 00:20:43

00:20:58

00:21:32

00:21:52 00:22:07 00:22:50 00:23:02 00:23:11

00:23:55

00:24:24

00:24:49

Page 9

c connection centrally c and thus leaves your code more m or less untouched. 00:26:06 W Well this brin ngs us to the e end of this u unit. In the next unit, we will w learn how w to take adv vantage of t the Hybrid Web W Containe er.

Page 10 0

WEEK 3, UNIT 4 00:00:12 Welco ome to week three, unit fo our of this co ourse. So far, , we've put to ogether a gre eat example of an application a th hat uses ente erprise mobility principles s. But one th hing we have not taken advantage of is the e Hybrid We b Container. Our cu urrent app wo ould run just t as easily as s a mobile Web applicatio on. But then it would run in a Web W browser on the devic ce, and we would have no o control ove er that Web browser's b feature es. In this un nit, we'll delve e into extend ding the Hybr rid Web Con ntainer to do things Web browsers can't. The tru ue value of a Hybrid Web b Container approach a is the ability to integrate de evice capabilities into ou ur application ns just as we would in the e native deve elopment par radigm. Here, we continue to use our J JavaScript an nd HTML5, however, h but we will use a bridge between JavaScrip ns. pt and native e implementa ations via Co ordova plug-in The Cordova conta ainer comes with a JavaS Script library that can exe ecute native code in the container. This is performed p fro om JavaScript using the code Cordov va.exec. The id dea here is ve ery similar to o a shell func ction to a call to call an O OS function. This T exec functio on takes five arguments. The first two o are callbacks, and requ uire you provide implem mented JavaScript functio ons that handle response es from nativ ve implementations. This is typic cally asynchronous in na ature. -specific. But in the The ne ext two arguments are ty ypically platfo orm- and imp plementationAndroid case, the service para ameter will map to a class s that implem ments the Co ordova plugin. The e action will map m more or r less to a me ethod in that class. The la ast argument is just an ar rray of JSON N objects that t can be pass sed as a par rameter list to the plug-in. The Cordova plug-in essentiallly has two pa arts: the Java aScript that w will call the plug-in p and respon nd to callbac cks, and the n native implem mentation. The native im plementation n will need to o be com mpiled into th he Cordova p project. This is done by adding a a new w class that extends e the Cordo ova plug-in class. To conn nect the Java aScript and the native im mplementation n together, we will need to mo odify the conf figuration file e that is part of the projec ct. Here, we will w map the service e name to th he full class n name, including the class s namespace e. For us, tha at would be com.o opensap.shak kesensor. The pr roject source e can be foun nd in the reso ources page associated w with this unit t. The plugin that t we'll be imp plementing is s one that detects the use er shaking th he device. To o do that, we'll be b using the Android A sens sor API. In And droid, we hav ve the conce pt of a senso or manager and a a sensor r listener. Th he sensor manag ger will register the senso or listener for a specific sensor, s and t the sensor th hat we'll be listenin ng for is acce elerometer e events. Essen ntially, how our sensor willl work is tha at it will be ca alled from Jav vaScript. We e will listen for mo ovement and when a thre eshold is reac ched, we will l kick off our callback into o our JavaS Script code. So S let's take a look at this s code. In this project, I ha ave implemen nted a class called Shake eSensor and d, as you can n see, it inherit n class. Cord ts from the CordovaPlugi C dovaPlugin has h this exec cute function, in which the ac ction that we specify in ou ur JavaScript t code is pas ssed in, as w well as the arr ray of JSON argum ments and a callbackCont c text. This callbackContex xt will be used d to execute e either the succes ss or the erro or function th hat we have defined insid de our JavaS Script. s also implements I have implemente ed the sensor r in a class called c WaitFo orShake. This runnab ble. That means that it ca an be execut ted as a thread. Since thiis is an asyn nchronous proces sswe are kicking k off a llistener and then we're waiting w for a s shakewe want w to run WaitFo orShake as a thread. I also implement th he interface S SensorEventListener so that it can be e registered as a sensor listene er. In this class, I have e three main n properties where w I hold specific valu ues. One is th he callbac ckContext, so this means s that at any time I can either call the success or the error functio on that will ex xecute the Ja avaScript. I also a need the e activityCon ntext to get system
Page 11 1

00:00:27

00:00:48

00:01:11 00:01:25

00:01:46

00:02:03 00:02:14

00:02:57

00:03:12

00:03:27

00:03:45

00:04:26

00:04:45 00:04:55

service es. And finally, I need a S SensorMana ager so that I can register r my sensor event listene er to listen for accelerome eter events. 00:05:28 Here in the run sec ction of this c class, you'll see s that I hav ve created a SensorMan nager by using the t activityContext. And then I've use ed that mana ager to regist ter this class to listen for accele erometer-type e events. I also check to see e if the accele erometers ac ctually suppo ort it, and if it t's not suppo orted, I will use the callbackCo ontext to pos st an error message back k to the Java Script code. If all is s well, and th he sensor is llistening, we will go into a loop where e we'll wait fo or a sensor shake event. Our se ensor listener has to impllement an on nSensorChanged method d, and in this s method we listen for f accelerom meter-type e vents. Once we get an acceleromete er-type event t, we can get t changes in the x, y, y and z coor rdinates. And d we can use e those chan nges to determine the speed of change or o the velocity y. If that velo ocity exceeds s a certain th hreshold, then we are going to detect a shake. s And w we set the shakeDetected d Boolean va alue. This will n-register the w drop us th hrough this lo oop. And at this t point, we e'll need to un e sensor and we will also cr reate a beep and then us se the callbac ckContext to call the succ cess JavaS Script function n and pass in n a message e. And we'll pass p in this m message, Sh hake detect ted! So we e've got the native n implem mentationth hat's the one e part of a Co ordova plugin n. We also need the t JavaScript side. So the e JavaScript side is in ind dex.js, and I'm m using this onDeviceRe eady callback k to implem ment this cod de here. Here e you can se ee that I've cr reated an err ror handler and a I've also create ed a success callback fun nction. In the error handle er, I will just s spit out the error message and in succ ccess, I will show a messa age, but then n I will also st tart the shak ke sensor aga ain. Here, to start the shake s sensor r, you see we e are using the Cordova. .exec functio on. We're passin ng in the succ cess and the e error callba ack handlers. . We're sayin ng which serv vice we're going to use, and we're w specify ying the actio on. Now, to t connect th hese two toge ether, we ne eed to connec ct the service e to the class s. This is done inside the config.xml file. And here yo ou can see, at a the bottom m of the config.xml file, I've ad dded a featur re called Sha akeSensor, which w is my service. s And I've mapped d that to the full cla ass name, inc cluding the fu ull context. I think that we are ready to test t this. So what I'm going to do is just right-click on n ShakeTest and we will Debug As>Androiid Application. Okay, it should be ready now. So all we ha ave to do is shake the dev vice. And the ere you go. You ca an see that a shake is de etected. Shake it again, and a we even hear our beep there. One more m time. Gr reat stuff! So tha at brings us to the end of that section. We've deployed it to a r real device. We've W tested d this sh hake plug-in. But what no ow? So in the t next unit, what we're going to do is utilize this plug-in to en nhance our user u experience.

00:05:47 00:05:58 00:06:12

00:06:47

00:07:09 00:07:17

00:07:32 00:07:44

00:08:03

00:08:30 00:09:02

00:09:20 00:09:30

Page 12 2

WEEK 3, UNIT 5 00:00:11 Welcome back b to week three, unit fiive of this co ourse. In this unit we will a address editing and saving data a back to the system of re ecord, which in our case is an SAP N NetWeaver Gateway G system. We e will also be e integrating t the Shake Sensor S we de eveloped in u unit four into our application. . ack-end syst In this unit, we will look at how to cre reate a simple OData upd date to our ba tem. So far, our application has only y really been read-only. We W will cover r OData in m much more de etail in week four, so this s will just be a quick intro o. Since we've e gone to the e trouble of c creating a Sh hake Sensor plug-in, we w will be using this shake sensor to put p our applic cation into an n edit mode. We will then edit the data a, which will automatically update the model bec cause of two-way binding, two-way da ata binding, between b the UI and the model. Finally, we'll use the Sh hake Sensor again to initi iate saving th he change to o the back en nd. To illustrate e how to update with ODa ata, once again we're going to be usiing a REST client. c An update requ uires us to us se an HTTP POST but we'll w use the PUT P method d. In HTTP RE EST client, I have already y created an n application connection, and we can see that this s application connection has h been ret turned to us. So there's our o applicatio on connectio on ID. I'm goi ing to go and d copy it from m the body it'll be easier. Let's go and cop py it from the e body...and there it is. Okay, great. So in order r to do an upd date, first of all we need to have the record r that w we're going to o update. And there are a some add ditional head ders that we need to add for NetWeav ver Gateway y, because NetWeaver r Gateway ha as additional security policies around updating da ata. So let's first t of all just cr reate the X-S SUP-APPCID D header. Ok kay, good. An addition nal header we e will need in n order to up pdate an entit ty is that we' ll first have to fetch something called a csrf token. This token is used as a secur rity mechanis sm to preven nt unrecognized updates to t the back-e end system. So here we e have to put in an X-CSR RF-TOKEN header h and we w need to s specify that we w want to fetch a toke en that we ca an use in an update to the back-end system. s So I''ll just put Fe etch in there. Next, we want a GET. I'm going to u update a bus siness partne er record, so I want to get a business partner first t. I've got a specific s busin ness partner that I want to get...and th here it is. So o I'm going to o get a specif fic business partner. The e Auth is the same. I'm no ot using the B Body becaus se it's a GET. My Header is set up to talk thr rough the clo oud with the APPCID and d also get a CSRFC eaver Gatew way system. So S I can upd date this reco ord. TOKEN from the NetWe So let's pos st this and se ee how it goe es. Right. So o we got an HTTP H 200 OK K, which is great. That means we got g our recor rd back. Let's s look at this s..and we see e that we hav ve our business partner record back k. This is exa actly what we e wanted. Additionally y, you'll see that t we have e a whole hos st of headers s that have c come back as s well. You'll see, first of f all, that we have a whole e list of cook kies. These cookies c we h ave to send back as part t of the respo onse. In a Web W browser, this is autom matically done, but in our r case we need to be quite explic cit with REST T client. So I'm goin ng to Copy Cookie Name-Value Pairs, and I have to put this in n the cookies s of my request. So o we paste th hese in here and Add the em. There we e go. Also in the returned hea ader was the e x-csrf-token n. And I need d to put this i nto the head der as well. So I'm goin ng to copy thi is specific he eader and the em I'm going g to put it into o Header. So o this Fetch one we nee ed to remove e now, and w we need to ad dd the return header bac k. There we go. Now we're ready to be able a to upda ate the back-e end system. The method d we have to use is PUT. Remember r, POST crea ates a new re ecord. PUT updates u a new record. So further, we need the e body of the business pa artner in orde er to make th he POST request back. And I'm goi ing to use this body here . er. We can see But we nee ed to modify something. s S So let's modify, say, the phone p numbe s it's

00:00:32

00:00:48

00:01:07 00:01:15 00:01:30 00:01:48 00:02:11

00:02:31 00:02:47

00:03:05 00:03:28

00:04:03

00:04:24

00:04:45 00:05:02

00:05:30 00:05:44 00:05:59

Page 13 3

12345. Let's make it 5559000. 00:06:15 Our Auth is s the same. Our O Body is s set up. We have our cook kies to tell Ne etWeaver Ga ateway that we're a vali id updater. We W have our token and ou ur APPCID to pass throu ugh NetWeav ver. Well, to pass throug gh SAP Mobile Platform, cloud edition n. And we're using a PUT T. So everyth hing is working fine e. So there we e go. We got t a 204 No C Content, whic ch is the correct response e. An update e like this has s no respons se back from the server, s so a 204 means we succ ceeded. So now we know how to o do this in a REST clien nt. In fact, we e can go and get that reco ord back. Let's just do o a GET. And we should see now tha at our change e was indeed d updated to the backend system m. So let me put p the magn nifying glass on again, an nd let's see. W We wanted the t phone number cha anged. So ye es, there you u go. The pho one number came back c changed. So o that's great. We verified d that our upd date has actu ually worked. Okay. So th he next step for us, then, is how do we w do this in JavaScript? J I've got a pro oject that we e can use. Le et me go ther re. The proje ect is W3U5_ _Programmin ngKnowledge e > UpdateBasics. This is an extens sion of the previous HTM ML file. Here, I've added two t extra but ttons: one to get the business pa artner and on ne to update e the busines ss partner. We're W also goiing to be using this ConnectToApplication to t get an app plication conn nection ID. So let's run n this in the browser b and s step through h it. I've put a number of bre eakpoints in h here so that we can see exactly what t's going on. So first of all, I'm goin ng to go and create a con nnection to th his SMP Clou ud Version. There we go. g We've cre eated a succ cessful conne ection and we e got an app plication conn nection ID back. This application a connection c ID D we've actually saved to o this APPCID D. ng to get the So now I'm going to run n through get tting the business partner. So I'm goin e business partner and d request for X-CSRF-TO OKEN. So let me put p on the ma agnifier here again. If we look through h this code... .let me step over o this...and lo ook at the connection req quest. The co onnection req quest object has some ad dditional headers. We W have the Authorization A n, as before. X-CSRF-TO OKEN for the e fetch, to fetc ch the token. We've got the t APPCID. And then w we've got this extra heade er. And this is s to help us push p our headers an nd cookies through the SM MP cloud. So everythi ing is set up. . If all goes w well, we shou uld get a business partne er back. So le et's continue. Okay, we do d have succ cess, and we e do have our r business pa artner data b back. That's great. g So let me run that tit should give g me a po opup saying I have a business partne er, and it'll als so give me a popup saying that I've got g a csrf tok ken back. So that's really great. Every ything is work king. Now we can try and pos st a change back to the business b par rtner. So let m me click Pos st Change to Business Partner. P And here we're a actually going g to edit the BP. B You see that's our or riginal change, and we're going to change it to 12345. So let's step over and le et's look at o our connectio on request. Our connec ction request t looks very s similar as it did d before, ex xcept this tim me it's got a data d object embedded in it, becaus se we're doin ng a POST...w well, a PUT. So you can see that the method, I've e put to PUT. . Request UR RI is the sam me. And the rest r of the tok kens are pre etty much the e same except inste ead of fetch, I'm actually inserting the e token I rece eived back fr rom my origin nal call. So if all goe es well, I sho ould get a res sponse, but with w no conte ent. So let's r run that. And if we lo ook here, we e've got a suc ccess and we e see that da ata is undefin ned. That me eans we had no content. That means s we've got s success. We actually upd dated our bac ck-end syste em. Success! ! Fantastic. So S now we know how to update the back-end b sys stem using Ja avaScript. However, fo or our application, we are e going to ne eed to add a few things. W We're going to need to be able to edit, e or create an edit scr reen, for our supplier. So in the new p project, which h I'll show you now, I'v ve added an extra button n to the supplier screen. I've also add ed an extra page to the application, , which we can move to t to edit the co ompany name, the Web a address, and d the phone number. In this proje ect, what I've e also done is s I've incorpo orated the Sh hake Sensor r so that as we w get to the supplier page, I initiate this Shake S Sensor and onSuccess o fu unction of the e Shake Sen nsor will do
Page 14 4

00:06:43 00:06:58

00:07:42

00:08:21 00:08:29 00:08:43 00:08:58 00:09:08

00:09:45

00:10:17

00:10:33 00:10:39

00:11:04 00:11:14

00:11:39

00:12:09

the same fu unction as the Edit button n. So we can n shake the device d to get t into an edit mode, and then when we're in the editable scre een we can shake s again to save. So llet's go have e a look at that code so we can get familiar with h it. 00:12:48 00:12:55 Let me clos se this down, , and let's loo ok at this pro oject. This will be e in the MyFir rstEnterprise eReadyHWC CApp. So let's s first of all lo ook at the mo odifications I've done to o the App.vie ew. You'll see e we have ou ur Login and we have an additional SupplierDe etailEdit page e that has be een added to the app. SupplierDe etailEdit.view looks very s similar to the SupplierDet tail, except th hat I'm using InputListItems with Inpu ut controls, w which are aga ain bound to the business s partner obj ject, as before. So if we look at SupplierDet tail, we'll see that these are a bound ve ery similarly, but these are read-on nly. Additionally y, I've added an Edit butto on to the foo oter, just like I did for the Login button n for the login n screen. I've e added an Edit E button, a and of course e this goes to o editTap. Again, in th he Supplier Edit E I've adde ed another Edit buttonw well, another r buttonbut t this is a Save button n. Of course, this will kick k off saveTap. Additionally y, I've added source code e to the proje ect. I've adde ed the Shake e Sensor, as we had before. I ac ctually changed the shake e threshold a little, becau use it was jus st too sensitive. And then, of cou urse, you hav ve to link tha at as a servic ce. And you link it through h the config.x xml file. Finally, I've e got a functio on which init tiates the plug-in, and I'm m calling it fro om the contro oller. So if we go and look at Supp plierDetail.co ontroller, you' 'll see that on nBeforeShow w, what I'm doing d is that I'm starting off the Shak ke Sensor. A And my succe ess function will w take me to the Suppl lierDetailEdit t and push th he data of this view into t the SupplierD DetailEdit vie ew, so we ca an edit it. You'll also notice n that I use a setTim meout functio on here. This is so that as s I move to th he next view w and I start off o the Shake e Sensor, the e Shake Sen nsor's not pic cking up the llast shake. So S it gives it a little bit of f a delay. Oth herwise, it w would just bou unce back an nd forth. So let's test t this out on the device. So I'm goin ng to...let's se ee...get the d device up and d running. Okay. To te est this on the device all I need to do is right-click and Debug A As >Android Application. Here we go o. It should take a couple of seconds t to start up. Okay, it's st tarting up. And it shou uld come up with w our initia al logon scre een. Here you u go. We've got our initia al logon screen and I've already y embedded t the user nam me and passw word, so I ca an just log in. So login he ed. Let's go have a look ere is doing...creating an application connection... c Ah. That faile at the reaso on. Cannot create c applica ation connec ction because its ID alrea ady exists. I haven't h checked for that situatio on yet, but w what we can do d to resolve e this, if we g o back to the e administrat tion tool, is th hat we can ac ctually delete e the connec ctions there. So we're res setting the connections s. Looks like I need to log in again. Once we're e logged in, I will be able to go to all th he connectio ons and then I'm just goin ng to delete all of them. This means s I should be able to log in n without a problem. p Okay. So le et me log in. Now we get our product list back, as we had befo ore. So we can click on a product, as s we have be efore, and we e can go to product p detail ls, and then c click on the supplier. s And here we've w got our Edit button, which you can c use as a fallback, but t we can also o shake now and we can n get into an edit mode. A And then, of course, c we can c edit some ething and th hen, once we've edite ed it, shake it t back, kick o off the OData a call to the back b end, and d save the re esult. This brings us to the en nd of week th hree. Next we eek, we'll be delving more re into the se ervice side of f enterprise mobile m solutions.

00:13:20

00:13:46 00:14:01 00:14:13

00:14:47

00:15:22

00:15:41 00:15:46 00:15:57 00:16:20 00:16:30 00:16:37 00:16:50

00:17:22 00:17:35 00:17:59

00:18:48

Page 15 5

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.

Das könnte Ihnen auch gefallen