মোবাইল-বান্ধব ওয়েব অ্যাপ কীভাবে বানাবেন

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

"মোবাইলে থাকার" তিনটি উপায়

PWA হলো কয়েকটি বাড়তি সুবিধাসহ একটি রেসপন্সিভ ওয়েব অ্যাপ, তাই প্রথম দুটির মধ্যে বেছে নিতে হয় না। আগে রেসপন্সিভ বানান, তারপর ইনস্টলযোগ্য করুন। আরও গভীর তুলনার জন্য নেটিভ বনাম প্রগ্রেসিভ ওয়েব অ্যাপ দেখুন।

ফোনে ওয়েব অ্যাপ যা পারে ও যা পারে না

ব্রাউজার অনেক কিছু পারে, যা অনেকে ভাবেন তার চেয়ে বেশি:

• ক্যামেরা ও ছবি আপলোড, স্ট্যান্ডার্ড ফাইল ইনপুটের মাধ্যমে।
• লোকেশন, ব্যবহারকারীর অনুমতিতে।
• হোম স্ক্রিনে ইনস্টল, আইকন ও ফুল-স্ক্রিন চালুসহ।
• অফলাইনে ব্যবহার, সার্ভিস ওয়ার্কার (ব্রাউজার আপনার সাইটের জন্য চালায় এমন একটি ব্যাকগ্রাউন্ড স্ক্রিপ্ট) দিয়ে পেজ ও ডেটা ক্যাশ করে।
• পুশ নোটিফিকেশন — iPhone-এ একটি শর্ত আছে। Apple-এর WebKit দল বলেছে, হোম স্ক্রিনে যোগ করা ওয়েব অ্যাপের জন্য ওয়েব পুশ iOS ও iPadOS 16.4-এ এসেছে। ব্যবহারকারীকে আগে অ্যাপ ইনস্টল করতে হবে, তারপর নোটিফিকেশনের অনুমতি দিতে হবে।

যেখানে নেটিভ এখনও জিতে যায়:

• গভীর ডিভাইস ফিচার, যেমন ব্যাকগ্রাউন্ড লোকেশন, ব্লুটুথ অ্যাকসেসরি, স্বাস্থ্য-তথ্য ও হোম-স্ক্রিন উইজেট — ব্রাউজারে সমর্থন সীমিত বা প্ল্যাটফর্ম ভেদে ভিন্ন।
• অ্যাপ স্টোরে আবিষ্কার। মানুষ যদি স্টোরে খুঁজে আপনাকে পেতে চায়, আপনাকে সেখানে থাকতেই হবে।
• ভারী অফলাইন কাজ, যেমন ব্যাকগ্রাউন্ডে সিঙ্ক হওয়া বড় ডেটাসেট।
• পারফরম্যান্স-সংবেদনশীল গ্রাফিক্স, যেমন চাহিদাসম্পন্ন গেম।

আপনার অ্যাপের মূল চাহিদা এগুলোর কোনোটি না হলে একটি ওয়েব অ্যাপ সম্ভবত ভালোভাবে কাজ চালাবে।

প্রথমে ফোনের জন্য ডিজাইন

আগে ফোনের লেআউট ডিজাইন করুন এবং বড় পর্দার জন্য তা প্রসারিত হতে দিন; উল্টোটা করলে সাধারণত ফোনের পর্দা ঠাসাঠাসি হয়ে যায়।

লেআউট

• ছোট পর্দায় এক কলাম। সাইডবার হয়ে যাক নিচের বার বা মেনু।
• পাশে স্ক্রল নয়। চওড়া টেবিল কার্ড হয়ে যাক, অথবা নিজের কন্টেইনারের ভেতরে স্ক্রল করুক।
• জুম না করেই পড়া যায় এমন লেখা — মূল লেখা প্রায় 16px।

টাচ

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

গতি

• ছোট ছবি যুক্তিসংগত মাপে, দৃশ্যমান হলে তবেই লোড হবে।
• কম ভারী লাইব্রেরি। প্রতিটি মোবাইল ডেটায় ডাউনলোডের সময় বাড়ায়।
• স্কেলিটন স্ক্রিন বা স্পষ্ট লোডিং অবস্থা, যাতে অ্যাপ কখনো জমে থাকা মনে না হয়।

সেফ এরিয়া ও ঠিকানা বার

