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 searches the Appery.io Backend Services database, and uses a regular expression to search for states.

The app will look like:
neSearch

Before you begin

Tutorial level: intermediate.
Prerequisites: an Appery.io account.

It’s a good idea to complete the first search app tutorial: Building a search app with Appery.io Backend Services, before you begin this one.

Creating a new app

Create a new app in the Appery.io app builder; from the Apps page, enter an app name and click “Create”.

Creating the mobile UI

Create the following UI:
StatesApp

  • An Input component with Enter state… as Placeholder.
  • A Button component, with Search as Text.
  • A Grid component below the button, with one column, one row, and a Label component inside:

Creating a database

  1. Click Database inside the builder.
  2. Create a database or use an existing one.
  3. Go to the Collections tab, and click “Import a collection”.
  4. For a collection name, enter States, and upload the States CSV file to the database. If you used phoneDB (database created in the first half of this tutorial: Building a search app with Appery.io Backend Services) as your database, the collection will look like:
    StatesDB

Creating a REST service

Create the REST service to access the database.

1. From the Appery.io builder: CREATE NEW > Database Services, select the database that holds the States collection.

2. From the States collection services, check the Query service, and click “Import selected services”:
ImportDBServicesStates

You should see the service created under the Services folder.

You can also test the service; open the service and switch to the Test tab. Paste the following for the where parameter:

Click “Test”.

The above will return all states that start with letter C or c. “$options”:”i” is what specifies the query to ignore the case.

Add & bind the service

1. With the page open, switch to the DATA tab.

2. Add the service (datasource) to the page by selecting Service > [databaseName]_States_query_service > Add.

3. Rename the service instance to states_search.

4. Click “Mapping” for Before send event and define the following mapping:
BSQueryMapping

5. Click “JS,” and enter the following JavaScript:

6. Click “Save and return”.

7. Switch to the Success tab, create the following mapping, and save:
SuccessStatesMapping

Invoking the service

  1. Go to the DESIGN tab.
  2. Select the search button, and open the EVENTS tab.
  3. Define the following event: mobilebutton1_x (component) > click (event) > Invoke Service (action) > states_search.
  4. Click “Save”.

Testing the app

Run the app in the browser.

For example: entering “ne” will result in:
neSearch