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

1. مقدمة

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

ما هو التصميم المتعدد الأبعاد و"مكوّنات التصميم المتعدد الأبعاد للويب"؟

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

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

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

ما ستنشئه

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

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

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

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

• MDC-102: بنية وتصميم Material Design
• MDC-103: تصميم Material Design باستخدام الألوان والأشكال والارتفاعات والأنواع

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

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

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

في هذا الدرس التطبيقي، ستستخدم المكوّنات التلقائية التي توفّرها 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 Web إلى بنية JavaScript ES5.

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

تشغيل تطبيق المبتدئين

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

npm start

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

سيبدأ webpack-dev-server. انتقِل بمتصفّحك إلى http://localhost:8080/ للاطّلاع على الصفحة.

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

اكتمال النقل بنجاح يجب أن يكون الرمز الأوّلي لصفحة تسجيل الدخول في تطبيق Shrine قيد التشغيل في المتصفّح. يجب أن يظهر لك الاسم "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 Web باستخدام Sass، وهي لغة إضافية للغة CSS. يتم تجميع Sass في CSS عادي باستخدام webpack. تتم كتابة ملفات Sass في MDC Web باستخدام بنية تُعرف باسم SCSS، وتكون لها امتدادات ملفات تنتهي بـ .scss.

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

بشكل عام، ننصحك بإجراء تعديلات على الأنماط المخصّصة للمكوّنات باستخدام فئاتك الخاصة. ربما لاحظت بعض فئات 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، والذي يتضمّن وظيفة مدمجة تعرض تصنيفًا عائمًا وتفعّل تأثير التموج عند اللمس.

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

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

تثبيت حقل MDC النصي

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

npm install @material/textfield@^6.0.0

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

npm install material-components-web@^6.0.0

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

إضافة رمز 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، لإكمال تأثير التموّج المميز في التصميم المتعدد الأبعاد.

تثبيت زر 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 Web استخدام 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 الأخرى، مثل الأزرار غير المرتفعة والأزرار ذات الحدود الخارجية. يمكنك الاطّلاع عليها هنا.

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

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

5- ملخّص

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

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

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

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

"حقل النص" و"الزر" و"التأثير المتتالي" هي ثلاثة مكونات أساسية في مكتبة MDC Web، ولكن هناك المزيد. يمكنك أيضًا استكشاف بقية المكوّنات في MDC Web.

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

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

أوافق بشدة أوافق لا أوافق ولا أعارض لا أوافق لا أوافق أبدًا

أريد مواصلة استخدام "مكوّنات Material" في المستقبل

أوافق بشدة أوافق لا أوافق ولا أعارض لا أوافق لا أوافق أبدًا