View profile

Headless Apps: Making Trello into an Email Scheduler

A while back we wrote about the idea of headless apps: an app that integrates existing UIs and has no
Headless Apps: Making Trello into an Email Scheduler
By Mastering JS Weekly • Issue #41 • View online
A while back we wrote about the idea of headless apps: an app that integrates existing UIs and has no real UI of its own. For example, suppose you write your weekly newsletter in a Trello card, set a due date, and an app running in the background sends the email at the due date.
Headless apps have a couple big advantages. First, given that Trello already has a mobile app, you don’t need to worry about building a mobile app or browser app. Second, if your users already know how to use Trello, they need a minimum of training in how to use your app. Finally, you don’t need to worry about building access control into your app. Trello gives you that for free.
For further reading, here’s a fun article about using Trello as a CMS that provides a different perspective on what you can use Trello for.

Setting Up Trello Webhooks
First, get a Trello API key and token. Trello webhooks let you watch an entire list on a board for changes, but you need to get the list id. The easiest way to do that is to add `.json` to your board URL to get the JSON representation of your board. For example, `https://trello.com/b/bJmSAbvG/mastering-js` -> `https://trello.com/b/bJmSAbvG/mastering-js.json`.
Then, paste the JSON into a JSON prettifier like this one, search the text for your list’s name, and copy the `id`.
Get the Trello list id
Get the Trello list id
Trello has a REST API for creating webhooks, so to register a webhook you need to make a POST request to a `/webhooks` endpoint. You also need a publicly accessible URL for the webhook, so you should use ngrok. Here’s a basic example of creating an Express app with an ngrok URL, and pointing a Trello webhook to the ngrok URL.
Create an Express app, ngrok endpoint, and Trello webhook
Create an Express app, ngrok endpoint, and Trello webhook
Scheduling an Email
Now that you have a webhook that Trello calls every time you add, delete, or modify a card in a given list, you need to write some code that schedules an email for every card. For example, the below card should send an email with subject “Hello, World” and body “This email was sent from Trello!” at 1:03pm.
This card corresponds to a scheduled email with subject "Hello, World"
This card corresponds to a scheduled email with subject "Hello, World"
How to do this? You can store cards in MongoDB using a Mongoose model.
Mongoose scheduled email model
Mongoose scheduled email model
When Trello fires the webhook, you can get the associated Trello card and update the document corresponding to the card in MongoDB:
Fetch the updated card from the Trello API and save it to MongoDB
Fetch the updated card from the Trello API and save it to MongoDB
Now that MongoDB stores an up-to-date list of emails to send, all that’s left to do is to actually send the emails using the Mailgun API. You can use `setInterval()` to run a function every 5 seconds that checks for any scheduled emails, and sends them.
Pull the next scheduled email every 5 seconds and send it
Pull the next scheduled email every 5 seconds and send it
All in all, this email scheduler adds up to 96 lines of code. There are several features you would need to add, like support for formatting. But I think this example does a great job of showing that you can save a lot of time and effort by leveraging an existing UI rather than building your own, just like how you can save time by leveraging existing APIs.
Hello from Trello
Hello from Trello
Most Recent Tutorials
Other Interesting Reads
Using Trello as a Super Simple CMS | CSS-Tricks
WordPress Co-Founder Matt Mullenweg Is Not a Fan of JAMstack – The New Stack
What's New in Mongoose 5.10: Optimistic Concurrency | www.thecodebarbarian.com
What's New in Mongoose 5.10: Improved Transactions | www.thecodebarbarian.com
Did you enjoy this issue?
Mastering JS Weekly

A weekly summary of our tutorials

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue