Mustafa Suleiman

عليك بتشغيل المشروع من خلال منفذ الأوامر بعد فتحه في مسار مجلد المشروع قم بتشغيل الأمر التالي: npm start وسيظهر لك عنوان المشروع والبورت مثلاً http://localhost:3000/ أو http://localhost:5000/

أرجو أن أكون قد فهمت سؤالك بشكل صحيح، فعند إغلاق صفحة ويب في تطبيق React، ستتم إعادة تحميل الصفحة وستبدأ من جديد بدلاً من استئناف حالتها السابقة. ولكن تستطيع استخدام مختلف الأساليب للحفاظ على حالة الصفحة واستعادتها بعد إغلاقها، وهناك اثنتان من الأساليب الشائعة وهما: 1- استخدام تخزين المستعرض (Browser Storage) من خلال الإعتماد على localStorage أو sessionStorage لتخزين حالة الصفحة واستعادتها في وقت لاحق، وعند إغلاق الصفحة وفتحها مرة أخرى، يمكنك استرجاع البيانات المخزنة واستعادة حالة التطبيق. كمثال، لتخزين حالة صفحة بسيطة في localStorage، استخدم الكود التالي: // عند التحميل الأولي للصفحة componentDidMount() { const savedState = localStorage.getItem('myPageState'); if (savedState) { this.setState(JSON.parse(savedState)); } } // عند تحديث حالة الصفحة componentDidUpdate() { localStorage.setItem('myPageState', JSON.stringify(this.state)); } 2- استخدام مكتبة خارجية هناك مكتبات خارجية تساعد في إدارة حالة التطبيق واستعادتها بعد إعادة التحميل، مثل Redux toolkit و Zustand، تتيح تلك المكتبات إدارة الحالة العالمية للتطبيق والاحتفاظ بها بين الجلسات. ومثلاً باستخدام Redux toolkit، بإمكانك تخزين حالة التطبيق واستعادتها كالتالي: 1- تعريف المتجر (store) الخاص بالتطبيق وتعيين الحالة الابتدائية: // في ملف store.js import { createStore } from 'redux'; import rootReducer from './reducers'; const initialState = JSON.parse(localStorage.getItem('myAppState')) || {}; const store = createStore(rootReducer, initialState); export default store; 2- استخدام المتجر في التطبيق: // في ملف index.js import { Provider } from 'react-redux'; import store from './store'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); 3- في مكونات التطبيق، تستطيع الوصول إلى حالة التطبيق وتحديثها باستخدام الأوامر المناسبة من Redux. import { useSelector, useDispatch } from 'react-redux'; function MyComponent() { const state = useSelector((state) => state); // الوصول إلى حالة التطبيق const dispatch = useDispatch(); // تحديث حالة التطبيق const updateState = () => { dispatch({ type: 'UPDATE_STATE', payload: { /* بيانات التحديث */ } }); }; // ... } ومن المهم أن تعلم أن استخدام مكتبة مثل Redux يتطلب إعداد إضافي واستخدام مفاهيم مثل الأعمال (Actions) والمخفضات (Reducers) وتوصيل المكونات (Connect)، يمكنك قراءة المزيد عن Redux وكيفية استخدامه في التطبيقات ذات React في المستند الرسمي. أما إذا كان المقصود بسؤالك كيف تقوم بإعادة فتح صفحة في المتصفح بعد إغلاقها فقم بالضغط على “Ctrl + Shift + T” معًا في الكيبورد.

صحيح، فلتحديث المشروع ورفعه من جديد بعد إجراء تعديلات عليه، عليك بالخطوات التالية: 1- استخدم الأمر git add . لإضافة جميع التعديلات الجديدة إلى الاستعداد للتحميل: git add . 2- بعد ذلك، قم بإنشاء نسخة محلية جديدة (commit) للتعديلات المُضافة باستخدام الأمر git commit -m "name"، حيث "name" هو رسالة الالتزام التي تصف التعديلات الجديدة: git commit -m "Updated project" 3- أخيرًا، استخدم الأمر git push لرفع التعديلات إلى المستودع البعيد (remote repository): git push وأرجو الإنتباه إلى المسافات والاسم الصحيح للأوامر حيث أنك كتبتها بشكل خاطيء انتبه لذلك.

أهلاً بك أحمد قد تم شرح ذلك في عدة نقاشات من قبل وسأرفقها لك، وقد أرفقتها لك في سؤالك من قبل أرجو منك قرائتها بالكامل، وإليك الأوامر أيضًا: git add . هذا الأمر يقوم بإضافة جميع الملفات والتغييرات التي تم تعديلها في الدليل الحالي إلى الاستعداد للتحميل (staging area). يتم استخدام النقطة (.) للإشارة إلى جميع الملفات. git commit -m "Upload files" الأمر يقوم بإنشاء نسخة محلية (commit) من الملفات التي تمت إضافتها في الاستعداد. يتم تعيين رسالة الالتزام (commit message) إلى "Upload files" باستخدام الخيار -m. git branch -M main الأمر السابق يقوم بإعادة تسمية الفرع الحالي إلى "main". يُفضل استخدام "main" كاسم للفرع الافتراضي بدلاً من "master" في الإصدارات الحديثة من Git. git remote add origin <repository-url> من خلال الأمر السابق يمكنك بإضافة رابط المستودع البعيد (remote repository) باسم "origin"، ويتيح لك هذا الرابط ربط المستودع المحلي بالمستودع البعيد على خدمة مثل GitHub قم باستبدال <repository-url> برابط مستودعك الذي أنشأته. git push -u origin main الأمر يقوم بتحميل (push) التغييرات المحلية إلى المستودع البعيد المُرتبط بـ "origin". الخيار -u يعين "origin/main" كفرع متتبع (upstream) للفرع المحلي "main". مما يسمح لك في المرات التالية ببساطة باستخدام "git push" دون تحديد الفرع والمستودع. وأنصحك قبل ذلك مشاهدة الفيديو التالي أولاً:

قد تم شرح الأمر من خلال فيديو على قناة أكاديمية حسوب، والشرح يتم على استضافة Heroku لكنها أصبحت مدفوعة الآن، وأنصحك باستخدام أحد الاستضافات التالية: render.com railway.app cyclic.sh مع العلم أن استضافة railway تتطلب حساب GitHub قد تم إنشائه من فترة 3 أشهر إلى 6 اشهر وتم رفع مشروع عليه خلال تلك الفترة للحصول على الباقة المجانية.

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

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

يتوفر العديد من مجموعات تصميم واجهة المستخدم (UI Design Kits) التي يمكن استخدامها لتطوير تطبيقات iOS و Android، ةإليك بعض المجموعات: 1- iOS UI تحتوي على مجموعة كبيرة من المكونات والأيقونات التي تلائم تصميمات iOS. 2- Ant Design توفر Ant Design مجموعة من المكونات الجاهزة والتصاميم المتعددة الاستخدامات، وتستطيع العثور على Ant Design على الموقع الرسمي. 3- Fluent Design System تم تطويرها بواسطة مايكروسوفت لتصميم تطبيقات Windows وتضم مكونات وتصاميم تتماشى مع تصميم FluentK، وتستطيع العثور على مواد التصميم الخاصة بـ Fluent على الموقع الرسمي لمايكروسوفت. وهناك الكثير من مجموعات التصميم الأخرى، وما عليك سوى البحث عن "ui kit for android and iphone for developers" في جوجل وستجد الكثير من الروابط.

1- مستشعر عداد الخطي (Linear Potentiometer) يستخدم لقياس الحركة الخطية، ويمكن استخدامه في تطبيق المسجد الأقصى لتتبع حركة المستخدم وتحديد موقعه ضمن البيئة الافتراضية. 2- مستشعر الضوء يقيس مستوى الإضاءة المحيطة، ويمكن استخدامه في تطبيق المسجد الأقصى لتوفير تأثيرات بصرية واقعية بناءً على إضاءة المكان وتغيرها مع مرور الوقت. 3- مستشعر رطوبة الهواء لقياس نسبة الرطوبة في الجو، ويمكن استخدامه في تطبيق المسجد الأقصى لإضافة تفاصيل واقعية مثل تأثيرات الضباب أو الرطوبة المرئية داخل البيئة الافتراضية. 4- مستشعر مقياس المغناطيسية يقيس قوة واتجاه المجال المغناطيسي، ويمكن استخدامه في تطبيق المسجد الأقصى لإنشاء مؤثرات بصرية أو تفاعلات تستند إلى المغناطيسية، مثل تأثيرات البوصلة أو الأشياء التي تتأثر بالمجال المغناطيسي.

