Pake: أداة CLI لإنشاء تطبيقات سطح مكتب بحجم 5 ميجابايت

العربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский中文
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00هذا Paik، أداة سطر أوامر تحول أي موقع إلكتروني إلى تطبيق سطح مكتب أصلي بـ
00:00:05أمر واحد. بنيت باستخدام لغة Rust، لذا يمكن أن يكون حجم التطبيقات الناتجة حوالي 5 ميجابايت، وهو حجم صغير جداً مقارنة
00:00:10بـ Electron، الذي يحزم نسخة كاملة من متصفح كروم في كل تطبيق. يمكنك حتى حقن
00:00:15ملفات CSS و JavaScript، وإضافة أيقونة في شريط النظام، وتغيير نمط شريط العنوان، كل ذلك دون كتابة سطر
00:00:20واحد من كود Rust. ولكن لماذا قد أستخدم هذا الأداة بدلاً من الأدوات المماثلة الأخرى، ولماذا يتطلب
00:00:25Paik وجود PNPM أو NPM إذا كان مبنياً على Rust؟ لا أريد معرفة السبب حقاً،
00:00:31ولكن اشتركوا ولنكتشف ذلك. أنشأ Paik في عام 2022 من قبل TW93، وهو مهندس منتجات
00:00:40من الصين، وهو أيضاً مبتكر Mole، أداة تحسين أجهزة الماك الشهيرة جداً، والتي كنت أستخدمها
00:00:45فعلياً لفترة من الوقت. لكن فكرة Paik منطقية جداً، لأنه إذا فكرت في الأمر،
00:00:49فإن تطبيقات مثل YouTube Music، وGmail، وInstagram لا تملك تطبيقات أصلية رسمية. فهي توجد فقط
00:00:55داخل علامات تبويب المتصفح، وهذا جيد إذا كنت تريد كل وظائف المتصفح، ولكن إذا كنت تريد موقعاً
00:00:59أكثر كفاءة مع أيقونة خاصة به في شريط المهام للفصل بين التطبيقات، فإن الحصول على تطبيق
00:01:04مستقل يمكن أن يكون مفيداً جداً. هنا يأتي دور Paik، وهو أفضل بكثير من Electron،
00:01:09لأنه مبني على أساس Towery 2، الذي يستفيد من نظام عرض الويب الأصلي، مما يجعل التطبيقات
00:01:14أصغر وأسرع وتستخدم ذاكرة أقل، على غرار طريقة عمل Electro أو Bun أو Vercel's Zero Native،
00:01:19والتي سأتحدث عنها أكثر قليلاً لاحقاً في هذا الفيديو. ولكن الكود المخصص الفعلي الذي كتبه TW93 فوق
00:01:24Towery 2 يتكون من حوالي 1800 سطر من كود Rust ويتعامل مع أمور مثل إدارة النوافذ، والقوائم الأصلية،
00:01:30وحقن JavaScript. أنت فقط تشغل أمراً واحداً ويتولى Paik كل شيء. في الواقع،
00:01:35دعونا نحاول استخدام Paik لتحويل مشروع محاكاة الأفلام الخاص بي إلى تطبيق مستقل. بعد تثبيت
00:01:40أداة Paik CLI، ستلاحظ أنها تبدو مشابهة جداً لـ Mole إذا كنت قد استخدمت Mole من قبل، ولا تحتوي على
00:01:45الكثير من الأعلام (flags)، وهو أمر جيد في رأيي. مع تشغيل خادم مشروعي، يمكنني تشغيل Paik مع
00:01:50رابط URL والاسم الذي أريد إطلاقه على التطبيق. الآن إذا ضغطت إدخال، فإنه يجلب الأيقونة ويمر بـ
00:01:55عملية إنشاء التطبيق، والتي يمكن أن تستغرق حوالي 5 إلى 10 دقائق. وبمجرد الانتهاء، ينشئ
00:02:00هذا الملف بصيغة DNG، والذي نجده هنا بحجم 4.3 ميجابايت. وإذا نقرت عليه، فإليك تطبيقنا،
00:02:05يمكننا تثبيته بسحبه إلى مجلد التطبيقات. يبدو أنه لم يجلب الأيقونة، ولكن هذا
00:02:10لا بأس. والآن إذا فتحنا تطبيقنا، يمكننا رؤية أنه يعمل فوراً مع وجود الأيقونة في شريط المهام (Dock).
00:02:14يمكنني تحديد فيديو ويبدو أن كل شيء يعمل بشكل جيد. وإذا نظرنا إلى مراقب النشاط،
00:02:19يمكننا رؤية أن تطبيقنا يستخدم فقط 61 ميجابايت من الذاكرة مقارنة بمتصفح ARC، الذي يستهلك الكثير.
00:02:24وإذا ألقينا نظرة على حجم التطبيق، فهو 55 ميجابايت مقارنة بتطبيق إلكتروني مثل Slack،
00:02:30الذي يبلغ حجمه 310 ميجابايت. ولكن كما رأيت سابقاً، يحتوي Paik على بعض الخيارات المثيرة للاهتمام. على سبيل
00:02:35المثال، يمكنني بناء نفس التطبيق باستخدام علم التصحيح (debug flag) لأتمكن من الوصول إلى أدوات المطورين. ويمكنني تعديل
00:02:40شريط الحالة لجعله يبدو أكثر كأنه تطبيق حقيقي باستخدام علم إخفاء شريط العنوان، مما يعطيه
00:02:46شريط عنوان بدون إطار. لكن من الواضح أن هذا التطبيق لم يصمم ليكون بدون إطار. لحسن الحظ، يوفر Paik
00:02:51لنا خياراً لإصلاح ذلك دون تعديل كود المصدر للتطبيق. يمكنني كتابة بعض أكواد CSS المخصصة وحقنها
00:02:56في تطبيقي باستخدام علم الحقن (inject flag)، مما أضاف مساحة في الأعلى، ولكن هذا يعني أيضاً أن هناك
00:03:01مساحة أكبر في الأسفل للتمرير. يمكننا استخدام علم إظهار أيقونة النظام (show system tray flag)، مما يكشف عن أيقونة في
00:03:06شريط النظام، مما يسمح لنا بإظهار وإخفاء تطبيقنا. ويمكننا حتى حقن JavaScript بالإضافة إلى CSS.
00:03:12ولكن في الوقت الحالي، يبدو أنه لا يمكنك تعديل عناصر القائمة التي يتم توفيرها لك افتراضياً من قبل
00:03:17Paik. كما أن Paik يعمل فقط مع روابط URL تعمل. لذا إذا أغلقت الخادم وحاولت فتح التطبيق،
00:03:23فإنه يعرض لي شاشة فارغة فقط. ولكن لكي أكون عادلاً، لم يتم تصميم Paik للتطبيقات المحلية. اختبرت فعلياً
00:03:28تطبيق YouTube Music، والذي يعمل بشكل جيد بشكل مدهش من تشغيل أمر واحد. وهو يعمل حتى في وضع عدم الاتصال
00:03:33لأن هذه هي الطريقة التي يعمل بها موقع YouTube Music. لذا كنت أستخدمه كمشغل موسيقى رئيسي،
00:03:38ولكنه ليس الأداة المناسبة لتطبيقات سطح المكتب التي تملكها بنفسك لأن Paik يغلف رابطاً مباشراً
00:03:42ولا يحزم الكود الخاص بك إلا إذا استخدمت خيار الملف المحلي، وهو ما اكتشفته فقط
00:03:48بعد إنشاء هذا الفيديو. كما أنني لن أقول إنه مبني بشكل جيد جداً. استمعوا إلي. لقد قمت بتثبيت Paik
00:03:53باستخدام BUN بدلاً من PNPM أو NPM، لكنه يحتاج إلى أحدهما داخلياً لإعداد بناء Tauri.
00:04:00وكان إصدار PNPM لدي أحدث من الإصدار الذي يتطلبه، مما يعني أنه رفض البناء
00:04:05وتثبيت التطبيق الذي أردته. لذلك اضطررت إلى استخدام Claude Code لتعديل كود مصدر Paik فقط لجعله يعمل.
00:04:11لقد انتهى بي الأمر بالعثور على مشكلة برمجية (issue) تتعلق بهذا، ولكن كان من الممكن حل كل هذا لو أن Paik تم شحنه بـ
00:04:15ملف ثنائي مترجم (compiled binary)، وهي ميزة استخدام شيء مثل ElectroBUN أو ZeroNative،
00:04:20لأن ElectroBUN يمنحك بيئة تشغيل BUN حقيقية خلف عرض الويب، مما يعني أنه يمكنك تشغيل منطق خلفي
00:04:25و ZeroNative يذهب إلى أبعد من ذلك، مما يمنحك غلاف Zig كاملاً يمكنه استدعاء مكتبات C مباشرة.
00:04:31لذا فإن Paik هو أسرع طريقة لتغليف موقع إلكتروني مباشر، ولكن إذا كنت بحاجة إلى أي شيء يتجاوز ذلك،
00:04:36فمن الأفضل اللجوء إلى شيء آخر.

