Adnane Kadri

زيادة على ما اشار اليه المدربون في التعليقات السابقة، بالنسبة لعلوم البيانات، يمكن البدء بتعلم الأساسيات في الإحصاء والرياضيات والبرمجة، ومن ثم التركيز على تعلم لغات البرمجة المشهورة في هذا المجال مثل Python و R. يمكن الحصول على العديد من الدورات المجانية والمدفوعة على الإنترنت لتعلم هذه المهارات، كما يمكن الحصول على شهادات معتمدة في هذا المجال مثل شهادة Certified Data Scientist من معهد SAS. بالنسبة للذكاء الاصطناعي، يمكن البدء بتعلم الرياضيات المتقدمة والبرمجة، ومن ثم التركيز على تعلم تقنيات الذكاء الاصطناعي مثل التعلم العميق والتعلم الآلي ومعالجة اللغات الطبيعية والتعلم التعاوني والشبكات العصبية الاصطناعية والتعلم المعزز وما الى ذلك. يمكن الحصول على العديد من الدورات المجانية والمدفوعة على الإنترنت لتعلم هذه المهارات، كما يمكن الحصول على شهادات معتمدة في هذا المجال مثل شهادة TensorFlow Developer من شركة Google او غيرها.

تقييم الألعاب والعناصر بشكل عام جيد الى ممتاز، وأهنئك على قيامك بمثل هاته الخطوات فهي ما ستعزز فهمك لجافاسكربت على نحو أدق .. هذا بجانب ان طريقتك في كتابة الاكواد واعتمادك البرمجة كائنية التوجه في التعامل مع الاجسام والكائنات تشير الى اهتمامك بتنظيم الشيفرة وتنظيفها وهو الأمر الآخر الذي يحسب لك، فالشيفرة تستوفي الكثير من معايير الشيفرة النظيفة والكثير من معايير جودة البرمجيات مثل قابلية التوسع والصيانة وما الى ذلك. سيجعل هذا من الممكن التوسع في الألعاب اكثر عن طريق استحداث ميزات أخرى دون الاخلال بتلك الموجودة، مثل اضافة مؤثرات صوتية كاصوات الثعابين او الرصاص والتحذيرات المختلفة، بجانب التحكم في جزئيات من اللعبة مثل مستوى اللعبة وما الى ذلك (في لعبة الثعبان مثلا يترجم ذلك الى سرعة الثعبان). بعض الملاحظات البسيطة: بخصوص shooting stars، لما يظهر الجزء الأسفل اليمين فارغا. عند اعادة تحجيم الشاشة وعمل resize في لعبة الثعبان، يختفي الثعبان، تأكد من اعادة تحجيم canvas اعتبارا لهذا التحجيم.

زيادة على ما أشار اليه المدربون، ففي React لا يمكن تغيير قيمة state مباشرةً بدون استخدام دالة setState. في الكود الذي قمت بمشاركته، تم استخدام الدالة useState لإنشاء حالة todos والتي يتم تعيينها مرة واحدة فقط عند تحميل الصفحة. ثم تم استخدام if و else if لتصفية todos باستخدام دالة filter، ولكن هذا لن يغير قيمة todos في state. كفكرة، يمكنك إنشاء حالة جديدة مثل filteredTodos باستخدام useState وتخزين القيم المصفاة فيها، ومن ثم تحديث filteredTodos باستخدام setFilteredTodos عند تغيير قيمة showTodo. يمكنك تمرير filteredTodos كـ props إلى مكونات أخرى للعرض. سيحل هذا المشكلة لديك، هذا بجانب ان مثل هذا السياق: todos = todos.filter(todo => !todo.status) console.log(todos); قد يؤدي الى بعض المشاكل الغير متوقعة، قم بتصريح متغير آخر وليكن filteredTodos ليكون: let filteredTodos = todos.filter(todo => !todo.status) console.log(filteredTodos); ثم ان شئت حقن هاته القيمة كقيمة todos يمكنك استعمال setTodos لذلك، setTodos(filteredTodos) فتكون القيم المصفاة هي القيم المعروضة،

