Application Development using React and CAP – Deployed in BTP

[sneha_govind]

Objective: Develop a gamification application for the SAP Customer Success event held on April 24 & 25.

Key Features: Event agenda for two days of the event; Two types of quizzes - one consisting of general SAP questions, second consisting of Partner Question; Leaderboard consisting of top 15 people of the quiz; QR code scanner for session codes and points; User onboarding via IAS self-registration; My Points session consisting of all the points secured during the games.

Technologies Used: Frontend: React; Backend: CAP; Data Storage: S4; Deployment: SAP Business Technology Platform (BTP); User Management: SAP Identity Authentication Service (IAS)

Development Process:

Initial Setup: 

     BAS Studio: BAS

     Database Explorer: SAP HANA

     BTP Subaccount : Training Subaccount

1. Frontend Development with React:

   - Developed the user interface using React.

   - Designed mock UI screens using Figma Click to view 

   - Followed the SAP community blog for React application development Click to see the blog 

   - Learn more from React Tutorial with UI5 Webcomponents

   - Created routing in the React application using SAP's tutorial Routing Guide

2. Backend Development with CAP:

   - Decided on CAP for backend development after initial research.

   - Set up the database and CDS (Core Data Services) in CAP.

   - Deployed the backend on BTP following the CAP jumpstart guide CAP documentation, youTube Tutorial

3. Data Storage Integration:

   - Integrated data storage using S4 Refer this article 

   - Faced challenges integrating the front and backend, which were resolved through research and community support.

User Onboarding:

- Implemented user onboarding with self-registration through IAS.

- Followed the SAP Help Portal guide for IAS setup IAS User Guide

Final Integration and Deployment:

- Successfully deployed a mock version of the application to a BTP subaccount.

- Completed the initial development of the React application within 18 hours & deployed it.

Testing and Launch:

- Delivered the completed application to the team for a demo to the RVP.

- Addressed minor bugs during testing - fixed them.

- Launched the application successfully a week before the event day.

Outcome:

- Over 200 customers participated in the event.

- The application got positive feedback from the end-users(Customers) and was well-received during the SAP BTP Customer Success Day event.

- The top three participants were awarded prizes from SAP Partners.

Ultimately, working on this application was a great experience. As the lead developer for the first time, I experienced various ups and downs. I strongly believe that it's okay to make mistakes as long as we are ready to analyze and fix them.

APP DEMO:

App DemoQR Code Scan