Use Airtable to build a Customer Relationship Management (CRM) on top of your Firestore data. https://angularfirebase.com/lessons/airtable-firebase-customer-relationship-management/

- Airtable https://airtable.com/invite/r/Fikt3lti
- Let's Boot Switzerland https://www.letsboot.com/
2024-02-04T07:33:15.117Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
3ff347db-185f-46f8-a62d-18dc4933c246
d42868c614a44943abf2ef7f1428169b4952f21b9018bb135f668822641df659
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today, we're going to transform the data that you have saved in Firestore to a fully fledged customer relationship management system with Airtable.
Firebase is great for building apps, but it doesn't really have any opinion about how you handle things on the business side.
What if you need to visualize your data or send a text message to a user?
Maybe you need to generate an invoice or assign one of your new users to a sales representative.
Airtable is kind of like a build your own project management tool that's a cross between an Excel spreadsheet and a database.
In this episode, I'll show you how to integrate it with Firestore and functions and then talk about why you might wanna use this tool.
If you're new here, make sure to subscribe and grab the source code from angularfirebase.com.
I've been messing around with Airtable for the last couple weeks, and I've been super impressed with it.
And they don't pay me to say that.
I learned about it from my friends over at Let's Boot Switzerland, so a quick shout out to them.
Let's start by talking about what Airtable is and why you might wanna use it in the first place.
It's basically an Excel spreadsheet that has a bunch of mini apps that you can apply to your data.
We'll look specifically at some of these mini apps a little bit later, but you would most likely use this if you needed some project management tools on top of your Firestore data.
So you wouldn't use this to show end users, but you would use it internally as a project management tool.
Let's imagine you're building some kind of software as a service application with Firestore.
You'll most likely want a CRM in place so you can follow-up with leads and just make your employees more productive.
You can get started by signing up for an Airtable account, and it's free to 1200 records.
The first thing I wanna do is go into your dashboard and add a new base.
There's a whole bunch of starter templates, But we're just going to start out from scratch.
I'm going to call this my customer base and I'll give it a beer icon.
You can think of a base as a context for your data or in other words, an Excel spreadsheet.
You can model your data by adding various columns to the spreadsheet.
You'll need to define all the columns you need before you import it from Firestore because it can't just implicitly understand what your data is beforehand.
You can see down here at the bottom, I have this Add random customer button, which is just adding a record to Firestore with the JavaScript SDK for Firebase.
Airtable also uses real time listeners, So you should see the UI updated automatically as soon as your Cloud Function is finished.
Let's get this started by running Firebase init functions.
Then I'll be using TypeScript, but that part's optional because this Cloud Function is dead simple.
The next step is to CD into the functions directory, And then we'll install the Airtable JS SDK.
Just run npm install Airtable.
Then we need to generate an Airtable API key, which we can do under the account tab.
Then we can add it to the Cloud Functions environment by running Firebase functions config set Airtable dot key equals your API key.
Now we can go into index ts and write the easiest cloud function of all time.
1st, we will import Airtable and then initialize it with the API key that we set in the environment.
Then every base has its own unique ID, which we can reference by calling base with that ID, which you can find in the API docs in Airtable.
In Firestore, I have a collection of customers, and I want to update the Airtable database whenever a new customer is added.
We can listen to the on create event on the customer's collection, then we'll go ahead and set the data from this document as a variable and use that to update the base in Airtable.
A base can have multiple sheets, so you'll want to reference the sheet, which in this case is customer data.
And then just call create with the data that you wanna add and that's it.
Now every time a new customer is created in Firestore, you'll also have access to that data in Airtable.
Run Firebase deploy only functions to put it to use in production.
That's all the code we're going to write in this lesson.
Now we can move on to the fun part which is messing around with Airtable.
I have some data here in Firestore that's represented in a JSON like object.
And if we go over to Airtable, you see it's more like a SQL database table or Excel spreadsheet.
You can do pretty much anything you would expect in a spreadsheet.
For example, highlighting some rows and getting the sum or average.
You can sort and filter rows, but the really cool thing is you Change the view from a grid to something like a calendar.
If you have a time stamp on your records, you can see everything in this calendar view.
Or you can put everything in a gallery view which is a little bit easier on the eyes.
Or if you're a fan of Trello or Japanese manufacturing, you can put everything in a Kanban view.
Let's imagine I hired a couple sales reps and I wanted to assign customers to each rep.
I can simply drag and drop them in here, and it will update that record in the table.
These views are really nice for organizing your data, but I still haven't showed you the coolest part yet, which is Airtable blocks.
A block is basically a mini app that you can apply to your data.
And it solves a lot of common use cases with project management and things like that.
Let's go ahead and start by visualizing some of the data that we have in Firestore.
In our table, we're keeping track of the user's country as well as their order total.
My goal is to build out a chart that Shows the order total across all customers based on their country of origin.
All we have to do is come in here and set our country as the x axis and then the order total as the y axis.
And that gives us a nice visual of the data that we can use for internal reporting.
You can customize as many of these blocks as you want and apply them to any base in Airtable.
That means you can completely customize your project workflow based on the needs of your company.
In my case, I have a geo coordinate for every customer, so I might want to visualize them with Google Maps.
One nice thing about Airtable is that it's tightly integrated with Google Cloud Platform, so you can simply enable some APIs and use them in Airtable.
In this case, we want to enable the Geocoding API and the Google Maps API.
Then we can simply go into our Firebase project and add the API key from our web app config and copy and paste it into the Google Maps config in Airtable.
Then I'm about to run into a problem because I've saved my latitude as just raw numbers in Firestore.
But Google Maps is going to expect that in a format of a string with the lat and long concatenated together.
So how might we solve this problem?
I definitely don't wanna go back and save more data in Firestore.
So instead, I can set up a new field here in Airtable, But we'll use the formula data type.
Those who know Excel should be very familiar with spreadsheet formulas.
But if not, the idea Here is that we can combine multiple columns together based on some code.
So in this case, we just want to concatenate 2 values together with a comma in the middle.
When we click save, it automatically updates all fields in this row with the proper data format.
If we open up the map block, we can see that now all of our customers are included on the map with their actual geolocation coordinates.
We can even click on a map pin and update the customer record directly from the map.
Now another thing I get asked frequently is, how do I generate a PDF from a Cloud Function?
Well, you can do this programmatically in a Cloud Function.
It might be easier to just do it visually with the page block in Airtable.
This little app is a drag and drop page designer that has access to all of the data in Airtable.
So you can automatically generate a standardized PDF for all of your customer records or whatever else you have saved in the table.
That can be super handy if you need to send Invoices periodically or if you just have a certain report that needs to go out to a specific customer.
Once you have your template saved, you can scroll through and it will automatically generate a Different report for each customer record.
Another thing you might wanna see is the timeline of user sign ups in your app.
Maybe you initiated some kind of marketing campaign and you wanna see the impact that had on user sign ups.
With this block, I've set up a timeline based on the user sign up date.
Visually, this is a lot more appealing than just looking at the data in a basic spreadsheet.
So that's pretty cool, but what if I'm a sales rep and I want to be notified whenever a new customer signs There's a built in chime event that can notify you whenever a new record is created in Airtable.
We can set it up to play a sound in an animation whenever a new record is added.
And then we'll bring up our add random customer button here, and you can see that that plays every time we click the button.
So I've just shown you about 4 or 5 of the different Blocks that are available, there's 27 overall at the time of this video.
If you're looking for an easy way to get project management integrated into your Firebase project, Airtable is definitely an intriguing option.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And if you wanna learn more advanced topics related to Firebase and cool APIs like this, consider becoming a pro member at angularfirebase.com.
You'll get access to a whole bunch of exclusive content, chat support, free copy of my book, and a whole bunch more.
Thanks for watching, and I'll talk to you soon.

Speaker 0: Today, we're going to transform the data that you have saved in Firestore to a fully fledged customer relationship management system with Airtable. Firebase is great for building apps, but it doesn't really have any opinion about how you handle things on the business side. What if you need to visualize your data or send a text message to a user? Maybe you need to generate an invoice or assign one of your new users to a sales representative. Airtable is kind of like a build your own project management tool that's a cross between an Excel spreadsheet and a database.

In this episode, I'll show you how to integrate it with Firestore and functions and then talk about why you might wanna use this tool. If you're new here, make sure to subscribe and grab the source code from angularfirebase.com. I've been messing around with Airtable for the last couple weeks, and I've been super impressed with it. And they don't pay me to say that. I learned about it from my friends over at Let's Boot Switzerland, so a quick shout out to them.

