React Native ตอน… มันเริ่มยังไงนะ (Windows Version)

สวัสดีครับ บล็อกนี้ก็เป็นบล็อกเเรกของผมนะครับกับการเขียน React Native หลังจากที่ศึกษาเเละเรียนรู้มาเกือบ 4 เดือน ฮ่าๆๆ กับโปรเจค 1 โปรเจค 555+
มาเข้าเรื่องกันครับ!!
มีคำถามหลายๆว่า ทำไมถึงเลือกใช้ React Native ล่ะ ทั้งๆ ที่ Framework สำหรับสร้างเจ้า Hybrid App ก็มีตั้งหลายตัวเเต่ก็เลือก React Native มาใช้งาน
เเละก็มีคำถามอีกว่า?? ทำไมไม่ใช้พวกภาษา JAVA หรือ Swift ล่ะ มันเร็วกว่านะ ฮ่าๆๆ ใช่ครับมันเร็วกว่า Hybrid App เเต่โดยพื้นฐานของผมถนัดกับภาษา JavaScript มากกว่าครับเเละยังมี React JS ที่เป็น Framework สำหรับ Web Application ดังนั้นการศึกษา React Native เพียงอย่างเดียว ทำให้สามารถไปประยุกต์ใช้กับ React JS ได้ด้วย เหมือนยิงนกตัวเดียวนกตายตัวเดียวเลยครับ เอ้ยไม่ใช่!! ยิงนกตัวเดียวได้นกสองตัวครับ ฮ่าๆๆ
เอาล่ะโม้กันมานานมาเข้าเรื่องกันดีกว่าครับ :D
โดย Editor ที่ผมใช้ก็เป็น VS code นะครับ สามารถ Download ได้จากลิงค์ด้านล่างเลย

https://code.visualstudio.com/download
เเละเครื่องมือที่สำคัญอีกอย่างหนึ่งนั่นก็คือ Android Studio oh oh oh hh!! ฮ่าๆๆ Download ได้จากลิงค์นี้เลยครับ
https://developer.android.com/studio/
ส่วนวิธีติดตั้งไว้จะมาเขียนอธิบายทีหลังนะครับ หรือสามารถศึกษาได้เองเลยครับผม
โดย React Native ต้องการ เครื่องมือที่จะทำให้ตัวมันเองสามารถทำงานได้ ประกอบไปด้วย Node JS , Python, Java SE Development Kit (JDK) โดยเราจะติดตั้งทั้ง 3 ผ่าน Chocolatey (เจ้าตัวนี้มันคือตัวจัดการ Package ของ Windows ครับ) โดยสามารถ Download ได้ที่นี่เลยครับ
มาติดตั้งเจ้า Chocolatey กันเลยครับ โดยผมจะติดตั้งผ่าน Cmd ที่เราคุ้นเคยกันบน Windows นะครับ โดยเราจะเปิด Cmd เเบบ Run Administrator นะครับ
จากนั้น Copy ข้อความด้านล่างนี้ไปใส่ Power Shell ครับผม เเล้วกด Enter ครับ
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"เพียงเท่านี้ Chocolatey ก็จะไปอยู่ในท้องของคุณเเล้ว เอ้ย!! ไม่ใช่ เเต่มันจะไปอยู่ในเครื่องของคุณเเล้วครับ ฮ่าๆ
จากนั้นนะครับเราก็ต้องติดตั้ง 3 ทหารเสือก่อนที่จะลง React Native นะครับโดยใช้ เจ้า Cmd ตัวเดิมนั่นเเหละครับ เเล้วใช้คำสั่งนี้ครับผม
choco install -y nodejs.install python2 jdk8*ข้อควรระวังนะครับหลังจากลง Node JS เสร็จเรียบร้อยเเล้ว อย่าลืมตรวจเช็คด้วยนะครับว่า Node JS ของเรานั้น 8.3 หรือใหม่กว่า เเละ JDK นั้นเป็น Version 8 หรือ ใหม่กว่าหรือเปล่า
เมื่อติดตั้ง 3 ทหารเสือเสร็จเรียบร้อยเเล้วก็จะมาติดตั้งเจ้า React Native กันบ้างครับโดยใช้คำสั้งนี้เลย
npm install -g react-native-cliไม่ต้องเเปลกใจครับว่าเจ้า npm นั้นมาจากไหม มันคือ Package Manager ของ Node ที่ติดมาตอนที่เราติดตั้ง Node JS นั่นเองครับ
เอาล่ะทีนี้เรามาตั้งค่าเจ้าตัว Android Studio ที่เราติดตั้งลงไปกัน เมื่อเราเปิด Android Studio ขึ้นมาเเล้วเนี่ย ก็จะพบกับหน้าตาประมาณนี้ โดยก่อนติดตั้งคุณต้องตรวจสอบ รายการต่อไปก่อนก่อนการติดตั้งตั้งนะครับ
Android SDKAndroid SDK PlatformPerformance (Intel ® HAXM)Android Virtual Device

