EV (Electric Vehicle) Station App with SAP AppGyver - No Code Challenge

[yogeshgupta]

Purpose

This blog post is my entry to the SAP Low Code, No Code Challenge. My purpose for creating this app is for learning and getting to know about SAP AppGyver and the offerings available.

My App

Link : https://ev-station.appgyverapp.com/

The app I developed is called as 'EV Station', which provide users the following features:

1. Find Nearest EV Charging Locator


2. Save Parking Location (Via taking a photo)


3. Pay for your parking

Home Page (EV Station): Displays the above mentioned options for user to navigate to the respective page.

EV Charging Locator Page: The page covers embedded WebView to display the nearby EV Charging Locations using your GPS Location.

Parking Location Page: This page provides the option to take picture of your parked vehicle using camera or pick from library. The user can capture multiple photos and also have the option to remove from the list.

Pay and Park Page: This page give the user an option to open GPAY (Google Pay) App and make the payment for there parking.

As you can image for this features you need a mobile phone to use the app.

Here is a short glimpse of the app developed :

My Experience

It was so amazing to see how by investing so little time and without any coding work I've been able to create an application utilizing mobile native features, navigation and adding UI components.

Let's talk about the features incorporated in the app and the cool stuff.

• WebView - Simply amazing, it works as a container and you can embed other website inside your app and it works real smooth. In the app it is implemented for showing the EV Locators nearby.

• Connect the Dots - Well simply to connect with any action, flow or component you have such an amazing Node option available which is very easy to use and understand. For instance: taking a photo on press of the button and integrate the next flow was super quick by the nodes.


• Navigation - Unlike UI code to write logic for routing and navigation, here you just simply can  create a page from the options available and again based on the action you can navigate to the particular page.


• Formula - Using formula you can write your own condition to show any object, pick information and so on. It gives such flexibility to run your app with so dynamic nature. An implemented example of this one is to hide the 'Take a picture' button as soon as I take my first picture.

• Lottie Animation - An open source animation file format that's really make your app more lively by showing such amazing live animations. You have so many animations available based on the category you want to add and make your whole page theme more relevant. I used Lottie animation in "Pay and Park" to show something related to money & online transaction.

 



 

• Set Page Variables - It let's you set the target property to a new value, suppose if the page variable is an object, only the selected fields will be affected. Implemented page variables to store reference value of all the images being taken from camera or from gallery in the app.

 

Limitations

In my opinion SAP AppGyver is bundle of so many things and found many resources for it on the internet. However found fewer help documents describing the co-relation between the components which are required to make an end to end functionality (not sure if it’s already there or I missed it).

 

Conclusion

Overall it has been an interesting challenge to get to know SAP AppGyver and explore so many things about it. It was super fast to build this app based on the tools available in the platform. There are still other aspects which I still haven't explored like Data resources, Connectors, Authentication etc.. but I look for them to checkout in future 🙂

Resources

SAP AppGyver Platform

GitHub - openchargemap/ocm-app: The openchargemap.org web and mobile app