A Developer's Take on How to Build Two-Way Sync with Quire API

Many of us use multiple apps to get things done. But jumping between them can be a real hassle when your information isn’t synced. That’s where Quire’s Open API comes in - it allows developers to connect Quire with other services so data stays consistent across platforms, saving time and keeping workflows smooth.

As an example, we recently launched our Google Calendar Two-Way Sync app. This feature automatically keeps your Quire tasks and Google Calendar events in perfect alignment, working quietly in the background to handle all the technical details.

In this post, we’ll walk through how developers can build a similar two-way sync using the Quire API, using the Google Calendar integration as a real-world example.

Google Calendar Two-Way Sync is made for Premium and higher subscription tiers. More information can be found on our Pricing page.

What is Two-Way Sync Workflow

Think of two-way sync as a conversation between two apps. When you update a task in Quire, it tells the other app about the change. And when something is updated in that other app, it tells Quire. This keeps your information consistent everywhere.

The Implementation Steps

Setting up your Quire App is the first step. You'll need to create one to get the necessary credentials for accessing your Quire project through its API.

For a step-by-step guide on how to create your own app with Quire API, please visit our blog post.

To implement a two-way sync, you'll need to develop a middle-layer app (your app) to act as a bridge between Quire and your targeting app (such as Google Calendar). Think of it as a translator: it'll get information from one side, process it, and then send the right commands to the other. The flow looks like this: Quire ↔ Your App ↔ Other App.

A Step-by-Step Guidance for Your Reference

1. Prepare an app for handling events

To enable two-way sync, you first need to set up your own server app to act as the middle layer. This app will be responsible for receiving webhook POST requests from both Quire and the other app. Your server should be able to:

• Accept incoming HTTP POST requests (webhook events) from Quire and the other app.
• Parse the event payloads and determine what actions need to be taken.
• Use the respective APIs to update data in Quire or the other app as needed.

You can build this server app using any technology you prefer, such as Node.js, Python, or Ruby. In the following sections, we’ll use Node.js to demonstrate a simple example of how to receive and handle webhook events. Make sure your server is accessible from the internet so that Quire and the other app can send webhook events to it.

Here is a simple Node.js example using Express:

const express = require('express');
const app = express();
app.use(express.json());

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

2. Set up a webhook in Quire to send task updates to your app.

Next, you’ll need to create a route in your server to receive webhook events from Quire.

app.post('/webhook', (req, res) => {
  console.log('Received webhook event:', req.body);
  // TODO: Handle the event and update Quire or other app via API
  res.status(200).send('Event received');
});

In this example, the webhook route is /webhook, so the full URL will be ${your-host}/webhook.

Copy this webhook URL and paste it into the Quire app settings, so Quire knows where to send event notifications to your app.

Additionally, you’ll need to register your Quire app as a follower of the project you want to sync. This ensures your app receives notifications for relevant updates.

For a step-by-step guide on how to receive notifications via Quire API, please visit our guide.

3. Set up a webhook in the other app to send its updates to your app.

To synchronize updates from the other app with Quire, you’ll also need to create a route in your server to receive webhook events from that app. The registration process is similar to the example shown above for Quire. Simply configure the other app to send its event notifications to your middle app’s webhook endpoint, and make sure your server can handle and process these incoming events appropriately.

4. Handle incoming events and update data in both Quire and the other app using their APIs.

Once your app is receiving webhook events from both Quire and the other app, you’ll need to implement logic to process these events and synchronize data between the two platforms. This typically involves:

• Parsing the event payloads to identify what has changed (e.g., task created, updated, or deleted). For more details on the event structure, you can refer to the Quire API Document - Notification Events.
• Determining which API calls are needed to reflect these changes in the other app.
• Sending the appropriate API requests to Quire or the other app to keep data in sync.
• Maintaining a mapping between Quire task IDs and your app’s item IDs to ensure updates are correctly linked.

By carefully handling incoming events and updating data through the APIs, your app ensures that changes are accurately reflected on both sides, maintaining seamless two-way synchronization.

Here’s an example using Node.js and axios:

const axios = require('axios');

app.post('/webhook', (req, res) => {
  const { type } = req.body.data;
  // Reference of activity types: 
  // https://github.com/quire-api/quire-api/blob/master/docs/activity_types.md
  switch (type) {
    case 0: //Quire task created
      onQuireTaskCreate();
      break; 
    case 1: //Quire task deleted
      onQuireTaskDelete();
      break;
  }
  res.status(200).send('Event received');
});

// Route for handling events from another app to Quire
app.post('/anotherwebhook', async (req, res) => {
  const { isCreate, id, name, projectId } = req.body;
  if (isCreate) {
    // Create a task in the Quire project
    await axios.post(`https://quire.io/api/task/${projectId}`, { name });
    // Optionally, store the mapping between your app's id and Quire's task id
  } else {
    // Retrieve the corresponding Quire task id using your mapping logic
    const taskOid = getTaskIdByAppEventId(id, projectId);
    // Delete the task from the Quire project
    await axios.delete(`https://quire.io/api/task/${taskOid}`);
  }
  res.status(200).send('Event processed successfully');
});

This example demonstrates how to handle create and delete events from another app and synchronize them with Quire. Make sure to implement proper error handling and maintain the ID mapping for reliable sync.

Key Considerations to Takeaway

When setting up two-way sync, keep these points in mind:

• Avoid duplicate updates or endless loops by tracking where each change comes from and ignoring any updates triggered by your own sync process.
• Make sure data formats match between Quire and the other app so everything stays accurate and consistent.

Some Last Words From Us

Using Open API and webhooks, you can keep Quire and your other tools in sync automatically - saving time, reducing errors, and keeping your workflow running smoothly. Now go for it, and have a lot of fun! 😍