محمد عاطف25

لاحظ المشكلة أنك قمت بوضع سطر 25 : @app.route('/') قبل الصنف Predict مباشرة وهذا خاطئ . وحيث أنك إستخدمت api.add_resource لتسجيل الأصناف. إذا المسارات التي يجب أن تذهب إليها هي /predict أو /health وليس المسار / . ولكن الصحيح هو إما حذف @app.route('/') أو إضافة مسار أساسي هكذا مثلا : from flask import Flask, jsonify from flask_restful import Api, Resource, reqparse import numpy as np import pandas as pd import joblib import tensorflow as tf app = Flask(__name__) api = Api(app) # تهيئة Flask-RESTful # تحميل النماذج والمحولات dl_model = tf.keras.models.load_model('models/dl_model.h5') rf = joblib.load('models/rf_model.joblib') scaler = joblib.load('models/scaler.joblib') # مستخرج السمات من النموذج العميق feature_layer = dl_model.get_layer(index=-2).output extractor = tf.keras.Model(inputs=dl_model.input, outputs=feature_layer) # تحضير محلل البيانات المطلوبة parser = reqparse.RequestParser() for feat in ['age', 'sex', 'cp', 'trestbps', 'chol', 'fbs', 'restecg', 'thalch', 'exang', 'oldpeak', 'slope', 'ca', 'thal']: parser.add_argument(feat, type=float, required=True, help=f"{feat} مطلوب") @app.route('/') def home(): return "Home use /predict or /health" class Predict(Resource): def get(self): args = parser.parse_args() df = pd.DataFrame([args]) X_scaled = scaler.transform(df.values) X_dl = extractor.predict(X_scaled) X_comb = np.hstack([X_scaled, X_dl]) y_pred = int(rf.predict(X_comb)[0]) y_proba = rf.predict_proba(X_comb)[0].tolist() # توليد التوصيات العلاجية recommendations = [] if y_pred >= 2: recommendations = [ "مراجعة طبيب قلب مختص", "إجراء رسم قلب وتخطيط مجدد", "متابعة مستمرة للضغط والكوليسترول" ] else: recommendations = [ "اتباع نظام غذائي قليل الدسم", "ممارسة الرياضة بانتظام", "متابعة سنوية فقط" ] return jsonify({ 'prediction': y_pred, 'probabilities': y_proba, 'recommendations': recommendations }) class Health(Resource): def get(self): return {'status': 'healthy'}, 200 api.add_resource(Predict, '/predict') # GET /predict api.add_resource(Health, '/health') # GET /health if __name__ == '__main__': app.run(debug=True) ويمكنك الذهاب إلى المسارات التالية الصحيحة : http://localhost:5000/predict http://localhost:5000/health

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

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

المشكلة لديك في ملف src\Components\Navbar\Navbar.jsx في جزء ال ul حيث لاحظ أنك تستخدم عنصر a مع href يحوي رابط localhost:5173 ولكن الصحيح هو جعل الرابط نسبي أى من الموقع الحالي المفتوح . لذلك يرجى إستبدال من سطر 13 حتى 16 بالتالي : <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/services">Services</Link></li> <li><Link to="/contact">Contact</Link></li> وإستيراد link في بداية الملف كالتالي : import { Link } from 'react-router-dom'; ليصبح كود الملف كالتالي : import React from 'react' import './Navbar.css'; import logo from '../../assets/logo.png' import { Link } from 'react-router-dom'; const Navbar = () => { return ( <div> <div className="navbar"> <div className="logo"> <img src={logo} alt="" /> </div> <div className="nav-list"> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/services">Services</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> </div> </div> </div> ) } export default Navbar

يرجى تفعيل ال debug لمعرفة أين الخطأ وما هو . يجب إستبدال السطر التالي : app.run() بهذا السطر : app.run(debug=True) بعد ذلك يجب إغلاق المشروع وإعادة تشغيله وإرسال رسالة الخطأ التي تظهر لك مع أخر ملف قمت بتعديله.

