MDC-102 ওয়েব: উপাদানের কাঠামো এবং বিন্যাস (ওয়েব)

১. ভূমিকা

logo_components_color_2x_web_96dp.png

ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়ন করতে সাহায্য করে। গুগলের একদল ইঞ্জিনিয়ার এবং ইউএক্স ডিজাইনার দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI কম্পোনেন্ট রয়েছে এবং এটি অ্যান্ড্রয়েড, আইওএস, ওয়েব এবং ফ্লাটারের জন্য উপলব্ধ। material.io/develop

কোডল্যাব MDC-101-এ, আপনি একটি লগইন পেজের UI তৈরি করতে দুটি ম্যাটেরিয়াল কম্পোনেন্ট (MDC) ব্যবহার করেছেন: টেক্সট ফিল্ড এবং বাটন। এখন চলুন নেভিগেশন, স্ট্রাকচার এবং ডেটা যোগ করে এটিকে আরও বিস্তৃত করি।

আপনি যা তৈরি করবেন

এই কোডল্যাবে, আপনি Shrine নামক একটি অ্যাপের জন্য একটি হোম পেজ তৈরি করবেন, যেটি পোশাক এবং গৃহস্থালীর সামগ্রী বিক্রি করে এমন একটি ই-কমার্স অ্যাপ। এতে থাকবে:

  • একটি নেভিগেশন ড্রয়ার
  • পণ্যের একটি ছবির তালিকা

e2f359c254988d75.png

এই কোডল্যাবে MDC ওয়েব উপাদানসমূহ

  • ড্রয়ার
  • ছবির তালিকা

আপনার যা যা লাগবে

  • Node.js- এর একটি সাম্প্রতিক সংস্করণ (যা npm , একটি জাভাস্ক্রিপ্ট প্যাকেজ ম্যানেজার, সহ আসে)।
  • নমুনা কোড (যা পরবর্তী ধাপে ডাউনলোড করতে হবে)
  • HTML, CSS, এবং JavaScript-এর প্রাথমিক জ্ঞান

ওয়েব ডেভেলপমেন্টে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?

শিক্ষানবিশ মধ্যবর্তী দক্ষ

২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন।

MDC-101 এর ধারাবাহিকতায়?

আপনি যদি MDC-101 সম্পন্ন করে থাকেন, তাহলে আপনার কোড এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। সরাসরি ধাপ ৩-এ যান: একটি নেভিগেশন ড্রয়ার যোগ করুন।

স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন

স্টার্টার অ্যাপটি material-components-web-codelabs-master/mdc-102/starter ডিরেক্টরিতে অবস্থিত। কাজ শুরু করার আগে অবশ্যই ওই ডিরেক্টরিতে cd ।

...অথবা গিটহাব থেকে এটি ক্লোন করুন

গিটহাব থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলো চালান:

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

অনেক কার্যকলাপ প্রদর্শিত হওয়ার পর, আপনার টার্মিনালে একটি সফল ইনস্টলেশন দেখানো উচিত:

23003b0e5fdf9077.png

স্টার্টার অ্যাপটি চালান

একই ডিরেক্টরিতে, এটি চালান:

npm start

webpack-dev-server চালু হবে। পৃষ্ঠাটি দেখতে আপনার ব্রাউজারে http://localhost:8080/ খুলুন।

4e04758051693865.png

সফল! আপনি MDC-101 কোডল্যাব থেকে Shrine লগইন পেজটি দেখতে পাবেন।

6c206785707bee2e.png

এখন যেহেতু লগইন পেজটি দেখতে ঠিকঠাক লাগছে, চলুন অ্যাপটিতে কিছু প্রোডাক্ট যোগ করি। একটি বৈধ ইউজারনেম এবং পাসওয়ার্ড দিন, তারপর হোম পেজে যাওয়ার জন্য "Next" বাটনে ক্লিক করুন।

৩. একটি নেভিগেশন ড্রয়ার যোগ করুন

যখন ব্যবহারকারী সাইন ইন করেন, তখন একটি হোমপেজ আসে যেখানে লেখা থাকে, "আপনি পেরেছেন!" এটা চমৎকার! কিন্তু এখন আমাদের ব্যবহারকারীর কিছু কাজ করার সুযোগ এবং অ্যাপের মধ্যে তিনি কোথায় আছেন, সে সম্পর্কে একটি ধারণা প্রয়োজন। এই কাজে সাহায্য করার জন্য, চলুন নেভিগেশন যোগ করা যাক।

ম্যাটেরিয়াল ডিজাইনের নেভিগেশন প্যাটার্নগুলো উচ্চ মাত্রার ব্যবহারযোগ্যতা প্রদান করে। ম্যাটেরিয়াল নেভিগেশন ড্রয়ারটি নেভিগেশন এবং অন্যান্য অ্যাকশনে দ্রুত অ্যাক্সেসের সুবিধা দেয়। চলুন, একটি যোগ করা যাক।

MDC ড্রয়ার এবং তালিকা ইনস্টল করুন

ড্রয়ার কম্পোনেন্টের প্যাকেজগুলো ইনস্টল করতে, চালান:

npm install @material/drawer @material/list

HTML যোগ করুন

home.html ফাইলে, "You did it!"-এর পরিবর্তে ড্রয়ার এবং এর আইটেমগুলোর জন্য নিম্নলিখিত মার্কআপটি ব্যবহার করুন:

