আসসালামুআলাইকুম বন্ধুরা,

আশাকরি ভালোই আছেন।

বন্ধুরা আপনাদের মাঝে উপস্থিত হলাম নতুন একটি পোস্ট নিয়ে, আজকে আমি দেখাবো কি ভাবে HTMl, CSS এবং JS দিয়েই একটি News Directory Apk তৈরী করা যায়।

তবে আজকের পার্টে শুধু কোড দিবো এবং ব্যাসিক কিছু আলোচনা করবো। আর next পার্টে এটাকে apk তে রুপান্তর করবো এবং প্রয়োজনীয় আপডেট প্রসেস দেখাবো ইনশাল্লাহ।

📱 অ্যাপ পরিচিতি: BanglaNewsHub কি?

অ্যাপটির নাম দিয়েছি নিউজ BanglaNewsHub। এই BanglaNewsHub কি?

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

✨ ফিচারগুলি এক নজরে

তো বন্ধুরা প্রথমেই আমরা যে app বানাবো তার ফিচার গুলি এক নজরে দেখে নেই।

🎨 ফ্রন্টএন্ড ফিচার (Frontend)

• অ্যাপের লোগো, বাংলা টাইটেল ও সাবটাইটেল
• লাইট ও ডার্ক মোড সুইচ বাটন
• সার্চ বক্স (নিউজ ওয়েবসাইট খুঁজতে)
• নিউজ সাইটের ক্যাটাগরি বাটন (সাধারণ, রাজনীতি, খেলা, ব্যবসা, বিনোদন, প্রযুক্তি, আন্তর্জাতিক, স্বাস্থ্য, শিক্ষা)
• ফিল্টার বাটন
• নিউজ সাইটের কার্ড (গ্রিড ভিউ)
• নিউজ সাইটের লিস্ট আইটেম (লিস্ট ভিউ)
• টোটাল সাইট, ফেভারাইট ও সম্প্রতি দেখা সাইটের সংখ্যা দেখায় এমন তিনটি স্ট্যাটস কার্ড
• ভিউ সুইচ বাটন (গ্রিড ও লিস্ট ভিউয়ের মধ্যে পরিবর্তন)
• রিফ্রেশ বাটন
• “ফেভারিট” সেকশন (তারকা আইকন দিয়ে সেভ করা সাইট)
• “সম্প্রতি দেখা” সেকশন
• সাইটে ভিজিট করার জন্য “বিজিট” লিঙ্ক/বাটন
• সাইটকে ফেভারিটে যুক্ত/অপসারণ করার জন্য তারকা বাটন
• “কাস্টম সাইট যোগ করুন” মোডাল (ফর্ম)
• অ্যাপের সম্পর্কে তথ্য দেখার মোডাল
• টোস্ট নোটিফিকেশন (ছোট বার্তা)
• ফুটার (কুইক লিঙ্ক, ক্যাটাগরি, অ্যাপের তথ্য)

⚙️ ব্যাকএন্ড/লজিক ফিচার (Backend)

• পাউচডিবি (PouchDB) ব্যবহার করে ব্রাউজারে ডাটা জমা রাখা
• ৩০টি বাংলাদেশী সংবাদ সাইটের প্রি-লোডেড তথ্য
• ব্যবহারকারীর ফেভারাইট ও সম্প্রতি দেখা সাইটের তালিকা সেভ করা
• সার্চ ও ফিল্টার প্রয়োগ করে সাইটের তালিকা দেখানো
• নিউজ সাইটের ক্যাটাগরি ও ভাষা অনুযায়ী ফিল্টারিং
• ডাটা এক্সপোর্ট ও ইম্পোর্ট করা (JSON ফাইলে)
• “সম্প্রতি দেখা” তালিকা থেকে আইটেম মুছা
• কাস্টম নিউজ সাইট যোগ করা ও সেভ করা
• থিম (লাইট/ডার্ক) ও ভিউ সেটিংস ব্রাউজারে মেমরি রাখা

📰 লাইভ নিউজ ফিচার (Live News Features)

• “লাইভ সংবাদ” শিরোনামের নতুন সেকশন
• দুটি RSS ফিড থেকে নিউজ দেখানো: প্রথম আলো (Atom) ও বিবিসি বাংলা (RSS)
• “রিফ্রেশ” ও “অটো-রিফ্রেশ” বাটন (৫ মিনিট পরপর আপডেট)
• ফিড সোর্স সিলেক্টর (প্রথম আলো ও বিবিসি বাংলার মধ্যে পরিবর্তন)
• লাইভ নিউজ কার্ড (সোর্সের লোগো, নিউজ শিরোনাম, সংক্ষিপ্ত বিবরণ, প্রকাশের সময়, ক্যাটাগরি)
• ক্লিক করলে নিউজ আর্টিকেল ইন-অ্যাপ ভিউয়ারে ওপেন হয় (iframe ব্যবহার করে)
• ভিউয়ারে ব্যাক/ফরওয়ার্ড/রিফ্রেশ/বাইরের ব্রাউজারে ওপেনের বাটন
• ভিউয়ারে নিরাপত্তা সূচক (তালা আইকন)
• নিউজ ফিড লোড না হলে ডেমো ডাটা দেখানো
• নিউজ সময় অনুযায়ী “নতুন” “সদ্য” “পুরানো” সূচক

তো বন্ধুরা এই ছিলো মোটামুটি ফিচার।

আরো ভালো করে বুঝার স্বার্থে স্ক্রিনশট গুলি দেখুন।

⬇️ কোড ডাউনলোড করুন

কোডটি ডাউনলোডের জন্য নিচের থেকে যেকোনো একটি লিংকে ক্লিক করুন।

ধন্যবাদ ও বিদায়

আজকের মতো এখানেই শেষ করতেছি। আগামী পর্বে দেখা হবে ইনশাল্লাহ ।

ততক্ষণ ভালো থাকুন সুস্থ্য থাকুন ট্রিকবিডির সাথেই থাকুন ধন্যবাদ।