Mobile Device – CoP PSU IT Blog

เปลี่ยน iPad เป็นหน้าจอเสริมไร้สายสำหรับ PC/Notebook (Windows)

May 23, 2023 14:33

ในปัจจุบัน iPad เรียกว่าเป็นอุปกรณ์ที่ใช้งานในชีวิตประจำวันของใครหลายๆคน แต่บางครั้งซื้อ iPad มาแล้วรู้สึกว่ายังใช้งานไม่คุ้มค่า ไม่ค่อยได้หยิบมาเล่นเพราะต้องใช้คอมพิวเตอร์ในการทำงานมากกว่า แล้วถ้าเราสามารถเอา iPad มาใช้ประโยชน์เพิ่มเป็นจอเสริมพกพา เชื่อมต่อแบบไร้สาย มีแบตเตอรี่ในตัวใช้งานได้สบายๆ หลายชม.แบบไม่ต้องเสียบสายชาร์จ แถมยังใช้ความสามารถขอจอทัชสกรีน apple pencil ได้ น่าจะใช้งานได้คุ้มค่ามากยิ่งขึ้น ถ้าทำงานในฝั่งของ Mac OS สามารถใช้งาน iPad เป็นจอเสริมได้ทันทีโดยไม่ต้องติดตั้งโปรแกรมเพิ่มเติม แต่ถ้าฝั่งของ Windows เราจำเป็นต้องติดตั้งโปรแกรมเพิ่มเติม(Freeware) ที่ชื่อว่า “ Spacedesk “ โดยจะต้องติดตั้งทั้งใน Notebook และ iPad Download Spacedesk : https://www.spacedesk.net/ โปรแกรมรองรับการใช้งานบน Windows 8.1/10/11 Notebook/PC เมื่อทำการติดตั้งโปรแกรมบน Windows แล้วให้เปิดโปรแกรม Spacedesk จากช่อง Search หรือจาก Taskbar ก็ได้ ให้ตรวจสอบ IP ที่ Notebook ทำการเชื่อมต่อ WIFI (เนื่องจากทั้ง Notebook และ iPad ต้องเชื่อมต่ออยู่บนเครือข่ายเดียวกัน) iPad/Tablet เมื่อติดตั้ง Spacedesk บน iPad แล้วให้กดเพิ่ม IP ของ Notebook ตามรูป เมื่อตรวจสอบที่โปรแกรมฝั่ง Notebook จะแสดงสถานะการเชื่อมต่อดังรูป และข้อดีอีกอย่างของการใช้งาน iPad เป็นจอเสริมคือคือการใช้ความสามารถของการ Touch Screen และ Apple Pencil บน Windows ได้

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

January 27, 2023 13:21

ทุกท่านเคยเป็นกันไหมค่ะ เมื่อเพื่อนของเราส่งลิงก์ 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 ระบบปฏิบัติการอะไร ดังนั้นเรามีวิธีการดังนี้….=>> เข้าเว็บไซต์ : URL สมาร์ทสำหรับ Facebook (piliapp.com) ******เมื่อเราได้ URL ที่ต้องการแล้ว ส่งให้เพื่อนอีกครั้ง แล้วให้เพื่อนเปิดดูเลยค่ะ****** ระบบปฏิบัติการ Android เมื่อคลิก URL แล้วจะเลือก “Android” ให้อัตโนมัติ ระบบปฏิบัติการ Android เลือก “facebook app” ให้อัตโนมัติ ระบบปฏิบัติการ Android จะเข้า “Facebook App” ให้อัตโนมัติ สามารถกดไลค์แฟนเพจได้ทันที ระบบปฏิบัติการ iOS เมื่อคลิก URL แล้วจะเลือก “iPhone” ให้อัตโนมัติ ระบบปฏิบัติการ iOS เลือก “Facebook App” ให้อัตโนมัติ ระบบปฏิบัติการ iOS จะเข้า “Facebook App” ให้อัตโนมัติ สามารถกดไลค์แฟนเพจได้ทันที การใช้งานผ่าน Computer เมื่อคลิก URL แล้วจะเลือก “คอมพิวเตอร์ส่วนบุคคล” ให้อัตโนมัติ การใช้งานผ่าน Computer เลือก “เบราว์เซอร์” ให้อัตโนมัติ การใช้งานผ่าน Computer จะเข้า “เบราว์เซอร์” ให้อัตโนมัติ สามารถกดไลค์แฟนเพจได้ทันที

Flutter : ดึงข้อมูลจาก RESTFul API

May 30, 2021 00:26

สำหรับนักพัฒนาแอปพลิเคชันในตอนนี้ คงไม่มีใครไม่รู้จัก Flutter อย่างแน่นอนนะครับ ซึ่งตอนนี้ก็ออกเวอร์ชัน 2.2 มาแล้ว สำหรับผมเองที่เพิ่งเริ่มศึกษาก็ขอเริ่มด้วยการทดสอบดึงข้อมูลจาก API เป็นอย่างแรกนะครับ เพราะแอปพลิเคชันสำหรับใช้งานด้านต่างๆ ในองค์กรมักจะต้องใช้ข้อมูลจากฐานข้อมูล โดยการเชื่อมต่อผ่าน API เป็นหลักครับ ขั้นตอนการติดตั้งบน Windows และเตรียมเครื่องมือสามารถอ่านได้ที่ https://flutter.dev/docs/get-started/install/windows ในบทความนี้ผมใช้ Visual Studio Code นะครับโดยติดตั้ง Extention เพิ่มเติมดังนี้ เปิด Visual Studio Code คลิกเมนู View > Command Palette พิมพ์ “install”, จากนั้นเลือก Extensions: Install Extensions. พิมพ์ “flutter” เลือก install พิมพ์ “dart” เลือก install เมื่อติดตั้งเสร็จเรียบร้อยจะมีรายการ Extention ดังรูปครับ จากนั้นทำการสร้างโปรเจค ดังนี้ครับ คลิกเมนู View > Command Palette พิมพ์ “flutter”, จากนั้นเลือก Flutter:New Application Project จะได้โปรเจคที่มีโครงสร้างไฟล์ดังรูปครับ สำหรับท่านใดที่อยากเห็นหน้าตาแอปพลิเคชันเริ่มต้น ให้เปิด USB Debuging ที่มือถือให้เรียบร้อย ต่อเข้ากับคอมพิวเตอร์ จากนั้นที่มุมขวามือล่างของ Visual Studio Code ให้เลือกชื่อมือถือของท่าน จากนั้นกด F5 ได้เลยครับ ในการเชื่อมต่อกับ API เราจะต้อง import package เพิ่มโดยพิมพ์คำสั่งที่ terminal > cmd ดังรูปครับ จากนั้นแก้ไขในไฟล์ main.dart โดยเริ่มจากการ import ดังนี้ครับ ด้านล่างเป็น Code ที่เชื่อมต่อ API โดยใช้ http.get เพื่อดึงข้อมูลแบบ Get จากนั้นก็ return ค่า response โดยใช้ประเภท Future เทียบกับภาษาอื่นๆ ประเภทข้อมูลนี้ก็คือ CallBack นั้นเองครับ เอาไว้อ่านค่าที่ได้จาก api เมื่อได้ข้อมูลมาแล้ว (ในอนาคต ไม่รู้ตอนไหน เมื่อเสร็จจะบอก ประมาณนั้น) ซึ่งข้างในเป็นค่าประเภท dynamic ที่ได้จาก jsonDecode ตรงนี้เป็นการสร้าง Widget สำหรับแสดงข้อมูลเป็นแถวๆ ต่อไปก็จะเป็น Main Function ที่มีการประกาศ state เพื่อเก็บข้อมูลไว้แสดงผลในรูปแบบ ListView เมื่อได้ข้อมูลจาก API มาแล้วนะครับ เมื่อ Run ดูก็จะได้หน้าตาประมาณนี้ครับ เรียกได้ว่าสัมผัสแรกกับ Flutter รู้สึกประทับใจทั้งในด้าน Extension ที่มีใน Visual Studio Code ให้ความรู้สึกไม่ต่างจากการพัฒนาด้วย .Net Framwork เพราะสามารถ Debug ได้ มี Intellisense ครบถ้วน ในด้าน Syntax เนื่องจากเป็นภาษาใหม่ยังต้องทำความเข้าใจอีกพอสมควร ในด้านการออกแบบ UI สำหรับท่านใดที่เคยใช้ React Native มาน่าจะพอเข้าใจ Concept ของ View Widget (เทียบเท่า Component) ได้ไม่ยากนัก ถ้าหากได้นำมาใช้ในงาน Production จริงๆ แล้วจะนำประเด็นที่น่าสนใจอื่นๆมาแชร์กันเพิ่มเติมครับ อ้างอิง https://flutter.dev/docs/get-started/codelab https://flutter.dev/docs/cookbook/networking/fetch-data

