MDC-101 ওয়েব: ম্যাটেরিয়াল কম্পোনেন্টস (MDC) বেসিক (ওয়েব)

১. ভূমিকা

logo_components_color_2x_web_96dp.png

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

ওয়েবের জন্য ম্যাটেরিয়াল ডিজাইন এবং ম্যাটেরিয়াল কম্পোনেন্ট বলতে কী বোঝায়?

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

ডেস্কটপ এবং মোবাইল ওয়েবের জন্য, ম্যাটেরিয়াল কম্পোনেন্টস ওয়েব (MDC Web) অ্যাপ এবং ওয়েবসাইট জুড়ে সামঞ্জস্যতা তৈরির জন্য কম্পোনেন্টের একটি লাইব্রেরির মাধ্যমে ডিজাইন এবং ইঞ্জিনিয়ারিংকে একত্রিত করে। MDC Web-এর প্রতিটি কম্পোনেন্ট নিজস্ব নোড মডিউলে থাকে, তাই ম্যাটেরিয়াল ডিজাইন সিস্টেমের বিবর্তনের সাথে সাথে, সামঞ্জস্যপূর্ণ ও পিক্সেল-পারফেক্ট বাস্তবায়ন এবং গুগলের ফ্রন্ট-এন্ড ডেভেলপমেন্ট স্ট্যান্ডার্ড মেনে চলা নিশ্চিত করতে এই কম্পোনেন্টগুলোকে সহজেই আপডেট করা যায়। MDC অ্যান্ড্রয়েড , iOS এবং ফ্লাটারের জন্যও উপলব্ধ।

এই কোডল্যাবে, আপনি MDC Web-এর কয়েকটি কম্পোনেন্ট ব্যবহার করে একটি লগইন পেজ তৈরি করবেন।

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

এই কোডল্যাবটি তিনটি কোডল্যাবের মধ্যে প্রথম, যা আপনাকে ‘শ্রাইন’ নামক একটি অ্যাপ তৈরি করতে নির্দেশনা দেবে। এটি একটি ই-কমার্স ওয়েবসাইট যা পোশাক এবং গৃহস্থালির সামগ্রী বিক্রি করে। এতে দেখানো হবে কীভাবে আপনি MDC Web ব্যবহার করে যেকোনো ব্র্যান্ড বা স্টাইল অনুযায়ী কম্পোনেন্টগুলো কাস্টমাইজ করতে পারেন।

এই কোডল্যাবে, আপনি Shrine-এর জন্য একটি লগইন পেজ তৈরি করবেন যাতে নিম্নলিখিত বিষয়গুলো থাকবে:

  • দুটি টেক্সট ফিল্ড, একটি ইউজারনেম এবং অন্যটি পাসওয়ার্ড দেওয়ার জন্য।
  • দুটি বাটন, একটি 'বাতিল' করার জন্য এবং অন্যটি 'পরবর্তী' করার জন্য।
  • ওয়েবসাইটের নাম (শ্রাইন)
  • শ্রাইনের লোগোর একটি ছবি

674d1ca8cfa98c9.png

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

  • টেক্সট ফিল্ড
  • বোতাম
  • রিপল

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

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

আমরা সবসময় আমাদের টিউটোরিয়ালগুলো আরও উন্নত করার চেষ্টা করি। ওয়েব ডেভেলপমেন্টে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?

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

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

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

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

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

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

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

প্রকল্পের নির্ভরতা ইনস্টল করুন

স্টার্টার ডিরেক্টরি থেকে, চালান:

npm install

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

204c063d8fd78f94.png

যদি তা না হয়, তাহলে npm audit fix চালান।

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

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

npm start

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

17c139dc5a9bebaf.png

সফল! Shrine-এর লগইন পেজের স্টার্টার কোডটি আপনার ব্রাউজারে চালু হয়ে যাওয়ার কথা। আপনি "Shrine" নামটি এবং তার ঠিক নিচে Shrine-এর লোগোটি দেখতে পাবেন।

f7e3f354df8d84b8.png

কোডটি দেখুন

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>

