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

لا يكاد يخلو أي موقع ويب من وجود خرائط Google فمن خلال وضع خريطة على الموقع الخاص بك فإنك تعطي تأثيرًا غنيًا ومستوى أعلى للتفاعل بين المستخدمين. سأقوم في هذا المقال بشرح كيفيّة استخدام خرائط غوغل وإضافتها إلى صفحة الويب بالإضافة إلى كيفيّة تحديد أكثر من موقع بنفس الوقت على نفس الخريطة، وشرح بعض المزايا الـتي يمكنك إضافتها إلى خريطتك. يمكنك تحميل الملف المصدري للمثال الموضح في هذا الدرس. إستخدام مكتبة Google APIمكتبة Google Maps API هي عبارة عن مكتبة جافاسكربت ولنتمكن من إستخدام مكتبة Google API قم بإضافة الـسكربت الـخاص بذلك. <script src ="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> إنشاء الخريطةقم الآن بإنشاء div بالأبعاد الـتي تريد أن تظهر بها الـخريطة وقم بإعطاءه "id="map. <div id="map" style="width: 600px; height: 400px;" ></div>الآن لنقم بإنشاء السكربت لإظهار الخريطة، يجب عليك عند وضع أي خريطة أن تقوم بتحديد الإحداثيات: خط الطول longitude وخط العرض latitude ضمن الخاصية center. يمكنك معرفة الإحداثيات لمنطقة ما بالدخول لموقع LatLong وكتابة اسم المدينة أو المنطقة. في هذا المثال ستعرض الخريطة موقع تركيا Turkey. لنقم الآن ضمن الدالة {} ()function initialize، بتحديد خصائص الـخريطة ضمن الـمتغير mapProp، مثل: الموقع الذي سيظهر عند تحميلها، نوعها، وحجم الـتكبير الذي نريده zoom. كما هو موضح في الـكود الـتالـي: <script type="text/javascript"> function initialize() { var mapProp = { center: new google.maps.LatLng(38.963745, 35.243322), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; } </script> نستخدم الخاصية zoom لتحديد البعد الذي نريده للمكان (قريب – بعيد).الخاصية mapTypeId تحدد نوع الخريطة الذي سيظهر:ROADMAP ( الخريطة العادية 2D map)SATELLITE (خريطة مصورة)HYBRID (خريطة مصورة بالإضافة الى أسماء الطرق والمدن)TERRAIN (خريطة تتضمن الجبال والأنهار…الـخ)لنقم الآن بتعريف متغير map وإعطاءه id الخاصة بالـ div: var map = new google.maps.Map(document.getElementById("map"), mapProp);ثم إضافة الحدث DOM listener الذي يقوم بتنفيذ الدالة ()initialize عند تحميل صفحة الويب: google.maps.event.addDomListener(window, 'load', initialize);ليصبح الكود على هذا الشكل: <script type="text/javascript"> function initialize() { var mapProp = { center: new google.maps.LatLng(38.963745, 35.243322), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script>ستظهر لك الخريطة بهذا الشكل: وضع محددات Markersإضافة محدد واحدلنقم الآن بتحديد موقع معين ووضع محدد (marker). أولًا قم بتعريف مصفوفة تحتوي على الإحداثيات (خط الـطول وخط الـعرض) للمدينة أو البلد أو الموقع المعين الذي تريد تحديده. مثلًا مدينة اسطنبول Istanbul: var myLatLng = {lat: 41.008238, lng: 28.978359 };هنا سأقوم بإضافة محدد واحد ثم سأشرح كيف يمكننا إضافة أكثر من محدد. الآن نعطي للخاصية center الـمتغير myLatLng: var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: myLatLng });ثم نقوم بتعريف الـمحدد وإعطاء للخاصية position الـمتغير myLatLng: var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' });سيظهر بهذا الشكل: إضافة أكثر من محدد على نفس الـخريطةقم بتعريف مصفوفة تحتوي على إحداثيات المواقع الـتي تود تحديدها، سأقوم بتحديد 6 مدن: Istanbul, Antalya, Ankara, Trabzon, Bursa, Adana كما هو موضح أدناه: var myLocations = [ ['Istanbul', 41.008238, 28.978359, 1], ['Antalya', 36.896891, 30.713323, 2], ['Ankara', 39.933363, 32.859742, 3], ['Trabzon', 41.002697, 39.716763, 4], ['Bursa', 40.188528, 29.060964, 5], ['Adana', 36.991419, 35.330829, 6] ];الآن عند تعريف المحدد قم بعمل for loop حلقة تكرار وتعريف متغير i ومن ثم إعطاء الـمصفوفة myLocations للخاصية position: var marker, i; for (i = 0; i < myLocations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(myLocations[i][1], myLocations[i][2]), map: map }); }وهذه هي المواقع التي قمنا بتحديدها: وضع محدد مع لصيقة (label) عند الـنقر على مكان معينسأقوم هنا بشرح فكرة عن الـevents في Google map ثم سأتطرق فيما بعد لشرح الـevents بالتفصيل في مقال مقبل إن شاء الله. الآن لنرى كيف يمكننا عند الضغط على مكان معين على الخريطة إظهار محدد مع لصيقة. مثال: marker A, marker B. أولاً يجب تعريف متغير Labels نضع فيه القيم الـتي نريد إظهارها في اللصيقة. مثال: الأحرف من A-Z. ونحتاج أيضًا إلى تعريف متغير labelIndex لتحديد الـقيمة الـتي نريد إظهارها. var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var labelIndex = 0;الآن قم بتحديد المكان الـذي ستفتح عنده الخريطة. مثال: تركيا. var Turkey = { lat: 38.963745 , lng: 35.243322 }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: Turkey });الدالة ()addMarkerيقوم الحدث event.addListener باستدعاء التابع ()addMarker عند الضغط على الخريطة. كما في المثال التالي: google.maps.event.addListener(map, ‘click’, function(event) { addMarker(event.latLng, map); });وليكون هناك marker محدد عند فتح الخريطة قم بإضافة محدد إلى Turkey: addMarker(Turkey, map);لنكتب الآن الدالة ()addMarker: نحتاج لتعريف 2 parameters (معاملين) هما الـخريطة والـموقع map & location ثم نقوم بتعريف marker وإعطاء المعامل location للخاصية position. ولإظهار label نقوم بإعطاء الـمتغير labels الـذي يحتوي على الأحرف من A-Z للخاصية label مع تحديد ++index لكي ينتقل عند كل نقرة جديدة لحرف جديد وإظهاره على الـ marker كما هو موضح في الكود الـتالي: function addMarker(location, map) { var marker = new google.maps.Marker({ position: location, label: labels[labelIndex++ % labels.length], map: map }); }ستظهر لك الخريطة بهذا الشكل: وعند النقر على الخريطة: إضافة تأثير Marker Animationيمكنك إضافة تأثير حركي على المحدد ليبدو وكأنه يقفز ، فقط باستخدام خاصية animation:google.maps.Animation.BOUNCE كما هو موضح في الكود الـتالـي: var marker = new google.maps.Marker({ position: myCenter, animation: google.maps.Animation.BOUNCE });إضافة أيقونة للمحدد يمكنك تغيير الأيقونة الخاصة بالمحدد ووضع أيقونة من اختيارك عن طريق الخاصية icon، حيث تقوم بإعطاء مسار الصورة للخاصية icon. كما هو موضح في الكود التالي: var marker = new google.maps.Marker({ position: myCenter, icon:'pin.png' });ستظهر لك الخريطة بهذا الشكل: إضافة شكل متعدد الخطوط Polyline تتيح لك ميزة polyline رسم خط يصل بين سلسلة إحداثيات على الخريطة بشكل متسلسل، على سبيل المثال يمكنك رسم مسار رحلة عبر مجموعة من المدن ويمكنك التحكم بخصائص عديدة للخط مثل اللون والشفافية والحجم. خصائص الميزة Polyline: path - تحدد مجموعة الإحداثيات التي سيمر بها الخط.strokeColor - يحدد لون الخط بالـHex كود.strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.strokeWeight - يحدد عرض الخط بالبكسل.Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا. لنقم الآن بتحديد مجموعة إحداثيات لمدن ونصل فيما بينها عن طريق polyline، سأستخدم نفس الإحداثيات التي استخدمتها في تحديد المدن عندما وضعت أكثر من محدد، سأقوم برسم خط بين ثلاث مدن: اسطنبول، انطالـيا، طرابزون. أولاً: تحديد إحداثيات الـمدن: var istanbul = new google.maps.LatLng(41.008238, 28.978359); var antalya = new google.maps.LatLng(36.896891, 30.713323); var trabzon = new google.maps.LatLng(41.002697, 39.716763);ثانيًا: نقوم بتعريف مصفوفة myTrip وتعبئتها بأسماء المتغيرات (المدن الـتي نريد تحديد المسار عليها ): var myTrip = [ istanbul, antalya, trabzon];وثم نعطي المصفوفة للخاصية path: path: myTrip,ثالثًا: نقوم بتعريف متغير flightPath لاختيار الـخاصية polyline: كما هو موضح في الكود الـتالي: var map = new google.maps.Map(document.getElementById(“map”),mapProp); var myTrip = [ istanbul, antalya, trabzon]; var flightPath = new google.maps.Polyline({ path:myTrip, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2 }); flightPath.setMap(map); }ستظهر لك الخريطة بهذا الشكل: إضافة مضلع Polygonتتيح لك هذه الـميزة إنشاء مضلع تكون زواياه عبارة عن سلسلة الإحداثيات التي تريد الوصل بينها. لا تختلف ميزة polygon كثيراً عن polyline من حيث كتابة الـتعليمات فقط نقم باستبدالـ polyline بـpolygon. خصائص الـميزة polygon: path - تحدد مجموعة الإحداثيات التي سيمر بها الخط.strokeColor - يحدد لون الخط بالـHex كود.strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.strokeWeight - يحدد عرض الخط بالبكسل.fillColor - يحدد لون المضلع بالـHex كود.fillOpacity - يحدد نسبة الشفافية للمضلع بين 0.0 و 1.0.Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا. كما هو موضح في الكود التالي: var map = new google.maps.Map(document.getElementById(“map”),mapProp); var myTrip = [istanbul, antalya, trabzon]; var flightPath = new google.maps.Polygon({ path: myTrip, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2 }); flightPath.setMap(map); }ستظهر لك الـخريطة بهذا الـشكل: إضافة دائرة Circleتتيح لك هذه الميزة إحاطة منطقة معينة على الخريطة بدائرة، يمكنك التحكم بقطر الدائرة ولونها وشفافيتها. خصائص الميزة Circle: center - تحديد إحداثيات مركز الدائرة. radius - تحديد قطر الدائرة بالمتر المربع. strokeColor - يحدد لون الخط بالـHex كود.strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.strokeWeight - يحدد عرض الخط بالبكسل.fillColor - يحدد لون المضلع بالـHex كود.fillOpacity - يحدد نسبة الشفافية للمضلع بين 0.0 و 1.0.Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا.كما هو موضح في الكود التالي: var map = new google.maps.Map(document.getElementById(“map”), mapProp); var flightPath = new google.maps.Circle({ center: istanbul, radius: 20000, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#0000FF", fillOpacity: 0.4 }); flightPath.setMap(map); ستظهر لك الخريطة بهذا الشكل: إضافة نافذة نصية InfoWindowتتيح لك ميزة infoWindow إظهار نافذة على موقع معين محدد باسم بحيث يمكنك كتابة اسم الموقع المحدد بداخلها. كما هو موضح في الكود التالي: var map = new google.maps.Map(document.getElementById(“map”), mapProp); var marker = new google.maps.Marker({ position: new google.maps.LatLng(38.963745, 35.243322), }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:”Hello World!” }); infowindow.open(map, marker); }ستظهر لك الخريطة بهذا الشكل: هكذا نكون قد استعرضنا أهم النقاط والميزات التي تتيح لك استخدام خرائط Google Maps بسهولة في موقعك الخاص. هل أنت جاهز الآن لإضافة Google Maps إلى موقعك والإستفادة من مزاياها؟ الـمصدر: Google Developers.حقوق الصورة البارزة: Designed by Freepik.

