محمد_عاطف

وعليكم السلام ورحمة الله وبركاته. ما هي المسارات التي كنت قد أنهيتها ؟ إذا لم تكن قد أنهيت الكثير من المسارات يمكنك متابعة الدورة من الترتيب الجديد . أما لو كنت قد أنهيت الكثير من المسارات فيمكنك إتباع الترتيب القديم كما أنت لا توجد مشكلة . حيث حاليا يتم تحديث الدورة ولهذا إختلف ترتيب المسارات . وهذه هي ترتيب المسارات السابقة : أساسيات بايثون. تطبيقات عملية على النماذج اللغوية الكبيرة LLMs تطبيقات عملية على نماذج الرؤية الحاسوبية التعامل مع البيانات تحليل البيانات Data Analysis تعلم الآلة Machine Learning تطوير نماذج ذكاء اصطناعي لمتجر إلكتروني التعلم العميق Deep Learning التعرف على الصور باستخدام الشبكات العصبية تطبيقات عملية على نقل التعلم Transfer Learning تطبيقات عملية باستخدام المحولات Transformers التعلم المعزز Reinforcement Learning

المشروع جيد جدا ومستواك يتطور بشكل ملحوظ . لقد إستطعت وضع الفيديو والصور معا في مكون واحد وإستطعت التبديل بينهما بشكل ممتاز وعرضهم بالشكل الصحيح. ولكن يوجد تكرار كثير في الأكواد هنا : else if(heroCount === 0){ return <img src={image1} alt="img" className='background animation'/> } else if(heroCount === 1){ return <img src={image2} alt="img" className='background animation'/> } else if(heroCount === 2){ return <img src={image3} alt="img" className='background animation'/> } لاحظ أن العناصر هي نفسها الإختلاف فقط في ال src وهنا يمكن تحسين هذا الجزء فتخيل لو وجد أكثر من 5 صور لديك أو كان يوجد classes كثيرة فهنا أى تعديل أو إضافة سيتوجب نسخ وإستخدام نفس الأكواد لذلك الصحيح هو جعل عنصر واحد وجعل ال src يختلف بناء على الشرط مباشرة هكذا مثلا : import './Bg.css'; import video1 from '../../assets/EV-Web-Assets/Assets/video1.mp4'; import image1 from '../../assets/EV-Web-Assets/Assets/image1.png'; import image2 from '../../assets/EV-Web-Assets/Assets/image2.png'; import image3 from '../../assets/EV-Web-Assets/Assets/image3.png'; const Background = ({playStaus,heroCount}) => { const images = [image1, image2, image3]; if(playStaus){ return ( <video className='background animation' autoPlay loop muted> <source src={video1} type='video/mp4'/> </video> ) } return <img src={images[heroCount]} alt="img" className='background animation'/> } export default Background; لاحظ هنا أنشأنا مصفوفة وإستخدمنا الheroCount للحصول على هذا العنصر . ولكن باقي المشروع ممتاز ولا توجد أى مشكلة فيه.

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

المشكلة هنا أنك تمرر task.deleteTaskes ولكن هذا خاطئ . بل يجب تمرير دالة . وإنشاء تلك الدالة التي تقوم بحذف المهمة أو تعديلها . هذا الأمر كما تم شرحه في مشروع تطبيق الملاحظات . يمكنك مراجعة هذا الجزء لفهمه بشكل أفضل.

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

نعم بالطبع لا توجد اى مشكلة يمكنك وضعها وهذا هو المكان المناسب . ولكن المنطق الخاص بتلك الأزرار يجب أن يكون في ملف App.jsx . حيث تقوم بتمرير دالة من App.jsx والتي يتم تنفيذها عند الحدث onClick في تلك الأزرار . <button onClick={deleteTask}>Delete</button> فهكذا الزر . ولكن الدالة deleteTask تقوم بتمريرها ك prop من الملف App.jsx

