Fawkes Creatives

Fawkes Creatives we study, we try, we share

Project တွေ development လုပ်ရင်ပဲဖြစ်ဖြစ်၊ နည်းပညာအသစ်တစ်ခုကို စလေ့လာမှာ၊ သုံးမှာပဲဖြစ်ဖြစ် အဓိက အကျဆုံး သော့ချက်တစ်ခုက ...
28/03/2023

Project တွေ development လုပ်ရင်ပဲဖြစ်ဖြစ်၊ နည်းပညာအသစ်တစ်ခုကို စလေ့လာမှာ၊ သုံးမှာပဲဖြစ်ဖြစ် အဓိက အကျဆုံး သော့ချက်တစ်ခုက ပြဿနာ (သို့) Business ဘက်ကနေ ရှုမြင်ပြီး အဲ့ဒီ ပြဿနာကို အစိတ်စိတ်အမွှာမွှာ ခွဲခြားမြင်တတ်ဖို့ပါပဲ၊​ ဒီကိစ္စတွေကတော့ ဒီ function တွေလုပ်ရမှာ၊ ဒီဟာတွေကတော့ နောက် function တစ်ခုထပ်ခွဲရလိမ့်မယ်ဆိုပြီးတော့ပေါ့ဗျာ …

ဥပမာ ကျနော်က ကိုယ်မလုပ်ဖူးသေးတဲ့ frontend နည်းပညာတစ်ခုကို စလေ့လာတော့မယ်ထားပါတော့၊ ဒါဆိုရင် developer တစ်ယောက်အနေနဲ့ app တစ်ခုကို ကောင်းကောင်းထိန်းချုပ်ဖို့ လုပ်ရမဲ့ root category တွေ ပြဿနာတွေကို ခွဲပြီးသတ်မှတ်ရပါတော့မယ်၊ အဲ့လို ပြဿနာကို ခွဲခြမ်းစိတ်ဖျာပြီး မလေ့လာဘူးဆိုရင် google က တွေ့သမျှ Blog တွေ၊ Youtube က Tutorial တွေ တစ်ခုပြီး တစ်ခုလုပ်ပြီး ဘာတစ်ခုမှ ကိုယ့်အိတ်ထဲရောက်မလာပဲ ရွာလည်နေပါလိမ့်မယ်၊

ပြီးတော့ ငါရေးတာတွေက ဟုတ်ရောဟုတ်ရဲ့လားဆိုတဲ့အတွေးတွေ တွေးမိနေပါလိမ့်မယ်၊ ပြဿနာတွေကို ပိုင်ပိုင်နိုင်နိုင် မခွဲခြမ်းနိုင်သရွေ့ project တွေ ဘယ်နှစ်ခုပဲ copy paste လုပ်ပြီး ပြီးသွားပြီးသွား ၊ ငါရေးတာတွေ ဟုတ်ရောဟုတ်ရဲ့လားဆိုတဲ့မေးခွန်းကနောက်ကလိုက်နေအုံးမှာပါ၊
ဟုတ်ပြီ အဲ့တော့ ကျနော်တို့ စလေ့လာမယ်ဆို ဘယ်လိုခွဲမလဲ - အကြမ်းဖျဥ်းခွဲရမယ်ဆိုရင်
Api တွေကို fetch လုပ်ဖို့အတွက် Api call management ရှိမယ်ဗျာ
အဲ့ဒီ api ကနေထွက်လာမဲ့ response တွေအပြင် error တွေကို Handling လုပ်တဲ့အပိုင်း ရှိမယ်ဗျာ(ထပ်ခွဲရင် ဘယ် error က project တစ်ခုလုံးနဲ့ သက်ဆိုင်တာလဲ၊ ဘယ် error က api တစ်ခုချင်းစီနဲ့ သက်ဆိုင်တာလဲဆိုပြီးထပ်ရှိတာပေါ့၊ အသေးစိတ်ခွဲနိုင်လေ၊ ပြန်ခြုံ့ပြီး စဥ်းစားနိုင်လေ ပိုစနစ်ကျတဲ့ project structure တစ်ခုထွက်လေပါပဲ)

ပြီးသွားရင် route management တွေရှိမယ်ဗျာ
ပြီးသွားရင် state management တွေဘယ်လိုလုပ်လဲဆိုတာတွေရှိမယ်ပေါ့ဗျာ၊ … ဒါတွေက ခေတ်သစ် frontend development မှာ အမြဲလို ပါလေ့ရှိတဲ့အရာတွေပါပဲ၊ etc …. ဒီလိုမျိုး အပိုင်းလိုက် အကန့်လိုက်ခွဲပြီး tutorial တွေလိုက်ကြည့် သူများခွက်ထဲကဟာတွေကို ကိုယ်စနစ်တကျ ပုံစံချထားတဲ့ ခွက်ထဲထည့်နိုင်ပါမှ ကိုယ်ရေးတဲ့ code တွေအပေါ် ကိုယ့်ဖာကိုယ်ယုံကြည်မှုရှိပြီး မဝေဝါးတော့မှာပါ၊
စလေ့လာတဲ့အချိန်ကနေ လေ့ကျင့်လာတဲ့ ပြဿနာတွေကို ခွဲခြမ်းစိတ်ဖြာတတ်တဲ့အလေ့အကျင့်က project တွေရေးတဲ့အခါမှာလည်း modularize structure တွေဖြစ်အောင် တည်ဆောက်တတ်သွားပါလိမ့်မယ်၊
ဒီကိစ္စတွေကတော့ လုပ်ရမဲ့ project ရဲ့ feature module တွေဖြစ်တယ်၊
ဒီဟာတွေကတော့ App နဲ့သက်ဆိုင်တဲ့ core module တွေဖြစ်တယ်၊
ဒီဟာတွေကတော့ config နဲ့ဆိုင်တဲ့ အပိုင်းတွေဖြစ်တယ်၊
ဒီဟာတွေကတော့ data နဲ့ function တွေနဲ့ ချိတ်ဆက်မဲ့ model တွေဖြစ်တယ်၊
ဒီဟာတွေကတော့ api ခေါ်ဖို့သက်ဆိုင်တာတွေ၊ api error handle လုပ်ဖို့သက်ဆိုင်တာတွေဆိုပြီးတော့ ဖြစ်ပါတယ်၊
Project development လုပ်တဲ့အခါမှာ ကျနော်တို့တွေ ခနခနလုပ်လေ့ရှိတာက ပြဿနာဘက်ကနေရှင်းဖို့မကြိုးစားပဲ code ဘက်ကနေပဲ မြင်ပြီး ၊ code ကနေပဲရှင်းနေတာပါ၊
ဥပမာ - ဟိုးအရင်က Java နဲ့ရေးရင် တစ်နေရာက ဒေတာအပြောင်းအလဲကို တစ်နေရာကချက်ချင်း update သိဖို့ override တွေ implement တွေ တသီကြီးရေးရပါတယ်၊ အဲ့ဒီကနေမှ android native ဖက်မှာ ပြဿနာဘက်ကနေမြင်လိုက်တဲ့အခါမှာ၊ View Model ဆိုတဲ့ Pattern ဖြစ်လာပါတယ်၊ Dart တို့ Flutter တို့လို Modernize ဖြစ်တဲ့ language တွေမှာတော့ Stream ဆိုပြီး ဖြစ်လာတယ်ပေါ့ဗျာ၊ code only အမြင်ဘက်ကနေ လိုအပ်ချက်ပြသနာကိုလိုက်ပြီး တဖြည်းဖြည်းနဲ့ ဘာ package တွေ, pattern တွေက ကိုယ်နဲ့သင့်တော်လဲဆိုတာ လည်းရှာတတ်လာတာပေါ့ဗျာ၊
နောက်ထပ်ဥပမာတစ်ခုက android native မှာ screen တစ်ခုနဲ့ တစ်ခုကြား pass လုပ်ဖို့၊ Intent တွေ Bundle တွေကနေ စပြီး သုံးခဲ့ရတယ်ပေါ့၊ flutter ဘက်ရောက်တဲ့အချိန်မှာလည်း route ကနေ ဘယ်လိုပုံစံ argument တွေထည့်ပေးမလဲဆိုတဲ့ ကိစ္စက လိုက်ရှုပ်တုန်းပေါ့၊
တကယ်တော့ ဒီပြဿနာရဲ့ key point က တစ်ဖက်ကပေးချင်တဲ့ data ကို တစ်နေရာမှာ ခနသိမ်းထားပြီး တစ်နေရာကနေယူလိုက်ရင်ရပြီမဟုတ်လား၊ဒီလို data မျိုးက stream နဲ့ watch လုပ်စရာလဲမလိုဘူးလေ၊ အဲ့ဒီတော့ ကျနော်တို့က လည်ရင်လည်သလို တခြား temporary storage ထဲမှာ သိမ်းထားလို့လည်းရတာပဲလေ၊ screen တစ်ခုနဲ့တစ်ခုကူးရင် ဒီလို data pass လုပ်ပါလို့ documentation ထဲမပါပေမဲ့ ကျနော်တို့က ပြဿနာကိုရှုမြင်တတ်ရင် ကျနော်တို့အတွက် အဆင်ပြေမဲ့နည်းလမ်းမျိုးနဲ့သုံးနိုင်ဖို့အရေးကြီးတာပါပဲ၊ coding ဘက်က အခြေခံသဘောတရားတွေကို အပေါ်စီးက‌‌ေနနားလည်ဖို့လိုသလို ပြသနာက ဘာလုပ်ချင်တာလဲ ဖြေရှင်းဖို့ ဘာတွေလိုအပ်တာလဲဆိုတဲ့အချက်တွေပါသိထားရင် ကိုယ်ရေးတဲ့ project လည်း timeline save ဖြစ်ပြီး၊ ကိုယ့်ရဲ့ development environment လည်း ပိုကောင်းမွန်လာမှာပဲဖြစ်ပါတယ်။

