Mar 29, 2020
A Hands On Guide to Building a Low-Code Product (Part 1)
TLDR
I’m the maker of a Slack app called Referralboard (we helps companies save money on hiring by increasing employee referrals).
This is a hands-on look into how I built the MVP using a low-code stack. It covers the tools used for building not only the app, but also the company website which together formed the initial product.
If you’re trying to go from idea → product, my hope is that this guide will be helpful for you.
End result:
What Does This Guide Cover?
This is a hands-on guide for building a low-code Slack app. It covers the tools and resources to go from idea to MVP.
- ⚒️ Building the Product (Part 1)
- 🖥️ Building the Website (Part 2)
The Stack
These are the key tools that make up the end product. Below I’ll walk through how they all piece together.
⚒️ Building the Product
Stack →
Glitch
Let’s assume you have an idea already for a Slack app you want to build. Maybe a bot that lets employees submit help requests.
Regardless of the idea, Glitch is a great place to start. It’s an online code editor that acts as a Node.js Proxy/Auth Backend and let’s you deploy code immediately. You can literally write code in your browser and have a full-stack Node web app live in minutes.
What’s especially great about Glitch for our purposes, is that they’ve partnered with Slack’s developer relationship team to create app “blueprints” which can be copied and used as starting points for your app. For the “help bot” idea mentioned above you could start with Slack’s help-bot-workshop starter kit. I personally started with the slack-slash-command-and-dialog blueprint. To copy a project in Glitch you simply need to click the name of the project in the top left-hand corner and select “Remix Project”.
(You can also checkout the other platforms Glitch has created starter kits with here including Trello and Spotify.)
Using Glitch and Slack blueprints, you have a jumping off point to get a basic Slack app live quickly.
Slack API
A huge benefit of the Slack blueprints is that they come with a README that explains how to set up your app in Slack using https://api.slack.com/apps.
I won’t go into too much detail here because the README setup guide is pretty thorough, but I essentially just followed the steps they laid out.
Once the app is live following the above steps, you’ll want to select to “install your app to your workspace”. Once you’ve done that, their blueprint app should be working in your Slack workspace. You now have a Slack app deployed and usable! 💥
Once the basics are working you can start to customize your code in Glitch and build out your app’s features. This is the main “code” part of this “low-code” app. For Referralboard, I added key features such as the ability to submit referrals directly in Slack and confirmation messages whenever an employee earns points.
Slack’s API documentation is definitely helpful here, but I’d recommend checking out a few more of the Glitch blueprints to quickly get a feel for how Slack recommends writing certain features.
Block Kit Builder
Eventually you’ll want to design the look and feel of the messages that your Slack app sends. For example with Referralboard I wanted the weekly “leaderboard” post to cleanly display which user had earned the most points.
Although there’s lots of information displayed in the above message, Slack makes it really easy to experiment with different configurations using a visual editor called “Block Kit Builder”.
All Slack messages are made up of “blocks” of code of different types. For example, a “section” might have “text” or an “image” and be separated by a “divider”.
Using Block Kit Builder, you can drag and drop different elements to your liking and the code will automatically be generated. For Referralboard, I designed my messages in Block Kit Builder and then copy and pasted the code into Glitch.
Airtable
Once the basic features of the app were working and the messages were designed, I needed a database to save the actual data generated by my future users. Airtable is a great way to get a DB up and running quickly for an MVP.
If you’re not familiar with Airtable, it’s essentially an online spreadsheet with an API. Using the graphical interface, you can create and configure a schema. Below is a snapshot of the DB used for the Referralboard MVP. It’s a table of employees, what company they work for, the total number of referrals they’ve submitted, and who they’ve referred.
Once you’ve configured your schema, Airtable has a nifty feature where your Airtable base provides its own API to create, read, update, and delete records. For each of those actions it generates code which you can copy and paste into Glitch and then customize to your needs.
Uptime Robot
One small, but helpful additional tool I’d recommend is Uptime Robot. It’s completely free, easy to set up and will email you immediately if your app ever goes down.
Once you make an account, all you need to do to get started is select “Add New Monitor”, then choose “HTTP(s)” as the Monitor Type and include the URL of your Glitch project as the URL.
*Note — make sure you’re grabbing the URL of the Live App in Glitch as opposed to your project page. To find that URL, click the “Share” dropdown in Glitch and toggle “Live App”.
Once you’re set up, you’ll have an uptime dashboard like the one below.
Zapier
One more tool I utilized for Referralboard that may be useful for you (depending on what your app does) is Zapier.
For Referralboard, I wanted the results of the referral leaderboard to be sent automatically as a message in Slack each week. To accomplish this, I set up a pretty simple Zap.
Every Wednesday, Zapier sends a POST request to my app which kicks off a message to every team that’s signed up for Referralboard.
If you have familiarity with webhooks, the “Webhooks by Zapier” app and “POST” action event are pretty straightforward. Although this app is a “premium” zap, you can test it out for free in Zapier before ever paying for it.
Summary
There are dozens of other tools and setups that can be used to accomplish a similar goal, but hopefully this illuminated one path to develop, design, deploy, and monitor your own Slack app. Obviously time and effort is required to take the above tools and turn them into a great product, but with this guide I hope the infrastructure piece is at least a bit easier.
