{"id":3134,"date":"2022-09-13T15:59:15","date_gmt":"2022-09-13T15:59:15","guid":{"rendered":"https:\/\/sunaonako.my.id\/?p=3134"},"modified":"2022-11-01T06:03:02","modified_gmt":"2022-11-01T06:03:02","slug":"custom-discord-status-di-electron-pakai-node-js","status":"publish","type":"post","link":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/","title":{"rendered":"Trik Node.js: Buat Auto Custom Discord Status untuk aplikasimu! (Belajar Electron js Desktop)"},"content":{"rendered":"\n

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<\/em> 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.<\/p>\n\n\n\n

Penjelasan dan minimum requirement <\/em>untuk membuat auto update discord rich presence Node.js<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

Selain itu, pastikan kamu sudah menginstall electron.js<\/a> dan membuat electron app<\/a>, disini sudah tersedia beberapa ready made electron app<\/a> yang bisa kamu coba beserta cara menginstall<\/p>\n\n\n\n

Langkah Installasi:<\/p>\n\n\n\n

Pada dasarnya electron.js menggunakan node.js dibalik layar, sehingga sangat bisa bagi kita untuk menggunakan paket node. Install discord rich presence<\/a> package, <\/p>\n\n\n\n

npm i discord-rpc\natau jika menggunakan yarn\nyarn install discord-rpc<\/code><\/pre>\n\n\n\n
Setelah itu install electron packager<\/a>, fungsinya untuk membuild kode electron menjadi desktop app. Install menjadi devDependencies, karena devDependencies akan di remove <\/em>ketika aplikasi dibuild. Karena paket ini hanya digunakan untuk konversi kode menjadi aplikasi jadi. Package ini tidak berpengaruh ke fungsionalitas aplikasi setelah di deploy.<\/p>\n\n\n\n
Buat Discord Developer Apps untuk Discord Rich Presence<\/h2>\n\n\n\n
Tahapan ini kita akan membuat discord developer application, yang memungkinkan untuk meminta izin dan mengakses fitur pada discord SDK. Pada portal discord developer<\/a>, klik tombol create application dan akan muncul popup, masukkan nama aplikasi.<\/p>\n\n\n\n
<\/span><\/span><\/p>\n\n\n\n
\"\"<\/p>\n\n\n\n
Berikut tampilan dashboard ketika kita memasuki salah discord developer tool:<\/p>\n\n\n
\n
\"discord<\/figure>\n<\/div>\n\n\n
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<\/strong>\u2026, Listening\u2026, <\/p>\n\n\n\n
Di general information juga  terdapat application ID yang nanti akan kita gunakan di baris kode. Nah<\/em>, untuk display informasi  status discord kustom ini tersedia di menu rich presence, yang mana tersedia dua sub menu.<\/p>\n\n\n
\n
\"rich<\/figure>\n<\/div>\n\n\n
Art Assets, menyimpan gambar untuk rich presence, Kamu bisa upload gambar disini agar dapat diakses aplikasi. Visualizer<\/em>, semacam preview untuk rich presence. <\/p>\n\n\n\n
Silahkan atur informasi discord rich presence<\/em> seperti apa yang ingin kamu tampilkan.  <\/p>\n\n\n
\n
\"how<\/figure>\n<\/div>\n\n\n
Pada \u201cform for presence\u201d,  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.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Konversikan dan Integrasi kode discord rich snippet ke Electron Apps<\/h2>\n\n\n\n
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:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Untuk discord-config.js<\/strong> kita akan pakai kode ini :<\/p>\n\n\n
const discordConfig = {\n    \"CLIENT_ID\": \"YOUR_DISCORD_CLIENT_ID\",\n    \"rpc_activity\": {\n        \"details\": \"YourDetailsHere\",\n        \"state\": \"Playing Nako Music\",\n        \"largeImageKey\": \"nakofesta\",\n        \"largeImageText\": \"Nako Fest\",\n        \"smallImageKey\": \"arugaming\",\n        \"smallImageText\": \"Unfortunate + Lucky\",\n        \"buttons\": [\n            {\n                \"label\": \"Watch HitoriBocchi\",\n                \"url\": \"https:\/\/www.youtube.com\/playlist?list=PLwLSw1_eDZl0ZiaSDAvwTj-UdetIHI6xm\"\n            },\n            {\"label\": \"Nako Music\", \"url\": \"https:\/\/s.id\/wahaha\"}\n        ]\n    }\n}\n\nmodule.exports = discordConfig\n<\/pre>\n
<\/p>\n\n\n
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.<\/p>\n\n\n\n
Misal <\/p>\n\n\n\n
static void UpdatePresence()\n{\n    DiscordRichPresence discordPresence;\n    memset(&discordPresence, 0, sizeof(discordPresence));\n    discordPresence.state = \"Dont Forget Follow\";\n    discordPresence.details = \"WahahaForever\";\n    discordPresence.startTimestamp = 1507665886;\n    discordPresence.endTimestamp = 1507665886;\n    discordPresence.largeImageKey = \"nakofesta\";\n    discordPresence.largeImageText = \"Nako Fest\";\n    discordPresence.smallImageKey = \"arugaming\";\n    discordPresence.smallImageText = \"Unfortunate + Lucky\";\n    discordPresence.partyId = \"1\";\n    Discord_UpdatePresence(&discordPresence);\n}\n<\/pre>\n\n\n\n
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 <\/a>diatas maka yang berubah adalah  bagian ini.<\/p>\n\n\n\n
const discordConfig = {\n    \"CLIENT_ID\": \"YOUR_DISCORD_CLIENT_ID\",\n\u2026\n        \"state\": \"Dont Forget Follow\",\n        \"largeImageKey\": \"nakofesta\",\n        \"largeImageText\": \"Nako Fest\",\n        \"smallImageKey\": \"arugaming\",\n        \"smallImageText\": \"Unfortunate + Lucky\",\n\ufeff\u2026\n<\/pre>\n\n\n\n
Sekarang, kita buat module untuk aktivitas discord rich presence memakai Node.js<\/h2>\n\n\n\n
Setelah itu buat main-ds.js<\/strong>, kita export module const discordconfig, lalu meminta aksesnya ke file main-ds, panggil var discordConfig = require('.\/discord-config')<\/code> <\/p>\n\n\n\n
Kita kemudian menyiapkan komunikasi discord rich presence serta mengakses package nya.<\/p>\n\n\n\n
const RPC = require(\"discord-rpc\");\n\nconst rpc = new RPC.Client({\n    transport: \"ipc\"\n});\n<\/pre>\n\n\n\n
Bagaimana kalau kita tambahkan variable baru untuk mempermudah memahami alur?<\/p>\n\n\n\n
let startTimestamp = new Date();\nlet detailsPlay = \"\";\nlet step = 0;<\/pre>\n\n\n\n
Semua variable adalah dinamis, startTimeStamp <\/code>dan detailsPlay <\/code>akan berubah menyesuaikan title webcontent (karena electron sebenarnya berbasis chromium, containernya web)<\/p>\n\n\n\n
Kemudian kita membuat fungsi untuk aktivitas status di rich discord presence.<\/p>\n\n\n\n
async function setActivity(appName, mainWindow, notifyUpdate = false){\n    if (!rpc || !mainWindow) {\n        return;\n    }\n\n    if(detailsPlay !== appName){\n        \/\/First check starting app\n        detailsPlay = appName\n        startTimestamp = new Date()\n        console.log(`Welcome! ${detailsPlay}\\n`)\n    }else if(detailsPlay === appName){\n        console.log(`Running... ${detailsPlay}\\n`)\n    } else if(appName.includes(\"-\") && !appName.includes('Nako Whisp')){\n        \/\/then check wether I am playing music where title format artis - music\n        detailsPlay = `${appName}`\n        console.log(`Playing! ${detailsPlay}\\n`)\n    } else {\n        detailsPlay = 'Nako Music - IDLE'\n        console.log(`You Betcha! ${detailsPlay}\\n`)\n    }\n\n    try {\n        await rpc.setActivity(\n            {\n                details: detailsPlay,\n                state: discordConfig.rpc_activity.state,\n                startTimestamp,\n                largeImageKey: discordConfig.rpc_activity.largeImageKey,\n                largeImageText: discordConfig.rpc_activity.largeImageText,\n                smallImageKey: discordConfig.rpc_activity.smallImageKey,\n                smallImageText: discordConfig.rpc_activity.smallImageText,\n                instance: true,\n                buttons: discordConfig.rpc_activity.buttons\n            }\n        );\n    }catch (e) {\n        throw  e\n    }\n}\n<\/pre>\n\n\n\n
Namanya adalah setActivity<\/code>, asnychronous function yang menunggu rpc.setActivity<\/code> untuk menjalankan tugas menampilkan hasil visual status ke Discord berdasarkan argumen didalam setActivity(). Nilai value details <\/code>saya ganti dengan detailsPlay <\/code>yang akan meng assign value appName <\/code>yang berbeda-beda tergantung kondisi tertentu.<\/p>\n\n\n\n
Selain itu, kamu bisa langsung pakai variable jika memang ingin visualnya statis sejak awal dideklarasikan. <\/p>\n\n\n\n
    try {\n        await rpc.setActivity(\n             discordConfig.rpc_activity\n        );\n    } catch (e) {\n        throw  e\n    }<\/pre>\n\n\n\n
Yeah, kita perlu “login” dahulu sebelum set aktivitas<\/p>\n\n\n\n
function discordLogin(){\n    rpc.login({\n        clientId: discordConfig.CLIENT_ID,\n    }).catch(console.error)\n}\n<\/pre>\n\n\n\n
Untuk mendapatkan akses fitur discord  kita perlu login  dengan mengirim clientID. Yang akan dihandle di discordLogin().<\/p>\n\n\n\n
<\/p>\n\n\n\n\n\n\n\n
Cara implementasi Auto Changing Discord Status: Discord Rich Presence Dinamis<\/h2>\n\n\n\n
Kemudian kita akan menerapkan dinamic changing, cool discord status stuff, kita buat fungsi discordStarted dan discordUpdate.<\/p>\n\n\n\n
async function discordStarted(appName, mainWindow) {\n    discordLogin()\n    console.log(`CURRENTLY STARTING PRESSENCE`)\n    rpc.once('ready', () => {\n\n        console.log('[DEBUG] Presence now active!')\n        console.log('[WAHAHA] Do you love applied tech or even trivia tech? Follow and subscribe nakotek')\n        console.log('=================== Error Output ===================')\n\n        setActivity(appName, mainWindow, false);\n\n    });\n}\n\nasync function discordUpdate(appName, mainWindow) {\n    \/\/discordLogin()\n    console.log(`CURRENTLY UPDATING PRESSENCE`)\n    if (appName == null)\n        appName = ''\n    step = step + 1;\n    console.log(`[DEBUG] Presence now UPDATED! ${step}`)\n    console.log('[WAHAHA] Please turn notification of sunaonako.my.id')\n    console.log('=================== Error Output ===================')\n\n    await setActivity(appName, mainWindow, true);\n}\n<\/pre>\n\n\n\n
Dua fungsi ini untuk eksekusi setActivity, DiscordStarted <\/code>logic bekerja  ketika event rpc.once<\/code> ready <\/em>menjalankan setActivity. Sedangkan DiscordUpdate <\/code>disini tidak perlu melakukan cek event. tetapi nanti akan menjadi continuous function. yang dipanggil selama event rpc continue.<\/p>\n\n\n\n
Oke, full code untuk main-ds.js<\/strong> nya seperti ini:<\/p>\n\n\n
var discordConfig = require('.\/discord-config')\n\nconst RPC = require(\"discord-rpc\");\n\nconst rpc = new RPC.Client({\n    transport: \"ipc\"\n});\n\nlet startTimestamp = new Date();\nlet detailsPlay = \"\";\nlet step = 0;\n\n\/\/Set Activity For Discord Rich Presence\nasync function setActivity(appName, mainWindow, notifyUpdate = false) {\n    if (!rpc || !mainWindow) {\n        return;\n    }\n\n    if (detailsPlay !== appName) {\n        \/\/First check starting app\n        detailsPlay = appName\n        startTimestamp = new Date()\n        console.log(`Welcome! ${detailsPlay}\\n`)\n    } else if (detailsPlay === appName) {\n        console.log(`Running... ${detailsPlay}\\n`)\n    } else if (appName.includes(\"-\") && !appName.includes('Nako Whisp')) {\n        \/\/then check wether I am playing music where title format artis - music\n        detailsPlay = `${appName}`\n        console.log(`Playing! ${detailsPlay}\\n`)\n    } else {\n        detailsPlay = 'Nako Music - IDLE'\n        console.log(`You Betcha! ${detailsPlay}\\n`)\n    }\n\n    try {\n        await rpc.setActivity(\n            \/\/ discordConfig.rpc_activity\n            {\n                details: detailsPlay,\n                state: discordConfig.rpc_activity.state,\n                startTimestamp,\n                largeImageKey: discordConfig.rpc_activity.largeImageKey,\n                largeImageText: discordConfig.rpc_activity.largeImageText,\n                smallImageKey: discordConfig.rpc_activity.smallImageKey,\n                smallImageText: discordConfig.rpc_activity.smallImageText,\n                instance: true,\n                buttons: discordConfig.rpc_activity.buttons\n            }\n        );\n    } catch (e) {\n        throw  e\n    }\n}\n\nasync function discordStarted(appName, mainWindow) {\n    discordLogin()\n    console.log(`CURRENTLY STARTING PRESSENCE`)\n    rpc.once('ready', () => {\n\n        console.log('[DEBUG] Presence now active!')\n        console.log('[WARN] Do not close this Console as it will terminate the rpc')\n        console.log('=================== Error Output ===================')\n\n        setActivity(appName, mainWindow, false);\n\n    });\n}\n\nasync function discordUpdate(appName, mainWindow) {\n    \/\/discordLogin()\n    console.log(`CURRENTLY UPDATING PRESSENCE`)\n    if (appName == null)\n        appName = ''\n    step = step + 1;\n    console.log(`[DEBUG] Presence now UPDATED! ${step}`)\n    console.log('[WARN] Do not close this Console as it will terminate the rpc')\n    console.log('=================== Error Output ===================')\n\n    await setActivity(appName, mainWindow, true);\n}\n\nfunction discordLogin() {\n    rpc.login({\n        clientId: discordConfig.CLIENT_ID,\n    }).catch(console.error)\n}\n\n\nmodule.exports = {discordStarted, discordUpdate, discordLogin, rpc, detailsPlay, startTimestamp};\n<\/pre>\n
<\/p>\n\n\n
Bagaimana Cara Menerapkan Discord Rich Presence ke Electron.js Application | Custom Discord Status<\/h2>\n\n\n\n
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<\/em> package.json<\/strong>.<\/p>\n\n\n\n
{\n  \"name\": \"nakomusic\",\n  \"productName\": \"Nako Music\",\n  \"version\": \"1.1.5\",\n  \"description\": \"Grand Legacy\",\n  \"main\": \"main.js\",\n  \"scripts\": {\n    \"start\": \"electron main.js\",\n    \"build\": \"electron-builder\",\n    \"pack\": \"electron-builder --dir\",\n    \"dist\": \"electron-builder -mwl\"\n  },\n  \"author\": \"Sunao Nako\",\n  \"license\": \"CC0-1.0\",\n  \"devDependencies\": {\n    \"electron\": \"^16.0.6\",\n    \"electron-packager\": \"^16.0.0\"\n  },\n  \"build\": {\n    \"mac\": {\n      \"category\": \"public.app-category.entertainment\"\n    },\n    \"appId\": \"Nako-music\"\n  },\n  \"dependencies\": {\n    \"discord-rpc\": \"^4.0.1\",\n    \"discord.js\": \"^14.3.0\"\n  }\n}\n<\/pre>\n\n\n\n
Aplikasi berjalan dimulai di main.js (perhatikan  “start”: “electron main.js”), sehingga ketika saya terapkan fungsi discord presence disana, I hope it started<\/em> ketika program mulai berjalan.  Untuk style electron window dibuat di config.js dengan code seperti berikut.<\/p>\n\n\n\n
const nakoElectron = {\n\n    'URL' : 'YOUR_URL',\n\n    \/\/ Application Name\n    'appName' : 'Nako Music',\n\n    \/\/ Application window width and height\n    'width' : 1280,\n    'height' : 800,\n    'minWidth' : 1280,\n    'minHeight' : 800,\n}\n\nmodule.exports = nakoElectron\n<\/pre>\n\n\n\n
baru di main.js<\/strong> (kode electron utama), panggil beberapa module dari electron dan main discord kita.<\/p>\n\n\n\n
const {discordUpdate, discordStarted, discordLogin, rpc} = require('.\/mydiscord\/main-ds')\nconst {app, BrowserWindow, ipcMain, Menu, dialog} = require('electron')\nconst path = require('path')<\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
Kita akan jalankan rich presence discord sesaat webcontent selesai di load.<\/p>\n\n\n\n
function createWindow() {\n    mainWindow = new BrowserWindow({\n        width: appConfig['width'],\n        height: appConfig['height'],\n        minWidth: appConfig['minWidth'],\n        minHeight: appConfig['minHeight'],\n        webPreferences: {\n            nodeIntegration: true,\n            contextIsolation: false,\n            \/\/ sandbox: true\n        },\n        titleBarStyle: 'hidden',\n        titleBarOverlay: {\n            color: '#1f2f48',\n            symbolColor: '#00e0e2'\n        },\n    })\n\n    mainWindow.once('ready-to-show', () => {\n        mainWindow.maximize()\n    })\n\n    \/\/Load the content\n    loadMainContent()\n}\n\nfunction loadMainContent() {\n    \/\/Loading screen run first\n    mainWindow.loadFile(path.join(__dirname, 'public\/loading.html'))\n\n    \/\/create Web Contents\n    wc = mainWindow.webContents\n    console.log(`first status ${isItSuccessfullyLoad}`)\n\n    wc.once('did-finish-load', async () => {\n            await mainWindow.loadURL(appConfig['URL']).then(() => isItSuccessfullyLoad = true);\n            console.log(`is it successfullyload! ${isItSuccessfullyLoad}`)\n            if(isItSuccessfullyLoad === true){\n                try {\n                    let me = wc.getTitle()\n                    await discordStarted(me, mainWindow)\n                    console.log(`it Loadable! ${isItSuccessfullyLoad} + ${me}\\n`)\n                }catch (e) {\n                    throw e\n                }\n            }\n        }\n    )\n\n}<\/code><\/pre>\n\n\n\n
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().<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
app.whenReady().then(createWindow)<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
 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<\/p>\n\n\n\n
function updatePresence() {\n    if(mainWindow !== undefined){\n        let wcu = mainWindow.webContents\n        discordUpdate(wcu.getTitle(), mainWindow,)\n    }\n}\n\ntrackIntervalUpdateDiscord = () => setInterval(updatePresence, 40000)\n\nrpc.on('connected', trackIntervalUpdateDiscord)\ndiscordLogin()\n\n<\/code><\/pre>\n\n\n\n
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()<\/p>\n\n\n\n
Contoh:<\/p>\n\n\n\n
app.on('window-all-closed', () => {\n    if (process.platform !== 'darwin') {\n        app.quit()\n    }\n    clearInterval(trackIntervalUpdateDiscord)\n}) <\/pre>\n\n\n\n
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<\/code><\/p>\n\n\n\n
Kesimpulan Membuat Discord Status Menarik untuk aplikasi buatanmu (Electron with node.js case)<\/h3>\n\n\n\n
  1. Pertama, kita membuat aplikasi developer discord, ini equivalent dengan membuat facebook developer apps agar dapat mengakses fitur yang dimiliki facebook.<\/li>
  2. Install node package discord-rich-presence<\/li>
  3. Install electron-builder<\/li>
  4. discord-config.js berisi parameter menyerupakan snippet kode yang didapat dari “show code” di discord developer application <\/li>
  5. main-ds.js berisi javascript method untuk handling login, starting, dan updating discord rich presence<\/li>
  6. 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. <\/li><\/ol>\n\n\n\n
    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<\/a>. Jika kamu tertarik untuk belajar cross-platform development<\/a>, mungkin kamu juga akan tertarik belajar flutter.<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    \n
    \"Discord<\/figure>\n\n\n\n
    \"discord<\/figure>\n\n\n\n
    \"Discord<\/figure>\n<\/figure>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    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…<\/p>\n","protected":false},"author":2,"featured_media":3258,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"gallery","meta":{"footnotes":""},"categories":[1196,728,1],"tags":[727,1195,1194,726,1193],"class_list":["post-3134","post","type-post","status-publish","format-gallery","has-post-thumbnail","hentry","category-desktop-development","category-software-development","category-unfortunate","tag-crossplatform","tag-discord","tag-electron-js","tag-multiplatform-development","tag-nodejs","post_format-post-format-gallery"],"yoast_head":"\nTrik Node.js: Buat Discord Status Custom Dinamis d Electron<\/title>\n<meta name=\"description\" content=\"Panduan membuat Discord Status Dinamis pakai node.js, Discord Rich Presence pada aplikasi electron js dengan auto changing status discord. Tips Electron Desktop\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/\" \/>\n<link rel=\"next\" href=\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trik Node.js: Buat Auto Custom Discord Status untuk aplikasimu! (Belajar Electron js Desktop)\" \/>\n<meta property=\"og:description\" content=\"Panduan membuat Discord Status Dinamis pakai node.js, Discord Rich Presence pada aplikasi electron js dengan auto changing status discord. Tips Electron Desktop\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Hilarious Developer School\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-13T15:59:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-01T06:03:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/09\/custom-discord1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"nakomin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"nakomin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/\"},\"author\":{\"name\":\"nakomin\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"headline\":\"Trik Node.js: Buat Auto Custom Discord Status untuk aplikasimu! (Belajar Electron js Desktop)\",\"datePublished\":\"2022-09-13T15:59:15+00:00\",\"dateModified\":\"2022-11-01T06:03:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/\"},\"wordCount\":1278,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/09\/custom-discord1.jpg\",\"keywords\":[\"crossplatform\",\"discord\",\"electron js\",\"multiplatform development\",\"nodejs\"],\"articleSection\":[\"Desktop Development\",\"Software Development\",\"Unfortunate\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/\",\"url\":\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/\",\"name\":\"Trik Node.js: Buat Discord Status Custom Dinamis d Electron\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/09\/custom-discord1.jpg\",\"datePublished\":\"2022-09-13T15:59:15+00:00\",\"dateModified\":\"2022-11-01T06:03:02+00:00\",\"description\":\"Panduan membuat Discord Status Dinamis pakai node.js, Discord Rich Presence pada aplikasi electron js dengan auto changing status discord. Tips Electron Desktop\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#primaryimage\",\"url\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/09\/custom-discord1.jpg\",\"contentUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/09\/custom-discord1.jpg\",\"width\":1200,\"height\":675,\"caption\":\"Discord Rich Presence dynamic auto changing for electron.js tutorial\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sunaonako.my.id\/#website\",\"url\":\"https:\/\/sunaonako.my.id\/\",\"name\":\"Hilarious Developer School\",\"description\":\"Catatan Developer tentang Kurikulum Dunia Modern\",\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sunaonako.my.id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\",\"name\":\"nakomin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png\",\"contentUrl\":\"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png\",\"width\":\"250\",\"height\":\"250\",\"caption\":\"nakomin\"},\"logo\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/\"},\"description\":\"Believe at the heart of BNRS Here you will find content about developers needs whether it\u2019s coding tutorials or the lifestyle of employee in the IT circle, understanding of the realm of ui\/ux and futuristic tech for free in one place. Don\u2019t forget to follow the nakotek socials to give the author enthusiasm in pioneering this website. #wahahaforever\",\"sameAs\":[\"https:\/\/sunaonako.my.id\"],\"url\":\"https:\/\/sunaonako.my.id\/tomodachi\/nakomin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Trik Node.js: Buat Discord Status Custom Dinamis d Electron","description":"Panduan membuat Discord Status Dinamis pakai node.js, Discord Rich Presence pada aplikasi electron js dengan auto changing status discord. Tips Electron Desktop","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/","next":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/2\/","og_locale":"en_US","og_type":"article","og_title":"Trik Node.js: Buat Auto Custom Discord Status untuk aplikasimu! (Belajar Electron js Desktop)","og_description":"Panduan membuat Discord Status Dinamis pakai node.js, Discord Rich Presence pada aplikasi electron js dengan auto changing status discord. Tips Electron Desktop","og_url":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/","og_site_name":"Hilarious Developer School","article_published_time":"2022-09-13T15:59:15+00:00","article_modified_time":"2022-11-01T06:03:02+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/09\/custom-discord1.jpg","type":"image\/jpeg"}],"author":"nakomin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"nakomin","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#article","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/"},"author":{"name":"nakomin","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"headline":"Trik Node.js: Buat Auto Custom Discord Status untuk aplikasimu! (Belajar Electron js Desktop)","datePublished":"2022-09-13T15:59:15+00:00","dateModified":"2022-11-01T06:03:02+00:00","mainEntityOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/"},"wordCount":1278,"commentCount":0,"publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/09\/custom-discord1.jpg","keywords":["crossplatform","discord","electron js","multiplatform development","nodejs"],"articleSection":["Desktop Development","Software Development","Unfortunate"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/","url":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/","name":"Trik Node.js: Buat Discord Status Custom Dinamis d Electron","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#primaryimage"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/09\/custom-discord1.jpg","datePublished":"2022-09-13T15:59:15+00:00","dateModified":"2022-11-01T06:03:02+00:00","description":"Panduan membuat Discord Status Dinamis pakai node.js, Discord Rich Presence pada aplikasi electron js dengan auto changing status discord. Tips Electron Desktop","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/blog\/custom-discord-status-di-electron-pakai-node-js\/#primaryimage","url":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/09\/custom-discord1.jpg","contentUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/09\/custom-discord1.jpg","width":1200,"height":675,"caption":"Discord Rich Presence dynamic auto changing for electron.js tutorial"},{"@type":"WebSite","@id":"https:\/\/sunaonako.my.id\/#website","url":"https:\/\/sunaonako.my.id\/","name":"Hilarious Developer School","description":"Catatan Developer tentang Kurikulum Dunia Modern","publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sunaonako.my.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a","name":"nakomin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/","url":"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png","contentUrl":"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png","width":"250","height":"250","caption":"nakomin"},"logo":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/"},"description":"Believe at the heart of BNRS Here you will find content about developers needs whether it\u2019s coding tutorials or the lifestyle of employee in the IT circle, understanding of the realm of ui\/ux and futuristic tech for free in one place. Don\u2019t forget to follow the nakotek socials to give the author enthusiasm in pioneering this website. #wahahaforever","sameAs":["https:\/\/sunaonako.my.id"],"url":"https:\/\/sunaonako.my.id\/tomodachi\/nakomin\/"}]}},"_links":{"self":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/comments?post=3134"}],"version-history":[{"count":1,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3134\/revisions"}],"predecessor-version":[{"id":3456,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3134\/revisions\/3456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media\/3258"}],"wp:attachment":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media?parent=3134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/categories?post=3134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/tags?post=3134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}