Mustafa Suleiman

بخصوص أكواد sass جرب تعديل الكود بالشكل التالي: .card-news-details { display: flex; justify-content: center; align-items: center; padding: 0 !important; position: relative; left: -50%; /* الوضعية الابتدائية: يتم نقلها إلى اليسار */ opacity: 1; transition: left 1s, opacity 1s; &.show { left: 0; /* الوضعية النهائية: يتم نقلها إلى الوسط */ opacity: 1; } .card-news-card { width: 80%; position: relative; .img-active_profile { width: 100%; /* العرض الابتدائي: 100٪ */ height: 600px; border-top-left-radius: $radius; border-bottom-left-radius: $radius; max-height: 600px; object-fit: cover; box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.408); opacity: 1; transition: width 1s, opacity 1s; &.show_img { width: 40%; /* العرض النهائي: 40٪ */ opacity: 1; } } .title_slide-full { position: absolute; top: 15px; left: 45%; font-size: 45px; opacity: 0; /* مخفية في البداية */ transition: all 2s; &.show_title { opacity: 1; /* إظهار العنوان */ } } } } والكود يعمل على جعل الصورة الكبيرة المرغوبة تنتقل من -50٪ left إلى left: 0٪، وعندما تكون الصورة في الوضعية left: 0٪، ستصبح عرض الصورة 100٪ والعنوان مخفيًا، ثم عندما تتقلص الصورة إلى عرض 40٪، سيظهر العنوان.

ليست بديهية حيث يمكن إنشاء مشاريع ويب بلغات أخرى، بل عليك ذكر كل اللغات التي استخدمتها في المشروع، وبخصوص المكتبات مثل Bootstrap وAxios فاذكرهم لا مشكلة في ذلك، وتستطيع ذكر كافة المكتبات التي استخدمتها، لكن من الأفضل ذكر الهام منها والأساسي بالنسبة للمشروع. وبالنسبة للـ API فهل من سبب يدفعك لذكر ذلك؟ تستطيع كتابة وصف للمشروع في README وسيتم فهم أن المشروع يعتمد على API في تنفيذ أمر معين، وذكر أنك تستخدم Axios يدل بالتبعية على أن المشروع يستخدم API، وإذا كنت تقصد أنه يتم الإعتماد على API خارجي لتوفير المعلومات فاذكر ذلك. ببساطة ملف README.md يوضح وصف للمشروع بشكل مختصر وواضح، بحيث يفهم القارئ وظيفة المشروع الخاص بك، ثم يعرض المميزات Features ثم صورة توضيحية لو أمكن Screenshots، ثم الجزء الخاص بشرح إعداد المشروع، ثم الجزء الخاص بشرح طريقة استخدام المشروع إن دعت الحاجة إلى ذلك، ثم الجزء الخاصة بالتقنيات المستخدمة Tech Used. وهناك العديد من المواقع التي توفر عليك كتابة ملف readme وقد تم توضيحها هنا:

تم شرح الأمر في النقاشات والدروس التالية:

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

