Mustafa Suleiman

10 مارس 2023

بالتأكيد لغات HTML و CSS مهمتان جدًا لتطوير التطبيقات باستخدام JS. بل هما الأساس المكون لصفحات الويب فعندما تطور تطبيقًا ويب باستخدام JS، فإنك ستحتاج بالتأكيد إلى HTML و CSS لتصميم وعرض واجهة المستخدم.

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

وبالنسبة للسؤال الثالث، يجب عليك تعلم إحدى أطر العمل مثل React أو Angular أو Vue.js إذا كنت تريد الحصول على وظيفة أو العمل على مواقع العمل الحر، وبدون الأساسيات لن تصل بعيدًا ولن تتمكن من التنقل بين أطر العمل عند الحاجة، وأيضًا عند ظهور مشاكل سيصعب عليك حلها وإكتشاف السبب.

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

ومنعًا للتكرار أنصحك بقراءة النقاش على السؤال التالي:

بخصوص ما ستتعلمه في الدورة، فستتعلم التالي:

بنية الشيفرة Code Structure
المتغيرات والثوابت 12
أنواع البيانات Data Types
التحويل بين الأنواع Type Conversions
المصفوفات Arrays
العوامل الرياضية Arithmetic Operators
عوامل المقارنة Comparison Operators
الجملة الشرطية if-else
العامل الثلاثي ternary
المبدل switch
حلقات التكرار Loops
الدوال Functions
المصفوفات Arrays
الكائنات Objects
الأصناف Classes
التعامل مع الأخطاء والبرمجة غير المتزامنة
التخاطب مع الخادم
تخزين البيانات في المتصفح وجودة الشيفرة

بعد ذلك ستتعلم أطر العمل التي ذكرها لك أسامة وهم:

React.js
Node.js
React Native
Electron.js
Next.js

وبذلك ستصبح مطور Full-Stack قادر على بناء أي تطبيق بمفردك.

10 مارس 2023

بالإضافة إلى ما تم ذكره في التعليقات السابقة، إليك بعض المعلومات الإضافية حول وحدات القياس في تصميم المواقع:

الـ em والذي يعتمد على قيمة font-size للعنصر الأم، ويختلف عن الـ rem في أنه يعتمد على حجم الخط الحالي للعنصر نفسه، وليس العنصر الأساسي.
الـ % والتي تعتمد على حجم العنصر الأم، وهي تستخدم بشكل شائع في تحديد الحجم والعرض والارتفاع والهوامش.
الـ pt والتي تعتمد على قياسات الطباعة وهي تستخدم بشكل شائع في تصميم المطبوعات، وليست مفيدة في تصميم المواقع.
الـ rem والـ em والـ % قد تؤثر على عمليات التحكم بعرض وارتفاع الصور، لذلك يفضل استخدام الـ px في هذه الحالات.
قد يؤدي استخدام وحدات القياس المتغيرة مثل الـ em والـ rem إلى تباين حجم النص في بعض المتصفحات، ولذلك يفضل استخدام الـ px لتحديد حجم النص إذا كان الاستقرار في الحجم مهم.
يفضل استخدام وحدات القياس النسبية مثل الـ rem والـ em والـ % لتحديد حجم النص والعناصر في الموقع، حيث تجعل الموقع متجاوباً مع أي حجم شاشة، وتسهل عملية التخطيط والتنسيق للعناصر، وتحافظ على نسبة ثابتة بين الارتفاع والعرض.

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

طرق لتصميم موقع متجاوب باستخدام وحدات القياس

1- استخدام وحدة الـ rem تعتبر وحدة الـ rem وحدة قياس نسبية تعتمد على حجم الخط الأساسي للصفحة، وتمكن من الحفاظ على نسبة الأبعاد والتناسب بين العناصر في جميع الشاشات، مع السماح بتغيير حجم الخط الأساسي بسهولة. يمكن استخدامها بالطريقة التالية:

body {
  font-size: 16px;
}

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

ومن الممكن تغيير حجم الخط الأساسي ببساطة عن طريق تعديل قيمة font-size في الـ body، مثلا:

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

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

.container {
  width: 80%;
  margin: 0 auto;
}

.box {
  width: 50%;
  padding: 5%;
  margin: 2.5%;
  display: inline-block;
}

@media (max-width: 768px) {
  .box {
    width: 90%;
    padding: 10%;
    margin: 5%;
  }
}

3- استخدام الـ Flexbox تعتبر Flexbox أسلوبًا بديلاً عن الطرق التقليدية لتحديد موقع العناصر في الصفحة، وتتيح التحكم في ترتيب وتوزيع العناصر بطريقة مرنة وسهلة. يمكن استخدام Flexbox لتحديد توزيع العناصر على المحاور الرئيسية والثانوية، بحيث يمكن تغيير توزيع العناصر تلقائيًا بناءً على حجم الشاشة.

على سبيل المثال، يمكن استخدام Flexbox لتحقيق توزيع العناصر بطريقة مرنة في العناوين والقوائم والتصميمات الخاصة بالموقع. يمكن استخدام الخصائص التالية في CSS لتحقيق ذلك:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1 0 200px;
}

في هذا المثال، يتم تعريف عنصر الـ container باستخدام display: flex، والذي يتيح لنا توزيع العناصر داخله بشكل مرن. تم تعيين خاصية flex-wrap إلى wrap للسماح بلف العناصر على أكثر من سطر، وتم تعيين خاصية justify-content إلى space-between لتوزيع العناصر بشكل متساوٍ بينها على المحور الرئيسي. تم تعيين خاصية align-items إلى center لتوسيط العناصر على المحور الثانوي.

أما بالنسبة للعناصر الفردية داخل الـ container، فقد تم تعيين خاصية flex إلى 1 0 200px، والتي تحدد قواعد توزيع العناصر وتحجمها. يتم تحديد عرض العنصر إلى 200px، ولكن يمكن أن يتم تصغيره بشكل مؤقت في حالة عدم توافر مساحة كافية، ولكن لا يمكن تكبيره بشكل دائم.

باستخدام Flexbox، يمكن تحقيق توزيع العناصر بشكل مرن وسلس، وتحسين تجربة المستخدم على المواقع المتجاوبة.

بالإضافة إلى الطرق المذكورة سابقًا، هناك بعض الطرق الأخرى التي يمكن استخدامها لتصميم موقع متجاوب ومنها:

1- استخدام الـ Grid system: يتيح الـ Grid system تحديد تركيبة الموقع وتوزيع العناصر بشكل مرتب ومتجانس في مساحة الصفحة المحددة، وهو يستخدم أساسًا الوحدات النسبية كـ % و vw/vh لتحديد حجم وموقع العناصر داخل الـ grid. يوفر الـ Grid system تحكمًا كبيرًا في توزيع العناصر وتعديلاتها حتى على الشاشات الصغيرة.

