Mustafa Suleiman

عليك أن تستخدم علامات الاقتباس (single or double quotes) للسلاسل النصية داخل دوال displayCart() و productContainer.innerHTML كالتالي:

productContainer.innerHTML += `
    <div class="products">
        <img src="image/remove.png">
        <img src="image/${item.tag}.png">
    </div>
    <div class="price">${item.price}</div>
    <div class="quantity">
        <img src="image/plus.png">
        <span>${item.inCart}</span>
        <img src="image/mins.png">
    </div>
    <div class="price-total">
        ${item.price * item.inCart}
    </div>
`;

productContainer.innerHTML += `
    <div class="bask">
        <h4 class="baskTitle">
            baskTitle
        </h4>
        <h4 class="baskTotal">
            ${cartCost}
        </h4>
    </div>
`;

أيضًا في دالة setItems(), يجب تصحيح هذا السطر:

localStorage.setItem("product.inCart", JSON.stringify(cartItems));

إلى:

localStorage.setItem("productsInCart", JSON.stringify(cartItems));

وفي دالة displayCart(), صحح هذا السطر:

let cartCost = document.querySelector('total');

إلى:

let cartCost = document.querySelector('.baskTotal');

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

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

وستجد شرح للأيقونات التي تظهر بجانب الدروس والأسئلة هنا:

ستحتاج إلى كتابة الكود كالتالي من خلال مكتبة escpos-php

                 $fontPath =  "/../Arabic-4.0/I18N/Arabic/Examples/GD/ae_AlHor.ttf";

                $textUtf8 = "مركز النور للعيون \n  رضا أحمد  \n الاسم" . "\n N0 ".'4'. "\n Date : ".'2022-1-18'. "\n الخدمات المطلوبة";

                $fontSize = 35;
                mb_internal_encoding("UTF-8");
                $Arabic = new I18N_Arabic('Glyphs');
                $textLine = explode("\n", $textUtf8);
                /*
                * Set up and use an image print buffer with a suitable font
                */
                $buffer = new ImagePrintBuffer();
                $buffer -> setFont($fontPath);
                $buffer -> setFontSize($fontSize);
        
                
                $profile = CapabilityProfile::load("default");
                $connector = new WindowsPrintConnector("smb://SERVER/Tysso");
        
                $printer = new Printer($connector, $profile);
                $printer -> setPrintBuffer($buffer);

                $printer->setBarcodeTextPosition(Printer::BARCODE_TEXT_BELOW);
                $printer->setJustification(Printer::JUSTIFY_CENTER);
                foreach($textLine as $text) {
                    $printer -> text($text . "\n");
                    $printer -> feed(1);
                }

                $printer->barcode("01234444", Printer::BARCODE_CODE39);
                
                $printer -> cut();
                $printer -> close();

عليك عرض البيانات في كائن FormData باستخدام أساليب مثل get(), getAll(), و entries().

وتلك الأساليب تسمح لك باسترجاع البيانات المحفوظة في FormData بشكل مناسب، وذلك لأن FormData هو كلاس.

get(name)

تستخدم للحصول على قيمة محددة بناءًا على اسمها.

const formData = new FormData();
formData.append("name", "mahmoud");
const name = formData.get("name");
console.log(name); // سيطبع "mahmoud"

getAll(name)

تستخدم للحصول على قائمة بالقيم المرتبطة بنفس الاسم.

const formData = new FormData();
formData.append("hobbies", "Reading");
formData.append("hobbies", "Swimming");
const hobbies = formData.getAll("hobbies");
console.log(hobbies); // سيطبع ["Reading", "Swimming"]

entries()

تستخدم للحصول على مصفوفة مفاتيح وقيم FormData.

const formData = new FormData();
formData.append("name", "mahmoud");
formData.append("age", 30);
for (const entry of formData.entries()) {
  console.log(entry);
}
// سيطبع:
// ["name", "mahmoud"]
// ["age", "30"]

في PHP ستحتاج إلى استخدام شرط مشابه للتالي:

