Mustafa Suleiman

من الجيد أنك تستخدم المتغيرات vriables في CSS من خلال :root ، لكنك استخدمتها فقط من أجل الخط، عود نفسك على استخدامها فيمكنك كمثال إنشاء متغير للون الرئيسي وكمثال:
:root { font-family: Arial, Helvetica, sans-serif; --bg-clr: #eee } .parent { background-color: var(--bg-clr) } حيث يستخدم :root لتعريف الخصائص العامة المتعلقة بالمستند، والتي يمكن الوصول إليها من جميع العناصر في المستند. عند تعريف خصائص في :root، يمكن الاستفادة منها في جميع أنحاء المستند، مما يوفر الوقت والجهد في الكتابة والصيانة.
بالإضافة أيضًا إلى ما ذكره أسامة، يمكن تحسين تباعد العناصر في عنصر الـ parent بحيث تبدو العناصر أكثر اتساقًا وتتناسب بشكل أفضل.
علاوة على ذلك ، يمكنك تحسين مظهر خطوط الأوسط في العناصر النصية ، مثل الـ or ، لجعلها أكثر وضوحًا.
بالنسبة للألوان أنصحك باستخدام https://www.happyhues.co/ فستتعلم منها الكثير بالنسبة لاستخدام ألوان متناسقة ومريحة للعين، وستجد بالموقع لوحات ألوان جاهزة مع شرح كيف يتم استخدام كل لون داخل موقعك.

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

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

لحل هذه المشكلة، يجب التأكد من أن نوع البيانات المستلمة من الخادم يتوافق مع التنسيق المتوقع للبيانات، وأيضًا يجب التحقق من الشكل الذي تأخذه البيانات قبل استخدامها في التطبيق.
وعلى الرغم من أنه يبدو أن الخادم يرجع بيانات في شكل كائن (object)، إلا أنه يحتوي على مفتاح "data" الذي يتضمن مصفوفة من البيانات التي يمكن استخدامها. لذلك، يمكن استخدام الدالة map() بعد الوصول إلى مصفوفة البيانات في كائن الاستجابة.
لتطبيق الدالة map() على مصفوفة البيانات، يمكن تعديل الكود كما يلي:
const [data, setData] = useState([]); // Fetch users const fetchRandomUsers = () => { fetch('https://randomuser.me/api') .then(response => response.json()) .then(data => setData(data.results)); // اتصال بين مصفوفة النتائج في البيانات و state } useEffect(() => { fetchRandomUsers(); }, []); // تطبيق الدالة map() على مصفوفة البيانات return ( <div> {data.map(user => ( <div key={user.login.uuid}> <img src={user.picture.medium} alt={user.name.first} /> <p>{user.name.first} {user.name.last}</p> </div> ))} </div> ); في هذا المثال، تم تعديل setData() لاستخدام مفتاح النتائج (results) الموجود في البيانات التي تم استردادها من الخادم. وبعد ذلك، يتم تطبيق الدالة map() على مصفوفة البيانات لإنشاء قائمة المستخدمين. يجب تذكير بوضع الخاصية الفريدة (key) لكل عنصر في المصفوفة، والتي تساعد في تحديث العناصر بشكل صحيح في React.

عليكم السلام،
 يتم استخدام null و undefined بطرق مختلفة ولأسباب مختلفة في JavaScript.
حيث يتم استخدام undefined عادة عندما تريد الإشارة إلى متغير لم يتم تعيين قيمة له. على سبيل المثال، إذا كنت تعرف متغيرًا بدون قيمة محددة، فيمكنك تعيين قيمة undefined له.
من ناحية أخرى، يتم استخدام null عادة لإشارة إلى أن المتغير لا يحتوي على أي قيمة في الوقت الحالي. على سبيل المثال، يمكن أن تعيين قيمة null إلى متغير بعدما تم استخدامه في وقت ما.
يمكن استخدام undefined و null معًا لإشارة إلى أن المتغير لم يتم تعيين أي قيمة له، ولا يحتوي على أي قيمة في الوقت الحالي.
وسأشرح لك بشكل أكثر تفصيلاً.
تستخدم قيمة undefined عادة في الحالات التالية:
عند تعريف متغير جديد ولم يتم تعيين أي قيمة له بعد، فإن قيمته تكون undefined بشكل افتراضي. عندما يتم إرجاع قيمة undefined من دالة أو طريقة في حالة عدم وجود قيمة للإرجاع. عندما تتم مقارنة متغير مع undefined للتحقق مما إذا كان يحتوي على قيمة أو لا. استخدام قيمة null
غالباً ما تستخدم لإعطاء قيمة فارغة لمتغير معين عندما يكون من المهم تفريقه عن القيمة undefined. على سبيل المثال، عندما يتم تحميل بيانات من خادم ولا يوجد بيانات متاحة للعرض، يمكن استخدام null بدلاً من undefined لتفريق الحالة الفارغة عن حالة عدم تعيين القيمة.
لاحظ أن القيمتين لهما استخدامات مختلفة، وغالبًا ما تختلف تبعًا للحالة التي تواجهها. لذلك، يجب عليك اختيار القيمة المناسبة بناءً على الحالة التي تواجهها.
ولاحظ أيضًا أن كلا القيمتين تعطي قيمة false عندما تستخدم في ظروف معينة مثل قياس قيمة متغير boolean، لكن الاستخدام الرئيسي لهما مختلف ولا ينبغي الخلط بينهما.
 بعض الأمثلة التوضيحية التي تظهر كيفية استخدام null و undefined في JavaScript:
مثال على undefined:
let x; // تعريف المتغير دون تعيين قيمة if (x === undefined) { console.log("x is undefined"); // سيتم طباعة هذه الرسالة لأن x ليس له قيمة } مثال على null:
let y = null; // تعريف المتغير وتعيينه قيمة null if (y === null) { console.log("y is null"); // سيتم طباعة هذه الرسالة لأن y تم تعيينها بقيمة null } مثال يستخدم كلا القيمتين:
let z; // تعريف المتغير دون تعيين قيمة z = null; // تعيين قيمة null للمتغير if (z === null || z === undefined) { console.log("z is null or undefined"); // سيتم طباعة هذه الرسالة لأن z ليس له قيمة أو تم تعيينها بقيمة null } لاحظ أن القيمتين تحددان بشكل مختلف في JavaScript ويمكن استخدام كلا القيمتين بطرق مختلفة لتحقيق مختلف الأغراض.
https://wiki.hsoub.com/JavaScript/undefined
https://wiki.hsoub.com/JavaScript/null

يمكن توسيط عنصر div باستخدام العديد من الطرق المختلفة في CSS. ومن بين هذه الطرق:
1- استخدام margin: auto
يمكن توسيط العنصر div بوضع margin: auto له. يجب على العنصر div أن يكون له عرض محدد ويجب أن يكون محيطه الخارجي مفعلًا.
مثال:
HTML:
<div class="container"> <p>Hello, World!</p> </div> CSS:
.container { width: 50%; margin: auto; } 2- استخدام flexbox
يمكن استخدام Flexbox لتوسيط عنصر div. يجب على العنصر الرئيسي (parent element) أن يكون له display: flex ويجب أن يستخدم justify-content: center و align-items: center.
مثال:
HTML:
<div class="container"> <p>Hello, World!</p> </div> CSS:
.container { display: flex; justify-content: center; align-items: center; height: 100vh; } 3- استخدام grid
يمكن استخدام CSS grid لتوسيط عنصر div. يجب على العنصر الرئيسي (parent element) أن يكون له display: grid ويجب على العنصر الفرعي (child element) أن يكون له grid-column و grid-row محدد.
مثال:
HTML:
<div class="container"> <p>Hello, World!</p> </div> CSS:
.container { display: grid; place-items: center; height: 100vh; } .container p { grid-column: 1 / -1; grid-row: 1 / -1; text-align: center; } يجب تحديد height للعنصر الرئيسي في حال استخدام Flexbox أو Grid، حتى يتم توسيط العنصر الفرعي بشكل صحيح. يمكن استخدام قيمة نسبية مثل vh لضمان أن الارتفاع يمتد عبر جميع شاشات العرض بشكل صحيح.
 

المشكلة أن الكود الخاص بك يعتمد على الحالة العامة isSelected في المكون الأساسي App.js للتحقق مما إذا كان المقعد المختار يجب أن يتغير إلى الحالة المحددة أم لا. وعند النقر على أي مقعد، تم تغيير الحالة العامة isSelected في App.js، مما يؤدي إلى تحديث كافة المقاعد في الصف بناءً على الحالة العامة الجديدة، وليس المقعد الذي تم النقر عليه فقط.
لتجنب هذه المشكلة، تم تعديل الكود بالأسفل لإنشاء حالة جديدة في كل مكون فرعي Row.js للتحقق من ما إذا كان المقعد المختار يجب أن يتغير إلى الحالة المحددة أم لا، وبالتالي يمكن تحديث حالة مقعد واحد دون تحديث كافة المقاعد في الصف.
يمكنك إضافة خاصية isSelected إلى عنصر النقر في مكانه لتحديد حالته، ثم استخدامها في تعيين الكلاس المناسب لهذا العنصر فقط. يمكن تحقيق ذلك من خلال تغيير الدالة handleClick في App.js على النحو التالي:
const handleClick = (index) => { setSelectedIndex(index) } ثم في Row.js، يمكن تحديث الكلاس المستخدم بناءً على قيمة isSelected المستقبلة من الأب:
function Row({id,isSelected,handleClick,selectedIndex}) { return ( <div className='row'> { [...Array(8)].map((_,index)=>( <div className={ (id===1 && index===3) || (id===1 && index===4) || (id===2 && index===6) || (id===2 && index===7) || (id===4 && index===3) || (id===4 && index===4) || (id===5 && index===4) || (id===5 && index===5) || (id===5 && index===6) ? 'seat occupied' : selectedIndex === index ? 'seat selected' : 'seat' } key={index} onClick={() => handleClick(index)} > <div></div> </div> )) } </div> ) }

شرح إنتاج أرقام بطاقات الشحن باستخدام تقنيات تعلم الآلة باختصار:
أرقام بطاقات الشحن هي مجموعة من الأرقام التي تم إنشاؤها بطريقة عشوائية وتستخدم لإعادة شحن رصيد الهواتف المحمولة. يتم توليد هذه الأرقام بواسطة أنظمة حاسوبية خاصة تستخدم خوارزميات معينة لإنشاء أرقام عشوائية فريدة.
يختلف تنسيق أرقام بطاقات الشحن من بلد لآخر ، ولكن عمومًا فإن أرقام بطاقات الشحن تتكون من مجموعة من الأرقام العشوائية التي تم توليدها بطريقة عشوائية وفقًا لمعايير محددة. عادةً ما تتكون أرقام بطاقات الشحن من 12 رقمًا في بعض البلدان، و16 رقمًا في البلدان الأخرى.
يمكن استخدام تقنيات الذكاء الاصطناعي لتوقع وتوليد أرقام بطاقات الشحن المحتملة وتحسين الأداء العشوائي لعملية إنشاء الأرقام. ولكن يجب الانتباه إلى أن استخدام التقنيات الذكية يتطلب معالجة كميات كبيرة من البيانات وتحليلها بدقة لإنتاج أرقام بطاقات الشحن صالحة وفعالة.
وسأشرح لك المزيد إذا أردت التفصيل:
توليد أرقام بطاقات الشحن يتم عادةً باستخدام مولدات أرقام عشوائية. يتم إنشاء هذه المولدات باستخدام خوارزميات عشوائية وتوليد مجموعة من الأرقام العشوائية بشكل مستمر. ومن ثم يتم استخدام هذه الأرقام العشوائية لإنشاء أرقام بطاقات الشحن.
لنفترض أنه لدينا خوارزمية تنتج أرقامًا عشوائية من خلال إجراء عمليات حسابية على أرقام معينة. ومن ثم يتم تحويل الأرقام العشوائية إلى أرقام بطاقات الشحن باستخدام معايير محددة. على سبيل المثال، يمكن استخدام القواعد التالية لإنشاء أرقام بطاقات الشحن من الأرقام العشوائية:
يجب أن تتكون كل رقم بطاقة شحن من 16 رقمًا. يجب أن تبدأ جميع بطاقات الشحن برقم معين مثل "4" أو "5". يجب أن تتبع الأرقام العشوائية بنمط معين مثل رقم "1" ثم رقم "3" ثم رقم "7" وهكذا. مثال على طريقة إنشاء رقم بطاقة شحن محتمل:
4536 7112 8900 1457 في هذا المثال، يتم استخدام أرقام عشوائية معينة لإنشاء الرقم بطاقة الشحن، وتتبع قواعد محددة لتحويل الأرقام العشوائية إلى رقم بطاقة شحن صالحة.
يمكن استخدام تقنيات الذكاء الاصطناعي لتوليد أرقام بطاقات الشحن عن طريق تدريب النماذج على البيانات التاريخية لإنتاج أرقام بطاقات الشحن متوافقة ومتناسقة مع القواعد والمعايير المحددة. ويمكن استخدام هذه التقنيات لتحسين جودة الأرقام التي تنتجها مولدات الأرقام العشوائية وتقليل احتمالية إصدار أرقام غير صالحة أو مكررة. يمكن أيضًا استخدام التقنيات الذكية لمراقبة استخدام بطاقات الشحن وتحديد الأنماط المتكررة والاحتمالات الإحصائية للاستخدام لتحسين عمليات إنتاج الأرقام.
ومن المهم الإشارة إلى أنه يجب أن تتم مراعاة الجوانب الأمنية عند إنشاء أرقام بطاقات الشحن، حيث يجب توليد أرقام عشوائية غير متوقعة بحيث لا يمكن تخمينها بسهولة. كما يجب التأكد من أن الأرقام لا يمكن الوصول إليها بسهولة وأن تتبع معايير الأمان اللازمة لحمايتها من الاختراق والاستخدام غير المصرح به.
بالإضافة إلى ذلك، يجب مراعاة القوانين والتشريعات المحلية المتعلقة بصدور بطاقات الشحن والتأكد من تطبيقها بشكل صحيح. في بعض الحالات، قد يتم فرض قيود على عدد الأرقام التي يمكن إصدارها أو على صلاحية الأرقام المصدرة.
في النهاية، يجب العمل على تحسين جودة إصدار الأرقام العشوائية وتطبيق معايير الأمان المناسبة لحماية بيانات المستخدمين والمعلومات الحساسة المرتبطة بعمليات إصدار بطاقات الشحن.
ما هي البرامج أو اللغات المستخدمة في ذلك
يمكن استخدام العديد من البرامج واللغات في إنتاج أرقام بطاقات الشحن باستخدام تقنيات الذكاء الاصطناعي، وفيما يلي بعض الأمثلة:
1- لغة برمجة Python: تستخدم عادة لتدريب نماذج التعلم الآلي وإنتاج أرقام بطاقات الشحن. تمتلك Python مكتبات وأدوات متقدمة لتحليل البيانات وتطوير نماذج التعلم الآلي وتدريبها.
2- TensorFlow: إطار عمل تعلم الآلة مفتوح المصدر متوافق مع Python، يسمح بتطوير نماذج التعلم الآلي المتقدمة وتحسين الأداء الخاص بإنتاج الأرقام.
3- Keras: هو إطار عمل تعلم الآلة مفتوح المصدر يتوافق مع Python، يسمح بتصميم وتدريب النماذج العميقة بكفاءة عالية.
4- MATLAB: برنامج لتطوير نماذج التعلم الآلي وتحليل البيانات، يتضمن أدوات متقدمة لتحسين الأداء الخاص بإنتاج الأرقام.
5- R: لغة برمجة مفتوحة المصدر تستخدم في تحليل البيانات وتطوير النماذج الإحصائية، يتضمن مجموعة واسعة من الحزم والمكتبات لتدريب النماذج التعلم الآلي.
هناك أيضًا العديد من الأدوات والبرامج الأخرى التي يمكن استخدامها لتطوير نماذج التعلم الآلي وإنتاج أرقام بطاقات الشحن، ويعتمد الاختيار على متطلبات المشروع والميزانية والمعرفة الفنية لفريق العمل.
أمثلة للخوارزميات المستخدمة
1- خوارزمية الشبكات العصبونية الاصطناعية (Artificial Neural Networks): تستخدم هذه الخوارزمية في تدريب النماذج العميقة لتوليد الأرقام المتوافقة مع القواعد المحددة، وتعتبر أحد الخوارزميات الأكثر فعالية في تحليل البيانات الكبيرة.
2- خوارزمية الآلة العصبية البيتزو (Pizza Neural Network): يتم استخدام هذه الخوارزمية لتوليد أرقام البطاقات التي تتطلب التحقق منها في الوقت الحقيقي، وتعتمد هذه الخوارزمية على مجموعة من القواعد والمتغيرات لتوليد أرقام متوافقة.
3- خوارزمية العصف الذهني (Brainstorming Algorithm): تستخدم هذه الخوارزمية لإنتاج أرقام بطاقات الشحن بشكل عشوائي بناءً على المعايير المحددة، وتعتمد هذه الخوارزمية على استخدام عدة تقنيات مثل المحاكاة والمدى المرجعي والتحسين التكيفي.
4- خوارزمية الإعداد (Preparation Algorithm): تستخدم هذه الخوارزمية لإعداد البيانات الضرورية لتدريب النماذج التعلم الآلي المستخدمة في إنتاج أرقام بطاقات الشحن، وتتضمن هذه الخوارزمية استخدام مجموعة من التقنيات مثل تصنيف البيانات وتنظيفها وتحويلها.
هذه هي بعض الأمثلة للخوارزميات التي يمكن استخدامها في إنتاج أرقام بطاقات الشحن باستخدام تقنيات تعلم الآلة، ويمكن اختيار الخوارزمية المناسبة بناءً على المتطلبات.
من الجدير بالذكر أنه يمكن استخدام مجموعة واسعة من الخوارزميات في هذا المجال، وذلك يعتمد على الخصائص الفريدة للمشروع والبيانات المتاحة. على سبيل المثال، يمكن استخدام خوارزميات الشبكات العصبونية العميقة مثل Recurrent Neural Networks (RNN) و Long Short-Term Memory (LSTM) و Generative Adversarial Networks (GAN) لإنتاج أرقام بطاقات الشحن. ويمكن أيضًا استخدام خوارزميات التحليل العاملي Principal Component Analysis (PCA) والتحليل التفاضلي Differential Analysis (DA) لتقليل الأبعاد وتحسين دقة النماذج. وتستخدم خوارزميات تعلم الآلة الإحصائية مثل الانحدار الخطي Linear Regression والتصنيف اللوجستي Logistic Regression و Support Vector Machines (SVM) في هذا المجال أيضًا. ويمكن أيضًا استخدام الأساليب الحديثة مثل Deep Reinforcement Learning لتحسين جودة إنتاج الأرقام.
مثال لإنشاء سلسلة أرقام بطاقات الشحن باستخدام لغة Python
هذا مثال بسيط لإنشاء سلسلة أرقام بطاقات الشحن باستخدام لغة Python والمكتبة الخاصة بتوليد الأرقام "random":
import random def generate_card_number(length): card_num = "" for i in range(length): card_num += str(random.randint(0, 9)) return card_num # تعريف طول رقم البطاقة card_length = 16 # توليد 5 بطاقات عشوائية for i in range(5): card_num = generate_card_number(card_length) print(card_num) هذا المثال ينشئ دالة توليد الأرقام "generate_card_number" وتستخدم مكتبة "random" في Python لإنشاء سلسلة رقمية عشوائية من الأرقام بطول محدد. ثم تستخدم دالة "generate_card_number" لإنشاء عدد معين من الأرقام العشوائية (في هذه الحالة 5 أرقام) وطباعتها في النهاية. يمكن تعديل هذا المثال واستخدام تقنيات تعلم الآلة لإنتاج الأرقام بطريقة أكثر دقة وفعالية.

لإضافة حالة للمقاعد المحجوزة (occupied seats) ، يمكن إضافة خاصية (prop) إلى عنصر Seat وتمرير قيمة مختلفة لكل Seat بناءً على حالة المقعد.
يمكن تحديد حالة المقعد (occupied or not) بواسطة الحالة المحلية (local state) داخل عنصر Seat. على سبيل المثال:
import React, { useState } from 'react' function Seat(props) { const [isOccupied, setIsOccupied] = useState(false); const handleClick = () => { setIsOccupied(!isOccupied); } return ( <div className={isOccupied ? 'seat occupied' : 'seat'} onClick={handleClick}> <div></div> </div> ) } export default Seat في هذا المثال ، تم إضافة خاصية (prop) إلى عنصر Seat لتمرير قيمة الحالة المحجوزة (occupied) من Row. يتم تحديد حالة المقعد (occupied) عن طريق النقر على المقعد ، ويتم تغيير حالة المقعد (isOccupied) باستخدام الحالة المحلية (useState). ويتم تحديد الفئة (class) المستخدمة لعنصر Seat باستخدام تعبير تفاضلي (ternary expression) بناءً على قيمة الحالة المحجوزة (isOccupied).
بعد ذلك ، يمكن تمرير قيمة محددة للحالة المحجوزة لكل Seat في Row باستخدام الخاصية (prop). يمكن تعيين القيمة المحددة للخاصية (prop) لكل Seat في Row بناءً على الحالة الفعلية للمقعد في التطبيق.
يمكن تمرير الحالة المحجوزة (occupied) كخاصية (prop) إلى عنصر Seat في Row كما يلي:
import React from 'react' import Seat from './Seat' function Row() { return ( <div className='row'> <Seat occupied={true} /> <Seat occupied={false} /> <Seat occupied={false} /> <Seat occupied={true} /> <Seat occupied={false} /> <Seat occupied={true} /> <Seat occupied={false} /> <Seat occupied={false} /> </div> ) } export default Row في هذا المثال ، يتم استخدام القيمة الممررة للخاصية (prop) occupied لتحديد الفئة (class) المناسبة لعنصر Seat. إذا كانت القيمة الممررة لـ (prop) occupied هي true ، فإن العنصر Seat يحصل على الفئة (class) occupied ، وإلا فإنه يحصل على الفئة (class) الافتراضية (not-occupied).
يمكن تمرير الحالة الفعلية للمقاعد (occupied seats) إلى Row كخصائص (props) من المكون الأب (parent component) الذي يحتوي على Rows component. على سبيل المثال:
import React from 'react' import Rows from './Rows' function App() { const occupiedSeats = [2, 5, 6, 7]; // assuming seat numbers start from 1 return ( <div> <Rows occupiedSeats={occupiedSeats} /> </div> ) } export default App

نعم، يمكنك إقلاع نظام Ubuntu من الهارد الخارجي دون أي ضرر على نظام Windows 10 المثبت على الهارد الداخلي. يجب عليك فقط التأكد من أن إعدادات الإقلاع في جهاز الكمبيوتر الخاص بك مُعدَّة للسماح بالإقلاع من وسائط التخزين الخارجية، وذلك من خلال تغيير ترتيب الإقلاع في BIOS أو UEFI.
عند البدء في عملية الإقلاع، سيظهر لك شاشة تحتوي على قائمة بخيارات الإقلاع المتاحة، ومن هناك يمكنك اختيار الهارد الخارجي لتشغيل نظام Ubuntu. وبعد الانتهاء من استخدام Ubuntu، يمكنك إعادة تشغيل الكمبيوتر واختيار الهارد الداخلي للعودة إلى نظام Windows 10 الذي تم تثبيته على الهارد الداخلي.
حسنًا، هنا خطوات مفصلة لإقلاع نظام Ubuntu من الهارد الخارجي بأمان:
قم بتوصيل الهارد الخارجي بجهاز الكمبيوتر الذي يحتوي على نظام Windows 10 المثبت على الهارد الداخلي. قم بتشغيل الكمبيوتر واضغط مرارًا على مفتاح الوصول للبيوس أو UEFI (مثل Delete أو F2 أو F10 أو F12 أو Esc) حتى يتم فتح واجهة BIOS أو UEFI. يمكنك العثور على الزر الصحيح لجهاز الكمبيوتر الخاص بك عبر الإنترنت أو في دليل المستخدم الخاص به. بمجرد الدخول إلى واجهة BIOS أو UEFI، قم بالتنقل إلى القائمة المسؤولة عن ترتيب الإقلاع. قد يكون اسم القائمة مختلفًا اعتمادًا على نوع جهاز الكمبيوتر الخاص بك. اختر الهارد الخارجي من بين القائمة المتاحة للإقلاع. قم بتحريكه إلى الأعلى حتى يتم تحديده كخيار إقلاع أولي. تأكد من حفظ الإعدادات الجديدة. قم بإعادة تشغيل الكمبيوتر. سيعمل الكمبيوتر على الآن من الهارد الخارجي. ستحتاج إلى إدخال اسم المستخدم وكلمة المرور الخاصة بك لتسجيل الدخول إلى نظام Ubuntu. بعد الدخول، يمكنك البدء في استخدام Ubuntu كما تشاء. عند الانتهاء من استخدام Ubuntu، قم بإيقاف التشغيل الكمبيوتر وفصل الهارد الخارجي. يمكنك الآن تشغيل الكمبيوتر واختيار الهارد الداخلي للعودة إلى نظام Windows 10. لا تنسَ حفظ الإعدادات الجديدة للترتيب في BIOS أو UEFI إذا كنت ترغب في العودة إلى الإقلاع من الهارد داخلي. ومن الأفضل أيضًا إنشاء نسخة احتياطية من بياناتك الهامة على كل من الهارد الداخلي والخارجي قبل القيام بأي تغييرات على ترتيب الإقلاع. كما ينصح بإجراء عملية فحص للهارد الداخلي بواسطة برنامج مضاد للفيروسات للتأكد من عدم وجود أي مشكلات أو تهديدات قبل إجراء أي تغييرات عليه.
وأخيرًا، قد يختلف الإجراء الدقيق لترتيب الإقلاع حسب نوع جهاز الكمبيوتر الخاص بك، لذلك ينصح بالتحقق من دليل المستخدم أو البحث على الإنترنت لمزيد من المعلومات حول كيفية تغيير ترتيب الإقلاع في جهاز الكمبيوتر الخاص بك.
 

يبدو أن هناك مشكلة في إنشاء ملف التوقيع الخاص بتطبيقك. يمكنك محاولة تشغيل التطبيق باستخدام إعدادات التوقيع الافتراضية المؤقتة لحل المشكلة مؤقتًا وتمكينك من تشغيل التطبيق على الأجهزة المحلية.
1. لفعل ذلك، يمكنك تنفيذ الخطوات التالية:
2. انتقل إلى مجلد المشروع على جهاز الكمبيوتر الخاص بك.
3. في مجلد المشروع، ابحث عن ملف build.gradle وافتحه باستخدام محرر النصوص المفضل لديك.
4. ابحث عن القسم signingConfigs وتأكد من أن جميع القيم المطلوبة معبأة بشكل صحيح.
أضف الكود التالي في ملف build.gradle داخل القسم android:
signingConfigs { debug { storeFile file('debug.keystore') storePassword 'android' keyAlias 'androiddebugkey' keyPassword 'android' v1SigningEnabled true v2SigningEnabled true } } buildTypes { debug { signingConfig signingConfigs.debug } } 5. حفظ الملف.
6. في نافذة Android Studio، قم بالنقر فوق Build من القائمة العلوية ، ثم Clean Project.
7. قم بالنقر فوق Build ، ثم Rebuild Project.
8. قم بتشغيل التطبيق مرة أخرى.
إذا استمرت المشكلة، فيمكنك تشغيل الأمر --stacktrace لعرض المزيد من المعلومات عن المشكلة.
وأيضًا قم بالرجوع إلى الإجابات على السؤال التالي وتجربة الحلول المطروحة في حال استمرار المشكلة.
 

في البداية إذا أردت التحكم في جهازك عن بعد فقط، فيمكنك استخدام برامج مثل TeamViewer  وتركها تعمل على الجهاز والدخول عليه بواسطة الـ IP وباستطاعتك تعيين كلمة سر.
أما تحويل جهازك إلى سيرفر عام يمكن أن يتم باستخدام بعض البرامج المجانية التي تمكنك من إعداد خادم على جهازك الخاص وجعله متاحًا للوصول من أي جهاز آخر على شبكة الإنترنت. سأشرح لك الخطوات الأساسية اللازمة لتحقيق ذلك:
1- تثبيت برنامج خادم الويب: يمكن استخدام أي برنامج خادم ويب مثل XAMPP أو WAMP أو Apache أو laragon لإنشاء خادم ويب. يوفر هذا البرنامج خادم ويب وقاعدة بيانات و PHP. يمكنك تنزيل البرنامج من موقع الويب الرسمي وتثبيته على جهازك.
2- اختبار الويب سيرفر: يجب التأكد من أن الويب سيرفر يعمل بشكل صحيح على جهازك. يمكن القيام بذلك عن طريق فتح متصفح وزيارة localhost.
3- تعيين عنوان IP ثابت لجهازك: تعيين عنوان IP الثابت يعني تحديد عنوان الإنترنت الخاص بجهاز الكمبيوتر الخاص بك بشكل دائم، والذي يتم تعيينه يدويًا. يختلف هذا عن العنوان الديناميكي الذي يتم تعيينه تلقائيًا عند الاتصال بالإنترنت.
بعد تثبيت برنامج الخادم الخاص بك، سيكون من الضروري تعيين عنوان IP الثابت لجهاز الكمبيوتر الخاص بك، حيث يمكن استخدام هذا العنوان للوصول إلى جهاز الكمبيوتر الخاص بك عبر الشبكة. ومن أجل ذلك يمكنك العثور على إعداد تعيين العنوان الثابت في قسم الشبكة في إعدادات جهاز الكمبيوتر الخاص بك.

4- إعداد المنافذ اللازمة: يجب فتح المنافذ الخاصة بالويب سيرفر على جدار الحماية الخاص بالجهاز، للسماح لأي شخص في الشبكة بالوصول إلى الويب سيرفر. يجب فتح المنافذ 80 لبرتوكول HTTP و 443 لبروتوكول HTTPS.
 سأشرح الخطوات اللازمة لفتح المنافذ على راوتر من نوع TP-Link Archer C7.
تسجيل الدخول إلى لوحة التحكم الخاصة بالراوتر: افتح متصفح الويب الخاص بك واكتب عنوان IP الافتراضي الخاص بالراوتر في شريط العنوان (عادةً ما يكون 192.168.0.1 أو 192.168.1.1). سيطلب منك إدخال اسم مستخدم وكلمة مرور لتسجيل الدخول إلى لوحة التحكم. الوصول إلى قسم إعدادات المنافذ: بمجرد تسجيل الدخول إلى لوحة التحكم، انتقل إلى قسم "Advanced" (متقدم) ثم اختر "Port Forwarding" (توجيه المنافذ).
إضافة إعدادات التوجيه: اختر "Add New" (إضافة جديدة) لإنشاء إعدادات التوجيه الجديدة. سيطلب منك تحديد اسم الجهاز (عادةً ما يكون اسم الخادم) وعنوان IP الخاص بالجهاز (عنوان IP الثابت الذي قمت بتعيينه سابقًا) ورقم المنفذ الداخلي والخارجي.
حفظ الإعدادات: بعد إدخال جميع التفاصيل اللازمة، انقر على "Save" (حفظ) لحفظ الإعدادات الجديدة. ستحتاج إلى تكرار هذه الخطوات لإضافة إعدادات توجيه منفذ إضافية.
التأكد من البورتات التي تم فتحها من خلال التوجه لموقع https://portchecker.co/checking وستجد أنه تعرف على الـ public IP الخاص بجهازك ما عليك سوى كتابة بورت 80 ثم اضغط على check وكرر نفس الأمر مع بورت 443 وتأكد من ظهور كلمة port x is open.
من المهم ملاحظة أن إعدادات توجيه المنافذ يمكن أن تختلف قليلاً بين الراوترات المختلفة، ومن المهم أيضًا إتباع الإرشادات الخاصة بالراوتر الخاص بك للتأكد من تمكين توجيه المنافذ بطريقة صحيحة.
5- تفعيل خدمة DNS: بعد الانتهاء من إعداد إعدادات الراوتر وتحديد عنوان IP الخاص بالجهاز الخادم، يمكنك استخدام DNS لتسهيل عملية الوصول إلى الخادم. يمكنك استخدام خدمات DNS المجانية مثل No-IP أو DynDNS لتسجيل عنوان IP الخاص بالخادم الخاص بك وربطه بعنوان URL سهل الاستخدام.
وسبب القيام بتلك الخطوة هو ربط الـ public IP باسم دومين أو عنوان URL يمكنك كتابته والدخول على جهازك عن بعد، فربما بعد إعادة تشغيل الراوتر قد يتغير الـ public IP، ويمكنك الحصول من مزود الخدمة على static IP.
الخطوات لاستخدام DNS هي كالتالي:
قم بإنشاء حساب على موقع خدمة DNS المختارة والأفضل No-IP لكونها مجانية. أدخل اسم النطاق الذي تريد استخدامه واتبع التعليمات لربط عنوان IP الخاص بالخادم بالاسم المستخدم في النطاق. تأكد من تحديث إعدادات الراوتر الخاص بك للسماح بمرور حركة المرور المرتبطة بـ DNS من الخارج إلى الجهاز الخادم. قم بتنزيل برنامج العميل الذي يقدمه موقع خدمة DNS المختارة وتثبيته على الجهاز الخادم. سيتم تشغيل هذا البرنامج في الخلفية وسيقوم بتحديث عنوان IP الخاص بالخادم بشكل دوري. يمكنك الآن الوصول إلى الخادم باستخدام عنوان URL المحدد لخدمة DNS المستخدمة.
 

تشير الرسالة التي تلقيتها إلى أنك تحاول استخدام React hook ، وتحديدًا الـ useDispatch hook ، خارج الـ component. يمكن استخدام React hooks داخل الـ function component أو بداخل custom hooks أخرى فقط والتي بدورها هي داخل function component.
يبدو من الكود الذي قدمته أنك تحاول إرسال حدث لإزالة عنصر من العربة عند النقر فوق رمز الحذف. ومع ذلك ، يجب عليك التأكد من أن العنصر الذي يحتوي على هذا الكود هو function component. 
هنا مثال على كيفية تعديل الكود الخاص بك لاستخدام الـ useDispatch hook داخل function component:
import { useDispatch } from 'react-redux'; import { removeFromCart } from 'path/to/actions'; function CartItem({ item }) { const dispatch = useDispatch(); const handleRemove = () => { dispatch(removeFromCart(item.id)); } return ( <div className="cart-item"> <div className="cart-item-details"> {/* item details */} </div> <i className="bi bi-trash fill cart-item-delete-icon" onClick={handleRemove}></i> </div> ); } export default CartItem; في هذا المثال ، CartItem هو function component.  يستخدم الـ useDispatch hook للحصول على الدالة dispatch ، التي يتم استخدامها لإرسال الحدث removeFromCart عند النقر فوق رمز الحذف. تأكد من أن عنصرك يتبع هذه الهيكلية وأنك تستورد الـ useDispatch hook من الموقع الصحيح.