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

على الرغم من أن المطلوب فقط هو الموديل والسنة للفئة العامة "السيارة"، إلا أن الفئات الفرعية يمكن أن تضيف سمات خاصة بها. لذلك، العلاقة هي وراثة (Inheritance) وليست تركيب (Composition). التركيب يعني أن كائنًا ما "يحتوي على" كائن آخر كجزء منه، مثل السيارة تحتوي على محرك (المحرك جزء من السيارة). لكن الشاحنة أو السيارة الرياضية "هي نوع من" السيارة، وهذا هو جوهر الوراثة. لنأخذ مثالاً لتوضيح التركيب لـ "السيارة" نفسها. السيارة لا ترث "المحرك"، بل "تحتوي على" محرك. الفئة Car (السيارة) لها خصائص مثل: model (الموديل), year (السنة). تحتوي على كائن من الفئة Engine (المحرك). الفئة Engine (المحرك) لها خصائص مثل: horsepower (قوة الأحصنة), cylinderCount (عدد الأسطوانات), type (النوع: بنزين، ديزل، كهربائي).

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

Electron.js يتيح لك بناء تطبيقات سطح المكتب باستخدام تقنيات الويب مثل HTML وCSS وJavaScript. في الأساس، يجمع Electron بين Chromium (محرك المتصفح) وNode.js (بيئة تشغيل JavaScript) لتشغيل تطبيقات الويب كتطبيقات سطح مكتب حقيقية. ولذلك يعتمد تعلمه على مسارك المهني ونوع التطبيقات التي تريد تطويرها فإذا كنت مهتمًا بتطوير تطبيقات سطح المكتب فإن Electron.js هو أداة قوية وفعالة. وبما أنك تتعلم تطوير الويب ولديك خبرة في HTML و CSS و JavaScript، فإن تعلم Electron.js سيكون سهلاً نسبيًا وسيفتح لك بابًا جديدًا في عالم تطوير البرمجيات.

الأدوات والميزات التي لا يمتلكها Vue مقارنة بـ react هي كالتالي أولاً vue لا يمتلك حلاً رسميًا مكافئًا لـ React Native مع أنه توجد بدائل لـ Vue مثل NativeScript-Vue ، لكنها لا تصل إلى نفس مستوى الشهرة والدعم لـ React Native. وأيضاً من النقاط المهمة هي أن vue لا يمتلك نفس الحجم الهائل والتنوع في المكتبات الخارجية (خاصة لإدارة الحالة، مكونات الواجهة، أدوات الاختبار) مقارنة بـ React. مع أن vue لديه نظام بيئي ممتاز ويكبر باستمرار، ولديه حلول رسمية رائعة، لكن حجم وتنوع مكتبات React يظل أكبر. ومع ذلك Vue و React أدوات قوية ومطلوبة. تعلم أحدهما بشكل جيد سيمنحك المهارات الأساسية التي يمكنك نقلها لتعلم الآخر إذا لزم الأمر. فالمفاهيم الأساسية لتطوير الواجهة الأمامية (مثل المكونات، إدارة الحالة، تدفق البيانات) متشابهة بينهما.

لتوضيح الخاصية v-model لنفترض أنك تبني نموذج تسجيل دخول بسيط. ستحتاج إلى حقل للبريد الإلكتروني وحقل لكلمة المرور. أولاً لدينا الكائن user يحمل الخاصية email و password new Vue({ el: '#app', data: { user: { email: '', password: '' }, }, }); ونريد عندما يكتب المستخدم بريده الإلكتروني أو كلمة المرور في الحقول، تتحدث قيم this.user.email و this.user.password تلقائيًا في بيانات Vue نستخدم v-model كالتالي <div id="app"> <form @submit.prevent="login"> <label for="email">البريد الإلكتروني:</label> <input v-model="user.email" type="email" id="email" required> <label for="password">كلمة المرور:</label> <input v-model="user.password" type="password" id="password" required> <button type="submit">تسجيل الدخول</button> </form> </div>

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

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

