With Thunkable, you can create apps that use a simple Google sheet spreadsheet as the database. The scheme isn’t appropriate for large-scale apps, but it is great for prototyping or building an app useful to you, your family or an organization.
In this tutorial, you’ll build an “Appreciation” app for posting things you appreciate– something along the lines of the popular #gratitude30 project. The posted entries are stored persistently— even if you close the app and reopen it, they’ll still be there. The app is a cloud app, meaning the posts are stored in the cloud, so the positive vibes are shared amongst all users of the app.
To build the Appreciation app, follow the instructions below or check out the video version of this tutorial.
1.Open this sample Google Sheet and make a copy of it.
- choose File | Make a Copy
- change the sample data, “Blue sky” to something you appreciate.
- You can also just create your own sheet from scratch.
2.Create a new Thunkable project named, “Appreciate”. On the project creation page, de-select the “try it” checkbox for using the drag and drop interface. Use the classic interface for this app.
3. In the user interface, add a Label with the Text, “Things I appreciate…”
4. Add a Data Viewer List and place it below the Label. Change the Data Viewer List’s properties:
- Click on the “Add” button of the DataListViewer’s DataSource property. In the dialog that appears, click on “Create New” at the bottom then choose “Google Sheet” and select the google sheet you just created. This will connect your app to the sheet.
- Set the Data Binding property by binding “Title” to the “Appreciations” column of the sheet.
5. Live Test the app. Does the entry you put into the spreadsheet appear in the Data Viewer List? If so, you’ve successfully connected your app to the spreadsheet. Next, you’ll add components to allow the user to input new entries.
6. Add components to allow the user to input new data. Add a Row component, then place a TextInput and a Button inside the Row. Change the Hint property of the Text Input to “What do you appreciate?” and its Hint Color to white. Change the Text of the Button to “Submit”.
7. In the Blocks Editor, code the blocks so that the new entries get put into the spreadsheet– your app will modify the Google sheet.
In the when Button1.Click event handler, call createRow, which you’ll find in the “Data Sources” folder. Place the text the user entered, Text_Input1.Text, in for the “Appreciations” value, and in the “then do” slot, call Data_Viewer_List1.Refresh Data. Your blocks should appear as:
8. Test your app. Enter an item and click Submit. Does your new entry appear in the list? Make sure and test the persistence! If you close up Thunkable Live on your phone and reopen it, are the items still there?
9. Customization: Add a time-stamp (date) to your app. You’ll need the following:
- Add a new column in your spreadsheet labeled “date”
- after adding, choose your Data Viewer List and then “click here to view the data” in your Data Source property and then “Sync with source”. This will set your app up to work with the updated spreadsheet.
- In the Blocks, there is a “Device” folder. Within it are blocks for current month, day, etc. Drag in those blocks and use a red text “join” block to cobble together a timestamp. Use that for the “date” slot when the user submits an entry.
- Show the timestamp as a “subtitle” in your Data View List
Extra Credit: Modify the Appreciations app so that it allows a user-generated sound clip to be stored with each appreciation. You’ll need the AudioRecorder component, you’ll need your Google sheet to have a second column to store each file path that is recorded, and you’ll need to code blocks so that the file can be replayed when the “Appreciation” is selected.