لوحة المتصدرين

قد تقضِ أيامًا وأسابيعًا أو حتى شهورًا تُخطط لحملة إعلانية، وتُجري العديد من التعديلات وتعتقد أنك نجحت في هذه المرة ولكن لا تحصل على النتائج المرجوة. تُرى ما هو الخطأ؟ في الحقيقة، لن تعرف إذا لم تختبر رسائلك الإلكترونية. يُعَد فشل الحملات الإعلانية أو أخطاء البريد الإلكتروني من أسوأ الأشياء التي يواجهها مسوّق البريد الإلكتروني، ولكن الخبر السار هنا أنه يمكن تجنبها. يمكنك النظر إلى اختبار البريد الإلكتروني على أنه وسيلة تأمينية للعمل الشاق الذي أنجزته وأيضًا لما سيحدث بعد ضغطك على زر الإرسال. لماذا يعد اختبار البريد الإلكتروني ضروريا؟ جميعنا نعلم أنه من الجيد مراجعة عملك مرةً أو اثنين، لكن هنا يأتي السؤال، أين يقع بند اختبار البريد الإلكتروني في قائمة أولوياتك؟ هل تعلم أن ٤٣٪ من المسوقين عبر البريد الإلكتروني لا يختبرون كل بريد يرسلونه؟ هذه حقًا مخاطرة كبيرة، فإذا كنت أحد أفراد فريق تسويق البريد الإلكتروني الذين لا يتحققون من الرسائل بانتظام، فنحن هنا لنعلمك كيف تفعل ذلك. اختبار البريد الإلكتروني يجنبنا الأخطاء يُعَد التسويق عبر البريد الإلكتروني بيئةً دائمة التغير، إذ تحتوي على العديد من المتغيرات، وتُحدَّث قائمة عملاء البريد الإلكتروني بما يُعادل كل يومين، وفي كل مرة تُحدِّث بيانات العميل، وهناك احتمالية أن تُعرض رسالتك بطريقة خاطئة (هذا إن وصلت إلى البريد الوارد من الأساس)، فحتى الأخطاء التي تبدو بسيطة قد تؤثِّر على عائدك الاستثماري. من الممكن لرابط لا يعمل أن يُفسد نتائج حملتك، فيقول ٥١٪ من المشتركين أنهم ألغوا اشتراكاتهم في خدمات البريد الإلكتروني لأنها لم تُعرَض أو لم تكن تعمل جيدًا. يساعدنا اختبار البريد الإلكتروني على تكوين رؤى مستقبلية تتخطى منافع اختبار رسالة البريد الإلكتروني وتحليلها مجرد عرضه لمعرفة كيف يبدو، حيث توفر لنا إجراء اختبارات A/B على أحد عناصر البريد الإلكتروني مثل سطر الموضوع، (المقدمة التي تحدد هدف رسائل البريد الإلكتروني) رؤيةً حول أداء أفضل مع الجمهور. ويمكنك كتابة رسائل بريد إلكتروني أكثر تأثيرًا في المستقبل من خلال إجراء اختبارات A/B أو تحليل الرسائل التي حظيت بأكبر قدر من التفاعل. أدوات وأنواع اختبار البريد الإلكتروني قد تعاني بصفتك مسوقًا عبر البريد الإلكتروني من الميزانية المحدودة أو وضيق الوقت، ولذلك ننصح باستخدام أدوات اختبار البريد الإلكتروني، إذا أردت إنجاز أكبر قدر ممكن من العمل في أقل وقت. اختبار ما قبل الإرسال من أجل عملية الإعداد Rendering ومعاينة تجربة العميل إذا أردت أن تبدو رسائلك رائعةً لجميع المشتركين، فأنت بحاجة إلى إجراء اختبار ما قبل الإرسال حتى تتحقق من عرضها وتُعاين تجربة العميل. اختبار عملية الإعداد Rendering عملية الإعداد Rendering هي عملية جمع البيانات وتحميل القوالب، ثم تطبيق البيانات المجمعة على القوالب، وإرسال الخرج النهائي إلى المستخدِم، وهي المسؤولة عن كيفية ظهور البريد الإلكتروني وعمله مع المشتركين. لن يُخرِّب رابط لا يعمل برنامجك التسويقي بأكمله، لكن ما يُزعج المشتركين هي التجربة الرديئة المستمرة، فقد يصل الأمر بهم إلى إلغاء الاشتراك. منصة Litmus تُقدم لك منصة Litmus المدفوعة، مجموعةً متنوعةً من أدوات الاختبار، وأحدها هو اختبار عملية الإعداد Rendering، حيث تتيح لك معاينات Litmus الحية رؤيةً حول كيف ستبدو رسالتك عبر أجهزة العملاء الموجودين في قائمة البريد التي أعددتها، كما وتسمح لك بمتابعة عمليات الإعداد وهي تحدث تلقائيًا، والتركيز على أي مشاكل في العملية لحلها بسرعة. منصة Email on Acid تحتوي منصة Email on Acid المدفوعة أيضًا أدوات لاختبار عملية الإعداد Rendering عبر أكثر من ٩٠ عميل بريد إلكتروني وجهاز، إذ تسمح لك المعاينات الحية على هذه المنصة برؤية ومشاركة عمليات الإعداد على شيفرتك البرمجية Code، حتى تنتبه إلى الأخطاء قبل أن تُرسل الرسائل. اختبار الروابط لأن كل رسالة بريد إلكتروني ترسلها لديها هدف ومهمة محددان في قُمع التسويق، فمن المحتمل أن تحتوي على روابط، ولأن الروابط ضرورية لجلب زيارات العملاء المهتمين، ومساعدتك على تتبع الأداء، فاحرص على أن تكون سليمة. تأكد أيضًا من أن الروابط المضمنة في الرسالة تشير إلى الصفحة الصحيحة، إذ من الشائع نسيان المسوقين لتحديث الروابط إلى عناوين URL الصحيحة أثناء إنشاء حملات جديدة. منصة Litmus إذا أردت مساعدةً في إنشاء قائمة تحتوي على جميع العناصر التي تحتاج التحقق منها قبل ارسال الرسالة، فقد تساعدك قائمة تحقق Litmus في التحقق من مراقبة العناصر المهمة في مرحلة نمو البريد الإلكتروني قبل الإرسال، مثل: الروابط، وحظر الصور. اختبار إمكانية الوصول Accessibility يستحق كل عميل من عملائك نفس تجربة البريد الإلكتروني الرائعة، ويضمن اختبار إمكانية الوصول حدوث ذلك. منصة Litmus ميزة أخرى من مزايا قائمة التحقق قبل الإرسال على هذه المنصة هي مدقق إمكانية الوصول، فعند تشغيل رسالة من خلال الأداة، فستوضع علامة تلقائيًا على كل مشكلة من مشكلات الوصول حتى يتسنى لك معالجتها، وتتضمن بعض نقاط التحقق علامات ALT، أو التسلسل الهرمي للمحتوى، أو قارئ الشاشة، أو توافق الأجهزة المساعدة. الاختبار اليدوي إذا كنت تعمل وِفق ميزانية، أو تريد أن تختبر وصول البريد الإلكتروني بدون استخدام أدوات خارجية، فهناك طرق مجانية لعمل هذا. يستغرق الأمر بعض الوقت، وتزداد احتمالية إغفالك لشيء ما، لكن هذا أفضل من عدم الاختبار على الإطلاق، وتُعد المهام العديدة/ مثل: استخدام التعليق الصوتي Voiceover على هاتف iPhone لقراءة الرسائل، أو عرض الرسالة بدون الصور، أو وضع عمى الألوان جميعها مفيدة. المحتوى و العنوان المسبق بالإضافة إلى التفاصيل الدقيقة أو عناصر البريد الإلكتروني التي يصعب اختبارها، فستحتاج أيضًا إلى التحقق من المحتوى، وسطر الموضوع، ونص العنوان المسبق (النص الملخص الذي يتبع سطر الموضوع عند عرض البريد الإلكتروني قبل فتحه). تغطي معظم برامج اختبار البريد الإلكتروني هذه النقاط، ويمكنك أيضًا مراجعتها يدويًا قبل الإرسال. منصة Email on Acid تمكنك حملة التحقق المسبق في منصة Email on Acid من قصر عملية اختبار البريد الإلكتروني على مراجعة عناصره، مثل: المحتوى، ونص العنوان المسبق، كما تحتوي الأداة أيضًا على خاصية التدقيق الإملائي لتجنب أخطاء الكتابة المحرجة، والكلمات المسيئة. الاختبار اليدوي إذا كنت ترغب في مراجعة البريد الإلكتروني يدويًا، فتأكد من وجود حيز أو مجال في سير العمل من أجل نسختك، إذ تتيح لك أدوات اختبار البريد الإلكتروني المجانية مثل Testsubject رؤية الشكل الذي سيبدو عليه سطر الموضوع، والعنوان المسبق باختلاف الأجهزة. كما يمكنك تصحيح الأخطاء الإملائية عن طريق استخدام الإصدار المجاني من Grammarly لدى الكتابة باللغة الإنجليزية. اختبار معدل التوصيل والتسليم بعد أن يغادر البريد الإلكتروني مزود خدمتك، فيجب أن يعبر بوابتان قبل أن يراه العميل، والبوابة الأولى هي أن يُقبل من قبل خادم المستلِم، وتكون النسبة المئوية لمرات حدوث هذا هي معدلك للتوصيل؛ أما الثانية فهي أن يدخل مجلد البريد الوارد وليس مجلد الرسائل غير المرغوبة، والنسبة المئوية لمرات حدوث هذا هي معدلك للتسليم. من المهم للغاية إجراء اختبار التأكد من عدم حظر رسالتك من قِبل عوامل تصفية الرسائل غير المرغوب فيها أو عناوين البريد الإلكتروني غير الصالحة. التأكد من صحة البريد الإلكتروني يستهلك إرسال بريد إلكتروني إلى عنوان بريد غير صالح من مواردك الثمينة دون داعٍ. صحيح أنه لن يضرك كثيرًا وجود بريد واحد أو اثنين خاطئين في قائمتك ولن يكون له آثار سلبية كبيرة عليك، لكن إذا كنت تدفع مقابلًا لخدمات البريد الإلكتروني بناءً على عدد الرسائل، فاحرص على التأكد من دقة أرقامك. منصة Mailgun تُعَدّ منصة Mailgun المدفوعة خيارًا رائعًا آخر إذا أردت التحقق من صحة قائمة بريدك، حيث تتحقق الخدمة من وجود عناوين البريد الإلكتروني الموجودة في قائمتك عبر عملاء البريد الإلكتروني الرئيسيين، مما يحسن معدلك للتوصيل. منصة Kickbox.io تتحقق أداة Kickbox.io المدفوعة من عناوين البريد الإلكتروني في قائمتك لتخلصك من الارتدادات (رسائل البريد الإلكتروني التي لا يمكن تسليمها إما بسبب فشل الخادم، أو بسبب مشكلات البريد العشوائي)، وتُحسن موضع الحملة. على الرغم من أن الخدمة ليست مجانية، إلا أنها تُعَد استثمارًا جيدًا، حيث تعتمد تكلفة هذه الخدمة على عدد عناوين البريد الإلكتروني في قائمتك، وتتحقق من ٥٠٠ حساب الكتروني مقابل ٥ دولارات فقط، كما أنك لن تحتاج التحقق من قائمتك في كل مرة تُرسل فيها بريدًا إلكترونيًا، فقط اختر عدد مرات التكرار التي تتوافق مع سرعة نمو قائمتك وادفع مقدمًا. تكوين البريد الإلكتروني Email configuration من العوامل الأخرى المؤثرة على معدلاتك للتوصيل والتسليم نجد خادم بريدك الإلكتروني، إذ يتحقق اختبار تكوين بريدك الإلكتروني من خادمك ويقيس زمن الاستجابة. ويمكنك تطبيق هذا الاختبار أيضًا يدويًا، لكنك لن تحتاج إلى عمله كل يوم. منصة Mail-Tester Mail-Tester هي أداة مجانية لتكوين البريد الإلكتروني، حيث تقيس الأداة نسبة احتمالية احتساب البريد الإلكتروني بريدًا غير مرغوب فيه Spammy، وكل ما عليك فعله هو أن ترسل بريدًا إلكترونيًا تجريبيًا إلى عنوان البريد العشوائي الذي يقدمونه، لتتلقى درجة البريد الإلكتروني Spammyness score. وبالإضافة إلى ذلك، تلفت الأداة الانتباه إلى التفاصيل التي تحتاج إلى معالجة لتجنب تصفية البريد الإلكتروني إلى بريد عشوائي Spam أو إلى القوائم السوداء. منصة MX Toolbox ستحتاج إلى معرفة عنوان خادم بريدك الإلكتروني من أجل تكوينه، ومن الأدوات المجانية التي تُمكِّنك من هذا هي أداة MX Lookup. تشتمل الاختبارات المضمّنة في عملية المصادقة Authentication على وقت المعاملة SMTP، والتحقق من صحة اسم المضيف SMTP، وفحص شعار SMTP. اختبار التسليم يمكن تتبع (الارتداد) أو البريد الإلكتروني الذي فشل تسليمه من قِبل معظم مزودي خدمات البريد الإلكتروني، ولكن نظرًا لأنهم لا يوفرون مقاييس مثل هذه، فستحتاج إلى أداة خارجية من أجل تتبع معدلك للتسليم. منصة Everest لقد دُمِجت أداة اختبار معدلات التسليم الرائدة 250ok مع أداة ReturnPath مؤخرًا لإنشاء أداة جديدة تسمى Everest. حيث تُمكِّنك أداة Everest من إجراء التحسينات قبل الإرسال، والتحقق من الأداء، ومراجعة التحليلات بعد الإرسال. وتشمل مراقبة معدل التسليم كلًا من درجات السمعة، وتحذيرات IP، وشكاوى البريد العشوائي، ودرجات المرسل الإجمالية. درجات البريد العشوائي Spam Scores تٌعَد عوامل تصفية البريد العشوائي لعنة مسوقي البريد الإلكتروني. فبينما يوضح معدَّل التوصيل أن كل شيءٍ على ما يرام إلا أن معدل التسليم يظهر في حالة يرثى لها بسبب مجلدات البريد العشوائي التي تدمره. تتحقق أدوات اختبار الرسائل غير المرغوب فيها من مواضعك عند عملاء البريد الإلكتروني لترى إذا كنت مدرجًا في القائمة السوداء، وتجمع درجاتك من الشركات المختلفة لتصفية الرسائل غير المرغوب فيها. منصة Litmus توفِّر منصة Litmus خدمة اختبار البريد العشوائي لعملائها، كما يمكنها الإندماج مباشرةً مع مزود خدمة بريدك الإلكتروني. حيث يتحقق اختبار Litmus من رسائلك عبر عوامل تصفية البريد العشوائي المختلفة، ويصنف كل عامل على أنه ممرر، أو ثانوي، أو أساسي. وإذا حددت المنصة مشكلة ما، فستعلم المشكلات الأكثر أهمية. وتوجد العديد من الأدوات لاختبار عوامل تصفية البريد العشوائي لكن أشهرها أدوات، مثل: Email on Acid، وReturn Path، وSpam Assassin. منصة Is Not Spam تتوفر بعض أدوات اختبار البريد العشوائي المجانية التي تجري الفحوصات لمرة واحدة. تسمح منصة Is Not Spam لك بإرسال بريد إلكتروني اختباري إلى عنوان تجريبي لتتلقى درجة البريد العشوائي Spam Score، وتشمل الاختبارات التي يجرونها كلًا من تحقق نظام التعرف على هوية المرسل SPF، وتحقق معرف المرسل، وتحقق مفاتيح النطاق، وفحص DKIM، وفحص SpamAssassin. سطر موضوع البريد الإلكتروني واختبار الأداء لا يقتصر اختبار البريد الإلكتروني على الجانب التقني فقط، فيُمكننا أيضًا استخدام البريد الإلكتروني للتعرف على الجمهور. ها أنت تستخدم بعض مقاييس البريد الإلكتروني الأولية المتاحة في مزود خدمتك، في ظل وجود أداة مثل Vero يمكنها أن تمدك برؤى أكبر من أجل زيادة تفاعل المشتركين. تحتوي أيضًا هذه الأداة على إرشادات اجراء اختبار A/B، وهذه بعض الاختبارات التي يمكنك مراقبتها باستخدام Vero. أنماط سطر الموضوع والتخصيص يوجد الكثير من الأشياء لاختبارها فيما يخص سطر الموضوع، ويمكنك التحقق لترى ما إذا كان جمهورك يتفاعل بصورة أفضل مع كتابته بـ "طريقة العنوان" (أي جميع الكلمات الرئيسية تكون بأحرف كبيرة، بينما تُكتب الكلمات الصغيرة بحروف صغيرة)، أو بـ "طريقة الجملة" (وهي الطريقة التقليدية لاستخدام الأحرف الكبيرة في الجملة، أو كتابة الكلمة الأولى فقط وأي أسماء علم بأحرف كبيرة)، وهذا بالطبع إن كنت تكتب باللغة الإنجليزية، ولترى أيضًا هل يُفضلون سطر الموضوع الطويل، أم السطر القصير. وما إذا كنت ستستخدم رمزًا تعبيريًا أم لا. يمكنك أيضًا التلاعب في التخصيص داخل سطر الموضوع من خلال تضمين اسم المستلم، أو الصناعة، أو معرف الطلب، أو الموقع، .. أو المزيد. توقيت الإرسال المثالي ما هو أفضل وقت لإرسال رسالتك الإخبارية؟ بناءً على مكان وتفضيلات جمهورك المستهدف، كما ويمكنك زيادة معدلات فتح رسائلك عن طريق تغيير أوقات الإرسال. ولاختبار ذلك قسّم قائمة بريدك الإلكتروني إلى قسمين وحدد وقتين مختلفين من اليوم لإجراء الاختبار، بعدها ابدأ بالاحتفاظ بجزء واحد على أساس عنصر ضابط مع وقت الإرسال العادي، ثم أرسل بعض الرسائل الإخبارية إلى كل عنصر في الأوقات التي حددتها له، وشاهد اختلاف معدلات الفتح ونسب النقر إلى الظهور. نسخة CTA للحث على اتخاذ إجراء تُعَد رسائل البريد الإلكتروني للمعاملات فرصة اختبار رائعة، كونها تذهب دوريًا إلى المشتركين المتفاعلين، ونظرًا لكثرة إرسالها، فيمكنك استخدامها وسيلةً لضبط للرسائل، كما يمكن أن تمنحك العناوين الرئيسية، وأزرار الحث على اتخاذ إجراء رؤى أكبر حول الأشياء الأكثر إرضاءً للمشتركين. أنواع القوالب هل تستحق قوالب HTML المنمقة جهدًا إضافيًا أم يُفضل جمهورك قراءة نصًا بسيطًا؟ يمكنك موازنة أداء أنماط البريد الإلكتروني من خلال الاطلاع على توقيتات التفاعل، ومعدلات التحويل Conversion، قد يفيد أيضًا إجراء هذا الاختبار مع أنواع بريد إلكتروني مختلفة، فقد تجد أن العملاء يفضلون أن تكون الرسائل الترويجية منمقة، ولكن الرسائل الإخبارية يُفضلوها نصية بسيطة مثل تلك التي قد تصلهم من صديق. فيما يلي أمثلة على رسائل البريد الإلكتروني المنمقة مقابل رسائل البريد الإلكتروني ذات النص العادي. عناوين المرسل أحد العناصر الأخرى التي يجب مراعاتها هي عنوان المرسل، إذ يمكن أن يأتي البريد الإلكتروني الترحيبي مثلًأ (هو أول بريد إلكتروني يُرسل من الشركة إلى العميل المحتمل) من عنوان عام للشركة، أو من الرئيس التنفيذي، أو أن يُقدم في صورة مندوب خدمة العملاء. أجرِ اختبارًا لمعرفة كيف تؤثر هذه الاختلافات على معدلات الفتح والتسليم ومواضع البريد الوارد، ونسب النقر لكل ظهور. يمكنك إجراء الاختبارات المسبقة لعملية الإعداد Rendering ولمعدلات التسليم يدويًا، أو باستخدام أدوات مجانية لمرة واحدة فقط، لكن استخدامك الأدوات الآلية سيجعل اختباراتك أكثر كفاءة. ترجمة وبتصرّف للمقال Email testing: What you need to know to get started لصاحبته Stephanie Knapp. اقرأ أيضًا كيفية إجراء اختبار A/B للبريد الإلكتروني بطريقة صحيحة. مجموعة نصائح حول التسويق بالعمولة. التسويق بالبريد الإلكتروني وأهم الخطوات اللازمة لتنفيذ حملة تسويقية ناجحة. لمحة عامة عن الإعلانات الإلكترونية.