Programmer စလုပ်ဖို့ညီအကိုတွေလာလာမေးကြတာရှိတယ်၊ Zero ကနေ ဘယ်လိုစရမလဲ လာလာမေးကြတယ်၊ ဒီအချိန်မှာ သင်တန်းတွေကလည်း ပွထနေတော့...
21/06/2022

Programmer စလုပ်ဖို့ညီအကိုတွေလာလာမေးကြတာရှိတယ်၊ Zero ကနေ ဘယ်လိုစရမလဲ လာလာမေးကြတယ်၊
ဒီအချိန်မှာ သင်တန်းတွေကလည်း ပွထနေတော့ သင်တန်း page တွေပြပြီး ဒီသင်တန်းတက်သင့်လား ၊ကောင်းလား ဆိုပြီးလာမေးကြတယ်၊ ၁၀၀၀၀၀ ကနေ ၅၀၀၀၀၀ လောက်အထိ အတန်းတွေ တွေ့ရတယ်၊

ကိုယ့်အယူအဆအရပြောရရင် စစချင်း Zero အနေအထားအတွက် ဘာသင်တန်းမှမတက်စေချင်ဘူး၊ Computer Science Knowledge တွေ၊ Information Architecture Knowledge တွေ၊ Logical Thinking တွေအလေ့အကျင့်ဖြစ်အောင် ၊ ပြဿနာကို အပိုင်းပိုင်းခွဲပြီး စဥ်းစားတတ်အောင် ၊ Googling အားကောင်းအောင် အရင်လုပ်စေချင်တယ်၊ အဲ့လိုမျိုးအတွက် အနီးစပ်ဆုံး Guideline ကတော့ Harvard က သင်ပေးတဲ့ CS50 လို program မျိုးပဲ၊ အခမဲ့လည်းရသလို အများကြီးလည်း အကျိုးရှိတယ်၊

program ရေးတဲ့အခြမ်းကဆိုရရင်တော့ code.org လို အလွယ်တကူ code ရေးတဲ့နေရာမျိုးမှာ သူ့ guideline အတိုင်း လိုက်ရေးကြည့်ပြီး code ရေးတာရဲ့ အခြေခံ သဘောတရားနဲ့ အလေ့အကျင့်တွေကို လေ့ကျင့်သင့်တဲ့၊ အဲ့လို variable တွေ၊ loop ပတ်တာတွေ၊ condition ထိန်းတာတွေကို လေ့ကျင့်တဲ့နေရာမှာ အချိန်တစ်ခုပေးပြီး consistency ရှိရှိ လေ့ကျင့်သင့်တယ်၊

ပြီးရင် တခြား application တွေ website တွေများများသုံးကြည့်ပြီး၊ ဘယ်လို feature တွေကို ဘယ်လိုနေရာတွေမျာဖော်ပြလေ့ရှိသလဲ၊ Function တစ်ခုကို ဘယ်လိုလုပ်သွားလည်း၊ စသဖြင့် အမြဲလိုလိုလေ့လာသင့်တယ်၊ ဒါကတော့ Zero မှမဟုတ်ပါဘူး၊ Professional အဖြစ်လမ်းကြောင်းပေါ်ရောက်သွားလည်း အမြဲလေ့လာသင့်တဲ့ ကောင်းတဲ့အလေ့အကျင့်ပါပဲ၊

Information architecture ကိုလေ့ကျင့်ချင်ရင်တော့ သုံးနေကျ application တွေ websites တွေကို အခြေခံပြီး ပတ်ဝန်းကျင် အလုပ်တွေကို စိတ်ကူးပုံဖော်ကျင့်လို့ရတယ်၊ A4 စာရွက်နဲ့ ဆွဲပြီးလေ့ကျင့်လည်းရတယ်၊ (ကျွန်တော်ဆို အင်တာနက်ဖြတ်ခံထားရတဲ့နေရာ သွားနေရတုန်းက မဆွဲရမနေနိုင်လို့ အဲ့ဒေသက Business တွေအတွက် A4 နဲ့ ထိုင်ဆွဲနေတာ)

ဘယ်အချိန်မှ သင်တန်းတက်သင့်လဲဆိုတော့၊ ကိုယ်က ထိုက်သင့်သလောက် Program ရေးတတ်တဲ့အလေ့အကျင့်ရှိသွားပြီ၊ Problem solve လုပ်တာတွေ Logical thinking တွေ၊ Googling တွေ ထိုက်သင့်သလောက် ကောင်းလာပြီ၊ လုပ်ငန်းတစ်ခုခုကို စဥ်းစားလိုက်တာနဲ့ Wireframe တွေ UI တွေ ထိုက်သင့်သလောက် ချတတ်လာပြီဆိုရင်တော့ သင်တန်းစတက်သင့်ပါပြီ၊ အဲ့ဒီအချိန်ကျရင်တော့ ကိုယ်သွားမဲ့ platform ကိုယ့် အခြေအနေတွေပေါ်စဥ်းစားရွေးချယ်ပြီး သင်တန်းကောင်းကောင်းတစ်ခုရွေးချယ်သင့်ပါတယ်၊

ဘယ်လိုသင်တန်းမျိုးကို အားပေးလဲဆိုတော့ Train လုပ်ပေးတဲ့ သင်တန်းမျိုးကို ပိုအားပေးပါတယ်၊ Lecture ရော Train ရော ကောင်းတဲ့ သင်တန်းရှိရင်တော့ အတိုင်းထက်အလွန်ပေါ့ဗျာ၊ ဒါပေမဲ့ Training ကောင်းကောင်းပေးနိုင်တဲ့ သင်တန်း အလွန်ရှားပါတယ်၊ (ရှိတော့ရှိပါတယ်)၊ ကျနော့်အမြင်အရ Lecture ရိုက်တာကတော့Youtube နဲ့ Udemy က course တွေကြည့်တာကတောင် သင်တန်းတက်တာထက်ပိုအကျိုရှိပါသေးတယ်၊ နောက်တစ်ခုက သင်တန်းရွေးချယ်တဲ့နေရာမှာ ဘယ်သူသင်တာလဲဆိုတာလည်းအရေးကြီးပါတယ်၊ သင်မဲ့သူက များများသိပြီး experience များများရှိတဲ့ senior level ဖြစ်မှ ကောင်းကောင်း ရှင်းပြပြီး Training လုပ်ပေးနိုင်မှာဖြစ်ပါတယ်၊ research ကောင်းပြီး စေတနာကောင်းတဲ့သူဖြစ်ဖို့လည်းလိုပါတယ်။ ။

အဓိကအချုပ်ကတော့ သင်တန်းတစ်ခုတက်မယ်ဆိုရင် ကိုယ့်ဆီမှာ အဲ့ဒါကို ထည့်မဲ့ ခွက်တစ်လုံး အရင်တည်ဆောက်ပြီးမှ သင်တန်းသွားတက်သင့်ပါတယ်၊ ခွက်မရှိဘူးဆိုရင်တော့ ဘာမှ ထည့်လို့မရပါ။။ ။။။

တော်သေးပြီ

🏁  Myan Phone (Laravel Package) - v1.1.0ကျွန်တော်တို့ Fawkes တွေ Laravel community အတွက် Contribute လုပ်ထားတဲ့ Myan Phon...
02/03/2022

🏁 Myan Phone (Laravel Package) - v1.1.0

ကျွန်တော်တို့ Fawkes တွေ Laravel community အတွက် Contribute လုပ်ထားတဲ့ Myan Phone ဆိုတဲ့ Package လေးနဲ့ မိတ်ဆက်ချင်ပါတယ်၊

