Adaptive Layout สำหรับแอปพลิเคชันบนระบบปฏิบัติการ iOS

สำหรับหัวข้อนี้สามารถนำไปใช้ได้ทั้งกับนักพัฒนาที่ใช้ Xcode และ Xamarin.iOS นะครับ แต่ภาพตัวอย่างที่ใช้ประกอบในบทความจะมาจาก Xamarin.iOS บน Visual Studio ครับ อุปกรณ์ที่ใช้งานระบบปฏิบัติการ iOS ในปัจจุบัน มีอะไรบ้าง และขนาดหน้าจอ ความละเอียดเท่าไหร่  คงเป็นคำถามแรกๆสำหรับนักพัฒนาแอปพลิเคชันสำหรับใช้งานบนระบบปฏิบัติการ iOS ก่อนที่จะเริ่มออกแบบหน้าจอ ข้อมูลจาก http://iosres.com/ นี้คือคำตอบนั้นครับ ความหลากหลายของขนาดหน้าจอ  จะเห็นได้ว่าเยอะไม่แพ้ Android เลยทีเดียวสำหรับปัจจุบัน เมื่อแอปพลิเคชันของเราจำเป็นต้องทำงานได้บนทุกอุปกรณ์  ต้องทำอย่างไร บทความนี้จะสรุปสิ่งที่ต้องรู้และศึกษาเพิ่มเติม เกี่ยวกับการทำ Adaptive Layout หรือ รูปแบบการแสดงผลที่ปรับเปลี่ยนไปตามขนาดหน้าจอได้เอง   Unified Storyboard เล่าวิวัฒนาการของวิธีการออกแบบ UI ของ iOS แอปพลิเคชันซักหน่อยนะครับ โดยแต่เริ่มนั้นเนื่องจากมีเพียงแค่ iPhone ที่ใช้ระบบปฏิบัติการ iOS เครื่องมือของทาง Apple สำหรับใช้ออกแบบหน้าจอเรียกว่า Interface Builder ซึ่งปัจจุบันถูกผนวกรวมมากับ Xcode เรียบร้อยแล้ว ใช้ไฟล์ .xib ในการออกแบบ ลักษณะจะเป็น 1 หน้าจอ 1 ไฟล์  ใช้ไฟล์เพียงชุดเดียว แต่เมื่อมี iPad ซึ่งมีขนาดหน้าจอที่แตกต่างออกไป นักพัฒนาก็ต้องสร้างไฟล์สำหรับ iPad อีกชุด ต่อมาไฟล์สำหรับออกแบบ UI ที่ชื่อว่า Storyboard  ก็ถูกนำมาใช้งาน เป็นการออกแบบในลักษณะที่ สามารถวางหน้าจอ หลายๆ หน้าจอ และกำหนดความเชื่อมโยง โดยใช้ segue เป็นตัวเชื่อมการแสดงผล แต่ก็ยังต้องมี ไฟล์ Storyboard สำหรับ iPhone และ iPad แยกกันอยู่ดี เมื่อมาถึง iOS 8.0 ความหลากหลายของขนาดหน้าจอมีมากขึ้นแม้แต่ iPhone เอง ก็มีหลายขนาด ตัว Unified Storyboard จึงถูกนำมาใช้เพื่อแก้ปัญหานี้ ทำให้ออกแบบ Storyboard เพียงไฟล์เดียวสามารถใช้งานได้กับอุปกรณ์ทุกขนาดหน้าจอ โดยใช้ร่วมกับเทคโนโลยีอีก 2 อย่างคือ Auto Layout และ Size Class วิธีการใช้งาน 1. เมื่อสร้างโปรเจ็คจะมีไฟล์ .storyboard เปิดไฟล์ จากนั้นในหน้าต่าง Property เลือกใช้งาน Use Auto Layout, Use Size Classes 2. ด้านบนของ Interface Builder จะปรากฏเมนูที่เกี่ยวกับการทำ Unified Storyboard ดังรูป 3. ทำการกำหนดค่าใน info.plist เพื่อใช้ไฟล์ Storybord ดังกล่าวเป็น Main interface ของทั้ง iPhone และ iPad 4. ตอนนี้ไฟล์ Storyboard ของเราก็พร้อมใช้งาน รองรับการออกแบบโดยมีความสามารถ Auto Layout และ Size Class ให้ใช้งานแล้วครับ   Auto Layout แนวคิดหลักของ Auto Layout คือการตั้งเงื่อนไขเพื่อกำหนดตำแหน่งและขนาดของ Control ที่อยู่บนหน้าจอ เพื่อให้สามารถปรับตำแหน่งให้เหมาะสมกับขนาดหน้าจอที่เปลี่ยนไปได้ ซึ่งเรียกว่า Constraint มีหลายชนิดด้วยกันดังนี้ Size Constraints คือการกำหนดขนาด โดยระบุ ความกว้าง ความสูง โดยส่วนตัวผมคิดว่าแบบนี้ค่อนข้างได้ใช้น้อยครับ เพราะเหมือนกับเรากำหนด Property ความกว้าง ความสูง ปกติ เหมาะใช้กำหนดแค่ความกว้าง หรือ ความสูงอย่างใดอย่างหนึ่งผสมกับ Constraints แบบอื่นๆ Center Constraints คือการกำหนดให้อยู่ในจุดกึ่งกลาง โดยอ้างอิงจากขนาดของ View ที่เปลี่ยนไป จะทำให้อยู่ในตำแหน่งกลางเสมอ อันนี้ก็ได้ใช้งานบ่อยครับ Combinational Constraints คือการอ้างอิงตำแหน่งของ Control

