I wanted to tell the story of the Bluefin development team - including dj.adams, stanger.lindsay, oliver.rogers and others, who built an app for you to build an agenda and never miss a session, for SAP TechEd Amsterdam.
It was originally built with SAP ERP, Gateway and SAPUI5 with the sap.m library that Fiori uses - so it is Fiori-esque. To productize it, we took advantage of the shiny new HANA Cloud and thanks to amit.sinha we ported the app onto HANA. It is now built entirely in the HANA platform including HANA DB for storage, HANA XS for integration, and HANA XS with SAPUI5 and sap.m (the same code as before) for the web app.
I hope you enjoy it because the team worked hard, and to be clear... none of the credit resides with me, only the responsibility for the bugs because I pushed them to port it to HANA so we could reliably support a large number of users. Please download, and enjoy. In response to a few emails, this app is not sponsored or endorsed by SAP or TechEd.
SAP TechEd Amsterdam 2013 Mobile App
Features:
- Smartphone, Browser and Desktop compatible
- Search sessions by Type, Track, Level and Date
- Sessions coming up in the next hour
- Sessions in progress
- Add sessions to your agenda
- Favorite sessions
- View your agenda
- "People who like this also like this"
If you're interested... here's the story of how it came about.
I spoke to dj.adams about it first. He's currently working for Bluefin within the SAPUI5 team at SAP.
"The idea came from when SAP published an Excel spreadsheet of the sessions for TechEd Amsterdam. I though... that data would be lovely in my pocket and I wanted a small example to practice and learn more SAPUI5. The two things came together and I built a small pocket reference to Amsterdam in SAPUI5.
The first thing I did was to make the data useable using my Spreadsheet to JSON converter to convert the Excel spreadsheet into Google Docs and pointed my service at this Google Doc. This dynamic service updates the JSON feed every time there's a change to the Excel spreadsheet.
At the time I wrote most of it and got Joseph [DJ's son] to write some. What I find really interesting is that I'm a plumber, not a designer - but as a dinosaur I find I can build nice-looking apps. I put it as a challenge to the Bluefin Development Community to make it "TechEd Ready". stanger.lindsay responded first of all and they took it from there! There wasn't any authentication, or favorites. Lindsay took it over and managed the project from there and I got out the way!"
What's the difference between SAPUI5 and Fiori?
DJ: "SAPUI5 is a framework built on JQuery which has a number of libraries like sap.ui.commons, sap.viz, and most importantly sap.m, which originally stood for Mobile and it had mobile-specific themes. This has become the go-to standard for building apps and as a result, the sap.m library was built out to become responsive for all device sizes and types including desktop web browsers.
Fiori is a set of applications built on the SAP Business Suite. Wave 1 of 25 apps came out earlier this year and Wave 2 is released with TechEd with 25 more apps and there are 150 more waiting in the wings. All of these apps have certain things in common. First they run in HTML5 on smartphones, tablets and desktops. Second, they're role-based which means you logon as yourself with your normal username and password and based on the assignments you have, you will have access to different applications - your launch page is a series of tiles, personal to you.
If you take delivery of Fiori, you have to install the UI add-on for NetWeaver, including the UI5 libraries which are stored in the ABAP MIME repository, Your ABAP server can then serve the SAPUI5 artifacts. Then you install Fiori, which has two parts. The first part is the UI part and the second is the Gateway Service for the data that app needs to use, which are all OData services. Each OData service has a front-end part and a back-end part, which integrates into the Business Suite tables.
Fiori apps always use the sap.m and sap.ui.layout libraries which contain controls like switches, tables and tab bars, and those are all part of the SAPUI5 framework. This brings consistency of look and feel, plus responsive design."
Is the TechEd app you built a Fiori app?
DJ: "Erm... Ye... No, but it was never designed to be a Fiori app. It's designed to be for smartphone only. The navigation part of app we built is based on the app control which is part of the sap.m library specifically for smartphones. On a desktop or screen, it stretches to the size of the screen. For larger screens, we have the split app control which contains the master on the left 1/3 and detail on the right 2/3, like Apple Mail. It will automatically use the right framework for the right device, and hide the detail in the smartphone as required. It does however use some of the Fiori controls.
Philosophically, Fiori is all about renewing existing apps, and SAP is in the process of defining exactly what Fiori means. Dick Hirsch wrote a good blog about this here. We're even delivering a TechEd hands-on session CD168 "Building SAP Fiori-like UIs with SAPUI5"."
Productionizing the App
I talked to stanger.lindsay, who was responsible for making the app production quality. She is a developer within the Bluefin development team.
"At that point, DJ had already made a substantial app where you can browse sessions by type or app. It was pretty static and just had data stored locally. I picked it up and got permission to make it a real project from philippa.holland. We set out some sprints to move it away from being just an offline app and add the ability to save preferences and logins, and then the ability to create an agenda.
The priority list came partially from people within Bluefin who made suggestions. Originally the plan was for me to get used to the technology rather than to release it as an app so we gathered the input from what people thought would be useful. We had 4 or 5 week-long sprints determined - in case I got pulled onto a project, I wanted it to be releasable at the end of any sprint.
Sprint 1 allowed you to view all the sessions, filter by type/track/level and add a free text search, plus sort the sessions by date/time. Sprint 2 added date and time for each session so they can be grouped. Sprint 3 added in the login so people could register. Sprint 4 enabled the favorite feature, plus being able to see from a session what other sessions people liked. Sprint 5 enabled adding to an agenda and seeing that in a calendar view, and being able to select days and see what you were booked in for. At the end of Sprint 3, I sent a pilot out to our community to get feedback from what the layout and look-and-feel should be. There was a lot of collaboration from the team there and the feedback was essential!
We had a planned Go Live date for about 10 days before TechEd but as it turned out, I finished development about 2 weeks before TE. I sent out the release candidate to our development team and we fixed a few bugs, before getting some help from steffen.schwark to expose it onto our code website.
IT's been amazing the number of people that have helped me, including james.hale, who I work with closely and helped me work through problems with HTML and JavaScript."
A brief interlude
I had a brief piece of involvement here, when I mentioned that if we want 10,000 TechEd attendees to use this then we should move it out of Bluefin's corporate network and into the cloud. A brief conversation with amit.sinha, we provided a shiny new HANA Cloud instance to the team. I was personally interested in what it would take to port an app like this from SAP ERP into a HANA native app and I thought that HANA made the perfect platform for building apps quickly, based on SAPUI5 technology.
Porting the app to the SAP HANA Cloud
Lastly I went to talk to oliver.rogers, who ported the app to HANA. Oli is a development consultant at Bluefin and a seasoned HANA/mobile developer.
"Lindsay had asked me for some assistance around Gateway/JavaScript/SAPUI5 and when I got the request to move it to HANA... the next thing I knew I was doing it. I had to replicate the table structure from ERP over to HANA and then re-write the integration mechanism that Gateway provides into ERP, for the HANA platform.
I originally used XSOData to expose information and I found I had to write some Server Side JavaScript (XSJS) to call a stored procedure to create users. The nature of the app is that anyone can read anything - so you can see what anyone else is doing - without authentication. The preferences of saving back on what you're going to attend or favoriting is also written in XSJS, so we can check that it's the correct user. We had used a lot of boolean variables in Gateway, but HANA doesn't support these so we had to rewrite these as single character variables.
Provisioning HANA the Cloud was remarkably easy - you just log in and a few minutes later you have a working HANA instance. I connect to it via a web client and it upgrades to the latest version and I was then able to access HANA in the cloud from HANA Studio on my desktop. It just worked."
Final Words
I absolutely love this story, because it's a story of creating an app around data, which is really relevant and useful to people attending TechEd. It's a story of collaboration and teamwork in the Bluefin team and a story of the latest SAP Technologies, including SAP HANA, Gateway and SAPUI5. I think the app is a beautiful Fiori-esque app which is simple and usable.
So please download it and enjoy the team's hard work!
Special thanks has to go to the beta testing at the SAP Mentor community, especially The specified item was not found., skemp and gregor.wolf4, who all found bugs which we quickly fixed today.
- SAP Managed Tags:
13 Comments
