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

سننفذ في هذا المشروع ما يلي:

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

التفكيك Decomposition: هو تقسيم المشروع إلى أجزاء أصغر وأسهل في التنفيذ، مما يتيح إنشاء المشروع على أجزاء ويسهل إتمامه.

ألقِ نظرة على النتيجة النهائية لمشروعنا بالنقر على زر العلم الأخضر:

يتألف مشروعنا من المراحل الأربع التالية التي سنشرحها لاحقًا:

• مرحلة الإعداد
• مرحلة إثارة الفضول
• مرحلة المفاجأة
• مرحلة ردة الفعل

يجب عليك اختيار تصميم مناسب وقصة مناسبة لمشهد الرسوم المتحركة واختيار عنصر المفاجأة. فكر في ماهية القصة التي سيرويها مشهدك؟ استلهم أفكارك من المشاريع التالية:

• مشروع شبح التفاحة

• مشروع القط السحري

• مشروع ضيف أعماق البحار

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

مرحلة الإعداد

هل اخترت قصة لمشهدك؟ سنضيف في هذه الخطوة شخصية القصة الرئيسية، وخلفيةً، وغرضًا مثيرًا للاهتمام.

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

• ثالثًا، اختر خلفيةً مناسبةً للمشهد.

• رابعًا، قرر أين تريد أن تضع الكائنات، ما حجمها وكيف ستبدو.

اختيار موضع للكائن وتثبيته

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

كرر هذه الخطوة للكائن الآخر.

تعديل حجم الكائن

لتغيير حجم الكائن في كامل المشروع، غيّر قيمة الحجم من نافذة الكائن. أما إذا أردت تغيير حجم الكائن في جزء من المشروع، أضف كتلة "اجعل الحجم مساويًا" واختر الحجم الذي تفضله:

تغيير مظهر الكائن

إذا أردت تغيير مظهر الكائن في كامل المشروع، انقر على نافذة المظاهر ثم اختر أحد المظاهر المتوفرة:

أما إذا أردت تغيير مظهر الكائن في جزء من المشروع، أضف كتلة غير المظهر إلى واختر المظهر الذي تريده من النافذة المنزلقة:

أضف كتلة اختفِ لإخفاء الكائن في بداية المشروع:

تغيير اتجاه الكائن

قد ترغب في تغيير اتجاه الكائن بعد إضافته. إذا أردت تغيير اتجاه الكائن في كامل المشروع، غيّر الاتجاه ونمط الدوران من نافذة الكائن:

أما إذا أردت تغيير اتجاه الكائن في جزء من المشروع، أضف كتلتي تغيير نمط الدوران والاتجاه التاليتين:

احفظ المشروع

سمّ المشروع باسم مناسب في مربع الاسم أعلى الزاوية اليمينية:

انقر على علامة تبويب ملف ثم انقر على خيار الحفظ إلى حاسوبك:

إذا كنت متصلًا بالإنترنت وتملك حسابًا على موقع سكراتش سيظهر لك خيار الحفظ الآن.

مرحلة إثارة الفضول

اختر ما هو الأمر المثير للاهتمام الذي سيفعله الكائن الثاني لجذب الانتباه؟ كيف ستتفاعل معه الشخصية الأساسية؟

الشخصية الثانوية

أولًا، اختر ماذا تريد أن يفعل كائن الشخصية الثانوية من الخيارات التالية:

• الاهتزاز: أضف الكتل التالية ليبدو الكائن وكأنه يهتز وذلك بتدوير الكائن بضع درجات باتجاه اليمين واليسار وتكرار ذلك عدة مرات، كما يلي:

• تأثيرات بصرية: يمكن تطبيق عدة مؤثرات بصرية على الكائنات في سكراتش، كما في المثال التالي:

تحتوي كل من الكتلتين اجعل مؤثر اللون و غيّر مؤثر اللون على نافذة منزلقة يمكن اختيار عدة تأثيرات منها لتغيير مظهر الكائنات وهي:

• اللون: يمكن اختيار القيم من القيمة 0 إلى القيمة 199 (تُدَور الأرقام الكبيرة، فيُعد الرقم 200 كالرقم 0).
• عين السمكة: لا تعطي القيمة 0 أي تأثير، وكلما كبرت القيمة إزداد تأثير "عين السمكة" fisheye، أما القيم السالبة فتعطي تأثيرًا عكسيًا.
• الدوامة: لا تعطي القيمة 0 أي تأثير، وتعطي القيم الكبيرة الموجبة تأثيرًا أفعوانيًا نحو اليسار، أما القيم السالبة الكبيرة فتعطي تأثيرًا أفعوانيًا نحو اليمين.
• البكسلة: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم الكبيرة عدد البكسلات في الكائن.
• الموزاييك: لا تعطي القيمة 0 أي تأثير، بينما تغير القيم الكبيرة الموجبة والسالبة عدد النسخ.
• شدة الإضاءة: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم من 1 إلى 100 من سطوع الكائن، وتجعل القيم السالبة من القيمة 1- حتى القيمة 100- الكائن أكثر عتمةً.
• الشبح: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم من 1 إلى 100 من شفافية الكائن.

أسند قيمًا مختلفة للتأثيرات واكتشف كيف سيتغير مظهر الكائن باختلاف القيم.

ولاحظ أن القيمة 225 تعطي نفس تأثير القيمة 25 عند إسنادها لتأثير تغيير اللون، ولا يحدث أي تغيير على الكائن في باقي التأثيرات عند تجاوز القيمة العليا والدنيا للتأثير.

يمكنك إما استخدام كتلة أزل التأثيرات الرسومية أو الضغط على زر العلم لمسح التأثيرات.

أما إذا أردت تطبيق تأثير معين على الكائن أثناء تشغيل المشروع فضع كتلة تغيير المؤثر الرسومي تحت كتلة عند النقر على العلم الأخضر:

لا تنسى أنه يمكنك تطبيق هذه التأثيرات الرسومية واللونية على المنصة أيضًا.

الشخصية الرئيسية

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

• جعل الشخصية تتكلم باستخدام إضافة تحويل النص إلى كلام: سنتعلم في هذه الخطوة كيفية جعل الكائنين بيكو Pico وجيغا Giga ينطقان كما في المشروع التالي:

انقر على زر إدراج إضافة:

واختر إضافة نص إلى كلام:

ستلاحظ إضافة كتل النص إلى كلام إلى قائمة كتل سكراتش:

يمكنك جعل الكائنات تنطق عند النقر عليها، كما يمكنك اختيار اللغة التي ستتحدث بها، باستخدام الكتل التالية:

كما يمكنك أيضًا اختيار صوت المتحدث، سواء أردت صوت امرأة، أم رجل، أو حتى صوت هرة!

انقر على مشروع الكائنات الفضائية لمشاهدتها وهي تتحدث.

• تغيير مظهر الكائن: يمكنك استخدام كتلة غيّر المظهر مع كتلتي قُل أو فكر لإيضاح ما يفكر أو يشعر به الكائن، كما في المشروع التالي:

وذلك باستخدام الكتل التالية:

احرص على استخدام الكتل ذات القيم الزمنية كي تستطيع ملاحظة التغير في المظهر.

• تحريك الكائن باستخدام المظاهر: شاهد حركة القنفذ في المشروع التالي:

يمكنك تحريك الكائن باستخدام كتلتي تغيير المظهر والتحرك داخل حلقة تكرار. كما يمكنك تغيير سرعة الكائن عبر تغيير الوقت في كتلة الانتظار:

يمكنك استخدام كتلة المظهر التالي مع كتلة تكرار لعرض جميع المظاهر التي يملكها الكائن. زِد عدد الخطوات في كتلة الحركة لجعل لزيادة سرعة الكائن، وغيّر العدد في كتلة التكرار إذا أردت تعديل المسافة. أما إذا أردت أن يتحرك الكائن للخلف، فاستخدم أرقامًا سالبة، أو كتلة اتجه نحو الاتجاه، وتحديد القيمة 90- لتغيير اتجاه الكائن قبل أن يتحرك.

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

• تحديد الموضع والمظهر الابتدائي للكائن: إليك الكتل اللازمة لتحديد الموضع والمظهر الابتدائي للكائن عند بداية المشروع:

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

تصحيح الأخطاء

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

مرحلة المفاجأة

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

هل سبق لك أن كتبت قصة فيها تحول غير متوقع للأحداث؟ أو شاهدت عرضًا أو حتى قرأت كتابًا له نهاية غير متوقعة؟ استخدم ما شاهدته لخلق قصة المشهد المتحرك الخاص بك.

متى ستحدث المفاجأة؟

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

تأخير تنفيذ المشروع بضع ثوان

اطلع على المشروع التالي ولاحظ كيف ينفذ بعد الانتظار بضع ثوان:

استخدم كتلة المؤقت التالية لتأخير تنفيذ المشروع بضع ثوانٍ بعد النقر على العلم الأخضر:

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

كما يمكنك تأخير تنفيذ المشروع باستخدام كتلة انتظار:

تصميم المفاجأة

اختر كيف سيفاجئنا الغرض أو الكائن المثير للاهتمام، هل عبر تشغيل صوت ما؟ أم عبر تغيير مظهره؟ أو تغيير المؤثرات الرسومية؟ أم تغيير حجمه؟

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

إضافة مظهر جديد للكائن

انقر على نافذة المظاهر ثم انقر على أيقونة اختيار مظهر لإضافة المظهر الذي تحب من المكتبة:

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

تحويل الكائن إلى كائن آخر

حول الكائن إلى كائن آخر أو أضف مظهرًا مفاجئًا إلى الكائن باستخدام كتلتي الإظهار والإخفاء كما يلي:

أضف كتلة الإخفاء التالية على الكائن الأصلي:

ثم أضف كتلة الإظهار على الكائن الجديد:

لا تنسى إضافة كتلة الإخفاء للكائن الجديد بعد كتلة عند النقر على العلم الأخضر!

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

تصحيح الأخطاء

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

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

والثانية هي باستخدام الكتلتين البرمجيتين: إرسال إلى الطبقة أو إرسال إلى الطبقة الخلفية:

استخدم حلقة تكرار مستمرة لإبقاء الكائن في المقدمة أو في الخلف دائمًا، أو لإعادته إلى طبقته الصحيحة بعد تحريكه:

• لا تبدأ المفاجأة في الوقت الصحيح: تأكد من أنك اخترت المؤقت بدلًا عن الضجيج من النافذة المنسدلة للكتلة التالية، تأكد بعدها من وقت الانتظار الذي حددته:

مرحلة ردة الفعل

سنختار في هذه الخطوة كيف ستتفاعل الشخصية الرئيسية مع المفاجأة، ماذا ستكون ردة فعلها، هل ستقول شيئًا ما، تصدر صوتًا، تتحرك أو تغير مظهرها؟ الخيار متروك لك!

متى ستتفاعل الشخصية

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

كيف ستتفاعل الشخصية

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

إضافة صوت للكائنات على المنصة

حدد الكائن الذي تريد إضافة صوتٍ له، ثم اضغط على علامة تبويب الأصوات، ولاحظ أن لكل كائن صوت افتراضي خاص به:

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

ضع مؤشر الفأرة (أو إصبعك، إذا كنت تستخدم جهازًا لوحيًا) فوق رمز التشغيل، لتشغيل الصوت:

ثم اضغط على الصوت الذي ترغب به لإضافته إلى الكائن، ستنتقل بعدها إلى علامة تبويب الأصوات وسيظهر الصوت الذي اخترته:

ستجد الصوت الجديد الذي أضفته ضمن قائمة كتل الصوت في علامة تبويب الأصوات:

كما يمكنك إضافة أصوات للمنصة.

تسجيل الأصوات

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

اضغط على رمز إضافة صوت ثم اضغط على رمز التسجيل :

ثم اضغط على زر التسجيل البرتقالي عندما تكون جاهزًا للتسجيل:

واضغط على زر إيقاف التسجيل عند الانتهاء:

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

اضغط زر الحفظ عند الانتهاء، ستنتقل بعدها إلى علامة تبويب الأصوات وسيظهر التسجيل الذي أضفته:

ستجد الصوت الجديد الذي سجلته ضمن كتل الصوت في علامة تبويب الأصوات:

الآن، انقر على العلم الأخضر لتختبر مشروعك، هل تتحرك الكائنات بانسيابية؟ هل لديك عنصر تشويق ورد فعل في قصتك؟ هل يُعاد تعيين كل شيء بشكل صحيح عند النقر فوق العلم الأخضر مرة أخرى؟

قد تحتاج إلى تعديل الوقت في كتل الانتظار وكتل المؤقت كي تحصل على مشهد متحرك أكثر انسيابية.

اختبر معلوماتك

انعش ذاكرتك واختبر معلوماتك بالإجابة عن الأسئلة التالية:

1. السؤال الأول: شغل المشروع التالي بالنقر على العلم الأخضر، ثم شغله مرةً ثانية، ما الخطأ الذي تلاحظه وكيف يمكن إصلاحه؟

(حاول تذكر ما تعلمناه قبل الإطلاع على الإجابة أدناه)

• الإجابة الصحيحة: تختفي البيضة ويزول عنصر المفاجأة بعد أول مرة، ويمكن إصلاح ذلك عبر إضافة كتلة تغيير المظهر لتظهر البيضة على الشاشة مرةً أخرى.

2. السؤال الثاني: ما هو عمل الكتلة التالية؟

• الإجابة الصحيحة: الانتظار 6 ثواني ثم إظهار الكائن.

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

• الإجابة الصحيحة: مرحلة الإعداد، مرحلة إثارة الفضول، مرحلة عنصر المفاجأة، مرحلة ردة الفعل.

ترقية المشروع

إليك بعض التحسينات التي يمكنك إضافتها على مشروعك لترقيته:

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

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

وألق نظرةً أيضًا على معرض أعمال مشاريع المشهد المتحرك ذو عنصر المفاجأة لمشاهدة المشاريع التي أنشأها أعضاء مجتمع سكراتش.

ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

خاتمة

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

ترجمة -وبتصرف- للمقال Surprise! animation من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

ناقش ديميان Demian التحديات التي تواجهها المواقع متعددة الأصول multiple origins عند محاولة إنشاء تطبيق ويب تقدمي واحد يشملها جميعًا، وذلك في مقال تطبيق الويب التقدمي على أصول متعددة.

يعد موقع التجارة الإلكترونية الافتراضي www.example.com مثالًا على موقع متعدد الأصول، إذا كان:

• الصفحة الرئيسية مُستضافة على العنوان https://www.example.com.
• صفحات الفئات مستضافة على عنوان مختلف مثلًا: https://category.example.com.
• صفحات تفاصيل المنتج مستضافة على عنوان ثالث مختلف، مثلًا: https://product.example.com.

تُقيِّد سياسة الأصل المشترك same-origin مشاركة عمّال الخدمة service workers وذاكرة التخزين المؤقت cache، والأذونات permessions، عبر الأصول المختلفة، لذا نوصي بشدة بتجنب هذا النوع من إعداد المواقع (سياسة الأصل المشترك)، ونوصي من لديهم مواقع مبنية بهذه الطريقة بالفعل، بالنظر في الانتقال إلى معمارية الموقع ذات الأصل الواحد single origin إذا أمكن.

تجنب استخدام أصول مختلفة لأقسام نفس الموقع عند بنائك تطبيق PWA واحد يشملها جميعًا.

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

لكن قبل البدء سنراجع أهم المفاهيم التقنية التي ستلزمنا، وذلك بالاعتماد على رابط موقع التجارة الالكترونية الافتراضي https://www.example.com:

مصطلحات تقنية

• النطاق Domain: هو أي تسلسل من العناوين الموجودة في نظام أسماء النطاقات DNS، مثلًا يعد com وexample.com نطاقان، لكن الفرق هنا أن com هو النطاق الرئيسي بينما تُعد example.com أو مثلًا test.com وblog.com نطاقات فرعية sub domains من النطاق الرئيسي com، أيضًا يعد كلًا من web.example.com وapp.example.com مثلًا وغيرها، نطاقات فرعية sub domains من نطاقها الرئيسي www.example.com الذي يُعد كما قلنا نطاق فرعي بالنسبة للنطاق الرئيسي العام com وهلم جرًا.
• اسم المضيف Host name: هو اسم مخصص لأي جهاز متصل بشبكة، يُحلّل إلى (ويقابل) عنوان IP الجهاز في نظام أسماء النطاقات DNS، مثلًا www.example.com هو اسم مضيف.
• الأصل Origin: هو تجميعة من كلًا من البروتوكول، واسم المضيف، والمنفذ (اختياريًا)، مثلًا يعد العنوان https://www.example.com:443 أصل.

إنشاء علاقة بين تطبيقات الويب التقدمية PWA

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

• يريد موقع التجارة الإلكترونية https://www.example.com إنشاء تجربة موقع مستقلة تسمح للبائعين بإدارة مخزونهم، مع التأكيد لهم أن هذا الموقع بتجربته المستقلة ينتمي إلى موقع التجارة الرئيسي الذي يشتري المستخدمون منه المنتجات.
• تريد شركة إخبارية إنشاء تطبيق محدد لحدث رياضي عظيم، وذلك للسماح للمستخدمين بتلقي إحصائيات حول مسابقاتهم المفضلة عبر الإشعارات، وتمكينهم من تثبيت تطبيق PWA هذا على أجهزتهم بالتالي مشاهدة المحتوى الرياضي بسهولة، هذا مع التأكيد للمستخدمين أن التطبيق الرياضي يتبع لتلك الشركة الإخبارية.
• تريد إحدى الشركات إنشاء تطبيقات منفصلة لكلًا من الدردشة chat ورسائل البريد mail والتقويم calender وتريد أن تعمل هذه التطبيقات بشكل منفصل لكن تكون مرتبطة باسم الشركة.

تريد الشركة المالكة لموقع example.com توفير ثلاثة تطبيقات PWA مستقلة، باستخدام نفس اسم المجال لتأسيس علاقة قوية بينها.

استخدام أصول منفصلة

الطريقة الموصى بها في مثل هذه الحالات، هي بناء كل تطبيق ذي هدف خاص على أصل origin خاص.

إذا كنت تريد استخدام نفس اسم النطاق لجميع تطبيقات PWA المرتبطة ببعضها، فيمكنك القيام بذلك باستخدام النطاقات الفرعية sub domains. مثلًا يمكن لشركة تقدم خدمات إنترنت متعددة استضافة تطبيق بريد على الأصل https://mail.example.com وتطبيق تقويم على الأصل https://calendar.example.com، وتقديم الخدمة الرئيسية لأعمالها على الأصل https://www.example.com.

وهناك مثال آخر لاستخدام النطاقات الفرعية للحصول على أصول مختلفة، وهو موقع رياضي يريد إنشاء تطبيق مستقل مخصص تمامًا لحدث رياضي مهم، مثل بطولة كرة القدم، وذلك على https://footballcup.example.com، يمكن للمستخدمين تثبيت موقع البطولة هذا على أجهزتهم واستخدامه بشكل مستقل عن موقع الرياضة الرئيسي المستضاف على https://www.example.com.

قد تكون هذه الطريقة مفيدة أيضًا للأنظمة التي تتيح للعملاء إنشاء تطبيقاتهم المستقلة بهم تحت علامة الشركة التجارية، كأن يتيح أحد تطبيقات الويب للتجار إنشاء تطبيقاتهم الخاصة على نطاقات فرعية بأسمائهم مثل https://ahmad.example.com وhttps://ali.example.com وغيرها.

يضمن استخدام أصول مختلفة العزل بين التطبيقات، أي يمكن لكل تطبيق من تطبيقات PWA المتعلقة ببعضها، إدارة ميزات المتصفح المختلفة بشكل مستقل، بما في ذلك:

• قابلية التثبيت Installability: حيث يوجد لكل تطبيق منها ملف بيان موارد Manifest، يوفر تجربة التطبيق الخاصة القابلة للتثبيت.
• التخزين Storage: يوجد لكل تطبيق منها ذاكرة تخزين مؤقتة cache، وميزات تخزين محلي local storage، وجميع أشكال التخزين المحلي للجهاز device-local بشكل أساسي.
• عمال الخدمة Service Workers: يوجد لكل تطبيق منها عامل خدمة مسؤول عن نطاقات التطبيق المسجلة فيه.
• الأذونات Permissions: يعطَى لكل تطبيق من تطبيقات PWA المرتبطة ببعضها عبر النطاقات الفرعية والمختلفة في الأصل، أذونات بشكل منفصل عن غيره، وهذا يفيد المستخدمين في معرفة الخدمة التي يمنحونها أذوناتهم بالضبط، كما تُنسب الإشعارات بدقة لكل تطبيق.

يُوصى باتباع هذه الدرجة من العزلة (الأصول المختلفة) عند بناء عدة تطبيقات ويب تقدمية PWA مستقلة Independent.

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

يعد بناء تطبيقات ويب تقدمية PWA مختلفة على نطاقات منفردة باستخدام النطاقات الفرعية ممارسة جيدة.

استخدام نفس الأصل

الطريقة الثانية هي بناء تطبيقات PWA المتعلقة ببعضها، على نفس الأصل same origin، ويتضمن ذلك السيناريوهات التالية:

مسارات غير متراكبة

أي تُستضاف تطبيقات PWA المتعلقة ببعضها على نفس الأصل، لكن مع مسارات paths غير متراكبة non-overlapping، مثلًا:

• https://example.com/app1
• https://example.com/app2

المسارات المتراكبة أو المتداخلة

أي تستضاف تطبيقات الويب التقديمة PWA المتعددة على نفس الأصل، لكن أحد نطاقاتها متداخل nested داخل الآخر، مثلًا:

• https://example.com (التطبيق الخارجي)
• https://example.com/app (التطبيق الداخلي)

يسمح لك كلًا من الواجهة البرمجية Service Worker وتنسيق ملف بيان الموارد manifest بتطبيق الطريقتين السابقتين، وذلك بتحديد النطاقات فرعية أو رئيسية بناء على مستوى المسار path-level، لكن في كلتا الحالتين، يؤدي استخدام نفس الأصل إلى العديد من التحديات والمحدوديّات، النابعة من حقيقة أن المتصفح لن يعتبرها تطبيقات متمايزة، بالتالي لا يُنصح بهذا الأسلوب.

سنحلِّل تلك التحديات بالتفصيل في الفقرة القادمة، وسنذكر ما الذي يمكن فعله إذا لم يكن من الملائم استخدام أصول منفصلة.

لا يُنصح باستخدام المسارات المتداخلة وغير المتداخلة لاستضافة تطبيقين PWA مستقلين على نفس الأصل.

التحديات التي تواجه تطبيقات PWA على نفس الأصل

فيما يلي بعضًا من المشكلات العملية التي تواجهنا عند استخدام المسارات المتراكبة وغير المتراكبة لنفس الأصل:

• التخزين Storage: تُشارَك ملفات تعريف الارتباط cookies وبيانات التخزين المحلي local storage وجميع أشكال التخزين المحلي للجهاز device-local بين التطبيقات ذات نفس الأصل origin. لهذا، فإذا قرر المستخدم مسح البيانات المحلية لأحد تطبيقات PWA المتعلقة ببعضها، فستُمسح بيانات جميع التطبيقات المشتركة بنفس الأصل مع ذلك التطبيق، فلا توجد طريقة لمسح بيانات تطبيق واحد فقط منها بعينه. تحث بعض المتصفحات مثل Chrome وغيره المستخدمين دومًا على مسح البيانات المحلية عند إلغاء تثبيت أحد التطبيقات، وهذا سيؤثر على بيانات التطبيقات الأخرى المشتركة معه في نفس الأصل، والتحدي الآخر الممكن أن تواجهه بالنسبة للتخزين في التطبيقات المشتركة بنفس الأصل، هو أن هذه التطبيقات بطبعها تشارك بعضها حصة التخزين الخاصة بها، بالتالي إذا كان أيًا منها يشغَل مساحة تخزينية كبيرة جدًا، فسيتأثر الآخر سلبًا.
• الأذونات Permissions: إذا منح المستخدم إذنًا لأحد تطبيقات PWA المتعلقة ببعضها، فسيُمنح نفس الإذن لجميع التطبيقات المشتركة في نفس الأصل مع ذلك التطبيق، فالأذونات مرتبطة بالأصل أيضًا كما التخزين. قد يبدو هذا ميزة، بحيث لا تضطر جميع تلك التطبيقات إلى طلب نفس الإذن، أي طلب نفس الإذن عدة مرات، لكن التحدي هنا يكمن في حظر المستخدم إذنًا لأحد التطبيقات، فوقتها تُمنع التطبيقات الأخرى المشتركة في الأصل من طلب هذا الإذن، بالتالي لا تستطيع جميعها استخدام ميزة التطبيق التي تتطلب ذلك الإذن.
• إعدادات المستخدم User settings: تعيّن إعدادات المستخدم لتطبيقات الويب أيضًا بالإعتماد على الأصل، مثلًا، إذا كان لتطبيقان مشتركان في الأصل أحجام خطوط مختلفة، ويريد المستخدم ضبط تكبير حجم خط أحدهما فقط، فسيَكبُر حجم خط التطبيقات الأخرى المشتركة معه في نفس الأصل.

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

تحديات إضافية للمسارات المتراكبة أو المتداخلة

