MDC-102 Web: بنية المواد وتخطيطها (الويب)

MDC-102 Web:

بنية المواد وتخطيطها (الويب)

لمحة عن هذا الدرس التطبيقي حول الترميز

تاريخ التعديل الأخير: أكتوبر 11, 2020

تأليف: Liz Mitchell, Abhinay Omkar

1. مقدمة

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

في درس تطبيقي عن الترميز MDC-101، استخدمت مكونَين من مكونات المواد (MDC) لإنشاء واجهة مستخدم لصفحة تسجيل الدخول، وهما حقل النص والزر. الآن دعنا نتوسع في ذلك بإضافة التنقل والهيكل والبيانات.

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

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

• لائحة التنقل
• قائمة صور مليئة بالمنتجات

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

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

• MDC-101: أساسيات المكوّنات المادية (MDC)
• MDC-103: تحديد التصميم المتعدد الأبعاد استنادًا إلى اللون والشكل والارتفاع والنوع

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

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

• الدرج
• قائمة الصور

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

المتطلبات

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

ما هو تقييمك لمستوى خبرتك في تطوير البرامج على الويب؟

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

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

هل تريد المتابعة من MDC-101؟

إذا أكملت MDC-101، يجب أن يكون الرمز جاهزًا لهذا الدرس التطبيقي حول الترميز. التخطّي إلى الخطوة 3: إضافة لائحة تنقُّل

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

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

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

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

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

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

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

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

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

من المفترض أن يكون دليلك الحالي على material-components-web-codelabs/mdc-102/starter.، ثم شغِّل الأمر التالي:

npm install

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

يستخدم 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

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

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

اكتمال عملية النقل بنجاح من المفترض أن تظهر لك صفحة تسجيل الدخول إلى Shrine من الدرس التطبيقي MDC-101.

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

أو يمكنك بدلاً من ذلك الانتقال إلى http://localhost:8080/home.html للانتقال إلى الصفحة الرئيسية.

3. إضافة لائحة تنقُّل

عندما يسجِّل المستخدم دخوله، تظهر صفحة رئيسية تعرض رسالة مفادها: "لقد فعلتها". رائع. ولكن الآن يحتاج المستخدم لدينا إلى إجراءات يجب اتخاذها والشعور بمكان وجوده في التطبيق. للمساعدة في ذلك، يمكننا إضافة ميزة التنقّل.

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

توفر أنماط التنقل في Material Design درجة عالية من قابلية الاستخدام. يوفر لائحة التنقل في المواد إمكانية التنقل والوصول السريع إلى الإجراءات الأخرى. دعنا نضيف واحدًا.

تثبيت درج وقائمة MDC

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

npm install @material/drawer @material/list

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

إضافة HTML

في home.html، استبدِل عبارة "لقد فعلتها!" مع الترميز التالي للدرج وعناصره:

<aside class="mdc-drawer shrine-drawer">
  <div class="mdc-drawer__header">
    <svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
      <g>
        <g>
          <path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
             M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
        </g>
        <rect fill="none" width="24" height="24"/>
      </g>
    </svg>
    <h1 class="shrine-title">SHRINE</h1>
  </div>
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
        <span class="mdc-list-item__text">Featured</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Apartment</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Accessories</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Shoes</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Tops</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Bottoms</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Dresses</span>
      </a>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">My Account</span>
      </a>
    </nav>
  </div>
</aside>

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

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

@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";

في أسفل home.scss، أضِف الأنماط التالية:

.shrine-logo-drawer {
  display: block;
  width: 48px;
  padding: 40px 0 0;
  margin: 0 auto;
  fill: currentColor;
}

.shrine-title {
  text-align: center;
  margin: 5px auto;
}

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

إضافة JavaScript

نحتاج إلى إنشاء مثيل لقائمة MDC داخل لائحة التنقل للتنقل بشكل مناسب بلوحة المفاتيح. افتح home.js، وهو فارغ حاليًا، وأضِف الرمز التالي:

import {MDCList} from '@material/list';

new MDCList(document.querySelector('.mdc-list'));

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

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

تحتوي الصفحة الرئيسية الآن على لائحة تنقّل دائمة يعرض عناصر تنقّل مختلفة، مع تفعيل العنصر الأول.

4. إضافة صور تحتوي على تصنيفات نصية

الآن وبعد أن أصبح لتطبيقنا بعض البنية، دعنا ننظم المحتوى من خلال وضعه في قائمة صور.

تم تصميم مكوّن قائمة الصور لعرض مجموعة من الصور بنمط متكرر. وقد تكون هذه الصور مصحوبةً بمعلومات داعمة، مثل التصنيفات النصية.

تثبيت قائمة صور MDC

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

npm install @material/image-list

إضافة HTML لقائمة تحتوي على عنصر واحد

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

في home.html، أضِف رمز HTML التالي بعد نهاية العنصر <aside>:

<ul class="mdc-image-list product-list">
  <li class="mdc-image-list__item">
    <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
    <div class="mdc-image-list__supporting">
      <span class="mdc-image-list__label">Weave keyring</span>
    </div>
  </li>
</ul>

تتضمّن القائمة فئة إضافية، وهي product-list، التي ستطبّق أنماطًا مخصّصة، سواء في هذا الدليل التوجيهي أو في MDC-103.

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

أولاً، في home.scss، أضِف عملية استيراد لأنماط مكوِّنات قائمة الصور بعد عمليات الاستيراد الحالية:

@import "@material/image-list/mdc-image-list";

بعد ذلك، أضف الأنماط التالية بعد أنماط الصفحة الرئيسية الأولية:

.product-list {
  @include mdc-image-list-standard-columns(4);

  overflow: auto;
}

وتوجِّه هذه الأنماط قائمة الصور لعرض الصور على أربعة أعمدة، ما يضمن تمرير قائمة الصور بشكل مستقل عن الدرج.

إعادة تحميل الصفحة من المفترض أن تظهر الصفحة الرئيسية الآن على النحو التالي:

تهدف قائمة الصور إلى عرض العديد من الصور في مجموعة، لذا دعنا نضيف المزيد من الصور لنفهم بشكل أفضل كيفية عمل المكوِّن.

في home.html، انسخ العنصر <li> الحالي:

  <li class="mdc-image-list__item">
    <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
    <div class="mdc-image-list__supporting">
      <span class="mdc-image-list__label">Weave keyring</span>
    </div>
  </li>

ثم ألصِقه بعد العنصر الحالي (قبل علامة الإغلاق </ul>) 15 مرة. سيؤدي ذلك إلى إجمالي 16 صورة. لا تقلق بشأن الصور والعناوين الفريدة في الوقت الحالي، ستحصل على تلك الموارد في MDC-103.

تحديث. الآن يُفترض أن تبدو الصفحة الرئيسية على النحو التالي:

تعرض قائمة الصور أربع صور لكل صف، ويتم حجم الصور تلقائيًا لتناسب مساحة الشاشة المتاحة.

5. ملخّص

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

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

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

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

باستخدام الدرج وقائمة الصور، استخدمت الآن مكونين أساسيين آخرين في Material Design من مكتبة MDC على الويب! يمكنك الاطّلاع على المزيد من المكونات من خلال الانتقال إلى كتالوج MDC على الويب.

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

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

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

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

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