If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, you’ll learn how to build an app that uses a barcode scanner to manage a warehouse. With the app, you’ll be able to scan a barcode, and update and create new products in a database.

Before you begin

Tutorial level: advanced.

Prerequisites:

Building you first mobile app (Introduces you to the WarehouseDB).

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io. The Barcode Scanner component used in Appery.io is based on this plugin.

Creating a new app

Create a new app in the builder; from the Apps page, enter an app name (use any name) and click “Create”. You’ll see a start page.

Creating the UI

The app will have two pages with different UI:
StartDobleScreen

Theme used: flat-ui. Swatch used: G.

To change your theme and swatch settings, you need to import the available default themes via plug-ins first: CREATE NEW > From Plug-in (or click “Add more Themes” from App settings > General), which will open a window with the list of available themes for importing. Select the theme(s) to import and click “Import selected plug-ins”:
CatalogThemes

Then, in the builder, go to Project > App Settings. You’ll be able to change your theme and swatch via the drop-down menus.

The first page:

  • First is the Authorization page: there are two Input components, with Names login_input and password_input. For the password_inputchoose the password Type from the Type drop-down in the PROPERTIES section.
  • There is a Button component with the Name login_button and the Login Text.
  • Lastly, on the first page, there’s a Label component with Wrong login or password! Text, and error_label Name. Uncheck the Visible property, and set the font color like the following:
    war_app_error_label_properties

The second page:

From the Projects view, select CREATE NEW > Page, enter Name scan_page, and click “Create Page”.

  • First, there’s a Button component with Name scan_button. There is a Grid with 3 rows and 2 cols. Inside it, there are 3 Label components on the left column and 3 Textarea components on the right column. The labels have the text called: Name, Quantity, and Scanned Code. The Textarea names are: name_area,qty_area and code_area. Clear the text fields for the Textarea components. Set the Margins to 0.
  • There is a Label component with Name not_found_label and Text This item is not found in your database. You can add it by pressing the Add button. Uncheck the Visible property, and set the font color.
  • The last component on this page is a Button component that has Name update_button, and Text Update.

Collection structure

The following example uses the Warehouse database. This is a collection of products with the following structure:ProductsCollection

As you can see, this collection represents a simple form of a warehouse database. The name column is name of the product, the code column is the barcode of the product, and the qty column refers to the quantity. The Users collection is predefined:
UsersDB

Adding app authorization

Since this app can edit the database records, it needs a sessionToken, which can be retrieved in the login procedure.

First, import the login service:

1. From Projects view, CREATE NEW > Database Services, choose your database (WarehouseDB in this example), select the Login service, and click “Import Selected Services”.

2. Open the DATA tab on the Authorization page.

3. For datasource, select Service > warehouse_login_service > Add. The login service will be added to the page. Name it login_service:

4. Define the following mapping action for Before send event:
BSLoginMapping

5. First, you need to add a new variable: Project > Model and Storage and open the Storage tab. Enter new storage variable named sessionToken and click  “Add”.

6. Now you can define the following mapping action for Success event:
SuccessLoginMapping

You need to add events to the page. This event will show an error message on the page:

  1. Click “Save and return” and open the EVENTS tab. Add the following event: login_service > Error > Run JavaScript.
  2. Add the following JavaScript and click “Save”:
In the case of success, the user should see the scan_page.

  1. Add the following event: login_service > Success > Navigate to page > scan_page.
  2. Click “Save”.

The added events look like:
login_serviceEvents

We need to launch the login service. This event will hide the error message when the user tries to log in again. Go to Authorization, select the login_button and add the following events:

  1. Select login_button > Click > Run JavaScript.
  2. Add the following JavaScript and save:
Add the following event to launch the login service:

  1. Select login_button > Click > Invoke Service > login_service.
  2. Click “Save”.

Adding services

Go to the scan_page.

From Projects view, select CREATE NEW > Database Services, choose your database, expand the collection with the product info (Products data in case of this example) and check the Create, Update and List services. Click “Import selected services” to import them:
ProductsData

