BarkTag - Cloning an app found on Instagram with Tadabase

In this episode of Build it with Tim, we'll find out if it's possible to clone an app found on Instagram using Twilio SMS to send text messages, the ability to get the user's current location, the Form component, and rules.

Features Discussed:

1. Twilio SMS (Time: 05:29)
   Explore the process of setting up a Twilio account to enable SMS notifications. Learn how to obtain and use your Twilio account security ID, token, and phone number to configure text message settings in Tadabase. For example, configure form notifications to send custom text messages by selecting relevant fields like tag ID and current location.
2. Data Builder (Time: 05:36)
   Learn how to configure a dashboard page that includes a table component, a detail link, and a button to add a new pet. Learn how to streamline the Add Pet form by focusing only on essential fields, such as the pet's name, and how to ensure that the pet is connected to the logged-in user.
3. Table Rules (Time: 09:07)
   Learn how to set up rules that automate data transfer between related tables. For example, when a new pet is added, learn how to automatically assign the pet's home address based on the contact's home address, or how to populate the pet's record with the contact’s phone numbers and vet details when a tag is created.
4. Form Component (Time: 10:57)
   Learn how to create a Pet Detail page featuring multiple forms, a detail component, and a table component. The video explains how to collect all relevant fields for a pet record in one form and set up a secondary form for adding connected records like a bark tag. Learn how to customize the submit button to enhance user interaction and how to display pet details efficiently.

Transcript Summary

Introduction

Hey everybody, welcome back to Build It with Tadabase. Today we're playing a game called "Is It Possible?" and the answer, of course, is "Sure, why not?" So I was scrolling through Instagram, and I saw an advertisement for dog tags with QR codes on them. If the dog was lost, whoever found them could scan the QR code, which would open up the pet information page on their phone, get their current location, and send it to the owner. I thought, "Is it possible to do this with Tadabase?" And I think it is. So today, I'm going to show you how I prototyped this inside of Tadabase using some pretty basic features—no code involved at all. Let's walk through this together, and I'll show you what I've got so far.

Prototyping the Pet Finder

Here's the idea. I wanted to rapid prototype this thing because as I was watching the advertisement, I thought, "Geez, I wonder if I could build this." Tadabase has a lot of these features, especially getting the current location and sending a text message, so I thought this could probably work.

What we're looking at here is a prototype. I realize I've left out a lot of fundamental parts, like the actual manufacturing of the tags and the QR codes. I've left a lot of that out on purpose because I wanted to just focus on the user part of it. I wanted to see how it would work from the user perspective, from somebody who is the pet owner, to add pets, register their pets with the little tag, and from the other side—someone who actually finds a lost animal—could they scan a QR code and then notify the owners of the current location via a text message? That was really the true test here today.

So, we are logged in as a user, and I've added a pet—my dog Lucy. We can go to Lucy's details, and here's what we've set up. We have a form to edit the pet, and I'll show you all the data that powers this in a moment. We have a form to edit the pet name. I've given the ability to add two contacts so that a text message could go out to two different people if you want. Also, the ability to connect to a vet office with the option to add a new vet office. The idea is if this is a public application that you sign up for, it would be cool to store all vets that people have inputted into the system so you can select one or add a new one. There's the home address for the user, a photo of the animal, and some pet information like age, weight, gender, and whether they're good with kids, dogs, and cats.

After we've filled out this form, we've registered their bark tag, as I'm calling it, and you can see that record has now been created. This is the tag that then goes on the animal.

Finding a Lost Pet

Now, what does this look like when somebody finds your pet? Let's say your pet runs away, and someone finds them. They scan the QR code, which opens up a page that contains detail components and a form. That's really it—just the two most basic things you can use in Tadabase. We're showing a photo of the pet so you can verify it's the same dog, some basic pet information, more detailed pet information that the user has filled out previously, and the vet's name, address, and phone number. So, God forbid, you find this pet, and it's hurt or something, then you have vet information right there.