تحدث تلك المشكلة كثيرًا في حالة إنتهاء التفعيل الخاص ببرامج الأوفيس فهل تظهر لك رسالة تخبرك بشراء أو تفعيل الأوفيس؟ فإذا كانت لديك النسخة مقرصنة (لا أنصح بذلك) فسيأتي وقت وستجد أن التفعيل قد إنتهى، وإذا كانت النسخة رسمية فعليك بإعادة تفعيلها من خلال الكود الخاص بك. وإذا استمرت المشكلة حاول التحقق من الآتي: تحقق من أن لديك الصلاحيات الكافية للكتابة والتعديل على الملفات في موقع التخزين الذي تستخدمه، فإذا كنت تعمل في بيئة عمل مشتركة مع مستخدمين آخرين، فتحقق من أن صلاحيات الوصول الخاصة بك تسمح لك بالتعديل على الملفات. إذا كان الملف الذي تحاول التعديل عليه مقفلاً، فلن تتمكن من تعديله، أي تأكد من أنه لا يوجد قفل على الملف، أو اطلب من الشخص الذي قام بإنشاء الملف فتحه لك. إذا استمرت المشكلة، فقد تكون هناك مشكلة في تثبيت Office على جهازك. في هذه الحالة، قم بإلغاء تثبيت Office وأعد تثبيته من جديد. قد تحتاج أيضًا إلى إزالة أية بيانات متبقية من التثبيت السابق قبل إعادة التثبيت. استخدام برنامج بديل: إذا لم تتمكن من حل المشكلة باستخدام Office، يمكنك استخدام برنامج بديل لإنشاء وتعديل الملفات مثل LibreOffice أو Google Docs و Google sheet الأوفيس الخاص بجوجل أفضل في رأي ولكنه يعمل في المتصفح فقط.

في لغة Dart، كلمة factory هي كلمة مفتاحية تُستخدم لتعريف الـ factories. وFactory method هو نمط تصميم يُستخدم لإنشاء كائنات داخل الفئة نفسها، ولكن بطريقة تختلف عن استخدام الـ constructors التقليدية. تمامًا مثل الـ constructors، تستخدم الـ factories لإنشاء كائنات، ولكن هناك اختلافات في طريقة إنشاء الكائنات. فعند استخدام الـ constructor التقليدي، تستخدم الكلمة المفتاحية new لإنشاء الكائن، ولكن في حالة استخدام الـ factory method، يتم استخدام اسم الفئة مباشرة. والكود في الصورة ببساطة يتعامل مع تحويل كائن من نوع Person إلى شكل JSON والعكس. فأولاً ، يتم تعريف فئة تسمى Users وتحتوي على خصائص id و name و email و gender و status. حيث يتم تعريف هذه الخصائص باستخدام المعاملات المسماة (named parameters) في القائمة الفاصلة بين الأقواس السواقط {}. والعبارة this.id تعني أنه عند إنشاء كائن من نوع Users ، من الممكن تمرير قيمة للخاصية id وسيتم تعيينها للخاصية المقابلة في الكائن، ونفس الشيء ينطبق على الخصائص الأخرى. ثم يأتي الجزء المهم من الكود وهو الـ factory، حيث يعمل الـ factory على توفير طريقة لإنشاء كائنات من الفئة Person باستخدام البيانات المستلمة من JSON. الكود التالي: factory Person.fromlson(Map<String, dynamic> json) => _$PersonFromJson(json); يعمل على تعريف طريقة تسمى fromlson التي تستقبل معامل من نوع Map<String, dynamic> وتقوم بإرجاع كائن من الفئة Person باستخدام الدالة _$PersonFromJson المولدة تلقائياً (يفترض أنها تم إنشاؤها بواسطة مولد كود مثل json_serializable). بمعنى آخر ، تستطيع استخدام الـ factory لإنشاء كائن Person من مصدر JSON، ويتوقف الأمر على المكتبة المستخدمة لتنفيذ المنطقة المرتبطة بالـ factory ، حيث يولد الكود اللازم لتحويل JSON إلى كائن من الفئة Person بناءً على التعليمات المعطاة. ثم يأتي الجزء الثاني من الكود: Map<String, dynamic> toJson() => _$PersonToJson(this);. وتلك الوظيفة تقوم بتحويل كائن من الفئة Users إلى تنسيق JSON. وتقوم الدالة toJson() بإرجاع كائن من نوع Map<String, dynamic> يحتوي على الخصائص الموجودة في كائن Users. وتستخدم الدالة _$PersonToJson المولدة تلقائيًا (والتي يفترض أنها تم إنشاؤها بواسطة مولد كود مثل json_serializable) لتوليد الترميز JSON بناءً على الكائن Users الحالي. وعند استدعاء الدالة toJson() على كائن Users، ستشفر الخصائص الموجودة في الكائن إلى JSON، وتستطيع استخدام هذا الناتج لتبادل البيانات مع الخوادم أو التخزين في ملفات JSON. أي بإختصار، يساعد الـ factory والدالة toJson() في تسهيل عملية تحويل الكائنات إلى تنسيق JSON والعكس، مما يتيح إمكانية تبادل البيانات بسهولة بين تطبيقات Dart وخوادم الويب أو قواعد البيانات التي تستخدم JSON كتنسيق للبيانات.

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

