Star Wars App – No-Code Challenge

This blog post describes my participation in the No-Code Challenge. If you aren’t familiar with the challenge, please check out the blog post by Daniel Wroblewski for the full details.  But in short, it’s an opportunity to get to know SAP AppGyver a little better and share what you were able to build with the SAP Community.

My goal was to build a mobile app that allowed me to view Star Wars data originally sourced from the public Wookieepedia. You never know when you might be out and about and need to quickly lookup the climate of a planet from Star Wars. Ok, maybe not the most business-critical app, but one I certainly enjoy playing around with.

Backend Service

I started with the Star Wars API code sample which I’ve written about in the past: New SAP Cloud Application Programming Model Sample for Many-to-Many Relationships and Fiori Annotations | SAP Blogs. This is an SAP Cloud Application Programming Model application with an SAP HANA Cloud instance for data storage. I figured this would provide a robust and fun data model to build something more than “Hello World” type application in AppGyver.

The Star Wars API implementation in CAP already has CORS configuration and no authentication requirements, so it’s ready to use as-is in the backend service of my AppGyver application. I only needed to deploy the sample code to a server to make it easy to test and consume.

Although I have an mta.yaml and all the configuration to deploy as a full multi target application, I decided to just do a cf push. This will deploy the Node.js portion to Cloud Foundry and bind it to the existing HANA database container which I’ve already filled with data for testing.

It takes just a few seconds to deploy this way and bind it to public URL. I’m up and testing it from the web browser.  My service endpoints and OData entities are all ready to be used in AppGyver.

AppGyver Consume Service

Before I start really designing and building my application, I want to begin with the connection to the backend CAP service.  From the Data->Data Resources I created a new OData integration. This is the option that will allow me to consume the OData V4 endpoint of my CAP service.

For the Base API URL, I give it the URL of the service endpoint $metadata.

I use the Verify URL button next to the URL input field.  It returns the OData Version and now all the entities and operations for each entity are listed in the tree to the left of the input. That’s a good sign that everything is working well with the consumption of my service.

Upon saving the data resource, you also have the option to test call to the OData service.  If you’ve ever used Swagger UI or the SAP API Hub, the capabilities here in this test tool are similar. You can add filter and search conditions and other parameters to call specific entities. I just want a simple test so I choose to list the Planets in the master data section of my data model. The results should be small enough that I can just test the query wide open.

The JSON output of the OData request is displayed directly in AppGyver. Now I know for sure my backend service is fully accessible and should work perfectly fine with AppGyver.

UI Design and Navigation

This is obviously just a learning/proof of concept kind of application. But I want to try some things I’ve never done with AppGyver before.  The main thing I want is to build a List/Detail UI kind of pattern.  I want an introduction page that will list all the Star Wars movies and then when I tap on one of the items in the list it should navigate to a detail page with more information about that movie. I also will have a separate page that lists some basic data, like all the planets used across all movies.

I begin in my list page. I will need the backend service to retrieve the list of films. To use that backend service in my page, I start by creating a data variable. In doing so I choose a backend service and an entity within it (in this case Film).  You can then configure things like filter, sorting paging, etc.  For my application I want to sort by Film ID (the episode number in Star Wars film series).

The data variable is the bound source of the List that I’ve added to the page. But we also need the navigation.  For that we use the Component Tap on the list event and target a Navigation/Open Page. You can add a parameter to the Navigation and for that I’ll send over the current.ID.  This will let the detail page know which record is selected.

In the detail page we also create a Data Variable and connect it to the same Film entity of the backend service.  But this time we chose Single data record instead of Collection in the Data Variable type.  We can also use the navigation parameter (which we mapped to current.ID in the previous step) directly into the filling of this data variable. And that’s all that is needed to get the data flow and navigation working between these two levels of detail pages.

The last design element I want to try out in my application is an overall menu.  I want the Film “transactional” pages and a separate master data page with the Planet details. We can use the navigation menu to configure the menu by assigning existing pages. Of course, if I were to build out this app more, I would add more of each type of pages here as well. But this is enough to try out how the menu building works.

I decided I wanted to add a little visual flair to my app as well.  I have some pictures to liven up the UI that I wanted to put behind my lists. But I needed them to stretch to fill the device space and still let the UI scroll on top of them.

The key here was to go to the Page level Style settings and choose the Stretch to Viewport Height option and disable scrolling. I then put my list into a Scroll View.  This allows my page background image to fill the entire space but not impact the scrolling or sizing of the list that overlays it.

Testing

This is one of my favorite aspects of AppGyver: how easy it is to test even on a mobile device. From the Launch menu there are options to test as a Web App directly in the browser.  That’s the option I use as I develop to see what the app is looking like.  But now that I have it to a stable point, I want to see it on my iPhone.  There I have the AppGyver mobile app for testing already installed. I reveal the QR code and scan it from my phone and I’m off and testing my app directly on my phone with no delay. I can iterate quickly with an accurate preview on my phone without needing any build, deploy or install steps.

Testing from my phone, I have my list of films:

Tapping on any of the items, takes you to the detail page:

And the main menu is always available at the bottom of the screen.  I can switch to the Master Data view and see the list of planets. The resizing of images, scrolling at the list level, etc; all working great on my mobile device.

Closing

As part of the No-Code Challenge I spent between 60 and 90 minutes from the time I first deployed my CAP backend service to the time I had the finished UI running on my phone. I’m not an AppGyver novice. I’ve completed a few tutorials in the past.  But I’m also hardly an AppGyver expert. I intentionally chose designs in my app that I didn’t go in knowing how to do.

I consider myself a professional developer but one that has little to no experience developing mobile UI. That’s precisely where AppGyver is valuable to me.  I like how quickly I’m able to design, build and test mobile apps without having to invest a lot of time in learning mobile device specific frameworks or SDKs.

My hope for everyone reading this is that you take the opportunity of the No-Code Challenge to learn a bit more of what AppGyver can do for you. And who knows, besides learning how a tool might improve your development workflow you might also win a cool hoodie.