DEV Community: Nicolas Grenié

Collect Addresses on Typeform using Algolia Places

Nicolas Grenié — Wed, 06 May 2020 20:16:41 +0000

During the last weeks as the world was getting under lockdown, many small businesses had to close doors and put their activities on hold. This was actually a new beginning for many business owners, as they were looking for opportunities to continue running their shops while respecting government measures and social distances.

At Typeform we've seen many initiatives to help digitalize small businesses, by providing for example interfaces to take online orders or do deliveries. From farmers in the mountains of Chamonix to a bakery in Barcelona, all stores were facing similar issues and were looking for simple solutions.

Typeform lets you create easily a visual "menu" where customers can pick what they want to buy. Typeform then calculates the price automatically and displays a credit card payment field using Stripe. Overall it's a very seamless process until you reach the part where you have to ask your customer for their address and where you should deliver the goods.

In most cases, it's done by asking a group of questions. Usually, you ask first the street, then the postcode and finally the city. But when it comes to addresses it's hard to be consistent as there are so many ways to write it. Especially right now when this typeform is shared with people that are not tech-savvy. This means business owners have to spend countless hours going manually to every single order a check if the address was correctly filled.

Unfortunately, we currently don't have native support in Typeform's product for an autocomplete address field. But as a Developer Advocate, I don't take no for an answer!

There has to be a better way! And this is where hacker spirit kicks in!

Algolia has been maintaining since 2016 a library called Places, doing exactly what we need. It's based on data from OpenStreetMap, and do autosuggestion as you type.

In this article, I will show you how you can connect it to your Typeform and collect accurate addresses.

Try it live 📺

If you want to get a preview of what we are about to build, check it out here

Enter the address of your choice, and you should be redirected to a typeform to order some good pizzas 🍕

Pre-requisites 🛒

A Typeform account, create one for free here
An Algolia Places account, get one for free here

Add Algolia Places to your project 📍

The good thing about this hack? We don't need any server-side code!
Everything could happen in a plain HTML page with a bit of Javascript.

Let's start by loading the library on our page.
Adds this at the bottom of just before </body>

<script src="https://cdn.jsdelivr.net/npm/places.js@1.18.1"></script>

In our page, we then add an HTML element that will be the autocomplete field.

<input type="search" id="address-input" placeholder="Where do you live?" />

Then we have to initialize the library and connect it to this field.

Add this snippet at the end of your page

<script>
      var placesAutocomplete = places({
        appId: "YOUR_APP_ID",
        apiKey: "YOUR_API_KEY",
        container: document.querySelector("#address-input"),
        type: 'address'
      });
</script>

Replace YOUR_APP_ID and YOUR_API_KEY by the values given in Algolia dashboard.

💥You should now have a functioning autocomplete field. Open your HTML page and try it out.

Customize the library 🖌️

Right now, our example auto-suggests addresses all over the world, but the library is very flexible. If you add countries: ['us'] for example it will only show addresses in the US.

I recommend you to check the documentation to customize it the way you want 😉

Listen to changes 👂

What is happening when the user has selected their address? At the moment nothing, because we haven't coded this part.

To do that we add an event listener to the placesAutocomplete object we created earlier. The Algolia Places library has many events available, but we are only interested by the change event. This event will be triggered every time the address selected changes.

In your code add the following lines:

placesAutocomplete.on("change", e => {
 console.log(e.suggestion)
})

Now you can restart your app, type an address, and select it. In your browser developer console, you now see the details of what's returned by the library.

🤩 That's a lot of interesting data formatted exactly the way we need, but we may just need a subset of it.

Let's prepare your typeform 👩‍🎨

Now that you've seen the potential of this library, you may have a better understanding of which type of data you want to use in your typeform.

For this example, we are going to pass address, city, postcode and country value only. To pass the data from our code to the typeform we are going to rely on Hidden Fields. Hidden fields are a way to pass data to a typeform by adding query parameters to its URL.

Your original typeform URL was:
https://picsoung.typeform.com/to/FWq00K

It's now going to be https://picsoung.typeform.com/to/FWq00K?address=xxxx&postcode=xxxx&country&city=xxxx where xxxx is the value extracted thanks to Algolia Places.

Let's now add hidden fields to your typeform. Click + and select hidden fields. Hidden fields are sitting at the top of your form and you can add as many as you want. Only the parameters declared as hidden fields will be passed to the results. You can also use hidden fields in the conditional logic, for example, to showcase that you don't do deliveries in certain postcodes.

Make sure it works by opening the URL of your typeform with hidden fields values put manually. Once you've submitted the typeform, in the Results panel you should see that the values have been passed and recorded correctly.

Link our code to the typeform 🔗

Now that we have the two pieces working independently, let's connect them together!

Construct the URL of the form 🏗️

As we saw we need to append query parameters to our Typeform URL.
In our code, add this snippet and replace YOUR_TYPEFORM_URL with your own typeform URL.

let typeformURL = "YOUR_TYPEFORM_URL";
let hidden_values = {
  address: `${e.suggestion.value}`,
  postcode: `${e.suggestion.postcode}`,
  country: `${e.suggestion.country}`,
  city: `${e.suggestion.city}`
};
let hidden_query = Object.keys(hidden_values).map((key)=> `${key}=${hidden_values[key]}`).join('&')
let completeURL = `${typeformURL}?${hidden_query}`

We create a hidden_values object with all the parameters we get from Algolia Places.
We then turn this object into a string so it looks like country=France&city=Paris... using a bit of ES6 magic to store it in hidden_query variable.
completeURL is then the concatenation of our original URL and the hidden values.

We now have two options, either we redirect the user to our typeform, or we embed it in our page.

Redirect ↪️

Redirection is the easiest thing, just after the previous snippet add this line in your code:

window.location = completeURL

And that's it, you are now redirected to your form and location data are passed as hidden fields.

Embed 🖼️

To embed your typeform in your page we will use our Embed SDK.

First, let's add the Embed SDK at the bottom of your page.

<script src="https://embed.typeform.com/embed.js"></script>

In the <body> of your HTML page you need to add an HTML element where the form will be embedded.

<div id="typeform_embed" style="height: 900px;width: 100%;"></div>

Give it the size you want by modifying the height and width properties.

Now we need to embed the typeform when we receive the change event from the Algolia library.