أرجو طرح السؤال أسفل فيديو الدورة وطرح الأسئلة العامة هنا. بالنسبة لسؤالك فلا مشكلة إذا كانت الدورة هي دروة بايثون، لكون PyCharm محرر أكواد متميز للغة بايثون وإطار Django ويقدم العديد من الميزات بخصوص ذلك الأمر. وربما تتسائل عن الفرق بين برنامجي VSCode وPyCharm، فكلاهما محررات أكواد، لكن وPyCharm هو بيئة تطوير متكاملة (IDEs) مصممة للعمل مع لغة البرمجة Python، وهناك اختلافات بينهما فيما يتعلق بالميزات والتجربة العامة. إليك بعض الفروق الرئيسية: 1- التوجه PyCharm موجه بشكل أساسي نحو تطوير Python، في حين يعتبر VSCode بيئة تطوير متعددة اللغات وقابلة للتوسع للعديد من اللغات البرمجية. 2- الميزات والتطوير الذكي PyCharm يقدم ميزات تطوير ذكي متقدمة مثل إكمال التعليمات البرمجية (Code completion)، والتحقق من الأخطاء (Error checking)، وتنسيق الكود (Code formatting)، والتصحيح التلقائي (Auto-correction)، وإدارة المشروعات، وتشغيل الاختبارات وتصحيحها، والتصحيح التلقائي للأخطاء. VSCode يوفر أيضًا بعض هذه الميزات، ولكن PyCharm يوفر مزايا أكثر تخصصًا للتطوير في Python. 3- الأدوات المساعدة PyCharm يحتوي على العديد من الأدوات المساعدة المخصصة لتطوير Python مثل المكتبات الرسومية، وأدوات تصحيح الأخطاء البصرية، ومحررات قواعد البيانات المدمجة. بالإضافة إلى ذلك، يحتوي PyCharm على أدوات متقدمة لتصحيح الأخطاء وتحليل الأداء. VSCode، على الجانب الآخر، يوفر مجموعة واسعة من الامتدادات والإضافات التي تسمح بتخصيص التجربة ودعم لغات وتقنيات متعددة. 4- سهولة الاستخدام VSCode يتميز بواجهة مستخدم بسيطة وسهلة الاستخدام، ويتطلب تكوين أقل مقارنةً بـ PyCharm. يمكنك ببساطة تثبيت VSCode وبدء البرمجة بسرعة، ويوفر مرونة في تخصيص الواجهة والإضافات حسب احتياجاتك الخاصة. 5- الأداء على الرغم من أن الأداء قد يتأثر بمواصفات الجهاز الخاص بك، إلا أنه عمومًا يُعتبر PyCharm أكثر استهلاكًا للموارد مقارنةً بـ VSCode. قد يكون ذلك ملحوظًا خصوصًا عند التعامل مع مشاريع كبيرة. 6- السعر VSCode هو برنامج مجاني ومفتوح المصدر، في حين أن PyCharm يقدم إصدارًا مجانيًا (Community Edition) بالإضافة إلى إصدار مدفوع (Professional Edition) الذي يحتوي على ميزات إضافية.

