React Native Installation for OSX

ด้วยเหตุที่ React Native เป็นระบบที่ใช้สำหรับพัฒนา Native App. สำหรับทั้ง IOS และ Android (ย้ำว่าเป็น Native App. นะครับ และนี่คือความแตกต่างที่ชัดเจนที่ React Native มีเหนือพวก hybrid mobile dev. framework ตัวอื่นๆ) จึงจำเป็นต้องมีการ install เครื่องมือบางอย่างที่จำเป็นสำหรับใช้ในการพัฒนาระบบ และด้วยความที่มันเป็น mobile dev. tools การติดตั้งจึงมีความยุ่งยากมากกว่า web dev. framework แน่นอน

โดยเนื้อหาในตอนนี้จะอ้างอิงจาก React Native Getting Started ซึ่งเป็น tutorial ของ facebook อย่างเป็นทางการ เพียงแต่ปัญหาของบทความนี้คือ มีรายละเอียดบางอย่างที่ตกหล่นไป ซึ่งหากจะติดตั้งจนใช้งานได้ทั้งในส่วนของ IOS และ Android นั้น อาจจะต้องมีการกล่าวถึงรายละเอียดเพิ่มเติม ซึ่งผมจะพูดไว้ในที่นี้ด้วย

IOS Installation

ก่อนอื่นจะกล่าวถึงการติดตั้ง React Native เพื่อใช้พัฒนาระบบ IOS กันก่อน โดยรายการสิ่งที่จะต้อง install ในเครื่องของ dev. จะมีดังต่อไปนี้

  1. XCode: ใช้เพื่อนำ code ของเราไป package เพื่อรันเป็น IOS app. และนำ React Library Library ไป build เพื่อนำไปรันใน IOS simulator อีกด้วย
  2. HomeBrew: ใช้สำหรับติดตั้ง watchman
  3. Node/NPM: Node คือ tool ที่ใช้รัน javascript โดยไม่ใช้ browser ส่วน NPM นั้นเป็นเครื่องที่ใช้สำหรับการจัดการ dependencies ของ module ต่าง (ซึ่งผมได้กล่าวถึงเรื่อง NPM ไว้อย่างละเอียดแล้วในคอร์ส React Basic)
  4. Watchman: เป็นเครื่องใช้สำหรับจับตาดูไฟล์ต่างๆ บนฮาร์ดไดร์ฟ ว่ามีการเปลี่ยนแปลงหรือไม่
  5. React Native CLI: เป็น command line tool สำหรับ React Native เป็นเครื่องมือเพื่อใช้สำหรับการสร้าง project ของ React Native

XCode Installation

อันนี้ง่ายครับ ใครยังไม่ติดตั้งก็ให้เข้าไปที่ App Store แล้ว search คำว่า xcode จากนั้นก็เข้าไปที่หน้า xcode เพื่อทำการติดตั้งให้เรียบร้อย โดยขั้นตอนก็ไม่มีอะไรมากครับ next -> next -> yes … ไปเรื่อยๆ จนจบ

screen-shot-2559-11-14-at-12-35-30-pm

ส่วนใครที่ติดตั้งอยู่แล้ว ก็ให้เช็คด้วยนะครับว่า xcode ของเราเป็นเวอร์ชั่นล่าสุดหรือยัง เพราะมีคำเตือนมาว่า xcode ที่ยังไม่อัพเดตให้เป็นเวอร์ชั่นล่าสุด จะสร้างปัญหาปวดหัวให้กับเราได้มากทีเดียว ดังนั้นสละเวลาซักนิดเพื่อ update xcode กันหน่อยเถอะครับ

HomeBrew installation

หากใครเคยใช้ Linux ในตระกูล Ubuntu จะรู้ว่า เวลาจะติดตั้งอะไรให้กับ Linux จะต้องทำผ่าน command apt-get ซึ่งเป็นอะไรที่ง่าย และสะดวกมากสำหรับพวกคลั่ง command line แบบผม

ใน OSX ของแมคนั้นก็พยายามจะทำตัวให้คล้ายกับ Linux ด้วยการสร้าง HomeBrew ไว้ด้วยจุดประสงค์สำหรับจัดการ application ต่างๆ ให้ใช้งานได้ง่าย แบบเดียวกับ apt-get วิธีการติดตั้งก็ไม่ยากครับ

