ভাইব কোডিং দিয়ে অ্যাপ কীভাবে বানাবেন: ধারণা থেকে প্রকাশিত অ্যাপ পর্যন্ত

ভাইব কোডিং দিয়ে একটি অ্যাপ বানাতে প্রথম সংস্করণের এক পাতার বিবরণ লিখুন, সেটি একটি AI app builder-কে আপনার প্রথম prompt হিসেবে দিন, তারপর ছোট ছোট পরীক্ষিত ধাপে অ্যাপটি বাড়ান: ডাটা, লগইন, মূল ওয়ার্কফ্লো, পালিশ, নিরাপত্তা পর্যালোচনা, এবং সবশেষে প্রকাশ। এই গাইড একটি উদাহরণ প্রকল্প অনুসরণ করে, একটি ছোট যোগ স্টুডিওর ক্লাস বুকিং অ্যাপ, প্রতিটি ধাপে ব্যবহৃত prompt সহ।

যদি আপনি এভাবে কখনো কিছু না বানিয়ে থাকেন, আমাদের নতুনদের জন্য ভাইব কোডিং টিউটোরিয়াল ছোট থেকে শুরু করে। যে বিস্তৃত ওভারভিউ ভাইব কোডিংয়ের সাথে বাঁধা নয়, তার জন্য দেখুন AI দিয়ে অ্যাপ কীভাবে বানাবেন।

প্রকল্পটি

ধরুন সারা নামে একজন যোগ স্টুডিওর মালিক, যিনি সপ্তাহে আটটি ক্লাস চালান। বুকিং আসে WhatsApp-এ; তিনি প্রতি ক্লাসের জন্য একটি কাগজের তালিকা রাখেন এবং প্রায়ই বেশি বুকিং নিয়ে ফেলেন। তিনি চান:

• শিক্ষার্থীরা সপ্তাহের সময়সূচি দেখবে এবং একটি জায়গা বুক করবে।
• প্রতি ক্লাসের একটি ধারণক্ষমতা থাকবে।
• প্রতি ক্লাসের জন্য একটি তালিকা, যা তিনি দরজায় দেখে নিতে পারবেন।
• শিক্ষার্থীরা দুই ঘণ্টা আগে পর্যন্ত বাতিল করতে পারবে।

প্রথম সংস্করণ এটুকুই। কোনো পেমেন্ট নেই, কোনো মেম্বারশিপ নেই, কোনো অ্যাপ স্টোর নেই। সেগুলো পরে আসবে, বা কখনোই না।

ধাপ ১: এক পাতার স্পেক লিখুন

কোনো টুল খোলার আগে প্রথম সংস্করণটি সাধারণ কথায় লিখে ফেলুন। এখানে দশ মিনিট দিলে পরে অনেক ঘণ্টার আদান-প্রদান বাঁচে। একটি কার্যকর কাঠামো:

• কে ব্যবহার করে: শিক্ষার্থী (বুক ও বাতিল), সারা (ক্লাস পরিচালনা ও তালিকা দেখা)।
• স্ক্রিন: সময়সূচি, ক্লাসের বিবরণ, আমার বুকিং, অ্যাডমিন ক্লাস, অ্যাডমিন ক্লাসের তালিকা।
• ডাটা: ক্লাস (নাম, শিক্ষক, শুরুর সময়, দৈর্ঘ্য, ধারণক্ষমতা), বুকিং (শিক্ষার্থী, ক্লাস, অবস্থা), শিক্ষার্থী (নাম, ইমেইল, ফোন)।
• নিয়ম: পূর্ণ ক্লাসে বুকিং নয়; প্রতি শিক্ষার্থী প্রতি ক্লাসে একটি বুকিং; দুই ঘণ্টা আগে পর্যন্ত বাতিল; শুধু সারা অ্যাডমিন পাতা দেখবে।
• v1-এ নেই: পেমেন্ট, ক্লাস প্যাক, অপেক্ষা-তালিকা, রিমাইন্ডার।

"v1-এ নেই" তালিকাটিই সবচেয়ে গুরুত্বপূর্ণ। এটি বানানোকে শেষ করা সম্ভব রাখে। আরও পূর্ণাঙ্গ স্পেকের জন্য AI দিয়ে প্রোডাক্ট রিকোয়ারমেন্ট ডক লেখা গাইড দেখুন।

