RubberDuck

Rubberduck

Rubberduck هو تطبيق تم تقديمه لتلبية احتياجات المجتمع. يحتوي على جميع الأدوات التي يمكن أن يقدمها تطبيق الفلاش ، مع مكافأة تفاعل مباشرة بين العميل والتطبيق.

تكوين التطبيق

الوصول إلى ملف configuration.json وقم بإجراء التغييرات هناك. يجب الحفاظ على اسم التطبيق ، ومع ذلك ، يجب إجراء التغييرات في واجهة برمجة التطبيقات. استبدل ارتباط example.com بما يتم استخدامه حاليًا. انتقل إلى مجلد GUI وقم بتحرير ملف index.html ، التحرير ، على WebView ، نفس القيم. الذي تم القيام به ، أنت مستعد للتجميع.

تجميع التطبيق

ستحتاج إلى أدوات NodeJS و NPM (Manager Node Packet Manager) للقيام بذلك. باستخدام البرامج النصية المترجمة المفهرسة ، يمكنك فقط استخدامها وفقًا لنظام التشغيل المستخدم. يتبع البرنامج التعليمي على النحو التالي:

النوافذ

 npm i
npm run build-win

عند الانتهاء من التجميع ، انتقل إلى مجلد الإصدار وستكون جاهزًا للتوزيع.

Linux (WSL2)

لإجراء مجموعة على Linux ، يجب أن يكون لديك نظام تشغيل/توزيعات قائم. ومع ذلك ، مع توفر Windows المزيد والمزيد من أدوات التطوير ، يمكن للجميع استخدام WSL2 . أولاً ، أعد تشغيل جهاز الكمبيوتر الخاص بك ، وانتقل إلى BIOS وتفعيل المحاكاة الافتراضية. ثم العودة إلى هذا البرنامج التعليمي واتبع هذا الرابط.

مع التوزيع المثبت ، قم بتنفيذ الأوامر التالية:

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

إذا سألت شيئًا ، فاختر 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

قم بالتعليق على آخر سطرين مع #، ثم أضف سطرًا إضافيًا يحتوي على ما يلي: starxfce4 .

 sudo /etc/init.d/xrdp start

مع الأوامر المستخدمة بالفعل ، انتقل إلى شريط البحث في Windows ونوعه: اتصال المنطقة البعيدة . بدلاً من IP ، وضع: localhost:3390 . ثم قم بتسجيل الدخول باستخدام نفس بيانات الاعتماد مثل التوزيع الخاص بك.

داخل الجهاز ، قم بتشغيل الأوامر التالية في المحطة:

 sudo apt install nodejs
sudo apt install npm

قم بتنزيل ملفات المستودع ووضعها في سطح المكتب. استخدم الأمر:

 cd ~/Desktop/RubberDuck

ثم هذه:

 npm i
npm run build-linux

بعد التجميع ، سيكون تطبيقك جاهزًا للتوزيع ، الموجود في مجلد الإصدارات . ومع ذلك ، لا يزال من الضروري أن يكون لديك مدير حزمة Debian لإجراء التثبيت ، والذي سيتم شرحه على نطاق واسع على دليل في علامة التبويب المعونة للمنصة.

ماكوس

قريبا.

---

تحرير Rubberduck

معرفة JavaScript و HTML و CSS ضرورية. نستخدم لغة CSS المترجمة لتسهيل التكامل مع جميع الأجهزة التي تسمى Sass. يوصى باستخدام رمز Visual Studio لاختبار وتنفيذ ميزات جديدة على Rubberduck. ElectronJS هو الإطار المستخدم ، وإن كان في نسخته الأكثر بدائية: 11.1.0 ، لتكون قادرة على محاكاة مشغل Adobe Flash.

IPC

IPC هي عملية تحدث داخل الإلكترون. لاستدعاءها ، نستخدم ثابت IPC . وظائفها بسيطة وضرورية ، وتنفيذ قائمة من القدرات داخل التطبيق وتوسيع وظائفه. على سبيل المثال ، أريد زرًا لأخذني إلى رابط خارجي. يمكنني استخدام الرمز التالي:

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

ضمن ملف index.js ، سيتلقى شخص ما هذه الإشارة وتنفيذ رمز ، يتم التعبير عنه بواسطة الوظيفة:

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

بالفعل داخل ملف index.html ، يمكن أن تتسلق الأمور أكثر من ذلك بكثير. باستخدام jQuery ، يمكنك توسيع هذه الوظائف على مستوى الرسوم ، حيث يمكن أيضًا إرسال طرق IPC بواسطة index.js واستلامها بواسطة الأول. تشرح الوظيفة التالية هذا:

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>