Membangun UndTube Downloader: Aplikasi Unduhan MP4 dan MP3 YouTube dengan Electron.js dan yt-dlp

Bagi siapa saja yang sering berurusan dengan konten media, kebutuhan untuk mengunduh video atau audio dari YouTube adalah hal yang lumrah terjadi. Namun ribetnya, kebanyakan layanan downloader banyak dipenuhi dengan iklan yang mengganggu, beberapa pop-up berbahaya, atau memiliki batasan resolusi yang memaksa untuk membayar akses ke premium agar aplikasi dapat digunakan.

Berangkat dari keresahan tersebut saya mengambil sebuah keputusan untuk mencoba membuat sebuah tools atau aplikasi desktop yang bisa melakukan pengunduhan dari YouTube (UndTube Downloader).

Artikel ini saya tulis untuk membagikan pengalaman di balik layar bagaimana saya membangun aplikasi ini menggunakan perpaduan Electron.js, yt-dlp, FFmpeg, dan FFprobe.

Mengapa Electron dan yt-dlp?

Saat mendesain arsitektur UndTube, saya menggunakan Electron.js dikarenakan dalam banyak pekerjaan yang saya lakukan sangat sering berhadapan dengan teknologi web standar (HTML/CSS/JS). Dari sinilah Electron.js mutlak menjadi kebutuhan saya dalam pengembangan UndTube Downloader ini.

Mesin yt-dlp (sebuah fork popular dari youtube-dl) adalah sebuah alat berbasis command-line yang sangat kuat dan secara aktif diperbarui untuk mengatasi perubahan algoritma YouTube dan menjadi sebuah mesin di belakang layar yang dapat dimanfaatkan untuk melakukan proses unduhan video maupun audio dari YouTube. Inilah alasan mendasar pada sisi backend pengunduhan, saya memilih menggunakan yt-dlp.

Press enter or click to view image in full size

Fitur Unggulan UndTube Downloader

Saya merancang UndTube tidak hanya sekadar bisa mengunduh, tetapi juga memberikan pengalaman pengguna (UX) yang mulus, diantaranya:

1. Antarmuka Bersih & Modern

Saya tidak menggunakan framework UI yang berat. Berbekal CSS murni dan tipografi dari Google Fonts (Inter), antarmuka UndTube ini dirancang sangat minimalis. Di dalam sidebar, pengguna bisa langsung menempelkan URL, memilih format (Video MP4, Audio MP3, atau Raw), dan dapat menentukan folder penyimpanan lokal yang diinginkan.

// main.js[cite: 3]
ipcMain.handle('select-folder', async () => {
    const result = await dialog.showOpenDialog(mainWindow, {
        title: 'Pilih Folder Penyimpanan',
        properties: ['openDirectory']
    });
    if (!result.canceled && result.filePaths.length > 0) {
        currentDownloadPath = result.filePaths[0];
        return currentDownloadPath;
    }
    return null;
});

2. Auto-Paste URL

Salah satu fitur favorit saya adalah sebuah fungsi deteksi clipboard otomatis. Dengan memanfaatkan API navigator.clipboard aplikasi UndTube Downloader akan langsung membaca tautan link YouTube yang baru saja disalin, begitu jendela aplikasi UndTube dipilih kita tidak perlu lagi repot melakukan klik kanan dan paste. Tautan yang telah disalin sebelumnya telah otomatis ditempelkan.

// renderer.js[cite: 9]
async function checkClipboardForURL() {
    const text = await window.electronAPI.readClipboard();
    const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/;

    // Otomatis isi input jika clipboard berisi link YouTube[cite: 9]
    if (urlInput.value === '' && youtubeRegex.test(text.trim())) {
        urlInput.value = text.trim();
    }
}

// Jalankan setiap kali jendela aplikasi mendapatkan fokus[cite: 9]
window.addEventListener('focus', checkClipboardForURL);

3. Manajemen Unduhan Tingkat Lanjut (Jeda, Lanjut, Batal)

Aplikasi UndTube tidak secara default membiarkan kita pasrah terhadap proses unduhan. Melalui komunikasi ipcMain dan ipcRenderer yang solid, setiap tugas unduhan dibuatkan “kartu tugas” (Task Card). Dimana dengan ini kita atau pengguna dapat melihat progress bar, teks status, dan bahkan menekan tombol Jeda (Pause), Lanjutkan (Resume), atau Batalkan (Cancel) pada proses unduhan yang saat itu aktif.

4. Ekstensi Browser Lokal

Untuk lebih memudahkan, saya menyematkan server HTTP lokal (Node.js) yang berjalan di port 49152. Ini berfungsi sebagai jembatan komunikasi antara aplikasi desktop dengan ekstensi Chrome khusus (UndTub-Agent) yang memungkinkan pengunduhan langsung dari halaman browser.

Tantangan Teknis & Pelajaran Yang Saya Temukan

Membangun aplikasi ini bukan tanpa rintangan. Ada beberapa tantangan teknis utama yang Alhamdulilah-nya tantangan tersebut bisa diatasi dan mungkin bisa menjadi informasi tambahan bagi developer Electron lainnya. Insya Allah:

1. Tragedi Unduhan Video Bisu (Integrasi FFmpeg dan FFprobe)

