วิธีรัน Genymotion ด้วย Expo สำหรับ React Native

วิธีรัน Genymotion ด้วย Expo สำหรับ React Native
05/02/19   |   4k   |  

เชื่อว่าหลายคนคงติดปัญหากันก็มากไม่น้อยสำหรับการตั้งค่า Environment ต่างๆ ในการพัฒนา Application ด้วย React Native โดยเฉพาะทางฝั่งของ Android เพราะทาง IOS นั้นเครื่องมือ Xcode นั้นจะค่อนข้างเสถียรและไม่ค่อยมีปัญหาเท่าไหร่ แต่สำหรับการ Simulate Android นั้นจะค่อนข้างต้องติดตั้งและตั้งค่ามากมาย แต่ในบทความนี้เราจะมาทำเรื่องที่ยุ่งยากให้เป็นเรื่องง่ายๆ กันครับ ด้วยการใช้ Expo ร่วมกับ Genymotion Emulator ครับ ว่าแล้วเราก็มาลุยกันเลยดีกว่าครับ

ติดตั้ง Expo ก่อนเป็นอันดับแรก

ไม่ลีลาให้เสียเวลาก็รันคำสั่งด้านล่างเพื่อ Install เจ้า Expo กันเลยครับ

sudo npm install -g expo-cli

ลองสร้าง App แรกของเรากันดู และ cd เข้าไปยัง Folder ที่สร้างครับ

expo init myApp
cd myApp

เมื่อเข้ามาใน App แล้วก็รัน Start ด้วยคำสั่งนี้เลย

npm start หรือ yarn start

เมื่อรันแล้วจะได้ QRCode สำหรับให้ Application Expo สแกนเพื่อ Debug โปรแกรมครับ เมื่อเรานำ Smart phone ที่มี App Expo มาสแกนก็จะได้หน้า App ที่เราสร้างขึ้นมาครับ

QRCode Expo

แต่อย่างไรก็ตามครับ ในบทความนี้เราจะไม่ Debug โปรแกรมใน Smart phone ครับ เพราะเราจะให้ตัว Emulator เป็นตัว Debug ครับ และนั่นก็คือ Genymotion Emulator ครับ เรามาดูการติดตั้งกันดีกว่า

ติดตั้ง Android Studio

ก่อนอื่นต้องติดตั้ง Android Studio ก่อนครับ เพราะว่าจะเป็นตัว Compile Program สำหรับ Android ครับ วิธีติดตั้งก็ทำตามนี้เลยครับ

Download Android Studio ที่ https://developer.android.com/studio/

ทำการติดตั้งตามขั้นตอนดังนี้เลยครับ

จากนั้นก็รอ.....

จนกว่าจะเสร็จครับ ถ้าเสร็จแล้วก็ให้กด Finish เลยครับ

หลังจากนั้นเราก็มา Install SDK ครับ ทำตามขั้นตอนข้างล่างนี้เลยครับ

Install SDK

ในส่วนนี้ให้เลือกติ๊กถูกที่ Android SDK Platform 27, Android SDK Platform 26, and Android SDK Platform 25 นะครับ

ต่อมาเลือก Tab SDK Tools ครับ และติ๊กถูกตรง Android SDK Platform-Tools, และ Android SDK Tools ตามรูปด้านล่างครับ

กด Apply และ และก็กด Acept ก็รอครับ

และก็รอ ร๊อ รอ...

รอ แล้ว รอ อีก ...

ยังไม่เสร็จอีก...

รอต่อไปครับ...

เย้!! เสร็จแล้วครับ

เมื่อติดตั้ง SDK เสร็จแล้วก็กด Finish ได้เลยครับ

จากนั้นให้เราเพิ่ม Path ครับ โดยการเปิด Terminal และพิมพ์คำสั่ง vi ~/.bash_profile จากนั้นเพิ่มโค้ดด้านล่างนี้ครับ

