Apartment Tracking/Ticketing App using low code/ no code App Gyver


Purpose

The purpose of this app is to track the visitors in the society so there can be full transparency of who all are visiting the society and it will help in tracking if there is any theft of any mis-happen in society and Flat Owner can create service request for any issue and concern in apartment. User can see the important contact details like Carpenter , plumber, guard, Maid, cook etc at one place though app. In future release i am planning to add food order service from this app.

Why Public API?

SAP Low Code No Code challenge allows the use of Public API.

And I wanted to really use it and experience the technical challenges that come with it. Because, if I build my own API then I tend to address all the challenges from the backend rather than the front-end.

About the App

The app consumes the API exposed and deployed using CAP application and displays the user data and visitor data.

App uses Camera feature to take the visitor photo, Custom Theme, Odata Api, Custom formula, Filters, Custom Button, Containers, Custom field style, other style etc.

It has four pages Login Page, New User Creation , Guard Application, and Flat Owner App.

App Video:

Part1: Creation of User page

Part 2: Logged in as Security Guard to create visitor entry

Part 3: Flat Owner page to approve entry and do other activity and creation of ticket

Develop CAP Application

Lets’ start by developing a CAP Project and OData services which we will consume in Appgyver (If this is your first CAP application, please refer to this for better understanding: https://community.sap.com/topics/cloud-application-programming ) –

Steps to develop a quick data model and expose the entities-

  • Use BAS/VS studio for a development environment.
  • Create a CAP project from a template.
  • Add data model file under “db” folder and define the entities, in our case the entities are related to tracking.
using { managed, cuid } from '@sap/cds/common';
namespace tracking; entity Ticket: managed,cuid { desc : String; TType: Association to TType; Priority: Association to Priority; Status: Association to Status; } entity TType { key ID: String; Name: String; } entity Priority { key ID: String; Name: String; } entity Status { key ID: String; Name: String; } entity visitor: managed,cuid { name : String; contact: String; FlatNo: Association to flatData; Photo: String; status: Association to VisitorStatus; purpose: String; } entity flatData { key ID: String; name: String; } entity VisitorStatus { key ID: String; Name: String; } entity userData: managed { key mobile: String; Name: String; Password: String; Role: String; FlatNo: Association to flatData; }
  • Create a service file under “srv” and expose the entities.

Service file –

using tracking from '../db/data-model'; service Ticket { entity visitor as projection on my.visitor; entity FlatData as projection on my.flatData; entity VisitorStatus as projection on my.VisitorStatus; entity userData as projection on my.userData;
}
    • Build mta.yml file and deploy.
    • Once you have your code ready, deploy the application and open the service endpoint.

Serving test 1.0.0

These are the paths currently served …

Web Applications:

    — none —

Service Endpoints:

/ticket / $metadata

Configure all the oData API in SAP AppGyver: Add them in data source as shown below.

Add all data source as data variable.

Create Login Page and do mapping with page variable and write below logic for login and identify weather the person logging is Guard or a Flat Member from the role of the person

Create One more page variable for create New user form and write create logic in Create button. Call the Create Data function and Bind it with User Entity from the CAP Service

New%20User%20Logic

New User Logic

Logged in as Security Guard of Apartment Page

If security guard is getting logged..it will identify the role of the user and the Create New Visitor Entry page will open.

Security guard can create entry request of the visitor and it will ask the basic detail of the visitor and ask for the photo, so when add photo button is clicked it will open the back camera of phone and ask to upload the photo.

Based on the flat selected of apartment, it will go for the Entry approval to flat owner(Can enable push notification in future release) and the Flat owners can approve and reject the Visitor Entry.

If Flat Owner will log then he will see different screen as shown below.

W have different option in the view like notice board where admin can write the message for all the apartments and we can track that who all are the visitors and we can get the contact details of them

  1. We Can see all the visitors
  2. We can see the approval list and can do approval or rejection
  3. We can see near by restraunt
  4. We can create service request for any issue in apartment

App Demo

Link to App on AppGyver Portal.

Disclaimer: In Desktop Mode the Data is not from the source, as AppGyver needs ACOA (Access-Control-Allow-Origin) attribute in API response and which is not available in WHO API. Therefore, I put logic on the API Get Collection error to get data from a different source. I did this for a smooth experience for people viewing the app in desktop mode.

My Experience

I am loving it, I have used other low code platforms in the past like Outsystems, on which I have to learn for a considerable number of hours before delivering something on my own.

For this one, I did only one mission Create an Application with SAP AppGyver for an hour.

I liked the idea that in the development environment itself it was prompting my learning levels and what else I could use. I managed to complete all the initial ones.

Future Addition

I am planning to add admin page to control the New user application. Based on approval user will be created. We can use SAP BTP workflow service for approval

And also addition of lot more service.