একটি পণ্যকে সমর্থন করার জন্য একটি ডিজাইন সিস্টেম তৈরি করা সহজ নয় - এটি মাপযোগ্যতার জন্য একই সময়ে শক্তিশালী এবং নমনীয় হতে হবে। যদিও চ্যালেঞ্জিং, প্রচুর মহান সংস্থানগুলি দরকারী নীতি এবং পদ্ধতিগুলি ভাগ করেছে যা দলগুলিকে দৃশ্যত এবং প্রোগ্রামগতভাবে উভয়ই একটি ভাল সিস্টেম তৈরি করতে সহায়তা করে। তাদের কাঁধে দাঁড়িয়ে, এই নিবন্ধটি SwiftUI-এ একটি ভাল সিস্টেম তৈরির উপর ফোকাস করে একটি অস্পৃশ্য মাটিতে অবদান রাখার চেষ্টা করে .
আমি কেন এই নিবন্ধটি লিখব
নিউ ইয়র্কে ITP-তে আমার প্রথম গ্রীষ্মকালে, লাইন ব্রেক স্টুডিওতে একজন iOS ডেভেলপার ইন্টার্ন হিসেবে কাজ করার সুযোগ পেয়ে আমি ভাগ্যবান। একটি কাজ যা আমাকে দেওয়া হয়েছে তা হল দুটি ধাপে একটি ডিজাইন সিস্টেম তৈরি করা:প্রথমে দৃশ্যত স্কেচে, এবং তারপর প্রোগ্রাম্যাটিকভাবে SwiftUI . নতুন ফ্রেমওয়ার্ক নিয়ে পরীক্ষা-নিরীক্ষা করার এবং এটির সাথে একটি ডিজাইন সিস্টেম তৈরি করার অভিজ্ঞতা আশ্চর্যজনক, তবে পথ ধরে বগিও ছিল। এই কারণেই আমরা সম্প্রদায়ের সাথে আমাদের অভিজ্ঞতা শেয়ার করতে চাই, আশা করি আপনার উন্নয়ন প্রক্রিয়া সহজতর করে তুলবে।
SwiftUI কি
৷
Apple WWDC 2019-এ এই যুগান্তকারী নতুন ফ্রেমওয়ার্ক প্রকাশ করেছে, যা বছরের মধ্যে অন্যতম সেরা। ওয়েব ডেভেলপার হিসেবে, SwiftUI-এ প্রজেক্ট ডেভেলপমেন্টের অভিজ্ঞতা প্রচলিত ফ্রন্ট-এন্ড স্ট্যাক এবং ফ্রেমওয়ার্কে এর কাছাকাছি।
এটি অবশ্যই একটি দুর্দান্ত পদক্ষেপ কারণ প্রোগ্রামিং ইন্টারফেস এবং ম্যানেজিং স্টেটগুলি আগের চেয়ে অনেক সহজ। এবং এই উন্নতির সর্বোত্তম অংশ হল যে কেউ UIKit এবং SwiftUI মসৃণভাবে একীভূত করতে পারে। SwiftUI এর মূল বিষয়গুলি শিখতে, Apple দ্বারা প্রদত্ত অফিসিয়াল টিউটোরিয়ালগুলি খুবই সহায়ক৷
৷ডেমো প্রকল্প
প্রদর্শনের উদ্দেশ্যে, আমি লাইন ব্রেক স্টুডিওতে তৈরি ডিজাইন সিস্টেমের একটি সরলীকৃত সংস্করণ রেখেছি। এটি বোতামের একটি সেট বিভিন্ন আকারে উপাদান, যা দুটি নিম্ন স্তরের অংশের উপরে নির্মিত:টাইপোগ্রাফি এবং রঙপ্যালেট .
প্রকল্পটি GitHub-এ সর্বজনীন, এবং আমি Xcode 11 Beta 5 ব্যবহার করছি উন্নয়নের জন্য ডিজাইন সিস্টেম ম্যানেজমেন্ট হাব হিসাবে একটি এয়ারটেবল বেস (ওয়ার্কফ্লো ম্যানেজমেন্ট সম্পর্কে আরও পড়ুন) রেফারেন্সের জন্যও সর্বজনীন৷
বিল্ডিং ডিজাইন সিস্টেমের নীতি
কোডে ডিজাইন সিস্টেম ডিজাইনার এবং ডেভেলপারদের মধ্যে একটি মিডলওয়্যার। সিস্টেমের বিকাশকারী ভিজ্যুয়াল আকারে ডিজাইন সিস্টেম থেকে ইনপুট নেয় এবং আরও বিকাশের জন্য একই রকম API তৈরি করে। কোডে এই সিস্টেমটি সম্পূর্ণ করার জন্য দুটি নীতি অনুসরণ করা উচিত:
1. টোকেনের সাথে যোগাযোগ করুন
মৌলিকভাবে, প্রোগ্রামে একটি ডিজাইন সিস্টেম থাকার উদ্দেশ্য আরও ভাল কোড পরিচালনা বা উন্নয়ন দক্ষতা সম্পর্কে নয়, তবে দর্শন নিশ্চিত করা ডিজাইন ফাইলের সাথে সামঞ্জস্যপূর্ণ। সেই লক্ষ্য অর্জনের জন্য, নির্দিষ্ট রঙ, ফন্ট, আকার বা যেকোনো ভিজ্যুয়াল উপাদান বোঝাতে টোকেন ব্যবহার করা একটি দলে ডেভেলপার, ডিজাইনার এবং পরিচালকদের মধ্যে যোগাযোগের মান বজায় রাখার জন্য অত্যন্ত গুরুত্বপূর্ণ।
2. অনুক্রমের স্তরগুলি
EightShapes এর নিবন্ধে, এটি নির্দেশ করে যে আমাদের উচিত "প্রথমে বিকল্পগুলি দেখান, তারপরে সিদ্ধান্ত নেওয়া উচিত", কারণ "আপনি বিকল্প ছাড়া সিদ্ধান্ত নিতে পারবেন না।"
এই ধরনের অর্ডারিং আর্কিটেকচার বিভিন্ন স্তরের মধ্যে সংযোগের মাত্রা কমিয়ে দেয়, তাই সম্ভাব্য সংশোধনের জন্য আরও নমনীয়তা এবং গতিশীল প্রদান করে। আমি যেভাবে স্তরগুলি গঠন করি তা নীচে থেকে উপরে এই ক্রমে:উপাদান → বেস → টোকেন৷ তবে এটি যেভাবেই হোক দলের পক্ষে আরামদায়ক হতে পারে।
কোডে ডাইভিং
নিম্নলিখিত বিভাগে হাইলাইটগুলির একটি তালিকা যা আমরা আমাদের অভিজ্ঞতার ভিত্তিতে নির্দেশ করতে চাই৷ সম্পূর্ণ কোডের জন্য GitHub রেপো দেখুন। কোন প্রতিক্রিয়া বা সমালোচক উন্নতির জন্য স্বাগত জানাই.
1. শ্রেণীবিন্যাসের আর্কিটেক্টিং স্তরগুলি
সর্বোচ্চ স্তরে টোকেন তৈরি করার জন্য নিম্ন স্তরে উপকরণ স্ট্যাক করার দুটি উপায় রয়েছে:
-
enumব্যবহার করুন টাইপ নিরাপত্তা এবং কোড সাক্ষরতার জন্য
গ্রুপিং র্যাপার বা ফাংশনে প্যারামিটার হিসাবে কোডে enum ব্যবহার করার সুবিধাগুলি ইতিমধ্যেই ভালভাবে স্বীকৃত হয়েছে। এখানে উল্লেখ করার মতো একটি বিষয় হল শ্রেণিবিন্যাস স্তরের বাস্তবায়ন।
ফন্ট সাইজ (CGFloat) সহ আমরা সবসময় কাঁচা মান সংরক্ষণ করি ) এবং ফন্টের নাম (String ), সর্বনিম্ন স্তরে, কারণ আমরা এটি নিয়ে গোলমাল করতে চাই না। কিন্তু যেহেতু কাঁচা মান অবশ্যই enum-এ একটি আক্ষরিক হতে হবে, আমরা শুধু একটি case বরাদ্দ করতে পারি না অন্য enum থেকে একটি মান হতে হবে।
এই সমস্যার সমাধান করার জন্য, আমরা একটি ফাংশন getValue প্রয়োগ করি , যা switch-এ কাঁচা মান প্রদান করে যখন প্রয়োজন হয়।
-
structব্যবহার করুন সহজ কাঠামোর জন্য
যদিও enum দুর্দান্ত, কিছু ক্ষেত্রে আমাদের এর অনন্য বৈশিষ্ট্যের প্রয়োজন নেই। উদাহরণস্বরূপ, কারণ Xcode গতিশীল রং প্রক্রিয়াকরণের ভারী কাজের যত্ন নেয়, এবং API এন্ডপয়েন্টে কোনো প্যারামিটার বিকল্পের প্রয়োজন হয় না, আমরা সাধারণ দুটি স্তরের কাঠামোর মাধ্যমে রঙ প্যালেট সেট আপ করতে পারি।
2. API এর পরিষ্কার এবং সহজবোধ্য নামকরণ শেষবিন্দু
নামকরণ কনভেনশন আলোচনা এবং বিতর্কের জন্য আরেকটি বিস্তৃত বিষয়। বেসিক সুইফট কনভেনশনগুলি ছাড়াও, শুধুমাত্র দুটি নিয়ম আমরা মেনে চলি, 1) কোন সংক্ষিপ্ত চিহ্ন নেই এবং 2) এটিকে সহজ করা৷ উদাহরণস্বরূপ, টাইপোগ্রাফি এবং কালার সিস্টেম ব্যবহার করার জন্য, নতুন এন্ডপয়েন্ট তৈরি করার পরিবর্তে, আমরা ফন্ট এবং কালার স্ট্রাকট থেকে এক্সটেনশন তৈরি করি। এই পদ্ধতিটি বিকাশকারীদের জন্য অপরিচিত API নামগুলি মনে রাখার প্রচেষ্টাকে হ্রাস করে৷
3. দুটি মোডে গতিশীলভাবে রঙ সেট পরিচালনা করুন
তাই ডার্ক মোড ইন্ডাস্ট্রিতে একটি স্ট্যান্ডার্ড হয়ে উঠেছে এবং আইওএস এবং অ্যান্ড্রয়েড উভয় দলই এই বৈশিষ্ট্যটি বাস্তবায়ন করেছে। এটি ব্যবহারকারীদের জন্য একটি ভাল প্রবণতা, কিন্তু ডিজাইনার এবং ডেভেলপারদের কিছু চ্যালেঞ্জ নিয়ে আসতে পারে, যার মধ্যে রয়েছে রঙ সেটগুলি পরিচালনা এবং নামকরণ, বিশেষ করে ধূসর স্কেলগুলির।
সাদা এর মত শব্দ ব্যবহার করে গতিশীলভাবে ধূসর স্কেল রং সম্পর্কে চিন্তা ও যোগাযোগ করতে , আলো , কালো অথবা অন্ধকার কাজ করে না কারণ যদি আমরা একটি গতিশীল রঙ উল্লেখ করি #000000 (HEX এ কালো) কালো অথবা অন্ধকার light color scheme-এ , আপনি কিভাবে এই নির্দিষ্ট রঙ সম্পর্কে কথা বলেন, যা #FFFFFF তে পরিণত হওয়া উচিত (HEX-এ সাদা), dark color scheme-এ ? ডিফল্ট ডার্ক অথবা আলোক অন্ধকার ?
প্রচলিত পদ্ধতিতে ধূসর স্কেল গতিশীল রঙ সেটের নাম দেওয়া খুবই বিভ্রান্তিকর। এই বিভ্রান্তি এড়াতে, আমরা theme ব্যবহার করি এবং contrast light-এ রঙের একটি সেট পরিচালনা করতে এবং dark পরিবর্তে স্কিম।
মনে রাখবেন যে একটি ধূসর স্কেলের রঙ সবসময় বিপরীত রঙের মোডে বিপরীত করার প্রয়োজন হয় না। এই পরিস্থিতিতে যে হালকা রঙ হালকা থাকে এবং অন্ধকার অন্ধকার থেকে যায়, আমরা কেবল এটিকে হালকা বা অন্ধকার নাম দিয়ে থাকি।
একবার আমরা এই নামকরণ পদ্ধতির চারপাশে আমাদের মাথা গুটিয়ে নিলে, রঙ প্যালেটের এই আর্কিটেকচার পরিচালনা করা Xcode-এ সহজ . একটি রঙ সেট তৈরি করতে, কেবল একটি নতুন Asset Catalog তৈরি করুন ফাইল → একটি নতুন Color Set যোগ করুন → এবং Appearances পরিবর্তন করুন Any, Light, Dark-এ করবে।
4. environment সেটিংস
SwiftUI ফ্রেমওয়ার্কের একটি দুর্দান্ত বৈশিষ্ট্য হল পরিবেশ সংশোধক, যা লক্ষ্য দৃশ্যে পরিবেশের মান নিয়ন্ত্রণ করার ক্ষমতা প্রদান করে। বিল্ডিং ডিজাইন সিস্টেমের পরিপ্রেক্ষিতে, এই ক্ষমতা রুট স্তরে অ্যাপের ফন্ট পরিবর্তন করার জন্য সুবিধাজনক পদ্ধতি প্রদান করে। এবং environmentValue ব্যবহার করার অন্য সুবিধা উন্নয়নে হালকা এবং গাঢ় রঙের স্কিম পরিবর্তন ও পরীক্ষা করা।
5. buttonStyle এবং বোতাম লেবেল
UIKit-এ পুরানো দিনের সাথে তুলনা করে, SwiftUI-তে পুনরায় ব্যবহারযোগ্য বোতামগুলি তৈরি করা অত্যন্ত সহজ। বোতাম ভিউ দুটি অংশ নিয়ে গঠিত, যা হল action বন্ধ (বোতাম টিপলে ইভেন্ট ফায়ার করা হবে) এবং label (বোতামের বডি)। ভিউটিকে তারপর একটি মডিফায়ার buttonStyle দিয়ে চেইন করা যেতে পারে . পুনঃব্যবহারযোগ্য বোতাম তৈরির বিষয়ে বিস্তারিত জানার জন্য, আমি আলেজান্দ্রোর টিউটোরিয়াল পড়ার পরামর্শ দিচ্ছি, যা ব্যাপক এবং দরকারী।
আমাদের কাস্টমাইজ করা বোতাম উপাদানগুলিতে, প্রথম ধাপ হল দুটি স্ট্রাকট তৈরি করা, যার মধ্যে রয়েছে TokenButtonLabel এবং TokenButtonStyle . এই দুটি স্ট্রাকট আমাদের ডিজাইন ফাইলের বোতামের ধরন অনুযায়ী প্রোগ্রাম করা হয়। উদাহরণস্বরূপ, শুধুমাত্র দুই ধরনের লেবেল আছে:আইকন এবং টেক্সট। প্রতিটি ধরনের একটি অনুযায়ী init আছে নতুন উদাহরণের জন্য বিভিন্ন পরামিতি দিয়ে ডিজাইন করা ফাংশন।
অন্যদিকে, চারটি প্রধান ধরণের বোতাম শৈলী রয়েছে:বৃত্ত আইকন, আইকন, ক্যাপসুল এবং পাঠ্য। ButtonStyle অনুসরণ করতে প্রোটোকল, একটি makeBody func বাস্তবায়ন করতে হবে। এই ফাংশনটি আমাদের জন্য একটি configuration নিয়ে আসে সম্পত্তি, একটি নেটিভ isPressed প্রদান করে বোতাম টিপছে কি না তা নিরীক্ষণ করার মান।
অবশেষে, TokenButtonLabel এর উপরে স্ট্যাকিং এবং TokenButtonStyle , বোতাম উপাদান API এর শেষ পয়েন্ট হবে TokenButton - একটি গ্রুপিং যা বিষয়বস্তু এবং বোতামের শৈলীকে একসাথে মোড়ানো, ভিজ্যুয়াল ডিজাইন সিস্টেমে বোতামের ধরনগুলির সাথে সামঞ্জস্যপূর্ণ৷
6. AnyView মোড়ক হিসাবে
যেহেতু আমরা makeBody নিয়ে কাজ করছি ButtonStyle দ্বারা আনা ফাংশন প্রোটোকল, আমরা View এর সাথে কাজ করার জন্য একটি দরকারী টিপ পেয়েছি . একটি ভেরিয়েবলে একটি ভিউ সংরক্ষণ করতে, টাইপ টীকাটিকে AnyView হিসাবে নির্দেশ করা যেতে পারে , যা SwiftUI-তে ভিউয়ের একটি সাধারণ ধারক হিসেবে কাজ করে।
আমাদের ক্ষেত্রে, কারণ আমরা configuration.label-এ অপাসিটি মডিফায়ার যোগ করতে চাই প্রতিটি switch এ বারবার করার পরিবর্তে সব ধরনের বোতামে ক্ষেত্রে, এটি সম্পূর্ণভাবে শেষে মডিফায়ারকে চেইন করা আরও বোধগম্য। AnyView এর সুবিধা ব্যবহার করে আমরা এই প্যাটার্নটি অর্জন করতে পারি এই ভাবে:
7. mutating দিয়ে ভিউ মডিফায়ার তৈরি করুন ফাংশন
গতিশীলভাবে বোতামের শৈলী আপডেট করতে, আমরা আমাদের নিজস্ব সংশোধক তৈরি করতে পারি। প্রথমে কাস্টমাইজড মিউটেবল স্টেট প্রপার্টি ভিউতে ইনস্ট্যান্টিয়েট করুন এবং তারপর একটি mutating তৈরি করুন ফাংশন যা একটি Self প্রদান করে টার্গেট স্টেট প্রোপার্টি আপডেট করার পর টাইপ করুন।
8. চতুর সীমানা শৈলী
SwiftUI-এর একটি ত্রুটি হল বৃত্তাকার বর্ডার সহ একটি বৃত্তের আকার স্টাইল করা মোটেও সোজা নয়। আমি কিছু সময়ের জন্য সংগ্রাম করেছি, এবং অবশেষে স্ট্যাকওভারফ্লোতে এখানে একটি সমাধান পেয়েছি। একটি clipShape এবং একটি overlay এটিকে কাজ করতে মডিফায়ারের প্রয়োজন হয়৷
উপসংহার
SwiftUI অ্যাপলের করা একটি অবিশ্বাস্য উন্নতি। যদিও ত্রুটিগুলি এখনও বিদ্যমান, এটির সাথে একটি শক্তিশালী এবং নমনীয় ডিজাইন সিস্টেম তৈরি করা এবং iOS-এ জটিল UI আগের চেয়ে অনেক কার্যকর। আমি আশা করি এই নিবন্ধটি যেকোন iOS টিমের জন্য সহায়ক হবে যারা UI তৈরি করার চেষ্টা করছে, এবং যেকোন প্রতিক্রিয়ায় সর্বদা স্বাগত জানাই!
? vinceshao.com-এ আমার আরও কাজ পড়ুন/ Twitter বা LinkedIn
-এ আমাকে অনুসরণ করুন