Understanding the Development Stages for Production-Level Software Updates🚀

ကျနော်တို့ software တခုကို သုံးတဲ့အခါ update တွေပေးရင် update လေးတင်ပြီး သုံးကြတာမျိုး လုပ်ဖူးကြမယ်လိုယူဆပါတယ်။ ဒီ update တခုစီကို
ကျနော်တို့ Developer တွေအနေနဲ့ တခြားသူတွေနဲ့ ပေါင်းပြီး feature တွေရေးတဲ့အခါမှာ Project Management Tool တွေနဲ့ စနစ်တကျ အဲ့ဒီ feature ကို end user တွေလက်ထဲ အကောင်းမွန်ဆုံးရောက်အောင် ပို့ပေးမို့ တွက် ဒီလို development stage လေးတွေနဲ့သွားကြပါတယ်။ update တခု မထွက်ခင်မှာ sprint တခုအနေနဲ့ timeline တခုသတ်မှတ်ထားပြီး အရင်ဆုံး ဒီ sprint မှာ ဘာတွေထည့်ကြမလဲဆ်ိုတာ သတ်မှတ်ကြပါတယ်။ အသစ်ထည့်မယ့် idea တွေကို စုပြီး ရွေးလို့ရအောင်သိမ်းထားတဲ့ နေရာက backlog လို့ခေါ်တဲ့ထဲမှာသိမ်းထားကြတာပဲဖြစ်ပါတယ်။

backlogs😎

Backlog ဆိုတာ idea တွေ အဓိက စရှိနေတဲ့ နေရာဖြစ်ပါတယ်။ ကိုယ့် user တွေ request လုပ်ထားတဲ့ feature တွေထပ်ထည့်ပေးမို့ စီစဉ်ထားတာတွေ အများစုကို ဒီ backlog ထဲမှာ စုထားကြတာပဲဖြစ်ပါတယ်။ ဒီထဲကနေမှ update တခုမှာထည့်ပေးချင်တဲ့ ticket or task လေးတွေကို ရွေးထုတ်ပြီး developer တွေကို ဘယ်သူကတော့ ဘာလုပ်ဆိုပြီး assign စချရပါတယ်။

Working on🔥

နောက်တဆင့်ကတော့ developer တယောက်က ticket ကို စကိုင်ပြီဆိုရင် working on ထဲထည့်ရပါတယ်။ တချို့ company တွေမှာဆိုရင် Jira နဲ့ Github ပေါင်းပြီး integration setup လေးတွေနဲ့ automate လုပ်ပေးထားတတ်ကြပါတယ်။ ဥပမာ- developer ဘက်က ticket တခုရဲ့ name ကို branch name ပေးတဲ့ အခါ သူတို့သတ်မှတ်ထားတဲ့ စည်းကမ်းတိုင်းပေးပြီး push လုပ်လိုက်တာနဲ့ ကိုယ့် ticket က backlog ကနေ working on ထဲရောက်သွားတာမျိုးလေးတွေပါ။

Ready to review🧑‍💻

ကိုယ့် ticket က အကုန်ပြီးသွားပြီဆိုရင် team ထဲက တခြား developer တွေကို code review တောင်းရတဲ့ အဆင့်ဖြစ်ပါတယ်။ ကိုယ့် code က business logic တခုခု ကိုထိခိုက်သွားနိုင်လား၊ refactor လုပ်သင့်လားဆ်ိုတာလေးတွေကို စစ်ပေးပြီး အချင်းချင်း ပိုကောင်းတဲ့ quality ticket ရအောင်လုပ်ပေးတဲ့ stage ဖြစ်ပါတယ်။ တချို့ company တွေမှာတော့ review ကို first round, second round ၂ကြိမ်ထိလုပ်ခိုင်းတတ်ကြပါတယ်။

Ready to merge🎉

