React-Native එක්ක වැඩ කරන්න machine එක setup කරගන්නෙ කොහොමද?

ආයුබෝවන් සුබදවසක් වේවා කියලා ප්‍රාර්ථනා කරනවා ඔයාලා හැම දෙනාටම. ඔයාලා හැම කෙනෙක්ම ආදරයෙන් පිළිගන්නවා FutureTechmo blog එකට.

මේ මගේ පළවෙනි blog post එක, මම මුලින්ම කතා කරන්න හිතුවෙ React-Native ගැන,

මොකක්ද මේ React-Native කියන්නෙ,

React-Native  කියලා කියන්නෙ mobile-app හදා ගන්න use කරන cross-platform application  එකක්ඒ වගේම react-native වල use කරන්නෙ java-script කියන language එක. මොකක්ද මේ  cross-platform එකක් කියලා කියන්නෙ ඒ කියන්නෙ React-Native කියන platform එක use කරලා android-app වගේම ios-appනුත් හදා ගන්න පුලුවන්.

මම අද කතා කරන්නෙ windows os එකක react-native use කරලා android-app එකක් develop කරන හැටි.

හරි අපි එහෙනම් මුලින්ම බලමු React-Native එක්ක වැඩ කරන්න machine එක setup කරගන්නෙ කොහොමද කියලා. (දැන් React-Native වල version එක 0.57)

React-Native එක්ක වැඩ කරද්දී අපිට ඕන වෙනවා Node, React Native command line interface, Python2, JDK වගේම Android Studio. ඒ වගේම app එක develop කරන් යද්දී ඒ ඒ file වල වෙනස්කම් කරන්න editor එකකුත් ඕන, ඒකට Visual Studio වගේ editor එකක් use කරන්න පුලුවන්ඒකනම් ඉතින් සාමාන්‍ය විදියට download කරලා install කරන්න තියෙන්නේ.

හරි අපි දැන් බලමු Node, Python2, JDK setup කර ගන්නෙ කොහොමද කියලා.

අපි ඒකට use කරන්නේ windows වලට තියෙන Chocolatey කියන popular package එක. මේකෙන් අපිට පුලුවන් මේ dependencies තුනම එකපාර install කර ගන්න.

ඒකට Command Prompt  right click කරලා, select කරන්න "Run as Administrator" කියන type එක. එතකොට Administrator Command Prompt එක open වෙනවා.එකේ

choco install -y nodejs.install python2 jdk8

කියන command එක run කරන්න. ඊට පස්සෙ ඒ වැඩේ ඉවරයි.

ඒත් මතක තියා ගන්න ඕන දේ තමයි node හරි jdk හරි කලින් ඉඳලා machine වල install කරලා තිබුනා නම් node වල version එක 8.3 හරි ඊට වඩා වැඩි වෙන්න හරි ඕන, ඒ වගේම jdk වල version එක 8.0 හරි ඊට වඩා වැඩි වෙන්නත් ඕන.

හරි දැන් අපිට තියෙන්නෙ React Native CLI එක install කර ගන්න. 

ඒකට command prompt එකෙ හරි shell එකෙ හරි

npm install -g react-native-cli

කියන command එක run කරන්න.

ඊළඟට තියෙන්නෙ Android development environment එක හදා ගන්න. 

ඒ කියන්නෙ අපි හදන app එක test කරලා බලන්න අපි අපෙ machine එකේ virtual emulator එකක් හදා ගන්න ඕන. 

ඒකට මුලින්ම Android Studio download කරලා install කර ගන්න. ඒම කරද්දී installation type එක “Custom”  කියලා select කරන්නත් අමතක කරන්න එපා, ඒවගේම 

1.     Android SDK 

2.     Android SDK Platform 

3.     Performance (Intel ® HAXM) 

4.    Android Virtual Device කියන components තියෙන check boxes වලට ticks වැටිලා තියද කියලත් බලන්න.

