Create a QR Code Generator for Slack in 7 Lines of Code

Scott Gamble — Thu, 20 Aug 2020 12:38:27 +0000

Hey, remember QR Codes?

Those weird, glitchy little blocks that you can scan with your phone seem to be more popular than ever these days. Given our need for a more "hands off" approach to sharing information, some might even argue they're now an everyday essential!

Well, thanks to services like Autocode, you can set up a super simple Slack app that can generate QR codes for you and automatically upload them to your Slack channel.

TL;DR (30 seconds)

In just 30 seconds you could have this QR code generator up and running. There's admittedly a little hand-waving; Autocode as a platform will automatically handle authentication and deployment for you. But that's kinda the point! You get to focus on the API to API code that matters and leave the undifferentiated heavy-lifting of app-to-app authentication to the platform — the same way we once gave up server towers for cloud-based VM and container management.

How it Works

This Source is set up to respond to the /cmd qr command in Slack, followed by the URL you want to convert. For example, in any channel you can write /cmd qr http://www.threesided.ca/ to automatically generate a QR
code from the link.

This command uses the qrcode.generate API Connector,
making the whole process a breeze!

// Convert temporary URL to QR Code
let qrCode = await lib.qrcode.generate['@0.0.3']({
  text: result.tempURL.link_url,
});

This QR code image is then directly uploaded to your Slack channel using the slack.channels.files.create method

// Upload the QR Code image to Slack
result.upload = await lib.slack.channels['@0.7.2'].files.create({
  filename: `qr-code.png`,
  channels: [
    `${event.channel_id}`,
  ],
  content: qrCode,
  title: `QR Code`,
});

Getting Started

There are two really easy steps to get started with this.

Step 1: Fork the Source in Autocode

Click on this link to view and fork the Source Code for this project.

Step 2: Link your Slack Account

Once the project is forked you'll be brought to the Autocode editor. In the bottom right of the editor is a red button, indicating that you need to connect your slack account.

There are two possible ways (simple, using the Autocode app, or more involved using your own app). I recommend you use the simple slack app account linking flow for the Source.

The link account modal will provide you a detailed walkthrough on linking your Slack account. Once you've finished with those
instructions, the last step is to deploy your project!

Step 3: Deploy your Forked Project

On the bottom left of the Autocode editor screen is a Deploy button.

Clicking that will bring up a deployment progress modal. Once that's complete, your new Slack command app is live! Now you too can rick roll your friends in style. 😎

Once you're happy with how everything is working, you can create a release from your Autocode Manage Dashboard.
You'll be prompted to link a production slack account and give your release a version via the release modal.

That's it!

Thanks for checking out this Source! Follow the Autocode team on Twitter @AutocodeHQ for updates. If you have any questions, feel free to reach out to me directly at scott@autocode.com

DEV Community: Scott Gamble