الدرس التطبيقي حول الترميز الخاص بأفضل الممارسات لنموذج الدفع

Sam Dutton

يعرض لك هذا الدرس التطبيقي حول الترميز كيفية إنشاء نموذج دفع آمن وسهل الاستخدام.

الخطوة 1: استخدام HTML على النحو المنشود

استخدم العناصر المصممة للوظيفة:

• <form>
• <section>
• <label>
• <input> و<select> و<textarea>
• <button>

كما ترى، تمكن هذه العناصر وظائف المتصفح المضمنة وتحسّن إمكانية الوصول لإضافة معنى إلى الترميز.

• انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.

يُرجى إلقاء نظرة على ترميز HTML لنموذجك في index.html.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

يتضمّن عنصر <input> رقم البطاقة والاسم الوارد في البطاقة وتاريخ انتهاء الصلاحية ورمز الأمان. جميعها ويتم تضمينها في عناصر <section>، ولكل منها تصنيف. زر إكمال الدفع هو عبارة عن ملف HTML <button> ستتعرّف لاحقًا في هذا الدرس التطبيقي على ميزات المتصفّح التي يمكنك الوصول إليها باستخدام هذه العناصر.

انقر على عرض التطبيق لمعاينة نموذج الدفع.

• هل يعمل النموذج بشكل كافٍ كما هو؟
• هل هناك أي شيء تريد تغييره لتحسين أدائه؟
• ماذا عن إذا كنت تستخدم الجوّال؟

انقر على عرض المصدر للعودة إلى رمز المصدر.

الخطوة 2: تصميم الموقع الإلكتروني للأجهزة الجوّالة والكمبيوتر المكتبي

محتوى HTML الذي أضفته صالح، ولكن نمط المتصفّح التلقائي يجعل استخدام النموذج صعبًا، خاصةً على الجوّال. ولا تبدو جيدة أيضًا.

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

انسخ كل CSS أدناه والصقها في ملف css/main.css الخاص بك.

هذا قدر كبير من CSS! أهم ما يجب أن تكون على دراية به هي التغييرات في المقاسات:

• تمت إضافة padding وmargin إلى الإدخالات.
• تختلف font-size والقيم الأخرى باختلاف أحجام إطارات العرض.

وعندما تكون مستعدًا، انقر على عرض التطبيق لمشاهدة النموذج ذو التصميم. ستلاحظ أيضًا أن الحدود لها ويتم استخدام display: block; للتصنيفات بحيث تسير على سطر مستقل، يمكن أن تكون المدخلات بعرض كامل. أفضل الممارسات المتعلّقة بنموذج تسجيل الدخول وتشرح فوائد هذا النهج بمزيد من التفصيل.

تُستخدَم أداة الاختيار :invalid للإشارة إلى الحالات التي يحتوي فيها الإدخال على قيمة غير صالحة. (ستستخدم هذا لاحقًا في الدرس التطبيقي حول الترميز).

خدمة CSS تعطي أولوية للأجهزة الجوّالة:

• يتم استخدام خدمة CSS التلقائية لإطارات العرض التي يقلّ عرضها عن 400px.
• طلبات البحث عن الوسائط هي مستخدم لإلغاء الإعدادات التلقائية لإطارات العرض التي يبلغ عرضها 400px على الأقل، ثم مرة أخرى إطارات عرض يبلغ عرضها 500px على الأقل من المفترض أن يعمل هذا بشكل جيد على الهواتف والأجهزة الجوّالة الأصغر حجمًا ذات الشاشات الكبيرة وعلى أجهزة الكمبيوتر المكتبي

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

• هل يمكن رؤية النموذج بالكامل؟
• هل إدخالات النموذج كبيرة بما يكفي؟
• هل النص كله قابل للقراءة؟
• هل لاحظت أي اختلافات بين استخدام جهاز محمول حقيقي وعرض النموذج في هل تريد استخدام وضع الجهاز في "أدوات مطوري البرامج في Chrome"؟
• هل احتجت إلى تعديل نقاط التوقف؟

تتوفّر عدة طرق لاختبار النموذج على أجهزة مختلفة:

• استخدام وضع الجهاز "أدوات مطوري البرامج في Chrome" لمحاكاة الأجهزة المحمولة.
• إرسال عنوان URL من جهاز الكمبيوتر إلى هاتفك
• استخدِم خدمة مثل BrowserStack لاختبار نطاقٍ ما. من الأجهزة والمتصفحات

الخطوة 3: إضافة سمات لمساعدة المستخدمين على إدخال البيانات

السماح للمتصفّح بتخزين قيم الإدخال وملؤها تلقائيًا، وتوفير إمكانية الوصول إلى واجهة برمجة التطبيقات الآمنة والمدمَجة ميزات الدفع والتحقق من الصحة.

أضِف السمات إلى النموذج في ملف index.html ليبدو على النحو التالي:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

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

بعد اختيار طريقة دفع وإدخال رمز الأمان، يملأ المتصفّح النموذج تلقائيًا باستخدام قيم autocomplete لبطاقة الدفع التي أضفتها إلى النموذج:

• cc-number
• cc-name
• cc-exp
• cc-csc

تفحص العديد من المتصفحات أيضًا أرقام بطاقات الائتمان ورموز الأمان وتتأكّد من صحتها.

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

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

حاوِل إرسال نموذج الدفع مع ترك حقل فارغ. يطلب المتصفِّح إكمال الخطوات المفقودة البيانات. يمكنك الآن إضافة حرف إلى القيمة في حقل رقم البطاقة ومحاولة إرسال النموذج. تشير رسالة الأشكال البيانية يحذّر المتصفِّح من أنّ القيمة غير صالحة. يحدث ذلك لأنّك استخدمت السمة pattern من أجل لتحديد قيم صالحة للحقل. ينطبق الشيء نفسه على maxlength وتطبيقات أخرى قيود التحقق من الصحة لا حاجة إلى JavaScript.

من المفترض أن تظهر طريقة الدفع الآن على النحو التالي:

• حاوِل إزالة قيم autocomplete وملء نموذج الدفع. ما الصعوبات التي تواجهها التي يواجهونها؟
• جرِّب نماذج الدفع في المتاجر على الإنترنت. ضع في اعتبارك ما الذي يعمل بشكل جيد وما الذي يحدث بشكل خاطئ. هل هناك أي مشكلات شائعة أو أفضل الممارسات التي يجب عليك اتباعها؟

الخطوة 4: إيقاف زر الدفع بعد إرسال النموذج

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

أضِف رمز JavaScript التالي إلى ملف js/main.js:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

يُرجى محاولة إرسال نموذج الدفع ومعرفة ما يحدث.

إليك كيف يجب أن تظهر التعليمة البرمجية في هذه المرحلة، مع إضافة بعض التعليقات دالة validate():

• ستلاحظ أن لغة JavaScript تشتمل على رمز تم التعليق عليه للتحقق من صحة البيانات. يستخدم هذا الرمز القيود المفروضة على واجهة برمجة التطبيقات للتحقق من صحة القيود (التي تكون متوافقة على نطاق واسع) لإضافة خيارات والتحقق، والوصول إلى واجهة مستخدم المتصفح المضمنة لتحديد التركيز وعرض المطالبات. قم بإلغاء تعليق الكود تجربتها. يجب تحديد القيم المناسبة للسمتَين someregex وmessage، وضبط قيمة someField

• بيانات الإحصاءات ومراقبة المستخدم الحقيقية الذي ستراقبه لتحديد طرق لتحسين النماذج؟

من المفترض أن تظهر طريقة الدفع الكاملة الآن على النحو التالي:

• تجربة النموذج على أجهزة مختلفة. الأجهزة والمتصفحات التي تستخدمها في الاستهداف؟ كيف يمكن تحسين النموذج؟

التقدم إلى أبعد من ذلك

ننصحك بالاطّلاع على الميزات الأساسية التالية للنماذج التي لم يتم تناولها في هذا الدرس التطبيقي حول الترميز:

• رابط إلى مستندات بنود الخدمة وسياسة الخصوصية: وضح للمستخدمين كيفية وحماية بياناتهم.

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

• "إحصاءات Google" ومراقبة المستخدمين الحقيقية: تمكين أداء تصميم النموذج وسهولة استخدامه من الاختبار ومراقبته للمستخدمين الحقيقيين.