YouTube saat ini memisahkan aliran (stream) video dan audio pada kualitas resolusi tinggi (DASH formats). Awalnya saat uji coba saya melakukan proses unduhan MP4 video yang di download bisu (audio atau suara tidak secara otomatis digabungkan menjadi satu file utuh.

Ini dikarenakan mesin yt-dlp yang digunakan akan mengunduh video dan audio secara terpisah. Jika tidak ada FFmpeg dan FFprobe hasil akhir video yang diunduh tidak akan bersuara meskipun kualitas video MP4 yang diunduh beresolusi baik.

Tantangannya adalah bagaimana membuat bundler Electron menyertakan file binary FFmpeg dan FFprobe ke dalam aplikasi production. Solusinya terletak pada konfigurasi extraResources di dalam file package.json dan memanipulasi pemanggilan parameter spawn milik Node.js agar yt-dlp diarahkan langsung ke direktori instalasi aplikasi (process.resourcesPath).

// downloader.js[cite: 1]
const args = [
    '--newline',
    '--progress',
    '-o', path.join(downloadDir, '%(title)s.%(ext)s'),
    url
];

// Inti solusi video bisu: mengarahkan yt-dlp ke lokasi binary FFmpeg[cite: 1]
if (fs.existsSync(ffmpegPath)) {
    args.push('--ffmpeg-location', ffmpegPath);
}

// Perintah spesifik untuk menggabungkan video & audio kualitas tinggi[cite: 1]
if (formatType === 'best-video') {
    args.push('-f', 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best', '--merge-output-format', 'mp4');
}

2. Menaklukkan NSIS Installer dan Format Ikon

Saat tiba waktunya untuk melakukan build aplikasi menjadi file *.exe (Installer Windows) menggunakan electron-builder, proses kompilasi terus gagal. Usut punya usut, sistem NSIS Windows ternyata sangat ketat menolak ikon aplikasi dengan format standar .png.

Solusinya ternyata sangat sederhana namun fatal jika dilewatkan: Windows mewajibkan agar penggunaan file dengan ekstensi .ico asli (bukan .png). Setelah saya mengonversi logo UI menggunakan converter online dan mengubah konfigurasinya di skrip instalasi, file installer berhasil dikompilasi dengan sempurna menjadi *.exe dan siap di-install pada sistem operasi berbasis windows.

// package.json
"build": {
  "extraResources": [
    "yt-dlp.exe",
    "ffmpeg.exe",
    "ffprobe.exe",
    "assets/**"
  ],
  "win": {
    "target": "nsis",
    "icon": "assets/undtube-logo.ico" 
  }
}

Kolaborasi Modern: Pair Programming bersama Gemini AI

Sepenuhnya saya ingin lebih transparan kepada pembaca dalam tulisan ini. UndTube Downloader sekali lagi tidak saya tulis murni sendirian baris demi baris dari nol. Saya membangun UndTube menggunakan pendekatan “Vibe Coding” dan memanfaatkan Gemini AI sebagai pair programmer dan asisten virtual saya.

Meskipun menggunakan AI, tidak berarti saya hanya menyalin-tempel kode saja, saya juga belajar bagaimana melakukan perubahan dan penyusunan kode jika ada perubahan dan penyesuaian dari error yang ditemukan. Dengan, Gemini bertindak sebagai rekan diskusi yang brilian merancang logika utama dan arsitektur frontend, Ini sangat membantu dan tentu saja memberikan banyak kemudahan dalam pengembangan UndTube menjadi aplikasi desktop yang sekarang.

Ya… saya bisa mengatakan bahwa Gemini sangat krusial dalam membantu melakukan debugging pada masalah-masalah spesifik yang cukup meresahkan dan menjengkelkan. Contohnya:

• Menemukan akar masalah penyebab unduhan “Video Bisu”: Gemini membantu saya bagaimana menyempurnakan argumen pemanggilan FFmpeg di dalam proses Node.js sehingga video dan audio dari yt-dlp dapat tergabung secara otomatis dan bukan merupakan video bisu lagi.
• Troubleshooting NSIS Builder: Ketika proses kompilasi installer Windows (.exe) terus gagal karena penolakan format ikon, Gemini membantu mengidentifikasi bahwa masalahnya murni karena sistem Windows mewajibkan format .ico murni, bukan .png.

Bagi saya, memanfaatkan AI seperti Gemini bukan mengurangi nilai profesionalitas dari seorang developer, melainkan memperkuat dan memperkaya nilai profesi tersebut. AI mengambil alih tugas mengetik dan mencari error kecil, sehingga dengan Vibe Coding kita bisa berfokus pada arsitektur aplikasi, logika bisnis sampai dengan mengeksekusi ide dan pencarian solusi.

Dapat dibilang, ini adalah masa depan rekayasa perangkat lunak!

Kesimpulan

“Membangun aplikasi UndTube Downloader adalah pengalaman yang sangat memuaskan. Ini membuktikan bahwa dengan merangkai tools open-source yang hebat (Electron, yt-dlp, FFmpeg, FFprobe), memberikan sentuhan UI/UX yang tepat, serta memanfaatkan kecerdasan buatan seperti Gemini AI sebagai asisten, kita bisa menciptakan produk digital sendiri (pada kasus saya kali ini adalah UndTube Downloader ini).

Apakah Anda pernah membangun aplikasi serupa dengan Electron? Atau mungkin Anda memiliki pengalaman menarik menghadapi error saat mem-build installer Windows? Ayo berbagi pengalaman…

Sekian, semoga berkesan. Mohon bimbingan dan saran positifnya!