كل الأنشطة

نعم من الممكن عمل عدة واجهات بالخادم لا مشكلة بذلك وتوجد عدة طرق لتلك الطريقة. فكل واجهة تجعل لها عنوان خاص بها url . وفى هذا العنوان تقوم بتحميل الملفات الخاصة بالواجهة فقط فلنفرض ان الموقع الخاص بك هو test.com . اذا ستجعل الصفحة الخاصة بالعميل هكذا test.com/dashboard مثلا للعميل و نجعل صفحة فرعية للبائع هكذا test.com/seller/dashboard وفى كل صفحة نقوم فقط بتحميل الملفات الخاصة بها . 2. ويمكن ايضا جعل العنوان واحد اى test.com/dashboard و فى السيرفر نقوم بالتحقق من نوع المستخدم وعلى حسب نوعه نقوم بتحميل الصفحة لكل مستخدم. 3. واخيرا يمكنك استخدام sub domain للموقع الخاص بك ولكن ذلك سيجعلك تقوم بانشاء مشروعين وكل مشروع على domain مختلف هكذا : tes.com/dashboard وهذا هو ال domain الرئيسى للموقع . seller.tes.com/dashboard لاحظ هنا قد قمنا بجعل ال url الخاص بالبائع مختلف عن الرئيسى ولكنه بالفعل على نفس السيرفر ولكن يعتبر مشروعين منفصلين . وهذا سيفيدك اذا اردت مثلا انشاء تطبيقين للموبايل تطبيق للبائع والاخر للعميل او فصل المشروعين عن بعض .

مرحباً أحمد , نعم يمكنك فعل ذلك من خلال تصميم عدة routes لعدة مستخدمين , ويمكنك أيضاً فحص ذلك في backend ( لجعل apis أيضاً لا يمكن الوصول إليها إلا من له صلاحية ) . بالنسبة للواجهات الأمامية , يمكنك فعل ذلك باستخدام أحد المكتبات مثل React , هذا مثال يوضح كيف يمكنك تصميم هذه المنهجية : سأقوم بإنشاء تطبيق React يحتوي على صفحتين: صفحة للعميل وصفحة للبائع. ستحتوي كل صفحة على مكوناتها الخاصة وستتحول بينهما باستخدام React Router. في ملف App.js : import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import CustomerPage from './CustomerPage'; import SellerPage from './SellerPage'; function App() { return ( <Router> <div> <Switch> <Route path="/seller"> <SellerPage /> </Route> <Route path="/"> <CustomerPage /> </Route> </Switch> </div> </Router> ); } export default App; في ملف SellerPage : import React from 'react'; function SellerPage() { return ( <div> <h1>Welcome, Seller!</h1> {/* Add seller-specific components and content here */} </div> ); } export default SellerPage; في ملف CustomerPage: import React from 'react'; function CustomerPage() { return ( <div> <h1>Welcome, Customer!</h1> {/* specific components for customer */} </div> ); } export default CustomerPage; ويمكنك التعديل على هذا الكود ليتضم أيضاً عدة أدوار , أي مثلاً يمكنك فحص قيمة ما إذا كان المستخدم الحالي هو seller فقم بعرض صفحات sellers , غير ذلك قم بطباعة صفحات cutsomers.

