แชร์หน้าจอมือถือขณะ 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/

Read More »

วิธีติดตั้ง 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-gypnpm install -g node-gyp ติดตั้ง Expo CLI ด้วย npmnpm 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)

Read More »

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

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

Read More »

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

Read More »

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 ข้างในมีดังนี้

Read More »