ওহে! আজ আমি আপনাকে রাত এবং সাপ্তাহিক ছুটির দিনে আমার মাসের কাজের ফলের সাথে পরিচয় করিয়ে দিতে চাই, বিষয়বস্তু পরিচালনার অভিজ্ঞতা উন্নত করতে এবং ফ্লাটার অ্যাপ্লিকেশন ডেভেলপমেন্টের জগতে অতিরিক্ত বৈশিষ্ট্য আনতে ডিজাইন করা হয়েছে - একটি নতুন ধরনের CMS।
আমরা Nanc সম্পর্কে কথা বলছি - N ot A N ormal C MS. কেন এটি "স্বাভাবিক নয়" এবং আপনি এটি দিয়ে কী করতে পারেন, আপনি এই নিবন্ধটি পড়ার পরে জানতে পারবেন।
নিবন্ধটি শুধুমাত্র তত্ত্ব নয় "অনুশীলন" ধারণ করবে - আপনি Nanc স্যান্ডবক্সে খেলতে সক্ষম হবেন। জনসাধারণকে Nanc-এর ক্ষমতা দেখানোর জন্য, দুটি ডেমো অ্যাপ্লিকেশন তৈরি করা হয়েছিল: একটি ক্লায়েন্ট অ্যাপ্লিকেশন যা যেকোনো ফ্লাটার অ্যাপ্লিকেশনকে অনুকরণ করে এবং আরেকটি যেটি একটি ফ্লাটার-ভিত্তিক Nanc অ্যাপ্লিকেশন কী করতে পারে তার ধারণা দেয় - পূর্বনির্মাণ করা Nanc CMS। এবং Nanc CMS অ্যাপ্লিকেশন, যেটি একটি পূর্ব-কনফিগার করা CMS যার একটি অতিরিক্ত স্তরের যুক্তির সাথে CMS-এর সাথে ক্লায়েন্ট অ্যাপ্লিকেশন সিঙ্ক্রোনাইজ করা হয়েছে।
টেক্সটের বেশিরভাগ লজিক ব্লকের শেষে, আপনি Nanc-এর কিছু দিক কীভাবে ব্যবহার/প্রদর্শন করবেন তার উদাহরণ সহ একটি ইউটিউব ভিডিও পাবেন।
ভূমিকা
সিএমএস সম্পর্কে
মডেলের প্রকারভেদ
সম্পাদক
ক্ষেত্র
ডায়নামিক ফ্লাটার অ্যাপ
Nanc ডেমো অ্যাপস
পরবর্তী কি / Afterwords
তাই। Nanc হল একটি ব্যাকএন্ড-অজ্ঞেয়বাদী CMS যা তার নিজস্ব ব্যাকএন্ড টানবে না। এটা কিভাবে কাজ করে? Nanc নেটওয়ার্ক পরিষেবা ইন্টারফেসগুলি বাস্তবায়নের প্রস্তাব দেয়, যার এই মুহূর্তে 6টি পদ্ধতি রয়েছে কিন্তু প্রকাশের সময় প্রায় 10টি থাকবে৷ এটা কি অনেক না সামান্য? উদাহরণস্বরূপ, ডেমো অ্যাপ্লিকেশনের জন্য এপিআই বাস্তবায়ন করতে 170 লাইনের কোড লেগেছে। এই পদ্ধতিগুলি আপনার বিদ্যমান ব্যাকএন্ডের সাথে Nanc-এর সমস্ত কাজের জন্য দায়ী। বাস্তবায়ন অবশ্যই ডার্টে লিখতে হবে (এছাড়াও ফ্লটারের জন্য বিকাশের ভাষা)। ভবিষ্যতে, Nanc নির্দিষ্ট ব্যাকএন্ড বিকল্পগুলির জন্য এই ইন্টারফেসগুলির প্রস্তুত বাস্তবায়ন নিয়ে আসবে - ফায়ারবেস, সুপাবেস, স্থানীয় / নেটওয়ার্ক SQLite এবং REST এবং GraphQL এর জেনেরিক বাস্তবায়ন (হয়তো অন্য কিছু?) এবং আপনাকে এই বাস্তবায়ন সম্পর্কে ভাবতে হবে না সব বা করতে হবে, কিন্তু সামান্য বিট.
Nanc-এর একটি মডেল হল একটি সত্তার কাঠামোগত বিবরণ যা আপনি Nanc-এর সাথে নিয়ন্ত্রণ করতে চান। একটি মডেলে একটি সত্তার নাম, বিভিন্ন ভিজ্যুয়াল প্যারামিটার এবং ক্ষেত্রগুলির একটি বিবরণ রয়েছে৷
একটি সংগ্রহ এমন একটি সত্তা যার অনেক উদাহরণ থাকতে পারে। ব্যবহারকারীদের একটি তালিকা, বই এবং পর্যালোচনাগুলি Nanc-এর সংগ্রহ-টাইপ মডেলগুলির ভাল উদাহরণ।
আপনি যদি রিলেশনাল ডাটাবেসের সাথে পরিচিত হন, তাহলে Nanc-এর একটি সংগ্রহের উদাহরণ আপনার ডাটাবেসের প্রায় যেকোনো টেবিল হতে পারে।
একটি একক (মডেল) একটি সত্তা যা একটি একক উদাহরণে বিদ্যমান। যেমন - ফিচার টগল বা কোনো কিছুর কনফিগারেশন, অথবা... "একটি মোবাইল অ্যাপ্লিকেশনের প্রধান স্ক্রীন"। সাধারণভাবে বলতে গেলে, একক-মডেলগুলি ব্যবহারযোগ্যতা বাড়ানোর জন্য ডিজাইন করা হয়েছে, আপনার ডাটাবেসের একটি অভিক্ষেপ মাত্র। এবং একটি সোলো-মডেল সহজেই আপনার ডাটাবেসের যেকোন টেবিল হতে পারে শুধুমাত্র একটি রেকর্ড সহ। কিন্তু এই মুহুর্তে, মডেলের এই শ্রেণীর বাস্তবায়নের জন্য এই মডেলের রেকর্ডের (ডাটাবেসের সারি) মডেলের id
সমান একটি id
থাকা প্রয়োজন।
final Model landingPage = Model( name: 'Landing page', /// ? id in format [toSnakeCase(name)] will be set automatically, if omitted // id: 'landing_page', isCollection: false, icon: IconPackNames.flu_document_page_break_regular, fields: [ ...
Nanc বিভিন্ন উপায়ে কনফিগার করা যেতে পারে: কোড দ্বারা, Nanc ইন্টারফেসের মাধ্যমে এবং এই বিকল্পগুলির সংমিশ্রণ।
যখন আমি "কনফিগারেশন" বলি, আমি বলতে চাচ্ছি, প্রথমত, আপনার মডেলের গঠন বর্ণনা করছি। আসুন একটি সাধারণ উদাহরণ নেওয়া যাক, বৈশিষ্ট্য মডেল, যা একটি পণ্যের বৈশিষ্ট্য বর্ণনা করে। এই সত্তা নিম্নলিখিত ক্ষেত্র ধারণ করে:
এবং কোড-প্রথম কনফিগারেশন হিসাবে বাস্তবায়ন নিম্নরূপ হবে:
import 'package:fields/fields.dart'; import 'package:icons/icons.dart'; import 'package:model/model.dart'; final Model feature = Model( name: 'Feature', icon: IconPackNames.flu_ribbon_star_filled, fields: [ [ IdField(width: 200), StringField(name: 'Title', maxLines: 1, isRequired: true, width: 400), ], [ IconField(name: 'Image', isRequired: true), ], [ StringField(name: 'Description', isRequired: true, showInList: true), ], ], );
এই ধরনের একটি মডেল বর্ণনা করে এবং এটি Nanc CMS-এ ব্যবহার করে, সেই মডেলের সমস্ত CRUD অপারেশন আপনার কাছে উপলব্ধ হয়ে যায়।
আমরা ঠিক একই ফিচার মডেল তৈরি করতে পারি (আসুন একে ফিচার ভেরিয়েন্ট বলি) Nanc ইন্টারফেসের মাধ্যমে। এবং (বিবেচনা করে যে Nanc ব্যবহার করার জন্য সমস্ত প্রস্তুতিমূলক কাজ সম্পন্ন করা হয়েছে) - আপনি যখন Nanc-এ একটি মডেল তৈরি করবেন, আপনি অবিলম্বে ডাটাবেসে একটি টেবিল তৈরি করবেন এবং পুরো CRUD আপনার কাছে অবিলম্বে উপলব্ধ হবে।
এছাড়াও, আপনি যখন Nanc ইন্টারফেসের মাধ্যমে একটি মডেল তৈরি করেন তখন আপনি ডাটাবেসে কিছু তৈরি না করার নিরাপদ উপায় নিতে পারেন। এবং স্বাধীনভাবে আপনার ডাটাবেসে একটি টেবিল তৈরি করুন, এবং তারপর, এটির অধীনে, Nanc-এ একটি মডেল তৈরি করুন। যাইহোক, আপনি যদি কোডে কনফিগারেশনটি বর্ণনা করেন তবে আপনাকে এটি করতে হবে - এটি থেকে আপনার ডাটাবেসে নতুন টেবিল প্রদর্শিত হবে না।
আপনার কাছে কোড-প্রথম কনফিগারেশন থাকলে এবং Nanc ইন্টারফেসের মাধ্যমে এটি পরিবর্তন করার সিদ্ধান্ত নেওয়া হলে এই বিকল্পটি আপনার কাছে উপলব্ধ হবে। এই ক্ষেত্রে, এই মডেলের আরও সমস্ত পরিবর্তন শুধুমাত্র ইন্টারফেসের মাধ্যমেই সম্ভব হবে, এবং মূল কোড-মডেলে করা পরিবর্তনগুলি উপেক্ষা করা হবে। কোড-ফার্স্টে ফিরে আসার একমাত্র উপায় হল মডেলটিকে "রিসেট" করা, এই ক্ষেত্রে ইন্টারফেসের মাধ্যমে করা মডেল কাঠামোর সমস্ত পরিবর্তন মুছে ফেলা হবে এবং কোড-প্রথম কনফিগারেশন আবার ব্যবহার করা হবে। কোন ডেটা এই রিসেট দ্বারা প্রভাবিত হয় না. এটি শুধুমাত্র মডেল গঠন প্রভাবিত করে।
এখন দেখা যাক Nanc বর্তমানে কোন ধরনের ক্ষেত্র সমর্থন করে।
BoolField আপনাকে bool
ডেটা টাইপ নিয়ন্ত্রণ করতে এবং ডিফল্ট মান কাস্টমাইজ করতে দেয়।
ColorField আপনাকে একটি সহজ কালার-পিকার প্রদান করে যা আপনাকে Nanc-এ অবিলম্বে একটি রঙ বেছে নিতে দেয়। এটি আপনাকে AHEX কোড সম্পাদনা করে ম্যানুয়ালি পরিবর্তন করার ক্ষমতাও দেয়৷ AHEX হল একটি ক্লাসিক HEX-রঙ (উদাহরণস্বরূপ, #10A0CF
), কিন্তু একটি অতিরিক্ত স্বচ্ছতার মান প্রথমে নির্দিষ্ট করা হয়েছে। এই ক্ষেত্রে, এই রঙটি #FF10A0CF
রঙের অনুরূপ হবে ( FF
হল 100% অস্বচ্ছতা - রঙটি সম্পূর্ণ অস্বচ্ছ)। এবং 50% অস্বচ্ছতার সাথে একই রঙটি দেখতে কেমন হবে: #7F10A0CF
।
DateField তারিখ এবং সময় নিয়ন্ত্রণের জন্য দায়ী (একবারে উভয় মান, তারিখ এবং সময়ের জন্য আলাদা আলাদা পরে প্রয়োগ করা হবে)। DateField-এ দুটি বুলিয়ান প্যারামিটার রয়েছে যা আপনাকে এই ক্ষেত্রের আচরণকে একটি সত্তা তৈরির সময় টাইমস্ট্যাম্প এবং পরিবর্তনের সময় টাইমস্ট্যাম্প করে পরিবর্তন করতে দেয়৷
ডাইনামিকফিল্ড, একদিকে, একটি খুব সাধারণ ক্ষেত্র, কিন্তু অন্যদিকে, এটি অন্যান্য ক্ষেত্রের সম্পূর্ণ জটিলতা অন্তর্ভুক্ত করে। প্রাথমিকভাবে, আপনি শুধুমাত্র এই ক্ষেত্রের চেহারা কনফিগার করতে পারেন (এটি Nanc ইন্টারফেসে কেমন দেখাবে - রঙ এবং সাথে থাকা আইকন)। এর পরে, এই ক্ষেত্রটি নিজেই সহ Nanc-এ উপলব্ধ যেকোনো মান ধারণ করতে পারে। এটার মানে কি? মূলত, DynamicField হল একটি টাইপ করা JSON যার নিজের মধ্যে ক্ষেত্রগুলিকে ক্রমানুসারে অবস্থান করার ক্ষমতা রয়েছে৷
EnumField হল একাধিক মান থেকে একটি মান নির্বাচন করার জন্য একটি ক্ষেত্র। একটি EnumField নির্বাচন করার সময় যে নিয়মটি অনুসরণ করতে হবে তা হল যদি আপনার কাছে নির্বাচন করার জন্য একটি চূড়ান্ত তালিকা থাকে যা একটি পৃথক ডাটাবেস টেবিলে সংরক্ষণ করা হয় না, তাহলে Enum নির্বাচন করুন। অন্যথায়, সিলেক্টরফিল্ড বেছে নিন, যা নীচে আরও বিশদে আলোচনা করা হয়েছে। TODO: এই মুহুর্তে এই ক্ষেত্রটি শুধুমাত্র CodeConfig এর মাধ্যমে কনফিগার করা যেতে পারে, ইন্টারফেসের মাধ্যমে কনফিগারেশন কাজ করা হয়নি।
HeaderField সত্যিই একটি ক্ষেত্র নয়, কিন্তু Nanc এ আপনার মডেলের জন্য একটি ভিজ্যুয়াল বর্ধক। আপনি এই অ ক্ষেত্রটি ব্যবহার করতে পারেন সম্পর্কিত ক্ষেত্রের একটি গোষ্ঠীর জন্য একটি সাধারণ শিরোনাম সেট করতে, অথবা হেডারফিল্ডকে একটি বিভাজক হিসাবে ব্যবহার করে একে অপরের থেকে মডেল ক্ষেত্রগুলিকে আলাদা করতে।
আইকনফিল্ড আপনাকে আইকনগুলির একটি পূর্বনির্ধারিত সেট থেকে একটি আইকন ( IconData
ক্লাস) নির্বাচন করার ক্ষমতা দেয়। বর্তমানে তাদের মধ্যে প্রায় 25,000 রয়েছে এবং এই সেটটিতে নিম্নলিখিত আইকনগুলি অন্তর্ভুক্ত রয়েছে:
প্রয়োজনে, মৌলিক ডেলিভারি সেটে অন্যান্য আইকন যোগ করা যেতে পারে, এবং খুব দূরের নয় ভবিষ্যতে আপনার নিজের আইকনগুলিও ব্যবহার করার বিকল্প থাকবে।
কেউ ভাবতে পারে, "আইকন আছে, রং আছে, কিন্তু ফন্ট আছে?" যদি আপনি করে থাকেন, তাহলে আপনি টেক্সট উইজেটের ডকুমেন্টেশনে উত্তরটি খুঁজে পেতে পারেন। সংক্ষিপ্ত উত্তর হল গুগল ফন্টের সমস্ত ফন্ট আপনার কাছে উপলব্ধ।
IdField একটি সহজ কিন্তু এত গুরুত্বপূর্ণ ক্ষেত্র। Nanc দ্বারা পরিচালিত প্রতিটি মডেলের আইডির অন্তত একটি ক্ষেত্র থাকতে হবে। বর্তমানে, শুধুমাত্র স্ট্রিং আইডি টাইপ সমর্থিত (এটি একটি সত্তার মধ্যে যেকোনো অনন্য স্ট্রিং হতে পারে)। সাংখ্যিক প্রকারের জন্যও সমর্থন যোগ করার পরিকল্পনা রয়েছে, যা, যদিও, এপিআই বাস্তবায়নে সাংখ্যিক প্রকারে ফিল্ড ডেটা কাস্ট করে এখনও বাস্তবায়িত করা যেতে পারে।
মাল্টিসিলেক্টরফিল্ড একটি জটিল ক্ষেত্র যা একটি রিলেশনাল বহু-থেকে-অনেক বা বহু-থেকে-এক সম্পর্ক বাস্তবায়নের জন্য দায়ী। এই ক্ষেত্রটি ব্যবহার করার তিনটি মোড রয়েছে। আসুন আরো বিস্তারিতভাবে তাদের প্রতিটি মাধ্যমে হাঁটুন। TODO: এই মুহুর্তে এই ক্ষেত্রটি শুধুমাত্র CodeConfig এর মাধ্যমে কনফিগার করা যেতে পারে, ইন্টারফেসের মাধ্যমে কনফিগারেশন কাজ করা হয়নি।
এই মোড আপনাকে সরাসরি মূল সত্তায় সম্পর্কিত সত্তার id
সংরক্ষণ করার ক্ষমতা দেয়। যেমন- আমাদের দুটি মডেল আছে- রিডার এবং বুক। এই মোডে, পাঠকের নেওয়া বইগুলিকে রিডার মডেল ফিল্ডে সংরক্ষিত আইডি হিসাবে গণ্য করা হবে। যেমন এই মত:
/// user table { id: 'UUID', name: 'String', books: [ 'UUID', 'UUID' // ... ] }
উপরে JSON5 সিনট্যাক্স ব্যবহার করে প্রকাশ করা একটি উদাহরণ টেবিল গঠন।
এই মোডের অসুবিধা হল সীমিত ডেটা অখণ্ডতা। আপনি যদি books
পাঠক ক্ষেত্র থেকে অপ্রচলিত (মুছে ফেলা) বই আইডিগুলি স্বয়ংক্রিয়ভাবে অপসারণ কার্যকর না করেন তবে আপনি ত্রুটিগুলি পাবেন৷
SQL বিশ্ব থেকে সম্পর্ক প্রদানের ক্লাসিক মোড। এই মোডটি ব্যবহার করার সময়, আপনি একটি পৃথক টেবিলে সত্তা সম্পর্ক সংরক্ষণ করেন এবং 100% ডেটা অখণ্ডতা নিশ্চিত করেন। নিম্নলিখিত গঠন এই মোড একটি উদাহরণ:
[ /// user table { id: 'UUID', name: 'String' }, /// book table { id: 'UUID', title: 'String' }, /// user_books_relations table { user_id: 'UUID', book_id: 'UUID' } ]
7ম সেকেন্ডে আপনি একটি সামান্য টুইচ দেখতে পারেন এবং আপনি যদি ঘনিষ্ঠভাবে লক্ষ্য করেন তবে আপনি লক্ষ্য করতে পারেন যে পৃষ্ঠার url পরিবর্তিত হয়েছে - এইভাবে আমি বাগটি লুকানোর চেষ্টা করেছি: তৃতীয় টেবিল মোডে ডেটা কেবলমাত্র মূল পৃষ্ঠায় সংরক্ষণ করা হয় যদি এটি ইতিমধ্যে সংরক্ষিত হয়েছে 🤷🏼
সাধারণত আইডির অ্যারে-এর মতো, প্যারেন্ট রেকর্ড শনাক্তকারীকে সঞ্চয় করে না, তবে সম্পূর্ণ বস্তু (একটি সমতল কাঠামো হিসাবে, নেস্টেড রেকর্ডের কোনো সম্ভাব্য সংশ্লিষ্ট সত্তা ছাড়া)। এটির আইডির অ্যারের মতো একই অসুবিধা রয়েছে, তবে একটি অতিরিক্ত রয়েছে - স্টোরেজের ব্যবহার বৃদ্ধি৷ যাইহোক (অন্তত মুহূর্তের জন্য) এই মোডের প্রয়োগের একটি ক্ষেত্র রয়েছে এবং এটি খুবই গুরুত্বপূর্ণ। তবে আমরা এই বিষয়ে একটু পরে কথা বলব।
আমি ভিডিওতে নিজের থেকে এগিয়ে আছি, স্ক্রিনফিল্ড দেখাচ্ছে, আমরা এটিতে ফিরে আসব
সাধারণভাবে, "নন-ক্যাননিকাল" মোডগুলি ভার্চুয়াল করার একটি ধারণা রয়েছে - যাতে তারা তৃতীয় টেবিলের মাধ্যমে কাজ করে এবং পৃষ্ঠাটি সম্পাদনা করার সময় প্রয়োজনীয় ডেটা লোড হয় (যদি প্রয়োজন হয়)।
NumberField সঞ্চয় সংখ্যা - যে হিসাবে সহজ.
সিলেক্টরফিল্ড মাল্টিসিলেক্টরফিল্ডের মতো (যেমন আপনি তাদের নাম থেকে অনুমান করতে পারেন), তবে একটু সহজ - এখানে সম্পর্কটি এক থেকে এক বা এক থেকে একাধিক, এবং দুটি মোড রয়েছে। TODO: এই মুহুর্তে এই ক্ষেত্রটি শুধুমাত্র CodeConfig এর মাধ্যমে কনফিগার করা যেতে পারে, ইন্টারফেসের মাধ্যমে কনফিগারেশন কাজ করা হয়নি।
SQL লিঙ্ক বিধানের একটি সাধারণ ফর্ম, যেখানে প্যারেন্ট রেকর্ড ফিল্ড লিঙ্ক করা রেকর্ডের আইডি সঞ্চয় করে। একটি উদাহরণ হিসাবে পাঠক গ্রহণ করা যাক. এটা কে? প্রথমত এটি একজন ব্যক্তি, এবং একজন ব্যক্তির কী আছে? সেটা ঠিক! জন্মের শহর (যা আমাদের লাইব্রেরি, কোনো কারণে, জানতে চেয়েছিল)।
/// user table { id: 'UUID', name: 'String', birth_place_id: 'UUID' }
মাল্টিসেলেক্টরফিল্ডের অবজেক্টের অ্যারের সাথে খুব মিল, কিন্তু আমরা প্যারেন্ট রেকর্ডের ক্ষেত্রে একটি একক সংশ্লিষ্ট মান সংরক্ষণ করব। অসুবিধাগুলি একই, প্লাসগুলিও নীচে সামান্য বিট বর্ণনা করা হবে।
স্ট্রিংফিল্ড স্ট্রিং সঞ্চয় করে। এই ক্ষেত্রটিতে একটি ব্যক্তিগত সেটিং রয়েছে যা Nanc-এ সম্পাদনার সুবিধার জন্য দায়ী - সম্পাদনাযোগ্য ক্ষেত্রের সর্বোচ্চ উচ্চতা সীমাবদ্ধ করার পরামিতি। যদি আপনার পাঠ্যটি বড় হয় - এটি মোটেও নির্দিষ্ট না করার অর্থ হয়, তাহলে ক্ষেত্রটি পাঠ্যের উচ্চতার সাথে সামঞ্জস্য করবে। বড় আকারে সীমাবদ্ধ হলে - আপনি স্পষ্ট ক্ষেত্রের উচ্চতা (লাইনে) নির্দিষ্ট করতে পারেন এবং তারপরে এটি সর্বদা তাই হবে। এবং অবশেষে, ছোট স্ট্রিংগুলির জন্য আপনি এটিকে একটি লাইনে সেট করতে পারেন এবং তারপরে আপনি এটিতে যতই লিখুন না কেন ক্ষেত্রটি প্রসারিত হবে না।
StructureField আপনাকে মডেল রেকর্ডে টাইপ করা কাঠামোর একটি অ্যারে সংরক্ষণ করতে দেয়। আপনি সংরক্ষণ করার জন্য ডেটার ধরন নির্দিষ্ট করুন এবং এটি সহজে এবং সহজভাবে পরিচালনা করতে পারেন। কাঠামো ক্ষেত্রগুলির জন্য উপলব্ধ প্রকারগুলি একেবারে সবকিছু। তাই আপনি সহজেই একটি "ডাইনামিক স্ট্রাকচার ফিল্ড রিপিট" তৈরি করতে পারেন। TODO: ডেমোর মধ্যে StructureField-এ শুধুমাত্র "ফ্ল্যাট" ক্ষেত্র যোগ করা যেতে পারে।
ScreenField হল এমন একটি ক্ষেত্র যা আপনাকে ফ্লটারে একটি সম্পূর্ণ অ্যাপ্লিকেশন লিখতে দেয়, ঠিক Nanc-এ! ScreenField-এর সাহায্যে আপনি একটি একক...স্ক্রীনের ইন্টারফেস বর্ণনা করতে পারেন, আপনি যেভাবে চান তা আপডেট করতে পারেন এবং কয়েক মিনিটের মধ্যে যেকোনো সময় এটি করতে পারেন - অ্যাপল এবং গুগলের পর্যালোচনার জন্য ক্লান্তিকর এবং স্নায়ু-র্যাকিং অপেক্ষা না করে।
আসুন এই ধরণের ক্ষেত্রটি (এবং আসলে Nanc-এর সম্পূর্ণ আলাদা কার্যকরী শাখা) আরও একটু বিস্তারিতভাবে ভেঙে দেওয়া যাক।
স্ক্রিনফিল্ডের সাহায্যে, আপনি আপনার ব্রাউজারে (এবং আপনার IDE) প্রায় কোনো জটিলতার একটি ইন্টারফেস তৈরি করতে পারেন এবং তারপর - স্টক প্রকাশনা না করেই - আপনার অ্যাপ্লিকেশনে সংশ্লিষ্ট স্ক্রীন আপডেট করুন৷ আপনি যদি দ্রুত হাইপোথেটিকাল চেক করতে চান তবে এটি একটি দুর্দান্ত বৈশিষ্ট্য। এই কার্যকারিতাটি আপনার অ্যাপের তুলনামূলকভাবে সহজ (যুক্তির পরিপ্রেক্ষিতে) পৃষ্ঠাগুলির জন্য দুর্দান্ত, যা, তবে, প্রায়শই পরিবর্তন করতে হবে৷ ভবিষ্যতে, এই কার্যকারিতাটি এমন একটি রাজ্যে প্রসারিত হবে যেখানে আপনি কোনও সীমাবদ্ধতা ছাড়াই আপনি যা চান তা সত্যিই তৈরি করতে পারবেন।
এখন চলুন Nanc-এর সাথে গতিশীল স্ক্রিন তৈরির সমস্ত দিক বিবেচনা করি।
ফ্লটারে প্রচুর উইজেট রয়েছে। তাঁদের অনেকে. একটি উইজেট কি? এটি কার্যকারিতার একটি ইট যা থেকে আপনি আপনার অ্যাপ্লিকেশন একত্রিত করেন। এটি শুধুমাত্র ভিজ্যুয়াল হতে পারে, অথবা এটি যৌক্তিক হতে পারে - ভিতরে কিছু আচরণ সহ। Nanc বাস্তবায়িত উইজেটগুলির একটি বিস্তৃত তালিকা প্রদান করে যা আপনি আপনার UI তৈরি করতে ব্যবহার করতে পারেন। কিন্তু যত বেশি সম্ভাবনা রয়েছে - তাদের সম্পর্কে জানা তত কঠিন... তাই Nanc-এর স্ক্রিন এডিটর আপনাকে একটি ইন্টারেক্টিভ ডকুমেন্টেশনে অ্যাক্সেস দেয় যেখানে আপনি জানতে পারবেন কোন উইজেটগুলি বর্তমানে প্রয়োগ করা হয়েছে, তাদের কী প্যারামিটার এবং কনফিগারযোগ্য বৈশিষ্ট্য রয়েছে এবং, ডকুমেন্টেশনে, দেখুন কিভাবে তারা আপনার তৈরি করা ইন্টারফেসের চেহারাকে প্রভাবিত করে।
Nanc আপনাকে রিয়েল টাইমে একটি ইন্টারফেস তৈরি করতে দেয়, তবে সবচেয়ে গুরুত্বপূর্ণ - এটি আপনাকে এটি খুব সহজে এবং দ্রুত করতে দেয় (একটি ডেমো অ্যাপ্লিকেশন ইন্টারফেস করতে এটি 2 ঘন্টার বেশি সময় নেয়)। কিন্তু প্রশ্ন জাগে- কিভাবে নিজেই UI তৈরি করবেন? Nanc-এ UI বর্ণনা করার জন্য কোন বহিরাগত সিনট্যাক্স নেই, দীর্ঘ JSON-এর মতো "খুব" সহজ সমাধানও নেই, যা আপনাকে Nanc-এ ইন্টারফেস তৈরি করতে ঘৃণা করবে।
সেরা সমাধান খোঁজার ফলাফল হল সহজ এবং সোজা XML বাক্য গঠন। সমস্ত স্ট্যান্ডার্ড ফ্লাটার উইজেটগুলির ঠিক একই নাম রয়েছে তবে XML আকারে৷ উদাহরণস্বরূপ, Nanc-এ SizedBox
উইজেট হবে <sizedBox>...</sizedBox>
, এবং এই নিয়মটি ব্যতিক্রম ছাড়াই সমস্ত উইজেটের ক্ষেত্রে প্রযোজ্য। যদি উইজেটের কিছু জটিল সম্পত্তি থাকে, তাহলে এটির prop
সহ XML এর মতো একই (বা সহজ) নাম থাকবে। উদাহরণস্বরূপ - উইজেট Container
একটি জটিল সম্পত্তি আছে boxDecoration
, যার নিজস্ব অভ্যন্তরীণ বৈশিষ্ট্য রয়েছে। সুতরাং, Nanc-এর এই সম্পত্তির নিচের চেহারা থাকবে: <prop:decoration>...</prop:decoration>
। এই নিয়ম সব জটিল বৈশিষ্ট্য প্রযোজ্য. এবং শেষ দিকটি হল যে আর্গুমেন্টগুলি তুলনামূলকভাবে সহজ সেগুলি হল XML ট্যাগ প্যারামিটার৷ আসুন একটি উদাহরণ হিসাবে একই SizedBox
নিন:
<sizedBox width="50" height="50"> ... </sizedBox>
কিছু উইজেটের জন্য, কোড লেখা সহজ করার জন্য অতিরিক্ত আর্গুমেন্ট প্রয়োগ করা হয়, এবং SizedBox
এর জন্য এটি ize
আর্গুমেন্ট যা width
এবং height
উভয়ই সেট করে।
এখানে লেখা সবকিছুই অনলাইন ডকুমেন্টেশনে রয়েছে, তাই আপনি যদি কিছু ভুলে যান বা কিছু জানতে চান, তাহলে সেটি পড়ুন এবং সেখানে আপনার সমস্ত প্রশ্নের উত্তর খুঁজুন।
নতুন উইজেটের জন্য সমর্থন প্রয়োগ করুন - 10 মিনিট থেকে কয়েক ঘন্টার ব্যাপার। এই মুহুর্তে, প্রায় সমস্ত মৌলিক উইজেটগুলি বাস্তবায়িত হয়, যার মধ্যে আপনি যুক্তি সহ একটি জটিল ইন্টারফেস তৈরি করতে পারেন। সময়ের সাথে সাথে, Flutter-এ উপলব্ধ সমস্ত উইজেটগুলি Nanc-এ প্রয়োগ করা হবে এবং আপনি সত্যিই সবকিছু করতে পারবেন। কিন্তু এখানেই শেষ নয়. আপনি সহজেই এবং সহজভাবে আপনার নিজস্ব উইজেটগুলি বাস্তবায়ন করতে পারেন এবং XML কোডের এক বা দুটি লাইনের সাথে Nanc-এ ব্যবহার করতে পারেন। উদাহরণস্বরূপ - স্ট্যান্ডার্ড ফ্লটার লাইব্রেরিতে এমন কোনও উইজেট নেই যা আপনাকে ছবি সহ ক্যারোজেল স্লাইডারটি সহজেই প্রদর্শন করতে দেয়। আপনাকে নিজেই একটি বাস্তবায়ন লিখতে হবে বা এরকম কিছু ওপেন সোর্স সমাধান ব্যবহার করতে হবে। এবং, আপনার যা প্রয়োজন তা বাস্তবায়ন করে - আপনি খুব সহজেই আপনার উইজেটটিকে Nanc-এ একীভূত করতে পারেন এবং এটি ব্যবহার করতে পারেন।
Nanc Flutter-এ XML কোডকে একটি ইন্টারফেসে রূপান্তর করার ক্ষমতা ছাড়াও আরও অনেক কিছু সরবরাহ করে। Nanc টেমপ্লেটিং এবং যুক্তি লেখার ক্ষমতা প্রদান করে। শর্তসাপেক্ষ উপাদান রেন্ডারিং, লুপ অঙ্কন, ট্যাপ হ্যান্ডলিং - এটি ইতিমধ্যেই Nanc-এর বর্তমান 0.0.1
সংস্করণে রয়েছে৷
এখন পর্যন্ত, লজিক অংশটি বেশ সহজবোধ্য - এটি আগে থেকে লেখা আপনার `.dart' কোডে ট্যাপ এবং ইভেন্ট পরিচালনার মাধ্যমে ইন্টারঅ্যাকশন সমর্থন করে - কিন্তু অবশেষে Nanc-এর এই অংশটি যথেষ্ট প্রসারিত হবে, যা আপনাকে ব্রাউজারেই ডার্টে যুক্তি লিখতে দেয় এবং এটি আপনার অ্যাপ্লিকেশনে কাজ করে।
ব্যবহারকারীর ক্লিকগুলি পরিচালনা করার পদ্ধতিটি নিম্নরূপ - আপনি "অ্যাকশন" এর একটি তালিকা নির্ধারণ করতে পারেন যা ব্যবহারকারী আপনার অ্যাপে করতে পারে। উদাহরণস্বরূপ - অভ্যন্তরীণ অ্যাপ্লিকেশন স্ক্রীন খুলুন, বাহ্যিক লিঙ্কে ক্লিক করুন, স্ন্যাকবার প্রদর্শন করুন, মডেল উইন্ডো এবং আরও অনেক কিছু পপ আপ করুন এবং এই জাতীয় ক্রিয়াগুলির জন্য আগে থেকেই হ্যান্ডলার তৈরি করুন। এবং তারপর যে কোনো উপায়ে যে কর্ম ব্যবহার আপনি Nanc এ চান. ইভেন্ট পরিচালনার বিষয়ে আরও তথ্যের জন্য, Nanc-এ InkWell
উইজেটের ডকুমেন্টেশন দেখুন।
Nanc একটি অন্তর্নির্মিত XML সম্পাদক আছে, কিন্তু এটি খুব সহজ নয়. এটি অনুসন্ধানযোগ্য নয় (এখনও), এটি অনেক কোড সহ খুব দ্রুত নয় এবং এটির কোন স্বয়ংক্রিয়-সম্পূর্ণতা নেই। এটা নিয়ে কিভাবে বাঁচবো? উদাহরণস্বরূপ - ব্যবহারকারীকে তার প্রিয় IDE ব্যবহার করতে দিন এবং রিয়েল টাইমে Nanc-এর পরিবর্তনগুলি দেখতে দিন। কিভাবে, তা আমাকে দেখাতে দাও।
এবং এটি হল ওয়েব (যার সাথে আপনাকে খেলতে হবে):
ভবিষ্যতে স্বয়ংসম্পূর্ণ সমর্থন যোগ করা হবে, সম্ভবত সুদূর ভবিষ্যতে...আমি এক্সএমএল স্কিমার গভীরে যাওয়ার চেষ্টা করেছি, বেশ কিছু দিন কাটিয়েছি, কিন্তু এখনও পর্যন্ত পারিনি 🤷🏼
আলাদাভাবে, আমি কর্মক্ষমতা উল্লেখ করতে চাই (মোবাইল ডিভাইসে XML থেকে ইন্টারফেস অঙ্কন)। সংক্ষেপে, এটি ফ্লটারের পারফরম্যান্সের সাথে অভিন্ন, কোন ওভারহেড ছাড়াই। এই মুহূর্তে, "স্ক্রিন" হল একটি অলসভাবে রেন্ডার করা উইজেটগুলির তালিকা (SliverList), যা অ্যাসিঙ্ক্রোনাসভাবে তৈরি করা হয়েছে। পরবর্তীতে, এই বাস্তবায়নটি অ্যাসিঙ্ক্রোনাসভাবে উইজেট রেন্ডারিং শুরু করার জন্য পরিমার্জিত হবে, কিন্তু পরিবর্তে, তাই বিষয়বস্তু প্রদর্শনের জন্য প্রয়োজনীয় সময় XML-এ বর্ণিত প্রথম উইজেটটি রেন্ডার করতে যে সময় লাগে তার সমান হবে।
ক্ষমতা প্রদর্শনের জন্য, ন্যাঙ্কের সাথে এই মুহূর্তে কী অর্জন করা যেতে পারে তা দেখানোর জন্য ডেমো অ্যাপের একটি সর্বজনীন সেট তৈরি করা হয়েছে। এটি অ্যান্ড্রয়েড এবং ওয়েবে একটি ক্লায়েন্ট অ্যাপ্লিকেশন (পরবর্তীটি সাময়িকভাবে একটি iOS অ্যাপ্লিকেশনের ভূমিকা পালন করে)। সেইসাথে Nanc CMS অ্যাপ। নীচে তাদের সম্পর্কে আরও পড়ুন.
ক্লায়েন্ট হল একটি ক্লায়েন্ট ডেমো অ্যাপ্লিকেশন যা nanc ইকোসিস্টেম থেকে একটি একক লাইব্রেরি ব্যবহার করে। এই লাইব্রেরি আপনাকে Flutter এ XML কে একটি অ্যাপ্লিকেশন ইন্টারফেসে রূপান্তর করতে দেয়। এই অ্যাপ্লিকেশনটির শুধুমাত্র একটি স্ক্রীন রয়েছে, যা সম্পূর্ণরূপে Nanc-এ তৈরি করা হয়েছে এবং এটিকে ইচ্ছামতো আপডেট করা যেতে পারে এবং স্টোররুম ছাড়াই যেকোনো সময়। নীচে ডানদিকে একটি সংযোগ আইকন সহ একটি বোতাম রয়েছে - এটি ডেমো-সিএমএসের সাথে সংযোগের জন্য দায়ী। এই "সংযোগ" নীচে কি হবে সে সম্পর্কে আরো.
অ্যাডমিন হল একটি Nanc-CMS ডেমো অ্যাপ্লিকেশন, যার একটি অতিরিক্ত প্রয়োগকৃত যুক্তির স্তর রয়েছে, যা ক্লায়েন্টদের সাথে সিঙ্ক্রোনাইজ করার ক্ষমতা প্রদান করে (নীচের সংযোগ সম্পর্কে আরও)। Nanc-CMS ডেমো অ্যাপ্লিকেশনে, ব্যবহারকারীর ব্রাউজার নিজেই এবং এর স্থানীয় স্টোরেজ "ব্যাকএন্ড" হিসাবে কাজ করে। আপনি যা কিছু যোগ করেন বা পরিবর্তন করেন তা শুধুমাত্র আপনার ব্রাউজারেই সংরক্ষিত থাকে। Nanc-CMS-এ আপনি বিদ্যমান মডেলগুলির সাথে সম্পর্কিত ডেটা সংশোধন/তৈরি/মুছে ফেলতে পারেন (আপনি সেগুলি দেখতে পাবেন), এবং - আপনি ইন্টারফেসের মাধ্যমে আপনার নিজস্ব মডেল তৈরি করতে পারেন এবং তাদের সাথে একই কাজ করতে পারেন।
এই ডেমো তৈরিতে ব্যবহৃত ডেটা মডেলগুলির একটি SQL উপস্থাপনা হিসাবে, আপনি নিম্নলিখিত স্ক্রিনশট দ্বারা পরিচালিত হতে পারেন:
এই বিভাগটি শুধুমাত্র ক্লায়েন্ট এবং CMS অ্যাপ্লিকেশনের "ডেমো" এর যুক্তির সাথে সম্পর্কিত। এবং এটি Nanc-এর সাথে ইন্টারঅ্যাক্ট করার অভিজ্ঞতা এবং ক্লায়েন্ট আপডেট করার প্রক্রিয়াকে অনুকরণ করার জন্য প্রয়োগ করা হয়েছিল। কিন্তু প্রথম জিনিস প্রথম.
একটি বাস্তব উত্পাদন প্রকল্পে আপনি নিম্নলিখিত উপায়ে Nanc ব্যবহার করতে পারেন: API পরিষেবাগুলি প্রয়োগ করে কোথাও একটি স্থির Nanc CMS অ্যাপ্লিকেশন স্থাপন করুন। এটি আপনার ব্যাকএন্ডের সাথে যোগাযোগ করবে এবং আপনি আপনার পছন্দ অনুযায়ী Nanc ব্যবহার করবেন। আপনার অ্যাপ্লিকেশনটিতে nanc ইকোসিস্টেম থেকে একটি লাইব্রেরি রয়েছে যা আপনাকে ইন্টারফেস রেন্ডার করতে দেয়। আপনি একটি আপডেট করেছেন - অ্যাপটি আপনার ব্যাকএন্ড থেকে নতুন কোড লোড করেছে, আপডেট হয়েছে - সবাই খুশি এবং সন্তুষ্ট৷
এই মডেলটিকে ক্রিয়াকলাপে দেখানোর জন্য, একই জিনিস প্রয়োগ করা হয়, তবে একটি সরলীকৃত উপায়ে:
Nanc CMS একটি স্থির হিসাবে বিদ্যমান, github পৃষ্ঠাগুলিতে পড়ে আছে এবং আপনি এটিকে "বাস্তব জীবনে" এর মতো ব্যবহার করতে পারেন, তবে আপনার ব্রাউজারটি ব্যাকএন্ড হিসাবে কাজ করে। অর্থাৎ, এপিআইগুলিকে এমনভাবে প্রয়োগ করা হয়েছে যে তারা "নেটওয়াকে যান" - ব্রাউজার লোকাল স্টোরেজে। এই অংশটি দিয়ে আমরা সম্পন্ন করেছি, তবে এখনও একটি মোবাইল অ্যাপ্লিকেশন রয়েছে, যা আপনাকে অবশ্যই "আপডেট" করার প্রক্রিয়াটি দেখাতে হবে।
ঠিক আছে, এখানেই "সংযোগ" আসে। সংক্ষেপে - আপনি যেকোনো Nanc ক্লায়েন্ট ডেমো অ্যাপ এবং যেকোনো Nanc CMS ডেমো অ্যাপের মধ্যে সরাসরি সংযোগ স্থাপন করতে পারেন। এটি করার জন্য আপনাকে CMS-এ QR কোড আইকন সহ নীচের ডানদিকের বোতামে ক্লিক করতে হবে। প্রদর্শিত মডেল উইন্ডোতে, আপনি QR কোড দেখতে পাবেন। পরবর্তী আপনার দুটি চেয়ার আছে - আপনি নীচের ডানদিকে অনুরূপ বোতাম টিপে মোবাইল (বা ব্রাউজার) ক্লায়েন্ট অ্যাপ্লিকেশনের সাথে এই কোডটি স্ক্যান করতে পারেন, তারপর সংযোগটি স্বয়ংক্রিয়ভাবে প্রতিষ্ঠিত হবে। অথবা আপনি QR কোডে ক্লিক করতে পারেন এবং সংযোগের জন্য প্রয়োজনীয় ডেটা ক্লিপবোর্ডে অনুলিপি করা হবে। তারপরে আপনাকে মোবাইল অ্যাপ্লিকেশনের ইনপুট ক্ষেত্রে এই ডেটা পেস্ট করতে হবে এবং বোতাম টিপে সংযোগ করতে হবে। সংযোগ স্থাপিত হলে - আপনি নিজেই বুঝতে পারবেন। এর পরে, আপনি বিদ্যমান ল্যান্ডিং পৃষ্ঠার সাথে যা চান তা করতে পারেন এবং মোবাইল অ্যাপে রিয়েল টাইমে (সংরক্ষণের পরে) পরিবর্তনগুলি দেখতে পারেন।
কিন্তু আপনি ল্যান্ডিং পৃষ্ঠার মধ্যে সীমাবদ্ধ নন। আপনি ব্রাউজারে সরাসরি যেকোন নতুন মডেল তৈরি করতে পারেন, সেগুলোকে বিষয়বস্তু দিয়ে পূরণ করতে পারেন এবং যদি আপনার মডেলগুলিতে ইন্টারফেস বর্ণনার জন্য একটি ক্ষেত্র থাকে (টাইপ স্ক্রীন) - তাহলে আপনি যখন এই ধরনের সত্তাগুলি সংরক্ষণ করবেন, আপনি অ্যাপ্লিকেশনটিতে ফলাফলও দেখতে পাবেন - নতুন মডেলের স্ক্রীনটি বিদ্যমান অ্যাপ্লিকেশন স্ক্রীনকে প্রতিস্থাপন করবে। একমাত্র বিন্দু হল যে যেহেতু ক্লায়েন্ট অ্যাপ্লিকেশনটি জানে না যে আপনার নতুন তৈরি করা রেকর্ডটি কী ধরণের ক্ষেত্র, তাই এটিতে সম্ভাব্য শনাক্তকারীগুলি নির্ধারিত রয়েছে, যা স্ক্রিনফিল্ডস বলে প্রত্যাশিত৷
সুতরাং আপনি যদি স্ক্র্যাচ থেকে সম্পূর্ণরূপে একটি স্ক্রিন তৈরি করতে চান এবং এটিকে অ্যাপ্লিকেশনটিতে প্রদর্শন করতে চান তবে নিম্নলিখিত তালিকা থেকে আইডিফিল্ড মান হিসাবে কিছু ব্যবহার করুন:
আপনি যদি কিছু ভাঙেন - শুধু admin.nanc.io ডেটা রিসেট করুন (Chrome: F12 -> অ্যাপ্লিকেশন -> অ্যাপ্লিকেশন -> স্টোরেজ -> সাইট ডেটা সাফ করুন), ভাল, আপনি যখন ক্লায়েন্ট অ্যাপ্লিকেশনটি পুনরায় খুলবেন তখন এটি সর্বদা তৈরি প্রকৃত স্ক্রিন কোড লোড করবে এই ডেমো জন্য. (আপনি সংযোগ করলেই আপনার ব্রাউজার থেকে কোড লোড হবে)
এবং অবশেষে, একটি স্ক্রিনফিল্ড ধারণকারী একটি নতুন মডেলের একটি নতুন পৃষ্ঠা তৈরি করার এবং অ্যাপ্লিকেশনটিতে এটি রেন্ডার করার একটি ছোট উদাহরণ:
পাবলিক ডেমো প্রস্তুত. সূচনা নিবন্ধটি লেখা হয়েছে। ন্যাঙ্কের ভবিষ্যত পরিকল্পনা - মডেল তৈরির জন্য ইন্টারফেস পদ্ধতির কার্যকরী অখণ্ডতা সম্পূর্ণ করার জন্য, সমস্ত ক্ষেত্র কনফিগার করা সম্ভব করে - Enum, নির্বাচক এবং মাল্টিসিলেক্টর। পরিচিত বাগগুলি ঠিক করুন, যেমন স্ট্রাকচারফিল্ডে উপাদানগুলির অবস্থান পরিবর্তন করা। তারপর "ব্লা ব্লা ব্লা", এবং তারপর "অত-এত-ও"। ব্যাকলগ কমপক্ষে পরবর্তী অর্ধ বছরের জন্য যথেষ্ট হবে, তবে কার্যকারিতা সম্প্রসারণের আরও মডেলটি গ্রাহকের চাহিদার উপর ভিত্তি করে হবে, তাই আপনার যদি ধারণা/সমালোচনা / বাগ পাওয়া যায় (এবং সেগুলির অনেকগুলি আছে) / অন্য কিছু - অনুগ্রহ করে ফর্মটি পূরণ করুন, যার লিঙ্কটি ক্লায়েন্ট ডেমো অ্যাপ্লিকেশনে উপলব্ধ।
আপনি যদি Nanc এর বৈশিষ্ট্যগুলিতে আগ্রহী হন এবং আপনি সহযোগিতা করতে আগ্রহী হন - ফর্মটিও পূরণ করুন এবং আমরা অবশ্যই কথা বলব৷