ဒီအဆင့်ကတော့ ကိုယ်လုပ်ထားတဲ့ ticket ကိုတခြား team ထဲက developer ၁-၂ ယောက်က စစ်ဆေးပေးပြီးသွားရင် ရောက်တဲ့ stage ပဲဖြစ်ပါတယ်။

Ready To Test (QA)🐒

ဒီနေရာမှာတော့ တချို့ system ကျတဲ့ company တွေက ကျနော်တို့ ticket ရဲ့ pull request ကို သီးသန့် စမ်းနိုင်မဲ့ Deploy လုပ်ထားတဲ့ link လေးထွက်လာအောင် pipeline လုပ်ထားတာမျိုးတွေရှိကြပါတယ်။ အဓိကတော့ ဒီ stage မှာ QA tester က ဒီ ticket က တကယ် user တွေလက်ထဲသွားလို့ရပြီလားဆိုတာကို ရှယ်စမ်းတဲ့ stage ပါ။ အဆင်မပြေရင် working on ထဲပြန်ပို့ပါတယ်။ ပြေရင်တော့ Staging server ပေါ်ပေးတင်ကြပါတယ်။ qa နဲ့ developer ဘောလီဘောပုတ်တဲ့ stage လို့ပြောလဲရပါတယ်😂

Staging💻

ဒီအဆင့်ကတော့ ကျနော်တ်ို့ရဲ့ ticket ကို Tester စမ်းပြီးတဲ့အခါ staging server ပေါ်တင်ပေးတဲ့ အဆင့်ဖြစ်ပါတယ်။ အများစုကတော့ ဒီ stage မှာ ဒီ ticket ကိုကိုင်ထားတဲ့ developer က နောက်ဆုံး တကြိမ် production မသွားခင် ထပ်စမ်းပြီး confirm လုပ်ပေးရတဲ့ stage ဖြစ်ပါတယ်။

Ready to promote✨

ဒါကတော့ လုံးဝ release လုပ်မို့ ready ဖြစ်တဲ့ အဆင့်ပါ။ ရှေ့မှာ code review တွေလဲ ၂ ယောက်လုပ်ခဲ့သလို QA ရော ကျနော်တို့ developer ကိုယ်တ်ိုင်ရော ရှယ်စမ်းပြီး ready ဖြစ်တဲ့ အခြေနေရောက်တဲ့ အဆင့်ဖြစ်ပါတယ်။

Production🚀

ဒါကတော့ တကယ် end user တွေလက်ထဲရောက်သွားတဲ့ အချိန်ပဲဖြစ်ပါတယ်။

ကယ် ဒီလောက်ဆိုရင်တော့ ကျနော်တို့ လက်တွေ့မှာ run နေတဲ့ app တွေဟာ ဒီတ်ိုင်းလေး ရေးလိုက် ကောက်တင်လိုက် သွားတာမဟုတ်ပဲ အခုလို development stage လေးတွေနဲ့ စနစ်တကျ သွားကြတာကိုမြင်မဲ့လို့ယူဆပါတယ်။ အထူးသဖြင့် system ကျတဲ့ foreign company တွေမှာ အသုံးများကြပါတယ်။ ကျနော်တ်ို့ local မှာတော့ အများစုက error တက်ရင် server ပေါ်တက် code တွေတန်း ဝင်ပြင်ကြတာမျ်ိုးလေးတွေလုပ်နေကြတာတွေလဲရှိပါတယ်။

ဘာဖြစ်ဖြစ် ဒီလိုလေးတွေရှိတာသိထားရင် အလုပ်ဝင်တဲ့ အခါ အသုံးဝင်ကြမယ်လို့ယူဆပါတယ်ခင်ဗျာ။❤️

Developer တို့အတွက် Javascript Testing Framework များ

=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°

Developer ရယ်လို့ဖြစ်လာရင် Testing Framework တွေနဲ့ဝေးကွာရတယ်လို့မရှိပါဘူး။

