الربط بين back end و front end

وعليكم السلام ورحمة الله وبركاته .

إن ما قمتي به جيد حتي الآن . إن عملية الربط بين الواجهة الخلفية والواجهة الأمامية تتم من خلال ال  APIS .

حيث أن ال API (واجهة برمجة التطبيقات) هي اختصار لـ "Application Programming Interface" وهي مجموعة من القواعد والبروتوكولات التي تسمح لتطبيقات مختلفة بالتواصل مع بعضها البعض. توفر الـ API وسيلة للبرامج للتفاعل مع الأنظمة أو الخدمات و البرمجيات الأخرى دون الحاجة لفهم التفاصيل الداخلية الخاصة بها فقط يتم توفير البيانات اللازمة التي يستقبلها ال API والبيانات التي يتم إرجاعها .

ويمكنك قراءة المقال التالي لفهم أفضل عن ال API :

وبما أنكي أنهيتي مشروع ال server فهكذا تم إنهاء ال APIS الخاص بمشروعك والآن يأتي دور الواجهة الأمامية والتي يجب أن ترسل الطلبات وتستقبل البيانات من تلك ال APIS . و يمكنكي إستخدام fetch و axios لإرسال الطلبات وإستقبال الردود من الواجهة الأمامية إلى الواجهة الخلفية .

ولذلك لربط التسجيل وتسجيل الدخول يجب إرسال الطلبات إلى ال API الخاص بتسجيل المستخدم وتسجيل الدخول و إستقبال الرد من الخادم وهنا في هذه الحالة سيكون ال token الذي جيب حفظة في المتصفح سواء في ال cookies او في ال localStorage وإرساله بعد ذلك في كل طلب يتم إلى الواجهة الخلفية .

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

أو يمكنكي قراءة الدرس التالي عن كيفية التسجيل وتسجيل الدخول بإستخدام  React و node :

بتاريخ 1 ساعة قال محمد عاطف17:

وعليكم السلام ورحمة الله وبركاته .

إن ما قمتي به جيد حتي الآن . إن عملية الربط بين الواجهة الخلفية والواجهة الأمامية تتم من خلال ال  APIS .

حيث أن ال API (واجهة برمجة التطبيقات) هي اختصار لـ "Application Programming Interface" وهي مجموعة من القواعد والبروتوكولات التي تسمح لتطبيقات مختلفة بالتواصل مع بعضها البعض. توفر الـ API وسيلة للبرامج للتفاعل مع الأنظمة أو الخدمات و البرمجيات الأخرى دون الحاجة لفهم التفاصيل الداخلية الخاصة بها فقط يتم توفير البيانات اللازمة التي يستقبلها ال API والبيانات التي يتم إرجاعها .

ويمكنك قراءة المقال التالي لفهم أفضل عن ال API :

 

وبما أنكي أنهيتي مشروع ال server فهكذا تم إنهاء ال APIS الخاص بمشروعك والآن يأتي دور الواجهة الأمامية والتي يجب أن ترسل الطلبات وتستقبل البيانات من تلك ال APIS . و يمكنكي إستخدام fetch و axios لإرسال الطلبات وإستقبال الردود من الواجهة الأمامية إلى الواجهة الخلفية .

ولذلك لربط التسجيل وتسجيل الدخول يجب إرسال الطلبات إلى ال API الخاص بتسجيل المستخدم وتسجيل الدخول و إستقبال الرد من الخادم وهنا في هذه الحالة سيكون ال token الذي جيب حفظة في المتصفح سواء في ال cookies او في ال localStorage وإرساله بعد ذلك في كل طلب يتم إلى الواجهة الخلفية .

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

أو يمكنكي قراءة الدرس التالي عن كيفية التسجيل وتسجيل الدخول بإستخدام  React و node :

 

جميل جدا شكرا على هذه المعلومات القيمة، لدي سؤال هل يوجد فرق كتير بين موضوع تخزين token في cookies و localstorge ? او يتم استعمال واحده من هذه الطرق في المشروع؟

بتاريخ 16 دقائق مضت قال Raghad Jamal:

جميل جدا شكرا على هذه المعلومات القيمة، لدي سؤال هل يوجد فرق كتير بين موضوع تخزين token في cookies و localstorge ? او يتم استعمال واحده من هذه الطرق في المشروع؟

لا شكر على واجب .

لا فرق بين الإثنين يمكنكي إستخدام أي منهما . ولكن عند إستخدام ال localstorage سيتوجب عليكي في كل طلب يتم إرساله أن تقومي بتضمين ال token يدويا بنفسك بخلاف ال cookies التي يتم إرسالها تلقائيا .

أيضا ال cookies أكثر أمانا من حيث هجمات XSS (Cross-Site Scripting) حيث يمكن الوصول إلى ال localstorage من خلال javascript بينما ال cookies إذا تم تحديدها ك HttpOnly فلن يمكن الوصول لها من خلال javascript. 

في ال  cookies يمكن تحديد صلاحية إنتهاءها وسيتم حذفها بمجرد إنهاء الصلاحية بينما ال locastorage لن يتم مسحها إلا إذا تم إستخدام javascript ولا توجد لها مدة صلاحية.

عموما cookies أفضل من localstorage وأيضا هذا يعتمد على الخادم إذا كان يتوقع إستقبال ال token من خلال ال cookies فيجب إستخدام ال cookies في الواجهة الأمامية

بتاريخ On 4‏/9‏/2024 at 15:13 قال Raghad Jamal:

السلام عليكم 
انا اعمل على مشروع وقمت بتقسيمه الى client و server بحيت يكون جزء مخصص للباك اند وجزء مخصص للفرونت اند ، الان ماهي الخطوات التي يجب عليا القيام بها للربط بين المشروعين؟ متلا الان قمت ببناء واجهة تسجيل الدخول واريد ربطها مع قاعدة البيانات الموجودة في مجلد server 

client.zip 40.99 MB · 4 تنزيلات server.zip 5.4 MB · 4 تنزيلات

السلام عليكم 
من خلال عملي الان على الربط بين الواجهة الامامية والواجهة الخلفيه وتحديدا بدات بي ربط صفحة dashboard مع api الخاص بي getAllReservations لعرض كل الحجوزات في هذه الصفحة ، وقبل كل شيء قمت بتجربة جميع الاوامر على postman وتنفذت جميعها بشكل صحيح وممتاز ولكن الان لم افهم لماذا مع اول ربط قمت به لم يعمل وتظهر لي رسالة حدث خطأ أثناء تحميل البيانات باستمرار ولم افهم اين الخطا؟
ملفات المشروع:
 

server.zip client.zip