React + Firebase দিয়ে স্টেপ বাই স্টেপ বানিয়ে ফেলুন সিম্পলের মধ্যে গর্জিয়াস চ্যাটরুম

Image taken from https://medium.freecodecamp.org/react-and-firebase-are-all-you-need-to-host-your-web-apps-f7ab55919f53

ফায়ারবেজ কি?

ফায়ারবেজ হচ্ছে গুগলের একাটি প্ল্যাটফর্ম যা ডেভেলাপারদের অ্যাপ্লিকেশন ডেভেলাপ করার জন্য বিভিন্ন সার্ভিস দিয়ে থাকে, যেমন অথেনটিকেশন, ডেটাবেজ, স্টোরেজ, হোস্টিং, ক্লাউড ফাংশন ইত্যাদি। এক কথায় একটি অ্যাপ্লিকেশন বানাতে যা যা ইনফ্রাস্ট্রাকচার লাগে সবই। ফায়ারবেজ ব্যবহার করে কোন ব্যাকএন্ড ছাড়াই চমৎকার অ্যাপ্লিকেশন বানানো সম্ভব।

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

রিঅ্যাক্ট অ্যাপ

প্রথমেই একটি রিঅ্যাক্ট অ্যাপ শুরু করে নিই। node, yarn, create-react-app ইন্সটল করা না থালে গুগল করে ইন্সটল করে নিন। (yarn যদিও জরুরী না। আমি ব্যাক্তিগতভাবে yarn ব্যবহার করি কারণ লোকাল ক্যাশ ব্যবহার করায় yarn অনেক ফাস্ট আর কম ব্যান্ডউইথ খরচ করে।)

create-react-app fire-adda
cd fire-adda
yarn start

এখন একটি Room কম্পোনেন্ট তৈরী করে নেব। এর স্টেট এ আপাতত থাকবে messages, currentUser। render মেথডে আমরা মেসেজগুলা রেন্ডার করার পাশাপাশি নতুন মেসেজের জন্য একটা ফরম রেন্ডার করব। ফরম সাবমিট করলে স্টেট এর messagges এ নতুন মেসেজ অ্যাড হবে।

components/Room.js

এই কম্পোনেন্টটিকে components একটি ফোল্ডার বানিয়ে Room.js নাম দিয়ে রেখে দেব। এখন App.js এ ইমপোর্ট করে রেন্ডার করব।

App.js

index.css ফাইলটিতে এই স্টাইলগুলো দিয়ে দেব।

index.css

(আমি ডিজাইনে একেবারেই কাঁচা। শুধু মুটামুটি একটা লুক দেয়ার চেষ্টা করলাম)

তাহলে মুটামুটি এমন একটা জিনিস পাওয়া গেল।

এই পর্যায়ে পুরো প্রজেক্টের কোড কি অবস্থায় আছে তা এখানে দেখে নিতে পারেন।

রিয়েলটাইম ডেটাবেজ

ফায়ারবেজের খেলা শুরু করা যাক। এই পর্যায়ে মেসেজগুলো ফায়ারবেজের রিয়েলটাইম ডেটাবেজে সেভ করে রাখব। প্রথমেই একটি নতুন ফায়ারবেজ প্রজেক্ট ক্রিয়েট করেব নিতে হবে। ‍এখান থেকে একটি ফায়ারবেজ প্রজেক্ট তৈরী করে নিই। (প্রথমবার ভিজিট করলে গুগল একাউন্ট সিলেক্ট করতে বলতে পারে।)

প্রজেক্ট ক্রিয়েট করার পর বামের মেনু থেকে Database সিলেক্ট করে একটি রিয়েলটাইম ডেটাবেজ তৈরী করে নিই।

ডেটাবেজ তৈরী করার সময় test-mode সিলেক্ট করে নিতে হবে।

এখন প্রজেক্টে ফায়ারবেজ ইন্সটল করে নেব।

yarn add firebase

প্রজেক্টের src ডাইরেক্টরিতে firebase.js নামে একটি ফাইল তৈরী করে ঐখানে ফায়ারবেজ কনফিগার করে এক্সপোর্ট করব।

config অবজেক্টটি Project settings > Add firebase to your web app থেকে কপি করে নিতে হবে যেখানে প্রত্যেক প্রজেক্টের apiKey, databaseURL ইত্যাদি থকবে।

এখন Room.js এ এই ফাইলটি থেকে ফায়ারবেজ ইমপোর্ট করব।Room কম্পোনেন্টের কন্সট্রাক্টরে ফায়ারবেজ ডেটাবেজের একটি ইন্সট্যান্স তৈরী নেব। তারপর sendMessage মেথডে মেসেজগুলো সেভ করতে হবে।

Room.js এর চেন্জগুলো

