DEV Community: Hugo Gresse

OpenFeedback.io: open source talk & conference feedbacks SaaS

Hugo Gresse — Mon, 23 Nov 2020 14:28:29 +0000

Meetings and conferences often provide session feedback systems that have proven their benefits for both speakers and organizers. Among all the possible feedback tools, the “sticker board” had become a popular choice, because it is a easy and efficient method where attendees just stick their vote in a predefined box (Figure 1).

(Figure 1) Old speaker board where colored stickers were applied by attendees

The world is facing a long-term pandemic and most meetings and conferences take place online where such feedback system is not possible. Hence an online vote & feedback service has become a relevant solution to fill the gap: OpenFeedback.io

Basically, the idea was simple: keeping the previous feedback system, by transposing it into a user-friendly online service. The concept can be explained in 3 steps:

QR Codes are provided to attendees (either by speakers or organizers) at the end of the talk or during the Q & A.
Attendees scan the QR code, and land in the online sticker board.
Attendees click the pre-defined choices they agree with (represented by a box) and a colored sticker is added to their vote. Optionally, they can share additional insights in a comment section.

Note: you can also use the feedback url in place of QR Codes.

DEMO

(Figure 2) Feedback demonstration

Online demo here

The central idea was to create a fast and painless voting system, which means no login and no account required, attendees just click & vote. They can also navigate between talks and add feedbacks hours or days after talks are finished.

To date, the service has been used by

BDX I/O, Sunny Tech, CloudNord remote or physical conferences, each having 200+ voters and 1000-1500+ votes,
Several french meetups such as French Android User Group
Medium-sized companies using it for their internal talks, one of them also put OpenFeedback in its company rules. /o/

And it's Open Source on GitHub.com

Admin: a real SAAS

Open Feedback is built as a SaaS. It is composed of 3 applications:

Voting app (described above)
Landing / marketing website
Admin/console website to manage events.

The admin provides a user friendly interface for organizers whishing to create and manage their own events on the OpenFeedback service. It includes:

Creating events and customizing the logos/colors.
Managing speakers and sessions.
Invitation of user(s) to co-manage an event.
Editing the feedback form, translating it in any languages for cross languages events.
Moderating comment's section.
Speakers and sessions can also be loaded from an external data source.
Votings statistics.

(Figure 3) demonstration of the administration user interface

How is it made?

Open Feedback is a single page application developed in React for the frontend, and using Firebase for the backend.

Frontend details

The frontend is a ~ monorepo ready app composed of:

Landing/marketing website: openfeedback.io, lazy loaded
Feedback app
Console/admin, lazy loaded

The 3 apps are using React with the classical stack for React:

React Router which manages routing based on URL adresses bar,
Redux+thunk: state and action management,
React Hooks (almost everywhere),
Formik+yup: form and form validation,
Storybook: documentation and components demos,
i18next: intertionalisation/translation/i18n, split for each app
Luxon: dates lib, Moment.js was removed to benefit for the small package size & browsers built-in intertionalization APIs,
Nivo for an awesome graph experience,
Cypress for End to end test, running in a browser on GitHub actions,
Jest for few unit tests.

Backend details / servers

OpenFeedback mainly uses Firebase which includes many services provided by Google. Firebase is running on Google Cloud Platform. Some of the following services are wrappers over GCP own services:

Serverless cloud functions: vote aggregation, user invitation and emails in Typescript,
Firestore: NoSQL database with security rules,
Storage: store events images,
Analytics: track not the users but the overall Saas usages,
Hosting: static hosting for the React app,
Authentification: anonymous login for voters, GitHub/Google/Email/Phone for admins. It is a lock-in features for Firebase but it remains very convenient,
Performance: website speed analyzer.

In addition, OpenFeedback uses:

MailGun for emails
OpsGenie for system wide alerting and when a JS or fatal error are throwns.

These two apps have free tiers or free quotas, which is very conveniant.

Future plans

Next major steps of OpenFeedback are:

Organization: users can join an organization allowing them to see the same events and share a common pool of settings, issue here.
Integration of Conference-Hall.io, an awesome CFP service.
More tests: it takes a lot of time to keep dependencies up to date and prevent regression on new features, so I plan to improve the tests and cover everything so Pull Request can be merged when tests pass without more manual checks.

Please let me know in the comment's section if you think this service can be useful, and if you have any ideas or suggestions. Thank you very much in advance!

