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 !!!!!

[Murali_Shanmu]

Nice. You could submit this for the No-code challenge.

https://blogs.sap.com/2022/05/04/no-code-challenge-0-code-100-app-and-hoodies/

[ShyamBSingh]

Thanks for the encouragement @muralidaran.shanmugham2
That's already on my list 🙂

Shyam

[Dan_Wroblewski]

Have you submitted this? Contest ends tomorrow.

Also, do you have a link to the app on the AppGyver hosting platform?

[ShyamBSingh]

Hi Daniel,

Yes I did today, thanks for the initiative.

here the platform link: https://platform.appgyver.com/builder/applications/419784/pages/1

Thanks,

Shyam

[Dan_Wroblewski]

This is the link to the design time, which I do not have access to (because its yours). Can you send me a link to the deployed app?

[ShyamBSingh]

Build was successful.

I have also deployed it on one of my trail accounts, but the deployed app just displays the landing page with no functionality whereas I am able to run the app from SAP AppGyver Preview android app:

Link to deployed app: https://myapp.cfapps.eu10.hana.ondemand.com/

Thanks

Shyam

[ShyamBSingh]

Yes, I have build and deployed the app on my BTP trial account but there functionality is not working

Deployed App: https://myapp.cfapps.eu10.hana.ondemand.com/

Whereas it works fine on SAP AppGyver Android app on mobile

Thanks

Shyam

[Dan_Wroblewski]

Yes, I realize now it is a scanning app so you have to have mobile 😀

[ShyamBSingh]

🙂 The intend is to bring change is the traditional library process
1. Books can be issued and returned easily with mobile apps
2. Books can be put to their respective places with the details of the shelf included to clean any messy library table

Further more if we want to enable it on the library devices, we can add functionality to scan readers library card and then book barcode to issue it from any connected device.

Thanks

Shyam

 

[Raviisivar]

shyam.bahadur.singh  --

Thank you for the steps, I tried accessing the API's however I get an Invalid API which doesn't allow me to test forward. I do have a valid API from Google API

 

Any help here where am I going wrong ?

{

  "error": {

    "code": 400,

    "message": "API key not valid. Please pass a valid API key.",

    "errors": [

      {

        "message": "API key not valid. Please pass a valid API key.",

        "domain": "global",

        "reason": "badRequest"

      }

    ],

    "status": "INVALID_ARGUMENT",

    "details": [

      {

        "@type": "type.googleapis.com/google.rpc.ErrorInfo",

        "reason": "API_KEY_INVALID",

        "domain": "googleapis.com",

        "metadata": {

          "service": "books.googleapis.com"

        }

      }

    ]

  }

}