Slack App to collect photo

イーアン
フロントエンドエンジニア
OVERVIEW

I created a Slack Chatbot App for a summer event. Collecting photo and send it to out database

YEAR 2021 - 2021

Background

In 2021 Summer, we need to held an online sport event. This event was lasted for 2 months, having some rules that if attendee do something which related to physical training, they will get some point. In the end of this event, the highest point winner will win awards.

One of the point rule is, attendee will get point if they do daily exercise like running/yoga/biking, etc.
Attendee can upload photos everyday to show they really do physical exercise.

We need a system which can collect those photo.

The Reason of Using Slack

Before start to develop, we brainstorming some possible way

  • Internal File Driver (Box)
    Which will cost $0. Attendee will get a url to upload their photo.
    The export data seems to just be only images. We need to create a excel sheet to relate photo info and images.
  • Creating Website for Upload
    This is a flexible way to custom many thing. While if photos need to save on server, It will cost so much (we collected 2000+ photos in actual)
  • Slack App Chatbot + Online Airtable Databse
    Slack App solve file storage problems because the photo will saved in Slack server.
    Slack also compress photos. We event didn't compress them by myself :D

Prototyping

This is my first time to write back-end language. I choose Node.js + Glitch to complete the prototype.
I also open an outside Slack Workspace for prototype.

Here is the flow of our Slack App Chatbot

① User upload an file

② Chatbot checkt the file format. If OK, chatbot throw a button which can fill some info abouts this photo

③ User click that button, a modal show


④ After user complete filling all inputs, Submit button will display in the right bottom of the modal

⑤ Chatbot insert photo info and photo thumbnail to Database (airtable)

⑥ When data insert complete, Chatbot give a delete button

⑦ If user click delete button, a confirm popup will display. If "Delete" clicked, this photo will be deleted by airtable

Cloud Server

In online stage, Due to cloud server platform languege limit, we change the Node.js to Python

Here is the project repo

Find a way to access photo

The most difficult point of this project is how can airtable/visitor view those photo saving in Slack.
If Mike upload a photo to Kevin by Slack DM, which photo can only be access by two people: Mike and Kevin.
Also, If Mike upload a photo to Slack App "SuperBot", which photo will be accessable by Mike and "SuperBot".

We create another server which embeded Slack App Token (Bear Token) in header.
That server can pretend as Slack App and get the qualify to access our photos in slack.

Which server will be something like this


WEBSITE