قمت بالإطلاع على الكود لديك في عربة التسوق , يوجد أخطاء في frontend و backend , إليك التوضيح التالي : في قسم Frontend : عند إضافة بعض المنتجات إلى عربة التسوق والذهاب إلى عربة التسوق , سوف نلاحظ أنها لا تقوم بعرض المنتجات قم بالذهاب إلى صفحة CartPage وقم بطباعة CartItems وسوف تجد أنها مصفوفة فارغة ولا يوجد بها منتجات , وإذا قمت بعمل inspect والذهاب إلى تبويبة Network , سوف تجد أن api cart يعمل ويرجع منتجات , إذن الخطأ هو بطريقة ملئ القيم المرجعة من api في CartItems قم بالذهاب إلى ملف hook => cart => get-all-user-cart-hook , حيث أنك تقوم هنا بتعبة CartItems من Api. ستلاحظ أنه في السطر 32 الملف أنك تقوم بإسناد القيمة res.data.products ل cartItems , قم بطباعة المتغير res وسوف تجده كما في الصور في الاعلى , لاحظ أنه لا يوجد حقل بداخله يسمى products , وإنما ما نريده هو cartItems بدلا من products , فيمكنك تعديل السطر 32 ليصبح هكذا : setCartItems(res.data.cartItems) أيضاً هناك خطأ أخر , لاحظ أن القيم المرحعة من api لا يوجد بها تفاصيل المنتج ( كأسم الصنف , والمنتج والصورة وغيره ) , أي أنه يوجد خطأ أيضاً في إرجاع القيم من api ( خطاً خاص في Backend ). سوف يظهر بعض الأخطاء الأخرى ولا تعمل الصفحة , تجاهلها بينما نقوم بحل مشكلة backend وسوف يعمل بشكل صحيح . في قسم Backend: قم بالتوجه إلى api الخاص بإرجاع المنتجات ل cart , ستجده في السطر 62 ( getLoggedUserCart ) في العنوان التالي : services => cartService.js يجب علينا إصلاح هذا api ليرجع معلومات المنتجات وليس فقط id المنتج , أي يجب عليك تعديله ليصبح كالتالي : // @desc Get logged user cart // @route GET /api/v1/cart // @access Private/User exports.getLoggedUserCart = asyncHandler(async (req, res, next) => { const cart = await Cart.findOne({user: req.user._id}).populate("cartItems.product"); if (!cart) { return next(new ApiError(`There is no cart for this user id: ${req.user._id}`, 404)); } const updatedCartItems = await Promise.all( cart.cartItems.map(async (cartItem) => { if (cartItem.product) { const productDetails = cartItem.product._doc; return {...cartItem._doc, product: productDetails}; } return cartItem; }) ); const tempCart = {...cart._doc, cartItems: updatedCartItems}; res.status(200).json({ status: "success", numOfCartItems: cart.cartItems.length, data: tempCart, }); }); وانتبه لإرجاع تفاصيل المنتج بحقل اسمه product , وذلك لأنك في frontend تستخدمه بهذا الشكل . بعد تطبيق هذه الملاحظات سوف تجد أن التطبيق يعمل بشكل صحيح كم في الصورة المرفقة يوجد أخطاء أخرى في الأزرار والتصميم وغيره من الأخطاء , ما أنصحك به قم بحل الأخطاء البرمجية أولاً ثم قم بحل أخطاء التصميم .

نعم، بالطبع من الممكن عمل عدة واجهات بخادم واحد باستخدام JavaScript. يعتبر الاستخدام الشائع هو عبر تطبيقات الويب المبنية بتقنية الـ Single Page Application او كما يطلق عليها تطبيق الويب الفردي ، حيث يتم تحميل المحتوى وتحديث الواجهة ديناميكيا دون الحاجة إلى إعادة تحميل الصفحة. يمكنك تصميم واجهات مختلفة للعميل والبائع بشكل منفصل وتنفيذها بواسطة JavaScript. يمكن أيضا تحميل الواجهات المناسبة بناء على نوع المستخدم الذي يقوم بتسجيل الدخول (بائع أو عميل)، ويمكن استخدام خوارزميات التوجيه الديناميكية لتحديد أي واجهة يجب عرضها. باستخدام مكتبات مثل React.js أو Angular.js أو Vue.js، يمكنك بناء تطبيق ويب قوي يدعم هذا النوع من التبديلات بين الواجهات بشكل سلس وفعال.

أذا اردت أن أقوم بعمل موقع ويب, وكان هناك مثل ما ذكرت اعلاه بأن يكون هنالك صفحه للعميل, وصفحه للبائع, هل من المنطقي أن أجعل البائع يحمل الواجهة الأمامية للعميل في كل مره يزور الموقع بكل الصور وكل ماهوا فيه, وهوا لن يستخدمه, والعكس أي هل من الممكن عمل عده واجهات بخادم واحد في js وشكرا

قمت بذلك ولم تعمل ايضا

سيكون كالتالي أيضًا: import { HashRouter } from 'react-router-dom'; import App from './App'; const Router = () => { return ( <HashRouter basename={'admin'}> <Routes> <Route path="/" element={<App />} /> </Routes> </HashRouter> ); }; export default Router;

انا لا استخدم BrowserRouter واستخدم بدلا منها HashRouter وهذا رابط المشروع اذا كنت تستطيع القاء نظرة عليه: https://github.com/ahmedzehry55/wesam-backendreact.git

في ملف package.json قم بإضافة عنوان الصفحة الرئيسية للمشروع من خلال خاصية homepage: "homepage": "https://wesamelnagah.com/admin/" ثم قم بتحديث المسارات وتحديد basename وذلك مثال للإصدار 6 من react-router: import { BrowserRouter } from 'react-router-dom'; import App from './App'; const Router = () => { return ( <BrowserRouter basename={'admin'}> <Routes> <Route path="/" element={<App />} /> </Routes> </BrowserRouter> ); }; export default Router;

