Cara implementasi Auto Changing Discord Status: Discord Rich Presence Dinamis
Kemudian kita akan menerapkan dinamic changing, cool discord status stuff, kita buat fungsi discordStarted dan discordUpdate.
async function discordStarted(appName, mainWindow) {
discordLogin()
console.log(`CURRENTLY STARTING PRESSENCE`)
rpc.once('ready', () => {
console.log('[DEBUG] Presence now active!')
console.log('[WAHAHA] Do you love applied tech or even trivia tech? Follow and subscribe nakotek')
console.log('=================== Error Output ===================')
setActivity(appName, mainWindow, false);
});
}
async function discordUpdate(appName, mainWindow) {
//discordLogin()
console.log(`CURRENTLY UPDATING PRESSENCE`)
if (appName == null)
appName = ''
step = step + 1;
console.log(`[DEBUG] Presence now UPDATED! ${step}`)
console.log('[WAHAHA] Please turn notification of sunaonako.my.id')
console.log('=================== Error Output ===================')
await setActivity(appName, mainWindow, true);
}
Dua fungsi ini untuk eksekusi setActivity, DiscordStarted logic bekerja ketika event rpc.once ready menjalankan setActivity. Sedangkan DiscordUpdate disini tidak perlu melakukan cek event. tetapi nanti akan menjadi continuous function. yang dipanggil selama event rpc continue.
Oke, full code untuk main-ds.js nya seperti ini:
var discordConfig = require('./discord-config')
const RPC = require("discord-rpc");
const rpc = new RPC.Client({
transport: "ipc"
});
let startTimestamp = new Date();
let detailsPlay = "";
let step = 0;
//Set Activity For Discord Rich 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(
// discordConfig.rpc_activity
{
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
}
}
async function discordStarted(appName, mainWindow) {
discordLogin()
console.log(`CURRENTLY STARTING PRESSENCE`)
rpc.once('ready', () => {
console.log('[DEBUG] Presence now active!')
console.log('[WARN] Do not close this Console as it will terminate the rpc')
console.log('=================== Error Output ===================')
setActivity(appName, mainWindow, false);
});
}
async function discordUpdate(appName, mainWindow) {
//discordLogin()
console.log(`CURRENTLY UPDATING PRESSENCE`)
if (appName == null)
appName = ''
step = step + 1;
console.log(`[DEBUG] Presence now UPDATED! ${step}`)
console.log('[WARN] Do not close this Console as it will terminate the rpc')
console.log('=================== Error Output ===================')
await setActivity(appName, mainWindow, true);
}
function discordLogin() {
rpc.login({
clientId: discordConfig.CLIENT_ID,
}).catch(console.error)
}
module.exports = {discordStarted, discordUpdate, discordLogin, rpc, detailsPlay, startTimestamp};
Bagaimana Cara Menerapkan Discord Rich Presence ke Electron.js Application | Custom Discord Status
Implementasi berikutnya, kita akan menjalankan discord rich presence sesaat aplikasi electron dijalankan. Kita akan terapkan di main file program jalan. Take a look at script package.json.
{
"name": "nakomusic",
"productName": "Nako Music",
"version": "1.1.5",
"description": "Grand Legacy",
"main": "main.js",
"scripts": {
"start": "electron main.js",
"build": "electron-builder",
"pack": "electron-builder --dir",
"dist": "electron-builder -mwl"
},
"author": "Sunao Nako",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^16.0.6",
"electron-packager": "^16.0.0"
},
"build": {
"mac": {
"category": "public.app-category.entertainment"
},
"appId": "Nako-music"
},
"dependencies": {
"discord-rpc": "^4.0.1",
"discord.js": "^14.3.0"
}
}
Aplikasi berjalan dimulai di main.js (perhatikan “start”: “electron main.js”), sehingga ketika saya terapkan fungsi discord presence disana, I hope it started ketika program mulai berjalan. Untuk style electron window dibuat di config.js dengan code seperti berikut.
const nakoElectron = {
'URL' : 'YOUR_URL',
// Application Name
'appName' : 'Nako Music',
// Application window width and height
'width' : 1280,
'height' : 800,
'minWidth' : 1280,
'minHeight' : 800,
}
module.exports = nakoElectron
baru di main.js (kode electron utama), panggil beberapa module dari electron dan main discord kita.
const {discordUpdate, discordStarted, discordLogin, rpc} = require('./mydiscord/main-ds')
const {app, BrowserWindow, ipcMain, Menu, dialog} = require('electron')
const path = require('path')ipcMain adalah inter processing communication utama, dalam electron js, ipcMain berfungsi untuk menerima traffic data dari chromium browser serta “mengawasi” status yang dikirim. Oke masih di main.js.
Kita akan jalankan rich presence discord sesaat webcontent selesai di load.
function createWindow() {
mainWindow = new BrowserWindow({
width: appConfig['width'],
height: appConfig['height'],
minWidth: appConfig['minWidth'],
minHeight: appConfig['minHeight'],
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
// sandbox: true
},
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#1f2f48',
symbolColor: '#00e0e2'
},
})
mainWindow.once('ready-to-show', () => {
mainWindow.maximize()
})
//Load the content
loadMainContent()
}
function loadMainContent() {
//Loading screen run first
mainWindow.loadFile(path.join(__dirname, 'public/loading.html'))
//create Web Contents
wc = mainWindow.webContents
console.log(`first status ${isItSuccessfullyLoad}`)
wc.once('did-finish-load', async () => {
await mainWindow.loadURL(appConfig['URL']).then(() => isItSuccessfullyLoad = true);
console.log(`is it successfullyload! ${isItSuccessfullyLoad}`)
if(isItSuccessfullyLoad === true){
try {
let me = wc.getTitle()
await discordStarted(me, mainWindow)
console.log(`it Loadable! ${isItSuccessfullyLoad} + ${me}\n`)
}catch (e) {
throw e
}
}
}
)
}Kita jalankan semua konten (termasuk discord rich presence dan konten web setelah membuat tempat konten tersebut disajikan, jadi createWindow dilakukan terlebih dahulu setelah itu fungsi loadMainContent().
Asychronous akan melakukan cek load url lalu load discord rich presence SDK, untuk mendapatkan discord status yang dinamis dan dapat berubah kita ambil judul dari konten. Cara mengambil value dari electron.js webcontent title cukup mudah sudah ada methodnya. mainWindow.webContent.getTitle(). Semua dilakukan setelah loading webcontent selesai di fetch. Bagaimana cara menjalankan proses? Salah satunya adalah dengan menggunakan promise bahwa electron app sudah siap berjalan.
app.whenReady().then(createWindow)Kemudian kita akan buat “bot discord”, seolah-olah dia melakukan update status sendiri setiap interval tertentu. Kita akan buat discordUpdate menjadi fungsi javascript yang terus berjalan. Caranya dengan assign ke parameter method setInterval
function updatePresence() {
if(mainWindow !== undefined){
let wcu = mainWindow.webContents
discordUpdate(wcu.getTitle(), mainWindow,)
}
}
trackIntervalUpdateDiscord = () => setInterval(updatePresence, 40000)
rpc.on('connected', trackIntervalUpdateDiscord)
discordLogin()
Selama rpc terhubung akan dilakukan trackIntervalUpdateDiscord, yaitu secara berulang menjalankan fungsi updatePresence setelah 40 detik. Ingat! TOS Discord tidak membolehkan eksploitasi request berlebihan, minimal ada jeda 30 detik. Untuk menghentikan fungsi dalam setInterval di Javascript ada clearInterval()
Contoh:
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
clearInterval(trackIntervalUpdateDiscord)
}) Untuk build application desktop untuk electron perhatikan package json. Di kode script tersebut terdapat parameter pack. jalankan npm run pack / yarn run pack atau jalankan electron-builder --dir
Kesimpulan Membuat Discord Status Menarik untuk aplikasi buatanmu (Electron with node.js case)
- Pertama, kita membuat aplikasi developer discord, ini equivalent dengan membuat facebook developer apps agar dapat mengakses fitur yang dimiliki facebook.
- Install node package discord-rich-presence
- Install electron-builder
- discord-config.js berisi parameter menyerupakan snippet kode yang didapat dari “show code” di discord developer application
- main-ds.js berisi javascript method untuk handling login, starting, dan updating discord rich presence
- Implementasikan di electron.js main kode dan start rich presence di saat event webcontent did-finish-load, lalu updateDiscord melakukan load ketika koneksi ke discord terhubung.
Sekarang, kita lihat demo custom status discord, lumayan bisa pamerin aplikasimu ke teman-teman tanpa harus menyombong :D. Jangan lupa untuk subscribe sunaonako.my.id. Jika kamu tertarik untuk belajar cross-platform development, mungkin kamu juga akan tertarik belajar flutter.
Join our list
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Thank you for subscribing.
Something went wrong.
0 Comments