Read More »

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

การพัฒนาแอปพลิเคชันสำหรับระบบปฏิบัติการ 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

Read More »

วิธีการติดตั้ง Docker บน Ubuntu 16.04

“อยากติดตั้ง Docker บน Ubuntu 16.04 ทำอย่างไร”          นอกจาก containner ที่เป็น lxd ของ Ubuntu แล้ว ก็ยังสามารถใช้ในรูปแบบ Docker เช่นเดียวกัน แต่ค่อนข้างยุ่งยากกว่าเล็กน้อย โดยถ้าเทียบประสิทธิภาพแล้วในส่วนของ lxd จะดีกว่าแต่ในแง่ของ Image ทาง Docker ยังมีมากกว่า (แต่อนาคตอะไรก็ไม่แน่นอน ขึ้นอยู่กับจะเอามาใช้ทำอะไรมากกว่า และมีคนทำมาให้ใช้อันไหนมากกว่า หรือถนัด Image เองแบบไหนมากกว่า สรุปชอบอันไหนใช้อันนั้นแล้วกันครับ) วิธีการติดตั้ง (Ubuntu 16.04) *Ref : https://docs.docker.com/engine/installation/linux/ubuntulinux/ เนื่องจากไม่มี docker ใน Ubuntu Package โดยตรง จึงต้องเพิ่ม source.list ก่อนดังนี้ sudo apt-get update sudo apt-get install apt-transport-https ca-certificates sudo apt-key adv –keyserver hkp://ha.pool.sks-keyservers.net:80 –recv-keys 58118E89F3A912897C070ADBF76221572C52609D echo “deb https://apt.dockerproject.org/repo ubuntu-xenial maindeb https://apt.dockerproject.org/repo ubuntu-xenial main” | sudo tee /etc/apt/sources.list.d/docket.list deb https://apt.dockerproject.org/repo ubuntu-xenial maindeb https://apt.dockerproject.org/repo ubuntu-xenial main จากนั้น Update Package ให้ล่าสุดอีกครั้ง sudo apt-get update จากนั้นทำการติดตั้ง Linux Kernel Extra sudo apt-get install linux-image-extra-$(uname -r) linux-image-extra-virtual ทำการติดตั้ง Docker Engine ดังนี้ sudo apt-get install docker-engine จากนั้นทำการ Start Docker Service sudo service docker start ทำการทดสอบติดตั้ง Image Hello-World ดังนี้ sudo docker run hello-world จากนั้นสามารถใช้คำสั่งตรวจสอบ Version Docker ได้ดังนี้ sudo docker version จะเห็นว่าเพียงแค่นี้ก็ได้ Docker มาใช้งานแล้วครับ แถมอัพเดต Version ให้ตลอดด้วยครับ

Read More »

วิธีการติดตั้ง Docker บน Windows Server 2016