2- استخدام الـ CSS media queries: يمكن استخدام الـ media queries لتحديد تصميم مختلف للصفحة بناءً على حجم الشاشة، وتكون هذه التعديلات على أبعاد العناصر والألوان والخطوط والترتيب وغيرها من الخصائص. يمكن تعريف الـ media queries بالحجم الذي يتغير فيه تصميم الصفحة، مثل استخدامها لإظهار نافذة تحتوي على العناصر الرئيسية عند عرض الصفحة على الشاشات الصغيرة، ويمكن تحديد الخصائص الحجمية باستخدام الوحدات النسبية والـ em.

3- استخدام تقنية responsive typography: يمكن تحقيق تصميم متجاوب للخطوط باستخدام تقنية responsive typography، حيث يتم تحديد حجم الخط بناءً على حجم الشاشة والتعديل عليه ليظل النص مقروءًا وجذابًا على جميع الأجهزة. يمكن استخدام الـ em لتحديد حجم الخط بناءً على حجم النص الأساسي أو الـ vw لتحديد حجم الخط بناءً على حجم الشاشة.

4- استخدام الصور المتجاوبة: تستخدم الصور المتجاوبة (Responsive Images) لتحسين أداء الموقع وضمان تحميل الصور بسرعة وجودة عالية على جميع الأجهزة. مثال:

img {
  width: 100%;
  height: auto;
}

10 مارس 2023

في البداية يجب الإشارة إلى أن RDP Wrapper هي أداة مفتوحة المصدر تسمح بتفعيل خدمة RDP (Remote Desktop Protocol) في إصدارات Home و Starter و Basic من نظام التشغيل Windows، وهي تعد من الأدوات الشائعة المستخدمة لتمكين RDP في إصدارات Windows الأقل متطورة.

ومن الجدير بالذكر أن استخدام RDP Wrapper يعد أمن بشكل عام، ولكن يجب مراعاة بعض الأمور الهامة للحفاظ على سلامة النظام وتأمينه. على سبيل المثال، يجب تحديث نظام التشغيل بانتظام وتفعيل جدار الحماية الخاص بالنظام وعدم تمكين الحساب الافتراضي للمستخدم الخاص بـ RDP.

علاوة على ذلك، يجب التحقق من مصدر النسخة المستخدمة من RDP Wrapper والتأكد من أنها آمنة ولم يتم إدخال أي تعديلات غير مصرح بها عليها.

بدائل أخرى

هناك بدائل أخرى لتمكين خدمة RDP في إصدارات Home و Starter و Basic من نظام التشغيل Windows، منها:

1- استخدام برامج أخرى للتحكم عن بعد: مثل TeamViewer و AnyDesk و Remote Utilities وغيرها، والتي توفر خدمة تحكم عن بعد بطريقة آمنة وفعالة.

2- ترقية إصدار النظام: يمكن ترقية إصدار النظام إلى إصدارات أكثر تطوراً مثل Windows 10 Pro أو Enterprise أو Ultimate والتي تتضمن خدمة RDP مدمجة.

3- استخدام برامج طرف ثالث: هناك العديد من البرامج المتاحة على الإنترنت والتي تتيح تمكين RDP في إصدارات Home و Starter و Basic من نظام التشغيل Windows، مثل RDPWrap والذي يمكن تحميله من موقع GitHub.

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

10 مارس 2023

سأوضح لك 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/

وأيضًا هناك بعض ألعاب المتصفح التي غرضها تعليمك كيفية استخدام فليكس بوكس من خلال لعبة مسلية، وإليك بعضها:

شرح 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، والتي يمكن استخدامها لتنظيم وتحكم في توزيع العناصر وتحديد موقعها في الصفحة.

مصادر

10 مارس 2023

أولاً، لكتابة برنامج يقوم بطباعة الأرقام الزوجية من ١ إلى ١٠٠ باستخدام الحلقة While بلغة PHP، يمكن استخدام الكود التالي:

$num = 1;

while($num <= 100) {
  if($num % 2 == 0) {
    echo $num . "<br>";
  }
  $num++;
}

و المثال السابق يستخدم متغير $num لتمثيل الرقم الحالي المطبوع، ويستخدم حلقة While لتكرار العملية حتى يصل الرقم الحالي إلى 100. داخل الحلقة، يتم استخدام جملة if للتحقق مما إذا كان الرقم الحالي زوجيًا باستخدام العملية $num % 2 == 0، وإذا كان كذلك يتم طباعته باستخدام جملة echo.

بالنسبة للسؤال الثاني والذي يطلب كتابة برنامج لحساب مجموع الأعداد الفردية من ١ إلى ١٠، يمكن استخدام الكود التالي:

$num = 1;
$sum = 0;

while($num <= 10) {
  if($num % 2 != 0) {
    $sum += $num;
  }
  $num++;
}

echo "مجموع الأعداد الفردية من ١ إلى ١٠ هو: " . $sum;

يستخدم هذا الكود متغير $num لتمثيل الرقم الحالي المطبوع، ومتغير $sum لتخزين مجموع الأعداد الفردية. يتم استخدام حلقة While لتكرار العملية حتى يصل الرقم الحالي إلى 10.

داخل الحلقة، يتم استخدام جملة if للتحقق مما إذا كان الرقم الحالي فرديًا باستخدام العملية $num % 2 != 0، وإذا كان كذلك يتم إضافته إلى المجموع باستخدام عملية $sum += $num. أخيراً، يتم طباعة مجموع الأعداد الفردية باستخدام جملة echo.

طريقة أفضل لتنفيذ نفس المهمة

هناك طريقة أفضل للقيام بنفس الأمر بدون استخدام حلقة while، وذلك باستخدام الحلقة الفورية (for loop). يمكن استخدام الحلقة الفورية لطباعة الأعداد الزوجية من 1 إلى 100 على النحو التالي:

for ($i = 2; $i <= 100; $i += 2) {
    echo $i . " ";
}

أما لطباعة مجموع الأعداد الفردية من 1 إلى 10، فيمكن استخدام الحلقة الفورية كذلك، على النحو التالي:

$sum = 0;

for ($i = 1; $i <= 10; $i += 2) {
    $sum += $i;
}

echo "Sum of odd numbers from 1 to 10 is: " . $sum;

الكود يستخدم الحلقة الفورية لتكرار العداد من 1 إلى 10 بمقدار 2، مما يؤدي إلى تكرار الأعداد الفردية فقط، ثم يقوم بإضافة كل رقم فردي إلى مجموعه، وأخيراً يتم طباعة مجموع الأعداد الفردية المحسوبة.

for في PHP

9 مارس 2023

االألعاب ثلاثية الأبعاد

Unity و Unreal Engine يعتبران من أكثر الإطارات العمل شيوعًا واستخدامًا في تطوير الألعاب ثلاثية الأبعاد. ويتميز كلاهما بالقدرة على تصميم العوالم ثلاثية الأبعاد وإضافة التأثيرات البصرية الواقعية والتحكم في حركة الشخصيات والأشياء بشكل دقيق.

