Abdulrahman Muhammad

تعلم كيفية استخدام CRUD (إنشاء، قراءة، تعديل، حذف) يُعد خطوة مهمة جدًا، لأنه يطوّر مهاراتك في التعامل مع البيانات وتنظيم الكود بشكل والتعامل مع الأخطاء وتجنبها. واستخدامك لـ DOM في البداية خيار ممتاز، لأنه يساعدك على فهم طريقة التفاعل مع عناصر الصفحة يدويًا، مما يمنحك أساسًا قويًا. أنصحك بالاستمرار في المشروع، وابدأ بخطوات بسيطة ثم قم بتطويره تدريجيًا.

إذا تفضل بداية سهلة لدخول عالم مكتبات الواجهة الامامية ف React سيكون الأنسب لك، وسيساعدك على فهم مفاهيم مهمة مثل المكونات (Components)، إدارة الحالة (State Management)، والتعامل مع الواجهات. بعد التأسيس في React وفهم طريقة العمل بها، سيكون من السهل عليك الانتقال إلى Angular، لأنك ستكون قد كوّنت خلفية جيدة عن بناء التطبيقات التفاعلية. لكن أيضا هذا يعتمد على قابليتك للتعلم وإدارة وقتك، إن كان وقتك محدود فمن الأفضل أن تركز على تعلم مكتبة واحدة فقط وتتقنها جيدًا بدلاً من التشتت بين أكثر من خيار.

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

وعليكم السلام ورحمة الله وبركاته، بالنسبة لإنشاء صفحة الدفع (Payment) باستخدام React، نعم يمكنك ذلك ، فـ React تُستخدم كثيرًا في مثل هذه الصفحات. لكن ستحتاج إلى تحديد بوابة دفع مثل Stripe أو PayPal، وهي توفر مكتبات جاهزة وتقدملك كود يمكنك إضافته لتسهيل عملية الدمج مع React وتتعامل معها من الواجهة الأمامية. و بالنسبة لتسجيل الدخول باستخدام حساب Google أو Facebook، فبإمكانك استخدام مكتبات مثل: react-oauth/google لتسجيل الدخول بحساب Google react-facebook-login لتسجيل الدخول بحساب Facebook وبعد الحصول على بيانات المستخدم من Google أو Facebook، يمكنك إرسال هذه البيانات إلى الباك اند (Back-end) لمزيد من العمليات والتحقق من وجود الحساب أو إنشاء حساب جديد. يمكنك التطور في الأمر خطوة بخطوة سيكون الأمر سهل إن شاء الله.

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

الفرق بين Vue و Nuxt: Vue.js هو إطار عمل لبناء واجهات المستخدم، يمكنك استخدامه لإنشاء صفحات ومكونات (Components) تتفاعل مع المستخدم، وأنت مسؤول عن تنظيم المشروع بنفسك، وإضافة كل ميزة تحتاجها يدويًا (مثل التوجيه - routing، أو التعامل مع الخادم - SSR). Nuxt.js مبني على Vue، لكنه جاهز أكثر، يعني يوفر لك بيئة عمل منظمة فيها أشياء كثيرة مدمجة وجاهزة، مثل التوجيه (routing)، وتقنية (Server-Side Rendering)، تحسين الأداء، وغيرها. في حين المشاريع الصغيرة يمكنك استخدام Vue.js لأنه خفيف وسهل. في المشاريع الكبيرة التي تحتاج إلى أداء عالي يمكنك استخدام Nuxt.js لأنه يوفر لك مميزات كثيرة جاهزة.