Let's start by talking about what Airtable is and why you might wanna use it in the first place. It's basically an Excel spreadsheet that has a bunch of mini apps that you can apply to your data. We'll look specifically at some of these mini apps a little bit later, but you would most likely use this if you needed some project management tools on top of your Firestore data. So you wouldn't use this to show end users, but you would use it internally as a project management tool. Let's imagine you're building some kind of software as a service application with Firestore.

You'll most likely want a CRM in place so you can follow-up with leads and just make your employees more productive. You can get started by signing up for an Airtable account, and it's free to 1200 records. The first thing I wanna do is go into your dashboard and add a new base. There's a whole bunch of starter templates, But we're just going to start out from scratch. I'm going to call this my customer base and I'll give it a beer icon.

You can think of a base as a context for your data or in other words, an Excel spreadsheet. You can model your data by adding various columns to the spreadsheet. You'll need to define all the columns you need before you import it from Firestore because it can't just implicitly understand what your data is beforehand. You can see down here at the bottom, I have this Add random customer button, which is just adding a record to Firestore with the JavaScript SDK for Firebase. Airtable also uses real time listeners, So you should see the UI updated automatically as soon as your Cloud Function is finished.

Let's get this started by running Firebase init functions. Then I'll be using TypeScript, but that part's optional because this Cloud Function is dead simple. The next step is to CD into the functions directory, And then we'll install the Airtable JS SDK. Just run npm install Airtable. Then we need to generate an Airtable API key, which we can do under the account tab.

Then we can add it to the Cloud Functions environment by running Firebase functions config set Airtable dot key equals your API key. Now we can go into index ts and write the easiest cloud function of all time. 1st, we will import Airtable and then initialize it with the API key that we set in the environment. Then every base has its own unique ID, which we can reference by calling base with that ID, which you can find in the API docs in Airtable. In Firestore, I have a collection of customers, and I want to update the Airtable database whenever a new customer is added.

We can listen to the on create event on the customer's collection, then we'll go ahead and set the data from this document as a variable and use that to update the base in Airtable. A base can have multiple sheets, so you'll want to reference the sheet, which in this case is customer data. And then just call create with the data that you wanna add and that's it. Now every time a new customer is created in Firestore, you'll also have access to that data in Airtable. Run Firebase deploy only functions to put it to use in production.

That's all the code we're going to write in this lesson. Now we can move on to the fun part which is messing around with Airtable. I have some data here in Firestore that's represented in a JSON like object. And if we go over to Airtable, you see it's more like a SQL database table or Excel spreadsheet. You can do pretty much anything you would expect in a spreadsheet.

For example, highlighting some rows and getting the sum or average. You can sort and filter rows, but the really cool thing is you Change the view from a grid to something like a calendar. If you have a time stamp on your records, you can see everything in this calendar view. Or you can put everything in a gallery view which is a little bit easier on the eyes. Or if you're a fan of Trello or Japanese manufacturing, you can put everything in a Kanban view.

Let's imagine I hired a couple sales reps and I wanted to assign customers to each rep. I can simply drag and drop them in here, and it will update that record in the table. These views are really nice for organizing your data, but I still haven't showed you the coolest part yet, which is Airtable blocks. A block is basically a mini app that you can apply to your data. And it solves a lot of common use cases with project management and things like that.

Let's go ahead and start by visualizing some of the data that we have in Firestore. In our table, we're keeping track of the user's country as well as their order total. My goal is to build out a chart that Shows the order total across all customers based on their country of origin. All we have to do is come in here and set our country as the x axis and then the order total as the y axis. And that gives us a nice visual of the data that we can use for internal reporting.

You can customize as many of these blocks as you want and apply them to any base in Airtable. That means you can completely customize your project workflow based on the needs of your company. In my case, I have a geo coordinate for every customer, so I might want to visualize them with Google Maps. One nice thing about Airtable is that it's tightly integrated with Google Cloud Platform, so you can simply enable some APIs and use them in Airtable. In this case, we want to enable the Geocoding API and the Google Maps API.

Then we can simply go into our Firebase project and add the API key from our web app config and copy and paste it into the Google Maps config in Airtable. Then I'm about to run into a problem because I've saved my latitude as just raw numbers in Firestore. But Google Maps is going to expect that in a format of a string with the lat and long concatenated together. So how might we solve this problem? I definitely don't wanna go back and save more data in Firestore.

So instead, I can set up a new field here in Airtable, But we'll use the formula data type. Those who know Excel should be very familiar with spreadsheet formulas. But if not, the idea Here is that we can combine multiple columns together based on some code. So in this case, we just want to concatenate 2 values together with a comma in the middle. When we click save, it automatically updates all fields in this row with the proper data format.

If we open up the map block, we can see that now all of our customers are included on the map with their actual geolocation coordinates. We can even click on a map pin and update the customer record directly from the map. Now another thing I get asked frequently is, how do I generate a PDF from a Cloud Function? Well, you can do this programmatically in a Cloud Function. It might be easier to just do it visually with the page block in Airtable.

This little app is a drag and drop page designer that has access to all of the data in Airtable. So you can automatically generate a standardized PDF for all of your customer records or whatever else you have saved in the table. That can be super handy if you need to send Invoices periodically or if you just have a certain report that needs to go out to a specific customer. Once you have your template saved, you can scroll through and it will automatically generate a Different report for each customer record. Another thing you might wanna see is the timeline of user sign ups in your app.

Maybe you initiated some kind of marketing campaign and you wanna see the impact that had on user sign ups. With this block, I've set up a timeline based on the user sign up date. Visually, this is a lot more appealing than just looking at the data in a basic spreadsheet. So that's pretty cool, but what if I'm a sales rep and I want to be notified whenever a new customer signs There's a built in chime event that can notify you whenever a new record is created in Airtable. We can set it up to play a sound in an animation whenever a new record is added.

And then we'll bring up our add random customer button here, and you can see that that plays every time we click the button. So I've just shown you about 4 or 5 of the different Blocks that are available, there's 27 overall at the time of this video. If you're looking for an easy way to get project management integrated into your Firebase project, Airtable is definitely an intriguing option. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe.

