We will continue building a great developer experience at Twitter

Reshuffle is joining Twitter!


We are excited to announce that Reshuffle is joining Twitter! We will continue our mission to empower developers all over the world to build useful integrations and applications, using the Twitter developer platform.

Reshuffle has always been about empowering developers - reducing the friction of integration to common APIs you use on a daily basis, building examples and scaffolding for common developer use cases, and making it all easily accessible through open source and a standard set of interfaces.  

Twitter has been a great partner to us since we started Reshuffle, and shares our passion and excitement of driving value to developers through a set of useful APIs and a simple and intuitive developer experience. 

While we’ll be winding down our commercial product, Reshuffle will remain open source forever. We’re committed to maintaining it as good citizens of the open source community. Our efforts at Twitter will be to double down on its developer experience and continue to provide value to you as developers! 


Connect systems with Reshuffle.

This week in Reshuffle - 2/19/2021


Reshuffle turns custom development into simple integration projects so you can build 5x faster at a fraction of the cost.

Here are the new connectors we added to Reshuffle this week:

- [Airtable Connector](https://github.com/reshufflehq/reshuffle-airtable-connector)
- [Microsoft Excel Connector](https://github.com/reshufflehq/reshuffle-microsoft-connectors)

Check out all the available connectors [here](https://www.reshuffle.com/docs/connectors).

Have an idea for the next connector? Send us a tweet [@ReshuffleHQ](https://twitter.com/reshufflehq) to let us know which to develop next.

Need inspiration? Check out our latest tutorials:

- [Using Twitter API and Reshuffle to manage Social Media Contests and Giveaways](https://dev.to/alanblee/using-twitter-api-and-reshuffle-for-giveaways-2gi8)
- [How to Build a Spreadsheet-Powered Website Using Monday.com and Reshuffle Open Source](https://dev.to/ashevat/how-to-build-a-spreadsheet-powered-website-using-monday-com-and-reshuffle-open-source-eoc)
- [Sync Github Issues with Asana Board Tasks](https://dev.to/alanblee/sync-github-issues-with-asana-board-tasks-5ajc)

If you’re ready to Reshuffle, here’s how to get [started](https://www.reshuffle.com/docs/getting-started).


This week in Reshuffle - 1/15/2021


Reshuffle turns custom development into simple integration projects so you can build 5x faster at a fraction of the cost.

Here are the new connectors we added to Reshuffle this week:

- [Quickbooks Connector](https://github.com/reshufflehq/reshuffle-quickbooks-connector)
- [Firebase Connector](https://github.com/reshufflehq/reshuffle-firebase-connector)
- [Mixpanel Connector](https://github.com/reshufflehq/reshuffle-mixpanel-connector)
- [Google Analytics Connector](https://github.com/reshufflehq/reshuffle-google-connectors/blob/master/doc/GoogleAnalyticsConnector.md)

Check out all the available connectors [here](https://www.reshuffle.com/docs/connectors).

Have an idea for the next connector? Send us a tweet [@ReshuffleHQ](https://twitter.com/reshufflehq) to let us know which to develop next.

Need inspiration? Check out our latest tutorials:

- [Track your SMS campaigns in Google Analytics with Reshuffle and Twilio](https://dev.to/alanblee/track-your-sms-campaigns-in-google-analytics-with-reshuffle-and-twilio-1fbe)
- [Build an Email Workflow Integration for Your Website](https://dev.to/ashevat/how-to-build-an-email-workflow-integration-for-your-website-with-reshuffle-open-source-42dj)

If you’re ready to Reshuffle, here’s how to get [started](https://www.reshuffle.com/docs/getting-started).


by Amir Shevat

Onions Have Layers, Ogres Have Layers, APIs Should Have Layers, Too!


When I was at Slack and later at Twitch, we used more than 50 different software-as-a-Services (SaaS) cloud offerings to make our business go. From bug tracking to task management, from sales to HR, most of the software we used was SaaS. Most of these services were great and added a lot of value, and some even had great APIs that enabled us to create useful integrations. When an issue was resolved in Jira a notification would be sent by email or Slack. Life was sweet! Well, not so much.

Life in many companies looks like this today:

![Company workflow chart](https://i.imgur.com/wlm6jvh.png)

In this post, I will talk about why API integrations still suck, and how to un-suck them a little bit, using a great technique called API layering.

## API Integrations Still Suck

Unfortunately, while most modern systems have APIs, there are still several hurdles that make using them a struggle, especially as you scale.

1. **Lack of API standardization.** Different systems expose different APIs that come in a range of architectural styles (e.g. REST, GraphQL, etc.), use different data structures (e.g. user key can be an email in one system and a phone number in another), and many other aspects. This puts a strain on development teams who manage and maintain a multitude of disparate APIs.
2. **Multiple security models make management complex.** Each system exposes different security models — OAuth, basic, m2m tokens, etc. This makes integrations riskier as these tokens are shared anew every time you integrate more systems, and all these keys in the wild create the need for major provisioning and ongoing maintenance.
3. **Insufficient capabilities.** Most APIs are pull only, but many developers need to push and constantly pull to mimic the push, which requires expensive resources such as compute cycles and bandwidth and produces suboptimal responsiveness.
4. **Code is not reusable across APIs.** A system API, for example, the Salesforce API, exposes functionality that is limited to its particular third-party system. If I need to add a “new client” functionality to two different integrations, I need to duplicate the API calls to Salesforce in each of my integrations. To add that code to a third system, I’ll rewrite it a third time, which is not practical at scale.

![API test img](https://i.imgur.com/AY8KYA0.png)
[Image Source](https://thenewstack.io/managing-apis-is-a-time-suck/)

## How API Layering Can Help

The common pains mentioned above cost organizations time and money. They are the result of different standards being used, as well as heavy fragmentation in APIs and services used by modern enterprises. The good news is that using a set of simple design patterns I call “API layering” can simplify and even resolve some of these pains.

Let’s explore these API design patterns, where we wrap one or more APIs with another API as a shim.

### Expansion-Layer: Wrap one API with another to add functionality

In this use case, you have an API that exposes partial or limited functionality and need to add additional functionality through a wrapper API. For example:

![Expansion Layer Img](https://i.imgur.com/p9xuVN5.png)

**When to use this pattern:**

When the underlying API is insufficient to complete your use case — or if you need to add functionality to meet security and compliant requirements — use this pattern to enrich the data returned from the wrapped API.

**Real-life example:**

At Slack, our API was used both for Slack clients and our developer community. Developers told us that while the API worked well for many use cases, it assumes a rich client that can cache data. Things like mapping between user id and username were the assumed responsibility of the client. We had to expose third-party endpoints that wrapped the original API and added information needed for our third-party developers.

### Reductive-Layer: Wrap One API with Another to Limit the Access to the Original API

In this use case, you do not want to expose the full API functionality, either internally or externally. This can stem from a need to protect sensitive information, mitigate the risk of impacting production, or other reasons. While a few systems provide granular API permission solutions, these are rarely enough for enterprise use cases.

![Reductive Layer Img](https://i.imgur.com/yzxJSOO.png)

**When to use this pattern:**

Use this pattern to protect and limit access to the original API. Even if the original API has a token that limits the permissions of certain actions, there might be use cases where you would not want to expose some endpoints regardless of the permission system they use.

**Real-life example:**

Google Cloud has a vast set of APIs available to Google engineers. Many of them are exposed today, but not all. When I was at Google the internal system and its API had an internal secret name that was not shared externally. Today you can read about it [here](https://research.google/pubs/pub43438/%23:~:text=Google's%2520Borg%2520system%2520is%2520a,tens%2520of%2520thousands%2520of%2520machines.).

### Type-Converter-Layer: Wrap One API Type with Another

In this pattern, you wrap one API type (e.g. XML RPC, SOAP) with another as a shim. For example:

![Type-Converter Layer Img](https://i.imgur.com/4dilO3p.png)

**When to use this pattern:**

Use this pattern when the underlying API or protocol is hard to use (most developers think that SOAP is a hygiene product) or not secure enough to use in a certain use case.

**Real-life example:**

This happened to us at Twitch. Our internal system API was GraphQL, but we did not want to expose this externally. Instead, we exposed a REST API externally and bridged it to GraphQL in the REST endpoints. Another example would be how Twilio exposes a simple API for telephony and SMS.

### Aggregation-Layer: Combine One or More APIs into a Single Standard API

In this pattern, we want to consolidate and standardize several APIs to a simple and consolidated API. This can normalize fields in the API parameters or return value across these API calls. Here is an example:

![Aggreation-Layer Img](https://i.imgur.com/OzgsjDj.png)

**When to use this pattern:**

Use this pattern to consolidate disparate APIs into a consistent and standard API and make sure the inputs and outputs of the consolidated API endpoints match one another. Another big benefit is that the client only needs to have a single API key and not hold credentials for many different systems.

**Real-life example:**

At Twitch we created an API gateway that exposed this type of functionality. We had a microservices-heavy system without an easy way to standardize across these services. The API gateway helped developers create a single unified API for our clients.

### Composition-Layer: Wrapping an API over other APIs to Expose Composite Business Logic

This is the most advanced pattern. In this one, you create your own business logic that encapsulates several API calls to different systems. Here is a variation of the example above using this pattern:

![Composition-Layer Img](https://i.imgur.com/pH2NDw3.png)

**When to use this pattern:**

Use this pattern to expose your company’s business logic, rather than the building blocks each system exposes. When done right, this is a very powerful pattern that simplifies and abstracts a lot of the complexity of using APIs and many service providers.

**Real-life example:**

A good example of this are the [BFF](https://medium.com/@abhilashjn85/bff-layer-when-its-more-than-just-an-api-gateway-4679da49534c) APIs, where frontend clients need a simplified version in the internal systems. At Twitch, we had hundreds of microservices and it would have been a Herculean task for a frontend client to communicate with fractures of functionality, so a consolidated API made a lot of sense.

## A Better Future

Good design patterns remove complexity. Today we are using more systems than ever to run our businesses — utilizing hundreds of API service providers in big organizations. Manually managing APIs using these patterns is doable, but can be too slow for modern organizations, which is why using an [integration platform](https://www.reshuffle.com/) like Reshuffle can simplify and automate the process helping the business to become faster and more agile. Whatever method you choose to manage APIs, ensure that integrations drive efficiency, speed and scalability.

<iframe width="600" height="315" src="https://www.youtube.com/embed/-FtCTW2rVFM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


This week in Reshuffle - 12/18/2020


Reshuffle turns custom development into simple integration projects so you can build 5x faster at a fraction of the cost.

Here are the new connectors we added to Reshuffle this week:

- [Teamwork Connector](https://github.com/reshufflehq/reshuffle-teamwork-connectors)
- [Elasticsearch Connector](https://github.com/reshufflehq/reshuffle-elasticsearch-connector)

Check out all the available connectors [here](https://www.reshuffle.com/docs/connectors).

Have an idea for the next connector? Send us a tweet [@ReshuffleHQ](https://twitter.com/reshufflehq) to let us know which to develop next.

Need inspiration? Check out our latest tutorials:

- [Programmatically Remind Your Teammates on Slack to Review GitHub PRs](https://dev.to/alanblee/programmatically-remind-your-teammates-on-slack-to-review-github-prs-b6n)
- [Recurring Jira tickets with Reshuffle](https://dev.to/alanblee/recurring-jira-tickets-with-reshuffle-4ml5)

If you’re ready to Reshuffle, here’s how to get [started](https://www.reshuffle.com/docs/getting-started).


Programmatically Remind Your Teammates on Slack to Review GitHub PRs


The Github integration for Slack is great for team productivity. Having the ability to give Slack channels full visibility into Github projects, for real-time notifications, is an amazing way to keep the development team on the same page. However, this can become a double-edged sword. Developers may decide to ignore these messages being sent because it may be information overload.

I’ve been in a similar situation where pull requests needed approval from reviewers but they wouldn’t check the channels or their emails. The only thing that got their attention were direct messages. This hindered delivery and having to ping the reviewer myself was becoming a pain.

As great as the Github app for Slack is, I wanted something more custom that would suit my needs. For example, whenever a pull request is made with reviewers, only send direct messages to those who have been requested.

In this article, we will use Github, Slack, and [Reshuffle](https://reshuffle.com/) to create the workflow to directly message the reviewers on a pull request.

## How to Build It

Before getting started with the code, we’ll need to get credentials set up with Github and Slack.

**Github**

- Log in and generate a token [here](https://github.com/settings/tokens)
- Save the token somewhere, as you''ll need it soon

**Slack**

- Create a new Slack App [here](https://api.slack.com/apps)
- Enter the App name and select the workspace
- Click on `Create App`
- Click on your new App
- The signing secret is under `Basic Information` > `App Credentials`
- The token is under `Settings` > `Install App` > `OAuth Access Token`
- Save the token and signing secret somewhere, as you''ll need it soon

See links for full documentation:

- [Reshuffle](https://github.com/reshufflehq/reshuffle)
- [Slack Connector](https://github.com/reshufflehq/reshuffle-slack-connector)
- [Github Connector](https://github.com/reshufflehq/reshuffle-github-connector)
- [Cron Connector](https://github.com/reshufflehq/reshuffle/blob/master/doc/CronConnector.md)

With the credentials saved somewhere safe, we can begin by instantiating a Reshuffle app and configuring the connectors.

_Note: The Github Connector requires a runTimeBaseUrl. A tool like [ngrok](https://ngrok.com/) can be used to generate a url that exposes your localhost over SSL._

```javascript
const { Reshuffle, CronConnector } = require('reshuffle')
const { GitHubConnector } = require('reshuffle-github-connector')
const { SlackConnector } = require('reshuffle-slack-connector')

const app = new Reshuffle()
// Cron config
const cronConnector = new CronConnector(app)
//Github Config
const githubConnector = new GitHubConnector(app, {
  token: process.env.GITHUB_TOKEN,
  runtimeBaseUrl: process.env.RUNTIME_BASE_URL,
})
const slackConnector = new SlackConnector(app, {
  token: process.env.SLACK_TOKEN,
  signingSecret: process.env.SLACK_SIGN_SECRET,
})

// Code listed further down
// will be inserted here

app.start()
```

Reshuffle Connectors provide events and actions that allow developers to easily build custom workflows and integrations. We’re now able to take advantage of what they can do.

We’ll continue by getting a list of the user’s Github handles and their Slack IDs. In order to get this data, we use a method on Slack Connector that exposes [Slack's web client](https://slack.dev/bolt-js/concepts#web-api) actions.

_Note: In this example, display_name is being assumed to be the same as the Github handle. You can definitely add your own profile fields that suit your team._

```javascript
const slackUsers = await (async () => {
  const webClient = await slackConnector.getWebClient()
  const { members } = await webClient.users.list()
  let usersHash = {}
  members.forEach((member) => {
    usersHash[member.profile.display_name] = member.id
  })
  return usersHash
})()
```

Next, we’ll write a helper function to handle the event when a pull request is created, this will take in a list of reviewers from Github, the user list from Slack, and the link url to the pull request. If there are no reviewers, we’ll simply post to the general channel, otherwise, we match the reviewers to the slack members list and send them a direct message.

```javascript
const messageHelper = async (
  ghReviewers,
  slackList,
  prLink,
  pending = false
) => {
  if (ghReviewers.length == 0) {
    await slackConnector.postMessage(
      'general',
      `${pending ? 'Pending pull request' : 'New pull request'} - ${prLink}`
    )
  } else {
    ghReviewers.forEach(async ({ login }) => {
      if (slackList.hasOwnProperty(login)) {
        await slackConnector.postMessage(
          slackList[login],
          `${
            pending ? '* Pending review *' : '* New review requested *'
          } ${prLink}`
        )
      }
    })
  }
}
```

To tie everything together, we configure the Github Connector to trigger an event anytime a pull request is created.

_Note: See the full list of available events [here](https://github.com/reshufflehq/reshuffle-github-connector#connector-events)_

We can get the list of requested reviewers from the event object, passing onto our helper, which is only called if the event action matches “opened” or “reopened”.

```javascript
githubConnector.on(
  {
    owner: process.env.GITHUB_OWNER,
    repo: process.env.GITHUB_REPO,
    githubEvent: 'pull_request',
  },
  async (event, app) => {
    const {
      pull_request: { requested_reviewers },
      pull_request: { html_url },
    } = event
    if (['opened', 'reopened'].includes(event.action)) {
      const reviewers = requested_reviewers.map((reviewer) => reviewer)
      await messageHelper(reviewers, slackUsers, html_url)
    }
  }
)
```

_Note: For more information on the parameters of postMessage check the [docs](https://github.com/reshufflehq/reshuffle-slack-connector#postMessage)._

With that, we’re finished, any time a pull requests is created with reviewers, they are directly messaged.

As a bonus, if the reviewers forget about the pull request, we can use the Cron Connector as a scheduler to check for any open PRs on the repository and message the reviewers.

```javascript
cronConnector.on({ expression: '0 12 * * 3 *' }, async (event, app) => {
  const { data } = await githubConnector.sdk().pulls.list({
    owner: process.env.GITHUB_OWNER,
    repo: process.env.GITHUB_REPO,
    state: 'open',
  })
  data.forEach(async ({ html_url, requested_reviewers: reviewers }) => {
    await messageHelper(reviewers, slackUsers, html_url, true)
  })
})
```

This example provides a good starting point to how you can easily create a custom workflow for your team's needs using Reshuffle.

## Now, Make it Happen

As your developers and project management teams experience the ease of working with integrated applications, we encourage you to consider where else integrating workflows would benefit your teams. With so many different tools, the more you can consolidate them into one common interface, the easier people can get work done.

Reshuffle is continually listening to what our customers need and desire. Don't see a Connector to a service you'd like to integrate? Send a tweet to [@ReshuffleHQ](https://twitter.com/reshufflehq) to let us know which Connector you'd like us to develop next.


Recurring Jira tickets with Reshuffle


If you're using Jira and have projects with repeating tickets that need to be added monthly, weekly or even daily, you know it can require painstaking manual labor to administer to all relevant projects, using up valuable time instead of solving the bigger problems. You could spend an hour or more configuring a system to automate this or even pay for a plugin on Jira, but, there is an easier way of doing this...and it's free!
How? Simply use [Reshuffle](https://www.reshuffle.com/) connectors to easily create the integration.

## How to Build It

Reshuffle makes it easy to build integrations that complete complex tasks, so you can deliver unique experiences and outcomes for the business and for customers.
<<<<<<< Updated upstream
Reshuffle is an open source, lightweight, and event-driven framework that helps you integrate services — these integrations and workflows are created inside a Reshuffle App. The objects that let you interact with these services are called [connectors](https://www.reshuffle.com/docs/connectors).
=======
Reshuffle is an open source, lightweight, and event-driven framework that helps you integrate services — these integrations and workflows are created inside a Reshuffle App. The objects that let you interact with these services are called [connectors](https://reshuffle.com/docs/connectors).

> > > > > > > Stashed changes
> > > > > > > Imagine you want a recurring issue to remind you to check npm dependencies every week. Creating the issue manually can become tiresome. In this example, you'll see how simple it is to use the Cron connector as a scheduler to automate the creation of recurring Jira tickets every predefined period of time.
> > > > > > > See links for full documentation:
> > > > > > > [Reshuffle](https://github.com/reshufflehq/reshuffle)
> > > > > > > [Atlassian Jira Connector](https://github.com/reshufflehq/reshuffle-jira-connector)
> > > > > > > [Cron Connector](https://github.com/reshufflehq/reshuffle/blob/master/doc/CronConnector.md)

```javascript
const app = new Reshuffle()
const jira = new JiraConnector(app, {
  host: process.env.HOST, // Your Jira instance url
  protocol: process.env.JIRA_PROTOCOL, // 'http' or 'https'
  username: process.env.JIRA_USERNAME, // username or email
  password: process.env.JIRA_TOKEN,
  baseURL: process.env.RUNTIME_BASE_URL,
})
const cronConnector = new CronConnector(app)
```

Now that we have the connectors configured, we need to find the project and issue type IDs using the Jira Connector actions. These IDs will be used later on to create the new ticket.

```javascript
const project = await jira.sdk().getProject('YOUR PROJECT NAME')
const { id: projectId, issueTypeId = project.issueTypes[0].id } = project
//issueTypes[0] are regular tasks on jira
```

Next, we'll create a function to check if the recurring ticket already exists on the board. This will ensure that there won't be any duplicates created.

```javascript
const checkIssues = async () => {
  const boardIssues = await jira.sdk().getIssuesForBoard(1)
  for (const issue of boardIssues.issues) {
    const { fields } = issue
    if (
      fields.summary === 'CHECK NPM DEPENDENCIES' &&
      fields.status.name !== 'Done'
    ) {
      return true
    } else {
      continue
    }
  }
  return false
}
```

Reshuffle is an events-based system, and you develop code to handle these events. The cron connector can be used to fire an event every "x" amount of time, which lets us check the issues periodically. If you're unfamiliar with these expressions, visit [crontab.guru](https://crontab.guru/) to help generate one.

```javascript
//this expression is set to every minute, just to see if everything is working properly
cronConnector.on({ expression: '1 * * * * *' }, async (event, app) => {
  const foundIssue = await checkIssues()
  if (!foundIssue) {
    const recurringIssue = {
      fields: {
        project: { id: projectId },
        issuetype: { id: issueTypeId },
        summary: 'CHECK NPM DEPENDENCIES',
        description: 'Recurring Issue - Every 1 minute',
      },
    }
    await jira.sdk().addNewIssue(recurringIssue)
    console.log('Issue created')
  } else {
    console.log('Issue already exists')
  }
})
```

Inside the event handler, we use the function created earlier to check if the task already exists. If it doesn't, we create a new one using the Jira connector action.
Lastly, let's initiate the integration by starting the Reshuffle App:

```javascript
app.start()
```

See how easy it is? You can do this so quickly and really make it much easier to automate recurring Jira tickets without having to pay for plugins or searching through the community boards for hour-long solutions.

## Now, Make it Happen

As your developers and project management teams experience the ease of working with integrated applications, we encourage you to consider where else integrating workflows would benefit your teams. With so many different tools, the more you can consolidate them into one common interface, the easier people can get work done.

Reshuffle is continually listening to what our customers need and desire. Don't see a Connector to a service you'd like to integrate? Send a tweet to [@ReshuffleHQ](https://twitter.com/reshufflehq) to let us know which Connector you'd like us to develop next.


Wix External Collections With Reshuffle


### Introduction

[Wix](https://www.wix.com) is a great service that lets you develop your website quickly and securely. It provides a large arsenal of widgets and capabilities to make life easy and shorten development cycles.

The system is so good that businesses all over the world have developed their entire IT infrastructure on top of it - including content management systems, CRMs, and even online shopping and fulfillment.

Most of these capabilities store their data in a database, and while Wix offers [data storage](https://support.wix.com/en/article/about-the-content-manager-7160473) as an integrated part of its platform, this may not be the perfect solution in some cases.

Imagine, for example, that you have an existing database you’d like to use. Or perhaps your data has to be stored at a specific location, for legal reasons, regulatory, security, or privacy. How would you achieve that?

To address this need, Wix came up with the concept of [external database collections](https://www.wix.com/corvid/reference/spis/external-database-collections).

As the name suggests, these are data stores external to Wix. You can configure your Wix website to use such an external data source to store and retrieve data.

In this article, we will use Wix and [Reshuffle](https://reshuffle.com) to connect an external database to your Wix website.

The code demonstrated in this article can be found on our [Github Repository](https://github.com/reshufflehq/wix-external-collection).

### Under the hood

#### Wix Side

To connect your Wix website to an external collection, you’ll need some understanding of [Wix’s SPI](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/introduction) - which is the specification describing how Wix connects to external collections. The gist of it is:

1. You provide Wix with connection details (an HTTP endpoint to hit)
1. Wix connects to your external collection using the connection details
1. Wix uses a set of predefined HTTP calls to exchange data with the external collection

#### Reshuffle Side

To connect Reshuffle to Wix, you’ll need to use [Reshuffle’s Wix connector](https://www.npmjs.com/package/reshuffle-wix-connector). The connector exposes the HTTP endpoint Wix requires to connect to the external collection (your data source).

The connector’s job is to convert the requests coming from Wix into events on the Reshuffle system. All that’s left is to develop the handlers (javascript code) to handle these events.

### Hike List: Our Sample Application

The following is a Hike List example, which demonstrates the integration of Wix, Reshuffle, and a Postgres database.

The Hike List application is used to manage a list of hikes we want to complete in New Zealand. For each hike, the application will store the following details:

1. Name
1. Distance
1. Date completed

**Wix** provides a web-based user interface to manage the data.
**Postgres** provides a data store.
**Reshuffle** provides the means to connect the two systems.

#### Step 1: Create the hike table:

The following SQL code can be used to create the table for this example:

```sql
CREATE TABLE IF NOT EXISTS hike (
  _id character varying(36) COLLATE pg_catalog."default",
  _owner character varying(36) COLLATE pg_catalog."default",
  name character varying(200) COLLATE pg_catalog."default",
  distance numeric(6,2) COLLATE pg_catalog."default",
  completed_date timestamp without time zone
);
```

By the end of this article, we will want Wix to create items in this database. Therefore, we will define the id and owner fields as 36 characters each. This matches the [schema](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/introduction) for the auto-generated Wix item ids and owners.

#### Step 2: Configure Reshuffle and the Reshuffle Wix Connector

```javascript
const { Reshuffle } = require('reshuffle')
// Add the required connectors #1
const {
  WixConnector,
  parseFilter,
  wrapDates,
  unwrapDates,
} = require('reshuffle-wix-connector')
const { PgsqlConnector } = require('reshuffle-pgsql-connector')

const app = new Reshuffle()
// Configure a secret 'API key' for Wix #2
const wix = new WixConnector(app, {
  secret: 'tunnel',
})
// Connect Reshuffle to Postgres #3
const pg = new PgsqlConnector(app, {
  url: process.env.WIX_DB_URL,
})

// -------------------------------------
// Code listed further down the
// article is inserted here ---
// --------------------------------------

app.start()
```

The previous code is only a few lines long, but it sets up the plumbing we need to create a link between Wix and the database.

**Comments in code:**

1. Reshuffle is a framework that uses connectors in order to standardize the programming paradigm across diversified systems. In this code, we use connectors for Wix and PostgreSQL. Both are available as Reshuffle npm packages.
   You’ll notice we also get some functions from the Wix connector. They will be used later on.

1. When configuring Wix to use an external collection, you can provide a ‘secret key’ to pass along to your application. This is a means of securing the tunnel (alongside other attributes listed [here](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/authentication)). Reshuffle’s Wix connector expects each request to provide a secret inside the settings object it contains (See Step 3 below for details of Wix-side configuration).
   The Wix connector also accepts an optional parameter to define the path it listens to (and exposes as the endpoint to Wix itself). The default path is /webhooks/wix.

1. Reshuffle’s Postgres connector requires only a database URL. It abstracts a connection to the database provided. If the database runs on your localhost, the url will resemble this:

```http
postgresql://my_username:my_password@localhost/my_database
```

#### Step 3: Configuring the External Collection on Wix

Head over to Wix to create a new external collection. You’ll need to navigate into your site editor and click on the databases icon from the left-sidebar and then click on the small + icon next to ‘content collections’ to add an external collection.

![Add external collection on Wix](/wix1)

You’ll need to enter the following details into the configuration pop-up:

1. A name for your collection
1. The endpoint url - this is your Reshuffle’s runtime URL, with the Wix’s webhook path appended to it. In our example above, we left the webhook path to the default, and it will hence be /webhooks/wix.
1. The secret ‘API key’ to use in order to authenticate to the Wix connector. This needs to be the same key and value pair configured when the connector is instantiated.

![Configure external collection on Wix](/wix2.png)

If you click Add right now, Wix will complain:

![Wix error message: No connection](/wix3.png)

This is because the code we currently have does not comply with the specification. Remember - it only sets the plumbing to create the link between Wix and your database. It doesn’t really do anything. Yet.

#### Step 4: Implementing Wix SPI Requirements

Wix SPI is the specification detailing how Wix communicates with external collections. It is a database-agnostic specification, which the provider of an external collection needs to implement.

So far we saw how Reshuffle uses connectors to connect to various systems. Connectors in Reshuffle provide events and actions to let the developer program the flows and integrations they need.

Connectors trigger events when something of interest occurs in the external system they connect to. They also expose actions to let the developer make requests to these systems.

Viewing Reshuffle as an event-based system allows us, as developers, to focus on the business logic we need to address specific events.

The Wix connector listens to HTTP Post requests arriving from Wix and exposes all of them as events. The list of requests Wix expects an external collection endpoint to serve can be found in the [documentation](https://www.wix.com/corvid/reference/spis/external-database-collections).

Let’s begin by writing scripts to respond to the six mandatory requests:

```javascript
// - Code to be inserted just before app.start()

const COLLECTION = 'hike'

// #1
const HIKE_SCHEMA = '..'

// #2
wix.on({ action: 'provision' }, async (event, app) => {
   event.response.sendStatus(200)
 }
)

// #3
wix.on({ action: 'schemas/list'}, async (event, app) => {
 event.response.status(200).json(HIKE_SCHEMA)
})

// #4
wix.on({ action: 'schemas/find' }, async (event, app) => {
 if (event.request.body.schemaIds.includes(COLLECTION)) {
   event.response.status(200).json(HIKE_SCHEMA)
 }
})

// #5
wix.on({ action: 'data/count' }, async (event, app) => {
 const { collectionName, filter } = event.request.body
 if (collectionName === COLLECTION) {
   const _filter = parseFilter(filter)
   const hikes = await pg.query(`SELECT * from ${COLLECTION} ${_filter}`)
   event.response.status(200).json({ totalCount: hikes.rowCount })
 }
})

// #6
wix.on({ action: 'data/find' }, async (event, app) => {
 const { collectionName, sort, filter, limit, skip } = event
 const _filter = parseFilter(filter)
 if (collectionName === COLLECTION) {
   const _limit = limit ? 'LIMIT ' + limit : ''
   const _skip = skip ? 'OFFSET  ' + skip : ''
   const _sort = sort ? `ORDER BY ${sort[0].fieldName} ${sort[0].direction}` : ''
   const hikes = await pg.query(`SELECT * from ${COLLECTION} ${_filter} ${sort} ${_limit} ${_skip}`)

   // #7
   const items = hikes.rows.map(hike =>
    wrapDates(convertItem(hike))
   )
   event.response.status(200)
     .json({items, totalCount: hikes.rowCount })
   }
})

// #8
wix.on({ action: 'data/get' }, async (event, app) => {
 const { collectionName, itemId } = event.request.body
 if (collectionName === COLLECTION) {
   const res = await pg.query(`SELECT * from ${COLLECTION} where id = '${itemId}';`)
   if (res.rowCount == 1)
     event.response.status(200).json({ item: wrapDates(res.rows[0])
  }
})

// A helper method to convert item from PG connector's data to the
// schema Wix expects
const convertItem = (i) => i.distance ? Number(i.distance) : i
// ... This is where we get back to the code in the first listing -
app.start()
```

**Comments in code:**

1. Wix expects a [schema description](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/schema/list-available-schemas) here. It is too long to insert here, but you can head over to the [GitHub repository](https://github.com/reshufflehq/wix-external-collection) of this article to view the schema for the table created in Step 1.

1. This is the handler we use for the [provision](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/provisioning/provisioning-overview) call. With other implementations, you may want to ensure that you can reach the database and that the relevant table exists. But for brevity’s sake - we just return a 200 Http Status here, signaling to Wix that the database is provisioned and ready.

You’ll note that the event object received by the handler (which is the piece of code a developer writes to handle an event) contains the HTTP response object - which is required because you’ll want to use it to return to Wix.

1. This is [the call Wix makes](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/schema/list-available-schemas) to figure out what schemas the external collection exposes. As we only have one table, return the schema itself.

1. The [find schemas](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/schema/find-schemas) call is only interested in specific schemas. It lists these schemas on the HTTP request body (which, like the response object, is found on the event itself).
   When constructing the response - the code first tests whether the Hike schema was requested, and will only return it when asked.

1. The [count](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/data/count) call is used to, well, return the count of items in the external collection. If a filter is provided - the result will reflect that and only count items matching the filter.

_Note: The filter provided by Wix is database agnostic. When using Postgres, the filter needs to be translated into a SELECT statement. This is achieved by the parseFilter function provided by the Wix Connector._

1. The [find items](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/data/find-items) call is used by Wix to retrieve a number of items from the external collection. The request may apply a filter and may use limit and skip to request a specific page of results.
   Note that [Wix expects dates to be wrapped in a specific way](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/introduction) - we can use the wrapDates function from the Wix Connector to achieve that.

1. Because the data returned from the PG connector is pure json, we will need to convert some fields. In this case - we only convert the numeric field ‘distance’ to a Number, as per the schema we provide Wix.

1. The last mandatory call is the [get item](https://www.wix.com/corvid/reference/spis/external-database-collections/external-database-collections/data/get-item) call. Wix uses this to retrieve an item by id from a specific collection. Note that, again, we use wrapDates to ensure Wix receives date objects in the format it likes.

General note: Error handling code was stripped away to keep the listing brief. The full code can be found on [Github](https://github.com/reshufflehq/wix-external-collection).

### Halfway Recap

If you only want Wix to display your data, then that is really all you need.

To test this out, you’ll need your Reshuffle instance running with the code above, and you need Wix to be able to POST to it through an HTTPS endpoint (See [here](https://theboroer.github.io/localtunnel-www/) or [here](https://ngrok.com/) for how to expose your localhost over SSL if you need to).

Once you provide Wix with the public endpoint (as described in step 3 above), Wix will make a series of calls and create a rudimentary (but powerful!) Data viewing grid. If you insert some data into your hike table and refresh the Wix page - you’ll see your data inside this grid:

![Wix displaying our hikes data in a grid](/wix4.png)

Notice the ‘read-only’ tag near the collection name at the top of the screenshot above. This is due to the `allowedOperations` entry in our schema:

```javascript
const HIKE_SCHEMA = {
 "schemas": [
 {
   "displayName": "hike",
   "id": "hike",
   "allowedOperations": [
     "get",
     "find",
     "count"
   ],

```

#### Step 5: Closing the loop

So far we only saw how to let Wix read your external collection. We will now close the loop and develop the code that allows Wix to create, update, and remove items as well. We will need to implement three more actions, to insert, update, and delete items.

To start with, you’ll need to add these operations to the `HIKE_SCHEMA` above:

```javascript
const HIKE_SCHEMA = {
 "schemas": [
 {
   "displayName": "hike",
   "id": "hike",
   "allowedOperations": [
     "get",
     "find",
     "count",
     "update",
     "insert",
     "remove"
   ],
```

This will tell Wix that your external collection allows for more operations.

The code that deals with inserting, updating and deleting an item from the database can be found in the [Github repository](https://github.com/reshufflehq/wix-external-collection) and follows the same logic as the code we have already seen.

It is worth explaining the logic behind converting between the json Wix produces and expects - and the SQL used.

```javascript
const hikeFields = () =>
  Object.keys(
    HIKE_SCHEMA.schemas.find((s) => s.displayName === COLLECTION).fields
  ) // #1

// #2
const createUpdateSQL = (item) => {
  const fieldsInSchema = hikeFields()
  delete fieldsInSchema._id
  return Object.keys(item)
    .filter((i) => fieldsInSchema.includes(i))
    .map((k) => `${k} = ${getValue(item, k)}`)
    .join(', ')
}

// #3
const getValue = (item, k) => {
  switch (
    HIKE_SCHEMA.schemas.find((s) => s.displayName === COLLECTION).fields[k].type
  ) {
    case 'datetime':
      return item[k] == null ? null : `'${item[k]}'`
    case 'text':
      return `'${item[k]}'`
    case 'number':
      return Number(item[k])
  }
}
```

**Comments in code:**

1. Wix sends extra fields when it creates or updates an item. Namely, these are the **\_createdDate** and **\_updatedDate** fields. These are not listed in the documentation but are found as Hidden Fields in the User Interface automatically generated by Wix:

![Wix hidden fields display](/wix5.png)

Extracting the names of the fields from the schema ensures that we only deal with the fields we expose in the database. This lets us write concise code (as can be seen in #2 below)

1. When updating the table, we are interested in all fields that are defined in the schema, sans the \_id field (as we would not like to update the \_id field itself under any case).
   This code creates a valid SQL Update command, by filtering the fields sent from Wix to only use the fields that our database actually provides. By limiting the fields to those exposed by the schema - the code can use filter() and map() rather than address each field individually.

1. In SQL, numeric values should appear as-is, text values should have quotes surrounding them, and date values should be either null or quoted. The getValue function deals with that.

### Conclusion

The article and the accompanying [Github repository](https://github.com/reshufflehq/wix-external-collection) provide a good starting point for using Reshuffle to connect a data store of any kind to Wix.
Using Reshuffle’s Wix connector and the events it exposes, allows you to connect Wix to any external data source you control. This can be a database or Redis, but even a file system or a different service altogether.


Automatically Connect Jira Tickets to Google Sheets


If you’re using Jira, you know how it is to juggle dozens, if not hundreds, of tickets. Notifications pile up and tracking every new ticket gets complex, to say the least. Generating reports, and providing ongoing visibility for people who do not use Jira every day is also a big pain.

Well, if your company is using Google Sheets for reports and tracking, you can integrate Jira to it and set it up so that anytime a new Jira ticket is created, it will automatically update a Google spreadsheet. Now, all your Jira tickets will be in one easy to view spreadsheet and you can manage them in one place!

How? Simply use [Reshuffle](https://www.reshuffle.com/) connectors to easily create the integration.

In this article, you will learn how to build a Jira to Google spreadsheet integration that lets people keep track of Jira tickets using an interface they’re already familiar with.

## How to Build It

Reshuffle makes it easy to build integrations that complete complex tasks, so you can deliver unique experiences and outcomes for the business and for customers.

Reshuffle is an open source, lightweight, and event-driven framework that helps you integrate services — these integrations and workflows are created inside a Reshuffle App. The objects that let you interact with these services are called connectors.

In this example, you'll see a simple way to create a two way sync between Jira and Google Sheets. New issues created on Jira will add a new row to the spreadsheet containing the basic fields from the Jira issue. In turn, updates from the Google spreadsheet will also update the issue on Jira's end.

See links for full documentation:

- [Atlassian Jira Connector](https://github.com/reshufflehq/reshuffle-jira-connector)
- [Google Sheets Connector](https://github.com/reshufflehq/reshuffle-google-connectors/blob/master/doc/GoogleSheetsConnector.md)

Let's get started by instantiating a Reshuffle app and the two connectors listed above.

```javascript
const app = new Reshuffle()
// Jira Config
const jira = new JiraConnector(app, {
  host: process.env.JIRA_HOST,
  protocol: process.env.JIRA_PROTOCOL, // 'http' or 'https'
  username: process.env.JIRA_USERNAME, // username or email
  password: process.env.JIRA_TOKEN,
  baseURL: process.env.RUNTIME_BASE_URL,
})

// Google Sheets Config
const googleSheets = new GoogleSheetsConnector(app, {
  credentials: {
    client_email: process.env.GOOGLE_CLIENT_EMAIL,
    private_key: process.env.GOOGLE_PRIVATE_KEY.replace(/\\n/g, '\n'),
  },
  sheetsId: process.env.GOOGLE_SHEET_ID,
})
```

Now that we have the connectors configured, we need to define the event we want to listen to, using the connectors on() method. For Jira, we will be listening to any new issues created. We will extract the issue's id, summary, description and status. We will then use the Google Sheets Connector to add these fields to our spreadsheet.

```javascript
jira.on({ jiraEvent: 'jira:issue_created' }, async (event, app) => {
  //Extract Jira fields from event
  const {
    id,
    fields: {
      summary,
      description,
      status: { name },
    },
  } = event.issue

  //Use google sheets connector to add these fields as a row in the spreadsheet
  const sheetId = 0
  const values = [
    id,
    summary,
    description,
    name,
    event.issue.fields.assignee
      ? event.issue.fields.assignee.displayName
      : 'Not Assigned',
  ]
  await googleSheets.addRow(sheetId, values)
})
```

![JiraGif](https://media.giphy.com/media/L1uGNIwtwnet0nGK1A/giphy.gif)

The next step is turning this example into a two way sync. To achieve that, we will set up a second event to listen to with the Google Sheets Connector. The connector will listen to changes made to the spreadsheet and allow us to process them.

Notice the empty `{}`, no need to give it options but see [documentation](https://github.com/reshufflehq/reshuffle-google-connectors/blob/master/doc/GoogleSheetsConnector.md) for all that are available.

Inside of the handler, we will only process the changes made to an existing row. We can extract the previous and current row inputs to compare later on.

```javascript
googleSheets.on({}, async (event, app) => {
  if (event.worksheetsChanged[0] && event.worksheetsChanged[0].rowsChanged[0]) {
    const { curr, prev } = event.worksheetsChanged[0].rowsChanged[0]

    //additional code to follow
  }
})
```

To keep track of the changes, we’re using an object to store the summary and description fields. Updating the status field will require more work, so we will need to find the transition IDs using a separate Jira connector action.

```javascript
// continuing from the code above
let updates = { fields: {} }
// Find transition Ids
let transitionId = {}
const { transitions } = await jira.sdk().listTransitions(curr['Issue ID'])
for (const status of transitions) {
  if (!transitionId[status.name]) {
    transitionId[status.name] = status.id
  }
}
// additional code to follow
```

We can now iterate through the inputs and check if anything has changed by comparing the values.

```javascript
for (const key in prev) {
  //skipping assignee and issue id fields in this example
  if (prev[key] !== curr[key]) {
    if (key === 'Assignee' || key === 'Issue ID') {
      continue
    }
    if (curr[key] in transitionId) {
      transitionId = { id: transitionId[curr[key]] }
      await jira.sdk().transitionIssue(curr['Issue ID'], {
        transition: {
          id: transitionId.id,
        },
      })
    } else {
      updates = {
        fields: { ...updates.fields, [[key.toLowerCase()]]: curr[key] },
      }
    }
  }
}
// updates description/summary field
await jira.sdk().updateIssue(curr['Issue ID'], updates)
```

Lastly, let's initiate the integration by starting the Reshuffle App:

```javascript
app.start()
```

See how easy it is? You can do this so quickly and really make it much easier to track new Jira tickets in Google Sheets bidirectionally. Check out the video demo to see it in action!

<iframe width="600" height="315" src="https://www.youtube.com/embed/M89i4lVPzbg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Now, Make it Happen

As your developers and project management teams experience the ease of working with integrated applications, we encourage you to consider where else integrating workflows would benefit your teams. With so many different tools, the more you can consolidate them into one common interface, the easier people can get work done.

Reshuffle is continually listening to what our customers need and desire. Don't see a Connector to a service you'd like to integrate? Send a tweet to [@ReshuffleHQ](https://twitter.com/reshufflehq) to let us know which Connector you'd like us to develop next.


Retrieve a Movie's Official Poster


You know the name of your favorite movie, so how cool would it be to be able to retrieve any official movie poster just based on the movie’s title? While this may be a personal fun project for you and your friends, you also might be in a business where retrieving an image based on an associated name may be helpful — let’s say in marketing, you want to call up the product image by just using the product name. With [Reshuffle open source integration framework](https://reshuffle.com/), you can easily do this by setting up an API endpoint to retrieve the image, or as in our example below, the movie poster.

In this example, you’ll see how easy it is to integrate multiple services with Reshuffle, so you don't have to spend valuable development time configuring them. These integrations and workflows are created inside a Reshuffle App. The objects that let you interact with these services are called Connectors.

## How to Build It

This is a two-stage process. The code first uses Reshuffle's Entertainment Identifier Registry (EIDR) connector to resolve the movie name into a standardized movie ID. It then uses the Movies Anywhere API to look up the official movie poster image with the given ID.

See links for full documentation:

- [Example Repo](https://github.com/reshufflehq/reshuffle-movieposter-example)
- [HTTP Connector](https://github.com/reshufflehq/reshuffle/blob/master/doc/HttpConnector.md)
- [EIDR Connector](https://github.com/reshufflehq/reshuffle-eidr-connector)
- [Movies Anywhere Connector](https://github.com/reshufflehq/reshuffle-moviesanywhere-connector)

Let's get started by instantiating a Reshuffle app and the three connectors listed above.

```javascript
// Initialize the Reshuffle application and connectors
const app = new Reshuffle()
const eidr = new EIDRConnector(app)
const http = new HttpConnector(app)
const ma = new MoviesAnywhereConnector(app)
```

Using the `on()` method of the HTTP Connector, we will be listening to an HTTP GET request on the "/" path. Inside Reshuffle, the request is transformed into an event.

```javascript
http.on({ method: "GET", path: "/" }, async ({ req, res }) => {
  // Get the movie name from the query string
  const name = req.query.name;
  if (typeof name !== "string" || name.trim().length === 0) {
    return res.status(400).send(`Invalid movie name: ${name}`);
  }
  const nm = name.trim();

  // Get the image width from the query string, or default to 400
  const width = req.query.width || 400;
  const wd = typeof width === "string" ? parseInt(width, 10) : width;
  if (typeof wd !== "number" || isNaN(wd) || wd <= 1 || 8192 < wd) {
    return res.status(400).send(`Invalid width: ${wd}`);
  }
```

Moving forward with a valid movie name, we will use the EIDR connector with its `simpleQuery` method to resolve the provided name into an EIDR ID.

- For more information regarding the object passed to `simpleQuery`, please take a look at the [readme](https://github.com/reshufflehq/reshuffle-eidr-connector#query)

```javascript
// The following blocks of code will follow directly after the previous, until it reaches the final `});`
// Lookup the movie name in EIDR. If the movie is found, we get back a unique ID
const movies = await eidr.simpleQuery({
  name: nm,
  movie: true,
  valid: true,
  StructuralType: 'Performance',
})
if (movies.length < 1) {
  return res.status(404).send(`Movie not found: ${nm}`)
}
const id = movies[0].ID
// The movies array may contain multiple objects that reference the same movie, but with a different EIDR ID, we take [0] since they will all point to the same title.
```

If the query doesn't find a match with the provided movie name, it will be resolved into an empty array, there is a conditional block here to handle this case.

When the query passes the check above, we move on to where we will use the EIDR ID along with the Movies Anywhere connector. Keep in mind, not all movies are part of the Movies Anywhere service, so some may be resolved into undefined.

```javascript
// Lookup the movie ID in Movies Anywhere. Movies Anywhere's title service
// provides metadata for movies, including a URL for the poster image
const title = await ma.getTitleByEIDR(id)
if (!title) {
  return res.status(404).send(`Movie not found: ${nm}`)
}
```

Now that we have found the movie with the EIDR ID, we will create a url with the object resolved and return the image in the HTTP response.

```javascript
  // Fetch the image
  const url = `https:${title.boxart}.jpg?w=${Math.round(wd)}`;
  const rs = await fetch(url);
  if (rs.status !== 200) {
    return res.status(500).send(`Unable to load poster image: ${nm}`);
  }
  // Return the image in the HTTP response
  const blob = await rs.blob();
  return res
    .set({ "Content-Type": blob.type, "Content-Length": blob.size })
    .send(Buffer.from(await blob.arrayBuffer()));

//end
});
```

Lastly, we need to start the Reshuffle App.

```javascript
app.start(8000)
```

## Try it out

If you copied the code from the [repo](https://github.com/reshufflehq/reshuffle-movieposter-example), install the example and start the Reshuffle server:

```javascript
npm install reshuffle-movieposter-example
npm run start
```

This will start a web server at local port 8000. Then point your browser to the local URL (http://localhost:8000/?name=superman) to see the poster frame.

It should look like this:

![Result](https://i.imgur.com/Egufhfz.jpg)

Try different movie names, but be aware that not all movies are part of the Movies Anywhere service, so some may not resolve into a poster image.

## Now, Make it Happen

As your developers and project management teams experience the ease of working with integrated applications, we encourage you to consider where else integrating workflows would benefit your teams. With so many different tools, the more you can consolidate them into one common interface, the easier people can get work done.

Reshuffle is continually listening to what our customers need and desire. Don't see a Connector to a service you'd like to integrate? Send a tweet to [@ReshuffleHQ](https://twitter.com/reshufflehq) to let us know which Connector you'd like us to develop next.


Tracking Twitter mentions with Monday.com


Monitoring social media mentions is an essential part of any business. It gives brands an opportunity to track, analyze and respond to conversations about them on social media. In this quick tutorial, I will show you an example how you can a setup a simple Twitter mentions tracker with Monday.com.

In this article we will be using Reshuffle's [open source integration framework](https://reshuffle.com/) to easily integrate Twitter and Monday services to meet your brands needs for social monitoring.

## How to Build It

Normal setup and configuration could take a while in order to get these services to work together. Reshuffle is an open source, lightweight, and event-driven framework that helps you build integrations that completes complex tasks.

These integrations and workflows are created inside a Reshuffle App. The objects that let you interact with these services are called connectors.

The first thing we need to do is to declare a Reshuffle App and a [Twitter connector](https://github.com/reshufflehq/reshuffle-twitter-connector) that will search for any @mentions or #hashtag passed in.

```javascript
const app = new Reshuffle()
const twitter = new TwitterConnector(app, {
  customerKey: process.env.TWITTER_CUSTOMER_KEY,
  customerSecret: process.env.TWITTER_CUSTOMER_SECRET,
})
```

To keep track of mentions, we will be pushing them onto a Monday board using the [Monday connector](https://github.com/reshufflehq/reshuffle-monday-connector).

```javascript
const monday = new MondayConnector(app, {
  token: process.env.MONDAY_TOKEN,
  baseURL: 'https://localhost:8000',
})
```

Now that we have the connectors declared, we can start using them.

First thing is to make a new board from your Monday dashboard. Get the board ID from the url (eg. new-board-name.monday.com/board/2193445), this will be used to get the board data like column IDs, item names etc. Make a new board with columns that look similar to this.

| Column     | Type      |
| ---------- | --------- |
| tweet      | Long-text |
| user       | Text      |
| created-at | Date      |

![Monday Board](https://i.imgur.com/yp1Rw4s.jpg)

```javascript
;(async () => {
  const boardItems = await monday.getBoardItems(BOARD_ID)

  for (let id in boardItems.items) {
    if (!tweetsCache[boardItems.items[id].name]) {
      tweetsCache[boardItems.items[id].name] = { fetched: true }
    }
  }
})().catch(console.error)
```

As you can see above, we use the `BOARD_ID` to fetch any items that is currently on the board using the `getBoardItems` method. For each of the row names, we will be using the Twitter IDs, as you will see later on. This function will run before any Twitter connector actions to prevent duplicate tweets from being saved onto the board.

With this duplicate check in place, we can move on with the Twitter connector.

We need to define the event to listen to using the Twitter connector's `on()` method. In this case, we will listen for search events.

```javascript
  twitter.on({ search: "@reshuffleHQ" }, async (event, app) => {
    for (const tweet of event.tweets) {
      if (!tweetsCache[tweet.id]) {
        tweetsCache[tweet.id] = {
          user: tweet.user.screen_name,
          date: tweet.created_at,
          tweet: tweet.text,
        };
        addNewItem(tweet)
      }
    }
```

We will get an array of tweets from the event object. You can see in the `if` block, we run a check on the object from earlier, to prevent duplicate tweets from being added onto the Monday board. If the tweet does not exist in the object, we can continue to adding a new row with the `addNewItem` function we will create.

```javascript
const createItems = async (tweetInfo) => {
  monday
    .getColumn(BOARD_ID)
    .then((res) => {
      return res.boards[0].columns.map(({ title }) => title)
    })
    .then(async (title) => {
      const testObj = {
        [title[1]]: () => tweetInfo.text,
        [title[2]]: () => tweetInfo.user.screen_name,
        [title[3]]: () =>
          new Date(Date.parse(tweetInfo.created_at))
            .toISOString()
            .split('T')[0],
      }

      const testQuery = await monday.createItem(
        BOARD_ID,
        JSON.stringify(tweetInfo.id),
        testObj
      )
    })
}
```

In this function, we will be using multiple methods from the Monday connector. First we use the `getColumn`, to get the titles of each column, then we create an object using the column titles as the key. Finally, we can pass it through to the `createItem` method to generate a row that will look something like this.

![Monday Board](https://i.imgur.com/ZeYphML.jpg)

Last but not least, let's initiate the integration by starting the Reshuffle App

```javascript
app.start()
```

With minimal code, Twitter mentions are easily tracked with the Monday board. Now its your turn to get creative! Find new solutions to monitoring social mentions, maybe extend this functionality by tracking the frequency of daily mentions.

## Now, Make it Happen

As your developers and project management teams experience the ease of working with integrated applications, we encourage you to consider where else integrating workflows would benefit your teams. With so many different tools, the more you can consolidate them into one common interface, the easier people can get work done.

Reshuffle is continually listening to what our customers need and desire. Don't see a Connector to a service you'd like to integrate? Send a tweet to [@ReshuffleHQ](https://twitter.com/reshufflehq) to let us know which Connector you'd like us to develop next.


Build an Email Workflow Integration for Your Website


Email forms on websites are great for gathering customer data and enabling customers to opt-in for registrations, marketing communication, waitlists, product demos, and more. If you don’t want to use a vendor to generate the email workflow, you can build a series of free integrations with Reshuffle Open Source to automate the process and improve customer experience. You’ll give your customers and prospects a fast, automated process that delivers what they expect of you.

Let’s say you want people to register for a product demo. You build an email form on a webpage, then you want people who register to automatically receive a response with access info to the demo, or perhaps a Calendly invite - if you’re doing live demos.

You can use Reshuffle Open Source connectors to integrate your email form, populate the customer data from the email into a spreadsheet, and automatically send an email response providing the customer with the demo information you want them to have.

Reshuffle’s [open-source integration framework](https://reshuffle.com/) makes this an easy process. In this article, you’ll learn how you can easily build a series of connections that link different services to create the experience you want your customers to have.

## How to Build It

Reshuffle makes it easy to build integrations that complete complex tasks, so you can deliver unique experiences and outcomes for the business and customers. Reshuffle is an open source, lightweight, and event-driven framework that helps you integrate services — these integrations and workflows are created inside a Reshuffle App. The objects that let you interact with these services are called [connectors](https://reshuffle.com/docs/connectors).

Here’s how you’d build the email workflow example above:

To get started, let's look at the workflow we want to create-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2gkxvcha7q2g686bziz3.png)

The first thing we need to do is to declare a [Reshuffle App](https://reshuffle.com/docs/intro-to-reshuffle) and configure the Connectors we will be using:

1. [HTTP Connector](https://reshuffle.com/docs/HttpConnector) that will be triggered when the user submits their email on the web.
2. [Google Sheets Connector](https://reshuffle.com/docs/GoogleSheetsConnector) to add the entry to our spreadsheet, and trigger sending the email.
3. [SMTP Connector](https://reshuffle.com/docs/SMTPConnector) to send the email with the Calendly setup to the user.

Here is the code:

```JavaScript
const app = new Reshuffle()

const httpConnector = new HttpConnector(app)

const googleSheetsConnector = new GoogleSheetsConnector(app, {
  credentials: {
    client_email: process.env.CLIENT_EMAIL,
    private_key: process.env.PRIVATE_KEY.replace(/\\n/g, "\n")
  },
  sheetsId: process.env.SHEET_ID
})

const smtpConnector = new SMTPConnector(app, {
   fromEmail: process.env.EMAIL_USER,
   fromName: 'Reshuffle Examples',
   host: process.env.EMAIL_SERVER,
   port: 587, //<smtp port number - usually 587>
   username: process.env.EMAIL_USER,
   password: process.env.EMAIL_PASS,
})
```

Now that we have all the connectors configured, let’s define what happens when the HTTP event comes from the form on the web page . We need to define the event we want to listen to using the HTTP connector `on()` method. In this case, we want to listen to an incoming POST HTTP event on the `apply-for-demo` path. We will then write handler code to extract the email and name from the POST request and use the Google Sheet connector to add these to our spreadsheet:

```JavaScript
httpConnector.on({ method: 'POST', path: '/apply-for-demo' }, (event, app) => {
   const name = event.req.body.name
   const email = event.req.body.email
   const sheetId = 0
   const values = [name, email]
   await googleSheetsConnector.addRow(sheetId, values)
}
```

Here is how the spreadsheet looks after the first entry is entered:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nhrkuzwvjoahbpqi6d2p.png)

The next step in the workflow is to send an email to the user that was added to the spreadsheet. For that we will use the `on()` method on the Google Sheets connector to add a handler for when a row is added to that spreadsheet. We will use the SMTP connector to send the email to the user:

```JavaScript
googleSheetsConnector.on({}, (event, app) => {
  const rows = await myGoogleSheetsConnector.getRows(sheetTitle)
  rows.forEach(async row => {
    if (!row.emailSent) {
      Row.emailSent = 'true'
      row.save()
      smtpConnector.send({
        to: row.email,
        subject: `Book your demo!`,
        text: `Thank you for your email! Book your demo here...`
      })

    }
  })
```

Lastly, let's initiate the integration by starting the Reshuffle App:

```JavaScript
app.start();
```

That’s it! With minimal code and an intuitive user interface for marketing staff (who love spreadsheets!), we have created a full workflow to get people signing up for your demo in no time.

Note that in real life, we would probably have some production safety precautions such as a “confirm_send” column so the marketing team can confirm that the email should be sent to the user.

## Now, Start Building

As you work with your sales, marketing, and customer experience colleagues, we encourage you to get creative in making email workflow integrations that drive better customer experiences and help differentiate your business in the marketplace.

Reshuffle is continually listening to what our customers need and desire. Don’t see a Connector to a service you’d like to integrate? Send a tweet to [@ReshuffleHQ](https://twitter.com/reshufflehq) to let us know which Connector you’d like us to develop next.


Build a SMS-Powered Survey System


Communicating with customers via SMS text messages is fast becoming part of a multi-channel customer experience — where people get to choose which channel they prefer to use when connecting with brands. SMS offers speed, accessibility, and the option to communicate privately without going on public social media channels.

Building a simple SMS integration, for example, an auto-responder for order confirmation, is easy. But what if you want to connect multiple services to generate a more interactive flow and do more than just send an outbound SMS to a customer? The solution can become complex, and fast.

We built [Reshuffle’s open source integration framework](https://reshuffle.com/) to simplify these types of integrations. In our post on Dev.to, we show you how easily you can build a series of connections that link different services to create a unique solution.

Read the tutorial on how to [build an SMS-powered survey system with Reshuffle open source](https://dev.to/ashevat/how-to-build-a-sms-powered-survey-system-with-reshuffle-open-source-566b).


Why we are building Reshuffle’s open source integration framework for developers.

Reshuffle's Mission


It’s 2020, and it is still hard to connect systems and build integrations. It is a big pain, and a challenge that is very common in many companies. The need for automation and a productive development environment is becoming even greater with more and more of our day-to-day work moving online.

With that in mind, we decided to focus our development platform, Reshuffle, to solve that challenge. We mapped several reasons why it’s so hard to build internal integrations:

1. Unlike web servers, where you have Express, Apache and other great web servers, there is no good open-source integration server.
2. While most code examples show you how to code in the public cloud, and how to connect to public SaaS services, we find that many developers need to run their workflows on their own cloud and connect to their own proprietary services.
3. Managing configuration and credentials for the 3rd party systems you want to connect is a big pain.
4. Different services provide their own unique APIs and SDKs, and do not provide a simple and standard way to program against.

So what if you had a development framework, at your fingertips, that has the following attributes:

- A standard, open-source, and event-driven framework (IFTTT as a framework)
- An easy way to set and share configuration and credentials
- Works on every cloud or just on your own machine
- Connects to many 3rd party services out of the box, but also lets you connect to others, or any homegrown services you desire.
- Enables you to innovate rather than deal with boilerplate.

Wouldn’t that be wonderful? That is what we are building.

[Help us by giving us feedback, and using Reshuffle to make your work life easier and better.](/docs/getting-started 'Get Started')
