Hikmat Jaafer

لكي تصبح مطور محترف عليك أن تسير بمنهج صحيح و تبدأ التعلم من البداية (الأساسيات), و عليك أن تتعلم كل جانب على حدى أي أنك تتعلم مجال front end ووتقنه ثم تنتقل تتعلم مجال back end . لكل مجال يوجد هناك أساسيات و يوجد مكتبات أو أطر عمل مبنية على هذه الأساسيات لتسهل العمل و تسرعه. في مجال front end: هذا المجال يعتمد بشكل أساسي على اللغات التالية : html css javascript فأولا عليك أن تبدأ بتعلم هذه اللغات الأساسية وو تتقنها, و تقوم بإنجاز مشاريع لكي تطبق ماتعلمته و ترسخ المفاهيم في ذهنك. و لكن سوق العمل اليوم يعتمد بشكل كبير على أطر العمل الخاصة بالواجهات الأمامية مثل: react js angular vue js و غيرها من الأطر المتوفرة و لكن هذه أشهرها, و لذلك بعد أن تتم الأساسيات يجب أن تتعلم واحدة من هذه الأطر, و سيكون تعلمها عليك سهل لأنك قمت بتعلم الأساسيات أولا و هذه الأطر تعتمد على تلك الأساسيات التي تعلمتها, أما إذا قمت بتعلم هذه الأطر أولا دون أن تلم بالأساسيات فسيكون الأمر صعب و سيستغرق وقتا طويلا. في مجال الفرونت يوجد أيضا أطر عمل لتنسيق الواجهات تعتمد على ال css , أي هذه الأطر توفر لك حلول سهلة و سريعة لتنسيق الواجهة الأمامية و جعلها متجاوبة مع جميع الأجهزة , عليك أن أيضا أن تتعلمها إلى جانب ال css , ومن هذه الأطر: bootstrap tailwaind material و الأكاديمية توفر دورات شاملة لتعلم مجال الفرونت من الصفر حتى الاحتراف, و الأن يمكنك أنت حسب مستواك في المجال أن تختار الدورة التي ستبدأ بها, فإذا كنت قد تعلمت الأساسيات يمكنك البدء بتعلم أطر العمل مباشرة , و إذا لم تتعلمها فيجب أن تبدأ بها. ثم بعد أن تتم مجال front end وو تتقنه يمكنك البدء بتعلم مجال backend, ولكن عليك أن تختار أي إطار عمل ستتعلم , وذلك يعتمد على رغبتك و على ماهو الإطار المطلوب في سوق العمل لديك, و بعد أن تختار يمكنك البدء به , و قد أوضح لك الزملاء في التعليقات السابقة بعض الدورات يمكنك أنت تختار إحداها , ويمكنك أن تقرأ عن الدورة و تعرف ماذا ستتعلم بها قبل أن تختارها. و يمكنك قراءة هذا المقال الموجه للمبتدأين في مجال البرمجة لتنتفع أكثر.

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

تستطيع بناء تطبيقات أندرويد بلغة البرمجة بايثون باستخدام إحدى أطر العمل هذه BeeWare أو Kivy أو ,Chaquopy و هذه أطر عمل تسمح ببناء تطبيقات متعددة المنصات باستخدام بايثون. تمكنك هذه الأدوات من إستخدام بايثون فقط لبناء واجهة التطبيق وكذلك الجزء المنطقي Logical من التطبيق، أي أنك ستستخدم لغة بايثون فقط، دون الحاجة إلى لغات أخرى طريقة عمل هذه المنصّات هي أنّها تشغّل مفسّر بايثون على آلة جافا الوهمية (Java Virtual Machine)، وعن طريق تلك الطبقة ستعمل بايثون وبالتالي يمكن لبرامجك أنت كذلك أن تعمل. لكن هذه الطرق غير شائعة، أو دعنا نقل غير مستحسنة كثيرًا لعدة أسباب وهي: الأداء الخاصّ ببرامجك لن يكون مثل أداء البرامج الأصلية المكتوبة بجافا مثلًا أو المكتوبة باستخدام إطار عمل خاص بتطبيقاتالجوال مثل فلاتر. هنا تستعمل لغة برمجة لبناء أشياء لم تؤخذ بعين الاعتبار عند بنائها فبايثون ليست لغة برمجة تطبيقات هواتف ذكية ولهذا تجد مجتمع بايثون صغير وضعيف في هذه الناحية. و للأسباب السابقة يفضل أن تقوم بتطوير التطبيق باستخدام إحدى أطر العمل المخصصة للأندرويد وال ios و يمكنك القراءة أكثر عن تطوير التطبيقات باستخدام بايثون من هنا و أيضا إذاكنت ترغب بالبدء في تعلم أطر العمل الخاصة بتطبيقات الجوال فيمكنك الاطلاع على هذا