Also, you can let additional feedbacks on this article on OpenFeedback

Take care and don't work too much 🖖.

Acknowledgements

I thank Lauriane Anthony for her help with the design and integration work in the earlier stage of this project. I also thank Marceau Gresse and Baptiste Haudegand for their proofreadings.

Making a Slack bot from scratch with embedded player (part 1)

Hugo Gresse — Sat, 15 Aug 2020 17:07:12 +0000

Some time ago, I've found an awesome soundboard for french TV Show Kaamelott. I wanted to make it available on Slack like the Giphy app, and distribute it. Here is the story.
In this part 1, I will explain how to make a Slack bot, and in part 2, I will explain the pitfall & specific details for an embedded player within Slack.

Demo

Here is the actual result

Vocabulary

Interactivity: when a user click or interact with a message a bot sent. For example, when Giphy propose you a gif, selecting it to be sent in the channel will send an Interactivity request.
Slash command: when a user submit a new /mycommand myinput within Slack, this will trigger an HTTP Request.
OAuth 2: authentification protocol used by Slack to authentificate a bot and link it to a Slack workplace
Unfurling: the process that Slack does to add a preview (text/image/rich) below a link

Disclaimer: this is not an indepth tutorial but an overview on the steps that you'll need to do in order to make your first Slack command bot.

Preparing the server

Let's pick Firebase stack to make this project. Firebase offer all the services we need to setup this bot easily: an hosting, a serverless platform and a database + all the SDKs you need to communicate with them.
Within Firebase, we'll need at least 3 serverless functions:

slackCommand
slackInteractivity
slackOAuth

Create a new project on firebase.google.com
Install Firebase CLI: npm install -g firebase-tools
Login: firebase login
Init the local repo: firebase init and select Firestore, Functions, Hosting. I've picked Typescript for the functions language.
Within functions/ dir, create the 3 HTTP functions listed above and implement them with a dumb answer: response.send().
Export them in the index.ts: export {slackOAuth} from './https/slackOAuth'
Deploy them using firebase deploy

An exemple of a dumb serverless functions on Firebase in TS:

import * as functions from 'firebase-functions'

