Mustafa Suleiman

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

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

في البداية يجب الإهتمام بكيفية التقديم على العروض وكيفية جذب إهتمام العملاء، من خلال قراءة تفاصيل المشروع وتبيان أنك مناسب للعمل عن طريقة توضيح ذلك في العرض المقدم.
سواء عن طريق خبرات سابقة في معرض أعمالك أو سنوات خبرة لديك يمكن إثباتها من خلال شرح الكيفية التي يمكن تنفيذ المشروع بها وإيضاح الخطوات التي سيتم إتباعها لتنفيذ العمل، بمعنى أدق يجب أن يرى العميل أن لديك الخبرة الكافية.
وذلك لا يعني ضرورة الإلمام بجيمع جوانب المشروع، فيكفي أن تمتلك 70% من المعرفة اللازمة والباقي يمكنك تعلمه والبحث عنه لتنفيذ المشروع، طالما لديك المهارة والأساسيات.
أيضًا هناك جانب هام وهو الإحترافية، حيث تجد أغلب المستقلين يتعاملون كما لو أنهم يتحدثون عبر الواتساب عند التقديم على المشاريع، بل يجب تبيان أنك شخص ذو خبرة ومصداقية فهما العامل الأول الذي يبحث عنه العملاء.
لذلك إبحث جيدًا عن كيفية كتابة عرض تظهر فيه مهاراتك وبشكل مختصر أيضًا، بجانب ضرورة التعامل بشكل إحترافي كما لو أنك شركة، يعني الإلتزام أولاً ثم المهارة، فالغالبية لديهم المهارة لكن جانب الإلتزام وطريقة التعامل مع العملاء متدنية جدًا.
أمر آخر وهو لا تظهر بشكل كما لو أنك تترجى العميل لقبول عرضك، بل تعامل بشكل طبيعي فالنتيجة عكسية وسيتم رفض عرضك إذا قمت بذلك.
تلك كانت بعض النصائح وهناك المزيد، يمكنك البحث والقراءة عن المهارات اللازمة لتصبح مستقل محترف.
بالنسبة لطريقة تسليم مللفات المشروع
قبل استلام المشروع يتم الإتفاق على التفاصيل مع العميل، فصدقًا ستتجنب الكثير من المشاكل إذا قمت بالإتفاق على كافة التفاصيل قبل بدأ المشروع.
يمكنك تحضير الأسئلة وإرسالها للعميل للإجابة عليها في ملف أو قم بالاستفسار عن كل سؤال بشكل منفصل، ومن ضمنها بالطبع كيف سيتم تسليم المشروع هل سيتم رفعه على استضافة مجانية؟ أم يتطلب نشر المشروع على استضافة مدفوعة وشراء دومين، وهل سيتم تصميم المشروع من قبلك أم هناك تصميمات جاهزة، وهل هناك محتوى أم سيتم إنشائه؟ ومدة تسليم المشروع فربما يريد العميل تنفيذه بسرعة وبالتأكيد ذلك يعني زيادة في تكلفة المشروع، فأي خدمة زيادة عن الكود لها تكلفتها، لكن رفع المشروع على استضافة وتسليمه يعمل بشكل سليم هو واجب عليك، طبعًا لن تدفع أنت إشتراك الاستضافة .
وطريقة التسليم بسيطة، قم بالتخطيط والتنفيذ للمشروع ثم رفعه على الاستضافة المطلوبة وربطه بقاعدة البيانات وربط الدومين أيضًا ثم تفعيل شهادة SSL.
بعد ذلك يتم تسليم ملفات المشروع للعميل منظمة وبها تعليقات على الكود لكي يسهل تطويره فيما بعد، مع كتابة إرشادات عن كيفية تشغيل المشروع إن لزم الأمر.
وتكاليف كل ذلك على العميل، فكل ما عليك هو التخطيط وكتابة الكود، فقد تجد عملاء قاموا بشراء استضافة ودومين قبل البدء في المشروع أساسًا.
وفي بعض الأحيان قد يتم إنشاء مستودع خاص على GitHub لتطوير المشروع عليه، وخاصًة إذا كان هناك فريق عمل.
إذا كان لديك أسئلة أو استفسارات أخرى لا تتردد في السؤال.
وأنصحك بقراءة المقالات التالية.
دليلك الشامل إلى العمل الحر عبر الإنترنت
تعرف على فن التعامل مع العملاء في مجالات العمل الحر المختلفة
القسم الخاص بمقالات العمل الحر على منصة مستقل:
https://blog.mostaql.com/tag/نصائح-للمستقلين/

