การพัฒนา Web Application – Page 9

การบริหารโครงการโดยใช้เครื่องมือ Team Foundation Server (Phase 4 : การวางแผนงาน)

June 13, 2018 14:20

จาก บทความ “การบริหารโครงการโดยใช้เครื่องมือ Team Foundation Server (Phase 3 : ขั้นตอนการคัดเลือกความต้องการ และความหมายของ State)” ทำให้เราทราบแล้วว่าในรอบการพัฒนา (Sprint) เราจะต้องดำเนินการตามความต้องการ หรือ Backlog item ใดบ้างแล้วนั้น ต่อไปเราจะมาดูเรื่องการกำหนดทรัพยากรบุคคล และมอบหมายงานต่อไป ขั้นตอนการกำหนดทรัพยากรบุคคล ที่จะมาทำโครงการ เป็นขั้นตอนของการสร้าง Team และการเลือกคนเข้ามาอยู่ในทีมนั้นเอง ซึ่งแต่ละโครงการทีมงานอาจจะเป็นคนละคนกันได้ ในการสร้าง Team และกำหนดบุคลากร สามารถดำเนินการได้ตามขั้นตอนดังนี้ จาก TFS เลือก หมายเลข 1 ตามรูปที่ 1 รูปที่ 1 ทำการสร้าง Team โดยทำตามขั้นตอนตามรูปที่ 2 รูปที่ 2 จะปรากฎหน้าจอ เพื่อให้ใส่ข้อมูลรายละเอียดต่างๆ เกี่ยวกับข้อมูล Team ที่จะสร้าง ดังรูปที่ 3 รูปที่ 3 โดย หมายเลข 1 คือ ชื่อของ Team ที่ต้องการเพิ่ม หมายเลข 2 รายละเอียดเพิ่มเติม เกี่ยวกับ Team หมายเลข 3 ประเภทของการตั้ง Team เพื่อจุดประสงค์ ใด โดย TFS มีให้เลือก ดังรูปที่ 4 รูปที่ 4 เมื่อเราได้ Team แล้ว เราจะมา Add สมาชิก หรือทรัพยากรบุคคล ใน Team ที่สร้าง โดยทำตามขั้นตอน ในรูปที่ 5 รูปที่ 5 จะปรากฎหน้าจอ ดังรูปที่ 6 จากนั้น จะทำการ Add Members หรือสมาชิกในทีม โดยทำตามขั้นตอน ข้อ 1 ในรูปที่ 6 รูปที่ 6 จะปรากฎหน้าจอ เพื่อให้การพิมพ์ชื่อ เพื่อจะ Add Member ดังรูปที่ 7 โดยสามารถ ได้ ทีละหลายๆ คน และทำการ Save changes เพียงครั้งเดียว รูปที่ 7 จากขั้นตอนนี้ เราจะได้สมาชิกในทีมที่จะมาดำเนินการโครงการ หรือทรัพยากรบุคคลที่จะมาทำให้โครงการสำเร็จนั่นเอง ขั้นตอนการกำหนดงานย่อย (Tasks) และมอบหมายงาน จากบทความก่อนหน้า นั้น เราได้มีการสร้างรอบการพัฒนา ที่เรียกว่า Sprint ไว้แล้ว และได้ตกลงกับผู้ใช้เพื่อเลือกความต้องการ หรือ Backlog items ที่จะทำให้แล้วเสร็จในรอบการพัฒนาที่สร้างไว้ ซึ่งจะทำให้เห็นว่ามีความต้องการอะไรบ้างที่จะต้องทำให้เสร็จ จากนี้ Project Manager จะต้องทำการแตกงาน หรือ Task ลงไปว่าในแต่ละ Backlog item แต่ละตัวนั้น จะมีงานย่อย หรือ Task อะไร บ้าง ซึ่ง Project Manager จะต้องวางแผนไว้ และสามารถมาบันทึกใน TFS ได้ ดังขั้นตอนต่อไปนี้ จาก TFS เลือกโครงการที่ต้องการสร้าง Task ย่อย ตามหมายเลข 1 รูปที่ 8 รูปที่ 8 คลิกเลือก ตามรูปที่ 9 เพื่อไปสู่การบันทึก Task รูปที่ 9 เมื่อทำตามขั้นตอนข้างต้น ทำการเลือก Sprint และ Backlog ในขั้นตอนที่ 1 และ 2 ของรูปที่ 10 จะได้หน้าจอเหมือนรูปที่ 10 รูปที่

