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

يمكنك تحميل صفحة مختلفة تحوي الترجمة للغة أخرى عند الضغط على الزر الذي تريد، وهي طريقة مستخدمة بكثرة في المواقع الالكترونية بشكل عام. أي أن الرابط الحالي من الممكن أن يكون 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. بالتوفيق.

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

هذا مثال عام عن ذات الفكرة في الوراثة في لغة بايثون ليسهل عليك فهمها وتطبيقها في مثالك: class ClassA: def __init__(self, value): self.value = value class ClassB: # تعريف متغير يسمى مرجع سيحمل قيمة من الصنف السابق def __init__(self, class_a_instance): self.class_a_instance = class_a_instance # تعريف تابع يقوم بطباعة هذه القيمة من الضنف السابق def access_property(self): print("Value from ClassA:", self.class_a_instance.value) # انشاء مثال للصنف الأول واعطائه قيمة obj_a = ClassA(value=1) # انشاء مثال للضنف الثاني وتمرير المثال السابق اليه ليصبح الصنف الثاني قادر على الوصول الى قيمة ال 1 obj_b = ClassB(class_a_instance=obj_a) # طباعة ال 1 من الصنف الثاني بعد تمريرها من الصنف الأول obj_b.access_property()

بشكل عام، يمكنك الوصول الى خاصة ضمن class1 في class2 عن طريق انشاء مرجع في class2 تدل الى class1. أي أنه عليك انشاء مرجع لل frame2 لل frame4 للوصول الى خاصة ال df: class Frame4(customtkinter.CTkFrame): # عرف مرجع للكلاس الأول هنا def __init__(self, master, border_color, border_width, frame2_instance): super().__init__(master) self.configure(border_width=border_width, border_color=border_color) # قم بتخزين قيمة هذا المرجع self.frame2_instance = frame2_instance # باقي الكود الخاص بك بعد ذلك تعطي المرجع قيمة، وهي نسخة من ال frame2 لتستطيع الوصول الى كافة خواص ال frame2 ضمن ال frame4: frame2_instance = Frame2(master, border_color, border_width) frame4_instance = Frame4(master, border_color, border_width, frame2_instance)

هل يمكنك صديقي توضيح الأخطاء التي تواجهها بصور؟ قرأت سؤالك واطلعت على الموقع والكود ولم أجد الأخطاء التي تقصدها، كما أن ال navbar في وضعية fixed وثابت عند ال scroll بسبب ال class باسم fixed-top

يوجد عدة خطوات لفعل ذلك، أولها هو نسخ الكود الذي أدرجته داخل مجلد api منفصل عن ال api الخاص ب next js الذي هو داخل مجلد ال app. (أعتذر عن الخطأ البسيط السابق) ثانيا يجب انشاء ملف vercel.json لتوجيه الطلبات الى الباك ايند الخاص ب express. التعديل على ال scripts في ملف ال package.json لاضافة امر vercel-build. أنصح وبشدة متابعة هذا الفيديو القصير لتستطيعي ربط next مع express. بالتوفيق.

بالاضافة الى ماقاله صديقي مصطفى، فان لغة بايثون لاتمت الى لغة الجافا سكريبت بصلة في مجال تطوير الواجهات الأمامية أبدا. ان أردت الانتقال الى مجال تطوير الواجهات الخلفية أو الانتقال الى مجال ال full stack المختص بتطوير الوجهات الأمامية والخلفية معا، فان لغة البايثون هي خيار واحد من ضمن الخيارات الكثيرة المتاحة لك. بعض الخيارات التي لديك في حال أردت الانتقال الى تعلم الواجهات الخلفية هي: Python عن طريق اطر العمل Django و Flask. Javascript نفسها بواسطة البيئة Node Js. C# بواسطة ASP.Net و Entity Framework للتعامل مع قواعد البيانات. Ruby بواسطة Ruby on Rails. طبعا مجال الباك ايند أعقد من هذا ويحتاج الى قواعد بيانات من نوع SQL او NoSQL والى تقنيات أخرى للربط مع قواعد البيانات هذه، ولكن أردت التنويه الى دور ال Python في مسار الويب وان أردت دراسة مجال تطوير الواجهات الخلفية بعد تقدمك أكثر في ال HTML و CSS و Javascript ان لم ترد الاكمال في تطوير الواجهات الأمامية. وان أرد الاكمال في تطوير الواجهات الأمامية بعد اتقان هذه اللغات الخاصة بك، ف يجب عليك تعلم احدى إطارات العمل React و Vue و Angular. يمكنك رؤية مقارنة بين هذه الإطارات هنا على حسوب.

