إنشاء تجارب WordPress داخل المتصفح باستخدام WordPress Playground وWebAssembly

يتم تشغيل WordPress الكامل بواسطة لغة PHP من خلال المتصفح فقط باستخدام WebAssembly.

Adam Zieliński

Thomas Nattestad

عندما تظهر لك WordPress Playground لأول مرة، يبدو كموقع إلكتروني عادي، باستثناء الخلفية الملوّنة. إنه أي شيء لكن. ما تبحث عنه هو حزمة تكنولوجيا كاملة من WordPress، بما في ذلك لغة PHP وقاعدة بيانات، والتي تعمل مباشرةً في متصفّحك.

في هذه المشاركة، يستكشف "آدم زيلينسكي" (رئيس قسم WordPress Playground) و"توماس ناتستاد" (مدير المنتجات في V8) ما يلي:

• كيف يمكن أن يساعدك WordPress Playground بصفتك مطوِّرًا في WordPress.
• تفاصيل آلية العمل
• تأثيرها على مستقبل WordPress

يمكنك استخدام WordPress بدون تثبيت وتضمينه في تطبيقك، والتحكّم فيه أيضًا باستخدام JavaScript.

ويمكنك استخدام WordPress المضمّن وتخصيصه في playground.wordpress.net مجانًا. لا تحتاج إلى دعم للسحابة الإلكترونية أو دعم للدفع، لأنّ هذا الموقع الإلكتروني متوفّر بالكامل في متصفّحك ولا يمكن لأي شخص آخر زيارته. كما أنه مؤقت. بمجرد تحديث الصفحة، تختفي. يمكنك الحصول على أي عدد تريده من هذه المواقع لإنشاء نماذج أولية لتجربة المكونات الإضافية واستكشاف الأفكار بسرعة.

يمكنك أيضًا استخدامها لاختبار الرموز البرمجية في بيئات مختلفة باستخدام مبدِّل إصدار PHP وWordPress:

WordPress Playground هو طريقة جديدة تمامًا لاستخدام WordPress. ومع ذلك، لا تتوفّر إمكانية الوصول الكامل إلى هذه الأداة إلا من خلال تضمينها في تطبيقك. وتتمثل الطريقة السهلة في تضمين WordPress Playground في <iframe> وإعداده باستخدام واجهة برمجة التطبيقات لمَعلمات طلب البحث. هذا ما يفعله معرض الصور الرسمي. عند اختيار مظهر التعليق والمكوّن الإضافي Coblocks مثلاً، يتم تحديث إطار iframe المضمّن للإشارة إلى https://playground.wordpress.net/?theme=pendant&plugin=coblocks.

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

يتيح برنامج JavaScript Playground JavaScript التحكم الكامل في الموقع الإلكتروني المضمَّن

يمكنك التحكم في موقع WordPress بأكمله، بما في ذلك نظام الملفات وPHP، باستخدام واجهة برمجة التطبيقات الكاملة المتوفرة عبر حزمة @wp-playground/client npm. يوضح المثال التالي كيفية استخدامها - يمكنك مراجعة البرنامج التعليمي التفاعلي للاطّلاع على المزيد من الأمثلة:

import {
  connectPlayground,
  login,
  connectPlayground,
} from '@wp-playground/client';