تشير رسالة الخطأ إلى أنك تستخدم إصدار Babel 6.26.3 ، ولكن حزمة "@babel/preset-env" تتطلب إصدار Babel "^ 7.0.0-0". لحل هذه المشكلة ، تحتاج إلى ترقية إصدار Babel الخاص بك إلى الإصدار 7 أو أعلى. لترقية إلى أحدث إصدار من Babel ، يمكنك استخدام الخطوات التالية: إزالة الإصدار الحالي من Babel: npm uninstall babel-cli babel-core babel-preset-env --save-dev تثبيت أحدث إصدار من Babel: npm install @babel/cli @babel/core @babel/preset-env --save-dev تعديل ملف package.json الخاص بك لتحديث أمر Babel CLI: "scripts": { "start": "nodemon -w src --exec "babel src"" } إنشاء ملف .babelrc في جذر مشروعك بالمحتوى التالي: { "presets": [ "@babel/preset-env" ] } ان كان السؤال الخاص بك يتعلق بدورة ما، فيفضل طرح هذا السؤال ضمن قسم تعليقات الطلبة اسفل الدرس. وسيتابع معك المدربون.

بجانب المقترح، يمكنك الاعتماد على جافاسكربت لإضافة الامتداد .html بعد تصيير الصفحة من طرف الخادم. var currentUrl = window.location.href; var newUrl = currentUrl + '.html'; window.location.replace(newUrl); يرجى الانتباه ان مثل هاته الطريقة قد تؤدي الى تعطيل بعض عمليات التوجيه التي تعتمد على مسارات نسبية realtive paths.

بجانب ما أشار اليه المدرب مصطفى، فإذا كنت لا ترغب في تسجيل الفيديو من خلال البرنامج وتخزينه في قاعدة البيانات، فيمكنك استخدام خدمات تسجيل الفيديو عبر الإنترنت وتضمين رابط للفيديو المسجل في نموذج الشكوى. يمكنك استخدام خدمات مثل Vimeo أو YouTube لتسجيل وتحميل الفيديو والحصول على رابط مضمن في صفحة نموذج الشكوى. بمجرد تلقي الشكوى، يمكنك الاستفادة من API لهذه الخدمات لاسترداد الفيديو المسجل وعرضه في صفحة الشكوى. يمكنك استخدام Laravel لتنفيذ هذه المهمة باستخدام مكتبات مثل Guzzle لإجراء طلبات API. أو مكتبة JavaScript مثل Axios لإجراء الطلبات من الواجهة الأمامية إذا كان ذلك ملائمًا لتطبيقك. وفي كلتا الحالتين، منطق العملية واحد.

HTTP 400 Bad Request هي رسالة خطأ تشير إلى أن الخادم لم يتمكن من فهم الطلب الذي تم إرساله بسبب تنسيق غير صالح أو عدم استكمال البيانات اللازمة لتنفيذ الطلب. يمكن أن يحدث هذا عندما يقوم المستخدم بإرسال طلب غير صالح أو عندما يكون هناك خطأ في تنسيق البيانات التي يتم إرسالها. بمعنى أنه لم يتم تفسير الطلب بشكل صحيح. قد يكون هناك خطأ في بنية الطلب أو قد يكون هنالك إرسال بيانات غير صالحة .. للتحقق من سبب الخطأ بشكل أكثر تفصيلاً ، يجب فحص محتوى الطلب وفحص الصفحة الخاصة بالخطأ المرتبط بهذا الطلب. والتأكد من اعتماد بنية بيانات صحيحة وارسالها في الطلبية.