วิธี Zoom icon บน iPhone

May 25, 2021 13:35

เวลาที่เราจะต้องการ Capture เพื่อทำคู่มือ หรือ ต้องการส่งหน้าจอให้ผู้อื่นดูว่าใช้ Icon ไหนในการเข้าใช้งาน เราสามารถ Capture หน้าจอพร้อมทั้ง Zoom Icon ให้ผู้ใช้เห็นกันชัดๆ อีกด้วย โดยมีขั้นตอนดังนี้ค่ะ 1. Capture หน้าจอ โดยกดปุ่ม Home พร้อมกับปุ่ม Power จะเข้าหน้าจอของการแก้ไขภาพ เลือกเครื่องหมาย + กด แล้วเลือก Magnifier 2. ปรากฏแว่นขยาย ให้เลือกเลื่อนไปยัง Icon ที่เราต้องการ Zoom แล้วปรับขนาดได้ตามต้องการ 3. จะได้หน้าจอผลลัพธ์ที่เราได้ Zoom ไว้ ซึ่งวิธีนี้เรายังสามารถนำไปประยุกต์ใช้เพื่อ Zoom ข้อความหรือเมนูต่างๆ ได้ตามที่เราต้องการค่ะ ลองดูนะคะบางทีส่งรูปไปคนรับก็อาจจะหาเมนูหรือข้อความไม่เจอ นอกจากใช้วิธีขีดเส้นแบบวงกลมเอาตามที่เราเคย ๆ ใช้กันแล้ว วิธีนี้ก็เป็นอีกวิธี แถมยังดูมืออาชีพด้วยค่ะ

อัพโหลดแอปพลิเคชันไปยัง App Store ด้วย Transporter

May 23, 2021 22:44