Key Takeaway

يوفر Paik وسيلة سريعة وفعالة لتحويل المواقع الإلكترونية إلى تطبيقات سطح مكتب خفيفة الوزن بحجم 5 ميجابايت تقريباً من خلال أمر واحد، بفضل اعتماده على محرك Tauri 2.

Highlights

  • Paik أداة سطر أوامر مبنية بلغة Rust لتحويل أي موقع إلكتروني إلى تطبيق سطح مكتب مستقل.

  • التطبيقات الناتجة بحجم 5 ميجابايت تقريباً، وهو حجم أصغر بكثير مقارنة بتطبيقات Electron التي تحزم نسخة كاملة من متصفح كروم.

  • يعتمد Paik على أساس Tauri 2، مما يوفر استهلاكاً أقل للذاكرة وسرعة أكبر في الأداء.

  • يوفر Paik إمكانيات تخصيص تشمل حقن ملفات CSS وJavaScript، وإضافة أيقونة في شريط النظام، والتحكم في شريط العنوان.

  • يستهلك تطبيق تم إنشاؤه عبر Paik حوالي 61 ميجابايت من الذاكرة مقارنة بمتصفحات الويب الكاملة.

Timeline

مفهوم أداة Paik وآلية عملها

  • يستخدم Paik لغة البرمجة Rust لتغليف المواقع الإلكترونية في تطبيقات سطح مكتب أصلية.
  • يتفوق Paik على Electron في تقليل حجم التطبيقات واستهلاك الذاكرة.
  • تتولى الأداة إدارة النوافذ والقوائم الأصلية وحقن التعليمات البرمجية دون الحاجة لكتابة كود Rust يدوي.