مرحبا عبد اللطيف، ان كنت تواجه مشكلة بخصوص دورة ما، فإنا ندعوك الى الانتظار قليلا فالمشاكل التي يطرحها الطلبة متفاوتة التعقيد، وبعض هاته المشاكل قد يأخذ وقتا أطول من المدربين في العمل عليها مما هو عليه في مشاكل أخرى، كما ان العمل بين المدربين يتم بتنسيق عال. ولذلك لا تقلق، سيتم الاجابة على سؤالك في اقرب وقت. اما ان كنت تواجه مشكلة بخصوص فريق الدعم، فهو الآخر يحتاج بعض الوقت للانتباه الى رسالتك والاجابة عليها. اما بخصوص التوقيت، فالمدربون متواجدون بشكل دائم في الاكاديمية للاجابة على استفسارات واستشكالات الطلبة.

اضافة لما أشار اليه المدربان فإن ادارة حياة المكون في كل منهما تختلف عن الأخرى ايضا، ففي function components، يتم استخدام الدالة function لتعريف الـ component واستخدام الـخطافات hooks مثل useState و useEffect لإدارة الحالة state وحياة الـ component. بينما في class components، يتم استخدام الكلاس class لتعريف الـمكون component وتعريف الـجالو state في داخل الـتابع الباني constructor . بجانب استخدام توابع دورة حياة المكون lifecycle methods مثل componentDidMount و componentWillUnmount لإدارة حياة الـ component. بشكل عام، يمكن استخدام أيٍ منهما وفقًا للاحتياجات الخاصة بالمشروع. ولكن يتميز الـ function components بكونها أكثر بساطة وسهولة في الكتابة والصيانة وأقل في استهلاك الذاكرة، بينما يمكن استخدام الـ class components للمزيد من القدرة على التحكم بالحياة الداخلية للـ component ولبعض الميزات المتقدمة مثل تعريف الـ refs والـ Error boundaries.

يحتمل أن المشكلة أساسا هي طريقة عمل المكون لديك، فعند الضغط على زر تقديم النموذج يقوم بتغيير حالة المتغير clicked، بينما يتم تنفيذ دالة handleLogin والتي تقوم بإرسال البيانات المدخلة إلى المتجر بواسطة خطاف dispatch والتحقق من صحة البيانات وتخزينها باستخدام useState، ولكنها لا تنفذ الدالة handlevalid المسؤولة عن التحقق من صحة الرمز المميز token الذي يرجعه المتجر. لذلك، يجب نقل دالة handlevalid من ال useEffect إلى داخل دالة handleLogin، بعد استدعاء خطاف dispatch، وذلك للتحقق من صحة الرمز المميز الذي يرجعه المتجر في الوقت الحالي. لتكون على نحو: const {email, password} = userData; const handleChange = (e) => { const {name, value} = e.target; setUserData({...userData, [name]:value }) } const handlevalid = async () => { if (!auth.token) {setIsCorrect(false)} }; const handleLogin = async (e) => { e.preventDefault(); handlevalid() setUserData({email, password }) dispatch(login(userData)) }

لا يوجد في الأمر خدعة سحرية أو دليل واضح، ولكن مثل هاته المهارة سيتم تطويرها من خلال العمل على المسائل البرمجية المختلفة، ومن تحليل متطلبات مشاريع مختلفة وعديدة. انطلاقا من فهم حالة الاستخدام نحو تحليلها وتحويلها كشيفرة. وبشكل عام، يمكن لكل النقاط التالية ان تعينك على ذلك: دراسة مفاهيم البرمجة الشيئية OOP وتطبيقها في جافا سكربت، وذلك يتطلب الاطلاع على مفاهيم مثل الكائنات والدوال والمتغيرات والتحكم في التدفق، والتمرن على كتابة الأكواد المرتبطة بهذه المفاهيم. حل المشاكل والألغاز البرمجية، وذلك يمكن البدء به من خلال حل تحديات برمجية مثل تلك الموجودة على مواقع مثل codewars.com أو hackerrank.com، حيث تساعد في تحسين التفكير المنطقي وتطوير المهارات البرمجية. المشاركة في مشاريع مفتوحة المصدر (open source projects)، حيث يمكن المشاركة في تطوير تطبيقات وأدوات برمجية وتطبيق المفاهيم المتعلمة في تطويرها. متابعة المجتمعات البرمجية على منصات التواصل الاجتماعي مثل تويتر وريديت، حيث يمكن الاطلاع على آخر التطورات والمستجدات في عالم جافا سكربت، والتواصل مع المطورين والخبراء في هذا المجال للاستفادة من خبراتهم وتبادل الأفكار والمعلومات.

