বিল্ডিং অ্যাপস
UI ডিজাইনার ব্যবহার করে আপনার ওয়েব অ্যাপ পৃষ্ঠাগুলি তৈরি, কাস্টমাইজ এবং পরিচালনা করার প্রক্রিয়ার মাধ্যমে আপনাকে সম্পূর্ণ গাইড করুন৷
একটি অ্যাপ্লিকেশন তৈরি করতে, আপনাকে লেআউট, পৃষ্ঠাগুলি তৈরি করতে হবে, সেগুলিকে সামগ্রী দিয়ে পূরণ করতে হবে এবং ওয়েব অ্যাপ ইন্টারঅ্যাকশন সেট আপ করতে হবে।
বিন্যাস
এর আগে, আমরা লেআউটের ধারণাটি চালু করেছি। লেআউট তৈরি শুরু করতে, আপনাকে প্রথমে আপনার অ্যাপ্লিকেশনের কাঠামোর রূপরেখা দিতে হবে এবং ব্যবহার করার জন্য পৃষ্ঠা টেমপ্লেটগুলি সনাক্ত করতে হবে।
আপনি যদি কিছু মিস করেন, চিন্তা করবেন না। আপনি যখন প্রয়োজন হবে লেআউট তালিকা বাড়াতে পারেন।
লেআউট তালিকা
লেআউট তালিকা আপনার ওয়েব অ্যাপ্লিকেশনের সমস্ত লেআউট প্রদান করে। এখানে, আপনি বিভিন্ন ধরনের ক্রিয়াকলাপ সম্পাদন করতে এবং লেআউট পরিচালনা করতে পারেন।
লেআউট তালিকা অ্যাক্সেস করতে, UI ডিজাইনার ট্যাবে বাম টুলবারে 4র্থ ট্যাবটি নির্বাচন করুন অথবা শর্টকাট কী 4 ব্যবহার করুন। আপনার সমস্ত অ্যাপ্লিকেশন লেআউট এখানে প্রদর্শিত হবে।
প্রতিটি অ্যাপ্লিকেশনের অন্তত একটি লেআউট থাকতে হবে। আপনি যখন একটি নতুন অ্যাপ্লিকেশন তৈরি করবেন, নির্বাচিত অ্যাপ্লিকেশন টেমপ্লেটের উপর নির্ভর করে এক বা একাধিক লেআউট স্বয়ংক্রিয়ভাবে তৈরি হবে। তাদের মধ্যে একটিকে **ডিফল্ট** হিসেবে চিহ্নিত করা হয়েছে।
লেআউট তালিকায়, আপনি লেআউটগুলিতে নিম্নলিখিত ক্রিয়াগুলি সম্পাদন করতে পারেন:
- নির্বাচন করুন,
- নতুন যোগ করুন,
- নাম পরিবর্তন করা,
- নকল,
- মুছে ফেলা.
ডিফল্ট বিন্যাস
একটি নতুন পৃষ্ঠা তৈরি করার সময় ডিফল্ট লেআউটটি লেআউট তালিকা থেকে স্বয়ংক্রিয়ভাবে নির্বাচিত হয়। যাইহোক, প্রয়োজনে এটি একটি ভিন্ন লেআউট দিয়ে প্রতিস্থাপন করা যেতে পারে।
ডিফল্ট লেআউট ব্যবহার বিকাশের গতি বাড়ায়, তাই আমরা ডিফল্ট হিসাবে সর্বাধিক ব্যবহৃত লেআউট ব্যবহার করার পরামর্শ দিই। মনে রাখবেন যে একটি সময়ে শুধুমাত্র একটি লেআউট ডিফল্ট হিসাবে সেট করা যেতে পারে। ডিফল্ট লেআউট ওভাররাইড করা বিদ্যমান পৃষ্ঠাগুলিকে প্রভাবিত করে না যদি না প্রাথমিক লেআউটটি মুছে ফেলা হয়।
ডিফল্ট লেআউট লেআউট তালিকায় একটি নীল তারকা আইকন দিয়ে চিহ্নিত করা হয়েছে।
নতুন লেআউট তৈরি করুন
আপনি বিভিন্ন ধরনের পৃষ্ঠার জন্য বিভিন্ন লেআউট ডিজাইন করতে পারেন। একটি নতুন লেআউট তৈরি করতে এই পদক্ষেপগুলি অনুসরণ করুন:
-
CTRL/⌘+Lটিপুন বা UI ডিজাইনারের বাম টুলবার থেকে লেআউট তালিকা (শর্টকাট4) খুলুন এবং প্যানেল হেডারে প্লাস বোতামে ক্লিক করুন। - প্রদর্শিত মোডেলে লেআউটের নাম দিন। আমরা একটি পঠনযোগ্য শিরোনাম ব্যবহার করার পরামর্শ দিই যা পৃষ্ঠাগুলিতে লেআউট বরাদ্দ করার সময় দ্রুত সনাক্তকরণের জন্য লেআউটের গঠন প্রতিফলিত করে।
- লেআউট টেমপ্লেট নির্বাচন করুন:
- ভিত্তি: অতিরিক্ত উপাদান ছাড়া ফাঁকা টেমপ্লেট, ন্যাভিগেশন ছাড়া পৃষ্ঠাগুলির জন্য ভাল, যেমন প্রমাণীকরণ বা ত্রুটি পৃষ্ঠাগুলি।
- সাইডবার বাম: সাইডবার মেনু সহ টেমপ্লেট, অ্যাডমিন প্যানেল, CMS, ERP, ইত্যাদির জন্য ভাল।
- শীর্ষ মেনু: শীর্ষ মেনু সহ টেমপ্লেট, ওয়েবসাইট বা ল্যান্ডিং পৃষ্ঠাগুলির জন্য ভাল৷
- ডিফল্ট লেআউট সেটিং সক্রিয় করুন যদি এই লেআউটটি ডিফল্ট করা হয়।
- Create বাটনে ক্লিক করুন।
আপনি তৈরি করতে পারেন লেআউট সংখ্যার কোন সীমা নেই.
লেআউটের নাম পরিবর্তন করা হচ্ছে
একটি লেআউটের নাম পরিবর্তন করতে, লেআউটের নামের উপর ডাবল ক্লিক করুন, প্রয়োজনীয় পরিবর্তন করুন এবং সংরক্ষণ করতে Enter বা পরিবর্তনগুলি ফিরিয়ে আনতে Esc টিপুন।
সদৃশ বিন্যাস
একটি লেআউটের কন্টেন্ট এবং সেটিংস সহ ডুপ্লিকেট করতে:
- আপনি যে লেআউটটি ডুপ্লিকেট করতে চান তার উপর হোভার করুন।
- ডুপ্লিকেট আইকনে ক্লিক করুন।
সদৃশ বিন্যাস স্বয়ংক্রিয়ভাবে তালিকায় উপস্থিত হয় এবং তাদের নামের সাথে একটি সূচক যুক্ত হয়। আপনি যদি ডিফল্ট হিসাবে সেট করা বিন্যাসটিকে নকল করেন, তবে নতুন তৈরি করা দ্বারা উত্স বিন্যাসটি ওভাররাইড করা হয় না।
লেআউট মুছে ফেলা হচ্ছে
লেআউট অপসারণ করতে:
- আপনি যে লেআউটটি মুছতে চান তার উপর হোভার করুন।
- ট্র্যাশ আইকনে ক্লিক করুন।
- মুছে ফেলা নিশ্চিত করুন.
যেকোন পৃষ্ঠার সাথে লিঙ্ক করা লেআউটটি মুছে ফেলার জন্য, আপনাকে মুছে ফেলার আগে যেকোনো লিঙ্ক করা পৃষ্ঠার জন্য লেআউটটি পুনরায় বরাদ্দ করা উচিত। এটি নিশ্চিতকরণ মডেলের মাধ্যমে বা প্রতিটি পৃষ্ঠার জন্য ম্যানুয়ালি করা যেতে পারে।
ডিফল্ট লেআউট মুছে ফেলতে, আপনাকে ডিফল্ট হিসাবে অন্য লেআউট সেট আপ করা উচিত।
❗️ গুরুত্বপূর্ণ: আপনি একটি লেআউট মুছে ফেলার ক্রিয়াকলাপ পূর্বাবস্থায় ফেরাতে পারবেন না৷
লেআউট সেটিংস
বাম সেটিং সাইডবার থেকে সেটিংস অ্যাক্সেস করতে লেআউট তালিকার লক্ষ্য বিন্যাসে ক্লিক করুন।
সেটিংস সাইডবার হেডার থেকে, আপনি নামের উপর ক্লিক করে বা মুছে ফেলার মাধ্যমে নির্বাচিত লেআউটটির নাম পরিবর্তন করতে পারেন।
আপনি ডিফল্ট হিসাবে নির্বাচিত লেআউট সেট করতে পারেন এবং এখানে সমস্ত লিঙ্ক করা পৃষ্ঠা দেখতে পারেন। একটি লিঙ্ক করা পৃষ্ঠা সম্পাদনা করতে, তালিকায় এটিতে ক্লিক করুন৷
উপরন্তু, আপনি লেআউটের জন্য কিছু ব্যবসায়িক যুক্তি তৈরি করতে পারেন।
লেআউট বিজনেস লজিক
ব্যবসায়িক যুক্তি ট্যাবে, একটি ক্রিয়া সেট করতে একটি ট্রিগার নির্বাচন করুন৷ এটি নির্বাচিত ট্রিগারের উপর দৃষ্টি নিবদ্ধ করে ব্যবসায়িক প্রক্রিয়া সম্পাদক খুলবে।
এখানে, আপনি এক বা একাধিক ট্রিগারের জন্য একটি অ্যাকশন ফ্লো তৈরি করতে পারেন, যেমন নেভিগেশন প্রয়োগ করা, শর্তসাপেক্ষে বৈশিষ্ট্য পরিবর্তন করা, দৃশ্যমানতা টগল করা, ডেটা পাঠানো এবং আরও অনেক কিছু। আরও তথ্যের জন্য একটি ব্যবসায়িক প্রক্রিয়া তৈরির বিষয়ে আমাদের নির্দেশিকা পড়ুন।
🔔 সর্বোত্তম অ্যাপ্লিকেশন পারফরম্যান্সের জন্য, ব্যাকএন্ড সাইডে জটিল ব্যবসায়িক প্রক্রিয়া তৈরি করুন।
লেআউট সম্পাদনা করা হচ্ছে
লেআউট, গ্লোবাল উপাদান এবং পৃষ্ঠা টেমপ্লেট হিসাবে, সমস্ত লিঙ্কযুক্ত পৃষ্ঠাগুলিতে স্বয়ংক্রিয়ভাবে সমস্ত পরিবর্তনগুলি প্রয়োগ করে৷
একটি লেআউট সম্পাদনা করতে, লেআউট তালিকায় লক্ষ্য আইটেমটি নির্বাচন করুন এবং UI উপাদান প্যানেল থেকে প্রয়োজনীয় উপাদানগুলিকে টেনে এনে ক্যানভাস এলাকায় ড্রপ করে যোগ করুন৷
একটি লেআউট সম্পাদনা করার সময়, মনে রাখবেন যে টেমপ্লেটটিতে একটি অপরিবর্তনীয় পৃষ্ঠা ধারক উপাদান অন্তর্ভুক্ত রয়েছে। এটি টেমপ্লেটের মধ্যে আপনার পৃষ্ঠার সামগ্রীর স্থান নির্ধারণ করে। পৃষ্ঠার ধারকটি সবুজ রঙে হাইলাইট করা হয়েছে এবং লেআউট সম্পাদনা মোডে থাকা অবস্থায় ভিতরের উপাদানগুলি ধারণ করতে পারে না। বিষয়বস্তু সরাসরি পৃষ্ঠায় সংজ্ঞায়িত করা হয়, এবং পৃষ্ঠা কন্টেইনারের আকার তার মূল উপাদান দ্বারা নির্ধারিত হয়।
পাতা
প্রয়োজনীয় লেআউট তৈরি করার পর, ওয়েব অ্যাপ পৃষ্ঠাগুলি তৈরি করা শুরু করার সেরা সময়। প্রয়োজনীয় লেআউট তৈরি করার পর, ওয়েব অ্যাপ পৃষ্ঠাগুলি তৈরি করা শুরু করার সেরা সময়। প্রতিটি ওয়েব অ্যাপ্লিকেশন পৃষ্ঠা ব্যবহারকারীর ওয়েব ব্রাউজারে লক্ষ্য URL দ্বারা প্রদর্শিত সামগ্রী সরবরাহ করে।
পেজ গাছ
পেজ ট্রি আপনাকে আপনার ওয়েবসাইটের গঠন দেখায় — আপনার সাইটের পৃষ্ঠাগুলি এবং সেই পৃষ্ঠাগুলি যে ফোল্ডারগুলিতে থাকে। এখানে, আপনি বিভিন্ন ক্রিয়াকলাপ সম্পাদন করতে পারেন এবং পৃষ্ঠা এবং ফোল্ডারগুলি সংগঠিত করতে পারেন।
পেজ ট্রি খুলতে, UI ডিজাইনারের বাম টুলবার থেকে 3য় ট্যাবটি নির্বাচন করুন বা 3 টিপুন৷ এখানে আপনার সমস্ত অ্যাপ্লিকেশন পৃষ্ঠাগুলি প্রদর্শিত হবে৷
প্রতিটি অ্যাপ্লিকেশনের কমপক্ষে একটি পৃষ্ঠা থাকতে হবে। আপনি যখন একটি নতুন অ্যাপ্লিকেশন তৈরি করেন, তখন নির্বাচিত অ্যাপ্লিকেশন টেমপ্লেটের উপর নির্ভর করে এক বা একাধিক পৃষ্ঠা ইতিমধ্যেই তৈরি হয়৷
আপনি পৃষ্ঠা এবং ফোল্ডারে নিম্নলিখিত কর্ম সম্পাদন করতে পারেন:
- নির্বাচন করুন,
- নতুন পৃষ্ঠা বা ফোল্ডার যোগ করুন,
- নাম পরিবর্তন করা,
- পৃষ্ঠা এবং ফোল্ডারগুলিকে ফোল্ডারে/আউট করুন,
- নকল,
- মুছে ফেলা.
সূচী পাতা
সূচী পৃষ্ঠাটি আপনার আবেদনের প্রাথমিক পৃষ্ঠা। যখন আপনার অ্যাপ্লিকেশনটি চলে, আপনি যদি কোনো পুনঃনির্দেশ না তৈরি করেন তবে এই পৃষ্ঠাটি প্রথমে রেন্ডার করা হবে৷
ইনডেক্স পৃষ্ঠাটি পৃষ্ঠার গাছে হাউস আইকন চিহ্নিত করেছে এবং অন্য পৃষ্ঠায় স্যুইচ করা যাবে না। ডিফল্টরূপে, এই পৃষ্ঠাটি স্বয়ংক্রিয়ভাবে তৈরি ডিফল্ট লেআউটের সাথে লিঙ্ক করা হয়, তবে আপনি পৃষ্ঠা সেটিংসে এটি পরিবর্তন করতে পারেন।
নতুন পৃষ্ঠা তৈরি করুন
আপনার ওয়েব অ্যাপ্লিকেশনে একটি পৃষ্ঠা যুক্ত করতে:
-
CTRL/⌘+Pটিপুন বা UI ডিজাইনারের বাম টুলবার থেকে পেজ ট্রি (শর্টকাট3) খুলুন এবং প্যানেলের হেডারে প্লাস বোতামে ক্লিক করুন। - প্রদর্শিত মডেলে পৃষ্ঠা URL প্রদান করুন।
- পৃষ্ঠাটির জন্য অভিভাবক ফোল্ডার নির্বাচন করুন বা পৃষ্ঠাটিকে মূলে স্থাপন করতে ক্ষেত্রটি খালি ছেড়ে দিন।
- পৃষ্ঠা লেআউট নির্বাচন করুন।
- Create বাটনে ক্লিক করুন।
💡 ফোল্ডার তৈরি না করে একটি নেস্টেড রুট তৈরি করতে, পৃষ্ঠা URL ক্ষেত্রের লক্ষ্য পৃষ্ঠায় একটি সম্পূর্ণ পথ প্রদান করুন, যেমন, সেটিংস/প্রোফাইল৷ এক্ষেত্রে পেজ প্রোফাইলটি ফোল্ডারে নেস্টেড সেটিং তৈরি করা হবে।
আপনি আপনার ওয়েব অ্যাপ্লিকেশনের জন্য সীমাহীন পৃষ্ঠা এবং ফোল্ডার তৈরি করতে পারেন।
🔔 অ্যাপমাস্টার স্টুডিও দিয়ে তৈরি ওয়েব অ্যাপ পৃষ্ঠার ইউআরএল দ্বারা অ্যাপ রাউটিং তৈরি করে, তাই পৃষ্ঠা জেনারেশন ফর্মে, সঠিক ফর্ম্যাটে পেজ ইউআরএল ব্যবহার করুন এবং সবচেয়ে ভালো বোঝার জন্য, একটি বন্ধুত্বপূর্ণ ইউআরএল ব্যবহার করুন।
নতুন ফোল্ডার তৈরি কর
আপনি নেভিগেশন সংগঠিত করতে ফোল্ডার তৈরি করতে পারেন এবং পৃষ্ঠাগুলির জন্য সঠিক রাউটার তৈরি করতে পারেন। একটি নতুন ফোল্ডার তৈরি করতে:
-
CTRL/⌘+SHIFT+Pটিপুন বা UI ডিজাইনারের বাম টুলবার থেকে পেজ ট্রি (শর্টকাট 3) খুলুন এবং প্যানেলের হেডারে ফোল্ডার বোতামে ক্লিক করুন। - প্রদর্শিত মডেলটিতে ফোল্ডারের নাম দিন।
- নেস্টেড রাউটার তৈরি করতে প্রয়োজন হলে প্যারেন্ট ফোল্ডার নির্বাচন করুন
- Create বাটনে ক্লিক করুন।
UI উপাদান
আপনার অ্যাপের ইউজার ইন্টারফেসে উপাদান রয়েছে: ইনপুট ক্ষেত্র, বোতাম, ছবি, চেকবক্স, ক্যালেন্ডার, ছবি এবং আইকন যা প্রতিটি একটি নির্দিষ্ট উদ্দেশ্য পূরণ করে।
AppMaster একটি ড্র্যাগ-এন্ড-ড্রপ ভিজ্যুয়াল এডিটর অফার করে যা আপনাকে কোড লেখার পরিবর্তে এবং অবিলম্বে এটির পূর্বরূপ দেখার পরিবর্তে সরাসরি পৃষ্ঠায় উপাদান বাছাই এবং স্থাপন করতে দেয়।
উপাদান যোগ করা হচ্ছে
ক্যানভাসে একটি উপাদান যোগ করতে:
- UI উপাদানগুলির একটি তালিকা সহ UI উপাদান প্যানেলটি খুলুন (শর্টকাট
1)। - প্রয়োজনীয় উপাদান নির্বাচন করুন বা অনুসন্ধান বার ব্যবহার করুন.
- নির্বাচিত উপাদানটিকে পৃষ্ঠা বা লেআউট ক্যানভাসে টেনে আনুন।
টার্গেটের ভিতরে ড্র্যাগিং এলিমেন্ট রাখতে, এলিমেন্টটিকে টার্গেট এলিমেন্টের উপরে ড্রপ করুন।
একটি উপাদানের আগে বা পরে একটি উপাদান যোগ করতে, একটি বিভাজক উপস্থিত না হওয়া পর্যন্ত লক্ষ্যের সীমানার উপরে উপাদানটিকে টেনে আনুন৷
বিভাজক মূল ধারক দিকনির্দেশের উপর নির্ভর করে:
- যদি প্যারেন্ট কন্টেইনারের দিকনির্দেশ উল্লম্ব হয় , তাহলে উপাদানগুলি উপরে বা নীচে যোগ করা হবে।
- যদি প্যারেন্ট কন্টেইনারের দিকনির্দেশ অনুভূমিক হয় , তাহলে উপাদানগুলি বাম বা ডান দিক থেকে যোগ করা হবে।
উপাদান কাস্টমাইজ করুন
আপনি ক্যানভাসে যোগ করেন এমন প্রতিটি উপাদান কাস্টমাইজযোগ্য সেটিংসের একটি বিস্তৃত সেট দ্বারা সমৃদ্ধ। উপাদান বৈশিষ্ট্যগুলির সাথে, আপনি উপাদানের উপস্থিতি এবং প্রদর্শিত ডেটা উভয়ই পরিচালনা করতে পারেন।
একটি উপাদান কনফিগার করতে:
- ক্যানভাসে লক্ষ্য উপাদান নির্বাচন করুন.
- উপস্থিতি প্যানেলে নেভিগেট করুন, ডান সাইডবারে প্রথম ট্যাব৷
- প্যানেলের মধ্যে, নির্দিষ্ট সেটিং আইটেমটি নির্বাচন করুন যা আপনি পরিবর্তন করতে চান।
- নির্ধারিত ক্ষেত্রগুলিতে আপনার পছন্দের মানগুলি লিখুন৷
ক্যানভাস রিয়েলটাইমে সাড়া দেয়, অবিলম্বে আপনার সামঞ্জস্য প্রদর্শন করে।
অতিরিক্ত নির্দেশনার জন্য, একটি টুলটিপ আবির্ভূত করার জন্য একটি সেটিং-এর উপর আপনার মাউস কার্সারকে ঘোরান, সেই সেটিংসের কার্যকারিতার একটি সংক্ষিপ্ত বিবরণ প্রদান করুন।
এই ইন্টারেক্টিভ বৈশিষ্ট্যগুলির বাইরে, অ্যাপমাস্টার তার বিশেষ ব্যবসায়িক প্রক্রিয়া ব্লক, বৈশিষ্ট্য সেট করুন এবং ডেটা সেট করার মাধ্যমে কাস্টমাইজেশন ক্ষমতা বাড়ায়। এই ব্লকগুলি একটি উন্নত স্তরের অ্যাক্সেস প্রদান করে, যা আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনে প্রোগ্রামগতভাবে প্রতিটি উপাদানের সেটিংস পরিবর্তন করতে দেয়।