Setup

1. Konfigurasi Slack

Inisiasi app

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

Tulis nama app dan pilih workspace yang ingin kalian integrasikan

Aktifkan Webhooks

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

Aktifkan dengan mengubah switch Activate Incoming Webhooks ke On

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

Integrasikan webhook app dengan channel

Pilih ke channel mana ingin kalian sambungkan

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

Creating rich message layouts

Structure complex data in an easily readable and understandable way within messages. We've already introduced you to the range of message text formatting options that can improve information density and visual hierarchy at a basic level. Now it's time to take this further by using Block Kit layout blocks and block elements to vastly expand the possibilities for visual organization.

https://api.slack.com/messaging/composing/layouts

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)

Mobile (Android)

Tampilan Pesan

Desktop

Mobile

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

2. 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.

Ctrl + , kemudian ubah rentang waktu untuk Anda bisa menerima notifikasi