ISBN Barcode Scanner using SAP AppGyver-SAP Low Code No Code Challenge

[ShyamBSingh]

In this blog post you will learn how to create a Barcode scanner app which can scan any International Standard Book Number (ISBN) barcode and provide the details about the book without a single line of coding.

SAP AppGyver can connect to any standard or custom API, from where it can fetch data.

In this example we are getting data from Google Books API.

Prerequisites:

• Create an AppGyver trial account here.


• SAP AppGyver Preview mobile app can be downloaded from in your App Store.

Welcome aboard to the world of LCNC(Low Code No Code) !!!!

Steps for creating the app:

• Login to the URL https://platform.appgyver.com/


• Home Page is displayed:

• Click on the button Create New and put the project name as ISBN Barcode Scanner.


• Change the title content to “ISBN Barcode Scanner”

Remove the second text field and add a button. Rename the button text as “Scan Barcode”

Save

• Click on the tab Data and then Add Data Source. Type REST API direct integration


• Enter the details as below:

Resource ID: GoogleBooks

Short Description: Data of books from ISBN Barcode from Google Books API

Resource URL: https://www.googleapis.com/books/v1/volumes

Save

• Go to the URL: https://console.cloud.google.com/apis/credentials

Login to your Google Account

• Click on the tab "Select a Project" to create your project.

Put a name My First Project.

Save

• Click on Credentials Tab


• Click on Create Credentials and Select API Key

   

• Copy the API key

• Click on Library and search for Books API

Select Books API from the search list and click Enable

• Click on GET RECORD(GET)

Change the Relative Path as below:

https://www.googleapis.com/books/v1/volumes?q={barcode}&key=<Key from the previous step>

Change the key from id to barcode(Text)

Save

• Click on the TEST tab and enter the barcode as “9780747257363”

Click RUN TEST button

Once the data is fetched, click on the button SET SCHEMA FROM RESPONSE

Save

• Click on the toggle button on the right-hand side top and Switch to Variables Screen


• Select Data Variable and Add a new data variable for GoogleBooks as GoogleBooks1

Select Data Variable Type as Single Data Record

          Delete and set the logic flow as below:

          Save

• Click on Launch twice to come page to the design page


• Select the button and open the logic flow

• Add Scan QR/barcode and connect it from Event Component tap

• Add GET Record and connect from Scan QR/barcode

     Click on Get Record and barcode property as : Output value of another node  Scan QR/barcode

Select Node Output as Scan QR/barcode/QR barcode content

Click Save

Save the application

• Add Set Data Variable after Get Record and connect

• Click on Set data variable and under properties, select Data variable name as GoogleBooks1

Data as Get record  Get record/Record

Save the application

• Add a container below the button and add two text fields inside it

Set the Layout property of the container as Horizontal

Click on the first Text field set as below:

Content : Book Name

Width and Height: Fit Content

Set the content of the second text field as data.GoogleBooks1.items[0].volumeInfo.title

Save the application

• Duplicate the container by clicking on the copy button the container

Click on the first Text field set as below:

Content : Authors:

Set the content of the second text field as data.GoogleBooks1.items[0].volumeInfo.authors[0]

Save the application

• Duplicate the container by clicking on the copy button the container

Click on the first Text field set as below:

Content : Publisher:

Set the content of the second text field as data.GoogleBooks1.items[0].volumeInfo.publisher

Save the application

• Add an image below the 3rd Container and map the Source as :

data.GoogleBooks1.items[0].volumeInfo.imageLinks.thumbnail

Save the application

• Finally, the application should look like the below:

• Result: Preview the app on your mobile device by scanning Barcode of any Book. Barcode is available under the Launch Tab.

 

Use Case: One can use this app to keep track of resources in Libraries like who and when got it issued.

This is my first blog so needless to say your comment/suggestions shall be highly appreciated 😊 😊 😊 😊

Happy Learning !!!!!