Building an SAPUI5 App for the First Time - for SAP TechEd Amsterdam 2013

[Former Member]

Firstly, for those of you that haven’t downloaded it, in preparation for TechEd, here is the link to the latest version:

     TechEd Amsterdam Sessions App 2013

Secondly, for those of you who have not already read it, I’d like to point you in the directly of applebyj’s blog about the app - telling the whole story: http://scn.sap.com/community/hana-in-memory/blog/2013/10/31/fiori.

As John says, I was involved in the app in the middle stages: pre getting it on HANA, and post initial build.

This blog is just to jot down a few of my thoughts and how the project was for me - I had intended it be longer, but I'm hoping to do a more specific SAPUI5 blog later on - and I ran out of time on this one (as I wanted to get it in before TechEd began!)

I hope you enjoy hearing about my story...

How it began
When dj.adams proposed this challenge to Bluefin's Development and Mobile communities, I leapt at the chance to learn something new. Having only briefly encountered SAPUI5 previously, my aim for the project was to use it as a learning exercise - never envisaging that the app would actually go to the event.

Thanks to DJ, I was starting with a solid foundation on which to build. It already had three views, which enabled users to filter the list of sessions by Type, Track or Level.

When I picked up the project the first challenge was to work out what people would want from such an app. Who were the target audience? What would be useful to them? I’ve never been to TechEd, so I relied heavily upon the experience of my colleagues, hearing about apps which they’d used at previous events and what they wanted to see in from ours.

I came up with an initial plan of 6 sprints, with the aim that at the end of each sprint there would be a complete, functional app which could (if necessary) be released as it is:

1. A “Home” view from which you could navigate either to a list of all sessions, or to the various filters.
2. Date/Time: add in the date and time of each session to the detailed view. Group the list of session  by date, and sort them by time.
3. Login and Search: add a login screen, which would allow people to sign-up and login. Add a search bar to the top of the sessions list which allows the user to refine the list of sessions by their titles.
4. Favourites: add a “favourite” button, and a link to view a list of your favourites on the home page. For each session have a navigation for “people who liked this, also liked”
5. Agenda: add a “calendar” button, and a link to view your agenda to the home page.
6. Other Users: add a link to the homepage which allows people to see who else is using the app, what they favorited, what’s in their agenda

Gateway (my comfort zone)
Up until sprint 3 there was no SAP system involved, just session data which was stored in as a JSON file within the app.

At the start of sprint three I set up a few simple custom tables in Bluefin’s ERP demo system, and off that created a straightforward Gateway service which allows RESTful calls from the app. At this stage there was just one initial entity “Users”, but later there was another entity added called “Preferences” which stored usernames alongside session IDs, and boolean values for whether they had favourited or added the session to their agenda.

To make life simple while setting up the Users table I saved everything exactly as the users typed it in: Usernames were case sensitive and password.. well, you don’t want to know! After a quick lesson from oliver.rogers I learnt about Encryption and Hashing, and from that point on passwords were hashed before stored in the table (not a moment too soon - phew!). When Oli moved the app over into HANA this changed again; users weren’t just created in a local table, but actual created as HANA users.. but that’s Oli’s story, not mine.

Bluefin Collaboration
After I’d implemented sprint 4, I shared the app with Bluefin, asking for their feedback. At that point the app didn’t “feel” right. The arrangement of the pages was clunky, but I couldn’t work out why, so I persuaded people to log their thoughts. Thanks to the enthusiasm with which people tested the app I got a huge amount of feedback, and a lot to work on, which is part of the reason for the app looking like it does today.

One issue which came up again and again was the lack of a “remember me” tick-box. And alongside this point, people who didn’t want to create a login (for whatever reason) weren’t able to access any part of the app.

Naturally off the back of these comments the final launch page was born: “remember me”, and “proceed without login” were created - small features which were easy to build, but made such a huge difference to the experience.

michael.eldridge also provided feedback on which features he would like to see built in. Two of these had never crossed my mind, but once he had pointed them out, it was clear how much value they would add to a user:  “what’s next” and “what’s now”.

Without the help of everyone here at Bluefin who sat down and made the effort to test, it would not be half as good (or complicated!) as it is now, and I really hope that Bluefin get the opportunity to build an app for future session.

Next Time..
I had intended to write more on the building of the app, about what I learnt and some tips on Fiori, but that will have to wait for another blog now (as TechEd starts tomorrow and I wanted to get this in before then), time has run out on me, so this is all for now.

If anyone is interested in hearing more/asking anything, just drop me a line (respond to this blog post) and I will endeavour to get back to you.

On with the next project now… A Firoi implementation and building a new SAPUI5 app!