export const slackCommand = functions.https.onRequest(async (request, response) => {
    return response.send()
}

At this time, you'll have deployed three functions. For each function you have a unique URL that you can call from everywhere. Save those URLs for the following part.

Creating the Slack App

We now need to create a new Slack app here. The app will be registered to a workplace so you can test it easily. You'll need to fill some information & images, and then configure it as bellow:

Enable Interactivity: this will allow you to receive an HTTP Request when a user click on a button your Slack bot sent. The URL needs to be the one you've setup in the last parth for the slackInteractivity function.
Add a Slash command, use the URL for the slackCommand function.
Configure OAuth:
- add a Bot Token Scope: commands that will allow the bot the receive the command
- add a Redirect URLs: the URL for the slackOAuth function

This is almost all of what you'll need related to Slack. At this time, a bot user will already be available within your Slack workplace, and the command too, though it will not do much.

You can also find the "Add to Slack" button in "Manage distribution" of the app, the URL will be useful to test the OAuth proccess.

Add the Slack app credentials as environment variable for the functions

We'll need the following environement var in the serverless functions:

Slack client_id
Slack client_secret
Slack signing_secret

You can add them to the function using Firebase CLI:

firebase functions:config:set slack.client_id=XXXX

After deploying the functions, your code can access them with:

import * as functions from 'firebase-functions'

functions.config().slack.client_id

To run the functions locally (not very useful for a Slack bot), you'll need to populate a .runtimeconfig within the functions dir:

firebase functions:config:get > .runtimeconfig.json

Implementing the OAuth

The goal of this part is to handle any workplace when the bot is added using the "Add to Slack" button.
After allowing the bot to a workplace with the "Add to Slack" button, Slack will redirect the user to the slackOAuth function. This request will allow the Slack app to add its configuration to the new workplace (slash command, command scope, bot profil) as well has having a valid token on this workplace.
The function is composed of the following parts:

Validating that the environment variables exist
Answering for the SSL Check Slack does regularly
Validating the request (code, method)
Exchange the temporary Slack OAuth verifier code for an access token (using oauth.v2.access Slack API)
Saving the token to Firestore database.
Redirecting the user to a success or failure page.

You can find the full code of this function here, but here is some interesting part:

Get environment variable in functions using functions.config().my_object.my_key

Call the Slack oauth.v2.access API

    import fetch from 'node-fetch'
    import {URLSearchParams} from 'url'

    const params = new URLSearchParams()
    params.append('code', `${request.query.code}`)
    params.append('client_id', `${slack.client_id}`)
    params.append('client_secret', `${slack.client_secret}`)
    params.append('redirect_uri', `https://us-central1-${process.env.GCLOUD_PROJECT}.cloudfunctions.net/slackOAuth`)

    const oauthV2AccessResult = await fetch("https://slack.com/api/oauth.v2.access", {
        method: "POST",
        body: params
    })

Save the token to Firestore:

   import * as admin from "firebase-admin"
   admin.initializeApp()

   const slackResultData = await oauthV2AccessResult.json()

   admin.firestore()
        .collection("installations")
        .doc(slackResultData.team.id).set({
            token: slackResultData.access_token,
            teamId: slackResultData.team.id,
            teamName: slackResultData.team.name,
            createdAt: serverTimestamp()
        })

The not funny part is that Slack cannot call a local URL, so you'll need to deploy this each time to test it. Here is a shortcut to only deploy a function:

firebase deploy --only functions:slackOAuth

At this time, if everything work, upon calling the app installation URL (within Slack Manage distribution app page), you should be asked to allow the app and then redirected to success page (in my case, it's this one).
The token will have been saved in Firestore:

Slack OAuth documentation

Responding to a command request

When a new command is executed in Slack, the slackCommand function will be called. This is post of your bot logic will take place. I believe this was the hardest part for me.

Implementation guidelines:

Verify the request integrity:
- only POST request
- checking if x-slack-signature & x-slack-request-timestamp headers are present
- preventing request attack
- making a hash of the request body using hmac 256
- comparing the hash with the x-slack-signature
Sending a ACK to Slack: response.send() to prevent a timeout after 3s on Slack side.
Getting the app token, if any
[Your bot logic here]
Answering to the response_url with the message.

Let's go a little deeper in the integrity check.

First of all, you'll need to stringify the request body using RFC1738 which is possible using the qs package in Node. const requestBody = qs.stringify(request.body, {format: 'RFC1738'})

Using the Node crypto package, make the digest:

import * as crypto from "crypto"
const digest = 'v0=' + crypto.createHmac('sha256', signingSecret)
    .update(`v0:${requestSlackTimestamp}:${requestBody}`)
    .digest('hex')

Checking the Slack signature and your new digest:

crypto.timingSafeEqual(
        Buffer.from(digest, 'utf8'),
        Buffer.from(requestSlackSignature, 'utf8'))

We are using this safe equal method to prevent a timing attack on the string compare (more info here)

Slack verifying documentation

Sending some Block back to Slack

Assuming you now have the token (bot token usually start with xoxb-), you can send message in Slack using the response_url provided in the request body:

    const responseUrl = request.body.response_url

    return fetch(responseUrl, {
        method: "POST",
        body: JSON.stringify({
            blocks: [
                {
                    type: "section",
                    text: {
                        type: "mrkdwn",
                        text: `An \n awesome _text_`
                    },
                    accessory: {
                        type: "button",
                        text: {
                            type: "plain_text",
                            text: "Send",
                            emoji: true
                        },
                        value: someValue
                    }
                }
            ]
        })
    })

There is two ways to compose message in Slack:

the block format
the legacy format: a text and some optional attachments

Usually, you should go with the block format, as the BlockKit Builder is really great and the layout possibilities are all you need.

The API is here

Some messages are only visible to the user issuing the command (ephemeral) and other are public within a conversation (in_channel). This will be explained in part 2.

Interactivity implementation

When an user interact with a bot message (clicking on button from the message), slackInteractivity function is called.

Here is some implementation steps:

Send an empty response to prevent the 3s Slack timeout. (some functions may be longer to start if they are cold (not called for 10min)
Verify the signature of the message
Get the payload type & check request data a. type === block_actions? b. action value present? (this will be the accessory.value of the block in example above)
[your bot logic]
Call the response_url with a new payload of your choosing.
To convert a ephemeral message to a in_channel you'll need to wait for the part 2 soon.

And 🎉

You'll then need to deploy everything, add your bot logic and fix the bugs.

In part 2, I'll explain my own bot logic where I'm using Twitter as an embeded player for Slack as well as some other implementation details. Stay tuned.

Sources code of the bot is here on github.com.

Thanks Roch Dardié for proofreading me.