ইচ্ছা থেকে অ্যাপ: যখন এআই ইউআই, স্টেট এবং এপিআই তৈরি করে

ইনটেন্ট: এক বাক্য যা সবকিছুর শুরু\n\nএকজন ফাউন্ডার কাঁধে ঝুঁকে বললেন: “ফিল্ড রেপরা দ্রুত ভিজিট লগ এবং ফলো-আপ সেট করতে পারুক, যাতে প্রশাসনিক কাজ বাড়ে না এবং কিছু হাতছাড়া না হয়।”\n\nএই এক বাক্যেই আসল ব্যবহারকারীর সমস্যা লুকানো: নোটগুলো দেরিতে নেওয়া হয় (বা মোটেই নেওয়া হয় না), ফলো-আপ মিস হয়, এবং আয় চুপচাপ ফাঁক দিয়ে বেরিয়ে যায়।\n\nএটাই এআই-সহায়িত নির্মাণের প্রতিশ্রুতি: আপনি ইনটেন্ট দিয়ে শুরু করেন, এবং প্রতিটি স্ক্রিন, স্টেট আপডেট এবং API কল নতুনভাবে হাত দিয়ে বানাতে না গিয়ে দ্রুত একটি কাজ করা মোবাইল অ্যাপে পৌঁছে যান। ‘জাদু’ নয়, কিছুমাত্র ক্ষণস্থায়ী পরিবেশও নয়—কিন্তু আইডিয়া থেকে এমন কিছুতে পৌঁছানোর পথ ছোট হয়ে যায় যা ফোনে চালিয়ে দেখানো যায় এবং কারো হাতে দেওয়া যায়।\n\nএই অংশ (এবং পরের গল্প) টেকনিক্যাল টিউটোরিয়াল নয়। এটি একটি বর্ণনামূলক গাইড: কী বলবেন, প্রথম দিকে কী সিদ্ধান্ত নিবেন, এবং কী পরীক্ষা করে দেখতে হবে বাস্তব ব্যবহারকারীদের সাথে।\n\n### “ইনটেন্ট” আসলে কী বোঝায়\n\nসরলভাবে বলতে: ইনটেন্ট হলো আপনি যে ফলাফল চান, একটি নির্দিষ্ট শ্রোতার জন্য, এবং স্পষ্ট সীমাবদ্ধতার সঙ্গে।\n\n- আউটকাম: ব্যবহারকারীর জন্য কী পরিবর্তন হবে? (“ভিজিট লগ করা”, “ফলো-আপ সম্পন্ন”)\n- শ্রোতা: ঠিক কার জন্য? (“ফিল্ড রেপ”, ‘সেলস’ নয়)\n- সীমাবদ্ধতা: কী অবশ্যই সত্য হতে হবে? (“অতিরিক্ত প্রশাসনিক কাজ নয়”, “পুরনো ফোনেও চলবে”, “মাসে $200 বাজেটের মধ্যে থাকবে”, বা “অডিট-ফ্রেন্ডলি অ্যাক্টিভিটি লগ”)\n\nভালো ইনটেন্ট ফিচারের তালিকা নয়। এটা সেই বাক্য যা সবাইকে—মানুষ এবং এআই—বলে দেয় সাফল্য কেমন লাগবে।\n\n### চূড়ান্ত লক্ষ্য: এক শিপেবল MVP\n\nইনটেন্ট স্পষ্ট হলে, আপনি এমন একটি MVP লক্ষ্য করতে পারেন যা ক্লিকেবল স্ক্রিনের চেয়েও বেশি। লক্ষ্য হলো একটি শিপযোগ্য অ্যাপ যার বাস্তব ফ্লো এবং বাস্তব ডেটা আছে: ব্যবহারকারীরা সাইন ইন করতে পারে, আজকের অ্যাকাউন্টগুলো দেখতে পায়, একটি ভিজিট লগ করে, নোট/ফটো লাগায়, পরবর্তী স্টেপ সেট করে, এবং সাধারণ এক্সসেপ্টশনগুলো হ্যান্ডেল করে।\n\nএর পর যা আসবে—রিকোয়ারমেন্টস, ইনফরমেশন আর্কিটেকচার, UI, স্টেট, ব্যাকএন্ড ইন্টিগ্রেশন এবং ইটারেশন—সবই সেই এক বাক্যের জন্য সেবা করবে।\n\n## টিম ও সীমাবদ্ধতা পরিচয়\n\nমায়া এই প্রজেক্টের PM ও এগজিডেন্টাল ফাউন্ডার। তিনি মোবাইল অ্যাপ নতুনভাবে আবিষ্কার করতে যান না—তাঁর লক্ষ্য একটি কোয়ার্টার-সীমার আগে অ্যাপ শিপ করে সুযোগটাকে হারানো বন্ধ করা।\n\n“টিম” এতোটাই ছোট যে এক ক্যালেন্ডার ইনভাইটে ঢোকে: মায়া, একজন ডিজাইনার যে সপ্তাহে কয়েক ঘন্টা দিতে পারে, এবং একজন ইঞ্জিনিয়ার যিনি ইতিমধ্যে অন্য দুইটি অ্যাপ মেইনটেইন করছেন। ৪০-পাতার স্পেক লেখার কিংবা ফ্রেমওয়ার্ক নিয়ে বিতর্ক করার সময় নেই। তবুও প্রত্যাশা বাস্তব: লিডারশিপ চাইছে কিছু ব্যবহারযোগ্য, ডেমো নয়।\n\n### প্রথম দিনে তাদের কাছে যা আছে\n\nমায়ার শুরুতে যা আছে তা নম্র:\n\n- একটি ফোন নোটে এক প্যারাগ্রাফ অ্যাপের বর্ণনা\n- মিটিংয়ে তিনটি স্ক্রিনের খসড়া স্কেচ\n- কিছু মাষ্ট-হ্যাভ ফিচারের তালিকা: সাইন ইন, তালিকা দেখা, ডিটেইলে ট্যাপ করে সহজ আপডেট জমা দেওয়া\n\nতার নোটে আরেকটি গুরুত্বপূর্ণ বাক্য আছে: “যদি ব্যবহারকারী ফোনে মূল কাজটি দুই মিনিটের মধ্যে শেষ করতে না পারে, তাহলে আমরা সঠিক জিনিস তৈরি করছি না।”\n\n### প্রথম রিলিজে “ডান” মানে কী\n\nএই MVP-এর জন্য “ডান” হল একটি একক ইউজার জার্নি যা এন্ড-টু-এন্ড কাজ করে:\n\n1. ব্যবহারকারী লগ ইন করে।\n2. তারা তাদের পার্সোনালাইজড তালিকা দেখে।\n3. তারা একটি আইটেম খুলে।\n4. তারা একটি একশন সম্পন্ন করে (লগ, কনফার্ম, অনুরোধ, বা আপডেট)।\n5. তারা ফিডব্যাক পায় যে এটি কাজ করেছে।\n\nকোন ফ্যান্সি ড্যাশবোর্ড নেই। কোন লুকানো মেনু নেই। কোন “পরে পালিশ করব” স্ক্রিন যা ফ্লো ব্লক করে তা নেই।\n\n### সিদ্ধান্তগুলোকে গঠনকারী সীমাবদ্ধতাগুলো\n\nঅ্যাপকে একটি বিদ্যমান ব্যাকএন্ড-এর সাথে সংযুক্ত হতে হবে—API যা মোবাইলের জন্য ডিজাইন করা হয়নি এবং ডকুমেন্টেশন অসম। বাজেট সংকুচিত, তাই প্রতিটি নতুন স্ক্রিনকে নিজেই ন্যায্যতা প্রমাণ করতে হবে।\n\nকিছু গার্ডরেইল নন-নেগোশিয়েবল: অডিট লগ, স্পষ্ট সম্মতি যেখানে লাগবে, এবং ডিভাইসে সংবেদনশীল ডেটা কসরত করে রাখা যাবে না।\n\nএখানে টেনশন: মায়ার কাছে দশটি ভালো আইডিয়া আছে এবং সম্ভবত দশটি কাজের দিন। প্রতিটি ঘন্টা অপশন নিয়ে আলোচনা করা মানে মূল জার্নিকে কারো হাতে পৌঁছে দেওয়ার জন্য সময় কমে যায়।\n\n## স্পেক-ম্যারাথন ছাড়া ইনটেন্ট থেকে রিকোয়ারমেন্টে\n\nলক্ষ্য পারফেক্ট স্পেক লেখা নয়। লক্ষ্য দ্রুত টেস্টেবল ক্লারিটি পাওয়া—আমরা কোন সমস্যা সমাধান করছি, কার জন্য, এবং কীভাবে জানব এটি সফল।\n\n### প্রথম এআই ইন্টারঅ্যাকশন: সুষ্পষ্ট ইনটেন্ট, মাপযোগ্য আউটকাম\n\nআপনি একটি এলোমেলো বাক্যে শুরু করেন:\n\n> “I want an app that helps our field reps log visits and follow up.”\n\nতারপর AI-কে বলুন এটাকে কস্মপ্যাক্ট করতে:\n\nপ্রাম্পট: “Rewrite this as a problem statement and add 3 success metrics. Keep it short.”\n\nAI আউটপুট (সম্পাদিত):\n\nProblem statement: Field reps lose follow-ups because visit notes and next steps are captured late (or not at all), leading to missed revenue and inconsistent customer experience.\n\nSuccess metrics:\n\n- 80% of visits logged within 10 minutes\n- 30% increase in follow-ups completed within 48 hours\n- Reduction in ‘no next step’ visits from 40% to under 10%\n\nএখন আমাদের একটি লক্ষ্য আছে যাকে টিম লক্ষ্য করতে পারে, কেবল ফিচারের ইচ্ছা নয়।\n\nযদি আপনি একটি vibe-coding ওয়ার্কফ্লো ব্যবহার করেন (উদাহরণস্বরূপ Koder.ai তে, যেখানে আপনি প্রোডাক্ট বর্ণনা করে চ্যাটে ইটারেটিভভাবে কাজ করে একটি চলমান অ্যাপ জেনারেট করেন), এই মুহূর্তটাই সবচেয়ে বেশি উপকার দেয়: একটি শক্ত ইনটেন্ট + মেট্রিকস পরের সব জেনারেশনের জন্য “সোর্স অফ ট্রুথ” হয়ে যায়।\n\n### রোলস, টপ টাস্ক এবং ইউজার স্টোরি\n\nপরবর্তী ধাপে রোল ও টাস্কগুলো বের করুন:\n\nUser roles:\n\n- Primary: Field Rep\n- Secondary: Sales Manager\n- Admin (light): Ops\n\nTop tasks:\n\n- Primary: Log a visit, attach notes/photos, set a next step\n- Secondary: Review team activity, spot stalled accounts\n\nএগুলোকে কয়েকটি ইউজার স্টোরিতে পরিণত করুন এক্সসেপ্টেন্স ক্রাইটেরিয়াসহ:\n\n- As a rep, I can log a visit in under 60 seconds so I don’t delay.\n - Acceptance: customer selected, timestamp saved, notes required OR next step required.\n- As a rep, I can schedule a follow-up so nothing slips.\n - Acceptance: due date + reminder; appears in “Today” list.\n\n### কীটি সোজা করে বাইরে রাখা (উদ্দেশ্য পূরণে)\n\nপ্রথম রিলিজকে রক্ষা করার জন্য:\n\n- কোন কাস্টম ড্যাশবোর্ড নেই\n- জটিল টেরিটরি প্ল্যানিং নেই\n- গভীর CRM রাইট-ব্যাক নেই (শুধু রিড-ওনলি ইম্পোর্ট)\n\n### নর্থ স্টার ফ্লো\n\nপ্রতিটি সিদ্ধান্তকে এক ফ্লো-কে অ্যাঙ্কর করুন:\n\nOpen app → “Log Visit” → pick customer → add note/photo → choose next step + due date → save → follow-ups appear in “Today.”\n\nযদি কোনো রিকোয়্যারমেন্ট এই ফ্লোকে সাপোর্ট না করে, তা পরবর্তী রিলিজের জন্য অপেক্ষা করে।\n\n## AI ফ্লোকে ইনফরমেশন আর্কিটেকচারে রূপান্তর করে\n\nনর্থ-স্টার ফ্লো স্পষ্ট হলে, AI এটিকে এমন একটি ইনফরমেশন আর্কিটেকচারে অনুবাদ করতে পারে যা সবাই পড়তে পারে—ওয়্যারফ্রেম বা ইঞ্জিনিয়ারিং ডায়াগ্রামে ঝাঁপ না দিয়ে।\n\n### ৩–৭টি কোর স্ক্রিন দিয়ে শুরু করুন\n\nবেশিরভাগ MVP-এর জন্য আপনাকে ছোট সংখ্যক স্ক্রিন চাই যা প্রাইমারি জবটা সম্পূর্ণ করে। AI সাধারণত একটি সংক্ষিপ্ত তালিকা প্রস্তাব করে (আপনি চেঞ্জ করতে পারেন):\n\n- Welcome / onboarding (শুধু যদি সত্যিই সেটআপ দরকার)\n- Home (শুরুর পয়েন্ট, ডাম্পিং গ্রাউন্ড নয়)\n- Search / browse (কিভাবে মানুষ জিনিস খুঁজে পায়)\n- Detail (জায়গা যেখানে সিদ্ধান্ত হয়)\n- Create / log (কনভার্শন স্টেপ)\n- Profile / settings (অ্যাকাউন্ট, পছন্দ)\n\nএই তালিকা কঙ্কাল হয়ে ওঠে। এর বাইরে যা আছে তা পরে রিলিজ বা “সেকেন্ডারি ফ্লো”।\n\n### নেভিগেশন প্লেইন ভাষায় ম্যাপ করুন\n\nপ্যাটার্ন নিয়ে বিমর্ষ বিতর্কের বদলে IA নেভিগেশনকে বাক্য হিসেবে কল আউট করে যাতে ভ্যালিডেট করা যায়:\n\n- “Users land on Home after login.”\n- “A tab bar gives access to Home, Search, and Profile.”\n- “Details open in a stack so Back returns to where you were.”\n\nযদি অনবোর্ডিং থাকে, IA নির্ধারণ করে কোথায় শুরু এবং কোথায় শেষ (“Onboarding finishes at Home”)।\n\n### প্রতিটি স্ক্রিনের জন্য হায়ারার্কি ও এম্পটি স্টেট নির্ধারণ করুন\n\nপ্রতিটি স্ক্রিন একটি লাইটওয়েট আউটলাইন পায়:\n\n- Primary content (উপরে কী থাকে)\n- Primary action (একটাই বোতাম যা সবচেয়ে গুরুত্বপূর্ণ)\n- Secondary actions (কম গুরুত্বের)\n- Empty state (কোন ডেটা না থাকলে ব্যবহারকারী কী দেখবে) এবং তাদের পরবর্তী পদক্ষেপ\n\nEmpty state-গুলো ইচ্ছাকৃতভাবে ড্রাফট করুন (উদাহরণ: “No visits logged today yet” এবং একটি স্পষ্ট পরবর্তী পদক্ষেপ)।\n\n### কোথায় রোলস ও পার্সোনালাইজেশন UI বদলায়\n\nIA শুরুকাল থেকেই কন্ডিশনাল ভিউগুলো ফ্ল্যাগ করে: “Managers দেখেন অতিরিক্ত ট্যাব,” বা “শুধু Ops অ্যাকাউন্ট ডিটেইল এডিট করতে পারবে।” এটি পরে পারমিশন ও স্টেট ইমপ্লিমেন্টেশনে সারপ্রাইজ রোধ করে।\n\n### একটি রিভিউযোগ্য “ফ্লো ডক”\n\nআউটপুট সাধারণত একটি এক-পেজের ফ্লো ও প্রতি-স্ক্রিন বুলেট—একটি টেকনিকেটিভ না-ও-হওয়া স্টেকহোল্ডার দ্রুত অনুমোদন করতে পারে: কোন স্ক্রিন আছে, কিভাবে রওনা হয়, এবং ডাটা না থাকলে কী হয়।\n\n## UI খাপ খায়: স্ক্রিন, কম্পোনেন্ট এবং কপি ড্রাফট\n\nফ্লো একবার ঠিক হলে, AI প্রথম-ধাপের ওয়্যারফ্রেম তৈরি করতে পারে—প্রতিটি স্টেপকে একটি “স্ক্রিন কন্ট্রাক্ট” হিসেবে ধরে: ব্যবহারকারী কী দেখতে পাবে, পরবর্তী কী করল যাবে, এবং কী তথ্য সংগ্রহ/দেখানো দরকার।\n\n### ফ্লো থেকে ওয়্যারফ্রেমে\n\nআউটপুট সাধারণত খসড়া—গ্রেসকেল ব্লকগুলো লেবেলসহ—কিন্তু এটি ইতোমধ্যেই কন্টেন্ট চাহিদার চারপাশে গঠিত। যদি কোনো স্টেপে তুলনা দরকার হয়, আপনি গ্রিড বা কার্ড লেআউট পাবেন। যদি প্রগ্রেশন বিষয়ে হয়, আপনি একটি স্পষ্ট প্রাইমারি অ্যাকশন এবং হালকা সারসংক্ষেপ দেখবেন।\n\nকম্পোনেন্ট চয়েসগুলো টাস্ক-ড্রাইভেন:\n\n- Lists দ্রুত অনেক আইটেম ব্রাউজ করার জন্য\n- Cards স্ক্যানযোগ্য চাঙ্কস metadata সহ (accounts, visits, follow-ups)\n- Forms কমিটমেন্ট মুহূর্তের জন্য (ভিজিট লগ, ফলো-আপ শিডিউল)