الفرق بين OOP وSoftware Design : OOP: هي أسلوب أو طريقة لكتابة الكود، تعتمد على فكرة الكائنات (objects) مثل "طالب"، "سيارة"، "منتج"، وتستخدم مفاهيم مثل الفئات (class)، الوراثة (inheritance). هدفها تنظيم الكود بشكل أوضح وأسهل للتعديل. Software Design: هو مرحلة التخطيط التي تسبق كتابة الكود، وفيها يتم تحديد شكل وهيكل البرنامج، وكيف ستتواصل الأجزاء المختلفة مع بعضها البعض، وما هي أفضل الطرق لتنفيذ الحل. التصميم قد يستخدم OOP أو غيرها من الأساليب حسب الحاجة. OOP طريقة لكتابة الكود، وSoftware Design هو التخطيط العام لشكل البرنامج وتنظيمه.

OOP (Object-Oriented Programming) هي أسلوب برمجة يركز على تنظيم الكود من خلال استخدام الكائنات (Objects)، حيث يجمع كل كائن بين البيانات (المتغيرات) والوظائف (الدوال) الخاصة به. يُستخدم هذا الأسلوب بشكل أكبر في المشاريع الكبيرة أو المعقدة التي تحتوي على أنواع مختلفة من البيانات، وكل نوع له سلوك ووظائف خاصة. مثال: نظام لإدارة الحيوانات في حديقة حيوان. يمكنك استخدام OOP لتعريف كائن يمثل كل حيوان. class Animal { constructor(name, sound) { this.name = name; this.sound = sound; } makeSound() { console.log(`${this.name} says ${this.sound}`); } } const lion = new Animal("أسد", "زئير"); const bird = new Animal("عصفور", "زقزقة"); lion.makeSound(); في هذا المثال قمبنا ببناء كلاس مخصص لنوع "حيوان" Animal يحتوي على بعض الوظائف الخاصة بهذا الكلاس فيمكننا إعادة استخدامه مرة اخرى في اكثر من موضع الذي يخص هذا الكلاس.

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

يوجد بعض الطرق مجانية للحصول على كائنات أو خلفيات لمواقعك أو تطبيقاتك، استخدام مواقع توفر رسومات جاهزة ومجانية. مثلاً، موقع OpenGameArt.org فيه رسومات وأصوات للألعاب.و حصول على خلفيات أو صور حقيقية، يمكن استخدام مواقع مثل Pixabay أو Unsplash. يمكن ايضا بناء بعض التصميمات بذوقك الخاص مثل Canva أو Figma، وهي مجانية وسهلة الاستخدام.

قد تشعر ببعض الصعوبة أو التشتت في بداية تعلم التقنيات الجديدة، لكن من المهم اتباع خطوات واضحة أثناء التعلم، مع التركيز على التطبيق العملي، ويفضّل البدء بمشاريع صغيرة تُسهّل عليك فهم المفاهيم وتُسرّع وتيرة التعلم. تقدّم مكتبة React أسلوبًا مختلفًا في بناء واجهات المستخدم، حيث تعتمد على مفاهيم مثل المكونات (Components) والحالة (State) والـ Virtual DOM، وهذه المفاهيم تحتاج إلى بعض الوقت والجهد لفهمها وإتقانها. وغالبًا ما تكون الصعوبة في البداية ناتجة عن عدم الاعتياد على طريقة التفكير التي تعتمدها React. أما بالنسبة للاستغناء عن React، فذلك يعتمد على طبيعة المشروع. إن كان المشروع بسيطًا أو صغيرًا، فقد يكون التعامل المباشر مع الـ DOM كافيًا. لكن في حال كان المشروع كبيرًا، ويحتوي على العديد من المكونات، وتفاعل مستمر بين الأجزاء، وتحديثات متكررة في البيانات، فإن استخدام React يصبح ضروريًا.

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

