কাজের অভিজ্ঞতা
AI-কে নিয়ে SaaS-এর কাজের ধারা তৈরি
AI-র সাহায্যে ব্যবসার কাজ করার জটিল UI flow-র আর্কিটেকচার। action নেওয়ার আগে যেন ব্যবহারকারী বুঝতে পারেন, রিভিউ করতে পারেন আর ভরসা পান।
- আমার ভূমিকা
- ফ্রন্টএন্ড আর্কিটেকচার ও ইমপ্লিমেন্টেশনের নেতৃত্ব
- কাজের প্রেক্ষাপট
- AI-র সাহায্যে ব্যবসার কাজের জন্য SaaS প্রোডাক্টের workflow interface।
- ব্যবহৃত প্রযুক্তি
- Angular, TypeScript, RxJS, Design Systems, API Integration
সমস্যাটা কী ছিল
তৈরি ফলকে শুধু সফল বা ব্যর্থ ধরলে AI-র workflow ঘোলাটে লাগে। কাজ কতটা এগোল বোঝা, সুপারিশ দেখে নেওয়া আর অনিশ্চিত অবস্থা থেকে ফেরার সাহায্য ইন্টারফেসে দরকার ছিল।
যে সীমাগুলো মাথায় ছিল
- AI-র উত্তরে সময় লাগা আর আংশিক ফল
- একাধিক ধাপে ব্যবহারকারীর সিদ্ধান্ত
- প্রোডাক্টের চালু pattern
- permission মেনে action
- ভুল থেকে পরিষ্কারভাবে ফেরার সুযোগ
যেভাবে এগিয়েছি
- হঠাৎ হঠাৎ loading flag যোগ করার বদলে স্পষ্ট state দিয়ে workflow এঁকেছি।
- তৈরি সুপারিশ, মানুষের রিভিউ আর শেষে জমা দেওয়া—UI-তে আলাদা দায়িত্ব করেছি।
- pending, reviewing, accepted, rejected আর failed অবস্থার জন্য আবার ব্যবহার করা যায় এমন interaction pattern ঠিক করেছি।
আর্কিটেকচারের সিদ্ধান্ত
- workflow state ফিচারের সীমানার কাছে রেখেছি। component-কে typed view model দিয়েছি।
- component API-তে প্রোডাক্টের ভাষা রেখেছি, যাতে template-এ workflow পড়া যায়।
- loading আর error-কে পরে লাগানো কিছু না ধরে গোড়া থেকেই state হিসেবে ডিজাইন করেছি।
যেখানে ছাড় দিতে হয়েছে
- স্পষ্ট state model-এ শুরুতে কাঠামো বাড়ে, কিন্তু ব্যতিক্রম বোঝা সহজ হয়।
- shared workflow-এর ভিত্তিতে বারবার একই UI বানানো কমে। তবু ফিচারের নিজের লেখা রাখার জায়গা ছিল।
কী বদল এসেছে
- রক্ষণাবেক্ষণ সহজ হয়েছে
- component-এর দায়িত্ব স্পষ্ট হয়েছে
- পরের ফিচারের কাজ সহজ হয়েছে
- এক ধরনের workflow-তে আচরণের মিল বেড়েছে
যা শিখেছি
- AI SaaS-এ শুধু আউটপুট নয়, অনিশ্চয়তাও বোঝায় এমন ইন্টারফেস চাই।
- ভালো loading state অনেক সময় প্রোডাক্টের এমন একটা state, যেখানে পরের কাজ পরিষ্কার।