<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 লিস্টটি ইনস্ট্যানশিয়েট করতে হবে। home.js খুলুন, যেটি বর্তমানে খালি আছে, এবং নিম্নলিখিত কোডটি যোগ করুন:

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

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

http://localhost:8080/home.html -এ পৃষ্ঠাটি রিফ্রেশ করুন। আপনার হোম পেজটি এখন দেখতে এইরকম হবে:

9c145acccbc28214.png

এখন হোম পেজে একটি স্থায়ী নেভিগেশন ড্রয়ার রয়েছে, যেখানে বিভিন্ন নেভিগেশন আইটেম প্রদর্শিত হয় এবং প্রথম আইটেমটি সক্রিয় থাকে।

৪. টেক্সট লেবেল সহ ছবি যোগ করুন

এখন যেহেতু আমাদের অ্যাপটির একটি কাঠামো তৈরি হয়েছে, চলুন বিষয়বস্তুগুলোকে একটি ছবির তালিকায় রেখে সাজিয়ে নিই।

এমডিসি ইমেজ তালিকা ইনস্টল করুন

ইমেজ লিস্ট কম্পোনেন্টের প্যাকেজটি ইনস্টল করতে, চালান:

npm install @material/image-list

একটি আইটেম সহ একটি তালিকার জন্য HTML যোগ করুন।

নেভিগেশন ড্রয়ারের পাশে একটি ইমেজ লিস্ট যোগ করার মাধ্যমে শুরু করা যাক। আমরা লিস্টটি একটিমাত্র আইটেম দিয়ে শুরু করব, যেটিতে একটি ছবি এবং একটি টেক্সট লেবেল থাকবে।

home.html ফাইলে <aside> এলিমেন্টের শেষের পর নিম্নলিখিত HTML কোডটি যোগ করুন: 

<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;
}

এই স্টাইলগুলো ইমেজ লিস্টকে চারটি কলামে ছবি প্রদর্শন করার নির্দেশ দেয় এবং এটি নিশ্চিত করে যে ইমেজ লিস্টটি ড্রয়ার থেকে স্বাধীনভাবে স্ক্রল করতে পারে।

পৃষ্ঠাটি রিফ্রেশ করুন। হোম পেজটি এখন দেখতে এইরকম হবে:

5362b330204ffd58.png

একটি ইমেজ লিস্টের উদ্দেশ্য হলো কোনো কালেকশনের অনেকগুলো ছবি প্রদর্শন করা, তাই কম্পোনেন্টটি কীভাবে কাজ করে তা আরও ভালোভাবে দেখার জন্য চলুন আরও কিছু ছবি যোগ করি।

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> ট্যাগের আগে) এটি ১৫ বার পেস্ট করুন। এর ফলে মোট ১৬টি ছবি তৈরি হবে। আপাতত স্বতন্ত্র ছবি এবং শিরোনাম নিয়ে চিন্তা করবেন না; MDC-103-এ আপনি সে বিষয়ে জানতে পারবেন।

রিফ্রেশ করুন। এখন হোম পেজটি দেখতে এইরকম হবে:

e2f359c254988d75.png

ছবির তালিকায় প্রতি সারিতে চারটি করে ছবি প্রদর্শিত হয় এবং ছবিগুলো স্ক্রিনের উপলব্ধ স্থান অনুযায়ী স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করে।

৫. পুনরালোচনা

আপনার সাইটের একটি সাধারণ কার্যপ্রবাহ রয়েছে যা ব্যবহারকারীকে সাইন-ইন পেজ থেকে হোম পেজে নিয়ে যায়, যেখানে পণ্যগুলো দেখা যায়। মাত্র কয়েকটি কোডের লাইনে, আপনি কন্টেন্ট উপস্থাপনের জন্য একটি ড্রয়ার এবং একটি ছবির তালিকা যুক্ত করেছেন। হোম পেজটিতে এখন একটি সাধারণ কাঠামো এবং কন্টেন্ট রয়েছে।

পরবর্তী পদক্ষেপ

ড্রয়ার এবং ইমেজ লিস্টের মাধ্যমে, আপনি এখন এমডিসি ওয়েব লাইব্রেরি থেকে আরও দুটি ম্যাটেরিয়াল ডিজাইন কোর কম্পোনেন্ট ব্যবহার করেছেন! আপনি এমডিসি ওয়েব ক্যাটালগ পরিদর্শন করে আরও কম্পোনেন্ট সম্পর্কে জানতে পারেন।

হোম পেজটি সম্পূর্ণরূপে কার্যকর হলেও, এটি এখনও কোনো নির্দিষ্ট ব্র্যান্ড বা দৃষ্টিভঙ্গি প্রকাশ করে না। MDC-103: Material Design Theming with Color, Shape, Elevation and Type কোর্সে , আপনি একটি প্রাণবন্ত ও আধুনিক ব্র্যান্ড ফুটিয়ে তোলার জন্য এই উপাদানগুলোর স্টাইল কাস্টমাইজ করবেন।

আমি যুক্তিসঙ্গত সময় ও শ্রম দিয়ে এই কোডল্যাবটি সম্পন্ন করতে পেরেছি।

দৃঢ়ভাবে একমত একমত নিরপেক্ষ দ্বিমত তীব্রভাবে দ্বিমত পোষণ করি।

আমি ভবিষ্যতে ম্যাটেরিয়াল কম্পোনেন্টস ব্যবহার করা চালিয়ে যেতে চাই।

দৃঢ়ভাবে একমত একমত নিরপেক্ষ দ্বিমত তীব্রভাবে দ্বিমত পোষণ করি।