เริ่มโดยเข้าไปที่เว็บ http://brew.sh/ ตรงหัวข้อ Install Homebrew ให้ copy คำสั่งสำหรับติดตั้งลงไปที่ terminal ของเรา ซึ่ง ณ วันที่ผมกำลังเขียนบทความนี้อยู่นั้น คำสั่งที่ได้มาจะเป็นดังนี้ (หากปัจจุบันคำสั่งในเว็บต่างจากที่ผมยกมา ก็ให้อ้างอิงของเว็บต้นทางเป็นหลักนะครับ)

หลังจากรันคำสั่งนี้

ถือเป็นการ update ฐานข้อมูลของ application ภายใน homebrew ทั้งหมด เพื่อความสะดวกสำหรับติดตั้งในภายหลัง

Node/NPM installation

ในเอกสารของ facebook ให้เราทำการ install Node/NPM ผ่าน HomeBrew แต่ผมไม่ชอบวิธีนั้น เลยใช้วิธีไปดาวน์โหลดที่เว็บ nodejs.org จากนั้นให้ดาวน์โหลดตัว package ติดตั้งมา โดยภายในเว็บจะมีให้เลือกสองเวอร์ชั่นหลักๆ คือ LTS และ Current ซึ่งบอกตรงๆ ว่าจะใช้ตัวไหนก็ได้ครับสำหรับคอร์สนี้ เลือกได้เต็มที่ไม่มีผลกระทบอะไรกับ code ของเราแน่นอน (ของผมเลือก Current version)

การติดตั้งก็ไม่มีอะไรครับ หลังจากดาวน์โหลดมาแล้วก็ next next yes yes แล้วก็จบปึ้ง ง่ายๆ สไตล์ dummy installation

Watchman installation

ให้เปิด terminal ขึ้นมาแล้วรัน command ดังต่อไปนี้

จบครับ แค่นี้เอง (ง่ายปะ)

React Native CLI installation

ถึงคราวพระเอกของเราแล้ว นั่นคือ React Native CLI โดยคราวนี้เราจะติดตั้งโดยใช้ NPM ดังคำสั่งต่อไปนี้

หมายเหตุ: หากมีปัญหาเรื่อง permission error ให้ใช้คำสั่ง sudo npm install -g react-native-cli แทนนะครับ

ทดสอบสร้าง React Native ตัวแรกกัน

ครั้งนี้เราจะใช้ CLI (Command Line Interface) ของ React-Native มาสร้างโปรเจ็กท์ทดสอบชื่อ “AwesomeProject” แล้วจากนั้นก็จะรันระบบบน emulator ด้วยคำสั่ง react-native run-ios ภายใน folder ของโปรเจ็กท์ โดยรันคำสั่งดังต่อไปนี้ ภายใน folder ที่เราอยากจะสร้างโปรเจ็กท์

รอซักพัก (ซึ่งก็นานใช่ย่อย แล้วแต่ spec. เครื่องของใครของมัน) หากไม่มีอะไรผิดพลาด มันจะโชว์ emulator ของ IOS ขึ้นมาให้ดังภาพ

screen-shot-2559-11-14-at-1-23-01-pm

แก้ไขหน้าจอ IOS App.

หลังจากที่รันจนสำเร็จแล้ว ให้ลองแก้ไขหน้าจอดู โดยให้ทำดังนี้

  1. เปิด index.ios.js แล้วแก้อะไรก็ได้ที่เราอยากจะแก้
  2. เข้าไปที่หน้าจอ simulator แล้วกดปุ่ม cmd+R เพื่อ reload หน้าจอ ซึ่งคุณจะได้เห็นการเปลี่ยนแปลงตามที่คุณได้ทำเอาไว้

ถือเป็นการจบขั้นตอนการติดตั้ง React Native สำหรับ IOS แล้วนะครับ

Android Installation

งาน install สำหรับ IOS สำหรับผมแล้วถือว่าเป็นงานกินหมูครับ เพราะมันง่าย แค่รู้ว่าต้องติดตั้งอะไร เมื่อไหร่ ก็จบ แต่สำหรับ android ไม่ใช่ครับ หินพอควร (และต้องอาศัยดวงหน่อยๆ ด้วย 555) มาเริ่มกันเลย

Android Studio installation