<?php
if (!empty($_POST['اسم_حقل_المرفق'])) {
    // إذا كان حقل المرفق لديه قيمة، قم بعرض الصورة
    echo '<img src="' . $_POST['اسم_حقل_المرفق'] . '" alt="صورة المرفق">';
} else {
    // إذا كان حقل المرفق فارغًا، لا تفعل شيئًا أو يمكنك عرض رسالة تعبيرية
    echo 'لا يوجد مرفق';
}
?>

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

ماهي اللغة التي تستخدمها أو الإطار؟

بتاريخ On 27‏/10‏/2023 at 20:40 قال احمد قابل هاشم ألصميدعي:

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

بخصوص المسارات فيمكنك دخول الإختبار بعد إنهاء 4 مسارات من الدورة، وسيتم إختبارك في تلك المسارات فقط.

ولا مشكلة في النسيان طالما أنك مستوعب لما تم شرحه وطريقة تنفيذ المشاريع التي قمت بها في الدورة، وبخوص طبيعة الإختبار فستجد شرح مفصل هنا:

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

وبخصوص سؤالك، في جافاسكريبت، كل دالة هي كائن، بما في ذلك دالة البناء، وعندما يتم استدعاء دالة، يتم إنشاء كائن جديد لها، ويُعرف باسم المرجع.

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

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

مثال على دالة بناء تستخدم this:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const mohamed = new Person("mohamed", 30);

console.log(mohamed.name); // "mohamed"
console.log(mohamed.age); // 30

بينما في الكلاس:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getFullName() {
    return `${this.name} (${this.age})`;
  }
}

const mohamed = new Person("mohamed", 30);

console.log(mohamed.getFullName()); // "mohamed (30)"

المشكلة هي أنك لا تتحقق مما إذا كان المستخدم مسجلاً الدخول أم لا قبل محاولة إرسال طلب PUT إلى /api/images/like، وفي حال كان المستخدم غير مسجل الدخول، فستتلقى خطأ 401 (غير مصرح به).

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

const user = JSON.parse(localStorage.getItem('user')) || null;

useEffect(() => {
  likeImage();
}, [like]);

const likeImage = async () => {
  if (!user) {
    navigate('/login');
    return;
  }

  await axios
    .put(`/api/images/like/${imageId}`, {
      headers: {
        "Content-Type": "application/json",
        "x-auth-token": user?.data?.token,
      },
    })
    .then((res) => {
      setLike(res?.data);
    })
    .catch((err) => setError(err.response.data.msg));
};

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

أو عرض الاستجابة من الخادم والبيانات التي تم إرسالها أو البيانات المرسلة من الواجهة الأمامية إلى الخادم، أي مفيد في عملية الـ debugging فبدون عرض تلك البيانات لن تتمكن من فهم ما يحدث وسبب حدوث مشكلة معينة.

أيضًا عرض رسائل الأخطاء التي يتم تمريرها كالتالي:

try {
  // ...
} catch (error) {
  console.log(error);
}

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

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

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

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

وعليكم السلام محسن، 

تستطيع طرح الأسئلة العامة كما تشاء هنا في قسم أسئلة البرمجة وطرح الأسئلة المتعلق بالدورة أسفل فيديو الدورة.

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

ولكن يجب توضيح أمر هام، بعض الدورات تعمل على تأهيلك في مجال البرمجة والمجال الخاص بالدورة من خلال شرح الأساسيات وتنفيذ المشاريع، لكن أنت بحاجة إلى تعلم مهارات أخرى بجانبها فمثلاً دورة تطوير واجهات المستخدم ستتعلم بها HTML, CSS, JS ومكتبة بوتستراب وJQuery لكن للعمل في شركة سيتعين عليك تعلم إطار خاصة بالواجهة الأمامية مثل Angualr أو مكتبة React التي يتم شرحها في دورة تطوير التطبيقات باستخدام لغة JavaScript في أكاديمية حسوب.

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

وعليك السلام جهاد،