صُمم Paik لحل مشكلة المواقع التي تفتقر إلى تطبيقات سطح مكتب رسمية، مثل Gmail أو Instagram. بدلاً من الاعتماد على Electron الذي يحزم متصفحاً كاملاً داخل كل تطبيق، يستفيد Paik من نظام عرض الويب الأصلي عبر Tauri 2. يقوم الكود المخصص للأداة بـ 1800 سطر تقريباً بالتعامل مع كافة الجوانب التقنية لتغليف الموقع، مما يجعل التطبيق النهائي أصغر وأسرع وأقل استهلاكاً للموارد.

تجربة الإنشاء والتخصيص

  • يتم إنشاء التطبيق عبر أمر واحد يتضمن رابط الموقع واسم التطبيق المختار.
  • تستغرق عملية بناء التطبيق ما بين 5 إلى 10 دقائق.
  • يدعم Paik حقن ملفات CSS وJavaScript مخصصة لتعديل مظهر التطبيق بدون تغيير كود المصدر الأصلي للموقع.

تتسم تجربة استخدام أداة CLI بالبساطة، حيث تعتمد على أوامر مباشرة وأعلام (flags) لتخصيص التطبيق. يمكن للمستخدمين تفعيل أدوات المطورين عبر وضع التصحيح، أو إزالة شريط العنوان للحصول على واجهة بدون إطار، أو إظهار أيقونة في شريط النظام. تظهر النتائج فعالية عالية، حيث بلغ حجم تطبيق تجريبي 4.3 ميجابايت واستهلك 61 ميجابايت من الذاكرة فقط.

محددات الأداة وبدائلها

  • يعمل Paik بشكل أساسي مع الروابط الحية ولا يدعم التطبيقات المحلية افتراضياً بشكل كامل.
  • تتطلب الأداة وجود PNPM أو NPM مسبقاً، مما قد يسبب تعارضات في إصدارات الاعتماديات.
  • تعتبر أدوات مثل ElectroBUN أو ZeroNative بدائل أكثر قوة للمشاريع التي تتطلب منطقاً خلفياً معقداً.

يغلف Paik المواقع الإلكترونية الحية، مما يعني أن التطبيق يتطلب اتصالاً بالإنترنت أو خادماً عاملاً ليظهر المحتوى. واجهت العملية أحياناً تعقيدات تقنية في إعداد بيئة البناء وتوافق إصدارات PNPM. بالنسبة للتطبيقات التي تتطلب منطقاً خلفياً حقيقياً أو استدعاء مكتبات C مباشرة، تُعد بيئات مثل ZeroNative أو ElectroBUN خيارات أكثر ملاءمة رغم بساطة Paik في المهام السريعة.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video