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

S.j. Sakib
Sep 8, 2018 · 7 min read

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

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

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

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

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

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

Image for post
Image for post
components/Room.js

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

Image for post
Image for post
App.js

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

Image for post
Image for post
index.css

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

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

Image for post
Image for post

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

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

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

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

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

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

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

Image for post
Image for post

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

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

অথেনটিকেশন

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

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

Image for post
Image for post

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

Image for post
Image for post

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

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

Image for post
Image for post
App.js

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

Image for post
Image for post
firebase.js

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

Image for post
Image for post
Room এর constructor

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

Image for post
Image for post

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

Image for post
Image for post

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

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

Image for post
Image for post

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

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

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

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

হোস্টিং

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

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

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

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

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

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

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

Image for post
Image for post

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

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে

Sign up for প্রোগ্রামিং-পাতা

By প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে আমাদের পথচলা।  Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

S.j. Sakib

Written by

প্রোগ্রামিং পাতা
S.j. Sakib

Written by

Amateur programmer, writer, caveman.

প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে