รู้จักเอแจ๊กซ์ (AJAX) และการใช้งาน

AJAX ย่อมาจากคำว่า Asynchronous JavaScript and XML ซึ่งหมายถึงการพัฒนาเว็บแอพพลิเคชั่นที่ประมวลผลในเบื้องหลังเป็นเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้สามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น ทำให้ความรู้สึกการใช้งานโปรแกรมเหมือนกับเดสก์ท็อปแอปพลิเคชัน ปกติแล้วในภาษาสคริปต์ที่ใช้งานกับเว็บไซต์จะมีการทำงานประมวลผลแบบเป็นลำดับ (synchronous) โดยที่คำสั่งแรกจะต้องประมวลผลให้เสร็จสิ้นก่อนแล้วถึงจะทำงานในคำสั่งถัดไป แต่กระบวนการทำงานแบบเอแจ๊กซ์เมื่อบราวเซอร์ (Browser) ร้องขอข้อมูลไปยังเซิร์ฟเวอร์ (Server) บราวเซอร์จะไปทำงานคำสั่งถัดไปทันที (asynchronous) โดยที่ไม่ต้องรอการตอบกลับจากเซิร์ฟเวอร์ก่อน ทำให้การตอบสนองต่อผู้ใช้งานดูรวดเร็วขึ้น และเมื่อเซิร์ฟเวอร์ประมวลผลเสร็จแล้วถึงจะส่งข้อมูลกลับมาที่เอแจ๊กซ์และให้เอแจ๊กซ์ทำงานกับข้อมูลที่ส่งกลับมาอีกทีซึ่งสามารถเขียนโค้คการทำงานดังนี้ ตัวอย่างโค้คการทำงาน AJAX ของโดยใช้ jQuery และปัจจุบันในการเขียน JavaScript เพื่อเรียกใช้งาน AJAX นั้นเราไม่จำเป็นต้องพึ่งพา jQuery อีกต่อไปแล้วซึ่งสามารถเขียนโค้ดการทำงานได้ดังนี้ วิธีที่ 1  ใช้ XMLHttpRequest [1] วิธีที่ 2 ใช้ Fetch API [2] อ้างอิง: https://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery [1] https://developers.google.com/web/updates/2015/03/introduction-to-fetch [2] https://www.javascripttutorial.net/javascript-fetch-api/   วิดีโอ: https://www.youtube.com/watch?v=F1TECaRf-uA&feature=youtu.be&t=2375

Read More »

รู้จักการจัดการข้อมูล JSON และการใช้งาน

รูปแบบข้อมูล JSON เป็นมาตรฐานในการแลกเปลี่ยนข้อมูลระหว่างเซิฟเวอร์และไคลเอนต์ที่ได้รับความนิยมในปัจจุบันซึ่งได้ถูกนำไปใช้งานอย่างแพร่หลายเช่นการเขียนโปรแกรมโดยใช้เทคนิค AJAX, RESTFul, เขียนคอนฟิกไฟล์ หรือการพัฒนา API เป็นต้น ด้วยคุณสมบัติของ JSON ที่เป็นไฟล์ประเภทข้อความ (Text based) ขนาดเล็กน้ำหนักเบา เป็นมาตรฐานกลางทุกภาษาสามารถใช้งานได้ง่ายทั้งการอ่านและเขียนที่มนุษย์สามารถอ่านเข้าใจได้ง่าย อักขระมาตารฐานของ JSON เครื่องหมาย “:” ใช้สำหรับแยกค่า name และ value เครื่องหมาย “,” ใช้สำหรับแยกข้อมุล name-value ในแต่ละคู่ เครื่องหมาย “{” และ “}” ระบุว่าข้อมูลเป็นออบเจ็ค เครื่องหมาย “[” และ “]” ระบุว่าข้อมูลเป็นอาเรย์ เครื่องหมาย “” (double quotes) ใช้เขียนค่า name-value ใน JSON ตัวอย่างการเขียนค่า Json – จำนวน 1 คู่ – หากมีมากกว่า 1 คู่ ให้ใช้เครื่องหมายคอมมา , (comma) ในการแยกเป็นคู่ – ต้วอย่าง JSON object ชนิดข้อมูลของ JSON มี 6 ชนิด คือ strings numbers objects arrays booleans null or empty – ตัวอย่างการใช้งานชนิดข้อมูล การใช้งาน JSON ร่วมกับภาษา JavaScript – ตัวอย่างการแสดงค่า JSON objects – ตัวอย่างการแสดงค่า JSON objects ใน array – ตัวอย่างการแสดงค่า JSON objects ใน objects ทริปเล็กๆน้อยๆ ในการใช้งาน JSON ในภาษา JavaScript มีฟังก์ชั่นที่เราใช้งานบ่อยๆ อยู่ 2 ฟังก์ชัน คือ JSON parser สำหรับแปลง JSON object เป็น javascript object ตัวอย่างเช่น  2. JSON stringify สำหรับแปลง JavaScript object เป็น JSON text (*ข้อควรระวังอย่าสับสนระหว่าง JSON object กับ  javascript object เพราะมันเป็นคนละอย่างกันนะครับ [3]) ทริปเพิ่มเติมสำหรับการใช้งานร่วมกับภาษา PHP จะมีฟังก์ชั่น json_encode เพื่อส่งข้อมูล json ไปให้ฝั่ง javascript ไปใช้งานต่ออีกที หากเราต้องการที่จะแปลงข้อมูลให้เป็น javascript object เพื่อจะให้เรานำข้อมูล json ไปทำงานต่อไปได้ง่ายขึ้นสามารถทำดังนี้ Reference: https://beginnersbook.com/2015/04/json-tutorial/ https://restfulapi.net/json-data-types/ Javascript Object VS JSON(JavaScript Object Notation) มันคนละเรื่องกัน ? [3]

