RubberDuck

Rubberduck

Rubberduck is an application made to meet community needs. It has all the tools that a flash application can offer, with a direct interaction bonus between customer and application.

Configuring the application

Access the configuration.json file and make the changes there. The name of the application must be maintained, however, changes in the API must be made. Replace the example.com link with what is currently being used. Go to the GUI folder and edit the index.html file, editing, on the webview, the same values. That done, you are ready to compile.

Compiling the application

You will need the NodeJs and NPM (Node Packet Manager) tools to do this. With indexed compilation scripts, you just use them according to the operating system in use. The tutorial follows as follows:

Windows

 npm i
npm run build-win

Upon completion of the compilation, go to the Release Folder and you will be ready to distribute.

Linux (WSL2)

To make a compilation on Linux you need to have a based operating/distro system. However, with Windows making more and more development tools available, everyone can use WSL2 . First, restart your computer, go to BIOS and activate virtualization. Then return to this tutorial and follow this link.

With the installed distro, execute the following commands:

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

If you asked something, choose 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

Comment the last two lines with #, then add an additional line containing the following: starxfce4 .

 sudo /etc/init.d/xrdp start

With the commands already used, go to the Windows search bar and type: connection of the remote area . In place of the IP, put: localhost:3390 . Then login using the same credentials as your distro.

Inside the machine, run the following commands at the terminal:

 sudo apt install nodejs
sudo apt install npm

Download the repository files and put it in your desktop. Use the command:

 cd ~/Desktop/RubberDuck

Then these:

 npm i
npm run build-linux

After compilation, your application will be ready for distribution, located in the Releases folder. However, it is still necessary to have a Debian package manager to make the installation, which will be widely explained on a guide on the platform's aid tab.

Macos

Shortly.

---

Editing Rubberduck

The knowledge of JavaScript, HTML and CSS is essential. We use CSS compiled language to facilitate integration with all devices called SASS. It is recommended that you use Visual Studio Code to test and implement new features on Rubberduck. Electronjs is the framework used, albeit in its most primitive version: 11.1.0, to be able to emulate the Adobe Flash Player.

IPC

An IPC is a process that happens within Electron. To summon it, we use the IPC constant. Its functions are simple and essential, performing a list of capabilities within the app and expanding its functionality. For example, I want a button to take me to an external link. I use the following code:

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

Within the index.js file, someone will receive this signal and execute a code, being expressed by the function:

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

Already inside the index.html file, things can climb much more. Using JQuery, you can expand these functions at graphic level, as IPC methods can also be sent by index.js and received by the first. The following function explains this:

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>