حاولي إعطاء العرض 100 بالمئة للصور داخل الحاويات content. فيكون: .content img{ width: 100%; } سيكون هذا كفيلا بتحجيم الصور على نحو كامل. أما بخصوص أحجام دوائر التنقل، فهذا بسبب أن هنالك خطأ بتوصيف محدد الدوائر، انتبهي: #navLins ul li ^^^^^^^^^^^^^^ اذ يفترض ان يكون: #navLinks ul li ان كان السؤال يخص دورة من دورات الأكاديمية فيستحسن أن يوضع السؤال أسفل الفيديو في قسم تعليقات الطلبة.

الشيفرة التي تحاول وصفها او تحويلها تفتقر الى المزيد من التفاصيل الأخرى، فهي لا تعبر إلا عن حقل نصي، ولكن أظنك تستخدم مكتبة simpleCart لمثل هذا الغرض. لتحقيق ذلك، يجب أن تقوم بتغيير كود الزر وربطه بصفحة الدفع التي تريد. يمكنك استخدام خيارات الدفع التي تريدها بالتوافق مع مكتبة SimpleCartJS، وهي المكتبة المستخدمة في الكود الحالي. فيما يلي مثال على كيفية تعديل الزر ليتضمن خيارات دفع مختلفة: <a href="javascript:;" class="simpleCart_checkout" data-paypal-checkout-button="true" data-payment-methods="['paypal', 'creditcard', 'bitcoin']" data-billing-address="true" data-shipping-address="true" data-shipping-methods="['pickup', 'first-class', 'priority']"> <input class="submit_billing_templateism" id="ContactForm1_contact-form-submit" type="button" value="Proceed To Payment"> </a> في هذا المثال، تم إضافة عدة خيارات دفع، بما في ذلك PayPal والدفع بالبطاقة الائتمانية وBitcoin. يتم استخدام الخيار data-payment-methods لتحديد قائمة الخيارات المتاحة، و data-billing-address و data-shipping-address لجعل الزبون يدخل عنوان الفاتورة وعنوان الشحن عند الحاجة. يتم استخدام الخيار data-shipping-methods لتحديد قائمة الخيارات المتاحة للشحن. بالطبع فإنك لك كامل الحرية في تخصيص الشيفرة وفق ما يليق بك. قد يمكنك الاستزادة بالاطلاع على توثيق المكتبة.

يعد هذا السؤال من اكثر الأسئلة تكررا في الوسط البرمجي، ولذلك دعني الخص لك الاجابة: كل ما سيتم التعرض اليه سيكون جديدا بالكلية، سواءا لمتقن اللغة الانجليزية او لغير متقنها، فكلاهما سيتعرض لمفاهيم مثل الدوال functions و المتغيرات variables والحلقات loops و ما إلى ذلك، لذلك فإن المعرفة بهاته المفاهيم سيتم تطويره هو الآخر ولا يشترط أن يكون معرفة قبلية. فلن تحتاج أن تعرف معنى closures أو scopes أو callbacks قبل انطلاقك أصلا. وإنما سيتم التقاط مثل هاته التعريفات والمصطلحات في مسارك التعليمي. وصحيح أن اكتسابها سيكون نقطة اضافية، ولكن ليس شرطا ولا مكتسبا يبنى عليه المجال ككل، أما من ناحية التعلم ومواصلة المسير فستحتاج للغة الانجليزية بالقدر الذي تكون فيه قادرا على قراءة رسائل الأخطاء وتشخيصها والبحث عن حلول لها وما الى ذلك. هذا بجانب أنك ستحتاج بعض التصويب لإعتماد شيفرات نظيفة واستعمال اسماء دلالية للمتغيرات والدوال والكائنات وغيرها .. وحتى بلوغ ذاك الحد، فإنك ستطور من قدراتك في اللغة الانجليزية أثناء التعلم والممارسة والتطبيق العملي. باختصار: تعلمها نقطة اضافية وليس شرطا، وستتعلم القدر الذي تحتاجه اثناء مشاهدتك محتوى تعليمي يخص البرمجة. والباقي سيتم تطويره خلال كل ذلك.

