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 will list tasks, add new tasks, and delete tasks.

The app will look like:
Finish

Before you begin

Tutorial level: intermediate.

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”. Go to Pages > startScreen. You’ll see a start page.

Creating the list

Creating a new database

1. From inside the builder, click “Database” (upper-right corner of the editor):

A new window will open with the Appery.io Databases page.

2. Click “Create new database.” For the database name, enter todoDB and click “Create”:
CreateDB

3. A database is created, and its Collections tab is loaded. This is where your collection (that stores the tasks) will be defined.

4. Click “Create new collection”. For the collection name, enter todo. Click “Add”.

A collection will be created with default columns:
CreateNewCollection

5. Now you’ll add a custom column; click “+Col”.

6. For Name, enter task. Click “Create Column”. A new column will be added to the collection.

7. Enter sample data. Click “+Row”; a row will be inserted where you can enter the sample data. To save the data, simply press <Enter>, or tab out of the field.

The following screenshot shows two sample tasks:
SampleDatainaCollection

Creating REST services

Everything in the Appery.io database is automatically exposed via RESTful APIs, so it’s very simple to define the service by entering its URL, and defining the request/response parameters. To make it even simpler, the database console offers a curl command hint (click the GET link):
GetRESTAPI

However, there is also an even simpler approach; you’ll generate the services automatically in the following steps:

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

2. Select the database from the list. You’ll see a list of database services for which you can generate REST services. The first section defines User management services, and will be the same for each collection.

The second section lists all the collections in this database (you have one called todo):
ImportDatabaseServices

3. For your app, you’ll need three services for listing, creating, and deleting. Check the following services:

  • Create.
  • Delete.
  • List.

ToDoList

4. Click “Import selected services”. When the services are imported, you should see four services under Services in Project view. Three are RESTful services that perform the actions above. One is a special Settings service that holds the database URL and the database key. Open any of the services, and you’ll see that Settings is set to this file. This allows you to keep common information in one place.

5. Save.

If you open any of the services, you’ll also see that the URL is set, and the request and response parameters are all set. Everything you need was instantly created. Let’s test one of the services:

1. Open the todoDB_todo_list_service service.

2. Open the Test tab, and click “Test”.

You should get a JSON response with the same data you created:
JSONResponse 1

3. Save.

Building the UI

1. Open the startScreen page in DESIGN view; a blank phone frame will open:
BlankPhoneFrame

2. Update the Caption in the header to ToDo App.

3. To display the list of tasks, use the List component. Drag and drop the List component to the page:
ListComponent

4. Since the list is loaded from the database, you only need one static list item. Select the list (make sure you select the list itself; use the breadcrumbs at the top) and in PROPERTIES, decrease the number of items to one, and click  “Apply”:
1ListComponent

5. You can test the app in the browser by clicking “TEST”.

6. Now insert a Label inside the list. Select the Label component, and place it inside the list:
LabelComponenet

7. With the label component selected, change its name in PROPERTIES to taskName, and save.

Binding the list service

1. Switch to the DATA tab, and for Type, select Service, then select todoDB_todo_list_service. Click “Add”. The service will be added to the page.

2. The name column lists the service instance. Change the name to list_service:
list_service

3. Now, that you have added the service to the page, you can bind it. The system generates two mapping actions  for Before send and Success events by default. There is nothing you need to map for the Before send mapping; the database ID is already preset. Click “Mapping” for  Success event and create the following mapping:SuccessListService

$ – the array of all tasks, and thus mapped to the list so you get an automatic looping feature.

task – the name of task; it’s mapped to the label inside the list.

4. Click “Save and return”.

Invoking the service

1. Go to the DESIGN tab.

2. Open the EVENTS tab.

3. Define the following event:

  1. COMPONENTstartScreen.
  2. EVENT = load.
  3. ACTION = Invoke service, select the list_service:

InvokeService

4. Click “Save”.

Testing the app

Launch the app in the browser by clicking “TEST”. The result should look like:
TestingApp