🚩 လိုအပ်ချက်များ

🌟 php 7.3 နဲ့အထက်

🌟 Laravel 8.0 နဲ့ အထက်

ဆိုရင် Myan Phone Package ကို အသုံးပြုနိုင်ပါတယ်

🚩 ဘာတွေလုပ်လို့ရလဲ

Myan Phone package ကို အသုံးပြုပြီးတော့

🌟 ဘယ် Operator လဲဆိုတာတွေစစ်လို့ရမယ်
🌟 ဘယ်နိုင်ငံကလဲ သိဖို့ Country Code တွေယူလို့ရမယ်၊
🌟 သက်ဆိုင်ရာ operator တွေအလိုက် ဝင်လာတဲ့ ဖုန်းနံပါတ် Format မှန်မမှန် စစ်တာတွေ လုပ်လို့ရနိုင်ပါတယ်၊

Version အနေနဲ့ကတော့ v1.1.0 ပဲရှိပါသေးတယ်၊

composer require fawkescreatives/myanmar-phone

ဆိုပြီးတော့ အသုံးပြုနိုင်ပါတယ်၊

Testing လုပ်ပြီးတော့ Packagist ပေါ်လည်းတင်ထားပါတယ်



Documentation အသေးစိတ်ကို လည်း အဆိုပါ Packagist Link မှာ သွားရောက်ဖတ်ရှုနိုင်ပါတယ်ခင်ဗျာ၊

လိုအပ်တာများကိုလည်း အကြံပြုပေးနိုင်ပါတယ်ခင်ဗျာ ။ ။ ✌️✌️

🏁 Dart အကြောင်း Overview < အပိုင်း - ၃> (or) Async CodingAsync Coding ဆိုတာကတော့ Modern Programming Language တော်တော်မျာ...
25/02/2022

🏁 Dart အကြောင်း Overview < အပိုင်း - ၃> (or) Async Coding

Async Coding ဆိုတာကတော့ Modern Programming Language တော်တော်များများမှာ သုံးလို့ရကြပါတယ်၊ async - await ဆိုပြီး ရေးရတာဖြစ်ပါတယ်၊ အဓိကကတော့ CPU ကို Thread 1 ခု ထဲမှာအလုပ်တစ်ခုပြီးမှ နောက်တစ်ခုလုပ်ခိုင်းတာမဟုတ်ပဲနဲ့ Multithread လုပ်ခိုင်းပြီး CPU ရဲ့ Power ကို များများသုံးတာဖြစ်ပါတယ်၊ အလုပ်တစ်ခုပြီးမှတစ်ခုပဲခိုင်းလို့ရတဲ့ Language တွေကိုတော့ Synchronous Programming Language တွေလို့ခေါ်ကြပါတယ် ၊

Asynchronus Programming ဘယ်လိုမျိုးလဲဆိုတော့ Thread 1 က Task A ပြီးရင် Tack D ကို လုပ်ပါဆိုရင်၊ Thread 2 မှာ Task B နဲ့ Task C ကို လုပ်ပါဆိုပြီး ပြိုင်တူ ခိုင်းတာဖြစ်ပါတယ်။ ဘယ်နေရာတွေမှာ သုံးလဲဆိုရင်

☑️ Api Fetch လုပ်တဲ့အခါတွေ
☑️ Persistant Storage တစ်ခုခုမှာပဲဖြစ်ဖြစ် Database မှာပဲဖြစ်ဖြစ် data write တဲ့အခါတွေ
☑️ Storage တွေ Database တွေ File တွေဆီကနေ data read လုပ်တဲ့အခါတွေမှာ သုံးကြပါတယ်၊

ဒါကတော့ Async Code တွေရဲ့ အလုပ်လုပ်ပုံဖြစ်ပါတယ်၊

Dart မှာတော့ အဲ့ဒီ Asyn Coding ကို အသေးစိတ် အထူးပြုလုပ်ထားတဲ့ Concept Level Feature တွေ ရှိပါတယ် အဲ့ဒီထဲကမှ အဓိကကျတဲ့ Future နဲ့ Stream အကြောင်းကို ပြောပြချင်ပါတယ်၊

Future => ဆိုတာကတော့ အပေါ်ကပြောသလိုပဲ Thread တွေကို ပိုပြီး စနစ်ကျကျနဲ့ စီမံခန့်ခွဲတဲ့နေရာမှာသုံးရပါတယ်၊ Thread တစ်ခုမပြီးသေးတဲ့အချိန်ကို ခနစောင့်ခိုင်းထားပြီး အဲ့အချိန်မှာ တခြား အလုပ်တွေဆက်လုပ်ပါဆိုတာမျိုးတွေမှာသုံးလေ့ရှိကြပါတယ်၊

ဥပမာ - App တစ်ခုကို စဖွင့်တဲ့အချိန် Config တွေ download ဆွဲနေတဲ့အချိန်မှာ နောက် Thread တစ်ခုအနေနဲ့ Splash Screen မှာ Loading ပြထားဆိုပြီးလုပ်တာမျိုးဖြစ်ပါတယ်၊

Future ကို Data တွေ read , write လုပ်တဲ့ အခါမှာ အခြေအနေသုံးမျိုး သတ်မှတ်နိုင်ပါတယ်၊

☑️ Uncompleted
☑️ Completed with value
☑️ Completed with error

ဆိုပြီးဖြစ်ပါတယ်၊

Uncompleted ဆိုတာ error လာမလား Success ဖြစ်တဲ့ Value လာမလား မတိုင်ခင် Waiting Time အခြေအနေဖြစ်ပါတယ် ၊ ဥပမာ

Future.delayed(const Duration(seconds: 2), () => throw Exception('Logout failed: user ID is invalid'));

ဒါကတော့ waiting time 2 seconds စောင့်ခိုင်းပြီး Error throw လိုက်တဲ့ အခြေအနေဖြစ်ပါတယ်၊

Future.delayed(const Duration(seconds: 4), () => 'Large Latte');

ဒါကတော့ waiting time 4 seconds စောင့်ခိုင်းပြီး Completed Value ကို response ပြန်ပေးတာဖြစ်ပါတယ်၊

Future future = getFuture();
future.then((value) => handleValue(value))
.catchError((error) => handleError(error));

ဒါကတော့ Future ရဲ့အတိုချုပ်ပုံစံဖြစ်ပါတယ်၊ Waiting Time မှာဘာလုပ်ခိုင်းမှာလည်း၊ Completed Value ဖြစ်တဲ့အခါမှာဘာလုပ်ခိုင်းမှာလည်း၊ Error ဖြစ်တဲ့အခါမှာ Error Manager လိုမျိုးရေးပြီး handle လုပ်ခိုင်းမှာလားဆိုတာ ကိုယ် Problem လိုအပ်ချက်အရ အသုံးပြုနိုင်ပါတယ်၊

Stream => ဆိုတာကတော့ async coding ပေါ်မှာ တစ်ဆင့်ထပ်မြင့်ထားတဲ့ Feature တစ်ခုဖြစ်ပါတယ်၊ Stream ဆိုတာဘာလဲ အတိုချုပ်ပြောရရင်တော့ Data စီးဆင်းမှုတွေကို စောင့်ကြည့်တယ် event တွေလုပ်ခွင့်ပေးတယ် ဘာ event ဖြစ်သွားလည်းကိုမူတည်ပြီး Handle လုပ်တယ်လို့ပဲပြောရမှာဖြစ်ပါတယ်၊

တနည်းအားဖြင့် Stream က Reactive Programming (Rx Programming) ဖြစ်ပါတယ်၊ Rx Programming ရဲ့သဘောတရားအရ အဓိက အလုပ်သုံးခုကိုလုပ်ပါတယ်

☑️ Observable + Observer + Schedulers / စောင့်ကြည့်ခိုင်းမယ် + စောင့်ကြည့်မယ် + စောင့်ကြည့်ပြီး data တွေကို manage လုပ်မယ် … ဆိုပြီးဖြစ်ပါတယ်၊​