تعرفنا في القسم 2 على طريقتين لإضافة التنسيقات إلى التطبيق، الطريقة القديمة باستخدام ملف CSS واحد وطريقة التنسيق المباشر في المكان. مكتبات جاهزة للاستخدام مع واجهة المستخدم UI يمكن استخدام مكتبات جاهزة في إضافة التنسيقات إلى التطبيق. وتعتبر مكتبة الأدوات Bootstrap التي طورتها Twitter، من أكثر إطارات العمل مع واجهة المستخدم شعبية، والتي ستبقى كذلك ربما. ستجد حاليًا عددًا هائلًا من المكتبات التي تنسق واجهة المستخدم، ولديك خيارات واسعة جدًا لا يمكن حصرها في قائمة. تقدم العديد من إطارات عمل UI لمطوري تطبيقات الويب سمات جاهزة و"مكوّنات" كالأزرار والقوائم والجداول. ولقد وضعنا كلمة مكوّنات بين معترضتين لأننا لا نتكلم هنا عن مكوّنات React. تُستخدم إطارات عمل UI عادةً بإدراج ملفات CSS بالإضافة إلى ملفات JavaScript الخاصة بها ضمن التطبيق. تأتي العديد من إطارت عمل UI بنسخ مخصصة للاستخدام مع React، حيث حُوّلت العديد من مكوناتها إلى مكوّنات React. فهنالك نسخ مختلفة من Bootstap مخصصة للعمل مع React مثل reactstrap وreact-bootstrap. سنطلع تاليًا على إطاري العمل Bootstrap وMaterialUI. وسنستخدمهما لإضافة نفس التنسيقات إلى التطبيق الذي أنشأناه في فصل (مكتبة React-Router) من هذا القسم. استخدام إطار العمل React-Bootstrap لنلقي نظرة على Bootstrap مستخدمين الحزمة react-bootstrap. لنثبت هذه الحزمة إذًا: npm install react-bootstrap ثم سنضيف رابطًا لتحميل ملف تنسيق CSS الخاص بالإطار Bootstarp ضمن المعرّف <head> في الملف "public/index.html" <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> // ... </head> سنلاحظ أنّ مظهر التطبيق قد أصبح أفضل عند إعادة تحميله: تصيّر جميع محتويات التطبيق عند استخدام Bootstrap داخل حاوية. ويتم ذلك عمليًا بإعطاء الصفة classname للعنصر <div> الجذري القيمة "container". const App = () => { // ... return ( <div className="container"> // ... </div> ) } وسنجد تأثير ذلك واضحًا على مظهر التطبيق، فلم يعد المحتوى ملاصقًا لحافة المتصفح كما كانت من قبل: لنجري بعض التعديلات على المكوّن Notes، بحيث يصيّر قائمة الملاحظات على شكل جدول. حيث تؤمن React-Bootstrap مكوّن الجدول جاهزًا للاستخدام، فلا حاجة لتعريف أية أصناف CSS مفصلة. const Notes = (props) => ( <div> <h2>Notes</h2> <Table striped> <tbody> {props.notes.map(note => <tr key={note.id}> <td> <Link to={`/notes/${note.id}`}> {note.content} </Link> </td> <td> {note.user} </td> </tr> )} </tbody> </Table> </div> ) لقد أصبح تنسيق التطبيق أفضل: لاحظ أنّه عليك إدراج مكونات React-Bootstrap بشكل منفصل من المكتبة كالتالي: import { Table } from 'react-bootstrap' النماذج لنحسّن نموذج تسجيل الدخول بمساعدة نماذج Bootstrap. تأتي المكتبة React-Bootstrap بمكوّنات مدمجة لإنشاء النماذج (على الرغم من النقص الواضح في توثيق هذا الموضوع): let Login = (props) => { // ... return ( <div> <h2>login</h2> <Form onSubmit={onSubmit}> <Form.Group> <Form.Label>username:</Form.Label> <Form.Control type="text" name="username" /> <Form.Label>password:</Form.Label> <Form.Control type="password" /> <Button variant="primary" type="submit"> login </Button> </Form.Group> </Form> </div> )} سيزداد عدد المكونات التي سندرجها شيئًا فشيئًا: import { Table, Form, Button } from 'react-bootstrap' سيبدو التطبيق بعد التحوّل إلى نموذج Bootstrap كالتالي: التنبيهات سنحسّن التنبيهات أيضًا في تطبيقنا بعد أن حسنّا مظهر النماذج.: لنضف رسالة إلى التنبيهات عندما يسجل المستخدم دخوله إلى التطبيق، وسنخزّنها ضمن المتغير message في حالة المكوّن App: const App = () => { const [notes, setNotes] = useState([ // ... ]) const [user, setUser] = useState(null) const [message, setMessage] = useState(null) const login = (user) => { setUser(user) setMessage(`welcome ${user}`) setTimeout(() => { setMessage(null) }, 10000) } // ... } سنصيّر الرسالة على أنها مكون تنبيه Bootstrap. ولاحظ مجددًا أنّ المكتبة React-Bootstrap ستزودنا بالمكون المقابل لمكون Recat. أدوات التنقل لنغيّر أخيرًا قائمة التنقل في التطبيق مستخدمين المكوّن Navbar من Bootstrap. تزوّدنا المكتبة Bootstrap بمكونات مدمجة مقابلة. لقد وجدنا من خلال المحاولة والخطأ حلًا مرضيًا، على الرغم من التوثيق غير الواضح: <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="mr-auto"> <Nav.Link href="#" as="span"> <Link style={padding} to="/">home</Link> </Nav.Link> <Nav.Link href="#" as="span"> <Link style={padding} to="/notes">notes</Link> </Nav.Link> <Nav.Link href="#" as="span"> <Link style={padding} to="/users">users</Link> </Nav.Link> <Nav.Link href="#" as="span"> {user ? <em>{user} logged in</em> : <Link to="/login">login</Link> } </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> لشريط التنقل الناتج مظهرًا واضحًا ومريحًا: إن تغيّر حجم شاشة العرض على المتصفح، سنجد أن القائمة ستختفي تحت زر "الهامبرغر" وستظهر مجددًا بالنقر عليه: تقدم Bootstrap والعديد من أطر عمل UI تصاميم متجاوبة بحيث تُصيّر التطبيقات بشكل يناسب القياسات المختلفة لشاشات العرض. ستساعدك أدوات تطوير Chrome على محاكاة استخدام التطبيق ضمن متصفحات أنواع مختلفة من الهواتف النقالة: يمكنك أن تجد الشيفرة كاملة على GitHub. إطار العمل Material UI سنلقي نظرة الآن على المكتبة MaterialUI التي تعمل مع React، والتي تستخدم اللغة المرئية لتصميم المواد والمطوّرة من قبل Google. لنثبت هذه المكتبة: npm install @material-ui/core ثم سنضيف السطر التالي إلى المعرّف في الملف "public/index.html"، حيث يحمًل هذا السطر الخط "Roboto" من تصميم Google: <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> // ... </head> سنستخدم الآن MaterialUI لتنفيذ نفس التغييرات التي أجريناها سابقًا باستخدام Bootstrap. سنصيّر التطبيق كاملًا ضمن حاوية: import Container from '@material-ui/core/Container' const App = () => { // ... return ( <Container> // ... </Container> ) } لنبدأ بالمكوّن Note ونصيّر قائمة الملاحظات ضمن جدول. const Notes = ({notes}) => ( <div> <h2>Notes</h2> <TableContainer component={Paper}> <Table> <TableBody> {notes.map(note => ( <TableRow key={note.id}> <TableCell> <Link to={`/notes/${note.id}`}>{note.content}</Link> </TableCell> <TableCell> {note.name} </TableCell> </TableRow> ))} </TableBody> </Table> </TableContainer> </div> ) ستبدو النتيجة كالتالي: إنّ إدراج كل مكون بشكل منفصل، هي إحدى المزايا غير المرضية في MaterialUI. إذ تكون قائمة المكوّنات التي سندرجها طويلة: import { Container, Table, TableBody, TableCell, TableContainer, TableRow, Paper, } from '@material-ui/core' النماذج سنحسّن مظهر نموذج تسجيل الدخول باستخدام المكوّنين TextField وButton const Login = (props) => { const history = useHistory() const onSubmit = (event) => { event.preventDefault() props.onLogin('mluukkai') history.push('/') } return ( <div> <h2>login</h2> <form onSubmit={onSubmit}> <div> <TextField label="username" /> </div> <div> <TextField label="password" type='password' /> </div> <div> <Button variant="contained" color="primary" type="submit"> login </Button> </div> </form> </div> ) } وستكون النتيجة كالتالي: لا تؤمن MaterialUi مكون خاص بالنماذج كما في Bootstrap. فالنموذج هنا هو نموذج HTML نظامي. وتذكر أن تدرج كل المكوّنات الموجودة في النموذج. التنبيهات يمكن عرض التنبيهات باستخدام المكون Alert والذي يشابه تمامًا المكون المقابل في Bootstarp: <div> {(message && <Alert severity="success"> {message} </Alert> )} </div> لا تتضمن الحزمة الأساسية للإطار MaterialUI المكوّن Alert بعد، لذلك لا بد من تثبيت الحزمة lab لاستخدامه: npm install @material-ui/lab وبعدها يمكننا إدراج المكوّن كالتالي: import { Alert } from '@material-ui/lab' سيبدو التنبيه أنيق المظهر: أدوات التنقل يمكننا إدراج أدوات التنقل باستخدام المكوّن AppBar . فلو استعملنا المثال الوارد في التوثيق: <AppBar position="static"> <Toolbar> <IconButton edge="start" color="inherit" aria-label="menu"> </IconButton> <Button color="inherit"> <Link to="/">home</Link> </Button> <Button color="inherit"> <Link to="/notes">notes</Link> </Button> <Button color="inherit"> <Link to="/users">users</Link> </Button> <Button color="inherit"> {user ? <em>{user} logged in</em> : <Link to="/login">login</Link> } </Button> </Toolbar> </AppBar> سيفي ذلك بالغرض، لكن يمكن أن نحسن شريط التنقل أكثر: حيث ستجد طرقًا أفضل ضمن التوثيق. إذ يمكن استخدام خصائص المكوّن لتحديد الطريقة التي يُصير بها العنصر الجذري لمكوّن MaterialUI، وذلك كما يلي: <Button color="inherit" component={Link} to="/"> home </Button> سيُصيّر المكون Botton بجيث يكون مكوّنه الأب (الجذري) هو المكوّن Link من المكتبة react-router-dom ويستقبل مساره من خلال الخاصية to. ستكون شيفرة أدوات التنقل كالتالي: <AppBar position="static"> <Toolbar> <Button color="inherit" component={Link} to="/"> home </Button> <Button color="inherit" component={Link} to="/notes"> notes </Button> <Button color="inherit" component={Link} to="/users"> users </Button> {user ? <em>{user} logged in</em> : <Button color="inherit" component={Link} to="/login"> login </Button> } </Toolbar> </AppBar> وستظهر النتيجة كالتالي: ستجد الشيفرة كاملة على GitHub. أفكار ختامية ليس هناك خلاف واسع بين react-bootstrap وMaterialUI. وسيكون الخيار لك. ويشير معد هذا المنهاج إلى أنه استخدم MaterialUi كثيرًا وكانت انطباعاته الأولى إيجابية. فتوثيق المكتبة أفضل قليلًا. وبناء على إحصاءات موقع https://www.npmtrends.com/ الذي يتابع شعبية مكتبات npm المختلفة فقد تجاوزت شعبية MaterialUI مكتبةReact-Bootstrap عام 2020: لقد استخدمنا في الأمثلة السابقة إطارات عمل UI بالاستعانة بمكتبات React-integration بدلًا من المكتبة React Bootstrap. وقد كان بمقدورنا استخدامها مباشرةً بتعريف أصناف CSS ضمن عناصر HTML في التطبيق، بدلًا من تعريف الجدول كمكوّن آخر هو Table على سبيل المثال: <Table striped> // ... </Table> حيث يمكننا استخدام جدول HTML اعتيادي وتزويده بصنف CSS المطلوب: <table className="table striped"> // ... </table> لن تتوضح فكرة استخدام React-Bootstrap من خلال هذا المثال. فبالإضافة إلى جعل شيفرة الواجهة الأمامية أكثر اختصارًا وأكثر قابلية للقراءة، فالفائدة الأخرى لاستخدام مكتبات React UI هي أنها تتضمن شيفرة JavaScript اللازمة لعمل بعض المكونات الخاصة. إذ تتطلب بعض مكونات React اعتماديات JavaScript والتي نفضل عدم إدراجها في تطبيقات React. إنّ بعض سلبيات استخدام إطارات عمل UI من خلال مكتبات التكامل بدلًا من استخدامها مباشرةً، هي احتمال وجود واجهات برمجية غير مستقرة ضمن تلك المكتبات أو أنها قد تعاني نقصًا في توثيقها. إلّا أنّ حالة Semantic UI React مثلًا أفضل بكثير من غيرها من إطارت عمل UI، كونها مكتبة تكامل رسمية من مكتبات React. وهنالك أيضًا تساؤلات حول ضرورة أو عدم ضرورة استخدام إطارت عمل UI أصلًا. وهذا أمر عائد لكل شخص. أما بالنسبة إلى الأشخاص الذين تنقصهم المعرفة بتنسيقات CSS وتصميمات الويب فهي قطعًا أدوات مفيدة. أطر عمل UI أخرى سنقدم لك قائمة بأكثر عمل UI قد تناسبك. فإن لم تجد الإطار المفضل لديك موجودًا بينها، فقدم طلب إلغاء هذه القائمة من مادة المنهاج. https://bulma.io https://ant.design https://get.foundation https://chakra-ui.com https://tailwindcss.com المكتبة Styled components هناك أيضًا طرق أخرى في تنسيق تطببيقات React لم نأت على ذكرها بعد. منها المكتبة والتي تقدم طريقة مهمة في تنسيق العناصر من خلال قوالب موسومة مجردة ظهرت للمرة الأولى مع ES6. لنجري بعض التغييرات على تنسيق تطبيقنا بمساعدة المكتبة السابقة، لكن علينا أولًا تثبيت الحزمة كالتالي: npm install styled-components لنعرّف مكوّنين يحملان معلومات تنسيق كالتالي: import styled from 'styled-components' const Button = styled.button` background: Bisque; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid Chocolate; border-radius: 3px; ` const Input = styled.input` margin: 0.25em; ` تنشئ الشيفرة السابقة نسختين تحملا تنسيقًا من عنصرين هما input وbutton، ومن ثم تسندهما إلى متغيرين يحملان الاسم ذاته. إنّ الطريقة التي يُعرّف بها التنسيق مميزة، حيث عُرّفت قواعد تنسيق CSS داخل أقواس. وسيعمل المكوّن الذي يحمل تنسيقًا بنفس الطريقة التي يعمل بها الزر أو عنصر الإدخال النظاميين، كما يمكن استخدامهما بالطريقة ذاتها: const Login = (props) => { // ... return ( <div> <h2>login</h2> <form onSubmit={onSubmit}> <div> username: <Input /> </div> <div> password: <Input type='password' /> </div> <Button type="submit" primary=''>login</Button> </form> </div> ) } لننشئ عدة مكونات أخرى لتنسيق هذا التطبيق، وهي عناصر خاضعة للتنسيق كالتالي: const Page = styled.div` padding: 1em; background: papayawhip; ` const Navigation = styled.div` background: BurlyWood; padding: 1em; ` const Footer = styled.div` background: Chocolate; padding: 1em; margin-top: 1em; ` لنستخدم هذه المكوّنات في التطبيق: const App = () => { // ... return ( <Page> <Navigation> <Link style={padding} to="/">home</Link> <Link style={padding} to="/notes">notes</Link> <Link style={padding} to="/users">users</Link> {user ? <em>{user} logged in</em> : <Link style={padding} to="/login">login</Link> } </Navigation> <Switch> <Route path="/notes/:id"> <Note note={note} /> </Route> <Route path="/notes"> <Notes notes={notes} /> </Route> <Route path="/users"> {user ? <Users /> : <Redirect to="/login" />} </Route> <Route path="/login"> <Login onLogin={login} /> </Route> <Route path="/"> <Home /> </Route> </Switch> <Footer> <em>Note app, Department of Computer Science 2020</em> </Footer> </Page> ) } ستظهر النتيجة كالتالي: تزداد شعبية هذه المكتبة في الآونة الأخيرة، وقد اعتبرها العديد من المطورين بأنها أفضل الطرق في تنسيق تطبيقات React. التمارين يمكن أن تجد التمارين التي تتعلق بمواضيع هذا الفصل، في الفصل الأخير من هذا القسم ضمن مجموعة التمارين (توسيع تطبيق قائمة المدونات). ترجمة -وبتصرف- للفصل More About Styles من سلسلة Deep Dive Into Modern Web Development