Adding new tasks

Updating the UI

To add new tasks, you’ll need an Input component and a Button.

Update the UI to look like the screen shot below.

  1. Change the Text for the button to Add Task.
  2. Save.
    UpdatingUI

If you are having trouble placing the components in the right position, first position them at the top of the page, then re-position them in the right place.

Adding and binding the create service to the page

Under Services in Project view open the create service to see what was created. As you can see, there is POST to add new items:
CreateService

You can also view the request and response parameters.

1. From startScreen, open the DATA tab.

2. Select Service > todoDB_todo_create_service, and click “Add”.

3. Rename the service instance name to create_service:
CreateService+ListService

4. Click “Mapping” for Before send event and create the following mapping:
BeforeSendMapping

The value entered into the input field will be used as input to the service. Remember to save.

You can open the response to see what the service returns, but you don’t need to map anything.

Invoking the service

1. Go to DESIGN view.

2. Open the EVENTS tab.

3. Define the following:

  1. COMPONENTmobilebutton_x.
  2. EVENTClick,
  3. ACTIONInvoke service, select create_service.

4. Click “Save”.

Now you need to insert a new item into the database and update the list in the page. To do so, invoke the list service right after the create service is invoked.

1. Open DATA view.

2. Open the EVENTS tab.

3. Define the following:

  1. COMPONENTcreate_service.
  2. EVENT = success.
  3. ACTION = Invoke service, list_service.

4. Click “Save” to apply the changes.

Testing the service

Launch the app in the browser to test the create service.

How the app should look after adding the “Get dinner” task:
GetDinner

Deleting tasks

Updating the UI

The only needed UI change is to add the ID of the task you want to delete. Since this information isn’t needed by the end user, make this ID hidden.

1. Go to DESIGN view. Insert another Label component inside the list:
2Label

2. Rename the component to taskId and uncheck the Visible property, and then save.

Updating mapping

Now you’ll update the mapping from the list service to display this ID as well:

1. Switch to DATA view.

2. Select list_service, and click “Mapping” for Success.

3. Update the mapping (mapping _id to the new label you added), and then save:
IDMapping

Saving the task into the browser’s local storage

Before you invoke the delete 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 taskId, and click “Add”.

3. Save.

Now you can save the task ID into the browser’s storage, and then pass it to the delete service.

1. Switch to DESIGN view.

2. Select the item inside the list (make sure you select the item inside, not the list; use breadcrumbs).

2. Open the EVENTS tab.

3. Add the following:

  1. COMPONENTmobilelistitem_x.
  2. EVENTclick.
  3. ACTIONSet storage variable.

4. Set the following storage variable:

  1. Variable name_taskId.
  2. Check “Bind to component”.
  3. Target componenttaskId.
  4. Property nameText.
    StorageVariable

5. Click “Save”.

Adding and binding the delete service to the page

1. Go to DATA view.

2. Add the todoDB_todo_delete_service service to the page.

3. Rename the service instance name to delete_service.

The result will look like:
3List

4. Click “Mapping” to map the Before Send event service, check the “Storage” property and create the following mapping:BeforeSendMappingDeleteService

4. Click  “Save and return”.

The delete service doesn’t return anything, so you don’t need to map anything for the success.

Invoking the service

1. Open DESIGN view.

2. Open the EVENTS tab.

3. Add the following:

  1. COMPONENTmobilelistitem_x.
  2. EVENTclick.
  3. ACTIONInvoke service, select delete_service:2Services
  4. Click “Save”.

Updating the list after delete

Just like when you’re adding a new item, you need to update the list by calling the list service.

1. Open DATA view.

2. Open the EVENTS tab.

3. Add the following:

  1. COMPONENT = delete_service.
  2. EVENTsuccess.
  3. ACTIONInvoke service, select list_service.

4. Click “Save”. If you click “Show All”, you should see:RealPicture

5. Save.

Testing the service

You are ready to test the app.