Testing Framework တွေဟာ Developer တွေ အတွက် Code တွေကို run တဲ့အခါ အမှားအယွင်းမပါဘဲ run နိုင်အောင် ကူညီပေးပါတယ်။

ဒီနေ့မှာတော့ JavaScript ရဲ့ Testing Framework တွေကိုပြောပြပေးသွားမှာဖြစ်ပါတယ်။

👉 Jest ကတော့ Facebook ကနေ Develop လုပ်ထားတဲ့ testing Framework တစ်ခုပဲဖြစ်ပါတယ်။
သူ့မှာ 📝 Built-in assertion library
📝 Mocking support
📝 Snapshot testing
📝 Coverage Report
တွေပါ၀င်ပြီး react application တွေနဲ့ general JavaScript testing တွေအတွက်အသုံး၀င်ပါတယ်။

👉 Karma ကတော့ AngularJS Team ကနေ develop လုပ်ခဲ့တဲ့ test runner တစ်ခုပဲဖြစ်ပါတယ်။

📝 Multiple Browsers and testing framework
📝 Continuous Integration (CI) support
📝 File Watching တို့ပါ၀င်တာကြောင့် မတူညီတဲ့ device တွေ ၊ browser တွေအပေါ်မှာ run ဖို့သင့်တော်ပါတယ်။

👉 Cypress ကတော့ debug test တွေအတွက် end-to-end testing framework တစ်ခုပဲဖြစ်ပါတယ်။
📝 Time-travel debugging
📝 Real-time reloads နဲ့
📝 Automatic waiting တွေပါ၀င်တာကြောင့် modern web application တွေမှာ အသုံးပြုကြပါတယ်။


အခြား Testing Framework တွေအများကြီးထဲကမှ သုံးခုကိုထုတ်နှုတ်တင်ပြထားပါတယ်။

Testing Framework တစ်ခုကိုရွေးချယ်ဖို့အတွက်ဆိုရင်တော့ ကိုယ်က frontend သုံးမှာလား backend သုံးမှာလား cross-broswer support အတွက်လားဆိုတာ ပေါ်မူတည်ပြီး ရွေးချယ်ရမှာဖြစ်ပါတယ်။

Developer ကြီးတို့ကရော ဘယ်လိုမျိုး testing framework တွေကိုရွေးချယ်ပြီးအသုံးပြုကြလဲဆိုတာ comment မှာပြောပေးသွားကြပါဦးနော် 👀💬

#creative_coder_myanmar

ကယ် Web Development Field ထဲကို အခြေခိုင်ပြီး သေချာပိုင်နိုင်စွာနဲ့ လဲ ဝင်ချင်တယ်။ Design ကနေ Code ကို သေချာ စနစ်တကျရေးတတ်ချင်တယ်။ Animation တွေသေချာစဉ်းစား ရေးတတ်လိုတယ်ဆိုရင် ဒီလို ကိုယ် စာလုပ်ရင်းလိုအပ်ရင် One by one mentorship ပါပေးတဲ့ အတန်းမတက်ရင် ဘယ်အတန်းတက်မလဲပြော😎🚀

User တွေရဲ့ Device Type ကိုခန့်မှန်းနိုင်မယ့် Developer တွေအတွက်အသုံး၀င်ဆုံး function တစ်ခု

User တွေရဲ့ browser နဲ့ operating system ကိုခန့်မှန်းလို့ရနိုင်မယ့် function လေးကတော့
detectDeviceType function လေးပဲဖြစ်ပါတယ်။

သူ့မှာ userAgent ဆိုတဲ့ string တစ်ခုပါ၀င်ပြီး သူကနေပြီးတော့ specific ဖြစ်တဲ့ keyword တွေနဲ့အတူ ဘာ device အမျိုးအစားလည်းဆိုတာကို return ပြန်ပေးပါတယ်။
“mobile” အမျိုးအစားဆိုရင် mobile လို့ return ပြန်ပေးပြီး “tablet”, “ipad” , “playbook” နဲ့ “silk” တို့ဆိုရင်တော့ tablet လို့ return ပြန်ပေးပါတယ်။ အခြားဟာတွေဆိုရင်တော့ desktop လို့ပြန်ပေးပါတယ်။

