Mobile Device – Page 6 – CoP PSU IT Blog

Xamarin.iOS : ติดตั้งซอฟแวร์ และสร้างโปรเจ็ค

January 9, 2017 16:17

การพัฒนาแอปพลิเคชันสำหรับระบบปฏิบัติการ iOS นั้นมีหลายช่องทางในปัจจุบัน โดยไม่นานมานี้ ทางไมโครซอฟ ได้เข้าซื้อ Xamarin ซึ่งเป็นซอฟแวร์ สร้างแอปพลิเคชันสำหรับ Android, iOS, Windows Phone โดยใช้ภาษา C# โดยมีแนวคิดแชร์โค้ดในส่วน Logic ระหว่างแพลตฟอร์มได้ (แต่ส่วน User Interface และ Controller ต้องเขียนแยกกัน) ซึ่งเดิมทีซอฟแวร์ตัวนี้มีค่าใช้จ่ายในการนำมาใช้งานพอสมควร แต่ปัจจุบัน สามารถใช้ร่วมกับ Visual Studio ได้ตั้งแต่รุ่น Community ซึ่งฟรี ทำให้มีความน่าสนใจในการนำมาใช้งานสำหรับ ทีมพัฒนาระบบ ที่ใช้ Visual Studio ร่วมกับ ภาษา C# อยู่แล้วเป็นอย่างมาก สิ่งที่ต้องมี สำหรับการใช้ Xamarin พัฒนา iOS แอปพลิเคชัน 1.เครื่องคอมพิวเตอร์ที่ติดตั้ง macOS ได้ เช่น MacBook , MAC Pro, iMAC เป็นต้น หรือหากท่านใดสามารถสร้าง Virtual Machine ด้วย VirtualBox หรือ VMware แล้วติดตั้ง macOS ได้ ก้สามารถใช้งานได้เช่นกัน 2.Apple ID ที่ลงทะเบียน Apple Developer Account ไว้เรียบร้อยแล้ว (มีค่าใช้จ่ายรายปีประมาณ 3000 บาท) 3.หากต้องการใช้ Visual Studio เวอร์ชันสำหรับ Windows ในการพัฒนาก็ต้องมี เครื่องคอมพิวเตอร์อีกเครื่องที่ติดตั้งระบบปฏิบัติการ Windows (สำหรับท่านที่ต้องการใช้เครื่องเดียว สามารถใช้ Xamarin Studio หรือ Visual Studio For Mac ได้ เท่าที่ผมทดลองใช้งานก็มีความพร้อมระดับใช้งานได้ แม้จะเป็นเวอร์ชั่น Preview ในขณะที่ทดลองก็ตาม) ติดตั้ง Xamarin และ ตั้งค่าบน macOS 1.ติดตั้ง Xcode จาก App Store ให้เรียบร้อย เนื่องจากตัว Xamarin จำเป็นต้องใช้งานทั้ง iOS SDK และ Simulator ที่ติดตั้งมาพร้อมกับ Xcode ในการ Build และ Run เพื่อทดสอบแอปพลิเคชันของเรา 2.ใช้ Apple Developer Account สร้าง Provisional Profile ได้ที่ https://developer.apple.com/account/ios/certificate จากนั้นทำการดาวน์โหลดและติดตั้งให้เรียบร้อย 3.ดาวน์โหลดตัวติดตั้ง ที่ https://www.xamarin.com/download ใส่ข้อมูล ชื่อ, อีเมล, หน่วยงาน แล้วเลือกว่ามีการติดตั้ง Visual Studio ไว้แล้วหรือไม่ เลือกยอมรับข้อตกลง เลือก Download Xamarin Studio for OS X 4.เมื่อเริ่มติดตั้งจะมีหน้าจอให้ยอมรับข้อตกลง และแสดงความคืบหน้าในการติดตั้ง รอจนแจ้งผลติดตั้งเสร็จสิ้น 5.ตั้งค่าเปิดใช้งาน Remote Login สำหรับการเชื่อมต่อจากเครื่องพัฒนาอื่นไปที่ System Preferences > Sharing 6.เสร็จเรียบร้อยในฝั่ง macOS ติดตั้ง Xamarin บน Windows เพื่อใช้งานร่วมกับ Visual Studio 1.ดาวน์โหลดตัวติดตั้ง Visual Studio เวอร์ชั่นที่ต้องการใช้งาน สามารถใช้ได้ทั้ง Community, Professional, Enterprise (ในขณะที่เขียนผมใช้เวอร์ชั่น Enterprise 2015 with update 3) 2.เลือกติดตั้งแบบ Custom 3.ติดตั้ง Cross Platform Mobile Development Plugin ที่ตัวเลือกจะมีวงเล็บไว้ให้แล้วว่าเป็น Xamarin เลือกให้เรียบร้อยกด Next

แนวทางการพัฒนา App บนสมาร์ทโฟน

July 15, 2016 10:43

ถ้าใครเคยพัฒนา app เพื่อให้รองรับหลาย ๆ Platform ทั้ง iOS, Android หรือ Window Phone ก็คงจะทราบถึงความยากลำบากในการพัฒนา เนื่องจากแต่ละ platform ก็มีวิธีการพัฒนาที่แตกต่างกัน เช่น app ที่รันบน iOS พัฒนาโดยใช้ภาษา Object C, ภาษา Swift ในขณะที่ app ที่รันบน Android พัฒนาขึ้นโดยใช้ภาษา Java และ app ที่รันบน Windows phone ก็พัฒนาขึ้นด้วย .Net Framework จะเห็นว่าแต่ละ Platform ใช้เทคโนโลยีที่ต่างกันอย่างสิ้นเชิง ทำให้การพัฒนา app 1 ตัว ให้รองรับทั้ง 3 platform ดังกล่าวข้างต้น ต้องใช้ต้นทุนค่อนข้างสูง ใช้เวลาในการพัฒนาเยอะ และยุ่งยากในการบำรุงรักษา App บนสมาร์ทโฟน สามารถแบ่งออกเป็น 3 ประเภท ดังนี้ Native App คือ app ที่เกิดจากการพัฒนาโดยการใช้ SDK (Software Development Kit) ของ OS แต่ละค่าย ทำให้ app ที่พัฒนาขึ้นมีประสิทธิภาพสูง สามารถเรียกใช้งานฟังก์ชันต่าง ๆ เพื่อเข้าถึงหรือควบคุมอุปกรณ์ได้ เช่น ตัวรับสัญญาณ GPS กล้องถ่ายรูป อุปกรณ์สแกนลายนิ้วมือ ที่ติดตั้งมากับสมาร์ทโฟนได้โดยตรง แต่ข้อเสียคือจะสามารถทำงานได้กับ OS เฉพาะค่ายนั้นเท่านั้น Web App เป็น app ที่เข้าถึงได้ด้วยโปรแกรมประเภท Browser ต่าง ๆ ผ่านเครือข่ายคอมพิวเตอร์ เป็นที่นิยม เนื่องจากผู้พัฒนาสามารถอัพเดท หรือบำรุงรักษาได้โดยที่ไม่ต้องติดตั้งบนเครื่องผู้ใช้ ข้อเสียของ app ประเภทนี้คือ ไม่สามารถเขียนโปรแกรมเพื่อเรียกใช้งานฟังก์ชันต่าง ๆ เพื่อเข้าถึงหรือควบคุมอุปกรณ์ต่าง ๆ ของสมาร์ทโฟนได้ Hybrid App เป็น app ที่พัฒนาขึ้นโดยนำข้อดีของ app ทั้ง 2 ประเภทข้างต้นมารวมกัน โดยอาจจะมองว่า มันเป็น Web App ที่สามารถเขียนโปรแกรมให้เรียกใช้งานฟังก์ชันเพื่อเข้าถึงหรือควบคุมอุปกรณ์ต่าง ๆ ของสมารทโฟนได้ มีหน้าตาการใช้งานหมือนกับการ Native App แต่พัฒนาโดยใช้ภาษาต่าง ๆ เช่น HTML, CSS, Java Script เป็นต้น เปิดใช้งานด้วย Web viewer ของ OS แต่ละตัวเลย ข้อดีที่เด่นชัดคือ นักพัฒนาสามารถพัฒนา app ขึ้นมาเพียงชุดเดียว แล้ว build ให้มันสามารถรันบน platform ต่าง ๆ ได้ตามต้องการ รูปที่ 1เปรียบเทียบประสิทธิภาพ ความสามารถในการเขียน App แต่ละแบบ [ที่มา :http://androiddevelopersthai.blogspot.com/] การเลือกว่าจะพัฒนา app เป็นแบบไหน ก็ขึ้นอยู่กับความต้องการของผู้ใช้งานเป็นหลัก และเพื่อแก้ปัญหาที่ได้กล่าวไว้ตอนต้น พบว่า Hybrid App สามารถตอบโจทย์ได้เป็นอย่างดี โดยเครื่องมือที่นำมาใช้ในการพัฒนาที่มีประสิทธิภาพมากที่จะแนะนำในบทความนี้คือ Ionic Framework Ionic Framework Ionic Framework เป็นตัวช่วยในการใช้พัฒนา Hybrid App ที่ทำให้พัฒนา App แค่ครั้งเดียวก็สามารถ Build ให้รันได้ในหลาย Platform ซึ่งเทคโนโลยีที่ใช้ในการพัฒนาเป็นเทคโนโลยีเดียวกันกับที่ใช้ในการพัฒนาเว็บได้แก่ HTML, CSS และ Java Script ทำให้นักพัฒนาเว็บสามารถเรียนรู้วิธีการพัฒนาได้อย่างรวดเร็ว รูปที่ 2 Ionic Framework [ที่มา : http://blog.prscreative.com] Ionic Framework เป็น Open

การสร้าง Hybrid App ด้วย Ionic Framework

July 14, 2016 15:46

ในบทความนี้จะนำขั้นตอนการพัฒนา Hybrid App อย่างง่ายด้วย Ionic Framework เพื่อเป็นแนวทางการพัฒนาแก่ผู้ที่สนใจ โดยเครื่องที่ใช้ในการทดลองเป็นปฏิบัติการ Windows 10 มีขั้นตอนการติดตั้งเครื่องมือต่าง ๆ เพื่อให้สามารถใช้ Ionic ได้ดังนี้ ติดตั้ง js โดยดาวน์โหลดไฟล์ node-v4.4.7-x64.msi ได้จาก http://nodejs.org วิธีการติดตั้งก็ไม่ยุ่งยากครับ ใช้ Next Technology ได้เลย จะมีหน้าจอขั้นตอนต่าง ๆ ดังรูป ติดตั้ง Cordova และ Ionic command line tool โดยการเปิด command prompt ของ windows ขึ้นมา แล้วรันคำสั่ง $ npm install -g ionic เริ่มต้นสร้าง App อย่างง่าย หลังจากที่เตรียมความพร้อมของเครื่องที่พัฒนาเรียบร้อยแล้ว ขั้นตอนต่อไปก็จะเป็นการสร้าง App ขึ้นมา ซึ่ง Ionic ได้เตรียม template ตั้งต้นไว้ให้เราแล้ว ได้แก่ side menu, maps, salesforce, complex-list, blank เราก็ดูว่า App ของเราสามารถใช้ template ตัวไหนได้บ้าง ก็เลือกมาใช้ได้เลย รูปที่ 1 Ionic Template [ที่มา : http://ionicframework.com] ขั้นตอนการสร้าง App โดยใช้ command line tools เปิด command line ขึ้นมา แล้วกำหนด working directory เป็นที่ที่สำหรับใช้เก็บ project (ในที่นี้จะกำหนดเป็น “C:\ionic” ) สร้าง project กำหนดชื่อ myApp และใช้ tabs เป็น template ตั้งต้นโดยใช้คำสั่ง $ ionic start myApp tabs ผลลัพธ์ที่ได้จากคำสั่งนี้ จะทำให้ได้ไฟล์ต่าง ๆ ดังรูป จะพบว่ามีโฟลเดอร์ชื่อ www สำหรับเก็บโค้ด HTML, CSS, Java Script เหมือนกับการพัฒนาเว็บไซต์ ให้เราใช้ความรู้ด้านการเขียนเว็บไซต์สร้างไฟล์ต่าง ๆ เก็บไว้ในโฟลเดอร์นี้ได้เลย หลังจากสร้างไฟล์ App ขึ้นมาแล้ว ก็จะเข้าสู่ขั้นตอนการ Build ให้ App สามารถรันบน Platform ต่าง ๆ ได้ สำหรับในบทความนี้จะแสดงเฉพาะการ Build สำหรับ Android เพื่อให้เห็นเป็นแนวทางการพัฒนา เนื่องจากเครื่องที่ใช้ทดสอบเป็น Windows 10 หากจะ Build ให้รันบน iOS ได้ ก็ต้อง Build บนเครื่องที่ใช้ระบบปฏิบัติการ iOS ในส่วนของการเตรียมความพร้อมสำหรับการ Build ให้รันบน Android ได้ เครื่องที่ใช้ในการพัฒนาจะต้องติดตั้ง Java Development Kit (JDK) 7 และAndroid Stand-alone SDK Tools หรือ Android Studio ก่อน ซึ่งขั้นตอนการติดตั้งก็ไม่ยากครับ ใช้ Next Technology เช่นเคย Build และ Run บน Android โดยใช้คำสั่งต่อไปนี้ $ ionic platform add android $ ionic build android $ ionic emulate androidจะทำให้ได้ผลลัพธ์ดังรูป จากรูปเป็นผลลัพธ์ที่ได้จากการใช้ Tab template ซึ่งผู้พัฒนาจะต้องแก้ไขโค้ดให้เป็นไปตามที่ได้ออกแบบไว้

วิธีการทดสอบเว็บไซต์ Responsive บน Smart phone ด้วย Chrome

October 5, 2015 10:00

“ปัจจุบันกระแสการออกแบบเว็บเชิงตอบสนอง (Responsive design) ถูกนำมาใช้ในการออกแบบเว็บสมัยใหม่ เนืองจากสามารถดูได้ทั้งแบบผ่านเครื่องคอม แท็บเล็ต และมือถือ ได้โดยทันที” แต่ในระว่างการออกแบบ ถ้าผู้ออกแบบจะต้องมีการทดสอบบนอุปกรณ์แท็บเล็ต หรือมือถือ ต่างๆ ซึ่งมีความละเอียดของหน้าจอแตกต่างกันออกไป ซึ่งในส่วนที่ Chrome มีเครื่องมือที่ช่วยในการแสดงผลเว็บไซต์บนอุปกรณ์ Smart phone ได้ โดยไม่ต้องโหลดเพิ่ม แต่ประการใด !!! แถมวิธีการก็ง่ายแสนง่าย ขั้นตอนที่ 1 ให้ไปที่ More tools > Developer tools ดังภาพ ขั้นตอนที่ 2 เลือกที่รูปโทรศัพท์ ดังภาพ ขั้นตอนที่ 3 สังเกต ด้านซ้ายจะปรากฏหน้าจอมือถือขึ้นมา ให้ระบุ URL ที่เราต้องการดังภาพ จากภาพ จะเห็นว่าหากเป็นเว็บที่ออกแบบด้วยหลักการออกแบบเว็บเชิงตอบสนอง (Responsive design) จะมีการจัดหน้าจอให้เหมาะสมกับอุปกรณ์ ขั้นตอนที่ 4 สังเกต ด้านบน เราสามารถเลือกรุ่นของ Smart Phone ได้หลายรุ่น แม้จะไม่มาก แต่ก็เป็นรุ่นหลักและหลากหลายความละเอียด หรือจะเลือกปรับขนาดเองก็ทำได้ และสามารถปรับให้แสดงแนวตั้งและแนวนอนได้อีกด้วย ดังภาพ จะเห็นว่าเครื่องมือด้งกล่าวใช้งานไม่ยาก ทำให้สามารถดูหน้าจอในหลายๆ ความละเอียดได้อย่างรวดเร็ว

การตั้งค่า PSU Email สำหรับ Android device

May 14, 2014 14:38

การตั้งค่า PSU Email สำหรับ Android device โดยใช้ app Email (ที่ติดตั้งมาพร้อมกับเครื่อง) บางท่านอาจจะเจอปัญหาว่า เช็คเมลล์เข้าได้ แต่ไม่สามารถส่งเมลล์ออกได้ ลองทำตามขั้นตอนนี้ดูนะครับ ^^ 1. ไปที่ไอคอน Email บน android 2. ใส่ email address และ password 3. กดปุ่ม Next 4. รอการตรวจเช็คสักครู่ 5. เลือก IMAP account 6. ในส่วนของ Incoming server settings ให้ใส่ IMAP server ให้เป็น mail.psu.ac.th Port : 143 จากนั้น กดปุ่ม Next 7. ในส่วนของ Outgoing server settings ให้ใส่ ให้ใส่ SMTP server ให้เป็น smtp2.psu.ac.th Security type : TLS Port : 587 จากนั้น กดปุ่ม Next 8. กำหนดค่า Account options หากไม่ต้องการปรับแก้ ก็ให้กดปุ่ม Next ได้เลย 9. ทำการระบุ account a name และ display name หรือหากไม่ต้องการปรับเปลี่ยน ก็ให้กดปุ่ม Done เป็นอันเสร็จสิ้นกระบวนการตั้งค่า *** การตั้งค่าบน android นี้ จะเหมือนกับการตั้งค่าที่ Outlook Express เพียงแต่ว่าจะต่างกันตรงที่ จะต้องกำหนดค่า Security type เป็น TLS refer : วิธีตั้งค่า PSU Email สำหรับ Outlook Express