ဥပမာ Pagination api တစ်ခုကို ဖတ်တယ်ဆိုပါစို့ … Page တစ်ခုမှာ Element ၁၅ ခုပါမယ်၊ Total Page 3 ရှိမယ်ဆိုတာကို Stream ကအလုပ်လုပ်မယ်ဆိုရင် page 1 စလိုက်ပြီဆိုကတည်းက emit('pageload(pageNo)') or yield('pageload(pageNo)') ဆိုပြီး စောင့်ကြည်လိုက်တော့ ဆိုတဲ့ event ကို စလုပ်ပါတယ်၊ page number ကို Stream ကတောက်လျှောက် စောင့်ကြည့်သူ(Observer) လုပ်နေပြီးတော့ page number 3 မရောက်မချင်း Loading spinner ပြဆိုတဲ့ event ကို ခိုင်းပါတယ်၊ page number 3 ကိုရောက်ရင်တော့ "No more data" ထပ်ဖတ်စရာမရှိတော့ပါဘူးဆိုပြီးပြခိုင်းပါတယ်၊ ဒါက Rx programming ဖြစ်တဲ့ Stream ရဲ့ အစွမ်းတွေပဲဖြစ်ပါတယ်၊ ထပ်ကောင်းတဲ့အချက်က Data layer နဲ့ UI layer ပါ ခွဲလိုက်နိုင်တာဖြစ်ပါတယ်၊ UI ဘက်ကနေလည်း ကိုယ် Observable လုပ်ခိုင်းထားတဲ့ Data ကို Observe လုပ်ပြီး သုံးနေရုံပါပဲ။​ ။

(အပိုင်း ၁)
https://www.facebook.com/fawkescreatives/posts/104440988780435

(အပိုင်း ၂)
https://www.facebook.com/fawkescreatives/posts/113131754578025

အပိုင်း ၃ ပိုင်းလောက်နဲ့တော့ dart အကြောင်းက အကုန်သိ၊ အကုန်နားလည်သွားမှာမဟုတ်ပါဘူး၊ ကျွန်တော့အနေနဲ့ language တစ်ခုကို စလေ့လာရင် overview အရင် လိုက်ကြည့်တဲ့ပုံစံအတိုင်း sharing လုပ်ထားတာဖြစ်ပါတယ်၊ dart programming ကို စလေ့လာမယ်ဆိုရင်တော့ variable တွေ state control တွေကစလို့ များများစဥ်းစား များများရေးကျင့်ရမှာဖြစ်ပါတယ်။​ ။

တော်သေးပြီ ။။။။။။

🏁  Social မှာ ကိုယ် Share မဲ့ Code တွေကို Screenshot လှလှလေးနဲ့ share မယ်ကျွန်တော်တို့ code တွေကို image အနေနဲ့ sharing ...
20/02/2022

🏁 Social မှာ ကိုယ် Share မဲ့ Code တွေကို Screenshot လှလှလေးနဲ့ share မယ်

ကျွန်တော်တို့ code တွေကို image အနေနဲ့ sharing လုပ်တဲ့အခါမှာ IDE တွေ ဒါမဟုတ် Text Editor တွေနဲ့ screenshot ကို အဆင်ပြေပြေ ရိုက်မရပါဖူး။ အဲ့အတွက် code တွေကို image အနေနဲ့ share လုပ်ဖို့ အသုံးဝင်တဲ့ tool တွေကို ပြောပြပေးသွားမှာ ဖြစ်ပါတယ်

CodeShot (Paid)
https://codeshotapp.com/

CodeShot ဟာ MacOs ကိုပဲ support ပေးထားပါတယ်။ သူမှာဆိုရင် Theme ပေါင်း ၈၀ ကျော် ၊ Language ပေါင်း ၁၈၀ ကျော် နဲ့ System Font တွေ အပြင် dark mode ကိုပါ support ပေးထားပါတယ်။ ပိုက်ဆံ ပေးရတာနဲ့ တန်အောင် customization တွေ ကိုလွယ်လွယ်ကူကူ လုပ်လို့ ရမှာ ဖြစ်ပါတယ်။ CodeShot ကို AppStore ကနေ $5.99 ပေးပြီး ဝယ်ယူလို့ ရပါတယ်။

ShowCode (Free)
https://showcode.app

ShowCode က ဒီအတောအတွင်းကပဲ အသစ် ထွက်လာတဲ့ OpenSource Project တခု ဖြစ်ပါတယ်။ ShowCode ဟာ web version ဖြစ်တဲ့အတွက် OS အကုန်လုံးမှာ အသုံးပြုလို့ ရမှာ ဖြစ်ပါတယ်။ အရင် ကျနော် သုံးဖူးတဲ့ဟာတွေနဲ့ မတူပဲ UI UX ပုံစံ တမျိုးနဲ့ ထွက်လာပါတယ်။ ကျနော် ကြိုက်တဲ့အပိုင်းကတော့ code နှစ်ဖိုင်ရှိမယ် image နှစ်ခု ခွဲစရာ မလိုပဲ image တခုတည်းပဲ ရောရေးလို့ ရပါတယ် ။ သူ့ code တွေကို လေ့လာချင်ရင်ပဲဖြစ်ဖြစ် ၊ contribute လုပ်ချင်ရင်ပဲဖြစ်ဖြစ် ဒီ github link မှာ သွားရောက် ကြည့်ရှုလို့ ရပါတယ်။ website link ကတော့ https://showcode.app ဖြစ်ပါတယ်။

Carbon (Free)
https://codeshotapp.com/

Carbon ကတော့ ကျနော် သုံးဖြစ်နေတဲ့ tool တခု ဖြစ်ပါတယ်။ CodeShot ပုံစံ နီးပါ ထုတ်ယူလို့ ရတဲ့ အတွက် ကျနော် သုံးဖြစ်နေပါတယ်။ သူကလဲ OpenSource Project ပါပဲ။ ShowCode ဟာ web version ဖြစ်တဲ့အတွက် OS အကုန်လုံးမှာ အသုံးပြုလို့ ရမှာ ဖြစ်ပါတယ်။ Github Link https://github.com/carbon-app/carbon မှာ ဝင်ရောက်ကြည့်ရှုလို့ ရပါတယ်။ Website Link ကတော့ https://carbon.now.sh ဖြစ်ပါတယ်။

CodeShotWebApp (Free)
https://codeshot.vercel.app

CodeShotWebApp ကတော့ Open Source ပေးထားတဲ့ web app တစ်ခု ဖြစ်ပါတယ်။ ပေါ့ပေါ့ပါးပါး သုံးလို့ အဆင်ပြေပါတယ်။

Github - https://github.com/sachdeva-shrey/codeshot-website

Website - https://codeshot.vercel.app

အားလုံးအဆင်ပြေပြေ Sharing လုပ်နိုင်ကြပါစေ ။​​ ။

🏁. Building UI with Harmony Colorကျွန်တော်တို့တွေ UI တွေ Logo တွေ Design တွေ သုံးကြည့်တဲ့အခါမှာ အမြင်မှာ ကြည့်ကောင်းနေရင...
12/02/2022

🏁. Building UI with Harmony Color

ကျွန်တော်တို့တွေ UI တွေ Logo တွေ Design တွေ သုံးကြည့်တဲ့အခါမှာ အမြင်မှာ ကြည့်ကောင်းနေရင် ၊ ဒါမျိုးဆွဲတတ်ဖို့ အနုပညာ အမြင်ရှိဖို့ လိုတယ်လို့ထင်ကြတယ်ဗျ၊ တကယ်တော့ အနုပညာ အမြင်ဆိုတာထက် Problem Solving လုပ်ဖို့ Logic ကျကျစဥ်းစားတတ်ဖို့ လိုက်နာရမဲ့ Design Technique တွေ၊ Theory တွေ သိဖို့ ပိုလိုပါတယ်၊

Art နဲ့ Design နဲ့က ဆင်တယ်လို့ထင်ရပေမဲ့ ဖန်တီးရတဲ့အချိန်မှာရော ဖြစ်ပေါ်လာတဲ့ result တွေမှာရော ဝိသေသတွေ ကွာခြားပါတယ်၊။ Art က Emotional တွေ ၊ အတွေးအခေါ်တွေ ကို ဦးစားပေးဖန်တီးရတာဖြစ်ပြီး ရသမျိုးစုံခံစားစေတယ်၊ ကျယ်ပြန့်ပါတယ်၊

Design က အစိတ်အပိုင်းတစ်ခုချင်းစီမှာ problem solving လုပ်ဖို့ နည်းစနစ်ကျကျ စဥ်းစာရတာဖြစ်ပြီး ၊ ထွက်လာတဲ့ result ကလည်း (ဒီအရောင်ကတော့ success ဖြစ်သွားလို၊ error ဖြစ်သွားလို့၊​ ဒီလုံးလုံး ကြွကြွလေးကတော့ နှိပ်လို့ရတဲ့ ခလုတ်မှန်း သိအောင်လို့ဆိုတဲ့) ပြဿနာဖြေရှင်းတဲ့ အကြောင်းပြချက်တွေနဲ့ တည်ဆောက်ရတာဖြစ်ပါတယ်၊

