Trik Node.js: Buat Auto Custom Discord Status untuk aplikasimu! (Belajar Electron js Desktop)

Tutorial integrasi Discord Rich Presence pada aplikasi Desktop Electron, Siapa mahasiswa perkuliahan yang tidak tahu discord? Aplikasi chatting ini jauh lebih unggul untuk fitur dan customibility sehingga sering sekali dipakai oleh developer pemula. Karena discord cukup open pada developer, kamu bisa mengembangkan discord bot secara gratis, misalnya. Kali ini kita akan membuat integrasi aplikasi ke discord dengan custom status yang disebut dengan discord rich presence di aplikasi desktop electron dengan bahasa pemrograman node.js. Berikut adalah bagaimana membuat discord status khusus aplikasimu. Sama seperti discord status yang muncul ketika kamu main CS:GO, Genshin Impact, dan Spotify.

Penjelasan dan minimum requirement untuk membuat auto update discord rich presence Node.js

Di sini saya akan mendemokan bagaimana integrasi discord rich presence js (discord-rpc v4) pada aplikasi electron.js. Electronjs adalah framework untuk mengembangkan aplikasi desktop cross-platform menggunakan javascript dan html. Sebelum tutorial lebih lanjut, Setidaknya kamu sudah memahami dasar nodejs dan javascript kamu sudah paham bagaimana cara event berkerja dan konsep asynchronous. Tapi pada akhirnya ini masih opsional yep.

Selain itu, pastikan kamu sudah menginstall electron.js dan membuat electron app, disini sudah tersedia beberapa ready made electron app yang bisa kamu coba beserta cara menginstall

Langkah Installasi:

Pada dasarnya electron.js menggunakan node.js dibalik layar, sehingga sangat bisa bagi kita untuk menggunakan paket node. Install discord rich presence package,

npm i discord-rpc
atau jika menggunakan yarn
yarn install discord-rpc

Setelah itu install electron packager, fungsinya untuk membuild kode electron menjadi desktop app. Install menjadi devDependencies, karena devDependencies akan di remove ketika aplikasi dibuild. Karena paket ini hanya digunakan untuk konversi kode menjadi aplikasi jadi. Package ini tidak berpengaruh ke fungsionalitas aplikasi setelah di deploy.

Buat Discord Developer Apps untuk Discord Rich Presence

Tahapan ini kita akan membuat discord developer application, yang memungkinkan untuk meminta izin dan mengakses fitur pada discord SDK. Pada portal discord developer, klik tombol create application dan akan muncul popup, masukkan nama aplikasi.

Berikut tampilan dashboard ketika kita memasuki salah discord developer tool:

Kamu bisa kustomisasi desain app icon di general information, termasuk informasi name application dan terkait. Ini untuk membedakan discord application mu dengan yang lainnya. Name di general information ini biasanya akan muncul di status discord setelah teks Playing…, Listening…,

Di general information juga terdapat application ID yang nanti akan kita gunakan di baris kode. Nah, untuk display informasi status discord kustom ini tersedia di menu rich presence, yang mana tersedia dua sub menu.

Art Assets, menyimpan gambar untuk rich presence, Kamu bisa upload gambar disini agar dapat diakses aplikasi. Visualizer, semacam preview untuk rich presence.

Silahkan atur informasi discord rich presence seperti apa yang ingin kamu tampilkan. 

Pada “form for presence”, input Image key akan menampilkan pilihan setelah mengupload gambar di art asset, sedangkan large image text adalah teks yang akan muncul saat kursor berada digambar. Tampilan visual data form tersebut dapat dilihat di tab full profile (1), dan untuk mendapatkan konversi kode-nya bisa dilihat di tab show code (3). Kamu bisa copy snippet kode nya.

Konversikan dan Integrasi kode discord rich snippet ke Electron Apps

Selanjutnya, kembali ke development kode discord node.js, kita perlu tambahkan discord-config.js – file berisi informasi discord application mirip format json. Dan file main-ds.js untuk fungsi aktivitas discord rich presence, Lihat struktur direktori berikut:

Untuk discord-config.js kita akan pakai kode ini :

const discordConfig = {
    "CLIENT_ID": "YOUR_DISCORD_CLIENT_ID",
    "rpc_activity": {
        "details": "YourDetailsHere",
        "state": "Playing Nako Music",
        "largeImageKey": "nakofesta",
        "largeImageText": "Nako Fest",
        "smallImageKey": "arugaming",
        "smallImageText": "Unfortunate + Lucky",
        "buttons": [
            {
                "label": "Watch HitoriBocchi",
                "url": "https://www.youtube.com/playlist?list=PLwLSw1_eDZl0ZiaSDAvwTj-UdetIHI6xm"
            },
            {"label": "Nako Music", "url": "https://s.id/wahaha"}
        ]
    }
}