يُعتبر إطار العمل دوت نت NET Framework. من شركة مايكروسوفت من أُطر العمل المشهورة جدًّا، فمنذ الإصدار التجريبي الأوّل أواخر عام 2000 وحتى الإصدار 4.6 حاليًّا شهد تحسينات كبيرة جعلت من لغات البرمجة التي تعمل بالاعتماد عليه لغات برمجة غنيّة ومعاصرة. يُعتبر إطار العمل دوت نت الكيان الأساسيّ التي تعتمد عليه التطبيقات في تنفيذ المهام المطلوبة منها. فهو يوفّر الوسائل اللازمة لوصول مثل هذه التطبيقات إلى الملفات والتعامل مع HTTP والوصول والتعامل مع قواعد البيانات وغيرها من المهام الأساسيّة التي قد يحتاجها أيّ تطبيق حاسوبيّ. صُمّم إطار العمل دوت نت منذ البداية لكي يعمل على أيّ نظام تشغيل أو أيّ عتاد صلب متاح، وعلى الرغم من أنّ مايكروسوفت لم تدعم تشغيل إطار العمل هذا سوى على أنظمة تشغيل ويندوز، إلّا أنّه جرت محاولات مستقلة لنقله إلى لينكس عن طريق مشروع mono مفتوح المصدر. وقد نجحت هذه المحاولة بصورة لا بأس بها واستمر المشروع لعدّة سنوات، ثمّ توّج بنقله إلى أنظمة تشغيل الأجهزة الذكيّة وهذا ما قامت به شركة Xamarin التي استحوذت عليها شركة مايكروسوفت قبل أقل من شهر من الآن، حيث تمكّنت Xamarin من ذلك بالاعتماد على مشروع mono مفتوح المصدر. تُعتبر لغة سي شارب #C لغة البرمجة الأساسيّة ضمن إطار العمل دوت نت، وقد واكبْتُ تطوّرها منذ الإصدار الأوّل وحتى اليوم. ومما لا شكّ فيه أنّها قد شهدت تحسينات كبيرة ومزايا مفيدة تجمع بين القوّة والمرونة لتطوير طيف واسع من التطبيقات البرمجيّة تشمل تطبيقات سطح المكتب Desktop Applications وتطبيقات ويب باستخدام ASP.NET وتطبيقات خدمات ويب مثل WCF (اختصار لـ Windows Communication Foundation) وحتى تطبيقات الأجهزة الذكيّة التي تعمل على نظام تشغيل Windows Phone أو التي تعمل على باقي الأنظمة مثل Android و iOS من خلال منصّة Xamarin. لن ندخل في التفاصيل الدقيقة لمعمارية إطار العمل دوت نت، وذلك لجعل هذه السلسلة مبسّطة قدر المستطاع. يكفيك أن تعلم أنّ إطار العمل هذا يتكوّن من قسمين رئيسيّين: بيئة التنفيذ المشتركة Common Language Runtime وتُدعى اختصارًا CLR. مكتبة أصناف إطار العمل Framework Class Library وتُدعى اختصارًا FCL. حول هذه السلسلة سنتعلّم في هذه السلسلة كتابة تطبيقات باستخدام لغة سي شارب #C بأسلوب مبسّط وسلس وذلك من خلال تطبيقات موجّه الأوامر Console Applications، وسبب تفضيلي لهذه التطبيقات عن سواها، هو أنّه تسمح لك بالتركيز على تعلّم اللغة نفسها دون تشتيت الانتباه إلى العديد من الجوانب التي تتطلّبها أنواع التطبيقات الأخرى كتطبيقات سطح المكتب لويندوز على سبيل المثال، رغم أنّنا سنتحدّث القليل عنها في الدرس الأخير. ما الذي أحتاجه لكي أستفيد من هذه السلسلة؟ تفترض هذه السلسلة أنّك تمتلك معرفة عامّة بأساسيّات البرمجة. ستحتاج أيضًا إلى حاسوب ذو نظام تشغيل ويندوز 7.1 أو أعلى. بالإضافة إلى تحميل وتنصيب بيئة التطوير Visual Studio 2015 Community المجّانيّة. كما يمكنك تجريب معظم البرامج الموجودة في هذه السلسلة حتى ولو لم يكن لديك نظام تشغيل ويندوز أصلًا عن طريق موقع NET Fiddle. ولكن لن تستفيد بهذه الطريقة من المزايا الهامّة التي يوفّرها لك Visual Studio. الأقسام الأساسية لإطار العمل دوت نت سنتحدّث قليلًا عن القسمين الأساسيّين لإطار العمل دوت نت بالإضافة إلى مترجم سي شارب C# Compiler، لكي تتكوّن لدينا الصورة الواضحة لآليّة عمل تطبيقات دوت نت. بيئة التنفيذ المشتركة CLR هي البيئة التي تنفّذ البرامج المكتوبة بلغات دوت نت، وتشكّل حاضنةً لهذه البرامج من خلال عزلها عن العتاد الصلب hardware للجهاز التي تعمل عليه. تستطيع تشبيهها بالآلة الافتراضيّة Virtual Machine الخاصّة بلغة Java. وهي مسؤولة عن إدارة المصادر التي يحتاجها البرنامج في عمله، وفي مقدّمتها الذاكرة. حيث تعمل هذه البيئة على إدارة عمليّات إنشاء الكائنات التي يحتاجها البرنامج، ومن ثمّ التخلّص منها عند انتفاء الحاجة إليها. تتوفّر CLR بشكل افتراضيّ على معظم أنظمة تشغيل ويندوز (مع الاختلاف بالإصدارات) مثل Windows XP و Windows 7 و Windows 8 و Windows 10 و Windows Phone و Windows Server (بمعظم إصداراته). مكتبة أصناف إطار العمل FCL تحتوي هذه المكتبة الضخمة على آلاف الأصناف classes التي تسمح لنا بإنجاز أيّ مهمّة تخطر ببالنا. فمن التعامل مع النصوص والتعابير النظاميّة regular expressions إلى التعامل مع الاتصالات الشبكيّة network communications والتعامل مع بروتوكولات الانترنت الشهيرة مثل HTTP وFTP وغيرها، والوصول إلى قواعد البيانات والتعامل معها. تتكوّن FCL بدورها من عدّة مكتبات فرعيّة، فهناك مكتبة تساعدنا على تطوير وبرمجة تطبيقات سطح المكتب لويندوز، وأخرى تسمح لنا بتطوير تطبيقات ويب باستخدام تقنيّة ASP.NET، ومكتبة تسمح بإنشاء تطبيقات WCF وهكذا. بمعنى أنّه لن تحتاج إلى التعامل مع كامل مكتبة FCL بل ستنتقي منها ما تحتاجه بحسب متطلّبات عملك، فإذا كنت مطوّر ويب مثلًا فستهتم بالمكتبة الفرعيّة التي تسمح بإنشاء تطبيقات ويب باستخدام ASP.NET. ومن الجدير ذكره أنّ مكتبة FCL تحتوي أيضًا على مكتبة فرعيّة اسمها مكتبة الأصناف الأساسيّة Base Class Library أو اختصارًا BCL، تحتوي هذه المكتبة على الأصناف الأساسيّة التي تعمل مع جميع التطبيقات المنشأة باستخدام المكتبات الأخرى بصرف النظر عن نوعها. مترجم سي شارب C# Compiler لكي نتمكّن من تنفيذ البرامج التي نكتبها باستخدام سي شارب، نحتاج إلى مترجم سي شارب C# Compiler. يكون هذا المترجم مضمّنًا بشكل افتراضيّ مع إطار العمل دون نت. يعمل المترجم على تحويل التعليمات البرمجيّة الموجودة في الشيفرة والمكتوبة بلغة سي شارب إلى تعليمات برمجيّة مكتوبة بلغة تُعرف بلغة مايكروسوفت الوسيطيّة Microsoft Intermediate Language أو اختصارًا MSIL. تُعتبر هذه اللغة الوسيطيّة منخفضة المستوى، وهي شبيهة بلغة Assembly الشهيرة. في الواقع ستعمل بيئة التنفيذ المشتركة CLR على تنفيذ التعليمات المكتوبة بلغة MSIL. فبيئة CLR لا تحتاج أن تعرف لغة البرمجة التي كُتب بها البرنامج أصلًا وهي الميزة الأساسيّة التي تسمح للمبرمج الكتابة بأي لغة برمجة تدعم الدوت نت. فطالما أنّ لغة البرمجة تمتلك مترجمًا متوافقًا مع MSIL فلا مشكلة. وهذا ما جرى مع لغات برمجة أخرى مثل Visual Basic.NET ولغة #F وحتى لغة البايثون Python من خلال IronPython. انظر الشكل التوضيحي التالي: كيف ينفذ البرنامج باستخدام CLR؟ توضع الشيفرة البرمجيّة المكتوبة بلغة سي شارب عادةً في ملفات منفصلة لكلٍّ منها الامتداد cs، يعمل المترجم بعد ذلك على قراءة هذه الملفات التي تسمّى بملفّات النص المصدريّ source code files وتحويل التعليمات البرمجيّة المكتوبة بسي شارب إلى لغة MSIL وجعلها ضمن ملف تنفيذي (الملف MyApp.exe في الشكل السابق). عند تنفيذ البرنامج تقرأ CLR التعليمات البرمجيّة الموجودة ضمن الملف التنفيذي والتي تكون بلغة MSIL وتعمل على تنفيذها عن طريق تحويلها إلى تعليمات برمجيّة أصليّة native code مخصّصة لمعالج الحاسوب الذي يعمل عليه البرنامج حاليًّا. يجري كلّ هذا العمل بسرعة كبيرة جدًّا فعملية التحويل إلى native code لا تجري سوى أوّل مرّة فقط، وبعد ذلك يستفيد البرنامج من السرعة الكبيرة التي توفّرها هذه التعليمات الأصليّة عند التنفيذ. يُفسّر السيناريو السابق سبب قابليّة عمل برامج دوت نت على أيّ نظام تشغيل أو عتاد حاسوبي. فعمليّة كتابة الشيفرة البرمجيّة بأي لغة دوت نت ومن ثمّ تحويلها إلى لغة مايكروسوفت الوسيطيّة MSIL منفصلة تمامًا عن نظام التشغيل وعن العتاد الحاسوبي الذي سيعمل عليه البرنامج. ولعلّ من أبرز الأمثلة على ذلك البرامج المكتوبة بلغة سي شارب والموجّهة إلى أنظمة تشغيل الأجهزة الذكيّة عن طريق منصة Xamarin التي ذكرناها قبل قليل. فالعمل الأساسي الذي قامت به هذه الشركة هو انتاج بيئة CLR منفصلة لكلّ نظام تشغيل مثل Android و iOS مما يسمح للبرامج المكتوبة بلغة سي شارب الخروج من "قمقم" ويندوز إن صحّ التعبير. وأكثر من ذلك، فقد أنتجت مايكروسوفت مؤخّرًا نسخة خاصّة وخفيفة من نظام التشغيل Windows 10 أسمته Windows 10 IoT وهو مخصّص لإنترنت الأشياء. يمكن تنصيب نظام التشغيل هذا بكلّ سلاسة ويُسر على جهاز Raspberry Pi المشهور والموجّه لتطبيقات إنترنت الأشياء، وهذا يعني فتح المجال أمام التطبيقات المكتوبة باستخدام لغة سي شارب للعمل على هذا الجهاز وبالتالي الدخول في هذا المجال المهم والواعد. الخلاصة لغة سي شارب هي لغة عصريّة ولها مستقبل واعد في قطاع الأعمال. فهي اللغة الأساسيّة المستخدمة لكتابة مختلف أنواع التطبيقات الحاسوبيّة ضمن إطار العمل دوت نت. بالإضافة إلى أنّها سلسة وذات بنية مألوفة، ولكن تحتاج إلى قليل من الصبر في تعلّمها. سنتناول في الدروس اللّاحقة كيفيّة كتابة برامج بسيطة ولكن متدرّجة في الصعوبة حتى تكون ملمًّا بأساسيّات هذه اللغة الرائعة.

سواءًا كنت تعمل على صفحة هبوط لمنتج، لخدمة أو على صفحتك الشخصية من أجل عملك الحر، فإن كل الصفحات تشترك في عدة أمور بينها. اليوم سنشاهد دور كل واحد منها، وأنواعاها ومتى نستعلمها وما الفائدة منها. في هذا الدرس سنتطرق إلى 6 أجزاء مهمة في كل صفحة، وهي على الترتيب كالتالي: رأس الصفحة (Header) التعريف القيمة أو الشيء المميز محل الثقة نقطة التحويل (Call to action) ذيل الصفحة (Footer) سنستعين برسوم تويضحية في الطريق لفهم وشرح كل نقطة وكيف نستخدمها على أتم وجه، وفي نهاية الدرس ستكون قادرا على إنشاء صفحة هبوط أو صفحة شخصية بكل سهولة. لكن تذكر، لا صفحة تشبه الأخرى، ولا منتج يشبه الآخر، لذا قد لا يفيدك هذا الأمر تماما ولا يغطي احتياجياتك. ماهي صفحة الهبوط؟حتى نعرف ما الذي نقوم به، علينا أن نعرف أولا ماهي صفحة الهبوط، حسب موقع unbounce فإن صفحة هبوط هي: إذا، حسب هذا المفهوم، صفحة الهبوط تستطيع أن تكون صفحة لبيع كتاب، لبيع منتج ما، للتسجيل في خدمة، لطرح فكرة، لتقديم خدمة... كل هذه الأمور مختلفة، ولكنها تشترك في شيء واحد وهي أنّها تريد أن تحول الزائر إلى زبون. صفحات الهبوط تنقسم إلى قسمين اثنين، صفحات التحويل (Click Through) وصفحات التجميع (Lead Generation). صفحات التحويلصفحات التحويل هي كل الصفحات التي تحول المستخدم إلى صفحة أخرى، صفحات مثل هذه تحول المستخدم إلى متجر، إلى منصة البيع، أو بشكل عام هذه الصفحات تقدم المعلومات الشاملة للشيء، وليست مسؤولة عن تحويل المستخدم إلى زبون بشكل مباشرة، ولكن لها علاقة كبيرة بالأمر. صفحات التجميعصفحات التجميع هي الصفحات الأخرى، وتكون هذه الصفحات للتسجيل، للبيع مباشرة، للاشتراك، أو لملأ استمارة ما، أو للتواصل المباشرة، للحصول على نسخة الكترونية من كتاب أو منتج ما أو للتعريف بمنتج ما (مع هدف مشاركة المستخدم له عبر حساباته في الشبكات الاجتماعية). 1. رأس الصفحة (Header)من بين كل الأجزاء الأخرى، رأس الصفحة يكاد يكون أهم جزء في أيّ صفحة، فهو يستغل منطقة fold وهي المنطقة التي يراها المستخدم فور وصوله للصفحة بدون التمرير للأسفل، نشر أحمد مجدي في معمل ألوان مقالا ممتازا عن هذه النقطة. بهذه المنطقة بالتحديد، على المصمم أن يستعرض بعض النقاط المهمة، وهذه النقاط تكون كالتالي: الفكرة الموجزة تكون هذه الفكرة عادة عنوانا كبيرا بخط عريض في وسط الصفحة ليدل المستخدم على ماهية المنتج أو الخدمة (برنامج، أو خدمة ويب). أو عنوانا لكتاب مع شرح بسيط له وغلاف الكتاب: أو الاسم ومجال التخصص في حال كانت صفحة شخصية لمستقل أو شركة: في الحالات السابقة يتم إضافة شعار فوق الفكرة الموجزة، وفي حال صفحة شخصية يتم إضافة صورة شخصية، في حال منتج ككتاب أو شيء مشابه، يتم إضافة الغلاف. نقطة التحويل (Call to action) يتم إضافة هذا الجزء للهيدر عادة لأهميته. سنتكلم عن التفاصيل أكثر في جزئه المخصص، أما هنا فنشرح أهم النقاط. عادة هذا الجزء يكون زرا، أو مُدخلا (input). الزر يسمح للشخص بالانتقال إلى جزء الشراء، أو إلى صفحة التسجيل، أو إلى استمارة التواصل: وعندما لا يوجد شيء ليقود له هذا الجزء، يتم استعمال زر للتنقل إلى الجزء الذي بعده. يمكن أن يكون مُدخلا للاشتراك في قائمة بريدية من أجل التنبيه، أو للتسجيل في الخدمة، أو للحصول عل المنتج عبر إرساله في البريد. روابط التصفح (navigation) تكون روابط التصفح عادة موجزة ومسؤولة عن التصفح داخل الصفحة وليس من أجل روابط لخارج الصفحة، تحتوي القائمة على أقسام الصفحة (مثل التعريف، نقطة التحويل، التسعير...) يستحسن أن تكون متلصقة (sticky أو fixed) من أجل أن تكون في متناول اليد دوما. يوجد أكثر من نوع لذلك الجزء، تستطيع مثلا وضع زر للتسجيل بداخله: لإبقاء الزر قريبا من المستخدم دوما، عادة يحدث هذا للصفحات التي تبيع منتجا أو تقدم خدمة، بحيث في أيّ نقطة ما يكون المستخدم قد حصل على ما يكفي من المعلومات وهو بالتالي مستعد للطلب أو التواصل. 2. التعريفالتعريف هو جزء مهم في بعض الحالات ولكنه أمر اختياري في حالات أخرى، مثلا في صفحات لمنتج ما أو خدمة فيمكن الاستغناء عن التعريف حيث أنّه سيكون مدمجا في جزء "القيمة"، في حالات أخرى قد يكون مفيدا، في حال كنت مستقلا أو شركة أو خدمة جديدة، فالتعريف سيعطي الزائر فكرة عن الموقع أو الخدمة، التعريف يكون نصيا، التعريف التي يستخدم الصور محله يكون في جزء "القيمة". كمثال تعريف لمستقل يجب أن يحتوي على اسم المستقل، ربما البلد (في حالات معينة) ومجال الاختصاص وما ستقوم به بالتحديد عادة، نبذة عن الشخص وعن مراكز عمله السابقة ستعطي ثقة أكثر للعميل، حيث سيدرك أنه لا يتواصل مع آلة بل مع انسان فعلي. نفس الأمر ينطبق على الشركات، حاول أن تجعل الجزء قصيرا ومباشرا، لا أحد يملك الوقت لقراءة نص طويل. إذا وجدت أن "الفكرة الموجزة' رأس الصفحة تكفي لتشرح الفكرة فلا داعي لوضع تعريف. كما قلنا التعريف أمر اختياري تماما والعديد من الأشخاص يختارون عدم استخدامه. 3. القيمةالقيمة أو الشيء المميز هي أهم جزء في أيّ صفحة هبوط، فهي تشرح الخواص والمميزات لمنتج ما، أو خدمة ما، تقدم شرحا وافيا للكتاب، أو تقدم مجالات خبرة المستقل أو خدمات الشركة. أحيانا يختار المستقل تجاهل هذه المرحلة وجعل العمل يتكلم عن نفسه في جزء "محل الثقة" لكن ليتم هذا على المستقل أو يصف كامل مهاراته في الجزء الأسبق وهو "التعريف". بالنسبة للتطبيقات فهي تستغل هذه النقطة في عرض مميزات للتطبيق مثلا: أما عن المواقع أو خدمات الويب فهي تعرض المميزات على شكل نقاط مع أيقونة لكل جزء: 4. محل الثقةلأنّك لا تستطيع أن تقفز على شخص في الطريق من اللامكان ثم تخبره أنّ عليه أن يشتري منتجك المذهل أو يستأجرك للعمل، أنت أيضا لا تستطيع أن تطلب من زائر دخل لتوه الموقع أن يشتري منتجك، لذا عليك أن تبني ثقة لدى الزائر، وهنا يأتي جزء محل الثقة. محل الثقة قد تعني أكثر من شيء، ولكنها بالمجمل العام المكان الذي يُكسب الزائر ثقة في المنتج أو المشروع أو الشخص. ويكون له أكثر من شكل: العملاء: عادة ما يستخدم هذا بكثرة مع المستقلين ومع البرامج والخدمات. جزء العملاء يكون بأن يتم وضع مجموعة من شعارات أهم العملاء الذين مروا على العميل/منتج [figure 11]. يكسب العميل ثقة مباشرة في المنتج في حال رؤية شعارات شركات معروفة، هذا يعني له أنّ المنتج جيد وبالتالي يستحق المال الذي سيصرفهالتغطية الإعلامية: التغطية الإعلامية تكون عندما لا يوجد عملاء لاستخدامهم، أو عندما لا يكون من المنطقي استخدام عملاء (كتاب مثلا). في هذه الحالات يتم إضافة شعارات المواقع الإخبارية التي قامت بتغطية المنتج ويكون شكلها شبيها بشكل العملاء السابقيين، التغطية الإعلامية تُكسب قدر جيد من الثقة أيضا.الشهادات: الشهادات هي الخيار الثالث ومن أكثر الخيارات شيوعا، ببساطة تعتمد طريقة الشهادات على إدراج شهادات حقيقية من العملاء السابقين أو أشخاص جربوا الخدمة. أن تقول جملة عشوائية لوحدك، وأن تقول نفس الجملة ثم تُرفق أنها من قول العالم الفلاني أمران مختلفان، فالأخير يكسب ثقة أكبر في الجملة وبالتالي يجعلها ذات مصداقية، لذلك شهادات العملاء يجب أن تتبع نفس النسق، لذا ينصح أن يتم إضافة اسم صاحب الشهادة، وكذى صورته، حيث الصورة تجعل الزائر يعرف أنّه يسمع من شخص ما ربما قد رآه من قبل. وإضافة منصب العمل قد يكون مهما أيضا، أنت ستثق بمسؤول التصميم في شركة ما إذا كان يتكلم حول برنامج تصميم مثلا.الشبكات الاجتماعية: في حال لم يتوفر شيء مما سبق، فخيار آخر هو الشبكات الاجتماعية، لكن الأمر لا يصلح دوما، فعدد قليل من الصفحات تستفيد من الشبكات، ولكن إن كانت خدمتك أو موقعك يملك جمهوريا جيدا على الشبكات الاجتماعية، فمن المستحسن أن تضيف عدد المتابعين أو المعجبين من الشبكات الاجتماعية.صاحب المنتج: قد يبدو الأمر غريبا بعض الشيء لأول وهلة، ولكن إذا قرر بيل غيتس إنشاء صفحة لمنتجه فالأغلب أنه سيضيف صورته أو يجعل الأمر واضحا أنّه هو المالك . الأمر لا ينجح كثيرا لأننا لست دوما مشاهير، ولكن ربما كنت تسوق كتابا لكاتب معروف، فإضافة صورته ونبذة عنه تولد بعض الثقة أيضا. المشاريع السابقة: الأمر مخطط للمستقلين أو الشركات والوكالات بشكل خاص. المشاريع السابقة أو معرض الأعمال (Portfolio) هو أهم جزء في صفحة هبوط لمستقل، أن تقول أنّك مصمم بارع، وأن تظهر للزائر أنّك مصمم بارع بعرض أمثلة حقيقية هما أمران مختلفان. النمط السائد في عرض في المشاريع هو على شكل مربعات (grid) ولكن أنت حر بعرضها بأيّ طريقة تشاء.5. نقطة التحويل (Call to action)يأتي أهم جزء في كل الصفحات، أو كما يقول المثل الشعبي (الزبدة). فكل ما سبق كان لتحضير الزائر لهذه النقطة بالتحديد. لقد عرفت المنتج، أعطيت قيمته الفعلية، وبنيت الثقة لدى الزائر، تأتي النقطة التي يحين فيها تحويل الزائر إلى زبون، عادة هذا الجزء يكون زرا يقود لصفحة للتسجيل، أو لتحميل ملف ما، لإدخال معلومات للتسجيل في نشرة، جدول للاشتراكات. دعنا نشاهد أشكاله المختلفة: الزر: هذا الشكل هو الأكثر شيوعا وهو يتكون من زر كبير نسبيا، ويكون واضحا ويملك لونا مختلفا عن بقية العناصر حتى يستقل عنهم، يجب أن يكون بعبارة واضحة وغير خادعة للزائر، كأن تعرض فترة تجريبية وعندما يسجل الزائر لا يجد شيئا. العبارة يجب أن تكون لطيفة وغير عدائية، عبارات مثل "اشتري الآن" أو "حمل الكتاب" أو "سجل معنا" أو "تواصل" هي عبارات معتادة ولا تقدم الكثير من الحماس أو الرغبة للزبون لذا عليك أن تجرب عبارات تبدو وكأنها صدرت من انسان أو أقل عدائية مثل "هيا لنبني شيئا معا". اللون شيء مهم في كل زر، إلا أذا كنت ملزما بلون واحد لهوية الموقع أو المنتج، فعليك أن تختار الألوان بحذر، في تجربة قام بها موقع Performable وُجد أن تغيير لون الزر من الأخضر إلى الأحمر رفع نسبة التحويل (وهي عدد الزبائن على عدد الزوار) بنسبة 21% حيث أنّ اللون الأحمر يصنع شعورا بالعجلة ويَبرز أكثرمن بقية الألوان، والقاعدة العامة هي أنّ كل الألوان الساخنة (أحمر، برتقالي، أصفر، بنفسجي محمر...) مرحب بها. استمارة: وهو النوع الثاني الأكثر شيوعا وهو يتكون من استمارة يملأها الزائر من أجل الاشتراك في نشرة بريدية، أو من أجل الاشتراك في الخدمة، أو من أجل التواصل الجداول: شكل آخر شائع هو الجداول، فهي تسمح لك بعرض خطط الاشتراك، الاستضافة، باقات الشراء، وأيّ شيء تستطيع أن تبيعه في أكثر من باقة بأكثر من سعر، عادة يتم التركيز على العرض أو الباقة الأكثر شيوعا ووضعه في المنتصف وتمييزه عن البقية. 6. ذيل الموقع (Footer)ذيل الموقع لا تكون له أهمية كبيرة في بعض الصفحات، بعض الصفحات تختار أن تزيله تماما لأنها تريد أن ينصب تركيز الزائر على جزء التحويل فحسب. إذا كانت الصفحة هي تقديما لموقع ما، فالأحرى أن تضيف الذيل لتضع فيه روابط ترسل إلى أماكن أخرى، إلى جانب الصفحات الاجتماعية نظرة على صفحات حقيقيةفي هذا الجزء سنلقي نظرة على صفحات هبوط من الواقع، وكيف طبقت القواعد البسيطة العامة. صفحة كتاب Zero to oneكتاب Zero to one كتاب رائع قد سبق وأن قرأته، وكتاب رائع كهذا لابد أنّه سيملك صفحة رائعة لبيعه: Zero to One book. رأس الصفحة مباشر ويحتوي أهم المعلومات المتوقعة، فهو يحتوي على روابط للتصفح داخل الصفحة مثل معلومات حول الكتاب وحول صاحبه، الواجهة تملك صورة لغلاف الكتاب إلى جانب سطر تشويقي للكتاب، مع وجود زرين، أول زر وهو أهمهم ويعمل بصفته زر Call to action من أجل شراء الكتاب، الزر الثاني هو من أجل قراءة مقتطف من الكتاب بشكل مجاني. عند النزول تحصل على شهادات حول الكتاب من شخصيات معروفة وهذا لبناء الثقة حول المنتج. الموقع مقسم إلى أكثر من صفحة للتوزيع الجيد للمحتوى، مع تواجد جزء التحويل (call to action) أسفل كل صفحة لضمان وجوده قرب المستخدم دوما. تطبيق التصميم InvisionInvision هو منصة وتطبيق لصنع التصاميم الأولية (prototype) جنبا إلى جنب مع فريقك. في الأغلب ستتوقع تصميما ممتازا من منصة للتصميم، وهذا ما ستحصل عليه مع صفحة هبوط تطبيق Invision. رأس الصفحة يقدم أهم العناصر اللازمة لأيّ زائر، جزء التصفح يملك روابطا تأخذك إلى أجزاء مهمة في المنصة إلى جانب زر بارز للتسجيل. تحتوي الصفحة على عنوان كبير يصف المنصة إلى جانب سطر آخر للشرح. مع وضع زر CTA. بالنزول نجد مميزات المنصة وإلى جانب كل واحدة منها شهادة أحد الزبائن إلى جانب شعار شركته من أجل بناء الثقة في كلامه. في الأسفل نجد جزء بناء الثقة حيث يقوم التصميم بعرض أهم العملاء وقصصهم مع التطبيق. أخيرا يتم التطرق إلى جزء التحويل حيث أنّه استمارة للاشتراك في التطبيق خاتمةفي هذه المقالة تطرقنا إلى مامعنى صفحة هبوط، وإلى أهم الأساليب والعناصر في كل صفحة، كما عرضنا بعض الأمثلة الناجحة من الحياة اليومية. في المقالين القادمين سنقوم بتصميم وبناء صفحة هبوط خاصة بنا باتباع ما تكلمنا عنه هنا.