IOS ต้องคู่กับ XCode ส่วน Android ก็ต้องมี Android Studio เป็นเครื่องมือคู่ใจ ดังนั้น งานแรกที่ต้องทำก็คือติดตั้ง Android Studio ให้เรียบร้อยซะ โดยให้ไปดาวน์โหลดได้ที่ Android Studio

Android SDK and Emulator Installation

หลังจากติดตั้ง Android Studio ไปแล้ว (เวอร์ชั่นปัจจุบันในขณะที่ผมกำลังเขียนอยู่นั้น เป็นเวอร์ชั่น 2.2.2) ให้เปิด Android Studio ขึ้นมา รอจนมันเปิดขึ้นมาเป็นหน้า Welcome to Android Studio เราจะทำการตรวจเช็คว่า มีการติดตั้ง Android SDK และ Emulator ครอบคลุมหรือยัง

โดยให้คลิกที่ Configure แล้วเลือก SDK Manager ตามรูป

screen-shot-2559-11-14-at-3-00-09-pm

เมื่อเข้ามาอยู่ในหน้า SDK Manager ให้เราติ๊กช่อง Show Package Details (ที่อยู่มุมล่างขวา) เพราะแสดงรายละเอียดสิ่ที่ต้อง install ของ SDK แต่ละเวอร์ชั่น ในตอนนี้ แนะนำให้ install
Android 7.0 (Nougat) เพราะอาจจะมีโอกาสที่เราต้องใช้งานพวกเวอร์ชั่นเก่าๆ บ้าง จากนั้นให้ติ๊กคำว่า Show Package Details เพื่อจะได้สามารถเลือกได้ว่าจะติดตั้ง tool ใดบ้างภายใจ Android version นั้นโดยเวลาติดตั้งให้ติดตั้งให้ได้อย่างน้อยตามภาพข้างล่างscreen-shot-2559-11-14-at-3-09-18-pm

 

จากนั้นให้คลิกไปที่ tab SDK Tools (Tab ที่สอง) เพื่อเลือกติดตั้ง SDK build tools จากนั้นติ๊กถูกที่ Show Package Details เหมือนเดิม แล้วติดตั้งเวอร์ชั่น 24.x.x

screen-shot-2559-12-13-at-2-27-48-pmคือหากไม่ติดเรื่องพื้นที่จัดเก็บใน HDD ผมแนะนำให้ติดตั้งไปให้หมดเลยครับ ส่วนพอเราคล่องแล้ว (หรือสำหรับคนที่รู้เรื่อง android อยู่แล้ว) จะเลือกบางตัวก็ไม่ผิดกติกา แต่ขั้นต้นให้เลือกทุกตัว (จากรูปข้างต้นผมไม่ได้เลือกทุกตัว เพราะรู้แน่ๆ ว่าผมไม่ใช้ item เหล่านั้น)

พอคลิก Apply ไป ก็รอไปเลยครับ รอไป รอ รอ รอ… เพราะนานมากกกก คือแม่งติดตั้งเยอะมากครับ แนะนำให้เดินไปกินข้าวเที่ยง จิบกาแฟ เม้าท์กับสาวโต๊ะข้างๆ ก่อนก็ได้ครับ จะได้ไม่เสียเวลาชีวิต

SDK Build Tools Configuration

คราวนี้ปัญหานึงของการทำงานระหว่าง React Native กับ Android Studio ก็คือ เวลาตั้งโปรเจ็กท์ React Native ใหม่ๆ ขึ้นมา มันไม่รู้ว่า ตอนนี้ Android SDK ในเครื่องเรากำลังใช้เวอร์ชั่นอะไรเป็นหลัก (สำหรับ tutorial นี้ใช้ เวอร์ชั่น 7.0 (Nougat) เป็นหลัก) ดังนั้น เราต้องทำการ config ให้โปรเจ็กท์ React Native ใช้ SDK ให้ถูกตัว

ยังจำได้มั๊ย ก่อนหน้านี้ในขั้นตอนการติดตั้ง React Native สำหรับ IOS นั้น เราได้สร้างโปรเจ็กท์ทดสอบตัวหนึ่งชื่อ AwesomeProject โดยภายในโปรเจ็กท์นั้นจะมีโครงสร้างไฟล์ดังนี้ (ณ tutorial ตรงนี้ ผมยังขอไม่อธิบายเรื่องโครงสร้างของ React Native Project นะครับ ขอติดไว้สำหรับ tutorial ครั้งหน้า)

