Month: May 2018

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

    sirirat.g

    จากบทความ การบริหารโครงการโดยใช้เครื่องมือ 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 นะค่ะ

    1. New : คือ Backlog items ที่เข้ามาใหม่ ยังไม่ผ่านการพิจารณา หรือยังไม่ผ่านขั้นตอนการคัดเลือก
    2. Approved คือ Backlog items ที่ผ่านการคัดเลือก แต่ยังไม่ดำเนินการในรอบปัจจุบัน ซึ่งอาจจะรอในรอบการพิจารณาถัดไปเพื่อให้ดำเนินการ
    3. Commited คือ Backlog items ที่ผ่านการคัดเลือก และตกลงให้แล้วเสร็จในรอบปัจจุบัน ซึ่งจะต้องประเมินเรื่องของความเหมาะสมของเวลาด้วย ว่าสามารถดำเนินการได้กี่ Backlog items
    4. Done คือ Backlog items ที่ผ่านการคัดเลือก และดำเนินการเสร็จเรียบร้อยแล้ว หรือ คือ Backlog items ที่ผ่านการคัดเลือกแต่ไม่ถูกให้ดำเนินการให้ทำ (ซึ่งจะมีการบันทึกไว้ใน หมายเหตุ หรือ History)

    ในบทบาทของ Project Manager คือ

    1. หลังจากได้ตกลงกับลูกค้าและร่วมกันคัดเลือกความต้องการแล้วแล้ว Project Manager จะทำการ Update State ของ Backlog item แต่ละข้อตามข้อตกลง
    2. สร้างรอบการพัฒนา หรือ Iteration
    3. ระบุ Backlog items ที่ทำการ Commited เข้าสู่รอบ Iteration ที่ต้องการ
    4. ทำการวางแผนย่อย (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 โดยจะปรากฎหน้าจอขึ้นมา เพื่อให้กำหนดรายละเอียดของรอบการพัฒนา
    • หมายเลข 4 Iteration name ให้ใส่ชื่อรอบของการพัฒนา ขึ้นอยู่กับ Project Manager  แต่ละท่าน เพื่อใช้ในการสื่อสานภายในทีมพัฒนา
    • หมายเลข 5 ให้ระบุ วันที่เริ่มต้นรอบการพัฒนา (Start date) และวันที่สิ้นสุดรอบการพัฒนา (End date)
    • กดเลือกหมายเลข 6 เพื่อบันทึกรายละเอียดที่ได้กำหนดไป

    หลังจากได้ทำการสร้างรอบการพัฒนา ไปแล้วเราสามารถตรวจสอบ หรือดูรอบการพัฒนาที่เพิ่มไปได้ โดย ทำตามขั้นตอน ในรูปที่ 5 ดังนี้

    รูปที่ 5

    • หมายเลข 1 เข้าไปยัง TFS
    • หมายเลข 2 เลือกโครงการที่ได้กำหนดรอบการพัฒนาไปข้างต้น
    • จะปรากฎหน้าจอดังรูปที่ 6 โดย

    รูปที่ 6

    • กดเลือกหมายเลข 1 เพื่อดูงาน ทั้งหมด
    • กดเลือกหมายเลข 2 คือ รอบการพัฒนา ที่เราได้ทำการเพิ่มเติมนั้นเองค่ะ

    ขั้นตอนการระบุ Backlog items ที่ทำการ Commited กับผู้ใช้หรือลูกค้าว่าจะดำเนินการในรอบนี้ เข้าสู่รอบการพัฒนา หรือ Iteration ที่ต้องการ

    มีขั้นตอนดังนี้

    รูปที่ 7

    จากรูปที่ 7

    หมายเลข 1 เลือก Backlog items เลือก Board

    หมายเลข 2 ในช่อง Approved คือ Backlog items ที่ได้ตกลงกับผู้ใช้ว่าจะดำเนินการ แต่ยังไม่ได้ระบุว่าจะดำเนินการในรอบใด ให้เลือก Backlog item ที่ตกลงว่าจะทำในรอบนี้

    หมายเลข 3 Double click ที่ Backlog item ที่จะกำหนดรอบการพัฒนา จะได้หน้าจอดังรูปที่ 8

    รูปที่ 8

    จากรูปที่ 8

    หมายเลข 1 เลือกรอบการพัฒนา (Iteration) ที่ได้ตกลงกับผู้ใช้ หรือลูกค้า

    หมายเลข 2 ระบุ State เป็น Commited คือตกลงจะทำให้แล้วเสร็จในรอบการพัฒนาที่กำหนด

    หมายเลข 3 กดปุ่ม Ave and Close เพื่อบันทึกข้อมูล

    โดยข้อมูล Backlog item จะไปอยู่ในช่อง Commited ดังรูปที่ 9

    รูปที่ 9

     

    รูปที่ 10

    จากรูปที่ 10 เราสามารถตรวจสอบข้อมูล ในมุมมองว่าในรอบการพัฒนานั้นๆ มี Backlog items อะไรบ้างที่เราต้องทำ โดย

    หมายเลข 1 เลือกเมนู Work

    หมายเลข 2 เลือก Iteration ที่ต้องการ

    หมายเลข 3 จะแสดง Backlog items ที่เรากำหนดให้ commited ในรอบการพัฒนาดังกล่าวนั่นเอง

    กล่าวโดยสรุป

    ในมุมมองของ Project Manager ในการนำเครื่องมือ TFS มาใช้ในกระบวนการคัดเลือกความต้องการ และกำหนดรอบการพัฒนา ทำให้เห็นภาพรวมของ Backlog Items ทั้งหมด ว่ามีความต้องการของระบบนี้ทั้งหมดกี่เรื่อง และมีการแบ่งรอบการพัฒนาขึ้นกี่รอบ เพื่อให้สามารถพัฒนาระบบให้ได้ครบทุกความต้องการ และแต่ละรอบการพัฒนา จะมีความต้องการใดบ้างที่จะต้องดำเนินการ ซึ่งเครื่องมือดังกล่าวสามารถแสดงให้ Project Manager เห็นได้ และสามารถติดตามได้นั่นเอง

     

    สำหรับขั้นตอนการวางแผนย่อย (Tasks) เพื่อให้แต่ละความต้องการ หรือแต่ละ Backlog item ทำได้สำเร็จ หรือเสร็จทันนั้นผู้เขียนขอกล่าวในรอบถัดไปนะค่ะ เนื้อหายาวไปเกรงว่าผู้อ่านจะเบื่อกันซะก่อน อยากให้ติดตามกันต่อนานๆ ค่ะ

     

    ขอบคุณค่ะ ^___^

  • Angular : Directives

    maliwan.s

    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 ส่วนการเรียกใช้งานก็ให้อ้าง attribute “appHighlight” ตามภาพที่ 3

    ภาพที่ 6 highlight directive

    จากภาพที่ 6 เป็นการเซตค่าเมื่อเอาเมาส์ไปชี้ onMouseEnter โดยจะไปเรียกฟังก์ชั่น highlight() เพื่อที่จะเปลี่ยนสีพื้นหลัง และ ขนาดตัวอักษร และเมื่อเอาเมาส์ออกเรียกฟังก์ชั่น undoHighlight() ซึ่งจะได้ผลลัพธ์ดังภาพที่ 7

    ภาพที่ 7 แสดงผลลัพธ์การทำ highlight directive

  • Angular : Data Binding & 2-Way Data Binding

    maliwan.s

    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 แสดงผลการรันแอพ

  • Angular with Bootstrap & Component

    maliwan.s

    ในบทความนี้เรานำ 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 :

    1. selector: ‘app-root’ หากไปดูที่ไฟล์ index.html เราจะพบ HTML Tag ที่ชื่อว่า app-root ซึ่งเป็นการกำหนดว่าสิ่งที่เกิดขึ้นในคอมโพเนนท์นี้จะไปใส่ไว้ในไหน โดยที่ template ในข้อ2 จะถูกเอามาใส่ใน tag app-root โดยอัตโนมัติ
    2. templateUrl: เพื่อบอกว่าเราจะเอา template มาจากไฟล์ไหน ในที่นี้คือ app.component.html
    3. styleUrls: เป็นส่วนที่ใช้ตกแต่ง โดยไฟล์ในข้อ2 จะใช้ style ที่อยู่ในไฟล์ที่กำหนด

    ทดลองเพิ่มโค้ดในไฟล์ app.component.css และ index.html ตามลำดับ

    และลองดูผลลัพธ์ที่เกิดขึ้น จะเห็นว่า “Hello… World” เป็นสีดำ แต่ “Welcome to My App 22-5-2018” เป็นสีแดง เป็นเพราะว่าเราตั้งค่าไว้ว่าเฉพาะคอมโพเนนท์นี้ให้ใช้ไฟล์ตกแต่งชื่อ app.component.css ทำให้ส่วนอื่นที่ไม่ได้อยู่ใน sector ที่กำหนดไม่ได้ใช้การตกแต่งนี้

     

     

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

    kanakorn.h

    ช่วง 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 ไปมา

    จากการลงพื้นที่ ไปดูที่เครื่องผู้ใช้ พบว่า มีพฤติกรรมที่เหมือนกัน คือ

    1. ยืนยันว่า ไม่เคยคลิกเปิด email ที่ต้องสงสัยจริง ๆ (เอ่อ ใครก็จะพูดเช่นนั้น เอาว่าไม่มีหลักฐาน ก็ไม่สามารถสรุปได้ว่าไม่จริง)
    2. *** มีการใช้คอมพิวเตอร์ส่วนกลาง *** ซึ่งหนึ่งในนั้น จะเป็น Windows XP และมีโปรแกรมเถื่อนเป็นจำนวนมาก

    จึงขอตั้งข้อสังเกตว่า ถ้าผู้ใช้ยืนยันว่า ไม่ได้คลิก email หลอกลวงแน่ ๆ และยืนยันว่า ไม่ถูกหลอกแน่ ๆ เป็นจริง ก็น่าจะเป็นเพราะพฤติกรรมการใช้คอมพิวเตอร์ส่วนกลาง ที่เป็น Windows XP ซึ่งเป็นไปได้อีกว่า คงจะมี Key Logger หรือ โปรแกรมดักจับการพิมพ์บน Keyboard แล้วส่งไปให้คนร้าย

     

    ในภาพใหญ่ของมหาวิทยาลัยสงขลานครินทร์ ยังมีเครื่องรุ่นเก่าที่ยังใช้ Windows XP อยู่ แถมยังใช้โปรแกรมเถื่อนที่อาจจะติดมาจากร้าน หรือ คนในออฟฟิซเองเอามาติดตั้งอยู่ หากสามารถ Enforce ให้เปลี่ยนได้ น่าจะลดปัญหาพวกนี้ได้

     

    กำลังหาหลักฐานที่หนักแน่นพอ เพื่อนำเสนอผู้ใหญ่ต่อไปครับ

     

  • ปัญหาในการลืมรหัสผ่านจะหมดไปด้วย … LastPass

    parnchanok.j

    blog ที่ 3 สำหรับปีนี้ ทางเราขอนำเสนอ แทน แท่น แท๊นนนน Extension ที่ชื่อว่า “LastPass” นั่นเอง

    ส่วนเสริมตัวนี้จะช่วยให้ปัญหาการลืม Password ที่เข้าเว็บต่างๆ ทั้งร้อยแปดพันเก้า ที่เราเข้าใช้งานหมดไป
    ในปัจจุบันนี้ต้องยอมรับอย่างนึงว่า เว็บไซต์ที่เราใช้บริการทั้งหลายทั้งมวลนั้นมีมากมายหลากหลายเหลือเกิน

    ทั้งงานเอย social เอย หรือแม้แต่จะเป็น ฐานข้อมูลในการเก็บข้อมูลต่างๆ ทั้งหมดเหล่านี้ล้วนจะต้องมีการสร้าง

    account เพื่อเข้าไปใช้งานทั้งสิ้น และสิ่งนึงที่เราจะเจอบ่อยๆ ก็คือ website นี้ รหัสผ่านอะไรแล้วน้ออออ !! 55+

    อะ ไม่พูดพร่ำทำเพลงมากมาย ไปดูเจ้าตัว Extension “LastPass” กันเถิดดดด …..

    1. ติดตั้ง Extension ผ่านลิงค์นี้ได้เลย คลิก  จากนั้นเริ่มต้นสร้างบัญชี เพื่อเข้าใช้งาน

    ปล…จากนั้นต่อไปในอนาคตเราก็จะปล่อยให้ LastPass ช่วยเราจำในส่วนที่เหลืออื่นๆไง

     

     

     

     

     

     

     

     

     

     

     

     

    2.โดยให้ตั้งรหัสผ่านตามเงื่อนไขที่กำหนด (อันนี้เพื่อความปลอดภัยนั่นแหละ)

     

     

     

     

     

     

     

     

     

     

    3. เมื่อเราตั้งรหัสผ่านตรงตามเงื่อนความปลอดภัยที่กำหนด ก็จะพบกับหน้าจอตามรูป จากนั้น คลิก “NEXT” โลดดด

     

     

     

     

     

     

     

     

     

     

    4. เมื่อดำเนินการครบตามขั้นตอนแล้ว ก็จะพบกับหน้าตาเจ้า LastPass เรียบๆ ดูแล้วใช้งานง่าย ไม่ยากๆ

     

     

     

     

     

     

     

     

     

     

    5. คราวนี้เราก็มาจัดการเพิ่มข้อมูล ที่เราต้องการให้เจ้า LastPass ช่วยเราจำกันเถอะ โดยสามารถคลิกเลือก

    ในส่วนเมนูด้านซ้ายของหน้าจอ หรือจะเลือกจาก Icon ด้านล่างมุมขวาของหน้าจอก็ได้เช่นเดียวกัน

     

     

     

     

     

     

     

     

     

     

    6. ตัวอย่างเช่น สร้างข้อมูลรายละเอียดของเว็บที่เราเข้าใช้งานเป็นประจำ Gmail เป็นต้น จากขั้นตอนที่ 5

    เมื่อคลิก เพิ่มเว็บไซต์ ก็จะพบกับหน้าจอประมาณนี้นะ เมื่อใส่รายละเอียดครบถ้วนแล้ว ก็กด “บันทึก” ได้เลย

     

     

     

     

     

     

     

     

     

     

    7.  จากนั้นระบบก็จะบันทึกข้อมูลเว็บไซต์ Gmail ของเราเอาไว้ เราก็ทำแบบนี้ไปเรื่อยๆ จนครบทุกเว็บที่เราอยาก

    ให้เจ้า LastPass ช่วยจำ เพียงเท่านี้ก็เรียบร้อย ปัญหาการลืมรหัสผ่านเข้าเว็บต่างๆ ที่มีมากมายก่ายกองของเรา

    ก็จะหมดไป

    ** ปล… แต่ต้องไม่ลืมรหัสผ่านที่ใช้เข้า LastPass ตัวนี้น๊าาาา 555+

     

     

     

     

     

     

     

     

     

     

    8. สำหรับความปลอดภัยอื่นๆ เราก็สามารถเข้าไปดู ไปตั้งค่าได้ โดยเลือกผ่านเมนู การตั้งค่าบัญชี ซึ่งก็จะมีทั้งแบบ

    ฟรี และหากต้องการที่ปลอดภัยมากขึ้นไปอีกระดับก็ต้องเป็นแบบ premium กันแหละ แนะนำว่าลองเล่น ลองคลิกๆ

    ศึกษาเพิ่มเติมกันได้นะ

     

     

     

     

     

     

     

     

     

     

     

    สุดท้ายทางผู้เขียนหวังว่า อย่างน้อย ๆ เจ้าตัว Extension LastPass ตัวนี้ จะเป็นผู้ช่วยที่มีประโยชน์อีกตัวนึงสำหรับ

    ผู้อ่านทุกคน อย่างน้อยๆ หากจดในกระดาษแล้วหาย ก็เปลี่ยนมาให้ LastPass ช่วยจำกันเถิด แฮ่ …..

     

    ขอบคุณ แหล่งข้อมูลอ้างอิง : https://www.lastpass.com/how-lastpass-works

  • รู้จัก Angular กันดีกว่า

    maliwan.s

    Angular เป็น Front-end JavaScript Framework ที่ทำงานบนฝั่ง Client ที่เรานำไปสร้าง Reactive Single Page Applications (SPA) ซึ่งก็คือทุกๆหน้าจะถูกโหลดมารวมอยู่ในหน้าเดียว การคลิ๊กเปลี่ยนหน้าหรือการคลิ๊กปุ่มต่างๆ จะทำให้เรารู้สึกเหมือนเป็น Desktop Application ที่ไม่มีการโหลดเปลี่ยนหน้า Angular เป็น Model-View-Controller (MCV) และยังเป็น Model-View-ViewModel (MVVM) อีกด้วย มีการเชื่อมการทำงานระหว่าง JavaScript เข้ากับ DOM Element ของ HTML ใช้การทำงาน client-side template สามารถสร้าง template ไปใส่ไว้ในที่ที่เรากำหนดไว้ได้ และเป็น 2-way data binding เพื่อ sync Model กับ View

    เดิม Angular 1 เป็น javascript และตั้งแต่ Angular 2 ขึ้นไปเป็น typescript ปัจจุบัน Angular 6 ซึ่งมีอะไรใหม่ๆเพิ่มเข้ามา ได้แก่

    • Angular CLI เพิ่มคำสั่ง ng add, ng update, ng generate library(สร้าง Library)
    • Angular 6 ได้มีฟีเจอร์ใหม่ที่เรียกว่า Workspace ทำให้สามารถสร้าง Project ได้หลายตัวภายใน Workspace เดียว จึงได้มีการเพิ่มโฟลเดอร์ภายในโฟลเดอร์ dist เพื่อบอกว่าเป็นไฟล์ของโปรเจคใด

    • สามารถสร้าง Web Component ด้วย Angular Elements
    • Angular Material เพิ่ม Component ใหม่อย่าง Tree, Badge และ Bottom Sheet ส่วนตัว CDK ตัว overlay เพิ่ม positionStrategy แบบใหม่
    • Provider แบบใหม่ที่สนับสนุนการทำ Tree Shaking เพื่อช่วยในการลดขนาด Bundle เพิ่มประสิทธิภาพ Animation
    • มาพร้อมกับ RxJS 6 (A reactive programming library for JavaScript) เวอร์ชันใหม่ ซึ่งมีการเปลี่ยนวิธี import แบบใหม่มาตั้งแต่ versions 5

    เรามาทดลองสร้างโปรเจคกันดีกว่า ก่อนอื่นเราจะต้องติดตั้ง nodejs, Visual Studio Code และ

    1. ติดตั้ง angular

    2. สร้างแอพพลิเคชั่น

    การรัน server สามารถทำได้ด้วยการพิมพ์คำสั่งเข้าไปในโฟลเดอร์ของโปรเจค และ คำสั่งที่ใช้ในการรันแอพ ดังนี้

    3. เปิด Project โดยใช้ “Visual Studio Code” ที่ได้ติดตั้งไว้ในตอนแรก File > Open Floder… > my-app ดังในรูปด้านล่าง

    ซึ่งโฟลเดอร์ที่เราสนใจหลักๆ ก็คือ src/app เปิดไฟล์ app.component.html เพิ่มในส่วน <h1> … </h1>

    และเปิดไฟล์ app.component.ts ขึ้นมา ในส่วนนี้เป็นตัวควบคุมของ component นี้

    ในบรรทัดที่ 9,10 เป็นการสร้างตัวแปร title , Date ตามลำดับ ที่ถูกนำไปใช้ในไฟล์ app.component.html ซึ่งในส่วนนี้จะเรียกว่า Data Binding และทำการเปิด Browser ไปที่ http://localhost:4200/ จะได้ผลลัพธ์ดังรูป

    ใน Angular จะใช้โมดูลเปรียบเสมือนกล่องแต่ละชิ้นมาประกอบกันเพื่อทำงานในแต่ละส่วนโดยมีข้อดีคือสามารถนำโค้ดกลับมาใช้ใหม่ได้ (reusable) และหากมีหลายๆโมดูลที่จะเรียกใช้สามารถเรียงลำดับก่อนหลังได้ หรือจะใช้คู่ขนานก็ได้ ซึ่งในโมดูลก็จะประกอบไปด้วย

    • Controllers
    • Services
    • Filters
    • Directives
    • อื่นๆ

    ทดลองใช้ FormsModule ซึ่งเป็นโมดูลที่ใช้ในการจัดการฟอร์มต่างๆ ของ HTML รวมทั้งช่วยในการทำ Data Binding ในส่วนของข้อมูลฝั่งควบคุมกับค่าในฟอร์มของฝั่งที่แสดง เปิดไฟล์ app.module.ts และทำการแก้ไข ดังนี้

    บรรทัดที่เพิ่มเข้าไปคือการเพิ่มโค้ดเข้าไปเพื่อดึงโมดูลนี้มาใช้งาน จากนั้นลองนำส่วนของฟอร์มมาใช้กับโปรเจคโดยเปิดไฟล์ app.component.html ขึ้นมา และเพิ่มโค้ดตามรูปด้านล่าง

    และลองรัน Browser จะได้ผลัพธ์ ดังนี้

     

  • How to install PSU SSL VPN Client ubuntu 18.04

    grianggrai.n

    • เปิด terminal
    • เริ่มด้วยการติดตั้งโปรแกรมที่จำเป็น
      sudo apt install -y openfortivpn
    • สร้างแฟ้ม /home/username/fortivpn.config มีข้อความว่า
      host = vpn2.psu.ac.th
      port = 443
      username = PSU Passport Username
      password = PSU Passport Password
      trusted-cert = 34df1a6bd3705782fd17152de0c4fe0b3e7f31302cbdcf737b113c17a5b9ff09
    • สั่งรันคำสั่ง
      sudo openfortivpn -c fortivpn.config
    • ได้ข้อความประมาณว่า
    • แปลว่าเชื่อมต่อได้แล้ว หากต้องการยกเลิกการเชื่อมต่อให้กด ctrl-c จะได้ข้อความประมาณว่า
    • แปลว่ายกเลิกการเชื่อมต่อแล้ว
    • ต้องเปิด terminal ที่รันคำสั่ง openfortivpn ไว้ตลอดเวลาที่เชื่อมต่อห้ามปิด
    • จบสไตล์คอมมานไลน์ ….

    หากอยากได้ง่ายกว่านี้

    • ติดตั้งโปรแกรม OpenFortiGUI โหลดที่ https://hadler.me/linux/openfortigui/ โดยเลือกโปรแกรมสำหรับ Ubuntu 18.04
    • โหลดมาแล้วติดตั้งด้วยคำสั่ง
      sudo dpkg -i openfortigui_0.6.2-1_bionic_amd64.deb
    • จะมี error message มากมาย ให้ต่อด้วยคำสั่ง
      sudo apt -f -y install
    • เริ่มใช้งานเปิดโปรแกรม openFortiGUI โดยกดที่ปุ่ม Show Applications เลือก openFortiGUI
    • จะได้หน้าต่าง
    • คลิกปุ่ม Add เลือก VPN จะได้
    • กรอกข้อความตามรูป ช่อง username และ password ก็ใส่ PSU Passport ลงไปเสร็จแล้วกด Save
    • ได้ดังรูป
    • เลือก PSU แล้วคลิก Connect ได้ผลดังรูป
    • คลิก x เพื่อปิดหน้าต่างสังเกตว่าจะมีรูป  ที่มุมบนขวา หากจะยกเลิกการเชื่อมต่อ คลิกขวาที่  เลือก PSU เพื่อ dissconnect
    • จบขอให้สนุก…

    ***  จากที่ลองทดสอบพบว่า เมื่อเชื่อมต่อ AIS 4G จะไม่สามารถใช้วิธี OpenFortiGUI ได้ แต่ใช้วิธีคอมมานไลน์ได้ครับ

  • การทดสอบแบบอัตโนมัติ ด้วย Robot framework กับ Selenium Library (ตอนที่ 2 การใช้งาน)

    thichaluk.s

    มาลุยกันต่อในตอนที่ 2 กันค่ะ อันดับแรกต้องทำการติดตั้ง Selenium WebDriver กันก่อน สามารถไปดาวน์โหลดได้ที่ https://www.seleniumhq.org/download/ เมื่อติดตั้งเรียบร้อยแล้วเรามาทำความรู้จักโครงสร้างหลักใน Robot Framework กันค่ะ

    ในส่วนของ Setting จะเป็นการกำหนด Library ในที่นี้จะใช้ Selenium2Lirary

    ในส่วนของ Keyword จะใช้ในกรณีที่เราต้องการที่จะสร้าง Keyword ของเราขึ้นมาใช้งานเอง ซึ่งจะใช้ได้เฉพาะในไฟล์นี้เท่านั้น

    ในส่วนของ Variables คือการกำหนดตัวแปร สำหรับการใช้งาน

    ในส่วนของ Test Cases คือส่วนของการเขียน Test Cases ซึ่งสิ่งสำคัญในส่วนนี้คือ ชื่อ Test Cases ถ้าไม่มีการตั้งชื่อให้กับ Test Cases ก็จะไม่สามารถ Run คำสั่งทั้งหมดในไฟล์นี้ได้

    ***โครงสร้างที่สำคัญในการ Run Test Case คือ Setting และ Test Cases ซึ่งในการสร้างไฟล์สำหรับ Test ด้วย Robot ทุกครั้ง จะต้องมี 2 ส่วนนี้ มิฉะนั้น ก็จะไม่สามารถทำงานได้ ส่วน Keywords กับ Variables อาจจะมีหรือไม่มีก็ได้

    จาก Test case ตัวอย่างต้องการจะค้นหา Google ด้วยคำว่า hello world โดยเปิดผ่าน Google Chrome เมื่อเขียนคำสั่งเรียบร้อยแล้ว ก็ Save ไฟล์เป็น Text ธรรมดา ตัวอย่างจะบันทึกชื่อเป็น test.robot ดังรูป

    จากนั้นเรามา Run การทดสอบแบบอัตโนมัติกันค่ะ เปิด Command Prompt ขึ้นมาค่ะ

    ผลลัพธ์จะแสดงอัตโนมัติ ดังรูปค่ะ

    สามารถจะดู Log และ Report จากการทดสอบได้ดังรูป

    เห็นมั๊ยค่ะว่าการใช้งานไม่ยุ่งยากเลย แถมมี log มี report ให้ดูด้วยนะเออ ครั้งนี้เป็นการใช้งานเบื้องต้น เดี๋ยวตอนหน้าจะนำเสนอการใช้งานคำสั่งในรูปแบบอื่น ๆ กันบ้างนะคะ อย่าลืมติดตามกันหล่ะ