التدقيق " 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 لانهاء شائعة ومفيش مانع من التنظيم 😅
قراءة المزيد

تصحيح شكل الكود "linting" والتطبيق مع دارت "dart" 💡

صورة
المحتوي : يعني ايه linting الفائده من استخدامه المكتبات الي هتساعدك في الموضوع لو حابب تعرف الموضوع من المصدر الرسمي :  Customizing static analysis يعني ايه linting لغه يعني " الفحص " والمقصود هنا فحص الكود الي انت كتبته علشان يخليك تكتب الكود باحسن طريقه بالاضافه انه ممكن ينبهك لبعض المشاكل في الكود  من بعض الاستخدامات مثلا  هنا مثلا التنبية ده هيظهر بعد استخدام مكتبة من مكتبات ال linting والهدف منه انه بيقولك انت دلوقتي عندك متغير final يعني لازم ياخد قيمة وانت ادتلو قيمتة ولما اخد القيمه عرف منها نوع المتغير ايه بما اني اديتو String ففهم ان المتغير ده من نوع String وهيفضل دايما ثابت انو من نوع String وقيمته ahmed فاستخدامك لكلمه String في الكود ملهوش لازمه نهائي هنا فالاحسن تشيلها !  ده ابسط مثال لموضوع ال linting ! الفائده من استخدامه  تقيل من احتمالية وجود اخطاء في الكود  كود افضل واسهل في القرائة المحافظة علي المعايير القياسية في الكود (  code style guideline  ) شكل الكود كانو من شخص واحد ( الكل بيكتب بنفس المعايير ومحافظ علي نفس الشكل (style) ودول علي سبيل المثال  lint
قراءة المزيد

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

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