Just after the line let completeURL ... add the following:

const embedElement = document.querySelector("#typeform_embed");
typeformEmbed.makeWidget(embedElement, `${completeURL}`,
  {
    hideHeaders: true,
    hideFooter: true,
    opacity: 75,
    buttonText: "Take the survey!",
    onSubmit: function() {
      console.log("Typeform successfully submitted");
    }
  }
);

This piece of code loads the typeform with all the parameters and place it in the object with id typeform_embed.

Typeform's Embed SDK has a lot of features and you can personalize many things on the look and feel of the embed, we just went for the easiest path.

Note, the onSubmit function, this will be triggered when the form is submitted. This could be useful to hide the form after being submitted, for example.

You should now have a typeform appearing on your page after selecting an address in the field. And if you change the address it will update the typeform URL and embed it again.

Going further 🚀

With this hack, you are now collecting sanitized addresses from your customers when they are filling up a typeform. 🎉

You can personalize the settings of the Algolia Places library to restrict to certain countries or to a different type of address. The library even supports searching for airports!

You can also pass other types of data as hidden fields to your form. Like the latitude or longitude.

With a bit of CSS you can modify the look and feel of the search box and make it your own.

On Typeform you can now add some logic jumps to react differently depending on the locations data collected in the hidden fields.

I hope you liked this hack and found it useful.
Feel free to suggest some other ideas ;)

The complete source code is available on Glitch

Typeform Handler - Extract phone number and call user

Nicolas Grenié — Thu, 30 Apr 2020 00:51:16 +0000

What I built

Category Submission: Engaging Engagements

A simple way to connect a typeform to Twilio, and call a user when the form is submitted.
A simple example good candidate for a code exchange code sample.

Demo Link

https://picsoung.typeform.com/to/VN616s

Link to Code

https://glitch.com/~tf-twilio

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Express app hosted on Glitch

Additional Resources/Info

Tutorial: Hacking a robot while respecting fundamental laws of robotics

Nicolas Grenié — Mon, 19 Aug 2019 18:43:45 +0000

This past week I got invited to attend Twilio Signal conference in San Francisco as part of their Champions program.

I had the chance to meet other awesome Champions at our Summit. You should all follow them, they are all doing amazing things in their communities all around the world. Find more about the Twilio Champions program over here.

The conference itself was full of great announcements around the Twilio eco-system. I am mostly excited by Conversations, as a way to connect many people uing different systems (SMS, WhatsApp, chat...) into the same conversation. The new Twilio CLI to do everything around Twilio directly in the terminal looks pretty awesome too.

Another big announcement at Signal was version 3 of TwilioQuest available on Desktop. If you are not familiar with TwilioQuest, imagine a video game where you gain XP points by solving coding challenges.
It's a fun way to learn about the Twilio world and programming in general.

Screenshot of TwilioQuest

The main character you interact within TwilioQuest, is named Cedric and is a friendly robot that is guiding you through your quest against the Legacy Systems.

The thing I did not realize: Cedric is real! He and his friends attended Signal too. They were so many roaming the expo floor and booths.

