System

Create Small Chat Application using Firebase Realtime Database

 

မဂၤလာပါခင္ဗ်ာ

ကြ်န္ေတာ့္နာမည္ကေတာ့ ေအာင္သီဟ ပါခင္ဗ်ာ။Spiceworks Myanmar မွာ Web Developer Position နဲ႕ဝင္ေရာက္ အလုပ္လုပ္ကိုင္ေနပါတယ္။ဒီ Blog မွာေတာ့ Firebase RealTime Database အသံုးျပဳပံုနဲ႔ပတ္သက္တဲ့ အေျခခံေတြကို Code Demo နဲ႕တကြ ရွင္းျပေပးသြားမွာျဖစ္ပါတယ္။ Firebase ဆိုတာ Google ကေနထုတ္ထားတဲ့ Serverless Platform တစ္ခုပါ။ကြ်န္ေတာ္ ဒီ Blog မွာ Firebase အေျကာင္းထက္ Firebase ရဲ႕ Realtime Database သံုုးပံုကို အဓိကထားပီး ရွင္းျပမွာ ျဖစ္ပါတယ္။ခု Firebase RealTime Database ကိုသံုးပီး Laravel နဲ႕ Small Chat Application ေရးနည္းေလးကို အဆင့္ဆင့္ေျပာျပရင္း ရွင္းျပသြားမွာျဖစ္ပါတယ္။ ပထမဦးဆံုး  https://console.firebase.google.com ကိုသြားပီး Account Register လုပ္ပါ။ Account Register လုပ္ၿပီးပါက Add Project ကိုနွိပ္ပါ။ထပ္မံျဖည့္ရမည့္ Data  မ်ားျဖည့္ပီးပါက Firebase User Dashboard ကိုေရာက္သြားပါလိမ့္မယ္။Dashboard က Get Started by adding Firebase to your app ရဲ႕ေအာက္က တတိယေျမာက္ Icon web create ကို နွိပ္ပါ ျဖည့္ခိုင္းသည့္ Data မ်ားကို ျဖည့္ပါ။Firebase ေပၚမွာ ခုဆို Web အတြက္ Application တစ္ခုတည္ေဆာက္ပီးသြားပါၿပီ။တည္ေဆာက္ပီးသား web application အတြက္ RealTime Database ကိုထပ္မံတည္ေဆာက္ေပးရပါမည္။RealTime Database ကိုတည္ေဆာက္ဖုိ႕အတြက္ Left Menu ရွိ Develop->Database ကို နွိပ္ပါ။ၿပီးရင္ RealTime Database ကိုနွိပ္ပါ။ ေတာင္းထားသည့္ Information မ်ားကိုျဖည့္ပါ။တည္ေဆာက္ၿပီးပါက Rules ကိုနွိပ္ပါ။ Rules ထဲက read and write ကို true ေျပာင္းပါ။ 

Firebase ေပၚမွာ လိုအပ္တာေတြ အကုန္တည္ေဆာက္ၿပီးၿပီဆိုရင္ေတာ့ Firebase ကိုသံုးပီး Laravel မွာ Small Chat Application  စတင္တည္ေဆာက္လို႔ရပါျပီ။

Firebase မွာတည္ေဆာက္ထားတဲ့ Web Application နဲ႕Laravel ကိုအရင္ခ်ိတ္ဆက္ရပါမယ္။ခ်ိတ္ဆက္ဖုိ႕အတြက္ Project Overview -> Project Setting ကိုနွိပ္ပါ။

SDK ခ်ိတ္ဆက္ဖို႕အတြက္ Firebase SDK ထဲက CDN ကို Click ႏွိပ္ၿပီးပါက copy ကူးၿပီး Project Folder ထဲက JavaScript File ထဲသို႕ထည့္ပါ။

View အပိုင္းကို ကြ်န္ေတာ္ကေတာ့ Bootstrap Chat Template တစ္ခုယူသံုးမွာျဖစ္ပါတယ္ခင္ဗ်ာ။ကြ်န္ေတာ္ယူတဲ့ Bootstrap Chat UI Link ကေတာ့ https://bootsnipp.com/snippets/35mvD  ျဖစ္ပါတယ္။

ပထမဦးဆံုးအေနနဲ႕ Data Insert လုပ္တာအရင္ေရးပါမည္။UI ယူသံုးထားတဲ့အထဲမွာပါသည့္ JavaScript newMessage function ကိုပဲယူသံုးထားပါတယ္။

Function အထဲမွာပါတဲ့ auth_user.id နဲ့ receive_id က Laravel Controller ကနေပို့ထားတာပါ။

Database ထဲမွာရွိတဲ့ Data ကိုယူပီး <li> tag နဲ႕ျပန္ျပပါမည္။­

ကြ်န္ေတာ့္ရဲ႕ Chat Demo ကို

https://github.com/johnsmith58/Firebase-ChatApplication-with-Laravel-V-0.1.git link ကယူနို္င္ပါသည္။

ခုလိုအခ်ိန္ယူပီးဖတ္ရႈ၊ ေလ့လာေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *