How to Create Data in a Thunkable Data Source

Summary

This tutorial walks through the process of creating a dynamic, data-driven app using a connected data source like Google Sheets. It covers how to set up a screen for adding employee details, including text inputs for the employee's name, pronouns, and photo. The tutorial also shows how to link the app's functionality to the data source, allowing users to submit information and take a photo that gets stored in Cloudinary. The final steps include testing the app and ensuring data is reflected correctly in both the app and the data source.

Takeaways

• 😀 Create a screen where users can input new employee details for a dynamic, data-driven app.
• 😀 Replace output labels with text input components to allow users to provide their information.
• 😀 Use the pattern of renaming components to stay organized in the component tree.
• 😀 Add a text input hint to guide users on what data to enter for each field.
• 😀 Duplicate buttons and modify text and names to maintain consistency across screens.
• 😀 Implement functionality that navigates to the 'Create Employee' screen when the 'Add Employee' button is clicked.
• 😀 Ensure data from the input fields is sent to the appropriate columns in the connected data source (e.g., Google Sheets).
• 😀 Enable users to upload a photo using the device's camera, then save the photo to Cloudinary for permanent storage.
• 😀 Use the 'photo from camera' block and 'url from uploaded file' block to upload images to Cloudinary.
• 😀 After submitting employee data, navigate back to the Team screen and refresh it to reflect the new entry.
• 😀 Test the app thoroughly by entering employee details and verifying that the new data appears in both the app and the data source.

Q & A

What is the main goal of the tutorial?

The main goal of the tutorial is to demonstrate how to create data in a connected data source, such as Google Sheets, Airtable, or Webflow, and integrate it into a dynamic app, allowing users to add new entries like employee details.

How do you add a new entry for an employee in the app?

To add a new employee entry, the user must input their details into a newly created screen where all the previous output labels are replaced with text input components. Once the details are filled, a button is used to submit the data to the connected data source.

Why is it important to rename components during app development?

Renaming components helps keep the project organized, making it easier to reference and work with specific components later, especially when switching to the Blocks tab to build functionality.

What does the 'when Add Employee button click' block do?

The 'when Add Employee button click' block is used to navigate the user to the Create Employee screen when the button is clicked. It triggers the transition to the screen where the user can input new employee details.

How are text inputs linked to the data source?

Each text input is linked to the corresponding data source column by using specific blocks like 'textInput [component name] TEXT' to ensure that the data entered in the input fields is saved in the appropriate columns of the data source.

What happens when the 'photo from camera' block is used?

The 'photo from camera' block activates the device's camera to capture a photo. This photo can then be stored in the app and uploaded to a cloud service like Cloudinary to ensure it is saved for a longer duration.

Why is it recommended to connect the app to your own Cloudinary account?

It is recommended to connect your app to your own Cloudinary account because Thunkable's default Cloudinary database deletes files after 90 days. Using your own account ensures the media files are safely stored for a longer period.

How do you ensure the new employee data is reflected on the Team screen after submission?

To ensure that the new data is reflected on the Team screen, a 'when screen the team opens' block is used, which triggers the 'refresh data' block to reload the data viewer list and display the latest employee information.

What functionality is built into the 'Create Employee' screen?

The 'Create Employee' screen is designed to accept employee details through text inputs and a photo upload. It includes blocks to handle the submission of the data into the connected data source and to navigate between different screens of the app.

What should a developer do after completing the design and functionality for creating data entries?

After completing the design and functionality, the developer should test the app using Thunkable Live to ensure that new employee data can be successfully entered, submitted, and saved in the data source.