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

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

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

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

بالنسبة إلى أجهزة الكمبيوتر المكتبي والويب على الأجهزة الجوّالة، تجمع Material Components Web (MDC Web) بين التصميم والهندسة مع مكتبة من المكوّنات لضمان الاتساق في جميع التطبيقات والمواقع الإلكترونية. تتوفّر كل مكوّنات MDC Web في وحدات عقدة خاصة بها، لذا مع تطوّر نظام Material Design، يمكن تعديل هذه المكوّنات بسهولة لضمان تنفيذها بشكل متسق ودقيق والالتزام بمعايير تطوير الواجهة الأمامية من Google. تتوفّر "تصاميم المواد" أيضًا على 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

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

مبتدئ متوسط متقدّم

تنزيل تطبيق الدرس التطبيقي الأوّلي

تنزيل تطبيق المبتدئين

يقع التطبيق الأولي في الدليل 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، ويمكن تجاهلها في الوقت الحالي.

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

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

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

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

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

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

npm install @material/textfield

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

npm install material-components-web

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

إضافة رمز HTML

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

<div class="mdc-text-field username">
  <input type="text" class="mdc-text-field__input" id="username-input" name="username">
  <label class="mdc-floating-label" for="username-input">Username</label>
  <div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
  <input type="password" class="mdc-text-field__input" id="password-input" name="password">
  <label class="mdc-floating-label" for="password-input">Password</label>
  <div class="mdc-line-ripple"></div>
</div>

تتكوّن بنية نموذج كائن المستند (DOM) لحقل النص في MDC من عدة أجزاء:

• العنصر الرئيسي، mdc-text-field
• العناصر الفرعية 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: block;
  width: 300px;
  margin: 20px auto;
}

إضافة 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"

عدِّل العنصرَين <div class="mdc-text-field"> ليصبحا على النحو التالي:

<div class="mdc-text-field username">
  <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
  <label class="mdc-floating-label" for="username-input">Username</label>
  <div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
  <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
  <label class="mdc-floating-label" for="password-input">Password</label>
  <div class="mdc-line-ripple"></div>
</div>

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

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

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

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

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

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

تثبيت زر MDC

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

npm install @material/button

إضافة رمز HTML

في index.html، أضِف ما يلي أسفل علامة الإغلاق الخاصة بالعنصر <div class="mdc-text-field 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 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

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

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

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

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

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

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

هناك العديد من أشكال MDC Button الأخرى، مثل الأزرار غير المرتفعة والأزرار ذات الحدود الخارجية. يمكنك الاطّلاع عليها هنا.

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

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

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

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

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

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

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

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

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

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

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

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