ওয়ার্ডপ্রেস প্লেগ্রাউন্ড এবং ওয়েব অ্যাসেম্বলির সাথে ব্রাউজার ওয়ার্ডপ্রেস অভিজ্ঞতা তৈরি করুন

PHP দ্বারা চালিত সম্পূর্ণ ওয়ার্ডপ্রেস শুধুমাত্র WebAssembly সহ ব্রাউজারে চলছে

Adam Zieliński

Thomas Nattestad

আপনি যখন প্রথম ওয়ার্ডপ্রেস প্লেগ্রাউন্ড দেখেন, তখন এটি একটি সাধারণ সাইটের মতো মনে হয়-হয়তো রঙিন পটভূমি ছাড়া। এটা কিন্তু কিছু. আপনি আসলে যা দেখছেন তা হল একটি সম্পূর্ণ ওয়ার্ডপ্রেস টেক স্ট্যাক, পিএইচপি এবং একটি ডাটাবেস সহ, সরাসরি আপনার ব্রাউজারে চলছে।

এই পোস্টে, অ্যাডাম জিলিয়ানস্কি (ওয়ার্ডপ্রেস প্লেগ্রাউন্ডের প্রধান) এবং টমাস ন্যাটেস্ট্যাড (V8-এর জন্য পণ্য ব্যবস্থাপক) অন্বেষণ করেছেন:

• কিভাবে ওয়ার্ডপ্রেস প্লেগ্রাউন্ড আপনাকে একজন ওয়ার্ডপ্রেস ডেভেলপার হিসেবে সাহায্য করতে পারে।
• কিভাবে এটি ফণা অধীনে কাজ করে.
• ওয়ার্ডপ্রেসের ভবিষ্যতের জন্য এর অর্থ কী।

ইনস্টলেশন ছাড়াই ওয়ার্ডপ্রেস ব্যবহার করুন, এটিকে আপনার অ্যাপে এম্বেড করুন এবং এমনকি জাভাস্ক্রিপ্ট দিয়ে এটি নিয়ন্ত্রণ করুন

আপনি বিনামূল্যে playground.wordpress.net এ এমবেড করা ওয়ার্ডপ্রেস ব্যবহার এবং কাস্টমাইজ করতে পারেন। কোন ক্লাউড অবকাঠামো এবং অর্থ প্রদানের জন্য সমর্থন নেই, কারণ সেই সাইটটি সম্পূর্ণরূপে আপনার ব্রাউজারে থাকে–অন্য কেউ এটি দেখতে পারবে না৷ এটাও সাময়িক। আপনি পৃষ্ঠাটি রিফ্রেশ করার সাথে সাথে এটি চলে গেছে। আপনি প্রোটোটাইপিং, প্লাগইনগুলি চেষ্টা করে এবং দ্রুত ধারনা অন্বেষণ করার জন্য এই সাইটগুলির মধ্যে যতগুলি চান ততগুলি পেতে পারেন৷

এমনকি আপনি বিল্ট-ইন পিএইচপি এবং ওয়ার্ডপ্রেস সংস্করণ সুইচার ব্যবহার করে বিভিন্ন পরিবেশে আপনার কোড পরীক্ষা করতে তাদের ব্যবহার করতে পারেন:

ওয়ার্ডপ্রেস প্লেগ্রাউন্ড ওয়ার্ডপ্রেস ব্যবহারের একটি সম্পূর্ণ নতুন উপায়। এটির সম্পূর্ণ শক্তি, তবে, শুধুমাত্র এটিকে আপনার অ্যাপে অন্তর্ভুক্ত করে আনলক করা হয়। সহজ উপায় হল একটি <iframe> এ ওয়ার্ডপ্রেস প্লেগ্রাউন্ড এম্বেড করা এবং ক্যোয়ারী প্যারামিটার API ব্যবহার করে কনফিগার করা। অফিসিয়াল শোকেস সেটাই করে। আপনি যখন Pendant থিম এবং Coblocks প্লাগইন নির্বাচন করেন, এমবেড করা iframe আপডেট হয়ে যায় https://playground.wordpress.net/?theme=pendant&plugin=coblocks- এ নির্দেশ করতে।

iframe শুরু করার একটি সহজ উপায়, কিন্তু এটি শুধুমাত্র মৌলিক কনফিগারেশন বিকল্পের মধ্যে সীমাবদ্ধ। আপনার যদি এর চেয়ে বেশি প্রয়োজন হয় তবে আরও একটি শক্তিশালী API রয়েছে।

ওয়ার্ডপ্রেস প্লেগ্রাউন্ড জাভাস্ক্রিপ্ট ক্লায়েন্ট এমবেড করা সাইটের উপর সম্পূর্ণ নিয়ন্ত্রণ সক্ষম করে