การบริหารโครงการโดยใช้เครื่องมือ Team Foundation Server (Phase 3 : ขั้นตอนการคัดเลือกความต้องการ และความหมายของ State)

May 31, 2018 10:03

จากบทความ การบริหารโครงการโดยใช้เครื่องมือ Team Foundation Server (Phase 2 : การบันทึกความต้องการ) ผู้เขียนได้กล่าวถึงการบันทึกความต้องการโดยใช้เครื่องมือ TFS ไปแล้ว สำหรับบทความครั้งนี้ ผู้เขียนจะกล่าวถึงขั้นตอนหลังจากรับความต้องการเข้ามา และจะเข้าสู่ขั้นตอนการคัดเลือกความต้องการ และการกำหนด State ในเครื่องมือ TFS การคัดเลือก Backlog items (Backlog items) หลังจากขั้นตอนการรวบรวมความต้องการ หรือ Backlog items จากลูกค้ามาแล้วนั้น Backlog items ที่ได้ทุกข้อจะถูกบันทึกเข้าสู่ TFS ซึ่ง Backlog items ที่ได้มาทั้งหมด อาจจะไม่ถูกเลือกให้ดำเนินการ หรือไม่ต้องดำเนินการด้วยเหตุผลต่างๆ ขึ้นอยู่กับการตกลงกันระหว่างผู้จัดโครงการ กับลูกค้า สำหรับเครื่องมือ TFS นำมาช่วย Project Manager ในขั้นตอนการคัดเลือก Backlog Items โดยการ Update State ของแต่ละ Backlog Items เพื่อให้ทราบว่า Backlog item อยู่ใน State ใด ตามความหมายดังนี้ รูปที่ 1 จากรูปที่ 1 นะค่ะ New : คือ Backlog items ที่เข้ามาใหม่ ยังไม่ผ่านการพิจารณา หรือยังไม่ผ่านขั้นตอนการคัดเลือก Approved คือ Backlog items ที่ผ่านการคัดเลือก แต่ยังไม่ดำเนินการในรอบปัจจุบัน ซึ่งอาจจะรอในรอบการพิจารณาถัดไปเพื่อให้ดำเนินการ Commited คือ Backlog items ที่ผ่านการคัดเลือก และตกลงให้แล้วเสร็จในรอบปัจจุบัน ซึ่งจะต้องประเมินเรื่องของความเหมาะสมของเวลาด้วย ว่าสามารถดำเนินการได้กี่ Backlog items Done คือ Backlog items ที่ผ่านการคัดเลือก และดำเนินการเสร็จเรียบร้อยแล้ว หรือ คือ Backlog items ที่ผ่านการคัดเลือกแต่ไม่ถูกให้ดำเนินการให้ทำ (ซึ่งจะมีการบันทึกไว้ใน หมายเหตุ หรือ History) ในบทบาทของ Project Manager คือ หลังจากได้ตกลงกับลูกค้าและร่วมกันคัดเลือกความต้องการแล้วแล้ว Project Manager จะทำการ Update State ของ Backlog item แต่ละข้อตามข้อตกลง สร้างรอบการพัฒนา หรือ Iteration ระบุ Backlog items ที่ทำการ Commited เข้าสู่รอบ Iteration ที่ต้องการ ทำการวางแผนย่อย (Tasks) ต่อไป วิธีการสร้างรอบการพัฒนา หรือ Iteration จาก Link ของ TFS รูปที่ 2 เลือก Configuration หมายเลข 1 ในรูปที่ 2 เพื่อเข้าไปจัดการเกี่ยวกับโครงการ จะปรากฎหน้าจอดังรูปที่ 3 รูปที่ 3 ในรูปที่ 3 จะแสดงโครงการ หรือ Project ทั้งหมดที่รับผิดชอบ ให้ทำตามขั้นตอน คือ เลือกโครงการ ตามหมายเลข 1 จะปรากฎรายละเอียดด้านขวา เลือก Link ตามหมายเลข 2 เพื่อเข้าไปทำการจัดการเกี่ยวกับรายละเอียดของโครงการที่เลือก จะปรากฎหน้าจอดังรูปที่ 4 รูปที่ 4 จากรูปที่ 4 ทำตามขั้นตอนเพื่อสร้างรอบการพัฒนา หรือ Iteration ดังนี้ กดเลือก หมายเลข 1 Iterations เพื่อจัดการเกี่ยวกับรอบการพัฒนา หรือ Iterations กดเลือกหมายเลข 2 เพื่อเลือก Release ที่ต้องการ ซึ่งอาจจะมีหลาย Release ขึ้นอยู่กับข้อตกลงกับลูกค้า หรือขึ้นอยู่กับความต้องการที่ได้รับ กดเลือกหมายเลข 3 เพื่อทำการสร้างรอบการพัฒนา ของ Release 1 โดยจะปรากฎหน้าจอขึ้นมา เพื่อให้กำหนดรายละเอียดของรอบการพัฒนา หมายเลข