ဒါကြောင့်မို့ ပန်းချီဆရာတစ်ယောက်ကို UI တွေဆွဲခိုင်းရင် ခက်ခဲမှာဖြစ်သလို​၊​ UI တွေဆွဲတဲ့Visual Designer တစ်ယောက်ကိုလည်း ပန်းချီဆွဲခိုင်းလို့ရမှာမဟုတ်ပါဘူး၊

Website တစ်ခု Mobile App တစ်ခုကို ဖန်တီးတဲ့အခါမှာလည်း ၊ ဒီ App ကို စသုံးကြည့်လိုက်တာနဲ့ ဆွဲဆောင်နေအောင်၊ အမျိုးအစားတူ App နှစ်ခုဖုန်းထဲထည့်ထားရင်တောင် ကိုယ့် App က သုံးရတာ အမြင်ရှင်းလို့၊ အသုံးပြုရလွယ်ကူလို့ ဆိုပြီး ဆွဲဆောင်မှုရှိနေဖို့လိုအပ်ပါတယ်၊​

အဲ့လိုဆွဲဆောင်မှုရှိနေဖို့ ပုံတွေ၊ စာတွေ ၊ button တွေ၊ link တွေက သူ့နေရာနဲ့သူ၊ သူ့အကွာအဝေးတွေနဲ့သူ ရှိရမှာဖြစ်သလို၊ လိုက်ဖက်တဲ့ Font Style တွေ၊ Font weight တွေ၊ အရောင်တွေကို လည်း လိုက်ဖက်အောင် သုံးနိုင်ရမှာဖြစ်ပါတယ်၊

အဲ့ဒီ အချက်တွေနဲ့အတူ အရေးကြီးတာတစ်ခုရှိပါတယ်​ အဲ့ဒါကတော့ Theme Color ပါ၊ ဘာအရောင်ကို သုံးမလဲ၊ သုံးတဲ့ Primary Color နဲ့ လိုက်ဖက်တဲ့ တခြား ဘာအရောင်တွေထပ်သုံးမလဲ သေချာစဥ်းစားဖို့လိုပါတယ်၊​ လိုက်ဖက်တဲ့ အရောင်တွေ သုံးဖို့အတွက် Color Theory အခြေခံလေးတွေ နားလည်ထားဖို့လိုပါတယ်၊ Color Wheel ကို ကောင်းကောင်း အသုံးချတတ်ဖို့လိုပါတယ်၊

✪ ပထမဆုံးအနေနဲ့ - ကိုယ်လုပ်မဲ့ Project က ဘယ်လိုအမျိုးအစားလဲ ကြည့်ပြီး အလုပ်နဲ့ လိုက်ဖက်မဲ့ Color မျိုး ရွေးရပါမယ်၊ ကိုယ်လုပ်မဲ့ Project အလိုက် Primary Color ကို စိုစို၊ တောက်တောက်ဖက်သွားမလား၊ မှိန်မှိန်၊ ဖျော့ဖျော့၊ မှောင်မှောင် ဘက် သွားမလား အရင် စဥ်းစားရပါမယ်၊​ ဥပမာ - အစားအသောက်နဲ့ဆိုင်တဲ့ Project မျိုး ဆိုရင် စိုစို၊ တောက်တောက် Color မျိုး ရွေးချယ်သင့်ပါတယ်၊ Warm Colors တွေနဲ့ Cool Colors တွေဆိုပြီး ခွဲခြားထားနိုင်ပါတယ်၊ Warm ဖြစ်တဲ့ အခြမ်းနဲ့ Cool ဖြစ်တဲ့ အခြမ်းက Color Wheel ရဲ့ တစ်ဖက် တစ်ချက်စီမှာရှိပါတယ်၊

✪ ဒုတိယအဆင့်အနေနဲ့ - Color Properties တွေထည့်တာဖြစ်ပါတယ်၊ ဘယ် Color ထဲက အသုံးပြုမယ်ဆိုတာသတ်မှတ်ပြီးသွားရင် အဲ့ဒီ color ကိုမှ အနက်ဘက် ယိမ်းတာထည့်မလား (shade)၊ အဖြူဘက်ယိမ်းတာထည့်မလား (tint)၊ မီးခိုးဆန်မလား (tone) စတာတွေကို ကိုယ် ရွေးချယ်ထားတဲ့ Cool , Warm color တွေအတိုင်း ချိန်ဆပြီး လုပ်နိုင်ပါတယ်၊

✪ နောက်ဆုံးတစ်ဆင့်ကတော့ - အဲ့ဒီ ရွှေးချယ်လိုက်တဲ့ Color နဲ့ လိုက်ဖက်မဲ့ တခြား အရောင်တွေ ထပ်ထည့်တာဖြစ်ပါတယ်၊ ဒီမှာတော့ project အနေအထားပေါ် မူတည်ပြီး Color တစ်မျိုးတည်း သုံးလို့ကောင်းတဲ့ UI မျိုးရှိသလို၊ Color နှစ်မျိုး၊ သုံးမျိုး၊ လေးမျို၊ business လိုအပ်ချက်အရ သုံးရတာမျိုးရှိပါတယ်၊ အဲ့လို ကိုယ့် Project အတွက် လိုက်ဖက်တဲ့ Color တွေစပ်ထားတာကို Color Scheme လိုပဲခေါ်ခေါ်၊ Color Palettes လို့ပဲခေါ်ခေါ် ၊ ခေါ်နိုင်ပါတယ်၊ ဒီနေရာမှာ Color Wheel ကို သုံးပြီး အခြေခံကျကျ အသုံးများတဲ့ Color စပ်တဲ့ Pattern လေးတွေရှင်းပြချင်ပါတယ်

☑️ Complementary Colors - Color Wheel အဝိုင်းပေါ်မှာ မျက်နှာချင်းဆိုင် ဆန့်ကျင်ဘက် Color နှစ်မျိုးကို အသုံးပြုတာဖြစ်ပါတယ်၊​

☑️ Monochromatic Colors - ဆိုတာကတော့ အရောင်တစ်မျိုးထဲကိုမှ Color Property တွေကစားပြီး (shade တွေ၊ Tint တွေ၊ Tone တွေဖောက်ပြီး) အမှောင်၊ အလင်း တွေချိန်ပြီးသုံးတာဖြစ်ပါတယ်၊

☑️ Analogous Colors - ဆိုတာကတော့ Color Wheel မှာ အပိုင်းအပိုင်းတွေ ခွဲလိုက်ရင် ၊ ဘယ်လောက်ပဲ ခွဲခွဲ ကပ်လျှက်ရှိတဲ့ အရောင် သုံးမျိုးကို ယူရတာဖြစ်ပါတယ်၊

☑️ Triadic Colors - Tri ဆိုတဲ့အတိုင်း Color Wheel အဝိုင်းပေါ်မှာ တြိဂံပုံစံအရောင်သုံးမျိုးယူတာဖြစ်ပါတယ်၊ ဘယ်လိုယူသလဲဆိုရင် Color Wheel ကို ၁၂ ပိုင်း ပိုင်းရင် ၄ ခုခြားယူပါမယ်၊ ၁၈ ပိုင်းပိုင်းရင် ၆ ခုခြားယူတဲ့ပုံစံနဲ့ သုံးနားညီ တြိဂံပုံစံယူတာဖြစ်ပါတယ်၊ ဒီနေရာမှာ တခြားတြိဂံပုံစံယူတဲ့ Colors တွေလည်းရှိပါသေးတယ်၊

☑️ Tetradic Colors - ဆိုတာကတော့ Color Wheel ပေါ်ကနေ ထောင့်မှန်စတုဂံပုံစံ အရောင် ၄ မျိုး ယူတာဖြစ်ပါတယ်၊ တခြား Square ပုံစံယူတာ အပြင် တခြားယူတဲ့ပုံစံတွေလည်းရှိပါသေးတယ်၊

ဒီလိုမျိုး အခြေခံကျကျ ကိုယ့်ဖာကိုယ် လိုက်ဖက်တဲ့အရောင်စပ်တာအပြင် အသင့်စပ်ပေးထားတဲ့ Color Palettes တွေ၊ Primary သုံးမယ့်အရောင်တစ်မျိုးသိတာနဲ့ တခြားလိုက်ဖက်အရောင်တွေ Generate ထုတ်ပေးတာတွေ၊ Tools တွေ သုံးမယ်ဆိုလည်း သုံးလို့ရပါတယ်၊ ဒါတွေကတော့ ကျွန်တော် သုံးလေ့သုံးထရှိတဲ့ Tools တွေဖြစ်ပါတယ်၊ Wireframe တွေ၊ UI တွေဆွဲပြီးလို့ Color ထည့်မယ်လုပ်တိုင်း လေးခုလုံးမှာ စမ်းကြည့်ပြီး သုံးဖြစ်ပါတယ်၊

