لفظ مصطلح تطبيق الويب التقدمي progressive web application -ويختصر إلى PWA- يُعَد إشاعة مدوِّية، فمن المراهن أن تطبيقات الويب التقدمية مجرد مواقع ويب، إذ يُقِر توثيق PWA في Microsoft بهذا، وموقع web.dev يتفق مع هذا الإعتبار، وحتى مرشّحَي PWA فرانسيس بيريمان Frances Berriman وأليكس راسل Alex Russell يقولا ذلك أيضًا.

أجل، تطبيقات الويب التقدمية PWAs هي مجرد مواقع ويب، لكنها في الوقت نفسه أكثر من ذلك بكثير، إذا طوِّر تطبيق PWA على أكمل وجه، فلن يبدو وكأنه موقع ويب، بل سيبدو كتطبيق حقيقي real app، لكن ماذا يعني أنْ يبدو موقع الويب كتطبيق حقيقي؟

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

تطبيق Apple Podcasts على iPhone وmacOS (المصدر)

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

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

إمكانية التشغيل دون اتصال بالشبكة

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

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

تطبيق Podcasts دون اتصال بالشبكة.

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

يمكنك قراءة المقال The App Shell Model لمعرفة كيفية تطبيق هذا النموذج المعماري على تطبيق الويب الخاص بك.

المحتوى متاح والوسائط قابلة للتشغيل دون اتصال

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

يمكن تشغيل حلقات البث الصوتي المحملة حتى دون اتصال بالشبكة.

يمكن تقديم محتوى الوسائط المحملة مسبقًا من ذاكرة التخزين المؤقت cache، مثلًا باستخدام استراتيجية تخديم مقاطع الصوت والفيديو المخزنة مؤقتًا serve cached audio and video والتي تقدمها مكتبة Workbox. يمكن دائمًا تخزين المحتويات الأخرى في ذاكرة التخزين المؤقت أو في قاعدة البيانات المفهرسة IndexedDB.

إذا كان لديك بيانات يجب تخزينها تخزينًا دائمًا دون التعرض لاحتمال زوالها عند انخفاض حجم الذاكرة المتاح؛ فيمكنك استخدام الواجهة البرمجية Persistent Storage API (التخزين الثابت) التي تعمل في الخلفية.

خلفية تنزيل استباقية

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

بعد الاشتراك في سلسلة حلقات بث ما، تُنزّل أحدث حلقة منها مباشرة.

تنزيل أحد حلقات بث ما قد يستغرق وقتًا طويلًا، لذا تتيح لك الواجهة البرمجية fetch التي تعمل في الخلفية Background Fetch API تفويض عمليات التنزيل إلى المتصفح الذي يعتني بها في الخلفية، وفي نظام Android، يمكن للمتصفح بدوره تفويض مهمة التنزيل هذه إلى نظام التشغيل، بالتالي لا يلزم إبقاء المتصفح مُشغّلًا، وبمجرد اكتمال التنزيل، يتم إيقاظ عامل خدمة تطبيقك service worker وبذلك يمكنك تحديد ماذا تفعل في الاستجابة.

المشاركة والتفاعل مع التطبيقات الأخرى

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

مشاركة حلقة بث على تطبيق الرسائل.

كيف تفعل هذا في الويب؟ تتيح الواجهتان البرمجيتان Web Share وWeb Share Target (مشاركة وُجْهِة الويب) لتطبيقك مشاركة واستقبال النصوص والملفات والروابط من وإلى التطبيقات الأخرى على جهاز المستخدم.

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

ويمكنك في نظام Android استخدام الواجهة البرمجية Contact Picker API التي تعمل في الخلفية لاختيار جهات اتصال معينة كمدخلات لأحد التطبيقات.

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

تحديث التطبيق في الخلفية

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

إعداد Podcasts لمراقبة حلقات البث الجديدة كل ساعة.

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

الحالة متزامنة عبر السحابة

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

الحالة متزامنة عبر التخزين السحابي.

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

التحكم في التطبيق عبر أزرار الجهاز

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

التحكم بتطبيق Podcasts عبر مفاتيح الوسائط (المصدر).

تدعم الواجهة البرمجية media session (جلسة الوسائط) التي تعمل في الخلفية Media Session API أزرار الوسائط في الجهاز، بهذا يمكن للمستخدمين الاستفادة من أزرار وسائط الأجهزة ضمن لوحات المفاتيح أو سماعات الرأس أو حتى أزرار وسائط البرامج في ساعاتهم الذكية، للتحكم في تطبيق الويب.

تعدد المهام واختصارات التطبيق

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

تنفيذ مهام متعددة والرجوع لتطبيق Podcasts.

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

إدراج إجراءات التطبيق الشائعة ضمن قائمة مختصرة

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

الإجراءات السريعة متاحة مباشرة من أيقونة التطبيق.

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

في أنظمة التشغيل مثل macOS، يمكن للمستخدمين أيضًا النقر بزر الفأرة الأيمن فوق أيقونة التطبيق وتعيين التطبيق ليعمل فور تسجيل الدخول للنظام run on login.

التصرف كتطبيق افتراضي

يمكن أن تتكامل تطبيقات iOS المختلفة مع تطبيق Podcasts وحتى مواقع الويب و تطبيقات البريد الإلكتروني، وذلك من خلال البروتوكول podcasts://‎، فإذا كنت في المتصفح وتوجهت لرابط مثل

podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903

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

فتح تطبيق Podcasts مباشرة من خلال المتصفح.

كيف يعمل هذا الويب؟ لا يمكن معالجة بروتوكولات مخصصة من الروابط حتى اللحظة، لكن هناك عمل مستمر لاقتراح معالجة بروتوكول URL لتطبيقات الويب التقدمية. حاليًا تُعد الدالة registerProtocolHandler مع البادئة web+‎ الخيار الأمثل لفعل ذلك.

تكامل نظام الملفات المحلي

قد لا تلمَح مباشرة أن تطبيق Podcasts يتكامل بشكل طبيعي مع نظام الملفات المحلي. يَحفظ تطبيق Podcasts بياناته في المسار التالي على حاسوبك:

~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts

وتمثِّل ملفات التخزين المؤقت cache قسم التنزيلات أو المحتوى المتاح بلا اتصال، وذلك في المسار التالي:

~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache

حلقات البث مخزنة في مجلد خاص بالتطبيق في نظام.

في الويب، تمكِّن الواجهة البرمجية File System Access (الوصول إلى ملفات النظام) المطورين من الوصول إلى نظام الملفات المحلي للجهاز. يمكنك استخدام هذه الواجهة مباشرة أو عبر مكتبة browser-fs-access التي توفر للمتصفحات وصولًا احتياطيًا لملفات النظام.

لأسباب تتعلق بالأمان لا يمكن الوصول لمجلدات النظام عبر الويب.

شكل المنصة ومظهرها

هناك شيء جلي وواضح بالنسبة لتطبيقات iOS الشبيهة بتطبيق Podcasts، وهو أنه لا يمكن تحديد العناوين labels ونوع الخط فيها هو نفس نوع خط نظام الجهاز، كما يؤخَذ اختيارك لتعيين مظهر التطبيق (الوضع الليلي والنهاري) بعين الاعتبار.

تطبيق Podcasts يدعم الوضعين المضيء والمظلم.

يستخدم التطبيق نوع الخط الافتراضي للنظام.

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

تمكنك القيمة system-ui للخاصية font-family من استخدام خط واجهة المستخدم الافتراضي للنظام في تطبيقك.

أخيرًا يمكن أن يُعرض تطبيقك بمظهر المستخدم المفضل من خلال الاعتناء بخيار prefers-color-scheme (نظام الألوان المفضل) للمستخدم مع مفتاح اختياري لتبديل المظهر من مضيء إلى مظلم.

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

شريط عنوان مخصص

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

أشرطة العنوان المخصصة لكلًا من Safari و Podcasts.

في الويب، يمكنك ضبط خاصيتَي display و theme-color في ملف بيان تطبيق الويب لتحديد شكل وأسلوب عرض نافذة تطبيقك وتحديد أيٍ من عناصر تحكم المتصفح الافتراضية يجب أن يظهر.

حركات سلِسة

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

الحركات داخل Podcasts مثل الفتح السلس للواجهة المسحوبة.

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

يمكن تحسين حركات التمرير الشائعة في المحتوى المقسم إلى صفحات مرقمة paginated أو في الوسائط متكررة العرض carousels؛ باستخدام ميزة تمرير css السلس CSS Scroll Snap، أو يمكنك استخدام الواجهة البرمجية Web Animations لتحكم كامل فيها.

ظهور المحتوى خارج التطبيق

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

ظهور محتوى التطبيق خارج تطبيق Podcasts الرئيسي.

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

يمكنك مساعدة محركات البحث والمساعدين الافتراضيين مثل Google Assistant في تقديم ما يعرضه موقعك بشكل مثالي من خلال تحديد المحتوى المثير للاهتمام في تطبيقك باعتباره مناسب أن يُعاد كصوت يمكن التحدث به speakable، وأيضًا باستخدام البيانات المُهيكلية structured-data في موقعك.

وِدجت شاشة القفل للتحكم في وسائط التطبيق

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

التحكم في الوسائط المشغلة في التطبيق من شاشة القفل.

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

دفع الإشعارات

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

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

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

يمكنك فعل ذلك في الويب عبر الواجهة البرمجية Push API التي تعمل في الخلفية إذ تتيح لتطبيقك بتلقي الإشعارات حتى تتمكن من إشعار المستخدمين بالأحداث الملاحظة حول تطبيق الويب التقدمي، وبالنسبة للإشعارات التي يجب إطلاقها في وقت محدد مستقبلًا والتي لا تتطلب اتصالاً بالشبكة فيمكنك استخدام الواجهة البرمجية Notification Triggers API (مُطْلِق الإشعارات) التي تعمل في الخلفية.

شارات أيقونة التطبيق

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

تُعد الشارات طريقة ماكرة لشد المستخدم على فتح التطبيق.

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

أسبقية تشغيل الوسائط على إعدادات توفير الطاقة

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

تبقي التطبيقات الشاشة فعالة.

في الويب، تتيح لك الواجهة البرمجية Screen Wake Lock API (قفل إيقاظ الشاشة) التي تعمل في الخلفية إمكانية منع إيقاف تشغيل الشاشة لسبب ما، وبالنسبة للويب فإن تشغيل الوسائط يمنع نظام التشغيل تلقائيًا من الدخول في وضع السكون sleep.

استكشاف التطبيق في متجر التطبيقات

يعد تطبيق Podcasts جزءًا من تجربة سطح مكتب نظام macOS، لكن على نظام iOS فيجب تثبيته من متجر App Store. بالبحث السريع عن "podcast" أو "podcasts" أو"apple podcasts" فإن Podcasts يبرز فورًا في متجر التطبيقات.

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

لا تسمح Apple بنشر تطبيقات ويب تقدمية في متجر App Store، لكن في نظام Android يمكنك تغليف تطبيق الويب التفاعلي الخاص بك في فاعليِّة ويب موثوق Trusted Web Activity (حاوية container تجعله يتصرف كتطبيقات الهواتف المعيارية).

يجعل سكربت bubblewrap عملية رفع تطبيق PWA على المتجر أمرًا يسيرًا عبر واجهة سطر الأوامر، وهو أيضًا من يُشغِّل داخليًا ميزة تصدير تطبيقات Android عبر الأداة PWABuilder أو باني تطبيق PWA، الممكن استخدامها لرفع التطبيقات على المتجر دون الاستعانة بسطر الأوامر.

الخلاصة

تطوّرت تطبيقات الويب التقدمية PWAs كثيرًا منذ ظهورها عام 2015، ويعمل فريق Chromium (المتصفح الحر الذي بني عليه متصفح كروم) الآن في سياق مشروع Fugu على سد النقص فيها.

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

ترجمة -وبتصرف- للمقال Make your PWA feel more like an app من موقع web.dev

اقرأ أيضًا

• ما هي تطبيقات الويب التقدمية PWA؟
• ميزات تطبيق الويب التقدمي PWA
• نماذج اقتراحات تثبيت تطبيقات الويب التقدمية PWA
• توفير تجربة تثبيت مخصصة داخل تطبيق الويب التقدمي PWA
• النسخة العربية الكاملة من كتاب أنظمة التشغيل للمبرمجين

للعديد من التطبيقات التي تشغلها على حاسوبك واجهة مستخدم، تحتوي غالبًا على أزرار للنقر أو أيقونات للسحب أو حقول نصية للكتابة فيها، وتستخدم بعض التطبيقات الطرفية terminal (أو سطر الأوامر) واجهةً لها، حيث يكتب المستخدم الأوامر بدلاً من النقر فوق الأزرار أو سحب الأيقونات، وتخصَّص الواجهة البرمجية للتطبيقات Application Programming Interface -واختصارًا API- للتطبيقات بدلًا من المستخدمين.

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

البرمجة المبسطة باستخدام الواجهة البرمجية للتطبيقات API

من ميزات الواجهة البرمجية للتطبيقات قدرتها على إخفاء متطلبات التعليمات البرمجية المعقدة عن المستخدم، فعلى سبيل المثال، هذا برنامج بسيط مكتوب بلغة C لطباعة جملة "Hello world" على الشاشة:

#include <stdio.h>

int main(int argc, char *argv[]) {
    int i;
    for(i=1;i<argc;i++) {
        printf("%s\n",argv[i]);
    }
    return 0;
}

يمكن للواجهة البرمجية للتطبيقات المكتوبة لإخراج نفس النتيجة أي طباعة جملة "Hello world" أن تبسط التعليمات البرمجية تبسيطًا كبيرًا، وفيما يلي واجهة برمجية لتطبيقات وهميةً مثالًا على ذلك:

cprint(hello_msg)

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

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

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

ومن أمثلة ذلك إصدار API الذي نُفذ بواسطة مضيف Git مفتوح المصدر GitLab، حيث يحتوي GitLab على واجهة برمجية للتطبيقات غنية بالميزات تساعد المطورين على تحديد أحدث إصدارات برامجهم، ويمكن للمبرمجين إنشاء إصدار من خلال واجهة الويب في GitLab، إلا أن العديد من المطورين يفضلون أتمتة العملية بحيث لا نحتاج للنقر يدويًا عبر شاشات الخيارات، ويتيح GitLab إرسال الأوامر عبر بروتوكول HTTP باستخدام طريقة الإرسال POST، وهذا مثال عن ذلك:

$ curl --header 'Content-Type: application/json' \
--header "PRIVATE-TOKEN: example_token" \
  --data '{ "name": "Release", "tag_name": "2.4", "description": "Fixed Makefile.am" }' \
  --request POST https://gitlab.com/api/v4/projects/trashy%2Ftrashy

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

مفتاح الواجهة البرمجية للتطبيقات API

نلاحظ في مثال GitLab أن مفتاح الواجهة البرمجية للتطبيقات API key كان مطلوبًا، ووظيفته هي نفس وظيفة اسم المستخدم وكلمة المرور في الواجهات التفاعلية، ولكن سيكون تقديم حقل اسم مستخدم وكلمة مرور -مثل الذي تراه عند تسجيل الدخول للتحقق من بريدك الإلكتروني- معقدًا؛ لأنه من المتوقع أن يكون الكيانان المتفاعلان من خلال الواجهة أجهزة حاسوب، لذا يُصدر للمبرمج مفتاح الواجهة البرمجية للتطبيقات يضمَّن في التعليمات البرمجية المكتوبة ليتمكن من التفاعل مع الواجهة.

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

الفرق بين حزمة أدوات تطوير البرامج SDK والواجهات البرمجية للتطبيقات API

تجرد الواجهة البرمجية للتطبيقات الدوال البرمجية لتطبيق عن أدوات التحكم بها، أما حزمة أدوات تطوير البرامج SDK فهي دوال البرمجة للتطبيق حرفيًا.

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

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

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

إنشاء واجهة برمجية للتطبيقات API

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

يمكن كتابة API بأي لغة برمجة، وكُتِب العديد منها بلغة Java بمساعدة البرامج الوسيطة middleware مثل JBoss وscale3، بينما كُتب البعض الآخر بلغة Python باستخدام Flask أو Django أو Pyramid، بينما لا يزال البعض الآخر مكتوبًا بلغات Ruby وPerl وLua وC و++C وNET.، وأي لغة أخرى تقريبًا.

الواجهة البرمجية للتطبيقات من نمط RESTful

وصف الدكتور روي فيلدنغ Roy Fielding في إحدى أطروحاته أسلوب API الذي أسماه "Representational State Transfer"، والذي يعرف اختصارًا REST، وهنالك عدد من المعايير والشروط التي تجعل الواجهة البرمجية واجهةً من النمط RESTful، ومن أهمها أن تكون عديمة الحالة statelessness، أي أن لا يخزن الخادم (وهو جانب الواجهة البرمجية للتطبيقات الذي يتخذ إجراءً بناءً على الطلبات الواردة من العميل) أي بيانات للمستخدم، وأن يستلم كل ما يحتاجه من البيانات منه، أي يجب أن تحتوي الواجهة البرمجية للتطبيقات من النمط RESTful على استدعاءات مصممة لتوفير جميع البيانات اللازمة لإكمال التفاعل.

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

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

الاستفادة من الواجهة البرمجية للتطبيقات

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

لمعرفة المزيد حول الواجهة البرمجية للتطبيقات يمكنك الرجوع إلى المقالات ضمن وسم api

ترجمة -وبتصرف- للمقال ?What is an API من موقع opensource.com.

اقرأ أيضًا

• مقدمة إلى واجهة برمجة التطبيقات Stream API في جافا
• إنشاء واجهة برمجية API في Laravel 5
• الواجهة البرمجية fetch في JavaScript
• إنشاء واجهة برمجية بسيطة باستخدام إطار العمل المصغّر Lumen

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

سنشرح في هذا المقال من سلسلة تعلم البرمجة:

• الحالات التي تستدعي IPC وأسبابها.
• أساسيات الأنابيب pipes.
• نسخ العمليات باستخدام os.fork()‎.
• التواصل من خلال الأنابيب.
• إنهاء العمليات باستخدام os.kill()‎.

تعريف التواصل بين العمليات

التواصل بين العمليات inter-process communication واختصارًا IPC، هو آلية تمكّن عمليةً ما من التواصل وتبادل البيانات مع عملية أخرى، وقد شرحنا في المقال السابق: استخدام نظام التشغيل أن العملية برنامج تنفيذي، وأنها تستطيع التواصل مع غيرها من العمليات باستخدام المزايا الموجودة في وحدة subprocess، وعلى الرغم من أن هذه التقنيات مفيدة في التواصل مع البرامج الأخرى، إلا أنها لا توفر التحكم الدقيق المطلوب أحيانًا للتطبيقات الكبيرة، فمن الشائع في تلك التطبيقات استخدام عدة عمليات في نفس الوقت، بحيث تنفذ كل منها مهمةً مستقلةً، وتطلب بقية العمليات خدمات منها، فمثلًا قد يكون لخادم الويب عملية تراقب طلبات الويب من المتصفحات وتخدمها في صفحات HTML بسيطة، لكنه يستخدم عمليةً أخرى لتوفير طلبات البيانات الأعقد، وربما عملية أخرى لمعالجة طلبات ftp، وتُصمم كل عملية بحيث تنفذ مهمةً واحدةً فقط بكفاءة عالية، ويسمح هذا التصميم للمدير بمشاركة حمل المعالجة مع عدة عمليات، فإذا كان لدينا طلبات ftp كثيرة مثلًا، فيمكن بدء عملية ftp جديدة، وتوزيع طلبات ftp على العمليتين.

أهمية التواصل بين العمليات

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

هل تشبه هذه التقنية تقنية العميل/الخادم؟

يكثر استخدام مصطلح العميل/الخادم في التطبيقات التجارية، وهو مصطلح خاص بمعمارية البرمجيات، ويشير إلى نوع محدد من إعدادات التواصل بين العمليات، ترسل فيه إحدى العمليات -وهي العميل client- طلبات إلى عملية أخرى -هي الخادم server-، لكن الخادم لا يطلب أي شيء أبدًا من العميل، وقد يكون لدينا عدة عمليات من نوع "العميل" تصل إلى خادم واحد، ويمكن لذلك الخادم نفسه أن يكون عميلًا لخوادم أخرى، فيما يعرف بحوسبة العميل/الخادم متعدد المستويات N-Tier Client/Server، التي تستخدم التواصل بين العمليات، إلا أنه لا يُشترط أن تكون تقنية التواصل بين العمليات مبنيةً على تقنية العميل/الخادم، ومن الممكن أن يكون لدينا شبكة من العمليات ترسل كل منها رسائل إلى بقية العمليات دون أي تخطيط ثابت بين العملاء والخوادم، ويُسمى هذا بحوسبة النِد للنِد peer-to-peer computing، وقد يبدو هذا نموذجًا جذابًا إلا أنه صعب الإدارة إذا زاد عدد العمليات، لذا يظل النموذج التقليدي للعميل/الخادم هو الأكثر استقرارًا والأسهل في تصميمه وتشغيله.

هل لهذه التقنية علاقة بالعتاد؟

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

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

يمكن ملاحظة تشابه هذه المصطلحات مع تلك المستخدمة في البرمجة كائنية التوجه، لأن استخدام الرسائل بين العمليات يشبه إرسال الرسائل بين الكائنات في البرمجة الكائنية، وفعليًا توجد الكثير من الأمور المشتركة بين النموذج الكائني ونموذج التواصل بين العمليات، وقد طُورت بعض معماريات IPC لتستفيد من هذه الأوجه المشتركة، مثل معمارية وسيط طلب الكائن المشترك Common Object Request Broker أو COBRA اختصارًا، حيث نسجل الكائنات في تلك المعمارية مع وسيط طلب لكائن مركزي ORB، وتُوجَّه الرسائل المرسَلة إلى الكائن من أي مكان في الهيكل إلى العملية التي سجلت الكائن، ولن ننظر فيها هنا، ويمكن العودة إلى تطبيقات بايثون لوسطاء طلبات الكائنات المركزية ORB لمزيد من المعلومات.

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

تعريف الأنبوب Pipe

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

يمكن توضيح استخدام الأنابيب مثل قنوات بين العمليات كما يلي:

نرى هنا عمليتين سميناهما Parent وChild، لأسباب ستبينها بعد قليل، وتستطيع عملية Parent أن تكتب في Pipe A، وتقرأ من Pipe B، أما عملية Child فتستطيع القراءة من Pipe A والكتابة في Pipe B، ويُستخدم كل أنبوب لإرسال طلب أو إعادة بيانات وفقًا للعملية التي بدأت عملية التبادل، ويعطينا ذلك تحديًا مثيرًا للاهتمام في سبب تسمية الأنابيب.

سنكتب الآن بعض التعليمات البرمجية لنرى كيف يمكن بناء آلية IPC باستخدام بايثون، وسيكون المبدأ العام هو إنشاء عملية تكون أصلًا parent وتفتح أنبوبين، ثم نشتق نسخةً منها لتكون فرعًا فيه نفس الأنبوبين، ثم نستخدم الأنابيب للتواصل بين الأصل والفرع، وأول ما سنفعله هو معرفة كيفية استخدام الأنابيب لإرسال البيانات واستلامها، حيث سننشئ أنبوبًا باستخدام دالة os.pipe()‎ تعيد اثنين من واصفات الملفات، واحد لكل طرف من أطراف الأنبوب، ثم نستخدم دوال os.read/write لإرسال البيانات في الأنبوب:

import os

# أنشئ الأنبوب
receive, transmit = os.pipe()

data = 'Here is a data string'
length = os.write(transmit, bytes(data, 'utf8'))
print('Length of data sent: ', length)

# 1024 مخزن مؤقت حجمه 
# لضمان استقبال جميع البيانات
print( 'The pipe contains:', os.read(receive, 1024).decode('utf8') )

لاحظ أننا نحتاج إلى تحويل البيانات من وإلى مصفوفات البايتات byte arrays، تحويلًا مشتركًا مع معظم عمليات مستوى النظام، ويحدث كل ذلك في عملية واحدة، لذا لا يكون ذا فائدة كبيرة، لكننا نستطيع فصل شيفرة القراءة والكتابة والبدء في تنفيذ شيء ما، بمجرد استنساخ عمليتنا، فكيف ننشئ عملية الاستنساخ تلك؟

عمليات الاستنساخ

إن الآلية المستخدمة في توليد الفروع spawning أو اشتقاقها forking هي استخدام استدعاء النظام os.fork()‎ الذي يعيد قيمًا مختلفةً وفقًا لمكاننا في العملية الأصل أو الفرع، وتكون قيمة الإعادة في العملية الأصلية هي معرِّف العملية أو pid للعملية الفرع، اما إذا كنا في العملية الفرع فستكون قيمة إعادة fork صفرًا، وهذا يعني أنه سيكون لدينا في الشيفرة تعليمة if تتحقق من قيمة إعادة fork()‎، فإن كانت صفرًا فستنفَّذ دوال العملية الفرع، وإن لم تكن كذلك فستنفَّذ دوال العملية الأصل، ويفضَّل وضع الدوال في وحدات منفصلة واستدعاؤها حسب الحاجة، للسيطرة على مجريات التنفيذ، إلا أننا لن نفعل ذلك هنا لأن الشيفرة قصيرة وستكفينا قائمة واحدة، ونعيد التذكير هنا أن ويندوز لا يفعل هذا، أي لا يدعم دالة fork()‎، لذا لن تعمل الشيفرة في ويندوز، وسيضطر مستخدم ويندوز إلى الانتظار إلى الفصل التالي ليعرف كيفية كتابة برامج العميل/الخادم.

سننشئ الآن عمليةً فرعيةً تستطيع إجراء عملية بسيطة لتنسيق النصوص، وتعيد القيمة التي نمررها إليها مسبوقةً ومتبوعةً بالجملة Ni.

import os,signal

# أنشئ الأنابيب

ServerReceive,ClientSend = os.pipe()
ClientReceive, ServerSend = os.pipe()

pid = os.fork()
if pid == 0:  # في الفرع
   while True: # قدمها بلا نهاية
      data = os.read(ServerReceive,1024)
      if data:  # تحقق من استلام شيء ما!
         data = 'Ni!\n' + data + '\nNi!'
      else: data = "Error: received empty message"
      os.write(ServerSend,data)
else: # في الأصل
   data = ['The Knights who say Ni!',
           'Appear in the film "Monty Python and the Holy Grail" ']
   for line in data:
       os.write(ClientSend,line)
       print os.read(ClientReceive,1024)

   # والآن أنه العملية الفرع
   os.kill(pid,signal.SIGTERM) 

لاحظ أننا نستخدم pid الذي استلمناه من fork لإنهاء العملية الفرع، فإذا فشلنا في ذلك فستصبح العملية الفرع عمليةً خلفيةً أو خفيةً daemon، تعمل بصمت بلا نهاية بانتظار ظهور البيانات على أنبوب الدخل الخاص بها، أما الإنهاء الفعلي فيكون باستخدام دالة os.kill()‎، التي تُستخدم لإرسال أي رسالة إلى أي عملية -بغض النظر عن اسمها-، وتسمى إشارة الإنهاء هنا SIGTERM كما هو محدد في وحدة signal، وتختلف القائمة الكاملة وفقًا لكل منصة، وتكون موثقةً في مكتبة libc الخاصة بلغة C لمنصتك، لكن يمكن الحصول عليها بسهولة كما يلي في محث بايثون:

>>> dir(signal)

أو في سطر أوامر يونكس (لاحظ أن هذا حرف L وليس العدد 1):

$ kill -l

ونحصل في حالة يونكس على القيمة العددية التي يمكن استخدامها في أمر kill()‎ مباشرةً، لكن هذه القيمة لن تعمل في منصات مختلفة.

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

دليل جهات الاتصال بتقنية العميل/الخادم

بنينا نسخةً من دليل جهات الاتصال في فصل الملفات باستخدام قاموس، وسنعيد استخدام ذلك المثال لكننا سنبني هذه المرة نسخة العميل/الخادم.

لاحظ أن الشيفرة الأصلية كسرت إحدى قواعد الممارسة السليمة التي ذكرناها من قبل، وهي أننا أدرجنا شيفرة واجهة المستخدم في دوالنا المساعِدة، فإذا كنا سنستخدم تلك الشيفرة مرةً أخرى فسنحصل على رسائل مختلطة من العملية الفرعية والعملية الأصل، ونريد أن نعدل الشيفرة قليلًا كي نحولها إلى نموذج يمكن استخدامه، والمهم هنا إزالة أي تعليمة print من الدوال، وتمرير البيانات وسطاء، كما نريد إعادة النتيجة من كل دالة، بمجرد إنهاء ذلك نستطيع استيراد الشيفرة والوصول إلى الدوال المساعدة دون تنفيذ دالة main()‎، وعلى ذلك تكون الدوال التي سنوفرها هي:

• readBook(filename)‎
• saveBook(book, filename)‎
• addEntry(book, name, data)‎
• removeEntry(book, name)‎
• findEntry(book, name)‎

وستبدو الشيفرة المعدلة كما يلي:

def readBook(filename='addbook.dat'):
    import os
    book = {}
    if os.path.exists(filename):
       store = open(filename,'r')
       for line in store:
          name,entry = line.strip().split(':')
          book[name] = entry
    else:
        store = open(filename,'w') # أنشئ ملفًا فارغًا جديدًا
    store.close()
    return book

def saveBook(book, filename = "addbook.dat"):
    store = open(filename,'w')
    for name,entry in book.items():
        line = "%s:%s" % (name,entry)
        store.write(line + '\n')
    store.close()

def addEntry(book, name, data):
    book[name] = data
    return 'Added entry for ' + name

def removeEntry(book, name):
    del(book[name])
    return 'Deleted entry for ' + name

def findEntry(book, name):
    if name in book.keys():
       result = "%s : %s" % (name, book[name])
    else: result = "Sorry, no entry for: " + name
    return result

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

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

import os, signal, address_srv

fromClient,toServer = os.pipe()
fromServer,toClient = os.pipe()

pid = os.fork()
if pid == 0:   # نحن الخادم
   addresses = address_srv.readBook()
   while True:
      s = os.read(fromClient,1024)
      cmd,data = s.split(':')
      if cmd == "add":
         details = data.split(',')
         name = details[0]
         entry = ','.join(details[1:])
         s = address_srv.addEntry(addresses, name, entry)
         address_srv.saveBook(addresses)
      elif cmd == "rem":
         s = address_srv.removeEntry(addresses, data)
         address_srv.saveBook(addresses)
      elif cmd == "fnd":
         s = address_srv.findEntry(addresses, data)
      else: s = "ERROR: Unrecognized command: " + cmd
      os.write(toClient,s)
else:     # We are the client
   menu = '''
   1) Add Entry
   2) Delete Entry
   3) Find Entry

   4) Quit
   '''
   while True:
      print( menu )
      try: choice = int(input('Choose an option[1-4] '))
      except: continue
      if choice == 1:
         name = input('Enter the name: ')
         num = input('Enter the House number: ')
         street= input('Enter the Street name: ')
         town = input('Enter the Town: ')
         phone = input('Enter the Phone number: ')
         data = "%s,%s,%s,%s,%s" % (name,num,street,town,phone)
         cmd = "add:%s" % data
      elif choice == 2: 
         name = input('Enter the name: ')
         cmd = 'rem:%s' % name
      elif choice == 3: 
         name = input('Enter the name: ')
         cmd = 'fnd:%s' % name
      elif choice == 4: 
         break
      else:
         print( "Invalid choice, must be between 1 and 4." )
         continue

      os.write(toServer, cmd)
       print( "\nRESULT: ", os.read(fromServer,1024) )

   os.kill(pid, signal.SIGTERM)

لا شك أننا نستطيع ترتيب تلك الشيفرة لتكون أفضل باستخدام بعض دوال سلاسل if/elif، لكن المثال أصغر من أن يستدعي ذلك، ويجب ملاحظة بعض النقاط هي:

• استخدام break لإيقاف الحلقة التكرارية.
• استخدام continue للعودة إلى قمة الحلقة مرةً أخرى.

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

من الممكن توسيع هذا التدريب ليستخدم نسخة قاعدة البيانات التي شرحناها من قبل لتكون هي الخادم بدلًا من نسخة القاموس، وسنترك ذلك تدريبًا للقارئ.

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

خاتمة

في نهاية هذا المقال نأمل أن تكون تعلمت ما يلي:

• تستطيع العمليات أن تتواصل فيما بينها بواسطة الأنابيب.
• تستطيع العمليات الأصل أن تستنسخ نفسها باستخدام os.fork.
• يجب إنهاء العمليات الفرعية وإلا ستعمل بلا نهاية، وتستهلك موارد الحاسوب، وننهيها باستخدام دالة os.kill.

ترجمة -بتصرف- للفصل السادس والعشرين: Inter-Process Communication من كتاب Learn To Program لصاحبه Alan Gauld.

اقرأ أيضًا

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

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

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

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

لعلك قد سمعت سابقًا عن شخص ما يعمل بوظيفة مطور Full-stack أو أن شركةً ما تسعى لتوظيف مطور Full-stack، ولكن ماذا تعني كلمة Full-stack؟ وماهي المهام التي قد يؤديها بها مطور Full-stack؟ وكيف يمكن أن تصبح مطور Full-stack؟

يوضح الفيديو الآتي كل الإجابات اللازمة على الأسئلة السابقة، كما يبين أبرز المهارات والمكتسبات البرمجية اللازم توفرها في المطور نفسه، حتى يكون مطور Full-stack.

بعد اطلاعك على الفيديو وتعرفك على مفهوم مطور الـ Full-stack والمتطلبات البرمجية اللازمة لتكون مطورًا من هذا النوع، بات في إمكانك تحديد اللغات البرمجية التي تحتاج لتعلمها لتصل إلى هدفك في أن تكون مطور واجهات أمامية وخلفية معًا Full-stack، وهنا يمكنك الاطلاع مجانًا على بعض المقالات البرمجية المتاحة على أكاديمية حسوب، كما يمكنك الاستعانة بدورات احترافية مقدمة بهذا الخصوص، وذلك بالاشتراك في دورة تطوير واجهات المستخدم لإتمام تعلمك الاحترافي في الواجهات الأمامية Front-end، واختيار أي من الدورات الأخرى الموجهة للواجهات الخلفية Back-end وفقًا للغة التي تراها أنسب لك كالآتي:

• دورة تطوير التطبيقات باستخدام لغة Python
• دورة تطوير تطبيقات الويب باستخدام لغة Ruby
• تطوير تطبيقات الويب باستخدام لغة PHP
• تطوير التطبيقات باستخدام لغة JavaScript

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

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

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

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

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

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

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

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

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

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

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

ميزات تطبيقات الويب التقدمية الأساسية

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

1. سريعة أداة

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

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

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

رغم امتلاك جميع التطبيقات خصوصياتها، إلا أن عمليات تدقيق الأداء في Lighthouse تستند إلى نموذج الأداء المرتكز على المستخدم RAIL user-centric performance model، تسجيل نقاط عالية في عمليات التدقيق هذه يعني زيادة احتمالية تمتع المستخدمين بتجربة ممتعة. يمكنك أيضًا استخدام PageSpeed Insights أو تقرير تجربة مستخدم كروم Chrome User Experience Report للحصول على بيانات أداء واقعية لتطبيق الويب الخاص بك.

2. تعمل على جميع المتصفحات

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

تتمثل إحدى الطرق الفعالة للقيام بذلك في تحديد الوظائف الأساسية، وإتاحة هذه الوظيفة باستخدام بتقنية بسيطة، ثم تحسين التجربة كلما أمكن، كما يقول Jeremy Keith في تصميم الويب المرن Resilient Web Design، في كثير من الحالات يعني هذا البدء باستخدام HTML فقط لتصميم الوظائف الأساسية، وتحسين تجربة المستخدم باستخدام CSS و JavaScript لإنشاء تجربة أكثر جاذبية للمستخدم.

على سبيل المثال نأخذ إرسال النماذج form submission، إن أبسط طريقة لتنفيذ ذلك هي نموذج HTML الذي يرسل طلب POST. ثم يمكنك تحسين تجربة المستخدم باستعمال JavaScript لإجراء تحقق من صحة النموذج وإرسال النموذج عبر AJAX، تحسين التجربة للمستخدمين الذين يمكنهم دعمها.

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

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

3. تستجيب لجميع أحجام الشاشات

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

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

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

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

4. يوفر صفحة يمكن الوصول إليها دون إنترنت

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

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

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

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

5. قابل للتثبيت

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

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

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

ميزات تطبيقات الويب التقدمية المثالية

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

يهدف وجود قائمة التحقق المثلى لتطبيق الويب التقدمي إلى جعله جزء من الجهاز الذي يعمل عليه بالاستفادة من ميزات الويب التي تجعله قويا.

1. يوفر إمكانية العمل دون إنترنت

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

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

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

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

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

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

2. إمكانية وصول كاملة

يجتاز تطبيق الويب التقدمي متطلبات سهولة الوصول WCAG 2.0.

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

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

يجب عليك إجراء اختبارات إمكانية الوصول يدويًا. ويمكن أن تساعدك أدوات مثل Accessibility في Lighthouse و axe، ويمكنك أتمتة بعض اختبارات إمكانية الوصول باستعمال Accessibility Insights. من المهم أيضًا استخدام العناصر ذات الدلالة المتعارف عليها بدلاً من صياغة عناصر جديدة بنفسك، على سبيل المثال: استخدام العناصر a و button يضمن ذلك أنه عندما تحتاج إلى إنشاء وظائف أكثر تقدمًا سيكون الوصول المتوقع من خلال هذه العناصر محققا (كمثال arrows أو tabs)..

3. يمكن الوصول إليه من خلال البحث

يمكن الوصول لتطبيق الويب التقدمي PWA الخاص بك بسهولة من خلال البحث.

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

إن التأكد من وجود عناوين URL الأساسية للمحتوى وتكمن محركات البحث من فهرستها أمر بالغ الأهمية للمستخدمين ليتمكنوا من العثور على تطبيق الويب التقدمي الخاص بك. خاصة إن كان التقديم من جانب العميل client-side rendering.

للقيام بذلك عليك بداية التأكد من أن جميع عناوين URL الخاصة بك تمتلك وصفا وتعريفا فريدا. يمكنك بعدها استخدام Google Search Console ومراجعات تحسين محرك البحث من Lighthouse لتصحيح وإصلاح مشكلات قابلية الاكتشاف لتطبيق الويب التقدمي الخاص بك. ويمكنك استخدام أدوات مشرفي المواقع الخاصة بمحركي بحث Bing أو Yandex، والنظر في تضمين البيانات المنظمة structured data عبر مخططات من Schema.org في تطبيق الويب التقدمي الخاص بك.

4. يعمل مع أي جهاز إدخال

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

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

توفر واجهة برمجة تطبيقات Pointer Events API واجهة موحدة للتعامل مع مختلف الإدخالات، وهي مفيدة بشكل خاص لإضافة دعم القلم واللمس ولوحة المفاتيح، تأكد من أنك تستخدم العناصر الدلالية الصحيحة (الروابط anchors، الأزرار buttons، متحكمات النماذج form controls وما إلى ذلك) ولا تقم بنائها باستخدام كود أو عناصر HTML لا تمتلك دلالة معروف لدي المستخدم (وهذا يحسن إمكانية الوصول).

تأكد عند تضمين الحدث "عند مرور الفأرة" من إمكانية تفعيلها عند النقر أيضًا.

5. طلب الأذونات

عند طلب الإذن لاستخدام واجهات برمجة تطبيقات، استعمل السياق واطلب الإذن الذي تريده.

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

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

6. يوفر كود نظيف بأفضل الممارسات

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

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

هناك عدة أمور عليك التحقق منها ليكون الكود الخاص بتطبيقك نظيفا، نذكر منها: تجنب استخدام المكتبات التي تملك ثغرات الأمنية المعروفة، التأكد من أنك لا تستخدم واجهات برمجية موقوفة Deprecated APIs، إزالة أنماط الويب المضادة من الكود الخاص بك (مثل document.write()‎ أو امتلاك القيمة non-passive لحدث التمرير)، وأيضا التأكد من أن تطبيق الويب التقدمي الخاص بك يستمر في العمل حتى إذا فشل تحميل التحليلات أو مكتبات الطرف الثالث الأخرى.

ترجمة -وبتصرف- للمقال What makes a good Progressive Web App?‎ لصاحبيه Sam Richard وPete LePage.

اقرأ أيضًا

• ما هي تطبيقات الويب التقدمية PWA؟
• توفير تجربة تثبيت مخصصة داخل تطبيق الويب التقدمي PWA
• تشغيل تطبيقات الويب التقدمية PWA في وضع انقطاع الاتصال
• جدوى الاعتماد على تطبيقات الويب التقدمية PWA عوض تطبيقات الجوالات الأصيلة

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

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

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

تطبيقات الويب التقدمية تحقق تطلعات العملاء

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

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

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

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

تستفيد تطبيقات الويب التقدمية من إمكانيات الويب الحديثة

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

فهم التأثير على العمل

يمكن أن يكون للنجاح عدة تعريفات اعتمادًا على نشاطك مثل:

• قضاء المستخدمون وقتًا أطول في خدماتك
• انخفاض معدل ارتداد المستخدمين
• تحسين معدلات التحويل
• عودة عدد أكبر من المستخدمين

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

دعنا نقيس تأثير كل مِيزة على العمل (السرعة، قابلية للتثبيت، الموثوقية، الجذب).

تأثير سرعة الموقع على العمل

أثبتت دراسة حديثة من موقع Deloitte Digital أن سرعة الموقع لها تأثير كبير على مقياس الأعمال.

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

عندما تريد تحسين سرعة موقعك، استعمل الأدوات المناسبة وخذ قياسات متكررة، كمثال: استعمل Lighthouse لقياس الأداء وضع أهدافا واضحة، مثل الحصول على قياس جيد في مقياس أساس حيوية الويب Core Web Vitals scores، وإظافة ميزانية الأداء إلى عملية البناء الخاصة بك، بفضل القياسات المتكررة ومنهجية قيمة السرعة value of speed، يمكنك عزل تأثير تغيرات السرعة وحساب قيمة المداخيل الإضافية التي حققها عملك.

جعلت eBay السرعة هدف الشركة سنة 2019، استخدموا تقنية قيمة السرعة value of speed، لتحسين المسار الحرج، والتحميل المسبق، واستنتجوا أنه لكل تحسين في سرعة التحميل قدره 100 ملي ثانية، تزيد نسبة إضافة المنتجات للسلة بمقدار 0.5%.

تأثير قابلية تثبيت الموقع على العمل

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

تثبيط تطبيقات الويب التقدمية يتطلب ضغطة زر واحدة، ولا تتطلب تحويل المستخدم عن المسار الحالي.

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

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

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

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

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

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

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

• عدد المستخدمين المؤهلين لتلقي التثبيت
• عدد المستخدمين الذين ضغطوا على زر التثبيت
• عدد المستخدمين الذين وافقوا على التثبيت ثم رفضوه
• عدد المستخدمين الذين ثبتوا التطبيق بنجاح

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

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

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

التثبيت وسيلة ممتازة لزيادة عدد الزوار العائدين ورفع وفاء عملاءك، ويمكنك أيضا التفكير في تخصيص تجرِبة هؤلاء المستخدمين المدفوعين.

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

تأثير موثوقية الموقع على العمل

لعبة الديناصور في جوجل كروم، هي لعبة تُعرَض لما يكون الجهاز في وضع غير متصل بالإنترنت، تُعلَب أكثر من 270 مليون مرة في الشهر. هذا الرقم يثبت لك قلة موثوقية الإنترنت، خاصة في البلدان التي بها بيانات جوال غير موثوقة أو باهظة الثمن مثل الهند، والبرازيل، والمكسيك، وإندونيسيا.

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

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

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

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

تأثير جاذبية الموقع للمستخدمين على العمل

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

تقنيا، تتم عملية إرسال إشعارات الويب في الخلفية بفضل منجز الخدمة service worker وغالبا ما يتم إرسالها باستخدام نظام مصمم لإرسال الإشعارات (Firebase مثلا)، ولهذه الميزة قيمة تجارية كبيرة لمستخدمي الأجهزة المحمولة Android وسطح المكتب، فهي تزيد الزيارات المتكررة وبذلك ترتفع المبيعات والتحويلات للموقع.

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

• عدد المستخدمين المؤهلين لتلقي الإشعارات
• عدد المستخدمين الذين ينقرون فوق رسالة طلب التسجيل في الإشعارات المخصصة
• عدد المستخدمين الذين يمنحون إذن تقلي الإشعارات
• عدد المستخدمين الذين يتلقون الإشعارات
• عدد المستخدمين الذين يتفاعلون مع الإشعارات
• التحويل والتفاعل من المستخدمين القادمين من الإشعارات

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

الإطلاق التدريجي: إضافة ميزة تلو الأخرى

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

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

ترجمة -وبتصرف- للمقال How Progressive Web Apps can drive business success?‎ لصاحبه Sébastien Fourault.

اقرأ أيضًا

• ما هي تطبيقات الويب التقدمية PWA؟
• نماذج اقتراحات تثبيت تطبيقات الويب التقدمية PWA
• تشغيل تطبيقات الويب التقدمية PWA في وضع انقطاع الاتصال

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

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

أساسيات التحريك

نعرض فيما يلي أهم القضايا الواجب الانتباه إليها عند التحريك:

اختيار الخصائص المناسبة للتحريك

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

استخدام التحريك لدعم التفاعل

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

تجنب تحريك الخصائص المكلفة

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

يُمكن أن تكون بعض الخصائص أكثر تكلفةً من غيرها عند تغييرها، كما يُمكن أن يؤدي هذا التغيير إلى ظهور التقطُّعات في الصفحة؛ حيث يُمكن مثلًا أن يتطلب تغيير ظل صندوق box-shadow لعنصرٍ ما عملية طلاء paint أكثر تكلفةً بكثير من تغيير لون نصه. وبالمثل، من المرجح أن يكون تغيير عرض width عنصر ما أكثر تكلفةً من تغيير تحويلاته transform.

نعرض المزيد من الإرشادات حول أداء التحريك في الفقرة الأخيرة من هذه المقالة. يُمكن الالتزام فقط بالتحويلات transforms وتعديلات الشفافية opacity واستخدام "سوف يُعدّل" will-change في حال عدم الرغبة بقراءة المزيد والخوض في التفصيلات. يُمكن معرفة ماذا ينشُط تمامًا عند تحريك أي خاصية بالرجوع إلى مُشغّلات أنماط CSS.

التحريك باستخدام أنماط CSS موازنة مع استخدام JavaScript

يُمكن التحريك، إما باستخدام أنماط CSS، أو JavaScript؛ حيث يعتمد قرار الاختيار بين واحدٍ منهما على الارتباطات الأخرى للمشروع وعلى أنواع التأثيرات المطلوبة.

• يُستخدم تحريك CSS لتنفيذ الانتقالات البسيطة من النمط "لقطة واحدة one-shot"، مثل تبديل حالات عناصر الواجهة.
• يُستخدم تحريك JavaScript للحصول على تأثيراتٍ متقدمة، مثل الارتداد أو التوقف أو الإيقاف المؤقت أو الإرجاع أو الإبطاء.
• يُمكن استخدام واجهة برمجة التطبيقات للتحريك Web Animations API أو أي إطار عمل حديث مناسب عند اختيار التحريك باستخدام JavaScript.

يُمكن إنشاء معظم عمليات التحريك الأساسية باستخدام CSS أو JavaScript، لكن يختلف الجهد والزمن اللازمين لإنشاء التحريك حسب الطريقة المختارة (راجع الفقرة الأخيرة من هذه المقالة)؛ حيث يوجد لكل طريقةٍ محاسنها ومساوئها، نعرض فيما يلي الإرشادات العامة:

• تُستخدم CSS عندما يكون لعناصر الواجهة حالات أقل محتواة ضمن نفس العنصر؛ حيث تكون الانتقالات والتحريك مثالية لجلب قائمة انتقال إلى جهةٍ معينة مثلًا أو إظهار تلميحٍ ما. يُمكن اللجوء إلى JavaScript للتحكم بالحالات إلا أن التحريك نفسه يكون في CSS.
• تُستخدم JavaScript عند الحاجة للتحكم الواسع في التحريك. تُعدّ واجهة برمجة التطبيقات Web Animations API المنهج المُعتمد على المعايير القياسية والمتاح حاليًا في معظم المتصفحات الحديثة، مما يوفر كائناتٍ حقيقية مثالية للتطبيقات المعقدة الموجهة بالكائنات. تُعدّ JavaScript مفيدةً أيضًا عند الحاجة إلى إيقاف التحريك، أو إيقافه مؤقتًا، أو إبطائه، أو عكسه.
• يُمكن استخدام إطار التحريك للطلب requestAnimationFrame مباشرًة عند الحاجة لتنسيق مشهدٍ كاملٍ يدويًا. يُعدّ ذلك منهجًا متقدمًا في JavaScript، إلا أنه يكون مفيدًا عند إنشاء لعبة أو الرسم على لوحة HTML canvas.

بالمقابل، في حال استخدام إطار عمل JavaScript الذي يتضمن وظائف التحريك، مثل دالة التحريك ‎.animate() في jQuery، فقد يكون من الأنسب الالتزام بذلك في التحريك عمومًا.

التحريك باستخدام CSS

يُعدّ التحريك باستخدام CSS أبسط طرق تحريك شيءٍ ما على الشاشة، حيث يوصف هذا الأسلوب بأنه تصريحي لأنه يُحدّد ما المطلوب حدوثه.

يُبين المثال التالي تحريك صندوقٍ باستخدام CSS بمقدار 100px في كلا المحورين X و Y، حيث ضُبط زمن الانتقال ليأخذ 500 ميلي ثانية (نصف ثانية). تتغير القيمة transform عند إضافة الصف move ويبدأ الانتقال.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

يُمكن تجريب المثال.

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

في حال إنشاء صفوفٍ مستقلة في CSS لإدارة التحريك كما هو الحال في المثال أعلاه، يُمكن استخدام JavaScript لتبديل حالة التحريك نعم/لا on/off.

box.classList.add('move');

يوفِّر ذلك توازنًا جيدًا للتطبيقات؛ إذ يُمكن للمطور التركيز على إدارة الحالة باستخدام JavaScript، وتعيين الصفوف المناسبة للعناصر المستهدفة ببساطة، وترك المتصفح يتعامل مع التحريك. يُمكن في حال اعتماد هذا المنهج الاستماع إلى أحداث نهاية الانتقال transitionend للعنصر، وذلك في حال قبول التخلي عن دعم الإصدارات الأقدم من Internet Explorer، حيث كان الإصدار 10 هو الإصدار الأول لدعم هذه الأحداث. دعمت جميع المتصفحات الأخرى هذه الأحداث منذ فترة.

تكون شيفرة JavaScript المطلوبة للاستماع إلى حدث انتهاء الانتقال كما يلي:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
  //معالجة إنهاء الانتقال
}

يُمكن استخدام التحريك في CSS إضافًة إلى استخدام الانتقالات للحصول على مزيدٍ من التحكم في الإطارات الرئيسية للتحريك الفردي والمُدّد الزمنية والتكرارات.

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

يُمكن مثلًا تحريك صندوق المثال السابق بنفس الطريقة مع انتقالات وبتكرارٍ لا نهائي، ولكن بدون أي تفاعلٍ للمستخدم مثل النقر. كما يُمكن تغيير عدة خصائص في نفس الوقت:

.box {
  /* اختيار التحريك */
  animation-name: movingBox;

  /* مدّة التحريك */
  animation-duration: 1300ms;

  /* عدد مرات التحريك */
  animation-iteration-count: infinite;

  /* تبديل اتجاه التحريك عند كل دورة فردية */
  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

يُمكن تجريب المثال.

يُمكن تعريف التحريك نفسه بصورةٍ مستقلة عن العنصر الهدف، ويُمكن استخدام خاصية اسم التحريك animation-name لاختيار التحريك المطلوب.

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

التحريك باستخدام JavaScript وواجهة برمجة التطبيقات Web Animations API

يُعدّ إنشاء التحريك باستخدام JavaScript أكثر تعقيدًا موازنًة مع كتابة الانتقالات أو التحريك في CSS، إلا أنه يوفر قوةً أكبر للمطورين. يُمكن استخدام واجهة برمجة التطبيقات Web Animations API إما لتحريك خصائص CSS معينة، أو لإنشاء كائناتٍ ذات تأثيرات مركبة.

يكون استخدام JavaScript للتحريك حتميًا مع كتابة التعليمات سطريًا inline ضمن الشيفرة، كما يُمكن تغليفها داخل كائناتٍ أخرى. تُبيّن الشيفرة التالية كيفية إنشاء نفس تحريك CSS المُوضح في المثال السابق:

var target = document.querySelector('.box');
var player = target.animate([
  {transform: 'translate(0)'},
  {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
  target.style.transform = 'translate(100px, 100px)';
});

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

تُعدّ واجهة برمجة التطبيقات Web Animations API معيارًا جديدًا نسبيًا من W3C، وهو مدعومٌ بصورةٍ أساسية في معظم المتصفحات الحديثة؛ أما بالنسبة للمتصفحات الحديثة غير الداعمة، فيُمكن استخدام المشروع من النوع "نقص الدعم" polyfill المُتاح على github؛ وهو مشروع JavaScript يوفر ميزات Web Animation.

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

التحريك والأداء

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

• يجب الحرص على ألّا يُسبب التحريك أية مشاكل في الأداء؛ حيث يجب معرفة تأثير أي خاصية في أنماط CSS على الأداء.
• يجب الانتباه إلى أن جميع الخصائص التي تُغيُّر في هندسة الصفحة (التخطيط) أو تتسب في الطلاء تكون مُكلفةً على نحوٍ خاص.
• يجب الالتزام بتعديل التحويلات والشفافية ما أمكن ذلك.
• يُمكن استخدام سوف يُعدّل will-change للتأكد من معرفة المتصفح ما يُخطط لتحريكه.

لا يكون تحريك الخصائص مجاني، كما أن تحريك بعض الخصائص أقل كلفةً من غيرها؛ حيث يُعدّل مثلًا تحريك العرض width والارتفاع height لعنصرٍ من هندسته، ويُمكن أن يؤدي ذلك إلى تحريك أو تغيير حجوم عناصرٍ أخرى على الصفحة. تُدعى هذه العملية بالتخطيط أو إعادة التدفق في بعض المتصفحات مثل Firefox المعتمدة على محرك المتصفحات Gecko؛ وهي عمليةٌ مكلفةٌ لاسيما إذا احتوت الصفحة على عناصر كثيرة. كلما يُشغّل التخطيط تحتاج الصفحة أو جزءٌ منها إلى إعادة الطلاء والذي يكون أكثر كلفًة من عملية التخطيط نفسها.

يجب تجنُّب تحريك الخصائص التي تؤدي إلى تنشيط التخطيط أو الطلاء ما أمكن ذلك؛ وهذا يعني قصر التحريك على الشفافية opacity أو التحويلات transform بالنسبة لمعظم المتصفحات الحديثة، واللتان يتمكن المتصفح من تحسينها بدرجة عالية. لا يُشكّل التعامل مع التحريك باستخدام JavaScript أو CSS فرقًا بالنسبة للأداء.

يُمكن الرجوع إلى CSS Triggers للحصول على قائمةٍ كاملة لما يُنشّط تشغيله عند استخدام خصائص CSS الفردية، كما يُمكن الرجوع للمرجع الكامل لإنشاء تحريك عالي الأداء في عناصر HTML5.

استخدام خاصية will-change

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

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

.box {
  will-change: transform, opacity;
}

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

أداء CSS موازنة مع أداء JavaScript

يوجد العديد من الصفحات والتعليقات في عالم الويب التي تناقش المزايا النسبية للتحريك باستخدام CSS و JavaScript من منظور الأداء. فيما يلي بعض النقاط التي يجب الانتباه لها:

• يُدعَم التحريك المعتمد على أنماط CSS و Web Animations بصورةٍ أساسية ويُعالج ضمن خيطٍ thread منفصل يُعرف باسم "الخيط المُركَّب compositor thread"؛ والذي يختلف عن "الخيط الرئيسي main thread" للمتصفح، الذي يُنفذّ التصميم والتخطيط والطلاء وسكريبت جافا؛ مما يعني أنه إذا شغَّل المتصفح بعض المهام المكلفة على الخيط الرئيسي، يبقى التحريك مستمرًا دون أي مقاطعة.
• يُمكن في كثيرٍ من الحالات معالجة التعديلات الأخرى على التحويلات والشفافية باستخدام الخيط المُركّب.
• إذا أدى أي تحريكٍ إلى تشغيل الطلاء أو التخطيط أو كليهما، فسيُعهد إلى "الخيط الرئيسي" مهمة تنفيذ العمل وذلك في حالة التحريك المُستند إلى CSS أو JavaScript. يُمكن أن يؤدي الحمل الزائد للتخطيط أو الطلاء إلى بطء أي عملٍ مرتبطٍ بتنفيذ CSS أو JavaScript، مما يجعل المسألة موضع نقاش.

يُمكن العودة إلى CSS Triggers لمزيدٍ من المعلومات حول العمل المُنّشط عند تحريك خاصيةٍ ما.

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

• Animations للمؤلف: Paul Lewis.
• CSS Versus JavaScript Animations للمؤلفين: Paul Lewis و Sam Thorogood.
• Animations and Performance

للمؤلفين: Paul Lewis و Sam Thorogood.

اقرأ أيضًا

• أيّهما أفضل للتحريك Animations؟ جافاسكربت أم CSS؟
• خاصيات الحركات
• الحركات المتعددة المتزامنة
• الانتقالات وجافاسكربت

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

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

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

الوصول مقابل الإمكانيات لكل من تطبيقات الويب والتطبيقات الخاصة بالنظام وتطبيقات الويب التقدمية PWA

إذا وازنت بين التطبيقات المبنية خصيصًا للنظام وتطبيقات الويب من ناحية الإمكانيات والوصول، فإن التطبيقات المخصصة للنظام بالتأكيد تملك إمكانيات أكبر، ولكن تطبيقات الويب لديها وصول أكبر، فماذا عن تطبيقات الويب التقدمية؟

بنيت تطبيقات الويب التقدمية PWA -اختصارًا إلى Progressive Web Apps- بحيث تستفيد من واجهة برمجيات الويب الحديثة لتقديم إمكانيات عالية وموثوقية كبيرة وقابلية للتثبيت لتصل للجميع في أي مكان وعلى أي جهاز.

الركائز الأساسية لتطبيقات الويب التقدمية

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

الإمكانيات

يقصد بالإمكانيات ما يستطيع الويب فعله، يُعد الويب حاليا قادرًا على القيام بأغلب المهام دون الإعتماد على أي إضافات خارجية، فمثلا، يمكنك إنشاء تطبيق دردشة فيديو باستخدام WebRTC وهي تقنية لدردشة الفيديو في الويب، ومعرفة الموقع، وإرسال إشعارات. ويمكنك جعل التطبيق قابلا للتثبيت، وجعل المحادثات داخل عالم افتراضي باستخدام WebGL و WebVR وأصبح بإمكان المطورين مع WebAssembly الولوج إلى بيئات مختلفة مثل C و C++‎ و Rust وجلب ميزات قوية للويب كانت حكرا على التطبيقات المخصصة للنظام، كمثال موقع Squoosh.app الذي يقدم إمكانية ضغط صور متقدمة، فحتى وقت قريب، كانت التطبيقات المخصصة للنظام فقط قادرة على القيام بعمليات تتطلب أداءً عالية كالمثال الذي ذكرناه.

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

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

الموثوقية

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

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

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

قابلية التثبيت

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

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

تطبيقات الويب مقابل تطبيقات الويب التقدمية

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

الأرقام لا تخفي نفسها! فحققت الشركات التي أطلقت تطبيقات الويب التقدمية نتائج باهرة. مثلا، شهد تويتر زيادة بنسبة 65٪ لمدة الجلسات، وزيادة بنسبة 75٪ في التغريدات، وانخفاضًا بنسبة 20٪ في معدل الارتداد، بحجم أقل 97٪ من التطبيق الرئيسي.

بعد التحول إلى تطبيقات الويب التقدمية، شهد مؤشر نيكي Nikkei زيادة في عدد زيارات الأعضاء بمعدل 2.3 مرة، واشتراكات أكثر بنسبة 58٪، وزيادة في عدد المستخدمين النشطين كل يوم بنسبة 49٪.

استبدلت هولو Hulu تجربة تطبيق سطح المكتب الخاصة بالنظام الأساسي بتطبيق ويب تقدمي وشهدت زيادة بنسبة 27٪ في عدد المستخدمين العائدين للتطبيق.

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

ترجمة -وبتصرف- للمقال What are Progressive Web Apps?‎ لصاحبيه Sam Richard و Pete LePage.

اقرأ أيضًا

• توفير تجربة تثبيت مخصصة داخل تطبيق الويب التقدمي PWA
• تشغيل تطبيقات الويب التقدمية PWA في وضع انقطاع الاتصال
• شرح ملف البيان manifest لتطبيق الويب التقدمي PWA

تتميز تطبيقات الويب التقدميّة Progressive Web Apps (تختصر إلى PWA) بواجهات ويب شبيهة جدًا بواجهات التطبيقات المألوفة للجميع مما يوفر تجربة استخدام عالية الجودة وسريعة وموثوقة وجذابة.

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

من المعروف أن متجر Play Store هو متجر تطبيقات أندرويد، وغالبًا ما يرغب المطورون بفتح صفحات الويب التقدميّة المُطوّرة من تطبيقات أندرويد.

يسمح معيار نشاط الويب الموثوق Trusted Web Activity للمتصفحات بتوفير حاوية متوافقة تمامًا مع منصة الويب التي تُظهر صفحات الويب التقدميّة داخل تطبيق أندرويد. تتوفر هذه الميزة في المتصفح Chrome حاليًا وهي قيد التطوير في المتصفح Firefox Nightly.

عارض الويب وكوردوفا: حلول متوفرة ولكن قاصرة

كان من الممكن دومًا تضمين سلوك الويب في تطبيق أندرويد باستخدام تقانات مثل عارض الويب WebView في أندرويد أو أطر العمل الخاصة مثل كوردوفا Cordova.

لا يوفر عارض الويب WebView في أندرويد جميع ميزات منصات الويب الحديثة مثل منتقي جهات الاتصال contact picker وملفات النظام filesystem، إذ أنه لم يُصمم في الأساس ليكون بديلًا عن المتصفح.

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

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

حاوية جديدة لتطبيقات الويب على أندرويد: نشاط الويب الموثوق

يُمكن للمطورين اليوم تضمين صفحة ويب تقدميّة كنشاط تشغيل launch activity في تطبيق أندرويد باستخدام نشاط الويب الموثوق Trusted Web Activity والذي يُمكّن المتصفح من إخراج صفحة الويب التقدميّة ملء الشاشة مما يضمن التوافقية الكاملة مع ميزات منصة الويب وجميع واجهات برمجة التطبيقات التي يستدعيها المتصفح. يوجد العديد من الأدوات المساعدة مفتوحة المصدر لتسهيل تطوير تطبيق أندرويد يستخدم صفحات الويب التقدميّة.

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

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

تتوفر هذه الميزة منذ الإصدار رقم 75 للمتصفح Chrome إلا أنها ما زالت قيد التطوير للنسخة القادمة من Firefox.

معايير الجودة

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

بهدف تحقيق توقعات المستخدمين لسلوك تطبيقات أندرويد، أدخلت النسخة 86 من المتصفح Chrome تعديلًا يعدّ الفشل في معالجة أحد السيناريوهات التالية عطلًا:

• الفشل في التحقق من رابط بروتوكول مشاركة الموارد digital asset links عند تشغيل التطبيق
• الفشل في إرجاع HTTP 200 عند طلب مورد دون اتصال
• إعادة HTTP 404 أو خطأ 5xx عند طلب تنقل

يتسبب الوقوع في أحد هذه السيناريوهات في نشاط الويب الموثوق بإظهار عطل للمستخدم في تطبيق أندرويد. يجب على المطور التحقق من الإرشادات الخاصة guidance للتعامل مع هذه السيناريوهات في عامل النشاط service worker.

يجب أن يُحقق التطبيق المعايير الخاصة بأندرويد مثل سياسة الامتثال policy compliance.

تحذير: إذا كان التطبيق مُصمم بشكل أساسي للأطفال تحت سن 13 عامًا، فيجب مراعاة سياسة العائلة على متجر Play store والتي يُمكن أن تمنع من استخدام نشاط الويب الموثوق.

يُبين الشكل التالي شارة صفحات الويب التقدميّة والتي تستخدم أداة Lighthouse لإظهار معايير إمكانية التثبيت installability:

تحويل تطبيق ويب تقدمي إلى تطبيق أندرويد

لا يحتاج مطور الويب الذي يرغب في استخدام نشاط الويب الموثوق إلى تعلم تقنيات أو واجهات برمجة تطبيقات جديدة لتحويل صفحات الويب التقدميّة إلى تطبيق أندرويد، إذ يوفر كل من طوق الفقاعات Bubblewrap وباني صفحات الويب التقدميّة PWABuilder الأدوات اللازمة في مكتبة مخصصة وواجهة سطر أوامر (CLI) وواجهة مستخدم رسومية (GUI).

المكتبة Bubblewrap

يولد المشروع Bubblewrap تطبيقات أندرويد على شكل مكتبة NodeJS وواجهة سطر أوامر (CLI).

يُمكن توليد مشروع جديد عن طريق تنفيذ الأداة مع تمرير رابط URL لملف بيان الويب Web Manifest كما يلي:

npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json

يُمكن للأداة أيضًا بناء المشروع وذلك بتنفيذ الأمر التالي والذي يولد تطبيق أندرويد جاهز للرفع على متجر Play store:

npx @bubblewrap/cli build

يُصبح الملف app-release-signed.apk متاحًا في مجلد جذر المشروع root بعد تنفيذ الأمر السابق، وهو ما يجب رفعه على المتجر Play store.

باني صفحات الويب التقدميّة PWABuilder

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

التحقق من ملكية تطبيقات الويب التقدمية في تطبيق أندرويد

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

يتولى كل من Bubblewrap و PWABuilder الضبط configuration المطلوب على تطبيق أندرويد إلا أنه يتبقى خطوة وحيدة وهي إضافة الملف assetlinks.json إلى صفحات الويب التقدميّة.

لإنشاء هذا الملف، يحتاج المطور إلى التوقيع SHA-256 للمفتاح المستخدم لتوقيع ملف APK الذي يُنزله المستخدمون.

يُمكن توليد هذا المفتاح بعدة طرق من أسهلها إيجاد المفتاح المتوفر مع ملف APK نفسه الذي ينزله المستخدمون من متجر Play store.

لتجنب إظهار تطبيق معطل للمستخدمين، انشر التطبيق أولًا على قناة اختبار مغلقة closed test channel ثم ثبتّه في جهاز اختبار واستخدم أداة Peter's Asset Link Tool لإنشاء ملف الأصول assetlinks.json الصحيح الخاص بالتطبيق وإتاحته على ‎/.well-known/assetlinks.json في النطاق الذي تحققت من صحته.

ختامًا

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

يُمكنك، إذا كنت في خطواتك الأولى لاستخدام صفحات الويب التقدميّة، قراءة إرشادات إنشاء هذه الصفحات. أما إذا كنت مطورًا لهذه الصفحات فاستخدم أداة Lighthouse للتحقق من أن صفحاتك توافق معايير الجودة المطلوبة. بعدها، استخدم Bubblewrap و PWABuilder لإنشاء تطبيق أندرويد ومن ثم ارفع التطبيق المطور على قناة اختبار مغلقة وأقرنه بصفحات الويب التقدميّة باستخدام Peter's Asset Link Tool

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

ترجمة -وبتصرف- للمقال Using a PWA in your Android app للكاتب: André Cipriani Bandarra.

اقرأ أيضًا

• ما هي تطبيقات الويب التقدمية ولماذا يجب على المصممين الاهتمام بها؟
• تشغيل تطبيقات الويب التقدمية PWA في وضع انقطاع الاتصال
• نماذج اقتراحات تثبيت تطبيقات الويب التقدمية PWA

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

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

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

البرمجيات

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

محررات النصوص

من المرجح أنك تملك محرر نصوص مثل المفكرة Notepad في ويندوز أو جي-إدت Gedit في لينوكس أو محرر النصوص TextEdit في ماك أو إس. لكن استخدام محرر نصوص يلوّن الشيفرات ويتحقق من صحتها قواعديًا ويساعدك في تنظيمها سيريحك ويسهِّل تطوير المواقع.

يمكنك الحصول على الكثير من محررات النصوص مجانًا مثل:

• Atom.
• Brackets.
• Bluefish.
• TextWrangler.
• Eclipse.
• Netbeans.
• Visual Studio Code.

كما يمكنك اختبار Sublime Text المدة التي تشاء لكنه سيظهر لك رسائل تشجعك على شراءه بينما يكلفك PhpStorm ما بين 20 إلى 200 دولار وفقًا للخطة التي تحتاجها. يحصل المطورون الأفراد أو مطوري المشاريع مفتوحة المصدر على Visual Studio Express مجانًا. وعادة ما تحصل على فترة تجريب مجانية للمحررات المدفوعة.

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

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

محررات الصور

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

يمكن أن تكون هذه المحررات مجانية مثل GIMP أو بتكلفة معقولة أقل من 100 دولار مثل PaintShop Pro أو بتكلفة عالية نسبيًا مثل أدوبي فوتوشوب Adobe Photoshop.

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

محررات الوسائط

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

يمكنك استخدام برامج مجانية للعمل مع المقاطع الصوتية (مثل Audacity وWavosaur) أو مدفوعة بتكاليف يمكن أن تصل لمئات من الدولارات (مثل Sony Sound Forge وAdobe Audition). وكذلك الأمر مع محررات الفيديو إذ يمكنك استخدام المحررات مجانية مثل PiTiVi وOpenShot لنظام التشغيل لينوكس وبرنامج iMovie لنظام التشغيل ماك أو إس أو يمكنك استخدام محررات معتدلة التكلفة أقل من 100 دولار مثل Adobe Premiere Elements أو بتكلفة تصل إلى مئات الدولارات (مثل Adobe Premiere Pro وAvid Media Composer وFinal Cut Pro. وغالبًا ما يغطي محرر الفيديو الذي يأتي مع كاميرتك الرقمية كل احتياجاتك.

أدوات نشر المواقع

ستحتاج إلى وسيلة لرفع ملفات موقعك من القرص الصلب على حاسوبك إلى خادم الويب، لذلك تساعد بعض أدوات النشر مثل S)FTP client) أو RSync أو Git/GitHub في إنجاز الأمر.

يحتوي كل نظام تشغيل على برنامج عميل S)FTP) كجزء من مدير الملفات مثل Windows Explorer في ويندوز وNautilus وهو مدير ملفات شائع في أنظمة التشغيل لينوكس وMac Finder في ماك أو إس. يختار المطورون عادة برامج S)FTP) مخصصة لاستعراض المجلدات الموجودة على الحاسوب أو الخادم بشكل متجاور وتخزين كلمات مرور الخادم. هناك العديد من الخيارات الموثوقة والمجانية إن أردت أن تثبّت برنامج عميل S)FTP) مثل FileZilla لكل المنصات وWinSCP لنظام التشغيل ويندوز وCyberduck لكل من ويندوز وماك وغيرها الكثير.

إنّ بروتوكول FTP غير آمن بطبيعته لذلك تأكد من استخدام SFTP وهي النسخة الآمنة المشفّرة من FTP التي تتعامل معها معظم مزودات الخدمة هذه الأيام افتراضيًا. يمكنك بالطبع استخدام تقنيات آمنة أخرى مثل Rsync مع SSH.

المتصفحات

إما أن يكون لديك بالفعل متصفح أو يمكنك تحميل أي متصفح مجاني مثل فايرفوكس أو كروم.

الولوج إلى ويب

سنتعرف الآن على التجهيزات والخدمات الأساسية التي تحتاجها لدخول ويب.

حاسوب ومودم

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

تحتاج أيضًا إلى رفع الملفات إلى خادم بعيد لذلك لا بدّ من وجود مودم Modem. يمكن لمزود خدمة الإنترنت ISP أن يمنحك اتصالًا بالإنترنت مقابل بضعة دولارات شهريًا ولكن يختلف الميزانية وفقًا لمكان إقامتك.

الولوج إلى مزود خدمة انترنت

تأكد من أنك تستخدم حزمة اتصال (أو حيز نطاق تراسلي) bandwidth كافي:

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

استضافة موقع ويب

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

مفهوم عرض حزمة الاستهلاك

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

اقتباس

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

أسماء النطاقات

لا بد من شراء اسم نطاق خاص بك من خلال مزود خاص (شركة مُسجِّلة Registart أو مسجِّل)، ويمكن أن يكون مزود خدمة الاستضافة هو أيضًا مُسجّلًا (أي الشركة تقدم خدمة حجز النطاقات والاستضافة). سيكلّفك تسجيل اسم نطاق عادةً ما بين 5-15 دولار سنويًا، وتختلف هذه الكلفة للأسباب التالية:

• التزامات محلية: اختيارك لأسماء نطاقات عليا تحمل اسم دولة (مثل uk.) أكثر تكلفة وتختلف من دولة لأخرى.
• الخدمات المرتبطة باسم النطاق: تزودك بعض الشركات المسجِّلة بخدمات مثل الحماية من الإزعاجات عن طريق حجب عنوانك البريدي وعنوان بريدك الإلكتروني خلف عناوينهم الخاصة. فلن يستسطع أحد الوصول إلى عنوانك البريد إلى عن طريق الشركة المسجلّة بينما تحجب بريدك الإلكتروني وفق آلية التقنيع التي يعتمدها المُسجِّل.

استضافة موقعك بنفسك أو باستخدام خدمات الاستضافة المدفوعة

بإمكانك نشر موقعك بنفسك خطوة خطوة كأن تجهز قاعدة بيانات (عند الحاجة) ونظام إدارة المحتوى CMS مثل (ووردبريس Wordpress أو دوت كلير Dotclear أو spip وغيرها) وترفع قوالب المحتويات الجاهزة أو قوالبك الخاصة.

كما يمكنك استخدام بيئة التشغيل الخاصة بمزود الاستضافة مقابل 10-50 دولار شهريًا، أو أن تشترك مباشرة بمزود استضافة مخصص له نظام إدارة محتوى جاهز مثل ووردبريس Wordpress أو تمبلر Tumblr أو بلوغر Blogger). لن يكلف هذا الأخير أي شيء حرفيًا، لكنك لن تكون قادرًا على التحكم الكامل بالقوالب وغيرها من الخيارات.

الاستضافة المجانية مقابل الاستضافة المدفوعة

يمكن أن يخطر في ببالك أنه لم عليك أن تدفع مقابل خدمة استضافة بالرغم من وجود العديد من عروض الاستضافة المجانية؟ إليك بعض المميزات للاسضافات المدفوعة:

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

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

تصميم مواقع ويب والاستضافة الاحترافية عن طريق شركات خاصة

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

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

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

• هل تريد خوادم احتياطية في حال توقف الخادم الأساسي عن العمل؟
• هل تكفي وثوقية أداء 95% أم أنك تحتاج إلى 99% وخدمة مستمرة على مدار الساعة؟
• هل تريد خادمًا مخصصًا Dedicated Server عال المواصفات فائق التجاوب أم يكفيك خادم مشترك أبطأ؟

اعتمادًا على إجاباتك على كل سؤال سيكلفك الموقع من بضع آلاف وحتى مئات آلاف الدولارات.

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

ترجمة -وبتصرف- للمقال How much does it cost to do something on the Web.

اقرأ أيضًا

• مفهوم الروابط التشعبية في مواقع الويب
• ما هو عنوان URL في الويب؟
• ما هي الأدوات المستخدمة في بناء مواقع ويب؟
• ما هي أدوات مطوري الويب المدمجة في المتصفحات؟

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

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

يُبين الشكل التالي مثلًا زر تثبيت بسيط في تطبيق:

أفضل ممارسات اقتراح تثبيت التطبيق

نعرض فيما يلي بعض أفضل الممارسات المُمكنة لاقتراح تثبيت التطبيق، وذلك بغض النظر عن نماذج الاقتراح المستخدمة في موقع الويب:

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

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

يعرض الشكل التالي ترويج المتصفح للتثبيت على نظام سطح المكتب (يسار) وعلى الجوّال (يمين):

يعرض المتصفح Chrome في أندرويد الاقتراح ضمن شريط معلومات صغير. يُمكن حجب هذا السلوك باستخدام التابع "حجب السلوك الافتراضي" preventDefault()‎ في الحدث "قبل طلب التثبيت" beforeinstallprompt، أما إذا لم يُستدع هذا التابع فسيُعرض الاقتراح للتطبيق (متوافقًا مع معايير التثبيت في أندرويد) عند أول زيارة للمستخدم للموقع وبعد حوالي تسعين يومًا أيضًا.

نماذج الاقتراح في واجهات التطبيق

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

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

زر تثبيت بسيط

من أبسط نماذج تجربة المستخدم UX تضمين زر "التثبيت" Install أو "الحصول على التطبيق" Get app في المكان المناسب ضمن محتوى الويب. يجب التأكد من أن الزر لا يُعطّل وظائف هامة أخرى وأنه ليس ضمن مسار تفاعل المستخدم مع التطبيق. يُبين الشكل التالي مثالًا لزر بسيط:

ترويسة ثابتة

يُمكن وضع زر التثبيت في ترويسة header الموقع، والتي تحوي عادًة العلامة التجارية للموقع والقوائم السريعة. يُمكن أن تكون الترويسة ثابتة position:fixed أم لا، وذلك وفق وظائف الموقع واحتياجات المستخدمين.

يُبين الشكل التالي مثالًا لزر تثبيت في الترويسة:

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

وفي جميع الأحوال يجب:

• عدم إظهار زر التثبيت ما لم يُطلق الحدث beforeinstallprompt.
• تقييم أهمية تثبيت التطبيق للمستخدمين وبالتالي الاستهداف الانتقائي لهم وبحيث يتم الاقتراح للمستخدمين المحتملين فقط.
• استخدام الترويسة بكفاءة بحيث يُحقّق التوازن بين ترويج التثبيت وبقية الخيارات الهامة الواجب وضعها في الترويسة أيضًا.

يُبين الشكل التالي زر تثبيت مخصص في الترويسة:

قائمة التنقل

تُعدّ قائمة التنقل navigation menu مناسبة جدًا للترويج لتثبيت التطبيق، لاسيما أن فتح المستخدم لهذه القائمة يدّل بوضوح على تفاعله مع تجربة التطبيق.

يجب التأكد مما يلي:

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

يُبين الشكل التالي زر ترويج التثبيت في أسفل قائمة التنقل:

صفحة الهبوط

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

بالطبع، يجب عرض أهداف الموقع أولًا ومن ثم اقتراح تثبيت التطبيق.

يجب التأكد دومًا مما يلي:

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

يُبين الشكل التالي مثالًا لترويج التثبيت على صفحة هبوط:

شريط التثبيت

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

يجب التأكد مما يلي:

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

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

يُبين الشكل التالي شريط قابل للإخفاء في أعلى الصفحة:

واجهة مستخدم مؤقتة

تُعلّم الواجهة المؤقتة Temporary UI (مثل نموذج تصميم الشريط الخفيف Snackbar) المستخدم بإجراء ما وتسمح له بإتمامه بسهولة. يمتاز استخدام هذه الواجهة لترويج التثبيت بأنه لا يُقاطع تفاعل المستخدم الذي يُمكنه تجاهلها وبالتالي تُخفى الواجهة تلقائيًا.

يُبين الشكل التالي استخدام واجهة مؤقتة لإظهار إمكانية التثبيت:

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

يجب التأكد مما يلي:

• عرض الواجهة المؤقتة لفترة تتراوح بين 4 و 7 ثوانٍ لإتاحة الوقت الكافي للمستخدمين للتفاعل معها دون أي إعاقة لعملهم.
• تجنب عرض الواجهة المؤقتة على واجهات مؤقتة أخرى مثل الأشرطة banners.
• عدم استخدام الواجهات المؤقتة قبل التأكد من اهتمام المستخدم مثل تكراره للزيارات أو تسجيله في الموقع أو أي تفاعل مشابهه مع الموقع.

يُبين الشكل التالي استخدام واجهة مؤقته لإظهار إمكانية التثبيت:

بعد التفاعل

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

يُبين الشكل التالي إظهار ترويج تثبيت بعد إتمام المستخدم لعملية شراء:

إتمام تسلسل تنقل في الموقع أو الخروج منه

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

يجب التأكد مما يلي:

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

تسلسل التسجيل والدخول والخروج

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

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

يجب التأكد مما يلي:

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

يُبين الشكل التالي زر تثبيت مخصص في صفحة التسجيل:

نماذج الاقتراح المُضمّنة

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

خلال نشر المحتوى

يُمكن إظهار الاقتراح ما بين عمليات نشر المحتوى In-feed الجديد مثل المقالات الجديدة أو بطاقات المعلومات.

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

يجب التأكد مما يلي:

• الحدّ قدر الإمكان من تكرار الاقتراح لتجنب إزعاج المستخدمين.
• منح المستخدمين إمكانية رفض الاقتراح.
• حفظ تفضيلات المستخدم (رفضه للترويج).

يُبين الشكل التالي إظهار ترويج خلال تغذية المحتوى:

ترجمة -وبتصرف- للمقال Patterns for promoting PWA installation للمؤلفين: Penny McLachlan و Mustafa Kurtuldu.

اقرأ أيضًا

• ما هي تطبيقات الويب التقدمية ولماذا يجب على المصممين الاهتمام بها؟
• تشغيل تطبيقات الويب التقدمية PWA في وضع انقطاع الاتصال
• شرح ملف البيان manifest لتطبيق الويب التقدمي PWA
• تهيئة تطبيقات الويب التقدمية PWA لاستخدامها كتطبيقات أندرويد

يُعد عنوان URL بالإضافة إلى النص التشعبي Hypertext وبروتوكول HTTP أحد المفاهيم المفتاحية للويب فهو الآلية التي تستخدمها المتصفحات browsers للوصول أي مورد موجود في الويب.

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

سنتعرف في هذا المقال على تفاصيل عنوان URL وكيفية عمل هذه العناوين على الويب.

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

تشريح عنوان URL

إليك بعض الأمثلة عن عناوين URL:

https://developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL

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

يتكون عنوان URL من أجزاء مختلفة بعضها إلزامي وبعضها اختياري. لاحظ الأجزاء المظللة في العنوان التالي والتي تُعد الأكثر أهمية في عنوان URL:

لتوضيح الفكرة يمكن أن نشبّه عنوان URL بعنوان بريدي نمطي، إذ يمثل المخطط Scheme الخدمة البريدية التي تريد استخدامها، ويمثل اسم النطاق Domain name اسم المدينة أو البلدة، وستعمل المنفذ Port عمل الرمز البريدي، وسيمثل المسار Path البناء الذي ينبغي تسليم البريد إليه. أما المعاملات Parameters فستمثل أي معلومات إضافية كرقم الشقة وستمثل المرساة Anchor مستلم الرسالة الفعلي الذي وجَّهت رسالتك إليه.

اقتباس

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

بروتوكول عنوان URL

وهو القسم الأول من URL ويشير إلى البروتوكول الذي ينبغي استخدامه لطلب مورد معين من الخادم (البروتوكول هو طريقة لإعداد آلية لتبادل البيانات ونقلها عبر شبكة من الحواسيب). يُستخدم عادة برتوكولي HTTP و HTTPS (النسخة الآمنة) في مواقع الويب ولا بد من مخاطبة صفحات الويب باستخدام أحدهما. مع ذلك تدرك المتصفحات تمامًا كيف تتعامل مع بروتوكولات Schemes أخرى مثل :mailto (لفتح واجهة بريد إلكتروني) فلا تتفاجأ إن رأيت بروتوكولات أخرى.

التصريح Authority

يأتي بعد البروتوكول التصريح ويفصل بينهما النمط //:. يتضمن التصريح في حال وجوده اسم النطاق (www.example.com مثلًا) ورقم المنفذ (80 مثلًا) يفصل بينهما الرمز :.

• يشير النطاق Domain إلى خادم الويب الذي يُرسل إليه الطلب ويكون عادة على شكل اسم، كما يمكن استخدام عنوان آي بي لكن استخدامه نادر وغير ملائم في معظم الأحيان.
• يشير المنفذ Port إلى البوابة المستخدمة للوصول إلى المورد. يُحذف المنفذ عادة عند استخدام الخادم المنافذ المعيارية للبروتوكول HTTP، إذ يستخدم المنفذ 80 لبروتوكول HTTP والمنفذ 443 لبروتوكول HTTPS عند منح الإذن بالوصول إلى المورد. ما عدا ذلك لا بد من كتابة المنفذ المستخدم.

اقتباس

ملاحظة: تفصل النقطتين المتعامدتين : في النمط //: بين البروتوكول والقسم الذي يليه من URL بينما يشير النمط // أن القسم التالي هو حصرًا التصريح.

في بعض الحالات لا يستخدم URL قسم التصريح كما هو الحال في واجهات البريد الإلكتروني (mailto:foobar). إذ يحتوي URL مخططًا فقط دون تصريح، لذلك لن تجد النمط //، وإنما ستجد فقط النقطتين المتعامدتين التي تعمل فقط كفاصل بين المخطط وعنوان البريد الإلكتروني.

المسار إلى مورد

ويمثل الطريق للوصول إلى مورد موجود على خادم ويب (path/to/myfile.html/‎ مثلًا). مثَّلت هذه المسارات في بدايات الويب الموقع الفيزيائي لملف على خادم، لكنه حاليًا مجرد اختصار يتعامل معه الخادم بطريقة معينة للوصول إلى المورد وغالبًا لا يشير إلى المكان الحقيقي لوجود المورد.

المعاملات

وهي قائمة من العناصر الثنائية على شكل"مفتاح/قيمة" يفصل بينها الرمز & مثل القائمة key1=value1&key2=value2 كما في الصورة السابقة. يمكن لخادم ويب استخدام هذه المعاملات في تنفيذ عمليات إضافية قبل أن يعيد المورد المطلوب. لكل خادم ويب قواعده الخاصة المتعلقة بمعالجة المعاملات، ومن الأفضل دومًا أن تسأل مالك الخادم عن طريقة تعامل خادمه مع المعاملات.

المربط

يمثل المربط # (ويشار إليه المرساة أحيانًا) طريقة للاشارة إلى جزء معين من المورد نفسه، وتشبه فكرته فكرة "الاشارة المرجعية" داخل المورد نفسه. فلو كان المورد ملف HTML مثلًا، سينتقل المتصفح إلى النقطة التي يُعرّفها المربط "#"، وفي حال كان المربط يشير إلى نقطة زمنية معينة من ملفات الصوتية أو الفيديو سيحاول المتصفح الانتقال إلى الزمن الذي يحدده المربط. وتجدر الإشارة هنا، إلى أن القسم الذي يقع بعد الرمز "#" (ويُدعى "مُعرِّف القطعة Fragment Identifier") لن يُرسل أبدًا إلى الخادم مع الطلب.

كيف تستخدم URL

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

تستخدم لغة HTML عناوين URL بكثرة لكي:

• تنشئ روابطًا مع مستندات أخرى باستخدام العنصر <a>.
• تربط مستندًا مع موارده عبر عناصر متعددة مثل <link> أو <script>.
• تعرض الوسائط مثل الصور (باستخدام العنصر <img>) والفيديو (باستخدام العنصر <video>) والملفات الصوتية (باستخدام العنصر<audio>).
• تعرض ملفات HTML أخرى باستخدام العنصر <iframe>.

اقتباس