screen-shot-2559-11-14-at-3-33-40-pm

ให้เปิดไฟล์ AwesomeProject/android/app/build.gradle ขึ้นมา แล้วเลือกลงไปประมาณบรรทัดที่ 80 กว่า เพื่อหาตัว directive ที่ชื่อว่า compileSdkVersion กับ buildToolsVersion จากนั้นให้เปลี่ยนแปลงค่าให้เป็นไปตาม code ดังต่อไปนี้

สำหรับ compileSdkVersion นั้นจะเป็นการระบุว่าเราจะใช้ ตัว SDK ของเวอร์ชั่นอะไร สังเกตมั๊ยครับว่า ในที่นี้ระบุเป็นเวอร์ชั่น 24 ซึ่งมันก็คือตัวเลขเวอร์ชั่นของ Android SDK 7.0 นั่นเอง (7.0 ใช้เวอร์ชั่น 24 ส่วน 6.0 ใช้เวอร์ชั่น 23) ส่วน buildToolsVersion นั้นเป็น build tools ที่จะถูกหยิบมาใช้

วิธีดูว่า ตอนนี้ในเครื่องเรามี build tools อะไรอยู่ก็สามารถทำได้ง่ายๆ ดังนี้

สำหรับผู้ใช้ mac ให้เปิด terminal แล้วพิมพ์คำสั่งต่อไปนี้

มันจะแสดงเวอร์ชั่นต่างๆ ที่ติดตั้งอยู่ในเครื่องของเรา หากมันแสดเวอร์ชั่นไหนขึ้นมาก็ใช้ได้หมด (ในข้อแม้ต้องเป็นเวอร์ชั่นเดียวกับตัว compileSdkVersion ด้วยนะครับ เช่น หาก compileSdkVersion เป็น 24 ห้ามเรื่อง build-tools ที่ 23.0.1 เด็ดขาด เพราะมันไม่ compatible กัน)

โดยเครื่องของผมนั้นจะแสดงผลตามนี้

นั่นแปลว่าผมสามารถเลือกใช้ได้ทั้ง 24.0.0, 24.0.1 และ 24.0.3 แต่หากไม่มี

เมื่อ config ไฟล์ build.gradle เสร็จแล้วก็ให้ save ไฟล์ครับ

Set up Path

การรัน React Native CLI สำหรับ Android นั้นจำเป็นที่เราต้องเซต path ของระบบใน OSX ให้รู้จักกับ ANDROID_HOME ด้วย โดยให้เปิดไฟล์ ~/.bash_profile ขึ้นมา โดยใช้ editor อะไรก็ได้ที่คุณถนัด จากนั้น ให้เพิ่มบรรทัดสุดท้ายเข้าไปในไฟล์ดังกล่าว ดังนี้

จากนั้นให้ save แล้วออกมา (สำหรับไฟล์ .bash_profile นั้นเวลาจะ save อาจจะต้องใส่ password เวลา save)

จากนั้นให้กลับไปที่ terminal แล้วพิมพ์คำสั่งต่อไปนี้

หากทุกอย่างถูกต้อง terminal จะต้องแสดงผลเป็น path ของ ANDROID_HOME ให้เห็น

เปิด Emulator

สำหรับ Android นั้น คุณจะต้องเปิด Emulator ก่อนที่จะรัน React Native (ไม่เหมือนกับ IOS ที่สั่งรันปั๊บ ก็รัน emulator ให้เราอัตโนมัติ)

ให้ไปที่ terminal แล้วพิมพ์คำสั่งต่อไปนี้

จะเป็นการเปิดโปรแกรม Android Virtual Device ขึ้นมา

screen-shot-2559-11-14-at-7-22-18-pm

ให้คลิกปุ่ม Create ที่อยู่ทางขวามือ เพื่อสร้าง Emulator ขึ้นใหม่ (ในนี้เขาเรียกว่าเป็น Virtual Device) ให้กรอกข้อมูลประมาณนี้

screen-shot-2559-11-14-at-7-24-55-pm