وعليكم السلام ورحمة الله وبركاته. نعم صحيح ما تقوم بإنشائه يشبه إلى حد ما لعبة "Mad Libs Generator" حيث يتم إنشاء قصة باستخدام مدخلات المستخدم لملء الفراغات في القصة لديك. الأمر أسهل بكثير بالنسبة للغة الإنجليزية أما مثلا في اللغة العربية الأمر صعب وعقد حيث يتم تغير الضماء والأفعال وحتى الصفات لتناسب جنس البيانات المدخلة . أما في الإنجليزية فيمكننا إنشاء متغيرات بناء على الجنس المدخل هكذا مثلا : if gender == 'male': pronoun = 'he' possessive = 'his' elif gender == 'female': pronoun = 'she' possessive = 'her' else: pronoun = 'they' # للتعامل مع حالات الإدخال الخاطئة أو غير المحددة possessive = 'their' ويمكنك إستخدام تلك الضمائر بداخل الجملة هكذا مثلا : name = input('Enter your name: ') gender = input('Enter your gender (male/female): ').lower() age = int(input('Enter your age: ')) favorite_food = input('Enter your favorite food: ') country = input('Enter your country: ') country_dream = input('Enter which country you wish you could live in: ') siblings = input('Enter the number of your siblings: ') hobbies = input('Enter your hobbies: ') if gender == 'male': pronoun = 'he' possessive = 'his' elif gender == 'female': pronoun = 'she' possessive = 'her' else: pronoun = 'they' possessive = 'their' print(f'Once upon a time, there was a person named {name}. This {gender} was {age} years old. ' f'{pronoun.capitalize()} loved eating {favorite_food}. {pronoun.capitalize()} lived in {country} ' f'but dreamed of settling in {country_dream}. {pronoun.capitalize()} had {siblings} siblings ' f'and enjoyed {hobbies} in {possessive} free time.')

إذا يجب عليك تحديد أولا المجال الذي تريد العمل فيه سواء كان تطوير تطبيقات الويب أو الهاتف أو الذكاء الإصطناعي وذلك لتحديد الدورة المناسبة لك. أما إذا لم تكن لديك فكرة مسبقة عن مجال البرمجة أو التكنولوجيا عموما ولا تعرف المجال المناسب لك فإن دورة علوم الحاسوب هي أفضل بداية لك : ويمكنك قراءة تفاصيل حول تلك الدورة وفائدتها لك :

إذا هذه مشكلة في الكود في الخادم لديك يبدوا أنه يوجد خطأ في الكود

هذا لأنك في الصنف في سطر 26 قمت بتعريف فقط طريقة post أى يجب أن يتم إرسال الطلب من خلال نوع post من نموذج form . ولكن لو أردت أن تجعل الطلب get أى يمكنك الوصول إليه من خلال كتابته في المتصفح يجب تغير post إلى get . أو أن تقوم بتعريف دالة get بداخل الصنف وتعيد ما تريد إعادته عند الذهاب إلى العنوان /

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

هل تقوم بالذهاب إلى مسار الرئيسية / ويظهر لك 404 أم تذهب إلى عنوان أخر ؟ أولا غالبا المشكلة بسبب أنك قمت بتعريف app مرتين مرة في سطر 8 ومرة أخرى في سطر 23 . app = Flask(__name__) حيث بسبب هذا بعد أن قمت بكتابة المسار في سطر 10 من خلال app تم إعادة تعينه . لذلك يجب خذف هذا السطر 23 . وأيضا في نهاية الملف لم تستدعي app.run() يجب أن تستديعها هكذا : if __name__ == '__main__': app.run()