ধাপ ২: এমন একটি টুল বাছুন যা পুরো লুপ সামলায়

ডাটাবেস, লগইন ও একটি প্রকাশ্য URL-সহ একটি অ্যাপের জন্য এমন একটি AI app builder ব্যবহার করুন যে কোড চালায়, একটি ডাটাবেস যুক্ত করে এবং প্রকাশ করে, শুধু ফাইল হস্তান্তরকারী চ্যাট সহকারী নয়। ভাইব কোডিং টুলের তুলনা বিকল্পগুলো দেখায়। এখানে আমরা Mythex ব্যবহার করব, কারণ এটি প্রতিটি ধাপ এক জায়গায় দেয়: চ্যাট, লাইভ প্রিভিউ, আসল ডাটাবেস ও ফাইল স্টোরেজ, এবং এক ক্লিকে প্রকাশ।

ধাপ ৩: প্রথম prompt

স্পেকটিকে এক অনুচ্ছেদে রূপান্তর করুন। পুরো ডকুমেন্ট প্রতিটি বিবরণসহ একবারে পেস্ট করবেন না; মূলটি দিন, বাকিটা ধাপে ধাপে যোগ করুন।

আমার যোগ স্টুডিওর জন্য একটি ক্লাস বুকিং অ্যাপ বানাও। শিক্ষার্থীরা নাম, ইমেইল ও ফোন দিয়ে সাইন আপ করবে, এই সপ্তাহের সময়সূচি দেখবে, এবং একটি ক্লাসে জায়গা বুক করবে। প্রতি ক্লাসের নাম, শিক্ষক, শুরুর সময়, দৈর্ঘ্য ও ধারণক্ষমতা থাকবে; পূর্ণ ক্লাসে "Full" দেখাবে এবং বুক করা যাবে না। শিক্ষার্থীরা তাদের বুকিং দেখবে এবং ক্লাসের দুই ঘণ্টা আগে পর্যন্ত বাতিল করতে পারবে। আমি অ্যাডমিন: আমি ক্লাস যোগ ও সম্পাদনা করতে পারব, এবং প্রতিটি ক্লাসে কারা বুক করেছে তার তালিকা দেখতে পারব। শান্ত, সহজ ডিজাইন যা ফোনে ভালো কাজ করে।

যদি আপনি নিশ্চিত না হন যে টুলটি বুঝেছে, আগে একটি পরিকল্পনা চান। Mythex-এ Plan মোড কোড লেখার আগে স্ক্রিন ও ডাটা সাজিয়ে দেখায়, এবং আপনি অনুমোদন দেন।

ধাপ ৪: মূল লুপটি কাজ করান

মূল লুপটিই অ্যাপের আসল কাজ: একজন শিক্ষার্থী একটি ক্লাস বুক করে, আর সারা তা দেখেন। শুধু এটিই পরীক্ষা করুন:

1. একজন শিক্ষার্থী হিসেবে সাইন আপ করুন, একটি ক্লাস বুক করুন।
2. অ্যাডমিন ভিউ খুলুন। বুকিংটি কি সেখানে আছে?
3. একই ক্লাস আবার বুক করুন। এটি প্রত্যাখ্যান করা উচিত।
4. একটি ক্লাসের ধারণক্ষমতা ২ করুন, দুটি শিক্ষার্থী অ্যাকাউন্ট থেকে বুক করুন, তারপর তৃতীয়টি চেষ্টা করুন।

এই পর্যায়ে সাধারণত দুটি সমস্যা দেখা যায়। সময়সূচি সার্ভারের টাইম জোনে সময় দেখায়, স্টুডিওর টাইম জোনে নয়। আর "Full" পরীক্ষাটি শুধু পেজে হয়, তাই দ্রুত দুবার ক্লিক করলে দুটি বুকিং তৈরি হয়ে যায়।

সব ক্লাসের সময় স্টুডিওর টাইম জোনে দেখাও, [Asia/Dubai], দর্শকের ডিভাইস যাই হোক না কেন।

বুকিং তৈরি হওয়ার সময় সার্ভারে ধারণক্ষমতা ও ডুপ্লিকেট বুকিং পরীক্ষা করো, শুধু পেজে নয়। যদি শেষ জায়গার জন্য দুটি অনুরোধ একসাথে আসে, তবে কেবল একটি সফল হওয়া উচিত।

