السلام عليكم ورحمة الله وبركاته
أنا محمد بشير الدبري، طالب IT من مدينة هون
أنشأت هذه القناة لتوثيق رحلتي في عالم البرمجة وتطوير الأنظمة، بداية من أولى خطواتي في تصميم المواقع والبرامج والتطبيقات (هاتف-سطح المكتب)
القناة:
ستجدون هنا روابط لمشاريعي البرمجية، سواء كانت تطبيقات بسيطة جدا وغير مفيدا كتيرا أو نماذج أولية قابلة للتطوير.
ستكون بمثابة توثيق لنفسي او تسجيل رحلتي
القناة ليست فقط لأغراض التوثيق الشخصي، بل قد تكون مصدر إلهام أو فائدة لأي شخص يمر بنفس المسار التعليمي أو يرغب في رؤية أمثلة حقيقية لمشاريع من الصفر
أهداف القناة:
الهدف الحالي:
• الاستمرار في دراسة كورسات تطوير الويب وتصميم الواجهات والتدرج حتى بناء مشاريع حقيقية قابلة للاستخدام.
الهدف القريب:
• تطوير “منظومات مبيعات” للمحلات التجارية، تشمل إدارة المنتجات، الفواتير، الأرباح اليومية، وخدمات الزبائن.
الهدف البعيد:
• إنشاء “نظام رقمي متكامل لمستشفى”، بحيث يتمكن المرضى من:
• التشخيص الأولي عبر الموقع.
• التواصل مع الطبيب مباشرة (نصيًا، صوتيًا، أو عبر مكالمة فيديو).
• استقبال العلاج إلكترونيًا أو عبر وصفة مرسلة للصيدلية.
• تنبيه الطوارئ للحالات العاجلة.
• ربط جميع أقسام المستشفى (الإدارة، الصيدلية، الأطباء، المختبرات) ضمن منظومة رقمية واحدة
الرؤية:
أن أكون مطورًا قادِرًا على بناء حلول تقنية واقعية تُحدث فرقًا حقيقيًا في حياة الناس، خاصة في المؤسسات التي تعاني من نقص التحول الرقمي مثل المستشفيات والمرافق الصحية و المصارف والمؤسسات الحكومية
ملاحظات:
• أي مشروع منشور هنا قابل للتطوير أو البيع لاحقًا بإذن الله.
• يمكنك مراسلتي إن كنت مهتمًا بالتعاون أو الاستفادة من أي مشروع
للتواصل @mohamed_aldbre
أنا محمد بشير الدبري، طالب IT من مدينة هون
أنشأت هذه القناة لتوثيق رحلتي في عالم البرمجة وتطوير الأنظمة، بداية من أولى خطواتي في تصميم المواقع والبرامج والتطبيقات (هاتف-سطح المكتب)
القناة:
ستجدون هنا روابط لمشاريعي البرمجية، سواء كانت تطبيقات بسيطة جدا وغير مفيدا كتيرا أو نماذج أولية قابلة للتطوير.
ستكون بمثابة توثيق لنفسي او تسجيل رحلتي
القناة ليست فقط لأغراض التوثيق الشخصي، بل قد تكون مصدر إلهام أو فائدة لأي شخص يمر بنفس المسار التعليمي أو يرغب في رؤية أمثلة حقيقية لمشاريع من الصفر
أهداف القناة:
الهدف الحالي:
• الاستمرار في دراسة كورسات تطوير الويب وتصميم الواجهات والتدرج حتى بناء مشاريع حقيقية قابلة للاستخدام.
الهدف القريب:
• تطوير “منظومات مبيعات” للمحلات التجارية، تشمل إدارة المنتجات، الفواتير، الأرباح اليومية، وخدمات الزبائن.
الهدف البعيد:
• إنشاء “نظام رقمي متكامل لمستشفى”، بحيث يتمكن المرضى من:
• التشخيص الأولي عبر الموقع.
• التواصل مع الطبيب مباشرة (نصيًا، صوتيًا، أو عبر مكالمة فيديو).
• استقبال العلاج إلكترونيًا أو عبر وصفة مرسلة للصيدلية.
• تنبيه الطوارئ للحالات العاجلة.
• ربط جميع أقسام المستشفى (الإدارة، الصيدلية، الأطباء، المختبرات) ضمن منظومة رقمية واحدة
الرؤية:
أن أكون مطورًا قادِرًا على بناء حلول تقنية واقعية تُحدث فرقًا حقيقيًا في حياة الناس، خاصة في المؤسسات التي تعاني من نقص التحول الرقمي مثل المستشفيات والمرافق الصحية و المصارف والمؤسسات الحكومية
ملاحظات:
• أي مشروع منشور هنا قابل للتطوير أو البيع لاحقًا بإذن الله.
• يمكنك مراسلتي إن كنت مهتمًا بالتعاون أو الاستفادة من أي مشروع
للتواصل @mohamed_aldbre
❤1
my first website https://mohammedaldbri.github.io/farst-Project/
❤1
second Project
عبارة عن موقع متعدد الوسائط
*حاول تكبير الموقع لديك بسحب إصبعيك
https://mohammedaldbri.github.io/secondProject/
عبارة عن موقع متعدد الوسائط
*حاول تكبير الموقع لديك بسحب إصبعيك
https://mohammedaldbri.github.io/secondProject/
❤1
Project 4
موقع تعليمي بسيط من تصميمي
يحتوي الموقع على شرح مختصر لأربع لغات برمجة:
• C++
• Java
• HTML
• CSS
يوفر الموقع:
• روابط للتنقل بين المواضيع داخل الصفحة
• روابط خارجية لفيديوهات تعليمية
• فيديو مدمج يشرح ماهي البرمجة مع بوستر
🔧 بنيت هذا الموقع اعتمادًا على فهمي للدروس التالية:
الروابط – إضافة الفيديو – تنسيق النص – الروابط الداخلية – الفيديو مع بوستر وصوت تلقائ
الرابط
https://mohammedaldbri.github.io/project4/
حاول تكبير الموقع الي 150%
موقع تعليمي بسيط من تصميمي
يحتوي الموقع على شرح مختصر لأربع لغات برمجة:
• C++
• Java
• HTML
• CSS
يوفر الموقع:
• روابط للتنقل بين المواضيع داخل الصفحة
• روابط خارجية لفيديوهات تعليمية
• فيديو مدمج يشرح ماهي البرمجة مع بوستر
🔧 بنيت هذا الموقع اعتمادًا على فهمي للدروس التالية:
الروابط – إضافة الفيديو – تنسيق النص – الروابط الداخلية – الفيديو مع بوستر وصوت تلقائ
الرابط
https://mohammedaldbri.github.io/project4/
حاول تكبير الموقع الي 150%
❤1
المشروع الخامس
في هذا المشروع البسيط، أنشأت نموذج "تواصل معنا" يحتوي على:
إدخال الاسم ✍️
إدخال البريد الإلكتروني 📧
إدخال رسالة 📬
زرين: إرسال البيانات أو إعادة تعيينها 🔁
💡 تم تصميم النموذج ليتناسب مع شاشات الهاتف والكمبيوتر باستخدام تنسيقات بسيطة جدًا من داخل نفس الملف بدون استخدام ملفات خارجية.
ملاحظة مهمة:
هذا النموذج لا يرسل البيانات فعليًا، أي شيء تكتبه لا يصلني ولا يتم تخزينه، لأنني لم أتعلم بعد كيف أتعامل مع البيانات أو أربط النموذج بسيرفر أو قاعدة بيانات. سيتم شرح ذلك في الدروس القادمة إن شاء الله.
🧠 الدروس التي استخدمتها لإنشاء المشروع:
استخدام عناصر الإدخال (Input fields) من درس Forms
استخدام textarea لإدخال رسالة متعددة الأسطر
استخدام fieldset وlegend لتنظيم النموذج
استخدام placeholder, required, و autofocus من دروس خصائص العناصر
تنسيقات بسيطة بـ style لتوسيع الحقول بنسبة 100%
معرفتي بكيفية رفع المشروع على GitHub Pages من الكورس
المشروع لا يحتوي ع الوان او تخطيط او اي تصميم من كورس css التي لم ادرسه بعد فقط استخدمت بعض خصائص css عن طريق الذكاء الاصطناعي من أجل تنظيم الواجهة عند فتحه من هاتف النقال بحيت لا تظهر للمستخدم صغيرة جدا وكانه حاسوب
رابط المشروع
https://mohammedaldbri.github.io/project_5/
في هذا المشروع البسيط، أنشأت نموذج "تواصل معنا" يحتوي على:
إدخال الاسم ✍️
إدخال البريد الإلكتروني 📧
إدخال رسالة 📬
زرين: إرسال البيانات أو إعادة تعيينها 🔁
💡 تم تصميم النموذج ليتناسب مع شاشات الهاتف والكمبيوتر باستخدام تنسيقات بسيطة جدًا من داخل نفس الملف بدون استخدام ملفات خارجية.
ملاحظة مهمة:
هذا النموذج لا يرسل البيانات فعليًا، أي شيء تكتبه لا يصلني ولا يتم تخزينه، لأنني لم أتعلم بعد كيف أتعامل مع البيانات أو أربط النموذج بسيرفر أو قاعدة بيانات. سيتم شرح ذلك في الدروس القادمة إن شاء الله.
🧠 الدروس التي استخدمتها لإنشاء المشروع:
استخدام عناصر الإدخال (Input fields) من درس Forms
استخدام textarea لإدخال رسالة متعددة الأسطر
استخدام fieldset وlegend لتنظيم النموذج
استخدام placeholder, required, و autofocus من دروس خصائص العناصر
تنسيقات بسيطة بـ style لتوسيع الحقول بنسبة 100%
معرفتي بكيفية رفع المشروع على GitHub Pages من الكورس
المشروع لا يحتوي ع الوان او تخطيط او اي تصميم من كورس css التي لم ادرسه بعد فقط استخدمت بعض خصائص css عن طريق الذكاء الاصطناعي من أجل تنظيم الواجهة عند فتحه من هاتف النقال بحيت لا تظهر للمستخدم صغيرة جدا وكانه حاسوب
رابط المشروع
https://mohammedaldbri.github.io/project_5/
❤1
المشروع السادس
هذا الموقع الشخصي البسيط هو أول تجربة لي في تصميم واجهات الويب باستخدام HTML و CSS.
يعرض بطاقة تعريفيّة واجهات أمامية، مع روابط تواصل خاصة بي.
يمكنّك الضغط ع الأيقونات الموجودة في رابط لدخول وزيارة حساباتي الشخصية
الهدف من الموقع هو التعرف على أساسيات التصميم، وهي خطوة أولى نحو مشروعي القادم في تطوير المواقع الاحترافية.
رابط المشروع
https://mohammedaldbri.github.io/project6/
هذا الموقع الشخصي البسيط هو أول تجربة لي في تصميم واجهات الويب باستخدام HTML و CSS.
يعرض بطاقة تعريفيّة واجهات أمامية، مع روابط تواصل خاصة بي.
يمكنّك الضغط ع الأيقونات الموجودة في رابط لدخول وزيارة حساباتي الشخصية
الهدف من الموقع هو التعرف على أساسيات التصميم، وهي خطوة أولى نحو مشروعي القادم في تطوير المواقع الاحترافية.
رابط المشروع
https://mohammedaldbri.github.io/project6/
❤1
بسم الله الرحمن الرحيم
—————————————
من الان فصاعدا سوف اكتب محتوي هذا القناة من افكاري الشخصية بدون الاستعانة بالذكاء الاصطناعي، واتخذت هذا القرار لانني اعاني من ضعف التعبير الكتابي وارغب في تطوير مهارتي في الكتابة مثل : ترتيب الجمل ، و وضع الفواصل، واستخدام النقاط ، وتحسين اسلوبي العام .
—————————————-
الزبدة ✨
بدأت في برمجة موقع ويب وهو اول مشروع مفيد قابل للاستخدام في رحلتي في عالم برمجة المواقع ، وايضا وهو اول موقع يطلب مدخلات ويخرج مخرجات ، وهذا من صفات الخوارزميات الجيدة .
ماهو الموقع ؟
الموقع عبارة عن توصيل الطلبات بدون التعامل مع شخص او انسان فقط التعامل الحاسب او الهاتف .
علي ماذا يحتوي الموقع
موقع يحتوي ع زرين كل زر يدخلك ع صفحة مختلفة .
صفحة لطلب مندوب توصيل و ،صفحة للعمل كمندوب توصيل .
في صفحة الأولى يطلب الموقع من المستخدم ادخال بيانات مثل رابط موقع الحالي ، مكان المحل او مطعم ، وماذا تريد من هذا المكان، ورقم الهاتف
سيتم إرساله البيانات الي صفحة الزر الاول يمكن الاطلاع عليه ويمكنك قبولها او تجاهله .
يمكنك تجريب هذا الموقع بنفسك. واعطاء رائك .
رابط الموقع
https://mohammedaldbri.github.io/mohammedAldbri/
—————————————
من الان فصاعدا سوف اكتب محتوي هذا القناة من افكاري الشخصية بدون الاستعانة بالذكاء الاصطناعي، واتخذت هذا القرار لانني اعاني من ضعف التعبير الكتابي وارغب في تطوير مهارتي في الكتابة مثل : ترتيب الجمل ، و وضع الفواصل، واستخدام النقاط ، وتحسين اسلوبي العام .
—————————————-
الزبدة ✨
بدأت في برمجة موقع ويب وهو اول مشروع مفيد قابل للاستخدام في رحلتي في عالم برمجة المواقع ، وايضا وهو اول موقع يطلب مدخلات ويخرج مخرجات ، وهذا من صفات الخوارزميات الجيدة .
ماهو الموقع ؟
الموقع عبارة عن توصيل الطلبات بدون التعامل مع شخص او انسان فقط التعامل الحاسب او الهاتف .
علي ماذا يحتوي الموقع
موقع يحتوي ع زرين كل زر يدخلك ع صفحة مختلفة .
صفحة لطلب مندوب توصيل و ،صفحة للعمل كمندوب توصيل .
في صفحة الأولى يطلب الموقع من المستخدم ادخال بيانات مثل رابط موقع الحالي ، مكان المحل او مطعم ، وماذا تريد من هذا المكان، ورقم الهاتف
سيتم إرساله البيانات الي صفحة الزر الاول يمكن الاطلاع عليه ويمكنك قبولها او تجاهله .
يمكنك تجريب هذا الموقع بنفسك. واعطاء رائك .
رابط الموقع
https://mohammedaldbri.github.io/mohammedAldbri/
أعطيت الذكاء الاصطناعي أكواد مشروعي وطلبت منها ان يظهر العيوب في مشروعي وكان هذا الرد
يبدو ان لدينا الكتير من العمل 👨💻
———————————————————
. لا يوجد Backend (خادم)
• جميع البيانات تُخزن في المتصفح فقط (localStorage)، وهذا يعني أن:
• كل مستخدم لديه قاعدة بيانات مستقلة لا تتواصل مع غيره.
• لا توجد طريقة حقيقية لتبادل الطلبات بين طالب المندوب والمندوب نفسه في بيئة حقيقية.
• تفقد الطلبات عند مسح التخزين أو فتح الموقع من جهاز آخر.
⸻
🔹 2. لا توجد آلية تحقق من الهوية أو التحقق من صحة البيانات
• أي شخص يقدر:
• يدخل أي اسم أو رقم هاتف وهمي.
• يرسل أو يستلم طلب بدون أي تحقق من صحته.
• “يسرق” أو “يحذف” طلبات ليست له.
⸻
🔹 3. عدم وجود حماية أو صلاحيات
• المندوب يمكنه تعديل الطلبات أو حذفها أو استلام أكثر من طلب بدون أي قيد.
• المستخدم أيضًا يمكنه إعادة إرسال نفس الطلب أو إرسال طلبات مزعجة أو فارغة.
• ما فيش تمييز حقيقي بين من هو “مندوب” ومن هو “طالب توصيل”
🔹 4. قابلية التلاعب بالبيانات
• أي شخص يفتح أدوات المطور (Developer Tools) في المتصفح يقدر:
• يشوف كل الطلبات.
• يعدل على الطلبات يدويًا.
• يحذف أو يضيف طلبات مزيفة.
⸻
🔹 5. صعوبة في التوسع والتحكم
• عند زيادة عدد الطلبات، سيصبح من الصعب إدارتها بـ localStorage فقط.
• لا يوجد تصنيف واضح للطلبات حسب الزمن أو الحالة.
• لا يوجد سجل دائم للطلبات التي تم تنفيذها سابقًا، فقط المخزنة حاليًا.
⸻
🔹 6. التصميم محدود بالوظائف البسيطة
• الموقع يعتمد كليًا على صفحات HTML ثابتة، مما:
• يحد من التفاعلات المعقدة.
• يجعل التجربة محدودة وغير احترافية في مظهرها وسلوكها.
• يُظهر البيانات كلها في الصفحة بغض النظر عن المستخدم أو السياق.
⸻
🔹 7. عدم وجود إشعارات أو تواصل حقيقي
• لا يوجد تنبيه حقيقي لصاحب الطلب إذا تم أخذ الطلب.
• ولا يوجد وسيلة مباشرة للتواصل بين المندوب وطالب الخدمة.
⸻
🔹 8. البيانات غير مشفرة أو آمنة
• كل البيانات (الاسم، الرقم، الطلب…) تكون مخزنة بشكل مكشوف تمامًا في localStorage.
• أي شخص لديه وصول للجهاز يستطيع قراءتها وتعديلها
يبدو ان لدينا الكتير من العمل 👨💻
———————————————————
. لا يوجد Backend (خادم)
• جميع البيانات تُخزن في المتصفح فقط (localStorage)، وهذا يعني أن:
• كل مستخدم لديه قاعدة بيانات مستقلة لا تتواصل مع غيره.
• لا توجد طريقة حقيقية لتبادل الطلبات بين طالب المندوب والمندوب نفسه في بيئة حقيقية.
• تفقد الطلبات عند مسح التخزين أو فتح الموقع من جهاز آخر.
⸻
🔹 2. لا توجد آلية تحقق من الهوية أو التحقق من صحة البيانات
• أي شخص يقدر:
• يدخل أي اسم أو رقم هاتف وهمي.
• يرسل أو يستلم طلب بدون أي تحقق من صحته.
• “يسرق” أو “يحذف” طلبات ليست له.
⸻
🔹 3. عدم وجود حماية أو صلاحيات
• المندوب يمكنه تعديل الطلبات أو حذفها أو استلام أكثر من طلب بدون أي قيد.
• المستخدم أيضًا يمكنه إعادة إرسال نفس الطلب أو إرسال طلبات مزعجة أو فارغة.
• ما فيش تمييز حقيقي بين من هو “مندوب” ومن هو “طالب توصيل”
🔹 4. قابلية التلاعب بالبيانات
• أي شخص يفتح أدوات المطور (Developer Tools) في المتصفح يقدر:
• يشوف كل الطلبات.
• يعدل على الطلبات يدويًا.
• يحذف أو يضيف طلبات مزيفة.
⸻
🔹 5. صعوبة في التوسع والتحكم
• عند زيادة عدد الطلبات، سيصبح من الصعب إدارتها بـ localStorage فقط.
• لا يوجد تصنيف واضح للطلبات حسب الزمن أو الحالة.
• لا يوجد سجل دائم للطلبات التي تم تنفيذها سابقًا، فقط المخزنة حاليًا.
⸻
🔹 6. التصميم محدود بالوظائف البسيطة
• الموقع يعتمد كليًا على صفحات HTML ثابتة، مما:
• يحد من التفاعلات المعقدة.
• يجعل التجربة محدودة وغير احترافية في مظهرها وسلوكها.
• يُظهر البيانات كلها في الصفحة بغض النظر عن المستخدم أو السياق.
⸻
🔹 7. عدم وجود إشعارات أو تواصل حقيقي
• لا يوجد تنبيه حقيقي لصاحب الطلب إذا تم أخذ الطلب.
• ولا يوجد وسيلة مباشرة للتواصل بين المندوب وطالب الخدمة.
⸻
🔹 8. البيانات غير مشفرة أو آمنة
• كل البيانات (الاسم، الرقم، الطلب…) تكون مخزنة بشكل مكشوف تمامًا في localStorage.
• أي شخص لديه وصول للجهاز يستطيع قراءتها وتعديلها
❤1