🔔
Slack Notification with Firebase

Setup

1. Konfigurasi Slack

Inisiasi app

Kunjungi api.slack.com dan click Create a custom app

Notion image
 

Tulis nama app dan pilih workspace yang ingin kalian integrasikan

Notion image
 

Aktifkan Webhooks

Setelah berhasil membuat app kalian akan mendapat screen ini, pilih Incoming Webhooks

Notion image

Aktifkan dengan mengubah switch Activate Incoming Webhooks ke On

Kemudian klik Add New Webhook to Workspace untuk mengintegrasikan app ini dengan channel tertentu

Notion image

Integrasikan webhook app dengan channel

Pilih ke channel mana ingin kalian sambungkan

Notion image

Tes drive

Scroll kebawah, kalian akan mendapat code snippet

Salin ke terminal kemudian jalankan kode tersebut yang bentuknya kurang lebih seperti ini

curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' https://hooks.slack.com/services/***********/***********/************************

Jika sudah muncul notifikasi atau ada pesan Hello, World! maka berarti kalian sudah berhasil menyambungkan App Slack dengan Workspace dan channel kalian 🎉🎉🎉

Menyusun layout

Ikuti petunjuk dibawah ini untuk panduan memodifikasi layout dan disana juga disertai playground

2. Buat function

/* functions/src/notification.ts */

import * as functions from "firebase-functions";
import axios from "axios";

/**
 * Fungsi akan dijalankan jika ada dokumen baru ditambahkan ke koleksi 'subscriptions'
*/
export const subscriptionDeliveryNotifier = functions.firestore
    .document("subscriptions/{subscriptionId}")
    .onCreate(async (snapshot, context) => {
      const subscription = snapshot.data();
  
      return await axios.post("https://hooks.slack.com/services/***********/***********/************************", {
        "text": "Langganan Baru", // Yang akan ditampilkan di bilah notifikasi
        "blocks": [ // Yang akan ditampilkan sebagai pesan di dalam channel
          {
            "type": "header",
            "text": {
              "type": "plain_text",
              "text": "Langganan Baru",
              "emoji": true,
            },
          },
          {
            "type": "section",
            "fields": [
              {
                "type": "mrkdwn",
                "text": `
                  *Nama:*\n
                  ${subscription.name}
                `,
              },
              {
                "type": "mrkdwn",
                "text": `
                  *Kontak:*\n
                  Email: ${subscription.email}
                `,
              },
            ],
          },
          {
            "type": "section",
            "text": {
              "type": "mrkdwn",
              "text": "<https://admin.bersihin.co/dashboard/subscription|Buka di dashboard>",
            },
          },
        ],
      });
    });

Jangan lupa diimport lalu diexport di functions/src/index.ts

export {subscriptionDeliveryNotifier} from "./notification";

3. Deploy function

npm run deploy

Tampilan Notifikasi

Desktop (Windows 10)

Notion image

Mobile (Android)

Notion image

Tampilan Pesan

Desktop

Notion image

Mobile

Notion image

FAQ

Q: Kenapa notifikasinya di saya tidak muncul?

A: Simak dibawah 👇

  1. Pastikan anda menerima notifikasi dari channel tersebut Klik kanan di nama channel dan pilih Change notifications dan pastikan anda memilih Every new message
    1. Notion image
      Notion image
  1. Pastikan Anda bisa menerima notifikasi secara umum, biasanya ini terjadi jika anda berada dalam waktu malam hari sehingga secara default Slack tidak menampilkan notifikasi di waktu tersebut.
    1. Ctrl + , kemudian ubah rentang waktu untuk Anda bisa menerima notifikasi

      Notion image
      Notion image