এই পৃষ্ঠাটি বর্ণনা করে কিভাবে একটি কার্ডের উপাদান এবং কাঠামো তৈরি করতে হয়। কার্ড হল ইউজার ইন্টারফেস যা Google চ্যাট অ্যাপ চ্যাট ব্যবহারকারীদের কাছ থেকে তথ্য উপস্থাপন ও সংগ্রহ করতে ব্যবহার করতে পারে। চ্যাট অ্যাপগুলি নিম্নলিখিত ইন্টারফেসে কার্ড তৈরি এবং প্রদর্শন করতে পারে:
- যে বার্তাগুলিতে এক বা একাধিক কার্ড রয়েছে৷
- হোমপেজগুলি হল একটি কার্ড যা চ্যাট অ্যাপের সাথে সরাসরি বার্তাগুলিতে হোম ট্যাব থেকে প্রদর্শিত হয়।
- ডায়ালগ , যা কার্ড যা বার্তা এবং হোমপেজ থেকে একটি নতুন উইন্ডোতে খোলে।
এই পৃষ্ঠায়, আপনি একটি কার্ডের নিম্নলিখিত উপাদানগুলি সম্পর্কে শিখবেন:
- শিরোনাম , যা সাধারণত একটি কার্ড বা কার্ড বিভাগের শিরোনাম ধারণ করে।
- বিভাগগুলি , যা উইজেট এবং অন্যান্য ইন্টারেক্টিভ উপাদান সহ কার্ডের মূল অংশ গঠন করে। একটি কার্ড বিভাগে, আপনি কলাম এবং গ্রিড সহ কার্ডে আরও কাঠামো যোগ করতে পারেন।
- স্থির ফুটার , যা বোতামগুলির মতো অবিরাম UI উপাদানগুলি প্রদর্শন করতে ডায়ালগের নীচে প্রদর্শিত হয়৷
পূর্বশর্ত
একটি Google চ্যাট অ্যাপ যা ইন্টারেক্টিভ বৈশিষ্ট্যের জন্য সক্ষম। একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, আপনি যে অ্যাপ আর্কিটেকচার ব্যবহার করতে চান তার উপর ভিত্তি করে নিচের একটি দ্রুত শুরু করুন:
- গুগল ক্লাউড ফাংশন সহ HTTP পরিষেবা
- Google Apps স্ক্রিপ্ট
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
চ্যাট অ্যাপের জন্য মেসেজিং এবং ইউজার ইন্টারফেস ডিজাইন ও প্রিভিউ করতে কার্ড বিল্ডার ব্যবহার করুন:
কার্ড বিল্ডার খুলুনএকটি শিরোনাম যোগ করুন
CardHeader উইজেট একটি কার্ডের শিরোনাম উপস্থাপন করে। শিরোনাম আপনার কার্ডের জন্য একটি শিরোনাম, উপশিরোনাম এবং একটি অবতার চিত্র অন্তর্ভুক্ত করতে পারে।
নিম্নলিখিতটি একটি CardHeader উদাহরণ:
এক বা একাধিক কার্ড বিভাগ যোগ করুন
CardSection উইজেট হল একটি কার্ডের মধ্যে একটি উচ্চ-স্তরের ধারক। আপনি একটি কার্ডের মধ্যে উইজেটগুলিকে গ্রুপ করতে কার্ড বিভাগগুলি ব্যবহার করেন৷ প্রতিটি কার্ড বিভাগের জন্য, আপনি একটি শিরোনাম এবং এক বা একাধিক উইজেট অন্তর্ভুক্ত করতে পারেন।
নিম্নলিখিতটি একটি CardSection একটি উদাহরণ যেখানে দুটি textParagraph উইজেট রয়েছে:
উইজেটগুলির মধ্যে একটি অনুভূমিক বিভাজক যোগ করুন
divider উইজেট উল্লম্বভাবে স্ট্যাক করা উইজেটগুলির মধ্যে একটি কার্ডের প্রস্থ বিস্তৃত একটি অনুভূমিক রেখা প্রদর্শন করে। লাইনটি একটি ভিজ্যুয়াল ডিভাইডার যা ব্যবহারকারীদের একটি উইজেট এবং অন্যটির মধ্যে পার্থক্য করতে সাহায্য করে, কার্ডগুলিকে স্ক্যান করা এবং বোঝা সহজ করে তোলে৷
নিম্নলিখিত উইজেট অন্যান্য ধরনের মধ্যে divider উইজেট গঠিত একটি কার্ড:
কলাম যোগ করুন
columns উইজেট একটি কার্ডে 2টি কলাম পর্যন্ত প্রদর্শন করে। আপনি প্রতিটি কলামে উইজেট যোগ করতে পারেন; উইজেটগুলি নির্দিষ্ট ক্রমে প্রদর্শিত হয়। 2টির বেশি কলাম অন্তর্ভুক্ত করতে, বা সারি ব্যবহার করতে, grid উইজেট ব্যবহার করুন।
প্রতিটি কলামের উচ্চতা লম্বা কলাম দ্বারা নির্ধারিত হয়। উদাহরণস্বরূপ, যদি প্রথম কলামটি দ্বিতীয় কলামের চেয়ে লম্বা হয়, তবে উভয় কলামের উচ্চতা প্রথম কলামের। যেহেতু প্রতিটি কলামে আলাদা সংখ্যক উইজেট থাকতে পারে, আপনি সারি নির্ধারণ করতে পারবেন না বা কলামগুলির মধ্যে উইজেটগুলি সারিবদ্ধ করতে পারবেন না।
নিম্নলিখিত উদাহরণটি একটি columns উইজেট সহ একটি কার্ড প্রদর্শন করে যা টেক্সটের 2 কলাম বৈশিষ্ট্যযুক্ত। শুধুমাত্র কলামের বিন্যাস দেখতে এবং কোড নমুনাটি সঙ্কুচিত করতে, Collapse এ ক্লিক করুন। যখন স্থান সীমাবদ্ধ থাকে, নিচের উদাহরণের মতো, দ্বিতীয় কলামটি প্রথম কলামের নীচে মোড়ানো হয়।
কলামের প্রস্থ নির্ধারণ করুন
কলাম পাশাপাশি প্রদর্শিত হয়. আপনি horizontalSizeStyle ক্ষেত্র ব্যবহার করে প্রতিটি কলামের প্রস্থ কাস্টমাইজ করতে পারেন। যদি ব্যবহারকারীর স্ক্রীনের প্রস্থ খুব সংকীর্ণ হয়, দ্বিতীয় কলামটি প্রথমটির নীচে মোড়ানো হয়:
- ওয়েবে, স্ক্রিনের প্রস্থ 480 পিক্সেলের কম বা সমান হলে দ্বিতীয় কলামটি মোড়ানো হয়।
- iOS ডিভাইসে, স্ক্রিনের প্রস্থ 300 pt এর কম বা সমান হলে দ্বিতীয় কলামটি মোড়ানো হয়।
- অ্যান্ড্রয়েড ডিভাইসে, স্ক্রিনের প্রস্থ 320 ডিপির কম বা সমান হলে দ্বিতীয় কলামটি মোড়ানো হয়।
নিম্নলিখিত উদাহরণটি একটি columns উইজেট সহ একটি কার্ড প্রদর্শন করে যা কলামে 4টি আইটেম সহ 2 কলাম পাঠ্য বৈশিষ্ট্যযুক্ত। কলামের প্রতিটি আইটেমে horizontalSizeStyle প্রয়োগ করা হয়েছে যাতে পাঠ্যটি প্রতিটি কলামে কতটা স্থান পূরণ করে তা পরিচালনা করতে পারে:
- প্রথম পাঠ্য অনুচ্ছেদটি কার্ডের প্রস্থের 30% এর বেশি পূরণ করতে
FILL_MINIMUM_SPACEব্যবহার করে। - দ্বিতীয় পাঠ্য অনুচ্ছেদটি কার্ডের প্রস্থে উপলব্ধ স্থান পূরণ করতে
FILL_AVAILABLE_SPACEব্যবহার করে। এই উদাহরণে, এটি কার্ডের প্রস্থের 70% পূরণ করে। - তৃতীয় পাঠ্য অনুচ্ছেদটি
horizontalSizeStyleসংজ্ঞায়িত করে না তাই এটি কার্ডের স্থানের উপলব্ধ স্থান পূরণ করতে ডিফল্ট। - চতুর্থ পাঠ্য অনুচ্ছেদটি কার্ডের প্রস্থের 30% এর বেশি পূরণ করতে
FILL_MINIMUM_SPACEব্যবহার করে।
একটি কলামের অনুভূমিক প্রান্তিককরণ সংজ্ঞায়িত করুন
আপনি horizontalAligment ক্ষেত্রটি সংজ্ঞায়িত করে একটি কলামের বাম, ডান বা কেন্দ্রে অনুভূমিকভাবে উইজেটগুলি সারিবদ্ধ করতে পারেন। যদি horizontalAlignment ফিল্ডটি অনির্ধারিত থাকে, উইজেটগুলি একটি কলামে বাম দিকে সারিবদ্ধ করা হয়।
নিম্নলিখিত উদাহরণটি বাম দিকে একটি কলামের মধ্যে পাঠ্যকে অনুভূমিকভাবে সারিবদ্ধ করে:
নিম্নলিখিত উদাহরণটি কেন্দ্রে একটি কলামের মধ্যে পাঠ্যকে অনুভূমিকভাবে সারিবদ্ধ করে:
নিম্নলিখিত উদাহরণটি ডানদিকে একটি কলামের মধ্যে পাঠ্যকে অনুভূমিকভাবে সারিবদ্ধ করে:
একটি কলামের উল্লম্ব প্রান্তিককরণ সংজ্ঞায়িত করুন
আপনি verticalAlignment ক্ষেত্রটি সংজ্ঞায়িত করে একটি কলামের উপরে, নীচে বা কেন্দ্রে উল্লম্বভাবে উইজেটগুলি সারিবদ্ধ করতে পারেন। verticalAlignment ক্ষেত্রটি অনির্ধারিত হলে, একটি কলামের উইজেটগুলি শীর্ষে সারিবদ্ধ করা হয়।
নিম্নলিখিত উদাহরণটি উল্লম্বভাবে একটি কলামের মধ্যে পাঠ্যকে শীর্ষে সারিবদ্ধ করে:
নিম্নলিখিত উদাহরণটি কেন্দ্রে একটি কলামের মধ্যে পাঠ্যকে উল্লম্বভাবে সারিবদ্ধ করে:
নীচের উদাহরণটি নীচের একটি কলামের মধ্যে পাঠ্যকে উল্লম্বভাবে সারিবদ্ধ করে:
আইটেমগুলির একটি সংগ্রহ প্রদর্শন করতে একটি গ্রিড যোগ করুন
grid উইজেট আইটেমগুলির একটি সংগ্রহ সহ একটি গ্রিড প্রদর্শন করে। একটি গ্রিড যেকোনো সংখ্যক কলাম এবং আইটেম সমর্থন করে। সারির সংখ্যা কলাম দ্বারা বিভক্ত আইটেম দ্বারা নির্ধারিত হয়। 10টি আইটেম এবং 2টি কলাম সহ একটি গ্রিডে 5টি সারি রয়েছে৷ 11টি আইটেম এবং 2টি কলাম সহ একটি গ্রিডে 6টি সারি রয়েছে।
উইজেট পরামর্শগুলিকে সমর্থন করে, যা ব্যবহারকারীদের অভিন্ন ডেটা প্রবেশ করতে সাহায্য করে এবং অন-চেঞ্জ অ্যাকশন, যেগুলি এমন Actions যা টেক্সট ইনপুট ক্ষেত্রের পরিবর্তন ঘটলে চালিত হয়, যেমন কোনও ব্যবহারকারী পাঠ্য যোগ করা বা মুছে ফেলা।
নিম্নলিখিত উদাহরণ হল একটি একক আইটেম সহ 2 কলামের গ্রিড:
একটি গ্রিডে একটি চিত্র সহ পাঠ্য কোথায় প্রদর্শিত হবে তা নির্ধারণ করতে, আপনি gridItemLayout ক্ষেত্রটি নির্দিষ্ট করতে পারেন। এই ক্ষেত্রটি আপনাকে সংজ্ঞায়িত করতে দেয় যে পাঠ্যটি গ্রিডের আইটেমের উপরে বা নীচে প্রদর্শিত হবে কিনা। যদি gridItemLayout অনির্ধারিত থাকে, তাহলে পাঠ্যটি গ্রিডের আইটেমের নীচে প্রদর্শিত হবে।
নিম্নলিখিত উদাহরণটি প্রতিটি গ্রিডে পাঠ্য এবং একটি চিত্র সহ একটি তিন-কলামের গ্রিড। প্রথম গ্রিড চিত্রের উপরে প্রদর্শিত পাঠ্যকে সংজ্ঞায়িত করে, দ্বিতীয় গ্রিডটি চিত্রের নীচে প্রদর্শিত পাঠ্যকে সংজ্ঞায়িত করে এবং তৃতীয় গ্রিড পাঠ্যের অবস্থান নির্ধারণ করে না।
একটি গ্রিড বা কলামে একটি সীমানা যোগ করুন
একটি column বা grid উইজেটে প্রদর্শিত আইটেমগুলির জন্য, আপনি একটি borderType ক্ষেত্র এবং একটি borderStyle ক্ষেত্র সংজ্ঞায়িত করে এই UI উপাদানগুলিতে একটি সীমানা যোগ করতে পারেন। যদি কোনো borderStyle ক্ষেত্র সংজ্ঞায়িত করা না থাকে, তাহলে এটি কোনো বর্ডার দেখানোর জন্য ডিফল্ট হয়। আপনি একটি উইজেটের মধ্যে সমস্ত আইটেম প্রয়োগ করার জন্য একটি borderType সংজ্ঞায়িত করতে পারেন বা একটি উইজেটের মধ্যে প্রতিটি পৃথক আইটেমে স্টাইলিং প্রয়োগ করতে পারেন।
নিম্নলিখিত উদাহরণ হল একটি 2 কলামের গ্রিড যেখানে প্রতিটি গ্রিডে একটি চিত্র রয়েছে যেখানে বর্ডার টাইপ, শৈলী এবং রঙকে গ্রিডের মধ্যে থাকা সমস্ত আইটেমগুলিতে প্রয়োগ করার জন্য সংজ্ঞায়িত করা হয়েছে।
নিম্নলিখিত উদাহরণ হল একটি 3 কলামের গ্রিড যার প্রতিটি গ্রিডে একটি ছবি রয়েছে এবং বর্ডার শৈলী এবং প্রকার পৃথকভাবে সংজ্ঞায়িত করা হয়েছে। প্রথম চিত্রটিতে একটি সীমানা রয়েছে যা STROKE হিসাবে সংজ্ঞায়িত করা হয়েছে। দ্বিতীয় চিত্রটিতে NO_BORDER হিসাবে সংজ্ঞায়িত একটি সীমানা রয়েছে। তৃতীয় চিত্রটির কোনো সীমানা নেই।
একটি ক্রমাগত ফুটার যোগ করুন
CardFixedFooter উইজেট একটি চ্যাট অ্যাপ দ্বারা প্রেরিত একটি ডায়ালগ বার্তার ফুটার উপস্থাপন করে। পাদদেশে একটি প্রাথমিক বোতাম এবং একটি মাধ্যমিক বোতাম অন্তর্ভুক্ত থাকতে পারে।
CardFixedFooter উইজেট শুধুমাত্র ডায়ালগের জন্য উপলব্ধ।
নিম্নলিখিত দুটি বোতাম সহ একটি CardFixedFooter উইজেটের একটি উদাহরণ:
সমস্যা সমাধান
যখন একটি Google চ্যাট অ্যাপ বা কার্ড একটি ত্রুটি ফেরত দেয়, তখন চ্যাট ইন্টারফেস "কিছু ভুল হয়েছে" বলে একটি বার্তা দেখায়। অথবা "আপনার অনুরোধ প্রক্রিয়া করতে অক্ষম।" কখনও কখনও চ্যাট UI কোনও ত্রুটি বার্তা প্রদর্শন করে না, তবে চ্যাট অ্যাপ বা কার্ড একটি অপ্রত্যাশিত ফলাফল তৈরি করে; উদাহরণস্বরূপ, একটি কার্ড বার্তা প্রদর্শিত নাও হতে পারে৷
যদিও একটি ত্রুটি বার্তা চ্যাট UI-তে প্রদর্শিত নাও হতে পারে, বর্ণনামূলক ত্রুটি বার্তা এবং লগ ডেটা উপলব্ধ রয়েছে যাতে আপনি যখন চ্যাট অ্যাপগুলির জন্য ত্রুটি লগিং চালু থাকে তখন ত্রুটিগুলি ঠিক করতে সহায়তা করে৷ দেখা, ডিবাগিং এবং ত্রুটিগুলি সংশোধন করতে সহায়তার জন্য, Google Chat ত্রুটিগুলি সমস্যা সমাধান এবং ঠিক করুন দেখুন৷