Pumble SDK

Overview

In this guide you will install pumble-cli and use it to generate a project for a Pumble App

Quick Start

Start by running this command to install the Pumble CLI

npm i -g pumble-cli

After successfully installing pumble-cli use the command below to log in to your workspace

pumble-cli login

You will be asked to input your email address and you will receive a code in your inbox. After logging in you can proceed to create your first Pumble App.

pumble-cli create

This command will ask you to type a name and description and will generate the project.
After this command has completed you can then cd into the generated directory and start the addon.

cd my_app
npm run dev

If you login into Pumble you will see your App is installed and ready to use.

TIP

You can also skip installing pumble-cli and use npx instead

npx pumble-cli create

Project structure

.
├── manifest.json
├── .pumbleapprc
├── package.json
├── src
│   └── main.ts
└── tsconfig.json

manifest.json

In this file you can change your App's name, Bot title, and scopes

{
    "name": "my-app",
    "displayName": "My App",
    "botTitle": "My App Bot",
    "bot": true,
    "scopes": {
        "botScopes": [
            "messages:read",
            "messages:write",
        ],
        "userScopes": [
            "messages:read"
        ]
    }
}

INFO

manifest.json in the generated project it's not the full manifest that is registered in Pumble.
The full manifest is generated by the cli as a combination of this file, your application code in src/main.ts and the hostname in which the cli runs.

.pumbleapprc

After running your app for the first time with npm run dev this file will contain your app id and secrets.

src/main.ts

This is the main file for your project to run.

WARNING

It's recommended to keep this file name and location unchanged

//main.ts
import { App, JsonFileTokenStore, start } from "pumble-sdk";

const addon: App = {
  globalShortcuts: [
    {
      name: "Global shortcut",
      handler: async (ctx) => {
        await ctx.ack();
        console.log("Received global shortcut!");
        await ctx.say("Received global shortcut!");
      },
    },
  ],
  messageShortcuts: [
    {
      name: "Message shortcut",
      handler: async (ctx) => {
        await ctx.ack();
        console.log("Received message shortcut!");
        await ctx.say("Ok", "in_channel", true);
      },
    },
  ],
  slashCommands: [
    {
      command: "/slash_first",
      handler: async (ctx) => {
        await ctx.ack();
        console.log("Received slash command!");
        await ctx.say("Received slash command!");
      },
    },
  ],
  events: [
    {
      name: "NEW_MESSAGE",
      handler: (ctx) => {
        console.log("Received new message!", ctx.payload.body);
      },
    },
  ],
  eventsPath: "/hook",
  redirect: { enable: true, path: "/redirect" },
  tokenStore: new JsonFileTokenStore("tokens.json"),
};

start(addon);