ফায়ারবেজের রিয়েলটাইম ডেটাবেজগুলো একেকটা বড় json অবজেক্টের মত। আমরা ঐ অবজেক্টের যেকোন ‘path’ আপডেট বা চেন্জ করতে পারি। এখানে /messages পাথ এ নতুন মেসেজগুলা এড করছি। এজন্য /messages পাথ এর রেফারেন্সে push() কল করার মাধ্যমে একটি নতুন অবজেক্ট রেফারেন্স তৈরী করে নিচ্ছি। তারপর ঐ রেফারেন্সে অবজেক্ট ভ্যালু সেট করে দিচ্ছি।

ডেটাগুলা সেভ হচ্ছে কিনা নিশ্চিত হওয়ার জন্য ফায়ারবেজ কনসোলে ডেটাবেজ সেকশনে দিয়ে দেখে নেয়া যেতে পারে।

এই পর্যায়ে আমরা নতুন মেসেজগুলো ডেটাবেজে শুধু সেভ করছি। এখন মেসেজগুলো ডেটাবেজ থেকে লোড করার ব্যবস্থা করতে হবে। Room এর componentDidMount লাইফসাইকেল মেথডে (যা কম্পোনেন্ট মাউন্ট হওয়ার পর মানে dom এ এড হওয়ার পর কল হয়) এই ব্যবস্থা করব।

Room এ এই মেথডটি এড করে দিতে হবে

এখানে আমরা /messages পাথ এ child_added ইভেন্টের জন্য লিসেনার এড করে দিচ্ছি। মনে যখনই এই পাথে কোন নতুন অবজেক্ট অ্যাড হবে আমাদের লিসেনার কল হবে। লিসেনারে আমরা ভ্যালু নিয়ে স্টেট আপডেট করে দিচ্ছি। child_added এর সুবিধা হল এটি শুধু প্রত্যেকবার নতুন অবজেক্ট অ্যাড হওয়ার সময়ই ট্রিগার হয় না বরং লিসেনার অ্যাড করার সাথে সাথে ঐ পাথের পুরনো সবগুলো অবজেক্ট নিয়েও ট্রিগার হয়।

এখন নতুন একটি উইন্ডোতে অ্যপটি খুলে মেসেজ পাঠিয়ে দেখা যেতে পারে অন্য উইন্ডোতে মেসেজ আসে কি না।

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

এই পর্যায়ে পুরো প্রজেক্টের কোড এখানে পাবেন।

অথেনটিকেশন

অথেনটিকেশন কি? এই পর্যন্ত আমাদের প্রজেক্টের সমস্যা হল সব মেসেজের সেন্ডার হিসেবেই ‘Me’ দেখাচ্ছে। ইচ্ছা করলে একটি টেক্সট ইনপুট দিয়ে ইউজারের নাম নিয়ে সিম্পল একটা সমাধান করা যায়। কিন্তু তাতে করে যে কেউ যে কারো নামে মেসেজ দিতে পারবে। তাই আমাদের প্রত্যেক ইউজার আলাদা আলাদাভাবে চেনা দরকার। সেটাই অথেনটিকেশন। সহজ করে বললে লগইন করার ব্যবস্থাই অথেনটিকেশন। এমনিতে অথেনটিকেশন বেশ একটা ঝামেলার ব্যাপার। তবে ফায়ারবেজ দিয়ে অথেনটিকেশন বেশ সোজা।

প্রথমেই ফায়ারবেজ কনসোল এর অথেনটিকেশন সেকশন থেকে সাইন ইন মেথড সেটআপ করতে হবে।

তারপর সাইন-ইন অপশন থেকে গুগল ইন্যাবল করে দিতে হবে যাতে ইউজাররা গুগল একাউন্ট দিয়ে সাইন ইন করতে পারে। চাইলে অন্যান্য প্রভাইডার বা ইমেইল/ফোনও ইন্যাবল করা যেত। আপাতত শুধু গুগল ই রাখছি।

তারপর প্রজেক্টে ফায়ারবেজ ইউআই প্যাকেজ ইন্সটল করে নিতে হবে।

yarn add firebaseui

এখন App কম্পোনেন্টে দেখতে হবে ইউজার সইনড্-ইন কি না। যদি ইউজার সাইনড্-ইন না হয় তাহলে সাইন ইন করার জন্য আমরা ফায়ারবেজ এর UI দেখাব। আর সইনড্-ইন হলে ইউজারের নাম আর প্রফাইল ফটোর URL currentUser এ রাখব এবং Room রেন্ডার করার সময় প্রপ হিসেবে পাস করে দেব।‌

App.js

আর হ্যাঁ। firebase.js এ firebase/auth ইম্পোর্ট করতে হবে।

