MDC-101 Web: أساسيات مكونات المواد (MDC) (الويب)

1. مقدمة

تساعد المكونات المادية (MDC) المطورين على تنفيذ التصميم المتعدد الأبعاد. يضم مركز MDC، الذي أنشأه فريق من المهندسين ومصممي تجربة المستخدم في Google، عشرات من مكونات واجهة المستخدم الجميلة والعملية، وهو متاح لأجهزة Android وiOS والويب وFlutter.material.io/develop

ما المقصود بالتصميم المتعدد الأبعاد والمكونات المادية لشبكة الإنترنت؟

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

بالنسبة إلى أجهزة الكمبيوتر المكتبي والويب على الأجهزة الجوّالة، يجمع Material Components Web (MDC Web) بين التصميم والهندسة مع مكتبة من المكوّنات لتحقيق الاتساق بين التطبيقات والمواقع الإلكترونية. يوجد كل مكون من مكونات الويب MDC في وحدات العُقد الخاصة بها، ومع تطور نظام التصميم المتعدد الأبعاد، يمكن تحديث هذه المكونات بسهولة لضمان تنفيذ وحدات بكسل متناسقة والالتزام بمعايير تطوير الواجهة الأمامية في Google. يتوفر MDC أيضًا لأجهزة Android وiOS وFlutter.

في هذا الدرس التطبيقي، ستُنشئ صفحة تسجيل دخول باستخدام العديد من مكونات MDC Web.

ما الذي ستنشئه

هذا الدرس التطبيقي هو الأول من بين ثلاثة دروس تطبيقية حول الترميز سترشدك خلال إنشاء تطبيق باسم Shrine، وهو موقع للتجارة الإلكترونية يبيع الملابس والسلع المنزلية. سيوضح لك هذا الدليل كيفية تخصيص المكونات لتعكس أي علامة تجارية أو نمط باستخدام MDC Web.

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

• حقلان نصيان، أحدهما لإدخال اسم مستخدم والآخر لإدخال كلمة مرور
• زران، أحدهما لـ "إلغاء" وواحدة لـ "التالي"
• اسم الموقع الإلكتروني (الضريح)
• صورة لشعار الضريح

يمكن العثور على الدروس التطبيقية حول الترميز ذات الصلة على الرابط التالي:

• MDC-102: بنية وتخطيط التصميم المتعدد الأبعاد
• MDC-103: تحديد التصميم المتعدد الأبعاد استنادًا إلى اللون والشكل والارتفاع والنوع

مع نهاية MDC 103، ستنشئ موقعًا إلكترونيًا يبدو على النحو التالي:

مكوّنات MDC على الويب في هذا الدرس التطبيقي حول الترميز

• حقل نصي
• زرّ
• تمويج

في هذا الدرس التطبيقي، ستستخدم المكوّنات التلقائية التي يوفّرها موقع MDC Web. وستتعلّم كيفية تخصيصها في MDC-103: مظهر التصميم المتعدد الأبعاد استنادًا إلى اللون والشكل والارتفاع والنوع.

المتطلبات

• إصدار حديث من Node.js (يأتي مرفقًا مع npm، وهو مدير حزم JavaScript).
• نموذج الرمز (سيتم تنزيله في الخطوة التالية)
• معرفة أساسية بـ HTML وCSS وJavaScript

نسعى دائمًا إلى تحسين برامجنا التعليمية. ما هو تقييمك لمستوى خبرتك في تطوير البرامج على الويب؟

حديث متوسط بارع

2. إعداد بيئة التطوير

تنزيل تطبيق "الدرس التطبيقي حول الترميز" للمبتدئين

تنزيل تطبيق إجراء التفعيل

يتوفّر تطبيق إجراء التفعيل ضمن دليل material-components-web-codelabs-master/mdc-101/starter. تأكَّد من cd في ذلك الدليل قبل البدء.

لاحظ اللاحقة -master في اسم الدليل الجذر. في حال تنزيل تطبيق المبتدئين من الزر أعلاه، يُرجى إلحاق اللاحقة -master عند الإشارة إلى الدليل الجذر في بقية هذا الدرس التطبيقي حول الترميز.