لا يوجد محرر أكواد مجاني أفضل من VScode، وتستطيع تحديثه إلى أخر إصدار من خلال الضغط على Help بالأعلى ثم check for updates. وبالنسبة لمشكلة الـ Live server لاحظ أنه عندما يتم الضغط على أيقونة Go live بالأسفل يظهر لك البورت وهو 5500 بينما لديك أنت في المتصفح البورت هو 8080 لاحظ شريط العنوان في المتصفح، فهل يتم فتح الصفحة بشكل تلقائي لك أم أنك تكتب ذلك في المتصفح؟ وإذا استمرت المشكلة حاول حذف إضافة Live Server ثم أعد تثبيتها ثم أغلق محرر VScode وأعد تشغيل المشروع من خلال السيرفر.

في ملف App.js عليك باستيراد مكون About داخل أقواس معقوفة بالشكل التالي: import { About } from './About.jsx'; حيث أنك قمت بتصديره في المكون بالشكل التالي: import React from 'react' export function About() { return ( <div>About</div> ); } وإذا أردت استخدام الاستيراد بدون أقواس عليك بكتابة التصدير بالشكل التالي: import React from 'react'; export default function About() { return <div>About</div>; } في JavaScript، توجد اختلافات بين export و export default في طريقة تصدير الوحدات (modules) من ملف إلى آخر. هنا هي الاختلافات الرئيسية بينهما: 1- export تُستخدم لتصدير متغير أو دالة محددة باستخدام اسمها. عند استيراد الوحدة في مكان آخر، يجب استخدام نفس الاسم المحدد عند التصدير. // في ملف "module.js" export function myFunction() { // ... } // في ملف آخر import { myFunction } from './module.js'; 2- export default تستخدم لتصدير قيمة افتراضية واحدة فقط من الوحدة، وتستطيع استيراد القيمة المصدرة باستخدام أي اسم ترغب في استخدامه. // في ملف "module.js" export function myFunction() { // ... } // في ملف آخر import { myFunction } from './module.js'; 3- تستطيع استخدام export مع العديد من الوحدات في نفس الملف، بينما يمكن استخدام export default مرة واحدة فقط في كل ملف. 4- عند استيراد الوحدة، عليك باستيراد الوحدات المصدرة باستخدام export باستخدام الأقواس المنحنية {} مع تحديد الاسم المحدد، بينما يمكن استيراد الوحدة المصدرة باستخدام export default دون الحاجة إلى أي أقواس. 5- بالإمكان تصدير الوحدات باستخدام export واستيرادها باستخدام import في أي ملف JavaScript، بينما export default يستخدم عادة عند تصدير الوحدة الرئيسية في ملف معين.

الدورة لا تركز على تعلم أساسيات تطوير الواجهة الأمامية حيث سيتم كتابة أكواد HTML وCSS مباشرًة وأيضًا استخدام Tailiwind وBootstrap، ولذلك عليك بتعلم الأساسيات من خلال دورة تطوير واجهات المستخدم المسار الأول والذي أشار إليه عمر، فلديك وصول للمسار الأول لجميع الدورات بالإضافة إلى دورة PHP. https://academy.hsoub.com/courses/front-end-web-development/web-development-intro/ وتستطيع تعلم المزيد من خلال المقالات في أكاديمية حسوب فهناك قسم خاص بلغة HTML و CSS. وأيضًا تستطيع تعلم جافاسكريبت من خلال المسار الأول من دورة تطوير التطبيقات باستخدام JavaScript . https://academy.hsoub.com/courses/javascript-application-development/javascript-intro/ وإليك مقال مفيد أيضًا:

بالإضافة إلى ما تم ذكره، غالبًا ما يكون شكل ملف .env في مشروع لارافيل كالتالي: APP_NAME=Laravel APP_ENV=local APP_KEY= APP_DEBUG=true APP_URL=http://localhost LOG_CHANNEL=stack LOG_LEVEL=debug DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=instagram_hsoub DB_USERNAME=root DB_PASSWORD= BROADCAST_DRIVER=log CACHE_DRIVER=file QUEUE_CONNECTION=sync SESSION_DRIVER=database SESSION_LIFETIME=120 MEMCACHED_HOST=127.0.0.1 REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null REDIS_PORT=6379 MAIL_MAILER=smtp MAIL_HOST=mailhog MAIL_PORT=1025 MAIL_USERNAME=null MAIL_PASSWORD=null MAIL_ENCRYPTION=null MAIL_FROM_ADDRESS=null MAIL_FROM_NAME="${APP_NAME}" AWS_ACCESS_KEY_ID= AWS_SECRET_ACCESS_KEY= AWS_DEFAULT_REGION=us-east-1 AWS_BUCKET= PUSHER_APP_ID= PUSHER_APP_KEY= PUSHER_APP_SECRET= PUSHER_APP_CLUSTER=mt1 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" حاولي التعديل عليه بما يتناسب مع متطلبات مشروعك وأيضًا سيظهر لك أخطاء تخبرك أن بها حاجة إلى متغير بيئة فقومي بإضافتها للملف. أو الأسهل هو الطلب من مدير المشروع أن يقوم بإرفاق .env.example في مستودع المشروع فهو أمر لابد منه إذا كان يتم استخدام متغيرات البيئة.

1- قبل أن يتمكن مدير المشروع من دمج تعديلاته في الإصدار الرئيسي (main) في نظام التحكم بالإصدار (Git)، يجب عليه القيام بعملية الحفظ (commit) لتلك التعديلات، وإذا كان المدير لم يقم بعملية الحفظ، فلن يتم جلب التعديلات الجديدة عند استخدام git pull. 2- إذا كنتِ تعملين على فرع محلي (local branch) مختلف عن الفرع الذي يتم دمج التعديلات فيه، فقد لا تظهر التعديلات عند استخدام git pull، فتأكد من أنكِ تعملين على نفس الفرع الذي يقوم المدير بدمج التعديلات فيه. لتوضيح ذلك، لنفترض أن لديك فرع محلي يُسمى "branch1" والمدير يُقوم بدمج التعديلات في فرع بعيد يُسمى "branch2". فإذا كنتِ تعملين على الفرع "branch1" وتستخدمين git pull، فإن التعديلات التي يقوم المدير بدمجها في "branch2" لن تظهر في "branch1" الذي تعملين عليه. لذا، للتأكد من جلب التعديلات الصحيحة، تأكدي من أنكِ تعملين على نفس الفرع الذي يقوم المدير بدمج التعديلات فيه. وتستطيعي التحقق من الفروع المتوفرة في المشروع باستخدام الأمر: git branch -a والتأكد من أنكِ تعملين على الفرع الصحيح قبل استخدام git pull. وفي حال كانت هناك فروع مختلفة، عليك بالتبديل إلى الفرع الصحيح باستخدام الأمر: git checkout <branch-name>. 3- في حالة قام مدير المشروع بتعديل نفس الجزء من الكود الذي قمتِ أنت بتعديله، فقد يحدث تعارض (conflict) عند محاولة دمج التعديلات، وهنا يجب عليك حل التعارضات يدويًا قبل أن يتم جلب التعديلات. 4- قد تكون المشكلة في الاتصال بخادم نظام التحكم بالإصدار البعيد (remote Git server)، مما يمنع استرداد التعديلات الجديدة، لذلك تأكدي من وجود اتصال صحيح بالخادم البعيد وأن إتصال الإنترنت يعمل بشكل سليم.

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

أرجو مشاركة مجلد المشروع من خلال ضغط مجلد المشروع ثم رفعه وشرح المشكلة التي تواجهك، أو على الأقل قم بإرفاق الكود بشكل سليم من خلال علامة <> عند كتابة السؤال هنا. والكود الذي أرفقته يجب تعديله ليصبح بالشكل التالي، حيث أنك قمت بكتابة الدالة بشكل خاطيء وأيضًا يجب أن يتم تضمين المكونات داخل أب واحد فقط وتستطيع مثلاً استخدام div أو React Fragment كما في الكود التالي: import logo from './logo.svg'; import './App.css'; import About from './components/About/About.jsx'; import Home from './components/home.jsx'; function App() { return ( <> <About /> <Home /> </> ); } export default App; وأنصحك بقراءة المقالات التالية قبل استكمال العمل في المشروع.