And if you wanna learn more advanced topics related to Firebase and cool APIs like this, consider becoming a pro member at angularfirebase.com. You'll get access to a whole bunch of exclusive content, chat support, free copy of my book, and a whole bunch more. Thanks for watching, and I'll talk to you soon.
Today, we're going to transform the data that you have saved in Firestore to a fully fledged customer relationship management system with Airtable. Firebase is great for building apps, but it doesn't really have any opinion about how you handle things on the business side. What if you need to visualize your data or send a text message to a user? Maybe you need to generate an invoice or assign one of your new users to a sales representative. Airtable is kind of like a build your own project management tool that's a cross between an Excel spreadsheet and a database. In this episode, I'll show you how to integrate it with Firestore and functions and then talk about why you might wanna use this tool. If you're new here, make sure to subscribe and grab the source code from angularfirebase.com.
databases
customer support
data management
software
I've been messing around with Airtable for the last couple weeks, and I've been super impressed with it. And they don't pay me to say that. I learned about it from my friends over at Let's Boot Switzerland, so a quick shout out to them. Let's start by talking about what Airtable is and why you might wanna use it in the first place. It's basically an Excel spreadsheet that has a bunch of mini apps that you can apply to your data.
We'll look specifically at some of these mini apps a little bit later, but you would most likely use this if you needed some project management tools on top of your Firestore data. So you wouldn't use this to show end users, but you would use it internally as a project management tool. Let's imagine you're building some kind of software as a service application with Firestore. You'll most likely want a CRM in place so you can follow-up with leads and just make your employees more productive. You can get started by signing up for an Airtable account, and it's free to 1200 records. The first thing I wanna do is go into your dashboard and add a new base.
software
software development
email
customer support
There's a whole bunch of starter templates, But we're just going to start out from scratch.
I'm going to call this my customer base and I'll give it a beer icon. You can think of a base as a context for your data or in other words, an Excel spreadsheet. You can model your data by adding various columns to the spreadsheet. You'll need to define all the columns you need before you import it from Firestore because it can't just implicitly understand what your data is beforehand. You can see down here at the bottom, I have this Add random customer button, which is just adding a record to Firestore with the JavaScript SDK for Firebase.
data management
databases
data analysis
data
Airtable also uses real time listeners, So you should see the UI updated automatically as soon as your Cloud Function is finished. Let's get this started by running Firebase init functions. Then I'll be using TypeScript, but that part's optional because this Cloud Function is dead simple. The next step is to CD into the functions directory, And then we'll install the Airtable JS SDK. Just run npm install Airtable. Then we need to generate an Airtable API key, which we can do under the account tab. Then we can add it to the Cloud Functions environment by running Firebase functions config set Airtable dot key equals your API key. Now we can go into index ts and write the easiest cloud function of all time. 1st, we will import Airtable and then initialize it with the API key that we set in the environment. Then every base has its own unique ID, which we can reference by calling base with that ID, which you can find in the API docs in Airtable.
In Firestore, I have a collection of customers, and I want to update the Airtable database whenever a new customer is added. We can listen to the on create event on the customer's collection, then we'll go ahead and set the data from this document as a variable and use that to update the base in Airtable. A base can have multiple sheets, so you'll want to reference the sheet, which in this case is customer data. And then just call create with the data that you wanna add and that's it. Now every time a new customer is created in Firestore, you'll also have access to that data in Airtable.
data
data management
databases
customer support
customers
Run Firebase deploy only functions to put it to use in production. That's all the code we're going to write in this lesson. Now we can move on to the fun part which is messing around with Airtable.
I have some data here in Firestore that's represented in a JSON like object. And if we go over to Airtable, you see it's more like a SQL database table or Excel spreadsheet. You can do pretty much anything you would expect in a spreadsheet. For example, highlighting some rows and getting the sum or average. You can sort and filter rows, but the really cool thing is you Change the view from a grid to something like a calendar. If you have a time stamp on your records, you can see everything in this calendar view.
databases
data
Or you can put everything in a gallery view which is a little bit easier on the eyes.
Or if you're a fan of Trello or Japanese manufacturing, you can put everything in a Kanban view. Let's imagine I hired a couple sales reps and I wanted to assign customers to each rep. I can simply drag and drop them in here, and it will update that record in the table.
customers
These views are really nice for organizing your data, but I still haven't showed you the coolest part yet, which is Airtable blocks.
A block is basically a mini app that you can apply to your data. And it solves a lot of common use cases with project management and things like that. Let's go ahead and start by visualizing some of the data that we have in Firestore. In our table, we're keeping track of the user's country as well as their order total. My goal is to build out a chart that Shows the order total across all customers based on their country of origin. All we have to do is come in here and set our country as the x axis and then the order total as the y axis. And that gives us a nice visual of the data that we can use for internal reporting. You can customize as many of these blocks as you want and apply them to any base in Airtable. That means you can completely customize your project workflow based on the needs of your company.
commerce
customers
data management
data analysis
data
business
mining
In my case, I have a geo coordinate for every customer, so I might want to visualize them with Google Maps. One nice thing about Airtable is that it's tightly integrated with Google Cloud Platform, so you can simply enable some APIs and use them in Airtable. In this case, we want to enable the Geocoding API and the Google Maps API. Then we can simply go into our Firebase project and add the API key from our web app config and copy and paste it into the Google Maps config in Airtable. Then I'm about to run into a problem because I've saved my latitude as just raw numbers in Firestore. But Google Maps is going to expect that in a format of a string with the lat and long concatenated together. So how might we solve this problem? I definitely don't wanna go back and save more data in Firestore. So instead, I can set up a new field here in Airtable, But we'll use the formula data type. Those who know Excel should be very familiar with spreadsheet formulas. But if not, the idea Here is that we can combine multiple columns together based on some code. So in this case, we just want to concatenate 2 values together with a comma in the middle. When we click save, it automatically updates all fields in this row with the proper data format. If we open up the map block, we can see that now all of our customers are included on the map with their actual geolocation coordinates. We can even click on a map pin and update the customer record directly from the map. Now another thing I get asked frequently is, how do I generate a PDF from a Cloud Function? Well, you can do this programmatically in a Cloud Function. It might be easier to just do it visually with the page block in Airtable.
This little app is a drag and drop page designer that has access to all of the data in Airtable. So you can automatically generate a standardized PDF for all of your customer records or whatever else you have saved in the table. That can be super handy if you need to send Invoices periodically or if you just have a certain report that needs to go out to a specific customer. Once you have your template saved, you can scroll through and it will automatically generate a Different report for each customer record. Another thing you might wanna see is the timeline of user sign ups in your app. Maybe you initiated some kind of marketing campaign and you wanna see the impact that had on user sign ups. With this block, I've set up a timeline based on the user sign up date. Visually, this is a lot more appealing than just looking at the data in a basic spreadsheet. So that's pretty cool, but what if I'm a sales rep and I want to be notified whenever a new customer signs There's a built in chime event that can notify you whenever a new record is created in Airtable. We can set it up to play a sound in an animation whenever a new record is added. And then we'll bring up our add random customer button here, and you can see that that plays every time we click the button. So I've just shown you about 4 or 5 of the different Blocks that are available, there's 27 overall at the time of this video.
marketing
video gaming
audio
youtube
multimedia
customers
advertising
animation
sales
customer support
software
billing
If you're looking for an easy way to get project management integrated into your Firebase project, Airtable is definitely an intriguing option. I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe. And if you wanna learn more advanced topics related to Firebase and cool APIs like this, consider becoming a pro member at angularfirebase.com. You'll get access to a whole bunch of exclusive content, chat support, free copy of my book, and a whole bunch more.
youtube
Thanks for watching, and I'll talk to you soon.
Today, we're going to transform the data that you have saved in Firestore to a fully fledged customer relationship management system with Airtable. Firebase is great for building apps, but it doesn't really have any opinion about how you handle things on the business side. What if you need to visualize your data or send a text message to a user? Maybe you need to generate an invoice or assign one of your new users to a sales representative. Airtable is kind of like a build your own project management tool that's a cross between an Excel spreadsheet and a database. In this episode, I'll show you how to integrate it with Firestore and functions and then talk about why you might wanna use this tool. If you're new here, make sure to subscribe and grab the source code from angularfirebase.com. I've been messing around with Airtable for the last couple weeks, and I've been super impressed with it. And they don't pay me to say that. I learned about it from my friends over at Let's Boot Switzerland, so a quick shout out to them. Let's start by talking about what Airtable is and why you might wanna use it in the first place. It's basically an Excel spreadsheet that has a bunch of mini apps that you can apply to your data. We'll look specifically at some of these mini apps a little bit later, but you would most likely use this if you needed some project management tools on top of your Firestore data. So you wouldn't use this to show end users, but you would use it internally as a project management tool. Let's imagine you're building some kind of software as a service application with Firestore. You'll most likely want a CRM in place so you can follow-up with leads and just make your employees more productive. You can get started by signing up for an Airtable account, and it's free to 1200 records. The first thing I wanna do is go into your dashboard and add a new base. There's a whole bunch of starter templates, But we're just going to start out from scratch. I'm going to call this my customer base and I'll give it a beer icon. You can think of a base as a context for your data or in other words, an Excel spreadsheet. You can model your data by adding various columns to the spreadsheet. You'll need to define all the columns you need before you import it from Firestore because it can't just implicitly understand what your data is beforehand. You can see down here at the bottom, I have this Add random customer button, which is just adding a record to Firestore with the JavaScript SDK for Firebase. Airtable also uses real time listeners, So you should see the UI updated automatically as soon as your Cloud Function is finished. Let's get this started by running Firebase init functions. Then I'll be using TypeScript, but that part's optional because this Cloud Function is dead simple. The next step is to CD into the functions directory, And then we'll install the Airtable JS SDK. Just run npm install Airtable. Then we need to generate an Airtable API key, which we can do under the account tab. Then we can add it to the Cloud Functions environment by running Firebase functions config set Airtable dot key equals your API key. Now we can go into index ts and write the easiest cloud function of all time. 1st, we will import Airtable and then initialize it with the API key that we set in the environment. Then every base has its own unique ID, which we can reference by calling base with that ID, which you can find in the API docs in Airtable. In Firestore, I have a collection of customers, and I want to update the Airtable database whenever a new customer is added. We can listen to the on create event on the customer's collection, then we'll go ahead and set the data from this document as a variable and use that to update the base in Airtable. A base can have multiple sheets, so you'll want to reference the sheet, which in this case is customer data. And then just call create with the data that you wanna add and that's it. Now every time a new customer is created in Firestore, you'll also have access to that data in Airtable. Run Firebase deploy only functions to put it to use in production. That's all the code we're going to write in this lesson. Now we can move on to the fun part which is messing around with Airtable. I have some data here in Firestore that's represented in a JSON like object. And if we go over to Airtable, you see it's more like a SQL database table or Excel spreadsheet. You can do pretty much anything you would expect in a spreadsheet. For example, highlighting some rows and getting the sum or average. You can sort and filter rows, but the really cool thing is you Change the view from a grid to something like a calendar. If you have a time stamp on your records, you can see everything in this calendar view. Or you can put everything in a gallery view which is a little bit easier on the eyes. Or if you're a fan of Trello or Japanese manufacturing, you can put everything in a Kanban view. Let's imagine I hired a couple sales reps and I wanted to assign customers to each rep. I can simply drag and drop them in here, and it will update that record in the table. These views are really nice for organizing your data, but I still haven't showed you the coolest part yet, which is Airtable blocks. A block is basically a mini app that you can apply to your data. And it solves a lot of common use cases with project management and things like that. Let's go ahead and start by visualizing some of the data that we have in Firestore. In our table, we're keeping track of the user's country as well as their order total. My goal is to build out a chart that Shows the order total across all customers based on their country of origin. All we have to do is come in here and set our country as the x axis and then the order total as the y axis. And that gives us a nice visual of the data that we can use for internal reporting. You can customize as many of these blocks as you want and apply them to any base in Airtable. That means you can completely customize your project workflow based on the needs of your company. In my case, I have a geo coordinate for every customer, so I might want to visualize them with Google Maps. One nice thing about Airtable is that it's tightly integrated with Google Cloud Platform, so you can simply enable some APIs and use them in Airtable. In this case, we want to enable the Geocoding API and the Google Maps API. Then we can simply go into our Firebase project and add the API key from our web app config and copy and paste it into the Google Maps config in Airtable. Then I'm about to run into a problem because I've saved my latitude as just raw numbers in Firestore. But Google Maps is going to expect that in a format of a string with the lat and long concatenated together. So how might we solve this problem? I definitely don't wanna go back and save more data in Firestore. So instead, I can set up a new field here in Airtable, But we'll use the formula data type. Those who know Excel should be very familiar with spreadsheet formulas. But if not, the idea Here is that we can combine multiple columns together based on some code. So in this case, we just want to concatenate 2 values together with a comma in the middle. When we click save, it automatically updates all fields in this row with the proper data format. If we open up the map block, we can see that now all of our customers are included on the map with their actual geolocation coordinates. We can even click on a map pin and update the customer record directly from the map. Now another thing I get asked frequently is, how do I generate a PDF from a Cloud Function? Well, you can do this programmatically in a Cloud Function. It might be easier to just do it visually with the page block in Airtable. This little app is a drag and drop page designer that has access to all of the data in Airtable. So you can automatically generate a standardized PDF for all of your customer records or whatever else you have saved in the table. That can be super handy if you need to send Invoices periodically or if you just have a certain report that needs to go out to a specific customer. Once you have your template saved, you can scroll through and it will automatically generate a Different report for each customer record. Another thing you might wanna see is the timeline of user sign ups in your app. Maybe you initiated some kind of marketing campaign and you wanna see the impact that had on user sign ups. With this block, I've set up a timeline based on the user sign up date. Visually, this is a lot more appealing than just looking at the data in a basic spreadsheet. So that's pretty cool, but what if I'm a sales rep and I want to be notified whenever a new customer signs There's a built in chime event that can notify you whenever a new record is created in Airtable. We can set it up to play a sound in an animation whenever a new record is added. And then we'll bring up our add random customer button here, and you can see that that plays every time we click the button. So I've just shown you about 4 or 5 of the different Blocks that are available, there's 27 overall at the time of this video. If you're looking for an easy way to get project management integrated into your Firebase project, Airtable is definitely an intriguing option. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn more advanced topics related to Firebase and cool APIs like this, consider becoming a pro member at angularfirebase.com. You'll get access to a whole bunch of exclusive content, chat support, free copy of my book, and a whole bunch more. Thanks for watching, and I'll talk to you soon.
Today,
today
we're
we're
going
going
to
to
transform
transform
the
the
data
data
that
that
you
you
have
have
saved
saved
in
in
Firestore
firestore
to
to
a
a
fully
fully
fledged
fledged
customer
customer
relationship
relationship
management
management
system
system
with
with
Airtable.
airtable
Firebase
firebase
is
is
great
great
for
for
building
building
apps,
apps
but
but
it
it
doesn't
doesn't
really
really
have
have
any
any
opinion
opinion
about
about
how
how
you
you
handle
handle
things
things
on
on
the
the
business
business
side.
side
What
what
if
if
you
you
need
need
to
to
visualize
visualize
your
your
data
data
or
or
send
send
a
a
text
text
message
message
to
to
a
a
user?
user
Maybe
maybe
you
you
need
need
to
to
generate
generate
an
an
invoice
invoice
or
or
assign
assign
one
one
of
of
your
your
new
new
users
users
to
to
a
a
sales
sales
representative.
representative
Airtable
airtable
is
is
kind
kind
of
of
like
like
a
a
build
build
your
your
own
own
project
project
management
management
tool
tool
that's
that's
a
a
cross
cross
between
between
an
an
Excel
excel
spreadsheet
spreadsheet
and
and
a
a
database.
database
In
in
this
this
episode,
episode
I'll
i'll
show
show
you
you
how
how
to
to
integrate
integrate
it
it
with
with
Firestore
firestore
and
and
functions
functions
and
and
then
then
talk
talk
about
about
why
why
you
you
might
might
wanna
wanna
use
use
this
this
tool.
tool
If
if
you're
you're
new
new
here,
here
make
make
sure
sure
to
to
subscribe
subscribe
and
and
grab
grab
the
the
source
source
code
code
from
from
angularfirebase.com.
angularfirebase.com
I've
i've
been
been
messing
messing
around
around
with
with
Airtable
airtable
for
for
the
the
last
last
couple
couple
weeks,
weeks
and
and
I've
i've
been
been
super
super
impressed
impressed
with
with
it.
it
And
and
they
they
don't
don't
pay
pay
me
me
to
to
say
say
that.
that
I
i
learned
learned
about
about
it
it
from
from
my
my
friends
friends
over
over
at
at
Let's
let's
Boot
boot
Switzerland,
switzerland
so
so
a
a
quick
quick
shout
shout
out
out
to
to
them.
them
Let's
let's
start
start
by
by
talking
talking
about
about
what
what
Airtable
airtable
is
is
and
and
why
why
you
you
might
might
wanna
wanna
use
use
it
it
in
in
the
the
first
first
place.
place
It's
it's
basically
basically
an
an
Excel
excel
spreadsheet
spreadsheet
that
that
has
has
a
a
bunch
bunch
of
of
mini
mini
apps
apps
that
that
you
you
can
can
apply
apply
to
to
your
your
data.
data
We'll
we'll
look
look
specifically
specifically
at
at
some
some
of
of
these
these
mini
mini
apps
apps
a
a
little
little
bit
bit
later,
later
but
but
you
you
would
would
most
most
likely
likely
use
use
this
this
if
if
you
you
needed
needed
some
some
project
project
management
management
tools
tools
on
on
top
top
of
of
your
your
Firestore
firestore
data.
data
So
so
you
you
wouldn't
wouldn't
use
use
this
this
to
to
show
show
end
end
users,
users
but
but
you
you
would
would
use
use
it
it
internally
internally
as
as
a
a
project
project
management
management
tool.
tool
Let's
let's
imagine
imagine
you're
you're
building
building
some
some
kind
kind
of
of
software
software
as
as
a
a
service
service
application
application
with
with
Firestore.
firestore
You'll
you'll
most
most
likely
likely
want
want
a
a
CRM
crm
in
in
place
place
so
so
you
you
can
can
follow-up
follow-up
with
with
leads
leads
and
and
just
just
make
make
your
your
employees
employees
more
more
productive.
productive
You
you
can
can
get
get
started
started
by
by
signing
signing
up
up
for
for
an
an
Airtable
airtable
account,
account
and
and
it's
it's
free
free
to
to
1200
1200
records.
records
The
the
first
first
thing
thing
I
i
wanna
wanna
do
do
is
is
go
go
into
into
your
your
dashboard
dashboard
and
and
add
add
a
a
new
new
base.
base
There's
there's
a
a
whole
whole
bunch
bunch
of
of
starter
starter
templates,
templates
But
but
we're
we're
just
just
going
going
to
to
start
start
out
out
from
from
scratch.
scratch
I'm
i'm
going
going
to
to
call
call
this
this
my
my
customer
customer
base
base
and
and
I'll
i'll
give
give
it
it
a
a
beer
beer
icon.
icon
You
you
can
can
think
think
of
of
a
a
base
base
as
as
a
a
context
context
for
for
your
your
data
data
or
or
in
in
other
other
words,
words
an
an
Excel
excel
spreadsheet.
spreadsheet
You
you
can
can
model
model
your
your
data
data
by
by
adding
adding
various
various
columns
columns
to
to
the
the
spreadsheet.
spreadsheet
You'll
you'll
need
need
to
to
define
define
all
all
the
the
columns
columns
you
you
need
need
before
before
you
you
import
import
it
it
from
from
Firestore
firestore
because
because
it
it
can't
can't
just
just
implicitly
implicitly
understand
understand
what
what
your
your
data
data
is
is
beforehand.
beforehand
You
you
can
can
see
see
down
down
here
here
at
at
the
the
bottom,
bottom
I
i
have
have
this
this
Add
add
random
random
customer
customer
button,
button
which
which
is
is
just
just
adding
adding
a
a
record
record
to
to
Firestore
firestore
with
with
the
the
JavaScript
javascript
SDK
sdk
for
for
Firebase.
firebase
Airtable
airtable
also
also
uses
uses
real
real
time
time
listeners,
listeners
So
so
you
you
should
should
see
see
the
the
UI
ui
updated
updated
automatically
automatically
as
as
soon
soon
as
as
your
your
Cloud
cloud
Function
function
is
is
finished.
finished
Let's
let's
get
get
this
this
started
started
by
by
running
running
Firebase
firebase
init
init
functions.
functions
Then
then
I'll
i'll
be
be
using
using
TypeScript,
typescript
but
but
that
that
part's
part's
optional
optional
because
because
this
this
Cloud
cloud
Function
function
is
is
dead
dead
simple.
simple
The
the
next
next
step
step
is
is
to
to
CD
cd
into
into
the
the
functions
functions
directory,
directory
And
and
then
then
we'll
we'll
install
install
the
the
Airtable
airtable
JS
js
SDK.
sdk
Just
just
run
run
npm
npm
install
install
Airtable.
airtable
Then
then
we
we
need
need
to
to
generate
generate
an
an
Airtable
airtable
API
api
key,
key
which
which
we
we
can
can
do
do
under
under
the
the
account
account
tab.
tab
Then
then
we
we
can
can
add
add
it
it
to
to
the
the
Cloud
cloud
Functions
functions
environment
environment
by
by
running
running
Firebase
firebase
functions
functions
config
config
set
set
Airtable
airtable
dot
dot
key
key
equals
equals
your
your
API
api
key.
key
Now
now
we
we
can
can
go
go
into
into
index
index
ts
ts
and
and
write
write
the
the
easiest
easiest
cloud
cloud
function
function
of
of
all
all
time.
time
1st,
1st
we
we
will
will
import
import
Airtable
airtable
and
and
then
then
initialize
initialize
it
it
with
with
the
the
API
api
key
key
that
that
we
we
set
set
in
in
the
the
environment.
environment
Then
then
every
every
base
base
has
has
its
its
own
own
unique
unique
ID,
id
which
which
we
we
can
can
reference
reference
by
by
calling
calling
base
base
with
with
that
that
ID,
id
which
which
you
you
can
can
find
find
in
in
the
the
API
api
docs
docs
in
in
Airtable.
airtable
In
in
Firestore,
firestore
I
i
have
have
a
a
collection
collection
of
of
customers,
customers
and
and
I
i
want
want
to
to
update
update
the
the
Airtable
airtable
database
database
whenever
whenever
a
a
new
new
customer
customer
is
is
added.
added
We
we
can
can
listen
listen
to
to
the
the
on
on
create
create
event
event
on
on
the
the
customer's
customer's
collection,
collection
then
then
we'll
we'll
go
go
ahead
ahead
and
and
set
set
the
the
data
data
from
from
this
this
document
document
as
as
a
a
variable
variable
and
and
use
use
that
that
to
to
update
update
the
the
base
base
in
in
Airtable.
airtable
A
a
base
base
can
can
have
have
multiple
multiple
sheets,
sheets
so
so
you'll
you'll
want
want
to
to
reference
reference
the
the
sheet,
sheet
which
which
in
in
this
this
case
case
is
is
customer
customer
data.
data
And
and
then
then
just
just
call
call
create
create
with
with
the
the
data
data
that
that
you
you
wanna
wanna
add
add
and
and
that's
that's
it.
it
Now
now
every
every
time
time
a
a
new
new
customer
customer
is
is
created
created
in
in
Firestore,
firestore
you'll
you'll
also
also
have
have
access
access
to
to
that
that
data
data
in
in
Airtable.
airtable
Run
run
Firebase
firebase
deploy
deploy
only
only
functions
functions
to
to
put
put
it
it
to
to
use
use
in
in
production.
production
That's
that's
all
all
the
the
code
code
we're
we're
going
going
to
to
write
write
in
in
this
this
lesson.
lesson
Now
now
we
we
can
can
move
move
on
on
to
to
the
the
fun
fun
part
part
which
which
is
is
messing
messing
around
around
with
with
Airtable.
airtable
I
i
have
have
some
some
data
data
here
here
in
in
Firestore
firestore
that's
that's
represented
represented
in
in
a
a
JSON
json
like
like
object.
object
And
and
if
if
we
we
go
go
over
over
to
to
Airtable,
airtable
you
you
see
see
it's
it's
more
more
like
like
a
a
SQL
sql
database
database
table
table
or
or
Excel
excel
spreadsheet.
spreadsheet
You
you
can
can
do
do
pretty
pretty
much
much
anything
anything
you
you
would
would
expect
expect
in
in
a
a
spreadsheet.
spreadsheet
For
for
example,
example
highlighting
highlighting
some
some
rows
rows
and
and
getting
getting
the
the
sum
sum
or
or
average.
average
You
you
can
can
sort
sort
and
and
filter
filter
rows,
rows
but
but
the
the
really
really
cool
cool
thing
thing
is
is
you
you
Change
change
the
the
view
view
from
from
a
a
grid
grid
to
to
something
something
like
like
a
a
calendar.
calendar
If
if
you
you
have
have
a
a
time
time
stamp
stamp
on
on
your
your
records,
records
you
you
can
can
see
see
everything
everything
in
in
this
this
calendar
calendar
view.
view
Or
or
you
you
can
can
put
put
everything
everything
in
in
a
a
gallery
gallery
view
view
which
which
is
is
a
a
little
little
bit
bit
easier
easier
on
on
the
the
eyes.
eyes
Or
or
if
if
you're
you're
a
a
fan
fan
of
of
Trello
trello
or
or
Japanese
japanese
manufacturing,
manufacturing
you
you
can
can
put
put
everything
everything
in
in
a
a
Kanban
kanban
view.
view
Let's
let's
imagine
imagine
I
i
hired
hired
a
a
couple
couple
sales
sales
reps
reps
and
and
I
i
wanted
wanted
to
to
assign
assign
customers
customers
to
to
each
each
rep.
rep
I
i
can
can
simply
simply
drag
drag
and
and
drop
drop
them
them
in
in
here,
here
and
and
it
it
will
will
update
update
that
that
record
record
in
in
the
the
table.
table
These
these
views
views
are
are
really
really
nice
nice
for
for
organizing
organizing
your
your
data,
data
but
but
I
i
still
still
haven't
haven't
showed
showed
you
you
the
the
coolest
coolest
part
part
yet,
yet
which
which
is
is
Airtable
airtable
blocks.
blocks
A
a
block
block
is
is
basically
basically
a
a
mini
mini
app
app
that
that
you
you
can
can
apply
apply
to
to
your
your
data.
data
And
and
it
it
solves
solves
a
a
lot
lot
of
of
common
common
use
use
cases
cases
with
with
project
project
management
management
and
and
things
things
like
like
that.
that
Let's
let's
go
go
ahead
ahead
and
and
start
start
by
by
visualizing
visualizing
some
some
of
of
the
the
data
data
that
that
we
we
have
have
in
in
Firestore.
firestore
In
in
our
our
table,
table
we're
we're
keeping
keeping
track
track
of
of
the
the
user's
user's
country
country
as
as
well
well
as
as
their
their
order
order
total.
total
My
my
goal
goal
is
is
to
to
build
build
out
out
a
a
chart
chart
that
that
Shows
shows
the
the
order
order
total
total
across
across
all
all
customers
customers
based
based
on
on
their
their
country
country
of
of
origin.
origin
All
all
we
we
have
have
to
to
do
do
is
is
come
come
in
in
here
here
and
and
set
set
our
our
country
country
as
as
the
the
x
x
axis
axis
and
and
then
then
the
the
order
order
total
total
as
as
the
the
y
y
axis.
axis
And
and
that
that
gives
gives
us
us
a
a
nice
nice
visual
visual
of
of
the
the
data
data
that
that
we
we
can
can
use
use
for
for
internal
internal
reporting.
reporting
You
you
can
can
customize
customize
as
as
many
many
of
of
these
these
blocks
blocks
as
as
you
you
want
want
and
and
apply
apply
them
them
to
to
any
any
base
base
in
in
Airtable.
airtable
That
that
means
means
you
you
can
can
completely
completely
customize
customize
your
your
project
project
workflow
workflow
based
based
on
on
the
the
needs
needs
of
of
your
your
company.
company
In
in
my
my
case,
case
I
i
have
have
a
a
geo
geo
coordinate
coordinate
for
for
every
every
customer,
customer
so
so
I
i
might
might
want
want
to
to
visualize
visualize
them
them
with
with
Google
google
Maps.
maps
One
one
nice
nice
thing
thing
about
about
Airtable
airtable
is
is
that
that
it's
it's
tightly
tightly
integrated
integrated
with
with
Google
google
Cloud
cloud
Platform,
platform
so
so
you
you
can
can
simply
simply
enable
enable
some
some
APIs
apis
and
and
use
use
them
them
in
in
Airtable.
airtable
In
in
this
this
case,
case
we
we
want
want
to
to
enable
enable
the
the
Geocoding
geocoding
API
api
and
and
the
the
Google
google
Maps
maps
API.
api
Then
then
we
we
can
can
simply
simply
go
go
into
into
our
our
Firebase
firebase
project
project
and
and
add
add
the
the
API
api
key
key
from
from
our
our
web
web
app
app
config
config
and
and
copy
copy
and
and
paste
paste
it
it
into
into
the
the
Google
google
Maps
maps
config
config
in
in
Airtable.
airtable
Then
then
I'm
i'm
about
about
to
to
run
run
into
into
a
a
problem
problem
because
because
I've
i've
saved
saved
my
my
latitude
latitude
as
as
just
just
raw
raw
numbers
numbers
in
in
Firestore.
firestore
But
but
Google
google
Maps
maps
is
is
going
going
to
to
expect
expect
that
that
in
in
a
a
format
format
of
of
a
a
string
string
with
with
the
the
lat
lat
and
and
long
long
concatenated
concatenated
together.
together
So
so
how
how
might
might
we
we
solve
solve
this
this
problem?
problem
I
i
definitely
definitely
don't
don't
wanna
wanna
go
go
back
back
and
and
save
save
more
more
data
data
in
in
Firestore.
firestore
So
so
instead,
instead
I
i
can
can
set
set
up
up
a
a
new
new
field
field
here
here
in
in
Airtable,
airtable
But
but
we'll
we'll
use
use
the
the
formula
formula
data
data
type.
type
Those
those
who
who
know
know
Excel
excel
should
should
be
be
very
very
familiar
familiar
with
with
spreadsheet
spreadsheet
formulas.
formulas
But
but
if
if
not,
not
the
the
idea
idea
Here
here
is
is
that
that
we
we
can
can
combine
combine
multiple
multiple
columns
columns
together
together
based
based
on
on
some
some
code.
code
So
so
in
in
this
this
case,
case
we
we
just
just
want
want
to
to
concatenate
concatenate
2
2
values
values
together
together
with
with
a
a
comma
comma
in
in
the
the
middle.
middle
When
when
we
we
click
click
save,
save
it
it
automatically
automatically
updates
updates
all
all
fields
fields
in
in
this
this
row
row
with
with
the
the
proper
proper
data
data
format.
format
If
if
we
we
open
open
up
up
the
the
map
map
block,
block
we
we
can
can
see
see
that
that
now
now
all
all
of
of
our
our
customers
customers
are
are
included
included
on
on
the
the
map
map
with
with
their
their
actual
actual
geolocation
geolocation
coordinates.
coordinates
We
we
can
can
even
even
click
click
on
on
a
a
map
map
pin
pin
and
and
update
update
the
the
customer
customer
record
record
directly
directly
from
from
the
the
map.
map
Now
now
another
another
thing
thing
I
i
get
get
asked
asked
frequently
frequently
is,
is
how
how
do
do
I
i
generate
generate
a
a
PDF
pdf
from
from
a
a
Cloud
cloud
Function?
function
Well,
well
you
you
can
can
do
do
this
this
programmatically
programmatically
in
in
a
a
Cloud
cloud
Function.
function
It
it
might
might
be
be
easier
easier
to
to
just
just
do
do
it
it
visually
visually
with
with
the
the
page
page
block
block
in
in
Airtable.
airtable
This
this
little
little
app
app
is
is
a
a
drag
drag
and
and
drop
drop
page
page
designer
designer
that
that
has
has
access
access
to
to
all
all
of
of
the
the
data
data
in
in
Airtable.
airtable
So
so
you
you
can
can
automatically
automatically
generate
generate
a
a
standardized
standardized
PDF
pdf
for
for
all
all
of
of
your
your
customer
customer
records
records
or
or
whatever
whatever
else
else
you
you
have
have
saved
saved
in
in
the
the
table.
table
That
that
can
can
be
be
super
super
handy
handy
if
if
you
you
need
need
to
to
send
send
Invoices
invoices
periodically
periodically
or
or
if
if
you
you
just
just
have
have
a
a
certain
certain
report
report
that
that
needs
needs
to
to
go
go
out
out
to
to
a
a
specific
specific
customer.
customer
Once
once
you
you
have
have
your
your
template
template
saved,
saved
you
you
can
can
scroll
scroll
through
through
and
and
it
it
will
will
automatically
automatically
generate
generate
a
a
Different
different
report
report
for
for
each
each
customer
customer
record.
record
Another
another
thing
thing
you
you
might
might
wanna
wanna
see
see
is
is
the
the
timeline
timeline
of
of
user
user
sign
sign
ups
ups
in
in
your
your
app.
app
Maybe
maybe
you
you
initiated
initiated
some
some
kind
kind
of
of
marketing
marketing
campaign
campaign
and
and
you
you
wanna
wanna
see
see
the
the
impact
impact
that
that
had
had
on
on
user
user
sign
sign
ups.
ups
With
with
this
this
block,
block
I've
i've
set
set
up
up
a
a
timeline
timeline
based
based
on
on
the
the
user
user
sign
sign
up
up
date.
date
Visually,
visually
this
this
is
is
a
a
lot
lot
more
more
appealing
appealing
than
than
just
just
looking
looking
at
at
the
the
data
data
in
in
a
a
basic
basic
spreadsheet.
spreadsheet
So
so
that's
that's
pretty
pretty
cool,
cool
but
but
what
what
if
if
I'm
i'm
a
a
sales
sales
rep
rep
and
and
I
i
want
want
to
to
be
be
notified
notified
whenever
whenever
a
a
new
new
customer
customer
signs
signs
There's
there's
a
a
built
built
in
in
chime
chime
event
event
that
that
can
can
notify
notify
you
you
whenever
whenever
a
a
new
new
record
record
is
is
created
created
in
in
Airtable.
airtable
We
we
can
can
set
set
it
it
up
up
to
to
play
play
a
a
sound
sound
in
in
an
an
animation
animation
whenever
whenever
a
a
new
new
record
record
is
is
added.
added
And
and
then
then
we'll
we'll
bring
bring
up
up
our
our
add
add
random
random
customer
customer
button
button
here,
here
and
and
you
you
can
can
see
see
that
that
that
that
plays
plays
every
every
time
time
we
we
click
click
the
the
button.
button
So
so
I've
i've
just
just
shown
shown
you
you
about
about
4
4
or
or
5
5
of
of
the
the
different
different
Blocks
blocks
that
that
are
are
available,
available
there's
there's
27
27
overall
overall
at
at
the
the
time
time
of
of
this
this
video.
video
If
if
you're
you're
looking
looking
for
for
an
an
easy
easy
way
way
to
to
get
get
project
project
management
management
integrated
integrated
into
into
your
your
Firebase
firebase
project,
project
Airtable
airtable
is
is
definitely
definitely
an
an
intriguing
intriguing
option.
option
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
learn
learn
more
more
advanced
advanced
topics
topics
related
related
to
to
Firebase
firebase
and
and
cool
cool
APIs
apis
like
like
this,
this
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
access
access
to
to
a
a
whole
whole
bunch
bunch
of
of
exclusive
exclusive
content,
content
chat
chat
support,
support
free
free
copy
copy
of
of
my
my
book,
book
and
and
a
a
whole
whole
bunch
bunch
more.
more
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
Airtable is a customer relationship management system used by businesses to transform data saved in Firworks' data into a fully fledged system with Airtable. The system uses Python SDK and allows for creating apps and projects. It uses real time listeners and allows for editing and filtering rows in Airtable. The speaker explains how to use Airtable in a Cloud function, including creating a chart and PDF, and how to generate a timeline for user sign-ups. They also discuss the benefits of using Airtable for efficient data visualization and mention a new app called Airtable that allows for automatically generating a standardized PDF.
Airtable Quick Start with Firestore
Today, we're going to transform the data that you have saved in Firestore to a fully fledged customer relationship management system with Airtable. Firebase is great for building apps, but it doesn't really have any opinion about how you handle things on the business side. What if you need to visualize your data or send a text message to a user? Maybe you need to generate an invoice or assign one of your new users to a sales representative. Airtable is kind of like a build your own project management tool that's a cross between an Excel spreadsheet and a database. In this episode, I'll show you how to integrate it with Firestore and functions and then talk about why you might wanna use this tool. If you're new here, make sure to subscribe and grab the source code from angularfirebase.com. I've been messing around with Airtable for the last couple weeks, and I've been super impressed with it. And they don't pay me to say that. I learned about it from my friends over at Let's Boot Switzerland, so a quick shout out to them. Let's start by talking about what Airtable is and why you might wanna use it in the first place. It's basically an Excel spreadsheet that has a bunch of mini apps that you can apply to your data. We'll look specifically at some of these mini apps a little bit later, but you would most likely use this if you needed some project management tools on top of your Firestore data. So you wouldn't use this to show end users, but you would use it internally as a project management tool. Let's imagine you're building some kind of software as a service application with Firestore. You'll most likely want a CRM in place so you can follow-up with leads and just make your employees more productive. You can get started by signing up for an Airtable account, and it's free to 1200 records. The first thing I wanna do is go into your dashboard and add a new base. There's a whole bunch of starter templates, But we're just going to start out from scratch. I'm going to call this my customer base and I'll give it a beer icon. You can think of a base as a context for your data or in other words, an Excel spreadsheet. You can model your data by adding various columns to the spreadsheet. You'll need to define all the columns you need before you import it from Firestore because it can't just implicitly understand what your data is beforehand. You can see down here at the bottom, I have this Add random customer button, which is just adding a record to Firestore with the JavaScript SDK for Firebase. Airtable also uses real time listeners, So you should see the UI updated automatically as soon as your Cloud Function is finished. Let's get this started by running Firebase init functions. Then I'll be using TypeScript, but that part's optional because this Cloud Function is dead simple. The next step is to CD into the functions directory, And then we'll install the Airtable JS SDK. Just run npm install Airtable. Then we need to generate an Airtable API key, which we can do under the account tab. Then we can add it to the Cloud Functions environment by running Firebase functions config set Airtable dot key equals your API key. Now we can go into index ts and write the easiest cloud function of all time. 1st, we will import Airtable and then initialize it with the API key that we set in the environment. Then every base has its own unique ID, which we can reference by calling base with that ID, which you can find in the API docs in Airtable. In Firestore, I have a collection of customers, and I want to update the Airtable database whenever a new customer is added. We can listen to the on create event on the customer's collection, then we'll go ahead and set the data from this document as a variable and use that to update the base in Airtable. A base can have multiple sheets, so you'll want to reference the sheet, which in this case is customer data. And then just call create with the data that you wanna add and that's it. Now every time a new customer is created in Firestore, you'll also have access to that data in Airtable. Run Firebase deploy only functions to put it to use in production. That's all the code we're going to write in this lesson. Now we can move on to the fun part which is messing around with Airtable. I have some data here in Firestore that's represented in a JSON like object. And if we go over to Airtable, you see it's more like a SQL database table or Excel spreadsheet. You can do pretty much anything you would expect in a spreadsheet. For example, highlighting some rows and getting the sum or average. You can sort and filter rows, but the really cool thing is you Change the view from a grid to something like a calendar. If you have a time stamp on your records, you can see everything in this calendar view. Or you can put everything in a gallery view which is a little bit easier on the eyes. Or if you're a fan of Trello or Japanese manufacturing, you can put everything in a Kanban view. Let's imagine I hired a couple sales reps and I wanted to assign customers to each rep. I can simply drag and drop them in here, and it will update that record in the table. These views are really nice for organizing your data, but I still haven't showed you the coolest part yet, which is Airtable blocks. A block is basically a mini app that you can apply to your data. And it solves a lot of common use cases with project management and things like that. Let's go ahead and start by visualizing some of the data that we have in Firestore. In our table, we're keeping track of the user's country as well as their order total. My goal is to build out a chart that Shows the order total across all customers based on their country of origin. All we have to do is come in here and set our country as the x axis and then the order total as the y axis. And that gives us a nice visual of the data that we can use for internal reporting. You can customize as many of these blocks as you want and apply them to any base in Airtable. That means you can completely customize your project workflow based on the needs of your company. In my case, I have a geo coordinate for every customer, so I might want to visualize them with Google Maps. One nice thing about Airtable is that it's tightly integrated with Google Cloud Platform, so you can simply enable some APIs and use them in Airtable. In this case, we want to enable the Geocoding API and the Google Maps API. Then we can simply go into our Firebase project and add the API key from our web app config and copy and paste it into the Google Maps config in Airtable. Then I'm about to run into a problem because I've saved my latitude as just raw numbers in Firestore. But Google Maps is going to expect that in a format of a string with the lat and long concatenated together. So how might we solve this problem? I definitely don't wanna go back and save more data in Firestore. So instead, I can set up a new field here in Airtable, But we'll use the formula data type. Those who know Excel should be very familiar with spreadsheet formulas. But if not, the idea Here is that we can combine multiple columns together based on some code. So in this case, we just want to concatenate 2 values together with a comma in the middle. When we click save, it automatically updates all fields in this row with the proper data format. If we open up the map block, we can see that now all of our customers are included on the map with their actual geolocation coordinates. We can even click on a map pin and update the customer record directly from the map. Now another thing I get asked frequently is, how do I generate a PDF from a Cloud Function? Well, you can do this programmatically in a Cloud Function. It might be easier to just do it visually with the page block in Airtable. This little app is a drag and drop page designer that has access to all of the data in Airtable. So you can automatically generate a standardized PDF for all of your customer records or whatever else you have saved in the table. That can be super handy if you need to send Invoices periodically or if you just have a certain report that needs to go out to a specific customer. Once you have your template saved, you can scroll through and it will automatically generate a Different report for each customer record. Another thing you might wanna see is the timeline of user sign ups in your app. Maybe you initiated some kind of marketing campaign and you wanna see the impact that had on user sign ups. With this block, I've set up a timeline based on the user sign up date. Visually, this is a lot more appealing than just looking at the data in a basic spreadsheet. So that's pretty cool, but what if I'm a sales rep and I want to be notified whenever a new customer signs There's a built in chime event that can notify you whenever a new record is created in Airtable. We can set it up to play a sound in an animation whenever a new record is added. And then we'll bring up our add random customer button here, and you can see that that plays every time we click the button. So I've just shown you about 4 or 5 of the different Blocks that are available, there's 27 overall at the time of this video. If you're looking for an easy way to get project management integrated into your Firebase project, Airtable is definitely an intriguing option. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn more advanced topics related to Firebase and cool APIs like this, consider becoming a pro member at angularfirebase.com. You'll get access to a whole bunch of exclusive content, chat support, free copy of my book, and a whole bunch more. Thanks for watching, and I'll talk to you soon.
Airtable is a customer relationship management system used by businesses to transform data saved in Firworks' data into a fully fledged system with Airtable. The system uses Python SDK and allows for creating apps and projects. It uses real time listeners and allows for editing and filtering rows in Airtable. The speaker explains how to use Airtable in a Cloud function, including creating a chart and PDF, and how to generate a timeline for user sign-ups. They also discuss the benefits of using Airtable for efficient data visualization and mention a new app called Airtable that allows for automatically generating a standardized PDF.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Airtable Quick Start with Firestore 
        and a small summary : Airtable is a customer relationship management system used by businesses to transform data saved in Firworks' data into a fully fledged system with Airtable. The system uses Python SDK and allows for creating apps and projects. It uses real time listeners and allows for editing and filtering rows in Airtable. The speaker explains how to use Airtable in a Cloud function, including creating a chart and PDF, and how to generate a timeline for user sign-ups. They also discuss the benefits of using Airtable for efficient data visualization and mention a new app called Airtable that allows for automatically generating a standardized PDF.
        [/INST]
        
        Generate the video : Today, we're going to transform the data that you have saved in Firestore to a fully fledged customer relationship management system with Airtable. Firebase is great for building apps, but it doesn't really have any opinion about how you handle things on the business side. What if you need to visualize your data or send a text message to a user? Maybe you need to generate an invoice or assign one of your new users to a sales representative. Airtable is kind of like a build your own project management tool that's a cross between an Excel spreadsheet and a database. In this episode, I'll show you how to integrate it with Firestore and functions and then talk about why you might wanna use this tool. If you're new here, make sure to subscribe and grab the source code from angularfirebase.com. I've been messing around with Airtable for the last couple weeks, and I've been super impressed with it. And they don't pay me to say that. I learned about it from my friends over at Let's Boot Switzerland, so a quick shout out to them. Let's start by talking about what Airtable is and why you might wanna use it in the first place. It's basically an Excel spreadsheet that has a bunch of mini apps that you can apply to your data. We'll look specifically at some of these mini apps a little bit later, but you would most likely use this if you needed some project management tools on top of your Firestore data. So you wouldn't use this to show end users, but you would use it internally as a project management tool. Let's imagine you're building some kind of software as a service application with Firestore. You'll most likely want a CRM in place so you can follow-up with leads and just make your employees more productive. You can get started by signing up for an Airtable account, and it's free to 1200 records. The first thing I wanna do is go into your dashboard and add a new base. There's a whole bunch of starter templates, But we're just going to start out from scratch. I'm going to call this my customer base and I'll give it a beer icon. You can think of a base as a context for your data or in other words, an Excel spreadsheet. You can model your data by adding various columns to the spreadsheet. You'll need to define all the columns you need before you import it from Firestore because it can't just implicitly understand what your data is beforehand. You can see down here at the bottom, I have this Add random customer button, which is just adding a record to Firestore with the JavaScript SDK for Firebase. Airtable also uses real time listeners, So you should see the UI updated automatically as soon as your Cloud Function is finished. Let's get this started by running Firebase init functions. Then I'll be using TypeScript, but that part's optional because this Cloud Function is dead simple. The next step is to CD into the functions directory, And then we'll install the Airtable JS SDK. Just run npm install Airtable. Then we need to generate an Airtable API key, which we can do under the account tab. Then we can add it to the Cloud Functions environment by running Firebase functions config set Airtable dot key equals your API key. Now we can go into index ts and write the easiest cloud function of all time. 1st, we will import Airtable and then initialize it with the API key that we set in the environment. Then every base has its own unique ID, which we can reference by calling base with that ID, which you can find in the API docs in Airtable. In Firestore, I have a collection of customers, and I want to update the Airtable database whenever a new customer is added. We can listen to the on create event on the customer's collection, then we'll go ahead and set the data from this document as a variable and use that to update the base in Airtable. A base can have multiple sheets, so you'll want to reference the sheet, which in this case is customer data. And then just call create with the data that you wanna add and that's it. Now every time a new customer is created in Firestore, you'll also have access to that data in Airtable. Run Firebase deploy only functions to put it to use in production. That's all the code we're going to write in this lesson. Now we can move on to the fun part which is messing around with Airtable. I have some data here in Firestore that's represented in a JSON like object. And if we go over to Airtable, you see it's more like a SQL database table or Excel spreadsheet. You can do pretty much anything you would expect in a spreadsheet. For example, highlighting some rows and getting the sum or average. You can sort and filter rows, but the really cool thing is you Change the view from a grid to something like a calendar. If you have a time stamp on your records, you can see everything in this calendar view. Or you can put everything in a gallery view which is a little bit easier on the eyes. Or if you're a fan of Trello or Japanese manufacturing, you can put everything in a Kanban view. Let's imagine I hired a couple sales reps and I wanted to assign customers to each rep. I can simply drag and drop them in here, and it will update that record in the table. These views are really nice for organizing your data, but I still haven't showed you the coolest part yet, which is Airtable blocks. A block is basically a mini app that you can apply to your data. And it solves a lot of common use cases with project management and things like that. Let's go ahead and start by visualizing some of the data that we have in Firestore. In our table, we're keeping track of the user's country as well as their order total. My goal is to build out a chart that Shows the order total across all customers based on their country of origin. All we have to do is come in here and set our country as the x axis and then the order total as the y axis. And that gives us a nice visual of the data that we can use for internal reporting. You can customize as many of these blocks as you want and apply them to any base in Airtable. That means you can completely customize your project workflow based on the needs of your company. In my case, I have a geo coordinate for every customer, so I might want to visualize them with Google Maps. One nice thing about Airtable is that it's tightly integrated with Google Cloud Platform, so you can simply enable some APIs and use them in Airtable. In this case, we want to enable the Geocoding API and the Google Maps API. Then we can simply go into our Firebase project and add the API key from our web app config and copy and paste it into the Google Maps config in Airtable. Then I'm about to run into a problem because I've saved my latitude as just raw numbers in Firestore. But Google Maps is going to expect that in a format of a string with the lat and long concatenated together. So how might we solve this problem? I definitely don't wanna go back and save more data in Firestore. So instead, I can set up a new field here in Airtable, But we'll use the formula data type. Those who know Excel should be very familiar with spreadsheet formulas. But if not, the idea Here is that we can combine multiple columns together based on some code. So in this case, we just want to concatenate 2 values together with a comma in the middle. When we click save, it automatically updates all fields in this row with the proper data format. If we open up the map block, we can see that now all of our customers are included on the map with their actual geolocation coordinates. We can even click on a map pin and update the customer record directly from the map. Now another thing I get asked frequently is, how do I generate a PDF from a Cloud Function? Well, you can do this programmatically in a Cloud Function. It might be easier to just do it visually with the page block in Airtable. This little app is a drag and drop page designer that has access to all of the data in Airtable. So you can automatically generate a standardized PDF for all of your customer records or whatever else you have saved in the table. That can be super handy if you need to send Invoices periodically or if you just have a certain report that needs to go out to a specific customer. Once you have your template saved, you can scroll through and it will automatically generate a Different report for each customer record. Another thing you might wanna see is the timeline of user sign ups in your app. Maybe you initiated some kind of marketing campaign and you wanna see the impact that had on user sign ups. With this block, I've set up a timeline based on the user sign up date. Visually, this is a lot more appealing than just looking at the data in a basic spreadsheet. So that's pretty cool, but what if I'm a sales rep and I want to be notified whenever a new customer signs There's a built in chime event that can notify you whenever a new record is created in Airtable. We can set it up to play a sound in an animation whenever a new record is added. And then we'll bring up our add random customer button here, and you can see that that plays every time we click the button. So I've just shown you about 4 or 5 of the different Blocks that are available, there's 27 overall at the time of this video. If you're looking for an easy way to get project management integrated into your Firebase project, Airtable is definitely an intriguing option. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you wanna learn more advanced topics related to Firebase and cool APIs like this, consider becoming a pro member at angularfirebase.com. You'll get access to a whole bunch of exclusive content, chat support, free copy of my book, and a whole bunch more. Thanks for watching, and I'll talk to you soon.
        