محمد سعد شحرور

يمكنك تحميل صفحة مختلفة تحوي الترجمة للغة أخرى عند الضغط على الزر الذي تريد، وهي طريقة مستخدمة بكثرة في المواقع الالكترونية بشكل عام. أي أن الرابط الحالي من الممكن أن يكون www.example.com/en للصفحة باللغة الانكليزية مثلا، والرابط التالي للغة العربية www.example.com/ar ونستخدم الزر في هذه الحالة للتنقل فقط بين الصفحتين الانكليزية والعربية: <button onclick="changeURL()">Change URL</button> <script> function changeURL() { // Change the URL to a new page window.location.href = 'https://www.example.com/ar'; } </script>

في الغالب انت تقصد بخاصية اكمال الكود التلقائي ما يدعى ب intellisence، وهي خاصية مدعومة في اللغات JavaScript, TypeScript, JSON, HTML, CSS, SCSS بحسب الموقع الرسمي ل vs code. كما يمكنك الاستفادة من هذه الخاصية للغات أخرى عند تحميلك لل extenstions الخاصة بهذه اللغات من الشريط اليميني في قسم ال extensions. وأخيرا، عندما تريد استخدام هذه الخاصية، ف ان التطبيق يكمل لك الكود تلقائيا، واذا لم يقم بذلك، ف تستطيع الضغط على ctrl + space لتظهر الخيارات المتاحة للاكمال (في حال كانت اللغة تدعم الاكمال التلقائي). اذا كان ماتقصده هو الاكمال التلقائي المولد بالذكاء الاصطناعي، ف ماتريده هو github copilot extension، وهي extension تستطيع تحميلها من ذات المكان، ولكنها مدفوعة. يمكنك معرفة المزيد عنها من هنا.

هناك العديد من الأمور الممكن تنفيذها حتى يصبح الموقع أسرع وأفضل، وهذه هي أبرزها: الانتباه لحجم ملفات ال HTML, CSS, JS والصور ونوع الخطوط ومحاولة تقليل حجمها لتسهل تحميلها، وذلك عن طريق استخدام كود نظيف بدون مساحات فارغة كثيرة، وعن طريق استخدام أدوات لتقليل حجم الصور مثل ImageOptim, TinyPNG. استخدام ما يدعى ال cache في الموقع، مما يتيح تخزين بعض البيانات في متصفح المستخدم، مثل بعض المحتوى أو الصور أو الملفات التي لاتحتاج الى تحديث طوال الوقت، والذي يمنع التحميل المتكرر وبالتالي سرعة أكبر للموقع. استخدام التوابع غير المتزامنة (async) في جافا سكريبت، والذي يسمح لهذه التوابع بالعمل في الخلفية وعدم انتظار المتصفح لانتهاء تحميلها قبل تحميل الصفحة بالكامل. استخدام مايعرف ب Server Side Rendering و Static Side Generation لتحميل صفحات الويب على السيرفر وارسالها الى المستخدم، عوضا عن تحميلها على متصفح المستخدم لتوفير الوقت وضمان السرعة.

اطار العمل Next JS مصمم كاطار عمل للواجهات الأمامية، وهو مبني على React ببعض الاضافات مثل ال SEO وال Routing وغيرها. هذا كان قبل الاصدار Next JS 13 التي أصدرت في أواخر 2022، حيث أصبحت تستطيع بهذا الاصدار أن تستخدم اطار العمل ذاته لتطوير الواجهات الخلفية وتطوير API و middleware وغيرها من المفاهيم الخاصة بتطوير الواجهات الخلفية. يبقى الفرق بينها وبين Node JS مثلا أن Next JS 13 تعتمد على مايسمى ب serverless architecture، أما Node JS فهي تعتمد على server architecture. بكل الأحوال، يمكنك استخدام المكتبة لتطوير الواجهة الأمامية أو الخلفية حسب ماتحب، وبعد زيارتك لهذه الصفحة لتوضيح الفرق بينها وبين اطر العمل الأخرى في تطوير الواجهات الخلفية.

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

المشكلة التي تواجهك لاتتعلق بتضمين ال components داخل بعضها البعض، بل المشكلة هي عدم التمييز الكامل بين ال server component و ال client component. ال server component هو كل عنصر (بشكل افتراضي) لايحوي على 'use client' في البداية، وهو العنصر المسؤول عن جلب البيانات أو العنصر الذي يفضل تحميله على ال server عوضا عن ال client، مما يعني أنه لايمكن لهذا العنصر أن يملك أي تفاعل بين المستخدم والمتصفح. ال client component هو العنصر الذي يحوي تفاعل بين المستخدم والمتصفح، مثل الاحداث والنقرات وما الى ذلك، والأهم أن جميع ال hooks مثل ال useState, useRef, useMemo, useEffect لايمكن استخدامها الا في ال client component، وهذا هو سبب الخطأ في عنصر InitView. الحل هو عند استخدام ال useEffect، عليك أن تحول العنصر من server component الى client component وكتابة 'use client' في البداية لأن هذه الدالة هي hook، وهذه هي القوانين الجديدة في Next Js 13 ومابعد.

بالاضافة الى ماقاله صديقي حسام، فان تعلم EcmaScript 2015 او مايعرف ب ES6 يؤثر بشكل كبير على الوقت المطلوب لتعلم React. يعود ذلك الى الاستخدام الكثير لعدد من الافكار التي تم اضافتها الى لغة Javascript في هذا الاصدار في المكتبة React. أبرز هذه الافكار في حال أحببت الاطلاع عليها: مايدعى بال arrow function التي تسهل كتابة التوابع العادية: // Traditional function function add(x, y) { return x + y; } // Arrow function const add = (x, y) => x + y; طرق استخراج البيانات بسرعة (data destructuring): const [first, second] = [1, 2]; // Object destructuring const { name, age } = { name: 'John', age: 30 }; توابع مثل map و filter التي تستخدم في المرور على كافة عناصر مصفوفة: // map: const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map((num) => num * num); console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25] // filter: const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter((num) => num % 2 === 0); console.log(evenNumbers); // Output: [2, 4]

يجب عليك ادراج ملف layout.tsx في كل مسار وعدم ادراج العناصر <html> أو <body> داخل ال component. هذا مثال بسيط لصفحة layout.tsx داخل المسار app/dashboard/layout.tsx: export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return <section>{children}</section> } كما يمكنك رؤية المزيد من التفاصيل هنا من ال documentation الخاص ب next js.