في حال كانت البطاقة من نوع prepaid فسيتم رفضها، حيث يتم قبول البطاقات من نوع Debit وCredit فقط، وأيضًا متاح الدفع من خلال باي بال حاول ربط البطاقة بباي بال والدفع من خلاله.

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

• شراء بطاقة هدية
• استخدام بطاقة الهدية

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

طالما أنك تريد العمل الحر على مواقع العمل الحرب وهي مستقل وخمسات التابعة لحسوب، فعليك أولاً تعلم مهارة مطلوبة على تلك المنصات وقد تم توضيح الأمر بالتفصيل هنا:

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

ويمكنك الإطلاع على التالي أيضًا:

وعند الوصول لمرحلة التقديم على المشاريع، سيفيدك قراءة التالي:

بتاريخ 20 دقائق مضت قال زمزم بنت يوسف:

فهمت جزاك الله خيرا فقط للتأكيد على فهمي  الآن هن فقط عبارة عن مسميات يطلق على حسب نوع المحتوى؟ وهو لا يؤثر في طريقة كتابه وهيكلة الكود ؟هل هكذا صحيح؟ 

نستخدم نفس اللغات الأساسية للويب وهي HTML, CSS, JS بالنسبة للواجهة الأمامية في مواقع الويب الديناميكية (تطبيقات الويب) لكن لإنشاء تطبيق SPA نحن بحاجة إلى استخدام تقنية مثل مكتبة React أو إطارات مثلAngular أو Vue.js وهي مبنية باستخدام جافاسكريبت ونقوم من خلالها بإنشاء تطبيقات SPA بسهولة، فلو قمنا بذلك بمفردنا من خلال جافاسكريبت سيصبح الأمر معقد ويستغرق وقت أكثر.

وبالطبع الواجهة الخلفية قد تختلف حيث هناك لغات مختلفة للواجهة الخلفية ولكل لغة إطار عمل، مثل PHP ولارافل أو جافاسكريبت وnode.js أو بايثون ودجانغو، ونستخدم اللغة والإطار بناءًا على نوع واحتياجات المشروع، ومن الممكن الجمع ما بين أكثر من لغة وإطار.

السؤال متعلق بدورة علوم الحاسب أرجو التعليق أسفل فيديو الدورة في المرة القادمة لمساعدتك بشكل أفضل.

وإن كنت قد فهمت سؤالك بشكل صحيح، فالفرق الرئيسي بين تطبيق الويب (web app) وموقع الويب (web site) هو أن تطبيق الويب يوفر تفاعل أكثر مع المستخدم، بينما موقع الويب هو مجموعة من الصفحات التي يمكن عرضها من خلال مستعرض الويب.

وكأمثلة، موقع فيسبوك هو تطبيق ويب وليس موقع ويب، بينما المواقع الإخبارية أو Wikipedia مثلاً هي مواقع ويب، 

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

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

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

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

بتاريخ 4 دقائق مضت قال Saif Majed Hassan:

السلام عليكم 

اوجه مشكله تفتح عندي صفحه gpt chat  لكن عند الكتابه و الضغط ارسال لا يظهر لي شيء مجرد صفحه فارغه

قم بالضغط على CTRL + SHIFT + J وستظهر لك نافذة أداة المطور، اضغط على تبويب Network

ثم اضغط على disable cache 

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

الأمر طبيعي لأنك لا ترسل البيانات بالشكل المطلوب إلى قالب ejs، بل تقوم بإرسال الرد من الخادم على هيئة كائن، والطريقة الصحيحة لتمرير البيانات إلى القالب هي كالتالي:

// في ملف التطبيق Express
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const jsonData = {
    link: 'http://example.com'
  };

  res.render('index.ejs', { data: jsonData });
});

في ملف القالب:

<!-- في ملف قالب EJS (مثلاً index.ejs) -->
<!DOCTYPE html>
<html>
  <body>
    <a href="{{data.link}}">الرابط</a>
  </body>
</html>

