JavaScript အသံုုးၿပဳၿပီး Android နဲ႕ iOS app မ်ားေရးရေအာင

JavaScript အသံုုးၿပဳၿပီး Android နဲ႕ iOS app မ်ားေရးရေအာင္...

ေခါင္းစဥ္အတိုုင္းကိုု ကြ်န္ေတ္ာတိုု႔ေတြ JavaScript ကိုုအသံုုးၿပဳၿပီး Android နဲ႕ iOS app ေတြကိုုေရးႏိုုင္ပါတယ္။

ဒီ အေၾကာငး္အရာကအထူးသၿဖင္႔ mobile app developer  အေနနဲ႕ အသက္ေမြးဝမ္းေၾကာင္းၿပဳေနသူမ်ားအၿပင္ web developer  ေတြအတြက္ေကာ web design ေလ႔လာေနၾကသူမ်ားအတြက္ပါအလြန္အေထာက္ကူၿပဳပါတယ္..။

JavaScript နဲ႕ေရးတဲ႕ Android နဲ႕ iOS app ေတြကုုိတစ္နညး္ေခၚရရင္ hybrid app သုုိ႔မဟုုတ္ cross-platform app လုုိ႔လညး္ေခၚဆိုုႏိုုင္ပါတယ္။ ဒီ app ေတြရဲ႕ ထူးၿခားခ်က္က သူတိုု႔ရဲ႕ look & feel အထိေတြ႔ဟာ native app သုုိ႔မဟုုတ္ java, objective-c, swift တိုု႔နဲ႕ေရးထားတဲ႕ app  ေတြလိုု peformance စြမး္ေဆာင္ရည္အားဟာအလြန္ကုုိေကာငး္မြန္တဲ႕အၿပင္ iPhone နဲ႕ android phone ေတြရဲ႕ device specific feature ေတြကိုုအစ JavaScript API ေတြကမွတစ္ဆင္႔လွမး္ၿပီး access ၿပဳလုုပ္ႏိုုင္ပါတယ္။

ကြ်န္ေတ္ာတိုု႔အတြက္ java, objective-c, swift တိုု႔လိုု programming language background knowledge မရွိသူေတြအတြက္ဒီ JavaScript နဲ႕ app ေတြေရးႏိုုင္တာဟာ web knowledge ကေနမွတစ္ဆင္႔ mobile knowledge ကိုု transition လုုပ္ခ်င္တဲ႕ developer မ်ားအတြက္ အလြန္ကိုုအေထာက္ကူၿပဳပါတယ္။

လိုုအပ္ခ်က္ေတြအေနနဲ႕ကေတာ႔..

၁. Programming language အေနနဲ႕ JavaScript ကိုုအထူးကြ်မး္က်င္ဖိုု႔လိုုၿပီး HTML5, CSS3 အစရွိတဲ႕ နညး္ပညာေတြကုုိလညး္သိရွိထားမယ္ဆိုု
ပုုိၿပီးအေထာက္ကူၿဖစ္ပါတယ္။ HTML5, CSS3, JavaScript နဲ႕ ပါတ္သက္ၿပီး အထူးသၿဖင္႔ေလ႔လာခ်င္ရင္ေအာင္ပါ site ေတြမွာေလ႔လာႏိုုင္ပါတယ္။

http://www.w3schools.com/html/html5_intro.asp

http://www.w3schools.com/css/css3_intro.asp

http://www.w3schools.com/js/

