-
المساهمات
51 -
تاريخ الانضمام
-
تاريخ آخر زيارة
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
أجوبة بواسطة Ahmed Malek
-
-
بتاريخ 4 دقائق مضت قال Hikmat Jaafer:
وعليكم السلام , أهلاً أحمد
جيد جداً , هل يمكنك إرفاق الكود لديك بعد إجراء التعديلات ؟ ويمكنك إرفاقه كالتالي ( لكي يصبح حجم الملف المضغوط صغير ) :
- أولاً قم بتحديد المجلدات واستثناء مجلد node_modules .
- بعد ذلك يمكنك ضغط المجلد باستخدام اي برنامج ضغط , كما قمت من قبل .
أو يمكنك رفع الكود على مستودع GitLab أو GitHub ومشاركته معنا باستخدام رابط المشاركة .
هذه هى ملفات المشروع ارجو حل الخطأ وفحص الاخطاء الاخرى (نظره عامة) لأننى فعلت كل ما بوسعى وظل به اخطاء مثل
1- خطأ المنتجات لاتظهر فى العربة
2- خطأ اضافة التقييمات لا يستجيب ولا يضيف تقييم المستخدم
بتاريخ 28 دقائق مضت قال Hikmat Jaafer:وعليكم السلام , أهلاً أحمد
جيد جداً , هل يمكنك إرفاق الكود لديك بعد إجراء التعديلات ؟ ويمكنك إرفاقه كالتالي ( لكي يصبح حجم الملف المضغوط صغير ) :
- أولاً قم بتحديد المجلدات واستثناء مجلد node_modules .
- بعد ذلك يمكنك ضغط المجلد باستخدام اي برنامج ضغط , كما قمت من قبل .
أو يمكنك رفع الكود على مستودع GitLab أو GitHub ومشاركته معنا باستخدام رابط المشاركة .
هل مازلت موجود أخى العزيز؟
- 1
-
بتاريخ 18 ساعة قال Hikmat Jaafer:
مرحباً أحمد ,
من الجيد أنك تقوم ببناء موقع متجر إلكتروني والمتابعة في البحث عن الاخطاء والحلول , لكن نحن نريد نقوم بكسبك الخبرة اللازمة للدخول في سوق العمل إن كان في الشركات أو من خلال العمل freelancer , لذلك من الأفضل أن تجد الأخطاء وتقوم بطرحها واحد تلو الأخر ( أو كل مجموعة أخطاء ) بعد محاولتك في حلها , وسوف يقوم فريق المدربين أو أحد الأعضاء بالإجابة عليك والمساعدة قدر الإمكان لكسبك الخبرة اللازمة .
قمت بالإطلاع على الكود لديك , وواجهة أول مشكلة في الدخول الى صفحة المنتج , ما لاحظته أنك تقوم ببناء الموقع وفق بنية جيدة جداً وبتقسيم الكود إلى عدة أجزاء و Components وهذا مرغوب جداً لدى الشركات وأصحاب العمل وفي عالم البرمجة ككل , لكن يوجد بعض الأخطاء يجب عليك معرفة كيف تقوم باكتشافها وحلها , فمعرفة كيف كشف هذه الأخطاء مهم جداً لدى شركات البرمجة وأصحاب المشاريع , سوف أقوم بتوضيح أول ما واجهته في صفحة المنتجات :
- أولاً , يمكنك فتح inspect في المتصفح ورؤية ما يسمى ب console , وفيها يتم عرض جميع الأخطاء التي تحصل في الموقع , ويمكنك أيضاً طباعة متغيرات في الكود لديك ورؤيتها قبل حدوث أي خطأ .
- عندما نقوم بفتح inspect , يوجد عدة أخطاء , بعضها في التصميم وبعضها في backend , سوف نبدأ بأخطاء خاصة ب frontend .
-
إذا قمنا بعمل scroll في inspect سوف نشاهد الخطاً التالي
Uncaught TypeError: oneProducts is undefined
هذا الخطأ يشير إلى أن المتغير oneProducts غير معرف , أي أنك تقوم باستخدامه وهو غير معرف بعد أو قيمته undefined , وهذه الحالة تحصل عندما يقوم المبرمج باستخدام متغير ولم يقم بتعريفه , أو أنه يتوقع أن متغيراً ما سوف يكون به قيمة ( مثلاً سوف ترجع هذه القيمة من api من قاعدة البيانات ) ولكنه لم يعالج في حال لم يوجد به قيمة , وهذا ما حصل معك بالفعل -
لنفترض أنك لا تعلم أين هذا المتغير قمت بتعريفه وأين يحصل وتريد معرفة مكان تعريف هذا المتغير , سوف تجد أسفل الخطأ رقم السطر واسم الملف الذي حدث به الخطأ ( أو إن لم تظهر هذه المعلومات مباشرةً , قم بالضغط على السهم في بداية الخطأ وسوف يفتح مجموعة أسطر في اسفل الخطأ , يمكنك الوصول إلي الخطأ من خلال أول سطر , وهذا يتم في أغلب الأخطاء وليس جميعها ) , وفي مثالنا سوف تجد هذه السطر كما الصورة المرفقة
لاحظ أن الخطأ يحصل في ملف view-products-details-hook.js , ضمن component يسمى ViewProductsDetailsHook , في السطر رقم 26 ( رقم السطر مرتبط في نسخة تشغيل المشروع وليس كود المشروع , أي ربما ستجد بعض الاختلاف في رقم السطر , ويمكنك مشاهدته في inspect من خلال الضغط عليه , لكن لن تتمكن من تعديله هنا , سوف يتوجب عليك تعديله في الكود ) . - عند الذهاب إلى هذا الملف , سوف نجد الكود التالي :
const oneProducts = useSelector((state) => state.allproducts.oneProduct) const oneCategory = useSelector((state) => state.allCategory.oneCategory) const oneBrand = useSelector((state) => state.allBrand.oneBrand) const productLike = useSelector((state) => state.allproducts.productLike) //to show products item let item = []; if (oneProducts.data)
- لاحظ أنك تقوم باستخدام حقل data من oneProducts مباشرةً من غير أن قوم بالفحص من وجود oneProducts ( أي أن قيمتها موجودة ولا ومعرفة ) , لذلك سوف نقوم بإضافة هذا التحقق لكي تعمل الصفحة حتى ولو كان لم يرجع api بيانات لأي سبب كان , ويمكنك تعديل الكود ليصبح كالتالي :
const oneProducts = useSelector((state) => state.allproducts.oneProduct) const oneCategory = useSelector((state) => state.allCategory.oneCategory) const oneBrand = useSelector((state) => state.allBrand.oneBrand) const productLike = useSelector((state) => state.allproducts.productLike) //to show products item let item = []; if (oneProducts?.data) item = oneProducts.data; else item = [] useEffect(() => { if (item?.category) dispatch(getOneCategory(item.category)) if (item?.brand) dispatch(getOneBrand(item.brand)) if (item?.category) dispatch(getProductLike(item.category)) }, [item])
لاحظ أنني قمت بإضافة بإضافة إشارة الاستفهام بعد oneProducts و item , والتي تعني : أنه في حال كان المتغير oneProducts معرف , فقم بالوصول إلى الحقل data , وفي حال كان oneProducts.data موجود , فقم بالتالية :
item = oneProducts.data;
ويتم التحقق من item بنفس الطريقة. بعد تطبيق هذا التحقق لن يظهر الخطاً الخاص ب oneProducts , لكن سوف تجد أخطاء أخرى تتعلق ب oneCategory وغيرها , أغلبها نفس الخطأ , قم بإصلاح الأخطاء وتابع inspect , وعندما تواجهك أي سؤال يمكنك طرحه هنا .
أخى العزيز السلام عليكم لقد اتبعت خطواتك وحللت بعض المشاكل وبالفعل العربة فتحت ولكنها لا تعرض المنتج ما المشكله
- 1
-
بتاريخ 16 ساعة قال Hikmat Jaafer:
مرحباً أحمد ,
من الجيد أنك تقوم ببناء موقع متجر إلكتروني والمتابعة في البحث عن الاخطاء والحلول , لكن نحن نريد نقوم بكسبك الخبرة اللازمة للدخول في سوق العمل إن كان في الشركات أو من خلال العمل freelancer , لذلك من الأفضل أن تجد الأخطاء وتقوم بطرحها واحد تلو الأخر ( أو كل مجموعة أخطاء ) بعد محاولتك في حلها , وسوف يقوم فريق المدربين أو أحد الأعضاء بالإجابة عليك والمساعدة قدر الإمكان لكسبك الخبرة اللازمة .
قمت بالإطلاع على الكود لديك , وواجهة أول مشكلة في الدخول الى صفحة المنتج , ما لاحظته أنك تقوم ببناء الموقع وفق بنية جيدة جداً وبتقسيم الكود إلى عدة أجزاء و Components وهذا مرغوب جداً لدى الشركات وأصحاب العمل وفي عالم البرمجة ككل , لكن يوجد بعض الأخطاء يجب عليك معرفة كيف تقوم باكتشافها وحلها , فمعرفة كيف كشف هذه الأخطاء مهم جداً لدى شركات البرمجة وأصحاب المشاريع , سوف أقوم بتوضيح أول ما واجهته في صفحة المنتجات :
- أولاً , يمكنك فتح inspect في المتصفح ورؤية ما يسمى ب console , وفيها يتم عرض جميع الأخطاء التي تحصل في الموقع , ويمكنك أيضاً طباعة متغيرات في الكود لديك ورؤيتها قبل حدوث أي خطأ .
- عندما نقوم بفتح inspect , يوجد عدة أخطاء , بعضها في التصميم وبعضها في backend , سوف نبدأ بأخطاء خاصة ب frontend .
-
إذا قمنا بعمل scroll في inspect سوف نشاهد الخطاً التالي
Uncaught TypeError: oneProducts is undefined
هذا الخطأ يشير إلى أن المتغير oneProducts غير معرف , أي أنك تقوم باستخدامه وهو غير معرف بعد أو قيمته undefined , وهذه الحالة تحصل عندما يقوم المبرمج باستخدام متغير ولم يقم بتعريفه , أو أنه يتوقع أن متغيراً ما سوف يكون به قيمة ( مثلاً سوف ترجع هذه القيمة من api من قاعدة البيانات ) ولكنه لم يعالج في حال لم يوجد به قيمة , وهذا ما حصل معك بالفعل -
لنفترض أنك لا تعلم أين هذا المتغير قمت بتعريفه وأين يحصل وتريد معرفة مكان تعريف هذا المتغير , سوف تجد أسفل الخطأ رقم السطر واسم الملف الذي حدث به الخطأ ( أو إن لم تظهر هذه المعلومات مباشرةً , قم بالضغط على السهم في بداية الخطأ وسوف يفتح مجموعة أسطر في اسفل الخطأ , يمكنك الوصول إلي الخطأ من خلال أول سطر , وهذا يتم في أغلب الأخطاء وليس جميعها ) , وفي مثالنا سوف تجد هذه السطر كما الصورة المرفقة
لاحظ أن الخطأ يحصل في ملف view-products-details-hook.js , ضمن component يسمى ViewProductsDetailsHook , في السطر رقم 26 ( رقم السطر مرتبط في نسخة تشغيل المشروع وليس كود المشروع , أي ربما ستجد بعض الاختلاف في رقم السطر , ويمكنك مشاهدته في inspect من خلال الضغط عليه , لكن لن تتمكن من تعديله هنا , سوف يتوجب عليك تعديله في الكود ) . - عند الذهاب إلى هذا الملف , سوف نجد الكود التالي :
const oneProducts = useSelector((state) => state.allproducts.oneProduct) const oneCategory = useSelector((state) => state.allCategory.oneCategory) const oneBrand = useSelector((state) => state.allBrand.oneBrand) const productLike = useSelector((state) => state.allproducts.productLike) //to show products item let item = []; if (oneProducts.data)
- لاحظ أنك تقوم باستخدام حقل data من oneProducts مباشرةً من غير أن قوم بالفحص من وجود oneProducts ( أي أن قيمتها موجودة ولا ومعرفة ) , لذلك سوف نقوم بإضافة هذا التحقق لكي تعمل الصفحة حتى ولو كان لم يرجع api بيانات لأي سبب كان , ويمكنك تعديل الكود ليصبح كالتالي :
const oneProducts = useSelector((state) => state.allproducts.oneProduct) const oneCategory = useSelector((state) => state.allCategory.oneCategory) const oneBrand = useSelector((state) => state.allBrand.oneBrand) const productLike = useSelector((state) => state.allproducts.productLike) //to show products item let item = []; if (oneProducts?.data) item = oneProducts.data; else item = [] useEffect(() => { if (item?.category) dispatch(getOneCategory(item.category)) if (item?.brand) dispatch(getOneBrand(item.brand)) if (item?.category) dispatch(getProductLike(item.category)) }, [item])
لاحظ أنني قمت بإضافة بإضافة إشارة الاستفهام بعد oneProducts و item , والتي تعني : أنه في حال كان المتغير oneProducts معرف , فقم بالوصول إلى الحقل data , وفي حال كان oneProducts.data موجود , فقم بالتالية :
item = oneProducts.data;
ويتم التحقق من item بنفس الطريقة. بعد تطبيق هذا التحقق لن يظهر الخطاً الخاص ب oneProducts , لكن سوف تجد أخطاء أخرى تتعلق ب oneCategory وغيرها , أغلبها نفس الخطأ , قم بإصلاح الأخطاء وتابع inspect , وعندما تواجهك أي سؤال يمكنك طرحه هنا .
شكرا جزيلا على هذا الرد المفصل والشرح الوافى
-
أعمل على مشروع متجر الكترونى ولكن به بعض الأخطاء التى لا افهمها.
على سبيل المثال العربة لا تعرض المنتجات التى بداخلها عدما اضغط عليها تأتى صفحة بيضاء
خانة التقييمات اسفل المنتج لا تعمل ولا تستجيب عند وضع تقييم من احد العملاء مثلا
أريد فضلا منكم أرجوكم فحص كامل للكود والاشارة الى الاخطاء الاخرى التى وقعت بها Back-end.rarFront-end.rar
- 1
-
بتاريخ 25 دقائق مضت قال ياسر مسكين:
أرجو إرفاق سؤالك تحت خانة الدرس في قسم التعليقات أسفل فيديو كل دورة أين واجهت المشكلة.
بالنسبة للمشروع الخاص بك والأخطاء التي واجهتك فأول خطأ كان بعد تشغيل المشروع هو:
Uncaught SyntaxError: Unexpected token '<'
في ملف index.js في مجلد public وكان السبب وراء المشكلة هو أن عنصر النص الذي تم وضعه في العلامة <script>:
<script crossorigin src="../src/index.js"></script>
لهذا يجب أن يتم تضمين ملف JavaScript المجمع (مثل bundle.js) في ملف HTML بدلا من محاولة تضمين ملف index.js مباشرة. يمكن أن نستخدم عنصر script لتضمين الملف المجمع بدلا من ذلك، والتأكد من توجيه المسار بشكل صحيح إلى الملف المجمّع.
بالنسبة للخطأ الثاني المشكلة تكمن في استخدام الخاصية class بدلا من className في العنصر <span> الذي يحمل العدد الموجود في العربة:
<span class="position-absolute top-10 start-0 translate-middle badge rounded-pill bg-danger"> {itemsNum || 0} </span>
يجب أن يكون بهذا الشكل:
<span className="position-absolute top-10 start-0 translate-middle badge rounded-pill bg-danger"> {itemsNum || 0} </span>
حيث يتم استخدام className بدلا من class لتجنب الأخطاء المحتملة وتحقيق التوافق مع قواعد React.
في حالة كان سؤالك متعلقا بأحد الفيديوهات في الدورة، أتمنى التعليق بالمشكلة التي واجهتك أسفل الفيديو كي يتمكن المدربون من مساعدتك بشكل أفضل.
أخى العزيز شكرا لاهتمامك ولكن طلب اخير ممكن توضيح اماكن الاخطاء بالضبط برقم السطر والحل الصحيح؟
بتاريخ 39 دقائق مضت قال ياسر مسكين:أرجو إرفاق سؤالك تحت خانة الدرس في قسم التعليقات أسفل فيديو كل دورة أين واجهت المشكلة.
بالنسبة للمشروع الخاص بك والأخطاء التي واجهتك فأول خطأ كان بعد تشغيل المشروع هو:
Uncaught SyntaxError: Unexpected token '<'
في ملف index.js في مجلد public وكان السبب وراء المشكلة هو أن عنصر النص الذي تم وضعه في العلامة <script>:
<script crossorigin src="../src/index.js"></script>
لهذا يجب أن يتم تضمين ملف JavaScript المجمع (مثل bundle.js) في ملف HTML بدلا من محاولة تضمين ملف index.js مباشرة. يمكن أن نستخدم عنصر script لتضمين الملف المجمع بدلا من ذلك، والتأكد من توجيه المسار بشكل صحيح إلى الملف المجمّع.
بالنسبة للخطأ الثاني المشكلة تكمن في استخدام الخاصية class بدلا من className في العنصر <span> الذي يحمل العدد الموجود في العربة:
<span class="position-absolute top-10 start-0 translate-middle badge rounded-pill bg-danger"> {itemsNum || 0} </span>
يجب أن يكون بهذا الشكل:
<span className="position-absolute top-10 start-0 translate-middle badge rounded-pill bg-danger"> {itemsNum || 0} </span>
حيث يتم استخدام className بدلا من class لتجنب الأخطاء المحتملة وتحقيق التوافق مع قواعد React.
في حالة كان سؤالك متعلقا بأحد الفيديوهات في الدورة، أتمنى التعليق بالمشكلة التي واجهتك أسفل الفيديو كي يتمكن المدربون من مساعدتك بشكل أفضل.
لقد اصلحت الخاصية className ولكن المشكله مازلت قائمة ولم تحل + انى لم افهم حل المشكله الاولى التى اشرت لها + مشكلة التقيمات فى الموقع ما زالت لا تستجيب ... أشكر مجهودك لمساعدتى جدااا
-
اعمل على مشروع متجر الكترونى ب node.js واوجه اخطاءا كثيره منها انه عندما اعرض محتويات عربة التسوق لا تظهر وتظهر بدلا عن ذلك صفحة بيضاء
وخطأ اخر عند اضافة تقييم لمنتج ما لا يضاف ولا يستجيب
اشعر بالتشتت والاحباطهل من الممكن حل ونظره عامه على المشروع من المدرب ويقول لى الاخطاء الاخرى التى وقعت بها ؟ ارجوكم
- 1
-
بتاريخ 6 ساعة قال محمد_عاطف:
الخطأ لديك فى هذا الملف src\hook\cart\add-to-cart-hook.js فى مشروع الواجهة الامامية . فى سطر رقم 25 .
if (item.availableColors.length >= 1)
هنا انت تقوم بالتحقق من طول ال availableColors و هى ليست موجودة فى المتغير item لذلك يحدت الخطأ حيث لا يمكن استدعاء الخاصية length على undifined .
والحل هو التحقق اولا من وجود ال availableColors هكذا .
if (item.availableColors?.length >= 1)
حيث ان علامة ال ? تتحقق اولا من ان القيمة ليست null او undefined قبل تنفيذ ما بعدها وهكذا تكون قد حلت المشكلة .
و قد لاحظت ان معظم الاخطاء من هذا النوع حيث لا يقوم السيرفر الخلفى بارجاع البيانات التى تستخدمها فى الواجهة الامامية لذلك يجب عليك اولا التحقق من البيانات التى تعود لك من السيرفر قبل العمل عليها.
تم الحل ولكن ظهرت مشكله اخرى والان احس بالتشتت عندما افتح عربة التسوق تظهر صفحة بيضاء ولا تظهر تفاصيلها
-
عند الضغط على اضف المنتج للسله لا يضاف ولا يستجيب
- 1
-
بتاريخ 44 دقائق مضت قال محمد_عاطف:
الخطأ لديك فى ملف src\hook\products\view-products-detalis-hook.js فى مشروع الواجهة الامامية .
فى سطر 27 و 31 . لاحظ انك تقوم باستدعاء ال api الخاص باحضار التصنيفات (category) وهذا ال api يتطلب ان ترسل ال id الخاص بال category ولكن انت تقوم بارسال item.category وهو object يحتوى فقط على اسماء ال categories لهذا يحدث هذا الخطأ لذلك يجب حذف هذه الاسطر او تمرير لها ال id الخاص بال category ولكن سيتعين عليك تعديل السيرفر الخاص بالواجهة الخلفية لارسال ال id الخاص بال category و لكن الان الحل هو حذف هذه الاسطر هكذا.
useEffect(() => { // if (item.category) // dispatch(getOneCategory(item.category)) if (item.brand) dispatch(getOneBrand(item.brand)) // if (item.category) // dispatch(getProductLike(item.category)) }, [item])
شكرا جدا جدا جدا على المعلومة ولكن عندى سؤال اخر. المنتج لا يضاف الى عربة التسوق. لماذا؟
- 1
-
هذه مشروع أتدرب عليه بنفسى بعد اتمام اتمام دورة الجافا سكريبت.
وهو عبارة عند انشاء متجر الكترونى
عندنا ادخل الى اى منتج من المنتجين الموجودين فى الموقع يعطينى صفحة بيضاء لا أعلم ما الخطأ ارجو المساعدة
- 1
-
بتاريخ 11 ساعات قال عبود سمير:
إن الدروس 17 كافية لتعلم الأساسيات التي تحتاجها في تعلمك لمجال تطوير الواجهات الأمامية، الهدف من الدورة ليس إحترافك للغة جافاسكربت في حد ذاتها و إنما الدخول في مجال تطوير الواجهات الأمامية و إستخدام التقنيات و اللغات الأساسية في تطوير الويب مع بعضها في مشاريع حقيقية و فعلية و هذا ما يُميز دورات أكاديمية حسوب عن بعضها: الجانب التطبيقي و الجانب التوجيهي هو أكثر شيء مفيد لك في أكاديمية حسوب. ليس الهدف من الدورات هو شرح كل الخاصيات الموجودة في لغة ما و إنما الهدف هو شرح المفاهيم الأساسية التي ستحتاج لها في مجال الدورة و في مُعظم المشاريع أي المفاهيم الأساسية و هذا الجزء سيتم شرحه في مسار الأساسيات و مفاهيم أخرى ستتعلمها في الجانب التطبيقي. ليست الدورة هي من ستُعلمك كل شيء الأكيد أنها ستكون جزء من تعلمك و دافع و حافز لك، لكن الجزء الأكبر الذي سيزيد من مستواك و يُطورك هو أنت، حبك للمجال، إرادتك و شغفك في التعلم.
نصيحة ستفيدك في طريقك: أي شيء يمر عليك و لا تعرفه أو تجد فيه لُبس ما إبحث عنه و أقرأ عنه، إجعل مُحرك البحث صديقك الدائم، بالتوفيق.
بتاريخ 12 ساعات قال محمد أبو عواد:سوف يتم شرح أساسيات لغة جافاسكربت مثل المتغيرات والمعاملات وطباعة البيانات وجمل التحكم وحلقات التكرار وغيرها من المواضيع المهمة وأيضا سوف يتم شرح شجرة دوم -DOM- وكيفية الوصول لعناصر HTML , وأساسيات JQUERY أيضا , كل هذه الأشياء كافية للتعامل مع تصميم صفحات الانترنت ولن تحتاج لدورات خارجية , ولكن تحتاج للممارسة وتطبيق ما تعلمته في تصميم الصفحات , وأيضا ال 17 درس ليس هي وحدها , سوف يتم شرح المزيد خلال المسارات الأخرى من نفس الدورة وسوف يتم التعرف على الكثير من المكتبات والتقنيات أثناء الدورة مما يجعلك مؤهلا بشكل كافي لتصميم مواقع الانترنت ولكن ما تحتاجه هو الممارسة لاكتساب الخبرة
شكر لكما
-
فى دورة تطوير واجهات المستخدم الجزء الخاص باساسيات java script حوالى 17 فيديو اراهم عدد قليل على اتقان لغة مثل ال java script فهل سأكون محتاج الى اتلقى دورات اخرى ؟؟
- 1
استفسار لحل بعض الأخطاء
في أسئلة البرمجة
نشر
شكرا على سعة صدرك