كيفية تحويل تطبيق ويب إلى تطبيق سطح مكتب باستخدام Chromium و PyInstaller

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

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

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

بمرور الوقت ، عندما اخترقت الكود في Atom - المحرر المفضل لدي هذه الأيام - تذكرت أن Atom هو في الواقع متصفح. يستخدم Node.js كنهاية خلفية ، وإطار عمل Electron لواجهة المستخدم الخاصة به. ألهمني هذا لبدء البحث في الأجزاء الداخلية لـ Electron ، على أمل العثور على أمثلة وأفضل الممارسات حول كيفية حلها لتعبئة سطح المكتب.

لم يستغرق الأمر وقتًا طويلاً حتى اكتشفت أن كل شيء مبني على تقنيات مجانية ومفتوحة المصدر: متصفح Chromium و Chromium Embedded Framework. يتميز هذا بتخصيصات أمثلة سهلة الدمج كانت قادرة على تلبية متطلباتي.

مع كل هذا في متناول اليد ، بدأت العمل.

إطار عمل الكروم المضمن

Chromium هو الرمز الأساسي الذي يغذي متصفح Google Chrome. فهو يجمع كل العناصر التي تعرض الواجهة ، وتعالج مدخلات المستخدم ، وتكتب وظائفها.

إطار عمل Chromium Embedded (CEF) عبارة عن مجموعة من وظائف C التي يمكنها التحكم في هذا المتصفح. كما أنه يوفر نصوصًا تساعد في تبسيط عملية إنشائها وتجميعها.

Visual Studio Code و Slack و Mattermost و Curse و Postman و Kitematic كلها أمثلة لتطبيقات سطح المكتب التي تستخدم Electron. جميع هذه الأنظمة مؤهلة كمواقع ويب تستغل المتصفح الموجود أسفله باستخدام CEF.

إذا كنت تعتقد أن Python يمكنها الارتباط بـ C والاستفادة من هذه الميزات أيضًا ، فأنت على حق. لا تنظر أبعد من مشروع pycef لاستدعاء وظائف المجمع CEF مباشرة. ومع ذلك ، فإنه يأتي مع Chromium الثنائي باعتباره تبعية إضافية. لذلك إذا كنت قلقًا بشأن إدارة بيانات الدعم المعقدة ، فكر قبل القفز.

في وضعي الخاص ، يدير مشروع Sofi جميع التفاعلات من خلال مقبس ويب ، مما يوفر واجهة متسقة عبر أنواع مختلفة من الأنظمة الأساسية (الويب وسطح المكتب والجوال وما إلى ذلك). هذا يعني أنني لست بحاجة إلى قيادة المتصفح أو تشغيله يدويًا. أرغب فقط في التفاعل مع DOM الذي يعرضه المتصفح من خلال تقنيات الويب القياسية.

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

نظرًا لمتطلباتي البسيطة ، شعرت أن pycef - أو أي روابط أخرى منخفضة المستوى - كانت أكثر من اللازم. بدلاً من ذلك ، استفدت من عينة مسبقة الصنع من مشروع CEF: cefsimple . يخفي هذا المتصفح جميع العناصر المرئية التي أريدها ، لذلك إذا استخدمت CLI الخاص به لفتح صفحة ويب ، فلن يكون لدى المستخدم أي فكرة عن وجودهم داخل المتصفح بالفعل. تبدو كنافذة عادية من أي تطبيق.

لم يكن بناء cefsimple معقدًا للغاية بمجرد مراجعة الوثائق. لكن الأمر يستغرق وقتًا طويلاً إذا قمت أيضًا ببناء Chromium معه. لتجنب ذلك ، يوفر المشروع نفسه ثنائيات مسبقة الصنع يمكنك تخصيصها وتجميعها في cefsimple. لقد وجدت أنه من الأفضل الاستفادة من هذه.

والخطوات هي كما يلي:

  1. ألق نظرة سريعة على كيفية البناء باستخدام CEF من الثنائيات.
  2. احصل على أحد التوزيعات الثنائية من الريبو. تأكد من قراءة تلميحات الأدوات قبل اختيار واحدة ، حيث لا تحتوي كل الحزم على نفس الملفات. كنت أبحث على وجه التحديد عن واحد مع cefsimple.
  3. ابحث في CMakeLists.txtالملف وتأكد من تثبيت أدوات البناء اللازمة. هذه منصة محددة.
  4. نفذ البناء. يتم شرح ذلك في نفس الملف كما في الخطوة السابقة وهو أيضًا خاص بالنظام الأساسي ، ولكنه يميل إلى اتباع عملية: make و cd في دليل البناء ، وتشغيل cmake لأدوات الترجمة والبنية الخاصة بك أثناء الإشارة إلى الدليل الأصلي. منذ أن استخدمت أدوات OSX Ninja على نظام أساسي 64 بت ، بدا الأمر مثلcmake -G "Ninja" -DPROJECT_ARCH="x86_64" ..
  5. سيحتوي دليل البناء الآن على ملفات الإخراج. يمكن أن يكون الهيكل مربكًا بعض الشيء ، لكنه موصوف في الأساس README. كمرجع ، نتج عن الخطوة السابقة حزمة تطبيقات ضمن build/tests/cefsimple/Release/cefsimple.app.
  6. لا تنس أنه سيتعين عليك القيام بذلك لإنشاء الثنائيات التي تحتاجها لكل نظام أساسي وبنية نظام تشغيل تدعمها.