https://colorhunt.co/ - မှာတော့ စပ်ပြီးသား Color Palettes တွေအများကြီးထဲက ကိုယ်နှစ်သက်ရာတွေ သုံးနိုင်ပါတယ်၊

https://mycolor.space/ - မှာတော့ ကိုယ်သုံးမဲ့ Primary Color တစ်ခု သိတာနဲ့ တခြား လိုက်ဖက်တဲ့ အရောင်တွေကို Generate ထုတ်ပေးမှာဖြစ်ပါတယ်၊

https://coolors.co/ - မှာကတော့ Space Bar လေးပုတ်ပြီး ကိုယ်နဲ့ သင့်တော်မဲ့ Color Palettes တွေ ထုတ်လို့ရပါတယ်၊ Color တစ်ခုချင်းစီအလိုက် Properties တွေချိန်လို့ရပါတယ်၊ အရောင်နှစ်ခုကြားထဲက ကြားအရောင်တွေကိုလည်း ရွေးလို့ရပါတယ်၊

https://www.canva.com/colors/color-wheel/ - Canva ကထုတ်ပေးတဲ့ Color Wheel ဖြစ်ပါတယ်၊ အခြေခံကျကျ ပိုမြင်နိုင်အောင်လုပ်ပေးထားပါတယ်၊ အပေါ်က ပြောခဲ့တဲ့ Pattern တွေအတိုင်းသုံးလို့ရပါတယ်၊ Color Properties တွေကိုလည်း တစ်ခါတည်း ချိန်နိုင်အောင်လုပ်ပေးထားပါတယ်၊

အပေါ်က Tools တွေ Generator တွေအပြင် dribbble တို့ pinterest တို့မှာလည်း Sample UI တွေကြည်ပြီး inspire ယူနိုင်ပါတယ်၊ အဲ့ဒါတွေအပြင် ဗိသုကာ အဆောက်အဦးတွေက အရောင်တွေ၊ တိရိစ္ဆာတွေ၊ အသီး အနှံတွေဆီက အရောင်တွေကိုလည်း ကြည့်ပြီး မြင်တတ်သလို inspire ယူလို့ရပါတယ်၊ အဓိကက ကိုယ်လုပ်တဲ့ အလုပ်အပေါ်မှာ အဆုံးမဲ့ အာရုံစိုက်ထားဖို့ပါပဲ၊ မြင်သမျှတွေ့သမျှအရာတွေထဲမှာ ကိုယ်လုပ်တဲ့အလုပ်နဲ့ Problem Solving လိုက်လုပ်ကြည့်နေဖို့လိုပါတယ်။ ။

တော်သေးပြီ ။ ။

အားလုံး ကျန်းမာပြီး လွပ်လပ်တဲ့ဘဝမှာ လုပ်ချင်တာတွေ အမြန်ဆုံးလုပ်နိုင်ကြပါစေလို့ ဆန္ဒပြုအပ်ပါတယ်။ ။



photo credit - Pinterest , Hongkiat

🖊  Computational Thinking ဆိုတာ 🚩🚩IT လောကထဲကိုဝင်ပြီး Programmer လုပ်မဲ့သူတွေအနေနဲ့ Program ရေးတယ်ဆိုတာ နဲ့ ကွန်ပျူတာနဲ့...
12/01/2022

🖊 Computational Thinking ဆိုတာ 🚩🚩

IT လောကထဲကိုဝင်ပြီး Programmer လုပ်မဲ့သူတွေအနေနဲ့ Program ရေးတယ်ဆိုတာ နဲ့ ကွန်ပျူတာနဲ့ code တွေထိုင်ရေးနေတာကိုပဲ မြင်တတ်ကြပါတယ်၊ တန်းပြီးတော့ programming basic သင်တန်းတွေ၊ web, mobile development သင်တန်းတွေ တက်ကြပါတယ်၊
တကယ်တော့ programming သင်တန်းတွေ မတက်ခင် အရင်ဆုံးကိုယ့်မှာ computational thinking ရှိရပါမယ်၊ computational thinking နဲ့ အသားတကျရှိရပါမယ်၊

computational thinking ဆိုတာ ပြဿနာတွေကို ဖြေရှင်းဖို့ တွေးခေါ်ပုံ အဆင့်ဆင့်ဖြစ်ပါတယ်၊
ကျွန်တော်တို့တွေ ကိစ္စတစ်ခုကိုဖြေရှင်းတဲ့အခါ အချက်အလက်တွေပေါ်မူတည်ပြီး ကျိုးကြောင်းဆီလျှော်မှုရှိရှိ Logic ကျကျ ဆုံးဖြတ် တတ်တာဟာ Computational Thinking ရဲ့ အခြေခံအချက်ပဲဖြစ်ပါတယ်၊ ဥပမာ - ကျောင်းတစ်ခု ရွေးချယ်တက်တော့မယ်ဆိုပါစို့၊ အဲ့ဒီကျောင်းက ဘာတွေသင်မှာလဲ၊ ဘယ်မှာရှိတာလဲ၊ ပိုက်ဆံ ဘယ်လောက်ကုန်မှာလဲ၊ အဲ့ဒီကျောင်းဆင်းတွေ တကယ်ရောတတ်လား၊ အဲ့ဒီကျောင်းဆင်းတွေ ဘာဆက်လုပ်နေကြလဲ ၊ စတဲ့ အချက်အလက်တွေပေါ်မူတည်ပြီး Logic ကျကျ စဥ်းစားပြီး ဆုံးဖြတ်ရမှာဖြစ်ပါတယ်၊

Programmer လုပ်မဲ့သူတွေမှမဟုတ်ပါဘူး၊ လူတိုင်းအတွက်လိုအပ်ပါတယ်၊ အလယ်တန်း အထက်တန်း ကလေးအရွယ်ကတည်းက အလေ့အကျင့်လုပ်ထားရင် ပိုကောင်းပါတယ်၊ ဒီမှာသာ အလယ်တန်းလို့ ပြောရတာ တခြားနိုင်ငံက ကလေးတွေကိုက အသက် ၅ နှစ် ၆ နှစ် လောက်အရွယ်တည်းက အရွယ်အလိုက် Thinking တွေ Game တွေပေးဆော့ပြီး Computational Thinking ကို လေ့ကျင့်ပေးကြပါတယ်၊ ငယ်ကတည်းက ပြဿနာတွေကို Logic ကျကျ တွေးတတ်ရှင်းတတ်တဲ့ လူတစ်ယောက်ကို တော်ရုံ ဂျင်းစကားတွေနဲ့လည်း brainwashed လုပ်လို့မရဘူးပေါ့ခင်ဗျာ၊ အလုပ်တွေလုပ်တဲ့အခါမှာလည်း အမှားနည်းနည်း အချိန်တိုတိုနဲ့ အဆင့်မှီမှီလုပ်နိုင်တာပေါ့၊

Computational Thinking ဆိုတာ ဘာလဲ ပြန်ဆက်ရမယ်ဆိုရင် ကိစ္စတစ်ခု ၊ ပြဿနာတစ်ခုကို ရှင်းတဲ့အခါ ဘာဖြစ်တာလဲ၊ ဘယ်လိုအချက်တွေကြောင့်ဖြစ်တာလဲ၊ ဘယ်လိုရှင်းမလဲ၊ ဘယ်ကစရှင်းမလဲ ၊ ဘယ်လို ချိတ်ဆက်လုပ်ဆောင်မလဲ စတာတွေပါ၊

ရှင်းစရာနည်းလမ်းတွေက ဘာတွေလဲ၊ အဲ့ဒီ ရှင်းစရာနည်းလမ်းတွေထဲကမှ ဘယ်နည်းလမ်းက အတိုဆုံးနဲ့ အမြန်ဆုံးလဲ၊ ဘယ်နည်းလမ်းကို ကိုယ်ကျွမ်းကျင် ပိုင်နိုင်ဆုံးလဲ၊ အဲ့လို စနစ်တကျ သတ်မှတ်ပြီးပြီဆိုမှ တစ်ဆင့်ပြီးတစ်ဆင့် အကောင်အထည်ဖော်ရတာဖြစ်ပါတယ်၊
ဒါကြောင့်မို့ ပြဿနာတစ်ခုကို ရှင်းတဲ့အခါမှာ အကြမ်းဖျဉ်းအားဖြင့် လုပ်ဆောင်စရာ ၄ ခု ခွဲနိုင်ပါတယ် ၊