أولا المدرب يقوم بتجهيز الكود مسبقا وذلك لتقليل الوقت الخاص بالدرس فلو قام بكتابة الكود أول مرة في الدرس فهذا سيطيل وقت التعلم للطلاب جميعا . ولكن المدرب بالفعل قام بكتابة الأكواد بنفسه من البداية وتقسيم وتخطيط للمشروع وللأدوات والمكتبات اللازمة لتنفيذ ما يريده. والمشكلة التي تواجهك هي مشكلة أغلب الطلاب في بداية التعلم فالسبب الرئيسي هو البدء مباشرة في كتابة الكود قبل فهم المشروع ككل سواء من حيث المتطلبات أو هيكل المشروع حيث : لا تقوم بتحديد المتطلبات أو الميزات منذ البداية. وأيضا لا ترسم صورة كاملة عن بنية وهيكل المشروع. وأيضا تبدأ في كتابة الكود قبل تخطيط الحل وفهم كيف سيتفاعل كل جزء مع الآخر. فأول شي يجب فعله هو فهم المشروع وكتابة متطلباته فقبل ان تكتب أي سطر كود يجب عليك معرفة ما سيفعله المشروع وما هي ما هي صفحاته وهيكله وما هي الوظائف الرئيسية مثل تسجيل دخول أو رفع صور أو محادثة حية (chat) أو غيرها من الخصائص. بعد ذلك يجب عليك تصميم المشروع سواء تصميم قاعدة البيانات التي ستستخدمها لتوفر لك جميع الخصائص التي تريدها أو تصميم الواجهات أو الصفحات وغيرها . وأيضا تصميم هيكل المشروع وكيف سيتفاعل المشروع مع بعضه فمثلا في الواجهة الخلفية تقوم بتصميم ال API المناسب وما هي البيانات التي سيستقبلها من الواجهة الأمامية وهكذا حتى تستطيع تحديد كيف سيتفاعل المشروع ككل مع بعضه البعض. بعد ذلك تحديد الأدوات والمكتبات اللازمة فمثلا هل ستسعمل واجهة خلفية ؟ إذا كان كذلك وقمت بإختيار javascript فالمناسب لك هو nodejs مع express وقاعدة بيانات mongodb . وأيضا مثلا هل تحتاج إلى واجهة أمامية ؟ إذا ما المناسب هل هو React أو Vue أم غيره بناء على متطلبات المشروع . ومثلا لو أردنا تقديم خدمة chat أو إتصال لحظي فهنا الأفضل إستخدام socket.io مثلا . ويمكنك البحث عن المكتبات التي ستساعدك أو التقينة الأفضل لتنفيذ خصائص مشروعك . بعد ذلك وأخيرا بعد أن حددت المتطلبات وحددت التقنيات والأدوات التي ستستخدمها يمكنك الآن البدأ في كتابة الكود جزء بجزء . أى تقوم بتقسمه إلى أجزاء صغيرة كل جزء منها خاص بوظيفة معينة وتجميع تلك الأجزاء معا لتشغيل المشروع ككل . وفي البداية ستجد بالفعل صعوبة في الأمر لذلك يجب عليك التمرين على إنشاء مشاريع كثيرة بنفسك فأن تبدأ بمشاريع بسيطة ثم تدريجيا تقوم بالتقدم في المستوى قليلا إلى أن يتحسن مستواك.

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

إن خاصية aspect-ratio في CSS تستخدم لتحديد نسبة العرض إلى الارتفاع لعنصر ما وهو ما يساعد في الحفاظ على أبعاده بشكل متناسق عند تغيير حجم الشاشة أو عندما لا يتم تحديد العرض والارتفاع صراحة. فمثلا في الصور هناك الصورة 3:4 هنا يعني أى العرض هو 3 والطول هو 4 . أى أن الطول سيكون أكبر من العرض .فمثلا أنت لا تعرف ما هو قيمة الطول والعرض الأصلية للصورة أو للعنصر . ولكنك تخبر css أن تحافظ على تلك النسبة أى أن قسمة العرض على الطول يجب أن تكون 3:4 . img { aspect-ratio: 1 / 1; width: 100px; object-fit: cover; } فمثلا في المثال السابق نحن وضعنا النسبة 1 إلى 1 أى أننا نريد صورة الطول والعرض الخاص بها متساويين أى نريد صورة مربعة. وهكذا يمكنك وضع النسبة بناء على ما تريده فلو أردت الطول أكبر من العرض تعطي نسبة أكبر للطول وهكذا فأنت لست مجبرا على معرفة قيمة ال px للصورة .

وعليكم السلام ورحمة الله وبركاته. إن تحليل السلاسل الزمنية (Time Series) هو مجال مهم جدا في تعلم الآلة ويستخدم على نطاق واسع في الشركات وذلك لإتخاذ قرارات تعتمد على الزمن مثل التنبؤ بالمبيعات وتحليل السوق والصيانة التنبؤية وتحليل المخزون وغيرها. فالسلسلة الزمنية هي مجموعة من البيانات التي تجمع بترتيب زمني وغالبا تكون على فترات منتظمة مثل كل ساعة أو كل يوم أو كل شهر وهكذا. فمثلا عدد الزوار لموقع إلكتروني كل يوم خلال سنة هو سلسلة زمنية. والعمليات المستخدمة بكثرة فيه : الرسم البياني: نستخدم المخططات الخطية لرؤية الأنماط بمرور الوقت. تحليل المكونات: الاتجاه (Trend) الموسمية (Seasonality) الضوضاء (Noise) الدورات (Cycles) تحويل البيانات: مثل تحويلها إلى اختلافات (Differences) لإزالة الاتجاه. النماذج التنبؤية المستخدمة: ARIMA (من أكثر النماذج الكلاسيكية شهرة). Prophet من فيسبوك وهو سهل وسريع التهيئة. LSTM و GRU. XGBoost و RandomForest (عند استخدام ميزات مستخرجة من الزمن). وإليك التالي لمزيد من التفاصيل : أما في دورة الذكاء الإصطناعي فتم شرح وإستخدام السلاسل الزمنية في مسار "تطوير نماذج ذكاء اصطناعي لمتجر إلكتروني" هنا : ستجده في هذا المسار القسم الخامس .

