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 , وعندما تواجهك أي سؤال يمكنك طرحه هنا .

وعليكم السلام ,
يوجد عدة أمور يمكن من خلالها جعل الفيديو سريع التشغيل , ربما التطبيق يستخدم تقنية تسمى تسريع السرعة (Speed Acceleration)، والتي تزيد من سرعة تشغيل المقاطع بمعدل أسرع من السرعة الأصلية للفيديو. هذا يعني أن الإطارات (frames) تعرض بشكل أسرع، مما يؤدي إلى سرعة عرض أعلى.
أو ربما يقوم التطبيق بإعادة ترميز المقاطع بتنسيق مختلف أو باستخدام تقنيات ضغط أكثر فعالية، مما يقلل من حجم الملفات ويسمح بتشغيلها بسرعة أكبر. ولكن قد يؤدي ذلك أيضاً إلى تأثير على جودة الصورة.
أو ربما يقوم التطبيق باستخدام تقنيات PreLoading , والتي يقوم بتحميل مقاطع الفيديو مسبقاً في الذاكرة مما يجعل يمكن تشغيلها بسلاسة وبسرعة عالية دون تقطيع .
 

مرحباً ,
يوجد عدة أنواع , كل منها يستخدم في مرحلة من مراحل تطوير المنتج , بعضها في مراحل التصميمية , وبعضها في مراحل التطوير والبرمجة , وبعضها في مراحل الصيانة أيضاً , يمكننا تقسيم أنواع الاختبارات إلى الأنواع التالية :
اختبارات الاستخدام الفعلية (Real-World Task Testing): حيث يُطلب من المشاركين إكمال مهام محددة في المنتج وتقديم ملاحظاتهم وتعليقاتهم أثناء العملية. اختبارات التفاعل (Usability Testing): تركز على تقييم مدى سهولة استخدام المنتج وتفاعل المستخدمين مع واجهته. اختبارات التوجيه (Guided Exploration Testing): حيث يُطلب من المشاركين استكشاف مواقع محددة داخل المنتج وتقديم تعليقاتهم وملاحظاتهم. اختبارات التصفح (Navigation Testing): تركز على تقييم سلاسة وسهولة التنقل داخل الموقع أو التطبيق. اختبارات التوافق (Compatibility Testing): تحديد مدى توافق المنتج مع مختلف الأجهزة والمتصفحات والمنصات. اختبارات الأداء (Performance Testing): قياس أداء المنتج فيما يتعلق بسرعة التحميل واستجابة الأداء. اختبارات الاستجابة (Response Testing): تحديد مدى استجابة المستخدمين لمحتوى معين أو ميزة في المنتج. بالنسبة للمنصات العربية المشهورة, يوجد منصة تسمى "أفكار"، هي تقدم خدمات لتصميم وتطوير التطبيقات والمواقع ويمكن أن تشمل خدمات اختبار المستخدم كجزء من هذا العمل. ومن الممكن أيضًا أن تجد منصات عربية متخصصة في اختبارات المستخدم، ولكن قد تكون الخدمات الخاصة بها محدودة مقارنة بالمنصات العالمية المتخصصة في هذا المجال.

بالنسبة لما إذا كان ينصح باستخدام هذه المواقع، فذلك يعتمد على الميزات و الخدمات التي تقدمها تلك المواقع, و على إجراءات الأمان و السلامة التي تحمي بياناتك و بيانات عملائك , وهل يتوفر دعم فني متاح عند الحاجة و هل يقدمون وثائق وموارد تساعدك في استخدام الخدمة بشكل صحيح.
الفرق الرئيسي بين استخدام تلك المواقع واستخدام خدمة ميتا هو المستوى الأعلى من الدعم والمرونة الذي توفره شركة ميتا. إذا كنت تحتاج إلى امتيازات محددة أو دعم مخصص أو تكامل أعمق مع WhatsApp، فسيكون التعامل مع شركة ميتا هو الخيار الأفضل.
و بالنهاية الأمر يعتمد على احتياجاتك فقم بتحديد ماتريد لتستطيع الاختيار .
هذه بعض المواقع التي تقدم الخدمة انظر إلى خدماتها و قارن بينها :
Twilio Nexmo  MessageBird Infobip

هناك عدة خطوات تحتاجها لتجد عمل جيد براتب جيد , أغلب الشركات أو أصحاب المشاريع عبر منصة مستقل أو خمسات أو متجر بيكاليكا , يفضلون شخص لديه خبرة بلغات أو مكاتب معروفة ومستخدمة بين الشركات وفي أغلب المشاريع , بالنسبة لمسار Frontend React Developer :
HTML , CSS , JS React js مكتبة UI مثل Bootstrap , Material UI , TailwindCss with Chakra UI. Redux and Redux toolkit من أجل إداراة الحالة state management . معرفة بمكاتب React الشهيرة مثل prop-types , react-router . معرفة بإيجاد الحلول والتفكير البرمجي والخوارزميات , إضافة لتنظيم الكود وكتابة كود نظيف وبناء بنية نظيفة للمشروع . تحويل من Figma أو Adobe XD الى صفحة برمجية . بناء معرض أعمال . هذه أغلب الميزات المطلوبة حالياً بالنسبة لإختصاص Frontend ٌReact Developer .
طبعاً بإمكانك التقديم على فرص العمل وأنت بمرحلة التطوير وتعلم بعد رقم 3 .

للأسف لا يمكن عمل هندسة عكسية لملفات build واسترجاع ملفات React.js بشكل كامل.
لأن عملية بناء (build) لتطبيق React.js تشمل عدة خطوات لتجميع وتحويل ملفات السورس كود (source files) إلى ملفات قابلة للتشغيل في المتصفح. يشمل ذلك تجميع الملفات، وتحويلها إلى JavaScript مضغوط ومحسّن وتضمين المكتبات والمكونات اللازمة.

أقصد بتحويلها إلى javaScript مضغوطة أي إزالة العديد من التفاصيل الأصلية للتطبيق (مثل أسماء المتغيرات والتعليقات والهيكل الأصلي للملفات). وبالتالي، فإن استرجاع ملفات السورس كود الأصلية بشكل كامل من ملفات البناء يكون أمرًا صعبًا جدًا، إن لم يكن مستحيلاً.