Mustafa Suleiman

المشكلة لديك تكمن في استخدام المفتاح الفريد (unique key) في قسم العرض (map) الخاص بـ userData، ويتطلب React توفير مفتاح فريد لكل عنصر يتم تمريره في قسم العرض لتحسين أداء العملية والتعامل مع عناصر القائمة بشكل صحيح. مما يعني أنه يجب استخدام خاصية معرف فريدة من قاعدة البيانات لكل مستخدم (user) كمفتاح فريد لكل عنصر في القائمة، باستخدامها كمفتاح (key) في العنصر (element) الذي تقوم بعرضه في القائمة، وتستطيع الإعتماد على استخدام user._id كمفتاح فريد، كالتالي: <div className='ProfileInfo'> {userData.length > 0 && userData.map((user) => ( <div className='profileInfo-container' key={user._id}> <div className='profileInfo-top'> </div> <div className='profileInfo-center'> <img className='profile-avatar' fontSize="large" src={auth.user.avatar} alt=""/> {user._id && auth && user._id === auth.user._id ? <button className='addfbtn' onClick={() => setEdit(true)}>EDIT</button> : <GlobalFriendBtn classBtn="addfbtn" user={user}/> } </div> {/* إضافة المزيد من العناصر لعرضها */} </div> ))} </div> من خلال إضافة key={user._id} في العنصر الذي يتم عرضه في القائمة، يتم ضمان توفر مفتاح فريد لكل عنصر، وبالتالي يجب أن لا يتم عرض نسخ مكررة من الملف الشخصي للمستخدم. وتأكد أيضًا من أن user._id في العبارة {user._id && auth && user._id === auth.user._id} ليس null أو undefined، حيث يستخدم لمقارنة المستخدم الحالي بمستخدم في القائمة وعرض زر التعديل فقط إذا كانا متطابقين. وستجد شرح للقوائم والمفاتيح في React في موسوعة حسوب أيضًا في المستند الرسمي لـ React

عليك أولاً بحفظ التغييرات، ثانيًا تأكد من أنك قمت بربط ملف index.js في ملف index.html بشكل صحيح وذلك عن طريق عنصر script كالتالي: <script defer src="index.js"></script> ويتم وضع ذلك الجزء داخل عنصر header أو في نهاية عنصر body لكن لا حاجة إلى ذلك حيث أنني قمت بوضع defer من أجل تحميل السكريبت بعد إنتهاء تحميل أكواد HTML وستجد شرح لذلك هنا: الآن داخل ملف السكريبت حاول تجنب كتابة اسم المتغير باسم name لكونه تابع لخاصية في الكائن Window وهي window.name ولكن تلك الخاصية أصبحت deprecated أي لم تصبح مدعومة بعد الآن وسيتم إزالتها بعد فترة، وستجد خط كما لو أنه شطب على اسم المتغير كما ترى في الكود لديك. ولطباعة اسم المتغير بعد تغييره سنقوم بكتابة السكريبت كالتالي: 'use strict'; let personName; personName = 'mohamed'; console.log(personName); وسيتم طباعة الاسم في الكونسول. ولاحظ أنني قمت بكتابة 'use strict' أو الوضع الصارم في البداية وأنصحك باستخدامها عند كتابة سكريبت عادي وليس module حيث يتم تفعيله بشكل إفتراضي في الـ modules وفائدتها كالتالي: في الوضع الصارم، يجب عليك تعريف المتغيرات قبل استخدامها، فإذا قمت بتعيين قيمة لمتغير غير معرف، سيتم إلقاء استثناء. ولا يمكنك استخدام مفاتيح الكلمات المحجوزة كمعرفات، مما يحميك من تعديل قيمة المفاتيح الداخلية للغة. يجبرك على اتباع بعض الممارسات الأفضل في البرمجة، مما يساعد في تجنب بعض الأخطاء الأمنية الشائعة. يتم منع الوصول إلى خصائص الكائنات غير المعرفة، مما يساعد في تجنب الأخطاء الناتجة عن التعامل مع كائنات لا تحتوي على الخصائص المطلوبة. في بعض الحالات، الوضع الصارم يساعد في تحسين أداء الكود، حيث يمكن للمترجم أن يقوم بتنفيذ بعض الأمور بشكل أسرع وأكثر فعالية. أيضًا ستتم معالجة بعض الأخطاء التي تكون صامتة في الوضع العادي Silent Errors، مثلاً ستحصل على أخطاء عند استخدام المتغيرات غير المعرفة بدلاً من إنشاء متغيرات عالمية ضمن نطاق Global. وهناك أمور أخرى لكن لا تشغل بالك بها حاليًا.