firebase.js

এখন Room এর স্টেটে এ currentUser ডিফল্ট ইউজার না দিয়ে প্রপস থেকে পাওয়া ইউজার দেই।

Room এর constructor

Room এর রেন্ডার মেথডে message div এ ইউজারের ফটো এড করে দেই

index.css এ এই স্টাইলগুলো এড করে দেই।

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

ফায়ারবেজ কনসোল থোকে Database > Ruels এ গিয়ে পুরনো রুলগুলো মুছে এই রুলগুলো দিয়ে দেই।

ফায়াবেজের সিকিউরিটি রুলগুলো পাথ অনুসারে দিতে হয়। এখানে আমারা ফায়াবেজের দেয়া দুটি ভ্যারিয়েবল ব্যবহার করছি। auth: কোন ইউজার যখন ডেটাবেজ থেকে ডেটা পড়ার বা লেখার রিকুয়েস্ট করবে এই ভ্যারিয়েবলে ইউজারের অথরাইজেশন ডেটা থাকবে। যেমন uid বা ইউনিক উজার আইডি ইত্যাদি। newData: ইউজার নতুন ডেটা ক্রিয়েট করতে চাইলে যে ডেটা ক্রিয়েট করতে চাইছে সেটা থাকবে এই ভ্যারিয়েবলে। সে কি ডেটা ক্রিয়েট করতে চাইছে সেটা দেখে আমরা পারমিশন দিতে বা ডিনাই করে দিতে পারব।

এই রুলগুলোতে আমরা বলে দিচ্ছি auth এ uid যদি null না হয় তাহলে রুট পাথ এ .read পারমিশন ট্রু হবে। মানে ইউজার যদি সাইন্ড ইন হয় তাহলে যেকোন ডেটা পড়তে পারবে। আর নতুন ডেটার /user/uid যদি auth.uid এর সমান হয় তাহলে .write ট্রু হবে। মানে ইউজার যে নতুন মেসেজ এড করতে চাইছে তার ইউজার অবজেক্টের uid যদি সে যে ইউজার হিসেবে রিকুয়েস্ট করছে তার uid এর সমান হয় তাহলেই পারমিশন পাবে অর্থাৎ সব ইউজার শুধু নিজের নামে মেসেজ পাঠাতে পারবে।

সিকিউরিটি রুলের বিস্তারিত এখানে দেখতে পারেন।

এখন আমাদের ছোট্ট আরেকটা কাজ করতে হবে, যখন স্টেটে কারেন্ট ইউজার রাখছিলাম তখন name photo এর পাশাপাশি uid ও রাখতে হবে।

App এর কন্সট্রাক্টরে onAuthStateChanged লিসেনারে currentUser আপডেট করার সময় ইউজারের uid সহ আপডেট করতে হবে।

এখন ডিপ্লয় করার আগে ছোট্ট দুইটা কাজ করব। (আগেই করা দরকার ছিল। সরি!) child_added লিসেনারের আগে একটা লিমিট সেট করে দেব যাতে শুরুতে লাস্ট দশটা মেসেজ শুধু লোড হয়।

ইনপুটটাতে একটু স্টাইল দেব আর ফন্ট চেন্জ করে Open Sans দেব।

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

হোস্টিং

এমনিতে সাধারণ রিঅ্যাক্ট প্রজেক্ট গিটহাব দিয়েই ডিপ্লয় করা যায়। তবে এই প্রজেক্ট যেহেতু ফায়ারবেজের সার্ভিসগুলো দেখানোর জন্যই করা, তাই এটা ফায়ারবেজ দিয়ে ডিপ্লয় করব।

প্রথমেই ফয়ারবেজের কমান্ডলাইন টুল ইন্সটল করে নিতে হবে।

sudo npm -g install firebase-tools

ফায়ারবেজে লগিন করতে হবে।

sudo firebase login

(পারমিশন সংক্রান্ত ঝামেলা এড়াতে sudo ব্যবহার করছি। যদিও ভাল

তারপর প্রজেক্ট ডাইরেক্টরিতে ফায়ারবেজ কনফিগার করতে হবে।

sudo firebase init

Which Firebase CLI features do you want to setup for this folder? এর জন্য Hosting সিলেক্ট করুন। What do you want to use as your public directory? এর জন্য build দিন।

এবার আমাদের প্রজেক্ট বিল্ড করে ডিপ্লয় করতে হবে।

yarn build
sudo firebase deploy

আমার ডিপ্লয় করা সাইটটি এখানে দেখতে পারেন। আর এখানে পুরো প্রজেক্টটি আছে। প্রত্যেক স্টেপের কোড আলাদা ব্রাঞ্চে দেয়া আছে।

sjsakib/fire-adda