Category: Android

  • มารู้จักเครื่องมือ Smart Facebook URL ที่สามารถเปิด Facebook ตามอุปกรณ์ที่ใช้งานปัจจุบัน

    ทุกท่านเคยเป็นกันไหมค่ะ เมื่อเพื่อนของเราส่งลิงก์ Facebook มาให้เราดู แต่เมื่อเราเปิดใช้งานบนมือถือ มันก็จะเด้งไปหน้าเบราว์เซอร์ แล้วระบบก็จะให้เรา Login ซึ่งคนทั่วไปจะใช้งานบน App Facebook หากเราใช้งานผ่านมือถือ และจะใช้ผ่านเบราว์เซอร์เมื่อเราใช้ผ่านคอมพิวเตอร์

    ***มาดูตัวอย่างการเปิดลิงก์ Facebook Fan Page เมื่อเพื่อนส่งมาให้***

    ตัวอย่างการส่งลิงก์ Facebook ให้เพื่อนช่วยกดไลค์แฟนเพจ เมื่อเราคลิกลิงก์จากข้อความ

    ระบบปฏิบัติการ Android

    จะเปิดมาที่ เบราว์เซอร์ เป็น m.facebook หากต้องการใช้งานก็จะต้อง Login Facebook ใหม่ ซึ่งปกติเราก็มักจะลืม Username หรือ Password

    ระบบปฏิบัติการ iOS

    มีข้อความแจ้งเตืนอว่าจะให้เปิดผ่าน Faceook หรือไม่ หากกดปุ่ม “เปิด” จะเป็นไปยัง App ให้ทันที่ แต่หากกดปุ่ม “ยกเลิก” จะเปิดมาที่ เบราว์เซอร์ เป็น m.facebook ก็จะต้อง Login Facebook ใหม่

    ระบบปฏิบัติการ iOS

    จะเปิดมาที่เบราว์เซอร์ เป็น m.facebook หากต้องการใช้งานก็จะต้อง Login Facebook ใหม่เช่นเดียวกับ ระบบปฏิบัติการ Android

    **** ซึ่งเมื่อเราจะส่งลิงก์ URL ให้เพื่อน เราจะไม่ทราบว่าเพื่อนใช้ Smart phone ระบบปฏิบัติการอะไร
    ดังนั้นเรามีวิธีการดังนี้….=>>

    1. นำ URL ที่เราต้องการ เช่น https://www.facebook.com/PSUDIIS
    2. คลิกปุ่ม “สร้าง Smart URL”

    เมื่อดำเนินการเรียบร้อยจะได้ URL ใหม่ ดังนี้

    1. http://pili.app/fb/SP4FHeHc
    2. คลิกปุ่ม “คัดลอก”

    ******เมื่อเราได้ URL ที่ต้องการแล้ว ส่งให้เพื่อนอีกครั้ง แล้วให้เพื่อนเปิดดูเลยค่ะ******

    ระบบปฏิบัติการ Android

    เมื่อคลิก URL แล้วจะเลือก “Android” ให้อัตโนมัติ

    ระบบปฏิบัติการ Android

    เลือก “facebook app” ให้อัตโนมัติ

    ระบบปฏิบัติการ Android

    จะเข้า “Facebook App” ให้อัตโนมัติ สามารถกดไลค์แฟนเพจได้ทันที

    ระบบปฏิบัติการ iOS

    เมื่อคลิก URL แล้วจะเลือก “iPhone” ให้อัตโนมัติ

    ระบบปฏิบัติการ iOS

    เลือก “Facebook App” ให้อัตโนมัติ

    ระบบปฏิบัติการ iOS

    จะเข้า “Facebook App” ให้อัตโนมัติ สามารถกดไลค์แฟนเพจได้ทันที

    การใช้งานผ่าน Computer

    เมื่อคลิก URL แล้วจะเลือก “คอมพิวเตอร์ส่วนบุคคล” ให้อัตโนมัติ

    การใช้งานผ่าน Computer

    เลือก “เบราว์เซอร์” ให้อัตโนมัติ

    การใช้งานผ่าน Computer

    จะเข้า “เบราว์เซอร์” ให้อัตโนมัติ สามารถกดไลค์แฟนเพจได้ทันที

  • แก้ปัญหาอัปโหลด Android App ไม่ผ่านเพราะเปลี่ยนคนอัปโหลด

    เคยไหมที่ฝากทีมอื่นที่เขามี account google play console อยู่แล้ว เพื่อฝากอัพเดทแอปที่เราเพิ่ม feature ใหม่ๆของแอปที่เราพัฒนา ตอนนั้นก็ได้ลองผิดลองถูกกันไปเรื่อยๆ เพราะว่าตอนที่เรา build app มันจะสร้าง signing key ในการอัปโหลดที่ผูกติดกับ user ดังนั้นเมื่อเปลี่ยน user ในการอัปโหลดก็ต้องอัปโหลด signing key ใหม่

    วันนี้จะมา KM การเปลี่ยน signing key เผื่อใครเคยเจอปัญหาเดียวกัน

    หน้าจอแสดงการอัปโหลด Android app ไม่ผ่าน เพราะ signing key ไม่ตรงกับ user เก่า

    โดยเข้าที่เมนู App signing เพื่อดูรายละเอียดเพิ่มเติม

    หน้าจอแสดงรายละเอียด signing key ที่สามารถอัปโหลดจะเห็นได้ว่า SHA ผูกติดกับ user เก่า ดังนั้นเพื่อแก้ปัญหานี้ เราต้อง Upload certificate ใหม่

    โดยที่เราต้องไปที่ project ของเราเพื่อดึงค่า key store ใหม่ โดยใช้คำสั่ง expo fetch android:keystore (คำสั่งขึ้นอยู่กับ project ว่าใช้ Tool อะไร ถ้าใช้ Expo ใช้คำสั่งนี้) ก็จะเห็นค่า Key password ที่เราตั้งไว้ (ขั้นตอนนี้จะได้ไฟล์ .jks)

    การสร้าง signing key ใหม่ โดยใช้คำสั่ง expo fetch android:upload-cer (ขั้นตอนนี้เราจะได้ไฟล์ .pem)

    จากนั้นเราเราก็ส่งข้อมูลไฟล์ .pem โดยคลิก https://support.google.com/googleplay/android-developer/contact/key อัปโหลดไฟล์ .pem ใหม่ จากนั้นก็รอ mail แจ้งกลับจาก Google play console เมื่อ approved เรียบร้อยแล้ว เราก็จะอัปโหลดแอปได้ตามปกติ

    ที่มา : https://support.google.com/googleplay/android-developer/answer/9842756

  • แชร์หน้าจอมือถือขณะ VDO Call ด้วย LINE

    สำหรับ Blog ในวันนี้จะมาขอแชร์เกร็ดความรู้เล็กๆ น้อยๆ ที่หลายๆคนอาจจะยังไม่เคยรู้มาก่อน (ถึงแม้จะใช้ LINE กันอยู่ทุกวันก็เถอะ)

    เมื่อไม่กี่วันที่ผ่านมาทาง LINE ได้มีการ update version ล่าสุด คือ10.6.5 ซึ่งใน version นี้จะเน้นไปที่การเพิ่มคุณสมบัติขณะวิดีโอคอล เช่น สามารถดู YouTube ร่วมกันได้ หรือสามารถแชร์หน้าจอตัวเองได้ เป็นต้น จริงๆแล้ว เรื่องของการแชร์หน้าจอขณะ VDO Call เนี่ย เดิมบนคอมพิวเตอร์ก็ทำได้อยู่ก่อนแล้วนะ แต่ตอนนี้ update ให้สามารถแชร์ผ่าน application บน smart phone ได้ด้วย

    วิธีการก็ไม่ยากเลย ปะ ไปดูกันว่าเค้าทำกันยังไง !!

    Step1 : เริ่มจากเปิด LINE และเลือก VDO Call หาคนที่เราต้องการ

    Step2 : เมื่อเริ่มการ VDO Call เรียบร้อยแล้ว แตะหน้าจอเบาๆ 1 ครั้ง จากนั้นให้สังเกตุมุมบนด้านขวาของหน้าจอ จะปรากฏicon เล็กๆ ให้กดเลือกตรงจุด3จุด

    Step3 : หน้าจอจะแสดงเมนูให้เราเลือก ให้เลือก “Share screen

    Step4 : เมื่อกดเลือกเรียบร้อยแล้วหน้าจอก็จะถามเราว่า “LINE will start capturing everything that’s displayed on your screen.” ให้เลือกว่าจะ cancel หรือ start now เลือกแบบไหนก็เลือกเลย หากไม่ต้องการให้รอบหน้าแสดงข้อความนี้อีกก็สามารถ Checkbox ด้านหน้าคำว่า Don’t show again ได้เลย

    Step5 : เมื่อเราเริ่มต้นการ Share screen เรียบร้อยแล้ว หน้าจอเราเปิดอะไรอยู่ เพื่อนที่เรา VDO Call ด้วยก็จะเห็นเหมือนกัน ตัวอย่างก็จะได้ดังรูป ^^

    จะว่าไปก็มีประโยชน์อยู่ไม่น้อยเลยนะ ยิ่งช่วงนี้อะไรๆก็ออนไลน์ ทั้งเรียน ทั้งประชุม ทั้งพูดคุย ตัวคุณสมบัติที่เพิ่มเข้ามาอันนี้ตอบรับนโยบาย social distancing ได้ดีมากๆ

    อย่างไรก็ตามผู้เขียนอยากให้ทุกคนไปลองเล่นดูนะ ความรู้เกร็ดเล็กเกร็ดน้อยเหล่านี้ รู้ไว้ใช่ว่า ใส่บ่าแบกหาม จริงมั้ย !!

    อ้างอิง
    https://www.rainmaker.in.th/line-update-video-call/

  • Transcribe speech with Google Translate

    สวัสดีคุณผู้อ่านทุกท่าน หลังจากเงียบหายไปนาน และแล้ว วันนี้ก็มาถึง วันที่ต้องกลับมาเขียน Blog อีกรอบ

    เพราะ …. เพราะ …. เพราะอยากเขียนนี่แหละ (หื้มมม) ไม่มีอะไรในก่อไผ่หรอก 55 อะๆ อย่ามามัวเสียเวลากันเลยเนอะ มาเข้าเรื่องกันเลยดีกว่า !!

    วันนี้ขอว่าด้วยเรื่องของ feature บน google translate กันหน่อย feature ที่เพิ่มเข้ามาคือ “Transcribe” การถอดข้อความจากไฟล์เสียงนั่นเอง

    จริงๆแล้ว คนไหนที่เคยลองใช้ลองเล่น google translate ก็จะรู้กันอยู่แล้วว่าจะมี feature เกี่ยวกับเสียงอยู่แล้วก่อนหน้า ที่สามารถฟังเสียง
    หรือข้อความสั้นๆ และแปลออกมาเป็นคำ หรือบริบทสั้นๆ ได้ แต่ก็ยังไม่สามารถแปลในส่วนของไฟล์หรือข้อความเสียงที่แบบยาวๆ ต่อเนื่องได้

    สำหรับวิธีการใช้งาน feature Transcribe ที่เพิ่มเข้ามาเนี่ย ง่ายดายมากๆ

    1. เปิดเข้าไปที่ app google translate
    2. ให้กดไปที่ icon “Transcribe” ดูได้จากรูป

    3. เมื่อคลิกเข้ามาก็จะเจอกับหน้าจอขาวๆ แบบนี้ ซึ่งคือพร้อมใช้ทำงานแล้วนะ มาๆ จะลองเล่นให้ดู ทดสอบอ่านบทความ(ภาษาไทย) ให้ดูละกันนะ

    จากวิดีโอตัวอย่างก็จะเป็นการอ่านบทความภาษาไทยและเจ้า app ตัวนี้ก็จะแปลเป็นภาษาอังกฤษ เราก็จะได้ผลลัพธ์ประมาณนี้ เจ๋งดีเนอะ ^^

    เราสามารถตั้งค่าขนาดการแสดงผลของตัวอักษร หรืออื่นๆ ได้เล็กน้อยนะ สามารถลองเล่นได้โดยกดตรง รูปฟันเฟือง (มุมล่างซ้าย) กดๆดู ไม่ยากๆ

    สำหรับภาษาที่จะใช้ได้นั้น ขณะนี้รองรับ 8 ภาษา คือ อังกฤษ ฝรั่งเศส เยอรมัน ฮินดี โปรตุเกส รัสเซีย สเปน และ ไทย เน้ออออออ ^__^

    อ๊ะๆ สำหรับ feature ตัวนี้ขอบอกก่อนว่าทางผู้เขียนใช้ Android นะ แต่สำหรับบน iOS เนี่ยจะอัพเดทหรือยังไม่อัพเดท ทางผู้เขียนก็ไม่มั่นใจเช่นกัน
    แต่คาดว่าน่าจะตามกันมาติดๆนั่นแหละ รอไม่นานหรอก ก็ลองไปติดตามข่าวสารกันดูนะ

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

    อ้างอิง
    https://blog.google/products/translate/transcribe-speech/
    https://www.rainmaker.in.th/transcribe-speech-with-google-translate/

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

    กำลังพัฒนา 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

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

  • เทคนิคการใช้ LINE แปลงข้อความรูปภาพ เป็นตัวอักษร Text (ใช้ภาษาไทยได้สมบูรณ์มาก)

    พึ่งเปิดตัวทั้งใน LINE สมาร์ทโฟน และ LINE ในเครื่อง PC สำหรับวิธีการแปลงข้อความรูปภาพ ให้กลายเป็นข้อความ Text ตัวอักษร โดยไม่ต้องเสียเวลามานั่งพิมพ์ใหม่ และวิธีการนี้ยังสามารถแปลเป็นภาษาอื่นๆ จากข้อความ Text ที่ได้จากการแปลงข้อความรูปภาพแล้วอีกด้วย

  • Xamarin Essentials : Easy access Native feature Platforms

    ในบางครั้งการเขียน app เพื่อ access location ปัจจุบันของผู้ใช้ หรือต้องการสั่งให้โทรศัพท์สั่นตาม activity ที่ตั้งไว้ หรือแม้แต่จะ access ข้อมูล device information ของอุปกรณ์ ไม่ใช่เรื่องง่ายเลยสำหรับเหล่า developer ที่เขียน mobile app ยิ่งมีหลาย platform ไม่ว่าจะเป็น android , iOS, Windows ก็มีวิธีการเขียน code การขอ Access permission คนละรูปแบบไปอีก ซึ่งบทความนี้ผู้เขียนจะมาแนะนำให้รู้จักกับ Xamarin Essentials ที่จะมาเป็นตัวช่วยให้ผู้พัฒนาเขียน code แก้ปัญหาเหล่านี้ได้ง่ายขึ้นนั่นเอง

    Xamarin.Essentials คืออะไร?

    คือ  official library ที่ทาง Microsoft ได้พัฒนาและรวบรวม library ที่เป็น cross-platform APIs สำหรับให้นักพัฒนา mobile app ที่พัฒนาด้วย Xamarin.Forms ได้ใช้งานในการเข้าถึง native features ของแต่ละ platforms ด้วยการเขียน code จากที่เดียว

    มีอะไรให้เรียกใช้บ้าง

    ปัจจุบันมีทั้งหมด 33 feature ให้เรียกใช้งาน อ้างอิงจาก Microsoft Doc ซึ่งมีดังนี้

    • Accelerometer – Retrieve acceleration data of the device in three dimensional space.
    • App Information – Find out information about the application.
    • Barometer – Monitor the barometer for pressure changes.
    • Battery – Easily detect battery level, source, and state.
    • Clipboard – Quickly and easily set or read text on the clipboard.
    • Color Converters – Helper methods for System.Drawing.Color.
    • Compass – Monitor compass for changes.
    • Connectivity – Check connectivity state and detect changes.
    • Detect Shake – Detect a shake movement of the device.
    • Device Display Information – Get the device’s screen metrics and orientation.
    • Device Information – Find out about the device with ease.
    • Email – Easily send email messages.
    • File System Helpers – Easily save files to app data.
    • Flashlight – A simple way to turn the flashlight on/off.
    • Geocoding – Geocode and reverse geocode addresses and coordinates.
    • Geolocation – Retrieve the device’s GPS location.
    • Gyroscope – Track rotation around the device’s three primary axes.
    • Launcher – Enables an application to open a URI by the system.
    • Magnetometer – Detect device’s orientation relative to Earth’s magnetic field.
    • MainThread – Run code on the application’s main thread.
    • Maps – Open the maps application to a specific location.
    • Open Browser – Quickly and easily open a browser to a specific website.
    • Orientation Sensor – Retrieve the orientation of the device in three dimensional space.
    • Phone Dialer – Open the phone dialer.
    • Platform Extensions – Helper methods for converting Rect, Size, and Point.
    • Preferences – Quickly and easily add persistent preferences.
    • Secure Storage – Securely store data.
    • Share – Send text and website uris to other apps.
    • SMS – Create an SMS message for sending.
    • Text-to-Speech – Vocalize text on the device.
    • Unit Converters – Helper methods to convert units.
    • Version Tracking – Track the applications version and build numbers.
    • Vibrate – Make the device vibrate.

    วิธีใช้งาน

    เปิด Xamarin.Forms project ขึ้นมา และไปที่เมนู Tools -> Nuget Package Manager -> Manage Nuget Package for Solution และในช่อง Search ให้ค้นหา Xamarin.Essentials ดังรูป

    ที่ฝั่งขวา ให้เราเลือก install ลงทุก project ทั้งในส่วน shared project ตรงกลาง และ specific platform project (android และ ios) แล้วกดปุ่ม Install ดังรูป

    ถึงตอนนี้ Xamarin.Essentials ถูกเพิ่มเข้าไปใน Reference package ของแต่ละ project เรียบร้อย แต่เรายังต้อง Config ค่าเพิ่มเติมนิดหน่อยเฉพาะ android project เท่านั้น (ios project ไม่ต้องทำอะไรก็ใช้งานได้เลย) เพื่อให้ Xamarin.Essential สามารถทำงานได้ โดยทำการเพิ่มเติม code ที่ MainActivity.cs เพื่อ initial Xamarin.Essentials ใน OnCreate() และทำการ override OnrequestPermissionResult() ดัง code ข้างล่าง เป็นอันเสร็จเรียบร้อยพร้อมให้ให้เขียน code เรียกใช้งาน feature ต่างๆ ได้เลยค่ะ

    protected override void OnCreate(Bundle bundle)
    {
        ...
        global::Xamarin.Forms.Forms.Init(this, bundle);
        Xamarin.Essentials.Platform.Init(this, bundle);
        ...
    }
    
    public override void OnRequestPermissionsResult(int requestCode, string[] permissions,
        [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
    {
        Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
    }
    

    ตัวอย่าง

    ให้ทำการ using Xamarin.Essentials ที่ class ที่เราจะเรียกใช้งาน หลังจากนั้นสามารถเขียน code ใช้งาน method ต่างๆได้เลยค่ะ ขอยกตัวอย่างบาง feature ดังต่อไปนี้นะคะ

    1. ส่ง SMS

    หากเราต้องการส่ง SMS จาก Xamarin.Forms app ของเรา ก็เขียน code ดังตัวอย่างข้างล่างนี้

    public class SmsTest
    {
        public async Task SendSms(string messageText, string recipient)
        {
            try
            {
                var message = new SmsMessage(messageText, new []{ recipient });
                await Sms.ComposeAsync(message);
            }
            catch (FeatureNotSupportedException ex)
            {
                // Sms is not supported on this device.
            }
            catch (Exception ex)
            {
                // Other error has occurred.
            }
        }
    }
    

    2. Get Location

    อยากรู้ตำแหน่ง Location ล่าสุดของ device ก็เขียน code ดังนี้

    try
    {
        var location = await Geolocation.GetLastKnownLocationAsync();
    
        if (location != null)
        {
            Console.WriteLine($"Latitude: {location.Latitude}, Longitude: {location.Longitude}, Altitude: {location.Altitude}");
        }
    }
    catch (FeatureNotSupportedException fnsEx)
    {
        // Handle not supported on device exception
    }
    

    ผู้เขียนขอยกตัวอย่างเพียงเท่านี้ ส่วนการเรียกใช้งาน feature อื่น สามารถอ่านได้จาก doc ของทาง Microsoft Xamarin.Essentials ได้เลยค่ะ ไม่ยากเลยใช่มั้ยคะ เขียน code เพียงไม่กี่บรรทัด เราก็สามารถเข้าถึง native feature ของแต่ละ platform ได้แล้วว ^^

  • Xamarin.Forms : Binding ข้อมูลด้วย MVVM pattern

    “MVVM is the best way to architecture mobile apps”

    Asfend Yar Hamid ซึ่งเป็น Microsoft MVP developer ท่านหนึ่งได้กล่าวไว้ เค้าคือใครน่ะเหรอ ผู้เขียนรู้จักเค้าผ่าน Udemy (คอร์สเรียนออนไลน์ที่เค้ากำลังฮอต ราคาถูก คุณภาพดี แอบรีวิว 555) ซึ่งวันนี้ผู้เขียนจะมาแนะนำการ Binding ข้อมูลของ Xamarin.Form app ด้วย MVVM pattern กันนะคะ

    MVVM pattern คืออะไร

    MVVM หรือ Model View ViewModel เป็น design pattern หรือรูปแบบในการวาง architecture ในการเขียน code นั่นเอง โดย

    Model คือ ส่วนที่เก็บข้อมูลของ Application เรา ตัวอย่างเช่น Entity Class หรือไฟล์ POCO Class ของ object ต่างๆ ที่เกี่ยวข้องกับข้อมูลจะอยู่ที่ส่วนนี้


    View คือ ส่วนที่ติดต่อกับ user ซึ่งเป็นส่วนไว้แสดงหน้า app ของเรานั่นเอง ซึ่งView จะไม่รู้อะไรเลยนอกจากการแสดงผล ส่วน Logic อื่นๆจะอยู่ใน ViewModel


    ViewModel คือ ส่วนที่ทำหน้าที่เก็บข้อมูลทั้งหมดที่ View ต้องการ โดย View จะติดต่อ ViewModel ผ่าน Data-binding ซึ่งหาก View มีการเปลี่ยนแปลงก็จะส่งผลต่อ ViewModel ในทางกลับกันหาก ViewModel มีการเปลี่ยนแปลงก็จะส่งผลถึง View ด้วยเช่นกัน


    ทำไมต้องใช้ MVVM กับ mobile app ?

    MVVM ทำให้เราสามารถ separate หรือแยกส่วนการทำงานของ code ออกจากกันได้ชัดเจนตามหน้าที่ของมัน ซึ่งทำให้ง่ายต่อการจัดการ รองรับต่อการเปลี่ยนแปลง เหมาะสำหรับการพัฒนา Application ที่มีการเปลี่ยนแปลง UI บ่อยครั้ง เนื่องจากทุกการเปลี่ยนแปลงในส่วน view จะไม่กระทบต่อ ViewModel ที่เป็น business logic และยังมี Binder ซึ่งเป็นตัวช่วยจัดการการเปลี่ยนแปลงของข้อมูลใน View หรือใน ViewModel ทำให้ไม่จำเป็นต้องเขียน Code ในการควบคุม View เพื่อให้เปลี่ยนแปลงตาม

    เริ่มกันเลยดีกว่า

    เกริ่นไปเยอะแล้ว เรามาลองสร้าง app เพื่อ binding ข้อมูลในรูปแบบ MVVM ดูกันเลยค่ะ
    Step 1 : สร้าง Xamarin.Forms project ขึ้นมาก่อน (วิธีสร้างและเลือก template สามารถอ่านได้จากบทความที่แล้ว => สร้าง Hello World app ง่ายๆด้วย Xamarin.Forms) ซึ่งจะได้ project structure ดังรูป

    ทีนี้เราจะไม่ไปยุ่งในส่วน specific platform project (Android และ iOS) เราจะมาสร้าง MVVM ที่ share project กัน

    Step 2 : สร้างโฟลเดอร์ Model, View และ View Model ขึ้นมา ดังรูป

    Step 3: สร้าง class ชื่อ Employee.cs ลงในโฟลเดอร์ Model โดย code ข้างในมีดังนี้

    using System;
    using System.Collections.Generic;
    using System.Text;
    
    namespace MVVMBinding.Models
    {
        public class Employee
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string FullName
            {
                get { return string.Format("{0} {1}", FirstName, LastName); }
            }
        }
    }
    

    Step 4 : สร้าง ViewModel ชื่อ EmployeeVM ลงใน โฟลเดอร์ ViewModels โดยใน class นี้จะมีการ inherit และ implement interface ที่ชื่อ INotifyPropertyChanged ซึ่งเป็น interface ที่ช่วยให้ Binder property ทำงาน โดย code มีดังนี้

    using MVVMBinding.Models;
    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    using System.Text;
    
    namespace MVVMBinding.ViewModels
    {
        public class EmployeeVM : INotifyPropertyChanged
        {
            private ObservableCollection<Employee> _employees;
            public ObservableCollection<Employee> Employees {
                get
                {
                    return this._employees;
                }
                set
                {
                    this._employees = value;
                    OnPropertyChanged();
                }
            }
            public event PropertyChangedEventHandler PropertyChanged;
            protected virtual void OnPropertyChanged(
            [CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this,
                new PropertyChangedEventArgs(propertyName));
            }
    
            public EmployeeVM()
            {
                Employees = new ObservableCollection<Employee>();
            }
    
            public void AddNewEmployee(string fisrtName,string lastName)
            {
                Employee emp = new Employee()
                {
                    FirstName = fisrtName,
                    LastName = lastName
                };
                Employees.Add(emp);
            }
        }
    }
    

    Step 5 : สร้าง page ชื่อ EmployeePage ลงใน folder View โดยในส่วนของ EmployeePage .xaml ส่วนของ ListView จะมีการ Binding ข้อมูล กับ Employees ซึ่งเป็น property หนึ่งของ EmployeeVM สำหรับแสดงผลข้อมูล

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MVVMBinding.Views.EmployeePage">
        <ContentPage.Content>
            <StackLayout>
                <Label Text="My Employee"
                    VerticalOptions="CenterAndExpand" 
                    HorizontalOptions="CenterAndExpand" />
                <StackLayout>
                    <Label Text="ชื่อ"/>
                    <Entry Placeholder="กรอกชื่อ" x:Name="fnameEntry"/>
                    <Label Text="นามสกุล"/>
                    <Entry Placeholder="กรอกนามสกุล" x:Name="lnameEntry"/>
                    <Button x:Name="addBtn" Text="Add" Clicked="AddBtn_Clicked" />
                    <ListView ItemsSource="{Binding Employees}" BackgroundColor="Beige">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Label Text="{Binding FullName}"/>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    

    และในส่วนของ code behind=> EmployeePage.xaml.cs ก็ให้เซตค่า BindingContext ไปยัง EmployeeVM ดัง code ต่อไปนี้

    using MVVMBinding.ViewModels;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    namespace MVVMBinding.Views
    {
    	[XamlCompilation(XamlCompilationOptions.Compile)]
    	public partial class EmployeePage : ContentPage
    	{
            private EmployeeVM vm;
            public EmployeePage ()
    		{
    			InitializeComponent ();
                vm = new EmployeeVM();
                this.BindingContext = vm;
    		}
    
            private void AddBtn_Clicked(object sender, EventArgs e)
            {
                vm.AddNewEmployee(fnameEntry.Text, lnameEntry.Text);
                ClearEntry();
            }
            private void ClearEntry()
            {
                fnameEntry.Text = "";
                lnameEntry.Text = "";
            }
        }
    }
    

    Step 6 : เปิดไฟล์ App.xaml.cs ขึ้นมา และเซตค่า MainPage ให้เรียกไปยัง EmployeePage ดัง code ต่อไปนี้

    using MVVMBinding.Views;
    using System;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
    namespace MVVMBinding
    {
        public partial class App : Application
        {
            public App()
            {
                InitializeComponent();
    
                MainPage = new EmployeePage();
            }
    
            protected override void OnStart()
            {
                // Handle when your app starts
            }
    
            protected override void OnSleep()
            {
                // Handle when your app sleeps
            }
    
            protected override void OnResume()
            {
                // Handle when your app resumes
            }
        }
    }
    

    Step สุดท้าย : เสียบสาย Usb เชื่อมต่อระหว่างมือถือกับคอมของเรา build project แล้วก็กดรันโลดดด.. ผลลัพธ์ก็จะออกมาเช่นนี้

    เป็นอันเสร็จสิ้นการสร้าง app Binding ข้อมูลแบบ MVVM pattern ด้วย Xamarin.Forms แล้วนะคะ ซึ่งผู้อ่านสามารถนำไปใช้เป็นแนวทางและประยุกต์ใช้ตามความเหมาะสมกับ app นั้นๆต่อไปค่า ^^
    บทความถัดไป => Xamarin Essentials : Easy access Native Feature Platform