صفحة العميل و البائع

نعم، بالطبع من الممكن عمل عدة واجهات بخادم واحد باستخدام JavaScript.

يعتبر الاستخدام الشائع هو عبر تطبيقات الويب المبنية بتقنية الـ Single Page Application او كما يطلق عليها تطبيق الويب الفردي  ، حيث يتم تحميل المحتوى وتحديث الواجهة ديناميكيا دون الحاجة إلى إعادة تحميل الصفحة.

يمكنك تصميم واجهات مختلفة للعميل والبائع بشكل منفصل وتنفيذها بواسطة JavaScript.

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

باستخدام مكتبات مثل React.js أو Angular.js أو Vue.js، يمكنك بناء تطبيق ويب قوي يدعم هذا النوع من التبديلات بين الواجهات بشكل سلس وفعال.
 

مرحباً أحمد ,

نعم يمكنك فعل ذلك من خلال تصميم عدة 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.

نعم من الممكن عمل عدة واجهات بالخادم لا مشكلة بذلك وتوجد عدة طرق لتلك الطريقة.

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

بتاريخ 18 ساعة قال Hikmat Jaafer:

مرحباً أحمد ,

نعم يمكنك فعل ذلك من خلال تصميم عدة 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.

عندما يكون المستخدم على صفحه البائع SellerPage , الن يحمل جهازه ملف CustomerPage كونه موجود في App.js 

واذا ذهب إلى developer tools في ال Sources ألن يجد ملف CustomerPage, أي أنه تم تحميل الملف؟؟؟

نعم , سيتم تحميل جزء من الكود في Sources ضمن developer tools , وسيتحمل بشكل كامل ( يعيد DOM لهذه الصفحة )  فقط عندما يذهب إلى المسار ( أي بهذه الحالة سوف يستطيع المستخدم من الوصول إلى الكود من خلال developer tools )

لكن إذا أردت منع المستخدمين من الوصول , يمكنك استخدام ما يسمى lazy loading , سوف أقوم بإعطاء شرح مختصر مع مثال على ذلك ( سوف نعدل فقط في محتوى ملف App.js ) :

مثال باستخدام Lazy Loading :

Lazy Loading هو نمط يستخدم لتحميل المحتوى أو المكونات فقط عندما يكون هناك حاجة فعلية لها، بدلاً من تحميلها جميعا في البداية. وبالتالي يساعد هذا النمط في تحسين سرعة التحميل الأولي للصفحة وتوفير موارد الشبكة.و يمكننا استخدام React.lazy و Suspense لتحقيق ذلك كما في المثال التالي : App.js

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const CustomerPage = lazy(() => import('./CustomerPage'));
const SellerPage = lazy(() => import('./SellerPage'));

function App() {
  return (
    <Router>
      <div>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route path="/seller" component={SellerPage} />
            <Route path="/" component={CustomerPage} />
          </Switch>
        </Suspense>
      </div>
    </Router>
  );
}

export default App;

قمت بتحميل المكونات CustomerPage و SellerPage بشكل lazy loading باستخدام React.lazy. يمكننا استخدام عنصر Suspense كمكون واجهة مستخدم لعرض تحميل أثناء انتظار تحميل المكونات. عنصر fallback يعرض رسالة "Loading..." أثناء التحميل.

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