What’s love got “ToDo” with it

I know what you are thinking - Bravo Studio has created this great new login feature that allows users to authenticate your no-code mobile but you are trying to figure out how you can use that to create a multi-user app….

Well prepare for all your questions to be answered as I am going to go through building a multi-user Todo app using the new login feature.

We don’t need another hero

Firstly lets start with our sample Figma file (which you can copy to create your own app) you can get it here:

This has a few things worth noting. Firstly it has a login, password recovery and signup page (which allow us to connect those features to Firebase), which we don’t need to change. Secondly it has the todo pages which we need to bind apis to:

• A list for tasks to be done,
• A list of tasks completed
• And a page to create new tasks which we need to

The other part you will need is a place to store you tasks in, and for ease of setup we are going to use Airtable, and you can copy our example table from here.
‍

The important parts to note for the Airtable is that it has a task title, a due date, a task status and a user.

💡 Note In this tutorial I am not going to go through the setting up of the firebase config for this app, you can get that information here (you don’t have to worry about creating the screens we have done that for you, so you can start on section 2). Also you need to be aware that all the content for different users, will be stored in your Airtable so be careful with it and think about safeguarding their personal information.

Steamy Windows

The first thing we need to do is to bind the API for the creating of new tasks. To do this we need to create some APIs to our example Airtable using the Bravo Airtable API wizard. This will create the basic API requests that we need.

• Tasks — List: A list of tasks
• Tasks — Detail : The detail for each task in the Tasks table

To setup the apis we need to create requests for the following functionality:

1. Delete tasks
2. Make a task complete
3. Make a task go from complete back to Todo
4. Create new task
5. Request list of completed tasks for the signed in user
6. Request list of todo tasks for the signed in user

Addicted to love

So here are the following steps to create the requests we need (the last two are the ones that ensure the task data is personalized to the authenticated user by filtering the request from Airtable by the authenticated user id):

1. Create the Delete API request

- Duplicate the Tasks-Detail query and rename it to Task — Delete
- Change the request VERB to DELETE

2.Create the Task-Done API request

- Duplicate the Tasks-Detail query and rename it to Task-Done
- Change the request Verb to PATCH
- Remove the /${ID} from the end of the URL

- Add the following body as JSON to the request:

{“records”: [
{
 “id”: “${ID}”,
 “fields”: {
   “Status”: “Done”
   }
 }
]}

3. Create the Task-unDone API request

- Duplicate the Tasks-Done query and rename it to Task-unDone
- Change the body as JSON to the following:

{"records": [
{
  "id": "${ID}",
  "fields": {
    "Status": "Todo"
    }
  }
]}

4. Create New Task request

- Duplicate the Tasks-Done query and rename it to Task-Create
- Change the verb of this request to POST
- Change the body as JSON to the following:

{"records": [
   {
     "fields": {
       "Tasks name": "${task_name}",
       "When": "${date}",
       "Emoji": "${emoji}",
       "Status": "Todo",
       "User": "${user.id}"
     }
   }
]}

Here most fields will come from the Task creation screen, but the user.id data is the authenticated user id supplied by the login process.

‍

5. Create the Todo Task List API request

- Duplicate the Tasks-List query and rename it to Task-List Todo
- Ensure the end of the URL looks like the following :

?view=Todo&filterByFormula=%7BUser%7D%20%3D%20%27${user.id}%27

This uses the ‘Todo’ view to filter for tasks with a status of todo and the Airtable filter to filter for only tasks related to the authenticated user

so the whole URL should look like:

https://api.airtable.com/v0/<AIRTABLE_APP_ID>/Tasks?view=Todo&filterByFormula=%7BUser%7D%20%3D%20%27${user.id}%27

‍

5. Create the Todo Completed Task List API request:

- Duplicate the Tasks-List Todo query and rename it to Task-List Done
- Ensure the end of the URL looks like the following :

?view=Done&filterByFormula=%7BUser%7D%20%3D%20%27${user.id}%27

This uses the ‘Done’ view to filter for tasks with a status of done and the Airtable filter to filter for only tasks related to the authenticated user

so the whole URL should look like:

https://api.airtable.com/v0/<AIRTABLE_APP_ID>/Tasks?view=Done&filterByFormula=%7BUser%7D%20%3D%20%27${user.id}%27

‍

Goldeneye

The last step is to bind all these requests to the app to bring it all together:

On the Create Task screen, bind it to the Task — Create request and connect the name, date and emoji fields as below:

‍

On the Done screen, connect the Tasks — List Done request and bind the *list fields to records to enable the tasks to be iterated through. Then connect the ‘task’, ‘emoji’ and ‘date’ fields. Finally connect the remote actions: on the ‘check’ element to the Tasks — unDone request, and on the ‘delete icon’ to the Tasks-Delete request as below.

The last screen is the Todo screen, connect the Tasks — List Todo request and bind the *list fields to records to enable the tasks to be iterated through. Then connect the ‘task’, ‘emoji’ and ‘date’ fields. Finally connect the remote actions: on the ‘done button’ element to the Tasks — Done request, and on the ‘delete icon’ to the Tasks-Delete request as below.

Let’s stay together

So you now have a personalized Todo application with all the data being stored for each user in Airtable.

Happy Todoing! Although this is a simple example, you can use this as a basis to create some pretty interesting personalized applications. Let us know what you come up with in our spectrum chat here.