Typeform x Meta API: Add magic to your team lunch

This article is a comment of the livestream video done with Nicolas Grenié from Typeform available here. You can use the chapters inside the video to access quickly the main steps on this Spell creation.

Building an automation for fun (and lunch)

We use a lot of automation to enhance our productivity or to build partnerships with other companies. APIs are the cornerstone of these business processes.

But these automations can also apply to less business oriented use-cases, perfect for learning more about APIs, Javascript, and connecting a bunch of services together.

Today’s topic is automating the selection of a restaurant for lunch based on user preferences within a team. This Spell will interact with Yelp (to get restaurant details), Typeform (to collect preferences), and Slack (to notify everyone when it’s time to vote and to announce the result).

Prerequisites

To follow along this tutorial you would need:

• A Meta-API account, create one for free over here
• A Typeform account, create one here
• A Slack workspace, create one here
• A Yelp API key, get yours here

Lunch Magic: technical breakdown

Part 1: Sending a form to users with restaurants

1. Get the restaurants from Yelp

Our first step is to get some restaurants from Yelp. Yelp’s API is free to use and works in many countries, so it’s a good fit for our use case.

Let’s start our code editor inside Meta API and add our first connector.

To add your click, click on the + Add a connector inside the left menu.

Then, select the right API and endpoint you’ll want to use and add it to your Spell.

We’ll generate for you a snippet of code to connect your code to your connector :

Once pasted, you’ll be able to customize all the connector’s settings inside the right panel :

Back to our use case: your code should look like this once you’ve added your Yelp connector:

These few lines of code will create a request to Yelp API (especially the /business/search endpoint) and retrieve the results.

All parameters (including authentication) can be set directly inside Meta API’s connector panel:

These parameters will change the results we’ll get in our restaurants variable, and they’ll be our data source for all the details we’ll need later.

Example of results from Yelp

2. Update the Typeform form template

Now that we’ve got a list of restaurants, we will generate a Typeform to let team members pick their favorite. We are using a simple template, where we ask respondents to rate each restaurant on a scale from 1 to 5.

Copy this template on your own account: https://admin.typeform.com/form/template/IWYM1AKI

We are going to re-use the same form over and over, we will just override it every day.

The first step will be to retrieve the current definition of the form and edit it with our restaurants’ results.

So let’s call the GET /forms/{form_id} endpoint on Typeform and edit it:

We retrieve the form definition from Typeform and edit it to replace the restaurants’ detail inside the template by our own results

We have more restaurants in our results than necessary, so we write a small randomizer function to pick random items.

We have more restaurants in our results than necessary, so we write a small randomizer function to pick random items.

Next, we’ll push these results to the Typeform form to update it with a new selection of restaurants:

Great, we now have a bunch of lines of code that will pick some restaurants from Yelp and update a Typeform form template with updated data.

3. Send a Slack notification

Now time to notify our users to vote!

But before, we need to be sure that all the previous responses from Typeform are cleared since we will reuse the same form each time.

Let’s call two endpoints on Typeform for that:

• The first one to get all the previous answers to get the responses’ id
• The second one to ask the API to delete all these responses

Two connectors call to retrieve the form’s previous answers and to delete them

You can notice that we are doing a one-line transformation, to convert an array of responses into a string of IDs, separated by a comma.

The link between the responses_id string and the connector is done directly inside the connector’s configuration panel

Binding a variable directly from the code to an API parameter

Indeed, we can bind a variable to an API parameter. That make dynamic Spells very easy to write.

Now we are sure that all our form is empty of previous answers and ready to use, let’s send a Slack message with a link to the form:

We are ready to collect all our team’s preferences for today lunch 😋

Part 2: Collect all answers and announcing the result

One hour has passed, and it’s now time to collect the answers.

To keep our code clean and well organized, we’ll create a new Spell to collect the answers, process it and send the result.

That new Spell will also help us to have a dedicated Scheduler on it.

You can go back to your Meta API’s home page and click on Create a Spell to create a new Spell.

Like before, we’ll retrieve both form definition and results from Typeform to process them.

To process them, we first need to prepare the results we can expect for our users. Let’s prepare an object with all the restaurants and set the number of answers and ratings to 0.

Creating and formatting our object to process all the answers

It’s time to process the results. Since each user will rate each restaurant that will be proposed to him, we have to create a double loop to take into account all the results obtained.

Processing, for each user’s answers, their rating on each restaurant

The first loop is to enter a user form submission and, inside his answer, we’ll go through each restaurant.

For each restaurant, we’ll sum up his answer and his rating to calculate just after the average value.

We have all the answers: now we’ll determine the winner!

Loop over user’s rating to determine the winning restaurant

This loop will go through each restaurant, calculate the average rating given by all users and store it inside the winner variable if it’s the first one or if the rating is better than the stored one.

We have our winner, let’s announce it on Slack to everyone :

All the team know where they are going to lunch. Let’s grab our coat and enjoy this nice break!

Part 3: Wrap it up and automate for every-day use

Our automation is working well, and our development is now finished. We could now plan an automatic execution every day.

First, our Spell to prepare the Typeform’s form and send it to users.

We’ll use the Scheduler option to execute it every day at 10 am.

Then, we’ll plan our Spell to collect and announce the results for 12 am.

If we don’t want to notify users on week-end, we can use this custom cron expression to only notify users from Monday to Friday:

This cron expression will trigger a Spell: “At 12:00 on every day-of-week from Monday through Friday”

Conclusion

We turned our fun lunch location decision-making automation into a pro-grade automation, and we learned how to make APIs requests, process data, and orchestrate our automation to match a real-life use case.

A big thank you to Nicolas Grenié for hosting us on Typeform’s Hack Together, during which we had a great time creating this project.

If you want to try it yourself, you can create a free account on Meta API, follow these explanations or take advantage of our ready to use Open Spells.

To see us create and discuss this automation, check out our online video: