التدقيق " validation " وازاي بيتم في فلاتر ! 👑

 


  يعني ايه validation ؟

لو ترجمنا المصطلح الي موجود علي اغلب المواقع هنلاقي انها

عملية تاكد من شكل البينات وليس صحتها 


فمثلا لو عملنا فاليديشن للبريد الالكتروني 
المفروض يكون مكون من3 اجزاء
الاول username اسم المستخدم 
الثاني رمز ال @
الثالث domain رابط المواقع
وبكدا الفاليديشن للبريد الالكتروني هو مجرد التاكد من توافر ال 3 اجزاء دول في البريد 
ahmed@masoud.com  بريد الكتروني صحيح
ahmed-masoud.com بريد الكتروني غير صحيح علشان مفيش فيه @
وهكذا مجرد تاكد من شكل وطول ونوع البيانات 
لكن هل ahmed@masoud.com بريد الكتروني شغال فعلا وينفع يستلم رسائل ؟ مش مهم ده مش دور عمليه ال validation

ملحوظة :

  • مرحله ال validation لازم تتم في التطبيق قدام المستخدم `client side` ولازم تتم في السيرفير `server side` 
  • ال validation مش متعلق بلغه البرمجه ولا باطار عمل `frame work`  معين تقدر تطبيق المفهوم في كل لغات البرمجه وكل اطر العمل بلا استثناء

طب ازاي ننفذ العملية دي ونتاكد من صحه البينات الي اليوزر دخلها ؟

  1. ممكن تستخدم Regular Experian
  2. ممكن تستخدم مكتبة للموضوع ده `package`

ازي نطبق الكلام ده في Flutter ؟

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


استخدمها مع Form Widget و TextFormField Widget علشان موجود فيه باراميتر ال validators
وده بياخد String Function(String val)
عباره عن فانكشن بتستقبل متغير من نوع String فلاتر بتعتلك فيه القيمة الي الي المستخدم كتبها فيه
وانت بنفسك بتعمل اي عمليه انت حابب تعملها وقدامك في الاخر ترجع حاجه من 2 ياما null وبكدا الحقل ده سليم ومفهوش مشاكل 
ياما String ولو رجعت متغير سترنج فلاتر هتعرض القيمة الي فيه كانها رساله الخطا تحت الحقل علشان المستخدم يفهم اليه الخطا
مثال :



كدا في حاله ان المستخدم مكتبش حاجه وسابو فاضي فلاتر هتطلع Text تحت خانه البريد وتظهر فيها الرساله الي انت لسه عامل ليها return 

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

مكتبة : Queen validators 👑

مبدايا كدا في اكثر من مكتبة لموضوع ال validation و كمان انت مش محتاج مكتبة علشان تعمل الموضوع بنفسك 
بس انا هتكلم عن المكتبة دي بالذات علشان انا الي عاملها 😅😅😅😅

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

ازاي استخدم المكتبة دي ؟
اول حاجه تحطها في ملف ال yaml بتاعك 
  queen_validators: ^2.0.0
ازاي المكتبة بتشتغل ؟ 
نفس الطريقة العاديه بتاعت فلاتر ونفس ال widgets 
الفرق انك بدل ماتعطي validators داله تعمل الفاليديشن بتعطيها داله من المكتبة 


qValidators بيحتاج منك List جواها عناصر من نوع QueenValidationRule
والمكتبة بتوفرلك انواع كتير من validation بسهوله جدا
كل الي عليك تختار من المكتبه انت محتاج ايه 
محتاج تتاكد ان الحقل اتكتب فيه قيمها ؟ استخدم IsRequired 
محتاج تتاكد انو بريد الكتروني صحيح ؟ استخدم IsEmail
محتاج تتاكد ان طول البيانات اكبر من او اقل من عدد معين ؟ استخدم MinLength او MaxLength
وهكذا ......

ازاي اعدل رساله الخطا الي تطلع لو في حاجه فشلت والمستخدم مكتبهاش صح ؟
كل ال Rules الموجود في المكتبه بستقبل متغير من نوع String تكتب في الرساله الي عاوزها تظهر في حاله الفشل

زي التوضيح الي في الصورة الي فوق علي طول والحقل ده اختياري ممكن تسيبو والمكتبه هتعرضلك رساله باللغة الانجليزية
وفي اضافات تانية في المكتبة وفي اكثر من حاجه المكتبة تقدر تعمل عليهم فاليديشن كلهم موجودين في رابط المكتبة علي موقع pub dev



المشاركات الشائعة من هذه المدونة

اختبار الكود واجمالي نسبة تغطية الاختبارات - unit testing and test coverage in Arabic

