Category: Developer

งานพัฒนาระบบ, เขียนโปรแกรม

  • การพัฒนา API อย่างมืออาชีพ และทำไมต้อง RESTful Service

    niti.c

    API คืออะไร?
    API ย่อมาจาก Application Programming Interface คือการพัฒนาโปรแกรมสำหรับเป็นส่วนติดต่อเซอร์วิสของแอพพลิเคชั่น หรือโมดูลต่างๆ เพื่อให้คนภายนอกมาเรียกใช้งาน หรือกล่าวอย่างง่ายๆ ก็คือการเขียนโปรแกรมเพื่อให้บริการสำหรับให้คนอื่นมาเรียกใช้งาน ซึ่งแนวคิดเรื่องการสร้าง API เพื่อการใช้งานก็มีมาอย่างยาวนานแล้ว ยกตัวอย่างเช่นตั้งแต่ที่มีการสร้างระบบปฎิบัติการ (OS) ก็จะมีการติดต่อ API ของไดร์เวอร์อุปกรณ์ฮาร์แวร์ต่างๆ ของเครื่องคอมพิวเตอร์เพื่อเรียกใช้งานอุปกรณ์นั้นๆ ตามคำสั่งของนักพัฒนา (more…)

  • การตั้งค่า MaxRequestWorkers บน Apache ให้เหมาะสมกับจำนวนผู้ใช้

    kanakorn.h

    ปัญหาของ PSU Webmail ในช่วง 9-15 สิงหาคม 2559 ที่ผ่านมา คือ เมื่อเริ่มเข้าสู่เวลาราชการ ในวันทำการ พบว่า มีการตอบสนองที่ช้า บางครั้งต้องรอถึง 15-20 วินาที หรือ ผู้ใช้บางท่านแจ้งว่า Timeout ไปเลย หรือไม่ก็ใช้งานไปสักพัก ถูกดีดกลับมาหน้า Login ใหม่

    แต่เมื่อพ้นเวลาราชการ พบว่าการตอบสนองก็เร็วขึ้นดังเดิม รวมถึงในช่วงวันหยุดก็เร็วอย่างที่ควรเป็น

    ขอบคุณทาง NetAdmin ที่ทำระบบตรวจสอบไว้ที่หน้า Data Center เพื่อตรวจจับความเร็วในการตอบสนองบริการ PSU Webmail ด้วย SmokePing ผลที่ได้เป็นดังภาพ

    2559-08-15 16_03_36-SmokePing Latency Page for HTTPS to webmail.psu.ac.th in Data Center at Hat Yai

    จะเห็นว่า มีความหน่วงในการตอบสนอง เฉพาะในวันเวลาราชการเท่านั้น … ทำไม ???

    ทำการตรวจสอบด้วยคำสั่ง

    ps aux |grep apache| wc -l

    เพื่อดูว่า มีจำนวน Apache อยู่กี่ Process พบว่า ในช่วงเวลาที่ระบบหน่วง มี Process เกือบคงที่ที่ 150 แต่ในช่วงที่ระบบทำงานได้เร็ว มีจำนวนประมาณ 50 process

    จากการศึกษา พบว่า Apache2 ที่ใช้ MPM Prefork นั้น จะจำกัดค่า MaxRequestWorkers ไว้ โดยหากไม่กำหนดค่าใดๆจะตั้งไว้ที่ 256 แต่เมื่อตรวจสอบในไฟล์

    /etc/apache2/mods-enabled/mpm_prefork.conf

    พบว่า

    <IfModule mpm_prefork_module>
    StartServers 5
    MinSpareServers 5
    MaxSpareServers 10
    MaxRequestWorkers 150
    MaxConnectionsPerChild 0
    </IfModule>

    ทำให้เพดานของจำนวน Process ไปจำกัดที่ 150 ดังที่ตรวจสอบเบื้องต้น เมื่อมีผู้ใช้มากขึ้นกว่าเดิม จึงทำให้ Process ไม่เพียงพอต่อความต้องการ เป็นผลให้เกิดการหน่วงขึ้น

    จึงทำการแก้ไข MaxRequestWorkers เป็น 256 แล้ว Restart Apache

    ผลทำให้ จำนวน Apache Process ขึ้นไปถึง 200 Process และการตอบสนองเร็วขึ้นตามที่ควรเป็นดังภาพ (หลังเวลา 14:45)

    2559-08-15 16_03_21-SmokePing Latency Page for HTTPS to webmail.psu.ac.th in Data Center at Hat Yai

    ทั้งนี้ การกำหนดจำนวน MaxRequestWorkers นั้น ต้องสัมพันธ์กับ RAM ของ Server ด้วย โดยมีสูตรคร่าวๆ คือ จำนวน RAM ในหน่วย MB หารด้วยขนาดของ Apache Process โดยเฉลี่ย

    เช่น

    มี RAM 4GB = 4 x 1024 = 4096

    ขนาดเฉลี่ย Apache Process = 20

    ดังนั้น MaxRequestWorkers = 4096/20 = 204

    แต่จริงๆแล้ว ควรเผื่อ Memory ไว้ให้ OS และอื่นๆด้วย (อาจจะไม่เต็ม 4096) หากขยับค่า MaxRequestWorkers แล้วยังพบว่า จำนวน Process ยังขึ้นไปเต็มเพดานอยู่ ควรพิจารณาเพิ่ม Memory ด้วย

    ประมาณนี้ครับ

    UPDATE:

    ผลการปรับแก้ไข ทำให้ เวลาในการตอบสนอง จากที่หน่วง 10 วินาที เหลือ เพียง 50 มิลลิวินาที ดังภาพ

    2559-08-17 16_03_42-SmokePing Latency Page for HTTPS to webmail.psu.ac.th in Data Center at Hat Yai

     

  • การ upgrade PHP to new version on IIS ด้วยวิธีง่ายๆ

    napass.k

    เคยเขียนบทความเกี่ยวกับการ upgrade PHP 5.2 to 5.3 ไปเมื่อปีที่แล้ว (Apache 2.2 + PHP 5.2 + phpMyAdmin on Windows 8.1)

    วันนี้ขอนำเสนอการ upgrade เวอร์ชั่นของ PHP บน IIS (Windows Server 2012 R2) ด้วยวิธีที่แสนจะง่ายดาย

    ***ใครทราบวิธีการแล้วก็ผ่านไปเลยนะคับ ^^ เขียนไว้เผื่อบางท่านที่ยังไม่รู้เนอะ

    ขั้นตอนการ upgrade

    1. check PHP เวอร์ชั่นที่เราใช้ปัจจุบันก่อนว่าเป็นเวอร์ชั่นอะไร ด้วยการสร้างไฟล์ phpinfo.php เก็บไว้ที่ web root แล้วเขียนโค้ดตามนี้

    <?php
    phpinfo();
    ?>

    2. เปิดเว็บ http://localhost/phpinfo.php ในภาพจะเป็น php 5.6.2.2

    001

    3. เปิด IIS manager ขึ้นมา แล้วคลิกที่ Web Platform Installer

    002

    4. พิมพ์คำค้น PHP ในช่องค้นหา ในรูปเราจะติดตั้ง PHP 7.0.7 ให้คลิกที่ปุ่ม Add จากนั้นระบบจะทำการติดตั้ง PHP 7.0.7

    003

    5. เมื่อติดตั้งเสร็จแล้ว ให้คลิก Restart IIS

    004

    6. ตรวจสอบเวอร์ชั่นของ PHP ด้วยการเปิดหน้าเว็บ http://localhost/phpinfo.php ในภาพจะเป็น php 7.0.7 เรียบร้อยแล้ว

    005

    7. เสร็จสิ้นกระบวนการ upgrade PHP to new version

  • Information graphics การใช้ภาพหรือแผ่นภูมิแทนข้อมูลที่จะนำเสนอ

    theerayuth.p

    Information graphics หรือ Infographics เป็นการนำเสนอข้อมูล หรือความรู้ต่างๆโดยการสื่อสารด้วยภาพกราฟิก ซึ่งจะทำให้ผู้รับสื่อเข้าใจและมีความชัดเจนมากขึ้น    ความสามารถในการรับรู้ข้อมูลของมนุษย์ ภาพกราฟิกต่างๆจะดึงดูดความสนใจและความจำได้ดีกว่าข้อความยาวๆหรือต้องอ่านข้อมูล ที่เห็นได้จัดเจนคือ การอ่านข้อความบอกเส้นทางกันการอ่านแผนที่จะให้ผลที่แตกต่างกันอย่างชัดเจน และแน่นอนยุคสมัยของโลก Social อย่าง Facebook Twitter และInstagram ถ้าใครโพสข้อความยาวๆเราก็จะไม่ค่อยสนใจเท่าไรแต่เมื่อโพสภาพสวยๆเมื่อไรจะดึงความสนใจเราได้เยอะมาก

    มาดูการใช้งาน Infographics เพื่อแสดงข้อมูลในรูปแบบต่างๆ

    • ข้อมูลสำคัญทีต้องการให้เป็นจุดสนใจเพียงข้อมูลเดียว
      ควรจะใช้ฟอนต์ที่ใหญ่หรือแปลกตากว่าฟอนต์ทั่วไปหรือมีการเน้นด้วยพื้นหลังที่แตกต่าง ร่วมถึงสามารถใช้ Pictographs หรือ Icon Charts แสดงร้อยละของสิ่งที่สนใจ
      ตัวอย่าง
    1 2
    • ข้อมูลในเชิงเปรียบเทียบ
                        เพื่อให้เห็นความแตกต่างที่เกิดขึ้นกับข้อมูลที่สนใจ โดยมากจะใช้ Bar Chart หรือ Column Chart
      ตัวอย่าง

      top10Social
      ที่มาของภาพ
    • ข้อมูลแบบต่อเนื่องและมีความสัมพันธ์กัน   โดยมากจะแสดงข้อมูลนี้ด้วย Line Chart
      lineCart
    • ข้อมูลแบบไม่ต่อเนื่อง ดูความเป็นไปของข้อมูลที่สนใจ เช่น ความถี่ของผลการประเมิน TOR โดยแยกตามช่วงอายุการทำงานของบุคลากร หรือความสูงของนักเรียนแยกตามช่วงอายุและแยกระหว่างผู้ชายกับผู้หญิงเป็นต้น
      hChart
    • ข้อมูลการเปลี่ยนแปลงตามตัวแปรหรือช่วงเวลา (Trends over Time) สามารถใช้ได้หลายรูปแบบ เช่น Column Chart และเน้นส่วนสนใจ เช่นแสดงร้อยละ หรือใช้รูปแทนข้อมูลช่วงเวลาต่างๆ
      macTimeLine
      ที่มาของภาพ
    • ข้อมูลการกระจายของสิ่งที่สนใจ จะแสดงด้วย bubble chart เช่นความสัมพันธ์ระหว่างความจุปอดกับความสามารถในการกลั่นหายใจของคนแล้วเอาข้อมูลความสัมพันธ์ของแต่ละคนไป วาดกราฟเพื่อดูความสัมพันธ์
      bubbleChart
      ที่มาของภาพ

  • เชื่อมต่อ GitHub Repository ด้วย Visual Studio 2015

    suriporn.a

    ในการพัฒนาแอปพลิเคชันหรือระบบงานหนึ่งขึ้นมา การจัดการ File source code ไม่ว่าจะเป็นการสร้าง การแก้ไข การควบคุม file version ต่างๆ ถือเป็นเรื่องสำคัญ ซึ่งในบทความนี้นำเสนอการใช้งาน Visual Studio 2015 ในการเชื่อมต่อไปยัง GitHub Server

    Git คือ Version Control ตัวหนึ่ง มีหน้าที่ในการจัดเก็บการเปลี่ยนแปลงของ file source code มีการ backup code ให้เรา สามารถที่จะเรียกดูหรือย้อนกลับไปดูเวอร์ชั่นต่างๆของ project เรา รวมถึงสามารถ track ได้ว่าไฟล์นั้นๆใครเป็นคนเพิ่มหรือแก้ไข ถูกสร้างโดยใคร ถูกปรับปรุงโดยใคร

    GitHub คือ web open source ที่ให้บริการพื้นที่จัดเก็บ source code ของ project ที่เราได้พัฒนา โดยมีระบบควบคุม (version control) แบบ Git ซึ่งทำให้การพัฒนา project ต่างๆ สามารถแชร์ file source code ได้ง่ายขึ้น

     

    เครื่องมือที่ใช้ในการเชื่อมต่อ GitHub Repository ด้วย Visual Studio 2015

    1. Microsoft Visual Studio 2015
    2. GitHub Extension for Visual Studio สามารถ download ได้จาก link ของ github โดยตรง >> Download Now 
    3. Account ที่ใช้ในการเข้าถึง web GitHub

     

    ขั้นตอนการเชื่อมต่อ GitHub Repository ด้วย Visual Studio 2015

    1.ติดตั้ง GitHub Extension for Visual Studio ที่ได้ดาวน์โหลดจากลิงค์ข้างบน

    install1

    2. เมื่อติดตั้งเสร็จจะขึ้นดังรูป

    install2

    3.เปิด Visual Studio 2015 ขึ้นมา ไปยังแท็บ Team Explorer แล้วกด Manage Connections ที่ไอคอนรูปปลั๊ก ดังรูป

    connect

    4.ที่เมนู GitHub ให้คลิก Login

    image4

    5.กรอกข้อมูล GitHub Account ที่จะเชื่อมต่อ แล้วกดปุ่ม Login

    filllogin

    6.เมื่อ Login สำเร็จ จะแสดง GitHub repository ทั้งบน GitHub server และ repository บนเครื่อง local ของเราเองดังรูป

    displayrepo

    7.เข้าไปที่ https://github.com/ แล้ว Login ด้วย GitHub Account ของเราแล้วไป tab>> Repository เพื่อสร้าง Repository ที่จะเก็บ Project ที่เราต้องการจะเพิ่มเข้าไปจาก Visual Studio โดยกรอก repository name และกดปุ่ม Create repository

    newrepo

    8. เราจะได้ repository เปล่าๆ ที่เราสร้างขึ้นดังรูป

    empty repository

    9. เปิด project ที่ต้องการเพิ่มเข้า repository ขึ้นมา คลิกขวาที่ solution เลือก add solution to source control ดังรูป

    addTorepo

    10.จะปรากฎหน้าต่างให้เราเลือก Source Control ที่เราเลือก Git แล้วกดปุ่ม OK

    choosesource

     

    11.ให้เรากรอก Commit Message เสร็จแล้วให้เลือกไปที่ commit ซึ่งจะมีตัวเลือกการ commit หลายแบบ ได้แก่ Commit, Commit and Push และ Commit and Sync ในที่่นี่ผู้เขียนเลือก Commit and Push ซึ่งเป็นการ commit และโยน file source code ขึ้นไปยัง web server repository ด้วย เพื่อแสดงให้ผู้อ่านเห็นว่ามีการเชื่อมต่อกันแล้วจริง

    commitmsg

    12. หลังจากกด Commit and Push จะมี message แจ้งเตือนว่า “There is no remote repository configured. Publish this repository to share your commits.” ซึ่งหมายถึงเรายังไม่ระบุและ reomte ไปยัง repository ที่เราต้องการจะเพิ่ม ให้เราเลื่อนมาด้านล่างและระบุ url ของ repository ที่เราได้สร้างไว้ก่อนหน้านี้บน web GitHub แล้วกดปุ่ม Publish ดังรูป

    publish repo

    13. เมื่อกดปุ่ม Publish รอจนเสร็จสิ้นแล้วจะปรากฎหน้าต่าง ดังรูป

    finish

    ให้คลิกมาที่แท็บ Solution Explorer จะสังเกตุเห็นว่าไฟล์แต่ละไฟล์จะมีรูปกุญแจแล้ว แสดงว่า file source code ของเราถูกเพิ่มเข้า Git source control เรียบร้อยแล้ว

    lock

    14. กลับไปที่เว็บไซต์ GitHub แล้วไปยัง repository ที่เราได้สร้างและเพิ่ม project จาก Visual Studio เข้าไป จะปรากฎ File source code ที่เรา Commit and Push มาจาก Visual Studio แล้ว

    finishRepo1

    finishRepo2

     

    เป็นอันเสร็จสิ้นการเชื่อมต่อและเพิ่ม project เข้าไปยัง GitHub Repository ด้วย Visual Studio 2015 แล้วค่ะ ^^

     

    แหล่งข้อมูลอ้างอิง : https://visualstudio.github.com/

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

    thichaluk.s

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

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

    1

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

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

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

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

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

      4

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

  • แนวทางการพัฒนา App บนสมาร์ทโฟน

    wachirawit.j

    ถ้าใครเคยพัฒนา app เพื่อให้รองรับหลาย ๆ Platform ทั้ง iOS, Android หรือ Window Phone  ก็คงจะทราบถึงความยากลำบากในการพัฒนา เนื่องจากแต่ละ platform ก็มีวิธีการพัฒนาที่แตกต่างกัน เช่น app ที่รันบน iOS พัฒนาโดยใช้ภาษา Object C, ภาษา Swift ในขณะที่ app ที่รันบน Android พัฒนาขึ้นโดยใช้ภาษา Java และ app ที่รันบน Windows phone ก็พัฒนาขึ้นด้วย .Net Framework จะเห็นว่าแต่ละ Platform ใช้เทคโนโลยีที่ต่างกันอย่างสิ้นเชิง ทำให้การพัฒนา app 1 ตัว ให้รองรับทั้ง 3 platform ดังกล่าวข้างต้น ต้องใช้ต้นทุนค่อนข้างสูง ใช้เวลาในการพัฒนาเยอะ และยุ่งยากในการบำรุงรักษา

    App บนสมาร์ทโฟน สามารถแบ่งออกเป็น 3 ประเภท ดังนี้

    • Native App คือ app ที่เกิดจากการพัฒนาโดยการใช้ SDK (Software Development Kit) ของ OS แต่ละค่าย ทำให้ app ที่พัฒนาขึ้นมีประสิทธิภาพสูง สามารถเรียกใช้งานฟังก์ชันต่าง ๆ เพื่อเข้าถึงหรือควบคุมอุปกรณ์ได้ เช่น ตัวรับสัญญาณ GPS กล้องถ่ายรูป อุปกรณ์สแกนลายนิ้วมือ ที่ติดตั้งมากับสมาร์ทโฟนได้โดยตรง แต่ข้อเสียคือจะสามารถทำงานได้กับ OS เฉพาะค่ายนั้นเท่านั้น
    • Web App เป็น app ที่เข้าถึงได้ด้วยโปรแกรมประเภท Browser ต่าง ๆ ผ่านเครือข่ายคอมพิวเตอร์ เป็นที่นิยม เนื่องจากผู้พัฒนาสามารถอัพเดท หรือบำรุงรักษาได้โดยที่ไม่ต้องติดตั้งบนเครื่องผู้ใช้ ข้อเสียของ app ประเภทนี้คือ ไม่สามารถเขียนโปรแกรมเพื่อเรียกใช้งานฟังก์ชันต่าง ๆ เพื่อเข้าถึงหรือควบคุมอุปกรณ์ต่าง ๆ ของสมาร์ทโฟนได้
    • Hybrid App เป็น app ที่พัฒนาขึ้นโดยนำข้อดีของ app ทั้ง 2 ประเภทข้างต้นมารวมกัน โดยอาจจะมองว่า มันเป็น Web App ที่สามารถเขียนโปรแกรมให้เรียกใช้งานฟังก์ชันเพื่อเข้าถึงหรือควบคุมอุปกรณ์ต่าง ๆ ของสมารทโฟนได้ มีหน้าตาการใช้งานหมือนกับการ Native App แต่พัฒนาโดยใช้ภาษาต่าง ๆ เช่น HTML, CSS, Java Script เป็นต้น เปิดใช้งานด้วย Web viewer ของ OS แต่ละตัวเลย ข้อดีที่เด่นชัดคือ นักพัฒนาสามารถพัฒนา app ขึ้นมาเพียงชุดเดียว แล้ว build ให้มันสามารถรันบน platform ต่าง ๆ ได้ตามต้องการ

    compare app

    รูปที่ 1เปรียบเทียบประสิทธิภาพ ความสามารถในการเขียน App แต่ละแบบ [ที่มา :http://androiddevelopersthai.blogspot.com/]

    การเลือกว่าจะพัฒนา app เป็นแบบไหน ก็ขึ้นอยู่กับความต้องการของผู้ใช้งานเป็นหลัก และเพื่อแก้ปัญหาที่ได้กล่าวไว้ตอนต้น พบว่า Hybrid App สามารถตอบโจทย์ได้เป็นอย่างดี โดยเครื่องมือที่นำมาใช้ในการพัฒนาที่มีประสิทธิภาพมากที่จะแนะนำในบทความนี้คือ Ionic Framework

    Ionic Framework

    Ionic Framework เป็นตัวช่วยในการใช้พัฒนา Hybrid App ที่ทำให้พัฒนา App แค่ครั้งเดียวก็สามารถ Build ให้รันได้ในหลาย Platform ซึ่งเทคโนโลยีที่ใช้ในการพัฒนาเป็นเทคโนโลยีเดียวกันกับที่ใช้ในการพัฒนาเว็บได้แก่ HTML, CSS และ Java Script ทำให้นักพัฒนาเว็บสามารถเรียนรู้วิธีการพัฒนาได้อย่างรวดเร็ว

    ionic_frameworkรูปที่ 2  Ionic Framework [ที่มา : http://blog.prscreative.com]

     

    Ionic Framework เป็น Open Source ที่นักพัฒนาสามารถใช้ในการสร้าง App ของตัวเอง หรือ App เชิงพาณิชย์ก็ได้ มีเว็บไซต์อย่างเป็นทางการคือ http://ionicframework.com

    ตัวอย่าง App ดังๆ ที่ใช้ Ionic ได้แก่ UNIQLO ดังรูป

    uniqlo
    รูปที่ 3 ตัวอย่างหน้าจอ App ของ UNIQLO ที่พัฒนาขึ้นด้วย Ionic [ที่มา :https://itunes.apple.com/th/app/uniqlo-th/id867497451?l=th&mt=8 ]

    สามารถดูตัวอย่าง App ที่พัฒนาด้วย Ionic เพิ่มเติมได้จาก http://showcase.ionicframework.com

  • การสร้าง Hybrid App ด้วย Ionic Framework

    wachirawit.j

    ในบทความนี้จะนำขั้นตอนการพัฒนา Hybrid App อย่างง่ายด้วย Ionic Framework เพื่อเป็นแนวทางการพัฒนาแก่ผู้ที่สนใจ โดยเครื่องที่ใช้ในการทดลองเป็นปฏิบัติการ Windows 10 มีขั้นตอนการติดตั้งเครื่องมือต่าง ๆ เพื่อให้สามารถใช้ Ionic ได้ดังนี้

    1. ติดตั้ง js โดยดาวน์โหลดไฟล์ node-v4.4.7-x64.msi ได้จาก http://nodejs.org วิธีการติดตั้งก็ไม่ยุ่งยากครับ ใช้ Next Technology ได้เลย จะมีหน้าจอขั้นตอนต่าง ๆ ดังรูป
      node_js_setup
    1. ติดตั้ง Cordova และ Ionic command line tool โดยการเปิด command prompt ของ windows ขึ้นมา แล้วรันคำสั่ง
      $ npm install -g ionic
      install_ionic

    เริ่มต้นสร้าง App อย่างง่าย

    หลังจากที่เตรียมความพร้อมของเครื่องที่พัฒนาเรียบร้อยแล้ว ขั้นตอนต่อไปก็จะเป็นการสร้าง App ขึ้นมา ซึ่ง Ionic ได้เตรียม template ตั้งต้นไว้ให้เราแล้ว ได้แก่ side menu, maps, salesforce, complex-list, blank เราก็ดูว่า App ของเราสามารถใช้ template ตัวไหนได้บ้าง ก็เลือกมาใช้ได้เลย
    ionic_template
    รูปที่ 1 Ionic Template [ที่มา : http://ionicframework.com]

    ขั้นตอนการสร้าง App โดยใช้ command line tools

    1. เปิด command line ขึ้นมา แล้วกำหนด working directory เป็นที่ที่สำหรับใช้เก็บ project (ในที่นี้จะกำหนดเป็น “C:\ionic” )
      cmd
    1. สร้าง project กำหนดชื่อ myApp และใช้ tabs เป็น template ตั้งต้นโดยใช้คำสั่ง
      $ ionic start myApp tabs
      ผลลัพธ์ที่ได้จากคำสั่งนี้ จะทำให้ได้ไฟล์ต่าง ๆ ดังรูป
      file_structureจะพบว่ามีโฟลเดอร์ชื่อ www สำหรับเก็บโค้ด HTML, CSS, Java Script เหมือนกับการพัฒนาเว็บไซต์ ให้เราใช้ความรู้ด้านการเขียนเว็บไซต์สร้างไฟล์ต่าง ๆ เก็บไว้ในโฟลเดอร์นี้ได้เลย
    1. หลังจากสร้างไฟล์ App ขึ้นมาแล้ว ก็จะเข้าสู่ขั้นตอนการ Build ให้ App สามารถรันบน Platform ต่าง ๆ ได้ สำหรับในบทความนี้จะแสดงเฉพาะการ Build สำหรับ Android เพื่อให้เห็นเป็นแนวทางการพัฒนา เนื่องจากเครื่องที่ใช้ทดสอบเป็น Windows 10 หากจะ Build ให้รันบน iOS ได้ ก็ต้อง Build บนเครื่องที่ใช้ระบบปฏิบัติการ iOS ในส่วนของการเตรียมความพร้อมสำหรับการ Build ให้รันบน Android ได้ เครื่องที่ใช้ในการพัฒนาจะต้องติดตั้ง Java Development Kit (JDK) 7 และAndroid Stand-alone SDK Tools หรือ Android Studio  ก่อน ซึ่งขั้นตอนการติดตั้งก็ไม่ยากครับ ใช้ Next Technology เช่นเคย
    1. Build และ Run บน Android โดยใช้คำสั่งต่อไปนี้
      $ ionic platform add android
      $ ionic build android
      $ ionic emulate androidจะทำให้ได้ผลลัพธ์ดังรูป
      android_app
      จากรูปเป็นผลลัพธ์ที่ได้จากการใช้ Tab template ซึ่งผู้พัฒนาจะต้องแก้ไขโค้ดให้เป็นไปตามที่ได้ออกแบบไว้ ก็จะได้ Android App ตามต้องการ

     

     

     

  • ตอนที่ 4 : ใช้ Report Wizard ช่วยสร้างรายงาน

    maliwan.s

    จากตอนที่แล้วได้กล่าวถึงการสร้างรายงานว่าสามารถทำได้ 2 แบบ กล่าวคือ สร้างรายงานจากไฟล์ว่างๆ หรือ ใช้ Report Wizard เป็นตัวช่วยสร้างรายงาน ซึ่ง Wizard สามารถออกแบบรายงานเป็นTable หรือ Crosstab ตามรูปแบบที่มีให้เลือก โดยทำตามขั้นตอน ดังนี้

    1. ไปที่ Solution Explorer คลิกขวาโฟลเดอร์ Reports > Add New Report จะปรากฏหน้าจอ Report Wizard ดังรูปที่ 1

    B4_pic1

    รูปที่1 Report Wizard

    2. คลิก Next เลือก Data Sources เป็นแบบ Shared หรือ Embedded Data Sources ดังรูปที่ 2

    B4_pic2

    รูปที่2 Data Sources

    3. คลิก Next เพื่อเขียน query โดยกดปุ่ม Query Builder… จะไปยังหน้าจอ Query Designer

    B4_pic3 3-7
    รูปที่3 Design Query

    4. คลิก Next จะปรากฏหน้าจอให้เลือกว่าจะสร้างรายงานเป็นตาราง (Tabular) หรือ Metrix (สามารถสรุปข้อมูลในลักษณะ Pivot Table) ดังรูปที่ 4
    B4_pic4

    รูปที่4 Report Type

     5. คลิก Next เพื่อมาออกแบบตาราง ผู้ใช้จะต้องเลือก fields ที่อยู่ใน Available fields มาใส่ใน Displayed field ในที่นี้จะจัดกลุ่มข้อมูล (Group) ตาม CAMPUS_ID, FAC_ID, DEPT_ID และ fields อื่นๆจะแสดงในส่วนของ Details

    B4_pic5

    รูปที่5 Design Table

    6. คลิก Next เพื่อเลือกรูปแบบการจัดวางข้อมูล (Layout) และคลิกเลือก Include subtotals เพื่อรวมข้อมูลในระดับที่ได้ Group ไว้ในข้อที่แล้ว (CAMPUS_ID, FAC_ID, DEPT_ID) และคลิก Next เพื่อเลือก Style ดังรูปที่ 6

    B4_pic6B4_pic7

    รูปที่6 Table Layout & Style

    7. คลิก Next จะเห็นช่อง Report name: ให้ตั้งชื่อรายงาน และกดปุ่ม Finish จะได้รายงาน ดังรูปที่ 7

    B4_pic8

    รูปที่7 ตัวอย่างรายงาน

           จากการทดลองสร้างรายงานโดยไฟล์ว่างเปล่ากับใช้Wizard เป็นตัวช่วยสร้างรายงาน พบว่า Wizard สามารถทำให้งานง่ายขึ้นได้ ซึ่งรูปแบบที่มีให้เลือกอาจจะยังไม่ถูกใจผู้ใช้ก็ค่อยมาปรับกันในทีหลังได้ เช่น Format จำนวนเงิน, ใส่ Header / Footer, ใส่ Expression ใน Textbox… ส่วนในเรื่องการคำนวณจะเป็นการรวมข้อมูลแบบตรงไปตรงมา หากผู้ใช้ต้องการการคำนวณที่ซับซ้อนขึ้นก็สามารถทำได้ เช่น อยากได้คอลัมน์ยอดเงินสุทธิ = AMOUNT – AMOUNT_FINE – AMOUNT_VAT เป็นต้น