الحمد لله، من خلال رحلتنا في التعلم والتطبيق في خارطة الطريق للمهندس محمد أبو هدهود Mohammed Abu Hadhoud ، استطعنا الانتقال من مرحلة الفهم النظري إلى التطبيق العملي الحقيقي، وذلك عبر بناء نظام متكامل لإدارة عيادة طبية بتقنيات مختلفة تماماً عن المقرر
لم يكن الهدف مجرد تنفيذ مشروع، بل كان السعي لتجسيد مفهوم الهندسة البرمجية الواقعية، حيث يتحول التحليل والتصميم إلى نظام حي يخدم المستخدمين.
فكرة النظام
قمنا بتصميم وتطوير نظام متكامل يتكون من:
لوحة تحكم أدمن (Admin Dashboard)
لوحة تحكم لإدارة العيادة
تطبيق مخصص للمرضى
يهدف النظام إلى تسهيل إدارة العيادات وتحسين تجربة المرضى بشكل جذري.
مميزات التطبيق
من خلال التطبيق، أصبح بإمكان المريض:
حجز موعد مع أي طبيب وفي أي تخصص بسهولة
طلب استشارة طبية عن بُعد
الدفع الإلكتروني والحجز بدل الانتظار الطويل
استقبال تنبيهات دقيقة لمواعيد تناول الأدوية
متابعة الخطة العلاجية الخاصة به
هذا التحول الرقمي يختصر الوقت والجهد، ويعكس مفهوم الرعاية الصحية الذكية.
بداية التصميم: الكيانات والعلاقات
كانت البداية من أهم خطوة في أي نظام:
تحليل البيانات
وتصميم قاعدة البيانات (Database Design)
أولاً: الكيانات (Entities)
تم تصميم الكيانات الأساسية كالتالي:
Persons: الكيان العام الذي يمثلأي شخص في النظام
Patients: المرضى
Doctors: الأطباء
Appointments: المواعيد
MedicalRecords: السجلات الطبية
Prescriptions: الوصفات
Payments: المدفوعات
ثانياً: العلاقات (Relationships)
تم بناء العلاقات بشكل احترافي يعكس الواقع:
كل شخص يمكن أن يكون مريض أو طبيب
(Supertype/Subtype)
المريض يمكن أن يمتلك عدة مواعيد
الطبيب يمكن أن يشرف على عدة مواعيد
كل موعد مرتبط بسجل طبي ودفع
السجل الطبي يمكن أن يحتوي على عدة وصفات
قوة التصميم
ما يميز هذا النظام:
1. استخدام Normalization
تم تقليل التكرار في البيانات بشكل احترافي، مما يحسن الأداء ويمنع التعارض.
2. تطبيق مفهوم Supertype / Subtype
ربط الكيان العام (Persons) بالكيانات الفرعية (Patients / Doctors)
وهو من أفضل الممارسات في تصميم قواعد البيانات.
3. قابلية التوسع (Scalability)
يمكن بسهولة إضافة:
ممرضين (Nurses)
موظفين إداريين (Admins)
أقسام جديدة
دون الحاجة لإعادة بناء النظام.
ما تعلمته من التجربة
هذه التجربة لم تكن مجرد مشروع، بل كانت نقلة نوعية في الفهم:
كيف أحول الفكرة الى متطلبات ثم مخطط إلى نظام حقيقي
كيف أبني قاعدة بيانات قوية وقابلة للتوسع
كيف أربط بين التحليل + التصميم + البرمجة
كيف أفكر كمهندس برمجيات وليس كمبرمج فقط
التقنيات المستخدمة:
React + React Native+ Node.js +
Express+ mongodb+ Twilind
الخلاصة
هذا النظام هو ثمرة جهد وتعلم وتطبيق عملي، يمثل خطوة قوية في رحلتنا في هندسة البرمجيات.
والأجمل من ذلك، أنه قابل للتطوير ليصبح منتجًا حقيقيًا يخدم المجتمع، ويُحدث فرقًا في مجال الرعاية الصحية.
#يوميات_مهندس
لم يكن الهدف مجرد تنفيذ مشروع، بل كان السعي لتجسيد مفهوم الهندسة البرمجية الواقعية، حيث يتحول التحليل والتصميم إلى نظام حي يخدم المستخدمين.
فكرة النظام
قمنا بتصميم وتطوير نظام متكامل يتكون من:
لوحة تحكم أدمن (Admin Dashboard)
لوحة تحكم لإدارة العيادة
تطبيق مخصص للمرضى
يهدف النظام إلى تسهيل إدارة العيادات وتحسين تجربة المرضى بشكل جذري.
مميزات التطبيق
من خلال التطبيق، أصبح بإمكان المريض:
حجز موعد مع أي طبيب وفي أي تخصص بسهولة
طلب استشارة طبية عن بُعد
الدفع الإلكتروني والحجز بدل الانتظار الطويل
استقبال تنبيهات دقيقة لمواعيد تناول الأدوية
متابعة الخطة العلاجية الخاصة به
هذا التحول الرقمي يختصر الوقت والجهد، ويعكس مفهوم الرعاية الصحية الذكية.
بداية التصميم: الكيانات والعلاقات
كانت البداية من أهم خطوة في أي نظام:
تحليل البيانات
وتصميم قاعدة البيانات (Database Design)
أولاً: الكيانات (Entities)
تم تصميم الكيانات الأساسية كالتالي:
Persons: الكيان العام الذي يمثلأي شخص في النظام
Patients: المرضى
Doctors: الأطباء
Appointments: المواعيد
MedicalRecords: السجلات الطبية
Prescriptions: الوصفات
Payments: المدفوعات
ثانياً: العلاقات (Relationships)
تم بناء العلاقات بشكل احترافي يعكس الواقع:
كل شخص يمكن أن يكون مريض أو طبيب
(Supertype/Subtype)
المريض يمكن أن يمتلك عدة مواعيد
الطبيب يمكن أن يشرف على عدة مواعيد
كل موعد مرتبط بسجل طبي ودفع
السجل الطبي يمكن أن يحتوي على عدة وصفات
قوة التصميم
ما يميز هذا النظام:
1. استخدام Normalization
تم تقليل التكرار في البيانات بشكل احترافي، مما يحسن الأداء ويمنع التعارض.
2. تطبيق مفهوم Supertype / Subtype
ربط الكيان العام (Persons) بالكيانات الفرعية (Patients / Doctors)
وهو من أفضل الممارسات في تصميم قواعد البيانات.
3. قابلية التوسع (Scalability)
يمكن بسهولة إضافة:
ممرضين (Nurses)
موظفين إداريين (Admins)
أقسام جديدة
دون الحاجة لإعادة بناء النظام.
ما تعلمته من التجربة
هذه التجربة لم تكن مجرد مشروع، بل كانت نقلة نوعية في الفهم:
كيف أحول الفكرة الى متطلبات ثم مخطط إلى نظام حقيقي
كيف أبني قاعدة بيانات قوية وقابلة للتوسع
كيف أربط بين التحليل + التصميم + البرمجة
كيف أفكر كمهندس برمجيات وليس كمبرمج فقط
التقنيات المستخدمة:
React + React Native+ Node.js +
Express+ mongodb+ Twilind
الخلاصة
هذا النظام هو ثمرة جهد وتعلم وتطبيق عملي، يمثل خطوة قوية في رحلتنا في هندسة البرمجيات.
والأجمل من ذلك، أنه قابل للتطوير ليصبح منتجًا حقيقيًا يخدم المجتمع، ويُحدث فرقًا في مجال الرعاية الصحية.
#يوميات_مهندس
👍4
🚀 لو وصلت لمرحلة إنك تمتلك أساس في اللغة الإنجليزية… فهنا تبدأ القفزة الحقيقية
إذا كنت تريد:
🔥 تطوير مهاراتك بشكل احترافي
🔥 التعلم بأساليب ممتعة من مدرسين أجانب
🔥 تحسين الاستماع والتحدث بطريقة طبيعية
فهذه من أفضل المصادر اللي ممكن تعتمد عليها 👇
🎥 قناة يوتيوب:
https://youtube.com/@engvidjade?si=ZP7OUuZbu1DOHGpl
🌐 الموقع الرسمي:
https://www.engvid.com/
💡 المميز فيها:
- شروحات من معلمين ناطقين باللغة
- دروس تغطي القواعد، المحادثة، والمفردات وطرق احترافية
- أسلوب بسيط وعميق بنفس الوقت
ملاحظة:
هذه المصادر مناسبة لك إذا كان عندك أساس مسبق
(درست معهد أو تعرف الأساسيات)، لأنها بتاخذك لمستوى أعلى بإذن الله.
ابدأ اليوم… وخلّك مختلف 💪🔥
طبعا الموقع مفهرس ومنظم افضل
إذا كنت تريد:
🔥 تطوير مهاراتك بشكل احترافي
🔥 التعلم بأساليب ممتعة من مدرسين أجانب
🔥 تحسين الاستماع والتحدث بطريقة طبيعية
فهذه من أفضل المصادر اللي ممكن تعتمد عليها 👇
🎥 قناة يوتيوب:
https://youtube.com/@engvidjade?si=ZP7OUuZbu1DOHGpl
🌐 الموقع الرسمي:
https://www.engvid.com/
💡 المميز فيها:
- شروحات من معلمين ناطقين باللغة
- دروس تغطي القواعد، المحادثة، والمفردات وطرق احترافية
- أسلوب بسيط وعميق بنفس الوقت
ملاحظة:
هذه المصادر مناسبة لك إذا كان عندك أساس مسبق
(درست معهد أو تعرف الأساسيات)، لأنها بتاخذك لمستوى أعلى بإذن الله.
ابدأ اليوم… وخلّك مختلف 💪🔥
طبعا الموقع مفهرس ومنظم افضل
engVid
engVid · Learn English for Free
Learn English for free with hundreds of video lessons by experienced native-speaker teachers. English grammar, vocabulary, pronunciation, IELTS, TOEFL, writing, and more.
سؤال :
كيف استغل قدرات الذكاء الاصطناعي في تخصصي في جانب آخر غير كتابة الكود ؟
يمكن تستفيد منه في تحليل النظم
ممكن تشوف مثال في
دورة حياة الشخص منذ دخوله المستشفى الى خروجه
نتمنى لكم قراءة ممتعة
https://chatgpt.com/share/69e6bdad-6780-8327-9d69-ef584c5ff9f7
كيف استغل قدرات الذكاء الاصطناعي في تخصصي في جانب آخر غير كتابة الكود ؟
يمكن تستفيد منه في تحليل النظم
ممكن تشوف مثال في
دورة حياة الشخص منذ دخوله المستشفى الى خروجه
نتمنى لكم قراءة ممتعة
https://chatgpt.com/share/69e6bdad-6780-8327-9d69-ef584c5ff9f7
ChatGPT
ChatGPT - دورة حياة المريض
ChatGPT helps you get answers, find inspiration, and be more productive.
تخيلوا معي أن هذه المواضيع في صلب تخصصنا ولا نفقه منها شئ سوى القشور 😑🔥
تخصصنا بحر عميق لا مرسئ له ولا نهاية
كل يوم تكتشف موضوع جديد وتشعر بأنك جاهل في تخصصك مهما درست ومهما تعلمت 🤔
فهرس متكامل تم البحث عن هذه المواضيع في ٤٤ مصدر في الانترنت
من خلال NotebookLM
القي نظرة
https://notebooklm.google.com/notebook/308e7523-4338-4d53-8b02-98c501de1e7a
تخصصنا بحر عميق لا مرسئ له ولا نهاية
كل يوم تكتشف موضوع جديد وتشعر بأنك جاهل في تخصصك مهما درست ومهما تعلمت 🤔
فهرس متكامل تم البحث عن هذه المواضيع في ٤٤ مصدر في الانترنت
من خلال NotebookLM
القي نظرة
https://notebooklm.google.com/notebook/308e7523-4338-4d53-8b02-98c501de1e7a
Google
Google NotebookLM | Your research and thinking partner, grounded in the information you trust
Use the power of AI for quick summarization and note taking, NotebookLM is your powerful virtual research assistant rooted in information you can trust.
جيناكم اليوم بكنز لمحبين دعم CV من شهائد عالمية معتمدة (مجانية)
اكثر من 1000 شهادة في مختلف تخصصات علوم الحاسوب
خلوا الناس يدرسم
https://www.freecodecamp.org/news/free-certificates/
اكثر من 1000 شهادة في مختلف تخصصات علوم الحاسوب
خلوا الناس يدرسم
https://www.freecodecamp.org/news/free-certificates/
❤2
للشباب هذه الأيام
هل لديك هدف في حياتك ؟
ماقيمة الانسان وهو ليس لديه
هدف نبيل يسعى لتحقيقه ؟
حياتك لم ترسم لها هدف
وعمرك يضيع وانت جالس تخازين وسهر ومشاهدة مباريات أو متابعة مسلسلات على الفاضي ..!؟؟؟ ليش ؟
منذ سنين ما تابعت مسلسل ولا أهتم لذلك وليس لدي موعد لها كما يفعل الاخرين ولم اشاهد مباراة منذ مدة ولا معي فريق اشجعه ولا أفضل لاعب يعني عكس القافلة تماماً
والحمدلله عايش ومرتاح
وفوق هذا دخلنا تخصص برمجة
يعني مش فاضي أتعجب لنفسي
كيف عادنا اقضي ساعات من وقتي في غير مكانها الصحيح
ما رأيكم ؟
هل هذا تخلف أم طريقة صحيحة للحفاظ على الوقت والإستفادة بما يرضي الله وينفعك في مسقبلك 😄
هل لديك هدف في حياتك ؟
ماقيمة الانسان وهو ليس لديه
هدف نبيل يسعى لتحقيقه ؟
حياتك لم ترسم لها هدف
وعمرك يضيع وانت جالس تخازين وسهر ومشاهدة مباريات أو متابعة مسلسلات على الفاضي ..!؟؟؟ ليش ؟
منذ سنين ما تابعت مسلسل ولا أهتم لذلك وليس لدي موعد لها كما يفعل الاخرين ولم اشاهد مباراة منذ مدة ولا معي فريق اشجعه ولا أفضل لاعب يعني عكس القافلة تماماً
والحمدلله عايش ومرتاح
وفوق هذا دخلنا تخصص برمجة
يعني مش فاضي أتعجب لنفسي
كيف عادنا اقضي ساعات من وقتي في غير مكانها الصحيح
ما رأيكم ؟
هل هذا تخلف أم طريقة صحيحة للحفاظ على الوقت والإستفادة بما يرضي الله وينفعك في مسقبلك 😄
👍3
من مقاعد الدراسة… إلى واقع سوق العمل
أنا طالب علوم حاسوب من جامعة إب…
خريج رسمي إلا أسابيع للتخرج
أتحدث اليوم بصفتي مهندس برمجيات درست وتعلمت في جامعة إب و يرى الصورة كما هي، لا كما يُفترض أن تكون.
ويقول ما عاشه بنفسه
جامعة إب منارة علمية صنعت منا رجال اولوا قوة و اولوا بأس شديد 😄 وأنا واثق مما أقول و طلاب جامعة إب يعرفون ذلك حق المعرفة
في الجامعة، صحيح تعلمنا ولكن تعلمنا الأساسيات… وهذا شيء عظيم
لكن بصراحة، ما يُدرَّس لا يواكب بالكامل ما يحدث في سوق العمل ما يواكب عصر التكنولوجيا في عام ٢٠١٠ فكيف بنا في عام ٢٠٢٦ 💔
خاصة كتخصص في البرمجة لا يحق لك أن تأتي بملزمة او طريقة او أسلوب قد عفاء عليه الزمن وتدرسني به وتلقنني إياه ، وكأنه تخصص دراسات أدبية مع أحترامي للآداب
درسنا مفاهيم ومواد نظرية كثيرة،
بينما العالم خارج القاعات يتحدث عن:
Microservices، Cloud، DevOps، System Design، AI , Automation
وأدوات وتقنيات لم نسمع بها إلا بعد أن بدأنا نتعلم بأنفسنا.
المشكلة لم تكن في الطلاب… بل في الفجوة:
فجوة بين المنهج وسوق العمل
فجوة بين النظرية والتطبيق
فجوة بين "التخرج" و"الجاهزية للعمل"
لم نتعلم كيف:
- نبني نظامًا حقيقيًا من الصفر إلى الإنتاج
- نعمل ضمن فريق تطوير حقيقي (Git, Agile, CI/CD)
- نحل مشاكل واقعية تحت ضغط وقيود من واقع سوق عمل وليس ضغط وتعب على مشاريع لا فائدة منها ولا تواكب السوق.
كل هذا تعلمناه خارج الجامعة… بالتجربة، بالخطأ، وبالاجتهاد الشخصي بالتطوير الذاتي من خلال الكورسات والمصادر الأجنبية والبحث والتطبيق الذاتي
فهذا ليس عيباً في الجامعة
بل هي مشكلة تعاني منها كل الجامعات في اليمن سوى حكومية او خاصة بل على مستوى الوطن العربي
ومع ذلك…
جامعة إب كانت وما زالت منبع العلم و نقطة البداية، وليست النهاية.
هي المكان الذي اكتشفت فيه نفسي وعرفت قدرها،
لكن الطريق الحقيقي بدأ عندما قررت أن أتعلم خارج حدود المنهج.
رسالتي:
أنا لست حاقد
ولست ناكر ، وهذا الكلام ليس لصالح أحد
بل هو نقد بناء يتطلب الإستجابة الفورية وإصلاح وتحديث المناهج والخطط الدراسية بما يواكب العصر
التعليم الجامعي مهم… لكنه لم يعد كافيًا وحده.
ومن يريد أن ينجح في مجال البرمجيات او أي مجال آخر ،
عليه أن يبني نفسه بنفسه.
وأكبر قصة نجاح هي أننا وجدنا فرص عمل في تخصصنا واشتلغنا ونحن ما زلنا طلاب وهذه كافية.
💬 هل واجهت نفس الفجوة ؟
شارك تجربتك.
#جامعة_إب #هندسة_البرمجيات #واقع_التعليم #سوق_العمل
#قصص_حقيقية #تطوير_الذات #مبرمجين #شباب_اليمن
أنا طالب علوم حاسوب من جامعة إب…
خريج رسمي إلا أسابيع للتخرج
أتحدث اليوم بصفتي مهندس برمجيات درست وتعلمت في جامعة إب و يرى الصورة كما هي، لا كما يُفترض أن تكون.
ويقول ما عاشه بنفسه
جامعة إب منارة علمية صنعت منا رجال اولوا قوة و اولوا بأس شديد 😄 وأنا واثق مما أقول و طلاب جامعة إب يعرفون ذلك حق المعرفة
في الجامعة، صحيح تعلمنا ولكن تعلمنا الأساسيات… وهذا شيء عظيم
لكن بصراحة، ما يُدرَّس لا يواكب بالكامل ما يحدث في سوق العمل ما يواكب عصر التكنولوجيا في عام ٢٠١٠ فكيف بنا في عام ٢٠٢٦ 💔
خاصة كتخصص في البرمجة لا يحق لك أن تأتي بملزمة او طريقة او أسلوب قد عفاء عليه الزمن وتدرسني به وتلقنني إياه ، وكأنه تخصص دراسات أدبية مع أحترامي للآداب
درسنا مفاهيم ومواد نظرية كثيرة،
بينما العالم خارج القاعات يتحدث عن:
Microservices، Cloud، DevOps، System Design، AI , Automation
وأدوات وتقنيات لم نسمع بها إلا بعد أن بدأنا نتعلم بأنفسنا.
المشكلة لم تكن في الطلاب… بل في الفجوة:
فجوة بين المنهج وسوق العمل
فجوة بين النظرية والتطبيق
فجوة بين "التخرج" و"الجاهزية للعمل"
لم نتعلم كيف:
- نبني نظامًا حقيقيًا من الصفر إلى الإنتاج
- نعمل ضمن فريق تطوير حقيقي (Git, Agile, CI/CD)
- نحل مشاكل واقعية تحت ضغط وقيود من واقع سوق عمل وليس ضغط وتعب على مشاريع لا فائدة منها ولا تواكب السوق.
كل هذا تعلمناه خارج الجامعة… بالتجربة، بالخطأ، وبالاجتهاد الشخصي بالتطوير الذاتي من خلال الكورسات والمصادر الأجنبية والبحث والتطبيق الذاتي
فهذا ليس عيباً في الجامعة
بل هي مشكلة تعاني منها كل الجامعات في اليمن سوى حكومية او خاصة بل على مستوى الوطن العربي
ومع ذلك…
جامعة إب كانت وما زالت منبع العلم و نقطة البداية، وليست النهاية.
هي المكان الذي اكتشفت فيه نفسي وعرفت قدرها،
لكن الطريق الحقيقي بدأ عندما قررت أن أتعلم خارج حدود المنهج.
رسالتي:
أنا لست حاقد
ولست ناكر ، وهذا الكلام ليس لصالح أحد
بل هو نقد بناء يتطلب الإستجابة الفورية وإصلاح وتحديث المناهج والخطط الدراسية بما يواكب العصر
التعليم الجامعي مهم… لكنه لم يعد كافيًا وحده.
ومن يريد أن ينجح في مجال البرمجيات او أي مجال آخر ،
عليه أن يبني نفسه بنفسه.
وأكبر قصة نجاح هي أننا وجدنا فرص عمل في تخصصنا واشتلغنا ونحن ما زلنا طلاب وهذه كافية.
💬 هل واجهت نفس الفجوة ؟
شارك تجربتك.
#جامعة_إب #هندسة_البرمجيات #واقع_التعليم #سوق_العمل
#قصص_حقيقية #تطوير_الذات #مبرمجين #شباب_اليمن
👍5
هذا ليس مجرد Repo… هذا منهج هندسي كامل.
الفكرة بسيطة لكن عميقة:
بدل ما تستخدم التقنيات… تعلّم كيف تُبنى من الصفر.
🔍 تخيّل أنك:
- تبني Web Server بنفسك بدل استخدام Node.js
- تفهم كيف تعمل قواعد البيانات بدل استخدام MySQL
- تصمم Neural Network بدل استخدام TensorFlow
- أو حتى… تبني لغة برمجة خاصة بك
هنا تتحول من:
👨💻 Developer → 🧠 Engineer
📌 المقولة التي تلخص كل شيء (لـ ):
"ما لا أستطيع بناءه، لا أستطيع فهمه"
🚀 ليش هذا مهم؟
لأن سوق العمل اليوم مليء بـ:
❌ ناس تحفظ Frameworks
لكن قليل جدًا يفهم:
✔️ كيف تعمل الأنظمة من الداخل
✔️ كيف تُحل المشاكل المعقدة
✔️ كيف تُبنى حلول قابلة للتوسع
🧠 كمهندس… هذه بعض المسارات القوية داخل المستودع:
- بناء Database Engine
- بناء Operating System
- بناء Search Engine
- بناء Compiler / Programming Language
- بناء AI Model من الصفر
⚠️ هذا الطريق ليس سهل:
- يحتاج صبر
- يحتاج فهم عميق
- يحتاج أنك “تغوص تحت الطبقة”
لكن النتيجة؟
🔥 مستوى تفكير مختلف تمامًا
🎯 الخلاصة:
إذا تريد تكون مجرد مبرمج… استخدم الأدوات
إذا تريد تكون مهندس برمجيات حقيقي…
👉 ابدأ ببنائها
https://github.com/codecrafters-io/build-your-own-x
#هندسة_البرمجيات #تعلم_البرمجة #GitHub #ComputerScience #Backend #AI #Systems
الفكرة بسيطة لكن عميقة:
بدل ما تستخدم التقنيات… تعلّم كيف تُبنى من الصفر.
🔍 تخيّل أنك:
- تبني Web Server بنفسك بدل استخدام Node.js
- تفهم كيف تعمل قواعد البيانات بدل استخدام MySQL
- تصمم Neural Network بدل استخدام TensorFlow
- أو حتى… تبني لغة برمجة خاصة بك
هنا تتحول من:
👨💻 Developer → 🧠 Engineer
📌 المقولة التي تلخص كل شيء (لـ ):
"ما لا أستطيع بناءه، لا أستطيع فهمه"
🚀 ليش هذا مهم؟
لأن سوق العمل اليوم مليء بـ:
❌ ناس تحفظ Frameworks
لكن قليل جدًا يفهم:
✔️ كيف تعمل الأنظمة من الداخل
✔️ كيف تُحل المشاكل المعقدة
✔️ كيف تُبنى حلول قابلة للتوسع
🧠 كمهندس… هذه بعض المسارات القوية داخل المستودع:
- بناء Database Engine
- بناء Operating System
- بناء Search Engine
- بناء Compiler / Programming Language
- بناء AI Model من الصفر
⚠️ هذا الطريق ليس سهل:
- يحتاج صبر
- يحتاج فهم عميق
- يحتاج أنك “تغوص تحت الطبقة”
لكن النتيجة؟
🔥 مستوى تفكير مختلف تمامًا
🎯 الخلاصة:
إذا تريد تكون مجرد مبرمج… استخدم الأدوات
إذا تريد تكون مهندس برمجيات حقيقي…
👉 ابدأ ببنائها
https://github.com/codecrafters-io/build-your-own-x
#هندسة_البرمجيات #تعلم_البرمجة #GitHub #ComputerScience #Backend #AI #Systems
🚀 هل تخيلت يومًا أن موقعك ممكن “ينبهر” المستخدم من أول ثانية؟
🎬 هذا مش مجرد تصميم موقع…
هذا مستوى جديد من التجربة التفاعلية (Interactive Experience)
✨ حركات (Animations) سلسة
✨ انتقالات ذكية
✨ تجربة مستخدم تخلي الزائر ما يطلع من الموقع
📌 هذا هو مستقبل تصميم الويب!
🎥 شاهد المثال هنا:
https://youtu.be/L89L3_Zaens?si=K4qkvDBBBr6DAhZg
💡 السر مو في الكود فقط…
السر في:
- الإبداع 🎨
- التوقيت ⏱️
- الإحساس بالحركة 💫
🔥 إذا أنت مبرمج أو مصمم:
لا تكتفي بمواقع تقليدية…
ابدأ ببناء مواقع “تُبهر” العملاء وتبيع نفسها بنفسها!
📈 اليوم الشركات تبحث عن:
“تجربة” مش مجرد موقع
👨💻 هل أنت جاهز تنقل مستواك للمرحلة القادمة؟
#تصميم_ويب #Frontend #UI_UX #Animation #برمجة #تطوير_المواقع #ابداع
🎬 هذا مش مجرد تصميم موقع…
هذا مستوى جديد من التجربة التفاعلية (Interactive Experience)
✨ حركات (Animations) سلسة
✨ انتقالات ذكية
✨ تجربة مستخدم تخلي الزائر ما يطلع من الموقع
📌 هذا هو مستقبل تصميم الويب!
🎥 شاهد المثال هنا:
https://youtu.be/L89L3_Zaens?si=K4qkvDBBBr6DAhZg
💡 السر مو في الكود فقط…
السر في:
- الإبداع 🎨
- التوقيت ⏱️
- الإحساس بالحركة 💫
🔥 إذا أنت مبرمج أو مصمم:
لا تكتفي بمواقع تقليدية…
ابدأ ببناء مواقع “تُبهر” العملاء وتبيع نفسها بنفسها!
📈 اليوم الشركات تبحث عن:
“تجربة” مش مجرد موقع
👨💻 هل أنت جاهز تنقل مستواك للمرحلة القادمة؟
#تصميم_ويب #Frontend #UI_UX #Animation #برمجة #تطوير_المواقع #ابداع
YouTube
Claude Code + Nano Banana 2 = مواقع أسطورية بعشرات الآلاف
الكورس والمجتمع الكامل لبناء وكلاء الذكاء الاصطناعي وأنظمة ومواقع بدون برمجة:
https://www.skool.com/ai-plus/about
في هذا الفيديو، نستعرض كيفية بناء مواقع رائعة باستخدام ميزات جديدة في Claude Code و NanoBanana2.
ستتعلم كيف تصمم موقع responsive بسهولة وسرعة،…
https://www.skool.com/ai-plus/about
في هذا الفيديو، نستعرض كيفية بناء مواقع رائعة باستخدام ميزات جديدة في Claude Code و NanoBanana2.
ستتعلم كيف تصمم موقع responsive بسهولة وسرعة،…
يقول أحدهم 6 أشهر من البرمجة التوليدية العشوائية (Vibe Coding): الشيفرة المصدرية (Codebase) الخاصة بي أصبحت كارثة بكل المقاييس.
التطبيق يعمل، المستخدمون راضون، والإيرادات تتدفق (وهذا فعلياً هو الجزء الإيجابي الوحيد في القصة).
لكن الكارثة بدأت عندما حاولت ضم مطور جديد (Onboard a dev) للفريق لمساعدتي؛ بمجرد أن فتح المستودع البرمجي (Repo)، صمت تماماً لمدة دقيقتين، ثم سألني بصدمة: "ما هذا؟".
لقد أمضيت 6 أشهر أعتمد بشكل أعمى على أدوات مثل Cursor و Lovable و Bolt. كل ميزة برمجية (Feature) كانت تعمل لحظة شحنها (Shipping)، لكن لم يكن هناك أي التفات للهيكلة أو المعمارية (Structure). الذكاء الاصطناعي كان يضيف الأكواد بتراكم عشوائي: ملف جديد هنا، دوال مكررة (Duplicate functions) هناك، وثلاث طرق مختلفة لمعالجة نفس العملية المنطقية عبر كامل الـ Codebase.
حاولت إجراء عملية إعادة هيكلة (Refactoring) للشيفرة بنفسي الأسبوع الماضي، واستسلمت بعد ساعتين فقط. الأكواد متشابكة لدرجة أن التعديل على جزء واحد يؤدي حتمياً إلى انهيار مكونات أخرى لا علاقة لها به تماماً.
عملية التوليد (Generation) كانت فائقة السرعة، لكن عملية التنظيف والصيانة (Cleanup) أصبحت كابوساً مرعباً.
السؤال الآن: هل هناك أي مخرج هندسي من هذا المأزق، أم سأضطر لإعادة بناء النظام بأكمله من الصفر (From Scratch)؟
التطبيق يعمل، المستخدمون راضون، والإيرادات تتدفق (وهذا فعلياً هو الجزء الإيجابي الوحيد في القصة).
لكن الكارثة بدأت عندما حاولت ضم مطور جديد (Onboard a dev) للفريق لمساعدتي؛ بمجرد أن فتح المستودع البرمجي (Repo)، صمت تماماً لمدة دقيقتين، ثم سألني بصدمة: "ما هذا؟".
لقد أمضيت 6 أشهر أعتمد بشكل أعمى على أدوات مثل Cursor و Lovable و Bolt. كل ميزة برمجية (Feature) كانت تعمل لحظة شحنها (Shipping)، لكن لم يكن هناك أي التفات للهيكلة أو المعمارية (Structure). الذكاء الاصطناعي كان يضيف الأكواد بتراكم عشوائي: ملف جديد هنا، دوال مكررة (Duplicate functions) هناك، وثلاث طرق مختلفة لمعالجة نفس العملية المنطقية عبر كامل الـ Codebase.
حاولت إجراء عملية إعادة هيكلة (Refactoring) للشيفرة بنفسي الأسبوع الماضي، واستسلمت بعد ساعتين فقط. الأكواد متشابكة لدرجة أن التعديل على جزء واحد يؤدي حتمياً إلى انهيار مكونات أخرى لا علاقة لها به تماماً.
عملية التوليد (Generation) كانت فائقة السرعة، لكن عملية التنظيف والصيانة (Cleanup) أصبحت كابوساً مرعباً.
السؤال الآن: هل هناك أي مخرج هندسي من هذا المأزق، أم سأضطر لإعادة بناء النظام بأكمله من الصفر (From Scratch)؟
❤2
ما هو C4 Diagram؟
هو أسلوب لتصميم وشرح الأنظمة البرمجية بطريقة واضحة ومتدرجة.
تم تطويره بواسطة
Simon Brown
والهدف منه:
فهم النظام من الأعلى
(Big Picture)
إلى التفاصيل الدقيقة بشكل منظم.
لماذا نستخدم C4؟
بدل ما ترسم مخطط معقد ومبهم
C4 يعطيك
4 مستويات واضحة:
من “النظام بالكامل”
إلى “الكود نفسه”
مستويات C4 الأربعة
١- System Context Diagram
(الصورة العامة)
هذا أعلى مستوى
يوضح:
من هم المستخدمين (Users)
ما هي الأنظمة الخارجية
كيف يتفاعل النظام معهم
مثال:
المستخدم → يستخدم تطبيقك
التطبيق → يتواصل مع API خارجي
٢- Container Diagram (مكونات النظام)
هنا نبدأ ندخل داخل النظام
يوضح:
Frontend مثال(React)
Backend مثال(Node.js)
Database
APIs
مثال :
React App
Node API
Mongodb
٣- Component Diagram (تفاصيل داخل كل جزء)
هنا ندخل أعمق
يوضح داخل الـ Backend مثلاً:
Controllers
Services
Repositories
يعني كيف الكود مقسّم داخليًا
٤- Code Diagram
(مستوى الكود)
أدق مستوى
يوضح:
Classes
Functions
العلاقات بينهم
غالبًا يستخدم UML
الفكرة الأساسية
C4 = Zoom تدريجي
المستوى
ماذا ترى
Context
النظام ككل
Container
أجزاء النظام
Component
داخل كل جزء
Code
تفاصيل الكود
مثال سريع على مشروع (React + Node)
Context →
المستخدم + التطبيق
Container →
React + Node + DB
Component → Controllers / Services
Code →
Classes & Functions
متى تستخدمه؟
تصميم مشروع جديد
شرح مشروع للدكاترة مثلا
مقابلات العمل
توثيق النظام
نصيحتي لك
بما أنك شغال على مشاريع :
ابدأ دائمًا بـ C4 قبل الكود
عشان:
تفهم النظام صح
تقلل الأخطاء
تشتغل كمهندس مش مجرد مبرمج
#خليك_واعي
هو أسلوب لتصميم وشرح الأنظمة البرمجية بطريقة واضحة ومتدرجة.
تم تطويره بواسطة
Simon Brown
والهدف منه:
فهم النظام من الأعلى
(Big Picture)
إلى التفاصيل الدقيقة بشكل منظم.
لماذا نستخدم C4؟
بدل ما ترسم مخطط معقد ومبهم
C4 يعطيك
4 مستويات واضحة:
من “النظام بالكامل”
إلى “الكود نفسه”
مستويات C4 الأربعة
١- System Context Diagram
(الصورة العامة)
هذا أعلى مستوى
يوضح:
من هم المستخدمين (Users)
ما هي الأنظمة الخارجية
كيف يتفاعل النظام معهم
مثال:
المستخدم → يستخدم تطبيقك
التطبيق → يتواصل مع API خارجي
٢- Container Diagram (مكونات النظام)
هنا نبدأ ندخل داخل النظام
يوضح:
Frontend مثال(React)
Backend مثال(Node.js)
Database
APIs
مثال :
React App
Node API
Mongodb
٣- Component Diagram (تفاصيل داخل كل جزء)
هنا ندخل أعمق
يوضح داخل الـ Backend مثلاً:
Controllers
Services
Repositories
يعني كيف الكود مقسّم داخليًا
٤- Code Diagram
(مستوى الكود)
أدق مستوى
يوضح:
Classes
Functions
العلاقات بينهم
غالبًا يستخدم UML
الفكرة الأساسية
C4 = Zoom تدريجي
المستوى
ماذا ترى
Context
النظام ككل
Container
أجزاء النظام
Component
داخل كل جزء
Code
تفاصيل الكود
مثال سريع على مشروع (React + Node)
Context →
المستخدم + التطبيق
Container →
React + Node + DB
Component → Controllers / Services
Code →
Classes & Functions
متى تستخدمه؟
تصميم مشروع جديد
شرح مشروع للدكاترة مثلا
مقابلات العمل
توثيق النظام
نصيحتي لك
بما أنك شغال على مشاريع :
ابدأ دائمًا بـ C4 قبل الكود
عشان:
تفهم النظام صح
تقلل الأخطاء
تشتغل كمهندس مش مجرد مبرمج
#خليك_واعي
❤2
في عالم تطوير التطبيقات والمواقع ، او أي نظام تتعامل معه يوميًا تقريبًا مبني على فكرة اسمها CRUD، وهي اختصار لأربع عمليات أساسية تتحكم في البيانات داخل أي تطبيق.
Create (إنشاء البيانات) POST
مثال واقعي:
عندما تفتح واتساب او تليجرام وترسل رسالة جديدة لصديقك في المحادثة، فأنت هنا تقوم بعملية إنشاء (POST).
وكذلك نفس الشيء في فيسبوك أو إنستجرام او تطبيق عندما تنشر منشور جديد أو صورة.
Read (قراءة البيانات)
GET
مثال واقعي:
عندما تفتح واتساب وتقرأ رسائل المحادثة، أو تتصفح منشورات فيسبوك أو تيليجرام او تقلب ريلزات، فأنت هنا تقوم بعملية GET.
أي أنك تطلب عرض البيانات فقط بدون تغييرها.
Update (تحديث البيانات) PUT / PATCH
مثال واقعي:
عندما تقوم بتعديل رسالة في واتساب (ميزة تعديل الرسائل)، أو تعديل منشور قمت بنشره سابقًا، فأنت هنا تستخدم UPDATE.
PUT
يعني تحديث كامل للبيانات
PATCH
يعني تعديل جزء بسيط فقط
(مثل تصحيح كلمة في رسالة)
Delete (حذف البيانات) DELETE
مثال واقعي:
عندما تحذف رسالة من واتساب عندك أو عند الجميع، أو تحذف منشور قديم من فيسبوك، فأنت تستخدم DELETE.
أي إزالة البيانات بشكل نهائي أو أزالة من العرض بناء على سياسة المشروع نفسه.
الخلاصة:
التطبيقات والمواقع التي تستخدمها وتتصفحها يومياً تقوم بهذه العمليات بالخلفية
مثل واتساب، فيسبوك، تيليجرام، أو أي متجر إلكتروني، يعتمد بالكامل على هذه العمليات الأربع، مهما كان النظام معقد من الخارج كتصميم
بالاول والاخير هذه هي العمليات التي يقوم بها.
#concepts
Create (إنشاء البيانات) POST
مثال واقعي:
عندما تفتح واتساب او تليجرام وترسل رسالة جديدة لصديقك في المحادثة، فأنت هنا تقوم بعملية إنشاء (POST).
وكذلك نفس الشيء في فيسبوك أو إنستجرام او تطبيق عندما تنشر منشور جديد أو صورة.
Read (قراءة البيانات)
GET
مثال واقعي:
عندما تفتح واتساب وتقرأ رسائل المحادثة، أو تتصفح منشورات فيسبوك أو تيليجرام او تقلب ريلزات، فأنت هنا تقوم بعملية GET.
أي أنك تطلب عرض البيانات فقط بدون تغييرها.
Update (تحديث البيانات) PUT / PATCH
مثال واقعي:
عندما تقوم بتعديل رسالة في واتساب (ميزة تعديل الرسائل)، أو تعديل منشور قمت بنشره سابقًا، فأنت هنا تستخدم UPDATE.
PUT
يعني تحديث كامل للبيانات
PATCH
يعني تعديل جزء بسيط فقط
(مثل تصحيح كلمة في رسالة)
Delete (حذف البيانات) DELETE
مثال واقعي:
عندما تحذف رسالة من واتساب عندك أو عند الجميع، أو تحذف منشور قديم من فيسبوك، فأنت تستخدم DELETE.
أي إزالة البيانات بشكل نهائي أو أزالة من العرض بناء على سياسة المشروع نفسه.
الخلاصة:
التطبيقات والمواقع التي تستخدمها وتتصفحها يومياً تقوم بهذه العمليات بالخلفية
مثل واتساب، فيسبوك، تيليجرام، أو أي متجر إلكتروني، يعتمد بالكامل على هذه العمليات الأربع، مهما كان النظام معقد من الخارج كتصميم
بالاول والاخير هذه هي العمليات التي يقوم بها.
#concepts
❤2
{
"design_type": "Modern Groom Wedding Invitation Poster",
"style_and_concept": "A blend of traditional elegance and modern graphic design. The composition highlights the groom using multiple layered portraits with artistic masking and elegant typography on a warm, minimalist background.",
"color_scheme": {
"background": "Warm off-white or cream (#F8F6F0) with very subtle, faded texture elements like faint feathers.",
"typography": "Dark charcoal or black for names, navy blue for main dates, to provide high contrast.",
"art_effects": "Black/dark grey for ink splatters and brush strokes."
},
"visual_elements_and_layout": {
"background_portrait": "A highly transparent, large facial portrait of the groom placed at the top-left corner, acting as a soft background watermark. Use the provided image of the young man with glasses and a beige blazer.",
"primary_portrait": "A large, high-quality half-body portrait of the groom from the provided image, centered and slightly leaning to the left.",
"secondary_portrait": "A smaller, mid-shot portrait of the groom positioned on the middle-right. This portrait must be masked using a rough, artistic grunge/ink-splatter brush effect merging into the background.",
"splatter_effects": "Subtle ink drops and paint splatter elements around the bottom and right edges of the portraits to add dynamic movement."
},
"typography_and_placement": {
"top_header": "Placed top center. Font: Elegant English script/cursive.",
"groom_name_vertical": "Placed vertically along the middle-left edge. Arabic name in a bold, stylized geometric font. English name next to it in a clean sans-serif font with wide letter spacing.",
"event_details_block": "Placed at the bottom right and center. Use a modern, highly legible Arabic sans-serif font. The primary day/date number should be dramatically oversized to act as a graphic element.",
"designer_credit": "Placed vertically at the bottom-left edge in a small, minimalist font."
},
"data_fields_template": {
"top_header_text": "Wedding",
"groom_name_arabic": "l "طارق العمري",
"groom_name_english": "Tareq Al-Omari",
"main_date_number": "2",
"event_1_title": "السمر والمقيل",
"event_1_date": "2026/ 7/1",
"event_1_location": "صالة قصر غمدان",
"event_2_title_and_day": "الزفة : الخميس",
"event_2_date": "2 / 7 / 2026",
"event_2_location": "أمام منزلنا الكائن : إب",
designer_contact": "Tareq Al-Omari"
}
}
"design_type": "Modern Groom Wedding Invitation Poster",
"style_and_concept": "A blend of traditional elegance and modern graphic design. The composition highlights the groom using multiple layered portraits with artistic masking and elegant typography on a warm, minimalist background.",
"color_scheme": {
"background": "Warm off-white or cream (#F8F6F0) with very subtle, faded texture elements like faint feathers.",
"typography": "Dark charcoal or black for names, navy blue for main dates, to provide high contrast.",
"art_effects": "Black/dark grey for ink splatters and brush strokes."
},
"visual_elements_and_layout": {
"background_portrait": "A highly transparent, large facial portrait of the groom placed at the top-left corner, acting as a soft background watermark. Use the provided image of the young man with glasses and a beige blazer.",
"primary_portrait": "A large, high-quality half-body portrait of the groom from the provided image, centered and slightly leaning to the left.",
"secondary_portrait": "A smaller, mid-shot portrait of the groom positioned on the middle-right. This portrait must be masked using a rough, artistic grunge/ink-splatter brush effect merging into the background.",
"splatter_effects": "Subtle ink drops and paint splatter elements around the bottom and right edges of the portraits to add dynamic movement."
},
"typography_and_placement": {
"top_header": "Placed top center. Font: Elegant English script/cursive.",
"groom_name_vertical": "Placed vertically along the middle-left edge. Arabic name in a bold, stylized geometric font. English name next to it in a clean sans-serif font with wide letter spacing.",
"event_details_block": "Placed at the bottom right and center. Use a modern, highly legible Arabic sans-serif font. The primary day/date number should be dramatically oversized to act as a graphic element.",
"designer_credit": "Placed vertically at the bottom-left edge in a small, minimalist font."
},
"data_fields_template": {
"top_header_text": "Wedding",
"groom_name_arabic": "l "طارق العمري",
"groom_name_english": "Tareq Al-Omari",
"main_date_number": "2",
"event_1_title": "السمر والمقيل",
"event_1_date": "2026/ 7/1",
"event_1_location": "صالة قصر غمدان",
"event_2_title_and_day": "الزفة : الخميس",
"event_2_date": "2 / 7 / 2026",
"event_2_location": "أمام منزلنا الكائن : إب",
designer_contact": "Tareq Al-Omari"
}
}
أفضل الممارسات البرمجية في بيئات العمل المؤسسية و الشركات البرمجية
https://docs.google.com/document/d/18V-baAXBpCFMKgU4y0d8xfG8hNUrnyPDQWhXoCMnFUs/edit?usp=sharing
https://docs.google.com/document/d/18V-baAXBpCFMKgU4y0d8xfG8hNUrnyPDQWhXoCMnFUs/edit?usp=sharing
Google Docs
دليل الكود النظيف والمعايير الاحترافية
تقرير هندسي شامل: المعايير القياسية وأفضل الممارسات لكتابة الكود النظيف في بيئات العمل المؤسسية 1. مقدمة في Clean Code يُعد الكود المصدري في هندسة البرمجيات المعاصرة بمثابة لغة تواصل مزدوجة؛ فهو لا يقتصر على كونه مجموعة من التعليمات البرمجية الموجهة للآلة…