ফ্রন্ট-এন্ড ওয়েব ডেভেলপারদের জন্য ফ্লটার

আমি ফ্রন্ট-এন্ড ওয়েব ডেভেলপার হিসেবে শুরু করেছি এবং তারপরে হয়েছি ঝাপটানি বিকাশকারী আমি মনে করি কিছু ধারণা ছিল যা আমাকে ফ্লটার সহজে গ্রহণ করতে সাহায্য করেছিল। কিছু নতুন ধারণাও ছিল যা ভিন্ন ছিল।

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

ওভার স্থানান্তরিত যে ধারণা

এই বিভাগটি এমন জায়গাগুলি দেখায় যেখানে ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট এবং ফ্লাটার সাদৃশ্যপূর্ণ। এটি ব্যাখ্যা করে যে আপনার ইতিমধ্যেই এমন দক্ষতা রয়েছে যা আপনি যদি ফ্লটার শুরু করেন তবে এটি আপনার জন্য একটি সুবিধা।

1. ইউজার ইন্টারফেস (UIs) বাস্তবায়ন করা

ফ্রন্ট-এন্ড ওয়েবে একটি প্রদত্ত UI বাস্তবায়ন করতে, আপনি HTML উপাদানগুলি রচনা করুন এবং সেগুলিকে CSS দিয়ে স্টাইল করুন৷ ফ্লটারে UI প্রয়োগ করতে, আপনি রচনা করেন উইজেট এবং তাদের সঙ্গে শৈলী বৈশিষ্ট্য.

সিএসএসের মতো, দ Color ডার্টের ক্লাস "rgba" এবং "হেক্স" এর সাথে কাজ করে। এছাড়াও CSS এর মত, Flutter স্থান এবং আকারের ইউনিটের জন্য পিক্সেল ব্যবহার করে।

Flutter-এ, আমাদের কাছে প্রায় সমস্ত CSS বৈশিষ্ট্য এবং তাদের মানগুলির জন্য ডার্ট ক্লাস এবং enums রয়েছে। উদাহরণ স্বরূপ:

ফ্লাটারও আছে Column এবং Row উইজেট এই জন্য Flutter সমতুল্য display: flex সিএসএস-এ। কনফিগার করতে justify-content এবং align-items শৈলী, আপনি ব্যবহার করুন MainAxisAlignment এবং CrossAxisAlignment বৈশিষ্ট্য সামঞ্জস্য করতে flex-grow শৈলী, এর প্রভাবিত শিশু(বাচ্চাদের) উইজেট(গুলি) মোড়ানো Column/Row, একটি মধ্যে Expanded or Flexible.

উন্নত UI এর জন্য, Flutter আছে CustomPaint বর্গ – এটা কি ফ্লাটার করতে হয় Canvas API ওয়েব ডেভেলপমেন্টের জন্য। CustomPaint আপনার ইচ্ছামতো যেকোন UI আঁকতে আপনাকে একজন পেইন্টার দেয়। আপনি সাধারণত ব্যবহার করবেন CustomPaint যখন আপনি এমন কিছু চান যা সত্যিই জটিল। এছাড়াও, CustomPaint যখন উইজেটগুলির সংমিশ্রণ কাজ করে না তখন এটি যাওয়ার উপায়।

2. একাধিক জন্য উন্নয়নশীল স্ক্রিন রেজোলিউশন

ওয়েবসাইটগুলি ব্রাউজারে চলে এবং মোবাইল অ্যাপগুলি ডিভাইসে চলে৷ যেমন, যেকোনো একটি প্ল্যাটফর্মের জন্য বিকাশ করার সময়, আপনাকে প্ল্যাটফর্মটি মাথায় রাখতে হবে। প্রতিটি প্ল্যাটফর্ম একই বৈশিষ্ট্য (ক্যামেরা, অবস্থান, বিজ্ঞপ্তি, ইত্যাদি) বিভিন্ন উপায়ে প্রয়োগ করে।

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

মোবাইল ওয়েব ডেভেলপমেন্ট থেকে ফ্লটারে আসছে, আপনার আছে MediaQuery সাহায্যকারী শ্রেণী। দ্য MediaQuery ক্লাস আপনাকে বর্তমান ডিভাইস দেয় orientation (ল্যান্ডস্কেপ বা প্রতিকৃতি)। এটি আপনাকে বর্তমান ভিউপোর্টও দেয় size, দ্য devicePixelRatio, অন্যান্য ডিভাইস তথ্য মধ্যে. একসাথে, এই মানগুলি আপনাকে মোবাইল ডিভাইসের কনফিগারেশন সম্পর্কে অন্তর্দৃষ্টি দেয়। বিভিন্ন স্ক্রিনের আকারে আপনার মোবাইল অ্যাপটি কেমন দেখায় তা পরিবর্তন করতে আপনি সেগুলি ব্যবহার করতে পারেন।

