Skip to Content

Configure Your AppGyver Application to Open your Device Camera

test
0 %
Configure Your AppGyver Application to Open your Device Camera
Details

Configure Your AppGyver Application to Open your Device Camera

Requires Customer/Partner License
October 21, 2021
Created by
September 20, 2021
Configure the logic flow in your application to enable your device to open your camera on demand.

You will learn

  • How to add logic to a button in your mobile application
  • How to connect user interface elements to actions in your mobile application
QR code

Prerequisites

Logic flows are used to trigger events in an application, such as a page loading or a user tapping on a button. To create a barcode scanning app, you need to configure a logic flow that tells your application to open the camera device once the ‘Scan’ button has been tapped. To do this, we’ll show you how to add the logic to the button, then how to take advantage of AppGyver’s QR and Barcode component.


Step 1: Add logic to button

Open your draft application in your AppGyver Composer account, displaying your barcode scanner app.

Click Scan button and then click Add Logic to BUTTON 1.

Add logic to button
Log on to answer question
Step 2: Add scan QR/barcode component

In the logic panel, you can see the Event - Component Tap, which is when a user taps on the button within the application. We now need to decide what this event triggers.

Using the core logic components, scroll down to the Device – Scan QR / barcode component and then drag and drop this into the logic editor. This is a preconfigured QR or barcode scanner component provided by AppGyver, one of many available within your AppGyver account.

Add Scan QR logic to logic editor

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

Manually draw a connector between the elements
Log on to answer question
Step 3: Add an alert element

To test that the QR / barcode scanner is working, we now want to add an Alert component to our application. This will simply show a pop-up alert once a barcode has been scanned, returning the barcode number to the screen.

To do this, return to the core logic options, scroll to Alert, and drag and drop this alongside the Scan QR / barcode logic.

Add an alert logic

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

Add connector to the alert element
Log on to answer question
Step 4: Bind elements

As the alert is currently set to display a static text response only, we want to add a dynamic binding here. This allows us to tell the app what information to provide instead, which in our case is the barcode being scanned.

To do this, select the Alert element and using the properties panel, click Currently bound to: Static text, opening the binding options screen.

Currently bound to element

Click Output value of another node*.

Output value of another node

Configure the binding to the following:

  • Select logic node – Scan QR/barcode
  • Select node output – Scan QR/barcode / QR barcode content

Click Save.

Edit binding and then click Save
Log on to answer question
Step 5: Save and preview

Click Save.

Save application

Using your device, open your draft application in the AppGyver Preview app and test the feature with a food item barcode.

Open smart phone app

Tapping the Scan button will now automatically open your device camera.

Tap scan button

And scanning a barcode will return the barcode number only, as no further information has been configured for the event yet.

As an example:

View results
In the example, what is the barcode number of the scanned food item?
×

Next Steps

Back to top