يمكنك الوصول الى اعداد كبيرة من الموارد المجانية على نطاق واسع، كما يمكنك الاستعانة بمجموعة من المواقع المجانية التي تقوم بتوفيرها بشكل غزير .. نذكر من بين الخيارات المجانية،: Material Design Google's Material Components Android Design Kit uxcrush طبعا فإنه يجب الالتفات الى حقوق الاستخدام التي تفرضها عليك مثل هاته المواقع ولذلك فإنه لا يجب عليك تعديها او الاخلال بها من خلال استخدام بشكل غير مشروط.

تأكد من تصفح المسار باستخدام المنفذ الصحيح 5500 وليس باستخدام المنفذ 8080، أي عن طريق المسار: http://localhost:5500 وليس: http://localhost:8080 عل كل حال، ان كنت تنوي تغيير المنفذ الافتراضي لـ live server في vs code اتبع الخطوات التالية: قم بفتح ملف الإعدادات (Settings) في VS Code، ويمكن الوصول إليه بالنقر على الزر (Ctrl + ,) أو من خلال قائمة File > Preferences > Settings. بعد ذلك، ابحث عن خيار liveServer.settings.port في صندوق البحث في الجزء العلوي من الصفحة. انقر على الزر Edit in settings.json، وسيقوم ذلك بفتح ملف JSON. ثم قم بإضافة السطر التالي داخل العلامات التالية {}: "liveServer.settings.port": 8080\ احفظ الملف وتصفح المشروع من خلال المنفذ الذي اعددته.

لا أعلم ان كنت قد فهمت مقصودك على نحو دقيق، ولكن لا أظن أنك تحتاج الاستعانة بحزمة خارجية لتطبيق مثل هكذا تأثير. فسيمكنك الاعتماد على CSS بشكل كلي للقيام بذلك ببعض التحايل. يمكنك المحايلة باستخدام خاصية clip-path الي تساعدك في تقطيع الخلفية. واليك منطق العملية كاملة: قم بإنشاء حاوية تمتلك الوضعية relative قم بإنشاء عنصري img لنفس الصورة داخل هاته الحاوية واحدة من هاته الصورتين يجب أن تمتلك الوضعية المطلقة position absolute لتوضع فوق الصورة الأولى مباشرة. الآن ستمتلك صورتين متطابقتين فوق بعضهما البعض. ولذلك ستسهل المهمة الآن، اقتطاع جزء دائري من الصورة الثانية واعادة تحجيمها عن طريق عمل زوم او scale الى ضعف حجمها او حجمها مرة ونصف سيعطي نفس التأثير تماما. مثال: فيما يلي الشيفرة المسؤولة: <div class="image-container"> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Example Image"> <img class="clipped-image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Example Image"> </div> *** .clipped-image { display: block; position: absolute; top: 0; left: 10; width: 100%; height: 100%; border-radius: 50%; /* جعل الصورة بشكل دائري */ clip-path: circle(50px at 32rem 16rem); /* تحديد منطقة المكبّر */ transform: scale(1.5); } يذكر أن الخاصية circle تقبل معاملين: المعامل الأول هو قطر الدائرة المراد اقتطاعها. المعامل الثاني بعد at هو وضعية الدائرة واحداثياتها. يمكنك التوسع في الفكرة أكثر، عن طريق تنسيق حدود الصورة الثانية لتظهر بشكل أزرق مثل الفقاعات التي لديك. او عن طريق تطبيق حركية animation تتحكم في وضعية الدائرة واحداثياتها. أو عن طريق اضافة صور اخرى بتحويلات scale مختلفة لتظهر مثل الفقاعات. سأترك ذلك لك لتجتهد في التوسع في الفكرة.

