လွယ်လွယ်ပြောရရင် Myan Chat Support ဆိုတာ ကိုယ့် Website မှာ ကိုယ်ပိုင် Live Chat ထည့်လို့ရအောင် ကျွန်တော် ကိုယ်တိုင် ဆောက်ထားတဲ့ system တစ်ခုပါ။ Website လာကြည့်တဲ့သူက ညာဘက်အောက်ထောင့်က chat bubble လေးကို နှိပ်ပြီး မေးချင်တာ မေးလိုက်၊ ဆိုင်/လုပ်ငန်းဘက်က operator က dashboard ကနေ ပြန်ဖြေလိုက် — အဲဒီလို အပြန်အလှန် စကားပြောလို့ရပါတယ်။
ဆိုင်တစ်ဆိုင်ရဲ့ counter နဲ့ တူပါတယ်။ ဆိုင်ရှေ့မှာ counter ရှိရင် ဝယ်သူက သိချင်တာကို တန်းမေးလို့ရတယ်၊ ဖုန်းဆက်စရာမလို၊ Facebook page ပြေးရှာစရာမလိုဘူး။ Website တွေမှာတော့ အများစုက contact form ပဲ ရှိတယ် — form ဖြည့်ပြီး ပို့ထားလိုက်၊ အီးမေးလ် ပြန်လာမလား မလာဘူးလား စောင့်နေရတယ်။ Live Chat က အဲဒီ counter ကို Website ထဲ ထည့်လိုက်တာပါ။ ဥပမာ စျေးနှုန်း မေးချင်တဲ့ ဝယ်သူတစ်ယောက် page ထဲမှာတင် မေးပြီး အဖြေ တန်းရသွားတာမျိုးပေါ့။
ဘာလို့ ကိုယ်ပိုင် system ဆောက်တာလဲ
Live Chat service တွေ စျေးကွက်မှာ အများကြီး ရှိပါတယ်။ ဒါပေမဲ့ အများစုက လစဉ် subscription နဲ့၊ စကားပြောခန်းတွေက သူတို့ server မှာ သိမ်းထားတာ။ ကျွန်တော်က အဲဒါမျိုး မဟုတ်ဘဲ — ကိုယ့် server ပေါ်မှာ ကိုယ်တင်သုံး၊ data က ကိုယ့်လက်ထဲမှာပဲ ရှိပြီး လစဉ်ကြေး မပေးရတဲ့ ပုံစံ လိုချင်လို့ ဆောက်ဖြစ်တာပါ။ PHP နဲ့ MySQL ပဲ သုံးထားတာမို့ shared hosting လိုမျိုး ရိုးရိုး hosting ပေါ်မှာတောင် တင်လို့ရပါတယ်။
ဧည့်သည်ဘက်က ဘာတွေ ရလဲ
- Account ဖွင့်စရာမလို၊ Facebook login လုပ်စရာမလို — bubble နှိပ်ပြီး တန်းမေးရုံပဲ
- Operator online ဖြစ်ရင် တန်းစကားပြောလို့ရတယ်
- ဘယ်သူမှ မရှိတဲ့အချိန်ဆိုရင် offline message ချန်ထားခဲ့လို့ရတယ် — message က MySQL ထဲ သိမ်းထားပေးပြီး dashboard မှာ ပြန်ပေါ်လာတယ်
- English / မြန်မာ နှစ်ဘာသာ သုံးလို့ရတယ်၊ မြန်မာစာကို Pyidaungsu font နဲ့ Unicode အတိုင်း ပြပါတယ်
Operator ဘက်က Dashboard မှာ ဘာတွေ ပါလဲ
- Overview — အခြေအနေ အကျဉ်းချုပ်နဲ့ နောက်ဆုံး စကားပြောခန်းတွေ
- Live Inbox — အချိန်နဲ့တစ်ပြေးညီ စကားပြောခန်းတွေ ကြည့်ပြီး ပြန်ဖြေတာ၊ operator တစ်ယောက်ကို တာဝန်လွှဲတာ၊ chat ပိတ်တာ
- History — ပြီးသွားတဲ့ စကားပြောခန်းတွေကို နာမည်/အီးမေးလ်နဲ့ ပြန်ရှာတာ
- Offline Messages — လူ့မရှိတဲ့အချိန် ရောက်လာတဲ့ message တွေ
- Quick Replies — /hello လိုမျိုး shortcut နဲ့ အဆင်သင့် အဖြေတွေ
- Operators, Websites & Widget, Settings — operator အကောင့်တွေ၊ widget တင်မယ့် website တွေ စီမံတာ
Website တစ်ခုထက်ပိုပြီး သုံးချင်ရင်လည်း ရပါတယ်။ Website တစ်ခုစီမှာ site key သီးခြား ရှိပြီး widget ကို ခွင့်ပြုထားတဲ့ origin (domain) တွေပေါ်မှာပဲ ပေါ်အောင် စစ်ထားပါတယ် — ခွင့်မပြုထားတဲ့ site က widget ကို ယူထည့်လို့ မရပါဘူး။
လုံခြုံရေးဘက်
- Password ကို hash လုပ်ပြီး သိမ်းပါတယ်၊ အပြည့်အစုံ မသိမ်းပါဘူး
- Login အကြိမ်ရေ ကန့်သတ်ထားတာ၊ form တိုင်းမှာ CSRF စစ်တာ
- Message ပို့တဲ့ rate ကန့်သတ်ထားတာ၊ security header တွေ
- Database ကို PDO prepared statement တွေနဲ့ ဆက်သွယ်ထားပါတယ်
စမ်းကြည့်ချင်ရင်
Server မှာ မတင်ရသေးဘဲ အရင် စမ်းကြည့်လို့ရအောင် GitHub Pages မှာ demo သုံးခု တင်ထားပါတယ်။
- User panel — itsmeminsithu.github.io/Myan-Chat-Support/user.html — ဧည့်သည်ဘက်က chat ကို စာရိုက်ပြီး စမ်းကြည့်လို့ရပါတယ်
- Admin panel — itsmeminsithu.github.io/Myan-Chat-Support/admin.html — operator dashboard ပုံစံ
နည်းလမ်းကောင်းတာက browser tab နှစ်ခု ဖွင့်ပြီး တစ်ခုမှာ user panel၊ တစ်ခုမှာ admin panel ထားကြည့်တာပါ။ User ဘက်က ပို့လိုက်တဲ့ စာက admin ဘက်မှာ ပေါ်လာပြီး admin ဘက်က ပြန်ဖြေရင်လည်း user ဘက်မှာ ပေါ်လာပါတယ်။ တစ်ခုတော့ ရိုးရိုးသားသား ပြောထားပါမယ် — demo က browser ထဲမှာပဲ run နေတာပါ၊ နောက်ကွယ်မှာ server မရှိဘူး၊ စာတွေက ဘယ်ကိုမှ မပို့ပါဘူး။ User panel က အဖြေတွေက အလိုအလျောက် ပြန်တာပါ။ အစစ်အမှန် system က PHP/MySQL server ပေါ်မှာ run မှ လူကိုယ်တိုင် ပြန်ဖြေတဲ့ ပုံစံ အလုပ်လုပ်တာပါ။
ကိုယ့် server မှာ တင်သုံးချင်ရင်
- Docker ရှိရင် project folder ထဲမှာ ./scripts/start-mac.sh run ပြီး browser မှာ http://localhost:8088 ဖွင့်ရုံပဲ
- Hosting ပေါ် တင်မယ်ဆိုရင် PHP 8.4 (PDO MySQL extension ပါတာ) နဲ့ MySQL 8.4 လိုပါတယ်
- File တွေ တင်ပြီးရင် install.php ကို တစ်ကြိမ် ဖွင့်ပြီး setup ပြီးသွားရင် အဲဒီ file ကို ပြန်ဖျက်ထားရပါမယ်
- WordPress site ဆိုရင် ပါပြီးသား widget plugin ကို တင်လိုက်တာနဲ့ widget ပေါ်လာပါတယ် — dashboard က သီးခြား တင်ရတာပါ
လက်ရှိအဆင့်နဲ့ ရိုးရိုးသားသား ပြောရရင်
အခု version က 1.0.2 ပါ။ GitHub မှာ source အပြည့်အစုံ၊ test လုပ်ပုံလမ်းညွန် (TESTING.md) အပါအဝင် တင်ထားပါတယ်။ Hosted service မဟုတ်ပါဘူး — ကိုယ့် server ကိုယ်ရှာပြီး ကိုယ်တင်သုံးရတဲ့ self-hosted ပုံစံပါ။ ငွေပေးချေမှု လုပ်ဆောင်ချက်မျိုး ဒီ project မှာ မပါပါဘူး၊ chat system သက်သက်ပါပဲ။
နိဂုံး
Website ဆိုတာ brochures ကြီး တစ်ခုလို ရပ်နေဖို့ မဟုတ်ပါဘူး။ လာကြည့်တဲ့သူ မေးချင်တဲ့အချိန် တန်းမေးလို့ရတဲ့ counter လေး တစ်ခုရှိရင် ဆိုင်နဲ့ ဝယ်သူကြားက အကွာအဝေး တော်တော် နီးသွားပါတယ်။ Myan Chat Support က အဲဒီ counter လေးကို ကိုယ့်လက်ထဲမှာပဲ ထားလို့ရအောင် ဆောက်ထားတာပါ။
Source code အပြည့်အစုံကို GitHub မှာ MIT License နဲ့ ကြည့်နိုင်ပါတယ် — github.com/itsmeminsithu/Myan-Chat-Support။ စမ်းသုံးကြည့်ပြီး အကြံပြုချက် ရှိရင် ပြောပြပေးပါ။ နောက်ပိုင်း update တွေ ရှိလာရင်လည်း My Project Overview tag အောက်မှာပဲ ဆက်ရေးသွားပါမယ်။ 👋