export PATH=/Users/{YourUser}/Library/Android/sdk/platform-tools:$PATH

ให้ Save file และปิด Terminal และก็เปิดขึ้นมาใหม่ครับ

เมื่อได้แล้วก็ลองพิมพ์คำสั่ง

adb --version

ถ้าหากมีรายละเอียด Version ของ abd ขึ้นมาแสดงว่าเรียบร้อยถูกต้องทุกขั้นตอนครับ

ในขั้นตอนการติดตั้ง Android Studio และ SDK ก็สำเร็จเรียบร้อยแล้วครับ

ต่อมาเราจะมาติดตั้งเจ้า Genymotion Emulator กันครับ

ติดตั้ง Genymotion Emulator

ให้เข้าไป Download ตัว Install ที่ https://www.genymotion.com/fun-zone/

ให้เลือกเป็น For personal use only นะครับ เพราะเราจะใช้แบบฟรีกันครับ

พอกด Download ระบบจะบังคับให้ Sign in ดังนั้นเราจะต้องสมัครสมาชิคก่อนนะครับ แต่สำหรับใครที่มี Account แล้วก็สามารถ Sign in ได้เลยครับ

เมื่อ Download แล้วก็ติดตั้งได้เลยครับ ในส่วนนี้ไม่น่ายากครับ ให้ติดตั้งตามที่ระบบแนะนำเลยครับ

เมื่อ Download และติดตั้ง Genymotion แล้ว.......

ให้เปิด Genymotion Emulator ขึ้นมาโล้ดดด

ให้เราทำการ Sign in โดยใช้ User ที่เราสมัครตอน Download ได้เลยครับ

Genymotion Emulator

โปรแกรมจะถามหา License ซึ่งเราไม่มีก็ให้เลือกเป็น Personal Use ตามรูปด้านล่างได้เลยครับ

และสุดท้ายให้กดยอมรับข้อตกลง และก็กด Next โล้ดครับ

เมื่อเสร็จแล้วจะได้แบบรูปข้างล่างนี้นะครับ

แต่อย่างไรก็ตามตอนนี้เจ้า Genymotion มันยังไม่รู้จัก Path ของ Android SDK Tools ครับ ดังนั้นเราต้องไปเพิ่ม Path ให้มันรู้จักซักหน่อยครับ ให้ทำตามนี้เลย

  • Genymotion -> Preferances -> ADB -> เลือก Use custom Android SDK tools
  • เพิ่ม Path ของ Android SDK tools

 

ในตอนนี้เราจะได้ Simulator Android มาแล้วครับ

ให้เราเลือกใช้ Version Android ที่ Application Expo รองรับนะครับ

ในที่นี้ผมเลือก Version 7.1-API 25 ครับ

ทำไมต้องเลือก Version ที่ Support Expo ก็เพราะว่าในการรัน Expo นั้น เครื่องจำลอง Android ก็จะต้อง Download Expo มาลงไว้ที่เครื่องครับ ดังนั้น Version Android จะต้องรองรับ Expo ด้วยครับ

เอาล่ะ ให้เราเลือก Device และก็ Double click เพื่อเปิด Device ได้เลยครับ

หากทำถูกต้องจะได้เครื่อง Smart phone Android จำลองมาหนึ่งเครื่องดังรูปครับ​​​​​​

จากนั้นลอง Start App ที่เราได้สร้างไว้ตอนแรกอีกรอบครับ

npm run android หรือ yarn android

ถ้าที่ทำทั้งหมดมานั้นถูกต้องก็จะได้ App ของเรามาอยู่บน Genymotion Emulator แบบนี้ครับ

เพียงเท่านี้เราก็สามารถเขียน React Native โดยใช้ Expo ร่วมกับ Genymotion Emulator ได้แล้วครับ

ขอให้สนุกกับการเขียน React Native ครับ

tags : react native genymotion xcode expo



ติดตามข่าวสารและเรื่องราวดีๆ ทาง Email