จากนั้น เลือก Configure -> SDK Manager -> Android SDK

จะเจอกับหน้าตาประมาณนี้ครับโดยปกติเเล้วเนี่ย ผมจะใช้ SDK Platforms ตัวล่าสุดของทาง Android เเต่เนื่องจากต้องการให้เป็นที่ให้สามารถยอมรับโดยทั่วไปได้เเละผู้ที่พึ่งเริ่มเรียน React Native ผมจะอ้างอิงจาก Doc ของ React Native เเล้วกันนะครับ โดย SDK Platforms ที่เราจะใช้กันก็คือ Android 8.1 (Oreo) ครับ โดยคุณต้อง
ติ้กช่อง Show Package Details เพื่อเเสดงรายละเอียดของ SDK Platforms ของเเต่ละตัวครับ (ซึ่งคลิกติดตั้งรายละเอียดของ Package เเบบทั้งหมดได้เลยเเต่ถ้าอินเทอร์เน็ตช้า ก็รอไปนะครับ ฮ่าๆๆๆ) เเละผมจะเลือกติดตั้งเฉพาะบางตัวที่สำคัญ React Native เท่านั้นครับซึ่งได้เเก่
Android SDK Platform 27Intel x86 Atom_64 System ImageorGoogle APIs Intel x86 Atom System Image
หลังจากนั้นเราก็จะไปตั้งค่าตัวเเปรที่เก็บเส้นทางของ SDK ครั
คลิกขวาที่ This PC ->Advanced System Setting

กดทีี่ Environment Variables -> New เเละสร้างชื่อตัวเเปรว่า ANDROID_HOME
เเละค่าของตัวเเปรเป็น
c:\Users\ชื่อผู้ใช้งานในเครื่องคอมพิวเตอร์ของคุณ\AppData\Local\Android\Sdkเป็นอันเรียบร้อยเเล้วครับ จากนั้นเรามาติดตั้งพระเอกของงานกันครับโดยใช้คำสั่ง
react-native init AwesomeProject //AwesomeProject คือชื่อโปรเจคที่เราจะสร้างจากนั้นมาทดลอง Run Application ของเรากันโดยปกติเเล้วมีวิธีรัน 2 วิธี
- ใช้อุปกรณ์จริงในการรัน
- ใช้ Simulator ในการรัน
ในที่นี้ผมถนัดใช้อุปกรณ์จริงรันมากกว่าจึงของข้ามการใช้ Simulator ไปนะครับ
เมื่อเราต้องการรันให้เราเข้าไปในโฟลเดอร์ที่ App เราอยู่ด้วยคำสั่ง (อย่าลืมเสียบสาย USB เเละเปิดโหมด Developer บนอุปกรณ์ของคุณด้วยนะครับผม)
cd AwesomeProjectจากนั้นเมื่อเราต้องการรันสามารถใช้
react-native run-androidเสร็จเรียบร้อยครับ
นี่ก็เป็นบล็อกเเรกของผม หากผิดพลาดประการใดก็ต้องขออภัยมานะที่นี้ด้วยนะครับ สวัสดีครับ