بالإضافة إلى ما تم ذكره من قبل عدنان، هناك مشكلة في ملف App.js حيث أنك قمت بكتابة return كدالة وهو أمر غير صحيح وأيضًا قمت بتصدير المكون داخل دالة المكون نفسه وهو امر غير صحيح، لذلك عليك بتعديل الكود ليصبح بالشكل التالي: import logo from './logo.svg'; import './App.css'; import About from './components/About/About.jsx'; import Home from './components/home.jsx'; function App() { return; { //ضع كود المكون هنا أو المكونات الأخرى } } export default App; والأفضل هو بناء المشروع React من خلال تنفيذ السكريبت التالي: npx create-react-app اسم مجلد المشروع واستبدل اسم مجلد المشروع بالاسم الذي تريده للمجلد. أو تستطيع استخدام vite وهو الأمر الذي أفضله لإنشاء وتجميع مشروع React من خلال الأمر التالي: npm create vite@latest ثم قم بإختيار مشروع React من ضمن الخيارات التي ستظهر لك من خلال السهم أعلى وأسفل، بعد ذلك اكتب اسم مجلد المشروع.

أرجو توضيح المشكلة وأيضًا رفع مجلد المشروع بالكامل.

بالطبع الدورتين تؤهلانك للقيام بذلك، فأنت قد جمعت ما بين مهارات الواجهة الأمامية والواجهة الخلفية من خلال إطار Django. ولإنشاء موقع مشابه لأكاديمية حسوب، ستحتاج إلى المهارات التالية: 1- تصميم واجهة المستخدم ستحتاج إلى مهارات تصميم واجهة المستخدم (UI) وتجربة المستخدم (UX) لتصميم واجهة مستخدم مرئية وجذابة للموقع. 2- HTML وCSS معرفة قوية بلغات توصيف الصفحات (HTML) وتنسيق الأنماط (CSS) لبناء وتنظيم هيكل الموقع وتنسيقه بشكل جميل. 3- JavaScript إلمام لغة JavaScript لإضافة وظائف تفاعلية للموقع وتحسين تجربة المستخدم، مثل الأشكال التفاعلية والمؤثرات البصرية والتحقق من البيانات. 4- إدارة قاعدة البيانات أساسيات قواعد البيانات لتخزين المعلومات الخاصة بالموقع، مثل معلومات المستخدمين والدورات والمقالات. 5- إدارة المشروع مهارات إدارة المشروع لتحديد الهدف والموارد وجدولة العمل والتعامل مع فريق العمل (إذا كنت تعمل مع فريق) وإدارة الوقت والجودة. 6- استضافة الموقع فهم لكيفية استضافة الموقع ونقله إلى الخوادم وضمان توافره على الإنترنت. وباستخدام المهارات التي اكتسبتها، تستطيع تنفيذ بالعديد من جوانب بناء موقع مشابه لأكاديمية حسوب. ومع ذلك، يجب أن تأخذ في الاعتبار العوامل التالية: 1- تصميم الواجهة يتطلب بناء موقع شبيه بأكاديمية حسوب تصميمًا جذابًا وواجهة مستخدم مرنة وقابلة للتوسيع، وباستخدام مهاراتك في تصميم الواجهة الأمامية تستطيع تحقيق ذلك. 2- هيكل الموقع يحتاج الموقع إلى هيكل تنظيمي جيد يتضمن صفحات مختلفة مثل صفحة الرئيسية، صفحات الدورات، صفحات المدونة، صفحات الاشتراك، إلخ. يمكنك استخدام HTML وCSS لبناء هذا الهيكل. 3- التكامل مع قاعدة البيانات ستحتاج إلى إنشاء قاعدة بيانات لتخزين المحتوى غير البرمجي مثل المقالات والدروس والمحتوى التعليمي، وتستطيع استخدام المهارات التي اكتسبتها في التعامل مع قواعد البيانات لتنفيذ ذلك. 4- إدارة المحتوى ستحتاج إلى واجهة إدارة المحتوى لتحديث وإدارة المحتوى الغير برمجي على الموقع، وستستفيد من مهاراتك في تطوير التطبيقات باستخدام بايثون ودجانغو لبناء واجهة إدارة المحتوى. 5- تنفيذ نظام الاشتراك إذا كنت ترغب في تقديم محتوى مدفوع أو نظام اشتراك للمستخدمين، يجب تنفيذ نظام الاشتراك والدفع الإلكتروني، وهنا يأتي دور إطار عمل جانغو Django لتحقيق ذلك. وكنصيحة قم بتنفيذ المشروع بشكل مصغر أي الميزات الأساسية الهامة للمشروع ولا تتحمس كثيرًا، وقم بتقسيم تلك الميزات إلى مهام وتلك المهام إلى مهام أصغر واعمل على تنفيذها واحدة تلو الأخرى. ولكن يجب التخطيط للمشروع قبل البدء في كتابة الكود، قم برسم Flowchart مثلاً يوضح طبيعة عمل الموقع وتفاعل الميزات مع بعضها. ولا تنظر للميزة التي تريد تنفيذها أو المشكلة التي تواجهك بشكل كلي، بل قم بتقسيمها إلى أجزاء أصغر واعمل على تنفيذها أو حلها. وألقي نظرة على موقع مشابه لما تريد فعله وقم بتقليده بالضبط، فالتقليد مفيد في البداية ولا مشكلة في ذلك، وتستطيع إضافة ميزة مختلفة مثلاً وتصميم جيد. ونصيحة أخرى إذا كان المشروع غير حماسي أو لا يثير فضولك فلا تعمل عليه واختر مشروع تريد العمل عليه فعلاً، لكون المشروع سيأخذ من وقتًا وجهدًا. وبناء مثل تلك المشاريع أمر غايًة في الأهمية عند التقدم لوظيفة ومثل تلك الأعمال في معرض أعمالك وليس نماذج بسيطة بل أمر مختلف ومشروع يحتاج إلى جهد ومعرفة وخبرة.

لكونه سؤال إختباري فسأرشدك لخطوات الحل وتستطيع تنفيذ الكود وطرحه هنا لحل أي مشكلة تواجهك. لحل سؤال البرنامج المطلوب بتخزين القيم وإيجاد مجموعها، تستطيع اتباع الخطوات التالية: إنشاء متغيرات لتخزين القيم. في هذا السياق، يمكنك استخدام مصفوفة لتخزين القيم الخمسة. اقرأ القيم الخمسة من المستخدم وقم بتخزينها في المصفوفة التي أنشأتها في الخطوة السابقة. حساب مجموع القيم المخزنة في المصفوفة. يمكنك استخدام حلقة تكرار للانتقال عبر المصفوفة وإجمال قيمها. قم بطباعة المجموع النهائي. نبذة بسيطة من الكود وعليك بإكمال الباقي: #include <iostream> using namespace std; int main() { int values[5]; int sum = 0; لحل السؤال الثاني وتقسيم المكدس إلى مكدستين: إنشاء مصفوفة لتخزين القيم. في هذا السياق، يمكنك استخدام مصفوفة بحجم 10. اقرأ القيم العشرة من المستخدم وقم بتخزينها في المصفوفة. إنشاء مكدستين، مكدس للقيم الفردية وآخر للقيم الزوجية. يمكنك استخدام مصفوفتين بحجم 10 لكل مكدس. تكرار المصفوفة الأولى وفحص كل عنصر فيها. إذا كان العنصر فرديًا، قم بتخزينه في المكدس الأول. وإذا كان زوجيًا، قم بتخزينه في المكدس الثاني. قم بطباعة المكدستين النهائيين بفصل العناصر بفواصل مناسبة. نبذة بسيطة من الكود وعليك بإكمال الباقي: #include <iostream> using namespace std; int main() { int values[10]; int oddValues[10]; int evenValues[10]; int oddCount = 0; int evenCount = 0;

لكونه سؤال إختباري فيمكن إرشادك لخطوات الحل: 1- قم بتضمين المكتبة المناسبة لإجراء عمليات الإدخال والإخراج في C++: #include <iostream> using namespace std; 2- تعريف المصفوفة باستخدام نوع البيانات المناسب. 3- تنفيذ حلقة تكرار لإدخال عناصر المصفوفة. 4- تنفيذ حلقة تكرار لفحص العناصر وطباعة "zero" إذا وجدت عنصرًا يساوي الصفر. 5- تنفيذ دالة main() التي ستستدعي الخطوات السابقة. int main() { // الخطوة 1 // الخطوة 2 // الخطوة 3 // الخطوة 4 return 0; }