การบริหารโครงการโดยใช้เครื่องมือ 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 โดยจะปรากฎหน้าจอขึ้นมา เพื่อให้กำหนดรายละเอียดของรอบการพัฒนา หมายเลข

Read More »

Angular : Directives

May 26, 2018 23:48

Directives คือ สิ่งที่เราเพิ่มเข้าไปใน Tag ของ HTML ซึ่งจะไปสร้าง behavior ให้กับ DOM หรือ เปลี่ยนรูป DOM จะแบ่งออกเป็น 2 ประเภทใหญ่ๆ ได้แก่ 1. Built-in Directive ซึ่งส่วนใหญ่ขึ้นต้นด้วย *ng ที่ Angular มีมาให้ก็จะมีมากมาย อาทิเช่น ng-app : ฺบอกให้ Bootstrap เริ่มทำงาน Angular กับ element ไหน ng-controller : จะใช้ controller จัดการกับ view ไหน ng-model : binding ค่าเข้า view กับ model ng-show/ ng-hide : เพื่อแสดง/ซ่อน element ngFor : ใช้ในการวนลูป ngIf : ใส่เงื่อนไขเช็คค่า 2. Custom Directive ที่เราสามารถกำหนดเอง จะแบ่งเป็น HTML DOMS element – เราสามารถสร้าง element ใหม่ของเราขึ้นมาเองได้ เช่น <ma-directive></ma-directive> attribute เราสามารถสร้าง attribute ให้กับ element เช่น <div ma-directive=”test”></div> class name ตั้งชื่อคลาส เช่น <div class=”ma-directive: test;”></div> comment เช่น <!–directive: ma-directive test –> เราจะมาลองทำทั้งสองแบบ ก่อนอื่นสร้าง component ใหม่ชื่อ user โดยใช้คำสั่งดังภาพที่ 1 และใส่เพิ่ม tag <app-user></app-user> ในหน้า app.component.html ภาพที่ 1 สร้าง user component จากนั้นเปิดไฟล์ user.component.ts เพิ่มโค้ดดังภาพที่ 2 ซึ่งเป็นการกำหนดตัวแปรชื่อ users เก็บข้อมูลแบบ array แต่ละ user ประกอบไปด้วย name, code และ status ซึ่งเราจะนำไปวนลูปแสดงข้อมูล ภาพที่ 2 สร้าง array ของ users การใช้ Built-in Directive ในที่นี้จะยกตัวอย่าง ngFor สำหรับการวนลูป ซึ่งเราสามารถนำไปใส่ใน HTML Tag หรือ HTML Element นั้นๆได้เลยในไฟล์ user.component.html และหากต้องการใส่เงื่อนไข เราสามารถใช้ ngIf เพื่อเช็คค่าต่างๆ ดังภาพที่ 3 ภาพที่ 3 ตัวอย่างการใช้ ngFor และ ngIf จากภาพที่ 3 เราใช้ ngIf เพื่อตรวจสอบสถานะของ user โดยถ้าสถานะเป็น single จะแสดงรูปดาว และสถานะ married จะแสดงรูปหัวใจ เมื่อรันหน้าเว็บจะปรากฎหน้าจอดังภาพที่ 4 ภาพที่ 4 ผลลัพธ์ที่ได้ สำหรับตัวอย่างการทำ Custom Directive เราจะมาสร้าง highlight เมื่อเอาเมาส์ไปชี้ที่ชื่อ user โดยใช้คำสั่งดังภาพที่ 5 เพื่อสร้างDirective ชื่อ highlight ภาพที่ 5 คำสั่งสร้าง Custom Directive จากนั้นเปิดไฟล์ highlight.directive.ts ดังภาพที่ 6 ซึ่ง selector เป็นตัวบอกว่าคอมโพเน้นของเราจะมีชื่อเป็นอะไรเมื่อไปปรากฎที่ HTML Element หรือ Attribute ส่วนการเรียกใช้งานก็ให้อ้าง

Read More »

Angular : Data Binding & 2-Way Data Binding

May 24, 2018 23:52