আধুনিক ফোনে কনটেন্ট নচ বা হোম ইন্ডিকেটরের নিচে চলে যেতে পারে, বিশেষ করে ফুল-স্ক্রিনে ইনস্টল করা অ্যাপে। সেফ-এরিয়া প্যাডিং চান। এছাড়া ব্রাউজারের ঠিকানা বার আসা-যাওয়ায় লাফিয়ে ওঠে এমন ফুল-হাইট লেআউটের ব্যাপারেও সতর্ক থাকুন।

ইনস্টলযোগ্য করা (PWA)

ইনস্টলযোগ্য হতে একটি ওয়েব অ্যাপের দরকার:

1. একটি ওয়েব অ্যাপ ম্যানিফেস্ট — অ্যাপের নাম, ছোট নাম, আইকন, থিম রঙ এবং কীভাবে খুলবে (সাধারণত ফুল-স্ক্রিন "স্ট্যান্ডঅ্যালোন") তার একটি ছোট ফাইল।
2. আইকন প্ল্যাটফর্ম যেসব মাপ চায় সেগুলোতে, Apple ডিভাইসের উপযোগী একটিসহ।
3. HTTPS, যা ঠিকমতো হোস্ট করা যেকোনো অ্যাপের আগে থেকেই থাকে।
4. একটি সার্ভিস ওয়ার্কার, যদি অফলাইন সাপোর্ট বা পুশ চান।

তারপর ব্যবহারকারীদের জানান কীভাবে ইনস্টল করতে হয়। Android ব্রাউজার সাধারণত একটি ইনস্টল প্রম্পট বা মেনু আইটেম দেখায়; iPhone-এ শেয়ার বোতাম, তারপর "Add to Home Screen"। "এই অ্যাপটি ইনস্টল করুন" এই ধাপগুলোসহ একটি সংক্ষিপ্ত নোট অনেক সাহায্য করে।

অফলাইন সাপোর্টেই PWA জটিল হয়ে ওঠে। অ্যাপের পেজ ক্যাশ করা, যাতে সংযোগ ছাড়াও খুলতে পারে, সোজা কাজ। ব্যবহারকারীদের অফলাইনে ডেটা বদলাতে দিয়ে পরে সিঙ্ক করা আসল কাজ — শুধু তখনই চান যখন ব্যবহারকারীদের সত্যিই দরকার।

একটি কার্যকর প্রথম প্রম্পট

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

বানানোর ধাপ

1. প্রথমে ফোনের লেআউট বানান, নমুনা ডেটায়, এবং ফোনের মাপের প্রিভিউতে দেখুন।
2. আসল ফোনে পরীক্ষা করুন — আপনার ব্যবহারকারীদের যদি দুটোই থাকে, অন্তত একটি iPhone ও একটি Android। এমুলেটর এমন জিনিস মিস করে, যেমন স্ক্রিন-কিবোর্ড ইনপুট ঢেকে ফেলা।
3. এক হাতের বুড়ো আঙুলে মূল কাজটি করে দেখুন। কিছুতে দুই হাত বা জুম লাগলে সেটি ঠিক করুন।
4. ম্যানিফেস্ট ও আইকন যোগ করুন, তারপর দুটো প্ল্যাটফর্মেই ইনস্টল করে আইকন, নাম ও স্প্ল্যাশ পরীক্ষা করুন।
5. অফলাইন নিয়ে সিদ্ধান্ত নিন। শুরু করুন "সংযোগ ছাড়া খোলে এবং একটি স্পষ্ট বার্তা দেখায়" দিয়ে; অফলাইনে সম্পাদনা শুধু তখনই যোগ করুন যদি দরকার হয়।
6. ধীর সংযোগে গতি পরীক্ষা করুন। ব্রাউজারের ডেভেলপার টুলস এমন সংযোগ সাজিয়ে দিতে পারে।
7. নোটিফিকেশন সবশেষে যোগ করুন, যদি আদৌ করেন — আর যারা ইনস্টল করেনি তাদের জন্য একটি ইমেইল বিকল্প রাখুন।

সাধারণ ভুল

