Category: Operating System

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

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

  • Windows Subsystem for Linux in Windows 10

    แนะนำวิธีติดตั้ง Windows Subsystem for Linux ใน Windows 10 รุ่น 1903 และวิธีเปิด sshd service อัตโนมัติ

    ขั้นตอน
    1.เปิด Featured Windows Subsystem for Linux ให้ไปที่ Control Panel เลือก Program เลือก Turn Windows features on or off ทำเครื่องหมายเพื่อเลือก Windows Subsystem for Linux รอสักครู่ จากนั้นจะมีคำสั่งให้ reboot เพื่อเริ่มใช้งานได้

    Open Control Panel
    Select Program
    Select Turn Windows features on or off
    Check Windows Subsystem for Linux
    Next, reboot Windows

    2.เปิด Microsoft Store App ใส่คำว่า ubuntu ในช่อง search เลือก Ubuntu 18.04 LTS App คลิก Get ถาม Sign in with Microsoft ให้ตอบ No, thanks จากนั้นรอ

    Open Microsoft Store
    Select Ubuntu 18.04 LTS App
    Get
    Answer with “No, thanks”
    On downloading

    3.เปิด Ubuntu 18.04 LTS ที่ปุ่ม Windows Start ให้คีย์คำว่า ubuntu แล้วเลือก Run ad administrator จะใช้เวลาสักครู่ แล้วจะให้เราตั้ง username และ password ที่ไม่จำเป็นต้องเหมือนกับ username ที่ sign in เข้า Windows

    Open Ubuntu with Run as administrator
    First time Installing

    4.เปิดอนุญาตให้มีการเชื่อมต่อผ่าน sshd ในครั้งแรกที่คีย์คำสั่งว่า
    sudo service ssh start

    Allow ssh in Windows Firewall

    5.ให้ถอนโปรแกรม openssh-server เพราะว่า Ubuntu ที่ได้มาไม่มี host key

    sudo apt remove openssh-server
    Remove sshd

    6.แล้วจะติดตั้งใหม่จะได้ ssh host key

    sudo apt install openssh-server
    Install sshd with new host key

    เปิด sshd service ด้วยคำสั่ง

    sudo service ssh start

    และทดสอบว่า บริการ sshd ทำงานได้แล้วด้วยคำสั่ง

    ssh john@127.0.0.1

    ให้เปลี่ยนคำว่า john เป็นชื่อ username ที่ใช้งาน
    จะพบว่าครั้งแรกนี้ จะเข้าไม่ได้ Permission denied (publickey)

    Permission denied

    7.เราจะตั้งค่าให้ใช้ password ได้ด้วยนอกจากใช้ public key

    sudo sed -i "s/^PasswordAuthentication no/PasswordAuthentication yes/" /etc/ssh/sshd_config
    Allow using password

    เปิด sshd service อีกครั้ง ด้วยคำสั่ง
    sudo service ssh restart
    และทดสอบอีกครั้งว่า บริการ sshd ทำงานได้แล้วด้วยคำสั่ง
    ssh john@127.0.0.1
    ให้เปลี่ยนคำว่า john เป็นชื่อ username ที่ใช้งาน
    ในรอบนี้ เราจะใส่ password ได้แล้ว หลังจากสำเร็จ ก็ใช้คำสั่ง exit ออกมา

    sshd is OK

    เมื่อมาถึงตรงนี้ เราได้ทำให้บริการ sshd พร้อมใช้งานใน Windows ของเราแล้ว

    ต่อไปเป็นการตั้งค่าให้บริการ sshd ทำงานทันทีที่เปิด Windows
    คีย์คำสั่งเหล่านี้

    echo "sudo /usr/sbin/service ssh start" > /mnt/c/startssh.sh

    และ

    echo "%sudo ALL = NOPASSWD: /usr/sbin/service ssh start" | sudo tee /etc/sudoers.d/custom

    (ตรงนี้อาจมีถาม password ของ username ที่กำลังใช้งานที่มีสิทธิใช้คำสั่ง sudo)
    และคำสั่งนี้

    sudo chmod 0440 /etc/sudoers.d/custom

    เสร็จแล้วคีย์คำสั่ง exit เพื่อปิดหน้าต่าง

    To prepare a task for Task Schdule

    คำเตือน: หากคีย์ข้อความในคำสั่งตกหล่น จะต้องกลับไปติดตั้ง Ubuntu ใหม่โดยการ Uninstall แล้ว Install ใหม่

    เราจะไปตั้งค่าให้ startssh.sh ทำงานด้วย Task Schedule
    เปิด Task Scheduler เลือก Run as administrator เลือก Task Scheduler Library ดูด้านขวา เลือกคำสั่ง Create Task

    Open Task Schedule
    Select Create Task

    แท็บแรกคือ General ตั้ง Name ว่า startssh เลือก Run whether user is logged on or not เลือก Run with highest privileges ที่ช่อง Configure for เลือก Windows 10

    General Tab

    แท็บสองคือ triggers เลือก New ที่ช่อง Begin the task เลือก At startup ที่ช่อง Advanced Settings ด้านล่าง เลือก Enabled

    Triggers Tab

    แท็บสามคือ Actions เลือก New ที่ช่อง Action เลือก Start a program ที่ช่อง Program/script ใส่คำว่า bash และที่ช่อง Add arguments ใส่ข้อความ /mnt/c/startssh.sh

    Action Tab

    จะมี pop up window ถาม username กับ password ที่จะรัน Task นี้ ก็ใส่ให้ถูก แล้วปิดหน้าต่าง Task Schedule

    Enter password

    เมื่อมาถึงตรงนี้ เราก็ได้ตั้งค่าให้ Start sshd เมื่อ Windows Start เสร็จแล้ว

    ทดสอบโดยการ reboot Windows เพื่อดูว่า Task Schedule ทำ task ขื่อ startssh ให้อัตโนมัติสำเร็จหรือไม่ โดยการทดสอบ ssh เข้าจาก PC อีกเครื่อง สมมติว่า เครื่อง Windows มี IP 192.168.6.221

    ssh john@192.168.6.221

    หลังจากตอบ Yes แล้วใส่ password ผ่าน ก็ให้พิมพ์คำสั่ง exit เป็นอันเสร็จสิ้นการทดสอบ
    หากได้ข้อความประมาณว่า ssh: connect to host 192.168.6.221 port 22: Resource temporarily unavailable ก็ต้องกลับไปตรวจสอบว่า ทำไมจึงเปิดบริการ sshd ไม่สำเร็จ ลองเช็ค Windows Firewall

    ต่อไปเป็นการนำ ssh key (id_rsa.pub) จากเครื่อง server ไปฝากไว้ที่ Windows Subsystem for Linux เพื่อเป็น publickey ใช้แทนการใส่ password เมื่อเราจะส่งคำสั่งเข้าไปจัดการ Windows ผ่านทาง Windows Subsystem for Linux เช่น reboot Windows เป็นต้น

    ตรวจสอบที่ server จะต้องมีไฟล์ id_rsa.pub ใน ~/.ssh/ ถ้ายังไม่ได้สร้าง key ก็ให้ใช้คำสั่งนี้

    ssh-keygen -t rsa
    directory ~/.ssh

    ส่ง ssh key ด้วยคำสั่งนี้

    ssh-copy-id -i ~/.ssh/id_rsa.pub john@192.168.6.221

    ให้แทนที่ john ด้วย username ที่ใช้ และเปลี่ยน IP เป็นที่ใช้

    Send ssh key

    ถ้าทำสำเร็จ ทดสอบด้วยคำสั่ง ssh john@192.168.6.221 จะเข้าได้โดยไม่มีถาม password
    ให้ออกจาก ssh นั้นด้วยคำสั่ง exit

    Testing

    ขั้นสุดท้ายทดสอบสั่ง reboot Windows ด้วยคำสั่ง เขียนติดกันเป็นบรรทัดเดียว

    ssh -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no john@192.168.6.221 "/mnt/c/Windows/system32/shutdown.exe -r -f -t 0"
    Now we can manage Windows from remote

    วิธีที่ได้นำเสนอนี้ จะนำไปเป็นส่วนหนึ่งในการควบคุม Windows PC ในห้องบริการคอมพิวเตอร์ ซึ่งเราจะประยุกต์ให้เป็นการติดตั้งผ่าน shell script ไม่ต้องคีย์ทีละคำสั่ง

  • ปิดช่องโหว่เหลือค้าง

    • หลังจากไม่ได้ตรวจสอบช่องโหว่มานาน วันนี้ Nessus ทำใหม่แล้วลองสแกนซักหน่อย
    Nessus Scan Report
    • ซึ่งจะพบว่ามี Medium สองรายการ คือ Browsable Web Directory และ WordPress User Enumeration โดย
      • Browsable Web Directory คือ สามารถเข้าถึงรายการใน directory ได้ เช่น ชื่อไฟล์ มีไฟล์อะไรบ้าง ขนาดเท่าไหร่ เป็นต้น เมื่อตรวจสอบก็พบว่าเป็น directory ที่ผู้ใช้ไม่จำเป็นต้องเข้าถึง
      • WordPress User Enumeration คือ สามารถเข้าถึง username ได้ว่ามี user อะไรบ้าง

    ปิด Directory Browsing

    ทำได้ 2 วิธีคือ

    • แก้ไขแฟ้ม config ของ site ที่ต้องการปิด โดยทั่วไปแฟ้มจะอยู่ที่ /etc/apache2/site-enabled/site.conf โดย site.conf คือชื่อไฟล์ที่ต้องการ โดยเพิ่มในส่วนของ Directory ของไซต์นั้น ตัวอย่างเป็น /var/www/html/aaeee ให้ทำการแก้ไขหรือเพิ่มข้อความตามตัวอย่าง ส่วนสำคัญคือ Options ต้องไม่มีคำว่า Indexes เมื่อแก้ไขเสร็จ ให้ reload หรือ restart apache2 ด้วยคำสั่ง sudo systemctl reload apache2 หรือ sudo systemctl restart apache2
    <Directory /var/www/html/aaeee>
            Options FollowSymLinks
            AllowOverride All
    </Directory>
    • สำหรับวิธีที่สองนี้ ต้องมีการระบุ AllowOverride All ในแฟ้มของไซต์ ด้วยจึงจะใช้งานได้ (หากแก้ไขไฟล์ไซต์ของ apache2 ต้อง reload หรือ restart ด้วย) เช่น
    <Directory /var/www/html/aaeee>
            AllowOverride All
    </Directory>
    • สร้างแฟ้ม .htaccess เอาไว้ใน Directory (จากตัวอย่างนี้คือ /var/www/html/aaeee) ที่ต้องการ โดยเพิ่มข้อความข้างล่างนี้วิธีนี้ มีผลทันทีไม่ต้อง reload หรือ restart apache2
    Options -Indexes

    ปิด WordPress User Enumeration

    • ในไซต์ของ WordPress จะมีแฟ้ม .htaccess อยู่ให้เพิ่มข้อความต่อไปนี้ลงไป โดย yoursite.name คือชื่อเว็บไซต์
    #user enumeration
    RewriteCond %{QUERY_STRING} ^author=([0-9]*)
    RewriteRule .* https://yoursite.name/? [L,R=302]
    • เมื่อทำสองอย่างแล้วให้ nessus เข้าตรวจสอบอีกครั้ง
    Nessus Scan Report
    • เย่….หายไปละ
    • จบขอให้สนุก
  • 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 location.
    • Gyroscope – Track rotation around the device’s three primary axes.
    • Launcher – Enables an application to open a URI by the system.
    • Magnetometer – Detect device’s orientation relative to Earth’s magnetic field.
    • MainThread – Run code on the application’s main thread.
    • Maps – Open the maps application to a specific location.
    • Open Browser – Quickly and easily open a browser to a specific website.
    • Orientation Sensor – Retrieve the orientation of the device in three dimensional space.
    • Phone Dialer – Open the phone dialer.
    • Platform Extensions – Helper methods for converting Rect, Size, and Point.
    • Preferences – Quickly and easily add persistent preferences.
    • Secure Storage – Securely store data.
    • Share – Send text and website uris to other apps.
    • SMS – Create an SMS message for sending.
    • Text-to-Speech – Vocalize text on the device.
    • Unit Converters – Helper methods to convert units.
    • Version Tracking – Track the applications version and build numbers.
    • Vibrate – Make the device vibrate.

    วิธีใช้งาน

    เปิด Xamarin.Forms project ขึ้นมา และไปที่เมนู Tools -> Nuget Package Manager -> Manage Nuget Package for Solution และในช่อง Search ให้ค้นหา Xamarin.Essentials ดังรูป

    ที่ฝั่งขวา ให้เราเลือก install ลงทุก project ทั้งในส่วน shared project ตรงกลาง และ specific platform project (android และ ios) แล้วกดปุ่ม Install ดังรูป

    ถึงตอนนี้ Xamarin.Essentials ถูกเพิ่มเข้าไปใน Reference package ของแต่ละ project เรียบร้อย แต่เรายังต้อง Config ค่าเพิ่มเติมนิดหน่อยเฉพาะ android project เท่านั้น (ios project ไม่ต้องทำอะไรก็ใช้งานได้เลย) เพื่อให้ Xamarin.Essential สามารถทำงานได้ โดยทำการเพิ่มเติม code ที่ MainActivity.cs เพื่อ initial Xamarin.Essentials ใน OnCreate() และทำการ override OnrequestPermissionResult() ดัง code ข้างล่าง เป็นอันเสร็จเรียบร้อยพร้อมให้ให้เขียน code เรียกใช้งาน feature ต่างๆ ได้เลยค่ะ

    protected override void OnCreate(Bundle bundle)
    {
        ...
        global::Xamarin.Forms.Forms.Init(this, bundle);
        Xamarin.Essentials.Platform.Init(this, bundle);
        ...
    }
    
    public override void OnRequestPermissionsResult(int requestCode, string[] permissions,
        [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
    {
        Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
    }
    

    ตัวอย่าง

    ให้ทำการ using Xamarin.Essentials ที่ class ที่เราจะเรียกใช้งาน หลังจากนั้นสามารถเขียน code ใช้งาน method ต่างๆได้เลยค่ะ ขอยกตัวอย่างบาง feature ดังต่อไปนี้นะคะ

    1. ส่ง SMS

    หากเราต้องการส่ง SMS จาก Xamarin.Forms app ของเรา ก็เขียน code ดังตัวอย่างข้างล่างนี้

    public class SmsTest
    {
        public async Task SendSms(string messageText, string recipient)
        {
            try
            {
                var message = new SmsMessage(messageText, new []{ recipient });
                await Sms.ComposeAsync(message);
            }
            catch (FeatureNotSupportedException ex)
            {
                // Sms is not supported on this device.
            }
            catch (Exception ex)
            {
                // Other error has occurred.
            }
        }
    }
    

    2. Get Location

    อยากรู้ตำแหน่ง Location ล่าสุดของ device ก็เขียน code ดังนี้

    try
    {
        var location = await Geolocation.GetLastKnownLocationAsync();
    
        if (location != null)
        {
            Console.WriteLine($"Latitude: {location.Latitude}, Longitude: {location.Longitude}, Altitude: {location.Altitude}");
        }
    }
    catch (FeatureNotSupportedException fnsEx)
    {
        // Handle not supported on device exception
    }
    

    ผู้เขียนขอยกตัวอย่างเพียงเท่านี้ ส่วนการเรียกใช้งาน feature อื่น สามารถอ่านได้จาก doc ของทาง Microsoft Xamarin.Essentials ได้เลยค่ะ ไม่ยากเลยใช่มั้ยคะ เขียน code เพียงไม่กี่บรรทัด เราก็สามารถเข้าถึง native feature ของแต่ละ platform ได้แล้วว ^^

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

    using System;
    using System.Collections.Generic;
    using System.Text;
    
    namespace MVVMBinding.Models
    {
        public class Employee
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string FullName
            {
                get { return string.Format("{0} {1}", FirstName, LastName); }
            }
        }
    }
    

    Step 4 : สร้าง ViewModel ชื่อ EmployeeVM ลงใน โฟลเดอร์ ViewModels โดยใน class นี้จะมีการ inherit และ implement interface ที่ชื่อ INotifyPropertyChanged ซึ่งเป็น interface ที่ช่วยให้ Binder property ทำงาน โดย code มีดังนี้

    using MVVMBinding.Models;
    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    using System.Text;
    
    namespace MVVMBinding.ViewModels
    {
        public class EmployeeVM : INotifyPropertyChanged
        {
            private ObservableCollection<Employee> _employees;
            public ObservableCollection<Employee> Employees {
                get
                {
                    return this._employees;
                }
                set
                {
                    this._employees = value;
                    OnPropertyChanged();
                }
            }
            public event PropertyChangedEventHandler PropertyChanged;
            protected virtual void OnPropertyChanged(
            [CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this,
                new PropertyChangedEventArgs(propertyName));
            }
    
            public EmployeeVM()
            {
                Employees = new ObservableCollection<Employee>();
            }
    
            public void AddNewEmployee(string fisrtName,string lastName)
            {
                Employee emp = new Employee()
                {
                    FirstName = fisrtName,
                    LastName = lastName
                };
                Employees.Add(emp);
            }
        }
    }
    

    Step 5 : สร้าง page ชื่อ EmployeePage ลงใน folder View โดยในส่วนของ EmployeePage .xaml ส่วนของ ListView จะมีการ Binding ข้อมูล กับ Employees ซึ่งเป็น property หนึ่งของ EmployeeVM สำหรับแสดงผลข้อมูล

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MVVMBinding.Views.EmployeePage">
        <ContentPage.Content>
            <StackLayout>
                <Label Text="My Employee"
                    VerticalOptions="CenterAndExpand" 
                    HorizontalOptions="CenterAndExpand" />
                <StackLayout>
                    <Label Text="ชื่อ"/>
                    <Entry Placeholder="กรอกชื่อ" x:Name="fnameEntry"/>
                    <Label Text="นามสกุล"/>
                    <Entry Placeholder="กรอกนามสกุล" x:Name="lnameEntry"/>
                    <Button x:Name="addBtn" Text="Add" Clicked="AddBtn_Clicked" />
                    <ListView ItemsSource="{Binding Employees}" BackgroundColor="Beige">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Label Text="{Binding FullName}"/>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    

    และในส่วนของ code behind=> EmployeePage.xaml.cs ก็ให้เซตค่า BindingContext ไปยัง EmployeeVM ดัง code ต่อไปนี้

    using MVVMBinding.ViewModels;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    namespace MVVMBinding.Views
    {
    	[XamlCompilation(XamlCompilationOptions.Compile)]
    	public partial class EmployeePage : ContentPage
    	{
            private EmployeeVM vm;
            public EmployeePage ()
    		{
    			InitializeComponent ();
                vm = new EmployeeVM();
                this.BindingContext = vm;
    		}
    
            private void AddBtn_Clicked(object sender, EventArgs e)
            {
                vm.AddNewEmployee(fnameEntry.Text, lnameEntry.Text);
                ClearEntry();
            }
            private void ClearEntry()
            {
                fnameEntry.Text = "";
                lnameEntry.Text = "";
            }
        }
    }
    

    Step 6 : เปิดไฟล์ App.xaml.cs ขึ้นมา และเซตค่า MainPage ให้เรียกไปยัง EmployeePage ดัง code ต่อไปนี้

    using MVVMBinding.Views;
    using System;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
    namespace MVVMBinding
    {
        public partial class App : Application
        {
            public App()
            {
                InitializeComponent();
    
                MainPage = new EmployeePage();
            }
    
            protected override void OnStart()
            {
                // Handle when your app starts
            }
    
            protected override void OnSleep()
            {
                // Handle when your app sleeps
            }
    
            protected override void OnResume()
            {
                // Handle when your app resumes
            }
        }
    }
    

    Step สุดท้าย : เสียบสาย Usb เชื่อมต่อระหว่างมือถือกับคอมของเรา build project แล้วก็กดรันโลดดด.. ผลลัพธ์ก็จะออกมาเช่นนี้

    เป็นอันเสร็จสิ้นการสร้าง app Binding ข้อมูลแบบ MVVM pattern ด้วย Xamarin.Forms แล้วนะคะ ซึ่งผู้อ่านสามารถนำไปใช้เป็นแนวทางและประยุกต์ใช้ตามความเหมาะสมกับ app นั้นๆต่อไปค่า ^^
    บทความถัดไป => Xamarin Essentials : Easy access Native Feature Platform

  • บริหารจัดการ App Passwords บน Office 365

    App passwords คือ password ที่จำเป็นต้องใช้บนแอพพลิเคชั่นใดๆ ก็ตามที่ไม่สามารถผ่าน Multi-factor authentication ได้ เช่น Outlook, Lync เป็นต้น

    เริ่ม…ได้

    Profile
    • เลือก My account จะได้ดังรูป
    My account
    • คลิก Security & privacy
    Security & privacy
    • คลิก Additional security verification
    Additional security verification 
    app passwords
    • คลิก create
    Create app password
    • ตั้งชื่อที่เราเข้าใจว่าคือ app ไหน คลิก Next
    Name
    • จะได้ password สำหรับใช้งานได้ทันที ก็เอาไปใช้ได้เลยแล้วคลิก close
    Your app password
    • จะเห็นว่า password ยาวมาก และเป็นพาสเวิร์ดที่สร้างขึ้นมาครั้งเดียว
    • จำไม่ได้ต้องสร้างใหม่ แล้วของเก่าทิ้งโดยการกด Delete หลัง password ที่ไม่ใช้งาน
    • ชื่อ app เป็นเพียงชื่อที่ใช้สื่อความหมายว่าเอาพาสเวิร์ดไปใช้กับ app อะไรเท่านั้น
    • password สามารถใช้ได้ตราบใดที่ยังไม่ลบออก ถึงแม้จะจำไม่ได้ถ้ากรอกไว้และให้โปรแกรมที่ใช้งาน password นี้จำไว้ก็จะใช้ได้ตลอด
    Delete app password
    Successfully deleted
    • จบขอให้สนุก
  • Download and install Office365

    ปัจจุบันนักศึกษาและบุคลากรของมหาวิทยาลัยสงขลานครินทร์ สามารถใช้งาน Office365 ได้แล้ว โดยมีเงื่อนไขดังนี้

    • PC (Windows) หรือ Macs สามารถติดตั้งรวมกันได้ 5 เครื่อง
    • Tablets ติดตั้งได้ 5 เครื่อง (Android, iPadOS)
    • โทรศัพท์ ติดตั้งได้ 5 เครื่อง (Android, iOS)
    • email account ภายใต้โดเมน @email.psu.ac.th ขนาด 50GB
    • พื้นที่จัดเก็บข้อมูล One drive ขนาด 5TB

    สำหรับนักศึกษา

    • สามารถเข้าระบบได้ที่ http://email.psu.ac.th หรือ https://outlook.com/email.psu.ac.th
    • โดย username จะเป็น
      [รหัสนักศึกษา]@email.psu.ac.th
      ยกตัวอย่าง เช่น 62111111111@email.psu.ac.th
    • รหัสผ่านคือรหัสเดียวกับ PSU Passport

    สำหรับบุคลากร

    • ต้องขอเปิดใช้บริการก่อนที่ https://passport.psu.ac.th
    • หลังจากขอเปิดใช้บริการ ต้องรอ 1 ชั่วโมง จึงจะสามารถใช้งานได้
    • สามารถเข้าระบบได้ที่ http://email.psu.ac.th หรือ https://outlook.com/email.psu.ac.th
    • โดย Username จะเป็น
      [log in ของ PSU passport]@email.psu.ac.th
      ยกตัวอย่าง เช่น username.s@email.psu.ac.th
    • รหัสผ่านคือรหัสเดียวกับ PSU Passport
    ขอใช้บริการ Office365

    เริ่ม…ได้

    Sign in

    หากเป็นการเข้าระบบครั้งแรก ระบบจะให้ทำการตั้งค่า Multi-factor authentication

    More information required
    • จะเป็นหน้า Additional security verification
    Additional security verification 
    • หากต้องการความง่ายให้เลือกตามรูป แล้วใส่หมายเลขโทรศัพท์ของเราลงไป
    • คลิก Next แล้วรอรับ SMS (**อาจใช้เวลานานกว่า SMS จะมา)
    Telephone 📞
    • กรอกตัวเลขจาก SMS แล้วกด Next
    SMS

    Pages: 1 2 3

  • Windows 10, Version 1903, May 2019 Update installation

    Windows 10, Version 1903, May 2019 Update เป็นรุ่นปรับปรุงที่ออกเมื่อ พฤษภาคม 2562 การติดตั้งเปลี่ยนแปลงไปนิดหน่อยดังนี้

    จะพูดถึงการติดตั้งใหม่เท่านั้น ใครจะอัพเดตผ่าน Windows update ก็สามารถอัพเดตได้เลย

    สำหรับนักศึกษา

    • Windows 10 ที่สามารถติดตั้งได้คือ Windows 10 Education เท่านั้น เนื่องจากหมายเลขผลิตภัณฑ์ (Product key) ที่ได้จาก Microsoft Azure เป็น Windows 10 Education โหลดได้จาก Microsoft Azure และ https://licensing.psu.ac.th/windows-10/
    • การ activate สามารถทำได้เพียงวิธีเดียวคือใช้ Product key จาก Microsoft Azure เท่านั้น
    • เมื่อติดตั้งจะมีหน้าจอให้เลือกว่าจะติดตั้งรุ่นไหน ก็ให้เลือก Windows 10 Education เท่านั้น
    Windows Setup
    Windows 10 Education 

    สำหรับบุคลากร

    • เลือกติดตั้งได้ 3 รุ่นได้แก่ Windows 10 Education, Windows 10 Pro และ Windows 10 Pro for workstation เท่านั้น รุ่น Enterprise และรุ่นที่มี N ต่อท้ายติดตั้งไม่ได้
    • การ activate สามารถทำได้ 2 วิธี คือ
      • กดรับ Product key ได้ที่ CD-Key ซึ่งเป็นคีย์กลางของมหาวิทยาลัย ใช้ร่วมกันทั้งมหาวิทยาลัย activate 1 ครั้งนับ 1 ครั้ง ฉะนั้นก่อน activate ควรติดตั้ง Software ตัวอื่น ๆ ให้เสร็จเรียบร้อยจนแน่ใจว่าจะไม่ติดตั้ง Windows ใหม่ในระยะเวลา 6 เดือน
      • activate ผ่าน KMS ของมหาวิทยาลัย วิธีนี้เหมาะสำหรับห้องปฏิการคอมพิวเตอร์ และเครื่องในสำนักงาน ที่เปิดใช้งานทุกวัน (หรืออย่างน้อย 1 ครั้งใน 6 เดือน) และเชื่อมต่อกับเครือข่ายของมหาวิทยาลัยตลอดเวลา

    เริ่ม…ได้

    • ดาวน์โหลดแผ่นได้ที่ https://licensing.psu.ac.th/windows-10/
    • สร้าง flash drive สำหรับบูต (flash drive ต้องมีขนาดอย่างน้อย 8GB) ด้วย Rufus https://rufus.ie/ หรือเขียนแผ่น DVD ให้เรียบร้อย
    • เปิดเครื่องบูตด้วย flash drive หรือ DVD ที่สร้างเตรียมไว้แล้ว
    Boot
    (more…)

    Pages: 1 2 3

  • เช็คฟอนต์สวย ด้วย WhatFont ~ Extension

    อะ แฮ่ม และแล้วก็เดินมาถึง Blog สุดท้ายในรอบ TOR ของปีนี้จนได้ แต่กว่าจะได้ฤกษ์เขียนได้ก็ปาเข้าไปกลางปีกันเลยทีเดียว (55+)

    มาๆๆ เรามาเข้าเรื่องกันเลยดีกว่า ต้องบอกว่าหลายครั้งที่เราได้เข้าเว็บไซต์นู้นนั่นนี่ แล้วเห็น font สวยๆ แต่ไม่รู้ว่านั่นน่ะมันคือ font อะไร ชนิดไหน … วันนี้ทางผู้เขียนขอนำเสนอ Chrome Extension (อีกแล้วเหรอ !) ที่เรียบง่ายแต่ใช้งานได้จริง นั่นคือ * WhatFont *

    WhatFont คืออะไร ???

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

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

    • ดาวน์โหลดได้จาก Chrome เว็บสโตร์ คลิก จากนั้นให้คลิกปุ่ม “เพิ่มใน CHROME” หรือ Add to Chrome
    • ระบบจะแสดง pop up ขึ้นมาให้คลิกเลือก “เพิ่มส่วนขยาย”
    • เมื่อเราติดตั้งเรียบร้อยแล้ว หน้าจอก็จะแสดง pop up ขึ้นมาแจ้งให้เราทราบว่าได้ติดตั้งเสร็จเรียบร้อยแล้ว
    • สำหรับวิธีการใช้งาน ให้เข้าเว็บที่เราต้องการ จากนั้นให้คลิกที่ Icon ที่มุมบนด้านขวาของ Browser
    • ให้นำเมาส์ไปวางไว้บนข้อความ / ตัวอักษร ที่เราต้องการจะรู้ว่าเป็น font อะไร
    • และหากต้องการจะดูรายละเอียดเพิ่มเติม เช่น ขนาด สี ความหนา ความบาง ก็ให้คลิกเลือกบนข้อความดังกล่าว จากนั้นจะมีส่วนแสดงข้อมูลเพิ่มเติมขึ้นมาให้เราได้ดูกัน

    เป็นยังไงกันบ้างเอ่ย ข้อมูลอันนี้นี่พอจะช่วยผู้อ่านได้บ้างมั้ย ??

    ยังไงก็แล้วแต่ทางผู้เขียนอยากแนะนำให้ทุกคนไปลองใช้กันดูนะ ง่ายดี ฟรีด้วย แทนที่เรา จะมานั่งคาดเดา หรือมโน กันเองว่า เอ๊ ! ตัวนี้นี่มันเป็น font อะไรแล้วน๊าา แบบนั้นมันล้าสมัยไปแล้ว เสียเวลาเปล่าๆ ติดตั้งตัวนี้กันเลย ง่าย ครบ จบในตัวเดียว 55+

    อย่าลืมลองเล่นกันดูนะ ไว้ปีหน้าฟ้าใหม่ เราจะมาเจอกันอีกใน Blog ถัดๆ ไปเน้ออออ

    ขอบคุณแหล่งอ้างอิง http://photoloose.com/what-font-chrome-extension/