\nAI এই সিদ্ধান্তগুলো সাধারণত ইনটেন্ট-এর ভর্বসের ওপর ভিত্তি করে নেয়: browse, choose, edit, confirm.\n\n### ব্যবহারযোগ্য রাখতে ডিজাইন সীমাবদ্ধতা\n\nএই স্তরে ভালো জেনারেটর কিছু মৌলিক সীমা প্রয়োগ করে যাতে স্ক্রিনগুলো “AI-ইশ” না দেখায়:\n\n- অ্যাক্সেসিবিলিটি বেসিক: ট্যাপেবল টার্গেট, কালার কনট্রাস্ট, পাঠযোগ্য ফন্ট সাইজ\n- প্ল্যাটফর্ম কনভেনশন: নেভিগেশন প্যাটার্ন, ব্যাক বিহেভিয়ার, নেটিভ ইনপুট কন্ট্রোল\n- পাঠযোগ্যতা: ছোট লাইন লেন্থ, স্পষ্ট হেডিং, পূর্বানুমানযোগ্য স্পেসিং\n\nকপি ড্রাফট UI-র সঙ্গেই আসে। “Submit” বদলে বোতামগুলো হয়ে ওঠে “Save visit” বা “Schedule follow-up,” যা ব্যবহারকারীর কাজে অনুবর্তন করে।\n\n### মানব রিভিউ মুহূর্ত\n\nএখানেই প্রোডাক্ট ওনার, ডিজাইনার বা মার্কেটার হস্তক্ষেপ করেন—সবই নতুন করে আঁকতে নয়, বরং টোন ও স্পষ্টতা অ্যাডজাস্ট করতে:\n\n- মাইক্রোকপি ব্র্যান্ড ভয়েসের সাথে মিলানো\n- অস্পষ্টতা সরানো (“Continue” → “Choose follow-up date”)\n- এম্পটি স্টেট ও এরর মেসেজগুলোকে সাহায্যকারী করা\n\n### শেষে আপনি যা পাবেন\n\nশুধু ছবি নয়। হ্যান্ডঅফ সাধারণত একটি ক্লিকেবল প্রোটোটাইপ (ফিডব্যাকের জন্য ট্যাপ-থ্রু) অথবা জেনারেটেড স্ক্রিন কোড যা টিম বিল্ড-টেস্ট লুপে ইটারেট করতে পারে।\n\nআপনি যদি Koder.ai-তে বিল্ড করেন, এই স্টেজটি দ্রুত বাস্তব রূপ নেয়: UI কাজ করা অ্যাপের অংশ হিসেবে জেনারেট হয় (ওয়েব React, ব্যাকএন্ড Go + PostgreSQL, এবং মোবাইল Flutter), এবং আপনি বাস্তব স্ক্রিনগুলো এক জায়গায় রিভিউ করতে পারেন যখন ফ্লো ডক আপনার গার্ডরেইল হিসেবে থাকে।\n\n## স্টেট: অ্যাপের মেমোরি ও নিয়ম\n\nUI স্কেচ হওয়ার পরে, পরের প্রশ্ন সহজ: অ্যাপ কি কী মনে রাখবে, এবং কোন অবস্থায় প্রতিক্রিয়া দেখাবে? সেই “স্মৃতি” হচ্ছে স্টেট। এজন্য একটি স্ক্রিন আপনাকে নাম ধরে অভিবাদন জানায়, কাউন্টার রাখে, অর্ধেক লেখা ফর্ম পুনরুদ্ধার করে, বা ফলাফল আপনার পছন্দমতো সাজায়।\n\n### কোর স্টেট অবজেক্টগুলো\n\nAI সাধারণত শুরু করে একটি ছোট সেট স্টেট অবজেক্ট ডিফাইন করে যা পুরো অ্যাপ জুড়ে বহন করে:\n\n- User: প্রোফাইল ডিটেইল, পছন্দ, রোল (উদাহরণ: manager বনাম rep)।\n- Session: auth token, মেয়াদকাল, “isLoggedIn,” এবং রিফ্রেশ নিয়ম।\n- Items: ডোমেইন ডেটা (accounts, visits, follow-ups), প্লাস পেইজিনেশন ইনফো।\n- Filters: সার্চ কুয়েরি, সিলেক্টেড ট্যাগ, সোর্ট অর্ডার, ডেট রেঞ্জ।\n- Drafts: অপাঠানো নোট, অসম্পূর্ণ ফর্ম, “পরবর্তীতে সেভ করা” আইটেম।\n\nকী গুরুত্বপূর্ণ—কনসিস্টেন্সি: একই অবজেক্ট (ও নাম) প্রতিটি স্ক্রিনকে পাওয়ার দেয়, বদলে কি প্রতিটি স্ক্রিন আলাদা মিনি-মডেল বানায় না।\n\n### নিয়ম: ভ্যালিডেশন ও ফর্ম আচরণ\n\nফর্মগুলো শুধু ইনপুট নয়—এগুলো দৃশ্যমান নিয়ম। AI পুনরাবৃত্ত ভ্যালিডেশন প্যাটার্ন জেনারেট করতে পারে: \n- আবশ্যক ফিল্ডগুলো সাবমিট করার আগে হেল্পার টেক্সট দেখায় (“Next step is required”).\n- এরর মেসেজ নির্দিষ্ট (“Due date can’t be in the past”) এবং ঠিক করলে স্পষ্ট হয়ে যায়।\n- ইনপুটগুলোর স্যান ডিফল্ট আছে (আজ-পূরণ, তারিখ পিকারের সীমা)।\n\n### লোডিং, সাকসেস এবং ফেলিওর—প্রতিবার\n\nপ্রতিটি অ্যাসিঙ্ক অ্যাকশনের জন্য (সাইন ইন, আইটেম ফেচ, ভিজিট সেভ) অ্যাপ ঘুরে ফেলে পরিচিত স্টেটগুলো:\n\n- Loading: সাবমিট বোতাম ডিসেবল করে “Saving…” দেখান\n- Success: টোস্ট দিয়ে কনফার্ম করুন এবং তালিকা অবিলম্বে আপডেট করুন\n- Failure: ব্যবহারকারীর ইনপুট রাখুন, বন্ধু-সুলভ এরর দেখান, এবং “Try again” অফার করুন\n\nযখন এই প্যাটার্নগুলো স্ক্রিন জুড়ে ধারাবাহিক থাকে, অ্যাপটি ব্যবহারকারীর জন্য পূর্বানুমানযোগ্য মনে হয়—এবং বাস্তবে ব্যবহারকারীরা অপ্রত্যাশিতভাবে ট্যাপ করলে অ্যাপ অনেক কম ভাঙ্গে।\n\n## ব্যাকএন্ড ইন্টিগ্রেশন: রিয়াল ডেটা দিয়ে এক্সপেরিয়েন্স সংযুক্ত করা\n\nএকটি ফ্লো তখনই বাস্তব যখন এটি রিড এবং রাইট করে বাস্তব ডেটা। স্ক্রিন ও স্টেট রুল তৈরি হলে, AI অনুবাদ করে কি ব্যবহারকারী করে সেটাকে ব্যাকএন্ড কি সাপোর্ট করবে—তারপর ওয়্যারিং জেনারেট করে যাতে অ্যাপ প্রোটোটাইপ থেকে প্রোডাক্টে পরিণত হয়।\n\n### ফ্লো থেকে নির্দিষ্ট করা ব্যাকএন্ড চাহিদা\n\nএকটি সাধারণ ইউজার জার্নি থেকে ব্যাকএন্ড রিকোয়ারমেন্টস কয়েকটি কনক্রিট বকেটে পড়ে:\n\n- Auth & identity: sign up, sign in, session refresh, roles\n- Data CRUD: core records (visits, follow-ups) create/fetch/update/delete\n- Search & filtering: keyword, status, date range কুয়েরি\n- Notifications: পুশ টোকেন, প্রেফারেন্স সেটিং, ট্রিগার (উদাহরণ: “follow-up due today”)\n\nAI এগুলো UI ইনটেন্ট থেকে সরাসরি টেনে নিয়ে আসে। একটি “Save” বোতাম মানে একটি মিউটেশন। একটি তালিকা স্ক্রিন মানে পেইজিনেটেড ফেচ। একটি ফিল্টার চিপ মানে কুয়েরি প্যারামিটার।\n\n### UI অ্যাকশনকে API কলগুলোর সঙ্গে ম্যাপ করা\n\nএন্ডপয়েন্টগুলো আলাদাভাবে গড়ার বদলে, ম্যাপিং স্ক্রিন ইন্টারঅ্যাকশনের উপর ভিত্তি করে নির্ধারিত হয়:\n\n- Tap Log Visit → POST /visits\n- Open list screen → GET /accounts?cursor=...\n- Edit details → PATCH /visits/:id\n- Mark follow-up done → PATCH /followups/:id\n\nযদি আপনার কাছে ইতিমধ্যেই ব্যাকএন্ড থাকে, AI সেটার সাথে মানিয়ে নেবে: REST endpoints, GraphQL অপারেশন, Firebase/Firestore কালেকশন, অথবা কাস্টম ইন্টারনাল API। যদি না থাকে, AI একটি পাতলা সার্ভিস লেয়ার জেনারেট করতে পারে যা UI-র চাহিদা মেটায় (কিছুই বেশি নয়)।\n\n### স্কিমা অনুমান করা—তারপর নিশ্চিত করা\n\nAI UI কপি ও স্টেট থেকে মডেল প্রস্তাব করবে:\n\n- Visit { id, accountId, notes, nextStep, dueAt, createdAt }\n\nকিন্তু একজন মানুষ নিশ্চিত করে সহজ করে: কোন ফিল্ড required, কী nullable, কী ইনডেক্স দরকার, এবং পারমিশন কিভাবে কাজ করবে। সেই দ্রুত রিভিউ “প্রায় ঠিক” ডেটা মডেলকে প্রোডাক্টে শক্ত হয়ে যাওয়া থেকে রোধ করে।\n\n### এরর, রিট্রাই এবং বাস্তব-জগতের নির্ভরযোগ্যতা\n\nইন্টিগ্রেশন তখনই পুরো হয় যখন ফেলিউর পাথগুলো প্রথম-শ্রেণীর বিবেচনায় রাখা হয়:\n\n- টাইমআউট ও অফলাইন হ্যান্ডলিং\n- ব্যাকঅফ সহ রিট্রাইগুলো নিরাপদ রিকোয়েস্টের জন্য\n- স্পষ্ট ইউজার মেসেজ (এবং সাইলেন্ট লগিং ডায়াগনস্টিকসের জন্য)\n- কনফ্লিক্ট হ্যান্ডলিং (উদাহরণ: স্টেলের আপডেট)\n\nএখানেই AI বিরক্তিকর অংশ গুলো দ্রুত করে দেয়—consistent request wrappers, typed models, এবং predictable error states—যতক্ষণ টিম correctness ও ব্যবসায়িক নিয়মে ফোকাস করে।\n\n## বিল্ড-টেস্ট লুপ: দ্রুত ফিডব্যাক বিশৃঙ্খলা ছাড়া\n\nপ্রথম “রিয়াল” টেস্ট সিমুলেটরের স্ক্রিনশট নয়—এটি কারো হাতে একটা ফোনে বিল্ড। এটাই যেখানে প্রথম ফাটলগুলো দ্রুত দেখা যায়।\n\n### সত্যিকারের ডিভাইসে প্রথমে কী ভেঙে যায় (এবং কেন)\n\nএটি সাধারণত হেডলাইন ফিচার নয়—এটি সিমস: \n- কীবোর্ড ও লেআউট কুইর্কস: কীবোর্ড এলে একটি বোতাম ফোল্ডের নিচে পড়ে যায়।\n- ধীর বা ফ্লাকি নেটওয়ার্ক: লোডিং স্পিনার যা কখনও থামে না, বা স্ক্রিনগুলো যা ডেটা মুহূর্তে আসে বলে ধরে নেয়।\n- পারমিশন ও OS বিহেভিয়ার: নটিফিকেশন, ক্যামেরা, স্টোরেজ প্রম্পট ফ্লো ভেঙে দেয়।\n\nএগুলোই ব্যবহারকারী-দিক থেকে দরকারি ফেলিওর—এগুলো বলে কি আপনার অ্যাপ প্রকৃতপক্ষে কি নির্ভর করে।\n\n### AI-সহায়ক ডিবাগিং: সমস্যার উৎস নির্ণয় করা\n\nকিছু ভেঙলে, AI সবচেয়ে সহায়ক যখন এটি ক্রস-লেয়ার ডিটেকটিভ হিসেবে কাজ করে। UI, স্টেট এবং API-তে আলাদা করে সমস্যার পিছনে ছুটবার বদলে, আপনি এআই-কে পুরো পথ ট্রেস করতে বলতে পারেন:\n\n- মিল না খাওয়া ফিল্ড: UI profile.photoUrl আশা করে, ব্যাকএন্ড avatar_url রিটার্ন করে।\n- মিসিং স্টেট: আপনি “success” ও “error” হ্যান্ডেল করেন, কিন্তু “empty”, “offline”, বা “partial data” করেন না।\n- ধীর কল: UI একটি ভারি এন্ডপয়েন্ট ব্লক করে, যেখানে এটি প্রগ্রেসিভভাবে লোড করতে পারে।\n\nকারণ AI-এর কাছে ফ্লো, স্ক্রিন ম্যাপ এবং ডেটা কনট্র্যাক্টগুলো প্রসঙ্গে আছে, এটি একটি একক ফিক্স প্রস্তাব করতে পারে যা সঠিক জায়গাগুলোতে স্পর্শ করে—একটি ফিল্ডের নাম পরিবর্তন, একটি ফলোব্যাক স্টেট যোগ, এবং এন্ডপয়েন্ট রেসপন্স সামঞ্জস্য করা।\n\n### সাকসেস-ভিত্তিক অ্যানালিটিকস দিয়ে লুপ ইনস্ট্রুমেন্ট করুন\n\nপ্রতি টেস্ট বিল্ডে জিজ্ঞেস করুন: “আমরা মেট্রিকে কাছাকাছি পৌঁছাচ্ছি কি?” কয়েকটি ইভেন্ট যোগ করুন যা আপনার সাকসেস ক্রাইটেরিয়ার সাথে মিলে: \n- signup_started → signup_completed\n- first_action_completed (আপনার activation মুহূর্ত)\n- error_shown reason code সহ (timeout, validation, permission)\n\nএখন ফিডব্যাক কেবল মতামত নয়—এটি পরিমাপযোগ্য ফানেল।\n\n### এক ক্যাডেন্স, এক স্কোপ: থ্র্যাশ ছাড়া ইটারেট করুন\n\nএকটি সিম্পল রিদম জিনিসগুলো স্থিতিশীল রাখে: দৈনিক বিল্ড + ২০-মিনিট রিভিউ। প্রতিটি সাইকেল এক বা দুটি ফিক্স নেয়, এবং UI, স্টেট, এবং এন্ডপয়েন্ট একসাথে আপডেট করা হয়। এটা “হাফ-ফিক্সড” ফিচার প্রতিরোধ করে—যেখানে স্ক্রিন ঠিক লাগে, কিন্তু অ্যাপ বাস্তবে রিয়েল-ওয়ার্ল্ড টাইমিং, মিসিং ডেটা বা ইন্টারাপ্টেড পারমিশন থেকে পুনরুদ্ধার করতে পারে না।\n\n## বাস্তব-বিশ্বের বিশদ: অফলাইন, পারমিশন এবং এজ কেস\n\nহ্যাপি-পাথ কাজ করলে, অ্যাপকে বাস্তবে টিকে থাকতে হবে: টানেল, কম ব্যাটারি মোড, অনুপস্থিত পারমিশন এবং অনিশ্চিত ডেটা। এখানে AI সাহায্য করে “ব্রেক করা যাবে না”কে টিম রিভিউ-এর জন্য কনক্রিট আচরণে ফেরত করে।\n\n### অফলাইন আচরণ: প্রয়োজনীয়তা ছাড়া ভাঁজ নয়\n\nপ্রতিটি অ্যাকশনকে লেবেল করুন: offline-safe না connection-required। উদাহরণস্বরূপ, আগে লোড করা অ্যাকাউন্ট ব্রাউজ করা, খসড়া সম্পাদক, এবং ক্যাশ করা ইতিহাস অফলাইনে কাজ করতে পারে। পুরো ডেটাসেট সার্চ, পরিবর্তন সিঙ্ক করা, এবং পার্সোনালাইজড রিকমেন্ডেশন সাধারনত কানেকশন চাইবে।\n\nএকটি ভালো ডিফল্ট: ক্যাশ থেকে পড়ুন, আউটবক্সে লিখুন। UI অবশ্যই স্পষ্টভাবে দেখাবে যখন একটি পরিবর্তন “Saved locally” বনাম “Synced” এবং কানেক্টিভিটি ফিরলে “Try again” সহজ অপশন দেখাবে।\n\n### পারমিশন: দেরিতে জিজ্ঞেস করুন, আগে বিকল্প দিন\n\nপারমিশনগুলো সেই মুহূর্তে চাওয়া উচিত যখন তা যুক্তিসঙ্গত:\n\n- Camera: ব্যবহারকারী “Add photo” চাপলে জিজ্ঞেস করুন। প্রত্যাখ্যান হলে “Upload from library” বা “Enter manually” অফার করুন।\n- Location: “Nearby accounts” চালু করার সময় জিজ্ঞেস করুন। প্রত্যাখ্যান হলে সিটি/ZIP ইনপুট দিন।\n- Notifications: রিমাইন্ডারে opt-in করার পরে জিজ্ঞেস করুন, প্রথম লঞ্চে নয়। প্রত্যাখ্যান হলে ইন-অ্যাপ রিমাইন্ডার দেখান যেখানে সম্ভব।\n\nমূল কথা: নিষ্পত্তিকর বিকল্প দিন, ডেড-এন্ড নয়।\n\n### এজ কেস: মেয়াদোত্তীর্ণ কিন্তু গুণগত মান বাড়ায়\n\nAI দ্রুত এজ কেসগুলো তালিকাভুক্ত করতে পারে, কিন্তু টিম প্রোডাক্ট স্ট্যান্স বেছে নেয়:\n\n- Empty results: কেন তা বোঝান এবং পরবর্তী পদক্ষেপ সাজেস্ট করুন (ফিল্টার বদলান, সার্চ প্রসারিত করুন)।\n- Duplicates: নিরাপদ হলে ডেটা মার্জ করুন; না হলে দ্বিতীয় রেকর্ড তৈরির আগে সতর্ক করুন।\n- Time zones: টাইমস্ট্যাম্প UTC-তে সংরক্ষণ করুন, লোকাল টাইমে ডিসপ্লে করুন, এবং ডেট বাউন্ডারি সম্পর্কে স্পষ্ট থাকুন।\n- Slow networks: স্কেলিটন স্টেট দেখান, টাইমআউট রিট্রাই, এবং অনন্ত স্পিনিং এড়িয়ে চলুন।\n\n### সেফটি চেক: সিকিউরিটি ও অ্যাক্সেসিবিলিটি\n\nসিকিউরিটি বেসিক: টোকেন প্ল্যাটফর্মের সিকিউর স্টোরেজে রাখুন, লিস্ট-অফ-প্রিভিলেজ স্কোপ ব্যবহার করুন, এবং নিরাপদ ডিফল্ট সহ শিপ করুন (বিস্তারিত লগ না রাখা, এনক্রিপশন ছাড়া “remember me” না রাখা)।\n\nঅ্যাক্সেসিবিলিটি চেক: কনট্রাস্ট, মিনিমাম ট্যাপ টার্গেট, ডায়নামিক টেক্সট সাপোর্ট, এবং স্ক্রিন রিডার লেবেল—বিশেষ করে আইকন-অনলি বোতাম ও কাস্টম কম্পোনেন্টগুলোর জন্য যাচাই করুন।\n\n## MVP শিপ করা: বিল্ড থেকে স্টোর সাবমিশন\n\nশিপিং সেই জায়গা যেখানে একটি প্রতিশ্রুতিশীল প্রোটোটাইপ বাস্তব প্রোডাক্টে পরিণত হয়—or চুপচাপ আটকে যায়। AI UI, স্টেট রুল, এবং API ওয়্যারিং জেনারেট করে দিলে লক্ষ্য হলো সেই কাজ করা বিল্ডটাকে রিভিয়ার এবং কাস্টমাররা ইনস্টল করতে পারবে এমনভাবে রূপান্তর করা।\n\n### রিলিজ স্টেপস যা আপনাকে সমস্যায় ফেলবে না\n\nরিলিজকে একটি ছোট চেকলিস্ট হিসেবে দেখুন, নন-হিরোইকাল স্প্রিন্ট হিসেবে না।\n\n- Build signing: প্রোডাকশন সাইনিং কী/সার্টিফিকেট তৈরি করুন, সেগুলো নিরাপদে সংরক্ষণ করুন, এবং CI-তে সেগুলো অ্যাক্সেসযোগ্য কিন্তু সিক্রেট লিক না করে নিশ্চিত করুন।\n- Environment config: dev/staging/prod এন্ডপয়েন্ট ও কী আলাদা রাখুন। নিশ্চিত করুন অ্যানালিটিকস, এরর রিপোর্টিং, এবং পেমেন্ট (যদি থাকে) প্রোডাকশনে পয়েন্ট করছে।\n- Versioning: বিল্ড নম্বর ও মার্কেটিং ভার্সন ধারাবাহিকভাবে বাড়ান। প্রতিটি রিলিজ একটি চেঞ্জলগ এন্ট্রির সাথে যুক্ত রাখুন যাতে কী শিপ হয়েছে ট্রেস করা যায়।\n\n### অ্যাপ স্টোর অ্যাসেটস (ঝুঁকিপূর্ণ দাবি না করে)\n\nMVP সিম্পল হলেও, মেটাডাটা গুরুত্বপূর্ণ কারণ এটি প্রত্যাশা সেট করে।\n\n- Screenshots: কোর ফ্লো শেষ থেকে শেষ পর্যন্ত ক্যাপচার করুন (সবচেয়ে সাধারণ ডিভাইস সাইজে)। যদি AI স্ক্রিন জেনারেট করে থাকে, টাইপোগ্রাফি, এম্পটি স্টেট ও ফাইনাল কপি ডাবল-চেক করুন।\n- Description: প্রাইমারি জবটি সরল ভাষায় ব্যাখ্যা করুন। এমন দাবী করবেন না যা যাচাই করা যাবে না।\n- Privacy notes: আপনি কী ডেটা সংগ্রহ করেন এবং কেন তা ডকুমেন্ট করুন। নির্দিষ্ট হন, কিন্তু এমন ইঙ্গিত দেবেন না যে পলিসি-কমপ্লায়েন্স আপনার নিশ্চিত নয়।\n\n### রোলআউট, মনিটরিং এবং রোলব্যাক\n\nলঞ্চকে একটি এক্সপেরিমেন্ট হিসেবে পরিকল্পনা করুন।\n\nপ্রথমে internal testing, তারপর staged release বা ধাপে ধাপে রোলআউট ব্যবহার করে ব্লাস্ট রেডিয়াস সীমাবদ্ধ রাখুন। ক্র্যাশ রেট, অনবোর্ডিং সম্পন্ন হওয়া, এবং কোর অ্যাকশনের কনভার্সন মনিটর করুন।\n\nরোলব্যাক ট্রিগার আগে থেকে নির্ধারিত রাখুন—উদাহরণ: ক্র্যাশ-ফ্রি সেশন একটি থ্রেশহোল্ডের নিচে নেমে গেলে, সাইন-ইন ফেলিয়র স্পাইক হলে, বা প্রাইমারি ফানেল স্টেপ রেট হঠাৎ কমলে।\n\nআপনার বিল্ড সিস্টেম যদি স্ন্যাপশট এবং দ্রুত রোলব্যাক সাপোর্ট করে (উদাহরণ: Koder.ai স্ন্যাপশট/রোলব্যাক ডেপ্লয়মেন্টের সঙ্গেই দেয়), আপনি “আনডু”কে শিপিংয়ের একটি স্বাভাবিক অংশ হিসেবে ধরতে পারেন—প্যানিক ব্রেক নয়।\n\nযদি আপনি চান আপনার MVP চেকলিস্টকে একটি পুনরাবৃত্তযোগ্য রিলিজ পাইপলাইনে পরিণত করতে সাহায্য, দেখুন /pricing বা যোগাযোগ করতে /contact।\n\n## কী পরিবর্তন করে: রোল, মালিকানা, এবং পরবর্তী রিলিজ\n\nযখন AI স্ক্রিন ড্রাফট করে, স্টেট ও API ইন্টিগ্রেশন স্কেচ করে, কাজ নিস্পৃহ হয়ে যায় না—এটি স্থানান্তরিত হয়। টিমগুলো ইনটেন্টকে বোরিং বুটস্ট্র্যাপ থেকে ছেঁটে কেটে ফেলার বদলে সিদ্ধান্ত নেওয়ার সময় বেশি ব্যয় করে: কী তৈরি করা উচিত, কার জন্য, এবং কোন মানদণ্ডে।\n\n### AI যা ভালভাবে হ্যান্ডেল করে\n\nAI বিশেষ করে ভাল যখন ফ্লো স্পষ্ট হলে লেয়ার জুড়ে সামঞ্জস্যপূর্ণ আউটপুট তৈরি করতে হয়।\n\n- UI consistency: হেডার, লিস্ট, এম্পটি স্টেটগুলো ধারাবাহিক থাকে; কপি ড্রাফট দ্রুত রিভিউ-যোগ্য হয়।\n- State patterns: loading, success, error, retry—প্যাটার্নগুলো স্ক্রিন জুড়ে কম গ্যাপ দিয়ে আসে।\n- Integration scaffolding: রিকোয়েস্ট/রেসপন্স মডেল, এন্ডপয়েন্ট র্যাপার, এবং প্লেসহোল্ডার এরর হ্যান্ডলিং আগেভাগে দেখা যায়, যা রিয়াল-ডেটা ওয়্যারিংকে দ্রুত করে।\n\n### মানুষ এখনও কী নেয়ার করে\n\nAI প্রস্তাব করতে পারে; মানুষ সিদ্ধান্ত নেয়।\n\n- Product judgment: কী কাটা হবে, কী বিলম্ব করা হবে, কী পরিমার্জন করা হবে।\n- Prioritization: কমপক্ষে ফিচার সেট বেছে নেওয়া যা ভ্যালিডিটি প্রমাণ করে।\n- User empathy: বাস্তবে যে এজ কেসগুলো আসে—বিভ্রান্ত টার্মিনোলজি, বিশ্বাসের সমস্যা, এবং যেখানে ব্যবহারকারীরা দ্বিধা করে।\n- QA sign-off: ডিভাইসে আচরণ যাচাই করা, দুর্বল নেটওয়ার্কে, বাস্তব অ্যাকাউন্ট ও প্রত্যাশা নিয়ে।\n\n### রক্ষণাবেক্ষণযোগ্য রাখতে রাখার উপায়\n\nগতিশীলতা কেবল তখনই কাজে লাগে যখন কোড পাঠযোগ্য থাকে।\n\n- স্ক্রিন, ইভেন্ট, ও API মেথডের জন্য পরিষ্কার নামকরণ কনভেনশন ব্যবহার করুন।\n- মডুলার কম্পোনেন্ট (ইনপুট, কার্ড, এরর ব্যানার) পুনঃব্যবহারযোগ্য রাখুন, ডুপ্লিকেট না করে।\n- ইন্টিগ্রেশন লেয়ারের কাছাকাছি ডকুমেন্টেড এন্ডপয়েন্ট রাখুন (উদ্দেশ্য, প্যারামিটার, স্যাম্পল রেসপন্স)।\n\nআপনি যদি প্রথম ভার্সনটি প্ল্যাটফর্মে (যেমন Koder.ai) জেনারেট করেন, একটি বাস্তব রক্ষণাবেক্ষণযোগ্য আনলক হল সোর্স কোড এক্সপোর্ট: আপনি “দ্রুত জেনারেশন” থেকে “টিম-মালিকানাধীন কোডবেস” এ যান পুনর্লিখন ছাড়াই।\n\n### পরবর্তী রিলিজের মনোভাব\n\nMVP শিপ হওয়ার পরে পরবর্তী ইটারেশনগুলো সাধারণত ফোকাস করে পারফরম্যান্স (স্টার্টআপ টাইম, তালিকা রেন্ডারিং), পার্সোনালাইজেশন (সেভড প্রেফারেন্স, স্মার্ট ডিফল্ট), এবং গভীর অটোমেশন (টেস্ট জেনারেশন, অ্যানালিটিক্স ইনস্ট্রুমেন্টেশন) উপর।\n\nঅধিক উদাহরণ ও সম্পর্কিত পড়ার জন্য দেখুন /blog।