၂. ကြ်န္ေတာ္တိုု႔ development ကိုုပုုိမိုုၿမန္ဆန္ေစဖိုု႔အတြက္ IDE (Integrated Development Environment) တစ္ခုုလိုုပါေသးတယ္။ ရိုုးရိုုး Notepad++ နဲ႕ Sublime Text ေတြကိုုအသံုုးၿပဳၿပီးေရးႏိုုင္ေပမယ္႔ အလုုပ္ပိုုမိုုတြင္က်ယ္ေစဖိုု႔အတြက္ IDE ကိုုအသံဳးၿပဳပါမယ္။ ဒီေနရာမွာကြ်န္ေတ္ာတိုု႔ Xcode, Eclipse with ADT, Android Studio တစ္ခုုကိုုမွသံုုးမွာမဟုုတ္ပါဘူး။ JavaScript ကုုိအသံုုးၿပဳၿပီးေရးတဲက app ေတြၿဖစ္တဲ႕အတြက္ JavaScript IDE ကိုုပဲအသံုုးၿပဳမွာပါ။ ေရြးခ်ယ္စရာေတြမ်ားၾကီးထဲကမွာ အေကာငး္ဆံုုး၂ခုုကိုုကြ်န္ေတ္ာအၾကံၿပဳခ်င္ပါတယ္။ Adobe Bracket နဲ႕  JetBrains နဲ႕ WebStorm ပါ။ Adobe Bracket ကေတာ႔ open source ၿဖစ္ၿပီး WebStorm ကေတာ႔ License version ၿဖစ္ပါတယ္။ ကြ်န္ေတ္ာရဲ႕ personal favorite ကေတာ႔  WebStorm ပါ။

http://brackets.io/

https://www.jetbrains.com/webstorm/

၃. ေနာက္ထပ္ ဒီ JavaScript အၿပင္ mobile app ေတြကိုု ေရးဖိုု႔သိသင္႔တာတစ္ခုုရွိပါေသးတယ္။ အဲ႕ဒါကေတာ႔ Google ရဲ႕  AngularJS Framework ပါ။ဒီေနရာမွာအဓိကထားေၿပာခ်င္တာက ဒီ AngularJS ကိုုမသိလညး္ၿပသနာေတာ႔မရွိပါဘူး ကြ်န္ေတာ္တိုု႔ရိုုးရိုုး Pure JavaScript ကိုုအသံုုးၿပဳၿပီးလည္းေရးႏိုုင္ပါတယ္။ ဘာလိုု႔ AngularJS ကုုိသိသင္႔သလဲဆိုုေတာ႔ ဒီ framework အသံဳးၿပဳၿပီး web app ေကာ mobile app ေကာ ၂ခုုလံုုးေရးႏိုုင္တဲ႕အၿပင္ ဒီ AngularJS ဟာ app ရဲ႕လိုုအပ္တဲ႕  MVC(Model-View-Controller) Design Pattern ကိုုပံုုေဖာ္ေပးႏိုုင္ၿပီး app အတြက္လိုုအပ္တဲ႕  business logic ေတြသာမက backend data access, front end presentation အစရွိတဲ႕အရာေတြကိုုပါ ဒီ AngularJS ကုုိအသံုုးၿပဳၿပီး handle လုုပ္ႏိုုင္တဲ႕အၿပင္ data binding ကိုုပါအေထာက္ကူၿပဳပါတယ္။ AngularJS ဟာ JQuery မွာလုုိအပ္ေနတဲ႕လိုုပ္အပ္ခ်က္မ်ာ်းကိုုၿဖည္႔စြက္ေပးထားၿပီး DOM(Document Object Model) Manipulation ကိုုပါ လြန္စြာေလ ွ်ာ႔ခ်ေပးထားတဲ႕အတြက္ မသိမၿဖစ္သိသင္႔တဲ႕ Framework တစ္ခုုပါ။ လက္ရွိ ၂၀၁၅ အတြက္ Top 1 ၿဖစ္ေနတဲ႕ JavaScript Framework လိုု႔ေတာင္ေၿပာလိုု႔႔ရပါတယ္။

https://docs.angularjs.org/guide/introduction