صورة
  بسم الله، والصلاة والسلام على رسول الله  ا لحمد لله الذي عَلَّمَ بالقلم.. عَلَّمَ الإنسانَ ما لم يَعْلَم  والصلاةُ والسلامُ على خيرِ مُعَلِّمي الناسِ الخير محمد.. الهم علمنا ما ينفعنا وانفعنا بما علمتنا انك انت العليم الحكيم . المحتوي :ـ    unit testing  الهدف من مثال  1 مثال 2  نسبة التغطية (test coverage) ما التالي ؟  الهدف من unit testing ضمان صلاحية الكود في اتمام المهمه المقصود بها اثناء تطوير البرنامج او خلال التركيب  مثال 1 : مطلوب كتابة دالة لمعرفة هل عمر المستخدم اكبر من 18 عام ام لا  اذا كان اكبر من 18 عام تكون True واذا كان اقل من 18 عام تكون False الان وقت اختبار الدالة ( الصحيح ان تكتب الاختبار اولا ثم الكود بعد ذلك ) لكن قمنا بالعكس للتوضيح فقط نحتاج لمكتبة  test   كـ  dev_dependencies اين يكتب الاختبار ؟  في المسار الرئيسي للمشروع داخل ملف test ملحوظة : اسم ملف الاختبار يجب ان ينتهي ب   _test.dart    ليكون بالشكل التالي بداخل ملف الاختبار دالة main بدون paramters AAA  Pattern (نمط AAA) ميكروسوفت بتقترح انك تكتب الاختبار بطريقة AAA لانهاء شائعة ومفيش مانع من التنظيم 😅
قراءة المزيد

يعني ايه api والتعامل معاها والمصطلحات ومثال بدارت للمبتدئين ( منين بيودي علي فين )

صورة
بسم الله، والصلاة والسلام على رسول الله  ا لحمد لله الذي عَلَّمَ بالقلم.. عَلَّمَ الإنسانَ ما لم يَعْلَم  والصلاةُ والسلامُ على خيرِ مُعَلِّمي الناسِ الخير محمد.. الهم علمنا ما ينفعنا وانفعنا بما علمتنا انك انت العليم الحكيم . المقصود ب client side هو جانب العميل بالجهاز الي بيستخدمها  سوا كان موقع مفتوح في متصفح او تطبيق مثبت علي الويندوز او الاندرويد او الايفون  المقصود ب server side هو السيرفير المستخدم في معالجه البيانات  سوا كان سيرفير عادي لارافل او نود او بايثون فايربيس او سترابي او اي حاجه من امثالهم - ليه محتاجين نقسم الكود علي 2 ( server - client )  ؟  اسباب مختلفة  منها مثلا :-  الحماية : لو الكود كله عند العميل ممكن يسرقة او يعدلة السرعه او الاداء : في فرق ملحوظ بين قوة جهاز العميل الي ممكن يكون جهاز متواضع موبيل بسيط او كمبيوتر مش قوي علي عكس السيرفير الي اداء ممكن يكون 100 مره اقوي من العميل وبالتالي بعض العمليات لو تمت علي جانب السيرفير هتكون اسرع بكثير  ملحوظة : ايا كان الباك اند المستخدم تقدر تعمل بيه الانواع المختلفه من الـ api والانواع المختلفه من البيانات الي هتتنقل
قراءة المزيد

bloc ! امتي تحتاجه - المميزات والعيوب - الاساسيات - مثال

صورة
موضوع البلوك متقدم ولو انت ضعيف في اساسيات dart وبالاخص جزء ال OOP الافضل تزاكر الجزء ده وتفهم يعني ايه وراثه علي الاقل لاننا هنستخدمها هنا في المقاله دي وحتي لو مش ناوي تستخدم بلوك لازال فهمك للاساسيات مهم علشان تقدر تستوعب وتطور من نفسك في المواضيع المتقدم قبل ماتكمل قراءة لازم تكون عارف يعني ايه state management فلو انت عارف تخطي الجزء ده وابدا علي طول من عند جزء البلوك يعني ايه state management لو ترجمنا المصطلح حرفيا فمعناه " تحكم في الحاله " طب حاله ايه الي هنتحكم بيها ؟ وليه ؟ تحكم في الحاله يعني مثلا انت عندك حاجه مرسومه علي الشاشه فيكن مثل Text او Icon او اي Widget الودجتس دي ليها خصائص لون , حجم خط , طول , عرض . ظل , .....الخ مجموع الخصائص دي مع بعضو اسمهم حاله "state" لل Widget بتاعتك فليكن الشكل ده مثلا دلوقتي خصاص ال Text ده فين ؟ انت حطيتها في TextStyle وراح لل build في retu r n ومبقاش عندك اي صلاحية تعدل عليه وده الكود الي عمل الشكل فوق طب ماحنا ممكن نستخدم StateFullWidget ونخزن ال style في متغير ولما نحب نغير نديلو القيمة الجديده ونعمل setState انا
قراءة المزيد