এখানে, webpack দ্বারা জেনারেট করা bundle-login.css ফাইলটি লোড করার জন্য একটি <link> ট্যাগ ব্যবহার করা হয়েছে এবং bundle-login.js ফাইলটিকে অন্তর্ভুক্ত করার জন্য একটি <script> ট্যাগ ব্যবহার করা হয়েছে। এছাড়াও, বিভিন্ন ব্রাউজারে সামঞ্জস্যপূর্ণ রেন্ডারিংয়ের জন্য আমরা normalize.css এবং Google Fonts-এর Roboto ফন্টটি অন্তর্ভুক্ত করেছি।

login.scss এ কাস্টম স্টাইল

MDC ওয়েব কম্পোনেন্টগুলোকে mdc-* CSS ক্লাস ব্যবহার করে স্টাইল করা হয়, যেমন mdc-text-field ক্লাসটি। (MDC ওয়েব তার DOM কাঠামোকে তার পাবলিক API-এর অংশ হিসেবে গণ্য করে।)

সাধারণত, কম্পোনেন্টগুলোতে নিজস্ব ক্লাস ব্যবহার করে কাস্টম স্টাইল পরিবর্তন করার পরামর্শ দেওয়া হয়। আপনি হয়তো উপরের HTML-এ কিছু কাস্টম CSS ক্লাস লক্ষ্য করেছেন, যেমন shrine-logo । পেজে মৌলিক স্টাইল যোগ করার জন্য এই স্টাইলগুলো login.scss এ সংজ্ঞায়িত করা হয়েছে।

login.scss খুলুন এবং আপনি লগইন পেজের জন্য নিম্নলিখিত স্টাইলগুলো দেখতে পাবেন:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

এখন যেহেতু আপনি স্টার্টার কোডের সাথে পরিচিত হয়েছেন, চলুন আমাদের প্রথম কম্পোনেন্টটি ইমপ্লিমেন্ট করি।

৩. টেক্সট ফিল্ড যোগ করুন

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

9ad8a7db0b50f07d.png

এমডিসি টেক্সট ফিল্ড ইনস্টল করুন

MDC ওয়েব কম্পোনেন্টগুলো NPM প্যাকেজের মাধ্যমে প্রকাশিত হয়। টেক্সট ফিল্ড কম্পোনেন্টের প্যাকেজটি ইনস্টল করতে, চালান:

npm install @material/textfield@^6.0.0

HTML যোগ করুন

index.html ফাইলের body-তে থাকা <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>

MDC টেক্সট ফিল্ডের DOM কাঠামোটি কয়েকটি অংশ নিয়ে গঠিত:

  • প্রধান উপাদান, mdc-text-field
  • উপ-উপাদানসমূহ mdc-text-field__ripple, mdc-text-field__input , mdc-floating-label , এবং mdc-line-ripple

CSS যোগ করুন

login.scss ফাইলে, বিদ্যমান ইম্পোর্ট স্টেটমেন্টটির পরে নিম্নলিখিত ইম্পোর্ট স্টেটমেন্টটি যোগ করুন:

@import "@material/textfield/mdc-text-field";

একই ফাইলে, টেক্সট ফিল্ডগুলোকে অ্যালাইন ও সেন্টারে করার জন্য নিম্নলিখিত স্টাইলগুলো যোগ করুন:

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

জাভাস্ক্রিপ্ট যোগ করুন

login.js খুলুন, যেটি বর্তমানে খালি আছে। টেক্সট ফিল্ডগুলো ইম্পোর্ট এবং ইনস্ট্যানশিয়েট করতে নিম্নলিখিত কোডটি যোগ করুন: 

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

HTML5 বৈধতা যোগ করুন

HTML5-এর ফর্ম ভ্যালিডেশন এপিআই দ্বারা প্রদত্ত অ্যাট্রিবিউট ব্যবহার করে টেক্সট ফিল্ডগুলো প্রকাশ করে যে, ফিল্ডের ইনপুটটি বৈধ নাকি এতে কোনো ত্রুটি রয়েছে।

