Giter Club home page Giter Club logo

mattermostonfire's Introduction

MattermostOnFire

Build Status

Backend code for powering a Mattermost slash command that creates an interactive poll. Contains Firebase Cloud Functions that connect Mattermost Interactive Buttons with the Firebase Realtime Database.

What does this do?

Watch the video:

Demo

How does it work?

Diagram

Set up

Setting this up requires doing some initial Firebase setup, then doing some initial Mattermost setup, then wiring the two systems together.

Initial Firebase Setup

  1. Create a new project in Firebase
  2. Clone this repo to a new local folder and cd into the new folder
  3. Run cd functions && npm install
  4. Run firebase login
  5. Run firebase use --add and select the Firebase project you created in step 1.
  6. Go to your Firebase project settings and note the "Project ID". Your Functions' base url will be https://us-central1-PROJECTID.cloudfunctions.net (replace PROJECTID with your Project ID)
  7. Set the Firebase Functions base url (e.g., https://us-central1-PROJECTID.cloudfunctions.net) as a Firebase environment variable by running firebase functions:config:set functions.baseurl="your functions base url" (starting with https:// and ending without a trailing slash)

Initial Mattermost Setup

  1. Create a new Slash command in Mattermost (I suggest calling it something short, like "poll" or "survey")
  2. Select "POST" for Request Method
  3. Fill in a dummy Request URL for now, we'll come back and change this in a bit.
  4. Fill out the rest of the Slash command configuration as you please, then save
  5. Mattermost will generate a unique token for your Slash command. Note that down.

Finish Firebase Setup

  1. Set the Mattermost token as a Firebase environment variable by running firebase functions:config:set mattermost.token="your Mattermost token"
  2. Check your Firebase environment config by running firebase functions:config:get - it should look like:
ᐅ firebase functions:config:get
{
  "mattermost": {
    "token": "abcdefghijklmnopqrstuvwxyz"
  },
  "functions": {
    "baseurl": "https://us-central1-myprojectid.cloudfunctions.net"
  }
}
  1. Deploy your project by running firebase deploy.
  2. When it finishes deploying, it will log the URL for each Function. Note the "Function URL" for slashStart (e.g., https://us-central1-PROJECTID.cloudfunctions.net/slashStart)

On a single installation, if you have multiple Mattermost teams and want to use the slash command on each, then you have to register several tokens (one for each slash command created). For that you can specify multiple tokens in the mattermost.token environment configuration variable, separating them using a comma like: firebase functions:config:set mattermost.token="token1,token2,token3"

The resulting Firebase environment config would look like:

ᐅ firebase functions:config:get
{
  "mattermost": {
    "token": "token1,token2,token3"
  },
  "functions": {
    "baseurl": "https://us-central1-myprojectid.cloudfunctions.net"
  }
}

Finish Mattermost Setup

  1. Edit your Mattermost Slash command and update the Request URL to be the URL of your Firebase Functions slashStart function

🎉 ALL DONE!

Internationalization

If you want to use a different language other than English, do the following:

  1. Specify the desired language using the 2-letter ISO language code by running firebase functions:config:set mattermost.language="YOUR CODE".
    • Example: running firebase functions:config:set mattermost.language="es" would configure MattermostOnFire to use Spanish instead of English.
    • This should be done prior to running firebase deploy
  2. Check your Firebase environment config by running firebase functions:config:get. For example, if specifying Spanish then your config would look like:
ᐅ firebase functions:config:get
{
  "mattermost": {
    "token": "abcdefghijklmnopqrstuvwxyz",
    "language": "es"
  },
  "functions": {
    "baseurl": "https://us-central1-myprojectid.cloudfunctions.net"
  }
}

Make sure that the language you specify is supported. Check that there is a top-level key in translations for your desired 2 letter language code.

Please help expand this project's support for more languages by opening a pull request to add a new language to the translations file.

Runtime Monitoring

  • You can review the logs for the functions via the Functions > Logs interface of the Firebase Console
  • You can introspect the data being generated via the Database interface of the Firebase Console

Developing

Running Locally

Tests

  1. Run npm run test in the functions directory to ensure that your changes haven't broken any of the functions.

mattermostonfire's People

Contributors

jedfonner avatar darckcrystale avatar mcfoggy avatar

Watchers

James Cloos avatar Jiří Bartušek avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.