https://github.com/ably-labs/ably-airtable-starter-kit
A fully functional starter kit to store realtime messages from Ably into Airtable via WebHooks
https://github.com/ably-labs/ably-airtable-starter-kit
ably airtable airtable-api nodejs prismjs realtime realtime-chat realtime-database vuejs
Last synced: 12 months ago
JSON representation
A fully functional starter kit to store realtime messages from Ably into Airtable via WebHooks
- Host: GitHub
- URL: https://github.com/ably-labs/ably-airtable-starter-kit
- Owner: ably-labs
- License: apache-2.0
- Created: 2020-11-11T10:12:36.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-18T14:03:08.000Z (over 5 years ago)
- Last Synced: 2025-05-05T15:46:47.974Z (about 1 year ago)
- Topics: ably, airtable, airtable-api, nodejs, prismjs, realtime, realtime-chat, realtime-database, vuejs
- Language: Vue
- Homepage: https://realtime-chat-storage.ably.dev/
- Size: 2.12 MB
- Stars: 6
- Watchers: 6
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### A fully functional starter kit to store realtime messages from Ably into Airtable via WebHooks
This project shows how to use [Airtable](https://airtable.com/) to store realtime messages using a group chat app built with [Ably Realtime](https://www.ably.io/).
The resulting demo app shows two sections. While one section shows the fully functional live group chat app, the other section shows a play-by-play description of various things happening behind the scenes in each step, along with code snippets to implement that piece of functionality.
For example, it shows when the connection with Ably is successfully set up, when and how many messages were retrieved from the Airtable database, or the live messages pushed by Ably, etc.
Any new messages posted to the chat go through a profanity filter, and get automatically published to [Airtable's REST API](https://airtable.com/api) as well via [Ably's WebHooks integration](https://www.ably.io/integrations).
---
## Live demo
Check out this project in action at https://realtime-chat-storage.ably.dev/
## How to run this project locally?
1. Clone this repo using:
```
git clone https://github.com/ably-labs/ably-airtable-starter-kit
```
2. Change directories into the project using:
```
cd ably-airtable-starter-kit
```
3. Create a new file called `.env` and add the following:
```
ABLY_API_KEY=
```
4. [Sign up for a free account with Ably](https://www.ably.io/) to get your API Key and replace the placeholder `` in step 3 with your Ably API Key.
5. Install both the NodeJS server and front-end VueJS app dependencies using:
```
npm install
cd ably-airtable-storage
npm install
cd ..
```
6. Run the server using `node server.js` and open the app in your browser at `http://localhost:8082/`
## The tech stack
##### Frameworks/ Languages
- [Vue JS](https://vuejs.org/)
- [Node JS](https://nodejs.org/en/)
##### Libraries
- [Airtable SDK](https://airtable.com/api)
- [Ably Realtime](https://ably.io/)
- [Express](https://expressjs.com/)
- [Axios](https://www.npmjs.com/package/axios)
- [Bootstrap](https://getbootstrap.com/)
- [DotEnv](https://www.npmjs.com/package/dotenv)
- [vue-code-highlight](https://www.npmjs.com/package/vue-code-highlight)
## Learn more about the project
Check out my detailed blog post (coming soon...) to understand this project in detail along with ways of extending this project to use other databases or even get realtime updates from Airtable.
## Load tests and limits
- All of Ably's messaging limits, broken down by package can be found in a [support article](https://support.ably.com/support/solutions/articles/3000053845-do-you-have-any-connection-message-rate-or-other-limits-on-accounts-).
- As of this writing Airtable's public API has a [rate limit of 5 requests per second, per base](https://support.airtable.com/hc/en-us/articles/203313985-Public-REST-API).
- We are currently performing load and performance tests on this starter kit and will update this guide with that info when it's available. If this is important to you, please [leave a message to me directly on Twitter](https://www.twitter.com/Srushtika) or reach out to Ably's support team at [support@ably.com](mailto:support@ably.com)