Category: Operating System

  • การตั้งค่า Font เริ่มต้นใน Word ไม่ต้องคอยเปลี่ยนทุกครั้ง

    สำหรับท่านที่อาจจะต้องพิมพ์เอกสารราชการบ่อยๆ ซึ่งต้องใช้ TH Sarabun นั้น คงเป็นเรื่องน่าเบื่อที่จะต้องมาคอยเปลี่ยน Font ทุกครั้ง

     

    อันที่จริงแล้ว ใน Microsoft Word 2016 (ล่าสุด ณ ตอนเขียนบทความนี้) ท่านสามามารถบันทึกรูปแบบเริ่มต้นทั้งฟอนต์, ขนาดฟอนต์ รวมทั้งรูปแบบตัวอักษรไว้เป็นค่าเริ่มต้นได้เลย (Overwrite the Normal.dotm template) ด้วยวิธีการต่อไปนี้ครัช

     

    1. เลือก Font ที่จะเป็น Font เริ่มต้น ในตัวอย่างเลือกเป็น TH SarabunPSK ขนาด 16 แล้วก็คลิกตามลูกศรชี้

    2. กดที่ Set As Default ตามลูกศรอีกเช่นเคย

    3.เลือก All document based on the Normal.dotm template แล้วกด OK

    เพียงเท่านี้ ค่าที่ตั้งไว้ก็จะเป็นค่าเริ่มต้นทุกครั้งที่เปิด Microsoft Word 2016

    (เนื่องจากผมใช้ UI เป็นภาษาอังกฤษ สำหรับภาษาไทยนั้น ลองเทียบตำแหน่งปุ่มดูนะครับ)

     

    หากมีข้อผิดพลาด ขออภัยไว้ ณ โอกาสนี้ครัช

  • มัลแวร์สวมรอยการใช้งาน Facebook

    มีรายงานจากศูนย์ประสานการรักษาความมั่นคงปลอดภัยระบบคอมพิวเตอร์ประเทศไทย (ไทยเซิร์ต) เมื่อวันที่ 10 พ.ค. 2559 พบว่ามีการแพร่กระจายมัลแวร์ประเภท Malicious Code ผ่าน Facebook โดยอาศัยช่องทางการแจ้งเตือนของ Facebook

    การทำงานของมัลแวร์

    เมื่อผู้ใช้ได้รับการแจ้งเตือนจาก Facebook ว่าถูกพาดพิงโดยบุคคลที่สาม หากผู้ใช้คลิกเข้าไปดูข้อความแจ้งเตือนดังกล่าวก็จะถูกนำไปยังไซต์อื่นทันที และเว็บไซต์ปลายทางที่ถูกนำพาไปจะปรากฏข้อความว่าเป็นส่วนขยายของ Browser สำหรับใช้เปลี่ยนสีของเว็บไซต์ Facebook และให้ดาวน์โหลดไฟล์ Instalador_Cores.scr มาติดตั้ง ซึ่งเป็นส่วนขยายของ Google Chrome

    รูปที่ 1 หน้าเว็บไซต์ปลายทางมีให้ดาวน์โหลดไฟล์ Instalador_Cores.scr

    หากผู้ใช้หลงเชื่อดาวน์โหลดและติดตั้งจะพบว่ามีการสร้างไฟล์ไว้ที่ไดเรกทอรี่ C:\User\[ชื่อผู้ใช้]\AppData\Local\Google\Update จากนั้นจะสร้าง Shortcut สำหรับเรียกใช้งาน Google Chrome ไว้ที่ Desktop โดยตัว Shortcut ดังกล่าวจะเป็นการเปิดใช้งาน Google Chrome โดยโหลดส่วนเสริมที่ถูกติดตั้งใหม่ขึ้นมาทำงานด้วย

    หากเปิดใช้งาน Google Chrome จาก Shortcut ดังกล่าว และเข้าใช้งานเว็บไซต์ Facebook ก็จะพบว่าสีของ Facebook เปลี่ยนเป็นสีเขียวดังรูปที่ 2 และยังสามารถปรับแต่งเป็นสีอื่นได้ตามต้องการ

    รูปที่ 2 ตัวอย่างส่วนขยายของ Google Chrome ที่สามารถเปลี่ยนสีเว็บไซต์ Facebook ได้

    นอกจากการทำงานดังกล่าวแล้วมัลแวร์ตัวนี้ยังได้แฝงการทำงานเบื้องหลังไว้โดยจะตรวจสอบว่ามีการล็อคอิน Facebook ไว้หรือไม่ หากใช่ก็จะสวมรอยไปโพสต์คอมเมนต์ในเว็บไซต์ pinandwin8.co.nz ทันที โดยในคอมเมนต์ก็จะมีการอ้างถึงผู้อื่นที่อยู่ในรายชื่อเพื่อนของผู้ใช้อีกด้วย

    การแก้ไขหากตกเป็นเหยื่อ

    1. ไปที่ไดเรกทอรี C:\User\[ชื่อผู้ใช้]\AppData\Local\Google\Update แล้วลบไดเรกทอรี่และไฟล์ที่มัลแวร์สร้าง ดังนี้ ไดเรกทอรี่ css, img, js ไฟล์ manifest.json, popup.html และ background.html
    2. ลบไอคอน Google Chrome ที่ถูกสร้างขึ้นใหม่ออกจาก Desktop

    การป้องกันการโจมตี

    1. ผู้ใช้ Facebook ควรอ่านข้อความแจ้งเตือนที่ปรากฏบนหน้าจอ โดยเฉพาะเมื่อ Facebook แจ้งว่าการคลิกลิงก์จะเป็นการเปลี่ยนเส้นทางไปยังเว็บไซต์อื่น
    2. หากคลิกลิงก์จาก Facebook แล้วพบหน้าจอขอให้ใส่รหัสผ่าน ไม่ควรใส่ข้อมูลเพราะอาจเป็นหน้าเว็บไซต์หลอกลวง (Phishing)
    3. หากคลิกลิงก์จาก Facebook แล้วพบหน้าจอขอให้ดาวน์โหลดโปรแกรม ควรพิจารณาก่อนดาวน์โหลดโปรแกรมนั้นเพราะอาจเป็นอันตรายได้
    4. ผู้ดูแลระบบอาจพิจารณาบล็อคเว็บไซต์ pinandwinco.nz เนื่องจากเป็นเว็บไซต์ที่เผยแพร่มัลแวร์

    แหล่งข้อมูลอ้างอิง

  • ทดสอบเว็บบน Browser ทุกตัวง่ายนิดเดียว

    ทดสอบเว็บผ่าน Browser
    หลังจากที่ได้มีการพัฒนาหรือสร้างเว็บขึ้นมาเรียบร้อยแล้วนั้น สิ่งแรกๆ ที่ต้องทำคือทดสอบเว็บของเราว่าสามารถที่จะแสดงผลผ่าน Browser ได้ดีหรือไม่ และแสดงผลได้ดีกับทุก Browser หรือไม่ เช่น Google Chrome , Firefox หรือจะเป็น Internet Explorer ซึ่ง Browser แต่ละตัวนั้นก็มีหลากหลายเวอร์ชันมาก และที่เราต้องพยายามทดสอบให้ได้มากที่สุดก็เพราะว่า เราไม่สามารถรู้ได้เลย ว่าลูกค้าหรือผู้ใช้เว็บของเรานั้นจะใช้เครื่องมือ หรือ Browser ตัวไหนเป็นหลัง ดังนั้นการทดสอบเว็บบน Browser ทุกตัวไม่ใช่เรื่องง่ายเลยจริงๆ

    ทำอย่างไรให้การทดสอบผ่าน Browser ทุกตัวเป็นเรื่องง่าย

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

    หลักๆ จากที่ศึกษาค้นคว้าเบื้องต้นพบว่าปัจจุบันมี Cloud Browser เปิดให้บริการมากมาย เช่น Saucelab, BrowserStack, Browserling, Ghostlab หรือ CrossBrowserTesting เป็นต้น

    สำหรับวันนี้จะขอนำเสนอหน้าตาของ BrowserStack กันก่อนละกัน

    • เราจะต้องสมัครสมาชิกกันก่อน โดยจะมีแบบ Free trial ให้เราทดลองใช้งาน สมัครเสร็จแล้วก็ Login เข้าไปทดลองใช้งานกันได้เลย

     

    • หลังจากสมัครสมาชิกทดลองใช้ฟรีกันเรียบร้อยแล้ว ก็จะพบกับหน้าตาของเจ้า BrowserStack แบบนี้

     

    • เราสามารถเลือกได้เลยว่าจะทดสอบเว็บกับระบบปฏิบัติการไน และ Browser อะไร

     

    • ตัวอย่างเช่นเลือก ระบบปฏิบัติการ Mac OS X Mavericks และ Browser Safari 7.1 ก็จะได้ตัวอย่างหน้าจอ
      แบบด้านล่าง

     

     

     

    • ในหน้าจอที่เรากำลังทดสอบก็จะมี Tool เล็กๆ ให้เราสามารถจัดการหน้าจอได้ เช่นสามารถ Switch เพื่อเปลี่ยนเป็นระบบปฏิบัติการ หรือ Browser อื่นๆ สามารถปรับ Resolutions
      ของหน้าจอได้ สามารถ Create a bug สามารถสร้าง Issue Tracker สามารถตั้งค่าอื่นๆ
      หรือตรวจสอบ Features ของตัว BrowserStack ได้ เป็นต้น

     

     

     

     

    สุดท้ายแล้วสำหรับเพื่อนๆ หรือใครที่มีปัญหายุ่งยากในการทดสอบเว็บให้ครบทุก Browser ก็สามารถลองเอาเจ้าตัว BrowserStack ไปใช้งานกันดู เผื่อบางทีอาจจะช่วยระยะเวลา หรือปัญหาต่างๆ ได้บ้างไม่มากก็น้อย ^ ^

    แหล่งความรู้อ้างอิง
    – http://soraya.in.th/2013/04/08/browserstack-ie/
    – https://medium.com/tag/browserstack
    – https://chittakorn.com/do-you-know/browser-testing/
    – http://www.designil.com/free-internet-explorer-mac.html

  • 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 มีหลายชนิดด้วยกันดังนี้

    1. Size Constraints คือการกำหนดขนาด โดยระบุ ความกว้าง ความสูง โดยส่วนตัวผมคิดว่าแบบนี้ค่อนข้างได้ใช้น้อยครับ เพราะเหมือนกับเรากำหนด Property ความกว้าง ความสูง ปกติ เหมาะใช้กำหนดแค่ความกว้าง หรือ ความสูงอย่างใดอย่างหนึ่งผสมกับ Constraints แบบอื่นๆ
    2. Center Constraints คือการกำหนดให้อยู่ในจุดกึ่งกลาง โดยอ้างอิงจากขนาดของ View ที่เปลี่ยนไป จะทำให้อยู่ในตำแหน่งกลางเสมอ อันนี้ก็ได้ใช้งานบ่อยครับ
    3. Combinational Constraints คือการอ้างอิงตำแหน่งของ Control จาก เส้นขอบทั้ง 4 ด้าน และ Control อื่นๆ ที่อยู่ใน View หรือแม้กระทั่ง Toolbar, Tab bar, Header, Footer ของ View อันนี้ผมใช้เยอะสุดครับ

    วิธีการใช้งาน

    1. เมื่อได้เปิดใช้งาน Auto Layout ในขั้นตอนการสร้าง Unified Storyboard แล้วนั้น จะปรากฏ Toolbar เมื่อต้องการใช้งาน ให้คลิกเลือกที่ Control ที่ต้องการ จากนั้นคลิกที่ไอคอน เพิ่ม ลบ หรืออัพเดทเฟรม ตามลำดับ โดยที่การเพิ่ม Constraint โดยวิธีการนี้จะเพิ่ม 2 ตำแหน่ง คือ top/bottom + left/right หาก Control นั้นไม่ได้มี intrinsic size (Control ที่จำกัดขนาดกับ View ที่แสดงผล นักพัฒนาไม่สามารถแก้ไขได้) ก็จะเพิ่ม Constraint ระบุ width + height ให้ด้วย

    2. จะเห็นได้ว่าการเพิ่ม Constraint โดยใช้ Toolbar นั้น ไม่สามารถตอบสนองการใช้งานได้ครบถ้วน เราสามารถเพิ่ม Constraint ทีละตำแหน่งได้เอง โดยดับเบิ้ลคลิกที่ Control ให้มีลักษณะ ดังรูป

    3. จากนั้นสามารถคลิกแล้วลาก ไปยังตำแหน่งอ้างอิง ซึ่งจะเปลี่ยนไปตามแต่ละด้านของ Control

    4. เมื่อเพิ่มสำเร็จสามารถตรวจสอบดูได้ที่ Property > Layout

    5. ในขณะที่เราเพิ่ม Constraint นั้น อาจจะสังเกตุได้ว่า กรอบของ Control เป็นสีส้ม ซึ่งหมายถึง Constraint ที่เรากำหนดไปนั้นยังไม่สมบูรณ์ หรือมีความขัดแย้งกัน ทำให้ไม่สามารถแสดงผลได้ถูกต้อง เรียกว่า Error นั้นเอง แนะนำว่าให้เพิ่มจนครบทุกด้าน และให้มี Constraint  เพียงชนิดเดียวในแต่ละด้านครับ ถ้ายัง Error อยู่ ให้ลองเช็คจุดอ้างอิง ถ้าเป็น Control ด้วยกัน Control ที่ใช้อ้างอิงจะต้องไม่ Error ครับ ไม่เช่นนั้นจะพากัน Error ทั้งหมด

    6. หากเพิ่ม Constraint สมบูรณ์กรอบจะเป็นสีน้ำเงิน แบบนี้ครับ และจะมีเส้นไกด์สีน้ำเงินเล็กๆ บอกตำแหน่งอ้างอิงอยู่ด้วย

    7. ทำการทดสอบแอปพลิเคชัน ด้วย Simulator ที่ขนาดหน้าจอต่างๆ ว่าแสดงผลถูกต้องหรือไม่

     

    Size Class

    เพื่อให้การออกแบบโดยใช้เพียงไฟล์ Storyboard เดียวใช้งานได้กับหน้าจอทุกขนาด ยังมีปัญหาในเรื่องของ การแสดงผลในแนวตั้ง และแนวนอน ที่การกำหนด Constraint ตอนทำ Auto Layout ไม่สามารถทำให้แสดงผลได้ถูกต้องซะทีเดียว จำเป็นต้องมีการแบ่งประเภทหน้าจอแสดงผล โดยใช้ Grid ขนาด 3×3 ซึ่งจะจำแนกได้เป็น 9 แบบ ดังรูป

    โดยจะมีคำเรียกขนาด 3 ชนิด คือ Compact, Any, Regular จากเล็กไปใหญ่ตามลำดับ  เมื่อนำเอา ความกว้าง และ ความสูง ทั้ง 3 แบบมาใช้ร่วมกันก็จะเป็นตัวแทนของ หน้าจอแบบต่างๆของทุกอุปกรณ์ที่ใช้ระบบปฏิบัติการ iOS ดังนี้ครับ

    ภาพประกอบจาก https://developer.apple.com/reference/uikit/uitraitcollection

    สังเกตุว่าจะมี แค่ 6 ขนาดที่เทียบกับอุปกรณ์จริงๆได้ ส่วนอีก 3 ขนาด ที่มีความกว้าง ความสูง แบบ Any ผสมอยู่ก็เพื่อใช้กับการออกแบบที่ไม่จำเป็นต้องระบุ Size Class เพราะสามารถใช้ Constraint ร่วมกันได้นั้นเองครับ

    วิธีการใช้งาน

    1. เมื่อต้องการติดตั้ง Size Class ใดๆเพิ่มเติม ให้เลือก Control ที่ต้องการจากนั้นในหน้าต่าง Property เลื่อนลงไปที่ Stretching คลิกที่รูปไขควง

    2. จะมีตัวเลือก Compact, Any, Regular ให้เลือก 2 ลำดับ โดยตัวเลือกลำดับแรกคือชนิดความกว้าง ลำดับที่ 2 คือชนิดความสูง

    3. เลือก Size Class ที่ต้องการออกแบบ จาก Toolbar

     

    ในบทความนี้เป็นเพียงแนวทาง และหยิบประเด็นใหญ่ๆที่ควรทราบในเรื่องของการทำ Adaptive Layout มาเท่านั้น เมื่อท่านใช้งานจริงจะยังมีประเด็นต่างๆที่ต้องศึกษาเพิ่มเติมอีกมากมาย หวังว่าสิ่งที่ผมรวบรวมมาจะเป็นประโยชน์ไม่มากก็น้อยครับ

    แหล่งอ้างอิง

    https://developer.xamarin.com/guides/ios/platform_features/introduction_to_Unified_Storyboards/

    https://developer.xamarin.com/guides/ios/user_interface/designer/designer_auto_layout/

  • 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
    4.รอจนกระบวนการติดตั้งสำเร็จ จะมีหน้าจอแสดงผลการติดตั้งเป็นอันเสร็จเรียบร้อย
    5.การใช้งาน Xamarin จำเป็นต้องอัพเดทให้ทันสมัยอยู่เสมอ เนื่องจากตัวซอฟแวร์จะมีการปรับรุ่นให้รองรับ iOS ที่ออกมาใหม่ๆ อยู่เสมอรวมทั้งการแก้ปัญหาบัคต่างๆ ด้วย โดยไปที่ Tools > Options > Xamarin แล้วกด Check Now จะทำการดาวน์โหลดและติดตั้งให้อัตโนมัติ

    6.หากมี Visual Studio ติดตั้งอยู่แล้ว ก็ยังสามารถใช้วิธีนี้ได้ครับ เพียงเปิด Installer ขึ้นมาใหม่ แล้วเลือก Modify

    สร้างโปรเจ็ค และการใช้งานด้านต่างๆ
    1.เปิด Visual Studio เลือก New Project > Visual C# > iOS จากตรงนี้ เราจะต้องเลือกว่า แอปพลิเคชันที่เรากำลังจะทำรองรับอุปกรณ์กลุ่มไหนระหว่าง iPhone, iPad, Universal (ใช้งานได้ทั้ง iPhone และ iPad) จากนั้นก็เลือก Template ให้เหมาะสมกับแอปพลิเคชันของเรา

    2.ในส่วนของผมเองเลือกเป็น Universal ครับ ซึ่งหากเลือกแบบนี้เราต้องออกแบบหน้าจอให้รองรับการใช้งานทั้งบน iPhone และ iPad ในขนาดหน้าจอ และความละเอียดต่างๆ ซึ่งวิธีการนั้นก็เฉพาะกับรุ่นของ iOS SDK ครับ

    3.ในกรณีใช้อีกเครื่องที่เป็น Windows ในการพัฒนา ก็ต้องทำการเชื่อมต่อกับเครื่อง macOS ที่ได้ติดตั้ง Xamarin Studio ไว้ โดยคลิกที่ไอคอน  แล้วทำการ Connect ให้เรียบร้อย
    4.โครงสร้างของโปรเจ็คก็จะมีหน้าตาประมาณนี้ครับ สามารถใช้งานความสามารถต่างๆ ของ .Net Framework ได้ครบถ้วน ด้านซ้ายมือมี Toolbox ให้เราสามารถลากวาง Control ที่เหมือนกับพัฒนาโดย Xcode ทุกประการ

    5.การเพิ่ม Component ต่างๆ สามารถทำได้ผ่าน NuGet Package Manager

    6.การเชื่อมต่อ Web Services ก็ทำได้อย่างง่ายดาย รวมถึงการเปลี่ยน URL ในการเชื่อมต่อขณะ Runtime ก็สามารถทำได้โดยกำหนด Property ชื่อ URL Behavior เป็น Dynamic ซะก่อน

    7.เมื่อทำการ Build และ Run ทดสอบ จะปรากฏ Simulator บนเครื่อง macOS นะครับ

     

    บทความนี้ขอจบไว้เพียงเท่านี้ครับ แต่สำหรับเรื่อง Xamarin และ หัวข้อต่างๆ ในการพัฒนาแอปพลิเคชันสำหรับ iOS จะมีตามมาจนครบถึงกระบวนการอัพโหลดขึ้น App Store ได้สำเร็จอย่างแน่นอนครับ

  • วิธีการติดตั้ง 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 ให้ตลอดด้วยครับ

  • วิธีการติดตั้ง 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

    **Image ที่ทดสอบลงให้ดูไม่สามารถใช้ทำอะไรได้นะครับ สำหรับการใช้งานจริงก็จะประมาณสั่ง Run + Option ต่าง ๆ เพื่อบอกว่าให้ทำอะไร ซึ่งจะยกตัวอย่างใน Blog ถัด ๆ ไป อันนี้แค่ติดตั้ง Docker เพื่อใช้งานอย่างเดียวครับ

  • 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

    ขั้นตอนการติดตั้ง

    1. ที่ 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;"
    2. ที่ 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

      ควรจะได้ผลประมาณนี้

    3. จากนั้นก็สามารถพัฒนา 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

     

  • Juju #04 – วิธีทำให้ WordPress กระจายงานไปยัง MySQL Slave ด้วย HyperDB

    ต่อจาก Juju #03 – วิธีสร้าง Load Balance MySQL เมื่อมี MySQL Server มากกว่า 1 ตัว ซึ่งทำการ Replication กัน (ในตอนนี้ 2 ตัว คือ Master กับ Slave) ซึ่งให้ความสามารถในเรื่อง [1]

    • Data-Security : เมื่อข้อมูลถูก Replicate ไปที่ Slave แล้ว เราสามารถหยุดการทำงานของ Slave เพื่อทำการสำรองข้อมูลได้ โดยไม่กระทบประสิทธิภาพการทำงานของ Master
    • Analytics: ทำการวิเคราะห์ข้อมูลต่างๆได้ที่ Slave โดยไม่กระทบประสิทธิภาพการทำงานของ Master
    • Scale-Out Solutions: เมื่อมี Slaves หลายตัว ทำให้สามารถกระจายงานในด้าน Read เพื่อเพิ่มประสิทธิภาพ โดยการแก้ไขข้อมูล จะทำที่ Master เท่านั้น

    ในบทความนี้ จะกล่าวถึงวิธีการ Scale-Out Solutions ของ WordPress เท่านั้น โดยใช้ Plugin ชื่อ HyperDB

    HyperDB [2] เป็น Database Class ที่ใช้แทนที WordPress built-in database functions โดยจะทำให้ WordPress สามารถติดต่อกับ MySQL ได้หลายเครื่อง โดยที่สามารถกำหนดได้ว่าจะ Write ไปยัง Master และ Read จากทั้ง Master และ Slaves อีกทั้งยังสามารถ Failover ได้อีกด้วย

    วิธีการติดตั้ง HyperDB

    1. ที่ WordPress ใช้คำสั่ง
      wget https://downloads.wordpress.org/plugin/hyperdb.1.2.zip
      sudo apt-get install unzip
      sudo unzip hyperdb.1.2.zip
    2. ย้ายไฟล์ hyperdb/db-config.php ไปยังที่ Directory เดียวกันกับ wp-config.php (ในที่นี้คื่อ /var/www/)
      sudo cp hyperdb/db-config.php /var/www
    3. ย้ายไฟล์ hyperdb/db.php ไปยังที่ Directory wp-content (ในที่นี้คื่อ /var/www/wp-content)
      sudo cp hyperdb/db.php /var/www/wp-content/
    4. แก้ไขไฟล์ db-config.php (ในที่นี้คื่อ /var/www/db-config.php) [3] โดยค้นหาคำว่า DB_HOST ซึ่งควรจะปรากฏอยู่แค่ 2 แห่งในไฟล์ ให้ไปที่ชุดที่ 2 ซึ่งมีเนื้อหาประมาณนี้

      จากนั้นแก้ไข DB_HOST ให้เป็น DB_SLAVE_1
    5. ต่อไปก็ไปเพิ่ม define(‘DB_SLAVE_1′,’xxx.xxx.xxx.xxx’) ซึ่งไฟล์ wp-config.php หรือไม่ก็ wp-info.php (ในที่นี้อยู่ที่ /var/www/wp-info.php)
    6. เมื่อทดสอบใช้งาน พบว่า มี Query มาทั้งที่ master และ slave
      ในภาวะว่าง

      ในภาวะมีงานเข้ามา
    7. ทดสอบเพิ่มบทความใหม่ ชื่อ “This is my first article” พบว่า ระบบสามารถเขียนไปยัง Master แล้วสามารถส่งต่อไปให้ Slave ได้
    8. ต่อไป เพิ่ม mysql-slave2 เข้าไปใน Juju และสร้าง Relation เป็น master -> Slave เช่นกัน

      แล้วทำการเพิ่ม DB_SLAVE_2 เข้าไปใน db-config.php และ wp-info.php

    9. ก็จะพบว่าข้อมูลได้ Replicate ไปหา Slave2 แล้ว
    10. และ เมื่อทำการ query ข้อมูลก็พบว่า มีการกระจายคำสั่ง Read ไปทั้ง 3 เครื่อง

    References

    [1] https://dev.mysql.com/doc/refman/5.7/en/replication.html

    [2] https://th.wordpress.org/plugins/hyperdb/

    [3] https://www.digitalocean.com/community/tutorials/how-to-optimize-wordpress-performance-with-mysql-replication-on-ubuntu-14-04