การเรียกใช้งาน (Register) Bootbox.js ด้วย C#.NET

July 15, 2017 01:36

ในการออกแบบเว็บฟอร์มบันทึกข้อมูลลงฐานข้อมูลนั้น นักพัฒนาเว็บแอ๊พปลิเคชั่นส่วนใหญ่จะออกแบบเป็นลำดับขั้นตอนการทำงานประมาณนี้ ผู้ใช้เปิดเว็บฟอร์มขึ้นมาด้วยเว็บบราวเซอร์ ผู้ใช้กรอกข้อมูลลงในเว็บฟอร์ม ผู้ใช้กดปุ่มบันทึกข้อมูล ระบบตรวจสอบ (Validate) ข้อมูลที่ผู้ใช้กรอกเข้ามา ถ้าผ่านก็บันทึกข้อมูลลงฐานข้อมูล ถ้าไม่ผ่านก็จะแจ้งข้อความแจ้งเตือนผู้ใช้งานให้ตรวจสอบข้อมูลใหม่อีกครั้ง ระบบจะแจ้งผลการบันทึกข้อมูลว่า “บันทึกข้อมูลสำเร็จ” กรณีที่บันทึกสำเร็จ หรือ “เกิดข้อผิดพลาดในการบันทึกข้อมูล” ในกรณีที่มีข้อผิดพลาด การพัฒนาเว็บด้วย ASP.NET นั้นในขั้นตอนที่ 4 จะถูกเขียนด้วยโค้ด C#.NET ซึ่งเป็น Server Side Script ส่วนขั้นตอนที่ 5 นั้นเราสามารถใช้ Dialog ของ Bootbox.js ซึ่งเป็น Client Side Script มาช่วยได้ ซึ่งในบทความนี้จะแสดงวิธีการเขียนโค้ด C#.NET ให้เรียกใช้ Bootbox Dialog ได้เลย (อ่านบทความ การสร้าง JavaScript Dialog ด้วย Bootbox.js ได้ที่นี่) และสร้างเป็นฟังก์ชั่นสำเร็จรูปไว้เรียกใช้งานใหม่ได้ (Reuse) การรันคำสั่ง Bootbox.js ซึ่งเป็น JavaScript ผ่าน C#.NET นั้นจะต้องใช้ ScriptManager ช่วยลงทะเบียนสคริปต์ (Register Script) ดังนี้ เพียงเท่านี้ก็สามารถนำส่วนของโค้ดดังรูปที่ 1 ไปใช้ในการแสดงข้อความแจ้งผู้ใช้หลังการบันทึกข้อมูลลงฐานข้อมูลได้แล้ว โดยมีตัวอย่างดังรูปที่ 2 ผลลัพธ์ที่ได้จากโค้ดข้างต้นจะเป็นดังรูปที่ 3 แน่นอนว่าในการพัฒนาเว็บแอ๊พปลิเคชัน 1 ครั้ง จะประกอบด้วยฟอร์มบันทึกข้อมูลมากมาย ทำให้ต้องเขียนโค้ดซ้ำๆ กันหลายครั้ง จากโค้ดข้างต้นเราสามารถ Optimize โค้ดได้อีกโดยให้สามารถเรียกใช้งานและแก้ไขโค้ดในภายหลังได้ง่ายขึ้น โดยการย้ายส่วนลงทะเบียนสคริปต์ไปไว้ในฟังก์ชั่นกลางสร้างเป็น Library (ในที่นี้จะตั้งชื่อว่า CoreBLL) สำเร็จรูปไว้ใช้ต่อไปดังนี้ หลังจากที่สร้าง CoreBLL เสร็จแล้วให้แก้ไขโค้ดบันทึกข้อมูลดังรูปที่ 5 จะเห็นว่า CoreBLL ทำให้โค้ดในการบันทึกข้อมูลฟอร์มสั้นลง ง่ายขึ้น และช่วยลดความผิดพลาดในการเขียนโค้ดลง ในขณะที่หน้าจอผลลัพธ์ (รูปที่ 3) ยังคงเหมือนเดิม