أولا في ملف src\Components\Data.jsx يجب أن تقوم بإعادة الجدول هكذا حيث يجب كتابة return : import React from "react"; const Data = (props) => { const { title, content } = props; return ( <table> <td>{title}</td> <td>{content}</td> </table> ) }; export default Data; بعد ذلك في ملف src\App.jsx يرجى وضع الكود التالي بعد سطر 58 مباشرة : {taskes.map((task) => ( <Data key={task.title} title={task.title} content={task.content} /> ))} الآن ستظهر لك المهام ولكن يتوجب إضافة تنسيقات جيدة لها حاليا يمكنك تغير اللون للأبيض حتى تظهر معك . أى في ملف src\index.css يرجى وضع الكود التالي في نهاية الملف : table { color: white; } App.jsx

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

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

نعم بالطبع يمكنك ربط 3 جداول معا باستخدام JOIN في SQL وبنفس الطريقة التي تربط بها جدولين، ولكن فقط تضيف جدول ثالث بنفس المبدأ. مثال : SELECT * FROM table1 JOIN table2 ON table1.id = table2.table1_id JOIN table3 ON table2.id = table3.table2_id حيث تقوم بربط الجدول الأول بالثاني بشرط معين ومن ثم تقوم بربط الجدول الثالث بأحد الجدولين الأخرين حسب العلاقة لديك. إذا أردت مساعدة في ربط جداول معينة يمكنك توضيح الجداول والعلاقات بينها لمساعدتك.

يمكنك محاولة بناء مدونة بسيطة فهو مشروع جيد للتعامل مع التوجيه (Routing) وعرض المحتوى حيث يجب على المشروع أن يحتوي على قائمة بالمقالات وعرضها حيث كل مقال له صفحته الخاصة به. يمكنك أيضا إضافة تعليقات للمقالات يمكنك محاولة تخزينها مؤقتا في ملف أو في localStorage إذا لم تكن تعلمت الواجهات الخلفية وإنشاء ال API. ويمكنك إنشاء مميزات متقدمة مثل لوحة تحكم لتعديل المقالات وعرضها وحذفها . يمكنك أيضا إنشاء خاصية عرض محتوى المقالات المكتوب بصيغة Markdown أى بلغة HTML . يمكنك أيضا محاولة بناء تطبيق الطقس (Weather App) حيث هو عبارة عن تطبيق يتفاعل ويرسل طلبات إلى واجهات برمجة التطبيقات (APIs) الخارجية فيمكنك عرض حالة الطقس لمدينة معينة وإضافة طريقة البحث عن المدن المختلفة. ويمكنك أيضا عرض توقعات الأيام القادمة . يمكنك أيضا توفير إمكانية : تبديل وحدات القياس بين مئوية وفهرنهايت. وميزة متقدمة وهي إضافة خاصية معرفة الطقس من خلال الموقع GPS. وأخيرا يمكنك إنشاء متجر إلكتروني بسيط (E-commerce Store) فهو مشروع ممتاز لتطبيق مفاهيم React و State Management. حيث يمكنك عرض المنتجات و إضافة المنتجات إلى سلة التسوق. وإدارة الحالة (State Management) من خلال استخدام Context API أو أى إدارة حالة أخرى لسلة التسوق. وأيضا صفحة منفصلة لكل منتج مع وصف وصور. وإضافة نظام التصفية والبحث عن المنتجات وتصفيتها حسب الفئة أو السعر. وإذا لم تتعلم إنشاء API يمكنكاستخدام Mock API لجلب بيانات المنتجات من Mock API مثل JSONPlaceholder أو Fake Store API.

كنت أقصد بيانات الطلب headers . ولكن لا مشكلة من المفترض أن ملف views لديك صحيح لا توجد به مشكلة حيث الكود سليم من ناحية parser_classes في ال ProductViewSet. وغالبا السبب في إعدادات REST_FRAMEWORK في settings.py. لذلك يرجى التحقق إذا كان لديك في settings.py هذا الجزء: REST_FRAMEWORK = { 'DEFAULT_PARSER_CLASSES': [ 'rest_framework.parsers.JSONParser', ], } فإذا كان موجود فهذا يلغي إعداد parser_classes الموجود في الـ ViewSet ويجعل DRF يتوقع دائما JSON. لذلك الحل إما حذف هذا الإعداد أو تعديله وإضافة التالي به : 'DEFAULT_PARSER_CLASSES': [ 'rest_framework.parsers.JSONParser', 'rest_framework.parsers.MultiPartParser', 'rest_framework.parsers.FormParser', ]