অন্য কিছু যোগ করার আগে মূল লুপটি ঠিক করুন। বাকি সবকিছু এর ওপর নির্ভর করে।

ধাপ ৫: বাকি নিয়মগুলো একবারে একটি করে যোগ করুন

এবার স্পেকের নিয়মগুলো একটি একটি করে যান:

শিক্ষার্থীরা ক্লাস শুরুর দুই ঘণ্টা আগে পর্যন্ত বুকিং বাতিল করতে পারবে। তারপর বাতিল বোতাম লুকিয়ে দাও এবং সার্ভারে বাতিল প্রত্যাখ্যান করো একটি স্পষ্ট বার্তা সহ।

শুধু আমার অ্যাকাউন্ট অ্যাডমিন পাতাগুলো খুলতে পারবে। প্রতিটি অ্যাডমিন কাজের জন্য এটি শুধু মেনু লুকিয়ে নয়, সার্ভারে যাচাই করো।

প্রতিটির পরে পরীক্ষা করুন, এবং কাজ করলে তবেই পরেরটিতে যান। কোনো পরিবর্তন কিছু ভেঙে দিলে শেষ ভালো চেকপয়েন্টে ফিরে যান এবং একটি আরও স্পষ্ট অনুরোধ দিয়ে আবার চেষ্টা করুন, একের পর এক ফিক্স চাপাবেন না।

ধাপ ৬: আসল ব্যবহারকারীরা যা লক্ষ্য করবে তা পালিশ করুন

আসল ব্যবহারকারীরা ছোট জিনিসও লক্ষ্য করে। সারার অ্যাপের একটি ছোট তালিকা:

• খালি অবস্থা: একটি সাদা পাতার বদলে "এই সপ্তাহে এখনো কোনো ক্লাস নেই"।
• নিশ্চিতকরণ: বুক করার পরে "আপনার জায়গা নিশ্চিত: Vinyasa, মঙ্গলবার ১৮:00"।
• ফোনের লেআউট: বড় বোতাম, ৩৭৫ পিক্সেল পর্দায় পাঠযোগ্য সময়সূচি।
• বাকি জায়গা: প্রতিটি ক্লাসে "৩টি জায়গা বাকি", যাতে শিক্ষার্থীরা তাড়াতাড়ি বুক করে।

প্রতিটি ক্লাস কার্ডে বাকি জায়গা দেখাও, যেমন "১২টির মধ্যে ৩টি বাকি"। বুক করার পরে ক্লাসের নাম, দিন ও সময়সহ একটি নিশ্চিতকরণ দেখাও, এবং আমার বুকিংয়ে যাওয়ার একটি বোতাম দাও।

ধাপ ৭: একজন অপরিচিতের মতো পরীক্ষা করুন

কেউ অ্যাপটি ব্যবহার করার আগে আধঘণ্টা সময় দিয়ে এটি ভাঙার চেষ্টা করুন:

প্রান্তিক ক্ষেত্রগুলো চালাতে আপনি AI-কেও বলতে পারেন:

একজন আসল শিক্ষার্থী এমন দশটি কাজ তালিকা করো যা বুকিং বা বাতিল ভেঙে দিতে পারে, প্রতিটি পরীক্ষা করো এবং যা ব্যর্থ হয় তা ঠিক করো। তুমি কী বদলেছ বলো।

ধাপ ৮: একটি নিরাপত্তা পর্যালোচনা

এই অ্যাপ নাম, ইমেইল ও ফোন নম্বর রাখে, তাই একটি ছোট নিরাপত্তা পর্যালোচনা মূল্যবান। প্রধান প্রশ্নগুলো:

• একজন শিক্ষার্থী কি অন্যের বুকিং বা যোগাযোগের তথ্য দেখতে পারে?
• ব্রাউজারে চলা কোডে কোনো key বা পাসওয়ার্ড আছে কি?
• সাইন-আপ ফর্ম কি বটের বিরুদ্ধে সুরক্ষিত?
• ডাটার ব্যাকআপ আছে কি?

