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 a simple ToDo (list) app with Appery.io backend services. The app lists tasks, adds new tasks, deletes tasks, and it works in offline mode. This app should be tested on the real device only.

The app will look like:
Finish

Before you begin

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

It’s a good idea to complete the first ToDo app tutorial: Building a simple ToDo app with Appery.io Backend Services.

Creating a new app

Create a new project in the Appery.io app builder; from the Apps page, enter a project name and click “Create”. You’ll see a start page.

The same database used in the first part of the tutorial will be used in this one.

If you haven’t created it:

  1. Go to the Database page.
  2. Create a new database: todoDB.
  3. Create a new collection: todo.
  4. Click “+Col” to create a new column: task.
  5. Click “+Row,” and fill in some sample data (the tasks you need to do).

Creating REST services

To generate the REST services automatically:

1. From Project view, select CREATE NEW > Database Services.

2. Select the database from the list.

3. Check the following services under “Select collection services to import”:

  1. Create.
  2. Delete.
  3. List.
    ImportDBServices

4. Click “Import selected services” and save.

Building the UI

To create the UI, open startScreen, and drag and drop the following components:

1. Input – on the PROPERTIES panel, change the following:

  1. Delete its Text field, and enter “Input” in the Placeholder field.
  2. Name – change the name to: inputTaskName.

2. Button – change its text to “Add Task”.

3. List – change the number of items to one; place two components inside the list:

  1. Label – change name to: taskName.
  2. Label – change name to: taskId, uncheck the Visible property.

To make the text in the footer look neat, add styles:

1. From Project view, CREATE NEW  > CSS.

2. Enter name: todo_main.

3. Paste the following:

4. Open startScreen, and select the footer.

5. On the PROPERTIES panel, change the following properties:

  1. Namefooter.
  2. Class Namestatus-text.
    Footer

Working in offline mode

To make the app work in offline mode, you’ll need to add JavaScript that will check the connection and work with tasks.

Adding JavaScript

1. From Project view; CREATE NEW  > JavaScript.

2. Enter name: todo_main.

3. Paste the following JavaScript code:

Running JavaScript on the page

Open startScreen on the DESIGN tab. Open the EVENTS tab, and add the following events:

1. To run onDeviceReady() function:

  1. COMPONENT = startScreen.
  2. EVENT = device ready.
  3. ACTION = Run JavaScript.
  4. Enter the following:
  5. Click “Save”.

2. To run the onOnline() function:

  1. COMPONENTstartScreen.
  2. EVENTonline.
  3. ACTIONRun JavaScript.
  4. Enter the following:
  5. Click “Save”.

3. To run onOffline() function:

  1. COMPONENTstartScreen.
  2. EVENToffline.
  3. ACTIONRun JavaScript.
  4. Enter the following:
  5. Click “Save”.StartScreenComponenet

Now, when the app starts, the mode will be checked and in the footer the corresponding value will appear.

Adding & invoking the services

The services should work in both online and offline modes.

Add & map the list service

1. Open startScreen and switch to the DATA tab.

2. Add the todoDB_todo_list_service service. Rename the datasource to list_service.

3. Click “Mapping” for  Success event.

4. Define the following mapping:
ListServiceMapping

5. Click “Save and return”.

Local storage variables: creating

Before you invoke the service you’ve created, you need to add the service to the page:

1. Project > Model and Storage and open the Storage tab.

2. For the new storage variable name enter _taskName, and click “Add”.

3. Save.

Then, on startScreen, open the EVENTS tab, and add the following events:

1. To set the storage variable:

  1. COMPONENT =  mobilebutton1_x.
  2. EVENTclick.
  3. ACTIONSet storage variable.
  4. Variable name_taskName.
  5. “Bind to component”= checked.
  6. Target Component = inputTaskName.
  7. Property nameText.
  8. Click “Save”.
    SetStorageVariable

2. To run JavaScript:

  1. COMPONENTmobilebutton1_x.
  2. EVENT = click.
  3. ACTION = Run JavaScript.
  4. Enter the following:
  5. Click “Save”.

RunJavaScript

Add & map the create_service

1. Go to DATA view. If you see the mapping from an earlier service, click “Save and return” to go back.

2. Add the todoDB_todo_create_service service. Rename the datasource to create_service.

3. Click “Mapping” for Before send event.

4. Create the following mapping:CreateBeforeSendMapping

Local storage variables: deleting

Go to DESIGN view. Open the EVENTS tab. Add the following events:

1. For saving the task ID:

  1. COMPONENTmobilelistitem1_x.
  2. EVENT = click.
  3. ACTIONSet storage variable.
  4. Variable name_taskId.
  5. Check “Bind to Component”.
  6. Target ComponenttaskId.
  7. Property nameText.
  8. Save.

2. For saving the task name:

  1. COMPONENTmobilelistitem1_x.
  2. EVENTclick.
  3. ACTIONSet storage variable.
  4. Variable name_taskName.
  5. Check “Bind to Component”.
  6. Target ComponenttaskName.
  7. Property nameText.
  8. Save.

3. For running the function:

  1. COMPONENTmobilelistitem1_x.
  2. EVENTclick.
  3. ACTIONRun JavaScript.
  4. Enter the following:

3ComponenetsMobilelistitem

Adding a delete service

1. Go to DATA view. If you see the mapping from an earlier service, click “Save and return” to go back.

2. Add the todoDB_todo_delete_service service. Rename the datasource to delete_service.

3. Click “Mapping”  for Before send event.

4. Define the following mapping, and save:DeleteBSMapping

Invoking the services

When the device is in offline mode, the list service cannot be used. To allow you to add and delete tasks, the data will be saved in localStorage. To do this on the startScreen, go to the DATA tab, open the EVENTS tab, and add the following events:

1. To add data to localStorage:

  1. COMPONENTlist_service.
  2. EVENTsuccess.
  3. ACTIONRun JavaScript.
  4. Enter the following:
  5. Click “Save”.

2. To execute the service when a task is added:

  1. COMPONENTcreate_service.
  2. EVENTComplete.
  3. ACTIONRun JavaScript.
  4. Enter the following:
  5. Click “Save”.

3. To execute the service when a task is deleted:

  1. COMPONENTdelete_service.
  2. EVENTcomplete.
  3. ACTIONRun JavaScript.
  4. Enter the following:
  5. Click “Save”.Services

First, the mode is checked. If the device is in offline mode, the information about adding or deleting the task will be saved to the _echo property. If the device is in online mode, all the data from the _echo property will be sent to the server. The listServiceExecute() function will add or delete tasks to/from the displayed list.

Testing the app

Since we’re invoking a native component, the app needs to be tested as a hybrid app, or installed on the device.

The final app will look like:
Finish

Android

  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 Android binary and install it on your device. When the build is completed, you’ll see a QR code. Scanning the QR code will download the app to your phone. You can also email the app to your device.

iOS

  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.