[Internship@True]วันที่ 28-29

ในสองวันนี้ ก่อนจบการฝึกงานที่ยาวนานกว่าสองเดือน(ไม่ได้ทำกับทีม แต่ไปทำกับ Outsource) ผมได้รวมงานของผมที่ทำกับงานของพี่ โดยไฟล์ในส่วนที่พี่ทำใหม่นั้นจะมีการเปลี่ยนแปลงเท่าที่สังเกตมา 2 อย่าง ได้แก่่

  • การสร้างส่วนของ Class ต่างๆ จากเดิมที่ใช้ aBator มาเป็นการใช้ MyBatis(iBatis แต่เปลี่ยนชื่อใหม่) และใช้ Tools MyBatis generator ในการสร้างClass, DAO และ sqlMap และมีการใช้งานที่ง่ายมากขึ้น โดยเฉพาะใน่สวนของ where clause ที่เราสามารถที่จะเรียก method มาเพื่อให้ตัว Framework มัน Mapping ให้
  • การวางพื้นฐานการออกตัว Report มาให้แล้ว อันนี้ยังไม่ได้ศึกษาจากที่พี่ทำมาเลยฮ่าๆ
แผนภูมิ(กราฟ) ที่เทียบข้อมูลตามวัน
แผนภูมิ(กราฟ) ที่เทียบข้อมูลตามวัน
แผนภูมิ(กราฟ) ที่เทียบข้อมูลตามเดือน
แผนภูมิ(กราฟ) ที่เทียบข้อมูลตามเดือน

[Internship@True]วันที่ 27

วันนี้ศึกษาการนำเสนอข้อมูลด้วยกราฟเพิ่มเติม(จากที่อาจารย์สอน เราก็ไม่ได้อะไรเลย อ.มัว แต่ไปรับงานนอก) โดยจากข้อมูลที่ได้มา แต่ต้องการที่จะเอาข้อมูลในส่วนของ filter, transmitted และ received โดยกราฟที่ได้ทดลองและศึกษา ได้แก่ 

    • แผนภูมิเส้น เพราะจะนำมาแสดงความต่อเนื่องของค่า  filter, transmitted และ received ในแต่ละวัน/เดือนได้ แต่มีปัญหาตรงที่เวลาไป plot แล้วนั้น ในส่วนของ transmitted  กับ received มีความทับซ้อนกัน เพราะค่าทั้ง 2 มีความใกล้เคียงกันมาก เลยไม่ได้ใช้กราฟชนิดนี้
แผนภูมิแบบคอลัมน์ แบบเรียงซ้อน แต่มีข้อมูลมากเกินไปจนอัดแน่น
แผนภูมิแบบคอลัมน์ แบบเรียงซ้อน แต่มีข้อมูลมากเกินไปจนอัดแน่น
    • แผนภูมิคอลัมน์ แบบเรียงซ้อน (Stack) จะหาผลรวมของ 3 ค่า   filter, transmitted และ received รวมออกมาในแท่งเดียว เพื่อที่จะลดพื้นที่ในแสดงผลลง แต่มีปัญหา คือ ไม่สามารถที่จะเปรียบเทียบความแตกต่างของข้อมูลในแต่ละวัน/เดือนได้ เลยไม่ได้ใช้กราฟชนิดนี้
แผนภูมิแบบคอลัมน์แบบกลุ่ม หลังจากจัดการ SQL ในการดึงข้อมูลออกมาใหม่
แผนภูมิแบบคอลัมน์แบบกลุ่ม หลังจากจัดการ SQL ในการดึงข้อมูลออกมาใหม่
    • แผนภูมิคอลัมน์ แบบกลุ่ม เปลี่ยนวิธีการเขียน SQL ใหม่จากเดิมที่ให้แยกเฉพาะเจาะจงไปทีละ node มาเป็นการหาผลรวมของ แต่ละกลุ่ม โดยสุดท้ายก็เลือกกราฟแบบนี้ เพราะมีความเหมาะสมที่สุดในการแสดงผล

ที่มาข้อมูลเรื่องแผนภูมิ: ชนิดข้องแผนภูมิต่างๆใน Microsoft Office (เนื้อหาดีมาก ^__^)

[Internship@True]วันที่ 25

จากงานที่ได้รับมอบหมายให้ปรับปรุง ก็จะมีการทำงานย่อยๆ 2 ส่วน ได้แก่

  • การดึงข้อมูลจาก DB ออกมา (ทำช่วงเข้า)
    SELECT * FROM MD_INBOUNDAUDIT_REGEXTV01
    WHERE USE_FLAG = 'Y'
  • การแปลงข้อมูลที่ได้เป็น jsonStore เพื่อที่จะเอาไปใส่ตัว combobox ของ Extjs ได้ (ทำช่วงบ่าย)