การสร้าง JavaScript Dialog ด้วย Bootbox.js

July 15, 2017 00:18

เชื่อว่านักพัฒนาเว็บแอปพลิเคชันทุกคนต้องเคยได้ใช้งาน JavaScript กันเพื่อทำให้เว็บแอปพลิเคชันสามารถทำงานได้ตามความต้องการ ตัวอย่างตัวที่ใช้กันบ่อยๆ น่าจะเป็น JavaScript Confirm ใช้ในการยืนยันก่อนการดำเนินการต่าง ๆ เช่นการลบข้อมูล เพื่อป้องกันการคลิกปุ่มลบโดยไม่ได้ตั้งใจ ดังรูป จากรูปจะเห็นว่า JavaScript Confirm บน Google Chrome และ Mozilla Firefox หน้าตาไม่เหมือนกัน ทั้งๆที่ใช้โค้ดเดียวกัน และปัญหาอีกอย่างหนึ่งที่พบคือ หากเราต้องการให้ข้อความ “คุณต้องการลบข้อมูลรายการนี้ใช่หรือไม่?” มีการขึ้นบรรทัดใหม่ ใส่สี เพิ่มขนาดฟอนต์ จัดตัวหนา ตัวเอียงก็ไม่สามารถทำได้เลย แต่ถ้าต้องการให้แก้ปัญหาเหล่านี้ได้ก็ต้องใช้ตัวช่วย นั่นคือ Bootbox.js ซึ่งเป็น JavaScript library ที่ใช้งานร่วมกับ Bootstrap โดยใช้ Bootstrap modal มาทำหน้าที่แทน JavaScript Dialog ต่างๆ ทั้ง Alert, Confirm, Prompt และรวมถึง Custom Dialog ด้วย ทำให้หน้าตาของ Dialog จะเหมือนกันทุก Browser และสามารถจัดรูปแบบการแสดงผลได้ตามต้องการโดยใช้ CSS วิธีการติดตั้ง เข้าไปที่เว็บไซต์ http://bootboxjs.com และเลือกดาวน์โหลดไฟล์ชื่อ bootbox.min.js หรือถ้าไม่ต้องการดาวน์โหลดก็สามารถใช้ CDN (https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js) ได้เช่นกัน ใส่โค้ดอ้างอิงไปยัง bootbox.min.js ใน header tag ดังนี้ <script src=”path/to/script/bootbox.min.js”></script> หรือ <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script> ตัวอย่างการใช้งาน Confirm Dialog กำหนดชื่อ CSS class ให้กับปุ่มลบ ในที่ตั้งชื่อว่า “confirm” แทรกโค้ด JavaScript ใน HTML ดังนี้ ลองเปิดเว็บด้วย Google Chrome และ Mozilla Firefox ก็จะได้ผลลัพธ์เหมือนกันดังรูป นอกจาก Confirm Dialog แล้ว ท่านสามารถดูตัวอย่าง Dialog แบบอื่นๆ ได้จากที่นี่ เพียงเท่านี้ก็จะสามารถสร้าง Dialog สวยๆ และมีความยืดหยุ่นไว้ใช้งานได้แล้ว

การดึงค่าละติจูดและลองจิจูดของสถานที่ด้วย Places search box บน Google Maps

January 12, 2017 16:29