ဥပမာ - အသီးအနှံတွေနဲ့ အစိမ်းကြော်ကြော်ပြီး ပြောပြချင်ပါတယ်၊
ဗိုက်ဆာဆာနဲ့ အိမ်မှာတစ်ယောက်ထဲ ဝါးတီးဆွဲရမယ်ဆိုပါစို့၊ ရေခဲသေတ္တာထဲမှာရှိတာက ကြက်ဥ ၊ ပဲသီး၊ ဥနီနဲ့ အသီးအရွက်တစ်ချို့ပေါ့လေ၊ ကြက်ဥတစ်မျိုးထဲကလည်း ကြော်မစားနိုင်၊ အရွက်လေးကလည်း ပါအုံးမှ၊ စျေးကလည်း မသွားချင်ဆိုတော့ ရှိတာလေးတွေနဲ့ အစိမ်းကြော်ကြော်ရမယ်ပေါ့ဗျာ၊ မျက်စိထဲမြင်ယောင်လိုက်တာကတော့ ပဲသီးစိမ်းစိမ်း၊ baby corn လေးတွေနဲ့၊ အငွေ့တစ်ထောင်းထောင်းနဲ့ တရုတ်မဆလာနံလေးနဲ့ မွှေးမွှေးလေးနဲ့ပေါ့၊

အဲ့ဒီတော့ အဲ့ဒီကိစ္စကြီးလုပ်ဆောင်ဖို့ အောက်က အချက်လေးချက်နဲ့ လုပ်ဆောင်ပါတော့မယ်

🟥 Decomposition - ပြဿနာတွေကို တစ်ပိုင်းချင်း၊ တစ်စိတ်ချင်း ခွဲလိုက်တာဖြစ်ပါတယ်၊
မွှေးနေတဲ့ အစိမ်းကြော်တစ်ခွက်ကို လုပ်ဖို့ အစိတ်အပိုင်းတွေခွဲမယ်ဆိုရင်၊ ကြက်သွန်ဆီသတ်ရမယ်၊ အသီးတွေထည့်မွှေရမယ်၊ အဆာပလာတွေထည့်ရမယ် ၊ အဲ့ဒါတွေမတိုင်ခင် အရင်ဆုံး ကြက်သွန်ဖြူနီ အခွံခွာရမယ်၊ ထည့်မဲ့ ပဲသီး၊ ဥနီ စတဲ့ အသီးအနှံတွေ၊ ငရုပ်သီးတွေရေဆေးရပါမယ်၊

🟥 Pattern Recognition - တူနေတဲ့ အပိုင်းတွေ၊ လုပ်ဆောင်စရာတွေ ထပ်ခါထပ်ခါဖြစ်နေတဲ့အပိုင်းတွေကို စုပြီး တစ်ခါထဲ လုပ်ဆောင်နိုင်အောင်လုပ်တာဖြစ်ပါတယ်၊
စောစောက ကြက်သွန်ခွာ၊ အသီးအနှံတွေ ရေဆေးပြီးတဲ့အခါမှာ ၊ တူနေတာက လှီးတဲ့ဖြတ်တဲ့ အပိုင်းတွေဖြစ်ပါတယ်၊ ကြက်သွန်နီ အခြမ်းလိုက်လှီးရပါမယ်၊ ကြက်သွန်ဖြူကိုလည်း ခွာနေရတာကြာလို့ ဖင်ဖြတ်၊ ခေါင်းဖြတ်နဲ့ ဓားပြားတစ်ခါတည်းရိုက်ပြီး ခွာလိုက်ပါမယ်၊ ပြီးတော့ ပဲသီးတွေကို ပူးပြီး လိုချင်တဲ့အနေအထားလိုက်လှီးပါမယ်၊ ငရုတ်သီးတွေလှီးပါမယ်၊ ပြီးရင်တော့ ကြော်တဲ့အခါ အလွယ်တကူ ပြီးပြီး ကြော်ရအောင်လို့ ခွက်လေးတွေနဲ့ ခွဲပြီး ထည့်ထားလိုက်ပါမယ်၊

🟥 Abstraction - လုပ်ဆောင်ဖို့ အဓိကမကျတဲ့ တစ်ချို့အပိုင်းတွေ ၊ မလိုတာတွေ ဖယ်ထားရပါမယ်၊ စဥ်းစားထားပြီးတဲ့အရေးကြီးတာတွေကိုပဲ Focus ထားလုပ်ဆောင်ရပါမယ် ၊
ဥပမာအရ အစိမ်းကြော်ရတဲ့ ရည်ရွယ်ချက်က ကြက်ဥတမယ်ထဲမစားနိုင်လို့ ရေခဲသေတ္တာထဲမှာရှိနေတဲ့ အသီးအနှံလေးတွေနဲ့ ဖြစ်အောင် အမြန်ကြော်စားတာဖြစ်ပါတယ်၊ ဒါကြောင့်မို့လို့ မလိုအပ်တဲ့ အသီးလေးတွေကို လှအောင် လှီးတာတို့ ၊ Ingredient တွေကို ဘာအမျိုးအစားတွေမှတို့ ဆိုတာတွေမေ့ထားရမှာဖြစ်ပါတယ်

🟥 Algorithms - ကိုယ်အစီအစဥ်ချခဲ့တဲ့အတိုင်း တစ်ဆင့်ပြီးတစ်ဆင့် လုပ်ဆောင်တာဖြစ်ပါတယ်၊
အစိမ်းကြော်အတွက် အားလုံးပြင်ဆင်ပြီးတဲ့အခါမှာ ဆီပူတည်၊ ကြက်သွန်ဆီသတ်၊ လှီးထားတဲ့ အသီးအနှံခွက်လေးတွေ တစ်ခုပြီးတစ်ခုထည့်၊ အရသာတွေထည့်မွှေ၊ ငရုပ်သီးထည့် တရုတ်မဆလာလေးထည့်၊
ဒါဆိုရင်တော့ ခနနေတဲ့အခါမှာ ကိုယ်မျှော်လင့်ထားခဲ့တဲ့ အစိမ်းကြော် ပူပူမွှေးမွှေးလေး develop လုပ်ပြီးသွားမှာဖြစ်ပါတယ်၊​
Computational Thinking ကောင်းဖို့ဆိုရင် အပြင်ဘဝက နေ့စဥ်ပြဿနာတွေကို Logical ကျကျ ဖြေရှင်းကြည့်ပြီးလည်း လေ့ကျင်နိုင်ပါတယ်၊

လေ့လာစရာ resources အနေနဲ့ Harvard ကလုပ်ပေးတဲ့ CS50 program က Computer Science course နဲ့ တခြား program တွေ course တွေကြည့်လို့ရပါတယ်၊
https://learning.edx.org/.../course-v1:HarvardX+CS50+X/home

OSSC ကလုပ်ပေးထားတဲ့ roadmap အတိုင်းလည်း လေ့လာလို့ရပါတယ်
https://github.com/ossu/computer-science

ဒါကတော့ Awesome Open Source Project ကနေလုပ်ပေးထားတဲ့ roadmap တွေဖြစ်ပါတယ်၊
https://awesomeopensource.com/project/yngz/cs-roadmap
လေ့ကျင့်စရာ playground တွေလည်းရှိပါတယ်၊

မှာ Scratch Program တွေလေ့ကျင့်ပြီး ကိုယ့်ရဲ့ Computational Thinking ကို မြှင့်တင်နိုင်ပါတယ်၊ code.org မှာ ကလေးတွေမှမဟုတ်ပါဘူး၊ program စရေးမဲ့ လူငယ်၊ လူကြီး ဘယ်သူမဆို လေ့ကျင့်နိုင်ပါတယ်၊

code.org လိုပဲ တို့ ၊ တို့လည်း ရှိပါသေးတယ်
နောက်တစ်ခုကတော့ သူတို့ပေးထားတဲ့ guideline အတိုင်းမဟုတ်ပဲ မှာ စိတ်ကြိုက် Story တွေ Game တွေဖန်တီးပြီး လေ့ကျင့်နိုင်ပါတယ်၊
ဒါကြောင့်မို့လို့ Program စရေးတော့မယ်လို့ စဥ်းစားရင် Computation Thinking ကောင်းအောင် အရင်ဆုံးလေ့လာသင့်ပါတယ်၊ Computer Science courses တွေ စာအုပ်တွေ တစ်ဖက်တစ်လှမ်းကနေဖတ်ထားရပါမယ်၊​ဒါမှသာ ကျနော်တို့ လေ့လာတဲ့အခါမှာ လွယ်လွယ်ကူကူ မြန်မြန်ဆန်ဆန်နဲ့ လေ့လာနိုင်ပြီး၊ Smart ဖြစ်တဲ့ program တွေ အများကြီး ရေးနိုင်မှာဖြစ်ပါတယ်၊