هذه بعض الحلول لبعض الثغرات : الوصول غير المصرح به (Unauthorized Access): يمكنك التحقق من صحة هوية الحساب لضمان أن المستخدمين يتمكنون فقط من الوصول إلى الموارد التي يجب عليهم الوصول إليها. تجاوز الصلاحيات (Privilege Escalation): يمكنك التحقق من صلاحيات المستخدمين لضمان أنهم لا يمكنهم الوصول إلى ميزات أو بيانات ليس لديهم حق الوصول اليها . التعرض للاختراق (SQL Injection): يمكنك استخدام باراميترات مربوطة وعبارات معيارية لتجنب استغلال ثغرات حقل الإدخال في عمليات قاعدة البيانات.و هذا مثال يوضحالفكرة: لو فرضًنا أن لديك جدولًا اسمه users يحتوي على حقلين username و password، ونرغب في تنفيذ استعلام SQL للتحقق مما إذا كان المستخدم موجودًا في الجدول أم لا باستخدام اسم المستخدم وكلمة المرور المدخلة. DECLARE l_username VARCHAR2(100) := :P1_USERNAME; l_password VARCHAR2(100) := :P1_PASSWORD; l_user_id NUMBER; BEGIN SELECT user_id INTO l_user_id FROM users WHERE username = l_username AND password = l_password; EXCEPTION WHEN NO_DATA_FOUND THEN raise_application_error(-20001, 'Invalid username or password.'); END; البرمجيات الضارة (Cross-Site Scripting XSS): يمكنك تنقيح الإدخالات والمخرجات لمنع تنفيذ السكربتات الضارة في المتصفح و هناك عدة طرق لعمل ذلك منها: التطهير (Sanitization): وهي عملية تنقيح البيانات لتنظيف الإدخالات من الأحرف والعلامات الغير مرغوب فيها التعقيد (Encoding):تحويل الأحرف الخاصة إلى رموز مشفرة للحفاظ على سلامة البيانات. التحقق من الصحة (Validation):التحقق من صحة البيانات المدخلة لضمان أنها تتوافق مع الصيغة المتوقعة.

Apex منصة قوية لتطوير تطبيقات الويب القائمة على Salesforce ومثل أي منصة برمجية، فإنها عرضة للثغرات الأمنية التي يمكن أن تعرض البيانات والأنظمة للخطر، حتى GitHub بها ثغرة حاليًا تستخدم لنشر Malware ويتم العمل على حلها. وأنواع الثغرات الأمنية الشائعة في تطبيقات Apex، هي كالتالي: حقن SQL والتي تحدث عندما يتمكن المهاجم من إدخال تعليمات برمجية SQL ضارة في طلبات قاعدة البيانات مثل البيانات التي يتم إرسالها من خلال نموذج form، مما يسمح له بالوصول إلى البيانات الحساسة أو تعديلها أو حذفها. التنفيذ التعسفي للأوامرACE ويحدث من خلال تمكن المهاجم من إرسال تعليمات برمجية ضارة إلى التطبيق، مما يسمح له بتنفيذ تلك التعليمات على خادم Salesforce. التقاط Cross-Site Scripting (XSS) وسببها هو إدخال نصوص JavaScript ضارة في صفحات الويب، مما يسمح بسرقة بيانات المستخدم أو التحكم في متصفح المستخدم. التصريح غير المصرح به بالوصول إلى البيانات وتحدث الثغرة عندما يتمكن المستخدم من الوصول إلى البيانات التي ليس لديه حق الوصول إليها.

هذه هى ملفات المشروع ارجو حل الخطأ وفحص الاخطاء الاخرى (نظره عامة) لأننى فعلت كل ما بوسعى وظل به اخطاء مثل 1- خطأ المنتجات لاتظهر فى العربة 2- خطأ اضافة التقييمات لا يستجيب ولا يضيف تقييم المستخدم back-end.rar front-end.rar هل مازلت موجود أخى العزيز؟

ماهي الثغرات الامنية في تطبيقات صممت بواسطة apex وكيف يمكن كشفها وحلها

البداية تكون بمشاركات صغيرة في مشاريع مفتوحة المصدر حيث ستجد مشاكل Issues بها وسم tag باسم good first issue: ثم انتقل إلى مشروع أكبر إن واتتك الفرصة، وعامًة ستجد في المواقع التالية فرص جيدة للمشاركة بالمشاريع: https://goodfirstissue.dev/ https://forgoodfirstissue.github.com/ وعامًة لتطوير مستواك، قم بقراءة الكود الخاص بمكتبة صغيرة مثلاً وتفقد كيف تم تطويرها وطريقة كتابة الكود، ثم قم بقراءة كود أكبر وهكذا.