This is the part I really wanted to figure out: we need a way to notify the owner when someone finds their pet. The idea is to utilize an address field inside of Tadabase along with a button to get the current location. Let's say I find this animal. I can click "Get my current location" and then save. What happens after that is we get a text message—the owner does—saying this tag has been found at this location. The whole concept actually works, and it was pretty easy to build in Tadabase.

Building the Prototype

Now, we're in the Builder, and I'm going to walk you through how I did this, the steps I took to do this, and show you that there's really not a whole lot to it. We're using some basic functions that we've used in past Build It with Tadabase videos: connection fields, form components, record rules, table rules, and in this case, something new—sending a text message using Twilio.

Data Tables Setup

First, we have our Users table. This table is for contacts or pet owners—someone signs up for the app, inputs all their personal information, then adds a pet that connects to them. They become the owner of the pet. We have their name, email, profile picture, status, and role for login control, as well as their home address and phone number.

The next step is to add a pet for that particular user. The pet connects to a user, in this case, Contact One, which will be whoever is the first person to add the pet. That person can then add another contact. We're doing things like the pet name, home address (where the pet lives), a photo of the pet, age, gender, weight, and whether they're good with kids, dogs, or cats—the same stuff we saw on the pet detail page when someone is modifying or editing their pet record.

The Veterinarian table is really simple. All we need is a name, an address, and a phone number. As more people use this, the table will fill up, so someone could search for their vet and find their vet or add their own. Each pet connects with a vet.

The Bark Tags are created when someone clicks "Register the Tag." We give that tag an ID (an auto-increment field), and then it connects to a pet, contacts, and vets. We're using some cascading connection techniques here, but we're also passing over the contact's phone numbers so we can use them for the text message. We have fields for the person who finds the lost animal—their name, phone, and current location.

Finally, there's the Location History table. I figured it might be a good idea to keep track historically of all the times the tag has been marked as found. It's just good to have that history, and when someone fills out the form with their current location, we're resetting the values afterward so that if the tag is scanned again, the form will be empty and ready for input.

Data Rules

The rules are pretty straightforward. We're just passing data from table to table. When a new pet is created, we're setting their home address to the connected value of the contact's home address. When a new tag is created, we're reaching into the pet table and pulling out the contact's phone numbers and vet information. Then, we're doing the same with location history, setting the pet connection from the connected value of the tag connection.

Page Setup

The page setup is probably simpler than the data setup. We have a dashboard page, which consists of a table component, a detail link, and a button to add a new pet. The Add Pet form is basic, and I've modified it slightly to only need the pet name. The pet is connected to the logged-in user.

The Pet Detail page consists of a form, another form, a detail component, and a table component. The pet form is just a collection of all the fields on the pet record—nothing fancy. The second form adds a new bark tag connected to the pet, and I've removed all inputs and modified what the submit button says ("Register Bark Tag"). When someone clicks that button, it adds a record in the Bark Tag table as a connected record to the pet. We're also displaying a pet detail component.

Twilio Integration

Now, let's talk about Twilio. You'll sign up for a Twilio account, get a phone number, and copy three pieces of information: the account security ID, a token, and the phone number provided by Twilio. You'll enter these into Tadabase's text message settings. Then, in the form notifications tab, you'll choose "Custom Text Message" and send the text to the contact's phone numbers. You build the message by selecting the fields you want to include, like the tag ID and current location.

Resetting Form Values

The last piece is resetting the current location and other values submitted on the Notify Owner form. I've done this through a scheduled task that runs every day at midnight, setting things back to blank values. This is so that the next time the tag is scanned, the form is blank.

Location Sent Confirmation

After the location has been sent, we redirect to a confirmation page that says "Location Sent. Thanks for helping."

Conclusion

Thank you for watching this video. I realize this isn't necessarily a build video but more of a show-and-tell. The purpose was to see if I could take something I found on the internet and build it in Tadabase, and the answer is yes. We'll come back to this in another episode and design it to be more of an actual app, with finer details on how records and data are manipulated and stored, as well as making the pages look super cool. Thanks so much for watching—see you next time. Take care