Day: January 2, 2020

  • การติดตั้ง Android Emulator : MuMu เพื่อใช้งานร่วมกับ Expo CLI

    jatuporn.ch

    กำลังพัฒนา Mobile Apps อยากได้ Android EMU สักตัวที่กินแรมน้อย ๆ เปิดโปรแกรมได้เป็น Tab เปิด ๆ ปิด ๆ โปรแกรมบ่อยไม่ต้องกดเมนูเข้าออกให้เหนื่อยต้องลอง MuMu (สาวกเกมส์ Ragnarok M ข้ามการติดตั้งได้เลยครับ คงชำนาญกันอยู่แล้ว)

    • Installation Version
      • MuMu App Player V1.1.0.2
    • ติดตั้ง MuMu App Player (เมื่อก่อนตัวติดตั้งเป็นภาษาจีนล้วนเดี๋ยวนี้มีแบบภาษาอังกฤษแล้ว)
      https://mumu.163.com/global/download/en/index.html
    • การติดตั้งจะใช้ VirtualBox ช่วยเพิ่มประสิทธิภาพด้วย
    • เปิด Play Store จากนั้น Login เหมือนมือถือ Android ปกติ (จะเห็นว่าเห็นเป็น Tab สามารถปิดโปรแกรมโดยกดกากบาทด้านบนได้เลย หรือจะสลับ App ไปมาได้อย่างง่ายดาย โดย App ไม่หยุดทำงาน)
    • ติดตั้งโปรแกรม Expo
    • เปิดโปรแกรม
    • ไปที่ Tab Profile เพื่อ Login ใครยังไม่มี Account ให้สร้างได้ที่นี่
    • ทำการ Login บน expo cli start console ด้วย
    • ปิดโปรแกรม บน MuMu เปิดใหม่อีกครั้งจะเห็น Recenly in development ขึ้น Project ที่เราพัฒนาอยู่ (Emulator อื่นอาจจะเปิด USB Debug ได้ แต่ MuMu ยังไม่รองรับ จากการทดสอบเปิดแล้วไม่ขึ้น จึงใช้วิธี Login ให้เห็น Project แทน)
    • อย่าลืมว่าต้องอยู่ Network วงเดียวกัน

    หวังว่าจะเป็นประโยชน์กับ Mobile Apps อื่นที่ต้องการนำไปใช้ทดสอบด้วยนะครับ

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

    jatuporn.ch

    สำหรับผู้พัฒนาที่ต้องการพัฒนา 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)