This year in pursuing self learning activities in mobile app development and sharing my experiences and results with the SAP community, I have sought to build applications across the three broad categories of apps as outlined in the Apple Human Interface Guidelines …
- A native iPhone application. The app Uber Geek is an example of this, and is documented in a separate Benchmarking your NetWeaver knowledge in an iPhone App.
- A hybrid application, which is an iPhone application that provides access to web content primarily through a web-content viewing area, but with some iPhone iOS user interface elements. The app myHelp for SAP Professionals is an example of this, and is documented in a separate iPhone App for searching HELP.SAP.COM.
- Web only content (websites that behave like built-in iPhone applications). This is the focus of this blog.
Early adopters for iPhone web apps utilised for instance the iUI framework originally built by Joe Hewitt in 2007. In fact users of the Uber Geek iPhone app will find themselves linking to a website built using iUI, which displays the summary scores for all users. It can be accessed here, using any decent browser with the exception of Internet Explorer (bear in mind that iPhone users will launch it in Safari). A sample screen shot is shown in Figure 1.
Some of you also might point out that Web Dynpro Java has some support for limited mobile platforms, but it does not offer the best user experience for the world of touch screens, so I have not considered it.
Figure 1. Example of iUI web app
- The project goals of jQuery Mobile is for it to be ‘seriously cross-platform and cross-device’. As per the website, it is intended to be ‘a unified user interface system across all popular mobile device platforms’.
- The intended device support for this framework can be found here. You will see that device support will include iOS (iPhone), Android, Blackberry, Windows Phone, Symbian and others. The quality of the user experience will vary depending upon the platform, but nonetheless this framework intends to have the broadest reach of any that I have seen to-date.
- This framework is built on the principle of ‘progressive enhancement’, which means that it leverages HTML5 and CSS3 features for the most capable browsers, but less capable browsers will still receive a workable experience.
- This framework is targeted at Smartphones AND Tablets.
- This framework will provide accessibility support. All components can be navigated using a screen reader.
- This framework provides theme support.
- The development of this framework has some serious project sponsors and a development team behind it (instead of being created by one individual like the earlier frameworks). Sponsors include Blackberry, Nokia, Adobe, Mozilla, Palm and others.
- Even though at the time of writing this framework is only available as an Alpha release (Version 1 is planned for January 2011), it is already extremely well-featured and documented (see the website for documentation). There are bugs, sure, but don’t forget this is currently in Alpha release.
I have documented my experience building the web app in this blog as a 3-Part series, as follows:
Part 1 – Selection of framework (this blog)
Build your first Mobile web app using jQuery Mobile and ABAP – Part 2 – Implementation of display scenarios
Build your first Mobile web app using jQuery Mobile and ABAP – Part 3 – Implementation of update scenario
If you are interested in the end result, the YouTube video below demonstrates the app.
If you wish to try building this yourself, continue to Parts Build your first Mobile web app using jQuery Mobile and ABAP – Part 2 and Build your first Mobile web app using jQuery Mobile and ABAP – Part 3 of this blog series.