Mustafa Suleiman

كان من المفترض دراسة دورة علوم الحاسوب في البداية، ولا مشكلة تستطيع دراستها حاليًا، والمسارات التي ستفيدك أولاً هي: مدخل إلى علوم الحاسوب (في حال تشعر أنّ مهارة المنطق البرمجي أي التفكير والتخطيط قبل كتابة الكود بحاجة إلى تحسين). قواعد البيانات إلى عالم الويب البرمجة كائنية التوجه أساسيات هندسة البرمجيات إعادة تصميم البرمجيات Refactoring الخوارزميات وبنى المعطيات أنماط التصميم

لأنها تطبق خاصية transition خاصة بها على العنصر لكي تحركه وتظهره بسلاسة عند ظهوره على الشاشة، وفي نفس الوقت، أنت لديك خاصية transition أخرى معرفة في حالة :hover بالتالي يحدث تعارض. وأبسط هو إعادة تعريف خاصية transition بالكامل داخل قاعدة :hover كالتالي: .my-box { background-color: #007bff; color: white; padding: 20px; /* ستضيف AOS خاصية transition هنا تلقائياً */ } .my-box:hover { background-color: #0056b3; transform: translateY(-10px); transition: background-color 0.3s ease, transform 0.3s ease; } أو بطريقة أخرى عليك كتابة Specificity أعلى أي أكثر تحديدًا باستهداف العنصر عندما مُطبق عليه كلاس aos-animate أيضًا وهو الخاص بمكتبة AOS، لفرض تطبيق التنسيق الخاص بك. .my-box.aos-animate:hover { background-color: #0056b3; transform: translateY(-10px); transition: all 0.3s ease-in-out; } لاحظ المُحدد .my-box.aos-animate:hover مُفصل أكثر بالتالي الأولوية الخاصة به أكبر.

فكرة المشروع مناسبة لتوظيف ما تعلمته، وبالأخص كيفية التلاعب بالـ DOM وأرى أنك استخدمت jQuery لتنفيذ المنطق البرمجي الخاص بالتفاعلية للموقع، بينما للتنسيق استخدمت بوتستراب مع تنسيقات CSS بسيطة. ولا مشكلة في ذلك، المهم هو اكتساب القدرة على التفكير بشكل منطقي وأيضًا ربط المفاهيم التي تعلمتها مع بعضها البعض وتوظيفها لإنشاء المشروع، فتلك هي الجزئية الصعبة. بعدها يجب إعادة إنشاء نفس المشروع ولكن من خلال اللغات الأساسية فقط HTML, CSS, JS أي بدون استخدام مكتبات سواء jQuery أو بوتستراب، فتلك التقنيات مبنية على اللغات الأساسية، وأنت في مرحلة تعلم الأساسيات لذا يجب التعمق بها والممارسة العملية من خلالها. أي نقوم بالتدرب على الأساسيات ثم ننتقل للمكتبات، فالأساسيات هي الثابتة والدائمة وتؤهلك لحل المشاكل التي ستواجهك واستيعاب ما يحدث في الخلفية وأيضًا اكتساب القدرة على تعلم أي تقنيات أخرى وأقصد المكتبات وإطارات العمل المختلفة. وخلال الدورة قم بتوظيف ما تعلمته لتطوير ذلك المشروع ولكن من خلال HTML, CSS, JS، واستخدام بوتستراب وjQuery في مشاريع الدورة لأننا نقوم بالتطوير من خلالها لتسريع عملية التطوير. أرجو قراءة التالي: أيضًا دراسة أساسيات التصميم:

الدورات بالأكاديمية تتعلق بالبرمجة وما حولها فقط، بينما المجال الهندسي خارج نطاق إهتمام الأكاديمية، لذا في حال لديك خبرة برمجية وتريد الإنضمام كمدرب أي محاضر فستجد تفصيل هنا: درّب معنا

بشكل مختصر جدًا، React:مكتبةلبناء واجهات المستخدم وبحاجة إلى مكتبات أخرى لبناء تطبيق الويب، أي تترك لك حرية اختيار كل شيء آخر مثل التوجيه، جلب البيانات، وخلافه، وكتوضيح أنت تحتاج للتوجيه مكتبة react-router-dom. ومن حيث الـ SEO فتلك نقطة ضعف، لأنّ محركات البحث ترى صفحة HTML فارغة في البداية، وذلك يجعل الأرشفة صعبة. بينما Next.js إطار عمل أي Framework مبني فوق رياكت لبناء تطبيقات كاملة وجاهزة للإنتاج بشكل مباشر، بمعنى أنه يحتوي على الأدوات اللازمة لبناء المشروع بما في ذلك الواجهة الأمامية والخلفية معًا، مع بنية محددة وقواعد تنظيمية، ويوفر حلولاً جاهزة للمشاكل الشائعة. أي مثلاً به نظام توجيه مدمج يعتمد على الملفات، فبمجرد إنشاء ملف في مجلد pagesأو app في الإصدارات الحديثة، يصبح لديك رابط Route جاهز. ومن حيث الـ SEO فهو يوفر لحل لمشكلة React من خلال دوال خاصة لجلب البيانات على الخادم قبل إرسال الصفحة للمتصفح، مثل getServerSideProps للـ SSR و getStaticProps للـ SSG بالتالي البيانات متاحة فورًا عند تحميل الصفحة.

ستجد أسفل فيديو الدرس في نهاية الصفحة صندوق تعليقات كما هنا، أرجو طرح الأسئلة أسفل الدرس وليس هنا في قسم أسئلة البرمجة حيث نطرح الأسئلة العامة الغير متعلقة بمحتوى الدورة أو الدرس، وذلك لمساعدتك بشكل أفضل. عامًة lambda عبارة عن طريقة لإنشاء دالة صغيرة ومؤقتة وبدون اسم، أي فكر فيها كأنها اختصار أو لقب سريع لدالة بسيطة لا تحتاج إلى تعريفها بشكل رسمي باستخدام الكلمة def. فبالشكل التقليدي نقوم بتعريف دالة لها اسم وليكن add، وتستقبل معاملات (x, y)، وتقوم بعملية ثم تعيد النتيجة من خلال return. def add(x, y): return x + y result = add(5, 3) print(result) ولكن نستطيع إنشاء نفس الوظيفة في سطر واحد وبدون اسم من خلال lambda: add_lambda = lambda x, y: x + y result = add_lambda(5, 3) print(result) لاحظ في البداية كتبت كلمة lambda لتعريفها ثم كتبت أسماء المعاملات التي أريد تمريرها وهما x, y وبعد ذلك كتبت المنطق بعد رمز : أي المنطق الذي نريد تنفيذه وهو جمع القيم الخاصة بالمعاملات. وقمت بتعيينها لمتغير للتوضيح فقط، لكن نستطيع كتابة ذلك مباشرًة وستكون دالة مؤقتة: print((lambda x, y: x + y)(5, 3)) وأٌقصد بمؤقتة أننا لا نستطيع إعادة استدعائها من خلال متغير كما فعلت. ونادرًا ما يتم تعيين دالة lambda لمتغير، فالفرض من lambda هو استخدامها كوسيط لدوال أخرى أكبر، خاصة تلك التي تتوقع دالة كمدخل لها. كالتالي: students = [ {'name': 'أحمد', 'grade': 88}, {'name': 'سارة', 'grade': 95}, {'name': 'خالد', 'grade': 72} ] sorted_students = sorted(students, key=lambda student: student['grade']) print(sorted_students) وبدون lambda، كنا سنحتاج إلى تعريف دالة كاملة من خلال def ومثال آخر: numbers = [1, 2, 3, 4, 5] squared_numbers = list(map(lambda x: x * x, numbers)) print(squared_numbers) بينما للدوال المعقدة نستخدم def بالطبع

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

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

تطور كبير في المستوى مقارنًة بما سبق، المشروع جيد وهو متقدم وليس من السهل تنفيذه، قمت بإختبار وظائف الموقع وهي تعمل بشكل سليم والأهم هي الحالة الخاص بالتطبيق عند إضافة المنتجات وحذفها وهكذا، وتعمل بشكل سليم بعد إعادة تحديث الصفحة مثل حالة سلة المشتريات، حيث أرى أنك قد استخدمت createContext وذلك جيد جدًا فستتعلم من استخدامه الأساسيات قبل الإنتقال لاستخدام مكتبة مثل zustand وغيرها. وأحسنت في إضافة ميزة عرض نتائج البحث فور كتابة بضعة حروف، وذلك من خلال مكتبة منطق بسيط بتنفيذ استدعاء للـ API بجانب debounce، وفي حال تم كتابة حرفين مثلاً PO والضغط على زر البحث يتم عرض جميع المنتجات، لذا حاول معالجة تلك الحالة. أيضًا استخدامك لـ API خارجي بدلاً من ملف JSON أمر جيد، حيث استخدمت dummyjson.com. بالنسبة للتجاوبية فلا مشكلة في ذلك، الموقع يعمل بشكل سليم على مقاس الهاتف أي أصغر مقاس للشاشة. ومن حيث التصميم، فهو بسيط وسهل الاستخدام، لكن هناك أفضل، تستطيع إلقاء نظرة هنا لتعلم أساسيات التصميم: بعد تحسين التصميم، قم بتعلم كيفية تضمين بوابة دفع في مشروعك مثل stripe

ليست تلك هي الطريقة الصحيحة والعملية، في الواقع العملي الأمر يتم إما عن طريق SaaS أي تطوير منصة لتوفير خدمة من خلال موقع بحيث ستقوم بتثبيت Odoo على خادم سحابي VPS والمتوفر من خلال DigitalOcean, Vultr, AWS وغيرهم، ثم يستخدم العملاء المنصة. والبديل الثاني هو الإعتماد على Docker وتلك تقنية تقوم بتغليف التطبيقات وتبعياتها في حاويات معزولة، بمعنى ستقوم بإنشاء ملف docker-compose.yml يحدد كيفية تشغيل Odoo و PostgreSQL معًا، والعميل سيحتاج فقط إلى تثبيت برنامج Docker Desktop ثم يقوم بتشغيل مشروعك بأمر واحد بسيط. والبيئة ستعمل بنفس الطريقة على أي جهاز مثبت عليه Docker، لكن ذلك يحتاج إلى خبرة تقنية من قبل العميل، لذا الحل الأول هو الأفضل. بخصوص طريقتك حاليًا يوجد مشكلتان، الخطأ الأول يحدث أولًا UnicodeEncodeError: 'charmap' codec can't encode character '\u010d'، فيفشل Odoo فى إنشاء جداول النظام ثم تُعاد المحاولة فيجد الجدول مفقودًا UnicodeEncodeError: 'charmap' codec can't encode character '\u010d'. بالتالي مجلد البيانات الذى أنشأته لـ PostgreSQL مهيَّأ بترميز WIN1252/CP1250 وهو الترميز الافتراضى على Windows في حال لم تُحدد شيئًا عند تهيئة قاعدة البيانات. وOdoo يحتوى على أسماء وحدات فيها الحرف č وغيره من Unicode، وتلك الأحرف لا يمكن تمثيلها داخل WIN1252، فيفشل الإدراج فى أول جدول ir_module_module. أي قاعدة البيانات نفسها ليست بترميز UTF-8، ولذلك تنهار عملية التهيئة، لذا عليك بالتالي: أوقف PostgreSQL إن كان يعمل من خلال تنفيذ الأمر التالي في CMD وليس powershell لكن قم بتشغيله بصلاحيات administrator: pg_ctl -D data stop -m fast ثم أعد تسمية المجلد data القديم أو احذفه بتفيذ التالي في المسار الذي به مجلد data في المشروع: ren data data_old -- ثم أنشئ مجلد data جديد مهيأ بترميز UTF-8 من خلال تنفيذ: set LANG=en_US.UTF-8 ثم: bin\initdb.exe ^ -D data ^ -U odoo ^ -A md5 -W odoo ^ -E UTF8 ^ --locale=C ثم عليك إنشاء قاعدة بيانات Odoo جديدة في Postgres. وللعلم لو أردت أتمتة الأمر لعميلك، فقم بتضمين أوامر initdb و pg_ctl في ملف ‎start.bat‎ بحيث ينفذ التهيئة تلقائيًّا إذا لم يجد ‎PG_VERSION‎ داخل ‎data‎.

المقال جيد، وذكرت معظم العوامل الحقيقية المؤثرة في السعر، وما يحتاج إلى توضيح هو التفرقة بين تطوير Native (Swift/Kotlin) و Cross-platform (Flutter/React Native) وتأثير ذلك على التكلفة. أيضًا توضيح تكلفة الاستضافة، ورسوم المتاجر وهي 99 دولار لـ App Store سنوياً بجانب عمولة 15–30٪ على المبيعات وGooglePlay بتكلفة 25 مرة واحدة فقط. أيضًا توضيح رحلة تطوير التطبيق من الفكرة إلى الإطلاق، ولو استطعت قم بتطوير أداة لحساب تكلفة التطبيق من خلال بعض المُدخلات وذلك بشكل تقديري، فذلك من شأنه خلق Topic Cluster قوي ويُعزز Authority موقعك عند جوجل. وقم بوضع CTA ثابتاً في نهاية المقال، أي زر احصل على عرض سعر مجاني خلال 24 ساعة، مع تجربة استخدام أزرار واتساب أو نموذج الاتصال لتقليل العوائق أو التعقيدات التي تمنع المستخدم من إكمال الإجراء المطلوب. وأدخل كلمات LSI المذكورة على الأقل 4 إلى 5 مرات.

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

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

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

في مكون CartContext.jsx هنا: return savedCart ? JSON.parse(savedCart) : [] المشكلة في JSON.parse() حيث تقرأ قيمة ليست بصيغة JSON، وتلك القيمة تبدأ بحرف u، وغالبًا هي كلمة undefined. تفقد القيم التي في localStorage وسبب المشكلة في الحفظ، أو قم بمعالجة الأخطاء الواردة أثناء جلب تلك القيمة بإرجاع مصفوفة فارغة: const [cartItems, setCartItems] = useState(() => { try { const savedCart = localStorage.getItem('cartItems'); return savedCart ? JSON.parse(savedCart) : []; } catch (error) { console.error("Failed to parse cart items from localStorage", error); return []; } });

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

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

في ملف main.js في دالة generateAPIResponse قمت هنا: div.classList.remove("load"); بحذف كلاس load بينما الكلاس الذي يجب حذفه هو loading لكونه يقوم بتطبيق تنسيق display: none أي إخفاء العنصر ولا يتم عرض المحادثة في الصفحة. div.classList.remove("loading");

المسار يحتوي على shoping%20store، والرمز %20 هو الترميز الخاص بالمسافة في الروابط، والعديد من أدوات البناء مثل Rollup لا تتعامل بشكل جيد مع المسافات في مسارات الملفات، لذا عليك إعادة تسمية المجلد لإزالة المسافة وضع مكانها شرطة سفلية _ أيضًا قم بحذف مجلد node_modules وملف package-lock.json ثم إعادة تثبيت الحزم: npm i ثم تحديث الحزم: npm update ولو استمر الخطأ قم بتجربة: npm cache clean --force npm i

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

Render ومثيلاتها Heroku، Vercel، Fly.io تستخدم Ephemeral Filesystem أي نظام ملفات مؤقت، بالتالي لا يمكن الكتابة على القرص بشكل دائم، الملفات المؤقتة تُحذف في أي وقت وليس لديك صلاحيات الكتابة في بعض المجلدات. أبسط حل هو استخدام Memory Storage في Multer حيث لا يتم إنشاء ملف على القرص إطلاقاً، بل يبقى كل شيء فى الـ RAM، يناسب أغلب الاستضافات المجانية. أو الرفع المباشر على cloudinary عن طريق Signed Upload.

لا حاجة إليها بالنسبة لك، وحتى في الشركات لا يتم استخدامها إلا في حالات محددة فقط بسبب التعقيد في عملية تطوير GraphQL، أي لو لديك واجهة خلفية سيتم استخدامها من قبل تطبيقات مختلفة أي منصات مختلفة Web و Mobile و Smart TV، وبيانات معقدة مع علاقات كثيرة، أيضًا فرق كبيرة تعمل على نفس الـ API، وعند الحاجة لتقليل استهلاك البيانات للموبايل مثلاً. لكن في أغلب الأحوال ما ستقوم به هو مشروع بسيط أو متوسط، وستحتاج إلى عمليات CRUD أساسية فقط.

الفكرة أنّ الروابط لها قواعد صارمة، وبعض الأحرف لها معنى خاص في الروابط، وتسمى الأحرف المحجوزة، ومنها: & : للفصل بين متغيرات متعددة في الرابط name=ali&city=riyadh? ? : لبدء جزء الاستعلام في الرابط. / : للفصل بين أجزاء المسار. # : للإشارة إلى جزء معين في الصفحة. (المسافة): غير مسموح بها في الروابط. +, :, @ وغيرها الكثير ستحدث مشكلة لو أردت إرسال نص يحتوي على أحد تلك الأحرف كقيمة في رابط كالتالي: https://test.com/search?q=C++ & Java المتصفح أو الخادم سيفسر الرابط بشكل خاطئ، وسيعتقد أن المتغير q قيمته C++ وأن Java هو متغير آخر بدون اسم، لأن حرف & يفصل بين المتغيرات. لذا encodeURIComponent تعمل على حل المشكلة عن طريق تحويل أو ترميز كل الأحرف الخاصة والغير آمنة إلى صيغة خاصة تسمى الترميز المئوي وهي تبدأ بعلامة % متبوعة برقمين ست عشريين. فنفس الرابط السابق سيبدوا كالتالي بعد الترميز: https://test.com/search?q=C%2B%2B%20%26%20Java وعندما يستقبل الخادم الرابط، سيعرف كيف يفك ترميز القيمة C%2B%2B%20%26%20Java ليعيدها إلى شكلها الأصلي C++ & Java، وبذلك يتم البحث بشكل صحيح.

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

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