ملاحظة: عندما تحدد URL لإحضار مورد يُعدُّ جزءًا من صفحة (كالحالة التي نستخدم فيها العناصر <script> و<audio>و<img> و<video> وما شابه) عليك عمومًا استخدام البروتوكولين HTTP وHTTPS باستثناء عدة حالات خاصة منها استخدام البروتوكول data:‎ (راجع URL للبيانات. لا يُعد استخدام FTP آمنًا لذلك توقفت المتصفحات الحديثة عن دعمه.

تستخدم التقنيات الأخرى مثل CSS وJavaScript عناوين URL بكثرة أيضًا، وهذه التقنيات هي ما تشكل الويب في الواقع.

عناوين URL المطلقة والنسبية

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

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

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

لنلق نظرة على بعض الأمثلة لتوضيح الأمر.

أمثلة عن عناوين URL مطلقة

يُعد العنوان الآتي مطلقًا أو كاملًا

 https://developer.mozailla.org/docs/learn

بينما يعد العنوان التالي غير كامل إذ سيستخدم هذا العنوان البروتوكول الضمني للمستند الذي يتضمن عنوان URL.

developer.mozilla.org/en-us/docs/Learn//

أما العنوان الآتي فهو اسم نطاق ضمني، وهي الحالة الأكثر استخدامًا لعناوين URL المطلقة داخل مستندات HTML.

/en-us/docs/learn/

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

أمثلة عن عناوين URL نسبية

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

 https://developer.mozilla.org/en-us/docs/Learn

يستخدم العنوان "Skills/Infrastructure/Understanding_URLs" فكرة الموارد الفرعية، فطالما أنّ عنوان URL لم يبدأ بالرمز / سيحاول المتصفح أن يجد المستند في مجلد فرعي ضمن المجلد الذي يحتوي المورد الحالي أي سنرغب في مثالنا في الوصول إلى عنوان URL التالي:

https://developer.mozilla.org/en-us/docs/Learn/Skills/Infrastructure/Understanding_URLs.

بينما يستخدم العنوان "‎../CSS/display" فكرة التراجع إلى الخلف في مسار الشجرة، ونستخدم في هذه الحالة النمط /.. الموروث من نظام ملفات يونكس لكي نخبر المتصفح أن ينتقل إلى المجلد الأعلى مباشرة.
أي أننا نريد هنا الوصول إلى عنوان URL التالي:

https://developer.mozilla.org/en-US/docs/Learn/../CSS/display

والذي يمكن اختصاره إلى:

https://developer.mozilla.org/en-US/docs/CSS/display

عناوين URL الدلالية

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

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

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

ترجمة -وبتصرف- للمقال What is a URL.

اقرأ أيضًا

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

يُعد مفهوم الروابط التشعبية (تُدعى معظم الأحيان "روابط" فقط) مفهومًا جوهريًا ساهم في تأسيس الويب. فإن أردنا شرح هذا المفهوم لابد من العودة إلى أكثر الأساسيات بساطة في معمارية الويب.

تحدث تيم بيرنرز-لي مخترع الويب عام 1989 عن الأعمدة الثلاث التي تستند إليها الويب:

1. محدد موقع المورد URL: هو نظام عنونة يحدد مكان وجود ملفات الويب.
2. HTTP (بروتوكول نقل النصوص التشعبية): بروتوكول نقل يستخدم لإيجاد الملفات عندما يعطي عنوانها بشكل URL.
3. لغة HTML: وهي لغة توصيفية لإنشاء صفحات الويب وتطبيقات الويب وتسمح بتضمين الروابط التشعبية داخل الصفحات.

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

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

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

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

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

أنواع الروابط

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

• رابط داخلي Internal Link: وهو رابط بين صفحتي ويب تنتميان إلى نفس الموقع. وبالطبع لن تجد موقع ويب ليس فيه هذا النوع من الروابط (ما عدا الموقع وحيد الصفحة).
• رابط خارجي External link: وهو رابط بين صفحة ويب على موقعك وصفحة ويب على موقع آخر. بدون هذا النوع من الروابط ليس هناك ويب على الإطلاق لأنها في الواقع شبكة من صفحات الويب المترابطة. يستخدم هذا النوع لتزويد الزائر بمعلومات إضافية إلى جانب المحتوى الذي تقدمه صفحة الويب.
• رابط وارد Incoming Link: وهو رابط من صفحة خارج موقعك إلى صفحة في موقعك، وهي الحالة المعاكسة للرابط الخارجي. وليس ضروريًا بالطبع ربط صفحتك بكل صفحة خارجية تضع رابطًا لموقعك.

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

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

المرابط

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

الروابط ومحركات البحث

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

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

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

اقتباس

ملاحظة: تحسين محركات البحث SEO اختصارًا لمصطلح Search Engine Optimization أو كما يشاع تسميته (سيو)، وهي دراسة كيفية تحسين ترتيب ظهور موقع ويب في نتائج محركات البحث، ويُعد تحسين الروابط في موقع ويب أحد تقنيات السيو المفيدة.

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

ترجمة -وبتصرف- للمقال What are hyperlinks

اقرأ أيضًا

• تطبيقات الشبكات الحاسوبية: شبكة الويب العالمية
• تطبيقات الشبكات الحاسوبية: خدمات الويب
• ما هو خادم الويب؟
• ما هي الأدوات المستخدمة في بناء مواقع ويب؟

سنتعرف في هذا الفيديو على مفهوم الواجهة البرمجية للتطبيق Application Programming Interface أو اختصارًا API، كما سنتعرف على كيفية بناء مواقع الويب والتطبيقات الحديثة في يومنا هذا بالاعتماد على الواجهات البرمجية ونجيب على سؤال مهم وهو كيف ترتبط الواجهة الأمامية مع الواجهة الخلفية لتطبيق الويب أو الموقع الإلكتروني.

بعد أن تعرفت على الواجهة البرمجية للتطبيق API، يمكنك الاشتراك بدورة PHP المقدمة من أكاديمية حسوب التي تقدم شرحًا مفصلًا حول تطوير الواجهات البرمجية APIs، لتتمكن من فهم واحتراف استعمالها وكيفية التعامل معها.

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

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

• حساب فهرس FOG للنصوص، والذي يوضح مدى تعقيد النص، ويُعرَّف بأنه:

(متوسط عدد الكلمات للجملة الواحدة) + (نسبة الكلمات الأكثر من 5 أحرف) * 0.4

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

حساب عدد الأسطر والكلمات والحروف

إذا نظرنا إلى عداد الكلمات السابق:

import string
def numwords(s):
    lst = string.split(s)
    return len(lst)

with open("menu.txt","r") as inp:
   total = 0
   # accumulate totals for each line
   for line in inp.readlines():
      total += numwords(line)

print( "File had %d words" % total )

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

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

سيبدو wc.py النهائي كما يلي:

import sys, string

# احصل على اسم الملف من سطر الأوامر أو المستخدم
if len(sys.argv) != 2:
   name = input("Enter the file name: ")
else:
   name = sys.argv[1]

# اضبط العدادات على الصفر. هذا ينشئ المتغيرات 
# words - lines - chars = 0, 0, 0

with open(name,"r") as inp:
   for line in inp:
      lines += 1
      # Break into a list of words and count them
      lst = line.split()
      words += len(lst)
      chars += len(line) # Use original line which includes spaces etc.

print( "%s has %d lines, %d words and %d characters" % (name, lines, words, chars) )

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

عد الجمل بدلًا من الأسطر

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

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

لكل سطر في الملف:
   زِد عدد الأسطر بمقدار واحد
   إذا كان السطر فارغًا:
      زِد عدد الفقرات
   عد نهايات أجزاء الفقرات
   عد نهايات الجمل.

أنشئ تقريرًا بالفقرات واأسطر والجمل وأجزاء الجمل والمجموعات والكلمات.

لنحول الآن الشيفرة الوهمية إلى شيفرة حقيقية، وسنستخدم التعابير النمطية في حلنا، لذا ينبغي مراجعة مقال التعابير النمطية في البرمجة من نفس السلسلة، للاطلاع عليها ودراستها:

import re,sys

# استخدم التعابير النمطية للعثور على الأجزاء
sentenceStops = ".?!"
clauseStops = sentenceStops + ",;:\-" # escape '-' to avoid range effect
sentenceRE = re.compile("[%s]" % sentenceStops)
clauseRE = re.compile("[%s]" % clauseStops)

# احصل على اسم الملف من سطر الأوامر أو من المستخدم
if len(sys.argv) != 2:
   name = input("Enter the file name: ")
else:
   name = sys.argv[1]

# اضبط العدادات الآن
lines, words, chars = 0, 0, 0
sentences,clauses = 0, 0
paras = 1  # assume always at least 1 para

# عالج الملف
with open(name,"r") as inp:
   for line in inp:
      lines += 1
      if line.strip() == "": # empty line
         paras += 1
      words += len(line.split())
      chars += len(line.strip())
      sentences += len(sentenceRE.findall(line))
      clauses += len(clauseRE.findall(line))

# اعرض النتائج
output = '''
The file %s contains:
        %d\t characters
        %d\t words
        %d\t lines in
        %d\t paragraphs with
        %d\t sentences and
        %d\t clauses.
''' % (name, chars, words, lines, paras, sentences, clauses)
print( output )

هناك عدة نقاط ينبغي الانتباه إليها في الشيفرة السابقة:

• نستخدم التعابير النمطية هنا لتحسين كفاءة عمليات البحث، رغم إمكانية استخدام عمليات بحث بسيطة عن السلاسل النصية، لكن كنا سنحتاج حينئذ إلى البحث عن كل محرف ترقيم على حدة، وتزيد التعابير النمطية هنا من كفاءة البرنامج، من خلال إيجاد جميع العناصر التي نريدها في بحث واحد، لكن من ناحية أخرى يسهل حدوث الأخطاء فيها، فقد نسينا أثناء محاولتنا الأولى لكتابة الشيفرة أن نهرب المحرف -، فرآه التعبير النمطي مجالًا range، لذا عومل أي عدد في الملف على أنه فاصل لجزء من جملة، واستغرق الأمر كثيرًا حتى عرضنا المشكلة على مجتمع بايثون للعثور على الخطأ، فلما أضفنا محرف " حٌلت المشكلة، كما صرَّفنا التعبيرات مسبقًا precompiled، مما حسّن من الأداء أكثر من استخدام نفس التعبير عدة مرات، كما نلاحظ استخدام التابع findall للحصول على جميع التطابقات في سطر باستدعاء واحد.
• تظهر كفاءة هذا البرنامج في أنه ينفذ ما نريده بالضبط، وإن كان أقل كفاءةً من منظور إمكانية إعادة الاستخدام، لعدم وجود دوال يمكن استدعاؤها من برامج أخرى.
• ليست اختبارات الجمل مثاليةً، لأن العناوين المختصرة -مثل "Mr.‎"- ستُحسب جملةً، لأنها تحتوي على محرف النقطة، ونستطيع تحسين التعبير النمطي ليبحث عن النقطة متبوعةً بمسافة واحدة أو أكثر، ثم متبوعةً بحرف إنجليزي كبير، لكن ذلك لن يحل مشكلة "Mr.‎" لأنها تُتبع عادةً بمسافة ثم كلمة بحرف كبير، وهذا يوضح مدى صعوبة معالجة اللغات الطبيعية بكفاءة، فإذا احتجنا حقًا إلى مثل هذا البحث في الممارسة العملية فهناك وحدات متاحة على الإنترنت مصممة خصيصًا لذلك.

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

تحويل البرنامج إلى وحدة

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

لننقل كتلة المعالجة الأساسية الآن إلى دالة نسميها analyze()‎، وسنمرر كائن ملف معامِلًا إليها، وستعيد الدالة قائمةً من قيم العد في صف tuple، وستبدو الشيفرة كما يلي:

#############################
# Module: grammar
# Created: A.J. Gauld, 2010/12/02
# Modified: A.J. Gauld, 2018/01/12
# 
# Function:
'''
Provides facilities to count words, lines, characters,
paragraphs, sentences and 'clauses' in text files.
It assumes that sentences end with [.!?] and paragraphs 
have a blank line between them. A 'clause' is simply 
a segment of sentence separated by punctuation. The 
sentence and clause searches are regular expression 
based and the user can change the regex used. Can also 
be run as a program.'''
#############################

import re, sys

# اضبط المتغيرات العامة
paras = 1 # We will assume at least 1 paragraph!
lines, sentences, clauses, words, chars = 0,0,0,0,0
sentenceMarks = '.?!'
clauseMarks = '&();:,/\-' + sentenceMarks
sentenceRE = None  # set via a function call
clauseRE = None
format = '''
The file %s contains:
        %d\t characters
        %d\t words
        %d\t lines in
        %d\t paragraphs with
        %d\t sentences and
        %d\t clauses.
''' 


############################
# عرّف الدوال التي ستنفذ العمل

# بإعادة تصريف التعبير النمطي إذا setCounterREs تسمح لنا 
# غيرنا قائمة الأجزاء
def setCounterREs():
    "compiles global regexs from global punctuation sets"
    global sentenceRE, clauseRE
    sentenceRE = re.compile('[%s]' % sentenceMarks)
    clauseRE = re.compile('[%s]' % clauseMarks)

# تصفير العدادات analyze() تستدعي 
def resetCounters():
    " reset global counter variables to initial values "
    chars, words, lines, sentences, clauses = 0,0,0,0,0
    paras = 1


# لشيفرة التعريفات، إذ توفر تقريرًا نصيًا بسيطًا reportStats توجَّه  
def reportStats(theFile):
    " prints out results from global results "
    print( format % (theFile.name, chars, words, lines,
                     paras, sentences, clauses) )

# هي الدالة الأساسية التي تعالج الملف analyze()
def analyze(theFile):
    ''' analyze(aFile) -> None

    Analyzes the input file object putting results in global variables
    '''
    global chars,words,lines,paras,sentences,clauses
    # مصرَّفًا بالفعل REs تحقق إن كان 
    if not (sentenceRE and clauseRE): 
        setCounterREs()
    resetCounters()
    for line in theFile:
        lines += 1
        if line.strip() == "": # empty line
            paras += 1
        words += len(line.split())
        chars += len(line.strip())
        sentences += len(sentenceRE.findall(line))
        clauses += len(clauseRE.findall(line))


# اسمح بتشغيلها إذا استُدعيت من سطر الأوامر
#'__main__' على '__name__' يُضبط متغير
if __name__ == "__main__":
    if len(sys.argv) != 2:
        print( "Usage: python grammar.py <filename>" )
        sys.exit()
    else:
        with open(sys.argv[1],"r") as aFile:
            analyze(aFile)
            reportStats(aFile)

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

أما الجزء الأخير فهو خاصية في بايثون تستدعي أي وحدة محمَّلة في سطر الأوامر "__main__"، نستطيع تجريب المتغير الخاص والمضمَّن __name__، حيث نعرف أن الوحدة ستُستورد وتشغَّل، لذا ننفذ شيفرة التشغيل driver code داخل الكتلة if.

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

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

استخدام الوحدة grammar

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

C:\> python grammar.py spam.txt

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

لنجرِ الآن بعض الاختبارات على ملف اختبارات اسمه spam.txt، والذي يعطي الناتج التالي:

This is a file called spam. It has
3 lines, 2 sentences and, hopefully, 
5 clauses.

أي هذا ملف اسمه spam، فيه 3 أسطر وجملتين وخمسة أجزاء جمل.

لنشغل بايثون الآن ونجرب:

>>> import grammar
>>> grammar.setCounterREs()
>>> txtFile = open("spam.txt")
>>> grammar.analyze(txtFile)
>>> grammar.reportStats(txtFile)
The file spam.txt contains:
        80       characters
        16       words
        3        lines in
        1        paragraphs with
        2        sentences and
        5        clauses.

>>> txtFile.close()
>>> txtFile = open('spam.txt')
>>> grammar.resetCounters()
>>>  # redefine sentences as ending in vowels!
>>> grammar.sentenceMarks = 'aeiou'
>>> grammar.setCounterREs()
>>> grammar.analyze(txtFile)
>>> print( grammar.sentences )
21
>>> txtFile.close()

نلاحظ أنه يفضل استخدام open/cloSe على الملف عند استخدام المحث التفاعلي بدلًا من استخدام with، لأن with ستؤخر التنفيذ حتى نكتب جميع عمليات الملف التي ستكون داخل الكتلة with، أما استخدام open صراحةً فسيمكننا من تنفيذ كل أمر تنفيذًا منفصلًا.

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

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

الأصناف والكائنات

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

أدت محاولتنا الأولى في هذا إلى إنشاء الصنف Document لتمثيل الملف الذي نعالجه:

#! /usr/local/bin/python
################################
# Module: document.py
# Author: A.J. Gauld
# Date:   2010/12/10
# Version: 3.1
################################
'''
Provides 2 classes for parsing text/files.
A Generic Document class for plain ASCII text,
and an HTMLDocument for HTML files.

 Primary services available include 
    - analyze(),
    - reportStats().
'''

import sys,re

class Document:
    sentenceMarks = '?!.'
    clauseMarks = '&()/\-;:,' + sentenceMarks

    def __init__(self, filename):
        self.filename = filename
        self.setREs()
        self.resetCounters()

    def resetCounters(self):
        self.paras = 1
        self.lines = self.getLines()
        self.sentences, self.clauses, self.words, self.chars = 0,0,0,0

    def setREs(self):
        self.sentenceRE = re.compile('[%s]' % Document.sentenceMarks)
        self.clauseRE = re.compile('[%s]' % Document.clauseMarks)

    def getLines(self):
        with open(self.filename)as infile:
            lines = infile.readlines()
        return lines

    def analyze(self):
        self.resetCounters()
        for line in self.lines:
            self.sentences += len(self.sentenceRE.findall(line))
            self.clauses += len(self.clauseRE.findall(line))
            self.words += len(line.split())
            self.chars += len(line.strip())
            if line.strip() == "":
                self.paras += 1

    def formatResults(self):
        format = '''
        The file %s contains:
        %d\t characters
        %d\t words
        %d\t lines in
        %d\t paragraphs with
        %d\t sentences and
        %d\t clauses.
        ''' 
        return format % (self.filename, self.chars,
                         self.words, len(self.lines), 
                         self.paras, self.sentences, self.clauses)

class TextDocument(Document):
    pass

class HTMLDocument(Document):
    pass


if __name__ == "__main__":
       if len(sys.argv) == 2:
           doc = Document(sys.argv[1])
           doc.analyze()
           print( doc.formatResults() )
       else:
           print( "Usage: python document3.py  <file>" )
           print( "Failed to analyze file" )

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

لا زلنا بحاجة إلى resetCounters()‎ للمرونة في التعامل مع أنواع المستندات الأخرى، رغم أننا نخزن المتغيرات الآن داخل الصنف، فعلى الأرجح أننا سنستخدم مجموعة عدادات أخرى عند تحليل ملفات HTML -مثل عدد الوسوم-، ونستطيع التعامل مع أي نوع من المستندات تقريبًا إذا جمعنا resetCounters()‎ مع formatResults()‎، ووفرنا تابع analyze()‎ جديد، أما التوابع الأخرى فهي أكثر استقرارًا، لأن قراءة أسطر الملف أمر قياسي بغض النظر عن نوعه، وضبط التعبيرين النمطيين فرصة جيدة للتدرب، فإذا لم نكن بحاجة إلى ذلك فلا نفعله.

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

المستند النصي

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

والمستند الافتراضي -يُطلق عليه vanilla document أو مستند الفانيليا أحيانًا في إشارة إلى نكهة المثلجات الافتراضية- يتكون من أسطر من المحارف التي لا نعرف عن صياغتها إلا القليل، لذا يجب أن يكون صنفنا Document الأساسي قادرًا على فتح الملف وقراءة محتوياته إلى قائمة من الأسطر، وربما يعيد عدد المحارف والأسطر مثلًا، كما يوفر توابع خطافيةً hook methods فارغةً للأصناف الفرعية الخاصة بالمستند لاستخدامها، لاحظ أن نص آسكي هو أحد أقدم وأبسط الطرق للتعبير عن النصوص، إلا أن الأبجديات التي أضيفت إليه وإضافة اليونيكود قد جعلته معقدًا.

وفقًا لما شرحناه في الفقرات السابقة يجب أن يبدو الصنف Document كما يلي:

#############################
# Module: document
# Created: A.J. Gauld, 2010/12/15
# Version 3
# Function:
''' Provides abstract Document class to count lines, characters
and provide hook methods for subclasses to use to process 
more specific document types'''
#############################

import sys,re

class Document:
   def __init__(self,filename):
       self.filename = filename
       self.lines = self.getLines()
       self.chars = sum( [len(L) for L in self.lines] )
       self._initSeparators()

   def getLines(self):
       f = open(self.filename,'r')
       lines = f.readlines()
       f.close()
       return lines

   # قائمة بالتوابع الخطافية التي يجب تغييرها
   def formatResults(self):
   return "%s contains $d lines and %d characters" % (len(self.lines),
                                                      self.chars)
   def _initSeparators(self): pass 
   def analyze(self): pass

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

كما نلاحظ أننا استخدمنا الدالة sum()‎ لحساب عدد المحارف، وهي تعيد مجموع قائمة من الأعداد، والقائمة في حالتنا هي قائمة أطوال الأسطر في الملف المنتج بواسطة list comprehension.

لم نوفر خيارًا قابلًا للتشغيل باستخدام if __name__ == etc لأن هذا الصنف مجرد abstract.

يجب أن يبدو المستند النصي الآن كما يلي:

class TextDocument(Document):
   def __init__(self,filename):
       super().__init__(filename)
       self.paras = 1
       self.words, self.sentences, self.clauses = 0,0,0

   # غيّر الخطاطيف الآن   
   def formatResults(self):
       format = '''
       The file %s contains:
             %d\t characters
             %d\t words
             %d\t lines in
             %d\t paragraphs with
             %d\t sentences and
             %d\t clauses.
       ''' 
       return format % (self.filename, self.chars,
                       self.words, len(self.lines), 
                       self.paras, self.sentences, self.clauses)

   def _initSeparators(self):
       sentenceMarks = "[.!?]"
       clauseMarks = "[.!?,&:;-]"
       self.sentenceRE = re.compile(sentenceMarks)
       self.clauseRE = re.compile(clauseMarks)

   def analyze(self):
       for line in self.lines:
          self.sentences += len(self.sentenceRE.findall(line))
          self.clauses += len(self.clauseRE.findall(line))
          self.words += len(line.split())
          self.chars += len(line.strip())
          if line.strip() == "":
             self.paras += 1

if __name__ == "__main__":
     if len(sys.argv) == 2:
         doc = TextDocument(sys.argv[1])
         doc.analyze()
         print( doc.formatResults() )
     else:
         print( "Usage: python <document> " )
         print( "Failed to analyze file" )

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

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

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

من مصادر المعلومات المفيدة في مثل هذا النوع من التعديل على الملفات النصية كتاب "معالجة النصوص في بايثون" أو Text Processing in Python لـ David Mertz، لكن لاحظ أن هذا الكتاب متقدم وموجه إلى المبرمجين المحترفين، لذا قد تجد صعوبةً في استيعاب مادته إذا كنت مبتدئًا في البرمجة، لكنك ستجد فيه دروسًا مفيدةً للغاية بالمثابرة والتعلم.

مستند HTML

الخطوة التالية في تطوير تطبيقنا هي توسيع إمكانياته لنستطيع تحليل مستندات HTML، وسنفعل ذلك بإنشاء صنف جديد، وبما أن مستند HTML ما هو إلا مستند نصي يحتوي على الكثير من وسوم HTML وقسم للترويسة في الأعلى؛ فكل ما نحتاج إليه هو حذف هذه العناصر الإضافية ومعاملته بعدها على أنه نص عادي، لذا سننشئ صنفًا جديدًا نسميه HTMLDocument مشتقًا من TextDocument، وسنغير التابع getLines()‎ الذي ورثناه من Document بحيث يحذف الترويسة ووسوم HTML.

سيبدو الصنف HTMLDocument الآن كما يلي:

class HTMLDocument(TextDocument):
    def getLines(self):
       lines = super().getLines()
       lines = self._stripHeader(lines)
       lines = self._stripTags(lines)
       return lines

    def _stripHeader(self,lines):
       ''' remove all lines up until start of body '''
       bodyMark = '<body>'
       bodyRE = re.compile(bodyMark,re.IGNORECASE)
       while bodyRE.findall(lines[0]) == []:
          del lines[0]
       return lines

    def _stripTags(self,lines):
       ''' remove anything between < and >, not perfect but ok for now'''
       tagMark = '<.+>'
       tagRE = re.compile(tagMark)
       lines2 = []
       for line in lines:
           line = tagRE.sub('',line).strip()
           if line: lines2.append(line)
       return lines2

استخدمنا التابع الموروث داخل getLines، وهذا سلوك شائع عند توسيع تابع موروث،حيث ننفذ ذلك بمعالجة أولية، أو نستدعي الشيفرة الموروثة ثم نكمل باقي العمل في الصنف الجديد كما فعلنا هنا، وينفّضذ هذا في التابع __init__ الخاص بالصنف TextDocument أعلاه.

وصلنا إلى التابع الموروث getLines من خلال super()‎، رغم أن التابع معرَّف فعليًا في الصنف Document المجرد في الأعلى، ويرث TextDocument جميع مزايا Document، وبالتالي يحتوي على getLines أيضًا، وهكذا نرى أن بايثون وsuper تجدان التابع المناسب دومًا.

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

من الصعب أن نحذف جميع وسوم HTML باستخدام التعابير النمطية بسبب إمكانية تشعب الوسوم، وبسبب احتمال حدوث خطأ في احتساب محرفي < و> غير المهرَّبيْن على أنهما وسوم في حين أنهما ليسا كذلك، كما أن الوسوم قد تأتي على أكثر من سطر، وغير ذلك من احتمالات الخطأ الواردة، فالأسلم هنا استخدام محلل HTML -مثل الموجود في وحدة html.parser القياسية- لتحويل ملفات HTML إلى نص عادي، لذا أعد كتابة الصنف HTMLDocument لتستخدم وحدة المحلل هنا لتوليد الأسطر النصية.

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

if __name__ == "__main__":
       if len(sys.argv) == 2:
         doc = HTMLDocument(sys.argv[1])
         doc.analyze()
         print( doc.formatResults() )
       else:
         print( "Usage: python <document> " )
         print( "Failed to analyze file" )

وإذا كنت على دراية ببعض أنواع الملفات الأخرى مثل ملفات PDF و LaTeX و RTF و Postscript وغيرها، فهل تستطيع إنشاء أصناف تحقق وفحص لها؟

إضافة واجهة رسومية

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

تصميم الواجهة الرسومية

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

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

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

إذا رسمنا هذه الأفكار أعلاه فقد نحصل على شكل قريب مما يلي:

+-------------------------+-----------+
|    FILENAME             | O TEXT    |
|                         | O HTML    |
+-------------------------+-----------+
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
+-------------------------------------+
|                                     |
|   ANALYZE      RESET       QUIT     |
|                                     |
+-------------------------------------+

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

لنحول ما سبق إلى شيفرة:

import tkinter as tk
import document


################### CLASS DEFINITIONS ######################
class GrammarApp(Frame):
  def __init__(self, parent=0):
    super().__init__(parent)
    self.type = 1    # create variable with default value
    self.master.title('Grammar counter')
    self.buildUI()

استوردنا وحدتي tkinter وdocument، وجعلنا كل أسماء Tkinter مرئيةً داخل الوحدة الحالية، أما بالنسبة للوحدة الثانية فسنحتاج إلى سبق الأسماء بـ document..

كما عرَّفنا التطبيق على أنه صنف فرعي للصنف Frame، ويستدعي التابع __init__ تابع الصنف الرئيسي Frame.__init__‎ لضمان إعداد Tk بالطريقة الصحيحة داخليًا، ثم ننشئ سمةً تخزن قيمة نوع المستند، ونستدعي التابع buildUI الذي ينشئ جميع الودجات لنا، وسننظر الآن فيه:

   def buildUI(self):
     # إطار الخيارات أولًا
     # - اسم الملف ونوعه
     fOpts = tk.Frame(self)
     fFile = tk.Frame(fOpts)
     tk.Label(fFile, text="Filename: ").pack(side="left")
     self.eName = tk.Entry(fFile)
     self.eName.insert(tk.INSERT,"test.htm")
     self.eName.pack(side='left', padx=5)
     fFile.pack(side='left', padx=3)

     # والآن أزرار الانتقاء
     fType = Frame(fFile, borderwidth=1, relief=tk.SUNKEN)
     self.rText = Radiobutton(fType, text="TEXT",
                              variable = self.type, value=1, 
                              command=self.doText)
     self.rText.pack(side=tk.TOP, anchor=tk.W)
     self.rHTML = Radiobutton(fType, text="HTML",
                              variable=self.type, value=2,
                              command=self.doHTML)
     self.rHTML.pack(side=tk.TOP, anchor=tk.W)

     # هو الخيار الافتراضي TEXT اجعل 
     self.rText.select()
     fType.pack(side=tk.RIGHT, padx=3)
     fOpts.pack(side=tk.TOP, fill=tk.X)


     # يحتوي الصندوق النصي على الخرج، فأضف له حشوة
     # (self أي) لإضافة حد إليه، واجعل الأب هو إطار التطبيق
     self.txtBox = Text(self, width=60, height=10)
     self.txtBox.pack(side=tk.TOP, padx=3, pady=3)


     # ضع بعض أزرار التحكم
     fButts = Frame(self)
     self.bAnal = Button(fButts, text="Analyze",
                         command=self.doAnalyze)
     self.bAnal.pack(side=tk.LEFT, anchor=tk.W, padx=50, pady=2)
     self.bReset = Button(fButts, text="Reset",
                          command=self.doReset)
     self.bReset.pack(side=tk.LEFT, padx=10)
     self.bQuit = Button(fButts, text="Quit",
                         command=self.quit)
     self.bQuit.pack(side=tk.RIGHT, anchor=tk.E, padx=50, pady=2)

     fButts.pack(side=tk.BOTTOM, fill=tk.X)
     self.pack()

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

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

أما النقاط الأخرى التي يجب ملاحظتها فهي استخدام ودجات Frame الفرعية لتحوي أزرار الانتقاء Radiobuttons وأزرار الأوامر Button، كما تأخذ أزرار الانتقاء زوجًا من الخيارات هما variable وvalue، ويربط الأول أزرار الانتقاء معًا، من خلال تحديد نفس المتغير الخارجي self.type، ويعطي الخيار الثاني قيمةً فريدةً لكل زر منها.

لاحظ أيضًا الخيارات command=xxx الممررة إلى المتحكمات، فهي توابع سيستدعيها Tk عند الضغط على الزر.

الشيفرة الممثلة لما سبق هي كما يلي:

   ################# EVENT HANDLING METHODS ####################

   # استعد الإعدادات الافتراضية
   def doReset(self):
     self.txtBox.delete(1.0, tk.END)
     self.rText.select()

   # اضبط قيم الانتقاء
   def doText(self):
     self.type = 1

   def doHTML(self):
     self.type = 2

اقتباس

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

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

يتبقى لدينا آخر معالج أحداث، وهو الذي ينفذ التحليل:

   # أنشئ نوع المستند المناسب وحلله.
   # ثم اعرض النتائج في الاستمارة
   def doAnalyze(self):
     filename = self.eName.get()
     if filename == "":
        self.txtBox.insert(tk.END,"\nNo filename provided!\n")
        return
     if self.type == 1:
        doc = document.TextDocument(filename)
     else:
        doc = document.HTMLDocument(filename)
     self.txtBox.insert(tk.END, "\nAnalyzing...\n")
     doc.analyze()
     resultStr = doc.formatResults()
     self.txtBox.insert(tk.END, resultStr)

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

تستخدم قيمة self.type المحددة بواسطة أزرار الانتقاء لتحديد نوع المستند الذي يجب إنشاؤه.

تلحَق النتائج بالحقل النصي -الوسيط tk.END في insert- مما يعني أننا نستطيع التحليل عدة مرات وموازنة النتائج، وهذه ميزة الصندوق النصي هنا عن أسلوب خرج العناوين المتعددة multiple label output.

وكل ما نحتاج إليه الآن هو إنشاء نسخة لصنف التطبيق GrammarApp وتشغيل حلقة الحدث:

if __name__ == "__main__":  
    myApp = GrammarApp()
    myApp.mainloop()

لننظر الآن إلى النتيجة النهائية في نظام ويندوز، والتي تعرض نتائج تحليل ملف HTML:

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

خاتمة

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

ترجمة -بتصرف- للفصل الثاني والعشرين: A Case Study من كتاب Learn To Program لصاحبه Alan Gauld.

اقرأ أيضًا

• المقال التالي: التعامل مع قواعد البيانات
• المقال السابق: مقدمة إلى البرمجة الوظيفية Functional Programming
• تعلم البرمجة
• بداية رحلة تعلم البرمجة

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

يعتقد المؤيدون للبرمجة الوظيفية أنها الأسلوب الأمثل لتطوير البرمجيات.

سنغطي في هذا المقال ما يلي:

• الفرق بين أسلوب البرمجة التقليدي والأسلوب الدالّي في البرمجة.
• الدول والتقنيات الخاصة بالبرمجية الوظيفية في بايثون.
• دوال لامدا Lambda Functions.
• تقييم الدارة المقصورة البولياني Short Circuit Boolean evaluation، والتعابير الشرطية.
• البرامج كتعابير.

ما هي البرمجية الوظيفية؟

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

وتدور البرمجية الوظيفية حول التعابير، بل يمكن القول إن البرمجية الوظيفية هي البرمجة تعبيرية التوجه expression oriented programming، لأن كل شيء فيها يؤول إلى تعبير في النهاية، وقد ذكرنا أن التعبير هو تجميعة من العمليات والمتغيرات التي ينتج عنها قيمة واحدة، فيكون x == 5 تعبيرًا بوليانيًا boolean، و5 + (7-Y) تعبيرًا حسابيًا، و"Hello world".uppercase()‎ تعبيرًا نصيًا، وهذا التعبير الأخير هو استدعاء دالة function أيضًا، أو استدعاء تابع method بالأحرى، على كائن السلسلة النصية "Hello world"، وسنرى أهمية الدوال في البرمجية الوظيفية، كما هو واضح من الاسم.

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

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

ويهَيكل البرنامج الوظيفي بتعريف تعبير يلتقط الهدف من البرنامج، وكل شرط term في التعبير هو تعليمة لخاصية من خصائص المشكلة -وربما يوضع الشرط نفسه في تعبير آخر-، ونحصل على الحل من خلال تقييم كل شرط من هذه الشروط.

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

اقتباس

موثوقية البرمجية الوظيفية

تأتي موثوقية البرامج الوظيفية من العلاقة الوطيدة بين البنى الخاصة بالبرمجية الوظيفية والمواصفات الاصطلاحية formal specification languages مثل: Z أو VDM، فإذا حُددت مشكلة في لغة رسمية فمن البديهي أن نترجم التحديد إلى لغة وظيفية التوجه مثل Haskell، لكن إذا كان التحديد خاطئًا فسيكون البرنامج الناتج مرآة لذلك الخطأ! يُعرف هذا المبدأ في علوم الحاسوب باسم "Garbage In, Garbage Out" أو "قمامة داخلة، قمامة ناتجة"، ولا تزال هذه الصعوبة في التعبير عن متطلبات النظام بأسلوب موجز لا لبس فيه من أعظم التحديات في هندسة البرمجيات.

كيف تنفذ بايثون البرمجية الوظيفية

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

سننظر الآن في بعض الدوال المتوفرة في بايثون ونرى كيف تعمل على بعض أمثلة هياكل البيانات التي نعرّفها على النحو التالي:

choices = ['eggs','chips','spam']
numbers = [1,2,3,4,5]

def spam(item): 
    return "Spam & " + item

الدالة map(aFunction, aSequence)‎

تطبق الدالة aFunction الخاصة ببايثون على كل عضو من aSequence، ويكون التعبير كما يلي:

L = map(spam, choices)
print( list(L) )

ينتج عن هذا إعادة قائمة جديدة في L، مع السابقة Spam &‎ في حالتنا قبل كل عنصر، ونلاحظ كيف مررنا الدالة spam()‎ إلى دالة map()‎ مثل قيمة، أي أننا لم نستخدم الأقواس لتنفيذ شيفرة الدالة، بل استخدمنا اسمها مرجعًا إلى الدالة، ولعلك تذكر أننا فعلنا هذا مع معالجات الأحداث في مقال برمجة الواجهات الرسومية، وهذه الخاصية في معاملة الدوال مثل قيم هي إحدى المزايا الرئيسية في البرمجية الوظيفية.

يمكن تحقيق نفس النتيجة بكتابة ما يلي:

L = []
for i in choices:
   L.append( spam(i) )
print( L )

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

الدالة (filter(aFunction, aSequence

تستخلص filter كل عنصر في التسلسل aSequence تعيد له الدالة aFunction القيمة True، وإذا عدنا إلى قائمة الأعداد الخاصة بنا فيمكن أن ننشئ قائمةً جديدةً من الأعداد الفردية فقط:

def isOdd(n): return (n%2 != 0) # mod استخدم العامل
L = filter(isOdd, numbers)
print( list(L) )

نلاحظ مرةً أخرى أننا نمرر اسم الدالة isodd إلى filter قيمة وسيط، بدلًا من استدعاء isodd()‎ مثل دالة، وعلى أي حال نستطيع كتابة الأسلوب البديل التالي:

def isOdd(n): return (n%2 != 0)
L = []
for i in numbers:
   if isOdd(i):
      L.append(i)
print( L )

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

توجد عدة أدوات أخرى للبرمجة الوظيفية في وحدة اسمها functools يمكن استيرادها وتصفحها في محث بايثون، ويُرجع إلى dir()‎ وhelp()‎ عند الحاجة.

الدالة لامدا Lambda

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

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

وتبدو الدالة لامدا بالشكل التالي:

lambda <aParameterList> : <a Python expression using the parameters>

وعلى ذلك يمكن كتابة دالة isodd سالفة الذكر كما يلي:

isOdd = lambda j: j%2 != 0

ونتجنب هنا تعريف السطر بالكامل من خلال إنشاء الدالة لامدا داخل الاستدعاء على filter كما يلي:

L = filter(lambda j: j%2 != 0, numbers)
print( list(L) )

ويُنفَّذ الاستدعاء إلى map باستخدام ما يلي:

L = map(lambda s: "Spam & " + s, choices)
print( list(L) )

ونلاحظ هنا أننا كنا نحول نتائج map()‎ وfilter()‎ إلى قوائم، لأنهما صنفان يعيدان نسخًا من شيء يدعى المتكرر itreable، وهو يتصرف مثل التسلسل أو التجميعة إذا استُخدم على حلقة تكرارية، ويمكن تحويله إلى قائمة، لكن كفاءته تظهر في استخدام الذاكرة، وصديقتنا القديمة range()‎ قابلة للتكرار كذلك، وتسمح بايثون بإنشاء أنواع قابلة للتكرار خاصة بنا، لكننا لن نشرحها.

استيعاب القوائم

استيعاب القوائم list comprehension هي تقنية لبناء قوائم جديدة، مستوردة من لغة Haskell وأُدخلت إلى بايثون في الإصدار الثاني، وبنيتها غريبة قليلًا وتشبه الصياغة الرياضية، مثلًا:

[<expression> for <value> in <collection> if <condition>]

والتي تكافئ ما يلي:

L = []
for value in collection:
    if condition:
        L.append(expression)

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

>>> [n for n in range(10) if n % 2 == 0 ]
[0, 2, 4, 6, 8]

والذي يقول إننا نريد قائمةً من القيم n التي تُختار من المجال 0-9، وتكون زوجيةً (n % 2 == 0)، ويمكن استبدال دالةٍ بالشرط الأخير لا شك، شرط أن تعيد الدالة قيمةً تستطيع بايثون أن تفسرها مثل قيمة بوليانية، وعليه يمكن إعادة كتابة المثال السابق كما يلي:

>>>def isEven(n): return ((n%2) == 0)
>>> [ n for n in range(10) if isEven(n) ]
[0, 2, 4, 6, 8]

والآن لننشئ قائمةً من تربيعات أول 5 أعداد:

>>> [n*n for n in range(5)]
[0, 1, 4, 9, 16]

نلاحظ أن تعليمة if الأخيرة لم تكن ضروريةً لكل حالة، فالتعبير الابتدائي هنا هو n*n، حيث نستخدم جميع قيم المجال، لنستخدم الآن تجميعةً موجودةً مسبقًا بدلًا من دالة المجال:

>>> values = [1, 13, 25, 7]
>>> [x for x in values if x < 10]
[1, 7]

يمكن استخدام ذلك لاستبدال دالة المرشح التالية:

>>> print( list(filter(lambda x: x < 10, values)) )
[1, 7]

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

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

بنى أخرى

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

التقييم المقصور أو تقييم الدارة المقصورة

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

>>> def TRUE():
...   print( 'TRUE' )
...   return True
...   
>>> def FALSE():
...   print( 'FALSE' )
...   return False
...

نعرِّف أولًا دالتين تخبراننا متى تُنفَّذان وتعيدان قيمة أسمائهما، ونستخدم ذلك لنرى كيفية تقييم التعابير البوليانية، لاحظ أن الخرج بالأحرف الكبيرة ناتج عن الدوال، والخرج بالأحرف مختلطة الحالة ناتج عن التعبير:

>>> print( TRUE() and FALSE() )
TRUE
FALSE
False
>>> print( TRUE() and TRUE() )
TRUE
TRUE
True
>>> print( FALSE() and TRUE() )
FALSE
False
>>> print( TRUE() or FALSE() )
TRUE
True
>>> print( FALSE() or TRUE() )
FALSE
TRUE
True
>>> print( FALSE() or FALSE() )
FALSE
FALSE
False

نلاحظ أنه إذا تحقق الجزء الأول من تعبير AND -أي كان True- وفقط إذا تحقق؛ فسيقيَّم الجزء الثاني، أما إذا لم يتحقق الجزء الأول -كان False- فلن يُقيَّم الجزء الثاني بما أن التعبير ككل لا يمكن أن يتحقق.

وبالمثل ففي التعبير المبني على OR، إذا كان الجزء الأول True فلا توجد حاجة إلى تقييم الجزء الثاني، لأن التعبير الكلي يجب أن يكون True، وذاك يتحقق بأحد الجزئين فقط.

هناك ميزة أخرى في تقييم بايثون للتعابير البوليانية يمكن استغلالها، وهي أنها لا تعيد -عند تقييم تعبير ما- True أو False فقط، بل تعيد القيمة الحقيقية للتعبير، لذا ستعيد بايثون السلسلة النصية نفسها إذا تحققنا من سلسلة فارغة -والتي يجب أن تُعد False- كما يلي:

if "This string is not empty": print( "Not Empty" )
else: print( "No string there" )

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

if TRUE(): print( "It is True" )
else: print( "It is False" )

يمكن استبدال بنية وظيفية دالية بها:

V =  (TRUE() and "It is True") or ("It is False")
print( V )

جرب العمل على هذا المثال واستبدل استدعاءً إلى FALSE()‎ بالاستدعاء إلى TRUE()‎.

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

result = <True expression> if <test condition> else <False expression>

وسيبدو مثال حقيقي بها كما يلي:

>>> print( "This is True" if TRUE() else "This is not printed" )
TRUE
This is True

وإذا استخدمنا else:

>>> print( "This is True" if FALSE() else "We see it this time" )
FALSE
We see it this time

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

ولنضع هذا في تدريب عملي سنكتب برنامج المضروب factorial بأسلوب وظيفية كليًا، باستخدام lambda بدلًا من def، والتعاودية بدلًا من الحلقات التكرارية، والتعابير الشرطية بدلًا من if/else المعتادة:

>>> factorial = lambda n: ( None if n < 0 else 
                            1 if (n == 0) else 
                            factorial(n-1) * n )
>>> print( factorial(5) )
120

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

استنتاجات

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

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

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

b = Button(parent, text="Press Me", 
           command = lambda : print("I got pressed!"))
b.pack()

نلاحظ أنه رغم عدم السماح لمعالج الحدث بامتلاك معامِل إلا أننا نسمح بتحديد سلسلة داخل متن لامدا، ونستطيع الآن إضافة زر ثانٍ بسلسلة مختلفة كليًا:

b2 = Button(parent, text="Or Me", 
           command = lambda : print("I got pressed too!"))
b2.pack()

كما نستطيع توظيف lambda عند استخدام تقنية الربط bind technique التي ترسل كائن حدث مثل وسيط:

b3 = Button(parent, text="Press me as well")
b3.bind(<Button-1>, lambda ev : write("Pressed"))

البرمجية الوظيفية في جافاسكربت

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

<script type="text/javascript">
var i, values;

function times(m) {
    var results = new Array();
    for (i = 1; i <= 12; i++) {
        results[i] = i * m;
        }
    return results;
}


// استخدم الدالة
values = times(8);

for (i=1;i<=12;i++){
    document.write(values[i] + "<br />");
    }
</script>

لاحظ أننا عرّفنا الدالة بوضع الاسم times بعد الكلمة المفتاحية function، لكن جافاسكربت تسمح لنا بتسمية الدالة من خلال الإسناد، كما في أسلوب لامدا الخاص ببايثون أعلاه:

times = function(m) {
    var results = new Array();
    for (i = 1; i <= 12; i++) {
        results[i] = i * m;
        }
    return results;
}

لذا يكون times الآن متغيرًا يحمل مرجعًا إلى كائن الدالة، ويمكن استدعاؤه كما فعلنا من قبل:

values = times(8);

for (i=1;i<=12;i++){
    document.write(values[i] + "<br />");
    }

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

<html>
<head>
<title>Callback test</title>
<script type="text/javascript">
window.setTimeout( function() {
       document.write("رأيتني الآن!");
     }, 3000);
</script>
</head>

<body>
<p>انتظر نهاية الوقت....<p>

</body>
</html>

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

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

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

خاتمة

نرجو في نهاية هذا المقال أن تكون تعلمت ما يلي:

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

ترجمة -بتصرف- للفصل الحادي والعشرين: Functional Programming من كتاب Learn To Program لصاحبه Alan Gauld.

اقرأ أيضًا

• المقال التالي: دراسة حالة برمجية
• المقال السابق: مفهوم التعاودية Recursion
• البرمجة الحدثية Event Driven Programming المساقة بالأحداث
• مقدمة في البرمجة الشرطية
• البرمجة كائنية التوجه