هناك بعض النقاط التي يجب توضيحها فيما يتعلق بالفروقات: 1- هيكلية المعالجة GPU: تم تصميم وحدة معالجة الرسومات للتعامل بشكل رئيسي مع الرسومات والعمليات المتوازية، وتتميز بأنها تحتوي على عدد كبير من وحدات المعالجة الرسومية التي تعمل معًا لتنفيذ العمليات بسرعة. TPU: تم تصميم وحدة معالجة التنقيح خصيصًا للتعلم العميق والذكاء الاصطناعي، وتتميز بأنها تحتوي على مجموعة كبيرة من العتاد المخصص لعمليات التنقيح بشكل فعال. 2- الأداء GPU: تعتبر وحدات معالجة الرسومات قوية في تنفيذ العمليات المتوازية بشكل فعال. يمكنها تسريع الحوسبة والتعلم العميق، وتقديم أداء جيد في مجموعة واسعة من التطبيقات. TPU: تم تصميم وحدات معالجة التنقيح خصيصًا لأداء العمليات المرتبطة بتعلم الآلة، وتعتبر أكثر كفاءة في تنفيذ العمليات الرياضية المتعلقة بالتعلم العميق، مما يعني أنها يمكن أن توفر أداءًا أفضل في بعض التطبيقات. 3- القدرة على التوسع GPU: تستخدم على نطاق واسع في مجالات مختلفة، مثل الألعاب، والعلوم، والتصميم، والتعدين، وغيرها، ويمكن استخدام مجموعة متنوعة من الألعاب المتعددة الأبعاد والتطبيقات الأخرى بفضل قدرتها على التعامل مع مهام متعددة. TPU: صُممت وحدات معالجة التنقيح بشكل خاص لتحسين أداء التعلم الآلي، ولكن هي غالبًا ما تكون محدودة في استخداماتها وتستخدم بشكل رئيسي في تطبيقات التعلم العميق والذكاء الاصطناعي. 4- أمثلة على استخدامات GPU في التعلم الآلي يستخدم تدريب النماذج العميقة للتعرف على الصور، مثل تصنيف الكائنات أو تجزئة الصور إلى أجزاء مختلفة. تدريب نماذج التنبؤ اللغوي، مثل الترجمة الآلية أو إنشاء نماذج لتوليد النصوص الطبيعية. تدريب نماذج التعرف على الصوت وتحويل الإشارات الصوتية إلى نصوص. 5- أمثلة على استخدامات TPU في التعلم الآلي تسريع عمليات التدريب في نماذج التعلم العميق، مما يؤدي إلى زيادة سرعة التدريب وتحسين الأداء العام للنموذج. تحليل البيانات الكبيرة وتدريب نماذج التنبؤ بالسلوك وتحليل البيانات الاستراتيجية في المجالات مثل التسويق والتمويل. تستفيد TPU من قدرتها على التعامل مع العمليات الرياضية المرتبطة بالتعلم العميق، مما يجعلها مثالية لتدريب النماذج الضخمة التي تحتاج إلى قوة حسابية كبيرة.

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

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