دورة تطوير التطبيقات باستخدام JavaScript تطور مهارات في استخدام هذه اللغة البرمجية وتساعدك ، لكن ذلك يعتمد على المسار الذي تختاره داخل الدورة ومدى فهمك وتطبيقك العملي لما تعلمته. الدورة عادة تغطي تقنيات مهمة مثل React وNode.js وMongoDB وExpress، وهي مطلوبة في سوق العمل خاصة لمطوري الـMERN Stack. ومع ذلك، من الأفضل أن تختار تخصصًا واضحًا مثل تطوير الواجهة الأمامية أو الخلفية أو أن تصبح مطور Full-Stack، وتُركّز عليه. أيضًا، لا يكفي التعلم النظري فقط، بل يجب بناء مشاريع حقيقية لتقوية مهاراتك.

التحضير لمقابلة التوظيف هو أمر ضروري لكي تزيد من فرص قبولك في العمل. عادةً ما يبدأ الحديث بأسئلة شخصية لفهم خلفيتك، مثل: "حدّثنا عن نفسك"، أو "ما هي المشاريع التي عملت عليها؟". بعد ذلك، يتم الانتقال إلى الأسئلة التقنية، والتي تختلف حسب الوظيفة التي تقدّمت لها. مثلًا، إذا كانت الوظيفة تتطلب لغة معينة مثل JavaScript أو Python، فقد تُسأل عن أساسيات اللغة وكيف تستخدمها. غالبًا ما يتم طرح أسئلة لحل مشكلات برمجية تتعلق بالخوارزميات وهياكل البيانات مثل المصفوفات والقوائم، وذلك لمعرفة طريقة تفكيرك وحلّك للمشاكل. بعض الشركات تطلب منك كتابة كود مباشر أثناء المقابلة أو مراجعة كود معين. وقد تشمل الأسئلة أيضًا قواعد البيانات، أو بناء واجهات المستخدم، أو التعامل مع API. الهدف من هذه الأسئلة هو التأكد من أنك تفهم ما تقوم به وقادر على تطوير الحلول، لذلك من الأفضل أن تراجع مهاراتك وتتمرن جيدًا قبل المقابلة.

بالتأكيد يمكنك منح كل مستخدم نطاقًا فرعيًا مثل: user.myapp.com. هذا يتم من خلال إعدادات الـ DNS وخادم الويب، حيث يُوجه كل نطاق فرعي لنفس التطبيق ويتم التمييز بين المستخدمين بالاسم. لا يوجد حد فعلي لعدد النطاقات الفرعية، لكن الأمر يعتمد على استضافة موقعك. بعض شركات الاستضافة تضع قيودًا، بينما أخرى تتيح عددًا غير محدود. من حيث التكلفة، النطاقات الفرعية عادة لا تُكلف مالًا إضافيًا، لأنها جزء من النطاق الأساسي. لكن إذا زاد عدد المستخدمين بشكل كبير، قد تحتاج إلى خطة استضافة أقوى لتحمل الضغط، وهنا تأتي التكلفة حسب الموارد المستخدمة.

دورة تطوير واجهات المستخدم لا تعتمد فقط على استخدام أطر العمل مثل Bootstrap، بل تبدأ بتعليمك أساسيات HTML وCSS وJavaScript بشكل جيد، حتى تفهم كيف تُبنى الصفحات من الصفر. بعد ذلك، تُستخدم الأطر لتسهيل العمل وتسريعه، لكن بعد أن يكون عندك خلفية قوية. هذا الأسلوب يساعدك على فهم الكود وتعديله وقت الحاجة، ولا يجعلك معتمدًا فقط على القوالب الجاهزة.

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

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