ปัญหาที่พบ โดยหลักๆแล้วจะเป็นการยัดข้อมูลที่ได้ลงตัว Combobox ส่วนการ Query ดึงข้อมูลจาก DB นั้นไม่มีปัญหา

  • ปัญหา: Uncaught TypeError: Cannot call method ‘on’ of undefined
    วิธีแก้: ตรง Combobox Config Store

    store: 'states', มาเป็น store: states,
  • ปัญหา: Uncaught TypeError: Cannot call method ‘getProxy’ of undefined
    วิธีแก้:

    • ลองหลายแบบมาก ตั้งแต่การสร้าง simpleStore เก็บในตัวแปร และยัดลงไป
    • ปรับปรุงการสร้าง Connection ให้มันมีส่วนข้อมูลนี้ ว่าไปดึงจากที่ไหน เก็บอย่างไร และปรับส่วนการ callback ให้ดีขึ้นด้วย

และในที่สุดก็สามารถที่จะดึงมาแสดงผลใน Combobox ได้ T_T

[Internship@True]วันที่ 24

เมื่อก่อนที่ได้ Code พี่มาศึกษา เราต้องไล่แกะ Code และมาเขียนเองหมดเลย แต่ตอนนี้พี่เค้าแนะนำ Tool ตัวหนึ่งมาใช้ ชื่อว่า aBator ที่จะช่วยให้ใช้งาน ibatis ได้สะดวกขึ้น โดยจะมีการ Gen Class ต่างๆ, DAO และ sqlMap มาใช้เลยรวมถึง sql พื้นฐานต่างๆด้วย ทำให้เราสบายขึ้นเยอะ