بشكل عام في جميع المشاريع عندما تقوم بوضع هيكلية للمشروع حاول في البداية أن تفكر بالمشروع بشكل عام و تحدد أجزاءه و مكوناته بنظرة عامة و من ثم تنتقل للتخصيص أكثر ,و قم بتجميع الأجزاء المترابطة مع بعضها و تصنيفها بحسب وظيفتها . مثلا: في جميع مشاريع الواجهة الأمامية يكون المشروع مقسم لعدة صفحات و كل صفحة مقسمة لعدة أجزاء و هذه الأجزاء يمكن أن تستخدم في أكثر من صفحة. فنقوم بوضع الصفحات في مجلد ونسميه pages مثلا, و قد تكون كل مجموعة من الصفحات تعبر عن خدمة ما مثل صفحات تسجيل الدخول و تسجيل جديد فنقوم بوضع هذه الصفحات في مجلد ضمن ال pages و لنسميه مثلا auth . و الأجزاء التي تكون الصفحات نضعها في مجلد أخر و لنسميه components و نقوم بإضافةمستويات حسب الحاجة. بالنسبة لل css ,والصور نستطيع وضعها في مجلد assets بالنسبة لل navbar و sidebar و footer نستطيع وضعهم في مجلد layout ال routes تستطيع وضعهل في مجلد لوحدها . بشكل عام حاول أن تجعل بنية مشروعك واضحة ومنظمة وغير معقدة.

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

لتطوير تطبيقات الأندرويد هناك عدة لغات برمجة و أطر عمل يمكن استخدامها في هذا المجال و أشهرها: java : هي لغة البرمجة التقليدية لتطوير تطبيقات الأندرويد , و كانت هي اللغة الأساسية المستخدمة في هذا المجال. Flutter : هو إطار عمل الأكثر شيوعا اليوم في هذا المجال و يعتمد على لغة البرمجة Dart , و هو متعدد المنصات أي يسمح ببناء تطبيقات android و ios ,و يوفر مكتبة واسعة من عناصر واجهة المستخدم الجاهزة التي تسمى (Widgets). يمكنك بناء وتخصيص واجهة المستخدم الخاصة بك باستخدام هذه (Widgets).بطريقة سهلة ومرنة. و هو الخيار الأفضل لتبدأ به. React Native : أيضا هو إطار عمل متعدد المنصات و شهير ,ويعتمد على ال javascript , و هي قريبة جدا من إطار العمل React الذي يستخدم لتطوير تطبيقات الويب. فإذا تعلمتها تستطيع بسهولة أن تتعلم ال React و تصبح مطور تطبيقات ويب أيضا .

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

هناك العديد من الدورات و المقالات التي توفرها الأكاديمية، و كل دورة موجهة لمجال معين. ففي البداية عليك أن تحدد غايتك من تعلم البرمجة لتستطيع تحديد اللغة التي ستتعلمها, فمجالات البرمجة واسعة وكثيرة و عليك أن تختار مجال منها لتتعلمه وتتقنه. في حالتك أنت تريد أن تتخصص في مجال الذكاء الاصطناعي فيمكنك البدء بدورة الذكاء الاصطناعي ففيها ستتعلم ما تحتاج إليه من الصفر دون حاجة إلى معرفة برمجية مسبقة، وتمدك بكل المعلومات لبناء نماذج ذكاء اصطناعي متخصصة قادرة على تنفيذ مجموعة متنوعة من المهام. و يمكنك قراءة هذه المقالة التي ستوضح لك الطريق في تعلم البرمجة أكثر https://academy.hsoub.com/programming/general/تعلم-البرمجة-r662/

