DEV Community: Amy Kapernick

GitHub PR Reviews via Fax

Amy Kapernick — Thu, 30 Apr 2020 06:06:56 +0000

What I built

An integration that allows reviewing and commenting on a GitHub Pull Request via Fax

Category Submission:

COVID-19 Communications, Interesting Integrations, Exciting X-Factors

Demo Link

Link to Code

amykapernick / github_fax_pr

GitHub Fax PR Reviews

And integration to allow reviewing and commenting on pull requests via fax.

Demo

https://vimeo.com/413450595

Requirements

Must have a Twilio Account, and a fax capable phone number (instructions available as part of fax quickstart)
Must have a Microsoft Cognitive Services Computer Vision resource set up (can be done as part of the Azure free tier)
Must have a semi recent version of Node installed (built on v13.9.0)
Must have a GitHub account and at least one repository

To Use

Download repository
Run npm install or yarn install
Run cp .env.example .env to create new .env file
Fill in env variables in .env file from your Twilio account
Use npm start to run locally
Use ngrok to expose the page
In your Twilio Console, edit the fax capable number you're using to send
- Change it to Accept Incoming Faxes (will likely be Voice Calls by default)
- …

View on GitHub

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

Built on Express using Node JS, using the Twilio Fax API, Microsoft's Cognitive Services Computer Vision API and GitHub's API

When a pull request is opened on GitHub, it triggers a webhook to fire. That webhook generates a PDF with information about the PR and sends it via fax.

Comments can be written on the fax, and faxed back, which when received, sends the fax PDF to Microsoft's Cognitive Services Computer Vision to read the text in the PDF. Using the information taken from the fax, a comment is added to the pull request on GitHub.

Additional Resources/Info

Built on Twitch stream over a few different sessions
https://www.twitch.tv/videos/604972244
https://www.twitch.tv/videos/605863096
https://www.twitch.tv/videos/606613991

Live Demo also available on request (not hosted, running locally on my computer, but can be set up to demo)

Remote Soundboard

Amy Kapernick — Mon, 27 Apr 2020 11:16:44 +0000

What I built

A soundboard that can be used by attendees during a remote presentation, attendees can access the page and react to a presentation, the sound then plays on any device that has the page open in the browser.

This allows the audience to react to a presentation, to hear other audience members reacting and for the speaker to get feedback from the audience on their talk, without them unmuting their microphone or when they're on a one-way platform (eg. Twitch, YouTube Live, Teams Live, etc).

Category Submission:

COVID-19 Communications, Engaging Engagements, Exciting X-Factors

Link to Code

amykapernick / remote-soundboard

Remote Soundboard

A soundboard for use in remote presentations, that allows remote attendees to react to a presenter, with sounds playing for any user that has the page open.

Demo

https://vimeo.com/413798818

To Use

Download repository
Run npm install or yarn install
Run cp .env.example .env to create new .env file
Fill in env variables in .env file from your Twilio account
Use npm start to run locally
Use ngrok to expose the page for other users

Env Variables