การใช้ aBator ในการ gen ไฟล์ที่เกี่ยวข้องในการใช้ ibatis กับ Spring

    1. ไฟล์ download ไฟล์มา โดยมีแหล่งความรู้ ดังนี้
      • http://java.ociweb.com/mark/programming/Abator.html
      • http://amolchaudhari.wordpress.com/2007/08/31/configure-abator-on-eclipse/
      • http://static.springsource.org/spring/docs/3.0.0.M3/spring-framework-reference/html/ch14s05.html
    2. import เข้ามาในโปรเจค
    3. ไฟล์ที่เราจะต้องรู้
      • /config/ibatorConfig.xml ซึ่งก็จะมีส่วนที่จะต้องมาแก้ไขครั้งนี้
    4. ต้องมาแก้ Path ของไฟล์ ibator-config_1_0.dtd ให้ถูกต้อง
      <!DOCTYPE ibatorConfiguration PUBLIC "-//Apache Software Foundation//DTD Abator for iBATIS Configuration 1.0//EN" "D:\MD_WORK\eclipse\workspace\aBator-3.0\config\ibator-config_1_0.dtd">
    5. กำหนด Class Path เพื่อให้รู้จักกับ Oracle (ไฟล์ classes12.jar)
      <classPathEntry location="D:\MDR\defaultroot\WEB-INF\lib\classes12.jar">

    (more…)

    [Internship@True]วันที่ 21-22

    ตอนนี้ก็ได้ทำเว็บจนเสร็จและ และพี่ที่ดูแลก็ OK เพราะ ต้องรอความต้องการของหัวหน้าจริงๆว่าจะให้แสดงอะไรบ้าง

    สิ่งที่ควรรู้คร่าวๆ เกี่ยวกับ iReport

    • iReport เป็นโปรแกรม open source ที่ใช้ในการออกตัวรายงานรูปแบบต่างๆ มักจะเรียกว่า JasperReport ซึงตัวโปรแกรมจะมีหน้าตาคล้ายกับ Crystal Report โดยเราจะสามารถที่จะสร้างตัวรายงานได้อารมณ์เดียวกับการใช้ Microdsoft Word โดยไฟล์ตัวรายงานที่ได้จะจัดเก็บในรูปแบบ xml (.jrxml) ซึ่งเมื่อนำไป Complie จะได้เป็นไฟล์ (.jasper) พร้อมนำไปใช้งาน
    • เนื่องจากมันฟรี ก็จะมีหลายคนนำไปใช้ในการออก report ในกับ web app โดยในโปรเจคนี้ จะมีการใช้งานเหมือนกัน แต่รอให้ใช้ก่อน แล้วค่อยมาเขียนบล็อกเพิ่ม

    ลองทำรายงานด้วย iReport

    1. ลองเล่นตัว Report Designer
      • http://jasperforge.org/projects/ireport
    2. ไปที่ Download แล้วเลือกแบบ Other platforms เพื่อที่จะรันได้แบบ portable แต่ต้องมีตัว java runtime ในเครื่องด้วย
    3. จากนั้นก็ลองสร้าง Report ตาม wizard ก็จะมีปัญหาที่ว่า
    4. เราจะมาเพิ่ม classpath เพื่อให้มันรู้จักกับ Oracle กัน

    (more…)

    [Internship@True]วันที่ 19

    วันนี้ก็มาสายประมาณ 9.15 แต่ก็ยังใช้คอมไม่ได้ เพราะยังต้องรอตาม Help Desk remote เข้ามาเพื่อที่จะมาจัดการกับ Oracle ให้เรียบร้อย แต่พอมาลองใช้จริงก็ต่อ Database ไม่ได้ ต้องให้พี่ในแผนกมาดูและก็พบว่าค่าที่ทาง Help Desk ให้มานั้นเป็นค่า default ของบริษัท จึงต้องตั้งค่าtnsnames.ora และ sqlnet.ora อีกครั้ง และลองใช้ TOAD ดู ซึ่งกว่าจะเสร็จก็ปาไปเกือบเที่ยงแล้ว ลงไปกินข้าวเหนียว ส้มตำแทนเลย 😛

    หน้าตาโปรแกรม TOAD for Oracle

    หน้าสองที่เสร็จสมบูรณ์แล้ว

    ช่วงบ่ายนั่งตรวจเว็บครั้งสุดท้าย และก็ช่วยเพื่อนที่ฝึกงานแก้ปัญหาเรื่องเว็บ เป็นพวก php กับ graph โดยในเว็บหน้าที่ 2 ก็จะเป็นการแสดงข้อมูลไล่ตามเดือน และมีสถิติพื้นฐานต่างๆ เช่น min, max และ ค่า average

    [Internship@True]วันที่ 18

    วันนี้ก็มาแต่ประมาน 9 โมงเช้า และสักพักพี่ก็บอกว่าจะมีการเปลี่ยนคอมใหม่ตามอายุการใข้งาน และก็ให้ Backup ข้อมูลไว้พวกโปรแกรม และ Source Code ต่างๆ จากนั้นก็รอทางทีม IT เข้ามาเปลี่ยนคอมตัวใหม่ ซึ่งแรงกว่าตัวเก่ามาก และก็นั่งไล่ลงโปรแกรมที่จำเป็นใหม่ไปจนถึงช่วงบ่ายเท่าที่ทำได้ก่อน เพราะเดี๋ยววันพรุ่งนี้ทาง Help Desk (งานด้านคอมอีกแขนง คือ จะช่วย Support User / แก้ปัญหาขั้นต้นให้) จะเข้ามา Remote เพื่อจะมาลงตัว Oracle Client เวอร์ชั้น 8 เพื่อที่จะให้สามารถที่จะติดต่อกับฐานข้อมูลภายในแผนกได้

    สภาพคอมเก่าที่ใช้ศึกษาความรู้+ทำงานในช่วง 1 เดือนที่ผ่านมา สภาพคอมใหม่ เอามาทำงานเดิม ลื่นปรึดดด ไม่ติดขัด ฮ่าๆ

    [Internship@True]วันที่ 17

    วันนี้ก็มาแต่เช้า เพื่อที่จะลอง Test JavaScript ของเว็บที่ได้ทำขึ้นกับ 3 browser หลักที่พี่ๆในแผนกเค้าใช้ ได้แก่

    • Internet Explorer 8 โดยจะมีตัว Developer Tools(กด F12) ในการตรวจสอบการทำงานข้อผิดพลาดของ Script ซึ่งในความเห็นของผมมันจะออกแนวคล้ายตัว Debugger ของ MS Visual Studio แต่ช้าและอืดๆมาก แต่ก็มีข้อดี เพราะสามารถที่จะปรับเปลี่ยนสภาพแวดล้อมเป็น IE เวอร์ชั่นเก่าๆได้
    • Firefox ต้องใช้ตัว Extension อย่าง Firebug(กด F12) ที่สามารถบอก Error และ Detail ได้ แต่หลังๆรู้สึกว่ามันจะดูอืดๆช้านะ แต่บอก Detail ได้ดีกว่า IE ที่จะพบแต่ Error และที่สำคัญ คือ Firebug จะช่วยเราบอก Element ต่างๆของเว็บเอาไปแก้ไขพวก css ได้อีกด้วย
    • Google Chrome โดยจะมีตัว Developer Tools(กด F12) จะมาแนวเดียวกับ Firebug คือ บอก Error ใน Script ได้ และบอก Element ต่างๆในเว็บได้จ้า แต่ลื่นปรื้ดด

    ส่วนแต่ละคนจะใช้ค่ายไหนนั้น ก็ต้องมาศึกษาข้อมูลเพิ่มเติมของ Browser, Tools ที่ช่วย และที่สำคัญก็ คือ document ของแต่ละภาษาด้วย ^__^

    เครื่องมือที่ช่วยในการพัฒนา ตรวจสอบใน Internet Explorer
    เครื่องมือที่ช่วยในการพัฒนา ตรวจสอบใน Internet Explorer
    Firebug เครื่องมือที่ช่วยในการพัฒนา ตรวจสอบใน Firefox
    Firebug เครื่องมือที่ช่วยในการพัฒนา ตรวจสอบใน Firefox
    เครื่องมือที่ช่วยในการพัฒนา ตรวจสอบใน Google Chrome
    เครื่องมือที่ช่วยในการพัฒนา ตรวจสอบใน Google Chrome

    ปัญหาที่พบในการทำงานวันนี้

    • ปัญหา: เมื่อรันเว็บใน IE และ Firefox จะไม่สามารถที่จะดึงค่าวันที่ออกมาใช้ได้ จะได้เป็นค่า Nan/Nan/Nan ตลอด
      สาเหตุ: เมื่อไปอ่านในตัว Document ของทาง ๅExt-js 4.1 แล้วจะพบว่าฟังค์ชั่นที่ใช้ในการจัดรูปแบบวันที่ Ext.util.Format.date จะรับข้อมูลวันที่แบบเต็ม คือ มีวัน/เดือน/ปี และเวลาด้วย

      objs['startMonth'] = Ext.util.Format.date(ตัวแปรวันที่จะแปลง,รูปแบบวันที่)

      วิธีแก้: ลบบรรทัดที่ทำการตัดข้อมูลเวลาออกไป ให้เหลือเพียงวันที่ ซึ่งก็คือ บรรทัดนี้

      tmp1=tmp.getFullYear()+ '-' +(tmp.getMonth()+1)+'-'+tmp.getDate()

    จบการทำงานในวันนี้ไปด้วยดี และก็รีบไปกินข้าวหน้าเป็ด+กินยาที่ Terminal 21

    [Internship@True]วันที่ 16

    วันนี้ผมก็นั่งทำในส่วนหน้าที่ 2 ต่อไป และศึกษาเพิ่มเติมในส่วนของ iBatis framework ซึ่งก็เป็น framework ที่ทำหน้าที่ในการจัดการฐานข้อมูล ซึ่งในตอนแรกๆผมก็ลืมบอกไป ฮ่าๆ โดยเมื่อเรา config ค่าต่างๆแล้วเราก็จะมา mapping กับ sql โดยการเขียนในรูปแบบภาษา xml ซึ่งเท่าที่อ่านดู xml จะเป็นตัวล่ามระหว่าง Class ของตาราง ซึ่ง 1 ตารางก็จะมี 1 Class เท่านั้น และตารางจริงๆในฐานข้อมูล โดยจะเก็บในส่วน Tag resultMap

    <resultMap id="MonthResultMap" class="com.rmv.mdr.dataaccess.bean.MdInboundauditReporttstv01DB" >
     <result column="DATE_PROCESSED" property="dateProcessed" jdbcType="TIMESTAMP" />
     <result column="TRANSMITTED" property="transmitted" jdbcType="DECIMAL" />
     <result column="RECEIVED" property="received" jdbcType="DECIMAL" />
    </resultMap>

    (more…)

    [Internship@True]วันที่ 15

    วันนี้มาเช้าเลย 8.30 มาเปิด office พร้อมกับแม่บ้าน นั่งกินขนมปัง+ชาเลม่อน และก็เริ่มงานในการปั่นหน้าแรกแสดงข้อมูลตามช่วงเวลาที่กำหนดต่อ คือ การให้ javaScript เรียกในส่วน fronend ไปเรียกในส่วน business ส่งงานไปให้ส่วน dataaccess เพื่อจัดการ Query ข้อมูลออกมาแล้ว ส่งข้อมูลกลับมาในรูปแบบ json เพื่อที่จะมาทำกราฟ

    ปัญหาที่พบในการทำงานวันนี้

    • ปัญหา: java.lang.RuntimeException: java.text.ParseException: Unparseable date: “2012-05-03″
      สาเหตุ: ว่าตัว wrapper จาก javascrpt >> java จะรับ Parameter แบบ ‘d/m/Y’ เช่น 23/04/1990 เท่านั้น ข้อมูลที่ส่งไปใน ทางฝั่ง searchInboundAuditByMonth.js อยู่ในรูปแบบ Y-m-d (1990-04-23)
      วิธีแก้: เพิ่มคำสั่งในการแก้ข้อมูลวันที่ให้เป็นไปตามรูปแบบที่กำหนด
    objs['Month'] = Ext.util.Format.date(tmp1,"d/m/Y")

    (more…)