اذهب إلى المحتوى

Mustafa Suleiman

الأعضاء
  • المساهمات

    10354
  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • عدد الأيام التي تصدر بها

    305

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

  1. بتاريخ 17 دقائق مضت قال نجم الدين عاد:

    MERN stack سيأخذ مني وقت طويل وانا اريد التخصص في back and develop nede.js فقط وشتغل بسرعة هل يمكنك انت تذكر لي ماللذي يجب عليا تعلمه لكي اصبح  back and develop nede.js مطلوب في سوق العمل

    1. معرفة جيدة جدًا بـ Node.js/JavaScript ومعرفة ES5 و ES6 و ES2017 أي جافاسكريبت الحديثة.
    2. فهم جيد جدًا للـ non-blocking I/O و حلقة الأحداث، والدعوات المتزامنة وغير المتزامنة، ومفهوم واضح لـ first-tick و event handler.
    3. فهم ممتاز للتحكم في التدفق غير المتزامن asynchronous control flow وفهم لـ error-first callback، ومنع callback hell، والوعد، و promisify، و async/await، و generator-based co-routines، وما إلى ذلك.
    4. قواعد البيانات وخبرة عملية جيدة مع MongoDB وقاعدة بيانات SQL أخرى على الأقل، وبعد ذلك عندما يتطور مستواك إذا أردت عليك اكتساب خبرة في Redis، وتحسين الاستعلام، وقاعدة بيانات memcached، والفهرسة، و SQL، ونموذج العلاقة  relational model.
    5. الشبكات ومعرفة أساسية بمعايير HTTP و WebSocket و REST ومعرفة جيدة جدًا بـ TCP/IP، و HTTP/HTTPS، و REST، و GraphQL، وما إلى ذلك.
    6. مهارات البرمجة  ومعرفة قوية بـ data structures، و algorithms، ومفهوم واضح لـ OOP.
    7. مهارات Linux/DevOps وعلم بأساسيات أوامر Linux الأساسية، وبرمجة شل، ومعرفة بالافتراضية، والحاويات، والتنسيق والقدرة على النشر، ومعرفة بأحد مقدمي الخدمات السحابية AWS/Azure/GCloud، و Nginx/Apache/IIS/HAproxy يجب تعلمهم من قبل أي شخص، و Travis/Circle CI، EC2، وما إلى ذلك.
    8. معرفة أساسية بـ Git flow، و Git/SVN/Mercurial (أي شخص)، Git Rebase، و merge، وحل النزاعات، وسير العمل الجماعي، وكيفية إنشاء طلب سحب، وكيفية المساهمة في مشروع عام/مفتوح المصدر.
    9. إطار عمل Node.js مثل Express.js

    ملاحظات إضافية:

    • كلما زادت خبرتك في Node.js، زادت فرصك في الحصول على وظيفة جيدة وحتى لو كنت مطورًا مبتدئًا، لا يزال بإمكانك الحصول على وظيفة إذا كان لديك فهم قوي للأساسيات واستعداد للتعلم.
    • كن مستعدًا للإجابة على أسئلة حول خبرتك في Node.js، و JavaScript، والتقنيات ذات الصلة في مقابلة العمل.
    • شكرًا 1
  2. من خلال التنقيات التي قمت بتعلمها ستحتاج إلى أن تصبح مطور Full stack من خلال تعلم تقنيات MERN وعند البحث عن وظيفة MERN  لمستوى Entry Level ستجد المطلوب هو التالي:

    •  (MongoDB, Express.js, React, Node.js)
    • بالإضافة إلى NEXT JS وبالطبع يجب أن يكون لديك أساسيات جيدة في لغات الواجهة الأمامية وهي HTML, CSS, JS.
    • ودراية أيضًا بكيفية استخدام GitHub ورفع المشاريع وعمل Pull request.
    • بالطبع دراية باستخدام مكتبات وإطارات مثل Bootstrap أو Tailwind وAxios وغيرها من المكتبات والإطارات اللازمة لتنفيذ المشاريع.

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

    ولكن قبل ذلك عليك بتنفيذ مشاريع لكل تخصص على حدى، بمعنى قم بتنفيذ مشاريع REACT وعندما تجد أريحية في استخدام مكتبة React انتقل للواجهة الخلفية لتنفيذ مشاريع من خلال Express.js وnode.js وعندما تجد أريحية واستيعاب بنسبة مقبولة، انتقل لتنفيذ مشاريع Full stack.

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

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

    وبخصوص ما يجب عليك تعلمه ستجد تفصيل هنا:

    وأيضًا سيفيديك النقاش التالي:

    ودائمًا قم بقراءة وصف الوظيفة التي تريد العمل بها على مواقع التوظيف مثل LinkedIn وIndeed وغيرهم ثم تعلم المهارات المطلوبة في الوصف بنسبة 80% مثلاً.

  3. رسالة الخطأ تعني أنك تحاول الوصول إلى مفتاح "id" في مصفوفة غير موجودة، وذلك يحدث هذا لعدة أسباب منها:

    • المفتاح "id" غير موجود في المصفوفة التي تحاولين الوصول إليها.
    • المفتاح "id" موجود في المصفوفة، ولكن قيمته فارغة.
    • المفتاح "id" موجود في المصفوفة، ولكن قيمته ليست من النوع الصحيح.

    ومن المحتمل أن يكون سبب الخطأ هو أنك تحاولين الوصول إلى مفتاح "id" في مصفوفة بيانات غير موجودة، وتستطيعي التحقق من ذلك عن طريق التحقق من أن المصفوفة تحتوي على مفتاح "id"، من خلال استخدام وظيفة array_key_exists().

    ولنفترض أنك تحاولين الوصول إلى مفتاح "id" في مصفوفة بيانات تسمى data، سيكون التحقق كالتالي:

    if (array_key_exists('id', $data)) {
        // المفتاح موجود
    } else {
        // المفتاح غير موجود
    }

    وإن كان المفتاح موجودًا، فيمكننا التحقق من قيمة المفتاح عن طريق استخدام وظيفة isset().

    if (isset($data['id'])) {
        // قيمة المفتاح غير فارغة
    } else {
        // قيمة المفتاح فارغة
    }

    وفي حال كانت قيمة المفتاح فارغة، فيمكنك محاولة ملؤها بقيمة صالحة عن طريق استخدام وظيفة set().

    $data['id'] = 1;

    وفي حال كانت قيمة المفتاح ليست من النوع الصحيح، فتستطيعي محاولة تحويلها إلى النوع الصحيح بواسطة وظيفة intval() أو floatval() أو strval().

    $data['id'] = intval($data['id']);

     

    • أعجبني 1
  4. يمكنك ذلك من خلال الـ API الخاص بموقع ألف ياء وذلك هو المستند الرسمي:

    والبداية من هنا عليك إنشاء حساب في حال إمتلاكك Aliphia BOX ثم تفعيل Aliphia API ثم نسخ API BASE URI والـ API يتبع بروتوكول RESTful HTTPS كما هو موضح في الخطوات التالية:

    https://aliphia.com/api-docs/#api-_footer

    • شكرًا 1
  5. بتاريخ 18 ساعة قال Moammad Nassan:

    شكرا لك عبد الباسط , اذا قمت بإضافته عن طريق المحرر كيف اضمن كود JS , بعد الhtml او قبله ؟

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

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

    ولنفترض أنك تريد إضافة كود JS لتغيير سلوك زر، فأنت بحاجة إلى وضع الكود بعد عنصر الزر في محتوى الصفحة أي في نهاية الصفحة قبل نهاية عنصر body كالتالي:

    <!DOCTYPE html>
    <html lang="ar">
    <head>
        <meta charset="UTF-8">
        <title>عنوان الصفحة</title>
    </head>
    <body>
        <h1>عنوان الصفحة</h1>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            // كود JavaScript الخاص بك
        </script>
    </body>
    </html>

    يمكنك أيضًا استخدام ملف JavaScript خارجي لإضافة كود JS إلى موقعك عن طريق تحميل الملف الخارجي إلى مجلد "js" في قالبك.

    ثم، تضمين الملف الخارجي في صفحاتك عن طريق إضافة رابط إلى الملف في عنصر script ووضعه في داخل عنصر head كالتالي:

    <!DOCTYPE html>
    <html lang="ar">
    <head>
        <meta charset="UTF-8">
        <title>عنوان الصفحة</title>
        <link rel="stylesheet" href="style.css">
        <script src="js/script.js"></script>
    </head>
    <body>
        <h1>عنوان الصفحة</h1>
    </body>
    </html>

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

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

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

    وأيضًأ كتب لتعلم البرمجة باللغة العربية بالإضافة كم هائل من الدروس والمقالات باللغة العربية.

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

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

  7. معنى Full Stack

     مصطلح Full Stack يعني مطور الويب الذي لديه القدرة على تطوير كل من الواجهة الأمامية (Front-End) والواجهة الخلفية (Back-End) لموقع الويب أو التطبيق.

    بمعنى آخر، يمكن للمطور Full Stack إنشاء كل ما يراه المستخدم على الشاشة (Front-End) وإنشاء كل ما يحدث خلف الكواليس (Back-End).

    معنى MERN Stack

    يعني مجموعة من التقنيات المستخدمة لتطوير مواقع الويب والتطبيقات باستخدام JavaScript. تتكون مجموعة MERN Stack من:

    • MongoDB، وهي قاعدة بيانات NoSQL مفتوحة المصدر.
    • Express.js، وهو إطار عمل ويب مفتوح المصدر يستند إلى Node.js.
    • React.js، وهو إطار عمل واجهة أمامية مفتوح المصدر.
    • Node.js، وهو منصة تطوير تطبيقات الويب وتطبيقات الأجهزة المحمولة المستندة إلى JavaScript.

    وستجد وظائف تتطلب مطور MEAN وحرف A هنا يشير إلى Angular بدلاً من React.

    معنى Back-End

    الواجهة الخلفية أو Back-End تعني الجزء من موقع الويب أو التطبيق الذي لا يراه المستخدم، ويشمل ذلك الخوادم والبيانات والبرامج التي تعالج الطلبات وترسل ردودًا للمستخدمين.

    معنى Front-End

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

    الفرق بين Full Stack و MERN Stack

    يشير مصطلح Full Stack إلى مطور الويب، بينما يشير مصطلح MERN Stack إلى مجموعة من التقنيات المستخدمة لتطوير مواقع الويب والتطبيقات، وبالتالي، فإن الفرق الرئيسي بينهما هو أن Full Stack يشير إلى الشخص، بينما يشير MERN Stack إلى مجموعة التقنيات.

    الفرق بين Back-End و Front-End

    يعني مصطلح Back-End الجزء من موقع الويب أو التطبيق الذي لا يراه المستخدم، بينما يعني مصطلح Front-End  الجزء من موقع الويب أو التطبيق الذي يراه المستخدم، وبالتالي، فإن الفرق الرئيسي بينهما هو أن Back-End يشير إلى الجزء الذي يعمل خلف الكواليس، بينما يشير Front-End إلى الجزء الذي يراه المستخدم.

    أمثلة:

    • مطور Full Stack يمكنه إنشاء موقع ويب كامل، بما في ذلك الواجهة الأمامية التي يراها المستخدم والواجهة الخلفية التي تعالج الطلبات.
    • MERN Stack يمكن استخدامه لتطوير موقع ويب أو تطبيق ويب ديناميكي.
    • Back-End يمكن أن يشمل الخوادم وقواعد البيانات وتطبيقات الويب.
    • Front-End يمكن أن يشمل HTML وCSS وJavaScript.

    وأنت بحاجة إلى مشاهدة الفيديو التالي لتفهم الأمر بشكل أوضح:

     

    • أعجبني 1
  8. أولاً عليك بتحديد المساحة التي تريد من الصورة أن تشغلها، ولتكن مثلاً 500px هنا يجب عليك إختيار صورة بمساحة 1000px حتى يتم عرضها بشكل سليم وواضح على الشاشات التي تعتمد على تنقية double pixels مثل شاشات Retina من آبل.

    وتستطيع تصغير مساحة الصورة في حال كانت كبيرة باستخدام موقع مثل https://squoosh.app أو باستخدام أحد برامج تحرير الصور مثل فوتوشوب.

    بعد ذلك عليك تحديد عرض وطول للعنصر الحاوي للصورة وليكن كالتالي:

    .container {
      width: 500px;
      height: 500px;
    }

    وللصورة عليك تحديد العرض فقط بنسبة 100% من مساحة العنصر الأب وذلك ليتم حساب النسبة بين الطول والعرض  aspect ratio بشكل تلقائي وستظهر الصورة كما هي بدون مشكلة كالتالي:

    img { 
      width: 100%
    }

    وفي حال كانت الصورة لا تظهر بالشكل الذي تريده فيمكنك استخدام خواص:

     

     

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

    من أجل معرفة أين المشكلة بالضبط، يمكنك استخدام أدوات مثل JSONLint أو JSONFormatter للتحقق من صحة JSON  كما يمكنك محاولة تسجيل مستخدم جديد باستخدام Postman، ولكن هذه المرة قم بتسجيل JSON الذي ترسله إلى الخادم، ثم  استخدام أدوات التحقق من صحة JSON لفحص JSON المسجل وتأكد من التالي:

    • تأكد من أن جميع الأقواس والأقواس المزدوجة مفتوحة ومغلقة بشكل صحيح.
    •  جميع المفاتيح والقيم مفصولة بعلامات الفاصلة (،).
    • جميع المفاتيح محاطة بعلامات اقتباس مزدوجة (" ").
    • جميع القيم من النوع الصحيح. على سبيل المثال، لا يمكنك وضع قيمة رقمية داخل قيمة سلسلة.

     

    • أعجبني 1
  10. الخطأ يحدث لأنك تستخدم حقل "username" في نموذج التسجيل  ولكن هذا الحقل غير موجود في نموذج المستخدم.

    وتحتاج إلى إضافة حقل "username" إلى نموذج المستخدم عن طريق إضافة السطر التالي إلى نموذج المستخدم:

    username = models.CharField(max_length=255, unique=True)

    بمجرد إضافة الحقل إلى نموذج المستخدم، يجب أن تختفي الأخطاء.

    إليك مثال على كيفية القيام بذلك:

    # models.py
    from django.db import models
    
    class User(models.Model):
        email = models.EmailField(max_length=255, unique=True)
        password = models.CharField(max_length=128)
        username = models.CharField(max_length=255, unique=True)
    

     

  11. الأمر طبيعي، فكيف ستتحكم في المتجر بدون لوحة تحكم؟ حيث يمكنك القيام بالتالي:

    • إضافة وتعديل وحذف المنتجات.
    • إدارة المخزون.
    • إدارة الطلبات والعملاء.
    • إدارة طرق الدفع والشحن.
    • إعداد التقارير والتحليلات.

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

    وبعض من أهم فوائد لوحة التحكم للمتاجر الإلكترونية:

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

    وعند إختيار أو تطوير لوحة تحكم للمتجر الإلكتروني عليك الإنتباه للتالي:

    • يجب أن تكون لوحة التحكم متوافقة مع نظام إدارة المحتوى (CMS) الذي يستخدمه المتجر الإلكتروني.
    • يجب أن توفر لوحة التحكم جميع الميزات التي يحتاجها صاحب المتجر لإدارة متجره.
    •  أن تكون لوحة التحكم سهلة الاستخدام حتى يتمكن صاحب المتجر من التحكم في متجره بسهولة.
  12. تمارين بايثون للمستوى المبتدئ

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

    • التعرف على لغة بايثون
    • معرفة البيئة الخاصة بلغة بايثون
    • معرفة التركيبة الأساسية للغة بايثون
    • التعرف على نماذج المتحولات في لغة بايثون
    • التعرف على المُشغلات الرئيسية في لغة بايثون
    • التحكم في سير البرنامج باستخدام الحلقات والشروط
    • التعامل مع القوائم والصفوف
    • كتابة وظيفة بسيطة

    وإليك بعض التمارين:

    1. اكتب برنامجًا يطبع "Hello, world!"
    2. اكتب برنامجًا يطلب من المستخدم إدخال رقم ويطبعه
    3. اكتب برنامجًا يحسب مجموع أرقام معينة
    4. اكتب برنامجًا يطبع الأعداد من 1 إلى 10
    5.  اكتب برنامجًا يطبع الأعداد الزوجية من 1 إلى 10
    6.  اكتب برنامجًا يطبع الأعداد الفردية من 1 إلى 10
    7.  اكتب برنامجًا يطلب من المستخدم إدخال رقم ويطبع العدد التالي له
    8. اكتب برنامجًا يطلب من المستخدم إدخال رقم ويطبع العدد السابق له
    9. اكتب برنامجًا يطلب من المستخدم إدخال رقمين ويطبع الفرق بينهما
    10.  اكتب برنامجًا يطلب من المستخدم إدخال رقمين ويطبع حاصل الضرب بينهما
    11.  اكتب برنامجًا يطلب من المستخدم إدخال رقمين ويطبع حاصل القسمة بينهما

    تمارين بايثون للمستوى المتوسط

    هنا يجب تعلم مفاهيم متقدمة مثل:

    • التعامل مع الملفات
    • استخدام المكتبات
    • كتابة وحدات نمطية
    • كتابة تطبيقات واجهة المستخدم الرسومية
    • كتابة تطبيقات الويب
    • كتابة تطبيقات التعلم الآلي

    بعض التمارين:

    1. اكتب برنامجًا يقرأ ملفًا نصيًا ويطبعه
    2. اكتب برنامجًا يكتب إلى ملف نصي
    3. اكتب برنامجًا يستخدم مكتبة math لحساب قيمة جيب التمام لـ 45 درجة
    4. اكتب برنامجًا يستخدم مكتبة random لإنشاء قائمة عشوائية من الأرقام
    5. اكتب برنامجًا يستخدم مكتبة tkinter لإنشاء واجهة مستخدم رسومية بسيطة
    6. اكتب برنامجًا يستخدم مكتبة flask لإنشاء تطبيق ويب بسيط
    7. اكتب برنامجًا يستخدم مكتبة scikit-learn لتدريب نموذج التعلم الآلي البسيط

    تمارين بايثون للمستوى المتقدم

    هنا تأتي مرحلة إنشاء مشاريع كاملة أو برنامج أكثر تعقيدًا وعليك تعلم التالي:

    • البرمجة الكائنية
    • البرمجة الوظيفية
    • هندسة البرمجيات
    • Django
    • قواعد البيانات

    ويمكنك البحث عن مشاريع على اليوتيوب لتنفيذها.

  13. بتاريخ 7 ساعة قال Beshoy Ehab3:

    تفعيل البيئه الافتراضيه

    المكتبات المثبته على النظام الافتراضي

    مع العلم لم اقم بتثبيت اي مكتبه بعد

    من المفترض في حال تفعيل البيئة الإفتراضية أن يعرض الأمر pip freeze المكتبات المثبتة في البيئة فقط.

    وعلي أي حال لعرض المكتبات المثبتة فقط في البيئة الافتراضية الحاليةفقط استخدم الأمر :

    pip freeze --local

    تستطيع أيضًا استخدام الأمر pip list لعرض قائمة بالمكتبات المثبتة في البيئة الافتراضية الحالية.

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

    وأنت قمت بإنشاء بيئة venv عن طريق الأمر التالي:

    python -m venv venv

    ثم تفعيلها عن طريق الأمر التالي:

    venv\Scripts\activate

    أما virtualenv فعليك تثبيتها من خلال الأمر التالي:

    pip install virtualenv	

    ولإنشاء بيئة إفتراضية عليك بالتالي:

    virtualenv my_env	

    ثم تفعيل البيئة الافتراضية بالأمر التالي:

    source my_env/bin/activate

    ولعرض المكتبات المثبتة في البيئة الافتراضية my_env، فسيؤدي الأمر التالي إلى ذلك:

    pip freeze

     

    • أعجبني 1
  14. بتاريخ 7 ساعة قال Mohammad Kiblawi:

     

    شكرا لكما عبد الباسط و سمير عبود على مساعدتي و على التعليق قمت بعمل متغير لحفظ ال active panel حتى تفتح و تغلق بشكل جيد ولا تسبب مشكلة عند تبديل الروابط حيث انها لا تغلق حتى اضغط مرتين

     لكن تبقى امر بسيط و هو اريد عندما اغير من link الى link آخر اريد اضفاء transition الاغلاق و الفتح حيث انني لم استطع تنفيذها 

    اي اريد مثلما اضغط و اغلق الpanel لوحده (حيث تظهر الpanel من خارج الجانب الايسر الى الجانب الايمن) اريد هذا الtransiton عندما انتقل من رابط الى رابط و الpanel مفتوحة

    @سمير عبود @عبدالباسط ابراهيم

     

    لإضافة تأثيرات الانتقال (transition) عندما تنتقل من رابط إلى رابط والـ panel مفتوحة، عليك بالإعتماد على CSS لتحقيق ذلك، ويجب أن تقوم بتعريف الانتقال في CSS لعناصر الـ panel.

    وفي الكود التالي، سأفترض أنك تريد تأثيرًا يظهر الـ panel من الجانب الأيسر ويختفي عند الإغلاق.

    /* تعريف تأثير الانتقال */
    .para {
      transition: transform 0.3s ease-in-out;
      transform-origin: left center;
      transform: translateX(-100%); /* ابدأ بإخفاء ال panel عند الشحنة الأولى */
    }
    
    /* تعريف حالة ظهور ال panel */
    .para:not(.d-none) {
      transform: translateX(0); /* إظهار ال panel بشكل تأثيري */
    }

    هنا الكود يعرف تأثير الانتقال باستخدام transform على العناصر ، وpara ويقوم بتعيين النقطة الأصلية للتأثير من الجهة اليسرى (transform-origin: left center) ويبدأ بإخفاء العنصر بتحريكه خارج الشاشة عبر transform: translateX(-100%).

    عندما تكون الفقرة مفتوحة (بمعنى أنها ليست .d-none)، ستتمكن من رؤية التأثير حيث يتحرك العنصر إلى اليسار ليظهر، وتستطيع تغيير مدى وسرعة التأثير من خلال تعديل قيم transition و transform.

    • أعجبني 1
  15. تم الحديث عن ذلك بشكل مفصل في النقاش التالي:

    وبإختصار قم بتخزين الفيديوهات والصور على خوادم آمنة ومحمية مثل Vimeo  ويمكنك استخدام خدمات التخزين السحابي مثل Amazon S3 أو Google Cloud Storage وضبط الصلاحيات بحيث يكون الوصول إلى الملفات مقيدًا.

    وتستطيع تشفير ملفات الفيديو باستخدام تقنيات التشفير المتاحة في خوادم الوسائط الخاصة بك أو استخدام DRM (إدارة الحقوق الرقمية) للفيديوهات إذا كان ذلك ضروريًا.

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

    وإليك مثال على كيفية استخدام تقنية pagination لعرض المنتجات في Node.js:

    const express = require("express");
    const mongodb = require("mongodb");
    
    const app = express();
    
    // Connect to the database
    const db = mongodb.connect("mongodb://localhost:27017/products");
    
    // Get all products
    const products = db.collection("products").find().toArray();
    
    // Create a paginator
    const paginator = new Paginator(products, 10);
    
    // Get the next page of products
    const nextPage = paginator.next();
    
    // Render the products
    app.get("/products", (req, res) => {
      res.send(nextPage);
    });
    
    app.listen(3000);

    2- هناك خيار آخر وهو استخدام cursors لعرض المنتجات بشكل متتالي، وتسمح لك تلك التقنية بتصفح مجموعة من البيانات دون تحميلها بالكامل في الذاكرة، وبالطبع تستطيع استخدام cursors مع MongoDB.

    مثال:

    const express = require("express");
    const mongodb = require("mongodb");
    
    const app = express();
    
    // Connect to the database
    const db = mongodb.connect("mongodb://localhost:27017/products");
    
    // Get all products
    const cursor = db.collection("products").find();
    
    // Iterate over the products
    cursor.forEach((product) => {
      console.log(product);
    });
    
    app.listen(3000);

    ويمكنك استخدام تقنية cursors لعرض المنتجات بشكل متتالي عن طريق استخدام دالة next() للتقدم إلى المنتج التالي.

    3- وكحل آخر استخدم sharding لتوزيع البيانات على عدة خوادم، و سيساعد ذلك في تقليل وقت جلب البيانات من قاعدة البيانات. 

    مثال:

    const express = require("express");
    const mongodb = require("mongodb");
    
    const app = express();
    
    // Connect to the database
    const db = mongodb.connect("mongodb://localhost:27017/products");
    
    // Shard the database
    const sharding = new Sharding(db);
    
    // Get all products
    const products = sharding.collection("products").find().toArray();
    
    // Render the products
    app.get("/products", (req, res) => {
      res.send(products);
    });
    
    app.listen(3000);

    والفكرية هي تقسيم مجموعة البيانات إلى عدة أجزاء يتم تخزينها على خوادم مختلفة، مما يساعد في تقليل وقت جلب البيانات من قاعدة البيانات.

    بالإضافة إلى تحسين أداء قاعدة البيانات عن طريق تحسين خوارزميات البحث والفرز وتحسين بنية البيانات.

    • أعجبني 1
  17. بعد الدورة والحصول على الشهادة سيتم توجيهك لتحسين مهارات بما يتناسب مع سوق العمل، لتحسين سيرتك الذاتية وملفاتك الشخصية على مواقع العمل الحر، وإن لم تحصل على وظيفة أو عمل حر خلال 6 أشهر من موعد اجتيازك للامتحان، يغطي قيمة الدورة التي دفعتها، ستعيد لك أكاديمية حسوب ما دفعت. بتلك البساطة.

    وبخصوص التدريب فلا يوجد تدريب في الأكاديمية ويمكنك البحث عن فرص internships على موقع مثل LinkedIn وIndeed وما شابهم من مواقع التوظيف، وأفضل تدريب هو تنفيذ المشاريع، وأنت في دورة بايثون ستعمل على تنفيذ المشاريع التالية وهي مشاريع حقيقية:

    • تطوير متجر إلكتروني باستخدام جانغو Django
    • تطوير واجهة برمجية لتعديل الصور باستخدام فلاسك Flask
    • تطوير تطبيقات أودو Odoo
    • بناء مدونة باستخدام فلاسك Flask

    ومشاريع أخرى.

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

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

  18. الأمر غير ممكن بدون واجهة خلفية، حيث يجب معالجة الطلبات الواردة من الواجهة الأمامية في الواجهة الخلفية وأيضًا تخزين بيانات المستخدمين وأمور أخرى.

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

    حيث سيتعين عليك تضمين الـ API الخاص ببوابة الدفع في الواجهة الخلفية من أجل معالجة عمليات الشراء.

    وستجد هنا شرح مفصل أكثر:

     

  19. تقصد في المرة الأولى عند فتح التطبيق بدون أي تحديث للحالة state أو الإعتماديات الخاصة بالخطاف useEffect؟

    في حال كان الأمر كذلك، فهو بسبب وضع StrictMode وما يفعله هو 3 أشياء أثناء تطوير المشروع:

    1. يعيد عرض مكوناتك مرة أخرى Re-renders للعثور على الأخطاء الناتجة عن إعادة العرض غير النقي (التأثيرات الجانبية).
    2. يعيد تشغيل تأثيرات مكوناتك مرة أخرى للعثور على الأخطاء الناجمة عن عدم وجود دالة تنظيف مناسبة.
    3. يتحقق من مكوناتك مما إذا كان يتم استخدام واجهات برمجة التطبيقات القديمة deprecated APIs.

    وبالتالي يتم طباعة الرسالة مرتين في الكونسول، ومن المفترض أن تجد ذلك الوضوع مفعل في مشروعك في ملف index.js أو app.js كالتالي:

    const root = ReactDOM.createRoot(
      document.getElementById('root'),
    );
    
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    );

    وفي حال تعطيله قم بإزالة StrictMode ليصبح الكود كالتالي:

    const root = ReactDOM.createRoot(
      document.getElementById('root'),
    );
    
    root.render(
      <App />,
    );

     

    • أعجبني 1
  20. هل حاولت إضافة رمز التوثيق إلى الطلب؟ عن طريق إضافة حقل Authorization كالتالي:

    useEffect(() => {
        const getUser = async() => {
            const token = localStorage.getItem("token");
            const headers = {
                "Authorization": `Bearer ${token}`
            };
            await axios.get('/api/auth', { headers })
            .then(res => console.log(res.data))
            .catch(err => console.log(err, "err"))
        }
        getUser()
      }, [])

    أيضًا تأكد من التالي:

    1. العنوان الموجه (proxy) في ملف package.json الخاص بمشروع ReactJS يشير إلى الخادم الصحيح أي التأكد من أن الخادم Node.js يعمل على الميناء 3001 وأن العنوان الذي تم تحديده في package.json هو الصحيح.
    2. الخادم Node.js يقوم بالتصريح بشكل صحيح بالمسار '/api/auth'، وهذا مهم لأنه يجب أن يتطابق مع المسار الذي تم استدعاءه من مشروع ReactJS.
    3. تأكد من أن الرمز المرسل في رأس الطلب من مشروع ReactJS (x-auth-token) هو الرمز الصحيح ويتطابق مع الرمز الذي تم إنشاؤه عند تسجيل الدخول.
    4. قم بتصحيح أي مشكلات محتملة في وظيفة protect وتأكد من أنها تقوم بإصدار رمز المصادقة (Token) بشكل صحيح وأنها تستجيب للطلبات بالشكل الصحيح.
    • أعجبني 1
  21. بتاريخ 23 ساعة قال مصطفي مصطفي:

    بيشتغل ازي 

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

    الخطوات الرئيسية التي يقوم بها السكريبت هي:

    1. يتحقق من عنوان الصفحة وإذا كان يحتوي على كلمة "Crash"، يقوم بتحميل مكتبة jQuery إلى الصفحة.
    2. بمجرد أن يتم تحميل مكتبة jQuery بنجاح، يقوم بإزالة عناصر معينة من الصفحة باستخدام تحديد محدد لعناصر HTML.
    3. يعين متغيرات معينة مثل "coefficient" و "crashTime" ويحسبهما استنادًا إلى القوانين الخاصة باللعبة.
    4. يقوم بتنفيذ دورة تكرارية غير محدودة (باستخدام while (true)) حتى تتحقق شرط معين (محتملًا عندما ينجح الوقت في الانهيار)، ثم يخرج من الدورة.
    5. يستخدم setInterval لتنفيذ وظيفة بانتظام كل 1000 مللي ثانية (1 ثانية)، وهذه الوظيفة تقوم بفحص حالة زر معين على الصفحة وتنفيذ إجراءات إذا كان الزر غير معطل. هذا يبدو وكأنه يتعلق بالمراهنة أو اللعب في اللعبة "Crash".

    ويمكن تشغيل السكريبت من خلال إنشاء إضافة خاصة في المتصفح ابحث على اليوتيوب عن how to make google chrome extension وستجد الكثير من الشروحات.

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

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

    ولحل تلك المشكلة، عليك بالضغط بزر الفأرة الأيمن على ملف PSD ثم إختيار properties كالتالي:

    Snag_6dfe96a.thumb.png.7d97d386e26841bd01fea3911c05548d.png

    ستجدي خيار باسم open with وبجانبه البرنامج الإفتراضي لتشغيل ذلك النوع من الملفات، عليك بالضغط على change: 

    Snag_6e0da42.png.e0cdd0c571283fb48260e2eab37e8d4a.png

    وسيظهر لك نافذة بها البرامج التي تصلح لتشغيل ذلك النوع من الملفات ومنها Photoshop فاختاريه ثم اضغطي على Set default كالتالي:

    Snag_6e2cd48.thumb.png.bba63ca253c21d828ddb887f0cde3ba7.png

    • أعجبني 1
  23. هل يظهر لك أية أخطاء في الكونسول، وأيضًا من المفيد حذف الملفات والإعدادات المؤقتة من خلال الأمر التالي:

    php artisan optimize:clear

    وعليك التحقق من ملفات السجلات (logs) على الخادم الاستضافة للبحث عن أي أخطاء، ويمكنك العثور على ملف السجلات في مجلد storage/logs في مشروع Laravel.

    تأكدي أيضًأ من أن الاستضافة تدعم Laravel وLivewire وأن الإعدادات مثل إصدار PHP والامتدادات اللازمة مكونة بشكل صحيح.

    ثم التحقق من تثبيت جميع الاعتماديات (dependencies) على الخادم الاستضافة باستخدام Composer وتنفيذ الأمر الأمر التالي:

    composer install

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

    وتستطيعي تفعيل وسائط التصحيح في Livewire عن طريق تعيين debug إلى true في ملف .env:

    LIVWIRE_DEBUG=true

     

    • أعجبني 1
×
×
  • أضف...