ستحتاج في البداية إلى من يرشدك ويوجهك وأن ترى كتابة الكود بعينيك والأخطاء وتصحيحاتها على الشاشة، وبعد أن تتمكن تنفيذ المشاريع بمفردك، وبالطبع ستصل لتلك المرحلة بعد الإنتهاء من مسار تعليمي كامل وبعد فترة لا تقل على 6 أشهر. لكن لا تكتفي بالدورة فقط بل ابحث وتعلم وطبق بمفردك على مشاريع أخرى. وتستطيع بعدها قراءة الكتب وهو أمر أنصحك به بشدة، لكن كما ذكرت ليس في البداية، وليس أي كتاب أيضًا فالكتب التي أرشحها لك بخصوص مجال الويب ولغة بايثون هي: JavaScript: The Good Parts by Douglas Crockford Eloquent JavaScript by Marijn Haverbeke Python Crash Course by Eric Matthes Fluent Python by Luciano Ramalho SQL for Dummies by Alan R. Simon The Pragmatic Programmer by Andrew Hunt and David Thomas Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin Grokking Algorithms Head first OOAD Good code, bad code Head First design patterns وتستطيع الإختيار من بين الكتب السابقة ما شئت لكن إذا أردت الأهم فهم: Grokking Algorithms Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin Head first OOAD Good code, bad code Head First design patterns وللأسف أغلب الكتب المفيدة باللغة الإنجليزية، وفي أكاديمية حسوب يتم محاولة توفير كتب قيمة باللغة العربية وستجد جميع الكتب في القسم الخاص بالكتب في أكاديمية حسوب. وتستطيع البحث بين قائمة أفضل الكتب مثلاً للبرمجة أو لمجال الويب أو للغة بايثون وهكذا، لكن يجب الإختيار من بينها بعناية وعن تجربة وتقييم مبرمجين آخرين، وتستطيع السؤال أيضًا، وعندما تريد قراءة كتاب يجب أن يكون الكاتب ذو خبرة تستحق الأخذ بها.

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