আপনি @wp-playground/client npm প্যাকেজের মাধ্যমে উপলব্ধ সম্পূর্ণ API ব্যবহার করে ফাইল সিস্টেম এবং PHP সহ সম্পূর্ণ ওয়ার্ডপ্রেস সাইট নিয়ন্ত্রণ করতে পারেন। নিম্নলিখিত উদাহরণটি এটি ব্যবহার করার জন্য দেখায় - আরও উদাহরণের জন্য ইন্টারেক্টিভ টিউটোরিয়ালটি দেখুন:

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 ব্যবহার করুন

ওয়ার্ডপ্রেস খেলার মাঠ একটি মনোলিথ নয়। WebAssembly PHP ওয়ার্ডপ্রেস থেকে স্বাধীনভাবে প্রকাশিত হয় এবং আপনি এটি আলাদাভাবেও ব্যবহার করতে পারেন। ওয়েবের জন্য, আপনি কম বান্ডিল আকারের জন্য অপ্টিমাইজ করা @php-wasm/web npm প্যাকেজ ব্যবহার করতে পারেন, এবং Node.js-এ আপনি @php-wasm/node- এর উপর ঝুঁকতে পারেন যা আরও PHP এক্সটেনশন প্রদান করে। অ্যাডাম এই WP_HTML_Tag_Processor টিউটোরিয়ালে ইন্টারেক্টিভ PHP স্নিপেট যোগ করার জন্য আগেরটি ব্যবহার করেছেন। এটি কীভাবে ব্যবহার করবেন তার একটি ঝলক দেখে নিন:

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 বাইনারি হিসাবে চলে

পিএইচপি কেবল ব্রাউজারে বাক্সের বাইরে কাজ করে না। ওয়ার্ডপ্রেস প্লেগ্রাউন্ড Emscripten ব্যবহার করে WebAssembly-এ 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

যাইহোক, ভ্যানিলা পিএইচপি বিল্ডগুলি ব্রাউজারে খুব দরকারী নয়। একটি সার্ভার সফ্টওয়্যার হিসাবে, অনুরোধের বডি পাস করতে, ফাইল আপলোড করতে বা php://stdin স্ট্রীম পূরণ করতে পিএইচপি-তে জাভাস্ক্রিপ্ট API নেই। ওয়ার্ডপ্রেস খেলার মাঠ স্ক্র্যাচ থেকে একটি তৈরি করতে হয়েছিল। WebAssembly বাইনারি C এ লেখা একটি ডেডিকেটেড PHP API মডিউল এবং একটি JavaScript PHP ক্লাসের সাথে আসে যা writeFile() বা run() এর মতো পদ্ধতিগুলিকে প্রকাশ করে।

কারণ প্রতিটি পিএইচপি সংস্করণ একটি স্ট্যাটিক .wasm ফাইল, পিএইচপি সংস্করণ সুইচার আসলে বেশ বিরক্তিকর। এটি সহজভাবে ব্রাউজারকে ডাউনলোড করতে বলে, উদাহরণস্বরূপ, php_7_3.wasm এর পরিবর্তে, বলুন, php_8_2.wasm ।

ডেটাবেস একটি SQL অনুবাদ স্তরের সাথে সমর্থিত

ওয়ার্ডপ্রেসের জন্য MySQL প্রয়োজন। যাইহোক, MySQL এর কোনো WebAssembly সংস্করণ নেই যা আপনি ব্রাউজারে চালাতে পারেন। ওয়ার্ডপ্রেস প্লেগ্রাউন্ড তাই স্থানীয় SQLite ড্রাইভারের সাথে PHP পাঠায় এবং SQLite এর উপর ঝুঁকে পড়ে।

কিন্তু কিভাবে ওয়ার্ডপ্রেস ভিন্ন ডাটাবেসে চলতে পারে?

পর্দার আড়ালে, অফিসিয়াল SQLite ডেটাবেস ইন্টিগ্রেশন প্লাগইন সমস্ত MySQL প্রশ্নগুলিকে বাধা দেয় এবং সেগুলিকে SQLite উপভাষায় পুনর্লিখন করে। 2.0 রিলিজ একটি নতুন ওয়ার্ডপ্রেস প্লেগ্রাউন্ড-ইনফর্মড অনুবাদ লেয়ার পাঠায় যা SQLite-এ ওয়ার্ডপ্রেসকে ওয়ার্ডপ্রেস ইউনিট টেস্ট স্যুটের 99% পাস করতে দেয়।

ওয়েব সার্ভার ব্রাউজারের ভিতরে থাকে

একটি নিয়মিত ওয়ার্ডপ্রেসে, একটি লিঙ্কে ক্লিক করলে, ব্লগ বলুন, blog পৃষ্ঠাটি আনার জন্য দূরবর্তী ব্যাকএন্ডে একটি HTTP অনুরোধ শুরু করবে। যাইহোক, ওয়ার্ডপ্রেস প্লেগ্রাউন্ডের কোন রিমোট ব্যাকএন্ড নেই। এটিতে একটি পরিষেবা কর্মী রয়েছে যা সমস্ত বহির্গামী অনুরোধগুলিকে বাধা দেয় এবং একটি পৃথক ওয়েব ওয়ার্কারে চলমান একটি ইন-ব্রাউজার পিএইচপি উদাহরণে প্রেরণ করে।