أولاً DummyJSON هي خدمة مجانية توفر واجهة برمجة تطبيقات (API) وهمية لبيانات JSON تجريبية والرابط https://dummyjson.com/products يوفر مجموعة شاملة من بيانات المنتجات التجريبية، والتي تتضمن تفاصيل مثل الأسماء، الأسعار، الأوصاف، الصور، والفئات. هذه البيانات مثالية لاختبار وبناء نماذج أولية لتطبيقات التجارة الإلكترونية. أما بالنسبة للكود فلدينا methods: { ... } هذا الجزء يُستخدم لتعريف الدوال (Functions) أو الأساليب (Methods) المخصصة التي يمكن استخدامها داخل مكون برمجي معين. async getProducts() async هذه الكلمة تشير إلى أن هذه الدالة غير متزامنة (Asynchronous). ماذا يعني ذلك؟ تعني أن هذه الدالة ستنفذ عملية قد تستغرق بعض الوقت (مثل الاتصال بالإنترنت)، ولن تعيق تنفيذ بقية الشيفرة البرمجية أثناء انتظارها اكتمال هذه العملية. ستعمل في الخلفية، وعندما تنهي عملها، ستعيد النتيجة. await fetch('https://dummyjson.com/products') fetch() أداة مدمجة في JavaScript تستخدم لتقديم طلبات (Requests) لجلب الموارد من الشبكة، مثل البيانات أو الملفات. await تستخدم مع الدوال async. وتعني: "انتظر هنا حتى تنهي عملية fetch عملها وتعيد لي الاستجابة (Response)". أي أننا لن ننتقل إلى الخطوة التالية إلا بعد أن ترجع fetch نتيجة. .then((response) => response.json()) .then() هذه خطوة تنفذ بعد أن تنجح العملية السابقة (وهي fetch) وتعيد لنا استجابة. عملية fetch ترجع كائنًا يسمى response وعندما تأتينا الاستجابة (response)، نقوم بتحويلها إلى صيغة يمكن لـ JavaScript فهمها والتعامل معها بسهولة، وهي صيغة JSON". .then((data) => this.products = data) عندما تأتي البيانات بصيغة JSON (وقد أسميناها هنا data)، نقوم بتخزينها في متغير اسمه products

للتوضيح أكثر يمكنك الإطلاع على الأمثلة التالية أولاً لنفترض أن لديك تطبيقًا لإدارة المنتجات، ولديك قائمة من المنتجات ككائنات JavaScript. تريد عرض المنتجات المتوفرة فقط، أو المنتجات التي تنتمي إلى فئة معينة وهنا نستخدم filter كالتالي // بيانات المنتجات (يمكن أن تأتي من API أو قاعدة بيانات) const products = [ { id: 1, name: 'لابتوب ديل XPS', category: 'إلكترونيات', price: 1500, inStock: true }, { id: 2, name: 'ماوس لاسلكي لوجيتك', category: 'إلكترونيات', price: 50, inStock: false }, { id: 3, name: 'كتاب تعلم JavaScript', category: 'كتب', price: 30, inStock: true }, { id: 4, name: 'قميص قطني رجالي', category: 'ملابس', price: 45, inStock: true }, { id: 5, name: 'سماعات رأس سوني', category: 'إلكترونيات', price: 200, inStock: true }, { id: 6, name: 'طاولة قهوة خشبية', category: 'أثاث', price: 120, inStock: false } ]; // 1. تصفية المنتجات المتوفرة في المخزون فقط function getAvailableProducts(allProducts) { return allProducts.filter(product => product.inStock === true); } const availableProducts = getAvailableProducts(products); console.log("المنتجات المتوفرة في المخزون:"); console.log(availableProducts); /* Output: [ { id: 1, name: 'لابتوب ديل XPS', category: 'إلكترونيات', price: 1500, inStock: true }, { id: 3, name: 'كتاب تعلم JavaScript', category: 'كتب', price: 30, inStock: true }, { id: 4, name: 'قميص قطني رجالي', category: 'ملابس', price: 45, inStock: true }, { id: 5, name: 'سماعات رأس سوني', category: 'إلكترونيات', price: 200, inStock: true } ] */ أما بالنسبة ل match فيمكنك أن تعمل على نظام للتحقق من صحة المدخلات في نموذج (form validation) كالتالي function parseEmail(email) { // تعبير نمطي بسيط للتحقق من بنية البريد الإلكتروني واستخراج اسم المستخدم والنطاق // [a-zA-Z0-9._%+-]+@ -> اسم المستخدم // [a-zA-Z0-9.-]+\. -> اسم النطاق (قبل النقطة الأخيرة) // [a-zA-Z]{2,} -> امتداد النطاق (مثل com, org, net) const emailRegex = /^([a-zA-Z0-9._%+-]+)@([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,})$/; const matchResult = email.match(emailRegex); if (matchResult) { // matchResult[0] هو التطابق الكامل // matchResult[1] هو الجزء الأول الملتقط (اسم المستخدم) // matchResult[2] هو الجزء الثاني الملتقط (النطاق الرئيسي) // matchResult[3] هو الجزء الثالث الملتقط (امتداد النطاق) return { isValid: true, fullEmail: matchResult[0], username: matchResult[1], domain: `${matchResult[2]}.${matchResult[3]}` // إعادة بناء النطاق كاملاً }; } else { return { isValid: false, message: "صيغة البريد الإلكتروني غير صحيحة." }; } } console.log("تحقق من البريد الإلكتروني 1:"); console.log(parseEmail("user.name@example.com")); /* Output: { isValid: true, fullEmail: 'user.name@example.com', username: 'user.name', domain: 'example.com' } */