Code Example လေးကတော့

function detectDeviceType() {
const userAgent = navigator.userAgent.toLowerCase();
if (/mobile/i.test(userAgent)) {
return 'mobile';
} else if (/tablet|ipad|playbook|silk/i.test(userAgent)) {
return 'tablet';
} else {
return 'desktop';
}
}

// Usage
const deviceType = detectDeviceType();
console.log('Current device type:', deviceType);

ပဲဖြစ်ပါတယ်။

ဒီမှာဆိုရင် ပထမဆုံး get user agent ကိုသုံးထားပြီး string တွေကို lowercase ကိုပြောင်းပေးပါတယ်။

const userAgent = navigator.userAgent.toLowerCase();


ပြီးရင်တော့ mobile ဆိုတဲ့စကားလုံးပါလားဆိုတာ စစ်ဆေးပါတယ်။

နောက်တစ်ဆင့်ကတော့ tablet type ကိုစစ်ဆေးပြီး နောက်ဆုံးအဆင့်မှာ default အနေနဲ့ desktop ကိုထားလိုက်ပါတယ်။
if (/mobile/i.test(userAgent)) {
return 'mobile';
}

else if (/tablet|ipad|playbook|silk/i.test(userAgent)) {
return 'tablet';
}

else {
return 'desktop';
}



အသုံးပြုပုံကတော့ device type ကိုခန့်မှန်းဖို့ function ကို define လုပ်လိုက်ရုံပဲဖြစ်ပါတယ်။

const deviceType = detectDeviceType();
console.log('Current device type:', deviceType);


ဒီ function လေးက user device or browser ပေါ်မူတည်ပြီး customized feature တေွကို ရေးသားတဲ့နေရာ မှာအသုံးဝင်တဲ့ function လေးဖြစ်လို့ စမ်းသုံးကြည့်ကြဖို့လည်း မမေ့နဲ့နော် Developer ကြီးတို့ရေ👀💬

#creative_coder_myanmar

JavaScript လေ့လာသူတွေအကြိုက်တွေ့စေမယ့် Udacity ရဲ့ JavaScript Course

=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°

JavaScript ကိုလေ့လာနေတဲ့ Developer တွေအတွက် အခြေခံပိုင်နိုင်စေဖို့ Course လေးတစ်ခုနဲ့ မိတ်ဆက်ပေးချင်ပါတယ်။

ဒီ course လေးကအခြေခံကို လက်တွေ့ exercise တွေနဲ့ သင်ကြားပေးသွားမှာပဲဖြစ်ပါတယ်။ သေချာပြင်ဆင်ထားတဲ့ သင်ခန်းစာတွေအပြင် သူ့မှာပါတဲ့ quiz တွေကလည်း သင်ယူခဲ့တာတွေကို reflect ဖြစ်စေမှာပါ။

Course Outline လေးတွေအနေနဲ့ဆိုရင်တော့
👉 What is JavaScript?
👉 Data Types & Variables
👉 Conditionals
👉 Loop
👉 Functions
👉 Arrays
👉 Objects

စတဲ့ အခြေခံတွေပါ၀င်ပါတယ်။

ဒီ course လေးကို အခမဲ့တက်ရောက်နိုင်တာကြောင့် အခုပဲသွားပြီး enroll လုပ်လိုက်တော့နော် 👀💬

ဒီ link လေးကနေသွားပြီး enroll လုပ်နိုင်ပါတယ်။

https://www.udacity.com/course/intro-to-javascript--ud803

#creative_coder_myanmar
#javscript