الكود غير صحيح، ولا تعتمد على الذكاء الاصطناعي في مثل تلك الأمور، أولاً ستعاني في شرح الأمر له، وثانيًا من الأفضل لك مراجعة الأساسيات والتفكير في كيفية حل المشكلة عن طريق تقسيم التحدي إلى أجزاء صغيرة ثم تقسيم تلك الأجزاء إلى أجزاء أصغر واعمل على تنفيذها، وبعد الإنتهاء من جزء انتقل للجزء الذي يليه. وفي حال واجهتك مشكلة في كيفية تنفيذ التحريك Animation فعليك بتعلم كيفية فعل ذلك وستجد شروحات كثيرة لذلك على اليوتيوب مثلاً. وإليك الكود الصحيح، حاول التعلم منه ثم تطبيق التحدي بأحرف أخرى مثل حرفين من اسمك مثلاً Am. الكود بدون استخدام Flex Box أو Grid: HTML <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div> <div class="six"></div> <div class="seven"></div> <div class="eight"></div> CSS: * { box-sizing: border-box; } .one { background-color: #333; width: 300px; height: 50px; position: absolute; } .two { background-color: #333; width: 300px; height: 50px; position: absolute; top: 200px; } .three { background-color: #333; width: 300px; height: 50px; position: absolute; top: 400px; } .four { background-color: #333; width: 50px; height: 442px; } .five { background-color: #333; width: 50px; height: 442px; transform: translate(340px, -442px) } .six { background-color: #333; width: 300px; height: 50px; transform: translate(340px, -492px); } .seven { background-color: orange; width: 40px; height: 35px; transform: translate(590px, -535px); animation-name: move1; animation-duration: 5s; animation-iteration-count: 1; animation-timing-function: linear; } @keyframes move1 { 0% { transform: translate(590px, -535px) } 25% { transform: translate(345px, -535px) } 50% { transform: translate(345px, -925px) } 100% { transform: translate(345px, -925px); opacity: 0 } } .eight { background-color: orange; width: 40px; height: 35px; transform: translate(250px, -962px); animation-name: move2; animation-duration: 5s; animation-delay: 5s; animation-iteration-count: 1; } @keyframes move2 { 0% { transform: translate(250px, -962px) } 10% { transform: translate(5px, -962px) } 20% { transform: translate(5px, -770px) } 30% { transform: translate(250px, -770px) } 40% { transform: translate(5px, -770px) } 50% { transform: translate(5px, -569px) } 60% { transform: translate(250px, -569px) } 70% { transform: translate(5px, -569px) } 90% { transform: translate(5px, -962px) } 100% { transform: translate(250px, -962px) } } الكود باستخدام Grid: HTML <div class="parent"> <div class='one'></div> <div class='two'></div> <div class='three'></div> <div class='four'></div> <div class='five'></div> <div class='six'></div> </div> CSS .parent { width: 800px; height: 450px; background-color: #eee; padding: 25px; margin: 10px auto; position: relative; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(3, 1fr); } .parent div { background-color: #383838; } .parent .one { grid-row: 1 / span 3; } .parent .two { grid-column: 2 / span 3; height: 70px; align-self: flex-start; } .parent .three { grid-column: 2 / span 3; height: 70px; align-self: center; } .parent .four { grid-column: 2 / span 3; height: 70px; align-self: flex-end; } .parent .five { grid-column: 6 / span 1; grid-row: 1 / span 3; } .parent .six { grid-column: 7 / span 3; height: 70px; align-self: flex-end; } .parent::after { content: ''; height: 45px; width: 45px; position: absolute; background-color: #ffb104; right: 120px; bottom: 37px; animation: my-first-move 3s linear both; } .parent::before { content: ''; height: 45px; width: 45px; position: absolute; background-color: #ffb104; left: 285px; top: 37px; animation: my-second-move 3s linear 3s; } @keyframes my-first-move { 0% { right: 120px; } 30% { right: 361px; bottom: 37px; } 70% { opacity: 1; right: 361px; bottom: 417px; } 100% { opacity: 0; right: 361px; bottom: 417px; } } @keyframes my-second-move { 0% { left: 285px; top: 37px; } 10% { left: 44px; top: 37px; } 20% { left: 44px; top: 225px; } 30% { left: 285px; top: 226px; } 40% { left: 44px; top: 225px; } 50% { left: 44px;top: 417px; } 60% { left: 285px; top: 417px; } 70% { left: 44px; top: 417px; } 85% { left: 44px; top: 37px; } 100% { left: 285px; top: 37px; } }

من الأفضل التركيز على مجال الويب، وتعلم اللغات الأساسية HTML, CSS, JS والتركيز عليهم بشدة وبشدة وبشدة والتطبيق على أكثر من مشروع باستخدام تلك اللغات، ثم التطبيق على js بمفردها من خلال أكثر من مشروع وستجد على اليوتيوب أو جوجل الكثير من المشروع بمستويات مختلفة في المحتوى العربي والأجنبي. ثم انتقل بعد ذلك لتعلم إطار عمل للواجهة الأمامية مثل Angular أو Vue.js أو مكتبة مثل React والأمر يعتمد على المطلوب في سوق العمل لديك بكثرة بالنسبة لمستوى Junior أو Entry Level، وبخصوص مواقع العمل الحر فالأفضل التركيز على تعلم PHP ولارافيل وورد بريس ومعهم إطار Vue.js أو React. وبالطبع عليك إنشاء أكثر من مشروع حقيقي وليس مجرد نماذج من خلال إطارات العمل التي ذكرتها لك وذلك لإنشاء معرض أعمال جيد مناسب للتقدم إلى وظيفة أو تكوين معرض أعمال من أجل العمر الحر، ولا تنسى تعلم GitHub ورفع مشاريعك عليه. بعد ذلك ستحتاج إلى إنشاء مشاريع أكثر تعقيدًا بأفكار مختلفة لكي تكتسب الخبرة اللازمة وزيادة معرفتك ومهاراتك. وبعد تنفيذ ما سبق، تستطيع تعلم تطوير تطبيقات الهاتف من خلال Flutter أو React Native كما تريد، وبالطبع هو أمر جيد لكن يجب التركيز على المجال الذي تريد التخصص به أولاً.

أولاً استعوض الله في بياناتك، وقم بعمل Format للهارد بالكامل، ولكن احذر حيث أن بعض فيروسات الفدية قد تظل موجودة بعد الفورمات لذلك قم بتجربة إضافة بعض الملفات بعد تثبيت نسخة ويندوز جديدة بعد الفورمات وقم بعمل إعادة تشغيل للجهاز فإن لم يتم التشفير، فتلك إشارة جيدة، ولكن حاول تثبيت برنامج Bitdefender قبل استخدام الجهاز لضمان وجود حماية من قبل برنامج حماية قوي. وفي حال كان هناك فلاشة Flash USB متصلة بالجهاز، فقم بعمل فورمات لها أولاً ثم قم بنزعها. وعليك بتجنب استخدام أي كراكات أو تصفح مواقع مشبوهة، فقلة الوعي الأمني يعرضك للكثير من المخاطر، ولا تقم بتحميل أي شيء من على الإنترنت بدون دراية ووعي، والتحميل فقط من المواقع الرسمية الموثوقة. وللعلم هناك إمكانية لفك التشفير في حال كان إمتداد الملفات لديك متعارف على التشفير الخاص بها، وتستطيع تفقد ذلك من خلال المواقع التالية: https://noransom.kaspersky.com https://www.nomoreransom.org/en/decryption-tools.html قم بالبحث عن إمتداد الملف أو اسم الفيروس الذي يظهر لديك، وسيظهر لك في حال كان هناك فك تشفير له، لكن ذكرت لك الحل الأسهل في البداية وهو الفورمات.

الأمر يعتمد على مدى الثقة لديك بالمستقل الذي تريد العمل معه، والأمر يظهر بمدى سنوات الخبرة لديه وأيضًا بتقييمات العملاء السابقة، فحاول إختيار شخص لديه أسبقية عمل وتقييمات جيدة. وهناك عدة خيارات متاحة أمامك ولكن ذلك يعتمد على ما الذي تريد تطويره أو تغييره في متجرك، فالخيار الأول هو أن تعطيه كلمة المرور واسم المستخدم للوحة cPanel وليس كلمة المرور الخاصة بحسابك كعميل في الاستضافة انتبه إلى ذلك فهما أمران مختلفان فأنت المتحكم بحسابك طالما تمتلك كلمة المرور الخاصة بحسابك على الاستضافة أما لوحة التحكم cPanel فلها كلمة مرور مختلفة. والخيار الثاني، هو أن تقوم بإنشاء حساب له للدخول على لوحة التحكم cPanel من خلال user manager كما بالصورة: ومنها تستطيع تحديد الصلاحيات الخاصة بالحساب وتستطيع إعطائه صلاحية FTP فقط، والمسار الذي تريده لكي يعمل عليه فقط مثل مسار puplic_html/site كمثال. وهناك خيار webdisk للوصول لملفات الموقع عن طريق لوحة التحكم cPanel، وتستطيع تحديد المسار أيضًا. وتستطيع حذف الحساب، أو تغيير الباسورد الخاص بك للوحة التحكم cPanel في أي وقت لو شعرت بالقلق. وهناك خيار آخر وهو السماح له بالدخول على جهازك عن طريق برنامج مثل TeamViewer وتستطيع رؤية ما يفعله، لكن إذا كان الأمر يتطلب تطوير وتعديل وإصلاحات فذلك الخيار لن يكون جيد حيث يجب توفير مساحة حرية ليعمل بها وفي الوقت المناسب له، أما إذا كان سيتم نشر ما قام بتطويره مباشرًة بعد أن يقوم بتنفيذ التطوير على جهازه فلا مشكلة. وتستطيع أيضًا أن تقوم بإنشاء حساب له على منصة OpenCart عن طريق الإعدادات ثم users أو المستخدمين ثم قم بالضغط على علامة الزائد + لإضافة حساب واعطه صلاحية Admin لكي يتمكن من التطوير.

بالتأكيد فإطار Bootstrap يعمل مع أي إطار أو مكتبة خاصة بالواجهة الأمامية، مثل React أو Angular أو أي إطار عمل آخر لجافا سكربت. حيث أن Bootstrap هو إطار عمل موجه لتصميم وتطوير واجهة المستخدم، وهو مستقل عن الإطار العمل الذي تستخدمه. ولتنفيذ ذلك، تستطيع تضمين مكتبة Bootstrap في مشروعك الخاص بـ React أو Angular، باستخدام أدوات مثل npm أو yarn لتثبيت Bootstrap ومكتبته الأساسية (CSS)، ثم استيراد الملفات اللازمة في مشروعك. ولمعلوماتك عند استخدام Bootstrap مع React، بإمكانك استخدام مكتبات إضافية مثل "react-bootstrap" التي توفر عناصر ومكونات React متوافقة مع Bootstrap، وبذلك ستتمكن من الاستفادة من قوة Bootstrap وفي الوقت نفسه توافقها مع تصميم وتفاعلية React. بالنسبة لـ Angular، تستطيع استخدام Bootstrap مباشرة من خلال تثبيته وتضمينه في مشروع Angular، واستيراد ملفات CSS الخاصة بـ Bootstrap في ملفات الأنماط (stylesheets) الخاصة بمشروعك، وأيضًا استخدام المكونات الموجودة في Bootstrap في تطبيق Angular. واعتمادًا على الإطار العمل الذي تستخدمه، ستجد أن هناك بعض الاختلافات في كيفية تضمين Bootstrap واستخدامه بشكل صحيح. لذا، يجب تفقد المستندات الرسمية للإطار الذي تنوي استخدامه عن كيفية تضمين مكتبة Bootstrap بداخله.

أولاً وقبل أي شيء، عليك بتعلم لغة برمجة، وطالما أنك تريد مجال تعلم الآلة فعليك بتعلم لغة بايثون، وستجد في أكاديمية حسوب دورة تطوير التطبيقات باستخدام لغة Python. وفي تلك الدورة سيتم التدرج في تعلم لغة بايثون والتطبيقات الخاصة بها، بدايًة من الأساسيات والتطبيق عليها ثم تعلم Flask وDjango وOdoo ثم وصولاً إلى تعلم أساسيات تحليل البيانات و تعلم الآلة Machine Learning. بعد ذلك تستطيع التعمق في مجال تعلم الآلة والدورات الخاصة بها، سواء عن طريق البحث على يوتيوب على دورة عربية من خلال البحث عن "كورس تعلم الآلة" وستجد بعض الكورسات. أو البحث باللغة الإنجليزية عن "machine learning course" وستجد العديد من الكورسات. وقم بنفس الأمر على جوجل أيضًا وستجد نتائج عديدة، وتستطيع التوجه إلى موقع مثل Udemy أو Coursera ثم تفقد الكورسات المتاحة هناك سواء عربية أو أجنبية.

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

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

بعد تنفيذ ما أخبرك به عدنان، الأفضل لك هو استخدام إضافة Live Server حيث سيتم إنشاء سيرفر وعرض التغييرات التي تجريها بشكل فوري في المتصفح، بعد تثبيت الإضافة ستجد أنه ظهر خيار باسم Go live كما بالصورة فاضغط عليه وسيتم عرض المشروع الخاص بك: وتستطيع إيقاف السيرفر بالضغط على نفس الزر، ولكن سيكون باسم المنفذ أي كالتالي Port: 5500 فاضغط عليه وسيتم إيقافه.

ستجد تطبيق عملي على كل قسم في الدورة، فبالنسبة للأساسيات، هناك مشروع تطبيق إدارة مهام. وبعد الإنتهاء من المشروع، يتم زيادة درجة تعقيد المشاريع في القسم التالي وهو تطبيقات عملية باستخدام بايثون Python والذي به تطبيقات مختلفة كالتعامل مع جداول بيانات إكسل Excel وword وPDF وأيضًا تعلم Web Scraping وغيرها. ثم تنتقل للقسم الذي يليه، وهو أساسيات إطار العمل جانغو Django والذي به مشروع تطبيق لإدارة المشاريع وإنشاء لوحة تحكم له ثم نشره على الويب، بعد ذلك تنتقل إلى مشروع آخر وهو تطوير متجر إلكتروني باستخدام جانغو Django. وبعد الإنتهاء من ذلك تنتقل إلى تطوير واجهة برمجية لتعديل الصور باستخدام فلاسك Flask، وأيضًا هناك مشروع آخر وهو بناء مدونة باستخدام فلاسك Flask. ثم تنتقل إلى تعلم تطوير تطبيقات أودو Odoo والذي به تعمل على بناء تطبيق وجباتي. وبعد ذلك تنتقل إلى تعلم تحليل البيانات ثم أساسيات تعلم الآلة Machine Learning. وبخلاف ذلك تستطيع البحث على يوتيوب عن مشاريع خاصة ببايثون مثلاً مشاريع للمبتدئين أو ابحث عن مشاريع Django وهكذا وستجد الكثير من المشاريع التي تناسب مستواك واختر منها وتعلم بجانب الدورة، فذلك ما يجب عليك فعله في أي دورة لثقل مهاراتك وزيادة خبراتك وعدم الإنتقال من قسم إلى قسم إلا بعد أن تصبح قادر على تنفيذ مشاريع بمفردك.

صحيح، فأنت نسيت تعريف المتغير face_details_list في الكود، ويستخدم هذا المتغير في دالة draw_face التي تستقبل قائمة تفاصيل الوجه. وتستطيع تعريف face_details_list بشكل منفصل قبل استدعاء الدالة draw_face وتمريره كوسيط للدالة عند استدعائها، كالتالي: import turtle face_one = [ [(-40, 120), (-70, 260), (-130, 230), (-170, 200), (-170, 100), (-160, 40), (-170, 10), (-150, -10), (-140, 10),(-40, -20), (0, -20)], [(0, -20), (40, -20), (140, 10), (150, -10), (170, 10), (160, 40), (170, 100), (170, 200), (130, 230), (70, 260),(40, 120), (0, 120)] ] face_two = [ [(-40, -30), (-50, -40), (-100, -46), (-130, -40), (-176, 0), (-186, -30), (-186, -40), (-120, -170), (-110, -210),(-80, -230), (-64, -210), (0, -210)], [(0, -210), (64, -210), (80, -230), (110, -210), (120, -170), (186, -40), (186, -30), (176, 0), (130, -40),(100, -46), (50, -40), (40, -30), (0, -30)] ] face_three = [ [(-60, -220), (-80, -240), (-110, -220), (-120, -250), (-90, -280), (-60, -260), (-30, -260), (-20, -250),(0, -250)], [(0, -250), (20, -250), (30, -260), (60, -260), (90, -280), (120, -250), (110, -220), (80, -240), (60, -220),(0,-220)] ] turtle.hideturtle() turtle.bgcolor("#ba161e") turtle.setup(500, 600) turtle.speed(3) def draw_face(face_details_list, start_point): my_turtle = turtle.Turtle() my_turtle.penup() my_turtle.goto(start_point) my_turtle.pendown() my_turtle.color("#fab104") my_turtle.begin_fill() for i in range(len(face_details_list[0])): x, y = face_details_list[0][i] my_turtle.goto(x, y) for i in range(len(face_details_list[1])): x, y = face_details_list[1][i] my_turtle.goto(x, y) my_turtle.end_fill() face_one_start = (0, 120) face_two_start = (0, -30) face_three_start = (0, -220) draw_face(face_one, face_one_start) draw_face(face_two, face_two_start) draw_face(face_three, face_three_start) turtle.done() ما تم تعديله هو تعريف face_details_list بشكل منفصل قبل استدعاء الدالة draw_face وتمريرها كوسيط للدالة عند استدعائها، وأيضًا نقل تعريف my_turtle داخل دالة draw_face لضمان إنشاء كائن Turtle جديد لكل وجه.

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

هل يمكنك توضيح ما الخطأ الذي يظهر لك، انسخه وألصقه هنا بشكل نصي أو صورة للمشكلة. فربما هناك خطأ آخر في الكود، مثل أن يكون face_details_list لا يحتوي على قيم صحيحة للإحداثيات x و y. حاول التحقق من أن face_details_list يحتوي على القيم الصحيحة للإحداثيات، ومن تنسيق البيانات داخل face_details_list للتأكد من أن القيم المخزنة فيه صحيحة ومطابقة للتوقعات. وقم بمشاركة الكود بشكل كامل والخطأ الذي يظهر لك ليتم مساعدتك بشكل أفضل.

الخطأ هو أنه لم يتم تعريف المتغير turtle قبل استخدامه، والصحيح هو استيراد واستخدام مكتبة turtle، وتعريف كائن من الفئة Turtle لتنفيذ الأوامر كالتالي: import turtle # تعريف الكائن الخاص بالرسم my_turtle = turtle.Turtle() # الحلقة الأولى for i in range(len(face_details_list[0])): x, y = face_details_list[0][i] my_turtle.goto(x, y) # الحلقة الثانية for i in range(len(face_details_list[1])): x, y = face_details_list[1][i] my_turtle.goto(x, y) # إيقاف البرنامج من أجل عرض النتيجة turtle.done() أولاً استيراد مكتبة turtle في البداية وتعريف كائن جديد من الفئة Turtle بواسطة السطر my_turtle = turtle.Turtle(). ثم استخدام الكائن my_turtle لتنفيذ أوامر الرسم مثل goto وتحريكه إلى الإحداثيات المحددة، عند الانتهاء من الحلقات، تستدعى turtle.done() لإيقاف البرنامج وعرض النتيجة المرسومة.

معنى الخطأ هو أن الدالة write_to_excel() تتطلب وسيط إضافي يسمى "file_path" ولم تقدمه عند استدعاء الدالة. أي يجب عليك تمرير مسار الملف الذي ترغب في الكتابة إليه كواحدة من المعاملات عند استدعاء الدالة write_to_excel()، وتأكد من تقديم المسار الصحيح للملف في الدالة. وإليك مثال يوضح كيفية استخدام win32com لكتابة بيانات إلى ملف Excel: import win32com.client as win32 def write_to_excel(file_path): excel = win32.gencache.EnsureDispatch('Excel.Application') wb = excel.Workbooks.Add() ws = wb.Worksheets('Sheet1') # كود الكتابة إلى الخلايا في الملف ws.Range('A1').Value = 'Hello' ws.Range('B1').Value = 'World' wb.SaveAs(file_path) excel.Application.Quit() file_path = 'C:/yourfolder/file.xlsx' write_to_excel(file_path) وعليك تغيير 'C:/yourfolder/file.xlsx' بالمسار الصحيح لملف Excel الذي ترغب في الكتابة إليه. وإذا استمرت المشكلة لديك، أرفق الكود سواء برفع مجلد المشروع أو من خلال إضافته من علامة <> لمساعدتك بشكل أفضل

صحيح، فكل الأشياء (المتغيرات، الدوال، القوائم، الصفوف، وغيرها) عبارة عن كائنات. وفي بايثون، يتم التعامل مع البيانات والعمليات على شكل كائنات. الكائنات تحتوي على خصائص (بيانات) وأساليب (وظائف)، ويمكن للكائنات التفاعل مع بعضها البعض وتبادل البيانات والمعلومات. ومن الممكن أن تكون الكائنات من الأنواع المدمجة في بايثون مثل الأعداد والسلاسل والقوائم والقواميس. ومن الممكن أيضًا أن تكون الكائنات من الأنواع المخصصة التي يتم إنشاؤها بواسطتك، وكل شيء في بايثون يعتبر كائنًا، بما في ذلك المفاهيم الأساسية مثل الدوال والمتغيرات، كالتالي: class Person: def __init__(self, name, age): self.name = name self.age = age def introduce(self): print("My name is", self.name, "and I'm", self.age, "years old.") # إنشاء كائن من النوع "Person" person = Person("أحمد", 25) person.introduce() # الطباعة: My name is أحمد and I'm 25 years old. تم تعريف الكائن Person المخصص باستخدام الكلمة المفتاحية class، وتحديد خصائص وأساليب الكائن في الداخل. مثل تحديد خاصيتين له (الاسم والعمر) بالإضافة إلى أسلوب (introduce) يقوم بطباعة معلومات الشخص، ثم إنشاء كائن من النوع "Person" واستدعاء الأسلوب (introduce) لطباعة المعلومات. وكمثال آخر للتوضيح، لنفترض أن لدينا كائنًا من النوع "قائمة" (List) يحتوي على أرقام: numbers = [1, 2, 3, 4, 5] فتستطيع الوصول إلى خصائص الكائن واستخدام الأساليب المتاحة له، كاستخدام الأسلوب append() لإضافة عنصر جديد إلى القائمة: numbers.append(6) print(numbers) والنتيجة هي طباعة القائمة بعد إضافة العنصر الجديد: [1, 2, 3, 4, 5, 6] و باستخدام الأسلوب append() المتاح لكائن القائمة (الكائن numbers) أضفنا العنصر 6 إلى نهاية القائمة.

ضع أمر طباعة بعد storedData لتفقد ما القيمة التي يتم إرجاعها؟ const storedData = localStorage.getItem('data'); console.log(storedData) فإذا كانت قيمة falsy مثل null أو undefined فلم يتم تنفيذ الكتلة الخاصة بـ if. وإذا استمرت المشكلة أرفق مجلد المشروع.

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