Mustafa Suleiman

ما المقصود بحفظ بياناتك؟ لحفظ الكود في ملف ستقوم بإنشاء ملف على سطح المكتب بالضغط في أي مكان فارغ بزر الفأرة الأيمن ثم اختر new ثم text document ثم أعد تسمية ذلك الملف بالضغط عليه بزر الفأرة الأيمن ثم اختر rename وأعد تسميته إلى app.py المهم هو صيغة الملف py. ولا مشكلة في اختيار أي اسم. بعد ذلك افتح الملف في محرر الأكواد vscode وقم بكتابة الكود الذي تريده واضغط على CTRL + S لحفظ الكود في الملف وسيبقى به وتستطيع العودة إليه في أي وقت.

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

اللغات المتاحة هي: بايثون جافاسكريبت و HTML, CSS PHP Ruby Godot script وتستطيع تفقد الدورات المتاحة هنا: دورات تعليمية

تقصد في جافاسكريبت بدون React؟ تستطيع ذلك لا مشكلة، نعم، ولكن ليس مباشرة على عناصر DOM لأنها ليست arrays بشكل افتراضي بل كائنات تشبه المصفوفات، حيث يجب أولاً تحويل مجموعة عناصر DOM وهم NodeList أو HTMLCollection إلى مصفوفة. بمعنى بعد قيامك بإختيار مجموعة من العناصر المحددة باستخدام querySelectorAll الذي يعيد NodeList، فتستطيع تحويلها إلى مصفوفة من خلال Array.from const items = document.querySelectorAll('.item'); const texts = Array.from(items).map(item => item.textContent); console.log(texts); أو معامل النشر spread (...) const items = document.querySelectorAll('.item'); const texts = [...items].map(item => item.textContent); console.log(texts) وللعلم في المتصفحات الحديثة، NodeList تدعم بعض دوال المصفوفات مثل forEach، ولكن ليس map.

ستجد تفصيل هنا:

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

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

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

بالطبع، لكن يجب تفهم أنّ LinkedIn يعتمد جافاسكريبت من أجل عرض المحتوى، أي الصفحة في البداية تكون عبارة عن كود HTML، ثم يتم حقن المحتوى في الـ DOM عن طريق جافاسكريبت، وذلك بسبب اعتمادها على React، كما هو مذكور هنا: https://stackshare.io/linkedin/linkedin لذا ستحتاج إلى مكتبة selenium والتي تحاكي تصفح الموقع من المتصفح، وبعد عرض المحتوى تستطيع سحب البيانات التي تريدها حسب المحددات التي اخترتها أي الكلاسات أو الـ ID أو أسماء العناصر. وستجد تفصيل هنا:

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

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

كان من المفترض دراسة دورة علوم الحاسوب في البداية، ولا مشكلة تستطيع دراستها حاليًا، والمسارات التي ستفيدك أولاً هي: مدخل إلى علوم الحاسوب (في حال تشعر أنّ مهارة المنطق البرمجي أي التفكير والتخطيط قبل كتابة الكود بحاجة إلى تحسين). قواعد البيانات إلى عالم الويب البرمجة كائنية التوجه أساسيات هندسة البرمجيات إعادة تصميم البرمجيات 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

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