سير عمل تطبيق الويب

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

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

ثلاثة مستويات لمنطق الأعمال في AppMaster Web Designer:

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

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

🔔 من المهم إعادة تحميل المعاينة قيد التشغيل بعد إضافة أي منطق عمل جديد لإطلاق BP.

مشغلات التطبيق

مشغلات التطبيق في AppMaster Web Designer هي مشغلات عالية المستوى تستجيب للأحداث على مستوى التطبيق أو الحالات التي تقوم بتنفيذ عمليات أعمال محددة لتحسين الوظائف وتجربة المستخدم.

يقدم AppMaster مجموعة متنوعة من مشغلات التطبيقات، كل منها مصمم لسيناريوهات محددة:

• عند تشغيل التطبيق: يتم تنشيطه عند بدء تشغيل التطبيق، وهو مثالي لإجراءات الإعداد الأولية.
• التنقل في التطبيق: يتم تشغيله أثناء التنقل بين أجزاء مختلفة من التطبيق.
• On App Blur: يتم تشغيله عندما يفقد التطبيق التركيز، وهو مفيد لإجراءات الإيقاف المؤقت أو الحفظ.
• التركيز على التطبيق: يتم تنفيذه عندما يستعيد التطبيق التركيز، وهو أمر رائع لاستئناف المحتوى أو تحديثه.
• مخفي في التطبيق: يتم تنشيطه عندما يكون التطبيق مصغرًا أو غير مرئي على الشاشة.
• في التطبيق المرئي: يتم تشغيله عندما يصبح التطبيق مرئيًا مرة أخرى، وهو مفيد لتحديث المحتوى.
• عند تدمير التطبيق: يتم تنفيذه أثناء عملية إيقاف تشغيل التطبيق.
• عند التطبيق عبر الإنترنت: يتم تشغيله عندما يكتشف التطبيق حالة الاتصال بالإنترنت، وهو مثالي لمزامنة البيانات.
• On App Offline: يتم تفعيله عندما يصبح التطبيق غير متصل بالإنترنت، مما يتيح وظائف عدم الاتصال بالإنترنت.
• مطلوب مصادقة التطبيق: يتم التنشيط عند تلقي استجابة "401 (غير مصرح به)"، مما يطالب بإعادة مصادقة المستخدم.
• في التطبيق المحظور: يتم تشغيل الاستجابة "403 (ممنوع)"، والتي تُستخدم عادةً للتحكم في الوصول والأذونات.

يمكن توسيع القائمة الدقيقة لمشغلات التطبيقات عن طريق إنشاء نقاط نهاية WebSocket على مستوى الواجهة الخلفية لتطبيقك.

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

العمليات التجارية العامة

تم تصميم عمليات الأعمال العامة في AppMaster Web Designer خصيصًا لتغليف العمليات المتكررة والمنطق الزائد في تدفقات متميزة. بمجرد إنشائها، يمكن دمج عمليات الأعمال هذه بسلاسة ككتل مميزة في أي مستوى من عمليات الأعمال الخاصة بتطبيق الويب الخاص بك.

دلائل الميزات:

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

سهولة إعادة الاستخدام:

لاستخدام عملية أعمال عامة أثناء بناء المنطق، ما عليك سوى سحب الكتلة المطلوبة من مجموعة BPs التي أنشأها المستخدم إلى اللوحة القماشية الخاصة بك.

🔔 مراعاة الأداء: من المهم ملاحظة أنه بالنسبة للمهام المعقدة والمستهلكة للموارد، نوصي بتنفيذ هذه العمليات على جانب الخادم (الواجهة الخلفية). ويضمن هذا النهج أداء وكفاءة أفضل، خاصة بالنسبة للعمليات التي تتطلب حوسبة أو تتطلب معالجة آمنة للبيانات الحساسة.

مشغلات العنصر

تعد مشغلات المكونات في AppMaster Web Designer ضرورية لإضافة التفاعل إلى تطبيقات الويب الخاصة بك. ترتبط هذه المشغلات بعناصر محددة لواجهة المستخدم، مما يؤدي إلى تنشيط عمليات الأعمال المحددة مسبقًا استجابةً لتفاعلات المستخدم. يحتوي كل مكون في تطبيقك على مجموعة من المشغلات التي يمكن تخصيصها لإنشاء تجربة مستخدم ديناميكية وجذابة:

• المشغلات الشائعة: تشترك المكونات في مجموعة من المشغلات القياسية مثل onCreate و onDestroy و onShow و onHide ، والتي تستجيب لدورة حياة المكون وتغييرات الرؤية.
• مشغلات محددة: بالإضافة إلى المشغلات الشائعة، تحتوي المكونات على مشغلات فريدة مصممة خصيصًا لوظائفها. على سبيل المثال، قد يحتوي الزر على مشغل onClick ، وقد يستجيب الجدول لـ onUpdateData ، وقد تحتوي علامات التبويب على مشغل onTabSelect .

وعلى الرغم من التنوع، يظل المبدأ الأساسي ثابتًا: حيث يؤدي الحدث إلى إطلاق عملية تجارية مقابلة. من خلال استخدام Component Triggers بشكل فعال، يمكنك إنشاء تطبيق ويب تفاعلي وسريع الاستجابة يتفاعل مع مدخلات المستخدم في الوقت الفعلي، مما يعزز تجربة المستخدم الشاملة ويجعل تطبيقك أكثر سهولة وسهولة في الاستخدام.

الوصول إلى المشغلات

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

إنشاء العمليات التجارية

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

بناء سير عمل التطبيق

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

• اكتشف قيم X و Y. احصل عليها من حقول الإدخال المقابلة.
• قم بتشغيل نقطة نهاية للعمليات الحسابية وتمرير معلمات X وY إليها.
• اجعل حاوية النتيجة مرئية.
• ضع نتيجة الحساب في حقول التسمية المطلوبة.

حدد عنصر زر الحساب الخاص بنا في اللوحة القماشية وانقر فوق OnClick Trigger.

سيكون محرر العمليات التجارية مفتوحًا. هنا سوف نبني عملية أعمالنا للزر.

الحصول على القيم من المدخلات

الخطوة الأولى هي الحصول على القيم التي أدخلها المستخدم. بالنسبة له، يوفر AppMaster كتلة Input Float Get Data، والتي تتميز بـ "Element Key" كمعلمة إدخال خاصة بها وتخرج "Value"، وتقرأ بشكل أساسي القيم الحالية من المكون المحدد.

نظرًا لأن لدينا حقلين منفصلين (يمثلان قيم X وY)، فستحتاج إلى استخدام كتلتين من نوع "Input Float Get Data" - واحدة لكل حقل إدخال.

لإعداده:

• اسحب كتلتي Input Float Get Data إلى اللوحة القماشية الخاصة بك لكل حقل إدخال.
• قم بتعيين مفتاح العنصر لكل كتلة لتتوافق مع المدخلات العائمة المعنية. يؤدي هذا إلى ربط الكتلة بعنصر واجهة المستخدم الصحيح، مما يضمن قراءتها للبيانات الصحيحة.

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

☝️ تساعد إعادة تسمية العناصر أثناء مرحلة التصميم في التعرف عليها بسهولة لاحقًا أثناء تكوين منطق العمل.

إطلاق نقطة النهاية

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

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

في الوحدة 5 ، قمنا بتكوين نقطة نهاية باستخدام طريقة GET وقمنا بتعيين عنوان URL الأساسي لها "module4-basic" . يجب أن تجده مدرجًا كـ - طلب الخادم GET /module4-basic/ واسحبه إلى اللوحة القماشية.

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

الخطوة الأخيرة هي إدخال قيم X و Y التي حصلت عليها من الخطوة السابقة في نقطة النهاية. وهذا يسمح للواجهة الخلفية بتلقي هذه المدخلات ومعالجتها، وإجراء الحسابات اللازمة.

حالة عناصر واجهة المستخدم

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

وإليك كيفية تحقيق ذلك:

1. ابدأ بسحب كتلتين من خصائص Flex Update إلى اللوحة القماشية الخاصة بك.
2. لكل كتلة خصائص Flex Update ، قم بتعيين معلمة Element Key المقابلة للحاويات المعنية - واحدة لحاوية النتائج والأخرى لحاوية التلميحات.
3. قم بتكوين معلمة الرؤية ضمن هذه الكتل. قم بتعيين المعلمة Visible على True لحاوية النتائج، مع التأكد من أنها تصبح مرئية بعد الحساب. وعلى العكس من ذلك، قم بتعيين هذه المعلمة على False لحاوية التلميحات لإخفائها عند اكتمال العملية الحسابية.

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

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

معاينة في الوقت الحقيقي

لتقييم التقدم المحرز في عملية عملك، يمكنك بسهولة معاينة النتائج المتوسطة:

1. أولاً، انقر فوق الزر Save & Exit الموجود في محرر عمليات الأعمال. سيؤدي هذا الإجراء إلى حفظ سير العمل الحالي لديك وإغلاق محرر عمليات الأعمال.
2. قم بإجراء معاينة في الوقت الفعلي لتطبيق الويب الخاص بك للتحقق من التفاعل مع التطبيق كما لو كان مباشرًا.
3. اختبر الوظيفة بالنقر فوق الزر "حساب" .

إذا تم إعداد عملية عملك بشكل صحيح، فسترى الاستجابة الديناميكية: ستصبح الحاوية التي تحتوي على التلميح مخفية، وفي نفس الوقت، سيتم الكشف عن الحاوية التي تعرض النتائج.

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

تقديم البيانات

بمجرد اختبار منطق تطبيقك بنجاح، فقد حان الوقت لتحسين منطق عملك بشكل أكبر.

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

نظرًا لأنه يتم إرجاع النتائج من الواجهة الخلفية بترتيب محدد مسبقًا، فإن مهمتك هي محاذاة كل جزء من البيانات (عنصر الصفيف) مع عنصر كتلة النص الصحيح في واجهة المستخدم الخاصة بك.

لمعالجة البيانات، سوف نستخدم الكتل التالية:

• عنصر المصفوفة : استخدمه للوصول إلى العناصر الفردية داخل مصفوفة النتائج. ستحتاج إلى كتلة لكل فهرس، تتراوح من 0 إلى 4.
• إلى نص: نظرًا لأن بياناتك بتنسيق Float، استخدم هذه الكتلة لتحويل قيم Float هذه إلى تنسيق نص مناسب للعرض.
• بيانات تحديث كتلة النص: هذه الكتلة ضرورية لملء الكتل النصية في واجهة المستخدم الخاصة بك ببيانات النص المحولة.

ستقوم هذه الكتل باستخراج البيانات من مصفوفة النتائج، وتحويل البيانات إلى تنسيق نصي، ثم تحديث الكتل النصية المقابلة في واجهة المستخدم الخاصة بك.

وإليك كيفية إعداده:

1. ضع هذه الكتل على القماش.
2. في كتلة Array Element ، أدخل المصفوفة المستلمة من نقطة النهاية الخاصة بك (ابدأ من 0).
3. قم بتعيين الفهرس لاستهداف العنصر المناسب داخل المصفوفة.
4. قم بتوصيل قيمة الإخراج لعنصر الصفيف إلى كتلة النص .
5. حدد مفتاح العنصر في كتلة النص وقم بتحديث البيانات إلى عنصر واجهة المستخدم الخاص بك حيث تريد عرض البيانات.
6. قم بتوصيل الكتل بالتتابع.

قم بتكرار هذا التسلسل من الكتل لكل عنصر في المصفوفة التي ترغب في عرضها. اضبط الفهرس في كل كتلة "عنصر المصفوفة" ليتوافق مع العناصر المختلفة للمصفوفة.

تأكد من أن هذه الكتل متصلة أيضًا بالتسلسل.

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

هذا يكمل إنشاء العملية التجارية.

احفظ عملية عملك وتحقق من النتيجة النهائية في المعاينة. قم بتشغيل معاينة التطبيق على خطة النشر تلك حيث قمت بنشر نقطة النهاية الخاصة بك في الوحدة 5 .

🎉 تهانينا على الإنجاز الرائع!

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

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