الآن بعد أن أصبح لديك ملف قابل للتنفيذ ، قم بتشغيله من سطر الأوامر مع --urlالتعيين إلى صفحة الويب التي تريد فتحها. هذا يعني أن دمجها في نص برمجي بايثون يتم بسهولة من خلال subprocessالوحدة النمطية.

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

التعبئة والتغليف

الآن بعد أن أصبح بإمكاننا تقديم تجربة سطح مكتب ، علينا التفكير في كيفية توزيع ذلك على مستخدمينا. يتم توزيع حزم Python التقليدية من خلال فهرس حزمة Python (PyPI). ومع ذلك ، فإنه يتطلب من مستخدمينا تثبيت مترجم Python وبعض أشكال أداة التغليف مثل easy_installأو pip.

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

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

لتجنب مثل هذه الفوضى الكبيرة ، هناك أدوات يمكنها تضمين كل تبعياتك في ملفات قابلة للتنفيذ خاصة بنظام التشغيل. بعد دراسة متأنية ، الذي اخترته في مساعي هو PyInstaller. يبدو أنه يوفر أكبر قدر من المرونة في الأنظمة الأساسية والتنسيقات المدعومة.

مقتطف موجز من مستودع GitHub الخاص بهم يلخص الأشياء بشكل جيد:

يقرأ PyInstaller نص Python الذي كتبته أنت. يقوم بتحليل التعليمات البرمجية الخاصة بك لاكتشاف كل وحدة ومكتبة أخرى يحتاجها البرنامج النصي الخاص بك من أجل التنفيذ. ثم يجمع نسخًا من كل هذه الملفات - بما في ذلك مترجم Python النشط! - ويضعها مع البرنامج النصي في مجلد واحد ، أو اختياريًا في ملف واحد قابل للتنفيذ.

الأداة أوفت بوعدها. I الإشارة إلى ملف بايثون لتطبيق نموذج بلدي وحزم في دليل بسهولة بما فيه الكفاية مع: pyinstaller sample.py. عندما أريد ملفًا قابلاً للتنفيذ بدلاً من ذلك ، ما عليك سوى إضافة --onefileالمعلمة.

يصبح الأمر أكثر تعقيدًا عندما تحتاج إلى إضافة بيانات غير بايثون إلى حزمتك. هذا هو الحال مع ملفات html و js التي تشكل أساس Sofi ، ومتصفح cefsimple الذي يقدم واجهة التطبيق من قبل. توفر أداة PyInstaller المساعدة --add-dataللقيام بذلك ، مما يسمح بتعيين المسار داخل الحزمة الخاصة بك حيث يوجد ملف البيانات (أو الدليل). ومع ذلك ، فقد استغرق الأمر بعض الوقت لمعرفة كيفية الوصول إلى هذه الأدلة بشكل صحيح من داخل الكود الخاص بي. لحسن الحظ ، وجهتني الوثائق إلى الاتجاه الصحيح.

كما اتضح ، عند تشغيل تطبيق PyInstaller المجمع ، لا يمكنك الاعتماد على __file__الآليات المماثلة لتحديد المسارات. بدلاً من ذلك ، يخزن محمل الإقلاع PyInstaller المسار المطلق للحزمة sys._MEIPASSويضيف frozenسمة لإعلامك بأنك تعمل داخل حزمة. إذا sys.frozenتم Trueتحميل ملفاتك بناءً على sys._MEIPASSذلك ، فاستخدم وظائف المسار العادي لتحديد مكان الأشياء.

تمكنت بنجاح من إنشاء تطبيق OSX مجمع وثنائي Linux قابل للتنفيذ من نفس البرنامج النصي Python. لقد تحققت من أنه يمكنني فعل الشيء نفسه مع ملف Windows قابل للتنفيذ ، ولكن لم يتح لي الوقت لتجميع إصدار Windows من متصفح cefsimple لاختبار مسار الحزمة حتى الآن.

المنتج النهائي

للحصول على مثال لواجهة المستخدم المستندة إلى المستعرض والمعبأة مع النظام الموضح هنا ، ألق نظرة على العرض التقديمي الخاص بي في PyCar Caribbean 2017

العرض التوضيحي المتعلق بـ CEF والتعبئة عبارة عن معرض صور ويظهر حوالي الساعة 18:15.

لقراءة إضافية عن كيفية صنع Sofi ، ألق نظرة على سلسلة A Python Ate My GUI.

إذا أعجبك المقال وترغب في قراءة المزيد حول ممارسات Python والبرامج ، يرجى زيارة tryexceptpass.org. ابق على اطلاع بأحدث محتوياتها من خلال الاشتراك في القائمة البريدية.