مقدّمة بعد أن تعرّفنا على كيفيّة التّعامل مع قاعدة بياناتنا لإجراء العمليّات الشّائعة مثل الإضافة، القراءة والحذف في سلسلة مدخل إلى إطار العمل Flask فقد حان الوقت للانتقال إلى مبدأ آخر من مبادئ تطوير الويب، ألا وهو كيفيّة التّحقق من مُدخلات المُستخدم، وسنتعرّف معا في هذا الدّرس على كيفيّة استغلال كل ما تعلّمناه لنُمكّن المُستخدم الذي يستعمل تطبيقنا من إرسال بياناته إلى التّطبيق بطريقة آمنة، ومن ثمّ ستتمكّن أنت من استغلال ما ستتعلّمه لإدخال هذه البيانات إلى قواعد بيانات تطبيقاتك، وخلال هذا المشوار سنعرّف على كيفيّة مُعالجة نماذج HTML ليُرسلها المستخدم إلى الخادوم عن طريق صفحة HTML، وذلك باستخدام كل من مكتبة WTForms و إضافة Flask-WTF التّي تُسهّل لنا التّعامل مع المكتبة، والغرض من كل هذا هو التّعرف على كيفيّة إنشاء وإدارة النّماذج لاستعمالها في مختلف الصّفحات في تطبيقاتك (صفحة تسجيل الدّخول، صفحة تسجيل مستخدمين جدد، صفحة إضافة مقال …). المُتطلّبات يُعتبر هذا الدّرس مُقدّمة لسلسلة جديدة حول كيفيّة إدارة نماذج HTML عند استخدام لغة بايثون وإطار العمل Flask لبناء تطبيقات الويب، لذا فسيتوجّب عليك فهم أساسيّات إطار العمل وكذا فهم آليّة عمل نماذج HTML أو HTML Forms. إن لم تكن لك خبرة في التّعامل مع إطار العمل Flask فأنصحك بهذه السّلسلة من الدّروس. لماذا WTForms قد تتساءل عن السّبب الذي سيدفعنا لاستخدام مكتبة WTForms لإدارة نماذج HTML في تطبيقنا، ففي السّابق، كنّا نقوم بإنشاء نموذج HTML ونستخدم المُساعد request المُتواجد بإطار العمل Flask للحصول على البيانات التّي يُرسلها المُستخدم. فكنّا مثلا نقوم بالحصول على اسم المُستخدم وكلمة مروره ثمّ نتحقّق من أنّ ما يُرسله يُطابق المعطيات الصّحيحة. هذا مثال على موجّه تسجيل الدّخول بالطّريقة السّابقة: @app.route('/login', methods = ['POST']) def login(): username = request.form['username'] password = request.form['password'] if username == 'admin' and password == 'admin': # login the user ... return redirect(url_for('index')) هذه الطّريقة تعمل بشكل جيّد، لكنّها ليست آمنة تماما، إذ أنّنا لا نتحقّق من البيانات التّي يُرسلها إلينا المُستخدم. في حالة تسجيل دخول مستخدم ما، التّأكد من أنّ البيانات آمنة أو أنّها تُحقّق شروطا معيّنة أمر غير ضروري في الحقيقة لأنّنا لا نعتمد على بيانات المُستخدم سوى عند استعمال شرط منطقي، لكن ماذا لو كانت البيانات التّي يُرسلها المُستخدم بيانات تُضاف إلى قاعدة البيانات، هنا التّأكّد من أنّها تستوفي شروطا معيّنة أمر ضروري جدّا. إليك أحد أخطار عدم التّأكد من أنّ البيانات التّي يُرسلها المُستخدم آمنة قبل إدخالها إلى قاعدة البيانات، لنقل بأنّك تُتيح التّسجيل لزوار الموقع، عبر منحهم إمكانية إدخال اسم مُستخدم، بريد إلكتروني وكلمة مرور، رغم أنّ المُستخدمين عادة ما يوفّرون مدخلات معقولة إلّا أنّ عدم التّحقق منها قد يؤدي إلى قاعدة البيانات ممتلئة أو بيانات تخريبيّة بإرسال كم هائل من النّصوص كقيم للحقول الثّلاثة مثلا (اسم المُستخدم، كلمة المرور، البريد الإلكتروني)، ولو عرضت اسم المُستخدم في أحد صفحات التّطبيق فسيُخرّب الاسم الطّويل الصّفحة وستبدو غير متناسقة؛ هذا جانب من العواقب التّي قد تحدث إن لم تتحقّق من مُدخلات المُستخدم. يُمكنك بالطّبع أن تستعمل لغة بايثون لتأكيد ومعالجة قيمة كل حقل على حدة قبل إضافتها إلى قاعدة البيانات، وربّما ستستطيع تأمين مُدخلات المُستخدم بشكل أفضل من ذي قبل، لكنّ الأمر ممل ويتطلّب الكثير من الوقت، بالإضافة إلى أنّ تأكيد ومعالجة قيمة كل حقل بنفسك قد لا يكون خيارا جيّدا لأنّه قد يُؤدي إلى بعض الثغرات الأمنية وقد ترتكب أخطاء خطيرة يصعب مُلاحظتها في أول وهلة، لذا من الأفضل أن نعتمد على مكتبة معروفة وموثوقة للقيام بهذا الأمر، وهنا يأتي دور مكتبة WTForms . تُوفّر مكتبة WTForms طريقة بسيطة لإنشاء نماذج HTML وتأكيدها قبل أن تصل إلى الخادوم لنتمكّن من إرسالها إلى قاعدة البيانات، على سبيل المثال، توفّر لنا المكتبة إمكانيّة التأكّد من أنّ قيمة حقل تحتوي على عدد معيّن من الأحرف، أو تأكيد حقل بريد إلكتروني أو أنّ قيمة حقل تُساوي قيمة حقل آخر (عند تأكيد كلمة المرور مثلا). هناك بالطّبع مكتبات أخرى تؤدّي نفس الغرض (كمكتبة Deform)، لكنّنا اخترنا هذه المكتبة بالذّات لأنّ لها إضافة تُسهل علينا ربطها بالتطبيقات المكتوبة بإطار العمل فلاسك، بالإضافة إلى أنّها خيار شائع بين المُطوّرين الذين يستخدمون إطار العمل هذا، ما يعني بأنّ تعلّم كيفيّة التّعامل مع المكتبة سيُساعدك على فهم معظم المشاريع مفتوحة المصدر. الحماية من هجمات CSRF بالإضافة إلى مُساعدتنا على تأكيد البيانات وتقييدها بشروط خاصّة، فمكتبة WTForms تحمينا من هجمات CSRF (اختصار لـ Cross-site request forgery)، وترجمته ‘تزوير الطلب عبر المواقع’، وهي نوع معيّن من الهجمات تُمكّن المخترق من القيام بأمور خطيرة متنكّرا على هيئة المُستخدم الضّحيّة (الذي قد سجّل دخوله بتطبيقك)، وقد استخدمت هذه الهجمة من قبل لتحويل أموال بشكل غير شرعي من طرف مُخترق لأحد الأبناك في السّابق، وظهرت هذه الثّغرة من قبل في موقع Youtube ما خوّل للمُخترق بالقيام بجميع العمليّات التّي يُمكن أن يقوم بها المُستخدم الذي سجّل دخوله، ويُمكنك زيارة صفحة ويكيبيديا عن الهجمة لمزيد من المعلومات. الحل الأكثر شيوعا للحماية من هذا النّوع من الهجمات هو إرسال مفتاح مخفي مع البيانات التّي يُرسلها المُستخدم، بحيث أنّه إن أرسل المُخترق طلبا غير شرعيا فلن يُرسل معه المفتاح المخفي، لذا فلا يُمكن أن تمرّ البيانات إلى التّطبيق لأنّها لا تعتبر صحيحة، وبالتّالي فلا يُمكن أن تُستقبل لتُرسل إلى قاعدة البيانات، وهكذا سيكون الإجراء آمنا. الهجمة خطيرة وعليك الحذر منها عند تطويرك لتطبيقات الويب، لكن لا تقلق، فمكتبة WTForms تُوفّر لنا طريقة بسيطة لحماية تطبيقنا من هذا النّوع من الهجمات، إذ تعتمد على الحل الذي ذكرته مسبقا بحيث تُحدّد رمزا مخفيا في بداية النّموذج ليُرسل مع طلب المُستخدم في كل مرّة. التّحقق من المُدخلات بالواجهة الأماميّة أم الواجهة الخلفيّة؟ بما أنّ التّحقق من مُدخلات المُستخدم هو الاستخدام الشّائع لمكتبة WTForms (للتحقق مثلا من أن المدخل على شكل بريد إلكتروني وليس أية سلسلة نصيّة أخرى)، فمن المُفيد أن تُدرك بأنّك تستطيع التّحقق من المُدخلات على جهتين أثناء تطوير تطبيقاتك، ومن المهم أن تتبّع الأسلوب الصّحيح، لذا فهذا القسم يُغطي جزءا ممّا يجب عليك معرفته. الواجهة الأماميّة أو جهة العميل Client side مُصطلح يهم كل ما يحدث في مُتصفّح المُستخدم، وعادة ما تتم مُعالجة البيانات فيه باستخدام لغة جافاسكربت أو ميّزات HTML5 بحيث نستطيع مثلا أن نتأكّد من أنّ المُدخل المطلوب لا يُرسَل فارغا أو أنّه بطول مُعيّن وأمور أخرى. أمّا في جهة الخادوم، فالتّحقق من المُدخلات يتم باستخدام لغة بايثون، إمّا عبر كتابة الشّيفرة التّي تقوم بالتّحقق بنفسك أو بالاعتماد على مكتبات مثل مكتبة WTForms. وقد قرّرت التّطرق إلى هذا الأمر لأنّ البعض يعتمد كليا على التّحقق من البيانات بجهة العميل فقط، وبما أنّ الخادوم يستقبل المُدخلات دون التّحقق منها فهذا يعني بأنّ هناك إمكانيّة الاحتيال على المُتصفّح لإرسالها دون التّحقق منها. عندما تتحقّق من المُدخلات باستعمال جافاسكربت فقط فالأمر مُجد في كثير من الأوقات، لكن ماذا لو عطّل المُستخدم جافاسكربت على مُتصفّحه؟، ويُمكنك كذلك استخدام الميّزات الجديدة في HTML5 للتّحقق من أنّ المُدخلات صحيحة، وهذه الطّريقة يسهل الاحتيال عليها كذلك، لذا فأفضل حل هو أن تقوم بالتّحقق من مُدخلات المُستخدم في جهة الخادوم لأنّها الأكثر أمانا، وهذا يرجع إلى كون البيانات التّي نستقبلها من المُستخدم تُدخل إلى قاعدة البيانات على جهة الخادوم لذا يجب أن توقف هناك، وبالطّبع تستطيع استعمال الميّزات الجديدة في لغة HTML5 (وهذا ما أنصح به) أو أحد أطر العمل المكتوبة بلغة جافاسكربت للتّحقق من مُدخلات المُستخدم، لكن تذكّر فقط بأنّ الجهة الخلفيّة (استخدام مكتبة WTForms في حالتنا هذه) هي الأهم والأكثر أمانا. إضافة Flask-WTF لاستخدام مكتبة WTForms، سنلجأ إلى إضافة خاصّة بها لإطار العمل فلاسك، وتُسمى هذه الإضافة Flask-WTF اختصارا لـ Flask-WTForms ، لذا تأكّد من أنّ البيئة الوهميّة مُفعّلة ونفّذ الأمر التّالي لتنصيب الإضافة (والمكتبة كذلك): pip install Flask-WTF لن نستخدم الإضافة كثيرا ولن تجد استخداما لها في المشاريع التي تعتمد على إطار العمل فلاسك في معظم الحالات والاعتماد سيكون على مكتبة WTForms أكثر من الإضافة، إذ سنعتمد على الإضافة لنسترد منها صنفا واحدا فقط باسم FlaskForm لترث منها الأصناف الأخرى التّي ستُمثّل نماذج HTML، وهذا لأنّ WTForms يعتمد على الأصناف في لغة بايثون لإنشاء نماذج HTML بحيث يعبّر كل صنف عن نموذج معيّن وخصائص الصّنف هي التّي تُمثّل الحقول المُختلفة (حقل كلمة المرور، حقل البريد الإلكتروني، حقل الاختيارات المُتعدّدة …) وسنتطرّق إلى هذا الأمر بتفصيل أكثر فيما بعد. استخدام مكتبة WTForms مع أطر العمل الأخرى إنّ استخدام WTForms أمر شائع بين مُطوري الويب الذين يستخدمون أطر العمل الصّغيرة مثل Flask و Bottle و Pyramid، وحقيقة أنّ هذه السّلسلة من الدّروس موجّهة إلى مُطوري الويب الذين يستخدمون إطار العمل Flask لا تعني بالضّرورة بأنّك لن تستفيد من هذا الدّرس إذا كنت تستعمل أحد أطر العمل الأخرى، وقد قرّرت أن أجعل الأمثلة بسيطة جدا ليتمكّن الكل من فهم كيفيّة العمل المبدئيّة، كما أنّ الهدف من هذه السّلسلة هو تقريب مفهوم التحقق من بيانات المُستخدم إلى أكبر شريحة ممكنة من المُطورين لتوفير حماية أفضل لتطبيقاتهم، وبالتّالي فهي سلسلة مُستقلّة تماما عن أي سلسلة دروس أخرى، رغم أنّني أنصحك بقراءة سلسلة مدخل إلى إطار العمل فلاسك قبل الشّروع في هذه السّلسلة. تحديد مفتاح سري إن قرأت الدرس الذي شرحت فيه كيفيّة إنشاء نظام بسيط لتسجيل دخول وخروج المُستخدمين ، فقد كان علينا تحديد مفتاح سري لجعل الجلسة أكثر أمانا بحيث يصعب على المُخترق الوصول إليها، وبما أنّ توفير مفتاح سري أمر ضروري في مُعظم الأوقات (لأنّ مُعظم التّطبيقات تعتمد على الجلسة على كل حال)، فإنّ الإضافات التّي تحتاج إلى سلسلة عشوائيّة من الأحرف لاستخدامها لتوليد سلاسل أخرى مُشفّرة تلجأ إلى الإعداد SECRET_KEY. عادة ما يُسمى المفتاح السرّي مِلحًا Salt في مجال التّشفير، ويعمل على جعل السّلسلة المُولّدة ثابتة إن كان المفتاح السّري هو نفسه، فإن تغيّر المفتاح السّري (أو الملح) فإنّ فك التّشفير غير ممكن، لذا يجب أن يكون المفتاح السّري سريّا جدّا بحيث لا يُمكن توقّعه، كما يجب ألّا تضعه في مكان مكشوف في شيفرتك البرمجيّة، وتأكّد من ألّا تضع نفس المفتاح السّري الذي تستخدمه في تطبيقك على مواقع مثل Github و Pastebin وغيرها، فإن وصل أي شخص إلى مفتاحك السّري الذي تستخدمه لإدارة جلسات مُستخدميك فقد تُسرق بياناتهم أو تُخرّب. هذه المرّة، لن نحتاج إلى المفتاح السّري من أجل الجلسة، بل ستستعمله إضافة Flask-WTF لتوليد المفتاح الخفي الذي تحدّثنا عنه مُسبقا، وتستخدمه بعض الإضافات الأخرى لأغراض التّشفير كذلك، لذا فمن المُهمّ أن تُبقيّه غير قابل للتّنبّؤ. ولتوليد مفتاح سري جيّد، يُمكنك استخدام الدّالّة urandom من الوحدةos على مُفسّر بايثون كما يلي: >>> import os >>> os.urandom(16) ' T\x1f\x85\x9b\xfe^\x0f\x14\x9f\xa3x\xa4\xb5\x92\xbe' كما تُلاحظ، قمنا بتوليد سلسلة عشوائيّة من الصّعب توقّعها، وبالطّبع فعندما تُنفّذ أنت السّطر أعلاه، فستحصل على سلسلة أخرى غير السّلسلة التّي حصلت عليها. الآن كلّ ما عليك فعله هو نسخ السّلسلة النّصيّة التّي حصلت عليها ووضعها في الإعداد SECRET_KEY الخاص بتطبيق فلاسك الذي تعمل عليه، والتّالي مثال على كيفيّة إضافة هذا الإعداد. المهم أن تتأكّد من أنّ السّطر التّالي متواجد مُباشرة بعد تعريف الكائن app: app.config['SECRET_KEY'] = 'T\x1f\x85\x9b\xfe^\x0f\x14\x9f\xa3x\xa4\xb5\x92\xbe' والتّالي هو ما أعنيه بتعريف الكائن app: app = Flask(__name__) وهو نفس الكائن الذي تستعمله لتحديد موجّهات التّطبيق الأساسيّة. مُلاحظة: إن حاولت استخدام WTForms دون توفير مفتاح سري فستحصل على خطأ نصّه كما يلي: “Exception: Must provide secret_key to use csrf.”. خاتمة تعرّفنا في هذا المقال على أهم المفاهيم الأساسيّة التّي يتوجّب عليك الإلمام بها لاستكمال مشوارك في تطوير الويب، فقد تعرّفنا على الأسباب التّي ستجعلك تتحقّق من مُدخلات المُستخدم، ولمَ يُفضّل استخدام مكتبة مثل WTForms عوضا عن القيام بذلك بنفسك، وتعرّفنا كذلك على هجمة CSRF التّي تعتبر واحدة من الهجمات التّي يُمكن أن يتعرّض لها تطبيقك في أي وقت، وقد كان هذا الدّرس تمهيدا بسيطا لسلسلة من الدّروس حول التّحقق من مُدخلات المُستخدم باستخدام مكتبة WTForms.