المشكلة الإضافية المتعلقة بنهج المسارات المتراكبة أو المتداخلة (حيث https://example.com هو التطبيق الخارجي والمسار https://example.com/app هو للتطبيق الداخلي)، هو أن جميع عناوين URL في التطبيق الداخلي ستُعتبر جزءًا من كلا التطبيقين الداخلي والخارجي. وهذا يسبب عمليًا المشكلات التالية:

• إمكانية التثبيت Installation: إذا زار المستخدم التطبيق الداخلي (مثلًا في متصفح ويب)، وكان التطبيق الخارجي مثبتًا بالفعل في جهاز المستخدم، فلن يعرض المتصفح لافتات لتثبيت التطبيق الداخلي. وذلك لأن المتصفح عندما يتحقق من إنتماء الصفحة الحالية إلى تطبيق مثبت بالفعل أم لا، فإنه سيعتبر التطبيق الداخلي مثبت على الجهاز كون التطبيق الخارجي مثبت بالفعل، ويمكن أن تُحل هذه المشكلة بتثبيت التطبيق الداخلي يدويًا (عبر خيار "إنشاء اختصار" في المتصفح)، أو تثبيت التطبيق الداخلي أولاً، قبل التطبيق الخارجي.
• الواجهتان البرمجيتان Notification و Padging: إذا تم تثبيت التطبيق الخارجي دون الداخلي، فستُنسب الإشعارات والشارات القادمة من التطبيق الداخلي عن طريق الخطأ إلى التطبيق الخارجي، إذ تنسب الإشعارات والشارات بدقة لكل تطبيق في حال ثبِّت كليها على جهاز المستخدم.
• التقاط الرابط Link Capturing: إذا تم تثبيت التطبيق الخارجي دون الداخلي، فلن يتم التقاط روابط التطبيق الداخلي المرتبطة بالتطبيق الخارجي، أي بدلًا من أن يُفتح الرابط الداخلي في نفس التبويبة ضمن نطاق تصفح التطبيق الخارجي، فإنه سيُفتح في تبويبة جديدة لأن المتصفح سعتبره تطبيقًا غريبًا (تطبيق مختلف غير مرتبط به). لكن إذا أضيفت تطبيقات PWA هذه إلى المتجر على نظامَي Chrome OS وAndroid، فسيلتقط التطبيق الخارجي تلك الروابط، وأيضًا إذا تم تثبيت التطبيق الداخلي، فسيظل نظام التشغيل يوفر للمستخدم خيار فتح تلك الروابط المتعلقة بالتطبيق الداخلي في التطبيق الخارجي.

الخاتمة

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

باختصار، نوصي بشدة باستخدام أصل مختلف (مثلًا باستخدام النطاقات الفرعية) لاستضافة تطبيقات PWA المستقلة، إذ يؤدي استضافتها على نفس الأصل إلى عدة تحديات، كون المتصفح لن يعتبرها تطبيقات متمايزة، إذن الخلاصة أن هناك ثلاث حالات لاستضافة تطبيقات PWA المتعلقة ببعضها على نفس النطاق:

• على أصول منفصلة: موصى بها.
• على نفس الأصل بمسارات غير متداخلة: ليست مستحسنة.
• على نفس الأصل بمسارات متراكبة overlapping أو متداخلة nested: لا ينصح بها بشدة.

إذا لم يكن بإمكانك استخدام أصول مختلفة، فاستخدم مسارات غير متداخلة، مثلًا https://example.com/app1 وhttps://example.com/app2، بدلًا من المسارات المتراكبة أو المتداخلة مثل https: //example.com (للتطبيق الخارجي) وعنوان https://example.com/app (للتطبيق الداخلي).

ترجمة -وبتصرف- للمقال Building multiple Progressive Web Apps on the same domain من موقع web.dev.

اقرأ أيضًا

• ما هي تطبيقات الويب التقدمية PWA
• استقبال تطبيقات الويب التقدمية البيانات المشاركة عبر الواجهة البرمجية Web Share Target
• جعل تطبيق الويب التقدمي PWA يبدو كتطبيق أساسي في نظام التشغيل
• إضافة اختصارات للمهام الشائعة في تطبيقات الويب التقدمية PWA

تتكون كل صفحة ويب من عشرات ومئات العناصر من صور ونصوص وأزرار وودجات وغيرها حيث تتنوع أحجام هذه العناصر ويمكنك معرفة الكثير من موقعك من خلال أكبر عنصر باستخدام مؤشر أضخم محتوى مرئي LCP اختصار للعبارة Largest Contentful Paint.

سوف أشرح في هذا المقال أساس مؤشر أضخم محتوى مرئي وكيفية قياس هذا المؤشر وتفسير نتائج التقرير وآليات تحسين قيمة هذا المؤشر لموقع الويب.

ماذا يعني أضخم محتوى مرئي LCP

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

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

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

يرتبط عادةً مؤشر LCP مع أول محتوى مرئي FCP -اختصارًا للعبارة First Contentful Paint- الذي يُخبرك بالزمن اللازم لظهور أول عنصر ضمن أي محتوى عند دخول شخص ما لموقعك. يشكل هذين المؤشرين قسمًا مما يُدعى بمؤشرات الويب المهمة التي توفر لك معلومات أكثر عن أداء الموقع بدلًا من زمن التحميل الذي يحققه الموقع. تذكر أن جوجل لا يضع بحسبانه كل شيء عند قياس مؤشر LCP بل يتجاهل عناصر مثل ملفات SVG ومقاطع الفيديو لكن يُحتمل أن تُضمن هذه العناصر في تحديثات المؤشرات المهمة لجوجل.

ملاحظة: ترجمنا المصطلح Largest Contentful Paint إلى "أضخم محتوى مرئي" واستخدمنا تعبير الضخامة لسببين، الاول هو قولهم largest وليس biggest والثاني أن المقصود هنا الحجم الكبير بالمساحة المشغولة ضمن الشاشة والحجم من ناحية الحجم بالكيلوبايت.

كيفية قياس LCP؟

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

لقياس مؤشر أضخم محتوى مرئي عليك قياس الزمن الذي يستغرقه تحميل عنصر معين وليس كامل الصفحة، ولحسن الحظ إن استخدمت سابقًا أداةً لقياس زمن تحميل الموقع فغالبًا سوف تتضمن تفاصيل عن مؤشرات أخرى مثل أول محتوى مرئي FCP وأضخم محتوى مرئي LCP. تستطيع استخدام PageSpeed Insights مثلًا حيث عليك لصق رابط الموقع والضغط على Analyze site لتبدأ الأداة بإجراء اختبار أداء شامل للموقع وضمن النتائج سوف تجد نتيجة الأداء الكلي إضافةً إلى تفاصيل هذا الأداء ضمن قسم Field data حيث يوجد مؤشر LCP.

تجمع أداة PageSpeed Insights بيانات الأداء من مجموعة مستخدمين وتستعملها لتوفير نتائج مُجمعة مع الوقت، لتوفر معلومات أكثر دقة مما توفره أدوات الاختبار الوحيد لموقعك. سوف يظهر لك أيضًا نسبة مئوية لكل مؤشر، ففي المثال السابق يوجد 89% من عمليات التحميل تحصل في أقل من 1.5 ثانية وهذه نتيجة رائعة لكن نسبة 11% الباقية من عمليات تحميل الصفحة تقع خارج ذلك المجال، وهذا يعني أن LCP لبعض المشتركين يحتاج وقتًا أكبر من 1.5 ثانية.

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

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

إن القيمة المثالية لمؤشر أضخم محتوى مرئي أقل من 2.5 ثانية (أما بالنسبة لمؤشر FCP يجب أن تكون أقل من 1.8 ثانية) وكلما كان الوقت أقل، كان أفضل بحيث يحقق موقعك زمن تحميل كلي أقل من 3 ثانية لتوفر للزوار أفضل تجربة ممكنة أما عند ارتفاع هذه القيم فوق العتبات السابقة سوف تجد ارتفاعًا في معدل الارتداد في موقعك.

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

إن أردت قياس هذه القيمة بعيدًا عن جوجل تستطيع تحقيق ذلك يدويًا باستخدام أدوات المطور ضمن المتصفح حيث تسمح لك هذه الأدوات في معظم المتصفحات إمكانية قياس زمن تحميل الموقع مع مجموعة من التفاصيل مثل زمن تحميل كل عنصر وكل عملية وكل طلب لكن تتطلب هذه العملية الكثير من العمل والأسهل استخدام أدوات طرف ثالث كالتي ذكرتها سابقًا. تستطيع أيضًا استخدام خدمات مثل GTMetrix و Pingdom's Speed Test للاطلاع على معلومات إضافية عن مؤشر LCP وغيره من المؤشرات.

كيفية تحسين مؤشر أضخم محتوى مرئي LCP

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

إليك أفضل حلول لتحسين الموقع والتي تساعدك على تحقيق قيمة أفضل لمؤشر LCP من خبرتي الشخصية في هذا المجال:

• تعديل حجم وضغط الصور ففي معظم الحالات تتعلق قيمة LCP بالصور وكقاعدة عامة عليك تعديل قياس وحجم كل صورة ترفعها لموقعك، كما أن ووردبريس يدعم صيغة WebP بدءًا من الإصدار 5.8 وهذا يُساعد الكثير من المواقع على تسجيل قيم LCP أفضل.
• اختر استضافة أفضل فإن عملت جاهدًا على تحسين موقعك ومع ذلك ما زال يحتاج وقتًا طويلًا للتحميل فالسبب غالبًا هو استضافتك، لذا يمكنك استخدام باقة أعلى أو تغيير الشركة المزودة لشركة تتضمن خيارات أفضل من الحالية لديك.
• استخدام شبكة تسليم محتوى CDN كون شبكات تسليم المحتوى تعمل على تخزين نسخة مؤقتة عن موقع على خوادمها حول العالم وتوفر هذه الملفات لزوار موقعك كما أن بعض هذه الشبكات توفر خدمة خاصة بتسليم الصور فقط مما يساعد على تحسين قيمة LCP بشكل ملحوظ.
• التخلص من الموارد التي تحجب عمليات الإخراج حيث يُعد المورد حاجبًا لعملية إخراج عندما يوقف العناصر ضمن موقعك عن التحميل حتى انتهاء تنفيذه وتحميله، وعمومًا تكون هذه العناصر أقسام مهمة من موقعك مثل HTML و CSS وجافاسكربت لذا عليك التخلص من هذه العناصر أو تأجيل تنفيذها حتى انتهاء تحميل جميع العناصر. تستطيع استخدام إضافة لتحقيق ذلك في ووردبريس مثل WP Rocket.

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

الأسئلة المتكررة حول أضخم محتوى مرئي LCP

كونت فكرة واضحة الآن عن هذا المؤشر ولترسيخها سوف أجيب عن بعض الأسئلة المتكررة عن أضخم محتوى مرئي LCP.

ما مدى تأثير مؤشر LCP على أداء موقعي؟

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

هل زمن تحميل أضخم محتوى مرئي LCP هو نفسه زمن تحميل الصفحة PLT؟

من الشائع أن يختبر أصحاب المواقع صفحاتهم مع الاطلاع على زمن تحميل كل منها حيث توفر بعض أدوات قياس الأداء رقمًا بسيطًا بدون أي إضافات لكن المؤشرات الفردية مثل LCP تُساعدك على فهم ما يحدث عند زيارة المستخدم لموقعك. ينتهي احتساب LCP غالبًا قبل انتهاء تحميل الصفحة كليًا حيث يمكن أن إضافة بعض العناصر لاحقًا (الملفات أو الصور الكبيرة) ويكون عمومًا مؤشر LCP أسرع من زمن تحميل الموقع الكلي.

ما هي مؤشرات الويب المهمة غير LCP؟

مؤشرات الويب المهمة هي مقاييس يأخذ بها جوجل لتحديد إن كان موقع ما يوفر تجربة مستخدم قوية، ومؤشر LCP أحد هذه المؤشرات، أما المؤشرات الأخرى فهي تأخر الاستجابة الأولى FID وانزياح المخطط التراكمي CLS. تستطيع أيضًا التحقق أول محتوى مرئي FCP الذي يرتبط بقوة أكبر بإدراك المستخدم لسرعة تحميل الصفحة.

الخلاصة

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

ترجمة -وبتصرّف- للمقال Largest Contentful Paint (LCP): What It Is & How to Optimize Your Website for It لصاحبه Will Morris.

اقرأ أيضًا

• الفرق بين صفحة الويب وموقع الويب وخادم الويب ومحرك البحث
• مؤشرات أداء السيو: بارامترات قياس تحسين محركات البحث لموقعك وتتبع أدائه

سننشئ في هذا المشروع شخصية لها عيون ذات تأثير كرتوني، بحيث تكون العيون كبيرة وتتبع حركة مؤشر الفأرة لإضفاء الحيوية على الشخصية.

سنعمل في هذا المشروع على:

• إنشاء مشروع تفاعلي.
• إضفاء طابع شخصي على المشروع باستخدام التأثيرات الرسومية.
• التعرف على التصميم في المجال الرقمي.

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

جرب النقر على أماكن مختلفة في المشروع وشاهد ماذا سيحدث!

سنشرح في البداية بعض المفاهيم المهمة، والمتمثلة في الآتي:

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

استلهم أفكارك

اطلع على المشاريع التالية لتحصل على الإلهام ولتكوّن فكرة حول شكل الشخصية التي ستعمل على إنشائها:

• مشروع الكعكة:

• مشروع أعماق البحار:

• شخصية سبورغ:

تصميم الشخصية

حان الآن وقت وضع أفكارك قيد التنفيذ كي ترى شخصيتك النور!

إضافة كائن من مكتبة الكائنات

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

انقر على خيار إضافة كائن:

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

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

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

إنشاء خلفيات وكائنات باستخدام الرسام

يمكنك إنشاء خلفيات ومظاهر للكائنات في الرسام باستخدام أشكال بسيطة.

انقر على خيارالرسام من أيقونة اختيار خلفية أو من أيقونة اختيار كائن:

ثم اختر أداةً مما يلي لإنشاء الأشكال التي ترغب بها:

• الأداة الدائرية: اضغط على رمز الأداة لرسم دائرة، اضغط باستمرار على مفتاح Shift لمساعدتك بالرسم.

• الأداة المستطيلة: استخدم هذه الأداة لرسم مستطيل، واضغط باستمرار على مفتاح Shift لرسم مربع.

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

استخدم أداة ملء اللون لتغيير لون الشكل:

قد تحتاج لاستخدام أداتي طبقة إلى الأمام و طبقة إلى الخلف لتغيير موضع الشكل في الخلفية:

كما يمكنك تحديد عدة أشكال ومعاملتها مثل شكل واحد باستخدام أداة التجميع Group وبذلك يسهل عليك تحريك الأشكال وتعديلها:

إليك مثالًا عن كائنٍ أنشأناه باستخدام الأداة الدائرية والمستطيلة، كما يمكنك الانتقال إلى محرر سكراتش للتعديل عليه:

لا تنسى تسمية الأشكال والخلفيات التي أنشأتها في الرسام بأسماء مناسبة.

في الخطوة الموالية، عدل حجم الكائن ليملأ حيزًا أكبر من الشاشة، وذلك عبر تغيير الحجم في نافذة الكائن:

اختر خلفيةً مناسبةً أو فكاهيةً للكائن بالضغط على رمز اختيار خلفية من قائمة المنصة الموجود في الزاوية السفلية اليسرى لفتح مكتبة الخلفيات:

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

إضافة عيون ذات تأثير كرتوني

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

• انقر على خيار الرسام لإضافة كائن العين.

• استخدم أداة الدائرة وانقر باستمرار على مفتاح Shift للحصول على دائرة متناسقة الأبعاد. اخترنا في مثالنا اللون الأسود لإطار العين:

• استخدم أداة انتقاء الألوان لاختيار ألوان الملء والإطار. اسحب شريط السطوع وتشبع اللون إلى القيمة 0 للحصول على اللون الأسود، واسحب شريط السطوع إلى القيمة 100 وشريط تشبع اللون إلى القيمة 0 للحصول على اللون الأبيض.

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

• ارسم عدة دوائر واستخدم ألوانًا مختلفةً للحصول على عين أكثر حيوية!

تعديل إحدى مظاهر الكائن واستخدامها كعين

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

بعد ذلك سمّ كائن العين الجديد باسم مناسب:

ثم اسحب كائن العين الجديد إلى موضعه المناسب ثم غيّر حجمه ليتناسب مع الشخصية.

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

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

لاحظ أنك ستحصل على كائن جديد بنفس الاسم متبوعًا بالرقم 2، أعد تسمية الكائن الجديد إن أحببت.

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

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

تصحيح الأخطاء

قد تجد بعض الأخطاء في مشروعك والتي تحتاج إلى إصلاح. فيما يلي بعض الأخطاء الشائعة:

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

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

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

• تتبع الشخصية والعينان حركة مؤشر الفأرة: تحقق هل أضفت العينين كمظاهر للشخصية، بدلًا عن إضافتها ككائنات منفصلة؟ يمكنك إصلاح ذلك عن طريق نسخ الشخصية وتسمية النسخة "مقلة العين"، ثم حذف مظهر العين من الشخصية، وحذف مظاهر الشخصية من كائن مقلة العين. بعدها، انسخ كائن مقلة العين وسميه "مقلة العين 2". أضف كتلة "اتجه نحو مؤشر الفأرة" لكائن العين وليس للشخصية.
• تتبع الشخصية فقط حركة مؤشر الفأرة: يجب عليك في هذه الحالة إضافة كتلة "اتجه نحو مؤشر الفأرة" لكائن العينين بشكل منفصل وليس للشخصية. انسخ الكتل البرمجية عن طريق سحبها إلى كائن العين، ثم احذفها من كائن الشخصية عبر سحبها إلى نافذة الكتل البرمجية أو بالنقر على مفتاح Delete من لوحة المفاتيح.

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

إضافة تأثيرات للكائنات

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

إضافة تأثيرات على العينين

أولًا، أضف كتلة "عند النقر على الكائن" ثم أضف بعدها كتلة "غير مؤثر اللون" ليتغير لون العينين عند النقر عليهما.

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

إضافة تأثيرات على الشخصية

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

استخدام مؤثرات بصرية

يمكن تطبيق عدة مؤثرات بصرية على الكائنات في سكراتش، كما في المثال التالي:

إذ تحتوي كل من الكتلتين اجعل مؤثر اللون و غيّر مؤثر اللون على نافذة منزلقة يمكن اختيار عدة تأثيرات منها لتغيير مظهر الكائنات وهي:

• اللون: يمكن اختيار القيم من القيمة 0 إلى القيمة 199 (تُدَور الارقام الكبيرة، فيعد الرقم 200 كالرقم 0).
• عين السمكة: لا تعطي القيمة 0 أي تأثير، وكلما كبرت القيمة ازداد تأثير "عين السمكة" fisheye، أما القيم السالبة فتعطي تأثيرًا عكسيًا.
• الدوامة: لا تعطي القيمة 0 أي تأثير، وتعطي القيم الكبيرة الموجبة تأثيرًا أفعوانيًا نحو اليسار، أما القيم السالبة الكبيرة فتعطي تأثيرًا أفعوانيًا نحو اليمين.
• البكسلة: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم الكبيرة عدد البكسلات في الكائن.
• الموزاييك: لا تعطي القيمة 0 أي تأثير، بينما تغير القيم الكبيرة الموجبة والسالبة عدد النسخ.
• شدة الإضاءة: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم من 1 إلى 100 من سطوع الكائن، وتجعل القيم السالبة من القيمة 1- حتى القيمة 100- الكائن أكثر عتمةً.
• الشبح: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم من 1 إلى 100 من شفافية الكائن.

أسند قيمًا مختلفة للتأثيرات واكتشف كيف سيتغير مظهر الكائن باختلاف القيم.

ولاحظ أن القيمة 225 تعطي نفس تأثير القيمة 25 عند إسنادها لتأثير تغيير اللون، ولا يحدث أي تغيير على الكائن في باقي التأثيرات عند تجاوز القيمة العليا والدنيا للتأثير.

يمكنك إما استخدام كتلة أزل التأثيرات الرسومية أو الضغط على زر العلم لمسح التأثيرات.

أما إذا أردت تطبيق تأثير معين على الكائن أثناء تشغيل المشروع، فضع كتلة تغيير المؤثر الرسومي تحت كتلة عند النقر على العلم الأخضر:

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

كما في المشروع التالي:

أولًا، اختر ملحقًا أو مظهرًا آخر للشخصية. لاحظ أن بعض الكائنات لديها عدة مظاهر.

ثانيًا، أضف الكتلة التالية للانتقال إلى المظهر التالي عند النقر على الشخصية:

إذا لم يكن للكائن الذي اخترته مظاهر، أو إذا أردت إضافة المزيد من المظاهر، فيمكنك إضافتها كما يلي.

إضافة مظهر جديد للكائن

انقر على نافذة المظاهر ثم انقر على أيقونة اختيار مظهر لإضافة المظهر الذي تحب من المكتبة:

احرص على تعديل حجم المظهر الجديد في الرسام ليتناسب مع المظاهر الأخرى للكائن.

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

تصحيح الأخطاء

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

إضافة تأثيرات على المنصة

يمكنك إضافة بعض التأثيرات عند النقر على المنصة، كتغيير الخلفية أو إضافة تأثيرات لونية.

أولًا، انقر على نافذة المنصة، ثم على نافذة المقاطع البرمجية. اختر ما الذي تريد فعله مما يلي:

يمكنك تغيير المؤثرات اللونية بإضافة الكتلة التالية:

يمكنك تغيير الخلفية بإضافة الكتلة التالية:

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

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

ترقية المشروع

إليك بعض التحسينات التي يمكنك إضافتها على مشروعك لترقيته:

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

إليك المشروع التالي الذي أُضيف فيه أذرع للكائن تتحرك بحركة مؤشر الفأرة:

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

كما يمكنك زيارة معرض مشاريع شخصيات العيون ذات الطابع الكرتوني للإطلاع عليها ومشاهدة الكتل البرمجية الخاصة بكل مشروع في محرر سكراتش لمعرفة كيف نُفِذت.

تحديد مركز دوران الكائن

تدور الكائنات في سكراتش حول مركزها. تحقق من وجود المؤشر الرمادي الصغير التالي في محرر الرسام لمعرفة ما إذا كان الكائن في المنتصف أم لا:

إذا لم يكن المؤشر الرمادي في مركز الكائن، استخدم أداة التحديد لتحديد العنصر ولاحظ ظهور مؤشر أزرق:

اسحب الكائن بحيث يتطابق مؤشر الكائن الأزرق مع المؤشر الرمادي:

إذا لم يكن مركز الدوران هو منتصف الكائن، ضع مركز الدوران على المؤشر الرمادي في محرر الرسام:

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

ختامًا

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

ترجمة -وبتصرف- للمقال Silly Eyes من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

• المقال السابق: إنشاء لعبة البحث عن الحشرات باستخدام برنامج سكراتش
• إنشاء لعبة أضواء باستخدام برنامج سكراتش وحاسوب راسبيري باي
• تصميم لعبة السلك والحلقة باستخدام برنامج سكراتش وحاسوب راسبيري باي
• تنفيذ مصباح ليد ثلاثي الأبعاد باستخدام سكراتش ولوحة راسبيري باي
• صنع آلة موسيقية باستخدام سكراتش وحاسوب راسبيري باي

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

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

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

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

سننشئ في هذا المشروع لعبةً بمستويات متعددة نبحث فيها عن حشرة في كل مستوى. ستحتوي اللعبة على خلفيات لشاشتي "البداية" و"النهاية"، ومؤقت لإظهار مدى سرعة اللاعب في العثور على الحشرات.

سنعمل في هذا المشروع على:

• إنشاء مراحل مختلفة باستخدام كتلة "المظهر التالي" وكتلة "عندما تتبدل الخلفية إلى".
• تشغيل الكتل البرمجية باستمرار باستخدام كتلة "كرر باستمرار".
• استخدام مؤقت لإظهار مدى سرعة اللاعب في العثور على الحشرات

وسنحصل على النتيجة التالية: اضغط على الحشرة لتبدأ اللعب وحاول إيجاد الحشرات بأسرع ما يمكن.

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

اقتباس

معلومة: يلعب أكثر من 2.5 مليار شخص ألعاب الفيديو سنويًا. هل تساءلت يومًا ما عدد الأشخاص المشاركين في إنشاء هذه الألعاب؟ وهل سألت نفسك عما إذا كنت ترغب في تصميم الألعاب للآخرين؟ أم إنشاءها أم اختبارها؟

شاشة البداية

ستبدأ لعبتك بشاشة بداية ينقر فيها اللاعب على الحشرة لتشغيل المرحلة الأولى:

• أولًا، افتح نسخة سطح المكتب من برنامج سكراتش، أو نسخة المتصفح
• ثانيًا، اضغط على رمز اختيار خلفية الموجود أسفل الزاوية اليسرى، ثم اختر خلفية السبورة Chalkboard من تصنيف داخلي.

• ثالثًا، اضغط على نافذة المنصة. لاحظ أن للمنصة نافذة تعرض فيها الخلفيات بدلًا عن نافذة المظاهر.

• رابعًا، اضغط على نافذة الخلفيات لفتح محرر الرسوم.

• خامسًا، حدد الخلفية Backdrop1 واحذفها لأننا لن نحتاجها في مشروعنا.

لاحظ تحديد خلفية السبورة بعد الحذف.

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

• سابعًا، اكتب العبارة التالية على السبورة : "ابحث عن الحشرة" باستخدام أداة النص:

استخدم نوع الخط واللون الذي تفضله، ثم عدل موضع الخط باستخدام أداة التحديد (السهم) وغَيّر حجم النص عبر سحب زاوية مربع النص.

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

• تاسعًا، احذف كائن القطة، ثم انقر على أيقونة اختيار كائن، واكتب bug في مربع البحث واختر حشرة لاستخدامها في لعبتك. كما يمكنك تسمية مشروعك باسم مناسب للحشرة التي اخترتها، مثل "البحث عن الخنفساء".

يسمى الخطأ في البرامج الحاسوبية bug ويعني حشرة باللغة العربية، كما يُطلق على عملية البحث عن الأخطاء وإزالتها بتصحيح الأخطاء أو debugging باللغة الانجليزية. جاءت التسمية عندما وجد فريق مهندسة البرمجيات المشهورة، جريس هوبر، حشرة عث في حاسوبهم ميكانيكي الأجزاء (كانت الحواسيب ميكانيكية قبل أن تتحول إلى إلكترونية) وسجلو ذلك بملاحظة لطيفة كان محتواها "عثرنا على أول حشرة حقيقية سببت أول خطأ فعلي".

المرحلة الأولى

سنضيف في هذه الخطوة خلفية للمرحلة الأولى في لعبتنا لنخبئ فيها الحشرة.

• أولًا، اختر خلفية أضواء المسرح Spotlight من تصنيف موسيقى.

• ثانيًا، انقر على كائن الحشرة لاضافة الكتل التالية لتغيير حجم الكائن عند تغيير الخلفية:

• ثالثًا، اسحب كائن الحشرة إلى مخبأه، ثم أضف الكتلة التالية:

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

• رابعًا، أضف كتلة لتشغيل صوت وتغيير الخلفية عند الضغط على الكائن:

لاحظ أن كتلة الخلفية التالية تنقلك بين الخلفيات وفق الترتيب في نافذة الخلفيات.

• خامسًا، انقر على نافذة المنصة وأضف الكتلة التالية ليبدأ المشروع عند شاشة البداية:

انقر على العلم الأخضر لتختبر المشروع، ولاحظ أن الخنفساء ستختبئ في شاشة البداية في كرة الأضواء، كما في المرحلة الأولى.

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

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

• تاسعًا، ضع الحشرة على السبورة، تحت عبارة "ابحث عن الحشرة":

• عاشرًا، أضف الكتل التالية لكي تتوضع الحشرة دائمًا على السبورة عند الانتقال إلى خلفية البداية:

• أخيرًا، اعد جمع الكتل تحت كتلة "عند النقر على الكائن" كما يلي:

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

إضافة ببغاء

سنضيف الآن ببغاءً على اللعبة ليكون بمثابة عنصر إلهاء للاعبين وليزيد من صعوبة اللعبة.

• أولًا، أضف كائن الببغاء.

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

• ثانيًا، أضف الكتل التالية ليرفرف الببغاء بجناحيه بلا توقف:

• ثالثًا، انقر على العلم الأخضر واختبر عمل مشروعك. هل تتذكر أين خبأت الحشرة؟

لاحظ أنه في برنامج سكراتش تُحَدد الكتل الجاري تشغيلها بإطار أصفر، كالتالي:

لا تنسى إيقاف تشغيل المشروع أثناء عملك عليك بالنقر على زر التوقف الأحمر أعلى المنصة، في حال انزعجت من حركة الببغاء.

المرحلة الثانية

سنختار في هذه الخطوة خلفيةً للمرحلة الثانية بحيث تزيد صعوبة اللعبة.

• أولًا، اختر الخلفية التي تراها مناسبة. اخترنا الخلفية التالية باسم 'Urban' بسبب تناسق ألوانها مع ألوان الخنفساء التي اخترناها:

احرص على اختيار خلفيات فيها تفاصيل عديدة وألوان مشابهة لألوان الحشرة التي اخترتها ليصعب إيجادها.

• ثانيًا، اسحب الكتل التي تلي كتلة عند النقر على الكائن بعيدًا عنها كي تتمكن من وضع الخنفساء في مخبأها:

• ثالثًا، صَغّر حجم الخنفساء ليصعب العثور عليها، وذلك بإضافة كتلة تعديل الحجم التالية:

شغل المشروع لتشاهد النتيجة.

• رابعًا، ضع الخنفساء في مخبأ مناسب.

• خامسًا، أضف كتلة اذهب إلى الموضع، وذلك لتعيين إحداثيات الحشرة:

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

شاشة النهاية

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

• أولًا، أضف خلفية السبورة Chalkboard من تصنيف داخلي، ولاحظ أنه في برنامج سكراتش يمكننا إضافة الخلفية نفسها عدة مرات!

• ثانيًا، انقر على نافذة الخلفيات لفتح محرر الرسوم، ثم غير اسم الخلفية إلى "شاشة النهاية" أو أي اسم معبر بحيث يسهُل عليك فهم المشروع عند العودة إليه:

• ثالثًا، انقر على كائن الحشرة وأضف الكتل التالية لوضع الحشرة على شاشة النهاية:

• رابعًا، سنضيف مؤقتًا من كتل الاستشعار، وذلك لإظهار الوقت الذي استغرقه اللاعب في إيجاد الحشرة:

اسحب كتلة المؤقت داخل كتلة قُل، لتبدو الخنفساء وكأنها تخبر اللاعب بالوقت المستغرق!

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

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

• ثامنًا، انقر على العلم الأخضر واختبر اللعبة. اختبر هل يُعاد ضبط المؤقت عند النقر على الخنفساء في شاشة البداية للانتقال إلى المستوى الأول؟ هل يختفي المؤقت عند الانتقال من شاشة النهاية إلى شاشة البداية؟

اختبر اللعبة

بعد أن استمتعت باللعب ومعرفة مدى سرعتك في العثورعلى الحشرات. هل لاحظت أي شيء تود تعديله في اللعبة؟ يمكنك إجراء عدة تعديلات على اللعبة، منها:

• جعل الببغاء أكثر إزعاجًا.
• جعل الحشرات أصغر حجمًا.
• تغيير تأثير اللون لتمويه الحشرة في كل مرحلة.
• تغيير نمط الخط أو لون الخط.

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

مشاركة المشروع

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

ثانيًا، انقر على خيار المشاركة Share لجعل المشروع متاحًا للجميع.

ثالثًا، أضف إرشادات للاعبين، إن أحببت، في مربع الإرشادات Instruction box. كما يمكنك إضافة ملاحظة في مربع الملاحظات والملكية Notes and Credits إذا كان مشروعك أصليًا، أو يمكنك ذكر المشروع الأصلي الذي عدلت عليه.

أخيرًا، انقر على خيار نسخ الرابط Copy link لمشاركته مع الأصدقاء عبر وسائل التواصل الاجتماعي.

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

شاركنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

اختبر معلوماتك

انعش ذاكرتك واختبر معلوماتك بالإجابة عن الأسئلة التالية:

1. السؤال الأول: ما هي الخلفية التي سننتقل إليها عند تشغيل الكتل التالية؟

(حاول تذكر ما تعلمناه قبل الإطلاع على الإجابة أدناه)

• الإجابة الصحيحة : عند النقر على الكائن سننتقل إلى الخلفية Urban.

2. السؤال الثاني: تمعن في الكتل التالية، كيف يمكننا إصلاحها بحيث يتحرك الكائن باستمرار؟

• الإجابة الصحيحة : عبر نقل كتلة تحرك 6 خطوات إلى داخل كتلة كرر باستمرار.

3. السؤال الثالث: كيف يمكننا الحصول على الوقت المستغرق في اللعب كما في الصورة التالية؟

• الإجابة الصحيحة : عبر إضافة كتلة المؤقت.

ترقية المشروع

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

إليك تذكرةً بما ستحتاج تنفيذه في كل مرحلة:

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

إليك تذكرةً بالكتل التي ستحتاجها لإخفاء الكائنات في مرحلة جديدة:

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

أضف ببغاءً آخر، أو كائنًا آخر كمصدر إزعاج. إليك تذكرة بالكتل اللازمة

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

ختامًا

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

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

ترجمة -وبتصرف- للمقال Find the Bug من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

• المقال السابق: تنفيذ مشروع حافلة مدرسة متحركة باستخدام برنامج سكراتش
• إنشاء لعبة أضواء باستخدام برنامج سكراتش وحاسوب راسبيري باي
• تصميم لعبة السلك والحلقة باستخدام برنامج سكراتش وحاسوب راسبيري باي
• تنفيذ مصباح ليد ثلاثي الأبعاد باستخدام سكراتش ولوحة راسبيري باي
• صنع آلة موسيقية باستخدام سكراتش وحاسوب راسبيري باي

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

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

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

يمكن أن تتأثر جودة اتصال الشبكة بشكل عام بعدة عوامل مثل:

• تغطية ضعيفة من المزود.
• ظروف طقس شديدة.
• انقطاع التيار الكهربائي.
• الدخول في مناطق ميتة الاتصال دائمًا dead zones مثل البنايات ذات الجدران المانعة لاتصالات الشبكة.
• الدخول في مناطق ميتة الاتصال مؤقتًا مثل السفر في قطار وعبور نفق.
• اتصالات الإنترنت المقيدة زمنيًا time-boxed مثل الاتصالات الموجودة في المطارات أو الفنادق.
• الممارسات الثقافية التي تتطلب وصولًا محدودًا أو معدومًا للإنترنت في أوقات أو أيام محددة.

هدفك هو تقديم تجربة مستخدم جيدة في وضع عدم الاتصال تقلل من تأثير التغيُّر في حالة التطبيق عندما يستعيد المستخدم اتصاله بالشبكة.

حدد ما تريد إظهاره للمستخدمين في حالة ضعف الاتصال بالشبكة

اطرح على نفسك أولًا السؤال التالي: كيف سيبدو نجاح وفشل اتصال الشبكة في تطبيقك؟ الاتصال الناجح هو التجربة العادية لتطبيقك بوجود اتصال بالشبكة، بينما يُمثِّل فشل الاتصال كيفية تصرف تطبيقك في حالة عدم الاتصال بالشبكة أو الاتصال البطيئ بها.

عند التفكير في نجاح أو فشل اتصال الشبكة، عليك أن تسأل نفسك أسئلة حول تجربة المستخدم UX المهمة هذه:

• ما هي المدة التي تنتظرها لتحديد نجاح أو فشل الاتصال؟
• ماذا يمكنك أن تفعل أثناء تحديد نجاح أو فشل الاتصال؟
• ماذا تفعل في حال فشل الاتصال؟
• كيف تبلِّغ المستخدم بما ورد أعلاه (أنه في مرحلة انتظار تحديد حالة التطبيق، أو أن اتصاله فشل أو أن اتصالة استُعيد)؟

بلغ المستخدمين عن حالتهم الحالية وعن تغيُّر حالة التطبيق

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

اقتباس

يبدو أن اتصال الشبكة لديك غير مستقر. لا تقلق! ستُرسل الرسائل عند استعادة الاتصال.

بلّغ المستخدم بوضوح عند حدوث تغيُّر في حالة التطبيق في أسرع وقت ممكن.

استخدام تطبيق Google I/O مربع إشعار لإخبار المستخدم عندما يكون في حالة عدم اتصال بالشبكة، إذ يقول الإشعار "أنت بلا اتصال، تغييراتك في My Schedule ستُحفظ لوقت لاحق".

بلِّغ المستخدمين عندما يتحسن اتصال الشبكة لديهم أو يعود

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

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

أحد الأمثلة على استخدام هذه التجربة هو متصفح Chrome Status التي تُظهر ملاحظة للمستخدم عند تحديث التطبيق في الخلفية.

تحتاج بعض التطبيقات مثل تطبيق الطقس إلى تحديث تلقائي، لأن البيانات القديمة ليست مفيدة مع تقلبات الطقس المستمرة.

يتيح تطبيق ana (أنا) للمستخدم معرفة وقت تحديث المحتوى عبر مربع إشعار في أعلى الشاشة.

يمكنك تخصيص مساحة ثابتة تُظهر من خلالها آخر مرة تم فيها تحديث التطبيق، سيكون هذا مفيدًا لتطبيق تحويل العملات مثلًا.

تطبيق Material mony يُظهر آخر تحديث للتطبيق.

وينبّه المستخدم عند تحديث التطبيق.

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

صحيفة الانترنت Tailpiece تُنزّل آخر الأخبار تلقائيًا.

وتسمح للمستخدمين بالتحديث يدويًا حتى لا يفقدوا مكان تصفحهم في المقال.

تحديث واجهة المستخدم UI لتعكس الحالة السياقية الحالية

لكل بِت bit من واجهة المستخدم سياقُه ووظائفه الخاصة التي تتغير بناءً على كونها تتطلب اتصالًا ناجحًا بالشبكة أو لا، أحد الأمثلة على ذلك هو مواقع التجارة الإلكترونية التي يمكن تصفحها في وضع عدم الاتصال، فوقتها يُعطَّل زر الشراء إلى حين استعادة الاتصال.

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

توضيح للمستخدم نموذج العرض الخاص بوضع عدم الاتصال

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

تقديم تجربة افتراضية لوضع عدم الاتصال

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

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

إذا كان الجهاز غير متصل بالشبكة، فسيُشعر Tailpiece المستخدم بذلك.

ويُعرِّف المستخدم أنه لا يزال بإمكانه استخدام التطبيق جزئيًا على الأقل.

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

إبلاغ المستخدم عندما يكون التطبيق جاهزًا للاستخدام دون اتصال بالشبكة

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

فكر مرة أخرى في اللغة التي تستخدمها وتأكد من أنها مناسبة لجمهورك، إذ يُسيئ مثلًا الجمهور غير التقني عمومًا فهم مصطلح "غير متصل"، لذا استخدم لغة قائمة على الإجراء action-based تساعد جمهورك على فهمها والاندماج معها.

يظهر تطبيق Google I/O إشعارًا مفاده: اكتمل التخزين المؤقت، وستعمل الزيارات المستقبلية في وضع عدم الاتصال.

يتضمن موقع Chrome Platform Status معلومات حول المساحة المشغولة بالتخزين المؤقت.

اجعل "التخزين في وضع عدم الاتصال" جزءًا واضحًا من واجهة التطبيقات كثيفة البيانات

إذا كان أحد تطبيقاتك يستخدم بيانات كثيرة، فتأكد من وجود مفتاح تبديل switch لاضافة عنصر ما للاستخدام دون اتصال save for offline بدلاً من التنزيل التلقائي له، وتأكد أن ذلك المفتاح غير محجوب من عناصر واجهة المستخدم الأخرى وأنه واضح للمستخدم.

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

توضيح ما هو متاح حاليا

كن واضحًا فيما يتعلق بالخيار الذي تقدمه، قد تحتاج إلى إظهار نافذة معينة أو إعداد ما يعرض مثلًا "المكتبة غير المتصلة بالشبكة" offline library أو فهرس المحتوى content index، الذي يمكن للمستخدم من خلاله رؤية ما خزّنه في هاتفه بسهولة. أيضًا تأكد أن الإعدادات موجزة وكن واضحًا بشأن مكان تخزين البيانات ومن يمكنه الوصول إليها.

إظهار التكلفة الفعلية للإجراء

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

قد يتجنب مستخدمو الباقات المحدودة ذات الكلفة المرتفعة للاتصال بالإنترنت تنزيل ملفات كبيرة خوفًا من زيادة التكلفة، لذا يلزمك أيضًا عرض تكلفة تحميل الملفات أو تكلفة أداء المهام بشكل عام في تطبيقك، مثلًا عندما يكتشف تطبيق الموسيقى المذكور كمثال في فقرة سابقة أن المستخدم في خطة البيانات المدفوعة data plan، يعرِض حجم الملف المُشغَّل، ويتيح للمستخدم رؤية تكلفة تحميله.

ساعد في منع التجارب الساخرة

غالبًا ما ينجز المستخدمون تجربة ما ساخرة في التطبيق دون أن يدركوا ذلك، مثلًا قبل انتشار تطبيقات مشاركة الملفات المعتمدة على السحابة cloud-based، كان من الشائع أن يحفظ المستخدمون الملفات الكبيرة ويرفقوها برسائل البريد الإلكتروني ليواصلوا تحريرها من جهازٍ مختلف. من المهم عدم الإنجرار إلى تجربتهم الساخرة تلك، بل النظر إلى ما يحاولون تحقيقه منها، بمعنى، بدلاً من التفكير في كيفية جعل إرفاق ملف كبير أسهل، حُل مشكلة مشاركة الملفات الكبيرة عبر أجهزة متعددة باستخدام التخزين السحابي.

اجعل العمليات قابلة للنقل من جهاز لآخر

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

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

إنشاء تجارب تصميم متكاملة

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

استخدم لغة بسيطة وموجزة

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

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

تجنب المصطلحات غير المفهومة للمستخدمين غير التقنيين مثل: "عامل الخدمة".

استخدم اللغة الواضحة التي تصف الإجراء مثل: "تنزيل".

استخدم طرق تصميم متعددة لتسهيل تجربة المستخدم

استخدم اللغة واللون والمكونات المرئية لإظهار تغيُّر حالة التطبيق أو وضعه الحالي، فقد لا يلاحظ المستخدم حالة التطبيق إذا عُرضت باستخدام اللون فقط.

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

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

بل استخدم مزيجًا من عناصر التصميم لتوصيل المعنى، مثل اللغة الواضحة بالإضافة للون، لاحظ عند استخدم التعبير اللفظي الموضح للخطأ "تجاوزْت الحد الأقصى لعدد الأحرف" مع اللون المعبّر لإزالة اللبس بشأن سبب الخطأ.

استخدم أيقونات بليغة

تأكد من إيصال المعلومات للمستخدم بشكل صحيح وذلك باستخدام تسميات نصية ذات معنى مع الأيقونات، إذ يمكن أن يسبب استخدام الأيقونات لوحدها لبسًا.

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

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

قد تفسَّر بعض الإجراءات على أنها حفظ دون اتصال بدلاً من إظهار حالة الشبكة، لذا فكر في الإجراء الذي تحاول الإبلاغ عنه بدلاً من عرض أيقونات مجردة (ذات طابع عام) للمستخدم، كأن يكون شكل أيقونة حفظ البيانات أو تنزيلها قائمًا على الإجراء action-based أي يدل على طبيعة استخدامها بالضبط.

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

استخدم عناصر نائبة في التخطيط ريثما يجهز المحتوى

مخطط الهيكل skeleton layout للتطبيق هو عناصر نائبة توضع في هيكل التطبيق الرئيسي ريثما يُحمّل المحتوى الفعلي، يمكنك استخدامه لتوضّح للمستخدم أن محتوى الصفحة على وشك التحميل.

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

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

ثم وضع المحتوى مكان تلك العناصر النائبة متى ما انتهت عملية التحميل وأصبح المحتوى جاهزًا للعرض.

لا تعيق المحتوى

عندما يشغِّل المستخدم إجراء مثل إضافة عنصر جديد، فإن التطبيق يتصل بالخادم لمزامنة العنصر الجديد، وللدلالة على ذلك فإنه يعرض عنصر تدخُّلي للتحميل يغطي الشاشة بأكملها (غالبًا أيقونة التحميل الدائرية تتدخل وسط الصفحة وتحجب تنفيذ اي عملية ريثما ينتهي التحميل لتختفي بعدها). قد يعمل هذا بشكل جيد إذا كان لدى المستخدم اتصال شبكة ثابت، لكن إذا كان اتصال الشبكة غير مستقر، فلا يمكن للمستخدمين التخلص من عنصر التحميل الذي يغطي الشاشة أثناء تحميل بياناتهم، فكأن الواجهة تمنعهم من القيام بأي شيء في التطبيق وتعيق ظهور محتواه. هذه ليست تجربة جيدة، بل يجب أن يتجنب تطبيقك التعامل مع طلبات الشبكة التي تعيق ظهور في وضع الاتصال غير المستقر، والسماح بدلًا من ذلك للمستخدمين بالاستمرار في تصفح تطبيقك ومهام قائمة الانتظار التي ستُنفَّذ وتُزامَن بمجرد تحسُّن الاتصال.

أظهر حالة الإجراءات من خلال تزويد المستخدمين برد فعل، مثلًا إذا كان أحد مستخدمي تطبيق مستنداتك يُحرِّر مستند عند انقطاع الاتصال، ففكر في تغيير تصميم رد الفعل بحيث يكون مختلفًا بشكل مُلاحَظ عما كان عليه قبل انقطاع الاتصال، لكن حافظ على إظهار أنه قد تم حفظ ملفه وستتم مزامنته عندما يُستعاد الاتصال بالشبكة، فذلك سيؤدي إلى إعلام المستخدم بمختلف الحالات المتاحة وطمأنته بأن قد تم تخزين مهمته أو إجراءه، كما لهذا فائدة إضافية تتمثل في زيادة ثقة المستخدم في استخدام تطبيقك.

صمم لجميع طبقات المستخدمين

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

اعرض خيارات النطاق الترددي المنخفض low bandwidth للمستخدمين ذوي اتصال الشبكة الضعيف، أي قدِّم أصولًا قليلةً للتطبيق إذا كان اتصال الشبكة بطيئ. أيضًا وفِّر ميزة للاختيار ما بين الأصول عالية الجودة و منخفضة الجودة.

الخلاصة

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

تذكر هذه الإرشادات عند تصميم تجربة المستخدم للشبكات غير المستقرة:

• فكر في كيفية التصميم في حالة نجاح الاتصال بالشبكة وحالة فشل الاتصال وأيضًا عدم استقراره.
• إذا كانت تكلفة نقل أو تخزين البيانات مرتفعة في تطبيقك، يجب مراعاة إعلام المستخدم بذلك.
• بالنسبة لمعظم المستخدمين على مستوى العالم، فإن البيئة الفنية لاتصال الشبكة (مثلًا مكان المستخدم بالنسبة للموجِّه أو الرواتر) تكاد تكون متنقلة بحتًا.
• الأجهزة القديمة ذات الأداء المنخفض، بالإضافة لسعة تخزين وذاكرة وقدرة معالجة محدودة، وشاشات صغيرة بجودة قليلة، فتأكد أن يكون مراعاة الأداء على مثل هذه الأجهزة جزء من تصميمك.
• اسمح للمستخدمين بتصفح تطبيقك عندما يكونوا في وضع عدم اتصال.
• أعلِم المستخدمين بوضعهم الحالي وتَغيُّر حالتهم.
• حاول توفير وضع عدم الاتصال افتراضيًا إذا كان تطبيقك لا يحتاج بيانات كثيرة.
• إذا كان تطبيقك يعالج كمية كبيرة من البيانات، فأعلِم المستخدمين حول كيفية تنزيل البيانات للاستخدام دون اتصال.
• اجعل المستخدم قادر على التنقل بين الأجهزة مع المحافظة على نفس التجارب بينها لنفس التطبيق.
• استخدم كلًا من اللغة والأيقونات والتمثيل والكتابة واللون للتعبير عن الأفكار للمستخدم.
• قدم تشجيع وتطمين وردود أفعال لمساعدة المستخدم في فهم حالات التطبيق المختلفة.

ترجمة -وبتصرف- للمقال Offline UX design guidelines من موقع web.dev.

اقرأ أيضًا

• ما هي تطبيقات الويب التقدمية PWA
• مفهوم Service Worker وتأثيره في أداء وبنية مواقع وتطبيقات الويب
• مشاركة تطبيقات الويب التقدمية البيانات عبر الواجهة Web Share
• إضافة اختصارات للمهام الشائعة في تطبيقات الويب التقدمية PWA

سنتعلم في هذا المشروع كيفية تحريك كائنات سكراتش كي تتمكن من اللحاق بحافلة المدرسة، وسنجعل الكائنات تغير موضعها على المنصة Stage، وتغير مظهرها.

لنحصل على النتيجة التالية:

اضغط على العلم الأخضر لتتحرك الكائنات! ولاحظ كيف تغير الكائنات مظهرها لخلق تأثير التحريك.

التحريك أو الرسوم المتحركة Animaton هي عملية خلق تأثير الحركة عن طريق تغيير الصور بسرعة. اعتمد الرسامون قديمًا نحت الصور من كتل خشبية واستخدموها كطوابع، لكن يمكنك الآن استخدام برنامج سكراتش للحصول على رسوم متحركة بكل سهولة!

إنشاء مشهد الحافلة

سنختار في هذه الخطوة خلفيةً مناسبة ونضيف إليها كائنًا وهو الحافلة:

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

أولًا، اضغط على رمز اختيار خلفية من قائمة المنصة الموجود في الزاوية السفلية اليسرى:

ثم اختر خلفيةً مناسبةً لتشكل نقطة انطلاق للحافلة. اخترنا الخلفية التالية من الخلفيات الموجودة في التصنيف خارجي:

ثانيًا، اضغط على رمز اختيار كائن من قائمة المنصة أسفل اليسار:

ثم اكتب 'bus' في مربع البحث، وأضف كائن حافلة المدينة إلى مشروعك:

ثالثًا، انقر على كائن الحافلة لتحديده، ثم اسحب كتلة "عند نقر العلم الأخضر" من كتل الأحداث، والتي تسمح بتشغيل المشروع عند النقر عليها:

ثم اسحب الحافلة وضعها في مكان مناسب على المنصة، كما يلي:

لاحظ أن إحداثيات محور x ومحور y التي تصف موضع الحافلة، تُعرض في قائمة الكائنات أسفل المنصة:

رابعًا، أضف الكتلة التالية من كتل الحركة:

تُعبر الأرقام الموجودة في هذه الكتلة عن إحداثيات الموضع الحالي للحافلة على محوري x y (محوري س، ص)، حرك الحافلة ولاحظ تغير الأرقام، ثم انقر على رمز العلم الأخضر لتشغيل المشروع ولاحظ عودة الحافلة إلى موضعها الابتدائي.

خامسًا، أضف كتلة انتقل إلى الطبقة الأمامية من كتل المظهر، ثم انقر على الكتلة واختر الخلف، وذلك كي تبقى الحافلة خلف الكائنات الأخرى:

كما يمكنك تغيير لون الحافلة باستخدام الكتلة التالية:

تمثل قطة سكراتش الكائن الافتراضي في جميع المشاريع الجديدة، ويكون اسمها Sprite1. حددها بالنقر عليها لنبدأ بتحريكها:

يمكنك إضافة كائن القطة من رمز اختيار كائن عبر كتابة 'Cat' في مربع البحث. لاحظ أن القطة كبيرة بالنسبة إلى حجم الحافلة، لذلك عَدّل حجمها إلى القيمة 50 من مربع الحجم في نافذة الكائنات:

جعل القطة تستقل الحافلة

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

وضع القطة في نقطة البداية

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

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

ثالثًا، أضف الكتل التالية لوضع القطة في نقطة البداية:

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

تحريك القطة

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

أولًا، أضف كتلة كرر 10 مرات، ثم أضف داخلها كتلة تحرك 10 خطوات، كما يلي:

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

ثانيًا، اضغط على نافذة المظاهر ولاحظ أن القطة لديها مظهرين.

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

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

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

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

سادسًا، اضغط على العلم الأخضر واستمتع بمشاهدة القطة وهي تستقل الحافلة.

اقتباس

ملاحظة احرص دائمًا على استخدام كتلة الإظهار مع كتلة الإخفاء ليعاود الكائن الظهور بعد اختفائه.

جعل فرس النهر يطير نحو الحافلة

سنضيف في هذه الخطوة فرس نهر ونجعله يطير نحو الحافلة:

لاحظ أن كائن فرس النهر لديه مظهران يمكن استخدامهما لجعل الكائن يبدو كأنه يحرك أجنحته ويطير باتجاه الحافلة، وذلك باتباع الخطوات التالية:

أولًا، أضف كائن فرس النهر ذو الاسم Hippo1، ثم غَيّر حجمه، وفقًا لما يلي:

ثانيًا، اسحب فرس النهر إلى الزاوية العلوية اليسرى من المنصة.

ثالثًا، أضف الكتل التالية لوضع فرس النهر في نقطة البداية:

لاحظ أن إحداثيات المحور س و المحور ص تعبّر عن الموضع الحالي للكائن، لذلك لست بحاجة إلى تعديلها أو كتابتها. والآن سوف يرفرف فرس النهر بجناحيه طائرًا نحو الحافلة.

رابعًا، أضف كتلة اتجه نحو واختر كائن الحافلة City Bus من النافذة المنسدلة:

كما يمكنك تعديل عدد مرات التكرار ليتوقف فرس النهر في الموضع المناسب.

خامسًا، أضف كتلتي الإظهار والإخفاء كما يلي، ليبدو الكائن كأنه يدخل الحافلة:

سادسًا، اضغط على العلم الأخضر واستمتع بمشاهدة فرس النهر يطير ويستقل الحافلة!

انطلاق الحافلة

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

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

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

ثالثًا، أضف كتلة انزلق إلى الموضع من كتل الحركة. لاحظ أن إحداثيات الموضع قد تكون مختلفة في مشروعك.

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

خامسًا، أضف كتلة الإخفاء لتبدو الحافلة وكأنها تغادر المنصة.

سادسًا، أضف كتلة الإظهار بعد كتلة عند النقر على العلم الأخضر لجعل الحافلة تظهر عند تشغيل المشروع:

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

التأخر على الحافلة

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

أولًا، انقر على كائن القطة ثم أضف كتلة انتظار كما يلي:

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

ثالثًا، اضغط على العلم الأخضر ولاحظ أن القطة ستمشي بسرعة أكبر. كما يمكنك تقليل وقت الانتظار إلى نصف ثانية، أو ربع ثانية 0.25، أو عشر الثانية 0.1.

رابعًا، يمكنك اختيار فيما إذا كانت القطة ستستقل الحافلة، أم ستفوتها الحافلة كما يلي:

• احذف كتلة الاختفاء كي تبقى القطة على المنصة وتفوتها الحافلة:

• زِدّ وقت انتظار الحافلة، كي تتمكن القطة من اللحاق بها، ولا تنسى إضافة كتلة الاختفاء:

خامسًا، أجرِ التعديلات التي تراها مناسبة لتحصل على مشهد مميز! ولا تنسى حفظ المشروع.

تغيير الوجهة

يمكنك تغيير وجهة الحافلة من "جولات سكراتش" إلى وجهة من اختيارك. إلى أين تريد أن تذهب حافلتك؟

أولًا، انقر على كائن الحافلة لتحديده ثم انقر على نافذة المظاهر:

ثانيًا، انقر على النص المكتوب باللغة الانجليزية "Scratch Tours" لتحديده، ثم انقر على خيار الحذف لحذفه أو اضغط مفتاح Delete من لوحة المفاتيح.

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

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

اختبر معلوماتك

انعش ذاكرتك واختبر معلوماتك بالإجابة عن الأسئلة التالية:

1. السؤال الأول: متى تنطلق الحافلة بناءً على الكتلتين التالتين؟ (حاول تذكر ما تعلمناه قبل الإطلاع على الإجابة أدناه)

• الإجابة الصحيحة : بعد 4 ثوان من الضغط على العلم الأخضر.

2. السؤال الثاني: أي من خصائص الكائن تتغير تلقائيًا عند تغيير موضع الكائن؟

• الإجابة الصحيحة : تتغير إحداثيات المحورين x وy عند سحب الكائن إلى موضع جديد على المنصة.

3. . السؤال الثالث: ماهي فائدة كتلة التكرار التالية؟

• الإجابة الصحيحة : تكرار الحركة 5 خطوات وتغيير المظهر ليبدو الكائن وكأنه يتحرك.

ترقية المشروع

جرب إضافة كائن آخر وأضف عليه الكتل اللازمة مما تعلمناه ليصل إلى الحافلة.

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

ختامًا

بهذا تكون قد أتممت مشروع حافلة المدرسة المتحركة باستخدام برنامج سكراتش.

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

ترجمة -وبتصرف- للمقال Catch the bus من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

تتكون الأداة Performance من أربع أدوات جزئية سنشرحها في هذا المقال بشيء من التفصيل.

الأداة Waterfall

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

يمثِّل المحور X الزمن المنقضي، كما تظهر العمليات المسجلة التي ندعوها علامات Markers على أساس أشرطة أفقية تتتابع مثل الشلال لتعكس الطبيعة التسلسلية لآلية تنفيذ المتصفح للعمليات، فعندما تختار علامةً ما، فسترى معلومات عنها ضمن الشريط الجانبي الذي يقع على اليمين وتتضمن الفترة الزمنية التي استغرقتها العلامة وغيرها من المعلومات الخاصة بنوع العلامة marker type.

العلامات

تملك العلامات التي ترتبط بالعمليات المنفذة نظامًا لونيًا محددًا وسنستعرضها في هذا القسم:

• أحداث DOM: تمثَّل باللون، وهي شيفرة جافاسكربت التي تُنفَّذ على أساس استجابة لأحداث DOM. تقدم هذه العلامات معلومات عن ما يلي:

  • نوع الحدث Event type: مثل نقرة click أو رسالة message.
  • مرحلة الحدث Event Phase: مثل هدف Target أو التقاط Capture.

• دوال جافاسكربت: تُمثَّل باللون، وهي الدوال التي ينفِّذها المتصفح في صفحة الويب وتُعنون وفقًا للسبب الذي استُدعي التابع لأجله، كما تقدِّم المعلومات على صورة مكدّس استدعاءات call stack مزوَّد بروابط إلى هذه الدوال:

  • Script tag: تتعلق بالتعامل مع وسوم الشيفرة.
  • setInterval: تتعلق بضبط الفترات الزمنية.
  • setTimeout: تتعلق بتحديد زمن انتهاء العملية.
  • requestAnimationFrame: تتعلق بطلبات إطار رسومي.
  • Promise Callback: وتتعلق ياستدعاءات الوعود Promises.
  • Promise Init: وتتعلق بتهيئة الوعود.
  • Workers: تتعلق بعمّال ويب.
  • JavaScript URI: تتعلق بعناوين موارد جافاسكربت.
  • Event Handler: تتعلق بمعالجة الأحداث.
• تفسير HTML: تُمثَّل باللون وتمثِّل الوقت المستغرق في تفسير شيفرة HTML لصفحة الويب، كما تُقدِّم المعلومات على صورة مكدّس استدعاءات call stack مزوَّد بروابط إلى الدوال المستخدَمة.
• تفسير XML: تُمثَّل باللون وتمثِّل الوقت المستغرق في تفسير شيفرة XML لصفحة الويب، كما تُقدِّم المعلومات على صورة مكدّس استدعاءات مزوَّد بروابط إلى الدوال المستخدَمة.
• إعادة ضبط التنسيق Recalculate Style: تُمثَّل باللون، وتعرض الحسابات اللازمة لضبط التنسيق المحدد لعناصر الصفحة، كما تقدِّم المعلومات على صورة تلميحات لإعادة التنسيق Restyle Hint، والتي هي قيم نصية تشير إلى نوع إعادة التنسيق الواجب تطبيقه وتأخذ القيم التالية:
  • Self.
  • Subtree.
  • LaterSiblings.
  • CSSTransitions.
  • CSSAnimations.
  • SVGAttrAnimations.
  • StyleAttribute.
  • StyleAttribute_Animations.
  • Force.
  • ForceDescendants.
• ضبط التخطيط Layout: تُمثَّل باللون وتعرض الحسابات اللازمة لتحديد موقع وحجم عناصر الصفحة، كما تدعى هذه العملية بإعادة الإنسياب reflow أحيانًا.
• رسم الصفحة Paint: تُمثَّل باللون وترسم البكسلات على الشاشة.
• تجميع الموارد المستهلكة Garbage Collection تُمثَّل باللون وتعرض أحداث تجميع الموارد المستهلكة، ويُشار إلى أحداث تجميع الموارد المستهلكة اللاتصاعدي بالعبارة Non-incremental، كما تُقدِّم المعلومات على صورة قيم نصية وهي:
  • "ReasonA": سلسلة نصية تدل على سبب استخدام مجمع الموارد المستهلكة GC.
  • "Non-incremental Reason": سلسلة نصية تدل على سبب استخدام مجمع الموارد المستهلكة اللاتصاعدي.
  • ستجد في فايرفوكس 46 ميزةً جديدةً هي تجميع الموارد المستهلكة، نظرًا لضغوطات ناتجة عن حجز الذاكرة، حيث يظهر في هذه الحالة رابطًا بعنوان عرض المسببات الناتجة عن حجز الذاكرة Show Allocation Triggers. انقر عندها على الرابط لتتابع ملف الأداء المتعلق بحجز الذاكرة، وصولًا إلى لحظة وقوع حدث تجميع الموارد المستهلكة.
• تدوير المستهلكات Cycle Collection: تُمثَّل باللون، وهي عملية تحرير بُنى البيانات التي تُخزِّن أرقام المراجع في اللغة ++C، وتشبه هذه العملية تجميع الموارد المستهلكة لكنها خاصة بكائنات ++C، وهذه العمليات دائمًا من النوع تجميع Collect.
• اختزال المنحني البياني لعملية تدوير المستهلكات CC Graph Reduction: تُمثَّل باللون، وتضم عمليتي التحضير أو التحسين الأولي لتدوير المستهلكات CC، وتكون هذه العمليات دائمًا من نوع تجاهل ما يمكن تجاوزه ForgetSkippable.
• العلامة Console: تُمثَّل باللون، وهي الفترة الزمنية بين استدعائين مترابطين للدالتين ()console.time و()console.timeEnd، كما تُقدِّم المعلومات عبر:
  • اسم المؤقت Timer name: على هيئة وسيط يمرَّر إلى الدالة console.
  • المكدس في البداية stack at start: يعرض حالة مكدس الاستدعاء عند استدعاء الدالة ()console.time مع روابط إلى بقية الدوال.
  • المكدس في النهاية stack at end: وهو جديد في فايرفوكس 46، إذ يعرض حالة مكدس الاستدعاء عند استدعاء الدالة ()console.timeEnd، فإذا كان الاستدعاء داخل وعد Promise؛ فسيعرض أيضًا القيمة النصية "Async stack".
• العلامة Timestamp: تُمثَّل باللون، وهي استدعاء مفرد للدالة ()console.timeStamp، كما تُظهر الوسيط الذي مُرِّر إلى هذه الدالة.
• تحميل محتوى DOM: تُمثّل باللون، وتُظهر الحدث DOMContentLoaded.
• تحميل Load: تُمثّل باللون، وتظهر حدث تحميل المستند load.
• أحداث عمّال ويب في الخيط الأساسي Worker event in main thread: تُمثَّل باللون، وتظهر الحالات التي يرسل فيها الخيط الأساسي رسائل إلى عمّال الويب أو التي يستقبل فيها رسائل من العمّال، كما وتأخذ إحدى القيمتين:
  • تهيئة البيانات على الخيط الرئيسي Serialize data on the main thread*، إذ يحوِّل الخيط الرئيسي الرسالة إلى صيغة مناسبة كي تُرسَل إلى العامل.
  • تجميع البيانات على الخيط الرئيسي Deserialize data on the main thread: إذ يحوّل الخيط الرئيسي البيانات القادمة من العمال إلى بنية يمكن تخزينها أو عرضها.

• أحداث عمال ويب في خيط العمال Worker event in worker thread: تُمثَّل باللون، وتظهر الحالات التي يرسَل فيها العامل رسائلًا إلى الخيط الرئيسي، أو التي يستقبل فيها رسائل من الخيط الرئيسي، كما تأخذ إحدى القيمتين:

  • تهيئة البيانات للعامل Serialize data in worker: إذ يحوِّل العامل الرسالة إلى صيغة مناسبة كي تُرسَل إلى الخيط الرئيسي.
  • تجميع البيانات عند العامل Deserialize data in worker: ويحوِّل العامل البيانات القادمة من الخيط الرئيسي إلى بنية يمكن للعامل فهمها.

تملك العلامات النمط اللوني نفسه في الأدلة Waterfall وفي لوحة النظرة العامة عندما تعرض هذه الأداة، مما يُسهِّل المطابقة بينهما.

ترشيح العلامات

يمكنك التحكم بالعلامات التي تريد استعراضها، وذلك من خلال زر الترشيح ضمن شريط الأدوات:

أنماط لعمليات تشير إليها الأداة Waterfall

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

تصيير التنفيذ المتسلل لعمل المتصفح

قد تعرض لك الأداة Waterfall النمط التالي:

يمثل الشكل السابق تصوّرًا للخوارزمية الأساسية التي يعتمدها المتصفح في الاستجابة لحدث:

1. استدعاء دالة جافاسكربت: تتسبب بعض الأحداث في صفحة ويب مثل أحداث DOM، بتنفيذ شيفرة جافاسكربت، وقد تغيّر هذه الشيفرة بعض أجزاء شجرة DOM أو شجرة CSSOM.
2. إعادة ضبط التنسيق: إذا لاحظ المتصفح تغيرات في التنسيق المحسوب لعناصر الصفحة، فلا بد من إعادة الحسابات وضبط التنسيق مجددًا.
3. تخطيط الصفحة: يستخدِم المتصفح التنسيق المحسوب حديثًا في تقدير موقع وهندسة العناصر في الصفحة.، إذ تدعى هذه العملية بتخطيط الصفحة Layout، كما تدعى أحيانًا إعادة إنسياب reflow.
4. رسم الصفحة: لا بد أخيرًا من إعادة رسم الصفحة على الشاشة، في حين لا تظهر الخطوة الأخيرة على الشاشة، وهي إمكانية تقسيم الصفحة إلى طبقات يُعاد رسمها بصورة مستقلة، ومن ثم يعاد دمجها بعملية التركيب Composition.

لا بد أن يتسع إطار واحد للتسلسل السابق طالما أنّ الشاشة لن تُحدَّث حتى اكتمال سلسلة التنفيذ السابقة، ومن المعروف أنّ معدل 60 إطار في الثانية كاف لإظهار الرسوميات المتحركة بسلاسة ونعومة على الشاشة، ويتطلب هذا من المتصفح تنفيذ السلسلة السابقة خلال 16.7 ميلي ثانية، كما من المهم معرفة من منظور الاستجابة أنّ المتصفح لا ينفِّذ بالضرورة كل خطوة من الخطوات السابقة:

• تُحدِّث رسوميات CSS الصفحة دون تنفيذ أيّ شيفرة جافاسكربت.
• لا يعيد كل تغيير في خصائص تنسيق CSS تخطيط الصفحة، وإنما فقط تلك الخصائص التي تغيِّر موقع وهندسة العناصر، مثل width أو display أو font-size أو top؛ بينما لا تغير الخصائص مثل color أو opacity تخطيط الصفحة.
• لا يعيد كل تغيير في خصائص تنسيق CSS رسم الصفحة، فإذا حرّكت العنصر باستخدام خاصية التنسيق transform تحديدًا، فسيستخدِم المتصفح طبقةً منفصلةً للعنصر الذي طُبقت عليه تلك الخاصية، ولا حاجة حتى لإعادة الرسم عندما يتحرك العنصر، وإنما يُضبَط موقعه وهندسته أثناء عملية تركيب الطبقات.

سنطلع لاحقًا على تأثير رسوم CSS المتحركة على الأداء، وكيف تساعد الأداة Waterfall في الإشارة إلى ذلك.

حجب جافاسكربت

تُنفَّذ جافاسكربت افتراضيًا على الخيط نفسه الذي يستخدِمه المتصفح لتحديث تخطيط الصفحة وإعادة الرسم وتنفيذ أحداث DOM وغيرها، وهكذا فإنّ تنفيذ دوال جافاسكربت يستغرق وقتًا طويلًا قد يسبب توقف استجابة الصفحة وخشونةً في عرض الرسوميات، كما قد تتجمد الصفحة بالكامل، في حين يمكن بسهولة رصد الأوقات التي تسبب فيها شيفرة جافاسكربت مشاكلًا في الاستجابة باستخدام الأداتين Frame rate وWaterfall معًا. لاحظ كيف حددنا في الشكل التالي منطقةً سببت فيه دالة جافاسكربت نقصًا في معدل الإطارات.

سنطّلع في مقال تأثير الاستخدام المكثف لجافاسكربت على الأداء على أهمية الأداة Waterfall في تحديد مشاكل الاستجابة التي تسببها دوال جافاسكربت وكيفية استخدام التوابع غير المتزامنة للمحافظة على استجابة خيط التنفيذ.

عملية رسم عناصر مستنزفة للوقت

قد تستنزف بعض تأثيرات رسم العناصر وقتًا طويلًا مثل box-shadow، وخاصةً عند تطبيق هذه التأثيرات في حالات تحريك العناصر، إذ ينبغي على المتصفح إعادة ضبط هذه التأثيرات مع كل إطار، فإذا لاحظت انخفاضًا في معدل الإطارات عند تنفيذ عمليات رسومية كثيفة أو عمليات تحريك للعناصر خصوصًا، فتحقق من العلامات الخضراء في الأداة Waterfall.

تجميع الموارد المستهلكة

تشير العلامات الحمراء في الأداة Waterfall إلى عمليات تجميع الموارد المستهلكة GC -بغية تحرير الذاكرة المرتبطة بها-، إذ يتجول محرك جافاسكربت والذي يُدعى SpiderMonkey في فايرفوكس في كومة الذاكرة عن المناطق التي لم يَعُد بالإمكان الوصول إليها وتحريرها، وتؤثر هذه العملية في الأداء لأنه لا بد من إيقاف محرك جافاسكربت عن تنفيذ الشيفرة مؤقتًا عندما تبدأ عملية تجميع الموارد المستهلكة، وبالتالي سيُعلَّق تنفيذ برنامجك وقد لا يستجيب إطلاقًا.

ينفذ المحرك SpiderMonkey ما يسمى التجميع المتصاعد للموارد المستهلكة incremental GC لتخفيف هذه المشكلة في فايرفوكس، إذ تقتضي هذه العملية تنفيذ عملية تجميع الموارد المستهلكة على دفعات متصاعدة صغيرة تلائم تنفيذ البرنامج خلالها، لكن لا بد في بعض الحالات من تنفيذ عملية تجميع موارد مستهلكة لا تصاعدي، وبالتالي على البرنامج الانتظار حتى نهاية العملية، كما من الأفضل عدم محاولة تخصيص طريقة لتفادي عملية تجميع موارد مستهلكة لمحرك جافاسكربت معيّن وخاصةً أحداث تجميع الموارد المستهلكة التصاعدية، إذ يستخدِم SpiderMonkey مثلًا مجموعةً معقدةً من الطرق الاستدلالية لتقدير الحاجة إلى استخدام عملية تجميع الموارد المستهلكة اللاتصاعدية والتصاعدية خصوصًا، ويمكن القول أنه:

• نحتاج إلى تجميع الموارد المستهلكة عندما تُحجَز مساحات كبيرة من الذاكرة.
• نحتاج إلى تجميع الموارد تصاعديًا عندما يكون معدل حجز الذاكرة مرتفعًا إلى الحد الذي تستنزف فيه ذاكرة محرك جافاسكربت عند تنفيذ التجميع اللاتصاعدي.

عندما تسجل الأداة Waterfall علامة تجميع موارد مستهلكة، فهي تشير إلى:

• العملية تصاعدية أم لا.
• سبب تنفيذ العملية.
• سبب تنفيذ العملية اللاتصاعدية إذا كانت كذلك.
• ستجد في فايرفوكس 46 وما بعد ميزةً جديدةً هي تجميع الموارد المستهلكة على أساس نتيجة لضغوطات ناتجة عن حجز الذاكرة، حيث يظهر في هذه الحالة رابطًا بعنوان عرض المسببات الناتجة عن حجز الذاكرة Show Allocation Triggers، وانقر عندها على الرابط لتتابع ملف الأداء المتعلق بحجز الذاكرة، وصولًا إلى لحظة وقوع حدث تجميع الموارد المستهلكة، كما سنعرض هذه الموضوع لاحقًا بشيء من التفصيل.

إضافة العلامات من خلال الواجهة البرمجية للطرفية

يمكن التحكم بعلامتين فقط من خلال الواجهة البرمجية للطرفية Console API هما: "Console" و"Timestamp".

علامات Console

تساعدك على تحديد قسم محدد من التسجيل، وبالتالي استدع الدالة ()console.time في بداية القسم الذي تريد تحديده والدالة ()console.timeEnd عند نهايته، كما تقبل هاتين الدالتين وسيطًا يُستخدَم في تسمية هذا القسم، ولنفرض مثلًا أننا أمام الشيفرة التالية:

var iterations = 70;
var multiplier = 1000000000;

function calculatePrimes() {

  console.time("calculating...");

  var primes = [];
  for (var i = 0; i < iterations; i++) {
    var candidate = i * (multiplier * Math.random());
    var isPrime = true;
    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
      if (candidate % c === 0) {
          // not prime
          isPrime = false;
          break;
       }
    }
    if (isPrime) {
      primes.push(candidate);
    }
  }

  console.timeEnd("calculating...");

  return primes;
}