وعليكم السلام , أهلاً أحمد جيد جداً , هل يمكنك إرفاق الكود لديك بعد إجراء التعديلات ؟ ويمكنك إرفاقه كالتالي ( لكي يصبح حجم الملف المضغوط صغير ) : أولاً قم بتحديد المجلدات واستثناء مجلد node_modules . بعد ذلك يمكنك ضغط المجلد باستخدام اي برنامج ضغط , كما قمت من قبل . أو يمكنك رفع الكود على مستودع GitLab أو GitHub ومشاركته معنا باستخدام رابط المشاركة .

مرحباً NAIF, أرى أن هذا سيكون مفيد جداً وخصوصا للمهتمين بالادب العربي , سيساعدهم جداً في تشكيل الكلام. سوف أقوم بتقديم لك كود يضعك على بداية الطريق , ويمكنك استخدامه وتطويره لتصل إلى المطلوب <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Formatting</title> <style> body { font-family: Arial, sans-serif; } #inputText, #outputText { width: 100%; height: 200px; margin-bottom: 10px; } </style> </head> <body> <textarea id="inputText" placeholder="Enter your text here"></textarea> <button onclick="formatText()">Format</button> <textarea id="outputText" readonly></textarea> <script> function formatText() { const inputText = document.getElementById('inputText').value; const words = inputText.trim().split(/\s+/); let formattedText = ''; words.forEach((word) => { formattedText += word.split('').join('ـ') + '\n'; }); document.getElementById('outputText').value = formattedText; const element = document.createElement('a'); const file = new Blob([formattedText], { type: 'text/plain' }); element.href = URL.createObjectURL(file); element.download = 'formatted_text.txt'; element.click(); } </script> </body> </html> التابع formatText تقوم بمعالجة النص المدخل وفق الخطوات التالية : تأخذ القيمة المدخلة في المربع النصي. تقوم بتنظيف النص من الفراغات الزائدة في بداية ونهاية النص. تقوم بتقسيم النص إلى كلمات باستخدام الفراغ كفاصل. لكل كلمة، تقوم بتقسيمها إلى أحرف وتستبدل كل حرف بحرف خطي. تُضاف الكلمة المنسقة إلى المتغير formattedText. يتم تحديث المربع النصي الثاني بالنص المنسق. أخيراً يقوم بتحميل الملف المنسق في ملف txt .

أخى العزيز السلام عليكم لقد اتبعت خطواتك وحللت بعض المشاكل وبالفعل العربة فتحت ولكنها لا تعرض المنتج ما المشكله

التطبيق لايعمل بشكل سليم ويظهر هذا الخطا يظهر هذا الخطا عند الدخول على wesamelnagah.com/admin/

بالنسبة للنقطة الأولى، فمناقشة متطلبات المشروع مع العميل يمكن أن تبدأ العملية عادة بجلسة مناقشة مع العميل لفهم احتياجاته ومتطلبات المشروع بشكل كامل يمكنك عمل مقابلات شخصية، أو اجتماعات عن بعد مع العميل أو من خلال نقاش صفقة المشروع نفسها في منصة العمل الحر. بالنسبة لنقطة التصميم، ففي هذه المرحلة يمكنك التعاون مع مصمم لتصميم واجهة المستخدم ويكون مختص في ال UI/UX إذا كانت هنالك حاجة لذلك، توجد عدة أدوات يمكنك استخدامها لتحويل التصاميم إلى كود، ك Zeplin و Avocode فهي تمكّنك من استخراج التنسيقات ومراجع الصور والأبعاد بسهولة من التصاميم. بما أنك تعمل على كل من الواجهات الأمامية والخلفية، فهذا الأمر جيد وسيسهّل عليك الربط بينهما والتعامل بشكل جيد مع متطلبات المشروع. كما ينبغي اختبار كل جزء من التطبيق بعد الانتهاء من تطويره واستخدامك ل Postman لاختبار الـ API والتأكد من عملها بشكل صحيح، وبالنسبة لواجهة المستخدم، يمكنك اختبارها يدويا للتحقق من سلامة العملية ومظهرها الذي يريد العميل الوصول إليه، يمكنك عمل اجتماعات دورية والاعتماد على منهجية سكرام وتسليم المطلوب عبر دفعات. بالنسبة للسؤال الأخير، فإذا كان المشروع صغيرا وغير معقد، فقد تكون الاستضافة المشتركة مع استضافة المواقع الشائعة كافية أما إذا كان المشروع كبيرا ويتطلب موارد كبيرة، فإن استخدام خدمات السحابة مثل AWS أو Azure قد يكون الخيار الأفضل لضمان الأداء والقدرة على التوسع. يمكنك مراجعة هذه المصادر للتعمق أكثر:

شكراا جدا لحضرتكم

السلام عليكم انوي اولا ان اناقش متطلبات المشروع مع العميل بعدها مرحلة التصميم هل اتعاون مع مصمم مثلا ؟ (ان كان نعم كيف احول التصميم لكود فfigma لم يعد مجاني) اعمل على front-end + backend مرحلة الtesting ساستخدم postman بالنسبة للAPI و اختبر الواجهة الاماميه يدويا بالنسبة لdeployment هل علي رفع كل جزء وحده (server, frontend, database) ام مذا و اي استضافة جيدة عندنا في المنطقة؟ ارجو ااتوضيح في كل نقطة بارك الله فيكم .

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

ان اسئلة الاختبارات لا يتم حلها هنا على الموقع ولكن ساقوم بتوضيح الخطأ لك والطريقة لحله . وانت يججب عليك ان تكتشف الكود الصحيح . الخطا يخبرك بان الكود الخاص بك ياخذ وقتا اكثر من اللازم فان معظم مواقع ال problem solving تضع وقتا معينا لا يجب تخطيه لتنفيذ الكود . ان الكود الخاص بك صحيح ولكنه ياخذ وقتا اكثر من اللازم حيث تقوم بالتكرار على الارقام من ١ حتى n فتخيل لو ان n رقم من ٩ خانات فانه سيتم تنفيذ العديدمن الاسطر مما يستغرق وقتا كثيرا. ولذلك يجب عليك ايجاد حل او خواريزمية لا تستخدم حلقة التكرار لحل تلك المسئلة .

بما أن مشروع الأدمن يعمل على المسار wesamelnagah.com:90 فتستطيع بعدة خطوات تغيير نطاقه , الفكرة هي كالتالي: سيبقى مشروع الأدمن على النطاق الحالي و سنقوم بتغيير إعدادات السيرفر لنجعله عندما يتلقى طلبا للنطاق wesamelnagah.com/admin يقوم بإعادة توجيه الطلب للنطاق الحقيقي wesamelnagah.com:90. و هذه الفكرة نظريا يطلق عليها مفهوم ال proxy , و للقيام بها اتبع هذه الخطوات: قم بتسجيل الدخول لحساب ال vps الخاص بك. قم بتثبيت nginx إذا لم تكن قد ثبته من قبل. قم بتهيئة nginx كالتالي: اذهب لمجلد الاعدادات الخاص ب nginx (غالبا في هذا المسار /etc/nginx/sites-available/)=> أنشأ ملف اعدادات جديد تستطيع تسميته بأي اسم تريده => افتح هذا الملف بواسطة محرر نصوص => ضع هذه التعليمات في الملف و احفظه server { listen 80; server_name wesamelnagah.com; location /admin { proxy_pass http://wesamelnagah.com:90; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } قم بتعريف الملف الذي أنشأته في مجلد ال sites-enabled ليتمكن السيرفر من رؤيته و تنفيذه في لينوكس يمكنك استخدام هذه التعليمة : sudo ln -s /etc/nginx/sites-available/اسم الملف الذي أنشأته /etc/nginx/sites-enabled/ أعد تشغيل nginx لكي يقوم بتطبيق التغييرات. قبل أن تعيد التشغيل من الأفضل من أن تقوم بفحص الإعدادات التي أنشأتها للتأكد من عدم وجود أخطاء syntax , يمكنك استخدام هذه التعليمة لعمل ذلك في لينوكس nginx -t

السلام عليكم ده المسائل علي موقع codewars Given a number n, return the number of positive odd numbers below n, EASY! وده الحل بتاعي def odd_count(n): odd = 0 for i in range(n): if i % 2 != 0: odd += 1 return odd print(odd_count(7)) انا بعد ما Test فا كل صح الحمد الله بس المشكله في ام بضغط علي ATTEMPT عشان ابعت السوال بيظهر الخطاء ده Why did my code time out? Our servers are configured to only allow a certain amount of time for your code to execute. In rare cases the server may be taking on too much work and simply wasn't able to run your code efficiently enough. Most of the time though this issue is caused by inefficient algorithms. If you see this error multiple times you should try to optimize your code further.