The Climate Pledge Video app is a template for apps which allows the user to record video posts and have them stored in the cloud for viewing by other users.
- Begin with a template app and customize it
- Uses Thunkable’s drag and drop interface
- play video, record video, upload image, Data Source and DataViewerList
- Coding Concepts: Sophisticated if-else blocks
The app lists the previously recorded videos on the home page. You can click on a video to view it, or you can click on the “Record your video pledge” button to initiate your own recording. This tutorial describes the template app and walks you through the process of creating your own version of a video posting app.
The first step is to copy the template app.
- Go to the project detail page for the template app. You’ll need a Thunkable account, which is free!
- Click on “See Inside”.
- You will be placed inside the app in read-only mode. Click on the “dot-dot-dot” in the top right of the menu and choose “Duplicate project” (see the blue squares below). This will create a brand new project which is a copy of the original.
The template app uses Thunkable’s new drag and drop interface. If you aren’t familiar with the new interface, check out this tutorial.
After making a copy of the template app, there are two steps for getting your version to work:
- create your own account at Cloudinary, a free tool for storing media, and
- create your own Google sheet to store the posts
Read on for instructions on how to do this.
Cloudinary and Storing Media
When the users of your app create media, like the videos recorded in this app, your app needs to store them somewhere in the cloud. Thunkable provides access to Cloudinary, a tool that provides such storage and has a free plan.
As Figure 2 illustrates, after your user records a video, your Thunkable app will call the “uploadImage” function to send the video file to Cloudinary. The function is simple but powerful: Cloudinary just stores the file somewhere in its servers (the cloud), assigns a unique URL to it, and sends back the URL to the Thunkable app. The app then uses the data source’s “createRow” function to store the URL as part of a post in the spreadsheet, along with the title and author name entered by the user. With these actions, the recorded video is stored permanently and with a URL that the app can access later when the user, or a different user, selects the video for re-play.
Follow these steps to setup Cloudinary and your app:
- Create an account at Cloudinary.com and choose the free plan.
- Click on the Dashboard tab to view your API information. You’ll need to copy that information into your Thunkable app.
- In your Thunkable app, in the Designer, click on the “Settings” icon in the left-panel, then scroll down to the “Cloudinary Settings”. Copy and paste the information from your Cloudinary Dashboard into the corresponding fields in your Thunkable Cloudinary Settings.
When you set these Cloudinary settings, it tells the “uploadImageFile” function block which Cloudinary account to store files in.
Create your own Spreadsheet Database
Anytime you copy an existing app that relies on a spreadsheet database, you need to create your own copy of that underlying spreadsheet. Thunkable doesn’t automatically make a copy of the spreadsheet when you copy an app.
- Using the same account as your Thunkable account, create a new Google Sheet and give it a name in the form [Your name]VideoPosts, e.g., DavesVideoPosts.
- Open the template spreadsheet, which is owned by the app creator, the fabulous David Wolber (me). Provide your spreadsheet with the same headings as in row 1 of the original, “video”, “title” and “author”:
Copy only the first row (the headings). You don’t need the other rows and your spreadsheet should begin with just one row.
Connect your app to your Spreadsheet
Once you’ve created your spreadsheet, you need to configure your app so that it stores posts in it instead of trying to store them in the original spreadsheet, which you don’t own.
When you want to access data in a Google sheet or Airtable spreadsheet, you create a “data source” in Thunkable which represents the sheet.
- In your Thunkable app, add a new data source.
You add a new data source by choosing the data icon in the top-left panel, clicking on the (+), then following the instructions to create a new data source connecting to the Google Sheet you just created. Create this second data source and for now leave the original data source as well.
- In Screen1, choose the Data_Viewer_List1 component and change its properties so that its data source is yours, not the original (e.g., “DavesVideoPosts” instead of “VideoPosts”).
- After you make the change, you also need to reset the “Title” and “Subtitle” settings so that they show the “title” and “author” columns in the spreadsheet (see the blue boxes in figure 8):
Changing the properties for the Data List Viewer will result in Screen1 of the app listing the posts from your spreadsheet (there shouldn’t be any posts yet, as you only have the header row).
You also need to change the blocks for the app so that they refer to your data source instead of the original spreadsheet.
Modify Screen1’s Blocks
Figure 9 shows the blocks for Screen1:
The blue annotation boxes denote the changes that you’ll need to make so that your app gets values from your new spreadsheet instead of the original. In all the blocks, change the “VideoPosts” setting to your newly created spreadsheet name.
After you make the change, the column names for the blocks will be reset to defaults. You need to manually set them back to how they are in the Figure above. So in the “list of values in” function block, be sure that “ID” is selected on the far right. And in the “get value from” blocks, be sure that “video”, “title” and “author” are selected respectively.
Modify RecordScreen’s Blocks
Figure 10 shows the blocks for the RecordScreen:
The blue annotation box around the “createRow” function is the only block that needs to be modified. Choose your new data source instead of “VideoPosts”, and then make sure the “video value”, “title value” and “authorValue” slots are filled as in Figure 10 (the blocks may pop-out when you change the data source).
Changing the “createRow” block will lead to any new video posts being placed into your new spreadsheet.
Test the app
Once you’ve made the changes above, test the app. When you first preview it, it should show a blank list on Screen1 since you don’t yet have any posts. Click on the “Record your own Video” button, record a video, and select the “Add Video to library” button to post it. You should be sent back to Screen1 where your new video should be listed and start playing.
Check your spreadsheet as well– it should have a new posting in it– and go to Cloudinary to see if your new video is stored there. Of course your app users won’t even know that there is a spreadsheet or Cloudinary account underlying the app.
Troubleshooting
It is easy to make a mistake in configuring the app to work with your Cloudinary account and spreadsheet. Go over the settings, design properties, and blocks to see that they match the instructions above.
You can break things down into parts to debug. To see if the video playback is working, manually put a row into the spreadsheet with a URL to a known video in the first column and a sample title and name.
Once that works, focus on the Cloudinary storage– is a file being stored at Cloundary when the user chooses to add the file to the library. If not, double-check that your Thunkable app Cloudinary settings match those of your Cloudinary account.
If the file is being stored at Cloudinary but a row isn’t being added to the spreadsheet, check the “createRow” block in the “RecordScreen” to see if it refers to your data source, but otherwise matches the sample code above.
Remixing the App
The app is a template and can be used to add video input in any app. This one prompts users to make a pledge about our climate, but you might create an app where people post about water impurities in their nearby rivers, what they like about Thunkable, or appreciations of their loved ones.
It may be a bit challenging the first time you follow the instructions to create a version, but once you do it once or twice the process will be become second nature and you can use it to remix any Thunkable app which has an underlying spreadsheet and/or Cloudinary media storage.
The world is, indeed, your oyster!
Understanding the Blocks
Screen1
In “when Screen.Opens”, the app retrieves the ids for all posts (rows) in the spreadsheet. It then calls the function, playVideo, and sends a random id from the list into it.
PlayVideo uses “getValue” blocks to grab data from the spreadsheet row signified by rowID, including the “video”, “title” and “author” columns. That data is placed into variables, then copied into the Labels for showing the title and author, and into the Video player to ready it for playback. In effect, when the app launches, a random video is taken from those previously recorded and set ready for play.
The “when Data_Viewer_List1.ItemClick” also calls playVideo. It grabs the rowId of the item the user has clicked and sends that to the function so the user’s chosen video is played.
RecordScreen
In “when RecordScreen.Opens”, the app sets the “videoURL” and “videoFile” to empty strings as the user has yet to record a video. It also disables the “SaveVideoButton” because there is not yet a video to save.
When the user clicks on the RecordButton, the app starts a countdown timer. Timer.Fires triggers every second and counts down, giving the user a chance to get ready to record. When the Timer reaches 1, recordVideo is called. When the recording completes, the resulting file is placed in the variable “videoFile” and the SaveVideoButton is enabled.
When the user clicks SaveVideo, uploadImage is called to send the file just recorded to Cloudinary. When the function completes, it returns “url”, which is then sent to the “createRow” function, along with the entered title and author, to post it to the spreadsheet.
Drag and Drop Code 
You must be logged in to post a comment.