TWILIO_ACCOUNT_SID - Account SID, found in Twilio Console
TWILIO_API_KEY & TWILIO_API_SECRET - Generate API key and API secret here in Twilio Console
TWILIO_SYNC_SERVICE_SID - Get the default service SID, or create a new service [here in the Twilio Console

View on GitHub

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

Running on Express
Using the Twilio Sync API to play the sound remotely on any device that has the page open

Additional Resources/Info

Built on my Twitch stream
https://www.twitch.tv/videos/603849527

Live Demo also available on request (not hosted, running locally on my computer, but can be set up to demo)

Building Quokka on Demand

Amy Kapernick — Sat, 08 Feb 2020 07:09:18 +0000

Last year I got the chance to give a live demo at the Superclass at Twilio Engage in Sydney. It was just a quick demo so I didn't have the chance to do much, but I thought it would be a good opportunity to show how easy the APIs are to use, and maybe I could put a little Perth in it. Then I came up with the idea of Quokkabot 🎉.

Using the Twilio WhatsApp API, it allows people to send a message in and ask for a picture of a Quokka. For those who haven't heard of them before, Quokkas are Australian marsupials (related to kangaroos and wallabies), only found on a small island called Rottnest Island, off the coast of Perth. They're herbivores (although will eat most food you leave lying around) and have no natural predators and aren't afraid of humans. But what's made them famous the most is they look like they're smiling, and are excellent at posing for selfies. So I built a bot which allowed people to ask for (and get a photo of a quokka) to brighten their day.

I would have preferred to use MMS, but currently only US numbers are supported with the Twilio MMS API (something, something, telcos 😠), so I used the WhatsApp API instead. It's currently still in beta so you have to join a testing sandbox, but after that it works fine. For ease of use, I also used Twilio Functions so that I didn't have to worry about setting up a serverless function. There's a great quickstart guide for Twilio API for WhatsApp, or your can follow along below.

If you don't already have one, sign up for a Twilio account. Using the referral link provided will give you $10 credit when you set up your account.

In the Twilio Console, navigate to Functions → Manage and create a new function. When prompted you can start from scratch using the Blank template. Define your function information, and set it to fire the event on Incoming Messages.

Twilio gives you some code to start with (even though we're using the Blank template 🤷‍♀️), we just need to make a couple of tweaks to get started. This function will be triggered whenever a WhatsApp message is sent to your number and will send a response to the same number.

    exports.handler = function(context, event, callback) {
        // Load the Twilio Markup Language (TwiML) function and message
        let twiml = new Twilio.twiml.MessagingResponse(),
        message = twiml.message();

        // Set the body of the message
        message.body('Hi, do you want a quokka?')

        // Send the message
        callback(null, twiml);
    };

Get the full path of your function and hold onto it.

Navigate to SMS → WhatsApp → Sandbox and enter the function url in the box for when a message comes in. If you haven't used WhatsApp before, you might have to go through the tutorial in the Learn tab first.

If you haven't already joined the WhatsApp sandbox, send a message with the activation code to the WhatsApp number, this will join the testing sandbox.

Send a message to the number and see the response you get back. Try tweaking the message.body and see the new response you get.

We need to know if the people sending a message are asking for a quokka, so to access the message text, define a new variable below our existing ones:

    let twiml = new Twilio.twiml.MessagingResponse(),
        message = twiml.message(),

        // From the message event, get the Body, which is the message text
        request = event.Body;

        // Log the message to view what was sent

        console.log(request)

On the function page, you can scroll down to the bottom and view the results that we've logged, which is the text of the messages that were sent.

Changing the body of our function and using the most advanced AI in tech (an if/else statement 😂), we can check if the message body contains the word quokka

    exports.handler = function(context, event, callback) {
        let twiml = new Twilio.twiml.MessagingResponse(),
        message = twiml.message(),
        request = event.Body;

        // Check if the message contains the word quokka (not case sensitive)
        if(RegExp('quokka', 'i').test(request)) {
                // Set the message body to say they want a  quokka
            message.body('You want a quokka')
        }
        else {
                // They didn't want a quokka, but we should respond anyway.
            message.body(`You didn't ask for a quokka. Are you sure?`)
        }


        callback(null, twiml);
    };

With the new function, the response changes based on what the initial message said.

But the reason we're using WhatsApp is so we can add images. As well as being able to define the body of a message, we can also define media to include with it. If we change the first part of our if/else statement to also define the message media by giving it a URL. I've hosted some images so they're easy to use for this

    if(RegExp('quokka', 'i').test(request)) {
            message.body('This is a quokka')

                // Give the URL of an image to send with the message
            message.media(`https://quokkas.amyskapers.dev/img/quokka_(1).jpg`)
    }

Now when you send a message asking for a quokka, it will send you a picture of a quokka!

To change it up a bit, I have a bunch of different images, and generate a random number each time the function is triggered and feed that number into the image URL. It didn't seem fair that people only got images when asking for quokkas either, so I have a bunch of images of things that aren't quokkas, to send then.

    exports.handler = function(context, event, callback) {
        let twiml = new Twilio.twiml.MessagingResponse(),
        message = twiml.message(),
        request = event.Body,

        // Randomly generate a number between 0 and 9 (inclusive)
        photo = Math.floor(Math.random() * 10);

        if(RegExp('quokka', 'i').test(request)) {
            message.body('This is a quokka')
            message.media(`https://quokkas.amyskapers.dev/img/quokka_(${photo}).jpg`)
        }
        else {
          // This text was a bit of a joke that my dad would 
          // make when my parents came to visit me in Perth
            message.body(`This is not a quokka`)
            message.media(`https://quokkas.amyskapers.dev/img/not_quokka(${photo}).jpg`)
        }


        callback(null, twiml);
    };

Now it randomly sends one of the photos of quokkas in each message, shaking it up a bit.

Feel free to play around with it, you can also fork the repo on GitHub.