لاداعي للشكر . نعم من المفترض أن الكود صحيح ويجب أن يتم إرسال الطلب بشكل صحيح . هل يمكنك إرسال صورة للطلب من خلال نافذة network في أدوات المطور مع بيانات الطلب . وأيضا يرجى إرسال كود Django view فمن الممكن أن المشكلة فيه

وعليكم السلام ورحمة الله وبركاته. لاحظ الخطأ يخبرك أنه لا يمكن قبول الصور من خلال الطلب من نوع application/json كما تفعل . فهذه المشكلة شائعة عند رفع ملفات كالصور باستخدام Django REST Framework. والسبب أنك عندما ترسل الطلب مع صورة يجب أن ترسل البيانات باستخدام multipart/form-data وليس application/json أو أى نوع أخر. ولا يجب أن تقوم بتعيين Content-Type يدويا إلى application/json حيث بما أنك تستخدم FormData فإنه يتم إضافة Content-Type المناسب (multipart/form-data). فمثلا لو قمت بإرسال طلب ال API من خلال java script فيجب أن يكون كالتالي: const formData = new FormData(); formData.append('name', 'example'); formData.append('image', fileInput.files[0]); fetch('/api/upload/', { method: 'POST', body: formData }); ولو كنت ترسل الطلب من خلال postman فيجب إختيار form-data من ال body وإرسال الصور منها :

نعم إن Next.js مبني بالفعل على React ويوفر العديد من الميزات الإضافية التي تجعله خيار جدي للعديد من المشاريع ولكن الاختيار بين React وNext.js يعتمد على ما تحتاجه في مشروعك وخصائصه. فأولا إن next هو إطار عمل كامل (Framework) وليس مكتبة فقط ويوفر .js حلول جاهزة لل (Routing) وجلب البيانات (Data Fetching) وتحسين الأداء مثل التحميل المسبق Pre-rendering. وإن React هي مكتبة وتحتاج إلى إضافة مكتبات أخرى مثل react-router لل (Routing) وaxios أو fetch لجلب البيانات. وnext يوجود به التصيير المسبق (Pre-rendering) لتحسين SEO والأداء حيث يدعم SSR (Server-Side Rendering) و SSG (Static Site Generation) بشكل مدمج مما يجعله مثالي للمواقع التي تحتاج إلى تحسين محركات البحث (SEO). ولكن React يعتمد عادة على CSR (Client-Side Rendering) مما قد يؤثر بشكل سئ على SEO إذا لم يتم تحسينه. ولكن إذا كنت تبني تطبيق Single-Page Application (SPA) ولا يحتاج إلى SEO مثل لوحات التحكم (Dashboards) أو التطبيقات الداخلية التي لا تحتاج إلى تصيير من الخادم فإن React هو الأفضل في هذا الجزء. وأيضا إذا كنت تريد تحكم كامل في إعدادات البناء (Custom Config) . وبينما next يقوم بفرض بعض القيود على هيكلة المشروع. فإن React مع Webpack يمكنك من تخصيص كل شيء. وأيضا إذا كان المشروع صغير ولا يحتاج إلى ميزات next فإن React هو الأفضل. وأيضا إضافة Next لمشروع بسيط قد يكون مبالغة إذا كنت لا تحتاج إلى SSR أو SSG. ويجب عليك معرفة أن React مخصص لبناء واجهات المستخدم فقط. أي أنه يركز على بناء المكونات (Components) وإدارة الحالة داخل الواجهة. وإذا لا نستعمل next دائما لأننا أحيانا لا نحتاج كل ما يقدمه Next خاصة في تطبيقات واجهات المستخدم البسيطة وإن Next كما وضحت لك يفرض بنية مشروع معينة وآليات عمل محددة وهذا قد يكون معقد على المشاريع الصغيرة . وأخير فإن Next.js لا يستبدل React بل يبني عليه ويوفر بيئة عمل كاملة حوله.

