What is AppGyver?

AppGyver is a low-code/no-code technology based on the React Native technology. AppGyver provides you with an easy to use “IDE” for creation of cross-platform apps. AppGyver Composer Pro which is the name of the tool you’re using to create apps in a visual editor where you drag and drop UI elements into your View or Page. Using logic pieces and direct data integration will make your app interactive.

I see AppGyver as a tool for users who want to build cross-compiled apps in a simple manner without the need to rely on full platform power of Android or iOS devices. The technology allows you to consume basic hardware capabilities like Geo location or access to the camera for barcode scanning. Via JavaScript code blocks, AppGyver allows you to write custom code for complex tasks which are not included in the AppGyver Composer Pro.

The simplicity of the tool brings minor downsides with it. AppGyver allows you to customize and modify UI elements but naturally limits the highly customize look and feel. Also UI animations, platform conform UX, On-Device machine learning like CoreML are limited. Custom designs of apps which rely on being highly dynamic or using device capabilities will be limited with AppGyver. But on the other hand you don’t need device specific development experience to access these capabilities.

If you’re a professional mobile developer for iOS or AndroidOS in both native development and hybrid development you won’t necessary find all the same capabilities in AppGyver, but if you’re a developer in non-mobile areas or a non-developer this might be just the right tool for you building nicely looking apps quickly.

Advocates App – AppGyver

Advocates App – AppGyver

With this blog post I want to explain a bit more on how you can use AppGyver to build an app based on the Advocates Service. I will show you how to build a UI displaying the Advocates and their description using REST data endpoint consumption of the CAP Advocates Service, Custom UI creation, navigation and parameter passing between Pages (Views/Screens). If you’re looking for a more detailed view on how I’ve implemented the basic idea of an Advocates App you can watch this SAP Tech Bytes video:

https://youtu.be/-4cyo3Ajtcw

CORS and consumption of Advocates Service REST endpoint

Now remember, I am not an AppGyver expert nor am I a long-time user of this technology so my experience I am sharing here is based on what I found out. If you have a different solution or more expertise with this technology please share your ideas, comments and corrections down in the comment section 🙂.

What I found is that AppGyver consumes REST endpoints which follow a certain JSON response which contains an array of objects.

Data Configuration – AppGyver

Also when I was first calling the service I was facing error messages from AppGyver. After research I found out that CORS (Cross-Origin Resource Sharing) needs to be enabled within your service for AppGyver to be able to consume the service.

What is CORS?

Cross-Origin Resource Sharing describes a mechanism in web development which uses an additional HTTP Header for security. Your web application or service can regulate through the CORS header that servers, web applications or other callers from a different source what resources of yours can be accessed.

With this approach you can control access to resources even without using authentication.

AppGyver and CORS

After I have enabled CORS, within the Advocates Service during CAP bootstrapping, the AppGyver Composer Pro data consumption could properly fetch the services data.

cds.on('bootstrap', app => {
    
    const cors = require('cors')
    app.use(cors())
    app.use((req, res, next) => {
        res.setHeader('Access-Control-Allow-Origin', '*');
        next();

    //CDS REST Handler
    let restURL = "/rest/"

    cds.serve('AdvocatesService')
        .from(global.__base + "/gen/csn.json")
        .to("rest")
        .at(restURL + 'advocates')
        .in(app)
        .catch((err) => {
            app.logger.error(err);
        })
})

module.exports = cds.server

In this code snippet I allow all other origin requests to be able to consume my service. In a productive project you want to avoid this approach and rather define exactly which origins can access the resources of your service.

Building the UI

As mentioned above, Composer Pro allows you to build up your UI through Drag-and-Drop of UI elements onto the canvas. With this approach you can simply create the UI and customise the single UI controls through styling.

Composer Pro – AppGyver

If you don’t find a control which fits your needs you can use the Component Market to install additional controls build by the community. These controls will be available through the control library after installation and can be dragged onto the canvas like the standard controls.

Marketplace – AppGyver

Control Detail – AppGyver

Using the Logic Flow pane on the bottom of Composer Pro you have the power to create complete logic flows for a selected user control or the entire screen. Navigation, device capabilities and other workflows can be simply put together in a similar way the UI creation works.

Logic – AppGyver

Again, the logic pane allows you to install custom created logic pieces from the function market. This allows you to browse additional logic pieces you might need e.g. image resizing.

Adding additional Pages

Adding new pages to your app flow is fairly easy. Open the pages overview to add new pages to your app. These pages then need to be connected to your current app flow for the system to display them.

Pages Overview – AppGyver

The pages can be opened from another page using the logic flow builder. Using page parameters allow you to pass data between pages in an easy manner.

Variables in AppGyver

As mentioned before you can handle different types of variables within Composer Pro to manage your data between pages, data source and the whole app. Switching from the View Builder Screen to the Variables Screen opens option to create new variables valid for the currently selected page.

AppGyver differentiates between the following variable types:

• Dynamic Variables: Data being stored which gets created or updated during runtime of the app.
• Page Variables: These variables are living in the context of the page itself. If the page gets deleted from the stack, the variable gets deleted as well.
• Data Variables: Are almost the same as Page variables but the schema is defined by the data source itself. It comes with default logic making sure the data gets updated if used by contacting the backend.
• App Variables: Are living in the context of the app itself. Variable resets due to closing and reopening the app as well as first time start.

Example of Data Variable – AppGyver

For more information on variables visit the official documentation.

Testing the app via the AppGyver Companion app

You can test and play your app at any time over the AppGyver companion app available through the App Store. Within the app you log into your AppGyver account to list your currently worked on projects.

Project List – Companion App

Every time you safe your project the app gets updated in the companion app so you see the current state of your app at all time.

App Preview – AppGyver

Conclusion

Working with AppGyver allows you in an easy manner to build apps which get cross compiled against different platforms. Using AppGyvers Logic Flow pieces allow you to create more complex work flows, if custom code is needed you can use the Java Script flow elements to implement your own logic. If you’re looking for a framework which allows you to build powerful apps using the strength of the platform you’re developing for, a native approach might be right way to do this. In case you want to build an app displaying data and operating on this data AppGyver might be the right choice for you.

Overall it is a nicely designed experience with quite some freedom for a low-code/no-code technology. I haven’t tried it working with a large amount of data, I didn’t try out authentication and the custom JavaScript functionality, but the UI building part and the logic flows work well together and a basic app like the Advocates App is put together fast and fairly simple.

I would recommend to watch the SAP Tech Bytes videos giving an introduction to the AppGyver toolset for a more detailed walkthrough of how I’ve built the app.

With that Keep Coding! and see you next time where I show you how to build the Advocates App on native iOS using Swift and the SAP BTP SDK for iOS.