1. مقدمة
تساعد Material Components (MDC) المطوّرين في تنفيذ التصميم المتعدد الأبعاد. تم إنشاء MDC بواسطة فريق من المهندسين ومصممي تجربة المستخدم في Google، وتتضمّن عشرات المكوّنات الجميلة والوظيفية لواجهة المستخدم، وهي متاحة على Android وiOS والويب وFlutter.material.io/develop |
في الدرس التطبيقي حول الترميز MDC-101، استخدَمت مكوّنَين من "مكوّنات التصميم المتعدد الأبعاد" (MDC) لإنشاء واجهة مستخدم لصفحة تسجيل الدخول: حقل النص والزر. لنوسّع الآن نطاق هذا المثال من خلال إضافة عناصر التنقّل والبنية والبيانات.
ما ستنشئه
في هذا الدرس التطبيقي حول الترميز، ستنشئ صفحة رئيسية لتطبيق اسمه Shrine، وهو تطبيق للتجارة الإلكترونية يبيع الملابس والسلع المنزلية. ستتضمّن هذه الرسالة ما يلي:
- لائحة التنقّل
- قائمة صور مليئة بالمنتجات
مكوّنات MDC Web في هذا الدرس التطبيقي حول الترميز
- الدرج
- قائمة الصور
المتطلبات
- إصدار حديث من Node.js (الذي يأتي مجمّعًا مع npm، وهي أداة لإدارة حِزم JavaScript)
- نموذج الرمز البرمجي (سيتم تنزيله في الخطوة التالية)
- معرفة أساسية بلغات HTML وCSS وJavaScript
ما هو تقييمك لمستوى خبرتك في تطوير الويب؟
2. إعداد بيئة التطوير
هل سبق لك المشاركة في دورة MDC-101؟
إذا أكملت MDC-101، من المفترض أن يكون الرمز البرمجي جاهزًا لهذا الدرس التطبيقي. انتقِل إلى الخطوة 3: إضافة قائمة تنقّل.
تنزيل تطبيق الدرس التطبيقي للمبتدئين
يقع تطبيق البداية في دليل material-components-web-codelabs-master/mdc-102/starter. احرص على cd في هذا الدليل قبل البدء.
...أو استنسِخه من GitHub
لاستنساخ هذا الدرس التطبيقي حول الترميز من GitHub، شغِّل الأوامر التالية:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-102/starter
تثبيت التبعيات الخاصة بالمشروع
يجب أن يكون الدليل الحالي هو material-components-web-codelabs/mdc-102/starter.. نفِّذ الأمر التالي من هناك:
npm install
بعد ظهور الكثير من الأنشطة، من المفترض أن تعرض وحدة التحكّم عملية تثبيت ناجحة:
تشغيل تطبيق المبتدئين
في الدليل نفسه، نفِّذ ما يلي:
npm start
سيبدأ webpack-dev-server. انتقِل بمتصفّحك إلى http://localhost:8080/ للاطّلاع على الصفحة.
اكتمال النقل بنجاح من المفترض أن تظهر لك صفحة تسجيل الدخول إلى Shrine من برنامج MDC-101 التعليمي.
بعد أن أصبحت صفحة تسجيل الدخول تبدو جيدة، لنملأ التطبيق ببعض المنتجات. أدخِل اسم مستخدم وكلمة مرور صالحَين، ثم انقر على الزر "التالي" للانتقال إلى الصفحة الرئيسية.
3- إضافة لائحة تنقّل
عندما يسجّل المستخدم الدخول، تظهر صفحة رئيسية مكتوب عليها "أحسنت!". رائع. ولكن يحتاج المستخدم الآن إلى إجراءات يتّخذها وإلى معرفة مكانه في التطبيق، لذا لنضِف عناصر التنقّل.
توفّر أنماط التنقّل في التصميم المتعدد الأبعاد درجة عالية من قابلية الاستخدام. توفّر قائمة التنقّل في Material إمكانية التنقّل والوصول السريع إلى إجراءات أخرى. لنضِف واحدًا.
تثبيت "الدرج والقائمة" في 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;
}
إضافة JavaScript
علينا إنشاء مثيل لقائمة MDC داخل لوحة التنقّل من أجل التنقّل السليم باستخدام لوحة المفاتيح. افتح الملف home.js، وهو فارغ حاليًا، وأضِف الرمز التالي:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));
أعِد تحميل الصفحة على 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 Web. يمكنك استكشاف المزيد من المكوّنات من خلال الانتقال إلى كتالوج MDC Web.
على الرغم من أنّ الصفحة الرئيسية تعمل بشكل كامل، إلا أنّها لا تعبّر بعد عن أي علامة تجارية أو وجهة نظر معيّنة. في MDC-103: تصميم المظاهر في التصميم المتعدد الأبعاد باستخدام الألوان والأشكال والارتفاعات والأنواع، ستخصّص نمط هذه المكوّنات للتعبير عن علامة تجارية عصرية ونابضة بالحياة.