بناء تطبيق مصرفي الجزء الأول: قوالب HTML والمسارات في تطبيق ويب

عندما قامت حاسوب التوجيه الخاص بـ Apollo 11 بالتنقل إلى القمر في عام 1969، كان عليه التبديل بين برامج مختلفة دون إعادة تشغيل النظام بالكامل. تعمل تطبيقات الويب الحديثة بطريقة مشابهة - فهي تغير ما تراه دون إعادة تحميل كل شيء من البداية. هذا يخلق تجربة سلسة وسريعة يتوقعها المستخدمون اليوم. على عكس المواقع التقليدية التي تعيد تحميل الصفحات بالكامل مع كل تفاعل، تقوم تطبيقات الويب الحديثة بتحديث الأجزاء التي تحتاج إلى تغيير فقط. هذا النهج، مثلما يقوم مركز التحكم بالتبديل بين شاشات مختلفة مع الحفاظ على التواصل المستمر، يخلق تلك التجربة السلسة التي اعتدنا عليها. إليك ما يجعل الفرق كبيرًا: فهم التطور: - التطبيقات التقليدية تتطلب طلبات خادم لكل إجراء تنقل - التطبيقات الحديثة ذات الصفحة الواحدة (SPAs) يتم تحميلها مرة واحدة وتحديث المحتوى ديناميكيًا باستخدام JavaScript - توقعات المستخدمين الآن تفضل التفاعلات الفورية والسلسة - فوائد الأداء تشمل تقليل عرض النطاق الترددي واستجابات أسرع في هذا الدرس، سنقوم ببناء تطبيق مصرفي يحتوي على شاشات متعددة تتدفق بسلاسة معًا. مثلما يستخدم العلماء أدوات معيارية يمكن إعادة تكوينها لتجارب مختلفة، سنستخدم قوالب HTML كعناصر قابلة لإعادة الاستخدام يمكن عرضها حسب الحاجة. ستعمل مع قوالب HTML (مخططات قابلة لإعادة الاستخدام لشاشات مختلفة)، توجيه JavaScript (النظام الذي يبدل بين الشاشات)، وواجهة برمجة تطبيقات تاريخ المتصفح (التي تحافظ على عمل زر الرجوع كما هو متوقع). هذه هي نفس التقنيات الأساسية التي تستخدمها أطر العمل مثل React، Vue، وAngular. بحلول النهاية، سيكون لديك تطبيق مصرفي يعمل يوضح مبادئ تطبيقات الصفحة الواحدة الاحترافية.

اختبار ما قبل المحاضرة

اختبار ما قبل المحاضرة

ما الذي ستحتاجه

سنحتاج إلى خادم ويب محلي لاختبار تطبيقنا المصرفي - لا تقلق، الأمر أسهل مما يبدو! إذا لم يكن لديك واحد مثبت بالفعل، فقط قم بتثبيت Node.js وقم بتشغيل npx lite-server من مجلد المشروع الخاص بك. هذا الأمر المفيد يقوم بتشغيل خادم محلي ويفتح تطبيقك تلقائيًا في المتصفح.

التحضير

على جهاز الكمبيوتر الخاص بك، قم بإنشاء مجلد باسم bank مع ملف باسم index.html بداخله. سنبدأ من هذا القالب الأساسي: إليك ما يوفره هذا القالب الأساسي: - يحدد هيكل مستند HTML5 مع إعلان DOCTYPE المناسب - يهيئ ترميز الأحرف كـ UTF-8 لدعم النصوص الدولية - يمكن التصميم المتجاوب مع علامة meta الخاصة بالعرض لتوافق الأجهزة المحمولة - يضع عنوانًا وصفيًا يظهر في علامة تبويب المتصفح

- ينشئ قسمًا نظيفًا للجسم حيث سنبني تطبيقنا

قوالب HTML

تحل القوالب مشكلة أساسية في تطوير الويب. عندما اخترع غوتنبرغ الطباعة بالحروف المتحركة في الأربعينيات من القرن الخامس عشر، أدرك أنه بدلاً من نحت صفحات كاملة، يمكنه إنشاء كتل حروف قابلة لإعادة الاستخدام وترتيبها حسب الحاجة. تعمل قوالب HTML على نفس المبدأ - بدلاً من إنشاء ملفات HTML منفصلة لكل شاشة، تقوم بتحديد هياكل قابلة لإعادة الاستخدام يمكن عرضها عند الحاجة. فكر في القوالب كمخططات لأجزاء مختلفة من تطبيقك. تمامًا كما يقوم المهندس المعماري بإنشاء مخطط واحد ويستخدمه عدة مرات بدلاً من إعادة رسم غرف متطابقة، نقوم بإنشاء القوالب مرة واحدة ونستخدمها عند الحاجة. يحتفظ المتصفح بهذه القوالب مخفية حتى يقوم JavaScript بتنشيطها. إذا كنت تريد إنشاء شاشات متعددة لصفحة ويب، فإن أحد الحلول هو إنشاء ملف HTML لكل شاشة تريد عرضها. ومع ذلك، يأتي هذا الحل مع بعض الإزعاج: - يجب عليك إعادة تحميل HTML بالكامل عند تبديل الشاشة، مما قد يكون بطيئًا. - من الصعب مشاركة البيانات بين الشاشات المختلفة. نهج آخر هو وجود ملف HTML واحد فقط، وتحديد قوالب HTML متعددة باستخدام عنصر