بالنسبة للغة C++، فهي تستخدم بشكل واسع في صناعة الألعاب ثلاثية الأبعاد بسبب سرعتها وكفاءتها في معالجة البيانات وتفاعلها مع المستخدم. وتعتبر لغة البرمجة C# أحد اللغات الشائعة في تطوير الألعاب ثلاثية الأبعاد باستخدام إطار العمل Unity.

الألعاب ثنائية الأبعاد

لغات البرمجة Java و Python تستخدم في تطوير الألعاب ثنائية الأبعاد بسبب سهولة استخدامها وتعلمها، وكذلك بسبب توافر العديد من المكتبات والإطارات العمل التي تدعم تطوير الألعاب ثنائية الأبعاد بهذه اللغات.

علاوة على ذلك، يمكن استخدام لغة البرمجة Lua في صناعة الألعاب ثنائية الأبعاد باستخدام إطار العمل Corona SDK، والذي يعتبر من الإطارات العمل المتخصصة في تطوير الألعاب ثنائية الأبعاد.

بشكل عام، يتوقف اختيار لغة البرمجة المستخدمة في تطوير الألعاب على عدة عوامل، بما في ذلك نوع اللعبة والمنصة المستهدفة وخبرة المطورين في استخدام اللغات البرمجة المختلفة.

العمل في مجال تطوير الألعاب

من الأفضل البدء بتعلم البرمجة والرياضيات والفيزياء ، حيث أن الألعاب تعتمد بشكل كبير على الرسوميات والرياضيات والفيزياء لتحقيق الواقعية والتفاعلية.

يجب عليك أيضًا تعلم استخدام برامج تطوير الألعاب مثل Unity و Unreal Engine و GameMaker Studio وغيرها. هذه البرامج تسمح للمطورين بإنشاء الألعاب بشكل أسرع وأكثر فعالية.

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

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

مسار Roadmap لتعلم تطوير الالعاب

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

وتسهيلا عليك، سأقدم لك مسارًا شاملاً يمكن اتباعه لتعلم تطوير الألعاب بطريقة منظمة وفعالة:

1- تعلم أساسيات البرمجة: يعتبر البرمجة هو الأساس الذي يجب تعلمه قبل البدء في تطوير الألعاب. يمكن البدء بلغة برمجة بسيطة مثل Python أو JavaScript ، حيث تتضمن المواضيع الأساسية مثل المتغيرات والتعابير والدوال والتحكم في التدفق.

2- تعلم أساسيات التصميم: يجب أن يتم تطوير اللعبة بشكل متكامل، بمعنى آخر، يجب تحديد كيف سيكون شكل اللعبة، وكيف يتفاعل المستخدم معها. يجب تعلم أساسيات الفنون التصويرية والتصميم والرسم، بالإضافة إلى تعلم استخدام الأدوات المختلفة المستخدمة في تصميم الألعاب مثل Adobe Photoshop و Illustrator.

3- تعلم استخدام محركات التطوير: يستخدم معظم مطوري الألعاب محركات تطوير مثل Unity أو Unreal Engine. وهذا يعني أنه يجب تعلم كيفية استخدام هذه المحركات لإنشاء وتطوير الألعاب.

4- تعلم البرمجة المتقدمة: بعد تعلم البرمجة الأساسية، يجب التقدم في تعلم البرمجة المتقدمة، بما في ذلك المفاهيم المتقدمة مثل البرمجة الكائنية.

Game Developer Roadmap

ما هي مراحل تطوير ألعاب الفيديو ؟
كيف تدخل مجال تطوير الالعاب وتبدأ الربح

9 مارس 2023

بالإضافة إلى الحل الذي وفره أحمد،

يمكن أيضًا استخدام مكتبة أكثر تطورًا لتغيير الصور بشكل دوري، مثل react-slick أو react-carousel.

على سبيل المثال، باستخدام react-slick ، يمكنك تحقيق هذه الوظيفة عن طريق التالي:

1- تثبيت المكتبة باستخدام npm:

npm install react-slick

2- استيراد المكتبة والملفات التنسيق المطلوبة منها:

import React, { useState, useEffect } from 'react';
import Slider from 'react-slick';
import images from '../src/img/images.jpg';
import images1 from '../src/img/images1.jpg';
import images2 from '../src/img/images2.jpg';
import images3 from '../src/img/images3.jpg';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import './App.css';
import Header from './components/header';

3- استخدام المكون Slider:

const App = () => {
  const imagesArray = [images, images1, images2, images3];

  const settings = {
    dots: false,
    infinite: true,
    speed: 5000,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 5000,
    beforeChange: (current, next) => {
      // console.log('before change', current, next);
    },
    afterChange: (current) => {
      // console.log('after change', current);
    },
  };

  return (
    <Slider {...settings}>
      {imagesArray.map((img, index) => (
        <div key={index} style={{ backgroundImage: `url(${img})` }} className="landing-page">
          <div className="overlay"></div>
          <Header />
          <div className="introduction-text">
            <h1>
              We are <span>Creative</span> agency
            </h1>
            <p>
              Welcome to you. I can help you with whatever you need regarding web development.
            </p>
          </div>
        </div>
      ))}
    </Slider>
  );
};

export default App;

ستقوم هذه الطريقة بتغيير الصورة بشكل دوري كل 5 ثواني ، وتغيير الصورة بشكل سلس ومتموج.

9 مارس 2023

المشكلة في الشرط الثاني في دالة addNewTransaction()، حيث أنه يتم التحقق فقط من طول النص وليس من طول المبلغ، مما يعني أنه إذا تم إدخال نص ونسي المبلغ، فإنه سيتم تمرير الشرط الثاني وإظهار رسالة الخطأ الأخيرة.

يمكنك حل هذه المشكلة عن طريق إضافة التحقق من طول المبلغ في الشرط الثاني، مثل هذا:

const addNewTransaction = () => {
  if (text.length === 0 && amount.length === 0) {
    setErrorText("Please Enter A text")
    setErrorAmount("Please enter An Amount")
    setValidate(true)
  } else if(amount.length === 0 && text.length !== 0 ) {
    setErrorAmount("Please enter An Amount")
    setValidate(true)
  } else if(text.length !== 0 && amount.length === 0) {
    setErrorText("Please Enter A text")
    setValidate(true)
  } else {
    setDummyTransactions([...dummyTransactions,{id: new Date(), text: text, amount: +amount}])
    setAmount('')
    setText('')
    setValidate(false)
  }
}

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

9 مارس 2023

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

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

يمكنك تجاهل هذا التحذير واستخدام PSReadLine بشكل عادي، على الرغم من أن بعض الوظائف قد لا تعمل بشكل صحيح مع برامج قراءة الشاشة. لتجاهل التحذير، يمكنك إضافة الأمر التالي في ملف Microsoft.PowerShell_profile.ps1:

$ENV:DISABLE_UNRELIABLE_INPUT = "1"

يتم ذلك عن طريق فتح PowerShell واستخدام الأمر التالي:

notepad $profile

وأيضًا لتمكين PSReadLine بشكل دائم في PowerShell، يمكنك إضافة الأمر التالي في ملف Microsoft.PowerShell_profile.ps1 كذلك:

Import-Module PSReadLine

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

9 مارس 2023

مرحبًا مصطفى،

أرجو منك في المرة القادمة وضع السؤال أسفل فيديو الدورة الخاص بالسؤال.

إذا كنت قد فهمت سؤالك بشكل صحيح، يمكن التحدث إلى الخادم باستخدام Node.js باستخدام مكتبة Node.js الأساسية للاتصال بخوادم HTTP والتي تسمى "http". يمكن استخدام الكود التالي للاتصال بخادم HTTP وإرسال طلب GET:

const http = require('http');

// خيارات الطلب
const options = {
  hostname: 'example.com',
  port: 80,
  path: '/path/to/resource',
  method: 'GET'
};

// إنشاء الطلب
const req = http.request(options, (res) => {
  console.log(`statusCode: ${res.statusCode}`);

  res.on('data', (d) => {
    process.stdout.write(d);
  });
});

// إدخال خطأ مقبول في الطلب
req.on('error', (error) => {
  console.error(error);
});

// إرسال الطلب
req.end();

سيقوم الكود بإنشاء طلب GET إلى موقع example.com/path/to/resource على البورت 80. سيتم استجابة الخادم ببيانات الاستجابة التي يمكن أن يتم تجاهلها أو معالجتها باستخدام res.on ('data') ثم طباعتها على الإخراج القياسي باستخدام process.stdout.write(d).

بالإضافة إلى ذلك، يمكن استخدام مكتبات Node.js الخارجية مثل Axios أو Request لإرسال طلبات HTTP. على سبيل المثال، يمكن استخدام مكتبة Axios باستخدام الكود التالي:

const axios = require('axios');

axios.get('http://example.com/path/to/resource')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

هذا الكود يستخدم مكتبة Axios لإرسال طلب GET إلى example.com/path/to/resource ويقوم بطباعة بيانات الاستجابة عند الاستجابة بنجاح، ويقوم بطباعة الخطأ في حالة وجود أي خطأ في الاستجابة.

Express.js

يمكن استخدام Express، وهي إطار عمل Node.js لبناء تطبيقات الويب، لإنشاء موقع ويب والتواصل مع الخادم باستخدام HTTP. يمكن استخدام Express لإنشاء ملفات التطبيق وإضافة مسارات للاستجابة على الطلبات HTTP. يمكن القيام بذلك باستخدام الأمر التالي لإنشاء تطبيق Express:

npm install express --save

ثم إنشاء ملف app.js بمحتوى التطبيق الأساسي:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

سيقوم هذا التطبيق بإرسال "Hello World!" عند الاستجابة بطلب GET للصفحة الرئيسية (الجذر "/") على المنفذ 3000.

للتواصل مع الخادم الخاص بالتطبيق، يمكن استخدام مكتبة http الخاصة بـ Node.js أو مكتبة axios أو node-fetch لإرسال طلبات HTTP إلى الموقع. على سبيل المثال، يمكن استخدام axios لإرسال طلب GET إلى الصفحة الرئيسية في التطبيق:

const axios = require('axios');

axios.get('http://localhost:3000/')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

سيتم إرسال طلب GET إلى http://localhost:3000/ وسيتم طباعة "Hello World!" في الاستجابة. يمكن استخدام نفس الطريقة لإرسال أي طلبات HTTP أخرى للتفاعل مع التطبيق.

8 مارس 2023

ما تريده هو وجود نظام بسيط وليس معقد للتعاون على مشروع صغير أو متوسط، لذلك جانب الأدوات ونماذج تطوير البرمجيات التي تم ذكرها ما تحتاجه هو التالي:

1- استخدام نظام إدارة المشاريع: يمكن استخدام نظام إدارة المشاريع مثل منصة أنا من حسوب، وهي أدوات تسمح بإنشاء لوحات مشاريع تحتوي على قوائم بالمهام والمواعيد النهائية والأولويات والتعليقات والتحديثات.

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

ويجب تقسيم المهام بينكم وبجدول زمني محدد، "فما لا يمكن قياسه لا يمكن إدارته وتحسينه".

2- استخدام منصة مشاركة الملفات: يمكن استخدام منصة مشاركة الملفات مثل Dropbox أو Google Drive أو OneDrive، وهي أدوات تسمح بمشاركة الملفات بين أعضاء الفريق والتحديثات الأخيرة لها.

3- استخدام نظام التحكم بالإصدارات: يمكن استخدام نظام التحكم بالإصدارات مثل Git أو SVN، وهي أدوات تسمح بإدارة وتحكم بإصدارات البرمجيات وتسهيل التعاون بين أعضاء الفريق على الكود المصدري، وأشهر المواقع لذلك هو GitHub.

4- استخدام الاختبارات التلقائية: يمكن استخدام الاختبارات التلقائية مثل Selenium أو JUnit، وهي أدوات تسمح بإنشاء اختبارات تلقائية للبرمجيات وتعقب الأخطاء.

5- استخدام بيئات التطوير المشتركة: يمكن استخدام بيئات التطوير المشتركة مثل Cloud9 أو CodePen أو CodeSandbox، وهي أدوات تسمح بإنشاء بيئات تطوير مشتركة تسهل على أعضاء الفريق العمل على نفس الكود المصدري في وقت واحد.

6- استخدام نظام النشر المستمر: يمكن استخدام نظام النشر المستمر مثل Jenkins أو Travis CI، وهي أدوات تسمح بالنشر المستمر واختبار البرمجيات بشكل آلي وتوفير ردود فعل فورية على أي تغيير في الكود المصدري.

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

وستجد هنا نقاش مثمر، أنصحك بقرائته.

كيف يمكن إدارة المشاريع البرمجية الجماعية؟

8 مارس 2023

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

وهناك مواقع مختلفة يمكنك بيع تطبيقك عليها، ومنها منصة بيكاليكا

8 مارس 2023

في ملف UserProvider

يجب عليك كتابة children بحرف صغير وليس Children

وإذا كنت تستخدم react 17 أو أقل فقم باستيراد react

import React, { createContext } from "react";

8 مارس 2023

السؤال غير واضح، هل تقصد تريد إضافة لفعل ذلك، أم تريد برمجة خاصة باستخدام الوورد بريس؟

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

من الإضافات التي يمكن استخدامها لهذا الغرض:

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

إما إذا كنت تريد التصميم والبرمجة بنفسك:

بخصوص التصميم فيمكنك استخدام مكتبات جاهزة مثل Bootstrap لإنشاء الـ Form و قائمة التنقل.

أما بخصوص التوصيل والسعر، فيمكنك استخدام الكود التالي كمثال:

//تحديد سعر الشحن حسب المنطقة
function calculate_shipping_cost($shipping_method, $shipping_address){
  $shipping_cost = 0;
  $city = $shipping_address['city'];
  $state = $shipping_address['state'];

  if ($shipping_method == 'method1') {
    if ($city == 'City1' && $state == 'State1') {
      $shipping_cost = 10;
    } elseif ($city == 'City2' && $state == 'State1') {
      $shipping_cost = 15;
    } elseif ($city == 'City3' && $state == 'State2') {
      $shipping_cost = 20;
    }
  } elseif ($shipping_method == 'method2') {
    if ($city == 'City1' && $state == 'State1') {
      $shipping_cost = 20;
    } elseif ($city == 'City2' && $state == 'State1') {
      $shipping_cost = 25;
    } elseif ($city == 'City3' && $state == 'State2') {
      $shipping_cost = 30;
    }
  }
  return $shipping_cost;
}

في هذا الكود، يتم استخدام دالة calculate_shipping_cost لحساب تكلفة الشحن بناءً على الطريقة المختارة والعنوان الذي تم تقديمه. يتم تحديد سعر الشحن حسب المنطقة، مع تحديد أسعار مختلفة لكل طريقة من طرق الشحن.

8 مارس 2023

من الجيد أنك تستخدم المتغيرات 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/ فستتعلم منها الكثير بالنسبة لاستخدام ألوان متناسقة ومريحة للعين، وستجد بالموقع لوحات ألوان جاهزة مع شرح كيف يتم استخدام كل لون داخل موقعك.

8 مارس 2023

للأسف لا يمكن التراجع عن هذا الأمر حيث تظهر لك رسالة تأكيدية بأنك تريد جعل الموقع بالكامل كمقروء من أجل تنبيهك قبل التأكيد.

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

7 مارس 2023

توجد العديد من خصائص CSS التي يمكن استخدامها لتنسيق شريط التمرير (scrollbar). إليك بعض الخصائص الأساسية التي يمكن استخدامها:

::-webkit-scrollbar : يتم استخدامها لتحديد المظهر العام لشريط التمرير.
::-webkit-scrollbar-track : تحديد خصائص خلفية شريط التمرير.
::-webkit-scrollbar-thumb : تحديد خصائص مقبض شريط التمرير.
::-webkit-scrollbar-corner : تحديد خصائص زاوية شريط التمرير.
::-webkit-scrollbar-button : تحديد خصائص زر شريط التمرير.

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

::-webkit-scrollbar-thumb {
  background-color: #4CAF50; /* تغيير لون مقبض الشريط */
  border-radius: 10px; /* تغيير شكل مقبض الشريط */
  border: 3px solid #fff; /* إضافة حدود لمقبض الشريط */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* تغيير لون مقبض الشريط عند المرور بالفأرة عليه */
}

::-webkit-scrollbar-thumb:active {
  background-color: #999; /* تغيير لون مقبض الشريط عند النقر عليه */
}

::-webkit-scrollbar {
  width: 10px; /* تغيير عرض الشريط */
  height: 10px; /* تغيير ارتفاع الشريط */
}

يمكنك تعديل هذه الخصائص واختيار القيم التي تناسب تصميمك.

ويجب التنبيه إلى:

أنه يتم وضع خصائص تنسيق الـ scrollbar على العنصر الذي يتم إظهار الـ scrollbar عليه. على سبيل المثال، يمكن وضع الخصائص على الـ body إذا كانت الـ scrollbar تظهر على صفحة الويب بشكل عام، أو يمكن وضعها على عنصر الـ div الذي يحتوي على المحتوى والذي يتم إظهار الـ scrollbar عليه في حالة وجود overflow.

يمكن إضافة الخصائص الخاصة بالـ scrollbar في CSS باستخدام خاصية ::-webkit-scrollbar في حالة استخدام المتصفح "Google Chrome" أو "Safari".

وخاصية ::-moz-scrollbar في حالة استخدام المتصفح "Firefox".

ويمكن استخدام الـ ::-webkit-scrollbar في العديد من المتصفحات الأخرى التي تستخدم محرك "WebKit"، مثل "Opera" و "Microsoft Edge".

على سبيل المثال، يمكن استخدام الكود التالي لإضافة تنسيقات للـ scrollbar في المتصفح "Google Chrome":

/* تنسيقات الـ scrollbar */
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #f5f5f5;
}
body::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 10px;
}

في هذا المثال، يتم تحديد عرض وارتفاع الـ scrollbar باستخدام width و height على الـ ::-webkit-scrollbar، ويتم تحديد لون خلفية الـ scrollbar باستخدام background-color على نفس العنصر. ويتم تحديد لون الـ thumb أو المنطقة المتحركة داخل الـ scrollbar باستخدام background-color على الـ ::-webkit-scrollbar-thumb، ويتم تحديد شكل الـ thumb باستخدام border-radius.

7 مارس 2023

بالإضافة إلى ما قام بشرحه سمير، هناك بعض التوضيحات اللازمة:

يمكن تعديل اسم الخاصية الافتراضية من title_body إلى أي اسم آخر يتم اختياره.
باستطاعتك استخدام الموصلات لتحويل أي عمود آخر في الجدول، وليس فقط العمودين title و body.
أيضًا يمكن إضافة مزيد من الطرق لتعديل السلوك الافتراضي لنموذج ما باستخدام Laravel. على سبيل المثال، يمكن تغيير قواعد الصحة (Validation rules) الافتراضية، أو استخدام المتغيرات المحيطة (Environmental variables) لتكوين النموذج، وما إلى ذلك.

مثلاً يمكنك إضافة الكود التالي داخل النموذج Model:

public function getTitleBodyAttribute() {
  return $this->attributes['title'] . ' ' . $this->attributes['body'];
}

protected $appends = [
  'title_body'
];

بعد ذلك، يمكنك الوصول لقيمة العمود الجديد title_body بعد جلب البيانات من الجدول:

$posts = Post::all();
foreach ($posts as $post) {
  echo $post->title_body;
}

الكود السابق يقوم بدمج قيمة عمود title وعمود body وإرجاعهما كعمود افتراضي جديد title_body. كما يتم إضافة الخاصية title_body إلى المصفوفة appends لجعلها تأتي مع البيانات الأساسية في حالة الاستعلام عنها.

طرق أخرى لإنشاء عمود افتراضي في النموذج في Laravel

هناك طرق أخرى لإنشاء عمود افتراضي في النموذج في Laravel، ولكن الأسلوب الأكثر شيوعًا هو استخدام Accessors كما تم شرحه سابقًا.

ومن بين الطرق الأخرى:

1- استخدام الأحداث (Events): يمكن استخدام الأحداث لتحويل قيمة العمود بعد إنشاء أو تحديث النموذج. يمكنك استخدام حدث مثل "saving" أو "saved" لتنفيذ هذه العملية.

