FaceSearch – Let’s Build a HANA/Gateway/UI5 App
Back in February, I finished up the Matt Harding’s Fiori Like Challenge with a laundry list of items I wanted to get to in the future. Well I had a few days a couple of months or so ago and while I wait for my next break in deliverables, I better publish where I’m up to, hence the future is now (or last month…).
Scope of Work and Blog
I could spend days producing a final product and then blogging about the experience; but that has a few issues in my mind:
- I could get too busy to finish (has already happened);
- I may forget key aspects of the solution if wait to the end to document the solution (would have happened but luckily have my mind backed up in this blog);
- The blog will become such a long blog with so many different facets that it misses the various audiences entirely (partly very likely, but let’s move on regardless).
So with that in mind, the blogs will be split up as follows:
Part 1 (This Blog) – FaceSearch Filter Screen
Build the initial FaceSearch page, hooking into a HANA query to provide near real-time feedback on number of faces found. This will involve:
- Creation of the UI5 project based on the high resolution prototype but made production quality
- Outside-In Service Design for just the search interface query (Using Gateway Productivity Accelerator oData modelling tools) – If I was splitting development between UI and back-end – this would be a good initial approach to agree on all the services – but a little superficial in this example
- Getting the HANA NetWeaver instance up and running, including setting up my client.
- Implementing the Service within Gateway using hard coded return values.
- Building a mock HR name database for use in FaceSearch
Edit: The following was also scheduled for this blog, but my AWS instance got corrupted (no idea how), so I will move the following sections to my next blog, and wrap up with a teaser on how easy HANA can make Google-like queries.
- Building a HANA Core Data Services (CDS) view to get my SQL logic just right.
- Building an ABAP Managed Database Procedure (AMDP) for use with Gateway
- Hooking up the Gateway implementation to the AMDP
Part 2 (Next Blog) – FaceSearch Results Screen
Build the results “Faces” page. This will involve:
- Enhancing the Gateway service to handle photos
- Mocking up a 100×100(?) faces into a single image using a command line interface (may or may not hook this up for real to the ABAP system, but this would be fairly straightforward). The objective is to take a large number of people’s photos at a high resolution, shrink them and then combine them into a single image with offsets to each person’s photo to minimise network overhead and make the FaceSearch results screen appear instantly (once cached)
- Post SapphireNow – Am I meant to make all faces appear in circles (horrible idea in my opinion)???
- Build a UI5 control to handle images with offsets and width/height for the above image
- Build the results page
Part 3 (Last Blog) – Face Detail Screen and Optimisation
Build final page and optimise:
- Build the Person details page including quick actions such as call number, email, etc;
- Deploy UI5 content to HCP and connect via the backend connector and leverage HCP authentication options (try to get SSO?)
- Play around with HTML5 offline options and optimisation of UI5 (I still don’t like how heavy it is to start)
- Look at pre-cache of image files through async loading of manifest file containing images (hidden images)
- Add Bookmark functionality
Okay – Let’s begin by going back to my notes from just over a month ago…
And because the SCN blog editor is really bad with copying and pasting images, I’ve decided to share the rest of this blog as a link to a pdf since there are way too many pictures to upload. Note – Anyone from SAP – Would really appreciate if someone would upload this pdf to SCN even though it’s not allowed 🙁
I hope you enjoy and/or get something out of it and even if you don’t, I hope this inspires you to give yourself your own challenge to get to know SAP even better…