سيتم توصيل مشكلتلك للإدارة وسنعمل على حلها إذا كانت المشكلة من جهة الموقع هنا.

إن SWC (Speedy Web Compiler) هو مصرف سريع للغة JavaScript و TypeScript وهو مكتوب بلغة Rust ويستخدم لتحويل الشيفرة الحديثة مثل ES6+ أو TypeScript إلى شيفرة متوافقة مع المتصفحات القديمة أو بيئات Node.js. ومن مميزات SWC أنه سريع جدا فهو أسرع بكثير من Babel ويعتمد على لغة Rust المحسنة للأداء. ويدعم أحدث معايير JavaScript و TypeScript ويدعم ES Modules و JSX و Decorators وغيرها. ويمكنه تحويل TypeScript إلى JavaScript بدون استخدام tsc. ويستطيع العمل مع Webpack و يدعم Bundling وهو متكامل مع Next.js .

لقد لاحظت الصورة السابقة التي أرفتها وهي تظهر أنك قد قمت بحذف ال session storage ولكن الصحيح هو local storage هنا :

هل كنت قد أرسلت رسالة لمركز الدعم وحدثت تلك المشكلة ؟ هل يمكنك تجربة متصفح أخر على جهاز الحاسوب والتأكد من الإنترنت لديك وإخبارى بالنتيجة .

هل يمكنك توضيح ما يظهر لك ؟

هل يمكنك توضيح سؤالك أكثر هل تقصد رفع مشاريع الموجودة في الدورة أم ماذا ؟ إذا كان كذلك فلايتم رفع المشاريع في قسم المحادثة أو في خانة تحدث معنا. بل يجب رفعها على موقع github وإليك تفاصيل أكثر حول كيفية رفعها والمطلوب رفعه : وبعد أن تقوم بالإنتهاء من الدورة وتريد التقدم للإختبار يجب محادثة مركز المساعدة من خلال الرابط التالي : https://support.academy.hsoub.com/conversations وإخبار مركز المساعدة أنك تريد التقدم للإختبار وبعد ذلك يتم طلب منك رابط git الخاص بك ويمكنك إرسال الرابط لهم في المحادثة.