၄. ဒီ JavaScript နဲ႕ AngularJS Framework ေတြကိုုနားလည္တတ္ကြ်မး္ၿပီးၿပီဆိုုရင္ mobile friendly ၿဖစ္မယ္႔ user interface or UX ေတြကိုုတည္ေဆာက္ေပးဖိုု႔ UI framework တစ္ခုုလိုုပါေသးတယ္။ အဲ႕ဒီအတြက္ Internet ေပၚမွာရာေပါင္းမ်ားစြာ mobile UI framework ေတြရွိပါတယ္ ဥပမာ  JQuery Mobile, Sencha Touch, Kendo UI နဲ႕ Facebook ကထုုတ္ထားတဲ႕ React ဆိုုၿပီး ေရြးခ်ယ္စရာေၿမာက္မ်ားစြာရွိပါတယ္။ ကြ်န္ေတ္ာတိုု႔အခုုသံုုးၿပဳမွာကေတာ႔ အဲ႕ဒီေရြးစရာေတြအမ်ားၾကီးထဲကမွာ HTML5, CSS3 နဲ႕ Angular တိုု႔ နဲ႕ friendly အၿဖစ္ဆံုုး Ionic Framework ၿဖစ္ပါတယ္။ Ionic ဟာဆိုုရင္ android နဲ႔ iOS app ေတြအတြက္ native UI လိုုမ်ိဳး ဖန္တီးေပးတဲ႔အၿပင္ android နဲ႕ iOS မွာရွိတဲ႔ animation ေတြကုုိကအစ ဒီ Ionic Framework ကိုုအသံုုးၿပဳၿပီးရရွိႏိုုင္ပါတယ္။ Developer ေတြအတြက္ေလ႔လာရတာအရမး္လြယ္ကူသလိုု Google ရဲ႕ AngularJS နဲ႕ ၁၀၀ရာခိုုင္ႏႈန္းေကာငး္မြန္စြာအလုုပ္လုုပ္ပါတယ္။

http://ionicframework.com/
http://learn.ionicframework.com/

၅. အခုု UI Framework ကိုုေလ႔လာၿပီးၿပီဆိုုရင္ ေနာက္ဆံဳးလိုုအပ္တာတစ္ခုုရွိပါတယ္။ အဲ႕ဒါကေတာ႔ Device specific feature ေတြကိုု access လုုပ္ဖိုု႔ လိုုအပ္တဲ႔ JavaScript Framework ပါ။ ဒီအတြက္ ကြ်န္ေတ္ာတိုု႔မွာေရြးခ်ယ္စရာ၂ခုုရွိပါတယ္။ Adobe PhoneGap သုုိ႔မဟုုတ္ Apache Cordova ပါ။ ဒီ၂ခုုကုုိအသံုုးၿပဳၿပီး Android နဲ႕ iOS ရဲ႕ native features ဥပမာ camera, geolocation, contact, phone dialer, SMS, Email, Fingerprint အစရွိတဲ႕ device specific feature ေတြကိုုလွမး္ၿပီး access ၿပဳလုုပ္ႏုုိင္ပါတယ္။ ဒီေနရာမွာအၾကမး္ဖ်ဥ္းမွတ္လိုု႔ရတာကေတာ႔ Adobe PhoneGap နဲ႕ Apache ရဲ႕ Cordova က တူတူပါပဲ။ ဥပမာ Safari နဲ႕ Chrome ဟာ မတူညီတဲ႕ company ၂ခုုရဲ႕  browser ေတြၿဖစ္ေသာ္လညး္ သူတိုု႔ရဲ႕ browser rendering engine ဟာ WebKit ေပၚမွာပဲအေၿခခံထားတာၿဖစ္ပါတယ္။ ကြ်န္ေတ္ာကေတာ႔ဒီေနရာမွာ Apache Cordova ကိုုပဲအသံုုးၿပဳဖိုု႔အၾကံၿပဳခ်င္ပါတယ္။ ၂ခုုလံုုးက open source ၿဖစ္ၿပီး download လုုပ္ကာ လုုိအပ္တဲ႕  plugin ကုုိ install လုုပ္ၿပီး အသံုုးၿပဳရံုုပါပဲ။

https://cordova.apache.org/

http://phonegap.com/