سيبدو خرج الأداة waterfall كما يلي:

تُحدَّد العلامة من خلال الوسيط الذي مُرِّر إلى الدالة ()console.time، كما يمكنك متابعة مكدس البرنامج ضمن الشريط الجانبي إلى اليمين عندما تختار هذه العلامة.

أما بخصوص مكدس العملية اللامتزامنة Async stack، فسيعرِض الشريط الجانبي ابتداءً من النسخة فايرفوكس 41 حالة المكدس في نهاية التسجيل عند استدعاء ()console.timeEnd، فإذا استدعيت ()console.timeEnd من داخل وعد Promise، فسيعرض الشريط العبارة "(Async: Promise)" وسترى تحتها العبارة "async stack" التي تدل على حالة مكدس الاستدعاء في لحظة تنفيذ الوعد، وتأمل الشيفرة التالية على سبيل المثال:

var timerButton = document.getElementById("timer");
timerButton.addEventListener("click", handleClick, false);

function handleClick() {
  console.time("timer");
  runTimer(1000).then(timerFinished);
}

function timerFinished() {
  console.timeEnd("timer");
  console.log("ready!");
}

function runTimer(t) {
  return new Promise(function(resolve) {
    setTimeout(resolve, t);
  });
}

وستعرض الأداة Waterfall علامةً للفترة الزمنية المنقضية بين الاستدعائين ()time و()timeEnd، فإذا نقرت عليها، فستشاهد المكدس اللامتزامن ضمن الشريط الجانبي:

علامات Timestamp

تساعدك هذه العلامة على تحديد لحظة زمنية ضمن التسجيل، لذا استدع الدالة ()console.timeStamp لتضع علامة timestamp، كما يمكنك تمرير اسم لهذه العلامة من خلال تمرير الاسم على أساس وسيط للدالة السابقة، ولنفترض أننا عدلنا الشيفرة التي عرضناها سابقًا لتحديد لحظة زمنية كل 10 تكرارات للحلقة على سبيل المثال، ونختار عدد التكرارات على أساس اسم لهذه اللحظة:

var iterations = 70;
var multiplier = 1000000000;

function calculatePrimes() {
  console.time("calculating...");

  var primes = [];
  for (var i = 0; i < iterations; i++) {

    if (i % 10 == 0) {
      console.timeStamp(i.toString());
    }

    var candidate = i * (multiplier * Math.random());
    var isPrime = true;
    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
      if (candidate % c === 0) {
          // not prime
          isPrime = false;
          break;
       }
    }
    if (isPrime) {
      primes.push(candidate);
    }
  }
  console.timeEnd("calculating...");
  return primes;
}

ستعرض الأداة waterfall شيئًا من هذا القبيل:

الأداة Frame rate

يُعَدّ معدّل الإطارات مقياسًا لاستجابة الصفحة، وقد تتسم الصفحات التي تتمتع بمعدل إطارات ضعيف أو غير مستقر بضعف الاستجابة أو الجمود، مما يؤثر على تجربة المستخدِم.

اقتباس

توضيح: يقدِّم معدل 60 إطار في الثانية أداءً سلسًا، كما يتيح فترةً زمنيةً مقدارها 16.7 ميلي ثانية لإنجاز كل التحديثات المطلوبة للاستجابة إلى بعض الأحداث.

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

علاقة معدل الإطارات باستجابة الصفحة

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

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

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

المخطط البياني لمعدل الإطارات

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

يمثِّل المحور X الزمن المنقضي أثناء تسجيل ملف الأداء، كما ستلاحظ وجود ثلاث مؤشرات هي معدل الإطارات الأعظمي ومعدل الإطارات الوسطي ومعدل الإطارات الأقل.

طريقة استخدام المخطط البياني لمعدل الإطارات

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

ستجد أنّ معدل الإطارات الوسطي جيد، لكنك ستلاحظ أيضًا ثلاث لحظات ينهار فيها معدل الإطارات خلال أعشار من الميلي ثانية، إذ يسبب ذلك دون أي شك تعثرًا ملحوظًا في عرض الرسوم المتحركة ضمن الصفحة، كما يرتبط معدل الإطارات مع عرض مختصر لعلامات الأداة waterfall فوقه مباشرةً، ولاحظ كيف ترافق أول انهيارين في معدل الإطارات في اللقطة السابقة مع شريط برتقالي يدل على الوقت المستغرَق في تنفيذ شيفرة جافاسكربت، فإذا اخترنا شريحةً تضم إحدى هاتين اللحظتين، فسيعرض قسم التفاصيل في الأسفل تفاصيل هذه الشريحة، وسنتابع الدالة التي سببت المشكلة:

لاحظ كيف أعاقت دالة جافاسكربت استُدعيت عند حدث النقر خيط التنفيذ الرئيسي عن العمل مدة 170 ميلي ثانية، ولمعرفة هذه الدالة تحديدًا انتقل إلى الأداة Flame Chart لمتابعة مكدّس الاستدعاءات في هذه النقطة:

هذه الدالة إذًا ()doPointlessComputations وهي دالة معرفة في الملف "main.js"، وقد نضطر لحل المشكلة إلى تقسيم الدالة إلى أجزاء، وتنفيذ كل جزء على حدة ضمن requestAnimationFrame أو تنفيذها بالكامل ضمن عامل ويب، وسنتابع لاحقًا حلولًا لمشاكل مثل هذه عندما نحلل تأثير الاستخدام المكثف لجافاسكربت على الأداء.

الأداة Call Tree

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

تُعَدّ الأداة Call Tree أداةً لتجميع العينات، إذ تلتقط دوريًا عينات لتحديد حالة محرك جافاسكربت وتسجيل حالة المكدّس في زمن تنفيذ الشيفرة، في حين يتعلق عدد العينات المجمّعة إحصائيًا عند تنفيذ دالة محددة بالزمن الذي يستغرقه المتصفح في تنفيذها، ولشرح فائدة الأداة Call Tree، سنستخدم خرج برنامج بسيط على أساس مثال، فإذا أردت الحصول على هذا البرنامج لتجربه بنفسك، فيمكنك تنزيله من المستودع الخاص به على جيت هاب، كما يمكنك تنزيل ملف الأداء الذي سنشرحه من المستودع ذاته وإدراجه بعد ذلك ضمن الأداة Performance، وستجد كذلك شرحًا مختصرًا عن هيكلية البرنامج ضمن المستودع.

اقتباس

ملاحظة: سنستخدم البرنامج نفسه وملف الأداء نفسه عند شرح الأداة Flame Chart لاحقًا في هذا الفصل.

تعرض لقطة الشاشة التالية خرج برنامج يوازن بين ثلاثة خوارزميات للفرز، وهي الفرز الفقاعي Bubble Sort والفرز الانتقائي Selection Sort والفرز السريع Quicksort؛ حيث يولِّد البرنامج لتنفيذ الاختبار بعض المصفوفات التي تضم أرقامًا صحيحةً عشوائيةً، ثم يفرزها باستعمال كل خوارزمية على حدة، وقد ركزنا في قسم الحالة العامة Recording overview على منطقة ظهرت فيها علامة طويلة لجافاسكربت:

تعرض الأداة Call Tree النتائج ضمن جدول يمثِّل فيه كل صف دالةً التَقطت منها الأداة عينةً واحدةً على الأقل ورتبت أسطرها حسب عدد العينات المأخوذة أثناء تواجدها في الدالة، ترتيبًا تنازليًا، بينما تمثِّل الأعمدة القيم التالية:

• العينات Samples: تشير إلى عدد العينات التي التُقطت عند تنفيذ دالة معينة بما في ذلك الدوال الأبناء وهي الدوال التي تُستدعيها هذه الدالة.
• الوقت الكلي Tota lTime: يقدَّر بالميلي ثانية ويمثِّل الوقت الكلي الذي تستغرقه شريحةً محددةً من التسجيل، كما يماثل تقريبًا عدد العينات.
• التكلفة الكلية Total Cost: يمثِّل النسبة المئوية للعدد الكلي للعينات في القسم المختار من التسجيل.
• التوقيت الذاتي Self Time: يمثِّل الوقت الذي يستغرقه تنفيذ دالة محددة دون النظر إلى زمن تنفيذ أبنائها، حيث يُقدَّر هذا الزمن من حالة المكدسات المُلتقَطة في اللحظات التي تكون فيها الدالة آخر عناصر المكدس leafmost function.
• التكلفة الذاتية Self Cost: تُحسب من التوقيت الذاتي على أساس نسبة مئوية للعدد الكلي من عينات القسم المحدد من التسجيل.

تمثِّل الأعمدة السابقة القيم الأهم في النسخة الحالية من الأداة Call Tree، ويُفضَّل إجراء تحسين للشيفرة انطلاقًا من الدوال التي تمتلك قيمة تكلفة ذاتية مرتفعة لأنها تستغرق وقتًا طويلًا في التنفيذ، أو لأنها تُستدعى بكثرة.

اقتباس

توضيح: يُعَدّ استخدام الصيغة المعكوسة للأداة Call Tree مفيدًا للتركيز على هذا النوع من الدوال أو على هذه القيم للتكلفة الذاتية.

تخبرنا أخيرًا لقطة الشاشة السابقة عن شيء ربما نعرفه بالفعل، وهو أنّ خوارزمية الفرز الفقاعي فعالة جدًا، فعدد العينات الملتقَطة في القسم الذي يسجل عملها يزيد 6 مرات عن عدد عينات القسم الذي يسجل عمل خوارزمية الفرز الانتقائي، و13 مرة عن خوارزمية الفرز السريع.

التنقل ضمن الأداة Call Tree

يوجد سهم صغير إلى جوار اسم كل دالة، وسترى عند النقر على هذا السهم مسار استدعاء هذه الدالة رجوعًا إلى بدايته، أي من الدالة التي التقطت العينة أثناء تنفيذها وحتى الدالة الجذرية، إذ يمكن مثلًا توسيع الدالة ()bubbleSort:

سيظهر المخطط البياني للاستدعاء كما يلي:

sortAll()

    -> sort()

        -> bubbleSort()

اقتباس

ملاحظة: على الرغم من أنّ التكلفة الذاتية للدالة ()sort هي 1.45% وهي مختلفة عن قيمة الدالة ()sort الموجودة في سطر مستقل في القائمة، فذلك يدل على أنّ بعض العينات قد التُقِطت داخل الدالة ()sort نفسها بدلًا من الدوال التي تستدعيها، وقد تلاحظ وجود عدة مسارات تعود من نقطة معينة إلى المستوى الأعلى، ولنحاول توسيع الدالة ()swap:

التُقِطت 253 عينة داخل الدالة ()swap، لكن يوجد مساران مختلفان يقودان إلى هذه الدالة، إذ تستخدِمها كلتا الدالتَين ()bubbleSort و()selectionSort، كما يمكننا ملاحظة أنّ 252 عينة من أصل 253 ضمن الدالة ()swap قد التُقِطت من مسار الدالة ()bubbleSort وعينةً واحدةً فقط من المسار الآخر. تشير هذه النتيجة إلى أنّ خوارزمية الفرز الفقاعي أقل فعاليةً مما نظن، فهي تتحمل في الواقع مسؤولية 252 عينة إضافية، أي حوالي 10% أخرى من التكلفة الكلية، كما يمكننا الحصول على المخطط البياني الكامل مع عدد العينات الموافق بمتابعة طريقة التحليل هذه:

sortAll()                         //    8

    -> sort()                     //   37

        -> bubbleSort()           // 1345

            -> swap()             //  252

        -> selectionSort()        //  190

            -> swap()             //    1

        -> quickSort()            //  103

            -> partition()        //   12

بيانات منصة العمل

سترى بعض الأسطر التي تحمل قيمًا مثل Gecko أو Input & Events وغيرها، بحيث تمثِّل الاستدعاءات الداخلية للمتصفح، كما تقدِّم لك بيانات هذه الأسطر معلومات قيمةً أيضًا، فقد لا تجد أية عينات تشير إلى مدى صعوبة تنفيذ شيفرة موقعك في المتصفح، وستجد في مثالنا 679 عينة مرتبطة بالقيمة Gecko، وهي ثاني أكبر مجموعة من العينات بعد عينات الدالة ()bubbleSort، فلنوسِّع إذًا معلومات Gecko:

تشيرالنتائج إلى أنّ مصدر 614 عينة من هذه العينات أو حوالي 20% من التكلفة الكلية هي من استدعاء الدالة ()sort، فإذا نظرنا إلى شيفرة هذه الدالة، فسنلاحظ بوضوح أنّ سبب التكلفة المرتفعة لعمل المنصة -أو مجهود المتصفح- هو الاستدعاء المتكرر للتابع ()console.log:

function sort(unsorted) {
  console.log(bubbleSort(unsorted));
  console.log(selectionSort(unsorted));
  console.log(quickSort(unsorted));
}

إذًا من الأفضل التفكير بطريقة أخرى لتنفيذ الأمر. لاحظ أيضًا أنّ زمن الخمول idle time يصنَّف على أساس Gecko، أي أنّ أقسام ملف الأداء التي لم تُنفَّذ أثناء تسجيلها أيّ شيفرة جافاسكربت أثناء التنفيذ ستصنف على أنها عينات Gecko، ولا يتعلق هذا التصنيف طبعًا بأداء الصفحة.

اقتباس

ملاحظة: لا تفصل الأداة Call Tree بيانات منصة العمل ضمن دوال مستقلة لما يسببه ذلك من تشويش لمستخدِم هذه البيانات وخاصةً لمن لا يستخدِم متصفح فايرفوكس، فإذا أردت معرفة تفاصيل أكثر، فعليك بتفعيل الخيار Show Gecko Platform Data ضمن الإعدادات.

الصيغة المعكوسة (المقلوبة) للأداة Call Tree

ببساطة هي صيغة ينعكس فيها ترتيب جميع المكدّسات، بحيث تكون آخر الدوال المستدعاة في قمة المكدس، وبهذه الطريقة سيركِّز عرض البيانات أكثر على معلومات التوقيت الذاتي للدوال Self Time، وبالتالي ستحصل على معلومات أكثر حساسية في شيفرتك، ولإظهار الأداة بالصيغة المعكوسة، انقر على أيقونة التبديل في أقصى يمين نافذة الأداء ثم اختر Invert Call Tree.

الأداة Flame Char

تعرض لك هذه الأداة حالة مكدس جافاسكربت كل ميلي ثانية أثناء تسجيل ملف الأداء، كما يتيح لك ذلك معرفة الدالة التي يجري تنفيذها في كل لحظة من لحظات التسجيل وزمن تنفيذها ومسار استدعائها، كما تُستخدَم الأداتين Call Tree وFlame Chart في تحليل شيفرة جافاسكربت في موقعك وتستخدمان البيانات ذاتها المتمثلة بعينات من المكدس الخاص بمحرك جافاسكربت الملتقَطة دوريًا أثناء تسجيل ملف الأداء.

ستعرض لك الأداة Flame Chart متى يجري تنفيذ دالة معينة خلال زمن التسجيل بينما تنظم الأداة Call Tree البيانات لعرض الدوال التي يقضي البرنامج وقتًا أكبر في تنفيذها، كما تعرض لك بصورة أساسية حالة مكدس الاستدعاء في أية لحظة من لحظات زمن التسجيل، وإليك لقطة شاشة تُظهر بيانات الأداة Flame Chart لشريحة من ملف الأداء:

يمكننا في البداية ملاحظة أننا اخترنا شريحةً صغيرةً من التسجيل لعرض بيانات Flame Chart لها ضمن لوحة النظرة العامة، لأن البيانات التي تقدمها هذه الأداة كثيرة وتصعب متابعتها، لذلك كان لا بد من تضييق نطاق العرض، كما يمثِّل المحور X في لقطة الشاشة السابقة الزمن، في حين تغطي هذه اللقطة الفترة الزمنية الممتدة بين اللحظة 1435 ميلي ثانية و1465 ميلي ثانية، وتتوزع أيضًا على امتداد المحور Y، الدوال الموجودة في مكدس الاستدعاء خلال هذه الفترة من الدوال الأعلى مستوى في الأعلى إلى أخفضها مستوًى في الأسفل، وصُنِّفت الدوال وفق نظام لوني ليسهُل التمييز بينها.

يمنحك هذا الأسلوب في عرض البيانات إمكانية معرفة الدالة التي يجري تنفيذها في أية لحظة خلال فترة التسجيل، والوقت المستغرَق في تنفيذها ومسار استدعائها.

تغيير مجال العرض وإزاحة الشرائح

ينبغي أن تكون قادرًا على التنقل بين البيانات المعروضة بسهولة لكي تستطيع العمل بفعالية أكبر، حيث تقدِّم الأداة Flame Chart وسيلتَي تحكم لهذا الغرض:

• Zoom (تغيير مجال العرض): لزيادة أو إنقاص مجال الشريحة المختارة من ملف التسجيل الكامل الذي يُعرَض ضمن الأداة Flame Chart، حيث تستطيع استخدام هذه الوسيلة كما يلي:

1. دحرجة دولاب الفأرة للأعلى والأسفل ضمن Flame Chart.
2. تحريك إصبعَين معًا للأعلى أو للأسفل على لوحة اللمس ضمن Flame Chart.

• Pan (التنقل بين الشرائح): إزاحة الشريحة التي اخترتها من ملف التسجيل الكامل يمينًا أو يسارًا، إذ تستطيع استخدام هذه الوسيلة كما يلي:

1. انقر على الشريحة المختارة ضمن لوحة النظرة العامة واسحبها بالاتجاه المطلوب.
2. انقر واسحب في أي مكان ضمن Flame Chart.

مثال تطبيقي

سنلقي نظرةً على مثال بسيط هو نفسه البرنامج الذي استخدمناه سابقًا لتتابع كيف ستكشف الأداة Flame Chart سلوك برنامجك ولتوضيح عمل الأداة Call Tree، كما سنستخدم ملف الأداء نفسه، فقد وجدنا أنُ تسلسل الاستدعاءات وتعداد العينات المقابل لكل منها في ملف الأداء هو كما يلي:

sortAll()                         //    8

    -> sort()                     //   37

        -> bubbleSort()           // 1345

            -> swap()             //  252

        -> selectionSort()        //  190

            -> swap()             //    1

        -> quickSort()            //  103

            -> partition()        //   12

اخترنا في البداية المقطع الذي كان البرنامج فيه مشغولًا بأكمله:

لاحظ وجود الدالة ()sortAll الملونة بالأرجواني في القمة، حيث يمتد زمن تنفيذها من بداية البرنامج حتى نهايته، وتأتي تحتها مباشرةً الدالة ()sort باللون الأخضر الزيتوني، ويليها تعاقب استدعاءات مثل أسنان المشط لكل خوارزمية من خوارزميات الفرز الثلاث، ولنقرِّب المشهد أكثر:

تمتد الشريحة مدة 140 ميلي ثانية وتعرض تفاصيلًا أكثر عن الدوال التي تستدعيها الدالة ()sort. لاحظ الشيفرة التي تكوّن الدالة ()sort:

function sort(unsorted) {
  console.log(bubbleSort(unsorted));
  console.log(selectionSort(unsorted));
  console.log(quickSort(unsorted));
}

تمثِّل العلامة التي يبدو عنوانها "…bubb" وملوّنةً بالأخضر الزيتوني الدالة ()bubbleSort، في حين تمثل العلامة الأخرى التي تبدو باللون الأخضر الصرف بقية دوال الفرز. لاحظ أنّ كتلة دالة الفرز الفقاعي ()bubbleSort ذات عرض أكبر -أي تمتد لفترة أطول- من البقية، كما يمكن ملاحظة مجموعة دوال تستدعيها الدالة ()bubbleSort وتبدو باللون الأرجواني، ولنقرّب المشهد مرة أخرى:

يساوي عرض الشريحة الأخيرة التي اخترناها حوالي 20 ميلي ثانية، وسنرى بوضوح أنّ العلامة الأرجوانية أسفل الدالة ()bubbleSort هي استدعاءات للدالة ()swap، فإذا أحصينا هذه الاستدعاءات، فسترى أنها 253 وفقًا للأداة Call Tree، كما تشير Call Tree إلى وقوع كل الاستدعاءات السابقة تحت الدالة ()bubbleSort ماعدا استدعاء وحيد يقع تحت الدالة ()selectionSort، كما يمكن أيضًا رؤية وجود علامتين خضراوين للدالتين ()selectionSort و()quickSort، وسنرى استدعاءات لمنصة العمل في الفترة ما بين استدعاءات دوال الفرز، كما من المرجح أن يكون سببها استدعاء الدالة ()console.log من داخل الدالة ()sort.

الأداة Allocations

تعرض لك الأداة Allocations الدوال التي تحجز مساحةً أكبر من الذاكرة خلال فترة تسجيل ملف الأداء، ويُعَدّ الأمر مهمًا من ناحية الأداء، لأن حجز مساحات كبيرة من الذاكرة أو إشغال مناطق كثيرة منها قد يؤدي إلى وقوع حدث تجميع الموارد المستهلكة garbage collection، والذي يؤثر بدوره سلبًا على استجابة الصفحة، كما تُعَدّ هذه الأداة جديدةً في فايرفوكس 46.

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

تشريح لوحة الأداة Allocations

تبدو اللوحة كما في الصورة التالية:

تأخذ الأداة عينات دوريًا من مساحات الذاكرة المحجوزة K بحيث يمثِّل كل صف دالةً أُخذِت عينة واحدة على الأقل من مساحة الذاكرة التي تحجزها أثناء تسجيل ملف الأداء، كما يضم جدول عرض البيانات الأعمدة التالية:

• Self Count العداد الذاتي: عدد عينات الحجز التي التُقِطت ضمن الدالة المحددة، وتُعرَض أيضًا على أساس نسبة مئوية من عدد العينات الكلي.
• Self Byte عدد البايتات الذاتي: العدد الكلي للبايتات الموجودة في عينة ملتقَطة داخل دالة، تُعرَض أيضًا على أساس نسبة مئوية من الكمية الكلية، كما تُرتَّب الأعمدة وفقًا لعدد البايتات الذاتي.

سنجد في مثالنا السابق ما يلي:

• تمثل العينات الملتقَطة في الدالة ()signalLater ما مقداره 28.57% من العدد الكلي للعينات البالغ 8904.
• تحجز هذه العينات 1102888 بايت، أي ما مقداره 30.01% من الذاكرة الكلية المحجوزة في جميع العينات.

سترى الأماكن التي تُستدعى منها كل دالة بالنقر على السهم الصغير بجوار اسمها:

لاحظ كيف استُدعيت الدالة ()signalLater من مكانين هما ()removeInner و()setSelectionInner،إذ ستتمكن الآن من الرجوع خطوةً ضمن المكدس لفهم سياق حجز الذاكرة بصورة أفضل.

التكلفة الذاتية والتكلفة الكلية

تعرض لك الأداة مجموعتين من الأعمدة يبدأ عنوان الأولى بالكلمة Self والثانية بالكلمة Total، إذ تسجِّل الأولى العينات الملتقَطة من دالة واحدة، بينما تسجِّل الثانية العينات الملتقَطة من هذه الدالة أو الدوال التي استدعتها هذه الدالة، كما ستتطابق هاتين المجموعتين بالنسبة للدوال التي تمثل قمة المكدس طالما أن الدوال الأخيرة في المكدس ستظهر في الأعلى، أي ما نراه هو صيغة معكوسة لمكدس الاستدعاء، لكن إذا بدأت التراجع إلى الخلف في المكدس، فسترى الفرق بين المجموعتين:

التقَطت الأداة 8904 عينةً في الدالة ()signalLater، لكن هذه الدالة قد استُدعيت من مكانين ()removeInner و()setSelectionInner، وتبدو قيمة العداد الذاتي لهما 0 بمعنى أنهما لا تحجزان مباشرةً أية ذاكرة، لكن قيمة العداد الكلي للدالة ()removeInner هي 8901 وقيمته للدالة ()setSelectionInner هي 3 فقط، أي أنّ معظم الحجوزات التي نراها في الدالة ()signalLater مصدرها الدالة ()removeInner.

حجز الذاكرة وتجميع الموارد المستهلكة

إنّ أية معلومات عن الذاكرة التي يحجزها موقع جديرة بالاهتمام، لكن الرابط الحقيقي بين استجابة موقع وكمية الذاكرة المحجوزة هو موضوع تجميع الموارد المستهلكة GC، كما يتحقق محرك التنفيذ من وجود كائنات مستهلكة لا يمكن الوصول إليها في كومة الذاكرة الخاص بالبرنامج في جميع اللغات التي تعتمد أسلوب تجميع الموارد المستهلكة مثل جافاسكربت، ثم يحرر الذاكرة التي تحجزها تلك الكائنات، وعند تنفيذ هذه العملية يتوقف محرك جافاسكربت مؤقتًا ويُعلَّق عمل البرنامج وتتوقف استجابته.

يُنفِّذ SpiderMonkey محرك جافاسكربت على فايرفوكس هذه العملية تصاعديًا بخطوات صغيرة لتخفيف هذا الأثر على الاستجابة، فيسمح باستمرارية عمل البرنامج ما بين هذه الخطوات، لكن لا بد في بعض الحالات من تنفيذ عملية تجميع موارد مستهلكة لا تصاعدي، وبالتالي على البرنامج الانتظار حتى نهاية العملية، كما تظهر أحداث تجميع الموارد المستهلكة باللون الأحمر في لوحة الأداة Waterfall، وقد تلاحظ رايات حمراء طويلة ترتبط بانعدام استجابة البرنامج قد تمتد فترة عدة مئات من الميلي ثانية.

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

إذا وقعت أحداث تجميع الموارد المستهلكة بسبب ضغوطات ناتجة عن حجز الذاكرة، فسيظهر في هذه الحالة رابطًا بعنوان عرض المسببات الناتجة عن حجز الذاكرة Show Allocation Triggers ضمن الشريط الجانبي إلى يمين نافذة الأداة Waterfall، فإذا نقرت على هذا الرابط، فستنتقل أدوات التطوير إلى عرض النافذة Allocations وستختار الفترة الزمنية الممتدة من نهاية آخر دورة لتجميع الموارد المستهلكة حتى بداية الدورة التي نقرت عليها، وسيعرض لك ذلك كل حجوزات الذاكرة التي أدت بمجموعها إلى وقوع حدث تجميع الموارد المستهلكة، فإذا واجهتك هذه المشكلة، فحاول إذا استطعت اختزال عدد أو حجم حجوزات الذاكرة:

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

ترجمة -وبتصرف- للمقالات التالية:

• Waterfall.
• Frame rate.
• Call Tree.
• Flame Chart.
• Allocations.

اقرأ أيضًا

• مراقبة وتحليل أداء صفحات الويب باستخدام الأداة Performance
• تحسين الظهور في محركات البحث

لعلك قد سمعت سابقًا بمصطلح مفتوح المصدر Open Source وكيف أن تلك البرمجية تتميز بأنها Open Source، ولكن هل تساءلت ماذا يعني أن برمجية ما Open Source، وكيف سيؤثر ذلك على مستقبل هذه البرمجية؟

في هذا الفيديو سنعرفك على معنى البرامج مفتوحة المصدر Open Source  ومالذي يميزها عن الأنواع الأخرى من البرامج.

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

يصف هذا المقال أداةً غايةً في الأهمية لتحليل أداء صفحات ويب فيما يتعلق بتنفيذ شيفرات HTML وCSS وجافاسكربت، وبالتالي سيكون المطوِّر قادرًا على تحديد النقاط السلبية في أداء الموقع والتي ستكون الهدف المناسب لعمليات التحسين والتطوير التالية.

نظرة سريعة على الأداة Performance

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

مكونات الأداة Performance

تقدِّم لك الأداة أربع أدوات جزئية لفحص ميزات ملف الأداء بتفاصيل أكثر:

• الأداة Waterfall: تعرض لك العمليات المختلفة التي ينفذها المتصفح مثل تنفيذ مخطط العمل وأداء جافاسكربت ومهام إعادة رسم الصفحة repaint وتجميع الموارد التي انتهى استخدامها Garbage Collection، أي ستساعدك في فهم ما ينفِّذه المتصفح عندما يتفاعل مع موقع ويب.
• الأداة Call Tree: تعرض دوال جافاسكربت التي تستغرق من المتصفح أكبر وقت في تنفيذها محددةً الاختناقات التي تحدث عند تنفيذ شيفرة جافاسكربت الخاصة بموقع الويب.
• الأداة Flame Chart: تعرض حالة مكدس استدعاءات جافاسكربت والدوال التي يجري تنفيذها ومتى خلال فترة تسجيل ملف الأداء.
• الأداة Frame Rate: تعرض حالة التجاوب العامة لموقعك مع مختلف الشاشات.
• الأداة Allocations: تعرض حالة كومة الذاكرة الناتج عن تنفيذ شيفرة جافاسكربت خلال زمن تسجيل ملف الأداء، ولن تظهر هذه الأداة إلا عندما تفعِّل خيار سجل حجوزات الذاكرة Record Allocations من خلال إعدادات الأداة Performance.

سيناريوهات استخدام الأداة Performance

يمكن استخدام أدوات جزئية محددة أو أكثر لمراقبة حالات محددة نذكر منها:

• متابعة الحركات الناتجة عن استخدام خصائص CSS: استخدم أداة Waterfall لفهم الآلية التي يُحدِّث فيها المتصفح صفحة ويب وتأثير الحركات التي تنتج عن تغير قيم خصائص CSS على الأداء.
• الاستخدام المكثَّف لجافاسكربت: استخدام الأداتين frame rate وWaterfall وللاطلاع على مشاكل الأداء الناتجة عن تنفيذ شيفرة جافاسكربت وكيف يساعد استخدام عمّال ويب web workers في حالات مثل هذه.

واجهة مستخدم الأداة Performance

تتألف واجهة المستخدِم من أربعة أقسام رئيسية:

• شريط الأدوات Toolbar.
• لوحة التسجيلات Recordings pane.
• لوحة نظرة عامة Recording overview.
• لوحة التفاصيل Details pane والتي قد تعرض أيًا من:
  • تفاصيل الأداة الجزئية Waterfall.
  • تفاصيل الأداة الجزئية Call Tree.
  • تفاصيل الأداة الجزئية Flame Chart.

شريط الأدوات

يضم شريط الأدوات أزررًا مهمتها ما يلي:

• تشغيل وإيقاف عملية تسجيل ملف الأداء.
• إدراج ملف أداء مخزن سابقًا.
• مسح لوحة السجلات، وانتبه أنك ستفقد أية سجلات غير مخزّنة إذا فعلت ذلك.
• ترشيح العلامات markers التي تُعرض عند استخدام الأداة الجزئية Waterfall.
• الانتقال بين تفاصيل الأدوات الجزئية في لوحة التفاصيل.
• الوصول إلى نافذة الإعدادات المنبثقة.

لوحة التسجيلات

تعرض هذه اللوحة جميع التسجيلات التي تحمّلها، بما في ذلك ما سجّلته في هذه الجلسة وما استوردته من تسجيلات سابقة.

يُعرَض تسجيل واحد فقط وتصطف بقية التسجيلات على هيئة قائمة ضمن الأداة، كما يمكنك اختيار أيّ تسجيل لعرضه بالنقر عليه؛ أما لتخزين التسجيل على صورة ملف JSON، فانقر على زر حفظ Save.

لوحة النظرة العامة

تعرض لمحة عامة عن التسجيل بأكمله مع الزمن الذي يمثله المحور X، كما تحوي اللوحة عنصرين هما لمحة عامة عن الأداة Waterfall ورسم بياني لمعدل الإطارات frame rate.

لمحة عامة عن الأداة Waterfall

تتضمن عرضًا مصغّرًا عن الأداة Waterfall وتُمثِّل العمليات المُسجَّلة وفق نظام لوني مشابه للمخطط المعتمد في الأداة Waterfall الرئيسية.

الرسم البياني لمعدل الإطارات

تعطيك لمحةً عامةً عن استجابة المتصفح خلال فترة التسجيل، كما يمكنك الاطلاع على المقال المكوّنات الرئيسية للأداة Performance لمعلومات أكثر.

ترابط الأحداث

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

نظرة أقرب إلى العرض

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

لوحة التفاصيل

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

الأداة Waterfall

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

الأداة Call Tree

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

الأداة Flame chart

تخبرك هذه الأداة عن حالة مكدس الاستدعاءات في كل لحظة من لحظات التسجيل.

الأداة Allocations

تشابه هذه الأداة الجديدة في فايرفوكس 46 الأداة Call Tree لكن لمواقع حجز الذاكرة، إذ تعرض لك الدوال التي تحجز ذاكرةً أكبر خلال فترة تسجيل ملف الأداء، ولن تظهر هذه الأداة إلا عندما تفعّل خيار سجِّل حجوزات الذاكرة Record Allocations من خلال إعدادات الأداة Performance.

لمعلومات أكثر عن الأدوات الجزئية اطلع على المقال المكوّنات الرئيسية للأداة Performance.

التعامل مع الأداة Performance

إليك بعض الإرشادات للتعامل مع الأداة Performance

تشغيل الأداة

لتشغيل الأداة:

• اضغط المفتاحين Shift + F5
• اختر Performance من القائمة الفرعية أدوات مطوري ويب Web Developer الموجودة ضمن قائمة فايرفوكس أو قائمة الأدوات Tools، وهذا إذا كنت تعرض شريط القائمة أو كانت على نظام ماك أو إس OS X.
• اختر Performance من زر الأدوات في شريط الأدوات إذا كان موجودًا على متصفحك.

تسجيل ملف أداء

انقر على أيقونة الساعة في لوحة التسجيلات لبدء التسجيل وانقرها مجددًا لإيقافه، كما يمكنك بدء وإيقاف التسجيل من خلال الأداة Web Console باستخدام الأمرَين ()console.profile و()console.profileEnd.

حفظ ملف أداء

انقر على الرابط الذي يحمل العنوان "حفظ Save" إلى جوار التسجيل في لوحة التسجيلات.

تحميل ملف أداء

انقر على زر استيراد Import ثم اختر الملف الذي تريد استيراده.

حذف جميع الملفات المدرجة

انقر على أيقونة سلة المهملات أو على زر Clear وانتبه إلى أنك ستفقد أية سجلات غير مخزّنة إذا فعلت ذلك.

اختيار أداة

انقر على الزر الموافق للأداة ضمن شريط الأدوات.

اختيار العلامات المعروضة

اضغط على زر المرشح Filter في شريط الأدوات لاختيار العلامات التي تريد إظهارها في الأداة Waterfall.

إلقاء نظرة أقرب على الأداء

اختر شريحةً محددةً من لوحة النظرة العامة للتسجيل وستعرض تفاصيل هذه الشريحة في لوحة التفاصيل.

ترجمة -وبتصرف- للمقالات التالية:

• ?What tools are available to debug and improve website performance.
• ?How to Open the Performance tools.
• UI Tour.

اقرأ أيضًا

• تحسين الظهور في محركات البحث
• HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك

يمكن لتطبيقات الويب استخدام نفس إمكانيات المشاركة التي توفرها التطبيقات المثبتة على نظام التشغيل platform-specific، وذلك باستخدام الواجهة البرمجية Web Share التي تعمل في الخلفية Web Share API، إذ تتيح هذه الواجهة لتطبيقات الويب إمكانية مشاركة الروابط والنصوص والملفات مع التطبيقات الأخرى المثبتة على الجهاز كما التطبيقات المخصوصة بالنظام (تطبيقات النظام الأصلية أو التطبيقات المثبتة في النظام).

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

المفاهيم والاستخدامات

تتيح الواجهة البرمجية Web Share مشاركة البيانات في تطبيقات الويب ضمن قدرات استخدامها ومحدودياتها، موضّح فيما يلي هذه القدرات كما مذكور أيضًا طريقة استخدام هذه الواجهة في مشاركة محتوى تطبيقات الويب.

القدرات والمحدوديّات

تمتلك الواجهة البرمجية Web Share القدرات والمحدوديّات التالية:

• يمكن استخدامها فقط في المواقع الآمنة، التي يُوصل إليها عبر بروتوكول HTTPS.
• يجب أن تُستدعى استجابةً لإجراء مستخدم مثل النقر click، إذ لا يمكن استدعائها من خلال معالج التحميل onload.
• يمكن بواسطتها مشاركة عناوين URL أو نصوص أو ملفات.
• أصبحت متاحة على متصفحات Safari و Android و Chrome OS و Chrome على Windows، اعتبارًا من يناير كانون الأول 2021، أما إتاحتها في Chrome على MacOS لا تزال قيد التطوير، اطلع على MDN للحصول على التفاصيل.

مُنتقي وُجْهة المشاركة على مستوى النظام مع تطبيق ويب تقدمي PWA مثبت كخيار للمشاركة إليه.

مشاركة الروابط والنصوص

إن أردت مشاركة الروابط والنصوص عبر الواجهة البرمجية Web Share، فاستخدم الدالة ()share، وهي دالة تعتمد على الوعد promise مع كائن خصائص properties مطلوب، ولمنع المتصفح من رمي خطأ TypeError، إذ يجب أن يحتوي ذلك الكائن على واحدة على الأقل من الخاصيات التالية: title أوtext أوURL أوfiles، مثلًا يمكنك مشاركة نص بدون عنوان URL أو العكس، وإتاحة إمكانية مشاركة الخصائص الثلاثة يؤدي إلى زيادة مرونة حالات الاستخدام.

تخيل أنه بعد تشغيل الشيفرة التالية، اختار المستخدم تطبيق بريد إلكتروني كوُجْهة مشاركة، فحينها يصبح المعامل title هو موضوع رسالة subject والمعامل text هو نص الرسالة والمعامل files يصبح هو مرفقات الرسالة.

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