Developer တစ်ဦးအဖြစ် သင့်ရဲ့ အိမ်မက်ကို အကောင်အထည်ဖော်လိုပါက အခုပဲအတန်းအပ်လိုက်ပါ 👉💬

Creative Coder ရဲ့ Web Development Foundation အတန်းမှာဆိုရင် အခြေခံကနေစတင်ပြီး Framework ကိုအသုံးပြုတတ်အောင်အထိ အစအဆုံး Project တွေနဲ့ သင်ကြားပေးသွားမှာဖြစ်ပါတယ်။

Early Bird Discount လေးလည်းရှိနေတာကြောင့် အတန်းမြန်မြန်လာအပ်မှ စိတ်ချရမယ်နော် 👀

#creative_coder_myanmar

Developer တိုင်းသိထားသင့်တဲ့ Static & Dynamic Website 
=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°

Website တစ်ခုကိုတည်ဆောက်နေတဲ့ Developer ကြီးတို့ သိထားသင့်တာ‌တွေက တစ်ခုဖြစ်တဲ့ static & dynamic website တွေအကြောင်းကိုပြောပြပေးသွားမှာ ဖြစ်ပါတယ်။

Static Website တွေကိုအလွယ်ပြောရမယ်ဆိုရင် အမြဲပုံသေ အကြောင်းအရာတစ်ခုကိုသာတင်ပြထားတဲ့ Website တစ်ခုဖြစ်ပါတယ်။

Static Website တွေကိုများသောအားဖြင့် HTML, CSS အပြင် JavaScript နဲ့တည်ဆောက်ထားကြပါတယ်။ content တစ်ခုတည်းသာပါရှိတာကြောင့် loading ပိုမြန်ပြီး host လုပ်လို့လည်းလွယ်ကူပါတယ်။

ဥပမာ အနေနဲ့ personal blog တွေ၊ landing page တွေဟာ static website တွေဖြစ်ကြပါတယ်။

Dynamic Website တွေကတော့ user actions & performance တွေပေါ်လိုက်ပြီး အမြဲပြောင်းလဲမှုတွေပြုလုပ်နေတဲ့ website ပဲဖြစ်ပါတယ်။ မြင်သာအောင်ပြောရရင် ကျွန်တော်တို့ Creative Coder Myanmar website ဟာလည်း Dynamic Website ပဲဖြစ်ပါတယ်။ 

Dynamic Website တွေကိုတော့ HTML, CSS, Javascript အပြင် PHP, Python, Ruby, or ASP.NETတွေနဲ့တည်ဆောက်ကြပါတယ်။ user တွေနဲ့ အများဆုံး interact လုပ်ရတဲ့ website တွေဖြစ်တာကြောင့် cost တွေ၊ maintenance တွေရှိနိုင်ပါတယ်။ 

ဥပမာအနေနဲ့ကတော့ Amazon နဲ့ Facebook တို့လို website တွေဖြစ်ပါတယ်။

အခြား developer ကြီးတွေသိသွားအောင်လည်း မျှဝေပေးသွားပါဦးနော် 👀

#creative_coder_myanmar

WDF ကျောင်းသား၊ ကျောင်းသူတို့ရဲ့စကားသံများ 📝

Creative Coder မှာ Web Development ကိုအခြေခံကနေစပြီး သင်ယူခဲ့ကြတဲ့ ကျောင်းသား၊ ကျောင်းသူတွေက သူတို့ရဲ့အတွေ့အကြုံကို အခုလိုပဲပြောပြလာခဲ့ပါတယ် 👇

Batch (6) ကလည်း July (27) ရက်နေ့မှာ စတင်သွားမှာဖြစ်တဲ့အတွက် စိတ်ပါ၀င်စားသူတွေအနေနဲ့ page messenger မှာ အတန်းလေးကို စုံစမ်းမေးမြန်းပြီး အပ်နှံနိုင်ပါပြီ။


#creative_coder_myanmar