สำหรับนักพัฒนาแอปพลิเคชัน เพื่อให้บริการบนระบบปฏิบัติการ iOS, iPadOS ฯลฯ ของ Apple นั้น ทราบกันดีอยู่แล้วว่าต้องอัพโหลดขึ้นไปยัง App Store เพื่อให้ผู้ใช้เข้าไปค้นหาและดาวส์โหลดไปใช้งาน ทั้งนี้ช่องทางการอัพโหลดแบบปกติ (Native App ที่พัฒนาด้วย Xcode อยู่แล้ว หรือ เฟรมเวิร์คที่ Export ออกมาเป็น Xcode โปรเจค) คือ การใช้ขั้นตอน Build Archive เมื่อสำเร็จก็จะสามารถเลือก Distribute App ไฟล์ Build ก็จะอัพโหลดขึ้นไปรอที่ appstoreconnect.apple.com ให้อัตโนมัติ เพื่อเข้ากระบวนการ Review App ต่อไป ทั้งนี้ในปัจจุบันเฟรมเวิร์คที่ใช้พัฒนาครั้งเดียวสามารถให้บริการได้หลายระบบปฏิบัติการ (Cross Platform) เป็นที่นิยมอย่างมาก เช่น Flutter, React Native, Xamarin ซึ่งมักจะมีเครื่องมือที่ช่วย Build เป็นไฟล์ .ipa ที่ใช้สำหรับอัพโหลดมาเลย ซึ่งในปัจจุบันไม่สามารถใช้ Xcode อัพโหลดไฟล์นี้ได้โดยตรง (ยังใช้ Terminal รันคำสั่งเพื่ออัพโหลดได้ และจำเป็นต้องติดตั้ง Xcode) จึงมีแอปพลิเคชันที่ทำหน้าที่ตรงนี้ และใช้งานง่ายมาแนะนำครับ นั้นคือ Transpoter ก่อนอัพโหลดไฟล์ด้วยแอปพลิเคชันนี้ ต้อง มี Apple ID ที่ลงทะเบียนเป็นนักพัฒนาเรียบร้อยแล้ว เข้าไปที่ developer.apple.com เลือก Account ทำการเพิ่ม Certificates, Identifiers & Profiles ให้เรียบร้อย ดาวส์โหลด และติดตั้ง Certificate และ Profile บนเครื่องที่จะใช้อัพโหลด (กรณีใช้ Expo จะต้องอัพโหลดตอนสั่ง Build) สร้าง App Record บน appstoreconnect.apple.com รอไว้ (แค่มีชื่อแอปไว้ก็เพียงพอแล้ว ยังไม่จำเป็นต้องมีรายละเอียดครบถ้วน) ขั้นตอนด้านบนจริงๆแล้วอัพโหลดด้วยวิธีไหนก็ต้องทำนะครับ และจะต้องมีการ Config ค่า Bundle ID, Team ID ให้ถูกต้องโดยขึ้นอยู่กับเครื่องมือที่ใช้พัฒนาว่าจะต้อง Config ค่าที่จุดไหน ไว้โอกาศหน้าผมจะมาลงรายละเอียดในส่วนนี้ครับ เมื่อทุกอย่างเรียบร้อยแล้ว ให้ทำการดาวส์โหลดแอปพลิเคชัน Transporter และติดตั้ง เมื่อเปิดแอปพลิเคชันขึ้นมาจะมีหน้าจอให้ Login ดังรูป จากนั้น ลากไฟล์ .ipa ของเรามายังหน้าจอของแอป กระบวนการ Validate ไฟล์ และอัพโหลดไปยัง App Store จะทำอัตโนมัติทั้งหมด หากเกิดข้อผิดพลาด จะมีหน้าต่างแจ้งเตือน หรือหากต้องการดู Log ก็มีให้เรียกดูได้ ดังภาพครับ เป็นอันเรียบร้อยครับ สามารถไปตรวจสอบว่า Build ของเราปรากฏอยู่บน appstoreconnect แล้วหรือยังโดยการกดปุ่ม … เลือก Open Appstoreconnect ได้เลย จริงๆแล้วบทความนี้จะเห็นได้ว่า เพียงแค่แนะนำให้รู้จักกับแอปพลิเคชันตัวนี้เท่านั้นครับ วิธีการใช้งานนั้นแค่ลากวางเป็นอันเสร็จ (ถ้าขั้นตอนอื่นๆถูกต้อง) โดยเฉพาะท่านใดที่ใช้ React Native แล้วใช้ Expo Server ในการ build เมื่อได้ไฟล์ .ipa มา ท่านไม่จำเป็นต้องโหลด Xcode ที่ขนาดมโหฬาร (ตัวติดตั้งอย่างเดียว 18GB ต้องมีพื้นที่ว่างในเครื่อง 40GB ถึงจะยอมให้ติดตั้งผ่าน Appstore) มาเพื่ออัพโหลดไฟล์เพียงอย่างเดียว หวังว่าบทความนี้จะเป็นประโยชน์ครับ