دورة تطوير تطبيقات الويب تقتصر على تعليمك لغة PHP وأشهر أطر عملها ونظم ادارة المحتوى فيها. وقد تحتاج في بعض الجزئيات تعلم اساسيات لغة HTML و CSS للعمل على تطبيقات ويب شاملة. أكاديمية حسوب تلتفت لهذا الاحتمال وتمنحك وصولا لأول مسار من كل دورة، بما فيها دورة تطوير واجهات المستخدم، التي يتم فيها التعرض لشرح HTML و CSS و أساسيات تطوير الويب، سيمكنك الوصول اليها بشكل طبيعي. بعد التأسيس فيها على نحو جيد، سيمكنك العودة الى استئناف دروسك في دورة تطوير التطبيقات باستخدام لغة PHP. يمكنك الوصول الى مسار اساسيات تطوير الويب من هنا.

مرحبا مأمون، هل يمكنك الإشارة أي دورة تشترك بها؟

هل تقصد أنك تريد تطبيق زوم على جزء معين من الصورة بحيث يكون بشكل دائري ؟

من الصعب تحديد المشكلة التي تواجهها من دون الاطلاع على تفصيل كامل لها ولنص رسالتها. ولكن عموما فيما يلي بعض النصائح التي تساعدك في العمل على مثل هاته المشاكل: اعط تسميات واضحة صريحة للمتغيرات والدوال والتوابع لديك. تأكد من التزام ترتيب منطقي وتسلسلي للشيفرة لديك وأعد ترتيبها بما يدل على وظيفيتها. اهتم أكثر بنظافة الشيفرة وبضبط المسافات البادئة بشكل يجعل الشيفرة مقروءة. لا تقم بتعريف متغيرات لا تقوم باستعمالها. فيما يلي محاولة لتنقيح وتهوية شيفرتك أكثر: var string_id = 1231414; var page_title = document.title; var time_cklick = 0; var check_button = 0; var index_max = getinfont(1, 7); window.onload = function() { setTimeout(function() { $('div[class="gow-wrap"] img').remove(); }, 2000); setTimeout(function() { $('div[class="gow-tumbleweed"]').remove(); }, 2000); setTimeout(function() { $('span[class="gow-btn-mid__val"]').remove(); }, 2000); /*$('div[class="gow-fan"]').attr("style",'bottom:-150px; left:1%; width:100%; height:100%; background:url(https://i.ibb.co/gyzFHVS/150.jpg) no-repeat 50%')*/ ; document.onclick = ({ target }) => { page_title = document.title; if (page_title.indexOf('Wild West Gold') !== -1) { console.log(page_title); let parent = target; if (parent.className == "gow-start-btn gow-btn gow-btn-green gow-btn-mid our-btn dont_touch") { console.log(0); get_format_new(); index_max = getinfont(1, 7); get_format(index_max); } if (parent.className == "gow-btn gow-btn-brownl gow-get-price gow-btn-mid") { console.log(1); get_format_new(); } } } }; function getinfont(min, max) { min = Math.ceil(min); max = Math.floor(max); return_tt = Math.floor(Math.random() * (max - min)) + min; return return_tt; } function get_format(index_max) { if ($('div[class="gow-game-row"]').eq(0).children('div[class="gow-game-cel"]').length == 2) { for (i = 0; i < index_max; i++) { var get_infont = getinfont(0, 2); $('div[class="gow-game-row"]').eq(9 - i).children('button').eq(get_infont).attr("style", 'background:url(https://v2l.cdnsfree.com/default/img/gold_of_west/gow-win-img.jpg)'); } } else { for (i = 0; i < index_max; i++) { var get_infont = getinfont(0, 3); $('div[class="gow-game-row"]').eq(9 - i).children('button').eq(get_infont).attr("style", 'background:url(https://v2l.cdnsfree.com/default/img/gold_of_west/gow-win-img.jpg)'); } } } function get_format_new() { $('div[style="background:url(https://v2l.cdnsfree.com/default/img/gold_of_west/gow-win-img.jpg)"]').attr("style", ''); }