المشروع يعمل دون أى مشكلة لقد قمت بتجربته ولا تحدث به أى أخطاء. ولكن توجد مشكلة في المنطق حيث عند تحديث الصفحة يتم حذف جميع المهام لتصبح قائمة المهام فارغة في التخزين المحلي. والسبب هو إستخدامك لإثنين من useEffect حيث ال useEffect الثانية يتم تنفيذها في البداية والتي يكون فيها قيمة todos بمصفوفة فارغة . وإليك الكود التالي الصحيح للحل : import React, { useState, useRef, useEffect } from "react"; import './App.css' import logo from './assets/react.svg' function App() { const [todos, setTodos] = useState([]); const inpRef = useRef(); /// قراءة البيانات من التخزين المحلي عند تحميل الصفحة أول مرة useEffect(() => { const storedTodos = localStorage.getItem("todos",); if (storedTodos) { setTodos(JSON.parse(storedTodos)); } }, []); // حفظ المهام في التخزين المحلي عند كل تغيير في القائمة // useEffect(() => { // localStorage.setItem("todos", JSON.stringify(todos)); // }, [todos]); const handelButtonClick = () => { const text = inpRef.current.value; const newTodos = { compiled: false, text } inpRef.current.value = ''; setTodos([...todos, newTodos]) localStorage.setItem("todos", JSON.stringify([...todos, newTodos])); } const handelItemClick = (i) => { const newItem = [...todos]; newItem[i].compiled = !newItem[i].compiled; setTodos(newItem) localStorage.setItem("todos", JSON.stringify(newItem)); } const handelDeleteClick = (i) => { const newDelete = [...todos]; newDelete.splice(i, 1) setTodos(newDelete); localStorage.setItem("todos", JSON.stringify(newDelete)); } return ( <> <img src={logo} alt="" /> <div className="App"> <h2>To Do List</h2> <ul> {todos.map(({ text, compiled }, i) => { return <div className="item"><li key={i} className={compiled ? 'done' : ''} onClick={() => handelItemClick(i)}>{text}</li><span onClick={() => handelDeleteClick(i)}>❌</span></div> })} </ul> <input ref={inpRef} placeholder="Enter item..." /> <button onClick={handelButtonClick}>Add</button> </div> </> ) } export default App;

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

ينبغي عليك معرفة أولا كيف تعمل وما فائدتها وإذا ما واجهتك مشكلة تستطيع map حلها يمكنك إستخدامها. فإذا ما واجهتك أى مشكلة أو تريد تحويل عناصر مصفوفة ما إلى شكل مختلف تماما فهنا map هي المناسبة لك . تخيل مثلا لدينا منتجات ونريد عرضها في مكون React كيف سنفعل ذلك ؟ يمكننا إستخدام حلقة for ولكن هنا map أفضل وأسرع هكذا مثلا : const products = [ { id: 1, name: "iPhone", price: 999 }, { id: 2, name: "Samsung", price: 899 } ]; function ProductList({ products }) { return ( <div className="grid"> {products.map(product => ( <div key={product.id} className="product-card"> <h3>{product.name}</h3> <p>{product.price} USD</p> <button>Add to Cart</button> </div> ))} </div> ); } لاحظ كيف إستخدمنا map وقمنا بتحويل كائن المنتج إلى عناصر HTML بها بيانات هذا الكائن . مثلا لدينا تعليقات للمستخدمين نريد عرضها : const comments = [ { id: 1, user: "Mohamed", message: "good Product" }, { id: 2, user: "Ahmed", message: "Good Price" } ]; function CommentSection({ comments }) { return ( <div> <h4>}comments:</h4> {comments.map(comment => ( <div key={comment.id}> <strong>{comment.user}</strong>: {comment.message} </div> ))} </div> ); } لاحظ هنا أيضا إستخدمنا map وقمنا بتحويل كائن التعليق إلى عناصر يتم عرض التعليقات بها. وهكذا في مشروع React يمكنك إستخدام map لعرض المصفوفة التي لديك والعناصر التي بها إلى عناصر HTML

نستخدم دالة map عندما نريد تحويل كل عنصر في المصفوفة إلى شيء جديد أو قيمة جديدة مع الاحتفاظ بعدد العناصر. فإذا كنت تريد مصفوفة جديدة بنفس الطول ولكن كل عنصر فيها تم تعديله قم بإستخدم map. فمثلا إليك الأمثلة التالية : تحويل الأرقام: const numbers = [1, 2, 3, 4]; const doubled = numbers.map(n => n * 2); console.log(doubled); // [2, 4, 6, 8] لاحظ استخدمنا map هنا لأننا نريد تحويل جميع الأرقام في المصفوفة إلى ضعف الرقم نفسه ولكن نحتفظ بعدد العناصر الأساسية. مثلا لو أردنا إستخراج خاصية من الكائنات : const users = [ { name: "Mohamed", age: 20 }, { name: "Zen", age: 20 } ]; const names = users.map(user => user.name); console.log(names); // ["Mohamed", "Zen"] هنا إستخدمنا map لأننا نريد مصفوفة جديدة تحتوي فقط على أسماء المستخدمين. تنسيق البيانات وعرضها بطريقة معينة : const products = [ { id: 1, price: 100 }, { id: 2, price: 200 } ]; const formatted = products.map(p => `${p.id}: ${p.price} USD`); console.log(formatted); // ["1: 100 USD", "2: 200 USD"] هنا قمنا بتحويل كل كائن إلى نص.