How to make a To Do App and store it on Firebase (Firebase to List viewer)

Good morning thunkers! I wanted to share an app I recently completed! This can be used to share ideas between teams working on the same tasks.

First: Here is a link to my app! Please let me know how we can make it better!
https://x.thunkable.com/copy/4eab8e5a3b8c92dcdfaaf7ee0bb05b4c
I am already thinking of using dynamic columns/rows for a ‘prettier’ feel to the entire thing plus specifically the ability then to cross out a task prior to deleting it from the list altogether.

First: I found this login screen through an example project link on my Thunkable projects landing page.

Next I built this simple layout to hold a list viewer, a button, and a text input box


and i make sure to add these blocks to keep my DB free from readable email addresses. You’ll use this next.

Screen Shot 2020-03-07 at 7.52.43 AM
now the code.

the screen opens, I add a ‘listener’ to tell my app if any changes happen to my data on a firebase in the particular location spelled out via my key
Screen Shot 2020-03-07 at 7.59.07 AM

now the app waits for action to happen AND the listener automatically gets all the data and does stuff with it

here’s the listener ‘action block’ that populates the listviewer on app start. this basicallly says’ hey APP, when you start, check this and get the data specified in the key spelled out in the app open block. and then any other time theres a change, i’ll let you know!

Screen Shot 2020-03-07 at 8.00.10 AM

so when a response iis sent to the app from firebase, on start or after any data changes, it’s sent to that function “func.ParseResponse”. this function takes the firebase response. chops some stuff off the end and renames the delimiter. then it’s thrown into a loop and both the note and the timestamp which i use when i save are thrown into their own variable lists. the returned product is a cleaned up list of just the items i have saved as notes.

Now the app waits for you to touch the screen. you can save a note! this will automatically appear on the screen. I added a brief error handler, cause you never know what you’re gonnna get!

and then when you want to delete a task first click on it and then let the app do it’s work

in total it’s only 117 blocks and a few items on the screen. Plus firebase setup a great video can be found here from @Darren

3 Likes