السؤال غير واضح ما الذي تقوم بفعله وما هي اللغات المستخدمة في مشروعك وعلى الأغلب أنت تعمل على مشروع Flutter، ولكن علي أي حال لديك مشكلة CMake error: required package not found وهناك حزمة لا يتم العثور عليها ولكنك لم توفر رسالة الخطأ بالكامل، حاول تفقد أي حزمة وقم بالتالي من أجل تثبيت الحزمة:

sudo apt-get install اسم الحزمة الناقصة

وإذا استمرت المشكلة استخدام أمر مثل pkg-config --list-all لعرض الحزم المثبتة على نظامك، أيضًا قد يكون لديك إصدار قديم من CMake فحاول تحديث CMake إلى أحدث إصدار.

وتحقق من ملف CMakeLists.txt في مشروعك وتأكد من أنه تم تكوينه بشكل صحيح للبحث عن الحزم اللازمة باستخدام PkgConfig والتحقق من السطر 25 في ملف CMakeLists.txt الذي يشير إلى الاستفسار عن الحزم.

الأسئلة الإختبارية لا يتم الإجابة عليها بشكل مباشر، ولكن يمكنك إرشادك لخطوات الحل:

السؤال الأول:

1. استخدمي متغير لتخزين الاسم.
2. استخدمي f-string لدمج اسمك مع السلسلة "Hello, [اسمك]!".
3. استخدمي دالة الطباعة لعرض النص على الشاشة.

السؤال الثاني:

1. متغيرات لتخزين السنة، الشهر، واليوم.
2. f-string لتنسيق التاريخ بشكل "YYYY-MM-DD".
3. دالة الطباعة لعرض التاريخ المنسق.

السؤال الثالث:

1. إنشاء قائمة من الأرقام.
2. f-string لحساب متوسط الأرقام في القائمة.
3. دالة الطباعة لعرض المتوسط.

السؤال الرابع:

1. متغير لتخزين الاسم الكامل بالتنسيق "الاسم الأول الاسم الأخير".
2. f-string لعكس الأسماء إلى التنسيق "الاسم الأخير، الاسم الأول".
3. دالة الطباعة لعرض الاسمين بالتنسيق الجديد.

السؤال الخامس:

1. تعيين كلمة مرور محددة مسبقًا في متغير (مثل correct_password).
2. حلقة تكرار لطلب من المستخدم إدخال كلمة مرور.
3. قارني كلمة المرور المدخلة بالكلمة المرور المحددة.
4. إذا تطابقت، اعرضي رسالة تأكيد، وإن لم تتطابق، اعرضي رسالة عدم التطابق واستمري في طلب إدخال كلمة المرور.

السؤال السادس:

1. إعداد متغير لتخزين المجموع.
2. استخدمي حلقة تكرار (مثل while) لطلب من المستخدم إدخال أرقام واحدة في كل دورة.
3. احتفظي بالإدخال كرقم وأضفه إلى المجموع.
4. استمري في الطلب حتى يدخل المستخدم "stop".
5. عند الانتهاء، استخدمي دالة الطباعة لعرض المجموع.

السؤال السابع:

1. استخدمي متغير للبدء من الرقم 10.
2. حلقة تكرار (مثل while) لطباعة الأرقام من 10 إلى 1.
3. في كل دورة، انقصي قيمة المتغير بواحد واستمري في الحلقة حتى يصبح الرقم 1.

السؤال الثامن:

1. متغير لتخزين الكلمة المدخلة.
2. حلقة تكرار (مثل while) لطلب من المستخدم إدخال كلمة.
3. دالة الطباعة لعرض الكلمة مرتين في كل دورة.
4. استمري في الطلب حتى يقوم المستخدم بإدخال قيمة أخرى أو يتوقف عن الإدخال.

السؤال التاسع:

1. استخدمي حلقة تكرار (مثل while) لاستمرار في طلب إدخال المستخدم.
2. دالة الإدخال لجلب إدخال المستخدم.
3. افحصي الإدخال واعرضيه.
4. استمري في الطلب حتى يدخل المستخدم "exit" أو إيقاف البرنامج بشكل آخر.