ที่เน้นเลยก็คือ ช่อง Target ให้เลือกเป็น Android 7.0 – API Level 24 ซึ่งก็คือ SDK ของ Android 7.0 นั่นเอง อีกตัวหนึ่งที่สำคัญก็คือ CPU/ABI ให้เลือกตามที่เห็นจากรูป (ตัวนี้มีปัญหาเยอะมาก หากไม่ work ให้หา cpu ที่มัน match กับเครื่องของคุณจนกว่าจะเจอ ตัวนี้แหละที่ต้องอาศัยดวงช่วยนิดหน่อย) จากนั้นกดปุ่ม OK ก็เท่ากับได้สร้าง emulator เสร็จแล้ว

เมื่อกลับมาที่หน้า Android Virtual Device ให้คลิกเลือก device ที่เราเพิ่งสร้างมาเมื่อตะกี้นี้ จากนั้นคลิกปุ่ม start ด้านขวามือ เพื่อทำการ start emulator จากนั้นจะมี popup Launch Options ขึ้นมา บนหน้าจอนี้ให้ติ๊กเลือก Scale display to real size เพื่อให้ emulator มันแสดงผลอย่างเหมาะสมบนหน้าจอของเราscreen-shot-2559-11-14-at-7-30-27-pm

หากมันขึ้น error แบบหน้าจอข้างล่าง แปลว่ามีการเปิด virtualbox หรือ VM ค้างเอาไว้ (ในกรณีของเครื่องผมคือ เปิด docker ค้างเอาไว้)ให้ไปปิด service นั้นเสียก่อน แล้ว start virtual device อีกครั้ง

screen-shot-2559-11-14-at-7-34-50-pm

หากคุณทำบุญมาดี บวกกับชาตินี้เป็นคนรักษาศีล 5 เคร่งครัด คุณจะได้เจอกับภาพนี้

screen-shot-2559-11-14-at-7-37-46-pmจากนั้นให้คุณกลับไปที่ terminal แล้วรันคำสั่งต่อไปนี้ใน root folder ของ AwesomeProject

จากนั้นก็ให้คุณนั่งภาวนาไปครับ ท่องไว้ว่า “อย่าแฮงค์ อย่า error” “อย่าแฮงค์ อย่า error” อธิษฐานในใจว่า “ด้วยบุญกุศลที่ข้าพเจ้าเคยทำมาทั้งในอดีตชาติ และในปัจจุบันชาติ ขอจงดลบันดาลให้การ build React Native Android ครั้งนี้ ผ่านพ้นไปอย่างสะดวก สวัสดีด้วยเถิด” หากคุณทำบุญมามากพอ คุณจะเห็นภาพข้างล่าง

screen-shot-2559-11-14-at-7-49-53-pm

Troubleshooting

สำหรับบางคนที่เจอกับ error ดังต่อไปนี้

แปลว่าตัว Intel HAXM ยังไม่ใช่เวอร์ชั่นล่าสุด หรือยังไม่ได้ install และบังเอิญเหลือเกินว่าเจ้า intel HAXM นี้ดันติดมากับ Android SDK ด้วย ดังนั้น ให้เรารันคำสั่งต่อไปนี้

หากทุกอย่างเป็นไปได้ด้วยดี คุณจะเห็น termnal แสดงคำว่า “Silent installation Pass!” ออกมา จากนั้นก็ให้ restart ทุกอย่างตั้งแต่ Android AVD, Android Studio (หากเปิดอยู่), Terminal

สรุป

ถือเป็นอันเสร็จสิ้นการติดตั้งซอฟต์แวร์ที่จำเป็นสำหรับใช้พัฒนา mobile app. ทั้ง IOS และ Android บน Mac OSX ซึ่งในส่วนของการติดตั้งในฝั่ง IOS นั้นไม่ยาก ทำแป๊บเดียวก็เสร็จ

แต่นรกมันอยู่ตรงขั้นตอนการติดตั้ง Android นั่นแหละ และที่ยากที่สุดก็คือส่วนของการติดตั้ง emulator ที่ทั้งยุ่งยาก และแถมยังเขมือบทรัพยากรเครื่องจนแทบไม่เหลือ (Mac ผมแฮงค์ครั้งแรกก็ตอนรัน Android Emulator นี่แหละ) ซึ่งผมหวังว่า tutorial  ตัวนี้จะช่วยคุณผู้อ่านให้ไม่ต้องเจ็บปวดกับขั้นตอนการติดตั้ง React Native ได้บ้าง

โชคดี แล้วเจอกันตอนต่อไป กับขั้นตอนการติดตั้ง React Native บน Windows ครับ