၆. ေနာက္ဆံုုးအေနနဲ႕ကေတာ႔ နညး္နညး္ေလာက္သိရင္အဆင္ေၿပတဲ႕အရာေတြၿဖစ္ပါတယ္။ သိပ္ေတာ႔အေရးမၾကီးပဲ သိထားရံုုေလာက္နဲ႕တင္လုုံေလာက္တဲ႕အရာေတြပါ။ အဲ႕ဒါေတြကေတာ႔ Bower, Gulp, NodeJS အစရွိတဲ႕နညး္ပညာေတြၿဖစ္ပါတယ္။ ဒီေကာင္ေတြကုုိပုုိၿပီးသိထားမယ္ဆိုုရင္ေတာ႔ app development ကုုိပုုိၿပီးၿမန္ဆန္ေစတဲ႕အၿပင္ JavaScript Packages ေတြကိုုလညး္ပုုိၿပီးလ်င္ၿမန္စြာအသံုုးၿပဳႏိုုင္ပါတယ္။ NodeJS ကုုိသိထားသည္႔အတြက္လညး္ Backend development ကိုု JavaScript  အသံုုးၿပဳၿပီး full stack backend တစ္ခုုကိုု develop လုုပ္ႏိုုင္ပါတယ္။

http://bower.io/

http://gulpjs.com/

https://nodejs.org/

ကြ်န္ေတ္ာတိုု႔အဓိကၿပန္ၿပီး ခ်ံဳငံုုၾကည္႔မယ္ဆိုုရင္ေတာ႔ JavaScript နဲ႕ Android iOS app ေတြကုုိေရးဖိုု႔ JavaScript ကုုိ intermediate level အလည္အလတ္အထိတတ္ကြ်မ္းဖိုု႔လိုုအပ္ၿပီး HTML5, CSS3, AngularJS, Apache Cordova အစရွိတဲ႕ နညး္ပညာမ်ားကုုိတတ္ကြ်မ္းထားဖိုု႔လိုုပါတယ္။ ဒါေတြကိုုပိုုင္ပိုုင္ႏိုုင္ႏိုုင္သိရွိထားၿပီးၿပီဆိုုရင္ေတာ႔ JavaScript ကိုုအသံုုးၿပဳၿပီး cross-platform တစ္နညး္ေၿပာရရင္ hybrid iOS နဲ႕ Android ေတြကိုု ေရးသားႏိုုင္ၿပီၿဖစ္ပါတယ္။
JavaScript ဟာတစ္ကယ္ေတာ႔ၿပီးၿပည္႔စံုုတဲ႕ language တစ္ခုုပါ။ အထူးသၿဖင္႔ေနာက္လာမယ္႔ အနာဂါတ္အလားအလာအရ ထပ္ၿပီးပိုုမိုုၿပီးၿပည္႔စံုုတဲ႕ standard ဥပမာ ECMA6 လိုုမ်ိဳး JavaScript 6 ဟာ ေနာက္ဆံဳးထြက္ browser ေတြမွာအေထာက္အပံ႔ေပးလာမယ္႔အၿပင္ developer ေတြအတြက္ web development သာမက mobile app development အတြက္ပါ အေထာက္ကူေပးႏိုုင္တဲ႔ language တစ္ခုုပါ။ JavaScript 6 သုုိ႔မဟုုတ္ ECMA6 features ေတြကုုိေအာက္မွာဖတ္ႏိုုင္ပါတယ္။

https://github.com/lukehoban/es6features/blob/master/README.md

အခုုကြ်န္ေတ္ာေဖာ္ၿပထားတဲ႔ framework ေတြ JavaScript knowledge ေတြၿပည္႔စံုုၿပီဆိုုရင္ေတာ႔ JavaScript ကုုိသံုုးၿပီး android နဲ႕ iOS app ေတြကုုိကိုုယ္တိုုင္ကိုုယ္ၾကစတင္ေရးသားႏုုိင္ပါၿပီ။ အခုုေအာက္က link မွာလညး္ JavaScript app  နဲ႕ေရးထားတဲ႕ app ေတြကုုိသြားေရာက္ၾကည္႔ရႈႏိုုင္ပါတယ္။

http://showcase.ionicframework.com/

ေနာက္လာမယ္႔ရက္ေတြမွာ C#.NET ကိုုအသံုုးၿပဳၿပီး android နဲ႔ iOS app ေရးနညး္ေတြကုုိလညး္ေဖာ္ၿပေပးပါဦးမယ္..။

IT4M
(PPK)