১. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়ন করতে সাহায্য করে। গুগলের একদল ইঞ্জিনিয়ার এবং ইউএক্স ডিজাইনার দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI কম্পোনেন্ট রয়েছে এবং এটি অ্যান্ড্রয়েড, আইওএস, ওয়েব এবং ফ্লাটারের জন্য উপলব্ধ। material.io/develop |
ওয়েবের জন্য ম্যাটেরিয়াল কম্পোনেন্টস (MDC Web) কোনো ফ্রেমওয়ার্কের উপর নির্ভরশীল নয় এবং এটি সাধারণ জাভাস্ক্রিপ্ট ব্যবহার করে তৈরি। এটি MDC Web-কে আপনার ডেভেলপমেন্ট প্রক্রিয়ার সাথে নির্বিঘ্নে কাজ করতে সাহায্য করে। আপনার বিদ্যমান অ্যাপে দ্রুত ডিজাইনের উন্নতি সাধনের জন্য প্রয়োজন অনুযায়ী এই কম্পোনেন্টগুলো ইনস্টল করা যেতে পারে।
আপনি যা তৈরি করবেন
এই কোডল্যাবে, আপনি একটি ফর্মের কিছু বিদ্যমান কম্পোনেন্টকে MDC Web দ্বারা সরবরাহকৃত কম্পোনেন্ট দিয়ে প্রতিস্থাপন করবেন:
এই কোডল্যাবে MDC ওয়েব উপাদানসমূহ
- বোতাম
- নির্বাচন করুন
- টেক্সট ফিল্ড
আপনার যা যা লাগবে
- Node.js- এর একটি সাম্প্রতিক সংস্করণ (যা npm , একটি জাভাস্ক্রিপ্ট প্যাকেজ ম্যানেজার, সহ আসে)।
- নমুনা কোড (যা পরবর্তী ধাপে ডাউনলোড করতে হবে)
- HTML, CSS, এবং JavaScript-এর প্রাথমিক জ্ঞান
ওয়েব ডেভেলপমেন্টে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন।
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-web-codelabs-master/mdc-111/starter ডিরেক্টরিতে অবস্থিত। শুরু করার আগে অবশ্যই ওই ডিরেক্টরিতে cd ।
...অথবা গিটহাব থেকে এটি ক্লোন করুন
গিটহাব থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলো চালান:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-111/starter
প্রকল্পের নির্ভরতা ইনস্টল করুন
স্টার্টার ডিরেক্টরি ( material-components-web-codelabs/mdc-111/starter ) থেকে, চালান:
npm install
আপনি অনেক কার্যকলাপ দেখতে পাবেন এবং শেষে, আপনার টার্মিনালে একটি সফল ইনস্টলেশন দেখানো উচিত:
স্টার্টার অ্যাপটি চালান
স্টার্টার ডিরেক্টরিতে, চালান:
npm start
webpack-dev-server চালু হবে। পৃষ্ঠাটি দেখতে আপনার ব্রাউজারে http://localhost:8080/ খুলুন।
সফল! আপনি অ্যাপটির শিপিং অ্যাড্রেস ফর্মটি দেখতে পাবেন:
৩. বাটনটি আপডেট করুন
এমডিসি বাটন ইনস্টল করুন
ডেভেলপমেন্ট সার্ভারটি বন্ধ করতে Ctrl + C চাপুন। এরপর, MDC Button NPM প্যাকেজটি ইনস্টল করুন এবং সার্ভারটি পুনরায় চালু করুন:
npm install @material/button npm start
CSS আমদানি করুন
_theme.scss ফাইলের একদম উপরে, .crane-button { ... } ব্লকটি মুছে দিন এবং এর জায়গায় নিম্নলিখিত কোডটি যোগ করুন:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
মার্কআপ আপডেট করুন
index.html এ, <button> এলিমেন্ট থেকে crane-button ক্লাসটি সরিয়ে দিন, mdc-button এবং mdc-button--raised ক্লাসগুলো যোগ করুন, এবং mdc-button__label ক্লাসসহ একটি <span> এলিমেন্টের মধ্যে লেবেলটিকে নেস্ট করুন:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
ঢেউ যোগ করুন
জাভাস্ক্রিপ্ট ছাড়াই এমডিসি বাটন ব্যবহার করা যায়। তবে, বাটনে একটি ইন্টারেক্টিভ রিপল যোগ করলে ব্যবহারকারীর অভিজ্ঞতা আরও সমৃদ্ধ হয়।
ডেভেলপমেন্ট সার্ভারটি বন্ধ করতে Ctrl + C চাপুন। তারপর চালান:
npm install @material/ripple npm start
app.js শীর্ষে নিম্নলিখিত ইম্পোর্ট স্টেটমেন্টটি যোগ করুন:
import {MDCRipple} from '@material/ripple';
বাটনে রিপলটি ইনস্ট্যানশিয়েট করতে, app.js শেষে নিম্নলিখিত কোডটি যোগ করুন:
new MDCRipple(document.querySelector('.mdc-button'));
রোবোটো ফন্ট আমদানি করুন
ডিফল্টরূপে, ম্যাটেরিয়াল ডিজাইন কম্পোনেন্ট টাইপফেসের জন্য রোবোটো ব্যবহার করে।
index.html ফাইলের <head> এলিমেন্টে নিম্নলিখিত কোডটি যোগ করে Roboto Web ফন্টটি ইম্পোর্ট করুন:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
পৃষ্ঠাটি পুনরায় লোড করুন, এবং আপনি এইরকম কিছু দেখতে পাবেন:
বাটনটি এখন চাপলে দৃশ্যমান প্রতিক্রিয়া হিসেবে একটি মৃদু ঢেউয়ের মতো প্রভাব দেখা যায়।
৪. নির্বাচিত উপাদানটি আপডেট করুন
MDC সিলেক্ট কম্পোনেন্টটি একটি নেটিভ HTML <select> এলিমেন্টকে আবৃত করে। যেখানে আপনি সাধারণত একটি <select> ব্যবহার করেন, সেখানেই এটি ব্যবহার করুন। চলুন "State" ফিল্ডটি আপডেট করি।
MDC নোড মডিউল ইনস্টল করুন
ডেভেলপমেন্ট সার্ভারটি বন্ধ করতে Ctrl + C চাপুন। তারপর চালান:
npm install @material/select npm start
CSS আমদানি করুন
_theme.scss ফাইলে, বাটন ইম্পোর্টের ঠিক পরেই নিম্নলিখিতটি যোগ করুন:
@import "@material/select/mdc-select";
মার্কআপ আপডেট করুন
index.html এ <select> এলিমেন্টটি খুঁজুন। crane-input ক্লাসটিকে mdc-select__native-control দিয়ে প্রতিস্থাপন করুন:
<select class="mdc-select__native-control" id="crane-state-input" required>
<select> ট্যাগের ঠিক উপরে, MDC সিলেক্ট কম্পোনেন্টের ড্রপ-ডাউন অ্যারোর জন্য নিম্নলিখিত মার্কআপটি যোগ করুন:
<i class="mdc-select__dropdown-icon"></i>
ক্লোজিং </select> ট্যাগের ঠিক নিচে, crane-label ক্লাসটিকে mdc-floating-label দিয়ে প্রতিস্থাপন করুন:
<label class="mdc-floating-label" for="crane-state-input">
তারপর লেবেলের ঠিক পরেই নিম্নলিখিত মার্কআপটি যোগ করুন:
<div class="mdc-line-ripple"></div>
অবশেষে, <select> এলিমেন্টের চারপাশে (কিন্তু crane-field এলিমেন্টের ভিতরে) নিম্নলিখিত ট্যাগগুলি যোগ করুন:
<div class="mdc-select">
...
</div>
চূড়ান্ত মার্কআপটি দেখতে এইরকম হবে:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
JS আমদানি করুন
app.js শীর্ষে নিম্নলিখিত ইম্পোর্ট স্টেটমেন্টটি যোগ করুন:
import {MDCSelect} from '@material/select';
select ভেরিয়েবলটি ইনস্ট্যানশিয়েট করতে, app.js শেষে নিম্নলিখিত কোডটি যোগ করুন:
new MDCSelect(document.querySelector('.mdc-select'));
পৃষ্ঠাটি পুনরায় লোড করুন, যা এখন দেখতে এইরকম হবে:
MDC Select কম্পোনেন্টটি ব্যবহারকারীর জন্য বিকল্পগুলির একটি তালিকা পরিচিত বিন্যাসে, কিন্তু আধুনিক শৈলীতে উপস্থাপন করে।
৫. টেক্সট ফিল্ডগুলো আপডেট করুন।
সাধারণ <input> এলিমেন্টের তুলনায় ম্যাটেরিয়াল ডিজাইনের টেক্সট ফিল্ডগুলোর ব্যবহারযোগ্যতার ক্ষেত্রে উল্লেখযোগ্য সুবিধা রয়েছে। এগুলো এমনভাবে ডিজাইন করা হয়েছে যাতে জটিল কন্টেন্টের মধ্যেও সহজে শনাক্ত করা যায় এবং ব্যবহারকারী যখন এগুলোর সাথে ইন্টারঅ্যাক্ট করেন, তখন সূক্ষ্ম ভিজ্যুয়াল ফিডব্যাক প্রদর্শন করে।
MDC নোড মডিউল ইনস্টল করুন
ডেভেলপমেন্ট সার্ভারটি বন্ধ করতে Ctrl + C চাপুন। তারপর চালান:
npm install @material/textfield npm start
CSS যোগ করুন
_theme.scss ফাইলে, select import-এর ঠিক পরেই নিম্নলিখিতটি যোগ করুন:
@import "@material/textfield/mdc-text-field";
মার্কআপ আপডেট করুন
index.html এ, "Name" ফিল্ডের জন্য <input> এলিমেন্টটি খুঁজুন। crane-input ক্লাসটিকে mdc-text-field__input দিয়ে প্রতিস্থাপন করুন:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
এরপরে, crane-label ক্লাসটিকে mdc-floating-label দিয়ে প্রতিস্থাপন করুন:
<label class="mdc-floating-label" for="crane-name-input">
তারপর লেবেলের ঠিক পরেই নিম্নলিখিত মার্কআপটি যোগ করুন:
<div class="mdc-line-ripple"></div>
সবশেষে, তিনটি উপাদানকেই নিম্নলিখিতভাবে মুড়ে দিন:
<div class="mdc-text-field">
...
</div>
চূড়ান্ত মার্কআপটি দেখতে এইরকম হবে:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
পৃষ্ঠার অন্য সব <input> এলিমেন্টের জন্য একই পদ্ধতি পুনরাবৃত্তি করুন।
" Address" , " City" এবং " ZIP Code" ফিল্ডগুলোর মার্কআপটি দেখতে এইরকম হবে:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
আপনি এখন _theme.scss থেকে .crane-label এবং .crane-input স্টাইলগুলো মুছে ফেলতে পারেন, যেগুলো এখন আর ব্যবহৃত হয় না।
JS আমদানি করুন
app.js শীর্ষে নিম্নলিখিত ইম্পোর্ট স্টেটমেন্টটি যোগ করুন:
import {MDCTextField} from '@material/textfield';
টেক্সট ফিল্ডগুলো ইনস্ট্যানশিয়েট করতে, app.js শেষে নিম্নলিখিত কোডটি যোগ করুন:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
পৃষ্ঠাটি পুনরায় লোড করুন, যা এখন দেখতে এইরকম হবে:
টেক্সট ফিল্ডগুলো এখন ম্যাটেরিয়াল থিমিং ব্যবহার করার জন্য আপডেট করা হয়েছে।
৬. পুনরালোচনা
আপনি আপনার অ্যাপটির সম্পূর্ণ নতুন ডিজাইন না করেই কিছু সাধারণ উপাদান (টেক্সট ফিল্ড, সিলেক্ট এবং বাটন) পরিবর্তন করেছেন। চমৎকার কাজ!
অন্যান্য যে উপাদানগুলো বড় পার্থক্য গড়ে তুলতে পারে, সেগুলোর মধ্যে রয়েছে টপ অ্যাপ বার এবং নেভিগেশন ড্রয়ার।
পরবর্তী পদক্ষেপ
আপনি এমডিসি ওয়েব ক্যাটালগ পরিদর্শন করে এমডিসি ওয়েবের আরও উপাদানসমূহ অন্বেষণ করতে পারেন।
আপনি যদি কোনো নির্দিষ্ট ফ্রেমওয়ার্কের সাথে এমডিসি ওয়েব ব্যবহার করতে আগ্রহী হন, তাহলে এমডিসি-১১২: ওয়েব ফ্রেমওয়ার্কের সাথে এমডিসি একীভূতকরণ (MDC-112: Integrating MDC with Web Frameworks ) কোর্সটি দেখুন।