ably-labs / ably-airtable-starter-kit Goto Github PK

This project shows how to use Airtable to store realtime messages using a group chat app built with Ably Realtime.

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 as well via Ably's WebHooks integration.

Check out this project in action at https://realtime-chat-storage.ably.dev/

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=<YOUR-ABLY-API-KEY>

4. Sign up for a free account with Ably to get your API Key and replace the placeholder <YOUR-ABLY-API-KEY> 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/

• Vue JS
• Node JS

• Airtable SDK
• Ably Realtime
• Express
• Axios
• Bootstrap
• DotEnv
• vue-code-highlight

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.

• All of Ably's messaging limits, broken down by package can be found in a support article.

• As of this writing Airtable's public API has a rate limit of 5 requests per second, per base.

• 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 or reach out to Ably's support team at [email protected]