Read more about the database services import via the link.

Now we need to add services. To add the BarcodeService:

  1. Open the DATA tab.
  2. For datasource, select Device > BarcodeService > Create Service. The BarcodeService will be added to the page. Name it barcode_service.
  3. First you need to add a new variable: Project > Model and Storage and open the Storage tab. Enter new storage variable named  scanned_code and click  “Add”.
  4. Now you can define the following mapping action for Success event and save:BarcodeServiceMapping

This will show the just-scanned barcode on the page, and store it to the local storage variable.

Now we need to add the service that’ll retrieve product information about the scanned code from the database.

1. Open the warehouse_products_list_service.

2. On the Request tab, add where parameter under the Query String tab, and click “Add”.

3. Go back to scan_pageopen the DATA tab, and for datasource, select Service > warehouse_products_list_service > Add. Name it get_product_info.

3. Define the following mapping action for Before send event of the get_product_info service:
Where

4. Click “JS” for the where function (value) parameter, and add the following code:

5. Click “Save and return” in the top-right of the screen.

6. Now you need to add a new variable: Project > Model and Storage and open the Storage tab. Enter new storage variable named  objectId and click  “Add”.

7. Now you can define the following mapping action for Success event:SuccessList_serviceMapping

Now we need to add the service that’ll update the newly-scanned product info:

  1. Click “Save and return”.
  2. For datasource, select Service > warehouse_products_update_service > Add. Name it update_product_info.
  3. Click “Mapping” for Before send event of the update_product_info service and create the following mapping:

There’s nothing to be mapped for Success event.

Add the last service; it’ll add new items to the database if the code scanned isn’t found:

  1. Click “Save and return”.
  2. For datasource, select Service > warehouse_products_create_service > Add. Name it add_item_service.
  3. Define the following mapping action for Before send event of the service:BSCreateServiceMapping

The added services look like:
AddedServices

Invoking services

Once the all services are added and mapped, it’s time to add events to the buttons.

Add the event to invoke the BarcodeService:

  1. Go to the DESIGN tab.
  2. Select the scan_button and add the following event: scan_button > Click > Invoke Service > barcode_service.
  3. Click “Save”.

The added event looks like:ScanEventAdded

The update_button will invoke different services according to the actual situation: if the scanned code is found in the database, it will invoke the update_product_info service, otherwise it will invoke the add_item_service.

  1. Select the update_button and add the following event: update_button > Click > Run JavaScript. 
  2. Add the following JavaScript, and then click “Save”:
The added event looks like:UpdateEventAdded

There are events that need to be added on the service’s Success event. The get_product_info service should be invoked just after the BarcodeService is finished. Once the code is scanned, the database request with the scanned code will be sent immediately.

  1. Go to the DATA tab.
  2. In the EVENTS panel, select the barcode_service as component, and add the following event: barcode_service > Success > Invoke Service > get_product_info.
  3. Click “Save”.

Since the update_button will trigger two different services, it’s reasonable to change its text according to the situation. The following event will also clear the text areas when the item isn’t found in the database.

  1. Add the following event: get_product_info > Success > Run JavaScript.
  2. Add the following code, and then click “Save”:

Read how to set and get the component’s value here.

Change the update_button text back to Update once the new item is successfully added to the database, and hide the warning label:

  1. Add the following event: add_item_service > Success > Run JavaScript.
  2. Add the following code, and then click “Add”:
The added events look like:
NewServicesList

Testing the app

Since we’re invoking a native component (BarcodeScanner), the app has to be tested as a hybrid app or installed on the device. The final app will look like:
1stScreen

Android

Android testing options:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app. You can find it in the the Google Play Store.
  2. Build the Android binary and install it on your device. When the build is completed, you’ll see a QR code. Scan the QR code to download the app to your phone, or email it to your device.

iOS

iOS options:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app.
  2. Build the app and install it on your device.