إذا حوى موقعك على عناوين URL متعددة لنفس المحتوى، فشارِك عنوان URL الأساسي للصفحة بدلاً من عنوان URL الحالي، أي بدلاً من مشاركة document.location.href؛ يمكنك إيجاد عنوان URL الأساسي في وسم <meta> ضمن <head> الصفحة ومشاركته، فهذا سيوفر تجربة أفضل للمستخدم، ليس فقط على صعيد تجنب عمليات إعادة التوجيه، ولكنه يضمن أيضًا أن عنوان URL المشارك يخدم تجربة المستخدم الصحيحة لعميل معين، مثلًا إذا شاركك صديقك عنوان URL من هاتفه المحمول وفتحته عبر حاسوبك المكتبي، فيجب أن ترى إصدار سطح المكتب من الموقع او التطبيق المُشارك:

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

مشاركة الملفات

إذا أردت إتاحة ميزة مشاركة الملفات في تطبيقك، اختبر أولًا إمكانية المشاركة عبر استدعاء التابع ()navigator.canShare، ثم ضمِّن مجموعة من الملفات في استدعاء التابع ()navigator.share:

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

لاحظ أن المثال يعالج الكشف عن ميزة إمكانية المشاركة عبر التابع ()navigator.canShare بدلاً من التابع ()navigator.share.

كائن البيانات الممرر للدالة ()canShare في هذا المثال يدعم خاصية files فقط، لكن يمكن مشاركة ملفات الصور والفيديو والصوت والنص. (راجع امتدادات الملفات المسموح بمشاركتها حاليًا في Chromium).

دراسة حالة لبرنامج Santa Tracker

يعد Santa Tracker مشروعًا مفتوح المصدر، وهو تطبيق ترفيهي سنوي تحت عنوان عيد الميلاد أطلقته Google، يتيح للمستخدمين اللعب ومشاهدة وتعلم الأنشطة الصغيرة التي تُضاف يوميًا من بداية ديسمبر كل عام، كما يتيح تعقب السانتا (بابا نويل) أثناء عشية عيد الميلاد.

في عام 2016، استخدم فريق Santa Tracker الواجهة البرمجية Web Share على منصة Android، وكانت هذه الواجهة مناسبة تمامًا لتطبيقات الهاتف المحمول، على عكس الأعوام السابقة التي أزال الفريق فيها أزرار المشاركة من نسخة الهاتف المحمول لأن مساحة تلك الأزرار كانت كبيرة في الشاشة، ولم تكن قادرة على إثبات وجود العديد من التطبيقات لمشاركتها المحتوى.

لكن باستخدام الواجهة البرمجية Web Share تمكن فريق Santa Tracker من تقديم زر مشاركة واحد ويؤدي الغرض، مما يوفر مساحة ثمينة في الشاشة. توجه إلى Santa Tracker لمشاهدة فعاليِّة مشاركة الويب.

زر المشاركة في تطبيق Santa Tracker.

دعم المتصفحات

هناك فروقات دقيقة في دعم المتصفحات للواجهة البرمجية Web Share، ويوصَى باستخدام استراتيجية اكتشاف الميزات (كما هو موضح في نماذج الشيفرات السابقة) بدلاً من افتراض دعم دالة معينة.

دعم متصفحَي Safari و Chrome استخدام الواجهة Web Share لمشاركة العناوين والنصوص وعناوين URL بداية عام 2021 بالإصدارات التالية:

• Safari الإصدار 12 أو أحدث على macOS و iOS.
• Chrome الإصدار 75 أو أحدث على Android، والإصدار 89 أو أحدث على Chrome OS و Windows.

كما دعم المتصفحان استخدام الواجهة Web Share لمشاركة الملفات أيضًا، وذلك بالإصدارات التالية:

• Safari الإصدار أو أحدث على macOS وiOS.
• Chrome الإصدار 75 أو أحدث على Android، والإصدار 89 أو أحدث على Chrome OS و Windows.

تتمتع معظم المتصفحات المبنية على متصفح Chromium، مثل Edge، بنفس الدعم لميزة المشاركة مثل الإصدار المقابل من Chrome.

ترجمة -وبتصرف- للمقال Integrate with the OS sharing UI with the Web Share API من موقع web.dev

اقرأ أيضًا

• استقبال تطبيقات الويب التقدمية البيانات المشاركة عبر الواجهة البرمجية Web Share Target
• ما هي تطبيقات الويب التقدمية PWA
• جعل تطبيق الويب التقدمي PWA يبدو كتطبيق أساسي في نظام التشغيل
• إضافة اختصارات للمهام الشائعة في تطبيقات الويب التقدمية PWA

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

كان فقط بإمكان التطبيقات المثبتة على نظام التشغيل platform-specific التسجيل في نظام التشغيل لاستقبال البيانات المشاركة من التطبيقات المثبتة الأخرى، لكن باستخدام الواجهة البرمجية Web Share Target (وُجهة مشاركة الويب) التي تعمل في الخلفية Web share Target API، أصبح بإمكان تطبيقات الويب المثبتة على الجهاز أيضًا التسجيل مع نظام التشغيل كهدف مشاركة لاستقبال بيانات من التطبيقات الأخرى.

إمكانية استقبال تطبيقات الويب البيانات المُشاركة يُعد مكمّلًا لإمكانية تطبيقات أخرى على مشاركة البيانات، يمكنك مراجعة مقال مشاركة البيانات عبر الواجهة Web Share في تطبيقات الويب التقدمية.

تجريب الواجهة البرمجية Web Share Target

إن أردت تجريب الواجهة البرمجة Web Share Target، اتبع الخطوات التالية:

• افتح العرض التوضيحي لهذه الواجهة Web Share Target Demo وذلك على متصفح Chrome، بالإصدار 76 فما فوق على نظام أندرويد، أو 89 فما فوق على سطح المكتب.
• انقر زر المشاركة في العرض التوضيحي.
• اختر أحد التطبيقات الظاهرة في مُنتقي جهات المشاركة كوجْهة للمشاركة.

بعد إتمامك عملية المُشاركة، ستُشاهد النص المُشارَك في التطبيق الذي اخترته.

منتقي وجهة المشاركة على مستوى النظام.

تسجيل التطبيق كهدف مشاركة

يجب أن يستوفي تطبيقك معايير Chrome الخاصة بقابلية تثبيت التطبيقات لتسجيله كوجهة مشاركة، أيضًا حتى يتمكن المستخدم من مشاركة محتوى ما إلى تطبيقك، فيجب أن يكون تطبيقك مثبتًا في شاشته الرئيسية، فهذا يمنع المواقع من إضافة نفسها عشوائيًا إلى منتقي وُجهات المشاركة Share Target Picker المتاح للمستخدم مشاركة المحتوى إليها.

حدِّث ملف بيان موارد تطبيق الويب

لتسجيل تطبيقك كهدف مشاركة، أضف الخاصية share_target إلى ملف بيانه manifest، فهي تخبر نظام التشغيل بتضمين تطبيقك كخيار في منتقي وُجْهات المشاركة، وبشكل عام ما تضيفه إلى الخاصية share_target يضبط البيانات التي سيقبل تطبيقك أن تشارُكها.

هناك ثلاثة طرق شائعة لضبط الخاصية share_target:

• قبول محتوى المشاركة الأساسي.
• قبول بيانات مشاركة تُحْدِث تغييرات في التطبيق.
• قبول تشارُك الملفات.

قبول محتوى المشاركة الأساسي

إذا أردت لتطبيقك المحدد كوُجْهة مشاركة أن يقبل فقط محتوى المشاركة الأساسي مثل البيانات والروابط والنصوص، فأضف ما يلي إلى ملف بيانه manifest.json:

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

إذا كان تطبيقك يتيح المشاركة بواسطة بروتوكول عنوان URL Scheme، وكان يستخدم القيمة body للحقل text بدلاً من القيمة text، يمكنك استبدال text": "text"‎" في الشيفرة السابقة بالقيمة "text": "body".

النوع الافتراضي لنوع طلبية http والمعبر عنه بالحقل method هو "GET". يشير حقل enctype غير الظاهر في الشيفرة السابقة إلى نوع تشفير البيانات، يعيَّن هذا الحقل بالقيمة "application / x-www-form-urlencoded" افتراضيًا عندما تكون الطريقة هي "GET".

قبول بيانات مشاركة تُحْدِث تغييرات في التطبيق

إذا كانت البيانات المشاركة تُحدِثْ تغييرات في التطبيق الوجْهة بطريقة ما، مثلًا تحفظ إشارات مرجعية فيه، وقتها عيّن الحقل method بالنوع "POST" واضبط الحقل enctype.

يُنشئ المثال التالي إشارة مرجعية في التطبيق الوُجْهة، لذا فإنه يستخدم "POST" للحقل method و القيمة "multart/form-data" للحقل enctype:

{
  "name": "Bookmark",
  "share_target": {
    "action": "/bookmark",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

قبول مشاركة الملفات

كما هو الحال مع البيانات المُشاركة التي تُحْدِث تغييرات في التطبيق، يتطلب قبول مشاركة الملفات أن تكون طريقة المشاركة method هي "POST" وأن يكون نوع enctype هو "multipart/form-data"، ويجب إضافة الحقل files، التي تمثل مصفوفة أنواع الملفات التي يقبلها تطبيقك، عناصر المصفوفة عبارة عن كائنات مكونة من حقلين: name وaccept. يمثل حقل accept نوع MIME للملف أو إمتداده أو مصفوفة تحتوي كليهما. يفضّل توفير مصفوفة تتضمن كلاً من نوع MIME وامتداد الملف لاختلاف أنظمة التشغيل في ما تفضِّل منهما.

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "records",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "graphs",
          "accept": "image/svg+xml"
        }
      ]
    }
  }
}

معالجة المحتوى المشارك

طريقة التعامل مع البيانات المُشارَكة أمر متروك لك ويعتمد على تطبيقك، مثلًا:

• يمكن لتطبيق البريد الإلكتروني، صياغة بريد إلكتروني جديد من المحتوى المشارَك، باستخدام العنوان title كموضوع للبريد الإلكتروني، والنص المُشارك text والرابط url متسلسلَين معًا كجسم لرسالة البريد.
• يمكن لتطبيق تواصل إجتماعي صياغة منشور جديد من المحتوى المشارَك، بتجاهل العنوان title، والاستفادة من text كنص للمنشور، وإضافة url كرابط للمنشور أو حتى كنص أساسي وذلك إذا كان text مفقود، وإذا كان url مفقودًا، فقد يفحص التطبيق النص text بحثًا عن أي عنوان URL ويضيفه كرابط.
• يمكن لتطبيق مشاركة الصور إنشاء عرض شرائح جديد من المحتوى المشارَك، باستخدام العنوان title كعنوان لعرض الشرائح و النص text كوصف للعرض والملفات files (ملفات الصور) كشرائح تتحرك في العرض.
• يمكن لتطبيق الرسائل النصية صياغة رسالة جديدة من المحتوى المشارَك وذلك باستخدام النص text وurl متسلسلَين معًا كنص للرسالة وتجاهل العنوان title.

معالجة مشاركات GET

إذا اختار المستخدم تطبيقك كوُجْهة مشاركة، وكانت طريقة المشاركة method في تطبيقك هي "GET" (الافتراضية)، يفتح المتصفح نافذة جديدة على عنوان URL بقيمة الحقل action ضمن الخاصية share_target، ويولِّد المتصفح بعدها استعلامًا نصيًا بسيطًا، مثلًا إذا كان التطبيق المشارِك يوفر عنوان title ونص text بقيم معينة، فإن سلسلة الاستعلام التي يولّدها المتصفح ستكون ?title=hello&text=world. ولمعالجة هذا الاستعلام، استخدم مستمع الحدث DOMContentLoaded (يحصل هذا الحدث عند الانتهاء من تحميل المستند وبناء DOM) في الواجهة الأمامية foreground وحلِّل نص الاستعلام:

window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location);
  // searchParams.get() will properly handle decoding the values.
  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});

تأكد من استخدام عامل الخدمة لتخزين صفحة الإجراء action مؤقتًا بحيث تُحمَّل بسرعة وتعمل بموثوقية، حتى إن لم يكن المستخدم متصلًا بالشبكة.

يمكن أن تساعدك الأداة Workbox في تنفيذ تخزين مؤقت مسبق preaching بالاستفادة من عامل خدمة تطبيقك.

معالجة مشاركات POST

إذا كانت طريقة المشاركة method في تطبيقك هي "POST"، أي كان تطبيقك يقبل بيانات مُشاركة تُحْدِث تغييرات فيه أو يقبل تشارُك ملفات، فسيحتوي جسم طلب POST الوارد على البيانات التي مرَّرها التطبيق المُشارِك، والمشفرة باستخدام قيمة enctype المعيّنة في ملف البيان.

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

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === 'POST' &&
      url.pathname === '/bookmark') {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const link = formData.get('link') || '';
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })());
  }
});

التحقق من المحتوى المُشارَك

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

مثلًا يبقى حقل الرابط url فارغًا في نظام Android كما ترى في الصورة التالية، كونه غير مدعوم في نظام مشاركة Android، فغالبًا ما تظهر عناوين URL في حقل النص، أو أحيانًا في حقل العنوان.

معالجة المحتوى المشارَك في التطبيق الوجهة.

دعم المتصفحات

دعَم متصفحَي Chrome وEdge الواجهة البرمجية Web Share Target اعتبارًا من أوائل عام 2021 على النحو التالي:

• الإصدار 76 فما فوق من كلا المتصفحين (Chrome وEdge) على نظام Android
• الإصدار 89 فما فوق من Chrome على نظام Chrome OS.

تذكر بالنسبة لجميع أنظمة التشغيل الأساسية، أنه يجب تثبيت تطبيق الويب حتى يظهر كهدف محتمل لاستقبال البيانات المُشاركة.

ترجمة -وبتصرف- للمقال Receiving shared data with the Web Share Target API من موقع web.dev

اقرأ أيضًا

• ما هي تطبيقات الويب التقدمية PWA
• ميزات تطبيق الويب التقدمي
• مشاركة تطبيقات الويب التقدمية البيانات عبر الواجهة Web Share
• إضافة اختصارات للمهام الشائعة في تطبيقات الويب التقدمية PWA
• مفهوم Service Worker وتأثيره في أداء وبنية مواقع وتطبيقات الويب

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

ستتعلم من هذا المقال كيفية تعيين اختصارات للتطبيقات، مع بعضٍ من أفضل الممارسات الممكن اتباعها لرفع مستوى هذه الاختصارات.

نبذة عن اختصارات التطبيق

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

تُستدعى قائمة اختصارات التطبيق عن طريق النقر بزر الفأرة الأيمن على أيقونة التطبيق في شريط مهام نظام Windows أو شريط Dock في نظام macOS لبيئة سطح المكتب، أو الضغط لفترة طويلة على أيقونة مشغل التطبيق في نظام Android.

قائمة اختصارات التطبيق في Android.

قائمة اختصارات التطبيق في Windows.

تظهر قائمة اختصارات التطبيقات فقط لتطبيقات الويب التقدمية PWAs المثبتة على سطح مكتب أو جهاز المستخدم المحمول.

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

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

تحديد اختصارات التطبيق في بيان تطبيق الويب manifest

تُحدَّد اختصارات التطبيقات اختياريًا في ملف بيان موارد تطبيق الويب manifest، والذي هو عبارة عن ملف JSON يخبر المتصفح عن تطبيق الويب التقدمي PWA وكيف يجب أن يتصرف عند تثبيته على حاسوب المستخدم المكتبي أو جهازه المحمول، وتُعرَّف اختصارات التطبيقات في مصفوفة shortcuts بالتحديد ضمن هذا الملف كما في المثال التالي:

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

كل عضو في مصفوفة الاختصارات shortcuts هو كائن اختصار يتكون على الأقل من حقل الاسم وعنوان url، أما الحقول الأخرى فهي اختيارية.

• حقل الاسم name: التسمية الممكن للمستخدمين قراءتها لاختصار التطبيق.
• حقل الاسم المختصر short_name (اختياري): التسمية الممكن للمستخدمين قراءتها لاختصار التطبيق عندما تكون المساحة محدودة، ويوصى بتعيين هذا الحقل حتى لو كان اختياريًا.
• حقل الوصف description (اختياري): الغرض من اختصار التطبيق.
• حقل عنوان URL: عنوان URL الذي يُفتح عندما ينقر المستخدم على اختصار التطبيق، ويجب أن يكون عنوان URL هذا موجودًا في نطاق بيان تطبيق الويب.
• حقل الأيقونات icons (اختياري): مصفوفة من كائنات الصور، يتكون كل كائن منها خاصية src وsize بشكل أساسي، بالإضافة للخاصية الإختيارية type.

إذا كنت تريد تعيين أيقونات مثالية الحجم، فاجعلها بالحجم الموصى به 48dp، والذي يتوافق مع كثافات القياسات التالية بوحدة البكسل بناء على معادلة التحويل التالية:

px = dp * (dpi / 160)

• في الشاشات منخفضة الكثافة ldpi والتي تكافئ 120 dpi، الحجم 48dp يساوي 48*0.75=36px
• في الشاشات متوسطة الكثافة mdpi والتي تكافئ 160 dpi، الحجم 48dp يساوي 48px (نفسه)، أي يكون حجم الأيقونة 48x48 بكسل
• في الشاشات عالية الكثافة hdpi والتي تكافئ 240 dpi، الحجم 48dp يساوي 48*1.5=72px، أي يكون حجم الأيقونة 72x72 بكسل
• في الشاشات عالية الكثافة جدًا xhdpi والتي تكافئ 320 dpi، الحجم 48dp يساوي 48*2=96px، أي يكون حجم الأيقونة 96x96 بكسل
• في الشاشات عالية الكثافة جدًا جدًا xxhdpi والتي تكافئ 480 dpi، الحجم 48dp يساوي 48*3=144px، أي يكون حجم الأيقونة 144x144 بكسل
• في الشاشات عالية الكثافة جدًا جدًا جدًا xxxhdpi والتي تكافئ 640 dpi، الحجم 48dp يساوي 48*4=192px، أي يكون حجم الأيقونة 192x192 بكسل

اختبر اختصارات تطبيقك

للتحقق من تعيين اختصارات التطبيق بشكل صحيح، استخدم قائمة Manifest في لوحة Application في أدوات المطور DevTools.

تظهر الصورة اختصارات التطبيقات في DevTools

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

أفضل الممارسات

فيما يلي نصائح بمارسات يوصى اتباعها لزيادة كفاءة اختصارات تطبيقك.

طلب اختصارات التطبيق حسب الأولوية

يفضَّل تعيين اختصارات التطبيقات حسب الأولوية، وذلك بوضع اختصارات التطبيقات الأكثر أهمية في بداية مصفوفة الاختصارات shortcuts ضمن ملف mainfest، نظرًا لأن الحد الأقصى لعدد الاختصارات التي تظهر في قائمة اختصارات التطبيق يختلف باختلاف نظام التشغيل.

مثلًا يتيح Chrome وEdge حتى 10 اختصارات للتطبيق في نظام Windows، بينما يأخذ Chrome في الاعتبار أول 4 اختصارات للتطبيق فقط في نظام Android، ويسمح متصفح Chrome 92 الآن بثلاث اختصارات للتطبيقات فقط على نظام Android 7

استخدم أسماء اختصارات فريدة للتطبيق

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

قياس استخدام اختصارات التطبيق

يمكنك تعقب عناوين (الخاصية url) اختصارات تطبيقك لأغراض إحصائية، مثلًا لقياس مدى استخدام مستخدمي تطبيقك تلك الاختصارات.

دعم المتصفحات

يدعم متصفحَي Chrome وEdge اختصارات تطبيقات الويب التقدمية على النحو التالي:

• الإصدار 84 فما فوق من Chrome على نظام Android.
• الإصدار 85 فما فوق من كلا المتصفحين (Chrome وEdge) على نظام Windows.
• الإصدار 92 فما فوق من Chrome على نظام Chrome OS.
• الإصدار 96 فما فوق من كلا المتصفحين (Chrome وEdge) على نظامَي MacOS ولينكس Linux.

دعم فاعليِّة الويب الموثوق

فاعليِّة الويب الموثوق Trusted Web Activity هو طريقة لتغليف تطبيق الويب التقدمي بحاوية container تجعله يتصرف كتطبيقات الهواتف المعيارية.

تقرأ الأداة Bubblewrap المستخدمة لإنشاء تطبيقات Android باستخدام فاعليِّة الويب الموثوق، اختصارات تطبيق الويب من ملف بيانه manifest، وتولِّد تلقائيًا الإعدادات المقابلة لها لتطبيق Android.

لاحظ عند استخدام Bubblewrap أنه يجب تحديد أيقونات لاختصارات التطبيقات وبحجم لا يقل عن 96×96 بكسل.

أداة باني تطبيق الويب التقدمي PWABuilder تحوِّل تطبيق الويب التقدمي بسهولة إلى فاعليِّة ويب موثوق، وتدعم اختصارات التطبيقات.

نموذج

راجع نموذج اختصارات التطبيق ومصدره.

ثبت تطبيق PWA هذا وجرب اختصاراته.

ترجمة -وبتصرف- للمقال Get things done quickly with app shortcuts من موقع web.dev

اقرأ أيضًا

• ما هي تطبيقات الويب التقدمية PWA
• ميزات تطبيق الويب التقدمي
• جعل تطبيق الويب التقدمي PWA يبدو كتطبيق أساسي في نظام التشغيل
• التحسين التدريجي لتطبيقات الويب التقدمية PWA
• شرح ملف البيان manifest لتطبيق الويب التقدمي PWA

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

وسننفذ في هذا المشروع ما يلي:

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

وذلك لنحصل على النتيجة التالية: انقر على الكائنات لتشاهد ما الذي ستفعله؟ جرب النقر على أحد الكائنات ثم النقر بسرعة بعدها على كائن آخر، ما الذي سيحدث؟

تذكر أن الشخصيات والأغراض في سكراتش تدعي كائنات أو Sprites باللغة الانجليزية، وتظهر على المنصة.

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

إعداد المشهد

سنعمل في هذه الخطوة على إعداد مشهد المشروع بإضافة كائن فضائي وخلفية فضائية!

يمكنك العمل مباشرةً على نسخة المتصفح من سكراتش باستخدام الإنترنت أو العمل على نسخة سطح المكتب من برنامج سكراتش بدون استخدام الإنترنت.

تبدو واجهة محرر سكراتش كما يلي:

يُشغل المشروع في المنصة عند النقر على زر العلم الأخضر، ونستخدم الخلفيات لتغيير مظهر المنصة.

أولًا، اضغط على رمز اختيار خلفية من قائمة المنصة الموجود في الزاوية السفلية اليسرى:

ثانيًا، اختر إحدى الخلفيات الموجودة في تصنيف خارجي، أو اكتب Space في مربع البحث، واختر الخلفية التي تعجبك:

انقر على الخلفية التي اخترتها لإضافتها لمشروعك، ولاحظ تغير شكل المنصة:

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

رابعًا، انقر على أيقونة اختيار كائن:

خامسًا، اختر تصنيف عالم الخيال ثم انقر على الكائن بيكو، أو اكتب Pico في مربع البحث للعثور عليه بسرعة:

سادسًا، ضع بيكو في المكان الذي تراه مناسبًا على المنصة. وضعناه في مشروعنا في الزاوية اليسرى من المنصة:

احفظ المشروع

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

ثم اكتب اسم المشروع في مربع الاسم أعلى الشاشة، وننصح بتسمية المشروع باسم مناسب يعبر عنه:

انقر على علامة تبويب ملف ثم انقر على خيار الحفظ إلى حاسوبك:

إذا كنت متصلًا بالإنترنت وتملك حسابًا على موقع سكراتش سيظهر لك خيار الحفظ الآن.

إلقاء التحية

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

أولًا، انقر على كتل الهيئة لعرض قائمة الكتل، ثم انقر على كتلة (قُل السلام عليكم) لمدة 2 ثانية:

لاحظ أن بيكو سيلقي علينا التحية لمدة ثانيتين:

ثانيًا، اسحب كتلة (قُل السلام عليكم) لمدة 2 ثانية إلى مكان إضافة الكتل البرمجية ثم انقر عليها ثانيةً، ولاحظ أنها سوف تُحدد باللون الأصفر:

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

ثالثًا، اسحب كتلة عند النقر على الكائن من كتل الأحداث وضعها قبل كتلة (قُل السلام عليكم)، ولاحظ أن الكتل سوف تلتصق ببعضها:

يمكنك إضافة تعليق على الكتل لشرح عملها:

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

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

إضافة الصوت

سنضيف في هذه الخطوة وسيلةً أخرى للتواصل باستخدام الأصوات:

أولًا، انقر على علامة تبويب الأصوات وستجد الصوت Pop مضافًا إلى الكائن بيكو، انقر على أيقونة التشغيل لسماع الصوت:

ثانيًا، انقر على أيقونة اختيار صوت الموجودة في الزاوية اليمنى لإضافة أحد أصوات الكائنات الفضائية الموجودة في تصنيف الفضاء:

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

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

تأكد من اختيار الصوت الذي أضفته من النافذة المنزلقة لكتلة ابدأ الصوت:

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

تغيير مظهر الكائن

سنعمل في هذه الخطوة على تغيير مظهر الكائن بيكو. كما يمكن استخدام المظاهر وتغييرها لتحريك الكائنات.

أولًا، أضف الكائن نانو من تصنيف خيال:

ثانيًا، انقر على الكائن الجديد من قائمة الكائنات لاختياره:

ثالثًا، انقر على علامة تبويب المقاطع البرمجية وأضف كتلة (قُل) و كتلة (تغيير المظهر)، من كتل الهيئة ذات اللون البنفسجي:

رابعًا، انقر على الكائن نانو على المنصة وتحقق من ظهور مربع الحوار ومن تغير مظهره.

جعل الكائن يستخدم لغة الإشارة

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

أولًا، انقر على الكائن نانو، ثم انتقل إلى علامة تبويب المظاهر لعرض المظاهر الخاصة بالكائن:

ثانيًا، انقر على المظهر nano-b، ثم حدد إحدى يدي الكائن باستخدام أداة التحديد التي لها شكل السهم، ثم اضغط على أداة الحذف أو مفتاح Delete من لوحة المفاتيح:

سيبدو المظهر بعد الحذف كما يلي:

تذكر أنه يمكنك التراجع عن أي خطوة بالضغط على رمز التراجع التالي:   وفي الخطوة الموالية الثالثة، انسخ اليد اليمنى من المظهر nano-c، وذلك بالنقر عليها لتحديدها ثم النقر على خيار النسخ:

رابعًا، انتقل إلى المظهر nano-b وانقر على خيار اللصق، سيبدو الشكل كما يلي:

خامسًا، انقر على الكائن نانو على المنصة وتحقق من ظهور مربع الحوار ومن تغير مظهره ليلقي علينا التحية باستخدام لغة الإشارة.

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

تغيير لون الكائن

سنضيف في هذه الخطوة كائنًا جديدًا ونستخدم كتل الهيئة لتغيير لون الكائن وإظهار ما يفكر به!

أولًا، أضف الكائن جيغا Giga من مكتبة الكائنات وضعه في الزاوية اليمنى للمنصة.

ثانيًا، أضف الكتل التالية لتغيير لون الكائن وإظهار ما يفكر به:

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

رابعًا، عدل على النص والمدة الزمنية في كتلة (فكر)، في مثالنا جعلنا الكائن جيغا يرحب بالكائن نانو.

أخيرًا، انقر على الكائن جيغا على المنصة وتحقق من ظهور مربع الحوار ومن تغير لون الكائن.

اختبر معلوماتك

انعش ذاكرتك واختبر معلوماتك بالإجابة عن الأسئلة التالية:

1. السؤال الأول: من أين يمكننا إضافة كائن جديد على المشروع؟ (حاول تذكر ما تعلمناه قبل الإطلاع على الإجابة أدناه)
   • الإجابة الصحيحة: من قائمة الكائنات بالنقر على أيقونة إضافة كائن.