2- استخدام الاستعلامات الحسابية (Raw SQL Queries): يمكنك استخدام استعلام SQL المباشر لإضافة عمود افتراضي إلى نتيجة استعلام. يمكن استخدام هذا الأسلوب إذا كان لديك استعلامات معقدة وكنت بحاجة إلى تعديل نتائج الاستعلام بشكل مباشر.

3- استخدام حزم الحقول الافتراضية (Default Field Packages): يوفر Laravel حزم حقول افتراضية لإضافة حقول إضافية إلى النموذج، ومن بينها الحزمة المسماة "laravel-nova-fields-value" التي تسمح بإضافة حقول افتراضية.

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

7 مارس 2023

يجب استخدام خاصية innerHTML على المتغير الذي يحوي قيمة عنصر merabi وهو عنصر h1، وأنت قمت بحفظه في متغير باسم titleo، لذلك الكود الصحيح هو:

let title = document.getElementById("merapi");
title.addEventListener("click", function() {
  title.innerHTML = "You clicked on the text!";
});

وإذا أردت استخدام خاصية innerHTML على العنصر مباشرًة فالكود يجب أن يكون كالتالي

let title = document.getElementById("merapi");
title.addEventListener("click", function() {
 document.getElementById("merapi").innerHTML = "You clicked on the text!";
});

7 مارس 2023

بالإضافة إلى الشرح الذي قدمه أحمد، يمكن أيضًا إضافة بعض التفصيل إلى الشرح. يجب على تحديد queryset الذي يتم تمريره إلى filter.qs وتعديله بناءً على التصفية التي تقوم بها.

بمجرد الحصول على filtered_queryset، يمكن استخدامها لتصدير البيانات في حلقة البيانات for بدلاً من dataset الذي يتم إنشاؤه باستخدام StudentResource().export() والذي لا يمثل النتائج المصفاة بشكل صحيح.

بالإضافة إلى ذلك، يمكن استخدام الدالة get_queryset() في فئة العرض (FilterView) لتحديد queryset الأساسي الذي يتم تمريره إلى filter.qs بدلاً من Student.objects.all(). هذا يمكن أن يساعد في تحسين أداء التطبيق عند التعامل مع مجموعة كبيرة من السجلات.

مثال:

from django_filters.views import FilterView
from django_tables2.views import SingleTableView
from django_tables2.export.views import ExportMixin
from django.urls import reverse_lazy
from django.utils.translation import gettext_lazy as _
from django_filters.filters import (
    CharFilter,
    NumberFilter,
)
from .models import Student
from .filters import StudentFilter
from .tables import StudentTable
from .resources import StudentResource

class StudentListView(ExportMixin, SingleTableView):
    model = Student
    table_class = StudentTable
    template_name = "students/student_list.html"
    export_formats = (
        "csv",
        "xlsx",
    )
    filterset_class = StudentFilter

    # تحديد queryset الأساسي
    def get_queryset(self):
        queryset = super().get_queryset()
        # تطبيق التصفية على queryset الأساسي وتعديله
        self.filterset = self.filterset_class(self.request.GET, queryset=queryset)
        self.filtered_queryset = self.filterset.qs

        return self.filtered_queryset

    def get_table_data(self):
        # استخدام filtered_queryset بدلاً من queryset الأساسي
        return self.filtered_queryset

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # تمرير filter و table إلى النموذج في context
        context["filter"] = self.filterset
        context["table"] = self.table
        return context

    def get_export_queryset(self, queryset):
        # استخدام filtered_queryset بدلاً من queryset الأساسي للتصدير
        return self.filtered_queryset

    def get_export_resource_class(self):
        # استخدام filtered_queryset بدلاً من queryset الأساسي للتصدير
        return StudentResource

class StudentFilterView(FilterView):
    model = Student
    filterset_class = StudentFilter
    template_name = "students/student_filter.html"
    # تحديد queryset الأساسي
    def get_queryset(self):
        return Student.objects.all()

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context["title"] = _("Filter Students")
        return context

    def get_success_url(self):
        # إعادة توجيه العرض بعد تقديم النموذج
        return reverse_lazy("student_list") + "?" + self.request.GET.urlencode()

في هذا المثال، تم إنشاء عرض Django يستخدم FilterView و SingleTableView من Django-Tables2 و ExportMixin لتمكين تصدير بيانات جدولية باستخدام django-import-export. تم تحديد النموذج الأساسي والفئة المرشحة وفئة الجدول والمورد لاستخدامها في العرض.

وتم استخدام الدالة get_queryset() لتحديد queryset الأساسي الذي سيتم تمريره إلى filter.qs بدلاً من Student.objects.all(). في هذا المثال، تم تطبيق عامل تصفية يقوم بفلترة الطلاب حسب الاسم الأول الذي يبدأ بحرف "J".

مع استخدام الدالة get_table_data() لاسترداد البيانات التي سيتم عرضها في الجدول. في هذا المثال، تم استخدام filter.qs بدلاً من queryset الأصلي.

ثم استخدام الدالة get_export_resource_kwargs() لتحديد البيانات التي سيتم تصديرها. في هذا المثال، تم استخدام filter.qs بدلاً من queryset الأصلي.

وهناك سؤال متعلق بنفس النقاش يمكنك قرائته أيضًا.

بتاريخ 5 دقائق مضت قال Abuabar Aliraqi:

للاسف يا صديقي لم ينفع الحل رغم انه منطقيا صحيح ولكن لا اعرف اين الخل
هل من طريقة اخرى غير filter-django ؟

من الممكن أن تكون الأسباب التالية هي السبب:

1- عدم تعريف الحقول المراد تصديرها في الـ ModelResource: يجب التأكد من تعريف حقول النموذج التي يجب تصديرها في الـ ModelResource المستخدم في الصفحة. يجب تعريف حقول النموذج في Meta.fields في ModelResource.

2- عدم استخدام ModelResource المناسب: يجب التأكد من استخدام ModelResource المناسب لنموذج البيانات الذي يتم تصديره. يجب استخدام ModelResource المناسب الذي يتم تعريفه في نفس التطبيق الذي تم استخدامه في FilterSetClass.

3- عدم تضمين الحقول المراد تصديرها في الـ export_fields: يجب التأكد من تضمين حقول النموذج التي يجب تصديرها في export_fields في ModelResource.

لمساعدتك في تحديد المشكلة الفعلية، يمكنك محاولة إعادة تشغيل الكود مع تفعيل Debug mode في Django، ومراجعة الأخطاء والتحذيرات الخاصة بالمشكلة في ملفات السجلات (Logs). كما يمكنك تحديد المشكلة بمزيد من التحقق من الأسباب المذكورة أعلاه.

7 مارس 2023

أولاً، يجب فهم أن HTML و CSS هما لغتان مختلفتان عن JavaScript و React.