ভাইব কোডিং কি নিরাপদ পাতা প্রতিটি পরীক্ষা ব্যাখ্যা করে এবং সেগুলোর জন্য prompt দেয়, আর AI দিয়ে বানানো অ্যাপের নিরাপত্তা চেকলিস্ট এর দীর্ঘ সংস্করণ।

ধাপ ৯: প্রকাশ করুন

মূল লুপ, নিয়ম ও পরীক্ষাগুলো পাস করলে প্রকাশ করুন। Mythex-এ এটি এক ক্লিক, এবং অ্যাপটি তার ডাটাবেস ও হোস্টিং আগে থেকে প্রস্তুত অবস্থায় একটি প্রকাশ্য URL পায়। Pro-তে আপনি নিজের ডোমেইন যুক্ত করতে পারেন, যেমন book.sarasyoga.com; দেখুন কাস্টম ডোমেইন কীভাবে যোগ করবেন।

লিংক পাঠানোর আগে প্রকাশিত সংস্করণটি আরেকবার দেখুন। আপনার ফোন থেকে একটি ক্লাস বুক করুন। প্রোডাকশন ও প্রিভিউ একই রকম আচরণ করা উচিত, তবু নিশ্চিত হয়ে নিন।

ধাপ ১০: প্রথম ব্যবহারকারী ও পরের সংস্করণ

প্রথমে পাঁচজন নিয়মিত শিক্ষার্থীকে লিংক দিন, সবাইকে নয়। তাদের পরের ক্লাসটি এর মাধ্যমে বুক করতে বলুন এবং কী বিভ্রান্তিকর লেগেছে তা জানাতে বলুন। তারপর তারা যে প্রথম তিনটি বিষয় বলে তা ঠিক করুন।

কয়েক সপ্তাহ আসল ব্যবহারের পরে, এমন একটি অ্যাপের v2 তালিকা প্রায় নিজে থেকেই লেখা হয়ে যায়: পূর্ণ ক্লাসের জন্য অপেক্ষা-তালিকা, আগের সন্ধ্যায় ইমেইল রিমাইন্ডার, এবং অনলাইনে দেওয়া ক্লাস প্যাক। প্রতিটির জন্য একই পদ্ধতি: কয়েক লাইনে স্পেক লিখুন, prompt দিন, পরীক্ষা করুন, প্রকাশ করুন। পেমেন্ট যোগের জন্য দেখুন আপনার অ্যাপে পেমেন্ট কীভাবে যোগ করবেন। মানুষের কাছে কথা ছড়ানোর জন্য দেখুন অ্যাপ লঞ্চ ও প্রথম ব্যবহারকারী পাওয়ার উপায়।

ফোন অ্যাপে রূপান্তর

অনেক স্টুডিও চায় শিক্ষার্থীদের ফোনে একটি আইকন থাকুক। Mythex Pro-তে প্রকাশিত অ্যাপ একটি Android অ্যাপ (যা Google Play-তে আপলোড করা যায় এমন একটি ফাইল) এবং আপনার নিজের App Store Connect key দিয়ে TestFlight-এ পাঠানো একটি iPhone অ্যাপ হতে পারে, Mac ছাড়াই। ফোন অ্যাপটি প্রকাশিত ওয়েব অ্যাপটিই খোলে, তাই আপনি যখনই আপডেট প্রকাশ করেন, ফোন অ্যাপেও তা পৌঁছায়।

এখান থেকে যা নেওয়ার

বানানোটাই ছিল সংক্ষিপ্ত অংশ। অ্যাপটিকে ব্যবহারযোগ্য করেছে স্পেকের "v1-এ নেই" তালিকা, মূল লুপ আগে পরীক্ষা করা, ধারণক্ষমতা ও অধিকারের জন্য সার্ভার-পাশের নিয়ম, এবং পঞ্চাশ জনের আগে পাঁচজন আসল ব্যবহারকারী। অন্যদের জন্য কাজ করা একটি অ্যাপ হলে ভাইব কোডিং এমনই দেখায়।

নিজের অ্যাপ চেষ্টা করতে প্রস্তুত? আপনার এক পাতার স্পেক লিখুন, তারপর প্রথম অনুচ্ছেদটি AI app builder-এ পেস্ট করুন। আরও অ্যাপের ধরন এবং তার পেছনের prompt দেখতে চাইলে ভাইব কোডিংয়ের উদাহরণ পড়ুন।

প্রশ্নোত্তর