2. السؤال الثاني: أين نجد الكتل التي تمكننا من إضافة مربع حوار على الكائن؟
   • الإجابة الصحيحة: من كتل الهيئة ذات اللون البنفسجي.

ترقية المشروع

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

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

ختامًا

بهذا تكون قد أتممت مشروع إنشاء مشهد فضائي باستخدام برنامج سكراتش.

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

ترجمة -وبتصرف- للمقال Space Talk من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

تطبيقات الويب التقدمية PWA هي تطبيقات حديثة، عالية الجودة تُبنَى باستخدام تقنيات الويب. تقدم تطبيقات الويب التقدمية إمكانيات مماثلة لتطبيقات iOS والأندرويد وسطح المكتب، فهي تطبيقات موثوقة حتى في الشبكات غير المستقرة، وتتميز بقابلية التثبيت مما يُسهل على المستخدمين العثور عليها واستعمالها.

كان تثبيت التطبيق في الماضي ممكنًا فقط في التطبيقات المخصصة للنظام، أما اليوم فتقدم تطبيقات الويب التقدمية PWA تجرِبة قابلة للتثبيت توفر نفس المستوى من التكامل والموثوقية مثل التطبيقات المخصصة للنظام.

يمكنك القيام بذلك بطرق عدة:

• تثبيت تطبيقات الويب التقدمية من المتصفح.
• تثبيت تطبيقات الويب التقدمية من متجر التطبيقات.

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

لماذا عليك أن تجعل تطبيق الويب الخاص بك قابلا للتثبيت؟

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

امتلاك تطبيق ويب تقدمي بالإضافة للتطبيق المخصص للنظام قد يكون أمرا مربكا للمستخدمين، قد يكون التطبيق المخصص للنظام خيارا أفضل لبعض المستخدمين، ويمكن أن يكون خيارا سيئا للبعض الآخر:

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

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

إن كانت نسبة هذه الشريحة كبيرة، فأنت بحاجة لتوفير طرق تثبيت بديلة.

متطلبات جعل تطبيق الويب التقدمي قابلا للتثبيت

لدى أغلب المستخدمين تجربة مع التطبيقات القابلة للتثبيت، تظهر التطبيقات المثبتة في نظام التشغيل مثل أندرويد ونظام iOS في الشاشة الرئيسية وفي مجلد التطبيقات في Mac OS X وقائمة البداية في ويندوز، وتظهر أيضا في التطبيقات المشغلة ويمكن التبديل بينها في قائمة التطبيقات النشطة، وتظهر أيضا في محرك بحث النظام ولائحة المشاركة في التطبيقات.

تخبرك أغلب المتصفحات بأن تطبيق الويب التقدمي الخاص بك قابل للتثبيت عند استيفاء شروط التثبيت، كمثال قد يكون المؤشر عبارة عن زر تثبيت في شريط العناوين، أو عنصر تثبيت في قائمة.

المتصفح يقترح تثبيت تطبيق الويب التقدم (حاسوب مكتبي)

المتصفح يقترح تثبيت تطبيق الويب التقدم (هاتف)

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

معايير تثبيت تطبيق الويب التقدمي

يحتاج تطبيق الويب التقديمي الخاص بك إلى استيفاء الشروط التالية قبل إطلاق حدث beforeinstallprompt وعرض مؤشر طلب التثبيت من المستخدم:

• أن لا يكون التطبيق مثبتًا بالفعل.
• أن يكون المستخدم قد تفاعل وفقًأ لإرشادات محددة.
• مستضافًا باتصال آمن HTTPS.
• يحتوي التطبيق على ملف البيان web app manifest ضبطت فيه القيم التالية:
• خاصية short_name أو name
• خاصية icons تحتوي أيقونة بحجم 192px و 512px
• الخاصية start_url
• الخاصية display تتضمن إحدى هذه الخيارات fullscreen أو standalone أو minimal-ui
• الخاصية prefer_related_applications يجب أن تكون محددة أو معطلة باستعمال false
• تسجيل منجز خدمة service worker باسم fetch

تمتلك متصفحات أخرى معايير مشابهة، وقد تمتلك اختلافات بسيطة، تحقق من المواقع التالية للحصول على التفاصيل أوضح:

• Edge.
• Firefox.
• Opera.
• Samsung Internet.
• UC Browser.

اقتراح تثبيت تطبيق الويب التقدمي الخاص بك من خلال المتصفح

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

قد يكون من المفيد الترويج لتثبيت تطبيق الويب التقدمي الخاص بك أيضا إذا لم يكن التطبيق المخصص للنظام يدعم الشاشات الأكبر حجمًا بشكل جيد، مثل نظام التشغيل Chrome.

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

الترويج لتثبيت تطبيق الويب التقدمي

تعلمك أغلب المتصفحات عند استيفاء شروط التثبيت بأن تطبيق الويب التقدمي الخاص بك قابل للتثبيت، كمثال قد يكون المؤشر زر تثبيت في شريط العناوين، أو عنصر تثبيت في قائمة كما وضحنا في الصورة السابقة.

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

تأثير اقتراحات التثبيت سلبًا على معدل التثبيت

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

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

اقتباس

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

بعد ذلك، يمكن تنفيذ ذلك بالطريقة التالية:

1. عرض لافتة تثبيت التطبيق المخصص للنظام.
2. إذا تجاهل المستخدم الإشعار، احفظ هذه المعلومة بتخزينها في ملف تعريف الارتباط (مثلا document.cookie = "app-install-banner=dismissed"‎).
3. استخدام مِلَفّ تعريف ارتباط آخر لتتبع عدد زيارات المستخدم للموقع كمثال: document.cookie = "user-visits=1"‎.
4. عرف دالة تستخدم المعلومات السابقة لتحديد إن كان المستخدم موجها لتطبيق الويب التقدمي كمثال: isPWAUser()‎ واستخدم ()getInstalledRelatedApps لمعرفة إن كان التطبيق مثبتا لتقرر إن كان المستخدم هو مستخدم تطبيق ويب تقدمي.
5. الآن يمكنك فقط استدعاء الدالة isPWAUser()‎ واعتمادا على ذلك أظهر زر طلب تثبيت تطبيق الويب التقدمي.

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

يمكن بناء التطبيقات المتوفرة على متجر التطبيقات بتقنيات مختلفة، من ضمنها تطبيقات الويب التقدمية، فسنعمل في هذا الجزء على تصنيف تطبيقات المتجر إلى مجموعتين:

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

الترويج للتطبيقات الخفيفة

حسب دراسة أعدها Google Play، فإنه لكل 6 ميغابايت تضاف في حجم ملف APK ، ينخفض معدل التثبيت بنسبة 1٪. يعني ذلك أن معدل اكتمال التنزيل لتطبيق 10 ميغابايت يمكن أن يكون أعلى تقريبا بنسبة 30٪ من تطبيق حجمه 100 ميغابايت. لحل هذا المشكل، تقدم بعض الشركات تطبيقات ويب متقدمة PWA الخاصة بها كحل لتوفير إصدار خفيف من تطبيقاتها على متجر Google Play وذلك باستخدام ما يسمى أنشطة الويب الموثوقة TWA. إذ تتيح أنشطة الويب الموثوقة القدرة على توفير تطبيق الويب التقدمي على جوجل بلاي، ولأنه مصمم باستخدام تقنيات الويب، فإن حجم التطبيق لا يتجاوز بضعة ميغابايتات. قامت شركة Oyo وهي إحدى أكبر شركات الحجز في الهند، ببناء إصدار خفيف من تطبيقها وجعلته متاحًا في متجر Google Play باستخدام أنشطة الويب الموثوقة TWA. يبلغ حجم التطبيق الخفيف 850 كيلوبايت فقط، أي ما يقارب 7٪ من حجم تطبيق Android المخصص للنظام. ويتميز بأنه عند تثبيته لا يمكن التمييز بينه وبين تطبيق Android للنظام الأصلي.

تطبيق شركة Oyo باستعمال تقنية أنشطة الويب الموثوقة TWA

احتفظت شركة Oyo بكلا التطبيقين تاركة القرار للمستخدم لاختيار ما يناسبه.

توفير تطبيق ويب خفيف

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

يمكن الحصول على معلومات الجهاز ثم تقسيمها لفئات (على سبيل المثال أجهزة "قوية" أو "متوسطة" أو "ضعيفة"). يمكنك الحصول على هذه المعلومات بطرق مختلفة، إما باستخدام واجهات تطبيقات جافاسكربت البرمجية JavaScript APIs أو تلميحات العميل.

باستعمال واجهات تطبيقات جافاسكربت البرمجية

يمكنك الحصول على معلومات حول معالج الجهاز والذاكرة وحالة الشبكة باستعمال واجهات تطبيقات جافاسكربت البرمجية navigator.hardwareConcurrency و navigator.deviceMemory و navigator.connection. على سبيل المثال:

const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`

باستخدام تلميحات العميل

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

أولاً، قم بإعلام المتصفح أنك تريد تلقي تلميحات عن ذاكرة الجهاز في ترويسة استجابة http:

HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory

ستبدأ بعدها بتلقي معلومات ذاكرة الجهاز في ترويسة طلبيات HTTP:

GET /main.js HTTP/1.1
Device-Memory: 0.5

يمكنك استخدام هذه المعلومات في الخادم لتخزين ملف تعريف ارتباط يتضمن جهاز المستخدم:

app.get('/route', (req, res) => {
  // تحدد فئة الجهاز

 const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';

  // ضبط ملف تعريف الإرتباط
  res.setCookie('Device-Category', deviceCategory);
  …
});

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

if (isDeviceMidOrLowEnd()) {
   // ‫أظهر إشعار طلب تثبيت التطبيق الخفيف PWA 
} else {
   // أظهر إشعار طلب تثبيت التطبيق التطبيق الرئيسي
}

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

الختام

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

ترجمة -وبتصرف- للمقال How to define your install strategy‎ والمقال What does it take to be installable? لصاحبيه Demian Renzulli و Pete LePage.

اقرأ أيضًا

• ميزات تطبيق الويب التقدمي PWA
• جدوى الاعتماد على تطبيقات الويب التقدمية PWA عوض تطبيقات الجوالات الأصيلة
• توفير تجربة تثبيت مخصصة داخل تطبيق الويب التقدمي PWA

هل تريد أن تصبح مطور واجهات أمامية؟ في هذا الفيديو سنقدم لك أهم النصائح وسنرشدك إلى الطريق الصحيح لتكون مطور واجهات أمامية Front-end developer مميز وسنخبرك عن أهم التقنيات التي يجب عليك الإلمام بها.

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

فاجأ نيك فينك Nick Finck وستيف شامبيون Steve Champeon عالم تصميم الويب بمفهوم "التحسين التدريجي" progressive enhancement في شهر مارس 2003، وهو مفهوم يعبر عن استراتيجية لتصميم الويب تركز على تنزيل المحتوى الأساسي لصفحة الويب أولًا، ثم تُضاف تدريجيًا الطبقات ذات التفاصيل والملامح الدقيقة على المحتوى الأساسي.

كان التحسين التدريجي عام 2003 يتعلق باستخدام ميزات CSS الحديثة وجافاسكربت الواضحة unobtrusive JavaScript ورسومات فكتور القابلة لتغيير الحجم Scalable Vector Graphics، لكن في 2020 وما بعده أصبح التحسين التدريجي يتعلق باستخدام إمكانيات المتصفح الحديثة.

شرائح عرض: تصميم ويب متكامل مع التحسين التدريجي، (المصدر).

جافاسكربت الحديثة

عند الحديث عن JavaScript الحديثة، فإننا نستحضر دعم المتصفح لأحدث مميزات JavaScript ES 2015 الأساسية، إذتتضمن (ECMAScript 2015 (ES6 الوعود promises والوحدات modules والفئات classes وقالب النص template literals والدوال السهمية arrow functions والكلمتان المفتاحيتان let و const والمولِّدات generators والاسناد بالتفكيك destructuring assignment ومعاملَي البقية rest والنشر spread والنوعين map الخرائط وset الأطقم والنوعين الخرائط والأطقم ضعيفة الإشارة WeackMap وWeackSet الأطقم ومميزات أخرى كثيرة.

جدول دعم المتصفحات لمعايير ES6. (مصدر)

يمكن استخدام الدوال غير المتزامنة async والتي هي أحد مميزات ES 2017، في جميع المتصفحات الرئيسية.

تتيح الكلمتان المحجوزتان async و await كتابة السلوك غير المتزامن المعتمِد على الوعود بأسلوب نظيف، مع تجنب الحاجة إلى تكوين سلاسل وعود Promises chaining بشكل صريح.

جدول دعم المتصفحات للدوال غير المتزامنة (المصدر).

كما وصل سريعًا دعم المتصفحات لإضافات ES 2020 الحديثة مثل التسلسل الإختياري optional chaining وعامل الاستبدال اللاغي nullish coalescing، لاحظ الشيفرة التالية.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
};
console.log(adventurer.dog?.name);
// Expected output: undefined
console.log(0 ?? 42);
// Expected output: 0

التطبيق المختار كنموذج: Fugu Greetings

سنعمل في هذا المقال مع تطبيق ويب تقدمي PWA بسيط اسمه Fugu Greetings (مستودع التطبيق على github). إنشاء هذا التطبيق كان محاولة لمنح الويب كامل قوة تطبيقات Android أو iOS أو سطح المكتب.

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

التطبيق المختار كنموذج Fugu Greetings

التحسين التدريجي Progressive Enhancement

حان الوقت للتحدث عن التحسين التدريجي، يصف مسرد مصطلحات الويب web glossary لدى موقع MDN هذا المفهوم على النحو التالي:

اقتباس

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

تُستخدم تقنية الكشف عن الميزات feature detection بشكل عام لتحديد ما إذا كانت المتصفحات قادرة على التعامل مع الوظائف الحديثة أم لا، بينما تضاف شيفرات تعويضية Polyfills غالبًا لتعويض نقص دعم المتصفحات لجافاسكربت.

-- مساهمو MDN

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

الطريقة التقليدية التي يمكن أن تفكر فيها لاستيراد ملفات في أحد تطبيقاتك هي استخدام عنصر <input type=file>، حيث تُنشئ بداية العنصر، وتعين نوعه أو الخاصية type إلى'file' وتُضيف أنواع المعيار MIME إلى الخاصية accept، ثم تنقر عليه برمجيًا وتستمتع بالنتيجة.

يمكنك تجريب هذه الميزة في تطبيق Fugu Greetings باختيار صورة معينة إلى التطبيق وملاحظة كيف أنها تُرسم مباشرة في حاوية الرسم canvas.

const importImage = async () => {
  return new Promise((resolve) => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.addEventListener('change', () => {
      resolve(input.files[0]);
    });
    input.click();
  });
}

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

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

const exportImage = async (blob) => {
  const a = document.createElement('a');
  a.download = 'fugu-greeting.png';
  a.href = URL.createObjectURL(blob);
  a.addEventListener('click', (e) => {
    setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
  });
  a.click();
};

لكن لحظة! أنت بهذا لم تنزِّل البطاقة بل حفظتها، حيث لم يظهر مربع الحوار "حفظ" الذي يتيح لك اختيار مكان حفظ الملف، وانما نزّل المتصفح البطاقة مباشرةً دون تدخلك، ووضعها مباشرة في مجلد التنزيلات.

ألا يوجد طريقة تنزيل أفضل؟ ماذا لو كان بإمكانك فتح ملف محلي، وتحريره، ثم حفظ التعديلات، إما على نفس الملف أو في ملف جديد، أليس هذا أفضل؟

تتيح الواجهة البرمجية File System Access التي تعمل في الخلفية File System Access API لتطبيقك بفتح وإنشاء ملفات ومجلدات، وكذلك تعديل الملفات وحفظها، وذلك بالاستفادة من التابع ()window.chooseFileSystemEntries، لكن عند استخدام هذا التابع تحتاج إلى استيراد مشروط لشيفرات الاستيراد والتصدير (ملفات mjs في المثال التالي) بناء على كون التابع متاحًا أم لا، أو بعبارة أخرى بناء على كون المتصفح يدعم الواجهة File System Access أم لا. موضّح طريقة القيام بذلك في الشيفرة التالية.

const loadImportAndExport = () => {
  if ('chooseFileSystemEntries' in window) {
    Promise.all([
      import('./import_image.mjs'),
      import('./export_image.mjs'),
    ]);
  } else {
    Promise.all([
      import('./import_image_legacy.mjs'),
      import('./export_image_legacy.mjs'),
    ]);
  }
};

ولكن قبل التعمق في تفاصيل الواجهة File System Access، والبدء باستخدام شيفراتها الخاصة باستيراد وتصدير الملفات،، لنرى سريعًا نمط التحسين التدريجي المتبع في الشيفرة السابقة.

عند طلب صفحة من موقع ويب في المتصفحات التي لا تدعم الواجهة البرمجية File System Access، يتم فقط تحميل السكريبتات القديمة import_image_legacy.mjs و export_image_legacy.mjs التي تحتوي شيفرات التصدير والاستيراد التقليدية. يمكنك رؤية نافذة الشبكة في Firefox و Safari أدناه.

نافذة مراقبة الشبكة لمتصفح Safari.

نافذة شبكة أدوات المطورين لمتصفح Firefox.

لكن لأن Chrome متصفح يدعم الواجهة File System Access، فيتم فقط تحميل السكربتات الجديدة import_image.mjs وexport_image.mjs التي تحتوي شيفرات متقدمة لميزات استيراد وتصدير الملفات في تطبيقات PWAs، بالاعتماد على الواجهة File System Access.

نافذة شبكة أدوات المطورين لمتصفح Chrome.

واجهة الوصول إلى ملفات النظام

حان الآن الوقت لإلقاء نظرة على التنفيذ الفعلي للتحسين السابق، إذا فكرت باستيراد صورة باستخدام واجهة الوصول إلى ملفات النظام، فإنك ستستدعي التابع ()window.chooseFileSystemEntries وتمرر له الخاصية accept التي تعبر من خلالها أنك تريد ملفات صور عبر امتدادات الملفات أو أنواع MIME، وينتج عن هذا مقبض ملف file handle يمكنك من خلاله الحصول على الملف الفعلي عن طريق استدعاء الدالة ()getFile.

const importImage = async () => {
  try {
    const handle = await window.chooseFileSystemEntries({
      accepts: [
        {
          description: 'Image files',
          mimeTypes: ['image/*'],
          extensions: ['jpg', 'jpeg', 'png', 'webp', 'svg'],
        },
      ],
    });
    return handle.getFile();
  } catch (err) {
    console.error(err.name, err.message);
  }
};

تُطبَّق الفكرة نفسها عند تنفيذ تصدير الصورة، لكن هذه المرة تحتاج تمرير المعامل type بالقيمة 'save-file' إلى التابع ()ChooseFileSystemEntries، بهذا تحصل على مربع حوار لحفظ الملف، لم يكن هذا ضروريًا عند فتح الملف (استيراد صورة) لأن القيمة 'open-file' هي الافتراضية للمعامل type.

ستعين هنا المعامل accept بشكل مشابه لاستيراد ملف، لكن في التصدير العملية تقتصر على صور PNG فقط، وبدلاً من جلب الملف من المقبض، فإنك هنا تنشئ مجرى قابل للكتابة writable stream عن طريق التابع ()createWritable الذي تستخدمه لكتابة كائن البيانات الثنائية Blob أو يعني صورة بطاقتك الترحيبية إلى الملف، وأخيرًا تغلق المجرى.

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

const exportImage = async (blob) => {
  try {
    const handle = await window.chooseFileSystemEntries({
      type: 'save-file',
      accepts: [
        {
          description: 'Image file',
          extensions: ['png'],
          mimeTypes: ['image/png'],
        },
      ],
    });
    const writable = await handle.createWritable();
    await writable.write(blob);
    await writable.close();
  } catch (err) {
    console.error(err.name, err.message);
  }
};

إذن باستخدام التحسين التدريجي مع الواجهة البرمجية File System Access، فإنه بإمكانك استيراد ملف صورة إلى التطبيق، وتُرسم تلك الصورة مباشرة في حاوية الرسم canvas، كما يمكنك إجراء تعديلاتك على الصورة وحفظها باستخدام مربع حوار حفظ يتيح لك تحديد اسم للملف الذي تريد حفظه وموقع لتخزينه، وذلك كله فقط للمتصفحات التي تدعم الواجهة File System Access.

مربع حوار فتح ملف.

الصورة المستوردة.

حفظ الصورة المعدلة إلى ملف جديد.

واجهتَي مشاركة الويب

قد ترغب ذات مرة بمشاركة بطاقتك الترحيبية، هذا ما أتاحه مطورو Fugu Greetings بالاستفادة من الواجهتين البرمجيتين Web Share (مشاركة الويب) و Web Share Target (مشاركة وُجْهة الويب).

تمتاز أجهزة الجوّال وأنظمة تشغيل سطح المكتب الآن بآليات مشاركة مدمجة، مثلًا في الصورة التالية هناك زر لمشاركة أحد مقالات مدونة ما في متصفح Safari على macOS، عند النقر على زر مشاركة المقال يمكنك مشاركة رابط المقال مع أصدقائك عبر تطبيقات جهازك مثلًا عبر تطبيق رسائل macOS.

واجهة مشاركة الويب في متصفح Safari على macOS.

إذا أردت تحقيق ميزة المشاركة هذه لأحد تطبيقاتك، فالشيفرة لفعل ذلك واضحة ومباشِرة، بداية تستدعي التابع ()navigator.share وتعطيه معاملات اختيارية title وtext وurl في كائن كمعامل.

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

try {
  await navigator.share({
    title: 'Check out this article:',
    text: `"${document.title}" by @tomayac:`,
    url: document.querySelector('link[rel=canonical]').href,
  });
} catch (err) {
  console.warn(err.name, err.message);
}

الطريقة التي اتبعها مطورو Fugu Greetings لمشاركة الصور هي بداية إعداد كائن data بمصفوفة ملفات files تتكون من كائن بيانات ثنائي واحد، وعنوان title ونص text، بعدها تم استخدام التابع ()navigator.canShare يخبرنا ما إذا كان كائن data الذي نحاول مشاركته يمكن مشاركته تقنيًا عبر المتصفح أم لا (هل المتصفح حديث ويدعم المشاركة أم لا)، إذا أفاد التابع بإمكانية مشاركة الملفات، يمكن استدعاء التابع ()navigator.share كما فعلنا في مشاركة الروابط.

const share = async (title, text, blob) => {
  const data = {
    files: [
      new File([blob], 'fugu-greeting.png', {
        type: blob.type,
      }),
    ],
    title: title,
    text: text,
  };
  try {
    if (!(navigator.canShare(data))) {
      throw new Error("Can't share data.", data);
    }
    await navigator.share(data);
  } catch (err) {
    console.error(err.name, err.message);
  }
};

وكعادة أي تحسين تدريجي، فقط في حال دعم المتصفح لواجهة برمجة مشاركة الويب أي فقط في حال وجود كلًا من 'share' و 'canShare' في كائن التنقل navigator، فإن تطبيق Fugu Greetings يستدعي الشيفرة السابقة (على فرض أنها محفوظة في ملف بالاسم share.mjs) عبر دالة الاستيراد الديناميكي ()import، وفي المتصفحات التي تحقق شرط واحد فقط من الشرطين مثل نسخ الهاتف المحمول من متصفح Safari، فيُستَخدم الشرط المتاح فقط.

const loadShare = () => {
  if ('share' in navigator && 'canShare' in navigator) {
    import('./share.mjs');
  }
};

بوجود ميزة المشاركة هذه في تطبيق Fugu Greetings، فإنك إذا نقرت زر مشاركة في متصفح يدعم واجهة مشاركة الويب مثل متصفح Chrome على نظام Android، يتم فتح لوحة أو حوار للمشاركة، من خلاله يمكنك اختيار التطبيق الذي تريد المشاركة إليه مثلًا Gmail، بذلك تظهر أداة إنشاء البريد الإلكتروني مع الصورة التي شاركتها كمرفق في الرسالة.

اختيار تطبيق لمشاركة الملف إليه.

أُرفِق الملف المشارك برسالة بريد الكتروني جديدة في منشئ الـ Gmail.

واجهة منتقي جهات الاتصال

عندما تكتب بطاقة ترحيب، قد لا يكون من السهل دائمًا كتابة اسم جهة اتصال أحد أصدقائك بشكل صحيح عندما تريد مشاركته البطاقة عبر رقم هاتفه، يمكن للواجهة البرمجية Contact Picker التي تعمل في الخلفية Contact Picker API حل هذه المشكلة، فهي تتيح لمستخدمي التطبيق الحصول على أسماء أصدقائهم، المحفوظة في جهات اتصال هواتفهم من مجرد نقرها.

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

قد تهتم أنت في تطبيقاتك بالوصول إلى أرقام هواتف جهات الاتصال أو عناوين بريدهم الإلكتروني أو صورهم الشخصية أو عناوين سكنهم، وبعدها تكوِّن كائن خيارات options وتضبط الحقل multiple إلى true لتتمكن من اختيار أكثر من مدخل (أكثر من جهة اتصال)، وأخيرًا تستدعي التابع ()navigator.contacts.select الذي يعرض جهات الاتصال التي يختارها المستخدمين بالخاصيات المحددة في تطبيقك.

const getContacts = async () => {
  const properties = ['name'];
  const options = { multiple: true };
  try {
    return await navigator.contacts.select(properties, options);
  } catch (err) {
    console.error(err.name, err.message);
  }
};

وكعادة أي تحسين تدريجي، لا تستورد شيفرة انتقاء جهات الاتصال إلا في حال كان المتصفح يدعم بالفعل الواجهة البرمجية Contact Picker.

if ('contacts' in navigator) {
  import('./contacts.mjs');
}

يمكنك تجريب الميزة التي توفرها الواجهة البرمجية Contact Picker في تطبيق Fugu Greetings بالضغط على زر جهات الاتصال contacts في التطبيق ثم اختيار أسماء جهات اتصالك التي تريد أن تُرسم في بطاقتك الترحيبية. لاحظ كيف يقتصر منتقي جهات الاتصال في تطبيق Fugu Greetings على جلب أسماء جهات الاتصال المختارة فقط دون عناوين بريدها أو معلومات أخرى مثل أرقام هواتفها.

اختيار اسمين من قائمة جهات الاتصال عبر مُنتقي جهات الاتصال.

رُسمَ الاسمين في بطاقة الترحيب.

واجهة الحافظة غير المتزامنة

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

تدعم الواجهة البرمجية Clipboard غير المتزامنة التي تعمل في الخلفية Async Clipboard API نسخ ولصق كلًا من النصوص والصور، لهذا استخدمها مطورو Fugu Greetings لإعداد ميزة النسخ من واللصق إلى التطبيق، وإذا أردت فعل ذلك في تطبيقاتك، فإنك لنسخ شيء ما إلى حافظة النظام، تحتاج أن تكتبه إليها عبر التابع ()navigator.clipboard.write الذي يأخذ مصفوفة من عناصر الحافظة كمعامل، كل عنصر منها عبارة عن كائن بحقل قيمته الـ blob (يمثل المحتوى المنسوخ)، ومفتاحه نوع blob (كائن بيانات ثنائي).

const copy = async (blob) => {
  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
  } catch (err) {
    console.error(err.name, err.message);
  }
};

وللصق شيء ما من الحافظة، فإنك تحتاج إلى المرور على عناصرها بعد الحصول عليها من خلال التابع ()navigator.clipboard.read.

يمكن لكل عنصر من عناصر الحافظة ClipboardItem الاحتفاظ بمحتوياته في أنواع MIME مختلفة، لذلك فإنك للحصول على كائن blob لعنصر الحافظة فإنك بحاجة للمرور على قائمة الأنواع المتاحة افتراضيًا، ولكل نوع تستدعي الدالة ()getType ممررًا إليها النوع الحالي في حلقة التكرار كوسيط.

const paste = async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      try {
        for (const type of clipboardItem.types) {
          const blob = await clipboardItem.getType(type);
          return blob;
        }
      } catch (err) {
        console.error(err.name, err.message);
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
};

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

if ('clipboard' in navigator && 'write' in navigator.clipboard) {
  import('./clipboard.mjs');
}

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

طلب الإذن بالوصول إلى محتوى الحافظة.

واجهة الشارات

كون تطبيق Fugu Greetings قابلًا للتثبيت installable، له أيقونة خاصة يمكن للمستخدمين تثبيتها في شريط التطبيقات app dock أو الشاشة الرئيسية، استغل مطورو Fugu Greetings هذه الأيقونة لإظهار شارة انطلاقًا منها، تحتوي عدّاد نقرات قلم الرسم pen strokes counter، وذلك بالاستفادة من الواجهة البرمجية Padging التي تعمل في الخلفية Badging API.

إذا أردت إضافة شارات في تطبيقاتك، ففيما يلي طريقة استخدام الواجهة البرمجية Padging لفعل ذلك، إذ يمكنك ببساطة إضافة مستمع حدث event listener يعيِّن شارة الأيقونة بقيمة عدّاد نقرات القلم التي تزيد عند تحقق الحدث pointerdown (ينطلق هذا الحدث عندما يصبح مؤشر الرسم فعال)، وعند مسح محتوى حاوية الرسم يمكنك إعادة تعيين العداد إلى صفر لتُزال الشارة.

let strokes = 0;

canvas.addEventListener('pointerdown', () => {
  navigator.setAppBadge(++strokes);
});

clearButton.addEventListener('click', () => {
  strokes = 0;
  navigator.setAppBadge(strokes);
});

وكعادة أي تحسين تدريجي، حمّل هذا المنطق (الشيفرة) فقط للمتصفحات التي تدعم الواجهة البرمجية Badging:

if ('setAppBadge' in navigator) {
  import('./badge.mjs');
}

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

رسم الأرقام من 1 إلى 7 بضغطة قلم واحدة لكل رقم.

عدّاد ضغطات القلم ممثّل شارة لأيقونة التطبيق.

واجهة المزامنة الدورية للخلفية

هل تريد أن تبدأ كل يومٍ جديدٍ بمحتوى جديد؟ من الميزات الرائعة لتطبيق Fugu Greetings أنه يمكن أن يلهمك كل يوم بصورة خلفية جديدة لإنشاء بطاقتك، يستخدم التطبيق لهذه الميزة الواجهة البرمجية Periodic Background Sync التي تعمل في الخلفية Periodic Background Sync API، وإذا أردت فعل هذا لتطبيقاتك فإن عليك إضافة حدث مزامنة دوري periodic sync event في تسجيل عامل الخدمة service worker registration عبر التابع ()register، عملية تسجيل الحدث تتطلب وسم tag يستمع عامل الخدمة إليه، وحد أدنى للفاصل الزمني للمزامنة interval. ممرر هنا حدث المزامنة بوسم اسمه 'image-of-the-day' وبفاصل زمني لا يقل عن يوم واحد، ليحصل المستخدم على صورة خلفية جديدة كل 24 ساعة.

const registerPeriodicBackgroundSync = async () => {
  const registration = await navigator.serviceWorker.ready;
  try {
    registration.periodicSync.register('image-of-the-day-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (err) {
    console.error(err.name, err.message);
  }
};

الخطوة الثانية هي الاستماع إلى حدث المزامنة الدورية 'periodicsync' في عامل الخدمة، فإذا كان وسم الحدث هو 'image-of-the-day'، أي بنفس اسم الحدث المُسجل في عامل الخدمة، يتم جلب صورة اليوم عبر الدالة ()getImageOfTheDay، وتُنشر النتيجة لجميع العملاء، لتُحدَّث حاويات رسمهم canvases وذاكراتهم المؤقته caches بها.

self.addEventListener('periodicsync', (syncEvent) => {
  if (syncEvent.tag === 'image-of-the-day-sync') {
    syncEvent.waitUntil(
      (async () => {
        const blob = await getImageOfTheDay();
        const clients = await self.clients.matchAll();
        clients.forEach((client) => {
          client.postMessage({
            image: blob,
          });
        });
      })()
    );
  }
});

وكالعادة لأن هذه الميزة تعتبر تحسينًا تقدميًا، فيجب تحميل الشيفرة السابقة فقط للمتصفحات التي تدعم الواجهة البرمجية Periodic Background Sync لكلًا من شيفرة العميل و شفرة الخادم. لاحظ بدلاً من استخدام الاستيراد الديناميكي ()import غير المدعوم في عامل الخدمة حتى اللحظة، استخدمنا الاستيراد التقليدي ()importScripts.

// في طرف العميل
const registration = await navigator.serviceWorker.ready;
if (registration && 'periodicSync' in registration) {
  import('./periodic_background_sync.mjs');
}

// في عامل الخدمة
if ('periodicSync' in self.registration) {
  importScripts('./image_of_the_day.mjs');
}

وبتجريب هذه الميزة في تطبيق Fugu Greetings، يؤدي الضغط على زر Wallpaper إلى إظهار صورة بطاقة الترحيب لهذا اليوم التي تُحدَّث يوميًا عبر الواجهة البرمجية Periodic Background Sync.

نقر زر Wallpaper يؤدي لعرض صورة اليوم.

واجهة مُطْلِق الإشعارات

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

تمكن مطورو Fugu Greeting من إضافة هذه الميزة من خلال الواجهة البرمجية Notification Triggers التي تعمل في الخلفية Notification Triggers API، فبعد تعيينك الوقت الذي تريد إطلاق الإشعار فيه، يُجدوِل التطبيق الإشعار باستخدام الخاصية showTrigger، يمكن أن تكون الجدولة عبر الكائن TimestampTrigger بالتاريخ الذي حددته، وسيُطلق التنبيه محليًا دون الحاجة إلى جانب الشبكة أو الخادم.

const targetDate = promptTargetDate();
if (targetDate) {
  const registration = await navigator.serviceWorker.ready;
  registration.showNotification('Reminder', {
    tag: 'reminder',
    body: "It's time to finish your greeting card!",
    showTrigger: new TimestampTrigger(targetDate),
  });
}

وكما هو الحال مع كل ما ذكرناه، تعد هذه الميزة تحسينًا تدريجيًا، لذا يتم تحميل الشيفرة بشرط دعم المتصفح لها.

if ('Notification' in window && 'showTrigger' in Notification.prototype) {
  import('./notification_triggers.mjs');
}

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

جدولة إشعار محلي للتذكير بإنهاء بطاقة التهنئة.

عندما يُطلَق إشعار مجدول في Fugu Greetings، يُعرَض تمامًا مثل أي إشعار آخر، لكن الفرق أنه لا يتطلب اتصالاً بالشبكة كما قلنا.

الإشعار المطلَق يظهر في مركز إشعارات macOS.

واجهة قفل الإيقاظ

تحتاج في بعض الأحيان إلى التحديق طويلًا في الشاشة حتى يأتيك الإلهام، أسوأ ما يمكن أن يحدث حينها هو إيقاف تشغيل الشاشة، وهذا ما يحدث غالبًا تلقائيًا عند توقُف تفاعلنا مع التطبيقات لفترة طويلة. يمكن منع حدوث ذلك من خلال الواجهة البرمجية Wake Lock التي تعمل في الخلفية Wake Lock API.

إذا أردت إضافة هذه الميزة لتطبيقاتك، فإن أول ما عليك فعله هو الحصول على قفل إيقاظ باستخدام التابع ()navigator.wakelock.request، وبالتحديد للحصول على قفل إيقاظ للشاشة، يمكنك تمرير نص 'screen' إلى التابع، وتضيف مستمع الحدث ليُعلِمُك متى يُحرَّر قفل الإيقاظ. يمكن أن يحدث هذا مثلًا عندما تتغير قابلية ظهور النافذة. فيمكنك مثلًا عندما تصبح علامة التبويب ظاهرة مجددًا، أن تعاود طلب قفل الإيقاظ.

let wakeLock = null;
const requestWakeLock = async () => {
  wakeLock = await navigator.wakeLock.request('screen');
  wakeLock.addEventListener('release', () => {
    console.log('Wake Lock was released');
  });
  console.log('Wake Lock is active');
};

const handleVisibilityChange = () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);
document.addEventListener('fullscreenchange', handleVisibilityChange);

وكعادة التحسين التدريجي، تُحمِّل شيفرة هذه الميزة فقط إذا كان المتصفح يدعم الواجهة البرمجية Wake Lock.

if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
  import('./wake_lock.mjs');
}

هذه الواجهة مستخدمة في Fugu Greetings لتطبيق ميزة إبقاء الشاشة يقظة إذا طلب المستخدم ذلك، يمكنك تجريب هذه الميزة عبر تفعيل مربع الاختيار Insomnia الذي يُبقي الشاشة يقظة عند ابتعادك عن التطبيق بدلًا من إيقاف تشغيلها.

مربع اختيار إبقاء الشاشة يقظة.

واجهة كشف التوقف

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

تسمح الواجهة البرمجية Idle Detection التي تعمل في الخلفية Idle Detection API بالكشف عن توقف استخدام تطبيقك.

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

إذا أردت استخدام هذه الميزة لتطبيقاتك فعليك كخطوة أولى لاستخدام الواجهة Idle Detection أن تتأكد من منح المتصفح الإذن للكشف عن توقف استخدام التطبيق 'idle-detection'، وإلا فأنت بحاجة إلى طلب ذلك الإذن عبر التابع ()IdleDetector.requestPermission، لاحظ أن استدعاء هذه التابع يتطلب قبول من المستخدم.

// 'idle-detection' تأكد من الحصول على الإذن
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
  // Need to request permission first.
  return console.log('Idle detection permission not granted.');
}

الخطوة التالية هي إنشاء كائن للكشف عن توقف المستخدم، تُسجِّل مستمع حدث يستمع إلى تغييرات استخدام المستخدم للتطبيق.

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

const idleDetector = new IdleDetector();
idleDetector.addEventListener('change', () => {
  const userState = idleDetector.userState;
  const screenState = idleDetector.screenState;
  console.log(`Idle change: ${userState}, ${screenState}.`);
  if (userState === 'idle') {
    clearCanvas();
  }
});

await idleDetector.start({
  threshold: 60000,
  signal,
});

وكالعادة، لا تُحمِّل الشيفرة إلا بعدما تتأكد من دعم المتصفح لها.

if ('IdleDetector' in window) {
  import('./idle_detection.mjs');
}

في تطبيق Fugu Greetings، تُمسح حاوية الرسم عند تفعيل مربع الاختيار Ephemeral زائل ويكون المستخدم متوقف عن استخدام التطبيق لفترة طويلة جدًا.

حاوية الرسم ممسوحة كون خيار Ephemeral مفعّل والمستخدم متوقف عن استخدام التطبيق لفترة طويلة.

الخاتمة

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

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

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

نسخة Android من تطبيق Fugu Greetings في متصفح Chrome.

نسخة سطح المكتب من تطبيق Fugu Greetings في متصفح Safari.

نسخة سطح المكتب من تطبيق Fugu Greetings في متصفح Chrome.

إذا كنت مهتمًا بتطبيق Fugu Greetings، يمكنك الاطلاع على شيفرته كاملةً على منصة GitHub وتشكيل بطاقتك الترحيبية باستخدامه.

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

ترجمة -وبتصرف- للمقال Progressively enhance your Progressive Web App من موقع web.dev.

اقرأ أيضًا

• جعل تطبيق الويب التقدمي PWA يبدو كتطبيق أساسي في نظام التشغيل
• ما هي تطبيقات الويب التقدمية PWA؟
• ميزات تطبيق الويب التقدمي PWA
• نماذج اقتراحات تثبيت تطبيقات الويب التقدمية PWA
• توفير تجربة تثبيت مخصصة داخل تطبيق الويب التقدمي PWA

سنغطي في هذا المقال من سلسلة تعلم البرمجة:

• تاريخ موجز للويب.
• أساسيات بروتوكول HTTP.
• معماريات الويب وأطر العمل فيه.
• دور كل من HTML و CSS وجافاسكربت وبايثون.

اقتباس

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

تاريخ موجز للويب

ابتكر تِم برنرز-لي Tim Berners-Lee الشبكة العالمية -الوب- لحل مشكلة واجهته هو وزملاؤه في CERN، وهي مشكلة مشاركة المستندات فيما بينهم، فقد كان لديهم مستندات كثيرة في مواقع مختلفة وبصيغ مختلفة، ويحتاج كل منها إلى مفاهيم أو مواد موجودة في مستندات أخرى بعيدة، وكان الكثير من تلك المستندات مشاريع جاريةً يعمل عليها عدة أشخاص معًا.

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

النصوص المتشعبة ولغة HTML والمحتوى الثابت

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

واحتاج مفهوم النص المتشعب إلى آلية لربط المستندات معًا، فابتكر لي صيغةً نصيةً أو لغةً توصيفيةً سماها لغة توصيف النصوص الفائقة Hypertext Markup Language أو HTML اختصارًا، مبنيةً على معيار موجود من قبل اسمه لغة التوصيف المعيارية العامة Standard Generalised Markup Language أو SGML اختصارًا، وتُكتب صفحات الويب الحالية في أبسط صورها بلغة HTML أو XHTML -وهي صورة أخرى تتوافق مع HTML-، يدويًا أو بواسطة برنامج حاسوبي، وتعرض المتصفحات صفحاتها من خلال تفسير وسوم HTML تلك وإخراج المحتوى المنسَّق بها على شاشة المستخدم، ويمكن الرجوع إلى توثيق موسوعة حسوب للغة HTML للمزيد عن هذه اللغة.

استطاع لي بعد كتابة هذه اللغة أن ينشئ مستندات فائقةً -أو تشعبيةً وهو مصطلح آخر لوصف مستندات HTML- وإن كانت بسيطةً نسبةً إلى الموجود الآن، أتاحت تنسيق الصفحات، وإدراج الصور والروابط إلى مستندات أخرى، لاحظ أننا لم نتعرض حتى الآن لمفهوم الشبكات، فكانت الخطوة التالية هي تمكين الوصول إلى تلك المستندات من حواسيب أخرى عبر الشبكة، وقد تطلب ذلك تعريف صيغة قياسية لعناوين تلك المستندات وذلك المحتوى، وهو ما صار يُعرف فيما بعد باسم المحدد الموحد للموارد Uniform Resource Locator أو URL اختصارًا، يشير أول جزء منه إلى البروتوكول المستخدم، والذي يكون عادةً http أو https في حالة الويب، أما الجزء التالي فيستخدم تسميةً قياسيةً في الإنترنت لتحديد الخادم -ومنفذًا اختياريًا هو عادةً المنفذ 80 كما شرحنا في المقال السابق-، ثم يأتي الجزء الأخير وهو الموقع المنطقي logical للمحتوى على الخادم، ونستخدم كلمة المنطقي هنا لأن هذا الموقع قد لا يكون حقيقيًا أصلًا، وإنما متعلق بموقع ثابت ما يعرفه الخادم، وإن كان يبدو مثل مسار مطلق لمجلد في نظام يونكس، وقد يترجم الخادم الموقع إلى استدعاء تطبيق أو صورة أخرى من مصادر البيانات، لذا إذا نظرنا إلى الرابط الكامل للصفحة http://www.alan-g.me.uk/l2p2/tutweb.htm مثلًا، فسنجد أنه يتكون مما يلي:

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

الصفحات الديناميكية وواجهة البوابة المشتركة CGI

حُلّت مشكلة توفير المحتوى الديناميكي بإلحاق البيانات بنهاية الرابط فيما يعرف بالسلسلة المرمَّزة encoded string، أو السلسلة المهرَّبة escaped string، وهي تلك السلاسل الطويلة من الأحرف والأرقام ومحارف النسبة المئوية التي تكون في شريط عنوان المتصفح بعد الرابط، وتبدو للوهلة الأولى بلا معنى، وسندرسها بالتفصيل لأننا نحتاج إليها للاتصال بالمواقع الديناميكية.

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

أما التقنية المستخدمة في إنشاء المحتوى الديناميكي للويب فتسمى واجهة البوابة المشتركة CGI، وتمتاز بسهولة تنفيذها وحياديتها اللغوية بحيث لا تتعلق بلغة بعينها، فقد كُتبت تطبيقات الويب الأولى المبنية على CGI بلغات مثل C و C++‎ وملفات باتش لنظام DOS -أو batch files- وسكربتات صدفة يونكس، إلا أنها لم تلبث أن صارت تُكتب بلغة Perl وحدها بسبب القدرة الكبيرة لهذه اللغة على معالجة النصوص، ووجود وحدة CGI library لمعالجة طلبات الويب، وتحتوي بايثون أيضًا على وحدة cgi التي تُستخدم لبناء تطبيقات ويب ديناميكية، وإن كانت بسيطة، وسندرس ذلك في مقال لاحق.

كل هذا العمل يضع إمكانيات التفاعل مع المستخدمين على عاتق الخادم، لذا صار جليًا أننا نحتاج إلى نوع من البرمجة داخل المتصفح، لأننا نريد سرعة الاستجابة في هذا التفاعل، وقد وفر متصفح Netscape ذلك في صورة جافاسكربت -و VBScript في متصفح إنترنت إكسبلورر-. وبهذه البرمجة النصية scripting languages -التي لا تحتاج إلى تصريف compiling قبل تشغيلها- صار المتصفح ينشئ نموذجًا برمجيًا للمستند داخل ذاكرته، فيما يسمى بنموذج كائن المستند Document Object Model أو DOM اختصارًا -وقد شاعت هذه التقنية إلى أن صارت معيارًا موحدًا على مستوى المتصفحات- ثم تستطيع اللغات النصية scripting languages أن تبحث في ذلك النموذج عن مكونات المستند، مثل الفقرات أو الجداول، وتعدلها، بتغيير لونها مثلًا أو موضعها في الصفحة، وقد كان ذلك مفيدًا في التحقق من صحة مدخَلات المستخدم مثلًا قبل إرسال البيانات إلى الخادم.

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

من النادر كتابة تطبيقات الويب باستخدام هذا البروتوكول حاليًا، وقد فقدت Perl موقعها في كونها لغةً مفضلةً للويب في ظل وجود تقنيات مثل صفحات الخوادم النشطة Active Server Pages أو ASP اختصارًا، وصفحات جافا للخوادم Java Server Pages أو JSP، وكذلك PHP وغيرها، وسنلقي نظرةً على تقنية من تلك التقنيات المبنية على بايثون في مقال لاحق.

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

بروتوكول النصوص التشعبية HTTP

يجب أن نفهم آلية عمل الويب قبل أن نكتب برامج له، وبالتالي لا بد أن نعرف ما هو برتوكول النصوص الفائقة أو التشعبية، وهو بروتوكول ذو أساس نصي يتصل من خلال مقابس، بنفس الطريقة التي رأيناها في مقال برمجة الشبكات من قبل، ويوفر عدة رسائل:

• GET: لقراءة المستند من الخادم.
• POST: لإرسال البيانات إلى الخادم.
• PUT: لإنشاء مستند جديد على الخادم، أو بديل له.
• DELETE: لحذف المستند من الخادم.

توجد رسائل أخرى غير التي ذكرناها، لكننا ذكرنا الرسائل الأساسية المستخدمة في بناء التطبيقات، ولعل أكثرها استخدامًا GET و POST، غير أننا نستطيع أن نرى أن لدينا أساسًا من نمط CRUD التقليدي هنا، والذي يعني إنشاء Create وقراءة Read وتعديل Update وحذف Delete.

فإذا تتبعنا رابط http أعلاه فسنجد أننا نحتاج إلى تعلم الكثير لنكون خبراء في هذا البروتوكول، لكن لحسن الحظ فإن مستوى المعرفة المطلوب لاستخدامه بسيط، لأن وحدات المكتبات تنفذ أغلب العمل المبني عليه، إذ يرسل عميل الويب طلب http GET، ثم يرد الخادم برسالة خطأ فيها رمز من بضعة رموز قياسية لكل منها معنىً محدد، أو بمستند HTML.

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

استخدام الوحدة urllib.requests

لجلب صفحة ويب بسيطة نستورد urllib.request، ثم نفتح رابطًا لقراءة النتيجة، كما يلي:

>>> import urllib.request as url
>>> site = url.urlopen('http://www.alan-g.me.uk/l2p2/index.htm')
>>> page = site.read()
>>> print( page )

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

يبقى أن نسأل أنفسنا ماذا نفعل بالمحتوى الذي لدينا؟ والجواب أننا بلا شك نريد استخراج معلومات منه من خلال تحليله، ويتضمن هذا التحليل في أبسط صوره البحث عن سلسلة أو تعبير نمطي ما، إذ نستطيع أن نبحث في جميع وسوم الصور مثلًا في الصفحة من خلال البحث عن السلسلة ‎'<img'‎، أو ‎'<IMG'‎، أو التعبير النمطي ‎'<img'‎ مع تعيين الراية re.IGNORECASE.

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

هيكل تطبيق الويب

يبدأ تطبيق الويب التقليدي بمتصفح ويب يعمل على حاسوب عميل، يرسل طلبًا عبر الشبكة إلى خادم في مكان ما، ويشغّل الخادم جزءًا من البرنامج يسمى خادم الويب -أو مستمع الويب أحيانًا- ليلتقط الطلبات، ويرسلها -إذا كانت صالحةً- إلى خادم تطبيقات application server قد يكون -أو لا يكون- جزءًا من حزمة خادم الويب، بل قد يكون على حاسوب منفصل داخل مركز بيانات كبير، يفسر خادم التطبيقات الرسالة التي استلمها، ويعيد ملف HTML ساكنًا من نظام ملفاته، أو يعالج البيانات المستلَمة، ويولّد مستند HTML جديدًا حسب الطلب، بمساعدة البيانات المخزنة في قاعدة بيانات أحيانًا، وترسَل HTML في كلا الحالتين إلى المتصفح الذي يستقبلها، ويفسرها، ثم يعرضها على شاشة المستخدم في صورة صفحة ويب منسقة.

تختلف التقنيات المستخدمة في كل مرحلة عن الأخرى، وسننظر الآن في تلك الوحدات بالترتيب.

متصفح الويب Web Browser

المتصفح غالبًا هو أحد المتصفحات الشهيرة، مثل كروم أو سفاري أو فاير فوكس، وسيحتوي على البرمجية اللازمة لتفسير HTML وجافاسكربت وعرض صفحة الويب على الشاشة، كما سيرسل طلبات http إلى خادم الويب، ويستلم الردود عليها.

مستمع الويب Web Listener

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

خادم التطبيق Application Server

تكون هذه الحزمة غالبًا حزمة خادم قياسيةً، إما متكاملةً مع مستمع الويب، أو مستقلةً بذاتها، كما في حالة حاوية Tomcat Java Server Container، أو قد تكون إطار عمل برمجي، مثل جانغو Django للغة بايثون، أو إطار فلاسك Flask الذي سندرسه لاحقًا.

وخادم التطبيق -في كل من الحالات السابقة- هو المكان الذي سيكون فيه منطق التطبيق وشيفرته، ويمكن كتابته بأي لغة تقريبًا، لكننا سنكتبه ببايثون في شرحنا، وهو أيضًا المكان الذي ستخزَّن فيه موارد الويب الأخرى، مثل الصور وملفات الوسائط.

ملفات HTML

ملفات HTML هي ملفات نصية قياسية تُخزَّن على الخادم، وتُكتب بمزيج من لغات HTML وCSS وجافاسكربت، وربما VBScript إذا كانت في بيئة ويندوز، وسبب استخدام هذه اللغات الثلاثة مجموعةً؛ هو أن كلًا منها يؤدي دورًا مستقلًا في بناء الصفحة وجعلها قابلة للتعديل اللاحق، فتحدد لغة HTML بنية المستند، مثل العناوين والجداول والفقرات والصور وغيرها، وتوفر أوراق الأنماط المتتالية -أو التنسيقات الموروثة- CSS المظاهر الجمالية، مثل الألوان والمواضع على الصفحة والخطوط، وتتحكم في طريقة عرض عناصر HTML على الصفحة، بينما تتحكم جافاسكربت في السلوك الديناميكي للعناصر، مثل القوائم المنسدلة والعناصر القابلة للطي وغيرها، وقد استُخدمت في البداية للتحقق من البيانات، غير أن خيارات التحقق التي أتت في HTML5 حلت محلها في هذه الوظيفة.

قاعدة البيانات

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

ويتبين مما سبق أننا نحتاج إلى أن نتعلم HTML وCSS وجافاسكربت وبايثون وSQL أيضًا إذا أردنا بناء تطبيق ويب كامل، وكذلك كيفية إعداد الخوادم المختلفة وإدارتها، إلا أن مطوري الويب يتخصصون غالبًا إما في تطوير الواجهات الأمامية فقط، فيتعلمون اللغات التي تبني ما يراه المستخدم النهائي، مثل HTML و CSS وجافاسكربت ونحوها، أو تطوير الواجهات الخلفية فقط، فيتعلمون بايثون أو أي لغة تطوير أخرى مثل جافا و PHP وروبي Ruby وSQL (انظر مصادر التعلم وخارطة الطريق في مقال المدخل الشامل لتعلم تطوير الويب).

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

سندرس في المقالين التاليين جانبًا من برمجة الويب من جانب العميل client side وجانب الخادم server side، فسنرى كيف نعالج HTML كما لو كانت في متصفح، وهذا ضروري إذا أردنا بناء قاعدة بيانات من المعلومات التي نحصل عليها من الويب، فقد نحصل على البيانات من موقعي ويب مختلفين، ونريد جمعهما معًا لتحليل الظواهر الشائعة trends، وهو ما يُعرف ببرمجة جانب العميل client side programming.

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

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

خاتمة

نأمل في نهاية هذا المقال أن تكون تعلمت ما يلي:

• تُرسل الطلبات إلى خوادم الويب باستخدام طلبات http GET.
• يرد خادم الويب بمستند HTML.
• نحتاج إلى تحليل HTML لاستخراج البيانات التي نريدها.
• التعابير النمطية ليست أفضل أداة لتحليل HTML.
• توفر بايثون حزم browser وurllib وhtml لاستخدامها في برمجة جانب العميل.
• توفر بايثون كذلك عدة وحدات للتحليل، لعل أبرزها ElementTree.
• يُفضل التحكم في سلوك المتصفح من داخل صفحة الويب باستخدام جافاسكربت.

ترجمة -بتصرف- للفصل الثامن والعشرين: Working With the Web من كتاب Learn To Program لصاحبه Alan Gauld.

اقرأ أيضًا

• المقال التالي: برمجة عملاء ويب باستخدام بايثون
• المقال السابق: تواصل البرامج والعمليات البرمجية عبر الشبكة
• المدخل الشامل لتعلم تطوير الويب
• المدخل الشامل لتعلم علوم الحاسوب
• دليلك الشامل إلى تعلم البرمجة
• كيف تستخدم أدوات المطوِّر في المتصفحات الحديثة
• كيف تستخدم أدوات المطوِّر في المتصفحات الحديثة - جافاسكربت - أكاديمية حسوب (hsoub.com)