const client = await connectPlayground(
  document.getElementById('wp'), // An iframe
  { loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();

// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');

// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });

// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);

استخدام WebAssembly PHP حتى بدون WordPress

WordPress Playground ليس صخرة واحدة. تم إصدار WebAssembly PHP بشكل مستقل من WordPress ويمكنك استخدامه بشكل منفصل أيضًا. بالنسبة إلى الويب، يمكنك استخدام حزمة @php-wasm/web npm المحسّنة لتناسب حجم الحزمة المنخفض، وفي Node.js يمكنك الاعتماد على @php-wasm/node الذي يوفّر المزيد من إضافات PHP. استخدم "آدم" الإصدار السابق لإضافة مقتطفات PHP التفاعلية إلى هذا الدليل التعليمي حول WP_HTML_Tag_Processor. وفي ما يلي نظرة سريعة على كيفية استخدامه:

import { PHP } from '@php-wasm/web';
const php = await PHP.load('8.0', {
  requestHandler: {
    documentRoot: '/www',
  },
});

// Create and run a script directly
php.mkdirTree('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
php.run({ scriptPath: '/www/index.php' });

// Or use the familiar HTTP concepts:
const response = php.request({
  method: 'POST',
  relativeUrl: '/index.php',
  data: { name: 'John' },
});
console.log(response.text); // Hello John

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

توجد الخيارات المتقدمة للغة WebAssembly PHP، ومترجم SQL، وخادم داخل المتصفح

يتم تشغيل لغة PHP كبرنامج ثنائي لـ WebAssembly

لا تعمل لغة PHP في المتصفح بطريقة غير تقليدية. طوّرت WordPress Playground مسارًا مخصَّصًا لإنشاء مترجم PHP في WebAssembly باستخدام Emscripten. إنّ إنشاء لغة vanilla PHP ليس معقدًا للغاية، إذ إنّه يتطلّب فقط تعديل توقيع الدالة هنا، وفرض متغير إعدادات هنا، وتطبيق بعض رموز التصحيح الصغيرة. إليك كيفية إنشاء الملف بنفسك:

git clone https://github.com/WordPress/wordpress-playground
cd wordpress-playground && npm install
# Below, you can replace "8.2" with any other valid PHP version number.
npm run recompile:php:web:8.2

ومع ذلك، فإن إصدارات vanilla PHP ليست مفيدة جدًا في المتصفح. بما أنّ لغة PHP هي أحد برامج الخادم، لا تحتوي على واجهة برمجة تطبيقات JavaScript لتمرير نص الطلب أو تحميل الملفات أو تعبئة بث php://stdin. كان على WordPress Playground إنشاء واحد من البداية. يأتي برنامج WebAssembly الثنائي مع وحدة واجهة برمجة تطبيقات PHP مخصّصة مكتوبة بلغة C وفئة PHP في JavaScript تعرض طرقًا مثل writeFile() أو run().

بما أنّ كل إصدار بلغة PHP هو مجرد ملف .wasm ثابت، فإنّ أداة تبديل إصدارات PHP تكون مملة للغاية. إنّه يطلب من المتصفِّح تنزيل php_7_3.wasm مثلاً، بدلاً من php_8_2.wasm.

قاعدة البيانات مدعومة بطبقة ترجمة SQL

يتطلب WordPress MySQL. ومع ذلك، لا يوجد إصدار WebAssembly من MySQL يمكنك تشغيله في المتصفح. لذلك يوفر WordPress Playground ملف PHP مع برنامج تشغيل SQLite الأصلي ويعتمد على SQLite.

ولكن كيف يمكن تشغيل WordPress على قاعدة بيانات مختلفة؟

وخلف الكواليس، يعترض المكوّن الإضافي الرسمي SQLite Database Integration جميع استعلامات MySQL ويعيد كتابتها بلغة SQLite. يشحن الإصدار 2.0 طبقة ترجمة جديدة تستند إلى WordPress Playground تسمح لخدمة WordPress على SQLite باجتياز 99% من مجموعة اختبار وحدات WordPress.

يوجد خادم الويب داخل المتصفح

في موقع WordPress عادي، يؤدي النقر على رابط مثل مدوّنة إلى بدء طلب HTTP إلى الخلفية البعيدة لجلب صفحة blog. ومع ذلك، فإن WordPress Playground لا يحتوي على خلفية بعيدة. ويحتوي على عامل خدمات يعترض جميع الطلبات الصادرة ويمررها إلى مثيل لغة PHP داخل المتصفح يعمل في عامل ويب منفصل.

تتوفّر إمكانية الاتصال بالشبكات من خلال WebSockets.

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

بالنسبة إلى WordPress Playground، تتضمّن الإجابة الخادم الوكيل لمقبس WebSocket to TCP وAsyncify وتصحيح أخطاء PHP الداخلية، مثل php_select. الأمر معقد، ولكن هناك مكافأة. يمكن لإصدار PHP الذي يستهدف Node.js طلب واجهات برمجة تطبيقات الويب وتثبيت حزم المؤلفات والاتصال بخادم MySQL.

يمكن استخدام WordPress في أماكن أكثر من المتصفّح.

وبما أنّ WordPress أصبح بإمكانه الآن العمل باستخدام WebAssembly، يمكنك أيضًا تشغيله في خادم Node.js، لأنّه المحرك نفسه V8. وبالطبع، باستخدام StackBlitz يمكنك أيضًا تشغيل Node.js في المتصفح مباشرةً، ما يعني أنه يمكنك تشغيل WordPress وPHP بعد جمعهما مع WebAssembly، إلى جانب تنفيذ ذلك في Node.js، ليتم تجميعهما أيضًا في WebAssembly قيد التشغيل في المتصفح. وتزداد انتشار WebAssembly في المجال الذي لا يعتمد على خوادم، وفي المستقبل يمكن أن يتم ذلك على هذه البنية الأساسية أيضًا.

قد يدمج المستقبل تطبيقات WordPress تفاعلية وتعاونية بدون إعداد أي تعديلات عليها،

تخيَّل الانتقال مباشرةً إلى أحد برامج تعديل الرموز كي تتمكّن من البدء فورًا بعد إكمال جميع خطوات الإعداد. ويمكنك أيضًا مشاركة رابط بسيط وبدء جلسة تعديل متعدّدة اللاعبين، كما هو الحال في "مستندات Google". وعند الانتهاء، لن تحتاج سوى نقرة واحدة لنشر المحتوى بسلاسة في مجموعة متنوعة من خدمات الاستضافة بدون الحاجة إلى تثبيت أي تطبيقات محلية.

وهذه مجرد لمحة! قد تظهر لنا برامج تعليمية تفاعلية وعروضًا توضيحية للمكوّنات الإضافية المباشرة ومواقع مرحلية ومواقع WordPress اللامركزية على الخوادم الهامشية وحتى إنشاء مكونات إضافية على هاتفك.

المستقبل مثير، ويمكنك أن تكون جزء منه! أفكارك ومساهماتك هي أكسجين في WordPress Playground. يُرجى الانتقال إلى مستودع جيت هب وقول مرحبًا في #meta-playground قناة WordPress.org Slack، ولا تتردد في التواصل مع "آدم" على عنوان البريد الإلكتروني adam@adamziel.com.