Month: July 2016

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

    ถ้าใครเคยพัฒนา 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

  • Cloud Computing การบริการประมวลผลจากเครื่องคอมพิวเตอร์บนเครือข่าย Internet

    “อะไรคือ Cloud Computing และมันน่าใช้ยังไง แล้วต้องเลือกแบบไหนถึงจะเหมาะกับองค์กร”

    • ขอขอบคุณข้อมูล Sipa จากการอบรม Cloud Computing รุ่นที่ 1
    • และขอขอบคุณข้อมูลจากท่านวิทยากร ผศ.ดร.ภุชงค์ อุทโยภาส ม.เกษตรศาสตร์

      แนวคิดและความหมายของ Cloud Computing

    cloud1

    Cloud Computing เป็นบริการประมวลผลจากเครื่องคอมพิวเตอร์บนเครือข่ายอินเทอร์เน็ต รวมถึงการ
    ใช้งานทรัพยากรเครื่องคอมพิวเตอร์ร่วมกันโดยไม่มีข้อจำกัด โดยสามารถเลือกปรับแต่งการใช้งานได้ตามต้องการ และสามารถเข้าถึงได้จากที่ใดก็ได้
    ซึ่งสามารถสรุปคุณสมบัติเป็นข้อ ๆ ตามคำนิยามของ NIST (National Institute of Standards and Technology) * ได้ดังนี้
    On-demand self-service – สามารถใช้งานทรัพยากรได้ตามที่ต้องการ
    Broad network access – สามารถเข้าถึงจากที่ใดก็ได้
    Resource pooling – สามารถนำทรัพยากรหลาย ๆ อย่างมารวมกันเพื่อใช้งานร่วมกัน
    Rapid elasticity – สามารถปรับเปลี่ยนได้ตลอดเวลาที่ต้องการ
    Measured Service – สามารถวัดปริมาณการใช้งานได้ทุกบริการ (เพื่อสามารถนำไปคิดค่าใช้จ่ายได้ด้วย)cloud2

    Reference : * The NIST Definition of Cloud Computing, http://nvlpubs.nist.gov/nistpubs/Legacy/SP/nistspecialpublication800-145.pdf

    สถาปัตยกรรม Cloud Ecosystem

    cloud3

    ตามคำนิยามของ NIST ได้มีการกำหนด Cloud Ecosystem หรือเรียกว่า Cloud Service Model ได้ 3 รูปแบบดังนี้
    Software As A Service (SAAS)
    เป็นบริการใช้งานซอฟต์แวร์ประยุกต์ (Application) ที่ผู้ให้บริการจัดหาให้ โดยสามารถเข้าถึงได้จาก
    Web Browser รวมถึง Application ทั้งที่อยู่ในเครื่องคอมพิวเตอร์หรืออุปกรณ์มือถือ การบริการรูปแบบนี้ผู้ใช้จะไม่สามารถจัดการเครื่องหรือระบบปฏิบัติการได้ ทุกอย่างผู้ให้บริการจัดการให้ทั้งหมด
    Platform As A Service (PAAS)
    เป็นบริการเครื่องมือสำหรับพัฒนาระบบ โดยผู้ใช้ไม่สามารถเข้าถึงการจัดการโครงสร้างพื้นฐานใด ๆ ได้ เช่นระบบเครือข่าย เครื่องเซิร์ฟเวอร์ ระบบปฏิบัติการ โดยผู้ให้บริการจะจัดการให้ทั้งหมด
    Infrastructure As A Service (IAAS)
    เป็นบริการที่ผู้ใช้สามารถจัดการระบบปฏิบัติการ ระบบเครือข่าย รวมถึงจัดหาโปรแกรมประยุกต์ เพื่อสามารถดูแลควบคุมการปรับแต่งระบบให้สามารถรองรับความต้องการที่หลากหลาย แต่การจัดหาทรัพยากร รวมถึงโครงสร้างพื้นฐานยังเป็น
    หน้าที่ของผู้ให้บริการจัดหาให้ตามความต้องการของผู้ใช้

    รูปแบบของการให้บริการ

    สามารถแบ่งรูปแบบการให้บริการ (Deployment Models) ออกแบบ 4 รูปแบบได้ดังนี้
    Private cloud
    เป็นการใช้งานระบบภายใต้โครงสร้างพื้นฐานขององค์กร ผู้ใช้อาจเป็นผู้ดูแลด้วยตนเอง หรือจ้างบุคคลที่สามดูแลก็ได้ อุปกรณ์อาจจะติดตั้งภายในสำนักงานหรืออยู่ภายนอกทั้งหมด หรือบางส่วนก็ได้
    Community cloud
    เป็นการใช้งานระบบภายใต้การร่วมการของกลุ่มสมาชิก โดยมีข้อปฏิบัติร่วมกัน ตามเงื่อนไขของรัฐ หรือขององค์กร โดยสมาชิกดูแลบริหารจัดการโครงสร้างด้วยสมาชิกเอง หรือทำผ่านบุคคลที่สาม โดยอุปกรณ์อาจจะติดตั้งภายในสถานที่ของชุมชน หรือนอกสถานที่ก็ได้
    Public cloud
    เป็นการใช้งานระบบร่วมกันกับสาธารณะชน องค์กรทั่วไปและกลุ่มองค์กรขนาดใหญ่ โดยผู้ให้บริการเป็นผู้ลงทุนโครงสร้างพื้นฐานไอทีและระบบซอฟต์แวร์ที่เกี่ยวข้องทั้งหมด
    Hybrid cloud
    เป็นการใช้งานผสมผสานระหว่าง Private cloud, Public cloud หรือ Hybrid cloud โดยขึ้นอยู่กับผู้ใช้บริการต้องการด้านใด โดยอาจจะทำงานเป็นอิสระ หรือมีการเชื่อมโยงเข้าหากัน แต่จะต้องสามารถทำงานร่วมกันในระดับข้อมูลและระบบซอฟต์แวร์ประยุกต์ได้ โดยการใช้งานทั่วไปมักจะใช้ Private cloud ก่อน จนเมื่อต้องการเพิ่ม Capacity ชั่วคราวจึงใช้ Public cloud เพิ่มเติม

    โครงสร้างของระบบ Cloud

    cloud4

    โดยมีการแบ่งออกเป็น Front End และ Back End เชื่อมต่อกันด้วยอินเทอร์เน็ต โดยแบ่งอุปกรณ์พื้นฐาน ได้ดังนี้
    1) Server
    2) Storage
    3) Network
    4) Cloud runtime ซึ่งจะเป็น Middleware ที่ใช้บริหารจัดการใน Back End
    ซึ่งจะมีระบบ Management และ Security ช่วยบริหารจัดการอุปกรณ์ต่าง ๆ ให้สามารถทำงานได้เป็น เนื้อเดียวกันและมีความปลอดภัยในการเข้าถึง

    บริการ Virtualization
    cloud8

    เมื่อก่อนระบบใดอยู่บนเครื่องใดแล้ว ถ้าเสียก็จะเสียไปด้วย ต้องหาเครื่องใหม่มาทดแทน โดยต้องทำการติดตั้งระบบใหม่ นำเข้าข้อมูลจากที่สำรองไว้ แถมเครื่องซื้อมาใช้งานไม่เต็มประสิทธิภาพ จึงมีการสร้างระบบ Virtualization ขึ้นมาเพื่อแก้ไขปัญหาดังกล่าวโดยจะมี Middleware ระหว่าง OS กับ Resource ที่เรียกว่า Virtualization software หรือ Hypervisor โดยข้อดีคือแต่ละบริการในเครื่องเดียวกันสามารถมี OS หรือ Application เป็นของตนเอง และแยกอิสระออกจากกัน สามารถติดตั้งโปรแกรมที่มีความต้องการเฉพาะได้ รวมถึงสามารถใช้พื้นที่กลางในการจัดเก็บข้อมูล เพื่อในกรณีที่เครื่องมีปัญหาสามารถย้ายไปรันเครื่องอื่นได้โดยกระทบต่อการบริการน้อยที่สุด ทำให้การใช้เครื่องเต็มประสิทธิภาพมากขึ้น โดยเราสามารถนำเครื่องที่มี Peak Load คนละช่วงเวลามารวมในเครื่องเดียวกันได้ โดยไม่กระทบต่อการให้บริการโดยรวม

    วิวัฒนาการของ Virtualization

    cloud9

    1st Generation : Full virtualization (Binary rewriting)
    – ใช้ Software จัดการทั้งหมด
    – มีปัญหาที่ต้องมีการ Compile กับ Kernel เมื่อมีการเปลี่ยน Kernel ใหม่จะไม่สามารถใช้งานต่อได้ ต้องทำการ Patch Kernel ก่อน
    2nd Generation : Paravirtualization
    – มีการเขียน Hypervisor ขึ้นมาคั่นก่อนเข้าถึง Hardware
    – ข้อเสียคือช้ากว่า 1st Gen และเมื่อผู้ผลิต CPU หรืออุปกรณ์อื่น ๆ ต้องการเพิ่ม Feature ไม่สามารถทำได้ทันทีต้องทำการแก้ Hypervisor ให้รองรับ Feature ใหม่ ๆ
    3rd Generation : Silicon-based (Hardware-assisted)
    – ไม่จำเป็นต้องแก้ Hypervisor ให้รองรับ Feature ใหม่ ๆ ผู้ผลิต CPU หรืออุปกรณ์อื่น ๆ ออกแบบให้รองรับ Virtualization มาให้เลย โดยมีการใส่เข้าไปในอุปกรณ์ให้เลย
    – ทำงานด้วย Hardware ทำให้รวดเร็วกว่า 2nd Gen

    ประโยชน์ของ Virtualization

    – สามารถใช้ Hardware ได้อย่างมีประสิทธิภาพ
    – ลดพื้นที่ของ Data Center ในการต้องวางเครื่องจำนวนเยอะที่ใช้งานได้ไม่เต็มประสิทธิภาพ (ประหยัดเครื่องลง)
    – ใช้พลังงานน้อยลง เพราะเครื่องมีจำนวนน้อยลง
    – สามารถเพิ่มเครื่องได้อย่างรวดเร็ว ไม่ต้องรอซื้อเครื่องนาน
    – สามารถสร้างระบบทดสอบ หรือเครื่องสำหรับพัฒนาได้ง่าย และรวดเร็ว

    การเลือกใช้บริการ Cloud

    cloud5

    ในส่วนของ Private cloud ในประเทศไทย มีการใช้งานเกิน 50% โดยมีความต้องการใช้งาน Vmware, Microsoft, Openstack ตามลำดับ

    โดยมีการใช้งาน SaaS เป็นหลักรองลงมาจะเป็น IaaS และ ทุกท้ายจะเป็น PaaS โดย เหตุผลหลักที่ใช้ Cloud คือต้องการลดค่าใช้จ่าย และมีความยืดหยุ่นนการใช้งาน ส่วนสาเหตุที่ใช้ Public cloud เนื่องมาจากราคาถูกกว่าลงทุนเองในระยะยาว และไม่ต้องซื้อเครื่องแพง ๆ ที่มี Peak Load แค่บางช่วง ช่วงที่ไม่ได้ใช้งานจะไม่คุ้มกับราคาที่ลงทุน

    บริการ Cloud ที่มีในปัจจุบัน

    Amazon AWS
    มีการให้บริการหลาย Service ดังนี้
    AWS Compute :
    – EC2 : ให้บริการ Virtual Machine
    – Elastic Load Balance (ELB) : ให้บริการกระจายโหลดระหว่าง EC2
    AWS Storage :
    – S3 : ให้บริการพื้นที่ Storage
    – Elastic Block Store : ให้บริการพื้นที่ Storage เพิ่มเติมสำหรับ EC2
    AWS Database :
    – Relational Database Service (RDS) : ให้บริการฐานข้อมูลประเภท Relational Database เช่น MySQL
    – DynamoDB : ให้บริการฐานข้อมูล NoSQL
    AWS Analytic :
    – Elastic MapReduce : ให้บริการ Big Data Processing
    AWS Machine Learning :
    บริการ Machine Learning
    AWS loT
    บริการ Internet of Things

     

    Google Cloud Platform

    cloud6Compute :
    – Compute Engine เป็นบริการ Virtual Maching
    – App Engine เป็นบริการแบบ PaaS
    Storage :
    – Cloud Storage เป็นบริการ Storage
    – Cloud SQL เป็นบริการฐานข้อมูล
    App Services :
    – ให้บริการ Application Service รวมถึง Development Application รวมถึง Cache Service

     

    Microsoft Azure

    cloud7App Services :
    ให้บริการ Application ในกลุ่มของ Microsoft และในกลุ่มของ Linux โดยครอบคลุมทุกบริการของ
    Microsoft เป็นหลัก และเพิ่มบริการของ Linux เพิ่มมากขึ้นเรื่อย ๆ
    Compute :
    ให้บริการเครื่อง Virtual Machine รองรับทั้ง Website, Cloud services และ Mobile services
    Storage :
    ให้บริการฐานข้อมูล SQL Database โดยเฉพาะในส่วนของ Microsoft SQL Server ทั้งนี้รองรับในส่วน
    ของฐานข้อมูลอื่น ๆ ด้วย เช่น HDInsight ทั้งในส่วนของ SQL และ NoSQL

    6 ข้อดีของการใช้ Cloud Computing

    1) ไม่ต้องลงทุน Infrastructure เอง จ่ายราคาตามปริมาณที่ใช้ได้
    2) ผู้ให้บริการลงทุนมหาศาล บริการให้คนมหาศาล ทำให้ค่าบริการต่อหัวลดลงมาก
    3) เลิกคาดเดาว่าเราจะต้องการทรัพยากรเท่าไหร่ถึงจะพอ หรืออาจจะซื้อมามากเกินไปหรือเปล่า
    4) สามารถเพิ่มความเร็วในการจัดหาทรัพยากร์
    5) หยุดใช้เงินในการจัดการ Data Center
    6) สามารถ Deploy Application ให้ใช้ได้ทั่วโลกได้อย่างรวดเร็ว โดยรวมถึงคนทั่วโลกสามารถ Access ได้อย่างรวดเร็ว

    การนำ Cloud มาใช้งาน

    – ผู้บริหารต้องเห็นด้วย และเป็นผู้ผลักดันในการใช้งานให้เกิดเป็นรูปธรรม
    – โดยในแต่ละธุรกิจ หรือแต่ละองค์กรมีวิธีการใช้งานในรูปแบบที่แตกต่างกันตามลักษณะงานที่ทำ
    – การเปลี่ยนแปลงจะต้องเปลี่ยนในสิ่งต่อไปนี้
    1) งานที่ทำ
    2) ความสามารถ ทักษะ ที่ต้องการเพิ่มขึ้นในองค์กร
    3) ความสัมพันธ์ระหว่างคนในองค์กรและผู้บริหารระบบไอที
    4) กระบวนการทำงาน
    – ระดับของการใช้งาน Cloud มีทั้งแบบ ไม่มีใช้งาน, ใช้งานภายใน, ใช้งานภายนอกทั้งหมด ซึ่งสุดท้ายแล้วจะไม่มีผู้ดูแลระบบภายในเหลืออยู่เลย
    – แต่ก็ยังต้องมีฝ่าย IT ภายในองค์กร แต่จะใช้ในการดูแลเรื่องความปลอดภัยของการเข้าถึงข้อมูล การจัดการบริการ Cloud และการเฝ้าระวัง
    – การเริ่มที่ง่ายที่สุด ต้องเริ่มจากความซับซ้อนน้อยที่สุด
    – สิ่งที่ควรนำขึ้น Cloud ก่อนคืองานที่ใช้ทดสอบหรือพัฒนา, งานที่ไม่กระทบต่อธุรกิจโดยรวม, งานที่รันเป็น Batch
    – สุดท้ายแล้วงานที่จะขึ้น Cloud ช่วงหลังก็จะเป็นงานที่มีโหลดสูง, งานที่มีการใช้งานร่วมกัน, งานที่ต้องใช้กับ Desktop, งานทั้งที่เป็นงานทั่วไป และงานสำคัญ

    ความเสี่ยงในการใช้งาน Cloud

    – ข้อมูลสูญหาย
    – การใช้บริการของที่หนึ่งแล้วจำเป็นต้องย้ายไปยังอีกผู้ให้บริการ
    – Data lock-in ข้อมูลอาจจะไม่สามารถย้ายไปใช้กับ Application อื่นได้
    – ขนาดของเครื่อง ซึ่งผู้ให้บริการไม่สามารถจัดหาให้ได้
    – เครื่องมือจัดการระบบ Cloud ซึ่งการที่ย้ายไปยังผู้บริการอื่นใช้เงินลงทุนที่สูง

    การป้องกันความเสี่ยงในการใช้งาน Cloud

    – Data lock-in ใช้รูปแบบมาตรฐานของข้อมูลเช่น JSON, XML
    – VM lock-in ใช้รูปแบบมาตรฐานของ VM Image
    – App lock-in ใช้รูปแบบ API มาตรฐาน
    – การยืนยันตัวตนให้ใช้มาตรฐาน เช่น OAuth, OpenID, Facebook Authentication

  • Script สำหรับ หาวันที่ของไฟล์ล่าสุดใน directory

    Q: ถ้าจะเขียน คำสั่ง หรือ script บน linux เพื่อหา วันที่ของ file ล่าสุดใน folder ของ user จะเขียนยังไงดี มีไอเดียไหมครับ

    A: สมมติ folder ของ user คือ /home/user/Documents

    $ ls -t /home/user/Documents
    

    จะได้ไฟล์เรียงตามลำดับวันที่/เวลาของไฟล์ โดยไฟล์ล่าสุดจะโผล่มาเป็นไฟล์แรก

    ถ้าเราต้องการไฟล์ล่าสุดแค่ไฟล์เดียว ก็สามารถใช้คำสั่ง head -1 เพื่อตัดให้เหลือไฟล์เดียวได้ ก็จะได้คำสั่งเป็น

    $ ls -t /home/user/Documents | head -1
    

    ทีนี้ จากชื่อไฟล์ที่ได้ ถ้าต้องการวันที่ เราก็สามารถใช้คำสั่ง date โดยใช้ option -r สำหรับให้มันแสดงวันที่ของไฟล์ใดๆ ตย. เช่น ต้องการรู้วันที่ ของไฟล์ /etc/passwd ก็ใช้คำสั่ง

    $ date -r /etc/passwd
    

    เอาสองอย่างนี้มาใช้งานร่วมกันได้ตามนี้ครับ

    $ date -r `ls -t /home/user/Documents | head -1`
    

    ทีนี้ ถ้าต้องการให้ format ของวันที่ออกมาตามที่เราต้องการ อย่างเช่น ให้ format เป็น yyyy-mm-dd HH:MM:SS
    ก็เพิ่ม option ให้กับคำสั่ง date ประมาณนี้ “+%Y-%m-%d %H:%M:%S”

    รวมกันทั้งหมดเป็น

    $ date -r `ls -t /home/user/Documents | head -1` "+%Y-%m-%d %H:%M:%S"
    

    Q: ถ้าจะลงลึกไปหลาย level ต้องทำอะไรเพิ่มครับ
    A: หมายถึงต้องการไฟล์ล่าสุด ไฟล์เดียว จากใน directory นั้นและ sub directory ย่อยทั้งหมดใช่ใหมครับ?
    Q: ใช่ครับ
    A: งั้น คงต้องพึ่งพาคำสั่ง find ครับ เพื่อที่ list เอาเฉพาะไฟล์ทั้งหมดออกมาก่อน เพราะคำสั่ง ls ธรรมดามันจะไล่ไปตาม directory ทีละ directory

    เริ่มจาก

    $ find /home/user/Documents
    

    มันจะ list ทุกอย่างทั้งไฟล์ และ ไดเรคตอรี่และในไดเรคตอรี่ย่อยออกมา

    เราต้องการเฉพาะไฟล์ ระบุ option -type f
    เราต้องการให้มันแสดงวันที่ของไฟล์ออกมาด้วย อันนี้ต้องพึ่งคำสั่ง ls โดยใช้ option ของ ls เป็น –full-time

    $ find /home/user/Documents -type f -exec ls --full-time {} \;
    

    โดย {} เป็นการระบุว่าให้ find ใช้คำสั่ง ls –full-time กับ output ของ find ส่วน \; เป็นตัวระบุว่า จบ option ของ คำสั่ง find แค่นี้

    output ที่ได้ จะเป็นไฟล์ “ทั้งหมด” โดยที่ในแต่ละบรรทัดจะมี ข้อมูลอย่างอื่นของไฟล์นั้นออกมาด้วย เช่น permission, owner, group, size ซึ่งเราไม่สนใจ เราตัดเอาข้อมูลที่อยู่ข้างหน้าเหล่านั้นออกไปได้ โดยใช้คำสั่ง cut โดยในกรณีนี้ใช้ space ‘ ‘ เป็นตัวแบ่ง field และ เอาข้อมูลตั้งแต่ column ที่ 6 เป็นต้นไป

    $ find /home/user/Documents -type f -exec ls --full-time {} \; | cut -f6- -d' '
    

    คราวนี้เราก็ได้ไฟล์ทั้งหมดออกมาโดยนำหน้าชื่อไฟล์ด้วยวันที่/เวลา ซึ่งเราสามารถส่งเข้าไป sort โดยให้เรียงจากหลังมาหน้า
    sort -r และ เอา output ทั้งหมดมาตัดเอาเฉพาะบรรทัดแรกโดยใช้ คำสั่ง head -1 เหมือนเดิม

    $ find /home/user/Documents -type f -exec ls --full-time {} \; cut -f6- -d' ' | sort -r | head -1
    

    ซึ่ง output ที่ได้จากคำสั่ง head อันนี้จะมี วัน/เวลาของไฟล์ นำหน้า ตามด้วยชื่อไฟล์ ซึ่งอาจจะเอาไปใช้งานได้เลย
    หรือ ถ้าต้องการเฉพาะชื่อไฟล์ เพื่อจะเอาไปทำอะไรอย่างอื่นต่อ ก็ต้องส่งไปให้คำสั่ง cut เพื่อตัด field ข้อมูลที่อยู่ด้านหน้าออก

    ขอบคุณคำถามจาก Garnet Komane ครับ

    ปล. สุดท้ายแล้วจากคำสั่งข้างบนที่ว่า แทนที่จะพิมพ์เอาบน command line แล้วไปเปลี่ยน path ที่จะให้ค้นหา เขียนมันใหม่เป็น shell script เลยจะเรียกใช้งานได้ง่ายกว่า ซึ่งจะได้ shell script ประมาณนี้ครับ

    #!/bin/bash
    
    LOCATION="$1"
    
    [ -z "$LOCATION" ] && { echo "Usage: $0 LOCATION"; exit; }
    
    FILE=$(
    find $LOCATION -type f -exec ls --full-time {} \;  |\
    cut -f6- -d' '                                     |\
    sort -r                                            |\
    head -1                                            |\
    cut -f4- -d' '
    )
    
    STAMP=$(date -r "$FILE" "+%Y-%m-%d %H:%M:%S")
    
    echo "$STAMP $FILE"
    

    หรือ ดาวน์โหลด script ได้จาก ที่นี่

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

    ในบทความนี้จะนำขั้นตอนการพัฒนา 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 ช่วยสร้างรายงาน

    จากตอนที่แล้วได้กล่าวถึงการสร้างรายงานว่าสามารถทำได้ 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 เป็นต้น

  • Unit test สำหรับ method ที่ใช้ Entity Framework

    กลไกการทำงานของ .NET method โดยส่วนใหญ่  จะมีกลไกการทำงานที่ต้องขึ้นกับเงื่อนไข ปัจจัยต่างๆจากภายนอกอย่างเช่น method ที่มีเรียกใช้ database หรือ web service ทำให้การทดสอบจำเป็นต้องแยก component ที่ต้องการทดสอบออกมาจากปัจจัยแวดล้อมต่างรอบๆ component ซึ่งสามารถทำได้โดยใช้ shim ที่อยู่ภายใต้การควบคุมในกระบวนการทดสอบ สามารถที่จะควบคุมผลลัพธ์ที่ได้การทำงานตามที่กำหนดในทุกๆครั้งที่เรียกใช้งาน ซึ่งทำให้การเขียน unit testing ทำได้ง่ายขึ้นมาก

    การพัฒนา unit test สำหรับ method ที่ใช้ Entity Framework เพื่อเข้าถึงฐานข้อมูล ก็สามารถใช้ shim type ในการกำหนดชุดของข้อมูลเพื่อทำการทดสอบ ซึ่งการ query จะกระทำกับ property ของ DbContext ซึ่ง return IDbSet<T>

    public partial class Entities : DbContext
    {
       public Entities(): base("name=Entities")
       {
       }
    
        public IDbSet<CONFIG> CONFIG { get; set; }
       ...
    }
    

    ในการพัฒนา unit test จะต้องสร้าง shim type สำหรับ class “Entities” และแทนที่ property ที่ดึงข้อมูลจากฐานข้อมูลจริงแยกออกจากการทดสอบ ด้วยข้อมูลสำหรับทดสอบ จากตัวอย่างข้างบนคือ property “CONFIG” ซึ่งเป็นประเภท IDbSet<CONFIG> โดยจะทำการ returm DbSet<CONFIG> ที่เตรียมข้อมูลไว้สำหรับการทดสอบ

    using (ShimsContext.Create())
    {
         ShimEntities.AllInstances.CONFIGGet =
                  (e) =>  {
                             return ... DbSet<CONFIG>
                          };
    }

    แต่ใน DbSet ไม่มี public constructor ทำให้ไม่สามารถสร้าง instance ของ DbSet ได้ จึงจำเป็นต้องสร้าง class ใหม่ที่ implement interface IDbSet<T> แทนการใช้ DbSet

    public class TestDbSet<T> : IDbSet<T>, IQueryable, IEnumerable<T>
        where T : class
     {
         ObservableCollection<T> _data;
         IQueryable _query;
    
         public TestDbSet() //: base()
         {
            _data = new ObservableCollection<T>();
            _query = _data.AsQueryable();
         }
    
         public virtual T Find(params object[] keyValues)
         {
            throw new NotImplementedException("Derive from TestDbSet<T> and override Find");
         }
    
         public T Add(T item)
         {
             _data.Add(item);
             return item;
         }
    
         public T Remove(T item)
         {
             _data.Remove(item);
             return item;
         }
    
         public T Attach(T item)
         {
             _data.Add(item);
             return item;
         }
    
         public T Create()
         {
             return Activator.CreateInstance<T>();
         }
    
         public TDerivedEntity Create<TDerivedEntity>() where TDerivedEntity : class, T
         {
             return Activator.CreateInstance<TDerivedEntity>();
         }
    
         public ObservableCollection<T> Local
         {
             get { return new ObservableCollection<T>(_data); }
         }
    
         Type IQueryable.ElementType
         {
             get { return _query.ElementType; }
         }
    
         System.Linq.Expressions.Expression IQueryable.Expression
         {
             get { return _query.Expression; }
         }
    
         IQueryProvider IQueryable.Provider
         {
             get { return _query.Provider; }
         }
    
         System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
         {
             return _data.GetEnumerator();
         }
    
         IEnumerator<T> IEnumerable<T>.GetEnumerator()
         {
             return _data.GetEnumerator();
         }
     }

    หลังจากนั้นสร้าง class อีกหนึ่ง class ที่ inherit มาจาก TestDbSet<T> ระบุ generic type เป็น model class ที่ต้องการในที่นี้คือ CONFIG  และเขียน code override Find() method ของTestDbSet<T> เพื่อทำหน้าที่ค้นหา object ตาม key ที่ส่งมา ( สาเหตุ ต้องสร้าง class ที่ inherit มาจาก TestDbSet<T> เนื่องจาก แต่ละ model class อาจจะมี key ที่ไม่ตรงกัน ดังนั้นใน  TestDbSet<T>.Find() method จึงไม่สามารถ implement code ที่ต้องการได้ )

     public class ConfigDbSet : TestDbSet<Models.CONFIG>
     {
        public override Models.CONFIG Find(params object[] keyValues)
        {
            return this.SingleOrDefault(s => s.ID == (decimal)keyValues.Single());
        }
     }

    จากนั้นกลับมาที่ unit test method ก็จะทำการ new ConfigDbSet() แล้วส่งข้อมูลที่สำหรับทดสอบกลับไปได้ โดยไม่ต้องใช้ข้อมูลจริงจากฐานข้อมูล

  • ทำอย่างไรให้เว็บไซต์ที่เราพัฒนาสามารถอัพโหลดไฟล์แบบคราวละหลายไฟล์ได้โดยไม่จำกัดจำนวน ด้วย ASP.NET(C#)

              ในการพัฒนาเว็บไซต์ บางครั้งอาจมีความจำเป็น หรือความต้องการจากผู้ใช้ที่ต้องการให้เว็บไซต์ดังกล่าวมีฟังก์ชั่นการทำงานในส่วนของการอัพโหลดไฟล์เพื่อแนบไฟล์เข้าไปในระบบและบันทึกลงฐานข้อมูล เพื่อให้สามารถเรียกดูข้อมูลการแนบไฟล์ดังกล่าวได้ในภายหลัง การอัพโหลดไฟล์จึงถือเป็นอีกหนึ่งฟังก์ชั่นการทำงานที่นักพัฒนาเว็บไซต์ควรทราบไว้ ซึ่งลักษณะการทำงานโดยทั่วไปส่วนใหญ่เราจะใช้ Control ที่มีเรียกว่า “FileUpload” แบบอัพโหลดครั้งละ 1 ไฟล์ และหากมีมากกว่านั้นก็จะมีการสร้างตัว FileUpload มาวางไว้ในหน้าจอเพิ่มตามจำนวนที่ต้องการแบบตายตัว เช่น หากในหน้าจอดังกล่าวต้องการสามารถให้ทำการอัพโหลดไฟล์ได้ไม่เกิน 5 ไฟล์ต่อการอัพโหลดแต่ละครั้งก็จะมีการลากคอนโทรล FileUpload มาวางไว้ในหน้าจอจำนวน 5 ตัว เพื่อให้สามารถรองรับความต้องการในการอัพโหลดไฟล์ของผู้ใช้ได้ แต่ผู้เขียนพบว่าการทำงานดังกล่าวอาจไม่รองรับความต้องการในการทำงานของผู้ใช้ที่จะเพิ่มไฟล์ได้ครั้งละหลายๆไฟล์โดยไม่จำกัดและผู้พัฒนาไม่จำเป็นต้องระบุหรือสร้างคอนโทรล FileUpload มาวางในหน้าจอในจำนวนที่ตายตัวโดยไม่จำเป็น โดยผู้ใช้สามารถคลิกปุ่มเพื่อเพิ่มจำนวนในการอัพโหลดไฟล์แต่ละครั้งได้เองเพื่อความยืดหยุ่นในการใช้งาน ในบทความนี้ ผู้เขียนจึงขอเสนอแนวทางในการพัฒนาเว็บไซต์โดยใช้ ASP.NET(C#) ในแบบที่มีการอัพโหลดไฟล์ได้คราวละหลายๆไฟล์ในแบบไม่ต้องจำกัดจำนวนคอนโทรล FileUpload ในหน้าจอโดยมีการระบุจำนวนไฟล์ที่สามารถอัพโหลดได้ในแต่ละครั้งโดยผู้พัฒนาแบบตายตัวอย่างเช่นที่กล่าวไว้ข้างต้น

              หลังจากที่ได้มีการศึกษาเพิ่มเติม ผู้เขียนพบว่าใน .NET Framework เวอร์ชั่น 4.5 นั้นจะมีการเพิ่ม Feature การทำงานในส่วนนี้ให้กับคอนโทรล FileUpload ไว้แล้วผ่าน Properties ที่เรียกว่า AllowMultiple ซึ่งจะทำให้สะดวกต่อการพัฒนาและสามารถลดปัญหาดังกล่าวข้างต้นได้ แต่สำหรับเวอร์ชั่นที่ต่ำกว่ายังคงต้องมีการปรับปรุงพัฒนาเพิ่มเติมเอง ในบทความนี้จึงขอยกตัวอย่างการพัฒนาทั้ง 2 แบบในเบื้องต้นโดยจะเน้นไปในแบบเวอร์ชั่นที่ต่ำกว่า 4.5 เพื่อให้ผู้อ่านได้นำไปเป็นแนวทางในการพัฒนาต่อไป ดังนี้
    1. การอัพโหลดไฟล์คราวละหลายๆไฟล์โดยใช้ .Net Framework เวอร์ชั่นที่ต่ำกว่า 4.5

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

    1) ออกแบบหน้าจอการทำงานในฝั่ง Client  ทำการออกแบบหน้าจอการทำงานไว้ในเบื้องต้น โดยมีการสร้างคอนโทรล FileUpload มาตั้งต้นไว้ 1 ตัว และมีปุ่มเพื่อให้ทำการเพิ่มคอนโทรล FileUpload ได้เองอัตโนมัติโดยตัวผู้ใช้เอง และปุ่มที่ใช้ในการอัพโหลดไฟล์จากคอนโทรล FileUpload ทั้งหมด ดังนี้

    <body>
    <form id="form1" runat="server">
    <div>
     <div id="fileUploadarea" class="Divborder">
      <div id='divfirstUpload'><br /><asp:FileUpload ID="fuMultiple" runat="server" CssClass="fileUpload" onchange="javascipt:FileValidate(this,5);" />&nbsp;  <input style="display:inline;" id="BtnRemove" type="button" value="Remove" onclick="DelFileUpload('divfirstUpload');" /> 
    </div> 
    </div>
    <br /> 
    <div>&nbsp; 
    <input style="display:inline; background-color: #A4EDFF; color: #333333; width: 150px; font-weight: bold;" id="btnAddMoreFiles" type="button" value="Add more files" onclick="AddMoreFilesWithMax(6);" />
    &nbsp; <asp:Button ID="BtnUpload" runat="server" onclick="BtnUpload_Click" Text="Upload" OnClientClick="return ValidateFileUpload();" BackColor="#3399FF" Font-Bold="True" ForeColor="White" Width="150px" /> 
    <br> 
    <asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="410px">
    <RowStyle BackColor="#EFF3FB" /> 
    <Columns> 
    <asp:BoundField DataField="Name" HeaderText="ชื่อไฟล์"> 
    <ItemStyle Width="200px" /> </asp:BoundField> 
    <asp:BoundField DataField="FileSize" HeaderText="ขนาดไฟล์(KB)"> 
    <ItemStyle HorizontalAlign="Right" Width="120px" /> 
    </asp:BoundField> 
    </Columns> 
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
    <EditRowStyle BackColor="#2461BF" /> <AlternatingRowStyle BackColor="White" /> 
    </asp:GridView> 
    </div> 
    </div> 
    </form> 
    </body>

    2) ในส่วนของจาวาสคริปต์ที่ใช้เป็นตัวช่วยในการตรวจสอบ โดยจะแยกเป็นแต่ละ function ดังนี้

    2.1) ฟังก์ชั่นที่ใช้ในการเพิ่มไฟล์ได้ไม่จำกัด โดยใช้ชื่อว่า AddMoreFiles()

    <script language="javascript" type="text/javascript">
    
    function AddMoreFiles() {
    
      if (!document.getElementById && !document.createElement)
        return false;
    ////อ้างอิงถึง div ที่มีชื่อว่าfileUploadarea
      var fileUploadarea = document.getElementById("fileUploadarea"); 
      if (!fileUploadarea) return false; 
       var newLine = document.createElement("br"); fileUploadarea.appendChild(newLine); 
       var newFile = document.createElement("input"); 
       newFile.type = "file"; newFile.setAttribute("class", "fileUpload");
    
    /////กำหนดค่าเริ่มต้นให้กับตัวแปร AddMoreFiles.lastAssignedId 
    เพื่อใช้ในการกำหนด ID ให้กับคอนโทรลที่สร้างขึ้น และเป็นตัวนับ
      if (!AddMoreFiles.lastAssignedId) 
        AddMoreFiles.lastAssignedId = 1;
    
     //////กำหนดค่าแอททริบิวต์ต่างๆให้กับ FileUpload ที่ทำการสร้างใหม่ ในทีนี้คือ id และ name
        newFile.setAttribute("id", "FileUpload" + AddMoreFiles.lastAssignedId);  
        newFile.setAttribute("name", "FileUpload" + AddMoreFiles.lastAssignedId); 
    
     //////สร้าง div ขึ้นมาใหม่ และกำหนดค่าแอททริบิวต์ต่างๆให้กับ div ที่ทำการสร้างใหม่ 
    ในทีนี้คือ id และ เพิ่มคอนโทรลที่สร้าง tag ไว้ด้านบนเข้ามาไว้ใน div 
        var div = document.createElement("div"); 
        div.appendChild(newFile); 
        div.setAttribute("id", "div" + AddMoreFiles.lastAssignedId); 
    
    //////เพิ่ม div ที่สร้างใหม่ไปยัง div ที่มีชื่อว่า fileUploadarea และเพิ่มค่าของตัวแปร AddMoreFiles.lastAssignedId   
        fileUploadarea.appendChild(div); 
        AddMoreFiles.lastAssignedId++; 
    }

    2.2) ฟังก์ชั่นที่ใช้ในการเพิ่มไฟล์ได้โดยมีการระบุจำนวนสูงสุดที่ยอมให้อัพโหลดแต่ละครั้ง ในกรณีที่ต้องการระบุค่าจำนวนไฟล์ที่ต้องการให้ผู้ใช้สามารถอัพโหลดได้สูงสุดในแต่ละครั้ง สามารถปรับแก้เพิ่มเติมจากฟังก์ชั่นก่อนหน้านี้ โดยการส่งพารามิเตอร์จำนวนมากสุดที่ยอมให้สร้างตัวอัพโหลดไฟล์ได้ โดยใช้ชื่อฟังก์ชั่นว่า AddMoreFilesWithMax(x) ดังนี้

    function AddMoreFilesWithMax(x) 
    { //////กำหนดค่าให้กับ AddMoreFiles.lastAssignedId 
    เพื่อเป็นค่าตั้งต้นในการไปเซทค่า id และ name ของคอนโทรลที่สร้างใหม่ 
    โดยในที่นี้เริ่มต้นที่ 2 เนื่องจากเดิมมีคอนโทรลอัพโหลดไฟล์อยู่เดิมแล้ว 1 ตัว
      if (!AddMoreFiles.lastAssignedId)
          AddMoreFiles.lastAssignedId = 2;
    
       if (!document.getElementById && !document.createElement)
          return false; 
      var fileUploadarea = document.getElementById("fileUploadarea");
        if (!fileUploadarea) return false;
    
    /////เป็นการตรวจสอบเงื่อนไขว่ายังไม่เกินจำนวนมากสุดที่ระบุไว้ผ่านพารามิเตอร์ x
          if (AddMoreFiles.lastAssignedId <= x) 
          { 
          var newLine = document.createElement("br"); 
    
          //สร้างปุ่ม Remove เพื่อใช้ลบคอนโทรล FileUpload ที่สร้างขึ้นออกโดยผู้ใช้ 
          var newbtnDel = document.createElement("input"); 
          newbtnDel.setAttribute("id", "btnDelUpload" + AddMoreFiles.lastAssignedId);
          newbtnDel.setAttribute("name", "btnDelUpload" + AddMoreFiles.lastAssignedId); 
          newbtnDel.setAttribute("value", "Remove");   
          newbtnDel.type = "button"; 
    
         //////สร้างคอนโทรล FileUpload ขึ้นใหม่และกำหนดแอททริบิวต์ต่างๆให้
          var newFile = document.createElement("input"); 
          newFile.type = "file"; 
          newFile.setAttribute("class", "fileUpload");
          newFile.setAttribute("id", "FileUpload" + AddMoreFiles.lastAssignedId); 
          newFile.setAttribute("name", "FileUpload" + AddMoreFiles.lastAssignedId);
    
    //////เป็นส่วนของการเรียกฟังก์ชั่นในการตรวจสอบไฟล์ที่ทำการอัพโหลดว่าถูกต้องตรงตามเงื่อนไขหรือไม่
         เมื่อมีการเลือกไฟล์ใดๆจากผู้ใช้ ซึ่งจะพูดถึงในส่วนถัดไปในการสร้างฟังก์ชั่น FileValidate(ctrl,maxVal) 
          newFile.setAttribute('onchange', 'javascipt:FileValidate(this,5);');
    
    //////สร้าง div ขึ้นมาใหม่ และกำหนดค่าแอททริบิวต์ต่างๆให้กับ div ที่ทำการสร้างใหม่ 
    ในทีนี้คือ id และ เพิ่มคอนโทรลที่สร้าง tag ไว้ด้านบนเข้ามาไว้ใน div 
          var div = document.createElement("div");
          div.appendChild(newLine);
          div.appendChild(newFile);
    //////เพิ่มช่องว่างระหว่างคอนโทรลอัพโหลดไฟล์และปุ่ม Remove เพื่อความสวยงาม
          div.appendChild(document.createTextNode('\u00A0'));
          div.appendChild( newbtnDel);
          div.setAttribute("id", "div" + AddMoreFiles.lastAssignedId);
    
    //////เพิ่ม event การคลิกปุ่ม Remove เพื่อให้ไปเรียกใช้ฟังก์ชั่น DelFileUpload
    โดยส่งค่า id ของ div ที่ต้องการให้ลบออกซึ่งจะกล่าวถึงในส่วนถัดไปของการสร้างฟังก์ชั่น DelFileUpload(divid);
          newbtnDel.setAttribute('onclick', 'javascipt:DelFileUpload(\'' + "div" + AddMoreFiles.lastAssignedId + '\');');
    
          fileUploadarea.appendChild(div);
          AddMoreFiles.lastAssignedId++; } 
    
    ///////กรณีที่มีจำนวนตัวอัพโฟลดไฟล์ที่ถูกสร้างขึ้นเองเกินกว่าที่กำหนด(ค่าพารามิเตอร์ x) 
    จะแสดงข้อความให้ทราบ
     else { 
           alert("ขออภัย ท่านสามารถอัพโหลดไฟล์ได้สูงสุดครั้งละไม่เกิน " + x + " ไฟล์ต่อการอัพโหลดแต่ละครั้ง กรุณาลองใหม่อีกครั้ง"); 
          return false;
           } 
          }

    2.3) ฟังก์ชั่นที่ใช้ในการตรวจสอบขนาดของไฟล์ โดยมีการระบุขนาดสูงสุดที่ยอมให้อัพโหลดแต่ละครั้ง โดยใช้ชื่อฟังก์ชั่นว่า FileValidate(ctrlFile,MaxSize)

    ////เป็นการประกาศตัวแปรที่ใช้ในการตรวจสอบชนิดของไฟล์ที่ยอมให้อัพโหลดได้
    var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png", ".pdf"];
    function FileValidate(ctrlFile,MaxSize) 
    {//////พารามิเตอร์ที่รับเข้ามาคือตัวคอนโทรลของการอัพโหลดไฟล์ที่ต้องการตรวจสอบ(ctrlFile) 
    และขนาดสูงสุดของไฟล์ที่ยอมให้อัพโหลดในแต่ละคอนโทรล(MaxSize)
    
    ////ดึงค่าชื่อของไฟล์ที่อัพโหลดที่ต้องการตรวจสอบ
      var sFileName = ctrlFile.value;
    
    /////ตรวจสอบเมื่อพบชื่อไฟล์ที่ดึง
       if (sFileName.length > 0) 
       { 
         var blnValid = false; 
    //////////ตรวจสอบนามสกุลของไฟล์ที่ดึงมาจากชื่อไฟล์กับค่าของนามสกุลไฟล์ที่ยอมให้อัพโหลด
    จากตัวแปร _validFileExtensions
         for (var j = 0; j < _validFileExtensions.length; j++) 
          { var sCurExtension = _validFileExtensions[j]; 
           if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) 
           { 
             blnValid = true; 
             break; 
            } 
          }   
    //////กรณีไฟล์ดังกล่าวมีนามสกุลที่แตกต่างจากที่กำหนดจะแสดงข้อความแจ้งเตือน 
    และล้างค่าของชื่อไฟล์ในคอนโทรลอัพโหลดไฟล์ตัวดังกล่าว
         if (!blnValid) 
         { alert("ไม่สามารถอัพโหลดไฟล์ดังกล่าวได้ เนื่องจากรองรับเฉพาะไฟล์ที่มีนามสกุลดังนี้เท่านั้น: " + _validFileExtensions.join(", ")); 
          ctrlFile.value = ""; 
          return false; 
         } 
         else 
         {
    /////หากไฟล์ที่อัพโหลดมีนามสกุลไฟล์ตามที่ระบุ จะทำการตรวจสอบขนาดของไฟล์ว่าไม่เกินจากขนาดสูงสุด
    ที่กำหนดหรือไม่ โดยมีการคำนวณหน่วยเป็น MB
           var fileSize = parseFloat(ctrlFile.files[0].size / 1048576).toFixed(2);
    
    /////หากขนาดของไฟล์เกินกว่าที่กำหนดจะแสดงข้อความแจ้งเตือน และล้างค่าไฟล์ที่ต้องการอัพโหลด
    ในคอนโทรลอัพโหลดไฟล์ดังกล่าว
           if (fileSize > MaxSize) 
            { alert(" ขออภัย ขนาดของไฟล์ที่ต้องการอัพโหลดมีขนาดใหญ่เกินกว่าทีกำหนด(" + MaxSize + " MB)"); 
              ctrlFile.value = ""; 
              return false;   
           } 
         }   
        }   
      return true; 
      }

    2.4) ฟังก์ชั่นที่ใช้ในการตรวจสอบว่ามีการเลือกไฟล์ที่ต้องการอัพโหลดแล้วหรือไม่ เมื่อมีการกดปุ่ม “Upload” โดยใช้ชื่อฟังก์ชั่นว่า ValidateFileUpload() 

    function ValidateFileUpload() { 
    //////เป็นการค้นหาคอนโทรลไฟล์อัพโหลดที่มีในหน้าจอโดยใช้ tag input 
    และตรวจสอบที่มี type เป็น "file" ใส่ไว้ในตัวแปร arrInputs
        var arrInputs = document.getElementsByTagName("input");
        var blnValid; 
        var oInput;
        for (var i = 0; i < arrInputs.length; i++)
         { oInput = arrInputs[i]; 
          if (oInput.type == "file") 
          { 
           var sFileName = oInput.value; 
    
     ///////หากพบตัวอัพโหลดไฟล์ตัวใดที่ยังไม่ได้ทำการเลือกไฟล์ไว้ จะทำการแสดงข้อความแจ้งเตือนให้ทราบ
           if (sFileName.length == 0) 
             { blnValid = false; 
              alert("ขออภัย ไม่สามารถอัพโหลดไฟล์ได้ เนื่องจากพบว่ามีบางไฟล์ไม่ได้ถูกเลือก กรุณาลองใหม่อีกครั้ง"); 
              return false;   
             } 
          }   
         }   
    return true; 
    }

    2.5) ฟังก์ชั่นที่ใช้ในการลบคอนโทรลที่ใช้ในการอัพโหลดไฟล์ โดยใช้ชื่อฟังก์ชั่นว่า DelFileUpload(dv) ซึ่งจะส่งพารามิเตอร์เป็น id ของ div ตัวที่ต้องการให้ลบ และถูกเรียกใช้เมื่อมีการกดปุ่ม “Remove”

    function DelFileUpload(dv) 
    { ////ค้นหา div ตาม id ที่ส่งเข้ามา
       var elem = document.getElementById(dv); 
      ///ทำการลบ div นั้นออกจากหน้าจอและลดค่าของ AddMoreFiles.lastAssignedId ลง 1
    เพื่อใช้ในการคำนวณค่าสูงสุดและกำหนด tag ของ id และ name ของคอนโทรลที่สร้างใหม่ต่อไป
       elem.parentNode.removeChild(elem); 
       AddMoreFiles.lastAssignedId = AddMoreFiles.lastAssignedId - 1; 
    }

    3) ในฝั่งเซฺิร์ฟเวอร์ (C#)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    /////เป็น namespace ที่ต้องอ้างอิงเพิ่มเพื่อใช้ในการจัดการข้อมูลกับ datatable
    using System.Data;
    /////เป็น namespace ที่ต้องอ้างอิงเพิ่มเพื่อใช้ในการจัดการเกี่ยวกับการอัพโหลดไฟล์
    using System.IO;
    public partial class MultipleUpload : System.Web.UI.Page
    {
    protected void BtnUpload_Click(object sender, EventArgs e)
    {
      try
      {
    
     //////สมมุติเพื่อนำไปประยุกต์ใช้กับการบันทึกลงฐานข้อมูลต่อไป 
    โดยสร้างโครงสร้าง datatable ที่ชื่อว่า dtFiles 
         DataTable dtFiles = new DataTable();
         dtFiles.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
         new DataColumn("Name", typeof(string)),
         new DataColumn("FileSize",typeof(string)) });
    
    ////เป็นการดึงคอนโทรลในการอัพโหลดไฟล์ที่ถูกสร้างขึ้นและวนรอบในการบันทึกไฟล์ดังกล่าว
     HttpFileCollection hfc = Request.Files;
     for (int i = 0; i < hfc.Count; i++)
     {
        HttpPostedFile hpf = hfc[i];
       if (hpf.ContentLength > 0)
        {
    //////บันทึกไฟล์ตามที่ระบุไว้
        hpf.SaveAs(Server.MapPath("~/uploads/") + System.IO.Path.GetFileName(hpf.FileName));
    
    ////เพิ่มข้อมูลลงไปใน datatable ที่สร้างไว้ สำหรับการใช้งานจริงอาจเป็นการติดต่อเพื่อบันทึกลงฐานข้อมูล 
        dtFiles.Rows.Add(i,hpf.FileName, hpf.ContentLength / 1024);
         }
       }
     if (dtFiles.Rows.Count > 0) 
     {
    //////ดึงข้อมูลจาก datatable มาแสดงในกริดวิว
        gvResult.DataSource = dtFiles;
        gvResult.DataBind();
     
     }
       }
      }
      catch (Exception)
      {
       throw;
       }
      }
    }
    

    เพิ่มเติม :
    หากต้องการตกแต่งเพื่อความสวยงามสามารถใส่ StyleSheet เพิ่มเติมได้ ดังตัวอย่างต่อไปนี้

    <style type="text/css">
      .fileUpload
      {
       width:255px;
       font-size:11px;
       color:#000000;
       border:solid;
       border-width:1px;
       border-color:#7f9db9;
       height:17px;
      }
     .Divborder
      {
       border: 2px solid;
       border-radius: 5px;
       padding:10px;
       width:390px;
      }
    </style>
    

    ตัวอย่างผลลัพธ์ที่ได้

    1) แสดงหน้าจอ โดยแรกเริ่มมีอัพโหลดไฟล์ตั้งต้น 1 ตัว

    uploadsingle

    2) แสดงหน้าจอเมื่อมีการกดปุ่ม “Add more files” uploadmulti2

    3) แสดงผลลัพธ์หลังจากบันทึกข้อมูลเรียบร้อยแล้วmultipleResult2

    2. การอัพโหลดไฟล์คราวละหลายๆไฟล์โดยใช้ .Net Framework เวอร์ชั่น 4.5  ซึ่งในบทความนี้จะไม่ลงรายละเอียดมากนัก ผู้อ่านสามารถนำไปประยุกต์เพิ่มเติมได้ โดยจะอธิบายทีละขั้นตอนคร่าวๆ ดังนี้

    1) การออกแบบในหน้าจอฝั่ง Client

    <body>
    <form id="form1" runat="server">
    <div>
    <asp:FileUpload ID="file_upload" runat="server" AllowMultiple="true" />
    <asp:Button ID="btnFileUpload" runat="server" Text="Upload" OnClick="btnFileUpload_Click" />
    <asp:Label ID="lblUploadStatus" runat="server"></asp:Label><br />
     <asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="410px">
     <AlternatingRowStyle BackColor="White" />
     <Columns>
     <asp:BoundField DataField="Name" HeaderText="ชื่อไฟล์">
     <ItemStyle Width="300px" />
     </asp:BoundField>
     <asp:BoundField DataField="filesize" HeaderText="ขนาดไฟล์(KB)">
     <ItemStyle HorizontalAlign="Right" Width="110px" />
     </asp:BoundField>
     </Columns>
     <EditRowStyle BackColor="#2461BF" />
     <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
     <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
     <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
     <RowStyle BackColor="#EFF3FB" />
     <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
     <SortedAscendingCellStyle BackColor="#F5F7FB" />
     <SortedAscendingHeaderStyle BackColor="#6D95E1" />
     <SortedDescendingCellStyle BackColor="#E9EBEF" />
     <SortedDescendingHeaderStyle BackColor="#4870BE" />
     </asp:GridView>
    </div>
    </form>
    </body>

    2) การพัฒนาในฝั่งเซิร์ฟเวอร์(C#)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.IO;
    using System.Data;
    namespace WebAppTest
    {
     public partial class MultipleUpload : System.Web.UI.Page
     {
     protected void btnFileUpload_Click(object sender, EventArgs e)
     {
     try
     {
    ///////การตรวจสอบขนาดไฟล์และไฟล์ต้องเป็นชนิด image/jpeg เท่านั้น
     if (file_upload.HasFile && file_upload.PostedFiles.All(x => x.ContentType == "image/jpeg" && x.ContentLength < 102400))
     {
    ///////ประกาศตัวแปร และกำหนดโครงสร้างของ datatable
     int i = 1;
     DataTable dtFiles = new DataTable();
     dtFiles.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
     new DataColumn("Name", typeof(string)),
     new DataColumn("FileSize",typeof(string)) });
     foreach (var file in file_upload.PostedFiles)
     {
    //////บันทึกไฟล์ที่เลือก
       file_upload.SaveAs(Server.MapPath("~/Fileupload/") + Path.GetFileName(file.FileName));
    ////วนบันทึกข้อมูลไฟล์ที่อัพโหลดลงใน datatable  
        dtFiles.Rows.Add(i, file.FileName, file.ContentLength / 1024);
     }
    
    ////แสดงข้อความเมื่อการอัพโหลดเสร็จสมบูรณ์
       lblUploadStatus.Text = "บันทึกสำเร็จ";
    
    ////แสดงค่าที่ได้ลงในกริดวิว
     if (dtFiles.Rows.Count > 0)
     {
     gvResult.DataSource = dtFiles;
     gvResult.DataBind();
    
     }
     }
     else
     {
    ////แสดงข้อความแจ้งเตือนกรณีเกิดปัญหาไฟล์มีขนาดใหญ๋เกินกว่าที่กำหนดและไม่ใช่ชนิด image/jpeg
       lblUploadStatus.Text = "กรุณาเลือกไฟล์ที่ต้องการอัพโหลดให้เหมาะสม";
     }
     }
     catch (Exception ex)
     {
    ////แสดงข้อความแจ้งเตือนกรณีเกิดปัญหาในการอัพโหลดไฟล์
       lblUploadStatus.Text = "เกิดข้อผิดพลาดในการอัพโหลดไฟล์ :" + ex.Message;
     }
     }
     }
    }

    ตัวอย่างผลลัพธ์ที่ได้

    1) ก่อนทำการอัพโหลดไฟล์

    multiple4_5_0

    2) หลังอัพโหลดไฟล์ทั้งหมดเรียบร้อยแล้ว

    multiple4_5

    หมายเหตุ : หากกำหนดค่าให้กับ Properties ที่ชื่อว่า AllowMultiple=”false ตอนเลือกไฟล์ที่จะอัพโหลดจะสามารถเลือกได้เพียงไฟล์เดียวเท่านั้น

              จากบทความและตัวอย่างข้างต้น จะเห็นว่า ลักษณะผลลัพธ์ที่ได้จะคล้ายคลึงกัน แต่จะแตกต่างกันในส่วนของความซับซ้อนในการตรวจสอบความถูกต้องของข้อมูลไฟล์แนบที่รับเข้ามา ซึ่งผู้พัฒนาเองสามารถเลือกใช้วิธีที่ตนถนัดและขึ้นกับเวอร์ชั่นของ .NET Framework ที่กำลังพัฒนา รวมถึงเงื่อนไขของการตรวจสอบให้ตรงตามความต้องการของผู้ใช้มากที่สุด โดยเนื้อหาในบทความนี้เป็นเพียงแนวทางหนึ่งให้กับท่านในเบื้องต้นเท่านั้น ท่านสามารถนำไปประยุกต์ต่อยอดเพิ่มเติมได้ และผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้จะเป็นประโยชน์กับผู้พัฒนาที่กำลังค้นหาวิธีการอัพโหลดไฟล์คราวละหลายไฟล์นี้อยู่เช่นกัน หากมีเนื้อหาส่วนใดผิดพลาด ผู้เขียนขออภัยไว้ ณ ที่นี้ด้วย ขอบคุณค่ะ ^^
    แหล่งข้อมูลอ้างอิง :
    http://www.aspsnippets.com/Articles/Uploading-Multiple-Files-using-JavaScript-Dynamic-FileUpload-Controls-in-ASP.Net.aspx
    http://www.codeproject.com/Articles/667604/Upload-multiple-files-in-asp-net
    http://www.c-sharpcorner.com/UploadFile/99bb20/upload-multiple-files-using-fileupload-control-in-Asp-Net-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
  • การพัฒนา unit test โดย shim type

    Shims เป็นหนึ่งใน technology ที่อยู่ใน Microsoft Fakes Framework ใช้ในการพัฒนา unit testing เพื่อแยก component ที่ต้องการทดสอบออกมาจากปัจจัยแวดล้อมต่างรอบๆ component ในกระบวนการทดสอบ โดย shims จะทำการเปลี่ยนทิศทางการเรียกใช้ method ที่กำหนด ไปยัง code ที่เขียนขึ้นมาใช้ในการทดสอบ ส่วนใหญ่เราจะใช้ shims เพื่อแยก component ที่ต้องการทดสอบออกจาก assemblies ที่ไม่ได้เป็นส่วนหนึ่งของ solution ในการพัฒนา (กรณีที่ต้องการแยก component ที่ต้องการทดสอบออกจาก solution ของตัวเอง ควรจะใช้ stubs )

    method ที่พัฒนาส่วนใหญ่จะ return ผลการทำงานที่ต้องขึ้นกับเงื่อนไข ปัจจัยต่างๆจากภายนอก ในทางกลับกันสำหรับ shim  shim จะอยู่ภายใต้การควบคุมในกระบวนการทดสอบ สามารถที่จะ return ผลการทำงานตามที่กำหนดในทุกๆครั้งที่เรียกใช้งาน ซึ่งทำให้การเขียน unit testing ทำได้ง่ายขึ้นมาก

    ตัวอย่าง method การตรวจสอบวันที่เอกสารในปีงบประมาณ

    public static class Utility {
        public static bool IsInFiscalYear() {
            if (DateTime.Now < new DateTime(2015, 10, 1))
                return false;
            else
                return true;
        }
    }

    เมื่อต้องการทดสอบ method “IsInFiscalYear” จะพบว่าการทำงานของ method ขึ้นอยู่กับ DateTime.Now ซึ่งเป็นเวลาปัจุจบันที่ได้จากระบบ ซึ่งทำให้การทดสอบยุ่งยากขึ้น (เมื่อทำการทดสอบต้องเปลี่ยน DateTime เพื่อทำการทดสอบ ซึ่งอาจจะกระทบกับส่วนอื่นๆ ไม่สามารถทำการทดสอบแบบอัตโนมัติได้ ) ซึ่งการทดสอบ method ที่มีการเรียกใช้ database, web service ก็เช่นเดียวกัน เนื่องจากกลไกการทำงานขึ้นอยู่กับปัจจัยภายนอก ซึ่ง shim จะเข้ามาช่วยตรงจุดนี้

    Shim types จะให้กลไกการเปลี่ยนทิศทางการเรียกใช้ .NET method ไปยัง function ( หรือ user delegate) ที่เขียนขึ้น โดย shim types จะถูกสร้างโดย Fakes generator

    using (ShimsContext.Create()
    {
        ShimDateTime.NowGet = () => new DateTime(2016, 6, 1);
        var isIn = Utility.IsInFiscalYear();
    
        Assert.AreEqual(true, isIn);
    }

    ShimDateTime คือ shim type ที่ถูกสร้างโดย Fakes generator เพื่อใช้ในการกำหนดกลไกการทำงานแทน DateTime.Now

    การเพิ่ม Fakes Assemblies ใน solution ทำได้โดย

    1. ใน solution explorer ขยาย References ของ unit test project
    2. เลือก assembly ที่มี class ที่ต้องการสร้าง shim type (จากตัวอย่างนี้ต้องการสร้าง shim type ของ DateTime ให้เลือก System.dll)
    3. click ขวา เลือก Add Fakes Assembly

    ในการใช้ shim type ใน unit test framework จะต้องเขียน test code อยู่ใน ShimsContext เพื่อควบคุม lifetime ของ shim type (ถ้าไม่อยู่ภายใต้ ShimsContext, shim type จะคงอยู่จนกระทั่งปิดโปรแกรม) การสร้าง ShimsContext ทำได้โดยการเรียกใช้งาน static Create() ดังเช่นตัวอย่าง code ข้างต้น

    shim type สามารถใช้งานแทนที่ .NET method รวมทั้ง static method, instance method

    Static methods

    ShimMyClass.MyStaticMethod = () =>5;

    Instance methods สำหรับทุก instance

    ShimMyClass.AllInstances.MyMethod = () => 5;

    Instance methods แต่ละ instance

    var myClass1 = new ShimMyClass()
    {
        MyMethod = () => 5
    };

     

    อ้างอิง :

    • https://msdn.microsoft.com/en-us/library/hh549176.aspx