هل تظهر علامة دوراتي كما بالصوره التاليه ؟ إذا كانت تظهر لك فيرجى الضغط عليها والإنتقال للدورة التي إشتركت بها ويمكنك الاطلاع على الرابط التالي لتفاصيل أكثر https://support.academy.hsoub.com/access-to-courses أما إذا لم تظهر كلمة دوراتي فيرجى الإنتظار قليلاً والمتابعة مع مركز المساعدة من خلال الرابط التالي https://support.academy.hsoub.com/conversations

بالإضفة للشرح السابق يمكننا فهم هذه المفاهيم بشكل أعمق، من خلال مثالاً لتطبيق Vue.js بسيط يستخدم Vue Router. لنفترض أن لديك المكون الرئيسي لتطبيقك (App.vue) وتريد إنشاء قائمة تنقل ديناميكية بناءً على المسارات المعرفة <template> <div id="app"> <nav> <ul> <li v-for="route in myRoutes" :key="route.name"> <router-link :to="route.path">{{ route.name }}</router-link> </li> </ul> </nav> <router-view></router-view> </div> </template> <script> export default { data() { return { myRoutes: [] // سنقوم بملء هذه المصفوفة في mounted }; }, mounted() { this.myRoutes = this.$router.options.routes; console.log('My defined routes:', this.myRoutes); } }; </script> سيكون output في الـ console مثل My defined routes: [ { path: '/', name: 'Home', component: HomeComponent }, { path: '/about', name: 'About', component: AboutComponent }, { path: '/contact', name: 'Contact', component: ContactComponent, meta: { requiresAuth: true } } ]

بالتأكيد فهناك الكثير من الشركات تبحث عن مطورين لديهم فهم جيد للـ SEO. هذا يجعلك مرشحًا أقوى للوظائف، وقد تجد فرصًا في مجالات تجمع بين الـ SEO وتطوير الويب. كما أنك كمبرمج، عندما تفهم الـ SEO، ستتمكن من بناء المواقع منذ البداية لتكون سهلة الفهم والفهرسة من قبل محركات البحث. يشمل ذلك تحسين هيكل الموقع، سرعة التحميل، والتعامل مع JavaScript بطريقة لا تؤثر على الزحف والفهرسة. أما بالنسبة للوقت الذي تحتاجه لتعلم الـ SEO يختلف بناءً على عدة عوامل، أهمها مدى التزامك بالدراسة والتطبيق العملي. فمثلاً يمكنك تعلم الأساسيات مثل: البحث عن الكلمات المفتاحية ، الجوانب التقنية للموقع (Technical SEO)، وبناء الروابط (Link Building). في ساعات أيام، لكن الفهم الحقيقي يأتي مع الممارسة.

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

بالتأكيد يمكنك الانتقال لتعلم TypeScript (TS) مباشرة إذا كنت تركز على Vue، دون الحاجة إلى انتظار إكمال مسارات React Native أو تطبيق دردشة يشبه واتساب. كما ان React تدعم TypeScript بشكل ممتاز . ولكن يفضل أولاً تحديد الإطار الذي تريد تعلمه حالياً هل هو vue أو react فلديك المسار react native و تطبيق دردشة يشبة whatsApp يعتمد على react.

لا يتعين عليك حفظ أسماء جميع كلاسات Bootstrap ، ولكن فهم أساسيات CSS سيساعدك كثيراً عند العمل وجعل الأمور أكثر وضوحاً وبعض الأساسيات ستكون مهمة بالنسبة لك في التعلم . ولكن لاحقاً إن كنت مبرمج Back-end فقط فلا يلزمك التعمق في CSS، ولكن يفضل على الأقل معرفة أساسيات للتفاهم مع فريق الـ Front-end أو لإجراء تعديلات بسيطة أما إذا كنت Full-Stack أو مستقل ينصح بشدة بتعلم CSS

أولاً لا يمكن الجزم بأن React أفضل من Angular أو العكس بشكل مطلق، فكلاهما أداتان قويتان لبناء واجهات المستخدم ولهما مميزاتهما وعيوبهما. الاختيار بينهما يعتمد بشكل كبير على طبيعة المشروع، حجم الفريق، وتفضيلات المطورين. وبالنسبة لك يعتمد على السوق والوظائف المتاحة وتفضيلك. ويعتبر React إذا كنت مبتدئ أسهل وأسرع للدخول للسوق بينما Angular إذا كنت تخطط للعمل في مشاريع enterprise كبيرة ولذلك يعتبر Angular بشكل عام أصعب في التعلم من React، نظرًا لأنه إطار عمل متكامل، يتطلب Angular تعلم العديد من المفاهيم والأدوات الخاصة به (مثل TypeScript، RxJS، Decorator). وبالنسبة لسؤالك فيمكنك تعلم كلا الإطارين بدون أي مشكلة ولكن يجب إعطاء كل تقنية وقتها.

يمكنك أيضاً استخدام continue لتتخطى التكرار الحالي وتنتقل للعنصر التالي fruit = ['orange', 'banana', 'mango', 'lemon '] for x in range(len(fruit)): if fruit[x] == 'mango': # strip() لإزالة المسافات continue print(x, fruit[x])

تم الشرح في التعليقات السابقة بشكل مفصل وإليك أيضاً مثال للتوضيح أكثر كالتالي <script> export default { data() { return { task: '', tasks: [], timer: null }; }, // 1. قبل التهيئة beforeCreate() { console.log('beforeCreate: لم يتم تهيئة البيانات بعد'); }, // 2. بعد التهيئة (البيانات أصبحت متاحة) created() { console.log('created: البيانات أصبحت متاحة'); // محاكاة جلب بيانات من API setTimeout(() => { this.tasks = ['قراءة كتاب', 'مراجعة الكود']; console.log('تم تحميل المهمات'); }, 1000); }, // 3. قبل تركيب المكون في DOM beforeMount() { console.log('beforeMount: القالب سيُركب'); }, // 4. بعد تركيب المكون في DOM mounted() { console.log('mounted: المكون جاهز في DOM'); this.$refs.taskInput.focus(); // تشغيل مؤقت this.timer = setInterval(() => { console.log('الوقت يمر...'); }, 2000); }, // 5. قبل التحديث (عند تغيير البيانات) beforeUpdate() { console.log(' beforeUpdate: البيانات ستتغير'); }, // 6. بعد التحديث updated() { console.log(' updated: تم تحديث الواجهة'); }, // 7. قبل إلغاء تثبيت المكون beforeUnmount() { console.log(' beforeUnmount: تنظيف قبل إزالة المكون'); clearInterval(this.timer); // إيقاف المؤقت }, // 8. بعد إلغاء تثبيت المكون unmounted() { console.log(' unmounted: تم إزالة المكون نهائيًا'); }, }; </script> يمكنك إضافة الأكواد السابقة في تطبيق بسيط ثم راقب الكونسول لترى متى يتم استدعاء كل Hook

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

Less و Stylus هما، مثل Sass/SCSS، معالجات CSS أيضاً

السؤال يطلب منك اختيار أي من معالجات CSS ترغب في استخدامها في مشروعك؟ ولذلك إذا تعلمت sass من قبل فيمكنك إختيار Sass فهو الخيار الأكثر شيوعًا والموصى به أو يمكنك إختيار التقنية التي تريدها .

هل تقصد كيفية إنشاء مشروع vue من خلال vue cli ؟ إذا كنت تقصد ذلك فتحتاج أولاً لتثبيت Vue CLI عن طريق تنفيذ الأمر التالي npm install -g @vue/cli بعد تثبيت Vue CLI، يمكنك الآن إنشاء مشروع Vue جديد. فيمكنك الإنتقال إلى المجلد الذي تريد إنشاء المشروع فيه باستخدام سطر الأوامر، ثم قم بتشغيل الأمر التالي vue create my-vue-project واستبدل my-vue-project بالاسم الذي تريده لمشروعك.

بشكل مبسط Vue CLI أداة بناء لمشاريع Vue.js. مثل Create React App في React فيقوم بنفس الوظيفة . وبالتالي يقوم بإعداد مشروع Vue.js جديد لك، بما في ذلك جميع الإعدادات المعقدة لأدوات التطوير وهو حزمة عالمية أي يمكنك تثبيته مرة واحدة على جهازك واستخدامه لإنشاء أي عدد من مشاريع Vue.js. ويعتبر Vite هو البديل الأكثر شيوعًا والأسرع لـ Vue CLI في الوقت الحالي. فهو يركز على سرعة التطوير فينصح به حاليًا لبدء مشاريع Vue.js الجديدة.

وعليكم السلام ورحمة الله وبركاته. نعم، إجابتك صحيحة تمامًا حيث أن True يعامل كـ 1 False يعامل كـ 0 وهذا يعني أنك عند إجراء مقارنة بين قيمة منطقية وعدد، فإن بايثون تقوم تلقائيًا بتحويل القيمة المنطقية إلى عدد صحيح (int)

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