هذا تفصيل للكود: التابع array(): لانشاء مصفوفة في مكتبة numpy. المتحول الأول هو ('x', 1, 2), ('y', 3, 4), ('z', 7, 5)، وهو يمثل بيانات المصفوفة، حيث كل tuple هو صف في المصفوفة. أي أن المصفوفة تمثل بهذا الشكل: [ [x 1 2] [y 3 4] [z 7 5] ] المتحول الثاني dtype=[('name','U5'),('number','i2'),('value','f4')] يعني أن الصف الأول يسمى name وتشفيره من النوع U5، والصف الثاني يسمى number وتشفيره i2، والصف الثالث اسمه value وتشفيره f4. أي أنه يمكنك الوصول الى الصف الأول باستخدام: a['name'] وهكذا للصفوف الأخرى

بالاضافة الى ماقاله مصطفى، فان مطور الباك ايند يحتاج أحيانا لانشاء ملف على postman يوضح ماهية واجهة تطوير التطبيقات (API) ومتغيراتها وال routes الخاصة بها ليتيح لمطور الفرونت ايند فهم ال API والتعامل معه دون تواصل مباشر مع مطور الباك ايند، وذلك لأن الربط بين الفرونت ايند والباك ايند يكون عبر ال API لجلب بيانات او اضافتها او تعديلها او حذفها.

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

مجال ال Data Analytics Engineering مجال مطلوب قائم على تطبيق المفاهيم الهندسية لتحليل البيانات واستخراج أكبر معلومات ومعنى ممكن منها، حيث يتضمن هذا المجال معالجة البيانات قبل تحليلها، وقد يتداخل مع تعلم الالة وخورازمياتها. أما المهارات المطلوبة هي: الرياضيات والاحصاء: تطوير خلفية متينة في الرياضيات والاحصاء ضروري لأن المجال قائم على تطبيق مفاهيم الجبر والاحتمالات والاحصاء وغيرها. لغات البرمجة: لتطبيق مفاهيم الرياضيات فانك تحتاج الى لغة برمجة، مثل Python او R، والمفضلة هي Python لسهولتها ولتنوع مكاتبها وشهرتها. قواعد البيانات: مثل SQL لتخزين البيانات والتعامل معها. تعلم الالة: فهم أساسيات تعلم الالة مفيد في هذا المجال، وخاصة الأفكار المتعلقة ب regression, classification, clustering, ensemble methods. كما قد يلزم أيضا التعامل مع ال Big Data وأدواتها مثل Apache Hadoop، وقد يلزم أيضا تعلم Git.

الكود الخاص بك لن يعمل بشكل صحيح، وذلك لأنه لديك أخطاء عند استخدامك التابع updateOne، وهذا هو الكود الصحيح: User.updateOne({_id: req.user._id}, {$set: {img_uri: req.file.path}}) اخطاؤك تكمن في استخدام user عوضا عن User، وذلك خاطئ لأننا نريد التعديل على ال User الذي هو نفسه ال model، وليس التعديل على ال user (بحرف صغير). والخطأ الثاني هو أنه عند البحث على المستخدم الذي نريده، علينا ادراج ال id الخاص به، أما أنت فقد أدرجت ال user نفسه الذي بحثت عنه مقابل خانة ال id، وهذا خاطئ لأن ال user الذي بحثت عنه يحتوي على عدة خواص ومنها ال id. لذلك فان الكود سيعمل بعد التعديل والتأكد من وجود ال file, user, img_uri

بالاضافة الى ماقاله صديقي عبد الباسط، فان ال unit testing هو نوع واحد فقط من الاختبار، ويوجد أنواع أخرى كثيرة يمكن تطبيقها بلغة جافا سكريبت او غيرها: Unit testing: فحص يتم اجراؤه على الوحدات بشكل منفصل، ويتم تنفيذه بواسطة Jest أو Jasmine Integration testing: فحص يتم اجراؤه على الوحدات أو المكونات وكيف تعمل أو تتفاعل مع بعضها البعض، حيث تستخدم اطارات العمل نفسها هنا: Jest و Jasmine. End to End testing: الفحص الذي يتم اجراؤه لفحص سير التطبيق ككل عن طريق فحص تفاعل كل المكونات سويا لاعطاء تجربة المستخدم المرادة، وذلك عن طريق اطار العمل Selenium أو Cypress. مع العلم أنه هناك أنواع أخرى أيضا لل testing في لغة الجافاسكريبت وغيرها، ولكن هذه أشهرها فقط.

الطريقتين متشابهين الى حد ما، ولكن مع ذلك فان بنية المشروع الذي يحوي على express كواجهة خلفية، و react كواجهة أمامية يمكنك رؤيته هنا بشكل مبسط وسهل. كما يمكنك رؤية مجلد ال api الذي ذكرته والملفات التي بداخله مثل package.json و package-lock.json الضرورية للرفع على vercel. بالتوفيق.