Create a Low-Code Application with SAP AppGyver – Simple Barcode Scanner Application

[SamannayaRoy]

Here we will create a very basic Barcode scanner app using SAP AppGyver. Also, we will see without wring a single line of code how we can develop a basic app for Android/ iOS.

1. Open Your APPGYVER Composer Account https://platform.appgyver.com/.


2. Click on CREATE NEW, i.e., we will create a new app.


3. 


4. A new Pop will appear for Project name. Give the Project name and Click on CREATE. e.g.: My_BarCode_Scanner.

     

 

4. Now the Designer page will open. The Top side will have drop down for which type of device you want to create the app.

         

 

5. with left side as Component Market. Containing


6. a) BASIC

           

            b) FORMS

                 

            c) Layout

                 

             d) Lists

                   

              e) Primitives

6. Now Drag and Drop a Button from Forms section to the page.

                     

7. Change Properties - Label selecting the Button as per business requirement. E.g.: Scanner

                 

8. Then click on Logic panel downside.

   

9. Logic pane will open as below.

         

10. Here in the left pane, you select Device – Scan QR/Barcode. Drag and drop it in Logic

         

 

11. Click the existing Component Tap connection and manually draw a connection to the Device This connector simply indicates the flow direction, which in this case is the button being tapped and then that triggering the camera device opening.

             

12. To test the scanner working fine or not we will now add and Dialog-Alert component to our application using Logic This will display a Popup alert once the barcode is scanned containing the Barcode scanned number or details.

                   

           

13. Add a connector between the top Scan QR / Barcode option and the Alert element, again indicating the flow direction.

                 

14. By default, Alert is set to display a static text. And we want to add a dynamic binding here. This will define what information to provide such as scanned barcode information here in this example.

Select the Alert and go to right side Properties. Select Dialog title. Click Currently bound               to: Static text, opening the binding options screen.

               

 

15. Click Output value of another node.


16. Configure the binding to the following and SAVE.


17. Select logic node – Scan QR/barcode.


18. Select node output – Scan QR/barcode / QR barcode content

             

17. Now SAVE the App.

               

18. Select LAUNCH button.

     

19. It will take you to the area how you can run the app first time.

Download SAP BUILD APPS PREVIEW app from App store in your mobile.

Then open the app and scan the bar code from this screen.

It will display the projects in the application.

           

20. This will look like below in Mobile app.

           

21. Open the application.

If you don’t see the above page, then go to the empty page and select the default page.

                 

22. Scan the Barcode. You can test using the below barcode.

             

           This will be the below output screen in mobile.

             

As a summary to this, given app can be basic to develop different kind of applications in real world like scanning bar code from Package and map the warehouse, scan bill and approve to upload.

This blog is posted in detail to encourage more people to jump in to learn SAP AppGyver in their projects for lightweight business solutions without having knowledge in Android/ iOS coding.

I would be happy if people try this and let me know their thoughts on this. You are always welcome to share your questions in this blog.

Also you can go ahead on learning from https://docs.appgyver.com/docs/articles

Thank you for following the Blog. Some more consecutive business solutions will come up in shortly for more help.