سأوضح لك Flexbox بشكل بسيط وسهل مع توضيح ذلك بالأكواد.
أولاً شرح Flexbox بشكل مختصر
في البداية Flexbox هي تقنية CSS تستخدم لتنسيق وترتيب العناصر داخل الصفحة. تم تصميم Flexbox لتسهيل تنسيق العناصر داخل العناصر الأساسية مثل العناصر المتداخلة، والأزواج، والأعمدة، والأرقام.
يمكن استخدام Flexbox لتنسيق العناصر على محور واحد أو عدة محاور في نفس الوقت. يتم تحديد ترتيب وموقع العناصر في Flexbox باستخدام خصائص CSS مثل display وflex-direction وjustify-content وalign-items وغيرها.
فيما يلي مثال بسيط على استخدام Flexbox لترتيب العناصر على محور واحد:
<div class="flex-container"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> </div> <style> .flex-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .box1, .box2, .box3 { background-color: lightblue; padding: 10px; margin: 10px; flex: 1; } </style> في المثال السابق، تم استخدام Flexbox لترتيب العناصر على محور واحد (المحور الأفقي) باستخدام الخصائص display: flex و flex-direction: row. تم توزيع العناصر على المحور الأفقي باستخدام justify-content: space-between لترك فراغ بين الصناديق 1 و 2 و 3. تم تحديد موضع العناصر على المحور الرأسي باستخدام align-items: center.
لاحظ أن العناصر الثلاثة (box1 و box2 و box3) لديها خاصية flex: 1 التي تحدد نسبة الفضاء المتاح لكل صندوق داخل العنصر المرن. هذا يساعد على توزيع العناصر على المحور الأفقي بشكل متساوٍ.
أدوات لاستخدام وفهم flexbox بشكل سهل وبسيط
عليك باستخدام الموقع التالي إذا كنت تريد فهم خصائص flexbox حيث يعرض خصائص flexbox على هيئة صور متحركة لتبيان ماذا تفعل كل خاصية، فضع ذلك الموقع أمامك وأنت تستخدم flexbox وستجد نفسك قد فهمته بسهولة.
https://flexbox.malven.co/ وأيضًا هناك بعض ألعاب المتصفح التي غرضها تعليمك كيفية استخدام فليكس بوكس من خلال لعبة مسلية، وإليك بعضها:
https://flexboxfroggy.com/ https://codingfantasy.com/games/flexboxadventure شرح Flexbox بشكل مفصل
طريقة استخدام Flexbox تشمل العديد من الخصائص التي يمكن استخدامها لتنسيق العناصر وترتيبها في المساحة المتاحة. فيما يلي شرحًا لجميع الخصائص الخاصة ب Flexbox بالإضافة إلى أمثلة على استخدام كل منها.
1- display
خاصية display تحدد نوع عرض Flexbox. يمكن تعيينها إلى القيمة flex لعرض Flexbox. ويمكن تعيينها إلى inline-flex لعرض Flexbox على نفس سطر النص.
.flex-container { display: flex; } 2- flex-direction
خاصية flex-direction تحدد توجه العناصر داخل Flexbox. يمكن تعيينها إلى row لتوجيه العناصر أفقيًا، وإلى column لتوجيهها عموديًا. ويمكن استخدام row-reverse أو column-reverse لتوجيه العناصر بالاتجاه المعاكس.
.flex-container { display: flex; flex-direction: row; } 3- flex-wrap
خاصية flex-wrap تحدد ما إذا كانت العناصر في Flexbox يجب أن تنتقل إلى السطر التالي إذا كانت المساحة غير كافية. يمكن تعيينها إلى nowrap لعدم السماح بالتعبئة الزائدة، وإلى wrap للسماح بالتعبئة الزائدة وانتقال العناصر إلى السطر التالي.
.flex-container { display: flex; flex-wrap: wrap; } 4- justify-content
خاصية justify-content تحدد توزيع العناصر على محور Flexbox. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور، وإلى flex-end لتوزيعها على نهاية المحور، وإلى center لتوزيعها على وسط المحور، وإلى space-between لتوزيعها بتساوٍ على المحور، وإلى space-around لتوزيعها بالتساوي مع توفير مساحة إضافية حول كل عنصر.
.flex-container { display: flex; justify-content: center; } 5- align-items
خاصية align-items تحدد توزيع العناصر على محور عمودي متعامد على محور Flexbox. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور العمودي، وإلى flex-end لتوزيعها على نهاية المحور العمودي، وإلى center لتوزيعها على وسط المحور العمودي، وإلى baseline لتوزيعها على خط الأساس للنص، وإلى stretch لتوسيع العناصر لتملأ المساحة العمودية بأكملها.
.flex-container { display: flex; align-items: center; } 6- align-content
خاصية align-content تحدد توزيع العناصر الإضافية في الفراغ الإضافي على محور عمودي متعامد على محور Flexbox عند استخدام التعبئة الزائدة. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور العمودي، وإلى flex-end لتوزيعها على نهاية المحور العمودي، وإلى center لتوزيعها على وسط المحور العمودي، وإلى space-between لتوزيعها بتساوٍ على المحور، وإلى space-around لتوزيعها بالتساوي مع توفير مساحة إضافية حول كل عنصر، وإلى stretch لتوسيع العناصر لتملأ المساحة العمودية بأكملها.
.flex-container { display: flex; flex-wrap: wrap; align-content: center; } 7- flex-grow
خاصية flex-grow تحدد قدرة العنصر على التوسع في المساحة المتاحة. يمكن تعيينها إلى أي عدد صحيح (عادةً ما تستخدم قيم 0 و 1) ، حيث يتم توزيع المساحة المتاحة بالتساوي على جميع العناصر الذين يحملون هذه الخاصية بنسبة تناسبية مع قيمتها.
.flex-item { flex-grow: 1; } 8- flex-shrink
flex-shrink تحدد قدرة العنصر على الانكماش في حالة اضطراره لتقليص حجمه بسبب الفراغ المتاح لمجموعة Flexbox. يمكن تعيينها إلى أي عدد صحيح (عادةً ما تستخدم قيم 0 و 1) ، حيث يتم توزيع المساحة المتاحة بالتساوي على جميع العناصر الذين يحملون هذه الخاصية بنسبة تناسبية مع قيمتها. على سبيل المثال، عندما تقلل المساحة المتاحة، فإن العناصر التي تحمل القيم الأعلى ستتقلص بشكل أسرع من العناصر التي تحمل القيم الأقل.
.flex-item { flex-shrink: 1; } 9- flex-basis
خاصية flex-basis تحدد الحجم الأولي للعنصر قبل توزيع المساحة الإضافية المتاحة بين العناصر الموجودة في Flexbox. يمكن تعيينها إلى القيمة التي تعبر عن العرض أو الارتفاع، مثل 200px أو 50%. يمكن استخدام auto لتحديد حجم العنصر بناءً على حجم محتواه الفعلي.
.flex-item { flex-basis: 100px; } 10- flex
flex هي اختصار لثلاث خصائص flex-grow وflex-shrink وflex-basis بالترتيب. يمكن استخدامها بدلاً من تعيين الخصائص بشكل منفصل. يتم تحديد القيم المستخدمة في الاختصار كقيمة واحدة أو اثنين أو ثلاثة. على سبيل المثال، القيمة flex: 1 تحدد الخصائص flex-grow: 1 و flex-shrink: 1 و flex-basis: 0 للعنصر.
.flex-item { flex: 1 0 auto; } وبذلك إنتهينا من أهم الخصائص المستخدمة في Flexbox، والتي يمكن استخدامها لتنظيم وتحكم في توزيع العناصر وتحديد موقعها في الصفحة.
مصادر
 

من الجيد أنك تستخدم المتغيرات 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 من الموقع الصحيح.