تم توضيح الأمر بشكل كافي، ولكن أنت بحاجة إلى رؤية الأمر بشكل عملي لتستوعبه، وإليك الشرح من خلال أمثلة. ولتوضيح فائدة الـ grid (الشبكة) والـ gap (الفراغات)، انظر إلى الكود التالي المستخدم في تصميم واجهة المستخدم. HTML <div class="container"> <div class="item">عنصر 1</div> <div class="item">عنصر 2</div> <div class="item">عنصر 3</div> <div class="item">عنصر 4</div> <div class="item">عنصر 5</div> <div class="item">عنصر 6</div> </div> CSS .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .item { background-color: #eaeaea; padding: 20px; text-align: center; } والنتيجة هي: في كود HTML يوجد عناصر ستتم توزيعها باستخدام الشبكة (grid) مع 3 أعمدة (columns)، والفراغ بين العناصر سيكون 20 بكسل (الـ gap). والفوائد التي حققناها باستخدام الـ grid هي: توزيع العناصر بشكل متساوٍا على الأعمدة والصفوف، مع وجود فراغات بحجم 20 بكسل بينها. ستظهر العناصر في صورة شبكة منتظمة ومتساوية الأبعاد، مما يخلق تناغم بصري في التصميم. يمكنك تغيير حجم الشاشة أو تحديد حجم العناصر بناءًا على احتياجاتك، وسيتكيف التصميم تلقائيًا مع الشاشة المستخدمة. وربما يدور في بالك الآن لماذا لم نقم بتنسيق العناصر بشكل عادي بدلاً من استخدام Grid؟ أولاً يمنحك الـ grid قدرًا كبيرًا من التحكم في توزيع العناصر. يمكنك تحديد عدد الأعمدة والصفوف، وتحديد أحجام العناصر والفراغات بينها بشكل محدد، مما يعني أنه يمكنك تنفيذ تصميمات معقدة بسهولة. يسمح لك أيضًا بتعديل توزيع العناصر بناءً على حجم الشاشة وجهاز العرض، وتغيير عدد الأعمدة وأحجام العناصر بناءًا على الاحتياجات المحددة لكل حجم شاشة، مما يعني أن واجهتك ستكون متجاوبة وتعمل بشكل جيد على مختلف الأجهزة. ودعنا نقارن الكود السابق الذي يستخدم الـ grid مع كود يستخدم تنسيقات CSS العادية ولا يعتمد على flex أو Grid. الكود باستخدام تنسيقات CSS العادية لتحقيق نفس الشكل والتنسيق: <table class="container"> <tr> <td class="item">عنصر 1</td> <td class="item">عنصر 2</td> <td class="item">عنصر 3</td> </tr> <tr> <td class="item">عنصر 4</td> <td class="item">عنصر 5</td> <td class="item">عنصر 6</td> </tr> </table> <style> .container { border-collapse: separate; border-spacing: 20px; } .item { background-color: #eaeaea; padding: 20px; text-align: center; } </style> في الكود الذي يستخدم الـ grid، نستخدم العنصر <div> كعناصر واجهة المستخدم ونعمل على تحقيق توزيعها بواسطة الـ grid، أما في الكود الذي يستخدم تنسيقات الجدول، نستخدم العناصر <table>, <tr>, و <td> لتحقيق التنسيق المطلوب. لكن هناك فارق كبير جدًا بين استخدام Grid وFlex في إنشاء الواجهة وتقسميم عناصر الصفحة، وبين استخدام الجدول وخصائص CSS الأخرى. حيث أنه لديك تحكم كامل من خلال Grid وFlex بينما في الجدول مثلاً لديك إمكانيات محدودة جدًا ومعقدة في الاستخدام. وبخصوص الـ gap فالصورة بألف كلمة، وستفهم ما أقصده من خلال الصورة التالية: فكما ترى يوجد مساحة بحجم 10 بكسل، في الصفوف والأعمدة، فجيب الإنتباه إلى أن gap:10px هي إختصار للكود التالي: row-gap: 10px; column-gap: 10px; فبإمكانك تخصيص الفراغ بين الأعمدة والصفوف بشكل منفصل لكل منهما بدلاً من استخدام gap. وأيضًا يجب عليك الإنتباه إلى الفرق بين Flex وGrid حيث أن Flex يستخدم لإنشاء واجهة أحادية البعد أي على شكل رأسي أو أفقي فقط، بينما Grid نستطيع إنشاء شبكة متعددة الأبعاد بداخله كالتالي: وأنصحك باستخدام الأداة التالية أثناء تعلم Grid وFlex في البداية لكي تفهم الخواص الخاصة بهم بشكل أسهل حتى تعتاد عليها: https://flexbox.malven.co/ https://grid.malven.co/

مكتبة Joi تعتبر سهلة الاستخدام وتوفر واجهة برمجة تطبيق (API) بسيطة وواضحة، وهي خيار جيد إذا كنت معتاد على استخدامها. لكن هنا مكتبة Yup أيضًا توفر واجهة برمجة سهلة الاستخدام وتحقق من البيانات بشكل مشابه لـ Joi، وإذا كنت تعمل على تطبيق React في نفس الوقت، فالأفضل استخدام Yup فهى أكثر تكاملاً مع بيئة العمل تلك. الفرق الرئيسي هو أن Joi هي مكتبة مستقلة تمامًا وتستخدم بشكل شائع في تطبيقات Node.js، في حين أن Yup هي مكتبة تستخدم على نطاق واسع في تطبيقات React وتدعم أيضًا استخدامها في Node.js. فإذا كنت تعمل على تطبيق React، فقد يكون استخدام Yup أكثر تكاملاً وسهولة مع بيئة العمل تلك، حيث أنها تتكامل بشكل أفضل مع نظام التحكم في النماذج الخاص بـ React وتوفر تعبيرًا أكثر سهولة عند تحديد قواعد التحقق. وإليك مثال: import React, { useState } from 'react'; import { useFormik } from 'formik'; import * as Yup from 'yup'; // تعريف مخطط التحقق باستخدام Yup const validationSchema = Yup.object().shape({ name: Yup.string().required('يرجى إدخال الاسم'), email: Yup.string().email('صيغة البريد الإلكتروني غير صحيحة').required('يرجى إدخال البريد الإلكتروني'), password: Yup.string().min(6, 'يجب أن تحتوي كلمة المرور على الأقل على 6 أحرف').required('يرجى إدخال كلمة المرور'), }); const MyForm = () => { const formik = useFormik({ initialValues: { name: '', email: '', password: '', }, validationSchema: validationSchema, onSubmit: (values) => { // إجراء عند تقديم النموذج بنجاح console.log(values); }, }); return ( <form onSubmit={formik.handleSubmit}> <div> <label htmlFor="name">الاسم:</label> <input type="text" id="name" name="name" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.name} /> {formik.touched.name && formik.errors.name && <div>{formik.errors.name}</div>} </div> <div> <label htmlFor="email">البريد الإلكتروني:</label> <input type="email" id="email" name="email" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.email} /> {formik.touched.email && formik.errors.email && <div>{formik.errors.email}</div>} </div> <div> <label htmlFor="password">كلمة المرور:</label> <input type="password" id="password" name="password" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.password} /> {formik.touched.password && formik.errors.password && <div>{formik.errors.password}</div>} </div> <button type="submit">تأكيد</button> </form> ); }; export default MyForm; الكود يقوم باستخدام Yup لتعريف مخطط التحقق (validationSchema) الذي يحتوي على قواعد التحقق من صحة البيانات، ويطبق ذلك المخطط على النموذج الذي تم تعريفه باستخدام useFormik، وعرض الأخطاء في حالة عدم صحة البيانات في الوقت الفعلي، و تنفيذ الإجراء المحدد عند تقديم النموذج بنجاح. وإذا أردت الإطلاع على مكتبات أخرى يوجد Ajv وهي مكتبة تحقق من بيانات JSON تدعم معيار JSON Schema، توفر مرونة كبيرة في تحديد قواعد التحقق والتصفية وتدعم تخصيصات متقدمة.

أنت تقصد الدوال صحيح؟ سأوضح لك كل تابع مع مثال بسيط لتفهم بشكل أوضح: 1- print() تستخدم لطباعة النصوص أو القيم على الشاشة. print("Hello, World!") 2- input() تستخدم للحصول على إدخال المستخدم من خلال لوحة المفاتيح. name = input("Please enter your name: ") print("Hello, " + name) 3- len() تستخدم للحصول على طول أو عدد العناصر في تسلسل ما (سلسلة نصية أو قائمة). name = "John Doe" print(len(name)) # ستطبع القيمة 8 4- range() تستخدم لإنشاء تسلسل من الأرقام بناءً على البداية والنهاية والخطوة. for i in range(1, 10, 2): print(i) 5- str(), int(), float() تستخدم لتحويل القيم من نوع إلى نوع آخر. num_str = "10" num_int = int(num_str) num_float = float(num_str) 6- list(), tuple(), dict(), set() تستخدم لإنشاء مجموعات بيانات مختلفة. my_list = list(range(1, 5)) my_tuple = tuple(('apple', 'banana', 'cherry')) my_dict = dict(name='John', age=30) my_set = set([1, 2, 3, 3, 4]) 7- max(), min() تستخدم للعثور على القيمة الأكبر والأصغر في تسلسل من الأرقام. numbers = [5, 2, 9, 1, 7] max_num = max(numbers) min_num = min(numbers) 8- abs() تستخدم للحصول على قيمة مطلقة لرقم. num = -10 abs_num = abs(num) 9- round() تستخدم لتقريب رقم عشري إلى أقرب رقم صحيح. num = 3.7 rounded_num = round(num) 10- sum() تستخدم لحساب مجموع عناصر التسلسل. numbers = [1, 2, 3, 4, 5] sum_of_numbers = sum(numbers) وهناك العديد من التوابع الأخرى المهمة في Python مثل sorted() لفرز العناصر، zip() لدمج قوائم متعددة معًا، enumerate() للحصول على فهرس وقيمة العناصر في حلقة الإعادة والمزيد. ولكن ما ذكرته لك هو الأساسي ويجب معرفته. وتستطيع رؤية كل الدوال المضمنة في بايثون من خلال موسوعة حسوب . وبخصوص الإمتحان فستجد هنا تفاصيل واضحة للمطلوب منك:

الأمر لا يسير بتلك الطريقة، بل عليك بناء الروابط بشكل طبيعي والصبر وستفوز بذلك على المدى الطويل بدلاً من تحقيق نجاح قصير الأجل، حيث أن خوارزميات جوجل ذكية جدًا، لذلك يجب بناء الروابط الخلفية (الباك لينك) بشكل طبيعي. بمعنى لو أن الموقع في بداياته ولم يمر على إنشائه أكثر من 3 أشهر مثلاً، هل من الطبيعي أن يتم الإشارة إليه في روابط خلفية بعدد 10 روابط يوميًا؟ بالطبع لا، فرابطين أو 3 روابط في الأسبوع الأول أمر مقبول مثلاً، ثم في الأسبوع الثاني زد العدد قليلاً إلى 5 في الأسبوع مثلاً. لكن انتظر، هل يوجد محتوى كافي ليتم الإشارة إلى الموقع، فكما ذكرت خوارزميات جوجل ذكية، فإذا تم الإشارة بعدد روابط كبير ولا يتناسب مع عدد المحتوى وحجم الموقع فسيصبح الأمر غير طبيعي. وأيضًا لا تهتم أبدًا بعدد الروابط، بل اهتم بجودة الروابط الخلفية، حيث أن باك لينك واحد فقط ذو جودة عالية ومن موقع ذو ثقة وترتيب مرتفع ومهتم بنفس مجال موقعك أفضل بمراحل من عشرة روابط من مواقع ضعيفة وليست ضمن مجال موقعك. نصيحتي إليك هي بالصبر في الشهر الأول، والإهتمام ببناء محتوى الموقع بشكل قوي، والنشر على موقع التواصل، ومن الأفضل إنشاء محتوى مرئي حتى لو قصير والإشارة إلى المحتوى في وصف الفيديو. وبعد ذلك قم بالتدرج في الإشارة إلى موقعك وبناء الباك لينكس، وأيضًا لا تقم بالإشارة في نفس الوقت، أي قسم الروابط على أوقات مختلفة وبأشكال مختلفة. ونصيحتي إليك هي بالإهتمام أولاً بصفحة الموقع الرئيسية عن طريق الإشارة إليها بنحو 40 إلى 50 رابط بالتدرج كما أخبرتك وبجودة مرتفعة ما أمكن ذلك، وبذلك سيتم تقوية المحتوى لكامل الموقع. وأيضًا عليك بالتنصل من الروابط الضعيفة التي تشير إلى موقعك فهى تؤثر بالسلب ولا تفرح بالعدد الكبير كما أخبرتك.

عليك باستخدام localStorage لحفظ القيم المدخلة في حقول الإدخال، وذلك بتعديل السكريبت لديك بالشكل التالي: let submit = document.getElementById('submit'); let text = document.getElementById('text'); let password = document.getElementById('password'); // عرض البيانات المحفوظة عند تحميل الصفحة window.onload = function() { let savedText = localStorage.getItem('text'); if (savedText) { text.value = savedText; } let savedPassword = localStorage.getItem('password'); if (savedPassword) { password.value = savedPassword; } }; submit.onclick = function () { if (text.value === 'محمد عماد احمد' && password.value === '10203') { alert('نعم'); // حفظ القيم في localStorage localStorage.setItem('text', text.value); localStorage.setItem('password', password.value); } else { alert('لا'); } let screenWidth = screen.availWidth; if (screenWidth > 1000) { alert('فقط الهواتف المحمولة، من فضلك'); } else { alert('الهاتف المحمول المناسب'); } }; يستخدم localStorage.setItem(key, value) لحفظ القيم في ذاكرة التخزين المحلية للمتصفح. وعند تحميل الصفحة، يستخدم localStorage.getItem(key) لاسترداد القيم المحفوظة وتعيينها في حقول الإدخال، وستظل القيمة محفوظة حتى بعد تحديث الصفحة.

ما تريده هو تحديد قيمة محددة في عنصر select باستخدام الـ selected attribute بشكل ديناميكي في HTML و JavaScript، صحيح؟ 1- أولاً علياسترجاع البيانات المحفوظة مسبقًا من localStorage باستخدام JavaScript. 2- تعيين قيمة المحددة في عنصر select باستخدام خاصية value في JavaScript. إليك مثال: HTML <select id="mySelect"> <option value="value1">قيمة 1</option> <option value="value2">قيمة 2</option> <option value="value3">قيمة 3</option> </select> JavaScript document.addEventListener('DOMContentLoaded', function() { // استرجاع القيمة المحفوظة مسبقًا من localStorage const selectedValue = localStorage.getItem('selectedValue'); // التحقق مما إذا كان هناك قيمة محفوظة if (selectedValue) { // تعيين القيمة المحددة في عنصر select document.getElementById('mySelect').value = selectedValue; } }); ما يحدث هو عند تحميل الصفحة، تسترجع القيمة المحفوظة مسبقًا من localStorage وتعيينها كقيمة محددة في عنصر select. يجب عليك تغيير 'selectedValue' في localStorage.getItem('selectedValue') إلى المفتاح الصحيح الذي تستخدمه لحفظ القيمة في localStorage. تأكد من وضع الجزء الخاص بالتعيين في داخل الدالة التي تنفذها DOMContentLoaded حتى يتم تنفيذ العملية عند تحميل الصفحة بشكل صحيح.

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

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

المشكلة ليست في تحميل حزمة Swal أو app.js، إذ أنك تستدعي Swal بشكل صحيح في ملف app.js، والمشكلة الحالية تكمن في طريقة استخدامك لـ Swal في ملف app.blade.php. وعندما تضمن ملف app.js في ملف app.blade.php باستخدام التوجيه الخاص بـ Laravel @vite، فإن محتوى ملف app.js يتم دمجه وتجميعه في ملف واحد للمتصفح. وبالتالي أي متغيرات أو مكتبات معرفة في app.js لن تكون متاحة مباشرة في نطاق الملف app.blade.php. عليك بتعديل ملف app.js بحيث تقوم بتصدير Swal كمتغير عالمي (global variable)، بالشكل التالي: import Swal from 'sweetalert2'; window.Swal = Swal; وبذلك ستصبح مكتبة Swal متاحة في النطاق العالمي، مما يمكنك من استخدامها في ملف app.blade.php بعد تضمين ملف app.js.

تطابق البيانات الذي تقصده هو عملية مقارنة البيانات المخزنة في مصدر معين مع بيانات أخرى للتحقق من مدى تطابقها أو اختلافها، ويعتبر تطابق البيانات أمرًا لا غنى عنه في العديد من المشاريع، سواء في الواجهة الأمامية (Front-end) أو في الخلفية (Back-end)، وفي أغلب الأحوال يتطلب الإعتماد على كلا الجانبين معًا لضمان الدقة والموثوقية. وعندما يتعلق الأمر بتطابق البيانات في الواجهة الأمامية، يكون الهدف الأساسي هو ضمان أن البيانات التي يقدمها المستخدم في النماذج أو الحقول المختلفة متطابقة مع البيانات المخزنة. وبالإمكان حقيق ذلك عن طريق استخدام آليات التحقق والتحقق من الصحة في الواجهة الأمامية، مثل التحقق من الصيغة الصحيحة للبريد الإلكتروني، أو التأكد من تاريخ صحيح، أو المقارنة بين قيمتين للتأكد من تطابقهما، ولكن من الضروري أيضًا تنفيذ تحققات إضافية في الخلفية للتأكد من أن البيانات المدخلة من الواجهة الأمامية تطابق البيانات المخزنة بشكل صحيح. فيما يتعلق بالجانب الخلفي، فإن تطابق البيانات جزءًا أساسيًا من عمليات معالجة البيانات والتحقق من صحتها، ويشمل ذلك التحقق من أن البيانات التي تم استلامها من مصادر خارجية مثل قواعد البيانات الخارجية أو واجهات برمجة التطبيقات (API) تتوافق مع بيانات النظام الداخلي. وإذا كانت هناك عمليات تعديل أو تحديث للبيانات في النظام الداخلي، يجب أيضًا التحقق من أن هذه التغييرات تم تنفيذها بشكل صحيح وأن البيانات المخزنة تطابق البيانات المعدّلة. بالتالي، لضمان تطابق البيانات بشكل صحيح وموثوق، يجب أن يتم الاعتماد على تطابق البيانات في الواجهة الأمامية والخلفية معًا، وتنفيذ آليات التحقق والتحقق من صحة البيانات في الواجهة الأمامية لتجنب إدخال بيانات غير صحيحة أو غير متطابقة، وفي الوقت نفسه، تنفيذ تطابق البيانات في الخلفية للتأكد من أن البيانات المدخلة تتوافق مع البيانات المخزنة وأن أي تعديلات تم إجراؤها على البيانات تم تنفيذها بشكل صحيح. ولنفترض أن لديك تطبيقًا لإدارة مخزون يتيح للمستخدمين إضافة منتجات جديدة، سنستخدم ذلك المثال لشرح أهمية تطابق البيانات في الواجهة الأمامية والخلفية. 1- تطابق البيانات في الواجهة الأمامية: المستخدم يقوم بملء استمارة إضافة منتج جديد. يجب التحقق من صحة البيانات المدخلة في الواجهة الأمامية، مثل التحقق من أن جميع الحقول الإلزامية معبأة بشكل صحيح، وأن صيغة الأرقام والأحرف صحيحة. مثال: التحقق من أن السعر المدخل بالواجهة الأمامية هو رقم صحيح وأنه أكبر من صفر. 2- تطابق البيانات في الخلفية: بعد أن يقوم المستخدم بإضافة المنتج الجديد، يتم إرسال البيانات إلى الخلفية لمعالجتها. في الخلفية، يجب التحقق من أن البيانات المدخلة في الواجهة الأمامية تتوافق مع بيانات النظام الداخلي. مثال: التحقق من أن المنتج المضاف متوفر في قاعدة البيانات الخاصة بالمخزون وأن السعر المدخل متطابق مع سعر البيانات المخزنة.

سأوضح لك ببساطة، عندما يتم تشغيل رابط مثل التالي xxx.com/gets مثلاً من متصفح الويب، يتم الاتصال بالخادم الذي مرتبط بنطاق xxx.com، وإذا كانت إعدادات vue-router قد تم تعيينها على وضعية التاريخ (history mode)، فسيتم البحث عن المسار /gets داخل ملفات الخادم. وإذا لم يتواجد المسار /gets ضمن الملفات، سيتم عرض خطأ الصفحة غير موجودة (404). الحلول الأسهل هي: إنشاء ملف 404.html بنفس محتوى ملف index.html (في مجلد public)، وعندما يتم تلقي طلب لصفحة غير موجودة (404)، فقم بنسخ نفس محتوى ملف index.html داخل هذا الملف 404.html، وبتلك الطريقة، عندما يتم عرض خطأ 404، سيتم استخدام محتوى الملف 404.html بدلاً من إعادة عرض نفس صفحة الخطأ. 2- ضبط Vue Router على وضعية الهاش، حيث أن Vue Router يأتي بوضعيتين للتوجيه (Routing)، وضعية التاريخ (history mode) ووضعية الهاش (hash mode). بشكل افتراضي، وVue Router يستخدم وضعية التاريخ، ولتعيين Vue Router إلى وضعية الهاش.عليك بتعديل تكوين Vue Router في مشروعك ليكون كالتالي: const router = new VueRouter({ mode: 'hash', // ... مزيد من الإعدادات ... }) وعندما تقوم بتعيين وضعية الهاش (hash mode)، ستظهر علامة الهاش (#) في عنوان URL بعد اسم الموقع الأساسي، وهذا يساعد في تجنب خطأ 404 الناتج عن طلبات مباشرة للخادم على مسارات لا تتطابق مع الملفات الموجودة. وهناك حل آخر باستخدام Travis CI، وعليك بالتالي: 1- قم بإضافة الإعدادات التالية في ملف vue.config.js الخاص بمشروعك: module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-project/' : '/' } 2- إنشاء ملف deploy.sh داخل مشروعك واستخدم الكود التالي: #!/usr/bin/env sh set -e npm run build cd dist cp index.html 404.html git init git add . git commit -m "deploy to gitpage" git push -f git@github.com:your-repo.git master:gh-pages cd - 3- إنشاء ملف .travis.yml في جذر المشروع واستخدم الكود التالي: language: node_js node_js: - "node" cache: npm script: npm run deploy deploy: provider: pages skip_cleanup: true github_token: $GITHUB_TOKEN local_dir: dist on: branch: main 4- تحديث ملف package.json ليتضمن سكربت deploy: "scripts": { "build": "vue-cli-service build", "deploy": "npm run build && cd ./dist && cp index.html 404.html" // ... السكربتات الأخرى ... }, 5- ارفع مشروعك إلى GitHub لتشغيل البناء، وانتظر بضع دقائق حتى يتم البناء.

المشكلة ليست في استخدام الشركات لتلك التقنيات أم لا، المشكلة في تعلم تطوير الويب بشكل صحيح، حيث ستجد أن بعض الشركات تستخدم Bootstrap وبعض الشركات الأخرى تستخدم Tailwind وبعضها يستخدم CSS فقط أو أي إطار خاص بتنسيقات CSS مناسب لطبيعة عمل الشركة والمشاريع التي تعمل عليها. والصحيح هو أن تتقن لغة CSS حيث ستتعلم الأساسيات أولاً والتطبيق على نماذج صغيرة ثم محاولة تنفيذ موقع كامل بتصميم مميز ومعقد نسبيًا وستتعلم الكثير من ذلك، وبخصوص التصميم فلا تشغل بالك به في البداية لكن تعلم أساسيات التصميم بشكل صحيح، وركز على تعلم CSS أولاً وهنا ستجد تصاميم للتطبيق عليها: ولا تقم بإنشاء موقع واحد وتكتفي بذلك، بل موقعين على الأقل ويا حبذا لو كان الموقع الثاني متعدد الصفحات وبه بعض التأثيرات الحركية Animations باستخدام CSS. وأنصحك بالبحث عن أساسيات التصميم بشكل صحيح من حيث إختيار الخطوط وتناسب المساحات وما هي الـ Negative space وإختيار الألوان المناسبة والـ Visual Hierarchy وهو يعني التسلسل الهرمي المرئي في تصميم الويب، وكنصيحة أخرى قم بدراسة كورس Ui/UX بسيط لتعليمك تلك الأساسيات. أو قم بالبحث عن أساسيات تصميم الويب على اليوتيوب وستحقق استفادة كبيرة. وسأوضح لك ما ٌأقصده من خلال صورتين فقط: الأمر أصبح أوضح قليلاً، صحيح؟ وأنصحك بقراءة التالي: وبإختصار ضع قاعدة دائمًا أُثناء تعلمك للبرمجة، ركز على تعلم اللغات الأساسيات الخاصة بمجالك، ولا تصب تركيزك أبدًا على تعلم التقنيات مثل Bootstrap وtailwind ففهمك للغة الخاصة بتلك التقنيات سيؤهلك للعمل بأي إطار أو مكتبة، وأيضًا حل المشاكل التي تواجهك بسهولة وتخصيص تصميمك كما تريد. وكل فترة ستجد تقنيات جديدة على الساحة فماذا لو تم الاستغناء عن استخدام Bootstrap مثلاً؟ التقنيات تم تطويرها لتسريع عملية تطوير المواقع، وكل مكتبة وإطار له استخدام مناسب، وبالطبع سيتعين تعلم أحد تلك الإطارات، ولتفهم ما أقصد أنصحك بمشاهدة الفيديو التالي: وأيضًا بخصوص هل الدورة كافية أم عليك بقراءة التالي:

رسالة ألخطأ تعني فشل عملية التثبيت وعدم قدرة على بناء الـ wheels الخاصة بالمكتبة، حاول القيام بالتالي لحل المشكلة: أولاً حاول تنفيذ الأمر التالي: pip install setuptools wheel ثم قم بالتجربة مرة أخرى وإذا استمرت المشكلة عليك بالخطوات التالية: 1- تثبيت gcc وpython-dev وlibffi-dev وlibssl-dev وbuild-essential في نظامك قبل المحاولة مرة أخرى. 2- تحديث pip و setuptools إلى أحدث إصداراتها باستخدام الأمر التالي: pip install --upgrade pip setuptools 3- تثبيت جميع متطلبات النظام اللازمة لـ pysqlcipher3، مثل OpenSSL و SQLite، عن طريق التالي: pip install libssl-dev libsqlite3-dev 4- ربما هناك تداخلات بين المكتبات المثبتة في النظام الأساسي والمكتبات التي تحاول تثبيتها، فعليك باستخدام بيئة افتراضية مثل virtualenv لتثبيت pysqlcipher3 وتجربتها داخل بيئة معزولة.

هل تقصد عند الضغط على زر Run لا يتم تشغيل الكود؟ ومن الصعب تحديد السبب بدون توضيح ما الذي يحدث بالضبط، وربما السبب هو وجود أكثر واجهة منفذ أوامر Terminal مفتوح في نفس الوقت بداخل VScode لذلك تأكد من وجود واجهة واحدة فقط وغلق بقية الواجهات بالضغط على أيقونة سلة المهملات عن الوقوف على الواجهة كالتالي: وحاول أيضًا تحديث محرر VScode من خلال الضغط على Help بالأعلى ثم اختر منها check for updates. وإذا استمرت المشكلة، قم بحذف المحرر تمامًا ثم قم بتثبيت آخر إصدار من الرابط التالي: https://code.visualstudio.com/download

الأسئلة الإختبارية لا يتم الإجابة عليها ولكن سأوضح لك الخطوات العامة لتنفيذ المطلوب منك، وتستطيع توفير الكود وطرح المشكلة التي تواجهك لمساعدتك. ولكن أنت لم توضح اللغة المطلوب تنفيذ البرنامج بها، وسأشرح لك من خلال بايثون لكونها سهلة الفهم. في البداية عليك تعريف الصنف (Class) باسم "Student"، باستخدام دالة __init__ لتهيئة الكائن الطالب بالمعلومات الأساسية مثل الاسم والرقم الجامعي وقائمة الدرجات، كالتالي: class Student: def __init__(self, name, id): self.name = name self.id = id self.grades = [] بعد ذلك، ستحتاج إلى دالة تسمح لك بإضافة درجة جديدة إلى قائمة الدرجات، وستقوم بتعريف دالة بسيطة باسم add_grade تستقبل درجة وتضيفها إلى القائمة. ولحساب المعدل، تحتاج إلى دالة تقوم بجمع جميع الدرجات وتقسيمها على عددها، وذلك بتعريف دالة جديدة باسم calculate_average تقوم بهذا العمل. أخيرًا، تعريف دالة display_info التي تطبع معلومات الطالب بما في ذلك الاسم والرقم الجامعي وقائمة الدرجات والمعدل. والآن بعد تعريف الصنف، تستطيع إنشاء كائن جديد من الصنف واستخدام الدوال المعرفة فيه، مثل إنشاء طالب جديد باسم "أحمد" ورقم جامعي 12345 ونضيف بعض الدرجات له. في النهاية، استدعي دالة display_info لطباعة معلومات الطالب بما في ذلك قائمة الدرجات والمعدل.

بخصوص التصميم، فعليك باستخدام البرامج الخاصة بتصميم واجهة المستخدم مثل Adobe Photoshop وAdobe XD وSketch ولكن الأفضل والأشهر حاليًا هي منصة Figma. وإذا كنت فهمت سؤالك بشكل صحيح، فأنت تريد عرض القالب ليتم بيعه، صحيح؟ هناك منصات شهيرة لبيع قوالب وورد بريس ومنها Themeforest وقد تم النقاش حول ذلك من قبل هنا: تجربتي مع Themeforest ونصائح لمن يريدون البيع فيه كيف أبيع أول Template على Themeforest وبخصوص باقي الأسئلة فعليك بتعلم لغة PHP ثم وورد بريس وستعرف الإجابة بنفسك، ويوجد في أكاديمية حسوب دورة تطوير تطبيقات الويب باستخدام لغة PHP ويتم فيها شرح PHP وإطار لارافيل ثم وورد بريس وأيضًا هناك شرح لـ woocommerce.

عليك بالدخول على لوحة التحكم في حسابك على الاستضافة، من خلال التوجه إلى My products بعد تسجيل الدخول لحسابك، وستجد خيار بالأسفل باسم Web Hosting، قم بالضغط عليه وستجد خيار باسم Manage. بعد ذلك ستجد خيار باسم Cpanel admin وسيتم توجيهك إلى لوحة التحكم الخاصة بـ Cpanel. وإذا أردت تغيير الباسورد وكلمة المرور ففي لوحة التحكم الخاصة بحسابك التي تظهر لك عند الضغط على Manage ستجد قسم باسم Settings وبه تبويب Account وبه بيانات تسجيل الدخول إلىCpanel وتستطيع تغييرها أو نسخها كالتالي:

شبكة توزيع المحتوى (Content Delivery Network أو CDN) هي خدمة تهدف إلى توفير نسخ من المحتوى الثابت، مثل ملفات JavaScript وCSS والصور، وتخزينها على خوادم متعددة موزعة جغرافيًا حول العالم. وذلك يساعد على تحسين سرعة تحميل المحتوى وأداء الموقع. بالنسبة للـ HTTPS، فهو بروتوكول آمن يستخدم لتشفير الاتصال بين المتصفح والخادم الذي يستضيف الموقع، ويستخدم الـ HTTPS لتأمين نقل البيانات وحماية خصوصية المستخدمين وسلامة المعلومات المرسلة والمستقبلة. بالنسبة لمزودي خدمات CDN وHTTPS، هناك العديد من الشركات المتخصصة في توفير خدمات CDN عبر HTTPS. من بين أشهرها: Cloudflare: يعتبر Cloudflare واحدًا من أبرز مزودي خدمات CDN ويدعم HTTPS بشكل مجاني وسهل الاستخدام. Akamai: يعتبر Akamai من أكبر مزودي خدمات CDN في العالم ويدعم HTTPS بشكل شامل. Amazon CloudFront: يوفر Amazon CloudFront خدمة CDN قوية ويدعم HTTPS بشكل متكامل، وهو جزء من خدمات الحوسبة السحابية في أمازون (Amazon Web Services). هناك أيضًا مزودي خدمات CDN آخرين مثل Fastly وMaxCDN وغيرهم. والمواقع التي توفر لك روابط المكتبات تعتمد على مزودي الخدمة السابق ذكرهم. وبخصوص المواقع التي توفر مكتبات عن طريق CDN فهي: 1- cdnjs يوفر مكتبة مفتوحة المصدر تضم العديد من الإصدارات والمكتبات المختلفة بما في ذلك jQuery وغيرها. 2- jsDelivr يقدم خدمة CDN سريعة وموثوقة للعديد من المكتبات بما في ذلك jQuery وBootstrap وVue.js وAngular والعديد من الإصدارات الأخرى. 3- Google Hosted Libraries يوفر خدمة CDN مدعومة من قبل جوجل تتضمن مكتبات مشهورة مثل jQuery وAngularJS وFont Awesome وغيرها. 4- Microsoft Ajax Content Delivery Network توفر مايكروسوفت خدمة CDN لمكتباتها الشهيرة مثل jQuery وBootstrap وSignalR وغيرها. 5- UNPKG يقدم خدمة CDN لمكتبات npm مثل React وVue.js وAngular والعديد من الإضافات الأخرى. 6- cdnjs.cloudflare يتيح لك الوصول إلى مجموعة واسعة من المكتبات والإطارات مثل jQuery وReact وBootstrap وVue.js وغيرها. 7- Staticfile CDN يوفر خدمة CDN للعديد من المكتبات والموارد المفتوحة المصدر مثل jQuery وBootstrap وFont Awesome وغيرها. 8- Yandex CDN يقدم خدمة CDN لمكتبات Yandex مثل Yandex Maps وYandex Metrika وغيرها. وبخصوص الأفضلية بين تحميل المكتبة أو استخدام CDN فقد تم شرح ذلك هنا:

عليك بالتأكد من أنك قمت بالتالي: الخطوة 1: إنشاء خادم Next.js مخصص قم بإنشاء ملف بالاسم "server.js" في المجلد الرئيسي لمشروعك. وضع الكود التالي في الملف "server.js": // server.js const { createServer } = require('http'); const { parse } = require('url'); const next = require('next'); const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev }); const handle = app.getRequestHandler(); app.prepare().then(() => { createServer((req, res) => { const parsedUrl = parse(req.url, true); handle(req, res, parsedUrl); }).listen(3000, (err) => { if (err) throw err; console.log('> Ready on http://localhost:3000'); }); }); أو قم بقراءة الدليل الرسمي Next JS guide لتعرف ما هي الإعدادات المناسبة لمشروعك. الخطوة 2: تعديل ملف package.json عليك بتعديل ملف package.json في مشروع Next.js الخاص بك. ثم تعديل سكريبت البدء (start) ليشير إلى "node server.js" بدلاً من "next start". وتأكد من تعيين المتغير "NODE_ENV" إلى "production". مثال على package.json المعدل: { "name": "my-next-app", "version": "1.0.0", "scripts": { "dev": "next dev", "build": "next build", "start": "NODE_ENV=production node server.js" }, "dependencies": { "next": "^12.0.1", "react": "^17.0.2", "react-dom": "^17.0.2" } } الخطوة 3: بناء تطبيق Next.js قم بتشغيل الأمر التالي في وحدة التحكم (Terminal) لبناء تطبيق Next.js: npm run build وانتظر حتى تنتهي عملية البناء. الخطوة 4: رفع الملفات إلى cPanel قم بفتح مجلد مشروع Next.js الخاص بك على جهاز الكمبيوتر. حدد جميع الملفات والمجلدات باستثناء المجلد "node_modules" والملفات ".git" و"README.md" و".gitignore". أنشئ ملف ZIP باستخدام الملفات المحددة. الخطوة 5: رفع الملفات إلى cPanel دخول إلى cPanel الخاص بك. قم بتحميل ملف ZIP الذي أنشأته إلى المجلد الجذر لاسم النطاق الخاص بك وقم بفك الضغط عنه. الخطوة 6: إعداد تطبيق Node.js على cPanel انتقل إلى قسم البرمجيات في cPanel وانقر على "Setup Node.js App". انقر على زر "+ Create Application". قم بتكوين التطبيق Node.js كما يلي: Node.js version: حدد الإصدار الذي يتوافق مع إصدار Node.js الذي استخدمته أثناء تطوير التطبيق. Application mode: حدد "Production". Application root: اكتب المسار الذي يربط معه المجلد الجذر لمشروعك. إذا وضعت الملفات والمجلدات في مجلد "public_html"، فاكتب "/public_html". Application URL: حدد اسم النطاق الخاص بك. Application startup file: اكتب "server.js". والآن: انقر على الزر "CREATE" وانتظر حتى يتم إنشاء التطبيق. قم بالنقر على زر "STOP APP" لإيقاف التطبيق مؤقتًا. انتقل قليلاً لترى قسم "Detected configuration files"، وانقر على "Run NPM Install" لتثبيت جميع حزم Node.js المستخدمة في مشروعك. انتقل مرة أخرى للنقر على زر "START APP" لبدء التطبيق. افتح اسم النطاق الخاص بك في المستعرض وسيظهر لك تطبيق Next.js الخاص بك. وإذا ما زلت تواجهة أية مشكلة، أنصحك بالبحث عن Build and deploy Next js app on cpanel على يوتيوب وستجد شروحات توضح كيفية القيام بالأمر.

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

أولاً اسمح لي بالآتي، لا تقم أبدًا بإرسال تلك السيرة الذاتية إلى أي شركة وإلا سيتم رفضك بنسبة 100%، عليك بتعلم كيف تعرض وتسوق لنفسك من خلال سيرة ذاتية بسيطة وإحترافية، وأيضًا استخدم المواقع التي توفر لك قالب مجاني جاهز للسيرة الذاتية وأنصحك بقراءة التالي: وبخصوص كونك مؤهل للعمل على مواقع العمل الحر أم لا، فأنت لست بحاجة إلى سيرة ذاتية إطلاقًا، وببساطة كل ما تحتاجه هو كونك تستطيع تنفيذ المشاريع التي تطلب على تلك الموقع، تفقد المشاريع والمطلوب واسأل نفسك سؤالين وهما: هل أنا قادر على تنفيذ 70% من المطلوب؟ هل لدي في معرض الأعمال مشاريع أو مشروع مشابه أو مشاريع بجودة عالية وقريبة من أرض الواقع وليست مجرد نماذج للتدريب فقط؟ فإذا كانت إجابة السؤالين بنعم، فأنت جاهز إذًا عليك بتعلم كيفية تقديم عرض جيد وأنصحك بقراءة التالي: دليلك الشامل إلى العمل الحر عبر الإنترنت للمستقلين: 4 نصائح فعالة لكتابة عرض يجذب العملاء لماذا يتجاهل أصحاب المشاريع عروضك على مستقل؟ للمستقلين الجدد: كيف تبني معرض أعمالك باحترافية؟