3. ডিবাগার, এডিটর এবং কমান্ড লাইন টুলের সাথে কাজ করা

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

IDE সমর্থনও অনুরূপ। ভিজ্যুয়াল স্টুডিও কোড ওয়েব ডেভেলপমেন্টের জন্য সবচেয়ে জনপ্রিয় আইডিইগুলির মধ্যে একটি। VS কোডের জন্য অনেক ওয়েব-সম্পর্কিত এক্সটেনশন রয়েছে। ফ্লটারও ভিএস কোড সমর্থন করে। তাই স্থানান্তর করার সময়, আপনাকে IDE পরিবর্তন করতে হবে না। ভিএস কোডের জন্য ডার্ট এবং ফ্লটার এক্সটেনশন রয়েছে। ফ্লটার অ্যান্ড্রয়েড স্টুডিওর সাথেও ভাল কাজ করে। অ্যান্ড্রয়েড স্টুডিও এবং ভিএস কোড উভয়ই ফ্লটার ডেভটুল সমর্থন করে। এই IDE ইন্টিগ্রেশনগুলি Flutter টুলিং সম্পূর্ণ করে।

বেশিরভাগ ফ্রন্ট-এন্ড জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক তাদের সাথে আসে কমান্ড লাইন ইন্টারফেস (CLI)। উদাহরণ স্বরূপ: কৌণিক সিএলআই, প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করুন, ভ্যু সিএলআই, ইত্যাদি। ফ্লটারও একটি এক্সক্লুসিভের সাথে আসে CLI. Flutter CLI আপনাকে কৌণিক প্রকল্পগুলি তৈরি, তৈরি এবং বিকাশের অনুমতি দেয়। এটি ফ্লাটার প্রকল্প বিশ্লেষণ এবং পরীক্ষা করার জন্য কমান্ড আছে.

ধারণা যে নতুন ছিল

এই বিভাগটি ফ্লাটার-নির্দিষ্ট ধারণা সম্পর্কে কথা বলে যা ওয়েব ডেভেলপমেন্টে সহজ বা অস্তিত্বহীন। এটি ব্যাখ্যা করে যে আপনি ফ্লটারে প্রবেশ করার সময় আপনার মনে রাখা উচিত।

কিভাবে স্ক্রোলিং হ্যান্ডেল

ওয়েবের জন্য বিকাশ করার সময়, ডিফল্ট স্ক্রোলিং আচরণ ওয়েব ব্রাউজার দ্বারা পরিচালিত হয়। তবুও, আপনি CSS এর সাথে স্ক্রলিং কাস্টমাইজ করতে মুক্ত (ব্যবহার করে overflow).

ফ্লাটারে এমনটা হয় না। উইজেট গোষ্ঠীগুলি ডিফল্টরূপে স্ক্রোল করে না। যখন আপনি বুঝতে পারেন যে উইজেট গ্রুপগুলি উপচে পড়তে পারে, আপনাকে সক্রিয়ভাবে স্ক্রলিং কনফিগার করতে হবে।

ফ্লটারে, আপনি অদ্ভুত উইজেটগুলি ব্যবহার করে স্ক্রলিং কনফিগার করেন যা স্ক্রোলিংকে অনুমতি দেয়। উদাহরণ স্বরূপ: ListView, SingleChildScrollView, CustomScrollView, ইত্যাদি। এই স্ক্রোলযোগ্য উইজেটগুলি আপনাকে স্ক্রল করার উপর দুর্দান্ত নিয়ন্ত্রণ দেয়। সঙ্গে CustomScrollView, আপনি অ্যাপ্লিকেশনের মধ্যে বিশেষজ্ঞ এবং জটিল স্ক্রোল প্রক্রিয়া কনফিগার করতে পারেন।

Flutter এর দিকে, ব্যবহার করে ScrollViews অনিবার্য। অ্যান্ড্রয়েড এবং আইওএস আছে ScrollView এবং UIScrollView স্ক্রোলিং পরিচালনা করতে। ফ্লটার ব্যবহার করে রেন্ডারিং এবং বিকাশকারীর অভিজ্ঞতা একত্রিত করার একটি উপায় প্রয়োজন ScrollViews,ও।

এটি নথির কাঠামোর প্রবাহ সম্পর্কে চিন্তা করা বন্ধ করতে সাহায্য করতে পারে এবং এর পরিবর্তে অ্যাপ্লিকেশনটিকে একটি ডিভাইসের নেটিভ পেইন্টিং প্রক্রিয়ার জন্য একটি খোলা ক্যানভাস হিসাবে বিবেচনা করতে পারে।

2. আপনার উন্নয়ন পরিবেশ সেট আপ করা