• শুধু বড় মনিটরে ডিজাইন করা। কাজের সাথে সাথে প্রতিটি পর্দা ফোনের প্রস্থে পরীক্ষা করুন।
• উপচে পড়া টেবিল। ছোট পর্দায় সারিগুলো কার্ড বানান।
• ছোট ট্যাপ এলাকা ও কাছাকাছি লিংক।
• কিবোর্ডের সাথে লড়াই করা ফর্ম — ভুল ইনপুট টাইপ, কিবোর্ডের নিচে ঢাকা পড়া ফিল্ড, "পরবর্তী" বোতামের প্রবাহ না থাকা।
• ধরে নেওয়া যে ব্রাউজার ট্যাবে iPhone পুশ কাজ করবে। এর জন্য অ্যাপ হোম স্ক্রিনে ইনস্টল করা লাগে।
• এমন App Store অ্যাপের প্রতিশ্রুতি দেওয়া যা আপনি পাঠাতে পারবেন না। স্টোর গুরুত্বপূর্ণ হলে আলাদাভাবে পরিকল্পনা করুন।
• একটি ওয়েবসাইট মুড়ে তাকে অ্যাপ বলা। Apple-এর App Review Guidelines পুনর্মোড়ানো ওয়েবসাইটের চেয়ে বেশি কিছু চায়; পাতলা র‍্যাপার প্রত্যাখ্যানের ঝুঁকি তৈরি করে।

কখন নেটিভ অ্যাপ দরকার

নিম্নলিখিত ক্ষেত্রে নেটিভে যান (অথবা ওয়েব অ্যাপের পরে একটি নেটিভ সংস্করণের পরিকল্পনা করুন):

• স্টোরে উপস্থিতিই গ্রাহকদের আপনাকে খুঁজে পাওয়ার উপায় হলে।
• ব্যাকগ্রাউন্ড লোকেশন, ব্লুটুথ, স্বাস্থ্য-তথ্য, উইজেট বা অন্য ডিভাইস ফিচারের ওপর নির্ভর করলে, যেগুলো ব্রাউজার নির্ভরযোগ্যভাবে দেয় না।
• আপনার অ্যাপ দীর্ঘ সময় ধরে সম্পূর্ণ অফলাইনে কাজ করতে হলে।
• আপনার ব্যবহারকারীরা এটি আশা করেন — কিছু দর্শক স্টোরে নেই এমন কিছুতে আদৌ আসবেন না।

স্টোরে প্রকাশের নিজস্ব খরচ ও ধাপ আছে। সেপ্টেম্বর ২০২৬ পর্যন্ত, তাদের নিজস্ব সাইট অনুযায়ী, Apple-এর ডেভেলপার প্রোগ্রামের খরচ বছরে US$99 এবং Google Play ডেভেলপার অ্যাকাউন্টের একবারের US$25, এবং প্রতিটি রিলিজ রিভিউ পার হয়। অনেক দল প্রথমে মোবাইল-বান্ধব ওয়েব অ্যাপ দিয়ে শুরু করে প্রমাণ করে যে মানুষ পণ্যটি চায়, তারপর জানার পর নেটিভে বিনিয়োগ করে। AI দিয়ে কীভাবে অ্যাপ বানাবেন গাইডে এই প্রথম ধাপটি শুরু থেকে শেষ পর্যন্ত আছে।

Mythex দিয়ে বানানো

Mythex ওয়েব অ্যাপ বানায়: চ্যাটে অ্যাপটি বর্ণনা করুন, আর ডেস্কটপে লাইভ প্রিভিউতে এবং আকার বদলানো যায় এমন ফোনের মাপের ফ্রেমে যাচাই করুন। ছোট পর্দার লেআউট ঠিক করার জন্য ডক্সে একটি মোবাইল-রেসপন্সিভ প্রম্পট আছে। অন্য যেকোনো ফিচারের মতো PWA ম্যানিফেস্ট ও আইকনও চাইতে পারেন, তারপর যেকোনো ফোনে কাজ করা একটি পাবলিক লিংকে প্রকাশ করুন। Pro-তে Mythex অ্যাপটিকে Android ও iPhone অ্যাপে মুড়তে পারে, যা Google Play-র ইন্টারনাল টেস্টিং ও TestFlight-এ যায়। শুরু করতে AI ওয়েব অ্যাপ বিল্ডার দেখুন, অথবা অ্যাপ টেমপ্লেট ব্রাউজ করুন। একটি কাজের উদাহরণের জন্য কীভাবে একটি অভ্যাস-ট্র্যাকার অ্যাপ বানাবেন পড়ুন।

প্রশ্নোত্তর