Read More »

การเปลี่ยนแปลง Coded UI Test ใน Visual Studio 2019

Microsoft ได้ประกาศว่า Visual Studio 2019 จะเป็น Visual Studio รุ่นสุดท้ายที่มีฟังก์ชัน Coded UI test ทำไมถึงเลิกใช้ Coded UI Test Coded UI tests ถูกใช้งานสำหรับการทดสอบการทำงานแบบอัตโนมัติของ web apps และ desktop apps โดยที่ในช่วงหลายปีหลังมานี้ Open source UI testing tools เช่น Selenium และ Appium ที่มีแรงสนับสนุนจาก community ที่เข้มแข็งและกลายเป็นมาตราฐานกลาง ซึ่ง Coded UI tests นั้นก็มีพื้นฐานอยู่บน Selenium นอกจากนี้ทั้ง Selenium และ Appium ยังทำงานข้ามแพลตฟอร์มและรองรับภาษาการเขียนโปรแกรมหลายภาษา Microsoft จะยังคงให้การสนับสนุน Coded UI tests ใน Visual Studio 2019 อย่างเต็มที่ในอีกหลายปีในอนาคต แต่จะจำกัดเฉพาะการแก้ไขข้อบกพร่อง จะไม่มีการเพิ่มคุณสมบัติใหม่ โดยที่เราสามารถติดตั้ง Visual Studio รุ่นต่าง ๆ แบบ side by side ซึ่งหมายความว่านักพัฒนาจะสามารถใช้ Visual Studio 2019 สำหรับการทดสอบ Coded UI test ที่มีอยู่ ในขณะที่สามารถใช้ Visual Studio รุ่นใหม่ในอนาคตสำหรับความต้องการการพัฒนาในแบบอื่น ๆ กลไกการติดตั้งแบบ side by side ทำให้ CI/CD pipelines  ทำงานได้อย่างราบรื่นโดยไม่หยุดชะงักในขณะที่เปลี่ยนแปลง นี่เป็นเพราะ Coded UI tests ทำงานเป็นส่วนหนึ่งของ CI/CD pipelines ใน Azure DevOps โดยการทดสอบจะทำงานกับ Visual Studio รุ่นใดรุ่นหนึ่งที่ติดตั้งใน agent หรือแพลตฟอร์มทดสอบรุ่นใดรุ่นหนึ่งโดยเฉพาะ  ซึ่งหมายความว่าเราไม่จำเป็นต้องใช้ Azure DevOps server สองรุ่นที่แตกต่างกันเพื่อให้สามารถทดสอบ Coded UI ที่มีอยู่ ในขณะที่มีการเปลี่ยนแปลง ทางเลือกที่แนะนำใช้แทน Coded UI Test Microsoft แนะนำให้ใช้ Open source UI testing tools Selenium และ Appium มาระยหนึ่งแล้ว ซึ่ง Visual Studio 2019 ถือเป็น Visual Studio รุ่นสุดท้ายที่มีฟังก์ชัน Coded UI test โดยที่ Microsoft แนะนำให้ใช้ Selenium สำหรับการทดสอบเ web application และAppium กับ WinAppDriver สำหรับการทดสอบ Desktop application (WPF, WinForms, Win32) และ UWP apps ไม่มีเครื่องมืออัตโนมัติที่จะช่วยย้ายจาก Coded UI test ไปยัง Selenium หรือ Appium ในขณะนี้ เราแนะนำให้การสร้าง unit test ใหม่ ควรใช้ทาง Selenium หรือ Appium ในขณะที่วางแผนการแทนที่ Coded UI test เก่าเป็น Selenium หรือ Appium ให้เสร็จสมบูรณ์ก่อนสิ้นสุดระยะเวลาการสนับสนุนจาก Visual Studio Selenium Browser Automation Project Selenium เป็นเครื่องมือและไลบรารี สำหรับใช้งานและสนับสนุนการทำงานอัตโนมัติของ web browser มันมีส่วนขยายที่จะจำลองการโต้ตอบของผู้ใช้กับ browser และโครงสร้างพื้นฐานสำหรับการใช้งานข้อกำหนด W3C WebDriver ที่ช่วยให้เราสามารถเขียนรหัสที่สามารถใช้ได้สำหรับ web browser หลักทั้งหมด ที่แกนกลางของ Selenium