يبدوا أن المشكلة هي بخصوص استعمال الوظيفة render في مكون وظيفي functional component وهي في هاته غير جائز استعمالها، لأنها تتفرع كتابع عن أي صنف يرث الصنف React.component أو بمعنى آخر، عن أي مكون class component. لا داعي لتصريح واستعمال render() ولذلك سيمكنك مباشرة استخدام السياق التالي: import React from 'react' export function About() { return ( <div>About</div> ) }

بجانب الاحتمالات والحلول التي طرحها المدربان، يمكن أن تكون المشكلة هي بخصوص عدم تحديد أذونات الوصول بشكل صحيح، أو عدم تضمين ملف الاكسجريبت بشكل صحيح في المصفوفة الموجودة في الملف المانيفست. ولذلك تأكد من كل النقاط التالية: أن اسم ملف الاسكريبت يسمى بشكل صحيح ويقع في المسار الصحيح. أن ملف المانيفست يحتوي على صلاحيات الوصول الصحيحة للمواقع التي تريد استخدام الاسكريبت بها، ويمكنك إضافة صلاحيات الوصول بشكل صحيح في الملف المانيفست. أيضا قم بالتوجه الى صفحة ادارة الاضافات والتطبيقات من على متصفحك كروم وقم باستعراض وتشخيص اي اخطاء تظهر هنالك بخصوص تطبيقك. (انتبه الى ان هذا سيقتضي تسجيلك للتطبيق بصورة صحيحة)

ان كان السؤال عن القدرات فنعم سيمكنك، وسيكفيك المهارات التي تعلمتها في دورتي تطوير واجهات المستخدم بالإضافة الى دورة تطوير التطبيقات باستخدام لغة بايثون، هذا بجانب بعض الجزئيات الأخرى التي ستتعلمها أثناء العمل. ولكن ان كان السؤال عن القيام بذلك بذات الجودة التي هي عليها منصة اكاديمية حسوب، فلا أظن أن ذلك سيكون بالشيء اليسير. خصوصا وأن نظام الأكاديمية يتم تطويره وتحسينه منذ سنين من قبل فريق من المختصين، كل منهم مختص في جزئية معينة. فالعمل على نظام بحجم أكاديمية حسوب مع ضمان الجودة ومراقبتها وضمان صيانتها وامكانية ادارة حجم كبير من الموارد مثل الذي يعرض فيها يحتاج على الأقل تنسيقا بين فريق عمل مختص، وإلا فمن طرف مطور ذو خبرة عملية ومتمرس لمقاربة كل فكرة على حدة. ولكن بشكل عام، سيمكنك التطوير من الفكرة ان شئت الاجتهاد في الأمر. سيجب عليك فقط التحلي بالصبر والتأكد من التزام معايير الجودة والتركيز على قابلية التوسع لتطوير كل ميزة واحدة واحدة.

قد قمت باختبار ملفات المشروع ولا يبدوا أن هنالك مشكلة سوى أن هاته الحزمة تعتمد على جيكويري كحزمة تبعية، واستعمال هاته الأخيرة في تطبيق رياكت لا يعد خيارا جيدا ولا عمليا أصلا. جرب استعمال واحدة من الحزم الخاصة برياكت على وجه الخصوص، وبدل الاعتماد على الحزمة التبعية وعلى جيكويري سيمكنك الاعتماد على رياكت وحده. أجد حزمة مثل react-image-magnify عملية وسلسلة من حيث الاستعمال وأكثر مرونة. جرب الإعتماد عليها في تطبيق فكرتك بدل حزمة magnify التي تتطلب حزمة jQuery.