وعليكم السلام. تستطيعين نشر تطبيق Express.js على vercel، ولكن عليك ادراج الملفات داخل ال api كما يتم في next js عندا نريد أن نستخدها كواجهة برمجية خلفية للتطبيق. قومي بانشاء ملف index.js لادراج كود express داخل مجلد ال api كالمثال الاتي: const app = require('express')(); const { v4 } = require('uuid'); app.get('/api', (req, res) => { const path = `/api/item/${v4()}`; res.setHeader('Content-Type', 'text/html'); res.setHeader('Cache-Control', 's-max-age=1, stale-while-revalidate'); res.end(`Hello! Go to item: <a href="${path}">${path}</a>`); }); app.get('/api/item/:slug', (req, res) => { const { slug } = req.params; res.end(`Item: ${slug}`); }); module.exports = app; يمكنك قراءة تفاصيل أكثر من موقع شركة vercel ذاتها هنا. كما يمكنك الرفع على vps والتحكم بال backend كما تريدين وربطه مع ال frontend. أي أنه يتم تشغيل الواجهة الأمامية على port وربطه مع الواجهة الخلفية على port اخر، ولكن vercel تختصر كل هذا بالطريقة التي ذكرتها. بالتوفيق.

هذا الخطأ يعني أنه يتم تمرير تابع كما هو، عوضا عن تمرير tuple او list في السطر الخاص ب self.optionsmenu2: self.optionmenu2 = customtkinter.CTkOptionMenu(self, values=sht()) باضافة الأقواس () للتابع sh في النهاية يتم تمرير ماتعيده الدالة عوضا عن الدالة نفسها، حيث تعيد هذه الدالة list كما تتطلب ال self.optionmenu2

المشكلة هي في الغالب في تعريف المتغير AS لأنه تم تعريفه داخل دالة ال openFile ومحاولة الوصول اليه داخل دالة sht. الحل يكون في تعريف المتحول As في الصنف ككل: import customtkinter from tkinter import filedialog from pathlib import Path import pandas as pd class Frame2(customtkinter.CTkFrame): def __init__(self, master): super().__init__(master) self.AS = None # عرف المتغير هنا لتستطيع كل الدوال الوصول اليه def openFile(): filepath = filedialog.askopenfilename(initialdir="C:\\Users\\Cakow\\PycharmProjects\\Main", title="Open file okay?", filetypes=(("text files", "*.xlsx"), ("all files", "*.*"))) filepathA = Path(filepath) self.AS = pd.ExcelFile(filepathA) def sht(): if self.AS: AD = self.AS.sheet_names return AD else: return [] self.button = customtkinter.CTkButton(self, text="فتح ملف", font=customtkinter.CTkFont(family="Calibri", size=12, weight="bold"), command=openFile) self.button.grid(row=0, column=0, padx=3, pady=(3, 0), sticky="we") self.optionmenu2 = customtkinter.CTkOptionMenu(self, values=sht) self.optionmenu2.grid(row=1, column=0, padx=3, pady=(3, 0), sticky="we") بالاضافة الى ذلك، تحقق من مسار ملف ال excel الذي تحاول الوصول اليه. اذا مازال الخطأ موجودا، ف أرجو توضيحه. بالتوفيق

مرحبا صديقي. هل يمكنك شرح ماتريد تغييره أكثر؟ وأي قاعدة بيانات تقصد؟ بالتوفيق.