Read More »

แนวทางการเขียน Unit Tests ที่ดีสำหรับ C # (2)

ในบทความก่อนหน้า ได้พูดถึงการเลือก Testing framework ที่เหมาะสม การเขียน unit test โดยใช้แนวคิดแบบ “AAA” (Arrange, Acr, Assert) และการกำหนดชื่อ method ที่สื่อความหมายเข้าใจได้ง่าย Test Initialize & Cleanup เมื่อ unit tests ทำการทดสอบ methods ภายใน class ก็จำเป็นต้องสร้าง instance ของ class นั้นๆขึ้นมาก่อน ซึ่งจะเกิดขึ้นหลายๆครั้งใน unit test เพื่อประหยัดเวลาและทรัพยากรของระบบ เราสามารถใช้ [TestInitialize] attribute ของ MSTest เพื่อบอกว่า method นั้นใช้สำหรับกำหนดค่าเริ่มต้น สร้าง instance ของ class ก่อนที่จะเริ่ม run unit tests (หรือ [SetUp] ใน NUnit หรือถ้าใช้ xUnit.net ให้สร้างใน constructor ) เมื่อการทดสอบจบลง เราจะต้องทำการ cleanup object ต่างๆที่ใช้ในการทดสอบ โดยการใช้ [TestCleanup] attribute ในกรณีที่ใช้ MSTest ([TearDown ใน NUnit หรือ implement IDisposable interface สำหรับกรณีที่ใช้ xUnit.net) ตัวอย่างด้านล่าง จะกำหนดให้ method “Initialize” เป็น method ที่ใช้สำหรับสร้าง instance ของ class ที่จะใช้ในการทดสอบ ซึ่งจะถูกเรียกใช้ก่อนการทดสอบจะเริ่มทำงาน Shouldly Assertion Framework Shouldly framework จะช่วยให้ unit test ทำได้ง่ายและเข้าใจได้ง่ายขึ้น มันจะช่วยผู้พัฒนาในการเขียนการยืนยันผลการทำงานของ unit tests ซึ่งเมื่อกลับมาดู unit test อีกครั้งสามารถอ่าน code แล้วเข้าใจวัตถุประสงค์และความคาดหวังของการทดสอบ เปรียบเทียบความแตกต่างระหว่าง การใช้ Shouldly กับ ไม่ใช่ Shouldly With Shouldly Without Shouldly Shouldly สามารถใช้ในการตรวจสอบ exception ว่าเกิดตามที่คาดหวังไว้หรือไม่ และสามารถตรวจสอบ meesage ของ exception ได้ Moq Mocking Framework การสร้าง object จำลองสำหรับ object ที่ไม่ใช่ object หลักที่จะทำการทดสอบ แทนที่การเรียกใช้ object จริงๆ เช่น logging utility หรือ database จะทำให้การทดสอบทำได้อย่างมีประสิทธิภาพขึ้น ซึ่งการทำแบบนี้ เราต้องใช้ Mocking framework มาช่วย โดยตัวที่ได้รับความนิยมตัวนึงก็คือ Moq framework การใช้ Moq framework จะช่วยให่เราสามารถ mock class ต่างๆโดยใช้เพียง interface. ตัวอย่างเช่น การใช้ mock ของ logging utility ใน unit test แทนที่จะสร้างและเรียกใช้ logging utility ตัวจริง We can also verify if a mock object was invoked inside a method and the amount of times it was invoked: อ้างอิง : https://kiltandcode.com/2019/06/16/best-practices-for-writing-unit-tests-in-csharp-for-bulletproof-code/

Read More »