আপনার উচিত:

  • ইউজারনেম এবং পাসওয়ার্ড উভয় টেক্সট ফিল্ডের mdc-text-field__input এলিমেন্টগুলোতে required অ্যাট্রিবিউটটি যোগ করুন।
  • পাসওয়ার্ড টেক্সট ফিল্ডের mdc-text-field__input এলিমেন্টের minlength অ্যাট্রিবিউটের মান "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/ -এ পৃষ্ঠাটি রিফ্রেশ করুন। এখন আপনি ইউজারনেম এবং পাসওয়ার্ডের জন্য দুটি টেক্সট ফিল্ডসহ একটি পৃষ্ঠা দেখতে পাবেন!

ফ্লোটিং লেবেল অ্যানিমেশন এবং লাইন রিপল অ্যানিমেশন (নিচের বর্ডার লাইনটি যা বাইরের দিকে ঢেউয়ের মতো ছড়িয়ে পড়ে) দেখতে টেক্সট ফিল্ডগুলোতে ক্লিক করুন:

c0b341e9949a6183.gif

৪. বাটন যোগ করুন

এরপরে, আমরা আমাদের লগইন পেজে দুটি বাটন যোগ করব: 'Cancel' এবং 'Next'। ম্যাটেরিয়াল ডিজাইনের আইকনিক ইঙ্ক রিপল এফেক্টটি সম্পূর্ণ করতে আমরা MDC Button কম্পোনেন্টের সাথে MDC Ripple কম্পোনেন্ট ব্যবহার করব।

674d1ca8cfa98c9.png

এমডিসি বাটন ইনস্টল করুন

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

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>

'Cancel' বাটনের জন্য আমরা ডিফল্ট বাটন স্টাইল ব্যবহার করছি। তবে, 'Next' বাটনটিতে একটি রেইজড স্টাইল ভ্যারিয়েন্ট ব্যবহার করা হয়েছে, যা mdc-button--raised ক্লাস দ্বারা নির্দেশিত।

পরবর্তীতে সহজে সারিবদ্ধ করার জন্য, আমরা দুটি mdc-button এলিমেন্টকে একটি <div> এলিমেন্টের মধ্যে রাখি।

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

বাটনগুলোতে কালির ঢেউ যোগ করুন

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

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

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'));

যেহেতু আমাদের রিপল ইনস্ট্যান্সটির রেফারেন্স ধরে রাখার প্রয়োজন নেই, তাই এটিকে কোনো ভেরিয়েবলে অ্যাসাইন করারও দরকার নেই।

ব্যাস! পৃষ্ঠাটি রিফ্রেশ করুন। প্রতিটি বোতামে ক্লিক করলে কালির একটি ঢেউ দেখা যাবে।

bb19b0a567977bde.gif

টেক্সট ফিল্ডগুলোতে সঠিক মান পূরণ করুন এবং "NEXT" বোতামটি চাপুন। আপনি পেরেছেন! আপনি MDC-102-এ এই পৃষ্ঠায় আপনার কাজ চালিয়ে যাবেন।

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

সাধারণ HTML মার্কআপ এবং মাত্র কয়েক লাইন CSS ও জাভাস্ক্রিপ্ট ব্যবহার করে, ‘Material Components for the web’ লাইব্রেরিটি আপনাকে একটি সুন্দর লগইন পেজ তৈরি করতে সাহায্য করেছে যা ম্যাটেরিয়াল ডিজাইন নির্দেশিকা মেনে চলে এবং সকল ডিভাইসে এর চেহারা ও আচরণ সামঞ্জস্যপূর্ণ থাকে।

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

টেক্সট ফিল্ড, বাটন এবং রিপল হলো এমডিসি ওয়েব লাইব্রেরির তিনটি মূল উপাদান, কিন্তু আরও অনেক উপাদান রয়েছে! আপনি এমডিসি ওয়েব-এ বাকি উপাদানগুলোও অন্বেষণ করতে পারেন।

ন্যাভিগেশন ড্রয়ার এবং ইমেজ লিস্ট সম্পর্কে জানতে আপনি MDC-102: Material Design Structure and Layout- এ যেতে পারেন। Material Components ব্যবহার করার জন্য ধন্যবাদ। আমরা আশা করি আপনি এই কোডল্যাবটি উপভোগ করেছেন!

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

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

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

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