“อยากติดตั้ง Docker บน Windows Server 2016 ทำอย่างไร”          Feature ใหม่ของ Windows Server 2016 คือการใช้งาน Docker ที่สมบูรณ์มากขึ้น โดยใช้การจัดการผ่าน PowerShell Command แต่ยังไงก็ตามก็ยังไม่พ้นหน้าจอฟ้า ๆ ที่ใช้ในการติดตั้ง และตรวจสอบสถานะต่าง ๆ แต่เนื่องด้วยการรองรับที่สมบูรณ์มากขึ้น การใช้งานก็จะมีประสิทธิภาพไม่แตกต่างจากการรันบนระบบปฎิบัติอื่น ๆ เหมาะกับการนำมาใช้เพื่อลดการบริโภคทรัพยากร ช่วยให้ใช้สมรรถนะของเครื่อง Server เต็มประสิทธิภาพ และเหมาะสำหรับการใช้งาน Application ที่แตกตัวเพิ่มได้ตามจำนวนการใช้งานที่เพิ่มขึ้น จุดเด่นที่สำคัญอีกจุดคือ Windows Nano Server สำหรับผู้อยากใช้งาน Windows Server Container Image ขนาดเล็ก ซึ่งจะเขียนในหัวข้อต่อ ๆ ไปครับ วิธีการติดตั้ง (Windows Server 2016) *Ref : https://docs.microsoft.com/th-th/virtualization/windowscontainers/quick-start/quick-start-windows-server ทำการติดตั้ง OneGet PowerShell Module (ให้รันบน PowerShell ที่ Run As Administrator)  เมื่อขึ้นถามว่าจะติดตั้งหรือไม่ .ให้กด Y ตามด้วย Enter Install-Module -Name DockerMsftProvider -Repository PSGallery -Force จากนั้นใช้ OneGet ในการติดตั้ง Docker Version ล่าสุด เมื่อขึ้นถามว่าจะติดตั้งหรือไม่ กด A ตามด้วย Enter Install-Package -Name docker -ProviderName DockerMsftProvider จากนั้นทำการ Restart เครื่อง หลังจาก Restart มาจะเห็นว่าสามารถใช้คำสั่ง Docker บน Powershell ได้แล้วดังนี้ *หมายเหตุ : ในกรณีที่รันแล้ว error เกี่ยวกับ open //./pipe/docker_engine ให้เปิด firewall port 2375 ผ่าน powershell ที่รันด้วย administrator ดังนี้ # Open firewall port 2375 netsh advfirewall firewall add rule name=”docker engine” dir=in action=allow protocol=TCP localport=2375 # Configure Docker daemon to listen on both pipe and TCP (replaces docker –register-service invocation above) Stop-Service docker dockerd –unregister-service dockerd -H npipe:// -H 0.0.0.0:2375 –register-service Start-Service docker สำหรับการติดตั้ง Image ต่าง ๆ ถ้าไม่ได้ทำ Image เองสามารถหาจาก Docker Hub ได้ โดยขอยกตัวอย่าง Image ที่เป็น .net core ที่รันอยู่บน Nano Server ดังนี้ docker run microsoft/dotnet-samples:dotnetapp-nanoserver สำหรับ Command ต่าง ๆ ดูได้ที่ https://docs.docker.com/engine/reference/run/ ครับ **Image ที่ทดสอบลงให้ดูไม่สามารถใช้ทำอะไรได้นะครับ สำหรับการใช้งานจริงก็จะประมาณสั่ง Run + Option ต่าง ๆ เพื่อบอกว่าให้ทำอะไร ซึ่งจะยกตัวอย่างใน Blog ถัด

Read More »

Juju #06 – เชื่อม MySQL Master-Master เข้ากับ HAProxy

ต่อจาก Juju #05 – วิธีกระจายงานไปยัง MySQL แบบ Master-Master เมื่อสร้าง MySQL แบบ Master-Master Replication ได้แล้ว ก็มาเชื่อมกับ HAProxy เพื่อให้ Application ที่เขียน มองเห็นทั้งระบบเป็นชิ้นเดียว IP Address ของระบบต่างๆเป็นดังนี้ haproxy : 10.107.107.71 mysql-master1: 10.107.107.35 mysql-master1: 10.107.107.83 ขั้นตอนการติดตั้ง ที่ mysql-master1 ต้องสร้าง 2 Users ขึ้นมา ชื่อ haproxy_check และ haproxy_root ด้วยคำสั่งต่อไปนี้ mysql -u root -p$(cat /var/lib/mysql/mysql.passwd) -e “INSERT INTO mysql.user (Host,User) values (‘10.107.107.71′,’haproxy_check’); FLUSH PRIVILEGES;” mysql -u root -p$(cat /var/lib/mysql/mysql.passwd) -e “GRANT ALL PRIVILEGES ON *.* TO ‘haproxy_root’@’10.107.107.71’ IDENTIFIED BY ‘password’ WITH GRANT OPTION; FLUSH PRIVILEGES;” ที่ haproxy ติดตั้ง mysql-client ด้วยคำสั่ง sudo apt-get install mysql-client ทดสอบด้วยคำสั่ง mysql -h 10.107.107.35 -u haproxy_root -ppassword -e “SHOW DATABASES;” mysql -h 10.107.107.83 -u haproxy_root -ppassword -e “SHOW DATABASES;” แก้ไขไฟล์ /etc/haproxy/haproxy.cfg โดยเพิ่มบรรทัดต่อไปนี้ท้ายไฟล์ [3] frontend mysql-cluster bind *:3306 mode tcp default_backend mysql-backend backend mysql-backend mode tcp balance roundrobin server mysql-master1 10.107.107.35:3306 check server mysql-master2 10.107.107.83:3306 check และสุดท้าย ทดสอบด้วยคำสั่งต่อไปนี้ for i in `seq 1 6`; do mysql -h 127.0.0.1 -u haproxy_root -ppassword -e “show variables like ‘server_id'”; done ควรจะได้ผลประมาณนี้ จากนั้นก็สามารถพัฒนา Application โดยใช้ IP Address ของ haproxy ซึ่งในที่นี้คือ 10.107.107.71 และ Port 3306 ได้แล้ว ซึ่งเบื้องหลัระบบจะทำการ Replication กันเองทั้งหมด Reference: [1] https://www.digitalocean.com/community/tutorials/how-to-set-up-mysql-master-master-replication [2] https://www.digitalocean.com/community/tutorials/how-to-use-haproxy-to-set-up-mysql-load-balancing–3 [3] https://serversforhackers.com/load-balancing-with-haproxy  

Read More »