وعليكم السلام ورحمة الله وبركاته، أمر جيد أن تبدأ رحلتك في البرمجة بطاقة وحماس. تعلمك لـ HTML وCSS خطوة ممتازة لأنها الأساس في تطوير الواجهات، ويمكنك بعدها الانتقال إلى JavaScript لتبدأ بإنشاء صفحات تفاعلية. يوجد العديد من المجلات المطلوبة في سوق العمل مثل تطوير الويب، تطوير التطبيقات، الذكاء الاصطناعي، تحليل البيانات، والأمن السيبراني. ومن الأفضل كمبتدئ هو أن تأخذ فكرة عامة عن كل مجال، حتى تكتشف هوايتك وما تفضله. وبعدها تختار التخصص الذي يناسبك وتبدأ بالتعمق أكثر. بالنسبة للمهارات، أهم شيء القدرة على حل المشكلات. كما أن أدوات مثل Git لإدارة المشاريع، وGitHub لمشاركة الأكواد، مهارة مهمة. أدوات الذكاء الاصطناعي مثل ChatGPT وCopilot يمكن أن تساعدك كثيراً في التعلم، لكنها لا تغني عن الفهم. استخدمها كمساعد، وليس كحل جاهز. أما الشهادات من منصات مثل Coursera أو Udemy أو حسوب، فهي مفيدة وتُظهر التزامك بالتعلم. يوجد كثير من الشركات تهتم بالمهارات والمشاريع أكثر من الشهادات. النصيحة التي أفضلها هي: خذ وقتك في التعلم، وابدأ بمشاريع صغيرة ثم طورها مع التدريج. التعلم والتطبيق هو الطريق الحقيقي للاحتراف.

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

بالتأكيد شرح الكود خطوة بخطوة للقيام بإظهار alert رسالة ترحيب عند حدوث حدث معين. 1. تحديد العناصر المراد التأكد وجلب المعلومات منها: const form = document.querySelector('.news-col form'); const input = document.getElementById('input'); form: يحدد النموذج داخل عنصر يحتوي على الكلاس news-col. input: يحدد حقل الإدخال الذي له id="input" (عادة لإدخال البريد الإلكتروني). 2. استخدام شرط if للتأكد من وجود العناصر: if (form && input) { يتأكد أن النموذج وحقل الإدخال موجودان فعلاً في الصفحة قبل تنفيذ باقي الكود. 3. التعامل مع إرسال النموذج: form.addEventListener('submit', function(event) { يضيف حدث عند الضغط على زر الإرسال (submit). 4. تجنب التحديث التلقائي الصفحة: event.preventDefault(); يمنع التحديث التلقائي للصفحة عند الإرسال (لأنه بشكل افتراضي يعيد تحميل الصفحة). 5. جلب البريد الإلكتروني والتأكد منه: const email = input.value.trim(); if (email) { يأخذ قيمة حقل الإدخال ويزيل الفراغات. إذا كانت القيمة غير فارغة: 6. عرض رسالة ترحيب: alert(`مرحباً بك في المنصة!\n${email}`); input.value = ''; يظهر رسالة ترحيب مع البريد. ثم يُفرغ حقل الإدخال. 7. إذا لم يدخل شيئًا: alert('يرجى إدخال البريد الإلكتروني.'); يظهر رسالة تنبيه تطلب منه إدخال البريد.

يمكنك تقليل الشفافية في برنامج Visual Studio Code، باستخدام إضافة اسمها GlassIt-VSC. بعد تثبيتها من قسم الإضافات، يمكنك فتح قائمة الأوامر بالضغط على Ctrl + Shift + P، ثم كتابة GlassIt واختيار Set Opacity لتحديد مستوى الشفافية، مثلاً 200 أو 255، حيث 255 يعني بدون شفافية.

نعم، هناك بدائل مجانية لـ GPT يمكنك استخدامها مثل BERT وT5 وDistilBERT، وهي نماذج قوية من تطوير Google وتُستخدم لفهم النصوص وتصنيفها أو الإجابة على الأسئلة. كما يوجد نماذج أخرى مثل Mistral وOpenChat وهي مفتوحة المصدر وتقدم أداء جيد في توليد النصوص بطريقة مشابهة لـ GPT. يمكنك تجربة هذه النماذج على موقع Hugging Face. كل نموذج له استخدامه، فاختر ما يناسب مشروعك.

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

لحفظ ملف الكود الخاص بك بعد التعديل: يمكنك الضغط على CTRL + S أو من قائمة file ثم save.