...أو استنساخها من GitHub

لاستنساخ هذا الدرس التطبيقي حول الترميز من GitHub، شغِّل الأوامر التالية:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

لمزيد من المساعدة: يمكنك إنشاء نسخة طبق الأصل من مستودع من GitHub

تثبيت اعتماديات المشروع

من دليل المبتدئين، شغِّل:

npm install

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

وإذا لم يحدث ذلك، شغِّل npm audit fix.

يستخدم MDC Web معالجًا مسبقًا لـ CSS يُسمى Sass. إذا كنت تستخدم معالجًا مسبقًا لـ CSS مختلفًا (أو لا تستخدمه على الإطلاق)، فلا بأس! يمكنك استخدام Sass إلى جانب المعالج الأولي الحالي من خلال تثبيت واجهة سطر الأوامر sass أو استخدام مكوّن إضافي (مثل sass-loader لـ Webpack، أو gulp-sass لـ Gulp، أو grunt-sass لـ Grunt) في سلسلة أدوات التصميم.

لكي يعمل الرمز البرمجي في المتصفّحات القديمة مثل IE 11، نستخدم محوّل ترجمات يُسمى Babel لتحويل بنية JavaScript ES2015 في MDC على الويب وصولاً إلى بنية JavaScript ES5.

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

تشغيل تطبيق إجراء التفعيل

في الدليل نفسه، نفِّذ ما يلي:

npm start

من المفيد تشغيل npm start في علامة تبويب أو نافذة طرفية منفصلة لكي يستمر الخادم المحلي بالعمل أثناء تعديل الرمز.

سيتم تفعيل webpack-dev-server. عليك توجيه المتصفّح إلى http://localhost:8080/ للاطّلاع على الصفحة.

إذا تعذّر عليك تشغيل npm install أو npm start بنجاح، عليك إيقاف بيئة المطوِّر وتحديد المشاكل فيها وحلّها.

اكتمال عملية النقل بنجاح يجب أن يكون رمز التفعيل لصفحة تسجيل الدخول إلى Shrine قيد التشغيل في متصفحك. من المفترض أن يظهر لك الاسم "Shrine" وشعار الضريح أسفله مباشرة.

إلقاء نظرة على الرمز

البيانات الوصفية باللغة index.html

في دليل المبتدئين، افتح index.html باستخدام أداة تعديل الرموز المفضّلة لديك. يجب أن يحتوي على ما يلي:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

وفي هذه الحالة، يتم استخدام علامة <link> لتحميل ملف bundle-login.css الذي تم إنشاؤه من خلال webpack، وتتضمّن العلامة <script> الملف bundle-login.js. بالإضافة إلى ذلك، نُدرج normalize.css لتوفير عرض متّسق على مختلف المتصفحات، وكذلك خط Roboto من Google Fonts.

الأنماط المخصّصة في login.scss

يتم تصميم مكوّنات MDC على الويب باستخدام Sass، وهي لغة امتداد لـ CSS. يتم تجميع Sass في لغة CSS عادية باستخدام webpack. تمت كتابة ملفات Sass في MDC Web ببنية تُسمى SCSS، ولها امتدادات ملفات تنتهي بالأرقام .scss.

يتم تصميم مكونات الويب MDC باستخدام mdc-* فئات CSS، مثل الفئة mdc-text-field. (يتعامل MDC Web مع بنية DOM الخاصة بها كجزء من واجهة برمجة التطبيقات العامة الخاصة بها).

بوجه عام، ننصحك بإجراء تعديلات على النمط المخصّص في المكوّنات باستخدام فئاتك الخاصة. ربما لاحظت بعض فئات CSS المخصصة في HTML أعلاه، مثل shrine-logo. يتم تحديد هذه الأنماط في login.scss لإضافة أنماط أساسية إلى الصفحة.

افتح login.scss وستظهر لك الأنماط التالية لصفحة تسجيل الدخول:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