সহজতম ওয়েবসাইট তৈরি করতে, আপনি একটি দিয়ে একটি ফাইল তৈরি করতে পারেন .html এক্সটেনশন করুন এবং এটি একটি ব্রাউজারে খুলুন। ফ্লাটার এত সহজ নয়। Flutter ব্যবহার করতে, আপনাকে Flutter SDK ইনস্টল করতে হবে এবং একটি পরীক্ষার ডিভাইসের জন্য Flutter কনফিগার করেছে৷ সুতরাং আপনি যদি Android এর জন্য Flutter কোড করতে চান তবে আপনাকে এটি করতে হবে Android SDK সেট আপ করুন. আপনাকে কমপক্ষে একটি Android ডিভাইস (একটি Android এমুলেটর বা একটি শারীরিক ডিভাইস) কনফিগার করতে হবে।

অ্যাপল ডিভাইসের (iOS এবং macOS) ক্ষেত্রে এটি একই। একটি ম্যাকে ফ্লাটার ইনস্টল করার পরে, আরও যাওয়ার আগে আপনাকে এখনও Xcode সেট আপ করতে হবে। আইওএস-এ ফ্লটার পরীক্ষা করার জন্য আপনার অন্তত একটি iOS সিমুলেটর বা একটি আইফোনের প্রয়োজন হবে। ডেস্কটপের জন্য ফ্লটারও একটি যথেষ্ট সেটআপ। উইন্ডোজে, আপনাকে ভিজ্যুয়াল স্টুডিও (ভিএস কোড নয়) সহ উইন্ডোজ ডেভেলপমেন্ট এসডিকে সেট আপ করতে হবে। লিনাক্সে, আপনি আরও প্যাকেজ ইনস্টল করবেন।

অতিরিক্ত সেটআপ ছাড়াই, Flutter ব্রাউজারে কাজ করে। ফলস্বরূপ, আপনি লক্ষ্য ডিভাইসগুলির জন্য অতিরিক্ত সেটআপ উপেক্ষা করতে পারেন। বেশিরভাগ ক্ষেত্রে, আপনি মোবাইল অ্যাপ বিকাশের জন্য ফ্লটার ব্যবহার করবেন। তাই, আপনি অন্তত Android বা iOS সেটআপ করতে চান। ফ্লটার এর সাথে আসে flutter doctor আদেশ এই কমান্ডটি আপনার ডেভেলপমেন্ট সেটআপের অবস্থা রিপোর্ট করে। এইভাবে, প্রয়োজন হলে সেটআপে কী কাজ করতে হবে তা আপনি জানেন।

এর মানে এই নয় যে ফ্লটারের বিকাশ ধীর। ফ্লটার একটি শক্তিশালী ইঞ্জিনের সাথে আসে। দ্য flutter run কোডিং করার সময় কমান্ড পরীক্ষার ডিভাইসে হট-রিলোড করার অনুমতি দেয়। কিন্তু তারপর আপনাকে চাপ দিতে হবে R আসলে হট-রিলোড করতে। এটি একটি সমস্যা নয়. ফ্লটারের ভিএস কোড এক্সটেনশন ফাইল পরিবর্তনে স্বয়ংক্রিয়-হট-রিলোডের অনুমতি দেয়।

3. প্যাকেজিং এবং স্থাপনা

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

আজ, অনেক প্ল্যাটফর্ম বিনামূল্যে হোস্টিং অফার করে।

উদাহরণ স্বরূপ: DigitalOcean আপনাকে একটি বিনামূল্যের সাবডোমেন দেয় .ondigitalocean.com.

আপনি যদি একটি ডকুমেন্টেশন ওয়েবসাইট তৈরি করেন তবে আপনি এই ডোমেনগুলি ব্যবহার করতে পারেন। আপনি যখন ব্র্যান্ডিং নিয়ে চিন্তিত নন তখন আপনি এগুলি ব্যবহার করতে পারেন।

মোবাইল অ্যাপ্লিকেশানগুলির সাথে ফ্লটারের জগতে, আপনি সাধারণত বেশিরভাগ ক্ষেত্রে আপনার অ্যাপটি দুটি জায়গায় স্থাপন করেন।

আপনাকে এই প্ল্যাটফর্মগুলির প্রতিটিতে একটি বিকাশকারী অ্যাকাউন্ট নিবন্ধন করতে হবে। একটি বিকাশকারী অ্যাকাউন্ট নিবন্ধন করার জন্য একটি ফি বা সদস্যতা এবং পরিচয় যাচাইকরণ প্রয়োজন৷

অ্যাপ স্টোরের জন্য, আপনাকে অ্যাপল ডেভেলপার প্রোগ্রামের জন্য নথিভুক্ত করতে হবে। আপনাকে বজায় রাখতে হবে $99 এর বার্ষিক সদস্যতা. Google Play এর জন্য, আপনাকে একটি তৈরি করতে হবে এককালীন $25 পেমেন্ট অ্যাকাউন্টের জন্য।