☝️ Computer Science နဲ့ပါတ်သက်လို့ တခြား လေ့လာစရာ တွေရှိရင်လည်း အောက်မှာ comment ပေးသွားနိုင်ပါတယ်။
တော်သေးပီ ။ ​​​ ။

🖊 Dart အကြောင်း Overview  (အပိုင်း - ၂) 🚩🚩 ဒီတစ်ခါမှာတော့ Dart Language ရဲ့ Style တစ်ချို့နဲ့  လိုက်နာသင့်တာတွေ၊ လုပ်သင်...
08/01/2022

🖊 Dart အကြောင်း Overview (အပိုင်း - ၂) 🚩🚩

ဒီတစ်ခါမှာတော့ Dart Language ရဲ့ Style တစ်ချို့နဲ့ လိုက်နာသင့်တာတွေ၊ လုပ်သင့်တာ မလုပ်သင့်တာ အချို့ကို ပြောပြပေးပါမယ်၊ Code ရေးတဲ့အခါမှာ Variable name ပေးတာ၊ File name ပေးတာ၊ Function name ၊ Method name တွေပေးတာကအစ စနစ်တကျပေးတဲ့ အလေ့အကျ လုပ်ထားရပါမယ်၊ အဲ့လို ပုံစံတကျ ၊ စနစ်တကျ ရှိနေတဲ့ Program ဖြစ်နေမှ ကိုယ်လဲမြန်မြန်ရေးနိုင်မှာဖြစ်သလို၊ ကိုယ့် code ကို တခြားသူတွေ ဖတ်ရင်လည်း လွယ်လွယ်ကူကူ သဘောပေါက်နိုင်မှာဖြစ်ပါတယ်၊ ပြန်ပြင်တဲ့အချိန်မှာလည်း လွယ်လွယ်ကူကူနဲ့ မြန်မြန်ဆန်ဆန် ပြင်ဆင်နိုင်မှာ ဖြစ်ပါတယ်၊

🏁 Variable Identifiers

1. UpperCamelCase
🟠 Class name တွေ Enum တွေ ၊ Dart ရဲ့ extension method တွေလိုမျိုး ကြေငြာတဲ့အခါ သုံးနိုင်ပါတယ်၊​
e.g - class StreetRapper { } …,
2. lowercase_with_underscores
🟠 File name , Folder namer တွေ၊ Package name , Library name တွေပေးတဲ့အခါမှာ သုံးရပါမယ်၊
e.g - import 'package:url_launcher/url_launcher.dart'; (file/folder name တွေကို ဒါမျိုး ရေးခဲ့ရပါမယ်)
- import 'package:url-launcher/url-launcher.dart'; (ဒါမျိုးမရေးရပါ)

🟠 lowercase_with_underscores ပုံစံကို prefix တွေမှာ သုံးနိုင်ပါတယ်၊
e.g - import 'package:url_launcher/url_launcher.dart as my_url'
prefix လုပ်တဲ့အခါမှာ 'MYURL' , 'myUrl' စတဲ့ပုံစံတွေနဲ့ မလုပ်သင့်ပါဘူး၊

3. lowerCamelCase
🟠 lowerCamelCase ကို အခြား variable name တွေ၊ Method Name တွေ၊ Parameter တွေ Const name တွေ အစရှိတဲ့ နေရာတွေမှာသုံးနိုင်ပါတယ်
e.g - String memberName; const textSize; checkName(String passValue)

🏁 ( _, __ _ ) for unused callback parameter

🟠 callback function တွေမှာ (_, data,__ ) ပြန်သုံးစရာမလိုတဲ့နေရာတွေမှာ ( __ ) ထည့်ထားနိုင်ပါတယ်၊

e.g - fetchName().then((result) {
// Once we receive our name we trigger rebuild.
setState(() {
value = result;
});
});

🏁 Underscore and Private

🟠 တစ်ချို့ developer တွေက variable တွေရှေ့မှာ underscore ခံခံပြီးရေးလေ့ရှိကြပါတယ်၊ dart မှာ အဲ့လို ရေးခဲ့မယ်ဆိုရင်တော့ private variable အဖြစ် မှတ်ယူသွားမှာဖြစ်ပါတယ်၊ String _color; ဆိုရင် _color က private variable ဖြစ်ပါတယ်၊ Java , C # တို့လိုမှာတော့ 'private' ဆိုတဲ့ keyword ကတော့ သုံးရမှာမဟုတ်ပါဘူး

🏁 Keyword prefix Variable

🟠 တစ်ချို့ developer တွေက variable တွေရှေ့မှာ keyword တွေရေးလေ့ရှိကြပါတယ်၊ e.g - var strName; အဲ့လိုရေးလည်း dart မှာတော့ ဘာ data type အနေနေးသတ်မှတ်မှာမဟုတ်ပါဘူး၊ ဘာမှထူးခြားမှာမဟုတ်ပါဘူး၊ အဲ့လိုရေးတဲ့ပုံစံက ဟိုးအရင် 1967 လောက်က **BCPL** ("**Basic Combined Programming Language**") လို language တွေမှာသာ သုံးခဲ့တာဖြစ်ပါတယ်၊ BCPL မှာတော့ data type တွေကို word တွေရှေ့မှာ သတ်မှတ်ချက်တွေအတိုင်း ရေးပေးရပါတယ်၊ dart language မှာတော့ သူ့ data type နဲ့သူ သတ်မှတ်ပေးရုံပါပဲ၊

🏁 Ordering Import/ Export/ Part

🟠 import လုပ်တဲ့အခါမှာ အရင်ဆုံး dart ရဲ့ package တွေ flutter ရဲ့ package တွေကို import လုပ်ရပါမယ်၊​ အဲ့ဒါတွေပြီးမှ ကိုသုံးထားတဲ့ တခြား package တွေ import လုပ်ရပါမယ်၊

import ကိစ္စတွေ ပြီးပြီဆိုမှ export တွေ part , part of ကိစ္စတွေအတွက် ဆက်လုပ်ရပါတယ်

e.g -

import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';

import 'package:helloworld/data/video_repository.dart';

part 'camera_event.dart';
part 'camera_state.dart';

ဒါမှ သူ့အပိုင်းတဲ့သူ ရှင်းရှင်းလင်းလင်း ဖြစ်ပြီး၊ run တဲ့ အခါမှာလည်း မတက်သင့်တဲ့ error တွေ ရှောင်နိုင်မှာဖြစ်ပါတယ်၊

🏁 Formatting

🟠. ကျနော်တို့ code ရေးတဲ့သူတွေအနေနဲ့ code ရေးတဲ့အခါမှာ space တွေချာ၊ Tab တွေချာပြီးတော့ သူ့နေရာလေးတွေနဲ့သူ စီစီရီရီ ရှိနေအောင် လုပ်ကြပါတယ်၊ Code Editor တွေ IDE တွေမှာ code format လုပ်တဲ့ plugin တွေရှာထည့်ကြပါတယ်၊ dart မှာတော့ အဲ့လိုလုပ်စရာမလိုပါဘူး သက်ဆိုင်ရာ path သတ်မှတ်ပေးပြီး command နဲ့ လှပပြီး format ကျတဲ့ code file ဖြစ်အောင်လုပ်နိုင်ပါတယ်၊

e.g - dart format lib/bloc/camera/camera_bloc.dart
- dart format . (အားလုံး)
ကျနော်တို့ အမြင်မှာသာ သူ့နေရာနဲ့သူ ရှိနေဖို့ လိုအပ်ပေမဲ့ dart ကတော့ အားလုံးကို တစ်ကြောင်းထဲ သတ်မှတ်ပြီး run သွားမှာဖြစ်ပါတယ်၊​

🟠. AVOID lines longer than 80 characters - code ရေးတဲ့အခါမှာ variable name , method name ကို စကားလုံးအရှည်ကြီးတွေပေးတာတွေရှောင်ရမှာဖြစ်ပါတယ်၊​ String myanmarInformationTechnologyStudent …. အဲ့လိုအရှည်ကြီးတွေမပေးပဲနဲ့ တိုတိုတုတ်တုတ်နဲ့ ပေးရမှာဖြစ်ပါတယ်၊​

🟠. Condition တွေစစ်တဲ့အခါ တစ်ကြောင်းထက်ပိုတဲ့ အခြေအနေတွေမှာ Curly Brace တွေ သုံးပေးရမှာဖြစ်ပါတယ်၊​ တစ်ကြောင်းထဲ return ပြန်လို့ရနိုင်မဲ့ အခြေအနေမျိုးမှာတော့ Curly Brace တွေခံပြီး သုံးပေးစရာမလိုပါဘူး၊

တော်သေးပီ ။​ ။​

ဆက်ရန်။

Address

Monywa

Website

Alerts

Be the first to know and let us send you an email when Fawkes Creatives posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Share