Author: thichaluk.s

  • การแต่งภาพให้มีมิติด้วย PowerPoint

    วันนี้มานำเสนอการแต่งภาพง่าย ๆ โดยไม่ต้องใช้โปรแกรมตกแต่งภาพ แค่มีโปรแกรมนำเสนอผลงานอย่าง Power Point ก็สามารถทำได้ไม่ยากเลย โดยวันนี้ขอเสนอการแต่งภาพให้มีมิติ ไปดูกันเลยจร้า

    1.เปิดโปรแกรม Power point จากนั้นไปที่เมนู Insert คลิก Pictures เลือกภาพที่ต้องการ

    2.คลิกที่ภาพที่ Insert เข้ามา จากนั้นกด ctrl ค้างไว้ แล้วลากภาพออกมา จะได้เพิ่มขึ้นมาอีกภาพนึง

    3.เอาภาพพื้นหลังออก คลิกที่ภาพที่ต้องการเอาพื้นหลังออก ไปที่เมนู Format คลิก Remove Background แล้วปรับขนาดให้ได้ตามต้องการ

    4.จากนั้นที่เมนู Format คลิก Keep Changes ภาพพื้นหลังก็จะหายไป

    5.ภาพตั้งต้นเราทำการใส่กรอบเข้าไป ไปที่เมนู Format คลิก Metal Frame

    1. แล้ว Crop ตัดเป็นรูปร่าง ที่เมนู Format คลิก Crop to Shape .ในส่วนของการทำรูป Pop out ขึ้นมาด้านบน เลือก Trapizoid จากนั้นคลิก Crop
    2. ลดขนาดของภาพลงมาเหลือสักครึ่งหนึ่ง ให้คาบเกี่ยวกับส่วนของดอกบัวที่จะแสดงออกมาสักครึ่งนึง จากนั้นกดปุ่ม Crop
    3. จากนั้นนำดอกบัวภาพที่นำพื้นหลังออกมาประกบลงในภาพที่1 ก็จะได้รูปดอกไม้ที่ลอยเด่นขึ้นมา

    9.กรณีที่ 2 ให้รูปดอกบัวปรากฏเด่นมาด้านข้าง ที่เมนู Format คลิก Crop to Shape เลือก Flowchart Manual Input จากนั้นคลิก Crop

    10.เลื่อนขนาด และเลื่อนด้านข้างเข้ามา เพื่อให้ดอกบัวปรากฏขึ้นมาทั้งด้านบนและด้านข้าง จากนั้นคลิก Crop

    11.จากนั้นนำดอกบัวภาพที่นำพื้นหลังออกมาประกบลงในภาพที่1

     

  • WatIn Framework

    WatIn Framework เป็น Framework ที่ใช้ในการทดสอบการทำงานของเว็บ ที่พัฒนาด้วย .Net ซึ่งสามารถทำงานได้อย่างอัตโนมัติ โดยที่ไม่ต้องทำการทดสอบซ้ำ ๆ เพียงแต่ถ้าต้องการข้อมูล Input ที่แตกต่างไป สามารถแก้ไข Source Code ได้

    การติดตั้ง WatIn Framework

    1. คลิก Tool จากนั้นคลิก Extensions and Updates… ที่ NuGet Package Manager คลิก Download
    2. เมื่อ Download เสร็จแล้ว ทำการ Install โดยกดปุ่ม Install
    3. เมื่อ Install เสร็จแล้ว ไปที่เมนู
    4. จากนั้นค้นหา “WatIn”
    5. กดปุ่ม “Install” จากตัวอย่างมีการ Install เข้าไปแล้ว เมื่อ Install เสร็จจะแสดงดังรูปด้านบน จากนั้นค้นหา “NUnit”

    การเรียกใช้งาน WatIn Framework

    1. สร้าง Form ขึ้นมาปกติ จากนั้น ให้เขียนคำสั่งดังนี้
      IE browser = new IE();browser.GoTo(“http://tqf-test.psu.ac.th/”);

      browser.TextField(Find.ByName(“ctl00$MainContent$Login1$UserName”)).TypeText(“thichaluk.s”);

      browser.TextField(Find.ByName(“ctl00$MainContent$Login1$Password”)).TypeText(“xxx”);

      browser.Button(Find.ByName(“ctl00$MainContent$Login1$Button1”)).Click();

       

      – ในส่วนของคำสั่ง browser.GoTo(“http://tqf-test.psu.ac.th/”) เป็นการเรียกให้เปิด URL ที่ต้องการ

      – ในส่วนของคำสั่ง TextField หมายถึง Text box

      – ในส่วนของคำสั่ง Button หมายถึง ปุ่ม Button

      – ในส่วนของคำสั่ง Find.ByName ต่อด้วยชื่อ Control  ในการดูชื่อ Control สามารถดูได้จาก IE โดยกดปุ่ม F12

    2. อย่าลืม using WatiN.Core;
    3. เมื่อรันโปรแกรมจะปรากฏหน้าจอทำงานอัตโนมัติ ดังรูป



  • ใช้ Firebug ในการตรวจสอบข้อมูล

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

    Firebug เป็นเครื่องมือสำหรับ Web Development ในการแก้ไขตรวจสอบ JavaScript / CSS / HTML เป็น Extension หรือ Add-ons สำหรับใช้ในการช่วยจัดการ Debug พวก HTML , JavaScript และ CSS การใช้งานไม่ยาก โดยทำการติดตั้ง Plugin ลงใน Web Browser เช่น Google Chrome หรือ Mozilla Firefox หลังจากนั้นก็เปิด URL หรือเว็บไซต์ที่ต้องการ และทำการคลิกที่ Icon ของ Firebug จากนั้นโปรแกรม Firebug ก็จะแสดงรายละเอียดโครงสร้าง HTML , JavaScript และ CSS ทั้งหมดใน URL นั้น ๆ เราสามารถทำการคลิกเพื่อแก้ไข CSS หรือแม้กระทั่งตรวจสอบค่าต่าง ๆ ซึ่งการใช้งานนั้นไม่ยากซับซ้อนอะไร

    ผู้เขียนได้ใช้ Firebug กับการทำงานโดยใช้การ debug ที่แท็บ Console ตัวอย่างดังนี้

    เมื่อมีการแจ้งจากผู้ใช้งานระบบว่าข้อมูลแสดงไม่ครบถ้วน จึงทำการตรวจสอบ Service ที่ดึงข้อมูลดังกล่าว โดยใช้ Firebug ในการตรวจสอบ

    6-12-2559-15-31-17

    คลิก Service ที่ต้องการจะแสดงข้อมูลดังนี้ (จะเห็นได้ว่าจากรูปด้านบนแสดงเวลาที่โหลดข้อมูลแต่ละคำสั่งด้วยค่ะ)

    6-12-2559-15-35-51

    ในส่วนอื่น ๆ ก็สามารถศึกษาได้ไม่ยากค่ะ

  • การ Compile ออนไลน์

    เมื่อนักพัฒนาระบบต้องการเขียนโปรแกรมภาษาอะไร จำเป็นต้องทำการติดตั้ง Compiler สำหรับภาษานั้น ๆ เสียก่อน Compiler จะทำหน้าที่แปลภาษา Programming ไปเป็นชุดคำสั่งของเครื่อง เพื่อทำงานตามที่นักพัฒนาต้องการ

    บทความนี้จะแนะนำบริการออนไลน์สำหรับทดสอบ Code ภาษาต่าง ๆ ที่มีชื่อว่า compileonline

    ซึ่งสามารถทดสอบ Code ผ่านทางเว็บไซต์ เพื่อดูผลลัพธ์ โดยไม่ต้องเสียเวลาติดตั้ง Compiler หรือเปิด Developer Tool เอง สำหรับการทดสอบเล็ก ๆ น้อย ๆ ค่ะ

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

    ไปที่ http://www.compileonline.com/

    19-9-2559-14-14-46

    จากนั้นเลือกภาษา / Develop tool ที่ต้องการ ในที่นี้เลือก C# แสดงหน้าจอ ดังนี้

    ตัวอย่าง C#

    19-9-2559-14-20-01

    คลิกปุ่ม “Compile” จะแสดงผลดัง Terminal ด้านล่าง –> สีแดง

    คลิกปุ่ม “Execute” จะแสดงผลดัง Terminal ด้านล่าง –> สีน้ำเงิน

    ตัวอย่าง JavaScript

    เลือกภาษา / Develop tool ที่ต้องการ ในที่นี้เลือก JavaScript แสดงหน้าจอ ดังนี้

    19-9-2559-14-31-47

    แก้ไขคำสั่งตามต้องการ จากนั้น คลิกปุ่ม “Preview” จะแสดงผลดัง Web View ด้านล่างค่ะ 

     

  • การแปลงข้อมูลในรูปแบบ JSON เป็นคลาส JAVA

    ในการแลกเปลี่ยนข้อมูลระหว่าง application กับ service ที่ติดต่อกับฐานข้อมูลบน server โดยส่วนใหญ่ก็จะแลกเปลี่ยนข้อมูลโดยใช้รูปแบบ JSON ซึ่งในส่วนของแอพพลิเคชัน ต้องทำคลาสในการรับข้อมูลพื่อให้สามารถรับข้อมูลและนำไปใช้ได้สะดวกขึ้น

    ตัวอย่างข้อมูล JSON เช่น

    [

                       {

                                 “point”: “40.266044,-74.718479”,

                                 “homeTeam”:”Lawrence Library”,

                                 “awayTeam”:”LUGip”,

                                 “markerImage”:”images/red.png”,

                                 “information”: “Linux users group meets second Wednesday of each month.”,

                                 “fixture”:”Wednesday 7pm”,

                                 “capacity”:””,

                                 “previousScore”:””

                       },

                       {

                                 “point”:”40.211600,-74.695702″,

                                 “homeTeam”:”Hamilton Library”,

                                 “awayTeam”:”LUGip HW SIG”,

                                 “markerImage”:”images/white.png”,

                                 “information”: “Linux users can meet the first Tuesday of the month to work out harward and configuration issues.”,

                                 “fixture”:”Tuesday 7pm”,

                                 “capacity”:””,

                                 “tv”:””

                       },

                       {

                                 “point”:”40.294535,-74.682012″,

                                 “homeTeam”:”Applebees”,

                                 “awayTeam”:”After LUPip Mtg Spot”,

                                 “markerImage”:”images/newcastle.png”,

                                 “information”: “Some of us go there after the main LUGip meeting, drink brews, and talk.”,

                                 “fixture”:”Wednesday whenever”,

                                 “capacity”:”2 to 4 pints”,

                                 “tv”:””

                       }

    ]

    และตัวอย่างคลาส JAVA ที่เราต้องการสร้างเอาไว้รับข้อมูล ดังนี้ค่ะ

    ———————————-com.example.Example.java———————————–

    package com.example;

    import javax.annotation.Generated;

    @Generated(“org.jsonschema2pojo”)

    public class Example {

    private String point;

    private String homeTeam;

    private String awayTeam;

    private String markerImage;

    private String information;

    private String fixture;

    private String capacity;

    private String previousScore;

    private String tv;

     

    public String getPoint() {

    return point;

    }

    public void setPoint(String point) {

    this.point = point;

    }

    public String getHomeTeam() {

    return homeTeam;

    }

     

    public void setHomeTeam(String homeTeam) {

    this.homeTeam = homeTeam;

    }

    public String getAwayTeam() {

    return awayTeam;

    }

    public void setAwayTeam(String awayTeam) {

    this.awayTeam = awayTeam;

    }

    public String getMarkerImage() {

    return markerImage;

    }

    public void setMarkerImage(String markerImage) {

    this.markerImage = markerImage;

    }

    public String getInformation() {

    return information;

    }

    public void setInformation(String information) {

    this.information = information;

    }

    public String getFixture() {

    return fixture;

    }

    public void setFixture(String fixture) {

    this.fixture = fixture;

    }

    public String getCapacity() {

    return capacity;

    }

    public void setCapacity(String capacity) {

    this.capacity = capacity;

    }

    public String getPreviousScore() {

    return previousScore;

    }

    public void setPreviousScore(String previousScore) {

    this.previousScore = previousScore;

    }

    public String getTv() {

    return tv;

    }

    public void setTv(String tv) {

    this.tv = tv;

    }

    }

    ซึ่งก็คือคลาส ที่มี method –> get กับ set นั่นเอง

    ซึ่งจะเห็นว่าถ้าฐานข้อมูลเรามีหลายฟิลด์ ก็ต้งต้องทำ method get กับ set ทั้งหมดเลย (ร้องหายแปป)

     

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

    http://www.jsonschema2pojo.org/

        การใช้งานก็ง่าย ๆ โดยการวางตัวอย่างข้อมูล JSON ของเราลงไปและระบุค่านิดหน่อยตามต้องการ

    1

    ขอยกตัวอย่างบางตัวหลัก เช่น

    – Package คือ ชื่อตำแหน่งที่เก็บคลาส

    – class name คือ ชื่อคลาส

    – Source Type คือ รูปแบบของ JSON ถ้าเป็นดังตัวอย่างข้อมูลก็กำหนดเป็น JSON

    – Annotation style คือ รูปแบบของคลาสที่สร้าง

    จากนั้นสังเกตด้านล่างมีปุ่ม preview เพื่อดูตัวอย่างคลาสที่สร้าง หรือจะให้ส่งออกเป็นไฟล์ zip ก็ได้เช่นกัน

    2

    จากตัวอย่าง กดปุ่ม Preview แสดงดังรูป

    3

    ขอขอบคุณ

    http://www.jsonschema2pojo.org/

    http://ajbee.me/2015/09/29/web-data-type-part2-json/

    http://codemobiles.com

    http://devahoy.com/posts/android-custom-listview-with-gson-tutorial/

  • วิธีการตรวจสอบข้อมูลในรูปแบบ JSON

    ข้อมูลรูปแบบของ JSON เป็นที่นิยมใช้เป็นวิธีการส่งข้อมูลอย่างมากในปัจจุบัน ซึ่งในบ้างครั้งข้อมูลส่งจะมีความซับซ้อนหรือมีการซ้อนกันของข้อมูลหลายชั้น ทำให้การอาจเกิดข้อผิดพลาดในการสร้างข้อมูลหรือยากในการตรวจสอบข้อมูล

    ซึ่งในบทความนี้จึงขอเสนอเว็บไซต์ที่ช่วยในการตรวจสอบข้อมูลและแบ่งชั้นของข้อมูลที่ซ้อนกันหลาย ๆ ชั้น ในรูปแบบ JSON ได้ คือ https://jsonformatter.curiousconcept.com

    1

    จากรูป  มีสิ่งที่ต้องระบุหลัก ๆ คือ

    1. JSON Data/URL สามารถวางข้อมูลหรือ URL ของข้อมูลได้ทั้งสองอย่าง
    2. JSON Standard เลือกว่า JSON ของเราสร้างโดยมาตรฐานใด หรือเราอยากตรวจสอบว่า JSON ที่เราสร้างอยู่ในมาตรฐานที่เราต้องการไหม2

      เมื่อกำหนดเรียบร้อยก็กดปุ่ม Process
      3

      จากรูป ระบบจะแสดงผลการตรวจสอบว่าถูกต้องหรือไม่ และนอกจากนี้ระบบยังแบ่งชั้นข้อมูลในแต่ละระดับที่ซ้อนกันให้ ทำให้เราดูชุดข้อมูลได้ง่ายยิ่งขึ้น

      หากข้อมูลผิดล่ะ จะเป็นไง ลองทำกันดู 

      4

      ในกรณีที่ไม่ถูกต้อง ระบบจะแสดงบรรทัด ที่ไม่ถูกต้อง แล่ะเมื่อคลิก มันจะแสดงสีแดงที่บรรทัดหรืออักษรที่ไม่ถูกต้องให้เราเห็นอีกด้วย

  • สร้าง Shortcut ในการ Remote Desktop Connection

    ในการพัฒนาระบบงานหลาย ๆ ระบบ ซึ่งแต่ละระบบก็ต้องมี Server ถ้าระบบมีปัญหาสิ่งแรก ๆ ที่ต้องเข้าไปดูปัญหานั่นคือการ Remote ไปยัง Server นั้น ๆ เช่นดู Process Task ต่าง ๆ มีอะไรรันอยู่ มีอะไรทำงานอยู่จึงทำให้ระบบช้า หรือทำให้ระบบมีปัญหาเป็นต้น เมื่อมีหลาย Server ครั้นจะมาจดจำ IP เครื่องที่จะ Remote ไป หรือบางเครื่องที่นาน ๆ จะเกิดปัญหาที ทางออกของปัญหามีค่ะ แค่เพียงสร้างเป็น Shortcut ในการ Remote Desktop Connection นั่นเอง มีขั้นตอนดังนี้

    1. ที่หน้าจอ Desktop คลิกขวา New
    2. เลือกหัวข้อ Shortcut
    3. พิมพ์ข้อความดังนี้ C:\Windows\System32\mstsc.exe /v:192.168.100.170 /w:800 /h:600
      –> 3.1 /v:ต่อด้วย IP Address:Port
      –> 3.2 /w:ต่อด้วยขนาดหน้าจอ ความกว้าง
      –> 3.3 /h:ต้อด้วยขนาดหน้าจอ ความสูง
      –> 3.4 อื่น ๆ เช่น /f หมายถึงเต็มหน้าจอ
      /admin หมายถึง Remote เข้าด้วย Session Admin13-7-2559 13-44-06
    4. คลิกปุ่ม Next
    5. ตั้งชื่อ Shortcut
      13-7-2559 13-46-33
    6. คลิก Finish จะเห็น Icon ของ Shortcut ที่ใช้ในการ Remote เพื่อเข้า Server ตามที่ได้สร้างไว้ที่หน้า Desktop
  • การตั้งค่าให้ Android Emulator สามารถรัน google map ได้

    โดยปกติ Android Emulator ไม่สามารถรัน google map เนื่องจากไม่มีในส่วนของ google play serivce นั้นเอง (สังเกตุ ได้ว่าไม่มีแอพพลิเคชั่น google play) ซึ่งเมื่อนักพัฒนาทำการพัฒนาแอพพลิเคชั่นที่มีgoogle map และรองรันบน Android emulator  จะเกิดข้อผิดพลาดดังรูป
    1

    ในบทความนี้ขอนำเสนอวิธีการที่ทำให้ Genymotion ซึ่งเป็น Andriod  Emulator ตัวหนึ่งที่นิยมใช้กัน เนื่องจากทำงานได้รวดเร็ว และทำงานได้ดีกับ Android Studio 🙂

    โดยหลักการก็ไม่มีอะไรมาก เมื่อ Android emulator ของเราไม่มี google play service เราก็แค่ลงไปให้ซะเลย

    1. ขั้นแรก ต้องโหลดไฟล์ที่ใช้ในการติดตั้ง ดังรูป2

      โดยในส่วนของไฟล์ gapps-jb-xxxx-signed ต้องโหลดเวอร์ชั่นให้ตรงกับ android แต่ละเวอร์ชั่นที่ใช้งาน

    2. ต่อไปทำการติดตั้อง Genymotion-ARM-Translation_v1.1.zip ก่อน ซึ่งการติดตั้งก็ง่าย ๆ โดยการลากไฟล์ไปวางที่ Emulator ได้ทันที่ รอจนติดตั้งเสร็จและทำการ Restart Emulator
    3. ต่อไปก็ทำการ Gapps และ Restart Emulator อีกครั้ง เป็นอันเสร็จเรียบร้อย
    4. ลองเปิด Emulator จะพบว่ามีแอพพลิเคชั่น google play เรียบร้อยแล้ว ลองรันทดสอบแอพพลิเคชันที่มี google map ดูได้เลย

    3

  • การทดสอบโปรแกรม (Testing)

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

    การ Test คือการทดสอบระบบว่าทำงานได้ถูกต้องได้ผลตามวัตถุประสงค์หรือไม่ ซึ่งเป็นการทดสอบกระบวนการทางพื้นฐานทางคอมพิวเตอร์

    โปรแกรมคอมพิวเตอร์มีหลักการง่าย ๆ คือ Input -> Process -> Output วิธีการกำหนด Test case อย่างง่ายที่สุดคือทำการ Test แต่ละส่วนโดยอยู่บนพื้นฐานของ Business requirement และวัตถุประสงค์ของระบบ ซึ่งจะต้องมีการเขียน Test case โดย Test case เป็นเอกสารที่ระบุชุดข้อมูลป้อนเข้าผลลัพธ์ ที่คาดว่าจะได้รับและกลุ่มของเงื่อนไขในการดำเนินการในชุดทดสอบต่าง ๆ มีจุดมุ่งหมายเพื่อแบ่งฟังก์ชันการทำงานของซอฟต์แวร์ออกเป็นฟังก์ชันย่อย ๆ เพื่อให้สามารถทำการทดสอบโดยชุดข้อมูลป้อนเข้าดังกล่าว และสร้างผลลัพธ์ที่สามารถประเมินผลได้โดยปกติจะขึ้นกับ use case ของระบบ

    “Test case ประกอบด้วย”

    • ชื่อ Test case โดยปกติแล้วคือ Use case ตาม ฺBusiness requirement เช่น การ login เข้าระบบ
    • วัตถุประสงค์ของ Test case นั้น ๆ
    • ผลที่คิดว่าจะได้รับ (Output)
    • กำหนดลักษณะข้อมูลที่จะนำเข้าเพื่อใช้ในการ Test (Input)
    • ขั้นตอนวิธีการทดสอบ เป็น Step 1,2,3,… ว่าแต่ละขั้นตอนต้องทำอะไรบ้าง
    • ผลที่ได้จากการ test

    “ชนิดของการ Test”

    1. ทดสอบความถูกต้อง
      • Unit test เป็นการ test functional ของระบบในแต่ละส่วนย่อยๆเพื่อให้แน่ใจว่าแต่ละส่วนทำงานได้ถูกต้อง
      • Integration test เป็นการนำแต่ละ unit มาประกอบกันและทดสอบการติดต่อระหว่าง unit ว่าสามารถทำงานได้ถูกต้อง
      • End to end test เป็นการทดสอบระบบในภาพรวมโดยนำแต่ละส่วนของระบบมาประกอบกันให้สมบูรณ์ และทดสอบระบบประหนึ่งเป็น ผู้ใช้ของระบบ
    2. ทดสอบคุณภาพ
      • Stress test เป็นการทดสอบประสิทธิภาพของระบบ เพื่อทดสอบว่าระบบสามารถรับจำนวนผู้ใช้, ข้อมูล ได้มากแค่ไหน
      • Usability test เป็นการทดสอบประสิทธิภาพการใช้งานของระบบ เช่น UI เหมาะสมต่อการใช้งานหรือไม่ เข้าใจได้ง่ายหรือไม่

    การทดสอบระบบไม่ว่าที่ไหนก็คงมีวิธีการและขั้นตอนไม่ต่างกันนัก ที่แตกต่างกันคงจะเป็นความเข้มข้นของการ Test เสียมากกว่า คือจะ Test ละเอียดแค่ไหน มีระบบที่ใช้เพื่อการ Test พร้อมหรือไม่ และทีมงานมีความพร้อมแค่ไหน

    การจะเป็น Tester ที่ดีได้ต้องเข้าใจถึงมาตรฐานต่างๆที่ระบบใช้งาน เพื่อจะได้ทดสอบได้อย่างถูกต้องและแบบมีหลักเกณฑ์ ยกตัวอย่างง่ายๆ หากเป็น Tester ของเว็บไซต์ที่หนึ่ง หากไม่มีความรู้ด้านมาตรฐานหรือด้านเทคนิคเลย จะทดสอบอะไรได้บ้าง? เพียงแต่ click ดูแล้วดูผลลัพธ์ว่าตรงเท่านั้นหรือ?