දැන් තියෙන්නෙ Android SDK install කරන්න.

අපි අපෙ React-Native app එක build-up කරන්නෙ Android 8.0 (Oreo) කියන version එකෙන්. ඒ නිසා ඒ අදාළ emulator එක react native එක්ක connect කරන හැටි දැන් අපි බලමු.

Android Studio open කරන කොටම එන "Welcome to Android Studio" screen එකේ "Configure" එක click කරන්න. ඊළඟට "SDK Manager" select කරන්න.

එහෙම නැත්නම් Android Studio open කරලා "Preferences" dialog එකට ගිහින් Appearance & Behavior → System Settings → Android SDK කියන  path එකේ ගියත් හරි. 

ඊට පස්සේ SDK Manager එකේ තියෙන "SDK Platforms" tab එක select කරලා "Show Package Details" වලට click කරන්න. ඊට පස්සෙ Android 8.0 (Oreo) version එකේ Android SDK Platform 26 හා Google APIs Intel x86 Atom_64 System Image select කරන්න.

ඊට පස්සේ SDK Manager එකේ තියෙන "SDK Tools" tab එක select කරලා "Show Package Details" වලට click කරන්න. එතකොට "Android SDK Build-Tools" expand වෙලා පේනවා. ඒකෙන් 26.0.3 select කරන්න.

දැන් තියෙන්නෙ අපි කලින් select කර ගත්ත ඒවා download කරලා install කර ගන්න. ඒකට apply button එක click කරන්න.

හරි දැන් තියෙන්නෙ environment variable හදන්න.

ඒකට control panel එක open කරලා System and Security -> System -> Advanced system

settings -> Environment Variables -> new (user variables) කියන  path එකේ යන්න.

ඊට පස්සෙ  ANDROID_HOME new variable එක  add කරන්න.

සාමාන්‍යයෙන්  path එක  c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk 

actual location එක "Preferences" dialog ඒකෙ,  

Appearance & Behavior → System Settings → Android SDK path එකෙන් බලා ගන්න පුලුවන්.

දැන් තියෙන්නෙ emulator එක හදා ගන්න. 

ඒකට Android Studio Tool වලට ගිහින් AVD Manager -> Create Virtual Device වලට යන්න. ඊට පස්සේ ඔයා කැමති phone වර්ගයක් select කරලා next කරන්න.

එකෙ features වලට "x86 Images" tab එක select කරලා Oreo API Level 26, x86_64 ABI හා Android 8.0 (Google APIs) target click කරන්න.

අන්තිමට තියෙන්නෙ අපි හදා ගත්ත virtual device එක launch කරන්න. ඒකට next click කරලා finish කරන්න.

ඔන්න දැන් තියෙන්නෙ react-native project එකක් හදන්න.

ඒකට ඔයා කැමැති location එකකට ගිහින් command prompt එක open කර ගන්න. ඊට පස්සේ ඔයා කැමැති name එකකින් project එකක් හදන්න.

react-native init firstProject

මෙහෙම දුන්නොත්  project name එක firstProject.

ඊට පස්සේ cd firstProject  කියලා type කරලා ඒ project එක ඇතුළට යන්න.

ඊට පස්සේ මේ command එක run කරන්න.

react-native run-android

එතකොට පහළ රූපයේ වගේ react-native කියලා ආවොත් ඔයාගෙ emulator එක react-native එක්ක හරියට connect වෙලා තියෙනවා.

අදට එහෙනම් එච්චරයි. සුබ දවසක් ඔයාලා හැමදෙනාටම. ඉතින් මම හිතනවා ඔයාලට තේරෙන්න ඇති කියලා ප්‍රශ්ණ තියෙනවා නං comment කරන්න. තවත් අලුත් post එකකින් ඊළඟ පාර හමුවෙමු. Thank you!

Sanduni Wickaramathunga,

Undergraduate,

University of moratuwa