Creating mobile apps on top of SAP – Part1
As you might have noticed there is happening a lot within the space of mobile application development. Focusing on SAP applications and tooling there is Sybase on the one hand, on the other hand there is SAP Netweaver mobile platform, both frameworks apply to what we gently call „heavy frameworks“ – be assured you need several consultants and SAP trainings in order to establish this landscape within your company or your customer’s environment…
But there is another approach as well – it is not hyped the way Sybase is currently celebrated but for certain requirements applies much better than heading for a heavy approach. Of course you can use a sledge-hammer to crack a nut but there might be alternatives around.
During this series of tutorials we will come up with several ways of implementing mobile frontends for your SAP system. As we know that it is not on everybody’s agenda to buy a Macbook before we actually start creating iPhone/iPad user interfaces we will show ways of using powerful HTML5 frameworks which result in 100% iPhone/iPad look and feel, have a look at the following screen, this is what based on HTML5 can be achieved:
But dont be afraid – you do not need any HTML5 knowledge, all we will do is coding plain Java and trigger several Web Services. Btw., the same applies to Android applications we will show you ways of creating Android clients within minutes instead of becoming Android expert before you actually start your first application. And of course, in oft the last parts of our tutorial we will show you how to create native iPhone/Android apps.
You simply should keep in mind: this tutorial gives chance to anybody to create so called „instant value“ mobile apps – which path you follow is completely up to you and your requirements!
Tutorial Structure
1. „Boilerplate“: covers creation of backend web services within your ERP (covered within this document)
15/11/2010, Contact/Feedback: Pascal.Moser@resource.ch
2. „Eclipse Connect“: Eclipse IDE will be used as major development IDE. Before we actually hook the web service into a „real“ mobile client we will create all necessary Java stubs in order to access the SAP Web Services
25/11/2010, Contact/Feedback: Florian.Mueller@richability.com
3. „SAP iPhone handshake“: we will use the vaadin framework within the Eclipse IDE and create the mobile client which consumes the previously created Web Services
01/12/2010, Contact/Feedback: Florian.Mueller@richability.com
4. „SAP Android handshake“: creation of mobile Android client (based on Adobe AIR) accessing SAP Web Services previously created
release date follows…
5. „SAP native iPhone“: we will create a native iPhone client (Mac + XCode IDE required) accessing our SAP Web Service
release date follows…
Requirements
Each tutorial requires certain skills, software and hardware so we will create a brief list of requirements within the head of each tutorial. Please dont be afraid in terms of „I will fail as I have no clue on iPhone development…“, you do not need to know anything about mobile application development as we will show you during these tutorials!
Anyway, there are major requirements which should be met, you need to be familar (basic knowledge) with:
• ABAP basics („know how to fire up se80…“)
• Basic understanding of Web Services (SOAP)
• Basic Java knowledge
In order to follow this tutorial you will require:
• SAP ERP 6.0
• Netweaver >= 7.10
Any additional software you will require is explained within the tutorial such as Eclipse, SOAP UI etc..
The BIG PICTURE
Before we start the creation of SAP Web Service boiler plate we will give you some information on what we will be implementing and we will chalk out the very big picture of what we would call the architecture behind the application.
The Scenario
People told me (as I’m from the „Java world“ and did not go through all these SAP classes) that „FLIGHT BAPI“ is something similar to what Java guys call „Hello World“ in terms of everybody knows these BAPIS and everybody has these BAPIS around on his ERP system somewhere. So we will use these BAPIS and put a Web Service interface above these so you can access these BAPIS through the Web Service.
From the SAP point of view we are done as soon as these BAPIS can be access through a Web Service, of course you can turn/cover any BAPI into a Web Service and that is exactly the idea of showing you how to do so: you will be able to publish any BAPI you want as a Web Service and of course you will be able to put a nice mobile UI on top of your Web Service – so you FLIGHT BAPI as starting point, as soon as you got the idea start applying your knowledge to customer projects…
We will do some simple calls based on these Web Services, we will trigger a flight search passing in departure as well as destination and our mobile device will display the query results:
As already said we do not want to bother you with XCode development during the first parts of this tutorial – all UIs will be created based on alternative technologies such as HTML5. Please have a look into the following scribble, this sccribble chalks out the very big picture of what we will be implementing.
Within the current tutorial we will create everything which is grouped in the grey box at the bottom of this scribble. The blue box applies to what SAP calls Reverse Proxy, please do not focus on security aspects when working through the first parts of this tutorial series now – we will cover security aspects in a dedicated tutorial! We simply refer to the blue box as „Java client layer“, the blue box is used in first place for generation of HTML5 through frameworks such as vaadin & co…
No that you got the big picture it’s time to get the grey box working – so let’s roll up one’s sleeves and create some Web Services within our ERP!
……………………………………..
Unfortunately using images within SAP blogs is pretty nasty and takes a lot of time – nothing you should care about, but reason enough for us to reference the article as a PDF doc, the PDF mirrors the whole part 1 of this tutorial, whole article is hosted at:
thanx for your feedback, we're always happy to receive and discuss feedback!
But basically I'm not sure whether we have the same understanding of what is being explained within the article: on the one hand we turn FMs to web services (not web pages...), but basically that's just the first part, kind of base, for further activities: next thing we do is putting an iPhone Layer on top of thses services and we will create the iPhone layer based on vaadin, which gives us the native look and feel displayed within the screenies...so please consider the "big picture", that's just the first part of a series of tutorials using these web services...keep patient, next article will get you much closer to what we will be doing! 😉
Cheers, Florian!
Great job: this looks very interesting.
To maximize the audience, I would suggest to have all SAP screenshots in English in the PDF. 🙂
Best regards,
Guillaume
thanx for your candid feedback!
Yes, we will improve the blog/tutorial style from "DEnglish" to plain English...! 😉
Cheers, Florian...
As I saw that you were exploring different ways (iPhone/HTML5, AIR app for Android, ...), I wanted to ask you some questions:
1. Have you explored/considered an approach that would not require an additional server between your mobile app and the SAP backend system?
2. Any experience with the Packager for iPhone tool from Adobe (http://labs.adobe.com/technologies/packagerforiphone/) in direct connection to SAP backend (also using WebService)?
Many thanks in advance for your insights.
Best regards,
Guillaume
regarding your first point: from my understanding you can simply skip the tomcat box and put the vaadin servlet to your Netweaver directly, *** all vaadin requires is a servlet container...NW 7.3 (JEE5 certified) should work, we will test as soon as ramp up starts...
Your second question regarding iPhone Packager from Adobe: no, we did not test - but giving advice honestly (maybe Im gonna create a dedicated Blog post...) I would not trust this approach...there is happening so much within the space of iPhone dev tools at the moment, certain frameworks will survive, a lot of frameworks will die...Adobe offten keeps top row position being one of these "skipping frameworks" as the relationship between Adobe and Apple is political poluted.
If you wanna head for a native leightweigt iPhone solution checkout phonegap - this is one of the potential "survivor-frameworks" and ships with a leightweight approach (JS required only instead of whole CS5/FLas Porfessional suite...)
Let me know whether you like phonegap,
regards from Switzerland, Florian!
I do, however, need to point out that this does not compete against Sybase. If I understand correctly, this is a permanent on line application that will depend on an access point to work. The reason to develop native applications on Sybase for, let's say, the iPhone is to be able to:
1) Encapsulate and re-use business rules on the middleware, such as transformations and controller indirections ala MVC, on other devices
2) Maintain a cache for improved response and user experience on her/his device
3) More importantly, support semi online scenarios, that is, be able to work with a subset of data while away from the office (and a steady network connection) and be able to replicate the second a connection is possible.
I really appreciate there are people like you willing to share knowledge and experiences. I'll be sure to follow your tutorials, and I just wanted to clear this out before a "Why do I need Sybase then?" discussion.
Kind Regards
Alejandro
thanx for hooking in!
Yes, you are totally right - this lightweight approach does not compete with Sybase, it's rather showing up alternatives for buying a Mercedes, such as a Smart for example...people can not expect the Smart to perform the same way a Mercedes does and people should not expect the Smart to be as save and comfortable as the Mercedes...
But some people simply want to go on a short ride, therefore a Smart could be totally sufficient - that's what we want to point out based on our series of tutorials...
Pretty metaphoric post but I like the comparison! 😉
Cheers, Florian...
I donot think we have 100% HTML5 supported browsers atleast in the mobile market. I also checked Vaadin doesnot seem to work well on Android based phones.
Please provide your input.
Regards
Rajendra
usually vaadin should work with the common mobile browsers, these simply need to implement WebKit Engine which basically all common mobile browsers do...which Andorid browser are you refering to, Opera, GC, Android Native?
But I agree, vaadin is nice for qucik and easy instant value apps, if you require "more" you should check out jqtouch, a jQuery derivat; browse the following link with your Android phone and you will find a 100% solution which should suit your requirments as well..
http://jqtouch.com/preview/demos/main/#home
Cheers, Florian!
P.S.: "boiler plate" (Web Services on top of BAPIs etc. remain exactly the same...)
I am using Android native browser. I tested using the following URL:
http://demo.vaadin.com/TouchKit
which Vaadin provided for testing their demos. it does not seem to work well.
Another query I have is we still do not have 100% html5 complaint browsers on our mobiles. I check the compliance using:
www.html5test.com
on my native android phone(v 2.2), It scored only 176 out of 300. Major features like storing and viewing data offline is missing. Somehow this makes me feel native Android/iPhone apps could be better (in terms of look and feel and performance) when compared to Web based apps at this point of time.
Please provide your view point.
Regards
Rajendra
jq touch demos work on native android native browser!!! 🙂
Regards
Rajendra