Building a simple ToDo app with Tiggzi Backend Services

What are we going to build

This tutorial will show you how to build a simple ToDo app with Tiggzi Backend Services. The app is going to look like this:

The app will support listing all the tasks, adding new tasks, and deleting tasks.

Before you start

Tutorial level: Intermediate

Creating a new app

Create a new app in Tiggzi app builder. From Apps page, enter app name (use any name you want) and click Create. You will see a start page. We will now create a database for the app.

Creating new database to store app data

Before start building the pages, let’s create a database to store the tasks.

1. From inside the builder, click Backend Services button (near Test) button:
   
   A new window will open with Tiggzi Backend Services (the default page right now is the database).
2. For database name enter: todoDB and click the Create button
   
3. A database will be created and its Dashboard loaded. Open the Collections tab. This is where we are going to define our collection that will store the tasks.
4. Click the New button (left-hand side). For collection name enter: todo. Click Add. A collection will be created with its default columns:
   
5. Now we need to add a custom column. Click +Col.
6. For Name enter: task. Click Create Column button. A new column will be added to the collection.
7. Now we can enter sample data. Click +Row, a row will be inserted where you can enter any sample data. To save the data, simply click our or tab out of the field. For example, adding two tasks:
   

That’s all we need to do here, you can of course enter as many items as you would like.

Creating REST services

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

We are however going to an even simpler approach. We are going to generate the services automatically in the following steps.

1. From Project view, select Create New > Database Services
2. Select the database from the list. You will 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 (we have one called: todo):
   
3. For our app we need three services, for listing, creating, and deleting. Check the following services:
   1. Create
   2. Delete
   3. List
      
4. Click Import selected services button. When the services are imported, you should see four services under Services in Project view. Three are RESTful services that perform one of the actions above. And one is a special setting service that holds the database URL and the database key. Open any of the services and you see that Settings is set to this file. This allows to keep common information in just one place.
5. Save.

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

1. Open todoDB_todo_list_service service.
2. Open Test tab and click the Test button. You should get a JSON response with the same data you created:
   
3. Save.

Listing all the tasks

We’ll first create the UI, add the service to page, bind the service, invoke the service, and then test.

Creating the UI

1. Open startScreen page, a blank phone frame will open
   
2. Update the Caption in the header to: ToDo App
3. To display the list of tasks, we are going to use the List component. Drag and drop the List component into the page:
   
4. As the list going to be loaded from the database, we only need one static list item. Select the list (make sure you select the list itself, use breadcrumbs at the top) and decrease the number of items to one in properties:
   
5. You can test the app in the browser by clicking the Test button.
6. We will now insert a Label inside the list. Select the Label component and place it inside the list:
   
7. With the label component selected, change its name in Properties to: taskName.
8. Save.

That’s all we need for the first part of the app. Now are going to create REST services that would get data from the database.

Adding and binding the list service to the page

1. Open startScreen
2. Switch to Data tab
3. For Type, select Service, then select todoDB_todo_list_service. Click Add. The service will be added to the page.
4. Name column lists the service instance. Change the name to: list_service:
   
5. Now that we have added the service to page, we can bind the service to the page. Click Edit Mapping.
6. There is nothing we need to map for request mapping, the database id is already preset. Click on Response tab.
7. Define the following mappings:
   
   $ - is the array of all tasks and thus mapped to the list so we get an automatic looping feature
   task - is the name of task and is mapped to the label inside the list.
8. Save.

The last thing is to invoke the service on page load.

Invoking the service

1. Go back to Design tab
2. Open Events tab
3. Define the following event:
   1. Component: startScreen
   2. Event: Load
   3. Action: Invoke service, select the list_service
      
4. Click the green [+] button to save the event.

Testing the app

Go ahead and launch the app in the browser by clicking the Test button. The result should look like this:

Adding new tasks to the list

We will update the UI, add the service to page, bind the service, invoke the service, and then test.

Updating the UI

To add new tasks, we need an input component and a button.

1. Update the UI to look like in the screen shot.
   Note: if you are having trouble placing the components in the right position, first position them at the end of the page, then reposition them in the right place:
   
   The label inside the input field (“Input”) is marked as Placehoder in Properties
2. Save.

Adding and binding the create service to the page

Let’s first open the create service to see what was created for us. As you can see, we are not doing a POST to add new items:

You can also view the request and response parameters.

1. From startScreen, open the Data tab
   If you see mapping from the earlier service, click Back to datasources to go back.
2. Select Service > todoDB_todo_create_service, click Add
3. Rename the service instance name to: create_service
   
4. Click Edit Mapping, and open Request tab.
5. Define the following mapping:
   The value entered into the input field will be used as input to the service.
6. You can open the Response to see what the service returns however, we don’t need to map anything.
7. Save.

Invoking the service

1. Go back to Design view
2. Select the button and open the Events tab.
3. Define the following event:
   1. Component: mobilebutton1_x
   2. Event: Click
   3. Action: Invoke service, select the create_service
4. Click Add event button to save.

There is one more thing we need to do. We insert a new item into the database but also need to update the list in the page. To do that, right after the create service is invoked, we are going to invoke the list service.

1. Open the Data view
2. Open Events tab
3. Define the following event:
   1. Component: create_service
   2. Event: Success
   3. Action: Invoke service, list_service
4. Click Add event to apply the changes.

Testing the service

Launch the app in the browser to the create service. This is how the app should look after adding “Get dinner” task:

The last thing we are going to work in is deleting tasks.

Deleting tasks from the list

Updating the UI

The only UI change we need to make is to add the id of the task we want to delete. As this information is not needed to the end user, we are going to make this id hidden.

1. Insert another Label component inside the list:
   
2. Rename the component to: taskId and uncheck Visible property.
3. Save

Updating mapping

We now need to update the mapping from list service to display this id as well.

1. Open startScreen, switch to Data view
2. Click Edit Mapping for todoDB_todo_list_service service
3. Update the mapping to look like this, mapping _id to the new label we added:
   
4. Save.

Saving the task to delete into browser’s local storage

Before we invoke the delete service which we have already created, we need to know which tasks we are deleting. To do that, we are going to save the task id into browser’s local storage and then pass it to the delete service.

1. Select the item inside the list (make sure you select the item inside, not the list itself. Use breadcrumbs to help select.)
2. Open Events tab
3. Add the following event:
   1. Component: mobilelistitem1_x
   2. Event: Click
   3. Action: Set local storage variable
4. Set the following local storage variable:
   1. Variable name: _taskId
   2. Check Bind to Component
   3. Target Component: taskId
   4. Property name: Text
      
5. Click Add event
6. Save.

We will add the delete service invocation after we add the service to the page first.

Adding and binding the delete service to the page

1. Go to Data view
2. Add todoDB_todo_delete_service service to the page
3. Rename the service instance name to: delete_service. The result will look like this:
   
4. Click Edit Mapping to map this service
5. Create the following mapping:
   
6. Save.

The delete service doesn’t return anything and so we don’t need to map anything.

Invoking the service

1. Open Design view
2. Select the item inside the list
3. Open Events tab
4. Add the following event:
   1. Component: mobilelistitem1_x
   2. Event: Click
   3. Action: Invoke service, select delete_service
      
5. Click Add event button

Updating the list after delete

As with adding a new item, we need to update the list by calling the list service.

1. Open Data view
2. Open Events tab
3. Add the following event:
   1. Component: delete_service
   2. Event: Success
   3. Action: Invoke service, select list_service
4. Click Add event. If you click Show All, you should see the following:
   
5. Save.

Testing the service

We are done and ready to test the app.