RubberDuck

Rubberduck

Rubberduck adalah aplikasi yang dibuat untuk memenuhi kebutuhan masyarakat. Ini memiliki semua alat yang dapat ditawarkan aplikasi Flash, dengan bonus interaksi langsung antara pelanggan dan aplikasi.

Mengkonfigurasi Aplikasi

Akses file configuration.json dan buat perubahan di sana. Nama aplikasi harus dipertahankan, namun, perubahan dalam API harus dilakukan. Ganti tautan example.com dengan apa yang sedang digunakan. Buka folder GUI dan edit file index.html , pengeditan, pada WebView, nilai yang sama. Itu selesai, Anda siap untuk dikompilasi.

Menyusun aplikasi

Anda akan memerlukan alat NodeJS dan NPM (Node Packet Manager) untuk melakukan ini. Dengan skrip kompilasi yang diindeks, Anda hanya menggunakannya sesuai dengan sistem operasi yang digunakan. Tutorial berikut sebagai berikut:

Windows

 npm i
npm run build-win

Setelah menyelesaikan kompilasi, buka folder rilis dan Anda akan siap untuk didistribusikan.

Linux (WSL2)

Untuk membuat kompilasi di Linux, Anda harus memiliki sistem operasi/distro berbasis. Namun, dengan Windows membuat lebih banyak alat pengembangan yang tersedia, semua orang dapat menggunakan WSL2 . Pertama, restart komputer Anda, pergi ke BIOS dan mengaktifkan virtualisasi. Kemudian kembali ke tutorial ini dan ikuti tautan ini.

Dengan distro yang diinstal, jalankan perintah berikut:

 sudo apt update && sudo apt -y upgrade
sudo apt install xrdp
sudo apt install -y xfce4

Jika Anda menanyakan sesuatu, pilih GDM3 .

 sudo cp /etc/xrdp/xrdp.ini /etc/xrdp/xrdp.ini.bak
sudo sed -i 's/3389/3390/g' /etc/xrdp/xrdp.ini
sudo sed -i 's/max_bpp=32/#max_bpp=32nmax_bpp=128/g' /etc/xrdp/xrdp.ini
sudo sed -i 's/xserverbpp=24/#xserverbpp=24nxserverbpp=128/g' /etc/xrdp/xrdp.ini
echo xfce4-session > ~/.xsession
sudo nano /etc/xrdp/startwm.sh

Komentari dua baris terakhir dengan #, lalu tambahkan baris tambahan yang berisi yang berikut: starxfce4 .

 sudo /etc/init.d/xrdp start

Dengan perintah yang sudah digunakan, buka bilah pencarian Windows dan ketik: Koneksi area jarak jauh . Di tempat IP, letakkan: localhost:3390 . Kemudian login menggunakan kredensial yang sama dengan distro Anda.

Di dalam mesin, jalankan perintah berikut di terminal:

 sudo apt install nodejs
sudo apt install npm

Unduh file repositori dan masukkan ke dalam desktop Anda. Gunakan perintah:

 cd ~/Desktop/RubberDuck

Lalu ini:

 npm i
npm run build-linux

Setelah kompilasi, aplikasi Anda akan siap untuk distribusi, terletak di folder rilis . Namun, masih perlu memiliki manajer paket Debian untuk membuat instalasi, yang akan banyak dijelaskan pada panduan di tab AID platform.

MacOS

Segera.

---

Mengedit Rubberduck

Pengetahuan JavaScript, HTML dan CSS sangat penting. Kami menggunakan bahasa CSS yang dikompilasi untuk memfasilitasi integrasi dengan semua perangkat yang disebut sass. Dianjurkan agar Anda menggunakan kode Visual Studio untuk menguji dan mengimplementasikan fitur baru di Rubberduck. Electronjs adalah kerangka kerja yang digunakan, meskipun dalam versi yang paling primitif: 11.1.0, untuk dapat meniru Adobe Flash Player.

IPC

IPC adalah proses yang terjadi dalam elektron. Untuk memanggilnya, kami menggunakan konstanta IPC . Fungsinya sederhana dan penting, melakukan daftar kemampuan dalam aplikasi dan memperluas fungsinya. Misalnya, saya ingin tombol membawa saya ke tautan eksternal. Saya menggunakan kode berikut:

 IPC.send('openMyURL', 'https://example.com/')

Dalam file index.js , seseorang akan menerima sinyal ini dan menjalankan kode, diekspresikan oleh fungsi:

 const { ipcMain, shell } = require('electron');
ipcMain.on('openMyURL', (url) => {
   shell.openExternal(url); 
});

Sudah di dalam file index.html , segalanya dapat naik lebih banyak. Menggunakan jQuery, Anda dapat memperluas fungsi -fungsi ini pada tingkat grafik, karena metode IPC juga dapat dikirim oleh index.js dan diterima dengan yang pertama. Fungsi berikut menjelaskan ini:

index.js

 ipcMain.send('sendAjax');

index.html

 <script>
    const { ipcRenderer } = require('electron');
    const IPC = ipcRenderer;
    const WebView = document.querySelector('WebView');
    IPC.on('sendAjax', () => {
        WebView.executeJavaScript(`
            $.ajax({
                type: "POST",
                url: "https://example/login",
                data: ${JSON.stringify($(".someForm").serializeObject())},
                dataType: "json"
            }).done(function(result) {
                console.log(JSON.stringify(result));
                location.href="https://example.com/client";
            });
        `)
    });
</script>