HTML و CSS هما لغتان تستخدمان لتصميم صفحات الويب وتنسيقها، في حين أن JavaScript و React يستخدمان لتطوير تطبيقات الويب المتقدمة وإدارة حالة التطبيق.

لذلك، إذا كنت تريد تعلم React وتطوير تطبيقات الويب المتقدمة، فمن الضروري أن تتعلم JavaScript وReact بشكل جيد. ومن المفيد أيضًا أن تتعلم HTML و CSS بشكل أساسي لأنها تساعد في فهم كيفية بناء صفحات الويب وتصميمها بشكل أفضل.

أما بالنسبة للمقارنة بين HTML وJSX، فإن JSX هي لغة تم إنشاؤها بواسطة Facebook والتي تستخدم في React لتصميم واجهات المستخدم.

وتتيح للمطورين كتابة شفرة JavaScript وإنشاء عناصر واجهة المستخدم في نفس الملف، مما يجعل الكود أكثر قراءة وفهمًا.

على الرغم من أن JSX يشبه HTML في بعض النواحي مثل العناصر والخصائص ولكنها لغة مختلفة وتختلف عن HTML في عدد من الأمور مثل طريقة تعريف الخصائص والأحداث والتفاعلات وبعض العناصر الإضافية التي تدعمها JSX ولا تدعمها HTML.

فيما يلي بعض الأمثلة للتوضيح:

مثال على كود HTML:

<div class="my-class" id="my-id">Hello World!</div>

مثال على كود JSX:

<div className="my-class" id="my-id">Hello World!</div>

في هذا المثال، نرى عنصرًا div يحتوي على نص "Hello World!" ويتم تعريفه في HTML وJSX. ولكن هناك بعض الاختلافات في كيفية تعريف العنصر.

في HTML، يتم استخدام الخاصية class لتحديد الفئات الخاصة بالعنصر، في حين يتم استخدام id لتحديد معرف العنصر. ومن المهم التأكد من عدم استخدام نفس العنصر مع نفس المعرف في نفس الصفحة.

في JSX، تستخدم className بدلاً من class، وذلك لأن class هي كلمة محجوزة في JavaScript، ولا يمكن استخدامها كخاصية. ويمكن استخدام id كما هو في HTML.

هذا مثال بسيط، ولكن يعرض الفرق الأساسي في تعريف العناصر في HTML وJSX.

تعلم الأساسيات أولاً

بما أن JSX يستخدم في React فقط، فمن المهم أيضًا تعلم JavaScript بشكل جيد حتى تتمكن من فهم كيفية كتابة الشفرة في React. يتضمن ذلك فهم المتغيرات والدوال والعبارات الشرطية والحلقات ومفاهيم أخرى.

علاوة على ذلك، يمكن أن يساعد تعلم CSS في تحسين تصميم واجهة المستخدم في React. فعلى الرغم من أن React يستخدم JSX لتصميم واجهات المستخدم، إلا أنه يمكن استخدام CSS لتحسين تنسيق العناصر والإضافات إليها.

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

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

وأيضًا ستكتسب القدرة على التنقل ما بين إطارات العمل مثل Angular و رVue لأنك قمت بتعلم الأساسيات.

7 مارس 2023

بالإضافة إلى ما تم ذكره.

يجب التفرقة بين React Native و Ionic عبارة عن إطارات عمل (Frameworks) لتطوير تطبيقات الهاتف.

حيث تستخدم React Native لتطوير تطبيقات iOS و Android، في حين تستخدم Ionic لتطوير تطبيقات متعددة المنصات باستخدام HTML و CSS و JavaScript.

الفرق الرئيسي بين React Native و Ionic هو أن React Native يستخدم لغة البرمجة JavaScript، في حين يستخدم Ionic HTML و CSS و JavaScript. كما يتطلب React Native مستوى عالٍ من المعرفة بـ JavaScript، بينما يمكن لأي شخص يعرف HTML و CSS و JavaScript استخدام Ionic.

React Native مبني على مكتبة ReactJS، ويستخدم تقنيات Native لتحسين أداء التطبيق وتحسين التفاعل مع المستخدم. ويتيح للمطورين إعادة استخدام الشفرة بين تطبيقات iOS و Android، مما يوفر الوقت والجهد في عملية التطوير. كما يتيح للمطورين أيضًا بناء واجهات مستخدم (UI) ذات مظهر جميل ومتطور.

Ionic على الجانب الآخر يستخدم مكتبة AngularJS ويتميز بأنه يعمل بشكل ممتاز على مختلف المنصات. ويوفر Ionic أيضًا واجهة مستخدم تفاعلية وتطبيقات بسيطة وخفيفة الوزن.

متى استخدم React Native و Ionic

فيما يتعلق باختيار الإطار المناسب، يعتمد ذلك على الاحتياجات والمتطلبات للتطبيق الذي تريد تطويره. إذا كنت تبحث عن تطبيق أكثر تعقيدًا وتفاعليًا، فقد يكون React Native الخيار الأفضل. وإذا كنت تريد تطبيقًا بسيطًا وخفيف الوزن، فإن Ionic قد يكون الأفضل.

ومع ذلك، إذا كان لديك فريق مطورين يعرفون AngularJS، فقد يكون من الأفضل استخدام Ionic بدلاً من React Native.

كما يمكن أن يلعب الاعتماد على تقنيات Native لتحسين أداء التطبيق دورًا في اختيار الإطار المناسب. يعمل React Native بشكل أسرع من Ionic ويتيح توفير تجربة مستخدم أكثر سلاسة وتفاعلية، نظرًا لأنه يعتمد على تقنيات Native. ولكن في حالة تطبيقات Ionic، يمكن أن يتم استخدام تقنيات Cordova لتشغيل التطبيقات على المنصات المختلفة، مما يمكن من تحسين أدائها.

بشكل عام، يمكن استخدام React Native لتطوير تطبيقات الموبايل عندما يكون التركيز على توفير تجربة مستخدم عالية الجودة وتطبيقات متطورة ومعقدة. ويمكن استخدام Ionic لتطوير تطبيقات متوسطة الحجم والتعامل مع المشاكل المختلفة بسرعة وكفاءة.

إذا كنت ترغب في تطوير تطبيقات متعددة المنصات باستخدام الويب تقريبًا في المرتبة الأولى، فإن Ionic يمكن أن يكون الإطار الأفضل، في حين يمكن استخدام React Native لتطوير تطبيقات الجوال الأكثر تطوراً والمتقدمة.

6 مارس 2023

الخطأ هو أنك لم تنسق الـ state بشكل صحيح، وعليه لم يتم تحديث الـ state بشكل صحيح عند استخدام الأزرار الأخرى. هناك عدة نقاط يجب مراجعتها:

