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

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

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

يمكنك التحكم في موقع 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 التجريبية تم تطوير مسار مخصّص لإنشاء مترجم PHP في WebAssembly باستخدام Emscripten. إن إنشاء لغة 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 المكون الإضافي يعترض جميع استعلامات MySQL ويعيد كتابتها بلغة SQLite. الإصدار 2.0 سفن الإصدار طبقة ترجمة جديدة تستند إلى منصة WordPress Play تسمح لمنصة WordPress على SQLite باجتياز 99% من مجموعة اختبار وحدات WordPress.

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

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

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

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

بالنسبة إلى WordPress Playground، تتضمن الإجابة خادم WebSocket لخادم وكيل لمقبس بروتوكول التحكم بالنقل، عدم المزامنة والتصحيح الدقيق بيانات 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 قناة Slack على WordPress.org، ولا تتردد في للتواصل مع آدم على عنوان البريد الإلكتروني adam@adamziel.com.