أولا لاحظ أنه يوجد مشكلة لديك في ملف src\App.jsx حيث أنك وضعت Routes بخارج BrowserRouter ويجب أن يكون بداخلها. لقد إستطعت بنفسك إنشاء مسار Navbar وسيعمل معك الآن . ولكن لاحظ أنه لايجب أن يكون هناك مسار لعرض شريط التنقل بل يجب أن يكون مكون وصفحة كاملة. وإليك هذا الكود بعد التعديل : import React, { useEffect, useState } from "react" import Navbar from "./Components/Navbar/Navbar"; import About from "./Components/About/About"; import Hero from "./Components/Hero/Hero"; import {Routes , Route, BrowserRouter} from 'react-router-dom'; import Background from "./Components/Background/Background"; function App() { let heroData = [ {text1: 'Titanium' , text2: 'color'}, {text1: 'Fast and ' , text2: 'powerful'}, {text1: 'Practical and' , text2: 'attractive'}, ] const [heroCount , setHeroCount] = useState(1); const [playStatus , setPlayStatus] = useState(false); useEffect(() => { setInterval(() => { setHeroCount((count) => {return count === 2?0:count+1}) }, 4000); },[]) return ( <> <BrowserRouter> <Navbar /> <Routes> <Route path="/about" element={<About />}/> <Route path="/service" element={<About />}/> <Route path="/contact" element={<About />}/> </Routes> </BrowserRouter> <div> <Background playStatus={playStatus} heroCount={heroCount}/> <Hero heroData={heroData[heroCount]} heroCount={heroCount} playStatus={playStatus} setHeroCount={setHeroCount} setPlayStatus={setPlayStatus} /> </div> </> ) } export default App الآن في ملف src\Components\Navbar\Navbar.jsx يوجد مشكلة لديك في أنك تستخدم العنصر a وهذا خاطئ فلاحظ عند الضغط عليه يقوم مباشرة بإعادة تحديث الصفحة والذهاب للعنوان الجديد . ولكننا لا يجب أن نقوم بذلك لأننا نستخدم React ونبني Single Page Application أى لا يجب أن يكون هناك تحدث للصفحة. لهذا يجب إستخدام Link من react-router-dom لتقوم بالتوجيه بدلا منا هكذا : import React from 'react' import './Navbar.css'; import logo from '../../assets/logo.png' import { Link } from 'react-router-dom'; const Navbar = () => { return ( <div> <div className="navbar"> <div className="logo"> <img src={logo} alt="" /> </div> <div className="nav-list"> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link></li> <li> <Link to="/service">Services</Link></li> <li> <Link to="/contact">Contact</Link></li> </ul> </div> </div> </div> ) } export default Navbar الآن لاحظ بمجرد الضغط على زر التنقل لا يتم تحديث الصفحة بل يتم التوجه مباشرة وتغير العنوان دون إعادة تحديث الصفحة.

أولا أنت لا تستخدم useState لإداراة الحالة حيث يستخدمها React لمعرفة التغيرات التي حدثت في قيمة المتغيرات وحينها يمكنه التعامل معها وإعادة تصير (render) المكون مرة أخرى عند حدوث تغير في القيمة. وأيضا هنا في الكود التالي أنت قمت بإنشاء زر واحد فقط ولكن الصحيح هو إنشاء زر لكل عنصر ليقوم بحذف هذا العنصر نفسه وليس حذف أول عنصر من القائمة دائما. أيضا يجب تمرير المؤشر index الذي نريد حذف هذا العنصر لديك . حيث الدالة splice تأخذ المؤشر الذي نريد بدأ الحذف منه . وهذا هو الكود النهائي الصحيح : import React, { useState } from "react"; function App() { const [tasks, setTask] = useState([ "item1", "item2", "item3", "item4", ]); const maytaskslist = tasks.map((item, index) => { return <li key={item}>{item} <button onClick={() => deleteClick(index)}>clear</button> </li> }) const deleteClick = (item) => { const newDelete = [...tasks] newDelete.splice(item, 1) setTask(newDelete) } return ( <div> <ul> {maytaskslist} </ul> </div> ) } export default App; حيث لاحظ كيف قمنا بإستخدام useState لإنشاء قائمة المهام والتي سيدير حالتها React ومع كل تغير فيها سيقوم تلقائيا بإعادة بناء المكون.