ก่อนจะพูดถึงเนื้อหาของบทความนี้ ผู้เขียนขอท้าวความไปถึงบทความก่อนหน้าที่เป็นเนื้อหาที่เกี่ยวข้องกับการดึงค่าละติจูด-ลองจิจูดของสถานที่ เพื่อมากำหนดจุดพิกัดบนแผนที่ หรือที่เรารู้จักกันดีในนามของ Google maps (ซึ่งสามารถหาอ่านได้จากลิงค์ ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# (ภาคต่อ) และหากท่านต้องการศึกษาเกี่ยวกับวิธีการกำหนดพิกัดบนแผนที่เพิ่มเติมสามารถหาอ่านได้จากลิงค์ ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# เช่นกัน) แต่หลังจากที่ผู้เขียนได้นำไปทดลองใช้งานการดึงค่าพิกัดที่ค้นหา พบว่าเกิดปัญหาในการค้นหาพิกัดของสถานที่ในบางกรณี คือ ไม่สามารถค้นหาพิกัดของบางสถานที่ที่ต้องการได้ และในบางครั้งผู้ใช้เลือกสถานที่ที่จะดึงค่าพิกัดมาใช้งานผิด เนื่องจากชื่อสถานที่อาจคล้ายกัน แต่ตั้งอยู่กันคนละประเทศ หรือทวีป โดยผู้ใช้อาจไม่เห็นภาพว่าสถานที่ดังกล่าวอยู่ส่วนใดของแผนที่ จึงทำให้พิกัดที่ได้มีความผิดพลาดหรือคลาดเคลื่อนได้ ผู้เขียนจึงได้ลองศึกษาเพิ่มเติม และปรับเปลี่ยนวิธีการ เพื่อให้การดึงค่าพิกัดเป็นไปได้ง่าย และอำนวยความสะดวกต่อผู้ใช้งานมากขึ้น รวมทั้งเพิ่มช่องทางในการค้นหาข้อมูลพิกัดได้มากขึ้นและมีความถูกต้องแม่นยำขึ้น ตัวอย่างภาพการทำงานของการดึงค่าพิกัดที่ผู้เขียนเคยเขียนไว้ก่อนหน้านี้ แบบที่ 1 การเรียกใช้เซอร์วิสของ Google Geocoding API โดยการส่งพารามิเตอร์เป็นที่อยู่ของสถานที่ดังกล่าว แบบที่ 2 แบบใช้ place Autocomplete ซึ่งเป็น feature ของ Google Places API ที่จะช่วยในการค้นหาที่อยู่จากชื่อสถานที่ได้และประยุกต์เพิ่มเติมเพื่อดึงค่ามาแสดงเมื่อมีการเลือกรายการสถานที่นั้นๆ จากปัญหาดังกล่าวข้างต้น ผู้เขียนได้ปรับเปลี่ยนวิธีการในการดึงค่าละติจูด-ลองจิจูดจากชื่อสถานที่ที่ผู้ใช้พิมพ์ค้นหาไว้ โดยมีการนำ “Places search box” มาใส่ไว้ในแผนที่ที่เราต้องการแทน เพื่อให้ผู้ใช้สามารถมองเห็นสถานที่จริงที่เลือกได้จากแผนที่ ซึ่งสามารถตรวจสอบได้ว่าสถานที่ดังกล่าวเป็นสถานที่ที่ต้องการจะดึงค่าละติจูด-ลองจิจูดจริงหรือไม่อีกทางหนึ่งนั่นเอง โดยมีวิธีการดังนี้ ส่วนของสไตล์ชีทในการแสดงผล ขึ้นกับการตกแต่งของผู้พัฒนาแต่ละท่าน <!—ส่วนของ Style Sheets–> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { width: 100%; height: 400px; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #searchInput { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 50%; } #searchInput:focus { border-color: #4d90fe; } </style> ส่วนของการอ้างอิง libraries เพื่อใช้งาน Google API <script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyCRbMoDPc_mTv3D3QPqe0Ar84nSvRhA8nk&libraries=places&callback=initMap” async defer></script> ส่วนของการประกาศค่าเริ่มต้นและตัวแปร รวมถึงการเรียกใช้งานฟังก์ชั่นเพื่อใช้ในการแสดงผล <script> /***** function ในการประกาศค่าเริ่มต้นให้กับแผนที่*****/ function initMap() { /***** กำหนดรายละเอียดคุณสมบัติของแผนที่*****/ var map = new google.maps.Map(document.getElementById(‘map’), { center: {lat: -33.8688, lng: 151.2195}, zoom: 13 }); /***** กำหนดตำแหน่งที่ตั้งของ control ที่จะวางในแผนที่*****/ var input = document.getElementById(‘searchInput’); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); /***** เพิ่ม Feature ให้กับ textbox ให้สามารถพิมพ์ค้นหาสถานที่ได้*****/ var