There even was a special Signal mission on TwilioQuest to earn XPs if you were spending some time with the team of Misty Robotics (parent company of the Misty robot, Cedric's robot family).

And this exactly what I did! I went over to meet the Misty Robotics team to learn more about those friendly robots🤖

The team was organizing Developers testing sessions, and inviting people to try their Hello World tutorial to "hack" the robot.

Misty is an incredible robot, among many things she has multiple sensors to move around your house without bumping into anything, a speaker to express herself, a screen to show some emotions, and a camera with face recognition capability. And all that is hackable through an SDK! 🎉

Isn't she lovely?

I had a lot of fun following the tutorial. I made Misty move, make her blink her light and even taught her to recognize me. At the end of the session, the team was handing out surveys to collect feedback. And as you may have already guessed it was a Typeform! 🤩

Then I had no option... I had to connect Misty to Typeform.

I wanted to make Misty react every time someone was filling up the survey.

Here is how I managed to connect the two.

Overall principle 📖

We rely on Typeform webhooks functionality to react immediately after someone answered.

The webhook is received by an app that can call the Misty API and make the robot react.

But to be able to communicate with the Misty robot, your app needs to be on the same WIFI network, so it's most likely that you will run it locally on your laptop.

We will use ngrok to expose localhost to the world 🌍.

Make the Misty move her arm

We create a small express app with only one endpoint in a file named app.js. This endpoint will receive webhook notification and then call Misty API.

This is how it looks:

const express = require('express')
const app = express()
const port = 3000

const axios = require('axios')
const bodyParser = require('body-parser')

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

const ROBOT_IP = '10.41.129.96' //change to your own
app.post('/', (req, res) => {
  res.sendStatus(200)

  axios({
    method: 'POST',
    url: `http://${ROBOT_IP}/api/arms`,
    data:{
        Arm: "left",
        Position: -90,
        Velocity: 100,
        Units: "degrees"
      }
  }).catch(function(err){
    console.log(err)
  })
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

You can run the app by using the command node app.js

And to make her arm go up, run the following command curl -X POST https://localhost:300 in your terminal.

And if everything works well you should see Misty's left arm going up 🎉

Connect it to Typeform 🔗

All this is working well locally, but wouldn't it be cool to connect it to other services?

To make it happen we need the help of an awesome tool called ngrok. ngrok will expose your localhost and make it available to rest of the internet by giving it a URL. This URL is unique to you and every time you launch ngrok. Make sure to read its getting started guide.

Once you have ngrok installed you can run the command ngrok http 300.
This should give you a URL back. We are going to use it to call our app from the outside.

Screenshot of ngrok

On your Typeform dashboard, we can now select the form we want to connect to Misty, and under Connect > Webhooks add a new webhook with this URL.

And voilà 🎉
You now have a robot that raises her arm every time someone fills up your typeform.

This will work until you kill ngrok or the node app. Ngrok will give you a new URL every time you launch it, so just keep it open while you are developing.

Go beyond 🚀

After seeing Misty raising her arm the first time, I could not restrain myself, and I shouted a loud "Woo-hoo" on the conference floor 😊.

But I could not stop jus now when I was so close to building something even cooler.

My ultimate goal was to build an app that will make Misty speak and react to the things that were posted on the typeform.

Make her arm move dynamically 👋

So I built a simple typeform, where people could leave their name and decide which arm Misty should raise.

To make it easier to extract data from typeform webhook payload, I had to update the ref of my questions. On your typeform select the question and look at the bottom of the sidebar and click Edit. There you can change it to whatever you please. I called mine username and arm_choice.

Edit Ref on typeform question

Now let's see how to extract those values from the webhook payload 👇

  const { form_response } = req.body
  const {answers} = form_response

  let arm_field = answers.find((a) => a.field.ref === 'arm_choice')
  let selected_arm = arm_field.choice.label

  let username_field = answers.find((a) => a.field.ref === 'username')
  let username = username_field.text

Then you can pass select_arm value to Misty API, and raise the corresponding arm.

axios({
    method: 'POST',
    url: `http://${ROBOT_IP}/api/arms`,
    data:{
        Arm: selected_arm,
        Position: -90,
        Velocity: 100,
        Units: "degrees"
      }
  }).catch(function(err){
    console.log(err)
  })

Maker her speak 🤖🗣️

Misty REST API lets you send WAV audio files using the SaveAudio endpoint (doc) but... they have to be encoded in base64 😤

So I had to find a hack to generate a .wav file and convert it to base64.

It took me a couple of trials to find the perfect library to do it, but say.js saved my day!

const say = require('say')
say.export(`Hello ${username}`, 'Alex', 0.75, `hello_${username}.wav`, (err) => {
  if (err) {
    return console.error(err)
  }
})

Using those few lines, it creates a .wav file named hello_${username}.wave with a voice that says Hello nicolas for example.
Unfortunately, I could not find the name for the female voices on my mac, so we are stuck with Alex for now 🤷‍♂️

cont fs = require('fs');
let wav = new WaveFile(fs.readFileSync(`hello_${username}.wav`));
let wav64 = wav.toBase64()

  axios({
    method: 'POST',
    url: `http://${ROBOT_IP}/api/audio`,
    data:{
      FileName: `hello_${username}.wav`,
      Data: wav64,
      ImmediatelyApply: true, //make Misty play it right away
      OverwriteExisting: true
    }
  }).catch(function(err){
    console.log(err)
  })

And this 🔝 is how I read the file, convert it to base64 and call Misty API to make it play on the robot.

And this how it finally looks 🤩
// Detect dark theme var iframe = document.getElementById('tweet-1159195895646183424-934'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1159195895646183424&theme=dark" }

The code for the entire app is available here👇

Hope that got you excited to hack things around and play with Misty 🤖.
Their crowdfunding campaign is over, but you can already pre-order it.

🙏 Special thanks to Twilio Champions team for inviting me to be part of this great adventure 😃

Create a Salesforce lead from Typeform in less than half an hour

Nicolas Grenié — Thu, 14 Mar 2019 19:56:42 +0000

At Typeform, we love to use our product to run things. As you may have read in a previous post, we use typeforms to rate our lunches every day, gather feedback about upcoming features, and even run our internal FIFA contest. There are so many ways to use Typeform :)

We are also heavy Salesforce users: we use it to keep our partner program organized. Companies that are interested in integrating with Typeform contact us via this partner form, but then nothing happens. If we believe a lead could produce an interesting conversation, we have to create the lead manually in Salesforce.

I can hear developer folks out there saying, “There should be a better way!” 🤔

You’re right! We should be able to enjoy both by using the engaging Typeform UI to collect data and the powerful Salesforce funnel to organize the data into leads.

And this is what I’m going to explain here. I connected our typeform to our Salesforce organization and saved our team precious time.

Prerequisites 🛒

To follow this tutorial, you will need:

A Salesforce organization
A Typeform account--create one for free
A half hour of free time

Buckle up and let's get started! 🛫

Principles 📖

This hack relies on Typeform webhooks. You can attach one or more webhooks to a Typeform so that when a new response is submitted, you are notified at the URL of your choice.

Webhooks happen in real time, so they allow you to react quickly and keep everything in sync.

On the Salesforce side, we will rely on their Web-to-Lead solution. It's a quick way to generate leads from a web form.

To receive webhook details from Typeform and send them to Salesforce, we use Glitch. Glitch is both an online IDE and a server. The app is deployed automatically, so there’s no need to worry about servers.

You can also use other serverless solutions like AWS Lambda, Google Cloud functions, Azure, and Stdlib. Your choice! 😉

Implement the solution 👩‍💻

Prepare the typeform

Our typeform contains all of the questions we want to ask. Each question is identified by both an id and a ref property. Both are unique and automatically generated, but the id value can't be changed. Example of form definition.

details of field definition

We can update the ref values to make the code more readable. I’ll use the Typeform Edit Block Ref app to modify the ref properties of fields in our typeform.

screenshot of edit ref app

Now the questions have ref values like first_name, last_name instead of random characters. 👍

Looks better, no? 😉

Get your Salesforce organization ID 🗄️

To send leads to our Salesforce organization, I need to identify it by passing our oid (organization ID) as a parameter.

You can find the OID in your Salesforce dashboard. Click on the ⚙️ icon, and you should find it under Settings in the Company Information section.

Where to find your Salesforce OID

Keep the OID handy! You will need it later. 😉

Let's code 🎉

I knew you wanted to get to this part as soon as possible! So let's get our hands dirty. 😈

As I said earlier, our function will extract details from the Typeform webhook payload and then call the Salesforce API to create a lead.

app.post('/hook', function(request, response) {
  response.sendStatus(200) // let's answer back quickly to typeform 👌
  let { form_response } = request.body
  let { answers } = form_response

  console.log('received from Typeform webhook', form_response)

  // build the lead object
  let lead_data = {
    first_name: answers.find(a => a.field.ref === 'first_name').text,
    last_name: answers.find(a => a.field.ref === 'last_name').text,
    email: answers.find(a => a.field.ref === 'email').email,
    company: answers.find(a => a.field.ref === 'company').text,
    oid: process.env.OID,
    debug: request.query.debug===1 ? 1 : 0 // salesforce debug mode
  }
})

As you can see in this snippet, you’ll create a /hook route, excepting a POST request. Then, you’ll process the incoming request and extract the relevant data to build the lead_data object.

For security reasons, don't store the OID value directly in the code. Instead, store it as an environment variable.

I also added a debug parameter so you can test it out without harming your real organization.

The only thing left to do is to call the Salesforce Web-to-Lead API and create a lead.

This is the missing piece to add:

axios({
    method: 'POST',
    url: 'https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8',
    data: qs.stringify(lead_data),
    config: { headers: {'Content-Type': 'application/x-www-form-urlencoded' }}
    })
    .then(function (response) {
        console.log('res',response.status, response.data);
    })
    .catch(function (err) {
        console.log('err',err);
    });

That's all you need to connect things together. 🎊

Try it live

To quickly try this integration, follow these steps:

Remix the project on Glitch
Add your own OID to the .env file
Remove, add, or modify data extraction from the Typeform webhook payload in lines 21-28 in server.js
Click Show to see the URL of your project hosted on Glitch (and keep it for the next step)
In Typeform, select your lead generation typeform and add your Glitch app URL under Connect > Webhooks The URL format should be https://{random_name}.glitch.me/hook
Test by filling in and submitting your lead generation typeform--after you submit it, you should see a new lead in your Salesforce organization
Celebrate! 🎉

Succesfully created a lead in Salesforce

Go beyond 🗺️

This is a simple hack to connect Typeform and Salesforce. To make it more complete, you can map more fields from your lead object to your typeform questions. It even works with custom Salesforce fields.

If you are curious about connecting Typeform with other services, check out our developer documentation and build your own solution! 😉

To stay updated about projects like this one, subscribe to our Developer Newsletter.

A whole new world to explore

Nicolas Grenié — Thu, 07 Feb 2019 01:51:00 +0000

Photo by sergio souza on Unsplash

In 2018 the Typeform crew had the pleasure to meet some of you at conferences like Nordic APIs, or JS Heroes, or hackathons like HackUPC in Barcelona, or Hackference in Birmingham. It’s always great to meet users and partners at those events. You help us build the future of Typeform and its platform 🤩

I can tell you that for 2019, from where we are we have a new fantastic point of view, the head full of ideas and no one to tell us no. A hundred thousand things to see and as many dazzling places we never knew we wanted to visit…

The only thing that’s crystal clear is that now we are in a whole new world with you, our beloved Developer Community!

So let’s get this year started, hop on this magic carpet ride together, and let’s check out our next destinations.

We will begin our adventure by going to Boulder for a few events:

🇺🇸 BoulderJS meetup, Boulder

20th February 2019

For the first step of our Boulder trip, we will stop by BoulderJS meetup, meeting the local Javascript community.

I will be sharing my experience building my first app using Vue.js, when I created https://🌚🌞.ws to track events for the 2018 Solar Eclipse.

🎟️ Register (FREE)

🇺🇸WriteTheDocs Boulder

21st February 2019

WriteTheDoc is a global community of tech writers. Last year we participated in their sister events API the docs in Paris and London. It’s a great pleasure to be welcomed by the Boulder local group to exchange about documentation and Developer Experience best practices.

I will be presenting about best practices on Developer Experience on Webhooks.

🎟️ Register (FREE)

🇺🇸Typeform Office Hours

While we will be in Boulder, we thought we wanted to meet our lovely users. That’s why we are organizing some Office Hours on Thursday 21st and Friday 22nd.

It’s your opportunity to come meet us and come with your questions about Typeform product.

We will be here to assist you, especially if you are interested to build things using our APIs.

🎟 ️Signup here (FREE)

🇺🇸HackCU, Boulder

23–24th February

We don’t sponsor a lot of student hackathons but when we do, but do it’s because we have a special connection with their team. We are delighted to visit Gerard Sans founder of HackUPC and now a master student at CU-Boulder and Shubha Sharma, our summer intern in senior year in the same university. They are part of the outstanding team organizing HackCU.

Can’t wait to see what hackers will build!

🇪🇸API Meetup BCN, Barcelona

28th February

It now has been more than 10 years that Barcelona has been selected to be the Mobile Capital of the World for a week every year. During a week more than 100 thousand people will come from all over the world to discuss the newest trends in technology.

Taking the opportunity of all those folks coming to Barcelona, the local API meetup is hosting their annual MWC meetup and we are excited to host it in our HQ! Join us for a night of API nerding! 🤓

🎟️ Register (FREE)

🇪🇸Women Techmakers, Barcelona

6th April

You still have a bit of time to get ready, but we are beyond excited to be part of the second edition of the Women Techmarkers conference in Barcelona.

🔗 Learn more

I really hope you have a chance to catch us at one of those events! Remember, if you are organizing a meetup, a conference, a hackathon or an AI-powered ostrich race, and you want someone from Typeform to show up, let us know by filling the this typeform.

Prevent duplicate entries on your forms using Serverless

Nicolas Grenié — Mon, 01 Oct 2018 07:21:01 +0000

“monkey looking at mirror” by Andre Mouton on Unsplash

It’s a recurring question from our customers: how to prevent people from answering a typeform twice?

Until now, we were telling them to discard the duplicates when they were looking at results, but now we may have a stronger solution using our own APIs and a bit of Serverless logic.

I may have a tendency to always try to solve problems using technology, so when my co-workers told me about this duplicate issue, I knew we could do something using our API.

You can check a working prototype here. Try to answer once, and then try again, you should be blocked.

General principle 🗺

For this example, we will prevent a user to fill again a typeform if their email address has already been associated to a previous response.

We will use the native logic jump functionality. If the email is "authorized" we will go to the next question, if not we will go to a statement block saying "sorry, you already filled this form".

You can manually add a list of email addresses, but we want to automate this, right? 😄

For that automation we will use our webhooks. When a new response is submitted, it will trigger a webhook. The webhook will extract the email from the payload, create a new logic block, and update the logic on Typeform using our Create API.

Here is a chart on how it will work:

A gif worths a thousand words

Prepare your typeform 💄

First step of this tutorial is to prepare your typeform to make it work with our integration. If you don’t have yet an email block, add one to your form now like this:

Drag and drop an email block into your form

We also need to add a statement block. This is where we will redirect the user if they already filled the typeform, so come up with a nice message 😁

Add base of logic block ⚖️

Now get into the logic panel, so you can add the logic base of our form. Select the email block, and add a new constraint that will redirect to the statement block if email is equal to test@test.com (you can delete it later). And in all other cases jump to your next question.

On the statement block, add a logic to always redirect to the email block. This is how it should look like:

Logic map for our form

Test it 🏄‍

To make sure the logic works, let’s test it! Go fill your form and use test@test.com in the email block, you should be redirected to the statement block and then back again to the email block.

Does it work? Time to automate it 😜

A bit of code 🤓

We now want to add a small piece of code that will automatically add a new rule in our logic every time someone answers a form for the first time.

To make ease development and deployment we will use AWS Lambda and Serverless Framework, so please make sure you have both have AWS CLI configured and Serverless framework installed before going further.

Then, clone our repo locally on your machine.

git clone https://github.com/picsoung/tf-lambda-limit-one-entry.git
cd tf-lambda-limit-one-entry
npm install

In the folder you will find a serverless.yml file that contains configuration instruction for our function.

If you open it, you will see a few placeholders for some environnement variables we will need.

functions:
  addLimitLogic:
    handler: handler.addLimitLogic
    environment:
      FORM_ID: '' # Which form you want to update
      FIELD_ID: '' # Which field
      FIELD_REF: ''
      ALREADY_FILLED_FIELD_REF: ''
      TF_TOKEN: '' #Typeform API token
    events:
      - http: POST addLimitLogic

Get TF_TOKEN value 🔑

You will need to create a Personal API Token for your account.

On Typeform, go to My Account > Personnal Tokens.
Create a new token and copy its value in the serverles.yml file.

Get FORM_ID value 📃

Your can find the vale of FORM_ID by looking at the public URL of your typeform.
It should be of the form https://{username}.typeform.com/to/{form_id}.
Copy form_id to the serverless.yml file.

Get FIELD_ID, FIELD_REF and ALREADY_FILLED_FIELD_REF value 📃

To get the remaining values, we will make a call in the browser to the following URL: https://api.typeform.com/forms/{form_id} (replace form_id by the value you found earlier).

You should see a JSON file, this is the definition of your typeform, it has all the fields and logic described in a scripted manner.

From this JSON file we will extract the values we are interested in.

FIELD_ID and FIELD_REF correspond to the id and ref properties of the email block.

Find the email block and copy values.

ALREADY_FILLED_FIELD_REF corresponds to the ref property of the statement block. Find the statement block and copy it’s ref value.

All the environment variables in serverless.yml should now have a value.

We are ready to deploy this function to the cloud.

Deploy Serverless function ⏫

Go back to your terminal and run the following command:

sls deploy

This will run a bunch of scripts and at the end it should give your a URL from AWS, in the form of https://{something}.execute-api.{aws_region}.amazonaws.com/{env}/addLimitLogic .

Copy this URL.

Add Webhook to our form 🔗

This are the final steps:

Add the URL we created at the previous as a webhook to our form.
On your Typeform dashboard, go to the Integrate tab of form and select Webhooks.
There, paste the URL and turn on the toggle. The bubble next to Webhooks should now be green.

BOOM! You now have a Typeform connected to a webhook that will add logic blocks automatically!

Rejoice! 😍

Now that everything is setup, let’s try if our integration is working properly.

Fill your form for the first time using an email address.
Once is submitted, go to your Typeform Create interface and check the Logic panel. You should see a new rule.
Try to fill the form again using the same email address, you should now see the message you defined earlier.

Your form is now protected against duplicate entries based on email address!

Going further 🚀

I just wanted to show a simple example so you all have a base to come up with more complex use cases. There are many other things that could be done.

For this example we used email as an unique identifier but, as you may have guessed. it’s easy to find a workaround to fill the form twice. Instead, you can probably use a random id, and pass it as a hidden_field.

Keep in mind that if you use it with email restriction, the limitation will only work after you put it in place. If you want to limit people who already filled the form, it might worth writing a script to extract email from previous responses and create corresponding logic block.

I hope you liked this tutorial, please let me know if anything is broken or unclear, and feel free to suggest ideas for next projects!

Happy Hacking \m/

🎵 Sweet dreams are made by geeks, who are we to ditch a PR? We travel to events and assorted meetups. Everybody is looking for swag.

Get better at programming by helping others on Glitch

Nicolas Grenié — Wed, 08 Nov 2017 21:31:52 +0000

I started to learn programming about 15 years ago. In a time without Github and very limited resources to learn. A lot of my early learnings were made through imitation of existing websites. I would check their source code, copy-paste parts of it on mine and try to understand what it was doing by modifying it.

After few years of practice, I had enough basic knowledge to help other beginners with their questions on bulletin boards. This was a great way to give back to the community that welcomed me when I began. I really enjoyed it because I got to put myself in someone else's shoes, understanding their issues and walk them through a solution. This teaches you pedagogy and empathy while you are re-enforcing your coding knowledge.
Now that I think about it, those early days were probably the foundation of my Developer Advocate career ðŸ˜‡

Contribute and give back ðŸ¤ ðŸ¤—

When you just started to learn a technology it could be really intimidating to give back to the community. It's not easy to submit your first Pull Request on Github. Or answer your first question on Stack Overflow. People have created initiatives like YourFirstPR or Hacktoberfest to lower the barrier to entry and make PR less scary.

I feel that contributing and giving back got a lot easier with tools like Glitch.
I already mentioned Glitch in previous posts, especially from the Developer Advocate perspective.
With the remix feature, you can clone a project and add your own sauce to it.
If you ever get stuck you can ask the community for help with the Help button.

If you are interested to help others, you can check often the Glitch homepage and see if people need help. You can join people's project, offer help and start directing them to find a solution. At the end, they will thank you with a ðŸ’– on your profile.

But questions are still rare, and popup at random times, so you might not satisfy your desires of community collaboration.

I wanted to get more involved so I created a small tool to be notified whenever someone asks a question.

Meet: Glitch Notifier.

I am a heavy user of Slack, so naturally, I wanted to get notified directly on Slack.

Glitch Notifier is open for the community to use. You log in with Slack, you choose the tags you want to follow, and add the Notifier app to your Slack team. You will then receive notification any time a question matches your criteria.

You can contribute to the project by remixing it.

I've been testing this tool for a few weeks now. I helped about 10 people and received ðŸ’– 8 times. There were about 100 questions asked in a month, on a variety of topics. I remember helping someone set up their environment variables or someone building a chatbot in Messenger...

No matter your experience or your skillset, you are able to help someone in the community!

If you are interested to learn how it was built, keep reading ðŸ˜‰

How is it built? ðŸ’»ðŸ›

Like in the old days, looking at page's source gives you a lot of information. That's how I found out that Glitch has an undocumented API.

So far I've found 3 endpoints:

GET https://api.glitch.com/projects list projects
GET https://api.glitch.com/users list users
GET https://api.glitch.com/projects/questions list current open questions

The last endpoint is the one we are interested in. It returns an array of questions or an empty array when no question is asked.

To check periodically (every minute) on this endpoint to see if there are open questions, I have set up a small Lambda function (github repo) using Serverless.

If there are questions, I send them to a specific endpoint (/questions/hook) on our Glitch app.

There, we will check if we already have the question in our database. We use FaunaDB, as our cloud database.

If the question is not yet in our database we should notify our users.

Doing a Map request on our database we find which users are following the question's tags, and we notify them on Slack.

Here is the corresponding code

var notifyPeople = function(question) {
  var users_in_db = client.query(
              q.Paginate(
              q.Union(
                q.Map(question.details.tags,
                  function(tag) {
                    return q.Match(q.Index("user_by_tag"), tag)
                  }))));


    users_in_db.then(function(result){ // request match results
       var usersRef = result.data
       usersRef.forEach(function(userRef){
         var user = client.query(q.Get(userRef));
         user.then(function(u){
           slack.sendQuestionToSlack(u.data.incoming_webhook.url, question)
         })
       })
    }).catch(function(err){ // does not exist
      console.log("err", err)
    })

To notify people on Slack we use an incoming webhook integration, with a bit of formatting so it looks nicer.

Result in a Slack channel:

Hope you like it, let me know if you have any question or comment.

Photo by Å tefan Å tefanÄÃk on Unsplash

How to Monitor Stack Overflow Activity in Slack

Nicolas Grenié — Thu, 10 Aug 2017 16:01:01 +0000

Powered by a complete serverless stack

Group of Developer Advocates watching developers coding — Credits: Pixabay

Developer Advocates or Evangelists are often asked how they measure success.

One could argue that GitHub ⭐️’s on repositories are great. And Ash Hathaway shares her thoughts here.

Others could say that Stack Overflow questions give a good sense of an API popularity. I would agree with this statement.

If you don’t have a forum for your product, developers may end up asking questions directly on Stack Overflow.

I would not encourage companies to redirect all their support questions there or pushing for their brand tags, this is just bad. You are hijacking a community for your own needs instead of contributing to it.

But :

What happens when someone is posting a question there?

How do you get notified?

How can you react quickly?

In my experience, you can only receive notifications when there are new questions on a particular tag. This might not cover all the questions posted about your API.

You can also use tools like Mention. It covers more than Stack Overflow, but it’s not instantaneous.

To be more reactive, I hacked together something for our team at 3scale a long time ago. I recently rewrote it using serverless technologies. It monitors questions about 3scale and posts them on our #support Slack channel. The support team can jump on it and answer quickly.

I want to share this project, so you too can monitor Stack Overflow directly in Slack.

The tools

To fit in 2017 trend, we will only use serverless technologies, which will make this tool free to use:

AWS Lambda to host the logic of our app
FaunaDB to store databases
Serverless Framework to simplify deployments
Slack to be notified when a new question is asked

The logic

Stack Exchange API has an endpoint to search for questions. You can look for a term in tags, in the title, in the body of the question or all at the same time. We will search for all the attributes.

Create a key to access Stack Exchange API here.

Our function will regularly call this endpoint to check if there are new questions posted. We will use the Schedule Events feature offered natively by Lambda.

We will store the questions in a database to keep track of the ones we already sent to Slack and avoid duplicates.

If a Stack Overflow question is not in our database, we add it to the database and send details to Slack.

FaunaDB

I discovered FaunaDB a few months ago at Gluecon. They present themselves as the first serverless database engine. Everything is hosted on their end. FaunaDB is a globally distributed database that doesn’t require any provisioning. Capacity is metered and available on demand, so you only pay for what you use.

If you are familiar with Firebase, you will recognize a similar data structure and routes to access resources. But it comes with more features, which makes it easier for example to query the database.

Example: How to create an entry in FaunaDB

For this app, you will need a database, with a questions class. We will also add an index questions_by_id on terms data and question_id. This will let us query the questions class by the Stack Overflow id.

If you are concerned about your database usage, you can add TTL to the questions class. This will automatically delete instances older than the TTL value.

Finally, you will need to create a server key for the questions class. This key will be used to authenticate our function to FaunaDB servers.

Example: How to retrieve an entry in FaunaDB

Slack

To post to Slack, we would just need a simple incoming web hook. Create one here.

Configure the project

Make sure you have installed Serverless framework and configured the AWS CLI tool.

You can now clone this project locally.

git clone git@github.com:picsoung/stackOverflowMonitor.git
cd stackOverflowMonitor

In serverless.ymlyou will modify the environment variables to your own values.

FAUNADB_SECRET is the secret we created earlier to access FaunaDB
STACK_EXCHANGE_KEY is the API key to access Stack Exchange API
SLACK_WEBHOOK_URL is the URL of the Slack incoming webhook you’ve created
SLACK_CHANNEL should be an existing channel name in your Slack team such as #support or #stackoverflow SEARCH_KEYWORD is the keyword you are interested in monitoring such as Node.js or Angular2

Once you have changed all the variables to your own values, we can test if everything works. We invoke the function locally with the following command:

serverless invoke local — function getStackOverflowQuestions

As it’s the first time you are launching the function, it should post a message to your Slack channel. It should look like this:

How the notification should look like in your Slack channel

If you are happy with the result you can now deploy the function with the following command:

serverless deploy

By default, the function is called every 20 minutes. You can customize it by changing the schedule property in serverless.yml file.

Extend the project

For now, we are only monitoring for one term. You can launch multiple instances of this function to watch more terms or tags on Stack Overflow.

If you are interested in near to real-time solution, I encourage you to check Streamdata.io. Their tools turn pulling API into streaming API.

If you want some nice dashboards that show how active your community is on Stack Overflow, I recommend Keen.io. You can send all your Stack Overflow data there. Keen offers a variety of libraries to build beautiful dashboards.

We can also add more features in Slack, like buttons or menus. So people can claim a question or get assigned a question to answer.

Conclusion

This was a small project that led me to discover how to use FaunaDB. Using AWS Lambda it’s way more efficient that the Heroku instance that I had in the past.

I hope you’ve found this serverless example useful. The code is open on GitHub so feel free to contribute and add new features.

If you are working for a company that is selling to developers I am sure you already heard the “Be where the developers are.”

In the online world you have a good chance to find developers on websites like Hackers News, Stack Overflow, or GitHub. It’s important to measure what people say about your product or technologies on those sites.

This was a small project that led me to discover how to use FaunaDB. Using AWS Lambda is way more efficient than the Heroku instance that I had in the past.

I hope you’ve found this serverless example useful. The code is open on GitHub so feel free to contribute and add new features.

Hacking Oregon Eclipse — story of a side project

Nicolas Grenié — Thu, 27 Jul 2017 07:22:41 +0000

Screencast of eclipse project

Lately, I have been curious about the new “in vogue” Javascript framework: Vue.js (it’s a pleonasm, I know). I just needed a side-project idea to discover this new shiny toy everybody is talking about.

The idea of a project came while one night in a bar while sipping a good IPA with my fellow Advocate Josh. We were talking about the coming Solar Eclipse in the US, and where to go to see it.

Sadly, I did not personally plan to enjoy one of the many hippie gatheringhappening in Oregon the week of the eclipse. But I am sure I would be able to enjoy this rare phenomenon close to where I live in California.

With some basic googling I found the official NASA Website that is listing all the events organized in the country. Good news: Astronomers, Science Museums, and NASA facilities will be holding tons of event for everybody to enjoy the eclipse.

Map of events displayed on NASA website

Unfortunately, the user experience on this NASA website was not super exciting. You would have to point and zoom on a Map to find the different events around you. I thought there should be a better and nicer way: that’s why I’ve built 🌚🌞.ws.

The 🌚🌞.ws experience

Provide a better search experience 🔍🗓

My primary goal was to offer a pleasant search experience, where people would put their location and the app will show events nearby.

When it comes to search, my tool of choice is Algolia. They offer APIs and SDKs to provide intuitive search in websites like Twitch, Product Hunt or Hacker News.

To be able to use their solution I needed to get all the events data. By checking the source code of NASA website, I’ve found the Google spreadsheet they were using to populate events on the map. I just had to download it and turn this file into JSON.

I created an events index on Algolia, where I would store all the events. To be able to perform a geo-based search I renamed the location field to _geoloc, and that was it. I could already search for events around a specific point on the globe with its latitude and longitude coordinates.

Then, instead of having a field where people will freely put their address, I have used Algolia Places. It’s a text field with auto completion on addresses or city names. This tool uses Open Street Map data so it’s pretty accurate.

Algolia Places experience

Using this tool, users could start typing Saand the tool will suggest San Francisco. On a callback function the app will get all the info about this location, like it’s latitude and longitude, as well as its state or its postal code.

That’s how I got my first MVP running in few hours. Catching the change event on the input field, receiving the data about the location, perform a geo search on the event index and display the results.

Get local Eclipse circumstances 🌒🌘

I was pretty happy about my MVP, but I wanted to add more information regarding local circumstances of the eclipse. Wouldn’t be cool to know how long it will last? Or when will be the maximum?

Naively, I thought that the eclipse was happening everywhere at the same time. So I just had to take the date and convert it to local time zone.

Looks like I forgot my basic physics knowledge…

The Moon and the Earth are both moving at the same time, so the shadow of the Moon on Earth is also moving.

Check this animation to visualize it better:

// Detect dark theme var iframe = document.getElementById('tweet-889187888797286401-730'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=889187888797286401&theme=dark" }

So I had to find a way to get all those local circumstances as I could not guess them.

Well, if I am being 100% honest with you… I could… Through my research, I’ve learned about the Besselian elements. With some calculations, you can predict all the steps of an eclipse on any point on Earth. It sounds even more crazy when you realize that it was found in 1820 and that other civilizations have used similar techniques thousands of years ago.

The only documents I’ve found were full of endless equations, and I had no faith to deal with them in Javascript…

I finally discovered an API from the US Naval Observatory that would do that for me. This API is giving back the timing for the different phases of the eclipse as well as the magnitude, the sun azimuth, and some angles.

Once again my naively believed that with all this data, I had enough things to draw a beautiful visualization of the Moon shadow on the Sun.

https://medium.com/media/796beafd8fbafbb2d36171c22050f269/href

I tried during two days to find the right way of doing it. I used all the trigonometry I remembered from high school. My dream were full of crazy calculations. After many trials I could not get the results other websites were showing. I had to give up 😩.

If anybody has a clue, I would love to try and document a walk through on how to display an eclipse in SVG/CSS depending on latitude, longitude.

At the moment, visualizations are coming from Timeanddate.

Finding a domain name 💻🔗

You can easily bet that all the nice domains for this particular events are squatted by people with business minds, giving you little information in the middle of many popup ads.

I tried variations around eclipse, events,US ; but I did not like anything…

Until a few days ago when Domainji got featured on Product Hunt.

That was it: I had to get an emoji domain! 🎉

I’ve learned a lot about punny codes, and decided to buy the simple🌚🌞.ws on i❤.ws.

Do you see how the Moon is looking at the Sun with appetite?

This is what’s happening during an eclipse.

Emoji domains are a pain when it comes to open graph tags. For example, Facebook OpenGraph debugger doesn’t recognize them as valid URLs. I had some fun times trying to debug this part of the website.

Vue experience👨‍💻👍

You remember I’ve started this post talking about Vue?

Yeah, so what about it?

To get started I read Matthias Hager’s tutorial, which gave me a pretty good base on how things were working. It was intuitive for the use case I had.

I did not cut my app into components, until I was sure that everything was working together.

I was happy to find a lot of resources and existing components like Places, Tooltip or Prerender (for opengraph tags). And I also got to discover Bulma CSS which is delightful to use compared to Bootstrap.

You can find the code of the project here : so if you have any comment on how to make it more “ Vuesque ” please let me know.

I hope you enjoyed this hack, feel free to through feedback and feature request.

Please enjoy the Eclipse safely!

Turn boring email notifications into actionable Slack conversations

Nicolas Grenié — Fri, 30 Jun 2017 17:12:10 +0000

Yesterday I was discussing with a client answering some of their questions about our 3scale API management solution. Among many other things they were curious about our “alert system” and how could we notify them in a case of high traffic on their API. Simple! We send you an email if someone is about to reach their API quota.

Almost at the same time I was answering this question I think I heard myself saying… “wait, what?! emails?!”. Kind of apologizing we were not offering a more modern solution.We ended the call, and I was left with a furious willing of hacking around to see how we can improve this experience. I had to find out! This is the story of my morning hack.

Ugly email notification

Expected result in Slack

Connecting blocks🔌🏗

I don’t know about you, but when I think about notifications, I usually think about Slack. That’s where I try to gather all the automatic reporting for the tools I use. This hack will send notifications to Slack.

Also, sadly, our engineers won’t have time to build a nice alert API so I will have to work with the source I have: an email.

There are many mail APIs like Context.io or Nylas that will let you get emails and parse them, but that was a lot of overhead to deal with (OAuth, filtering emails, …). The best solution would be to send notifications to a designated email address and parse them there.

Zapier offers exactly this feature with their Parser product. They give you an email address where you can send all emails to be parsed. It includes a parsing UI where you define variables you want to extract.

Finally, to have more flexibility on the message formatting we won’t plug directly Zapier to Slack but instead, use Zapier webhook action to send extracted data to an app hosted on Glitch.

We are building a complete serverless solution 😇

Webhook integration form on Slack

Setup Slack 🤖💬

To be able to send a message to your Slack team we would need to created an Incoming Webhook integration. Follow this link, it should guide you to configure the integration. There, You will define on which channel the notification will be sent. When you are done, keep the Webhook URL handy, we will need later.

Zapier parser UI

Setup Zapier parser and trigger 📥⚙️

On Zapier, we will start by configuring the email parser here. Once you have an address, send there an example of your notification email so we can setup a template. In few seconds the email should be received by the parser and you should see it appeared. Then, highlight variables you want to extract from the email and give them names.

Once template is defined, we will configure a Zap to connect the email parser with our app. In the Zap, select Email Parser app to trigger with the New Email action. If you test this step, you should be able to retrieve the message you previously sent to Parser email address.

The app 🎏💻

The app will expose a POST route /hook, where Zapier will send a request containing the extracted data. You can check my example on Glitch and remix it with your own variables.

In the .env file, you should add values to the variables. Get the Hook URL we previously created on Slack, and add some personality to your notifications adding a username and icon. The ZAPIER_SECRET variable should be a random string, we will use it to identify that the request comes from Zapier webhook.

The message formatting is happening on the slack.js file. You can check the Message Builder from Slack to run formatting tests.

Webhook configuration on Zapier

Add webhook action to Zapier 🎣⚙️

Now, that our app is up on Glitch we can add an action to our Zap.

Add a Webhook action of type POST pointing to the URL https://YOUR_GLITCH_APP_NAME.glitch.me/hook

In should return a JSON payload. Then define the variables that will be sent to the app, and map them we the extracted ones.

Secret header for security

Finally, for security purpose, we will define a header named X-zapier-secret with the same value as the ZAPIER_SECRET environment variable we defined earlier.

Test and enjoy 🎉🎊

And this it, you are done now 👍

Test the flow and see if the message renders the way you want. When you are happy with the result, turn the Zap on.

Expected result on Slack

Now you can ignore email notifications as they are all sent to Slack in a beautiful and comprehensive way.

If you want to enhance this flow we can later add actionable buttons, but that needs a bit more work.

Let me know what you think of such hacks!

DEV Community: Nicolas Grenié

Collect Addresses on Typeform using Algolia Places

Try it live 📺

Pre-requisites 🛒

Add Algolia Places to your project 📍

Customize the library 🖌️

Listen to changes 👂

Let's prepare your typeform 👩‍🎨

Link our code to the typeform 🔗

Construct the URL of the form 🏗️

Redirect ↪️

Embed 🖼️

Going further 🚀

Typeform Handler - Extract phone number and call user

What I built

Category Submission: Engaging Engagements

Demo Link

Link to Code

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Additional Resources/Info

Tutorial: Hacking a robot while respecting fundamental laws of robotics

Overall principle 📖

Make the Misty move her arm

Connect it to Typeform 🔗

Go beyond 🚀

Make her arm move dynamically 👋

Maker her speak 🤖🗣️

Create a Salesforce lead from Typeform in less than half an hour

Prerequisites 🛒

Principles 📖

Implement the solution 👩‍💻

Prepare the typeform

Get your Salesforce organization ID 🗄️

Let's code 🎉

Try it live

Go beyond 🗺️

A whole new world to explore

🇺🇸 BoulderJS meetup, Boulder

🇺🇸WriteTheDocs Boulder

🇺🇸Typeform Office Hours

🇺🇸HackCU, Boulder

🇪🇸API Meetup BCN, Barcelona

🇪🇸Women Techmakers, Barcelona

Prevent duplicate entries on your forms using Serverless

General principle 🗺

Prepare your typeform 💄

A bit of code 🤓

Get TF_TOKEN value 🔑

Get FORM_ID value 📃

Get FIELD_ID, FIELD_REF and ALREADY_FILLED_FIELD_REF value 📃

Deploy Serverless function ⏫

Add Webhook to our form 🔗

Rejoice! 😍

Going further 🚀

Get better at programming by helping others on Glitch

Contribute and give back ðŸ¤ ðŸ¤—

How is it built? ðŸ’»ðŸ›

How to Monitor Stack Overflow Activity in Slack

Powered by a complete serverless stack

But :

The tools

The logic

FaunaDB

Slack

Configure the project

Extend the project

Conclusion

Hacking Oregon Eclipse — story of a side project

Provide a better search experience 🔍🗓

Get local Eclipse circumstances 🌒🌘

Finding a domain name 💻🔗

Vue experience👨‍💻👍

Turn boring email notifications into actionable Slack conversations

Connecting blocks🔌🏗

Setup Slack 🤖💬

Setup Zapier parser and trigger 📥⚙️

The app 🎏💻

Add webhook action to Zapier 🎣⚙️

Test and enjoy 🎉🎊

Contribute and give back ðŸ¤ ðŸ¤—