VOL42: The Essentials of Observability - Insights with Grafana
أهلًا وسهلا بكم في العدد الاثنين والأربعين من النشرة الأسبوعية لاقرأ-تِك 🚀
لا تنسوا أهلنا من صالح الدعاء,اللهم إنّا استودعناك اياهم، اللهم كُن عوناً لهم، اللهم انصرهم واحفظهم. 🇵🇸
أهلًا وسهلا بكم في العدد الاثنين والأربعين من النشرة الأسبوعية لاقرأ-تِك 🚀
سواء كنت مهندس برمجيات مبتدئ أو محترف، فنشرتنا هدفها انها تثري المحتوى التقني العربي سعيا للتطوير من جودة المحتوى باللغة العربية، من خلال تقديم أحدث المستجدات والتطورات في عالم البرمجيات، بالإضافة إلى أفضل الممارسات والنصائح القيمة، ونشر أحدث المقالات وترشيحات الكتب ومحتوى ورقة وقلم اللي بينزلوا بشكل مستمر في موقع اقرأ-تِك.
في الإصدار ده الفهرس هيكون كالآتي:
The Essentials of Observability
Tool of The Week : Insights With Grafana
React Props Best Practices for Handling Large Objects
How to Store Passwords in Database
Introduction Into Hoisting in JavaScript
The Essentials of Observability
كثيرًا ما نسمع عن ال Observability ولكن ما هي حقًا ، وما هي أهدافها وإزاي نستغلها لتوصيف وحل أي مشكلة في أي نظام؟!
ورقة وقلم وخلونا نبدأ بقصة طبية بسيطة تفهمنا كل حاجة عن الموضوع دا قبل ما ندخل في الكلام عنه.
توصيف الـ Observability في الحياة العملية
الإنسان لما بيتعب بيروح للطبيب اللي بدوره بيعمل عدة خطوات تساعده في تقييم الحالة وإيجاد العلاج المناسب:
بيقوم بأخذ مؤشرات الشخص الحيوية
بيسأل الشخص بعض الأسئلة عشان يقدر يوصف الأعراض
وبيقوم بعمل أشعة على الجسم لتحديد مكان الألم
جسم الإنسان عبارة عن نظام متكامل ولكن هو كذلك عبارة عن أجهزة مختلفة بتتعاون مع بعض زي الجهاز الهضمي والتنفسي وإلخ… والخطوات دي بتساعد الطبيب يعرف مصدر الشكوى ويحدد لها علاج مناسب وأساليب وقائية لمنع تكرارها.
أي Software في الدنيا زي الجسم بالظبط ، بيبقي نظام متكامل يتكون من عدة أنظمة أصغر.
هدف ال Observability الأساسي هو تحويل النظام من Blackbox إلى Glass Box.
أهم عناصر المراقبة (Pillars of Observability)
ولازم المبرمج يقوم بنفس خطوات التشخيص اللي قام بيها الطبيب عشان يحل أي مشكلة بتطرأ علي هذا النظام
فالمؤشرات الحيوية عندنا عبارة عن ال Metrics :وهي مؤشرات رقمية تعطينا معلومات سريعة عن حالة النظام مثل ال CPU and Memory Usage, Transaction per second إلخ..
Insights With Grafana
Grafana هي أداة مفتوحة المصدر بتخليك تراقب وتعرض البيانات من مصادر مختلفة بشكل متقدم وعرضها في لوحات تحكم تفاعلية (Dashboards). وتُجمع البيانات من مصادر مثل: قواعد البيانات، و خوادم التطبيقات، وأجهزة إنترنت الأشياء (IoT)، وغيرها، بطريقة سهلة الفهم و مناسبة لاتخاذ القرارات.
أهم الاستخدامات
مراقبة الأنظمة (System Monitoring).
تحليل الأداء (Performance Analysis).
عرض بيانات التطبيقات (Application Metrics).
أهم المميزات
مجانية ومفتوحة المصدر: Grafana مجانية ومفتوحة المصدر، مع خيارات تجارية مدفوعة للمؤسسات التي تحتاج ميزات إضافية.
تكامل مع مصادر متعددة: مثل Postgres, Prometheus، Elasticsearch، MySQL.
لوحات تحكم تفاعلية قابلة للتخصيص: اعمل اللي يناسب احتياجاتك.
تنبيهات مرنة: اعرف المشاكل قبل ما تحصل لأنك تقدر تٌعد Grafana لإرسال تنبيهات عبر البريد الإلكتروني، أو Slack، أو أدوات أخرى بناءً على معايير معينة.
مجتمع مفتوح المصدر: دعم كبير وتحديثات مستمرة من مجتمع نشط.
دعم الـ Plugins: تدعم Grafana مجموعة كبيرة من الإضافات التي توسع قدراتها سواء مصادر بيانات جديدة أو واجهات مستخدم إلخ..
كذلك تقوم بتوفير طرق عرض متنوعة للبيانات:
المخططات الخطية (Line Charts)
المخططات الشريطية (Bar Charts)
المخططات الدائرية (Pie Charts)
الجداول (Tables)
خرائط الحرارة (Heatmaps)
خرائط التوزيع (Histograms)
المخططات المدمجة (Gauge and Donut Charts)
وتدعم أيضًا صناعتك رسوم بيانية متخصصة باستخدام Plugins إضافية.
طريقة الاستخدام
يمكنك استخدام Grafana في أربع خطوات بسيطة
تثبيت Grafana وتسجيل الدخول: يمكنك تثبيتها علي Local Server أو يمكنك استخدام النسخة السحابية
إضافة مصدر البيانات: تقوم بإيصال مصدر البيانات ب Grafana وهي خطوات بسيطة من واجهة المستخدم
إنشاء لوحة تحكم (Dashboard): تقوم بإنشاء لوحة التحكم التي تريد عرض البيانات فيها ويمكنها أن تتضمن رسوم بيانية مختلفة ومن أهم مميزات Grafana قدرتها على عرض تغيير ال Metrics مباشرة In real-time.
إعداد التنبيهات (Alerts)
إضافة تنبيه جديد:
ضمن أي رسم بياني، انتقل إلى تبويب Alerts.
اضغط على Create Alert.
حدد شروط التنبيه (مثال: إذا تجاوزت قيمة معينة).
اختر نوع الإشعار (Email، Slack، PagerDuty، وغيرها).
يمكنك أيضًا مشاركة هذه ال Dashboards مع بقية أفراد الفريق واستخدامها في مراقبة وتحليل البيانات.
React Props Best Practices for Handling Large Objects
عند استخدام React ، تعد إدارة البيانات بين الـ Components أمرًا أساسيًا. واحدة من التحديات الشائعة التي يواجهها المطورون هي كيفية التعامل مع الـ props عند الحاجة إلى تمرير objects كبيرة تحتوي على بيانات متعددة.
في هذا المقال، نستعرض أفضل الممارسات للتعامل مع هذا السيناريو مع تسليط الضوء على مزايا وعيوب كل أسلوب.
تمرير الـ object بالكامل
في هذه الطريقة، يتم تمرير الـ object بالكامل كـ prop. داخل الـ UserProfile Component ، يمكن الوصول إلى الحقول المطلوبة (مثل user.name أو user.avatar) حسب الحاجة.
المزايا
سهولة وسرعة التنفيذ: تمرير الـ object بالكامل بسيط ولا يتطلب تعديلات إضافية على الكود.
مرونة مستقبلية: إذا احتاج الـ component إلى المزيد من الحقول لاحقًا، فإنها تكون متاحة بالفعل.
العيوب
أداء أقل: تمرير object كبير قد يؤدي إلى حدوث (re-rendering) بشكل غير ضروري إذا تغير أي جزء من الـ object، حتى وإن لم يكن مرتبطًا بالـ component.
زيادة البيانات المرسلة: قد يتم تمرير بيانات غير ضرورية للـ component، مما يستهلك ذاكرة إضافية.
ترابط قوي بين ال components: يصبح الـ Component معتمدًا بشكل مباشر على بنية الـ object، مما يجعل إعادة الهيكلة أكثر تعقيدًا.
تمرير الحقول المطلوبة فقط
في هذه الطريقة، يتم استخلاص الحقول المطلوبة فقط من الـ object وتمريرها كـ props منفصلة.
خصم الـ 50% مستمر ولحد نهاية السنة بمناسبة مفاجآت اقرأ-تِك وشكلها الجديد ، فتقدروا دلوقتي تشتركوا في اقرأ-تِك (بـ 30 جنيه) بس شهريًا 😉 والحقوا الخصم ده لانه مش بيتكرر الا في المناسبات الجميلة اللي زي دي بس 🚀
وبرضو متاح الاشتراك من خلال InstaPay و VodafoneCash 🎁
بفضل الله أصبح متاح حاليا دعمنا من خلال الرعاة والشراكات وفعلنا الـ Sponsorship واحنا بنرحب بجميع الشراكات مع المؤسسات والشركات وأصحاب الأعمال لبناء مجتمع عربي يشجع على القراءة والتعلم ومشاركة التجارب والخبرات العملية في هندسة البرمجيات.
دورك كشريك أو راعي هيكون محوري في دعم المحتوى وتوسيع نطاق تأثيره. فانضم لرحلتنا وكن جزءًا من صناعة مستقبل التكنولوجيا في المنطقة 🚀
تقدروا تشوفوا التفاصيل كاملة من هنا والـ Analytics بتاعتنا من خلال اقرأ-تِك والنشرة الأسبوعية 👇
How to Store Passwords in Database
ازاي الـ Passwords بتتخزن في الـ Database وازاي نقدر نتأكد من الـ Password بتاع الـ User سليم وهو بيعمل Login ؟
وقبل ما نبدأ نتكلم عن ده خلونا في البداية نأكد على أهمية الموضوع وأن تخزين الـ Passwords في الـ Database لازم يتم بشكل ميسهلش للـ Hackers أنهم يوصلوا للـ Passwords حتى لو حصل اختراق للـ Database.
طب ايه هي الحاجات اللي بتسهل عملية الوصول للـ Passwords ؟
فيه بعض الحاجات اللي مفروض نبعد عنها تمامًا عشان بتسهل للـ Hackers انهم يوصلوا للـ Passwords زي:
اننا نخزن الـ Passwords كـ Plain Text في الـ Database ، ده هيخلي اي حد Internal شغال في الشركة انه يكون ليه Access على كل الـ Passwords وعارفهم كلهم .. وده برضو هيخلي اختراق الـ Database عملية بتسهل الوصول لكل الـ Passwords اللي موجودة، فالـ Hacker هيكون قدامه الـ Passwords على طبق من ذهب ..
اننا نستعمل Legacy Hashing Algorithms زي الـ MD5 و الـ SHA-1 فبالرغم من انهم يعتبروا Algorithms سريعة جدًا، إلا أنهم يعتبروا Not Secured وسهل يتم معرفة الـ Passwords من خلالهم.
طب ازاي نخزن الـ Passwords بشكل آمن ؟
وفقًا لمشروع الـ OWASP واللي هو اختصار لـ Open Web Application Security Project فهم ادونا شوية Guidelines نقدر نمشي عليها عشان نخزن الـ Passwords بشكل آمن زي:
اول حاجة اننا نستعمل Modern Hashing Algorithms والـ Hashing هنا هو عبارة عن طريق واحد رايح مبيرجعش، فهي عبارة عن Function بتديها الـ Password ومينفعش تعمل عكس العملية دي عشان تعرف الـ Password .
وفي نفس الوقت لو حصل اي اختراق والـ Attacker وصل للـ Passwords فهو مش هيقدر يستعملها في الـ Application لانها Hashed .. ومن أمثلة الـ Modern Hashing Function الـ Bcrypt واللي بعتر بطيء بسبب الـ Resources اللي بيحتاجها عشان يـ Compute الـ Hashed Value ..
تاني حاجة هي اننا نضيف شوية ملح على الـ Password منسيبهوش كده .. والـ Salt هنا هو عبارة عن Unique Random Generated String بينضاف على الـ Password قبل ما يتعمل Hashing وبعدين يتعمل Hashing ليهم مع بعض ..
طب ليه مينفعش نخزن الـ Passwords كـ Hashed بس ؟
Introduction Into Hoisting in JavaScript
هنتكلم في المقالة ديه عن إجراء مهم تقوم به الجافاسكريبت وهو ال hoisting ومعناه بالعربي "الرفع" وهو ان الجافاسكريبت تقوم برفع تعريف المتغيرات والدوال إلى أعلى النطاق (scope) سواء كان global scope أو اذا كان بداخل دالة فتقوم برفعه إلى أعلى نطاق الدالة (function scope) مما يجعلهم متاحين للاستخدام قبل تعريفهم.
كيفية عمل الـ Hoisting مع الـ Variables
طريقة إجراء ال hoisting ليست ثابتة بل تعتمد علي كيف تم تعريف المتغير.
استخدام Var
في هذا المثال من المتوقع ظهور خطأ لأني استخدمت المتغير قبل تعريفه ولكن النتيجة كانت(undefined) معناها انه تم تعريفه ولكن لا يحتوي علي قيمة وهنا اللي حصل كما هو و
موضح في الصورة أنه تم رفع تعريف المتغير إلي أعلي ال scope بالشكل ده واعطاءه قيمة تساوي undefined. وده نتيجة غريبة وغير منطقية وعشان كده بطلنا نستخدم var في الكود بتاعنا وبقينا نستخدم let و const.
الإصدار الأول - ورقة وقلم 🚀
في الإصدار ده جمعنا أكتر من 50 موضوع في مختلف مجالات هندسة البرمجيات بأكتر من 170 صفحة + تصاميم بجودة عالية وكل ده بالعربي وبشكل مميز ومتقسم لفصول سهل تنتقلوا من فصل وموضع للتاني بدون مشاكل 💎
تقدروا تشوفوا النسخة كاملة من هنا كـ E-Book ، وحاولنا نخليها بسعر رمزي يناسب الجميع 👇
ولو عندكوا أي مشكلة في الدفع ، تقدروا تتواصلوا معانا وهنكون مبسوطين باننا نوفر بدايل زي InstaPay و VodafoneCash 🎁
ولو عاوزين تعاينوا جودة الـ E-Book قبل ما تشتروه ، تقدروا تحملوا النسخة المجانية واللي بتضم حوالي 30 موضوع فيما لايزيد عن 100 صفحة من هنا 😉
رؤيتنا هي إثراء المحتوى التقني العربي وجعل التعلم من خلال القراءة أمتع، وذلك من خلال إثراء المحتوى التقني باللغة العربية وتشجيع المبرمجين على القراءة بلغتهم الأم والتفكير أيضًا بها.
لذلك اتحنا الفرصة أمام الجميع للمساهمة ومساعدتنا في نشر واثراء المحتوى التقني باللغة العربية, من خلال كتابة المقالات التقنية في مختلف مجالات هندسة البرمجيات.
وجب التنويه أنه لن يتم نشر كافة الأعمال التي تصل إلينا، وإنما سيتم الانتقاء منها ما يحقق هدفنا بإثراء المحتوى التقني العربي، ولذلك قد تُطلب بعض التعديلات من الكاتب قبل النشر.
لمعرفة المزيد بخصوص :
💬 المعايير العامة لكتابة ونشر المقالات
⚡️ كيفية الإرسال
🔥 التزامات اقرأ-تِك تجاه الكتاب
يمكنكم قراءة كافة التفاصيل من هنا 👇
