slack-olapic

Olapic Integration for Slack! Inspire customers by showcasing quality UGC from your Olapic Media Library.

TODO

• OAuth flow with Olapic
• Configuration UI to let users customize integration

Dependencies

• Node.js
• Bolt

Local development

Since this app is currently under development and is not published in the Slack App Directory, the easiest way to install this integration into your workspace is to create a new Slack app, and follow the instructions below.

Ngrok

Ngrok is a great tool to tunnel applications that are running locally to a public URL. Using ngrok, we can tunnel application to a public URL before deploying it to a server. We will be using the public URL tunneled by ngrok to configure the Slack app in the next section.

1. Download ngrok, follow the installation instructions, and tunnel the application to a public URL using the following command (the app will be served locally using port 3000):

   $ ngrok http 3000

2. Now you have successfully created the ngrok tunnel and the CLI will display the URL that the application is being served on:

   

Configuring Slack App

Now that you have the public URL, create a new Slack app and configure the app following the below instructions.

1. Create a new Bot User under Bot Users section under Features. You can name it whatever you'd like! This will create a Bot User OAuth Access Token used by the app.

2. Enable Interactvity under Interactive Components section, then type in the public URL provided by ngrok with /slack/events as the route into the Request URL field:

   

3. Create a new slash commmand under the Slash Commands section with the following values:

   • Command: /olapic-local
     • The app you created represents the local instance of the application, so we're using a command specific to the local instance of the app. /olapic should be used when configuring the live instance of the application)
   • Request URL: https://<ngrok-hash>.ngrok.io/slack/events
     • Replace <ngrok-hash> with the hostname provided by ngrok on runtime.
   • Short Description: Search for UGC!
   • Usage Hint: [keywords]
   

4. Enable Events under Event Subscriptions section, then type in the public URL provided by ngrok with /slack/events as the route into the Request URL field:

   

5. The app will require specific permission scopes in order to respond to slash commands and send messages. Add the following permission scopes under OAuth & Permissions section:

   channels:read, chat:write:bot, incoming-webhook, bot, commands

Now that you configured the app, it's time to run the app locally!

Run the application locally

1. To run the application locally, clone the repository and run npm install to install the dependencies:

   $ git clone https://github.com/jhankim/slack-olapic.git
   $ cd slack-olapic
   $ npm i

2. This app uses dotenv for different environment variables we need for running the application. Create a file called .env in the root directory of the repository and fill out the required environment variables:

   SLACK_BOT_TOKEN=<bot-oauth-token> #available in OAuth Tokens & Redirect URLs under the app settings
   SLACK_SIGNING_SECRET=<slack-app-signing-secret> #available in Basic Information under the app settings
   OLAPIC_API_KEY=<olapic-content-api-key>
   OLAPIC_API_HOST=https://content.photorank.me/v1

3. Once the dependencies are installed, run the server locally:

   $ npm run start:dev

4. Now the server is running locally on port 3000!

Testing the application

The app responds to the slash command /olapic-local [keywords] in any channels that the app is installed.

You can test out the app by searching with relevant keywords using the command.