Data Binding เป็นการติดต่อสื่อสารกันระหว่าง Business Logic หรือไฟล์ที่เป็นนามสกุล .ts กับ .html เราจะทดลองสร้างคอมโพเนนท์ใหม่ ชื่อ Calculator ดังภาพที่ 1 ภาพที่ 1 คำสั่งสร้างคอมโพเนนท์ และแก้ไขไฟล์ app.component.html ให้แสดงเฉพาะคอมโพเนนท์ calculator โดยการลบโค้ดทั้งหมดในไฟล์และใส่โค้ดดังภาพที่ 2 ภาพที่ 2 เพิ่ม Tag app-calculator ในไฟล์ calculator.component.html (ภาพที่ 3) เราจะใส่ property binding ใน HTML Tag ให้เป็นไปตามที่เราต้องการโดยการใช้เครื่องหมาย [ ] ซึ่งเราจะลองทำให้ตัวแปรกำหนดการ disabled ปุ่ม และในไฟล์ calculator.component.ts (ภาพที่ 4) เราจะกำหนดตัวแปรชื่อ isAllowed เป็น true ก็จะสามารถกดปุ่มได้ แต่หากเป็น false จะเป็นการ disable ปุ่ม ซึ่งตรงนี้เราเป็นการใช้ property binding ภาพที่3 property binding ใน HTML Tag   ภาพที่ 4 สร้างตัวแปร Binding ต่อไปเราจะสร้าง events เช่น การกดปุ่ม การคลิ๊ก เป็นต้น เราจะใช้เครื่องหมาย ( ) ในการกำหนด โดยเราจะเพิ่ม Event Binding ลงในปุ่ม CALCULATE ในไฟล์ calculator.component.html ดังภาพที่ 5 ภาพที่ 5 เพิ่ม events และสร้างตัวแปร result กับ ฟังก์ชั่น calculate() ไว้ใน calculator.component.ts ซึ่งเมื่อเรามีการกดปุ่ม แอพจะไปเรียก calculate() ขึ้นมาดังภาพที่ 6 ภาพที่ 6 เขียนฟังก์ชั่น calculate หลังจากนี้เราจะมาทำ 2-Way Binding ซึ่งก็คือการนำค่าของตัวแปรมาผูกกับค่าขอ HTML Form ต่างๆ ทำให้เมื่อแก้ไขค่าใน Form นั้นๆ แล้วค่าของตัวแปรจะเปี่ยนทันที โดยจะใช้สัญลักษณ์ [( )] ในตัวอย่างต่อไปเราจะสร้างตัวแปรสองตัวและนำค่ามาแสดง โดยสามารถเปลี่ยนค่าได้จาก Textbox เปิดไฟล์ calculator.component.html ขึ้นมารับค่า input 2 ตัว ดังภาพที่ 7 ภาพที่ 7 สร้าง input รับค่า และเปิดไฟล์ calculator.component.ts สร้างตัวแปรเก็บค่าชื่อ num1และ num2 และ addResult เก็บค่าผลบวกของทั้งสองตัวเพื่อเอามาแสดงใน result เมื่อกดปุ่ม calculate จะไปเรียกฟังก์ชั่น calculate() ดังภาพที่ 8 และเมื่อรันแอพขึ้นมาจะปรากฏหน้าจอดังภาพที่ 9 ภาพที่ 8 เขียนโค้ดบวกค่า input ทั้งสอง และแสดงผล   ภาพที่ 9 แสดงผลการรันแอพ

Read More »

Angular with Bootstrap & Component

May 23, 2018 23:59

ในบทความนี้เรานำ Bootstrap มาใช้ในโปรเจค ซึ่ง Bootstrap เป็น CSS Framework ที่ใช้ในการตกแต่งเว็บให้มีความสวยงามและเป็นระเบียบมากยิ่งขึ้น ก่อนอื่นเราต้องติดตั้ง Bootstrap โดยใช้คำสั่ง เปิดไฟล์ angular.json และเพิ่มโค้ดในส่วน styles หลังจากนั้นลองรันแอพ จะเห็นได้ว่า font ของตัวอักษรเปลี่ยนแปลงไป หากต้องการดูว่า Bootstrap 3 ทำอะไรได้บ้าง สามารถดูได้ที่ https://getbootstrap.com/docs/3.3/ ต่อไปเราจะมาดูกันว่าหลังจากรันแอพแล้วเกิดอะไรขึ้นบ้าง มีการโหลดไฟล์ใดบ้าง ไฟล์แรกที่จะถูกเรียกขึ้นมาก็คือ main.ts ในบรรทัดที่ 11 จะมีการเรียกต่อไปยังโมดูลที่ชื่อ AppModule โดยดูจากการ import ด้านบนแล้วโมดูลนี้ก็คือไฟล์ app/app.module ซึ่งอยู่ที่ src > app > app.module.ts หากเราเข้ามาดูในไฟล์นี้จะพบโค้ดตามรูปข้างล่าง จากรูปในบรรทัดที่15 เป็นการบอกให้เริ่มจากการโหลดคอมโพเนนท์ที่ชื่อว่า AppComponent และเราก็ดูที่ import เหมือนเดิมว่าไฟล์นี้อยู่ที่ไหน และทำการเปิดไฟล์ app.component.ts ขึ้นมา ในส่วนของ @Component ประกอบด้วย properties : selector: ‘app-root’ หากไปดูที่ไฟล์ index.html เราจะพบ HTML Tag ที่ชื่อว่า app-root ซึ่งเป็นการกำหนดว่าสิ่งที่เกิดขึ้นในคอมโพเนนท์นี้จะไปใส่ไว้ในไหน โดยที่ template ในข้อ2 จะถูกเอามาใส่ใน tag app-root โดยอัตโนมัติ templateUrl: เพื่อบอกว่าเราจะเอา template มาจากไฟล์ไหน ในที่นี้คือ app.component.html styleUrls: เป็นส่วนที่ใช้ตกแต่ง โดยไฟล์ในข้อ2 จะใช้ style ที่อยู่ในไฟล์ที่กำหนด ทดลองเพิ่มโค้ดในไฟล์ app.component.css และ index.html ตามลำดับ และลองดูผลลัพธ์ที่เกิดขึ้น จะเห็นว่า “Hello… World” เป็นสีดำ แต่ “Welcome to My App 22-5-2018” เป็นสีแดง เป็นเพราะว่าเราตั้งค่าไว้ว่าเฉพาะคอมโพเนนท์นี้ให้ใช้ไฟล์ตกแต่งชื่อ app.component.css ทำให้ส่วนอื่นที่ไม่ได้อยู่ใน sector ที่กำหนดไม่ได้ใช้การตกแต่งนี้    

