Mobile App development with React Native + Expo

ทำ development note ไว้หน่อย หลังจากลงมาขลุกแก้ปัญหาอยู่พักนึง เลยได้ setup ที่คิดว่าใช้งานได้ประมาณนึง

โปรเจคนี้ใช้ React Native + Expo ด้วยเหตุผลที่ว่าสามารถขึ้น MVP ได้เร็วทั้ง iOS / Android ด้วยทีมที่เล็ก

Setup บนเครื่องตัวเอง ที่คิดว่า work และควรค่าแก่การทำซ้ำคือ

• Develop ด้วย VS Code ผ่าน devcontainer เพราะจะได้ไม่รกเครื่อง ถ้าเราต้องจับหลายๆ project ไปเรื่อยๆ การจะต้องลงทุกอย่างให้ถูก version และต้องพร้อมสำหรับการสลับไป version อื่นๆเพื่อรัน project อื่น เป็นอะไรที่ยากมาก devcontainer เลยเป็นทางออก ถ้าใช้คนเดียวก็สร้างไฟล์ไว้ใน workspace (เครื่องเราเอง) ถ้าใช้หลายคนก็ commit ขึ้น repository ไปเลย
  
  ตอนใช้ Expo เลือกใช้ base image คือ ghcr.io/cirruslabs/android-sdk:35 เพื่อให้ compile android local ได้ เป็นอันจบ
  
ตัวอย่างไฟล์ devcontainer.json สำหรับใช้รัน Expo บน Windows สำหรับ dev / debug Android

{
  "name": "Expo Android Dev",
  "image": "ghcr.io/cirruslabs/android-sdk:35",          // Android API 35, includes cmdline tools
  "features": {
    "ghcr.io/devcontainers/features/java:1": { "version": "17" },
    "ghcr.io/devcontainers/features/node:1": { "version": "20" }
  },
  "forwardPorts": [8081],
  "portsAttributes": {
    "8081": {
      "label": "Expo Debugger",
      "visibility": "public"
    }
  },
  "postCreateCommand": "npm i -g eas-cli expo-cli"
}

• Emulator ลง Android Studio บนเครื่องจริง เพื่อให้รัน Android Emulator ได้
• หลังจากที่มีสองอย่างด้านบน การรันแอพเพื่อ debug ก็ไม่ยากล่ะ เริ่มจากการสร้าง build ของ Expo ที่เป็น development build (ลงเครื่องหรือ emulator ตรงๆไม่ผ่าน store)
• การต่อ adb จาก devcontainer ไปยัง emulator ที่รันอยู่บนเครื่องจริง สะดวกที่สุดคือใช้ address ตามนี้
  adb connect host.docker.internal:5555

• ในทางกลับกัน การต่อเครื่อง host จาก android จะต้องต่อไปที่ IP 10.0.2.2
• ที่เหลือก็ไปงมเอาต่อกันได้ หลักๆก็ใช้ npx expo start แล้วก็ follow instruction ไปเรื่อยๆ
• หลักการ debug ของ expo คือ expo service ต้องเข้าถึง adb ได้ แล้วมันจะสามารถ reload app / เอา log ออกมาได้เลย มันสามารถทำ hot reload ได้ (เค้ายังใช้คำนี้อยู่มั๊ย)
  พอตัว code เป็น react ตัว debugger tools ก็หน้าตาเหมือน dev tools ของ Chrome เลย สุดท้ายก็จะคล้ายๆการ debug web app ธรรมดา

ปล. อันนึงที่ทำให้ การใช้งาน devcontainer สมบูรณ์ขึ้น คือการ sync git profile/credential จากเครื่อง host เข้าไปด้วย ทำให้เวลา update code/push code ทำได้สะดวกมากขึ้น