RubberDuck

Gummi

Rubberduck ist eine Bewerbung, um die Bedürfnisse der Gemeinschaft zu erfüllen. Es verfügt über alle Tools, die eine Flash -Anwendung bieten kann, mit einem direkten Interaktionsbonus zwischen Kunden und Anwendung.

Konfigurieren der Anwendung

Greifen Sie auf die Datei configuration.json zu und nehmen Sie die Änderungen dort vor. Der Name des Antrags muss jedoch beibehalten werden, müssen jedoch Änderungen in der API vorgenommen werden. Ersetzen Sie den Link example.com durch das, was derzeit verwendet wird. Gehen Sie zum GUI -Ordner und bearbeiten Sie die Datei index.html , bearbeiten, in der WebView dieselben Werte. Das hat getan, Sie sind bereit zu kompilieren.

Die Anwendung zusammenstellen

Zu diesem Zweck benötigen Sie die Tools NodeJS und NPM (Knotenpaketmanager). Mit indizierten Kompilierungsskripten verwenden Sie sie nur gemäß dem verwendeten Betriebssystem. Das Tutorial folgt wie folgt:

Fenster

 npm i
npm run build-win

Gehen Sie nach Abschluss der Kompilierung zum Release -Ordner und Sie sind bereit zu verteilen.

Linux (WSL2)

Um eine Zusammenstellung unter Linux durchzuführen, benötigen Sie ein basiertes Betriebs-/Distribaumsystem. Da Windows jedoch immer mehr Entwicklungstools zur Verfügung stellt, kann jeder WSL2 verwenden. Starten Sie zunächst Ihren Computer neu, gehen Sie zum BIOS und aktivieren Sie die Virtualisierung. Kehren Sie dann zu diesem Tutorial zurück und folgen Sie diesem Link.

Führen Sie mit der installierten Distribution die folgenden Befehle aus:

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

Wenn Sie etwas gefragt haben, wählen Sie 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

Kommentieren Sie die letzten beiden Zeilen mit #und fügen Sie dann eine zusätzliche Zeile hinzu, die Folgendes enthält: starxfce4 .

 sudo /etc/init.d/xrdp start

Gehen Sie mit den bereits verwendeten Befehlen in die Windows -Suchleiste und geben Sie eine Verbindung des Remotebereichs ein. Anstelle der IP: localhost:3390 . Melden Sie sich dann mit denselben Anmeldeinformationen wie Ihre Distribution an.

Führen Sie in der Maschine die folgenden Befehle am Terminal aus:

 sudo apt install nodejs
sudo apt install npm

Laden Sie die Repository -Dateien herunter und legen Sie sie auf Ihren Desktop. Verwenden Sie den Befehl:

 cd ~/Desktop/RubberDuck

Dann diese:

 npm i
npm run build-linux

Nach der Kompilierung ist Ihre Anwendung in der Veröffentlichung im Ordner der Veröffentlichung bereit. Es ist jedoch weiterhin erforderlich, einen Debian -Paket -Manager zu haben, der die Installation vornimmt, die auf einem Leitfaden auf der Registerkarte "Aid der Plattform" weithin erklärt wird.

Macos

Kurz.

---

Rubberduck bearbeiten

Das Wissen von JavaScript, HTML und CSS ist unerlässlich. Wir verwenden CSS -kompilierte Sprache, um die Integration in alle Geräte, die als SASS bezeichnet werden, zu erleichtern. Es wird empfohlen, dass Sie Visual Studio Code verwenden, um neue Funktionen auf Rubberduck zu testen und zu implementieren. Electronjs ist das Rahmen, das in seiner primitivsten Version verwendet wird: 11.1.0, um den Adobe Flash -Player nachahmen zu können.

IPC

Ein IPC ist ein Prozess, der innerhalb von Elektronen stattfindet. Um es zu beschwören, verwenden wir die IPC -Konstante. Die Funktionen sind einfach und wesentlich, wobei eine Liste von Funktionen innerhalb der App durchgeführt und deren Funktionalität erweitert wird. Zum Beispiel möchte ich einen Knopf, der mich zu einem externen Link bringt. Ich verwende den folgenden Code:

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

In der index.js -Datei empfängt jemand dieses Signal und führt einen Code aus, der von der Funktion ausgedrückt wird:

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

Bereits in der Datei index.html können die Dinge viel mehr steigen. Mit JQuery können Sie diese Funktionen auf grafischer Ebene erweitern, da IPC -Methoden auch von index.js gesendet und von der ersten empfangen werden können. Die folgende Funktion erklärt dies:

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>