نعم بالطبع يمكنك ذلك فيمكنك إنشاء ملف منفصل وإستدعاء كمكون في ملف App . والملف يكون عبارة عن شئ كالتالي : import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Home from "./pages"; import About from "./pages/about"; const router = createBrowserRouter([ { path: "/", element: <Home />, }, { path: "/about", element: <About />, }, ]); export default function Router() { return <RouterProvider router={router} />; } ويمكنك إستدعاءه هكذا في App : import Router from "./router"; function App() { return <Router />; } export default App;

أولا يجب تنزيل المكتبة من خلال الأمر : npm install react-router-dom بعد ذلك يجب تهيئة التوجيه داخل مشروعك ففي لملف src/App.js يجب إضافة التالي : import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; function Home() { return <h2>Home Page</h2>; } function About() { return <h2>About Page</h2>; } function App() { return ( <Router> <nav> <Link to="/">Home</Link> | <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Router> ); } export default App; الآن قمنا بإنشاء عنوانين أحدهما لصفحة ال home و الأخرى لصفحة ال about . وهكذا يمكنك وضع أى مسار أو عنوان هنا في الملف App ومن ثم توفير المكون الذي سيعمل عند الذهاب لهذا العنوان . ويمكنك قراءة التالي لمزيد من التفاصيل :

توجد عدة طرق لذلك بجانب إستخدام مكتبة React Router لإدارة التنقل بين الصفحات (Routes). حيث يجب تغير العنوان url لتغير title الصفحة فلا يمكنك إستخدام أكثر من title لنفس العنوان فهذا ليس أفضل شئ. الطريقة الأولى لتغيير title لكل صفحة دون تعديل ملف HTML مباشرة، يمكنك استخدام مكتبة مثل react-helmet أو react-helmet-async لإدارة العناصر في <head>. فأولا يجب أن تقوم بتثبيت المكتبة باستخدام الأمر: npm install react-helmet-async بعد ذلك في ملف index.js أو App.js، قم بتغليف التطبيق بمكون HelmetProvider: import { HelmetProvider } from 'react-helmet-async'; import { BrowserRouter as Router } from 'react-router-dom'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <HelmetProvider> <Router> <App /> </Router> </HelmetProvider> ); وفي كل مكون (صفحة) يمكنك إستخدام Helmet لتحديد العنوان. فمثلا: import { Helmet } from 'react-helmet-async'; function Home() { return ( <div> <Helmet> <title>Home Page</title> </Helmet> <h1>Home Page</h1> </div> ); } والطريقة الثانية لتغيير title بدون react-helmet حيث يمكنك تغيير العنوان مباشرة باستخدام document.title في useEffect: import { useEffect } from 'react'; function Home() { useEffect(() => { document.title = 'Home Page'; }, []); return <h1>Home Page</h1>; }

نعم إن إمتداد .tsx هو نوع من ملفات TypeScript ويستخدم خصوصا في مشاريع React وهو يحتوي على بناء جملة JSX (JavaScript XML). أى أنه بالفعل ملف تايب سكريبت ولكنه ملف تايب سكريبت خاص يدعم تضمين JSX بداخله مباشرة. وهذا مفيد عند بناء واجهات المستخدم باستخدام مكتبات مثل React حيث يتم استخدام JSX لوصف بنية المكونات. فإمتداد .ts هو ملف TypeScript عادي لا يدعم JSX بشكل مباشر. أما .tsx فهو ملف TypeScript يدعم JSX مما يسمح لك بكتابة HTML-like syntax داخل كود TypeScript الخاص بك لإنشاء واجهات المستخدم.

وعليكم السلام ورحمة الله وبركاته. ما هي المسارات التي كنت قد أنهيتها ؟ إذا لم تكن قد أنهيت الكثير من المسارات يمكنك متابعة الدورة من الترتيب الجديد . أما لو كنت قد أنهيت الكثير من المسارات فيمكنك إتباع الترتيب القديم كما أنت لا توجد مشكلة . حيث حاليا يتم تحديث الدورة ولهذا إختلف ترتيب المسارات . وهذه هي ترتيب المسارات السابقة : أساسيات بايثون. تطبيقات عملية على النماذج اللغوية الكبيرة 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 ولكن هذا خاطئ . بل يجب تمرير دالة . وإنشاء تلك الدالة التي تقوم بحذف المهمة أو تعديلها . هذا الأمر كما تم شرحه في مشروع تطبيق الملاحظات . يمكنك مراجعة هذا الجزء لفهمه بشكل أفضل.