Tag: TypeScript

  • วิธีติดตั้ง Expo CLI สำหรับพัฒนา Mobile App ด้วย React Native

    สำหรับผู้พัฒนาที่ต้องการพัฒนา Mobile App แต่รู้สึกว่ายังไม่พร้อมศึกษา React Native แบบจริงจัง สามารถใช้งาน Expo Framework โดยสามารถใช้ได้ทั้งในการพัฒนา หรือ Build ขึ้น Store ได้เลยทั้ง iOS/Android ด้วยภาษา JavaScript/TypeScript

    โดยวันนี้จะเริ่มด้วยแนะนำวิธีติดตั้ง Tools สำหรับพัฒนาชื่อ Expo CLI ครับ

    • Reference : https://docs.expo.io/versions/latest/
    • Installation Version
      • windows 10 version 1909 64 bit
      • npm 12.14.0 LTS
      • python 3.8
      • Expo SDK 36
    • ติดตั้ง Node Js (โหลดติดตั้งแบบ LTS)
      https://nodejs.org/en/
    • ถ้ามีแจ้งไฟล์ไม่ปลอดภัยกดข้ามไป
    • จะมีให้เลือกว่าจะลง Chocolatey หรือเปล่า เพื่อติดตั้ง Module เพิ่มเติม และแนะนำติดตั้ง Node-Gyp ซึ่งจะต้องติดตั้งเองภายหลัง
    • ติดตั้ง Python ก่อนติดตั้ง Node-Gyp ผ่าน Windows Store (หลังกด Get ไม่ต้อง Sign In ก็ได้)
    • เปิด windows cmd (Run as Administrator หรือไม่ก็เลือก Start->Node.js command prompt)
    • ติดตั้ง node-gyp
      npm install -g node-gyp
    • ติดตั้ง Expo CLI ด้วย npm
      npm install -g expo-cli
    • ทดสอบสร้างโปรเจ๊คใหม่ดังนี้
      • expo init
    • สั่งรัน Web สำหรับ Debug จะพบว่า Error
    • สำหรับ Expo SDK 36 ต้องแก้ \node_modules\metro-config\src\defaults\blacklist.js ดังนี้
      var sharedBlacklist = [
      /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
      /website\ /node_modules\/.*/,
      /heapCapture\/bundle\.js/,
      /.*\/__tests__\/.*/
      ];

    สามารถทดสอบเปิดได้ผ่านโปรแกรม Expo ใน Android/IOS หรือ Emulator Android หรือจะผ่าน USB Debug Android ก็ได้ครับ โดยได้ทั้ง QR-Code หรือ Exp URL Copy ไปแป๊ะในโปรแกรมได้ครับ (ต้องอยู่ในวง Network เดียวกันยกเว้นทดสอบโดยใช้ Tunnel)