01قيادة فريق الواجهات · تطوير React وDjango
واجهات XDR وEDR
أطوّر واجهات منصّات XDR وEDR وأقود فريق الواجهات، وأراجع تصميم الحلول وتنفيذها قبل إصدارها.
- React
- TypeScript
- Tailwind CSS
- Django
XDR / EDR
أطوّر الواجهات.وأبني الأنظمة.
أصمّم الواجهات وأطوّر الخدمات التي تدعمها، وأتابع العمل من الفكرة حتى تشغيل النظام.
أقود فريقًا من 8 مهندسين · أعمل على نحو 30 مستودعًا برمجيًا
المشاريع · 01—14
أعمال مختارة
مشاريع في الأمن المؤسسي والاتصالات والأنظمة الداخلية وأدوات المطورين. تشرح كل دراسة النظام ودوري فيه والعمل الذي نفذته.
02تصميم النظام وتطوير الواجهات والخدمات
اكتشاف أجهزة الشبكة ومتابعتها
صمّمت بنية التطبيق وطوّرت خدماته وواجهات إدارته لاكتشاف أجهزة الشبكة ومراقبتها، بما فيها الأجهزة المُدارة وغير المُدارة وأجهزة IoT وOT.
- React
- Django
- Python
- مراقبة الشبكة
- التحكم في الأجهزة
DISCOVERY / VISIBILITY
03أدوات داخلية للفريق
قواعد مشتركة لوكلاء البرمجة
أجهّز Codex وClaude بقواعد المشروع وأدوات MCP وخطوات الاختبار، ليتمكّنا من العمل على المستودعات وفق أسلوب الفريق.
- Codex
- Claude
- MCP
- TypeScript
- Python
AGENT / REVIEW
04تنفيذ الواجهة كاملة
إدارة جدار حماية تطبيقات الويب
طوّرت واجهة إدارة جدار حماية تطبيقات الويب (WAF) كاملة باستخدام React وVite، من تنظيم المكوّنات إلى ربط الشاشات بالخدمات.
- React
- Vite
- TypeScript
- ربط الخدمات
- مكونات قابلة لإعادة الاستخدام
WAF / CONTROL
مشاريع أخرى
مشاريع متنوعة وخبرات أوسع.
عملت على أنظمة للاتصالات وإدارة الأعمال، إلى جانب أدوات للأتمتة. في كل مشروع، أشرح ما أنجزته ودوري في تطويره.
الاتصالات وأنظمة RBT
أطوّر عن بُعد واجهات React وNext.js لأنظمة نغمات الانتظار (RBT) والربط مع أنظمة الشبكات، وأصلها بالخدمات عبر gRPC.
React / Next.js / gRPCاكتشاف الأصول
بنيت تطبيقًا داخليًا لاكتشاف الأصول المتاحة عبر الإنترنت، وطوّرت أدوات لجمع المعلومات من المصادر المفتوحة (OSINT) واختبار الاختراق.
Python / React / OSINTإدارة العمليات في Hopper
طوّرت ميزات الواجهة وربطتها بالخدمات اللازمة لإدارة العمليات اللوجستية وتشغيل المتاجر.
هندسة الواجهات / ربط الخادم / مسارات تشغيليةمنصّة Moshaar
أدرت تنفيذ المشروع وتسليمه، وشاركت في تطوير أدوات متابعة المهام والجداول الزمنية وتنظيم عمل الفرق.
إدارة المشاريع / الواجهات / تصميم مسارات العملالموارد البشرية والإدارة
نظام داخلي لتنظيم إجراءات الموارد البشرية وتنسيق العمل بين أقسام المؤسسة.
مسارات الأعمال / ERP / تشغيل الأقسامإدارة الصيدليات
طوّرت نظامًا باستخدام C# و.NET يجمع إدارة مخزون الصيدلية ومتابعة الوصفات وإصدار الفواتير في تطبيق واحد.
C# / .NET / المخزونمواقع الشركات
نفّذت واجهات متجاوبة لمواقع SGSTel وAzka Moka وDeepSafer، ومنها موقع ثنائي اللغة.
React / Tailwind CSS / التصميم المتجاوبإدارة المستودعات
بنيت ملف manifest مستوحى من أداة Android repo، يحدّد المستودعات اللازمة للعمل ويساعد المهندس على تجهيزها بأمر واحد.
Git / أدوات manifest / الأتمتةأدوات ONIST
مشروع جانبي أجمع فيه السكربتات والواجهات الصغيرة بدل أن تبقى أوامر متفرقة في الملاحظات.
React / TypeScript / الأتمتةتنظيم مواعيد الجلسات
مشروع جانبي يجمع مواعيد الجلسات ومددها والمهام التي تحتاج إلى متابعة في مكان واحد.
Django / React / PostgreSQLنماذج توضيحية للواجهات، وليست صورًا من المنتجات الفعلية.
الخبرة
الخبرة العملية.
مهندس برمجيات وقائد فريق
DeepSafer
- حتى الآن
- أقود فريقًا من ثمانية مطوّرين، وأحوّل متطلبات المنتج إلى تصميم للتطبيق ومهام واضحة، وأرتّب أولويات كل دورة تطوير. وأشارك بنفسي في تطوير الميزات الأساسية.
- أحدّد بنية التطبيق ومسؤوليات الواجهة والخادم، وأطوّر خدمات Django وواجهات React، وأحلّ مشكلات التصميم البرمجي والربط بين أجزاء النظام.
- أشرف على تطوير حلول حماية نقاط النهاية واكتشاف الشبكات وأدوات الأمن، وأنسّق تنفيذ الميزات مع المطوّرين ومديري المشاريع.
- أنظّم استخدام الفريق لوكلاء البرمجة بالذكاء الاصطناعي: أجهّز بيئات التطوير، وأحدّد خطوات العمل وتوزيع المهام بين الوكلاء، وأكتب قواعد للمشاريع ومهارات يمكن استخدامها في أكثر من مهمة.
- أشرف على إعداد بيئات التطوير وأتمتة المهام باستخدام Python، وأنظّم تغييرات الكود والعمل المشترك باستخدام Git وGitLab.
- أراجع الكود وأوجّه المهندسين وأصلح أخطاء الواجهات والخدمات. وأعيد تنظيم المكوّنات القديمة لتسهيل صيانتها وإضافة ميزات جديدة إليها.
مطوّر واجهات أمامية (دوام جزئي)
SGSTel
- حتى الآن
- أتولى تطوير الواجهات باستخدام React وNext.js وTailwind CSS، وأحوّل متطلبات المنتج إلى شاشات تناسب مختلف أحجام الأجهزة ومكوّنات يمكن إعادة استخدامها.
- أربط الواجهات بخدمات الخادم عبر gRPC، وأتأكد من توافقها، وأتتبّع مشكلات الاتصال وتبادل البيانات أثناء تطوير الميزات.
- أحسّن المكوّنات وتوزيع عناصر الشاشة وأصلح الأخطاء لجعل الواجهات أسرع وأسهل استخدامًا على مختلف الأجهزة، بالتعاون مع فريقي المنتج والتطوير.
مهندس برمجيات للواجهة والخادم
DeepSafer
-
- طوّرت ميزات كاملة لتطبيقات الأمن السيبراني للمؤسسات، من فهم المتطلبات إلى بناء خدمات Django وواجهات React وربطها معًا.
- تتبّعت الأخطاء الحرجة بين الواجهات والخدمات، وحدّدت أسبابها وأصلحتها لاستعادة عمل الميزات المتأثرة.
- أعدت تنظيم الكود القديم وحسّنت بنية التطبيقات وأداءها، لتسهيل صيانة منصّات الأمن السيبراني ومواصلة تطويرها.
- ساهمت في وضع معايير مشتركة لجودة الكود وتنظيمه، ليتمكّن الفريق من تطوير المنتجات القائمة بأسلوب متّسق يسهل صيانته.
مهندس واجهات أمامية
DeepSafer
-
- طوّرت واجهات React لمنصّات الأمن السيبراني للمؤسسات، وحوّلت المتطلبات والتصاميم إلى شاشات تفاعلية تناسب مختلف الأجهزة وتساعد المستخدم على إنجاز مهامه.
- قسّمت الواجهات إلى مكوّنات مستقلة يمكن إعادة استخدامها، والتزمت بنظام التصميم لتوحيد العناصر المشتركة بين ميزات المنتج.
- تعاونت مع فريقي التصميم والمنتج لتحسين سهولة الاستخدام وإمكانية الوصول والأداء، وعدّلت المكوّنات وتوزيعها على الشاشات المختلفة بناءً على الملاحظات.
مجالات عملي
من الواجهة إلى تشغيل النظام.
أربعة مجالات أعمل عليها أثناء تطوير المشروع. اختر أحدها للاطلاع على التفاصيل.
الواجهة
تطوير الواجهات
أعتمد على React وNext.js في معظم عملي، وأستخدم TanStack Start وAstro بحسب احتياجات المشروع.
React · Next.js · TypeScript · TanStack Start · Astro
مثال توضيحي · طرق العرض المحفوظةواجهة تناسب الاستخدام اليومي.
أهتم بما يظهر أثناء التحميل وعند حدوث خطأ.
طرق العرض المحفوظة
المهام المفتوحة
الحالة: مفتوحةالمسؤول: أنا
مراجعة الواجهةجاهز
ربط الخدمةقيد المراجعة
UI / STATESتفاصيل مهمة أثناء الاستخدام
التحميللا توجد بياناتخطألوحة المفاتيح
الخدمات
تطوير الخدمات وربطها
أطوّر خدمات Django وFlask، وأربط الواجهات بها عبر gRPC، وأتعامل مع PostgreSQL. وأهتم بمعالجة الأخطاء وطريقة ظهورها للمستخدم.
Django · Flask · Python · gRPC · PostgreSQL · Lua
مثال توضيحي · طرق العرض المحفوظةربط الواجهة بالخدمة على أسس واضحة.
مدخلات معروفة ورسائل خطأ مفهومة.
rpc GetSavedView (ViewRequest)
returns (SavedView);
message ViewRequest {
string view_id = 1;
string owner_id = 2;
}
بنية الاستجابة
{ name: "Open items", filters: ["open"], can_edit: true}التحقق قبل تنفيذ الطلب
المدخلاتالصلاحياتالأخطاء
الوكلاء
أدوات الذكاء الاصطناعي للبرمجة
أجهّز Codex وClaude للعمل على المشاريع بقواعد واضحة ومهارات مخصّصة وأدوات MCP محددة الصلاحيات. وأراجع التغييرات بعد فحص الكود والأنواع وتشغيل اختبارات E2E.
Codex · Claude · Cursor · Qoder · Ollama · OpenRouter
مثال توضيحي · طرق العرض المحفوظةتعليمات واضحة لوكيل البرمجة.
يلتزم الوكيل بقواعد المشروع، ثم أراجع ما أنجزه.
- ↳ AGENTS.md
- ↳ skills/system-design.md
- ↳ components / tokens
مهارة تصميم الأنظمةتعليمات المشروع متاحة مع كل مهمة.
فحوصات قبل المراجعة
أنواع البياناتفحص الكودE2E
مراجعة بشريةيراجع المهندس التغييرات قبل اعتمادها.
النشر
تجهيز الإصدارات وتشغيلها
أجهّز بيئة التشغيل باستخدام Docker وnginx، وأضبط خطوات البناء والنشر في GitLab CI. وأكتب سكربتات للأتمتة وأعالج مشكلات الإصدارات.
Docker · GitLab CI · nginx · CI/CD · Automation
مثال توضيحي · طرق العرض المحفوظةتجهيز التغييرات للنشر.
اختبارات آلية ومراجعة بشرية قبل النشر.
$ docker build .
→ compile application
→ package runtime
$ run checks
→ types · lint · e2e
› human review
مسار الإصدار
- البناء
- الفحص
- 03المراجعة
- 04النشر
جاهز للتسليمحاوية · إعدادات · خطة لاستعادة الإصدار السابق
تتغيّر التفاصيل مع التمرير. ويمكنك اختيار المجال الذي تريد قراءته.
اختر مجالًا من الأعلى للاطلاع على تفاصيله.
الكتابة
أفكار من واقع العمل.
أكتب عن استخدام الذكاء الاصطناعي في البرمجة، وحماية مفاتيح الوصول، وتحسين أداء الواجهات؛ انطلاقًا من مشكلات أتعامل معها في عملي.
منشوراتي على LinkedIn01كيف نجهّز مكتبات الواجهات لوكلاء البرمجة؟يحتاج وكيل البرمجة إلى فهم المكوّنات وخصائصها والقوالب وقيم التصميم. كيف نجعل هذه المعلومات جزءًا أساسيًا من المكتبة؟قراءة المنشور↗02المستودع الخاص وحده لا يحمي مفاتيح الوصولقد يكشف اختراق إحدى أدوات التطوير معلومات محفوظة في مستودع خاص. تبدأ المعالجة بإلغاء مفاتيح الوصول المتضررة واستبدالها وضبط الوصول إلى بيئة التطوير.قراءة المنشور↗03عندما يكون سبب البطء في بنية المشروعلم تحلّ memo والتخزين المؤقت والتعديلات الموضعية مشكلة الأداء. تحسّن الأداء بعد فصل جلب البيانات ومنطق التطبيق عن الواجهة.قراءة المنشور↗
تواصل
لنتحدث عن مشروعك.
أخبرني عن المشروع، وما يحتاجه فريقك، والمشكلة التي تريد حلها. يمكنك البدء برسالة بسيطة.
- البريد الإلكتروني
- adhammosta310@gmail.com
ما الذي تريد تطويره؟
يكفي أن تصف الفكرة أو المشكلة باختصار.