নেটওয়ার্কিং WebSockets মাধ্যমে সমর্থিত হয়

নেটওয়ার্কিংয়ের ক্ষেত্রে, WebAssembly প্রোগ্রামগুলি জাভাস্ক্রিপ্ট API কল করার জন্য সীমাবদ্ধ। এটি একটি সুরক্ষা বৈশিষ্ট্য, তবে এটি একটি চ্যালেঞ্জও উপস্থাপন করে। আপনি কীভাবে জাভাস্ক্রিপ্টে উপলব্ধ উচ্চ-স্তরের অ্যাসিঙ্ক্রোনাস APIগুলির সাথে পিএইচপি দ্বারা ব্যবহৃত নিম্ন-স্তরের, সিঙ্ক্রোনাস নেটওয়ার্কিং কোড সমর্থন করেন?

ওয়ার্ডপ্রেস প্লেগ্রাউন্ডের জন্য, উত্তরটিতে একটি ওয়েবসকেট থেকে TCP সকেট প্রক্সি, Asyncify এবং php_select এর মতো গভীর পিএইচপি ইন্টারনাল প্যাচিং জড়িত। এটা জটিল, কিন্তু একটি পুরস্কার আছে. Node.js-টার্গেটেড PHP বিল্ড ওয়েব API-এর অনুরোধ করতে পারে, কম্পোজার প্যাকেজ ইনস্টল করতে পারে, এমনকি একটি MySQL সার্ভারের সাথে সংযোগ করতে পারে।

ওয়ার্ডপ্রেস ব্রাউজারের চেয়েও বেশি জায়গায় ব্যবহার করা যায়

যেহেতু ওয়ার্ডপ্রেস এখন WebAssembly-এ চলতে পারে, তাই আপনি এটিকে Node.js সার্ভারেও চালাতে পারেন—এটি একই V8 ইঞ্জিন! অবশ্যই StackBlitz-এর সাথে আপনি সরাসরি ব্রাউজারে Node.js চালাতে পারেন, যার অর্থ আপনি WebAssembly-এ কম্পাইল করা ওয়ার্ডপ্রেস এবং PHP চালাতে পারেন, Node.js-এ এক্সিকিকিউট করতে পারেন, যা ব্রাউজারে চলমান WebAssembly-তেও কম্পাইল করা হয়। WebAssembly সার্ভারবিহীন স্থানেও জনপ্রিয়তায় বিস্ফোরিত হচ্ছে এবং ভবিষ্যতে এটি সেই পরিকাঠামোতেও চলতে পারে।

ভবিষ্যৎ শূন্য-সেটআপ, ইন্টারেক্টিভ, এবং সহযোগী ওয়ার্ডপ্রেস অ্যাপ আনতে পারে

সরাসরি একটি কোড এডিটরে ঝাঁপিয়ে পড়ার কল্পনা করুন যেখানে আপনি সমস্ত সেটআপ সম্পূর্ণ করার সাথে সাথে এখনই বিল্ডিং পেতে মুক্ত। আপনি এমনকি একটি সাধারণ লিঙ্ক শেয়ার করতে পারেন এবং একটি মাল্টিপ্লেয়ার সম্পাদনা সেশন শুরু করতে পারেন, যেমন Google ডক্সে। এবং আপনার কাজ শেষ হয়ে গেলে, আপনার সৃষ্টিগুলিকে বিভিন্ন হোস্টিং পরিষেবাগুলিতে নিখুঁতভাবে মোতায়েন করতে শুধুমাত্র একটি ক্লিকেই লাগবে-সব কিছুই স্থানীয়ভাবে ইনস্টল না করেই!

এবং যে শুধু একটি আভাস! আমরা ইন্টারেক্টিভ টিউটোরিয়াল, লাইভ প্লাগইন ডেমো, স্টেজিং সাইট, প্রান্ত সার্ভারে বিকেন্দ্রীভূত ওয়ার্ডপ্রেস এবং এমনকি আপনার ফোনে প্লাগইন তৈরি দেখতে পারি।

ভবিষ্যত উত্তেজনাপূর্ণ এবং আপনি এটির একটি অংশ হতে পারেন! আপনার ধারণা এবং অবদান ওয়ার্ডপ্রেস খেলার মাঠের অক্সিজেন. GitHub সংগ্রহস্থলে যান, #meta-playground WordPress.org স্ল্যাক চ্যানেলে হাই বলুন, এবং নির্দ্বিধায় অ্যাডামের সাথে adam@adamziel.com এ যোগাযোগ করুন।