এই স্টোরগুলি লাইভ হওয়ার আগে পর্যালোচনা করা প্রতিটি অ্যাপ পর্যালোচনা করে।

এছাড়াও মনে রাখবেন যে ব্যবহারকারীরা সহজে অ্যাপ আপডেটগুলি ব্যবহার করেন না। ব্যবহারকারীদের স্পষ্টভাবে ইনস্টল করা অ্যাপ্লিকেশন আপডেট করতে হবে। এটি ওয়েবের বিপরীত যেখানে প্রত্যেকে একটি ওয়েবসাইটের সর্বশেষ স্থাপন করা সংস্করণ দেখতে পায়৷

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

ফ্লাটার উপর অতিরিক্ত চিন্তা

ফ্লাটার হল ডেস্কটপ, মোবাইল বা ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য একটি ক্রস-প্ল্যাটফর্ম টুল। ফ্লটার অ্যাপগুলি পিক্সেল-নিখুঁত। ফ্লাটার টার্গেট প্ল্যাটফর্ম নির্বিশেষে প্রতিটি অ্যাপে একই UI পেইন্ট করে। কারণ প্রতিটি ফ্লাটার অ্যাপে ফ্লাটার ইঞ্জিন থাকে। এই ইঞ্জিনটি Flutter UI কোড রেন্ডার করে। ফ্লাটার প্রতিটি ডিভাইসের জন্য একটি ক্যানভাস প্রদান করে এবং আপনাকে আপনার পছন্দ মতো রং করতে দেয়। ইঞ্জিন ইভেন্ট এবং মিথস্ক্রিয়া পরিচালনা করতে লক্ষ্য প্ল্যাটফর্মের সাথে যোগাযোগ করে।

ফ্লাটার দক্ষ। এটি উচ্চ-কর্মক্ষমতা স্তর আছে. কারণ এটি ডার্ট দিয়ে তৈরি এবং এটি ডার্টের বৈশিষ্ট্যগুলিকে কাজে লাগায়।

এই অনেক সুবিধার সাথে, ফ্লটার অনেক অ্যাপ্লিকেশনের জন্য একটি ভাল পছন্দ। ক্রস-প্ল্যাটফর্ম অ্যাপ্লিকেশনগুলি উত্পাদন এবং রক্ষণাবেক্ষণের সময় অর্থ এবং সময় সাশ্রয় করে। যাইহোক, কিছু ক্ষেত্রে ফ্লটার (এবং ক্রস-প্ল্যাটফর্ম সমাধান) একটি সর্বোত্তম পছন্দ নাও হতে পারে।

আপনি যদি চান যে ব্যবহারকারীরা আপনার অ্যাপ্লিকেশনের সাথে প্ল্যাটফর্ম বিকাশকারী সরঞ্জামগুলি ব্যবহার করতে চান তবে ফ্লটার ব্যবহার করবেন না। প্ল্যাটফর্ম বিকাশকারী সরঞ্জামগুলি এখানে Android বিকাশকারী বিকল্পগুলির মতো ডিভাইস-নির্দিষ্ট সরঞ্জামগুলিকে বোঝায়। এটিতে ব্রাউজার বিকাশকারী সরঞ্জামগুলিও অন্তর্ভুক্ত রয়েছে।

আপনি যদি ব্রাউজার এক্সটেনশনগুলি ওয়েবসাইটের সাথে ইন্টারঅ্যাক্ট করার আশা করেন তবে ওয়েবের জন্য ফ্লটার ব্যবহার করবেন না।

এছাড়াও, কন্টেন্ট-ভারী ওয়েবসাইটের জন্য ফ্লটার ব্যবহার করবেন না।

উপসংহার

এটি ছিল ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট থেকে শুরু করে Flutter-এর সাথে কাজ করার দক্ষতার একটি পর্যালোচনা। আমরা অ্যাপ ডেভেলপমেন্টের ধারণা নিয়েও আলোচনা করেছি যা আপনাকে ওয়েব ডেভেলপার হিসেবে শিখতে হবে।

ওয়েব ডেভেলপারদের জন্য ফ্লাটার সহজ কারণ তারা উভয়ই UI বাস্তবায়নের সাথে জড়িত। আপনি যদি Flutter শুরু করেন, আপনি দেখতে পাবেন যে এটি আপনাকে একটি ভাল বিকাশকারী অভিজ্ঞতা দেয়। ফ্লটার একবার চেষ্টা করে দেখুন! মোবাইল অ্যাপ তৈরি করতে এটি ব্যবহার করুন এবং অবশ্যই, আপনি যা তৈরি করেন তা প্রদর্শন করুন।

চিয়ার্স!