Read More »

ระวังการใช้งานบนเครื่องที่ยังเป็น Windows XP จะถูกติดตั้ง Key Logger ระบาดในมหาวิทยาลัย

May 23, 2018 11:29

ช่วง 2-3 วันนี้ ระบบ PSU Webmail ตรวจพบว่า มีบัญชีผู้ใช้อย่างน้อย 3 ราย ถูกใช้งานจากสิงคโปร์ และตุรกี  แล้วส่ง email ออกไปเป็นจำนวนมาก ระบบตรวจจับได้ จึงทำการ Force Reset Password ของระบบ PSU Email บัญชีผู้ใช้ดังกล่าวอัตโนมัติ IP ที่ใช้งาน PSU Webmail ดังภาพด้านบน ตรวจสอบแล้ว พบว่า มาจาก 202.189.89.116 จากเครือข่ายของ Twentieth Century Fox ที่ ตุรกี 206.189.89.212 จากเครือข่ายของ Twentieth Century Fox ที่ สิงคโปร์ 128.199.202.189 จากเครือข่ายของ DigitalOcean ที่สิงคโปร์ ส่งอีเมลจำนวน 4 ฉบับ ถึง 800 emails ภายใน 1 นาที ดังภาพ ในการตรวจสอบเชิงลึกต่อไป พบว่า IP  206.189.89.116 ยังพยายาม Login ไปยังบัญชีผู้ใช้ 2 ใน 3 ข้างต้นอีกด้วย จึงสันนิษฐาน ว่า น่าจะเป็นคนร้ายกลุ่มเดียวกัน เพียงแต่สลับแหล่งที่เข้าใช้ PSU Webmail ไปมา จากการลงพื้นที่ ไปดูที่เครื่องผู้ใช้ พบว่า มีพฤติกรรมที่เหมือนกัน คือ ยืนยันว่า ไม่เคยคลิกเปิด email ที่ต้องสงสัยจริง ๆ (เอ่อ ใครก็จะพูดเช่นนั้น เอาว่าไม่มีหลักฐาน ก็ไม่สามารถสรุปได้ว่าไม่จริง) *** มีการใช้คอมพิวเตอร์ส่วนกลาง *** ซึ่งหนึ่งในนั้น จะเป็น Windows XP และมีโปรแกรมเถื่อนเป็นจำนวนมาก จึงขอตั้งข้อสังเกตว่า ถ้าผู้ใช้ยืนยันว่า ไม่ได้คลิก email หลอกลวงแน่ ๆ และยืนยันว่า ไม่ถูกหลอกแน่ ๆ เป็นจริง ก็น่าจะเป็นเพราะพฤติกรรมการใช้คอมพิวเตอร์ส่วนกลาง ที่เป็น Windows XP ซึ่งเป็นไปได้อีกว่า คงจะมี Key Logger หรือ โปรแกรมดักจับการพิมพ์บน Keyboard แล้วส่งไปให้คนร้าย   ในภาพใหญ่ของมหาวิทยาลัยสงขลานครินทร์ ยังมีเครื่องรุ่นเก่าที่ยังใช้ Windows XP อยู่ แถมยังใช้โปรแกรมเถื่อนที่อาจจะติดมาจากร้าน หรือ คนในออฟฟิซเองเอามาติดตั้งอยู่ หากสามารถ Enforce ให้เปลี่ยนได้ น่าจะลดปัญหาพวกนี้ได้   กำลังหาหลักฐานที่หนักแน่นพอ เพื่อนำเสนอผู้ใหญ่ต่อไปครับ  

Read More »