يمكنك الحصول على مسار العنوان في next js باستخدام المكون withRouter و الموجود في هذه المكتبة next/router يمكنك استخدام المكون كالتالي import * as constlocalStorage from '../helpers/localstorage'; import Router from 'next/router'; import { withRouter } from 'next/router'; export default class MyApp extends App { componentDidMount() { if (constlocalStorage.getLocalStorage()) { Router.push({ pathname: '/app' }); } else { Router.push({ pathname: '/signin' }); } } render() { const { pathname } = this.props.router; const { Component, pageProps } = this.props; return ( //pathname أصبح بإمكانك التحقق باستخدام {pathname != '/signin' && <Layout> <Component {...pageProps} /> </Layout> } ); } }

الدخول في الأكاديمية لايتطلب منك أن تكون طالب في المدرسة, و لكن هناك مجموعة أمور يجب أن تلم بها لتساعدك في تعلم البرمجة بسرعةوهي: التفكير المنطقي: يجب أن يكون لديك قدرة على على تحليل المشكلات وتقسيمها إلى أجزاء صغيرة و تطبيق خطوات منطقيةلإيجاد الحلول. الرياضيات: معظم المسائل والمشكلات يمكن حلها باستخدام قوانين الرياضيات ولذلك يجب أن يكون لديك معرفة بقواعد الرياضيات الأساسية. المهارات اللغوية: القدرة على القراءة و الكتابة لتستطيع كتابة الشفرات البرمجية وقراءتها لا تقلق إذا كنت لست قويا بالرياضيات و التفكير المنطقي بالبداية, يكنك تحسين هذه المهارات مع الوقت والمتابعة المستمرة,ولكن وجودها في في البداية يعطيك انطلاقة قوية و سريعة. والأكاديمية توفر لك دورات شاملة لتعلم البرمجة تعتمد على التطبيق العملي وبناء مشاريع حقيقية، تبدأ معك من الصفر وتأخذك خطوة بخطوة حتى الاحتراف إليك هذه المقالة إذا كنت ترغب بتعلم البرمجةو لاتعرف كيف تبدأ https://academy.hsoub.com/programming/general/تعلم-البرمجة-r662/

وعليكم السلام , لتتمكن من فعل ذلك , أنت بحاجة إلى Google Sheet Api , ومعرفة في لغات html css Js و JQuery . كخطوات عامة: أولاً , يجب عليك بناء قالب جديد في google sheet وإنشاء ورقة جديدة , مع إضافة الأعمدة التي تريدها ( مثل الاسم , العمر , راتب الموظف, الوظيفة ... الخ ). ثانياً , يجب عليك بناء فورم إدخال موظف باستخدام html وcss و js و jquery. وأستعمال google sheet api لتتمكن من إضافة بيانات الى الورقة التي قمت بإنشاءها , وأيضاً أضاف حقل البحث , كما في المثال التالي : Html File <!DOCTYPE html> <html> <head> <title>add employee example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <h2>add new employee</h2> <form id="employeeForm"> <label for="name">name:</label> <input type="text" id="name" name="name" required><br> <label for="age">age:</label> <input type="number" id="age" name="age" required><br> <label for="job">job:</label> <input type="text" id="job" name="job" required><br> <label for="salary">sal:</label> <input type="number" id="salary" name="salary" required><br> <input type="submit" value="add"> </form> <h2>search</h2> <input type="text" id="search" placeholder="search for an employee"><br> <button id="searchButton">search</button> <div id="results"></div> </body> </html> ملف Js $(document).ready(function() { const sheetId = 'YOUR_GOOGLE_SHEET_ID'; const sheetName = 'Sheet1'; $('#employeeForm').submit(function(e) { e.preventDefault(); const name = $('#name').val(); const age = $('#age').val(); const job = $('#job').val(); const salary = $('#salary').val(); const url = `https://script.google.com/macros/s/GOOGLE-SHEET-KEY/exec?id=${sheetId}&sheet=${sheetName}&name=${name}&age=${age}&job=${job}&salary=${salary}`; $.get(url, function(data) { alert('add success!'); }); }); $('#searchButton').click(function() { const searchTerm = $('#search').val(); const url = `https://script.google.com/macros/s/GOOGLE-SHEET-KEY/exec?id=${sheetId}&sheet=${sheetName}&search=${searchTerm}`; $.get(url, function(data) { $('#results').html(data); }); }); }); لاحظ أنني قمت بتعريف sheetId وهو id الخاص ب google sheet لديك , وتعريف sheetName وهي اسم الورقة الخاص بك . أيضاً لاحظ طريقة استخدام google sheet api , وكيف نمرر sheet id و sheet name , وباقي الحقول .

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

في سوق العمل اليوم الشركات تفضل توظيف المطوريين الذين لديهم الخبرة في كلا الاتجاهين html and css مع المكتبات ,و vanilla css html استخدام المكتبات الجاهزة يسهل تنظيم و تصميم الواجهات بشكل فعال و سريع , و لكن في بعض الأحيان قد تحتاج لاستخدام ال css بدون مكتبات لكي تحصل على واجهات مطابقة 100% للتصميم الذي وضعه المصمم.و إذا كنت تريد العمل كمطور واجهات أمامية فعليك أن تلم بشكل أساسي بال css ومن ثم تنتقل لتعلم المكتبات. و كلاهما مهم في تطوير الواجهات الأمامية و في سوق العمل.

بداية تأكد من أنك قمت بتثبيت vite , و إذا لم تقوم بتثبيتها بعد ثبتها باستخدام التعليمة npm init vite@latest ثم تأكد من أنك قمت بتنفيذ التعليمة التالية لتحميل متغيرات البيئة npm install dotenv ثم قم بإنشاء الملف التالي لتحميل متغيراات البيئة vite.config.js وقم بوضع الكود التالي ضمنه import { defineConfig } from 'vite' import reactRefresh from '@vitejs/plugin-react-refresh' import dotenv from 'dotenv' dotenv.config() export default defineConfig({ plugins: [reactRefresh()], }) الأن يمكنك استخدام المتغير الذي وضعته ضمن ملف ال .env في مشروعك بهذا الشكل const apiKey = process.env.API_KEY; قم بتنفيذ التعليمة console.log(apiKey); لتتأكد من أنك قمت باستيراد ال apiKey بشكل صحيح

يمكنك تحميل SSMA من موقع microsoft , و بعد تحميله يمكنك اتباع التعليمات التي ستظهر لك عند فتحه لتقوم بتثبيته , ثم بعد تثبيته قم بإنشاء مشروع جديد لتقوم بنقل قاعدة المعطيات عليه و من ثمقم باتباع الخطوات المذكورة سابقا

نعم يمكنك أن تستخدم SQL Server to MySQL Migration Wizard لعمل ذلك . بعد أن تقوم بتثبيته لديك , عليك أن تقوم بالاتصال ب sql server , ثم تتصل ب mysql server , ثم تختار قاعدة البيانات التي تريد تصديرها و تحدد الجداول التي تريدها , وتقوم بتحديد ال configuration و تقوم بالتصدير

مرحبا @احمد قابل هاشم ألصميدعي يحدث هذا الخطأ عندما تستغرق عملية الإضافة وقتًا أطول من فترة المهلة المحددة لإكمالها. و هناك أكثر من احتمال لوجود هذا الخطأ قد تكون المشكلة في الاتصال بقاعدة البيانات , فعليك أن تتحقق من أن خادم mongoDB الخاص بك يعمل بشكل صحيح وأن اتصال Mongoose الخاص بك قد تم إنشاؤه بنجاح. إذا كنت تقوم بعملية كبيرة أو معقدة فقد تستغرق وقتا أطول من المهلة الافتراضية , فيمكنك زيادة المهلة عن طريق إضافة خيار bufferTimeoutMS عند إنشاء اتصال Mongoose الخاص بك: mongoose.connect('your mongoDB server url', { bufferTimeoutMS: 30000, // Increase the timeout to 30 seconds }); هذه حلول عامة يمكنك تجريبها , و إذا لم تحل المشكلة يمكنك أن تشارك ملفات المشروع لفحصه ومعرفة سبب المشكلة. شكرالك

مرحباً, لحماية التطبيق الخاص بك وتنفيذ حد لمحاولات إدخال كلمة المرور الخاطئة، يمكنك اتباع الخطوات التالية في العمل على الجانب الخلفي والأمامي: الجانب الخلفي (Back-end) إنشاء قاعدة بيانات لتخزين معلومات المستخدمين، بما في ذلك الاسم وكلمة المرور وعدد المرات التي تم فيها إدخال كلمة المرور الخاطئة. عندما يقوم المستخدم بإدخال كلمة مرور خاطئة، قم بزيادة عدد المحاولات الفاشلة في قاعدة البيانات. قم بفحص عدد المحاولات الفاشلة للمستخدم بعد كل محاولة، وإذا وصلت إلى الحد المحدد (مثل ٥ مرات)، فقم بتحديث حالة المستخدم إلى "محظور" واحفظ وقت الحظر في قاعدة البيانات (مثل تاريخ ووقت الحظر). عندما يحاول المستخدم المحظور الوصول إلى الموقع، قم بفحص وقت الحظر المخزن وقارنه بالوقت الحالي. إذا انتهت فترة الحظر، قم بإزالة حالة المستخدم "المحظور" وأعد عدد المحاولات الفاشلة إلى الصفر. الجانب الأمامي (Front-end) عند إدخال كلمة المرور في واجهة المستخدم، قم بإرسالها إلى الخادم باستخدام طلب HTTP. استخدم استجابة الخادم لفحص ما إذا كانت كلمة المرور صحيحة أم لا. إذا كانت كلمة المرور خاطئة، فقم بعرض رسالة خطأ للمستخدم وتحديث عدد المحاولات الفاشلة التي تمت. عندما يتم حظر المستخدم، قم بعرض رسالة له يبلغه فيها عن حظره ومتى سينتهي الحظر. مثال عملي : بفرض لدينا تطبيق Express و React , فسوف نقوم بالتالي : من الجانب الخلفي Express : // Import required modules and set up database connection // Route to handle login requests app.post('/login', async (req, res) => { const { username, password } = req.body; try { // Fetch user from the database based on the username const user = await User.findOne({ username }); if (!user) { return res.status(404).json({ message: 'Invalid username or password' }); } // Check if password matches const passwordMatches = await user.comparePassword(password); if (!passwordMatches) { // Increase the failed login attempts for the user user.failedAttempts += 1; await user.save(); if (user.failedAttempts >= 5) { // Set the user status to "blocked" and save the block time user.status = 'blocked'; user.blockedUntil = Date.now() + (2 * 60 * 60 * 1000); // Block for 2 hours await user.save(); return res.status(401).json({ message: 'Your account has been blocked. Please try again after 2 hours.' }); } return res.status(401).json({ message: 'Invalid username or password' }); } // Reset the failed login attempts and save the user user.failedAttempts = 0; await user.save(); // Generate and return the authentication token const token = generateAuthToken(user); res.json({ token }); } catch (error) { console.error(error); res.status(500).json({ message: 'Internal server error' }); } }); من الجانب الأمامي React : import React, { useState } from 'react'; const LoginForm = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); try { const response = await fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ username, password }), }); if (response.ok) { const { token } = await response.json(); // Store the token in local storage or state for future requests } else { const { message } = await response.json(); setError(message); } } catch (error) { console.error(error); setError('An error occurred. Please try again later.'); } }; return ( <form onSubmit={handleSubmit}> <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> <button type="submit">Login</button> {error && <p>{error}</p>} </form> ); }; export default LoginForm; لاحظ أنه من الجانب الخلفي قمنا بحظر المستخدم لمدة ساعتين عندما قام بالمحاول 5 مرات بإدخال كلمة المرور . وأيضاً نقوم بإرجاع رسالة الخطأ من الجانب الخلفي , ومن الجانب الأمامي نقوم فقط بعرضها . بالإضافة إلى تنفيذ حد لمحاولات إدخال كلمة المرور، هناك بعض النصائح الأمنية الأخرى التي يجب مراعاتها: تخزين كلمات المرور بشكل آمن باستخدام تقنيات التجزئة (hashing) و (salting) لمنع الوصول إلى الكلمات المرور الأصلية. استخدم HTTPS لتأمين اتصالاتك وتشفير بيانات المستخدم الحساسة أثناء النقل. قم بتنفيذ إجراءات الحماية من هجمات Cross-Site Scripting (XSS) وCross-Site Request Forgery (CSRF) وInjection وغيرها من هجمات الأمان الشائعة. تحقق من صحاستخدم مكتبة حماية الهوية والوصول الموثوق بها في إطار العمل الخاص بك، مثل Passport.js، لإدارة عملية المصادقة والتحقق من صحة كلمات المرور وإدارة الحظر والحماية الأخرى.

أهلاعمر جرب هذه الحلول تأكد من أنك في المجلد الصحيح قم بتنفيذ الأمر dir و سيظهر لك قائمة بالمجلدات الموجودة في هذا المسار , تأكد من وجود مجلد الديسكتوب في هذه القائمة. جرب استخدام المسار الكامل للمجلد الذي تريد الوصول إليه أي هكذا cd "C:\Users\Username\Desktop" قم بوضع اسم المستخدم الخاص بك مكان username جرب أن تغلق ال cmd و تعيد فتحها من جديد وتنفذ الأمر cd desktop

وعليكم السلام , أهلاً عمر . انت تقوم بكتابة cd desktop يجب عليك الإنتباه أنه أول محرف يجب أن يكون Capital Letter اذا كان يبدأ الاسم بD بدلاً من d, أي كالتالي : cd Desktop

وعليكم السلام , أهلاً محمود , بالنسبة للسؤال الأول: لماذا نستخدم ReactDOM.createPortal وما هي فائدته؟ ReactDOM.createPortal هو وظيفة في مكتبة ReactDOM في React تسمح بتقديم المكونات إلى عنصر DOM خارج هيكلة الشجرة الرئيسية لتطبيق React. وتستخدم عادة في حالات تريد فيها عرض المحتوى في عنصر DOM مستقل عن عنصر الجذر الرئيسي للتطبيق.وذلك يفيد في توفير القدرة على عرض المكونات في مكان محدد بشكل مستقل عن شجرة المكونات الرئيسية. يمكن استخدامه في حالات مثل عرض شريط التحميل (loader) في الجزء العلوي من الصفحة أو عرض قائمة منبثقة (dropdown) خارج المكون الأصلي. إليك مثال يوضح ذلك : بفرض أنه نريد وضع شريط التحميل في الجزء العلوي من الصفحة , فسوف نقوم باستخدام createPortal كما في الكود التالي : import React from 'react'; import ReactDOM from 'react-dom'; const Loader = () => { return ReactDOM.createPortal( <div className="loader-wrapper"> <div className="loader"> <img src={loaderImg} alt="Loading..." /> </div> </div>, document.getElementById('loader-root') ); }; const App = () => { return ( <div> <h1>Welcome to my app</h1> <p>This is some content.</p> <Loader /> </div> ); }; ReactDOM.render(<App />, document.getElementById('root')); لاحظ في هذا المثال، قمت باستخدام ReactDOM.createPortal لعرض مكون Loader في عنصر DOM منفصل ب id يسمى loader-root. وبالتالي يتم عرض شريط التحميل في الجزء العلوي من الصفحة دون أن يكون جزءا من شجرة المكونات الرئيسية. أما بالنسبة للسؤال الثاني: فائدة وضع المتغيرات فوق الدالة في مكون React في المثال الأول الذي قدمته، يتم تعريف المتغيرات قبل الدالة المكون. هذا يتيح إمكانية استخدام هذه المتغيرات داخل الدالة أو في أي مكان آخر داخل الملف. المثال التالي يوضح ذلك : import React from 'react'; const UserStats = () => { const a = 'Hello'; const b = 'World'; return ( <div className="component"> <h2>{a} {b}</h2> <p>This is a user stats component.</p> </div> ); }; export default UserStats; في هذا المثال، قمت بتعريف المتغيرات a و b قبل الدالة المكون. وبالتالي، يمكن استخدامها داخل الدالة لعرض قيمهما في العناصر JSX. أما في المثال الثاني، فقمت تعريف المتغيرات داخل الدالة نفسها. وبالتالي، يمكن استخدامها فقط داخل الدالة ولا يمكن الوصول إليها في أي مكان آخر في الملف. كما في المثال التالي : import React, { useEffect, useState } from 'react'; const UserStats = () => { const [userData, setUserData] = useState(null); useEffect(() => { const fetchUserData = async () => { const response = await fetch('https://api.example.com/user'); const data = await response.json(); setUserData(data); }; fetchUserData(); }, []); const username = userData?.username; const followers = userData?.followers; return ( <div className="component"> <h2>{username}</h2> <p>Followers: {followers}</p> </div> ); }; export default UserStats; في هذا المثال، قمت باستخدام المتغيرات username و followers في المنطق التحضيري (استدعاء API وتحديث الحالة) قبل عرض المكون. بمجرد جلب بيانات المستخدم وتحديث الحالة، يتم استخدام المتغيرات في عناصر JSX لعرض اسم المستخدم وعدد المتابعين

الخطأ الأول يشير إلى أنه التطبيق غير قادر على الاتصال بال DNS الخاص بخادم mongoDB و هذه المشكلة متعلقة باعدادات الشبكة والاتصال و لحلها يمكنك اتباع الخطوات التالية: تأكد من وجود اتصال إنترنت وأنك تستطيع الوصول إلى مواقع الويب الأخرى أو الخدمات بدون أي مشاكل. تأكد من عنوان خادم MongoDB الذي تستخدمه من أنه صحيح و أنه لا يوجد أخطاء في الكتابة أو حروف مفقودة. تأكد من أنك تستخدم الاسم الصحيح لمضيف خادم mongoDB . تحقق من جدار الحماية الخاص بك من أنه لا يحظر الاتصال مع خادم mongoDB باتباع هذه الخطوات يجب أن تتمكن من حل الخطأ. الخطأ الثاني يشير إلى أنه يتم رفض الاتصال من خادم mongoDB عليك أن تتحقق من صحة معلومات الاتصال, تحقق من عنوان الخادم ورقم المنفذ. تأكد من أن الخادم متاح. الطريقة الصحيحة لاستخدام mongoDB atlas انشاء حساب من خلال موقع mongoDb Atlas بعد أن تنشأ الحساب قم بإنشاء مشروع جديد و حدد أعداداته ضمن المشروع الجديدقم بإنشاء عنقود الذي سيستضيفقاعدة البيانات الخاصة بك للاتصال بقاعدة البيانات عبر تطبيقك يمكنك استخدام سلسلة الاتصال التي سيقدمها لك mongoDB Atlas و التي تحتوي اسم المضيف و رقم المنفذ ومعلومات المستخدم الخاصة بك, يمكنك استخدام المكتبة الملائمة للغة البرمجة التي تستخدمها لإنشاء اتصال وتنفيذ عمليات على قاعدة البيانات

الريأكت تعتمد على لغة البرمجة java script ,لذا من الضروري أن تكون على دراية جيدة بأساسياتها قبل البدء بتعلم الريأكت . بالإضافة إلى ذلك يجب أن تكون ملم باللغات الأساسية لتطوير الواجهات الأمامية للويب و التي هي html و css. الأن بعد تعلم أساسيات الويب يمكنك البدء بتعلم الريأكت. بداية عليك أن تتعرف على بنية مشروع الريأكت و طريقة تقسيم الملفات بداخله ليكون مشروعك منظم وواضح و قابل للصيانة. ثم عليك أن تتعرف على المفاهيم الأساسية المستخدمة في الريأكت و هي : ال syntax الخاص بالريأكت مثلا في ال html كنا نكتب بهذه الطريقة: <button onclick="activateLasers()"> Activate Lasers </button> أما في الريأكت : <button onClick={activateLasers}> Activate Lasers </button> لاحظ كيف اختلفت طريقة استدعاء التابع و ال onClick أصبح الحرف الأول من الكلمة الثاني كبير C jsx component بالإضافة إلى ذلك عليك أن تعلم أن هناك نوعين من ال component في الريأكت و هما: 1- class component: لم يعد مستخدم الأن 2- functional component: و هو المستخدم الأن لأنه أقل تعقيدا و أوضح و ثم قم بعمل أي مشروع صغير لتطبق ماتعلمته و لكي تتوضح لك الأمور أكثر. ثم عليك أن تتعمق أكثر و تتعرف على مفاهيم أكثر مثل: props: تستخدم لتمرير البيانات بين ال components hooks: تستخدم لإدارة حياة الكمبوننت useState: تستخدم لإدارة حالة الكمبوننت و تحديث متغيراته و عكسها على الواجهة و هي مهمة جدا في الريأكت , وهي من ال hooks باستخدام مفاهيم ال props و ال hooks تستطيع أن تبني موقع تفاعلي , و يصبح مستواك في الريأكت جيد . و الأن يمكنك تعلم كيف تجلب البيانات من ال api باستخدام مكتبات ال javascript مثل axios و يمكنك تعلم مفاهيم متقدمة مثل (redux) وكيف تقوم بإدارته و جلب البيانات منه و ادخال البيانات اليه و تحديث الواجهة عندما يتغير. إليك بعض الدورات التي يمكنك البدء منها دورة اساسيات javascript اساسيات react.js

يمكنك تنفيذ ذلك باستخدام Redux , هذا مثال كامل يوضح ما ترديه تماماً : أولاً نقوم بإنشاء actions لتعريف login و logout apis و استخدام jsonwebtoken لنقوم بعمل decode للتوكين المستقبل من api . أيضاً لاحظ لاستخدامنا لdispatch لنتمكن من حفظ التوكين في redux slice الذي سوف نقوم بإنشاءها بملف reducer: // actions.js File import axios from 'axios'; import jwtDecode from 'jsonwebtoken'; export const login = (username, password) => async (dispatch) => { try { const response = await axios.post('/api/login', { username, password }); const token = response.data.token; const decodedToken = jwtDecode(token); dispatch({ type: 'LOGIN', payload: { token, user: decodedToken }, }); } catch (error) { console.log(error); } }; export const logout = () => (dispatch) => { dispatch({ type: 'LOGOUT', }); }; ومن ثم نقوم بإنشاء ملف reducer : // reducer.js File const initialState = { isAuthenticated: false, token: null, user: null, }; const reducer = (state = initialState, action) => { switch (action.type) { case 'LOGIN': return { ...state, isAuthenticated: true, token: action.payload.token, user: action.payload.user, }; case 'LOGOUT': return { ...state, isAuthenticated: false, token: null, user: null, }; default: return state; } }; export default reducer; ومن ثم نقوم بإنشاء store الخاص بredux. // store.js File import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import reducer from './reducers'; const store = createStore(reducer, applyMiddleware(thunk)); export default store; والان بعد انشاء redux وحفظ التوكين , يمكننا استخدامها في ملفات login و logout. Login : import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { login } from '../redux/actions'; const Login = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const dispatch = useDispatch(); const handleLogin = () => { dispatch(login(username, password)); }; return ( <div> <h2>Login</h2> <input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} /> <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> <button onClick={handleLogin}>Login</button> </div> ); }; export default Login; Logout : import React from 'react'; import { useDispatch } from 'react-redux'; import { logout } from '../redux/actions'; const Logout = () => { const dispatch = useDispatch(); const handleLogout = () => { dispatch(logout()); }; return ( <div> <h2>Logout</h2> <button onClick={handleLogout}>Logout</button> </div> ); }; export default Logout;

اهلاً احمد