من المحتمل أنّك لاحظت أيضًا home.scss وhome.js. سيتم استخدام هذه الرموز في الدرس التطبيقي MDC-102 حول الترميز، ويمكن تجاهلها في الوقت الحالي.

بعد أن تعرّفت على رمز إجراء التفعيل، لنبدأ بتنفيذ المكوّن الأول.

3- إضافة حقول نصية

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

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

يمكنك الاطّلاع على المزيد من المعلومات حول الحقول النصية المحسّنة في المقالة ضمن "إرشادات المواد".

تثبيت حقل نص MDC

يتم نشر مكونات ويب MDC عبر حزم NPM. لتثبيت الحزمة لمكون الحقل النصي، قم بتشغيل:

npm install @material/textfield@^6.0.0

يمكنك أيضًا تثبيت جميع مكونات ويب MDC في وقت واحد عن طريق تنفيذ:

npm install material-components-web@^6.0.0

يمكنك الاطلاع على مزيد من المعلومات حول استخدام حزمة ويب MDC الرئيسية هنا.

إضافة HTML

في index.html، أضِف ما يلي داخل العنصر <form> في النص:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

تتألف بنية DOM لحقل نص MDC من عدة أجزاء:

• العنصر الرئيسي: mdc-text-field
• العناصر الفرعية mdc-text-field__ripple, mdc-text-field__input وmdc-floating-label وmdc-line-ripple

ملاحظة: تأتي الشرطة السفلية المزدوجة (__) والواصلة المزدوجة (--) في أسماء أدوات الاختيار هذه من نمط BEM، وهي طريقة تُستخدَم لتنظيم فئات CSS دلاليًا. يتّبع MDC Web نسخة معدّلة من هذا النمط، كما هو موضّح في هذا الدرس التطبيقي حول الترميز.

إضافة خدمة مقارنة الأسعار (CSS)

في login.scss، أضِف عبارة الاستيراد التالية بعد عملية الاستيراد الحالية:

@import "@material/textfield/mdc-text-field";

في الملف نفسه، أضف الأنماط التالية لمحاذاة الحقول النصية وتوسيطها:

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

إضافة JavaScript

افتح login.js، وهو فارغ حاليًا. أضف التعليمة البرمجية التالية لاستيراد الحقول النصية وإنشاء مثيل لها:

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

إضافة تحقُّق من HTML5

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

عليك القيام بما يلي:

• أضِف السمة required إلى عناصر mdc-text-field__input في الحقلين النصيين اسم المستخدم وكلمة المرور.
• ضبط السمة minlength للعنصر mdc-text-field__input في حقل نص كلمة المرور على "8"

اضبط عنصرَي <label class="mdc-text-field mdc-text-field--filled"> ليصبحا كما يلي:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

يُرجى إعادة تحميل الصفحة على http://localhost:8080/. يُفترض أن تظهر الآن صفحة تحتوي على حقلين نصيين لاسم المستخدم وكلمة المرور!

انقر على الحقول النصية للاطلاع على الرسوم المتحركة للتصنيف العائم والرسوم المتحركة لتموج الخطوط (خط الحد السفلي الذي يموج للخارج):

لمحة عن الحقول النصية:

يستخدم حقل نص MDC النصي عنصر <input> أصليًا بتنسيق HTML، وبالتالي يمكن استخدامه مع عناصر <form> الأصلية في HTML.

• يعرض حقل MDC النصي حالات التمرير والتركيز تلقائيًا.
• يتضمن حقل نص MDC العديد من الميزات ومتغيرات النمط، مثل النص المساعد وإقران الرموز وشكل نمط محدد ومنطقة نصية. يمكنك الاطّلاع عليها هنا.

4. إضافة أزرار

بعد ذلك، سنضيف زرَّين إلى صفحة تسجيل الدخول: "إلغاء" و"التالي". سنستخدم مكون زر MDC، إلى جانب مكون تمويج MDC، لإكمال تأثير تموي الحبر الشهير Material Design.

زر تثبيت MDC