ومن السهل تنفيذ ما سبق من خلال تعلم أساسيات بايثون في وقت قصير:

ستحتاج إلى إنشاء الجداول التالية:

1- جدول المستخدمين

يحتوي على معلومات عامة عن المستخدمين، مثل الاسم والهوية الوطنية والرقم الوظيفي والتاريخ الميلاد وموقع العمل والصورة الشخصية والبريد الإلكتروني وكلمة المرور.

حقول الجدول:

              الحقل نوع البيانات

• اسم المستخدم -  نص
• الهوية الوطنية - نص
• الرقم الوظيفي - نص
• تاريخ الميلاد - تاريخ
• موقع العمل - نص
• الصورة الشخصية - صورة
• البريد الإلكتروني - نص
• كلمة المرور - نص

2- جدول المناطق

وذلك الجدول يحتوي على أسماء المناطق فقط.

الحقول هي:

• اسم المنطقة - نص

3- جدول المحافظات

ضع به أسماء المحافظات وأسماء المناطق التي تنتمي إليها.

حقول الجدول:

• اسم المحافظة - نص
• اسم المنطقة - نص

4- جدول المجمعات السكنية

هنا ضع أسماء المجمعات السكنية، وأسماء المحافظات التي تنتمي إليها، وعدد الوحدات السكنية، وأسماء الموظفين المسؤولين عنها.

حقول الجدول:

• اسم المجمع السكني - نص
• اسم المحافظة - نص
• عدد الوحدات السكنية - عدد صحيح
• اسماء الموظفين المسؤلين عنه -  نص

5- جدول الوحدات السكنية

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

حقول الجدول:

• اسم المجمع السكني - نص
• كود الوحدة السكنية - نص
• عدد الغرف - عدد صحيح
• رقم العداد الخاص بالكهرباء - نص
• رقم العداد الخاص بالماء - نص
• حالة الوحدة - نص

العلاقات المناسبة هي كما يلي:

• علاقة واحد لمتعدد One to Many بين جدول المستخدمين وجدول المجمعات السكنية، وتعني أنه يمكن لكل مستخدم أن يكون مسؤولاً عن العديد من المجمعات السكنية، ولكن يمكن أن يكون كل مجمع سكني مسؤولاً عن مستخدم واحد فقط.
• علاقة واحد لمتعدد One to Many بين جدول المجمعات السكنية وجدول الوحدات السكنية، وتعني أنه يمكن لكل مجمع سكني أن يحتوي على العديد من الوحدات السكنية، ولكن يمكن أن تكون كل وحدة سكنية جزءًا من مجمع سكني واحد فقط.

لاحظ أنك تكتب view.engine والصحيح هو view engine كالتالي:

app.set('view engine', 'ejs');

وإليك مثال كامل:

import express from 'express';

const app = express();

// ✅ Configure EJS as your view engine
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('home', {
    title: 'hsoub.com',
    message: 'Example message: hsoub.com',
  });
});

const port = 5000;

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

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

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

وبخصوص اختيار استخدام Breeze API أو الطريقة العادية في بناء الـ Backend، يعتمد ذلك على ما تريده، حيث Breeze API هو إطار عمل  يساعد في تسهيل تطوير التطبيقات بلغة PHP باستخدام Laravel ولا مشكلة في استخدامه إن كنت تفضل بساطة التطوير واستخدام أفضل الممارسات الموصى بها من قبل Laravel، ولكن عند الحاجة إلى مزيد من التحكم في بنية وعمل باك اند، فمن الأفضل بناء الباك اند بالطريقة العادية.

وبخصوص مشكلة تخزين التوكن:

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

بتاريخ 11 ساعة قال Ahmad Alharbi2:

سؤال اخر  هناك مجال اتمنى لو تضيفون له دوره وهو الامن السيراني الامن بشكل عام اعرف ان المجال صعب وعميق لكن سيكون شي جيد ان تعلمون هذا المجال مثل الحمايه من الهكر حماية المواقع او نظام وكيف تصبح هكر لكن لاهداف خيره وهكذا

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