module.exports = discordConfig

Kalian isi informasi di dalam variable discordConfig, sesuai dengan data generated di show code rich presence. Kemudian pada main-ds.js kita buat fungsionalitas untuk discord rich presence.

Misal

static void UpdatePresence()
{
    DiscordRichPresence discordPresence;
    memset(&discordPresence, 0, sizeof(discordPresence));
    discordPresence.state = "Dont Forget Follow";
    discordPresence.details = "WahahaForever";
    discordPresence.startTimestamp = 1507665886;
    discordPresence.endTimestamp = 1507665886;
    discordPresence.largeImageKey = "nakofesta";
    discordPresence.largeImageText = "Nako Fest";
    discordPresence.smallImageKey = "arugaming";
    discordPresence.smallImageText = "Unfortunate + Lucky";
    discordPresence.partyId = "1";
    Discord_UpdatePresence(&discordPresence);
}

Kamu salin beberapa value yang ingin kamu tampilkan atau gunakan untuk discord rich presence, misal untuk state dan Image dengan contoh snippet kode discord-config.js diatas maka yang berubah adalah bagian ini.

const discordConfig = {
    "CLIENT_ID": "YOUR_DISCORD_CLIENT_ID",
…
        "state": "Dont Forget Follow",
        "largeImageKey": "nakofesta",
        "largeImageText": "Nako Fest",
        "smallImageKey": "arugaming",
        "smallImageText": "Unfortunate + Lucky",
…

Sekarang, kita buat module untuk aktivitas discord rich presence memakai Node.js

Setelah itu buat main-ds.js, kita export module const discordconfig, lalu meminta aksesnya ke file main-ds, panggil var discordConfig = require('./discord-config')

Kita kemudian menyiapkan komunikasi discord rich presence serta mengakses package nya.

const RPC = require("discord-rpc");

const rpc = new RPC.Client({
    transport: "ipc"
});

Bagaimana kalau kita tambahkan variable baru untuk mempermudah memahami alur?

let startTimestamp = new Date();
let detailsPlay = "";
let step = 0;

Semua variable adalah dinamis, startTimeStamp dan detailsPlay akan berubah menyesuaikan title webcontent (karena electron sebenarnya berbasis chromium, containernya web)

Kemudian kita membuat fungsi untuk aktivitas status di rich discord presence.

async function setActivity(appName, mainWindow, notifyUpdate = false){
    if (!rpc || !mainWindow) {
        return;
    }

    if(detailsPlay !== appName){
        //First check starting app
        detailsPlay = appName
        startTimestamp = new Date()
        console.log(`Welcome! ${detailsPlay}\n`)
    }else if(detailsPlay === appName){
        console.log(`Running... ${detailsPlay}\n`)
    } else if(appName.includes("-") && !appName.includes('Nako Whisp')){
        //then check wether I am playing music where title format artis - music
        detailsPlay = `${appName}`
        console.log(`Playing! ${detailsPlay}\n`)
    } else {
        detailsPlay = 'Nako Music - IDLE'
        console.log(`You Betcha! ${detailsPlay}\n`)
    }

    try {
        await rpc.setActivity(
            {
                details: detailsPlay,
                state: discordConfig.rpc_activity.state,
                startTimestamp,
                largeImageKey: discordConfig.rpc_activity.largeImageKey,
                largeImageText: discordConfig.rpc_activity.largeImageText,
                smallImageKey: discordConfig.rpc_activity.smallImageKey,
                smallImageText: discordConfig.rpc_activity.smallImageText,
                instance: true,
                buttons: discordConfig.rpc_activity.buttons
            }
        );
    }catch (e) {
        throw  e
    }
}

Namanya adalah setActivity, asnychronous function yang menunggu rpc.setActivity untuk menjalankan tugas menampilkan hasil visual status ke Discord berdasarkan argumen didalam setActivity(). Nilai value details saya ganti dengan detailsPlay yang akan meng assign value appName yang berbeda-beda tergantung kondisi tertentu.

Selain itu, kamu bisa langsung pakai variable jika memang ingin visualnya statis sejak awal dideklarasikan.

    try {
        await rpc.setActivity(
             discordConfig.rpc_activity
        );
    } catch (e) {
        throw  e
    }

Yeah, kita perlu “login” dahulu sebelum set aktivitas

function discordLogin(){
    rpc.login({
        clientId: discordConfig.CLIENT_ID,
    }).catch(console.error)
}

Untuk mendapatkan akses fitur discord kita perlu login dengan mengirim clientID. Yang akan dihandle di discordLogin().