لتثبيت الحزمة لمكون الزر، شغِّل:

npm install @material/button@^6.0.0

إضافة HTML

في index.html، أضِف ما يلي أسفل علامة الإغلاق للعنصر <label class="mdc-text-field mdc-text-field--filled password">:

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

بالنسبة إلى زر "إلغاء" فإننا نستخدم نمط الزر الافتراضي. ومع ذلك، فإن زر "التالي" يستخدم صيغة نمط مرتفعة، والتي يُشار إليها من خلال الفئة mdc-button--raised.

لمحاذاتهما بسهولة لاحقًا، نلف عنصرَي mdc-button في عنصر <div>.

ملاحظة: لا يتطلّب مكوّن زر MDC على ويب MDC استخدام JavaScript، ما يجعلها أخف وأسرع عند الاستخدام مع إمكانية الاتصال المحدود بالشبكة.

إضافة خدمة مقارنة الأسعار (CSS)

في login.scss، أضِف عبارة الاستيراد التالية بعد عمليات الاستيراد الحالية:

@import "@material/button/mdc-button";

لمحاذاة الأزرار وإضافة هامش حولها، أضِف الأنماط التالية إلى login.scss:

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

إضافة تمويج الحبر إلى الأزرار

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

لتثبيت الحزمة لمكون تمويج، شغِّل:

npm install @material/ripple@^6.0.0

في أعلى login.js، أضِف عبارة الاستيراد التالية:

import {MDCRipple} from '@material/ripple';

لإنشاء مثيل التموجات، أضف ما يلي إلى login.js:

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

نظرًا لأننا لسنا بحاجة للاحتفاظ بمرجع إلى مثيل الأمواج، فلا توجد حاجة لتعيينه إلى متغير.

هذا كل شيء! إعادة تحميل الصفحة ستظهر موجة الحبر عند النقر على كل زر.

هناك العديد من متغيرات نمط زر MDC، مثل غير مرتفع ومخطط. يمكنك الاطّلاع عليها هنا.

املأ الحقول النصية بقيم صالحة، ثم اضغط على "NEXT" . أحسنت. ستواصل العمل على هذه الصفحة في MDC-102.

ملاحظة: لأغراض هذا التمرين، يتم إرسال النموذج عبر HTTP GET، ولا تتوفر معالجة من جهة الخادم. قد يستخدم أي موقع إنتاج أو تطبيق طلب HTTP POST (من خلال إضافة method="POST" إلى العنصر <form>) لإرساله إلى نقطة نهاية للخادم والتحقّق من معلومات تسجيل الدخول.

5- ملخّص

باستخدام ترميز HTML الأساسي وبضعة أسطر فقط من CSS وJavaScript، ساعدتك "مكونات المواد" لمكتبة الويب في إنشاء صفحة تسجيل دخول جميلة تتوافق مع إرشادات التصميم المتعدد الأبعاد، وتبدو وتعمل بشكل متسق عبر جميع الأجهزة.

يتوفّر تطبيق MDC-101 المكتمل في هذا الدليل: material-components-web-codelabs/mdc-101/complete.

يمكنك اختبار نسختك من الصفحة مقابل الصفحة في هذا الدليل. ولا تنسَ تشغيل npm install في هذا الدليل أولاً.

الخطوات التالية

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

يمكنك الانتقال إلى MDC-102: بنية التصميم المتعدد الأبعاد والتنسيق للتعرّف على درج التنقّل وقائمة الصور. شكرًا لتجربة Material Components. نأمل أن تكون قد استفدت من هذا الدرس التطبيقي حول الترميز.

تمكنتُ من إكمال هذا الدرس التطبيقي حول الترميز بقدرٍ معقول من الوقت والجهد

أوافق بشدة أوافق ليست دقيقة ولا غير دقيقة لا أوافق لا أوافق أبدًا

أود مواصلة استخدام Material Components في المستقبل

أوافق بشدة أوافق ليست دقيقة ولا غير دقيقة لا أوافق لا أوافق أبدًا