The new year is almost here and so is the most wonderful time of the year!
This holiday season I decided to learn something new and this blog post is all about that journey! Enjoy the blog post with a cup of hot coffee in this cold weather 🙂
Introduction
Ready to revolutionize the way you build mobile apps and backends? SAP Build Apps is here to help! When I set out to create a new year resolution management application, I knew I didn't want to spend hours coding. That's when I discovered SAP Build Apps, and it blew me away. With SAP Build Apps, I was able to easily and effortlessly create a fully functional mobile app and backend service without writing a single line of code – and I did it all in just one hour! All it took was a few clicks through a user-friendly visual interface, and my new year's resolution management app was up and running in no time. If you're ready to transform the way you build mobile apps and backends, give SAP Build Apps a try – you won't be disappointed! Trust me, you won't believe how easy and fast it is to build a mobile app and backend with SAP Build Apps and no code.
And this blog post will give you a glimpse of all the components you need to develop full stack application and we will do that via a simple example use-case - "New year resolution app", all I could think of especially this time of the year 😛
Use-case Description
App to log in to your new year's resolutions! (which also gives inspirational quotes every few minutes, isn't that cool?)
And I was able to complete the whole app in less than 1 hour! Yes, that’s the magic of SAP BUILD.
This app is just an example to learn the full stack capabilities of SAP Build, definitely you can take it forward and add more features to this!
Let's get started…
Prerequisite - You should have access to SAP Build Apps on BTP.
(Check this Blog post to learn how to enable SAP build)
Part 1: Creating backend using SAP BUILD for resolutions app
- Log in to SAP Build backend development
- Click on the "Create" button in the lobby. Select "Build an Application" and afterward "Application Backend" to create your project
 |  |  |
Your SAP Build backend project is now created.
Entities Tab: Here you can create entities for your backend database
- Create two native entities - User and Resolution
- Click on "Add new Entity" at the right side of your screen to add new Entities and then add the fields for each entity.
 |  |  |  |  |  |
- Native entities are completed, now we will create one extended entity from the "user" entity to show the full name from the firstName and lastName entities.
- Create extended entity - fullname
 |  |  |
Once all the entities are completed, we will deploy the project.
Deployment Tab: Is used to deploy your backend to desired landscape
deploy
Review and deploy the project.
Once Deployment is successful, let's browse the data of entities and add a demo entry in the User entity and check the extended entity if it works fine.
 |  |  |  |
With this, we are done with the backend development and now let's see how can we integrate it into the SAP Build frontend app.
Part 2: Integrate the backend to SAP Build frontend app
I only highlighted the main part of the mobile app which is the data integration part and would not go deep into UI making since UI creation steps are covered in many other blogs and are the same as before when Build was Appgyver.
Go back to Lobby (should be open in another tab in your browser) and select the Create button to create the front end. Select Build an Application. Afterward, select "Web & Mobile Application".
 |  |
- Once the project is created, you would be navigated to the editor tab(Composer Pro).
- Enable BTP Auth from the "Auth" Tab and then open the "Data" tab and click on "Cloud Functions"
Visual Cloud Functions
- Enable the entities
 |  |  |
- If you have worked before with the Build App frontend part, then after this point everything will be very straightforward for you since data is added now and all we have to do is to build our UI and bind the elements.
This is what my app pages look like (you can build the same or similar, totally based on your creativity!)
I made a welcome page that has random inspirational quotes available(connected to an open API to fetch the quotes).
Resolution Page, which shows all my resolutions.
Create Resolution Page, which lets me save my Resolutions.
 |  |  |
Preview and test
This is how the complete looks and works -
Once we create the record, cross-check in your backend table, and the record should be saved successfully!
Record Saved Successfully
Conclusion & Art of Possibility
Awesome, you developed a full-stack application in just an hour, I hope you got a good overview of SAP Build Apps' full-stack capabilities!
This use case is just an example of trying out the latest features of SAP Build and experiencing its power. While developing this, I had so many extensibility ideas for this app already like we can connect the app to SAP Build process automation and send automated notifications or we can make such an app for any org employee by extending Success Factors. These examples opened my brain door to the vision of many more business process example apps. Do mention your app ideas in the comments, I would love to read 🙂
Thanks, gunteralbrecht and jayadnure for being part of the BUILD journey, and Special thanks to daniel.wroblewski for below blog posts which helped me to understand SAP BUILD better -
- Unboxing: Application Backends in SAP Build Apps(Entities).
- Unboxing: Cloud Functions in SAP Build Apps.
- SAP Managed Tags:
4 Comments
