Sustainability impact with SAP Build Apps: Simplified user management and authentication

[szilo]

We have arrived at the last chapter of our citizen developer journey. Through the previous blog posts we introduced you to our GreenLeenk application. We showed you how we built the prototype of an application using SAP Build Apps that gathers all sustainable restaurants in the app user’s location. In this closing blog post we have still a lot to share about how we developed user management to create a user-friendly and simple access both for first time users and those whole already joined the GreenLeenk community.

First time app users have three options to access GreenLeenk based on which we developed the user management pages. They can sign up as a permanent user, which means they would get directed to a Login page next time, or they can opt to explore the application as a Guest.

The initial Landing page contains these three options along with a short welcome message and an image.

The sign-up page holds a welcome message and the basic user data like name, email address and password. For each of these elements we used a separate Container with an Input field in it.

To ensure better user experience, we also incorporated a Find my location functionality to the page.

Majority of our login was handled by Xano’s authentication API. More information on this can be found in their official documentation. We configured our REST API in Build Apps as per Xano’s guidance:

It is important to note that the authToken will act as your unique identifier in Build Aps. That is, the authToken will be used to remember that you are the one logged in. Remember to create an app variable to hold this information:

Behind the Sign-up Button we created logic to make the sign in work. Firstly, we added a Create record component and linked it to our Signup API:

We then set the authToken app variable to the value of the return value we get from the API call:

If the user has already signed up, next time he would directly see the Login page and fill out the Username and Password fields that have been built the same way as before. We used Container components to hold the data of the respective Input fields.

Now for the login, first we have to configure our API as we did for the Sign-up part:

With the following schema:

The Xano API will ensure that the login details are correct and handle the authentication. All that’s left for you to do is to create a data record using the login API and set your authToken app variable as we did with sign on:

We also created a user variable and set the values as per the response schema of the API to ease our developments, but this is optional.

If you use GreenLeenk as a Guest, you would be able to perform basic functions, like adding restaurants, or viewing restaurants but you will not be able to interact with the app in anyway that would require data for your user to be maintained.

Since our developments, some upgrades have been done within Build Apps and BTP authentication is now available. For more information on this, see this youtube video.

On this page the Welcome message automatically populates the name of the registered user to give a personal touch to the app. This has been achieved by a simple Container holding a Title field and a variable Text field. Then we offered to choose from three path to follow: users can quickly review which are the Top restaurants that gained recognition due to their green efforts and visit any of them. Alternatively, they can search within the GreenLeenk database according to their liking. From this page they can jump onto the site where they can add a newly discovered environmentally conscious place.

With this we have reached the goal of our project. We created the prototype of a small application with SAP Build Apps. The app is working as expected: you can register for it or use it as a Guest user. You can browse in its database and add new sustainable restaurants to it. We still have ideas for further developments to enrich the user experience with different incentives like reward points but that would be part of a separate SAP Build Apps project.

The citizen developer journey as any other learning journey has ups and downs. There are parts that are easier to accomplish and others where you would just want to give up the project straight away. Don’t you grasp the meaning of the different variables at the very first time? No problem. There are many enablement materials and forums that can help you get to the bottom of a tricky question. Everyone learns by errors and SAP Build Apps is an amazing tool because it lets you learn about application development in a safe environment. You can clean your canvas any time and restart with a new style or element. You can use and personalize the prebuilt components and ask your professional developer team to jump into the project and give you a hand at any stage of the development.

Once you create your first UI and connect pages and see your backend data come to life on the application, it’s such a rewarding feeling that we highly recommend to experience, especially to those users who never learned about coding. With SAP Build Apps anyone can become a citizen developer, just like me and kimayramnarain.

We hope you found our GreenLeenk project interesting and the tips and tricks useful for your own citizen developer project. Share your own experience on the Community Page, we are looking forward to reading about your best practices of application development with SAP Build Apps.