يجب عليك تحديث الـ state بشكل صحيح في كل دالة. على سبيل المثال، في دالة doubleMoney ، يتم تعيين قيمة جديدة لـ data بدلاً من تحديثها باستخدام setData.
عند استخدام دالة fetchRandomUsers، يجب أن تقوم بإرجاع القيمة الجديدة (newUser) ، وإذا لم تقم بذلك فلن تتم إضافة اليوزر الجديد إلى الـ state.
يجب عليك استخدام setData لتحديث الـ state بشكل صحيح في كل دالة.
لضمان تحديث الـ state بشكل صحيح، يمكنك استخدام دالة useState بشكل صحيح.
يجب تعيين دالة الـ filter و map إلى الـ state الجديد باستخدام setData، بدلاً من تغيير الـ state الحالي.

وهنا بعض التغييرات التي يجب عليك إجراؤها لجعل الكود يعمل بشكل صحيح:

const [data, setData] = useState([]);

// Add User
const handleAdd = async () => {
  const response = await fetch('https://randomuser.me/api');
  const responseData = await response.json();
  const newUser = {
    user: `${responseData.results[0].name.first} ${responseData.results[0].name.last}`,
    money: formatMoney(Math.floor(Math.random() * 1000000))
  };
  setData([...data, newUser]);
};

// Double Money
const doubleMoney = () => {
  const newData = data.map(user => {
    return {...user, money: user.money * 2}
  });
  setData(newData);
};

// Show Millionaires
const showMillionaires = () => {
  const newData = data.filter(item => item.money > 500000);
  setData(newData);
};

// Sort by richest
const sortByRichest = () => {
  const newData = [...data].sort((a, b) => b.money - a.money);
  setData(newData);
};

// Calculate entire wealth
const calculateWealth = () => {
  const wealth = data.reduce((acc, user) => (acc += user.money), 0);
  alert(`Total wealth: ${formatMoney(wealth)}`);
};

6 مارس 2023

الكود الأول يستخدم ReactDOM.render() لربط مكون React مع عنصر HTML في صفحة الويب، وهو الأسلوب الأكثر استخداماً في إنشاء تطبيقات React.

أما الكود الثاني فيستخدم ReactDOM.createRoot() لإنشاء نوع جديد من الجذر Root المستخدم في React، ويتم تمرير عنصر HTML كمعامل لـ createRoot()، ومن ثم يستخدم render() لربط مكون React مع العنصر HTML.

الفرق الرئيسي بين الكودين هو أن ReactDOM.createRoot() تتطلب الإصدار 18.0.0 من React أو أعلى، وهو تغيير رئيسي في الطريقة التي يعمل بها React ويتعامل مع جذر التطبيق.

ويستخدم createRoot() لتحسين أداء التطبيقات الكبيرة والمعقدة.

في حين يعد ReactDOM.render() أكثر استخدامًا حتى الآن، ويعتبر الأسلوب القياسي لربط مكونات React بعناصر HTML.

الفروق بين react 17 و react 18

تم إصدار React 18 في نهاية عام 2021، ولذلك فإن الفروقات بين React 17 و React 18 غالباً ما تكون تغييرات صغيرة للغاية.

من بين التغييرات الرئيسية التي تمت إجراؤها في React 18:

تحسينات في أداء التطبيقات التي تستخدم الـ Suspense API والـ server components.
إمكانية إلغاء تأجيل إنشاء الـ server components بمعنى عدم الانتظار لحين تحميل كل البيانات للصفحة وإظهارها مباشرة.
تحسينات في عملية الإعادة التصيير Re-rendering.
تحسينات في إدارة الذاكرة والأداء العام.

ومن بين التغييرات الأخرى المهمة في React 18:

دعم أفضل للتطبيقات الكبيرة والمعقدة.
إمكانية التحكم بسلاسة في الـ rendering schedule.
تحسينات في مجال التوثيق والتعليمات البرمجية.

ويتطلب تحديث التطبيقات من React 17 إلى React 18 تعديلات طفيفة في الشفرة المصدرية.

كيف يتم الإنتقال من react 17 إلى react 18

توجد عدة خطوات يجب اتباعها لترقية تطبيق React من الإصدار 17 إلى الإصدار 18، وهي كالتالي:

تحديث مكتبات React و React-DOM إلى الإصدار 18 باستخدام أمر npm أو yarn.
تحديث جميع المكونات التي تحوي استخدامًا لـ lifecycle methods مع العلم بأن الـ lifecycle methods تم إزالتها في React 18.
استبدال الـ findDOMNode() بطرق أخرى للوصول إلى عناصر DOM.
التحديث إلى الـ new JSX Transform وذلك بتحديث ملفات الـ Babel Configuration.
في React 17، يجب استخدام الدالة ReactDOM.render() لتجميع مكون React إلى DOM. ولكن في React 18 يجب استخدام دالة ReactDOM.createRoot() لإنشاء جذر React واستخدام دالة render() عليه.

وتستخدم ReactDOM.createRoot() بدلاً من ReactDOM.render() لتحسين أداء التطبيق كما أوضحت من قبل.

فيما يلي مثال على كيفية استخدام ReactDOM.createRoot() بدلاً من ReactDOM.render():

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));

function App() {
  return <h1>مرحباً بالعالم!</h1>;
}

root.render(<App />);

يتم استخدام دالة ReactDOM.createRoot() لإنشاء جذر React، ومن ثم تمرير مكون React إليه باستخدام دالة render().

لتحقق من عدم وجود مشاكل مع التغييرات الجديدة في React 18 باستخدام مكتبات الاختبارات (Testing Libraries) المختلفة المتوفرة.

6 مارس 2023

بالإضافة ما ذكره أحمد، يجب مراعاة بعض القواعد الأساسية لكتابة الصيغ الصحيحة في Python. فيما يلي بعض الأمثلة على كيفية كتابة بعض الصيغ الأساسية بشكل صحيح في Python:

1- تعيين قيمة للمتغير:

يمكن تعيين قيمة للمتغير في Python باستخدام العلامة (=) كما في المثال التالي:

x = 5

2- استخدام الشرط:

يمكن كتابة الشرط في Python باستخدام الكلمة المحجوزة if ، elif ، و else كما في المثال التالي:

if x > 5:
    print("x is greater than 5")
elif x == 5:
    print("x is equal to 5")
else:
    print("x is less than 5")

3- استخدام الحلقات:

يمكن استخدام الحلقات في Python باستخدام الكلمات المحجوزة for و while كما في المثال التالي:

for i in range(10):
    print(i)
    
x = 0
while x < 10:
    print(x)
    x += 1

4- استخدام الدوال:

يمكن كتابة الدوال في Python باستخدام الكلمة المحجوزة def كما في المثال التالي:

def add_numbers(x, y):
    return x + y

result = add_numbers(3, 5)
print(result)

هذه بعض الأمثلة الأساسية للصيغ الصحيحة في Python. يجب مراعاة بعض القواعد الأساسية مثل عدم استخدام مسافات زائدة وتجنب استخدام الحروف الكبيرة في اسماء المتغيرات والدوال.

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

أجوبة بواسطة Mustafa Suleiman