wasmbuilder.app
1.0.0
هذا المشروع هو أداة واجهة المستخدم الرسومية بسيطة لبناء مكونات ويب من مكونات ويب أخرى.
لإنشاء هذا المشروع ، يجب تثبيت الأدوات التالية محليًا:
لتثبيت تبعيات المشروع ، قم بتشغيل الأمر التالي:
$ make setup سيؤدي ذلك أيضًا إلى تثبيت أدوات سطر أوامر cargo component (إن لم يكن مثبتًا بالفعل).
لتشغيل التطبيق محليًا ، قم بتشغيل الأمر التالي:
$ make run بشكل افتراضي ، يتم تشغيل التطبيق على المنفذ 3000. افتح متصفح الويب وانتقل إلى http://localhost:3000 لعرض التطبيق.
التطبيق هو تطبيق رد فعل من صفحة واحدة يتم تجميعه مع الطرود.
يستخدم مكونًا ويبًا (تم تنفيذه في RUST) ، وهو مسؤول عن تحليل ملفات مكونات Webassembly والحفاظ على حالة الرسم البياني للتكوين.
يحافظ تطبيق React على حالة واجهة المستخدم ويضمن الحفاظ على حالة الرسم البياني الداخلي متزامنًا مع التمثيل المرئي للرسم البياني.
تم تطوير واجهة مستخدم التطبيق من قبل شخص ليس مصممًا (أو حتى امتلاك مهارات تطوير الواجهة الأمامية البدائية). إنها ليست جميلة ، لكنها تعمل ™. سحب طلبات لتحسين الواجهة موضع ترحيب كبير!
حاليًا أسهل طريقة لبناء مكونات ويب على شبكة الإنترنت هي استخدام مكون الصدأ والبضائع.
في المستقبل ، سيتم دعم العديد من لغات البرمجة الأخرى ، وبما أن مكونات Webassembly هي نفسها غارقة في اللغة ، فسيتم استخدامها من خلال هذا التطبيق.
في البداية ، لن يكون للتطبيق أي مكونات ويب في مكتبة المكون.
انقر فوق زر Add Component لإضافة مكون جديد إلى المكتبة وحدد ملف Webassembly Component ( .wasm ) المطلوب.
بدلاً من ذلك ، يمكن إضافة ملف التمثيل النصفي للمكونات على شبكة الإنترنت ( .wat ) إلى المكتبة.
لعرض تفاصيل حول مكون ، انقر على المكون في المكتبة.
لتثبيت مكون ، اسحب المكون من المكتبة إلى سطح التصميم.
سيؤدي ذلك إلى إنشاء مثيل للمكون الذي يمكن توصيله بالحالات الأخرى في الرسم البياني.
كل مثيل مكون لديه مجموعة من الواردات والصادرات. يمكن توصيل الصادرات والواردات عن طريق سحب اتصال بين الدوائر والمربعات التي تمثلها.
مثال مثال:
في هذا المثال ، يستورد مثيل مكون middleware مثيلًا يسمى backend وتصدير خمسة أنواع ودالة تسمى execute .
تمثل الدائرة I في الزاوية اليمنى العليا المثيل نفسه ويمكن استخدامه للتواصل مع استيراد على مثيل آخر يأخذ استيراد مثيل مطابق.
أخيرًا ، يمكن استخدام مربع الاختيار في الركن الأيسر العلوي لتصدير المثيل (انظر أدناه).
لتوصيل حالتين ، اسحب اتصالًا من دائرة التصدير في حالة واحدة إلى مربع استيراد مطابق على مثيل آخر.
لا تحتاج الأسماء إلى مطابقة ، ولكن يجب أن تكون أنواع العناصر متوافقة مع بعضها البعض.
يشكل توصيل مثيل علاقة تبعية بين الحالتين: يتم ضمان مثيل مثيل التصدير قبل مثيل الاستيراد.
اتصال مثال:
في هذا المثال ، يتم توصيل مثيل مكون service باستيراد backend لمثيل مكون middleware .
عند إنشاء مكون لهذا الرسم البياني ، سيتم إنشاء مثيل لمثلة service قبل مثيل middleware ، والذي سيتلقى مثيل service في وسيطة إنشاء إنشاء الواجهة backend .
قد يتم تعيين مثيل واحد في الرسم البياني حاليًا كمثيل للتصدير.
سيتم تصدير جميع الصادرات على هذا المثال المخصص مباشرة من المكون الناتج.
لتعيين مثيل للتصدير ، انقر فوق مربع الاختيار في الزاوية اليسرى العلوية من المثيل.
إذا لم يتم فحص أي مثيل ، فلن يكون للمكون الناتج أي صادرات.
لتنزيل المكون الذي يمثل الحالة الحالية للرسم البياني ، انقر فوق الزر Download Component .
امنح المكون اسمًا وانقر فوق زر Download ؛ سيتم تنزيل ملف المكون الجديد .wasm بواسطة متصفحك.
إذا بقيت مربع الاختيار define component dependencies ، فسيتم تضمين أي مكونات مشار إليها في الرسم البياني في المكون الناتج ؛ قم بإلغاء تحديد مربع الاختيار لاستيراد المكونات بدلاً من ذلك (ملاحظة: لا تدعم WASMTIME استيراد المكونات حاليًا).
بشكل افتراضي ، سيتم أيضًا إضافة المكون الناتج إلى مكتبة المكون للتطبيق ويمكن سحبها من المكتبة إلى سطح التصميم لإنشاء مثيل جديد.
