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