Create a QR Code Generator for Slack in 7 Lines of Code
Tags: slack, node, qrcode, api
Published: 2020-08-20 12:38:27

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](https://www.wired.co.uk/article/qr-codes-coronavirus)!

![Slack Command Final Result](https://dev-to-uploads.s3.amazonaws.com/i/c7323nr7yiacs8mba8qw.gif)

Well, thanks to services like [Autocode](https://autocode.com/), 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](https://autocode.com/) 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](https://autocode.com/lib/qrcode/generate) API Connector, 
making the whole process a breeze!
```javascript
// 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](https://autocode.com/lib/slack/channels/0.7.2/#files-create) method
```javascript
// 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](https://autocode.com/src/slack/slack-qr-code/) 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](https://autocode.com/) editor. In the bottom right of the editor is a red button, indicating that you need to connect your slack account.

![Link Account Button](https://dev-to-uploads.s3.amazonaws.com/i/by2g6qdzdmtb74f5w0qh.png)

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.

![Link Slack Account Modal](https://dev-to-uploads.s3.amazonaws.com/i/dkw4lg0sn91uu78jldh6.png)

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.

![Deploy Button](https://dev-to-uploads.s3.amazonaws.com/i/7jo9mnl77z7phv8k5bxy.png)

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](https://www.autocode.com/manage).
You'll be prompted to link a production slack account and give your release a version via the release modal.

![Slack Command Final Result](https://dev-to-uploads.s3.amazonaws.com/i/c7323nr7yiacs8mba8qw.gif)

# That's it!
Thanks for checking out this Source! Follow the Autocode team on Twitter [@AutocodeHQ](https://www.twitter.com/autocodehq) for updates. If you have any questions, feel free to reach out to me directly at <a href="mailto:scott@autocode.com">scott@autocode.com</a>