มาลุย React Native บน Windows กัน

ก่อนที่เราจะเริ่มกันเรามาทำความรู้จักกับ React Native กันก่อนครับที่ทำไมมันถึงได้รับความนิยมสูงมากในขนาดนี้ React Native คือ open source ที่ถูกพัฒนาโดย Facebook ที่พัฒนามาจากภาษา Javascript เพื่อให้สามารถพัฒนา Moblie Application ได้ทั้ง Android และ iOS

เรามาเริ่มติดตั้ง React Native กัน

- ติดตั้ง Node .Js , Python และ Java jdk ผ่านทาง Chocolatey

• ให้ Download Chocolatey ที่นี่ Download แล้ว copy ไฟล์ ที่ cdm.exe

• ให้เปิด Command Prompt โดยผ่านระบบ Administrator ( ไปที่ Command Prompt คลิกขวา แล้วเลือก Run as administrator แล้วนำไฟล์ที่ copy มาวางที่ Command Prompt กด Enter เพื่อติดตั้ง
• ถ้าติดตั้ง Chocolatey เรียบร้อยแล้ว จากนั้นเรียกใช้คำสั่ง choco เพื่อติดตั้ง Node.js, Python2, Jdk8

$ choco install -y nodejs.install python2 jdk8

• ติดตั้ง module ที่ชื่อ react-native-cli โดยให้ npm ทำหน้าที่จัดการ ตรวจสอบชื่อ package ใน registry เมื่อพบแล้วและมันจะดาว์นโหลดมาให้เราทันที

$ npm install -g react-native-cli

• มา check Node.js กับ npm กันให้เข้าไป Command Prompt โดยพิมพ์คำสั่ง

$ node -v

Node.js Version

• หลังจากที่ติดตั้ง Java Jdk มาแล้ว มา set path java jdkให้ไปที่ This PC ให้คลิกขวาแล้วเลือก properties
• ต่อมาให้เข้า Advanced system settings แล้วให้เลือกที่ Advanced แล้วไปที่ Environment Variables

• ให้ไปที่ User variables for Your_ComputerName เลือกที่ New ตรง Variable name ให้ชื่อ JAVA_HOME ส่วน Variable value ให้ใส่ Path ที่เราติดตั้งไปส่วนของผมจะอยู่ที่ C:\Program Files\Java\jdk1.8.0_162 กด OK แล้วกดปิดโปรแกรม

- ติดตั้ง Android Studio

• Download Android Studio ที่นี่ Download ถ้าติดตั้ง
• จากนั้นเปิด Android Studio ขึ้นมาให้ไปที่ Configure เลือก SDK Manager

นอกจากนี้ยังสามารถเข้าไปที่ SDK Manager ได้อีก 1ช่องทางได้ ให้ไปที่ “Preferences” Appearance & Behavior → System Settings → Android SDK.

• ให้เลือก Andriod SDK ให้ไปที่ SDK Platforms คลิกที่เลือก Android 6.0 (Marshmallow) คลิกที่ “Show Package Details” เพื่อให้แสดงรายละเอียดทั้งหมด แล้วให้เลือกรายการต่อไปนี้ทั้งหมด

- Google APIs
- Android SDK Platform 23
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image

• ต่อไปให้เราเลือก SDK Tools เลือกคลิกที่ “Show Package Details” แล้วให้ไปที่ “Android SDK Build-Tools” ให้คลิกที่ Version 23.0.1 หลังจากนั้นให้กด Apply ตามด้วยกด OK

• จากนั้นให้เรา set path ให้ Android กัน โดยให้ไป This PC ให้คลิกขวาแล้วเลือก Properties ให้เข้า Advanced system settings แล้วให้เลือกที่ Advanced แล้วไปที่ Environment Variables

• ให้ไปที่ User variables for Your_ComputerName เลือกที่ New ตรง Variable name ให้ชื่อ ANDROID_HOME ส่วน Variable value ให้ใส่ Path ที่เราติดตั้งไป C:\Users\React\AppData\Local\Android\Sdk แล้วกด OK แล้วกด OK อีกรอบเพื่อปิดโปรแกรม

ถ้าเราไม่ทราบว่า Andriod SDK ติดตั้งไว้ที่ไหนให้เราเปิดโปรแกรม Android Studio ขึ้นมาให้ไปที่ Configure เลือก SDK Manager โดยที่ Android SDK Location จะแสดง Path ไว้ครับดังภาพ

อีกจุดหนึ่งสำคัญที่ทำให้ไม่สามารถ Run App ได้นั้น คือของ Region ครับ ให้ไปที่ Control Panel -> Clock, Language and Region -> Region ให้เลือกภาษาเป็น Enlish ( United States) (อาจจะใช้ไม่ได้ทุกเครื่องแต่ถ้า Run App ไม่ได้ก็กลับมาลองได้ครับ ผมรับรองมัน Work แน่นอน )

- มาเริ่มสร้าง Application ด้วย React Native

• เปิด Command Prompt ขึ้นมา โดยผ่านระบบ Administrator ( ไปที่ Command Prompt คลิกขวา แล้วเลือก Run as administrator เพื่อสร้าง Project ขึ้นมาใหม่ที่ชื่อ AwesomeProject โดยมันจะไป Generate New Ptoject ด้วย React Native ขึ้นมาใหม่

$ react-native init AwesomeProject

• พอติดตั้งเสร็จเรียบร้อย ให้เราเปิดโปรแกรม Andriod Studio ขึ้นมา “Open an existing Android Studio project” โดยไปที่ Path ที่ติดตั้ง React Native ส่วนของผมจะอยู่ที่ C:\Users\React\Desktop\AwesomeProject\android แล้วกด OK โดยรอมันประมวลผลประมาณ 5 นาที

• พอเข้าโปรแกรมมาให้ไปที่มุมขวาบนดังภาพ เพื่อมาสร้าง Virtual device (จำลองมือถือขึ้นมาเพื่อใช้รัน Application )

• แล้วให้คลิกที่ Create Virtual Device

• ให้เลือกที่ Phone Nexus 5X แล้วกด Next

• ต่อมาเลือกที่ x86 Images แล้วเลือก Marshmallow API Level 23, x86_64 Andriod 6.0 (Google APIs) แล้วกด next

• โดยใส้ชื่อ AVD Name ที่ Statup orientation เลือก Portrait แล้วกด Finish

• ติดตั้งเสร็จแล้วไปที่ Action Launch this AVD in the emulator

• ต่อมาให้เปิด Command Prompt ขึ้นมา โดยผ่านระบบ Administrator ( ไปที่ Command Prompt คลิกขวา แล้วเลือก Run as administrator ให้เข้าไปที่ Folder ที่เราติดตั้งโดยใช้คำสั่ง CD แล้วสั่งให้ Run App

$ cd AwesomeProject 
$ react-native run-android

• โดยมันจะเชื่อมต่อกับ Virtual Device ที่เราติดตั้งไว้ ดังภาพ

ก็จบกันไปเรียบร้อยแล้วนะครับ สำหรับ React Native บน Window ครั้งต่อไปเรามาลองเขียน Application กันครับ