Developer – Page 40 – CoP PSU IT Blog

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

July 14, 2016 15:46

ในบทความนี้จะนำขั้นตอนการพัฒนา Hybrid App อย่างง่ายด้วย Ionic Framework เพื่อเป็นแนวทางการพัฒนาแก่ผู้ที่สนใจ โดยเครื่องที่ใช้ในการทดลองเป็นปฏิบัติการ Windows 10 มีขั้นตอนการติดตั้งเครื่องมือต่าง ๆ เพื่อให้สามารถใช้ Ionic ได้ดังนี้ ติดตั้ง js โดยดาวน์โหลดไฟล์ node-v4.4.7-x64.msi ได้จาก http://nodejs.org วิธีการติดตั้งก็ไม่ยุ่งยากครับ ใช้ Next Technology ได้เลย จะมีหน้าจอขั้นตอนต่าง ๆ ดังรูป ติดตั้ง Cordova และ Ionic command line tool โดยการเปิด command prompt ของ windows ขึ้นมา แล้วรันคำสั่ง $ npm install -g ionic เริ่มต้นสร้าง App อย่างง่าย หลังจากที่เตรียมความพร้อมของเครื่องที่พัฒนาเรียบร้อยแล้ว ขั้นตอนต่อไปก็จะเป็นการสร้าง App ขึ้นมา ซึ่ง Ionic ได้เตรียม template ตั้งต้นไว้ให้เราแล้ว ได้แก่ side menu, maps, salesforce, complex-list, blank เราก็ดูว่า App ของเราสามารถใช้ template ตัวไหนได้บ้าง ก็เลือกมาใช้ได้เลย รูปที่ 1 Ionic Template [ที่มา : http://ionicframework.com] ขั้นตอนการสร้าง App โดยใช้ command line tools เปิด command line ขึ้นมา แล้วกำหนด working directory เป็นที่ที่สำหรับใช้เก็บ project (ในที่นี้จะกำหนดเป็น “C:\ionic” ) สร้าง project กำหนดชื่อ myApp และใช้ tabs เป็น template ตั้งต้นโดยใช้คำสั่ง $ ionic start myApp tabs ผลลัพธ์ที่ได้จากคำสั่งนี้ จะทำให้ได้ไฟล์ต่าง ๆ ดังรูป จะพบว่ามีโฟลเดอร์ชื่อ www สำหรับเก็บโค้ด HTML, CSS, Java Script เหมือนกับการพัฒนาเว็บไซต์ ให้เราใช้ความรู้ด้านการเขียนเว็บไซต์สร้างไฟล์ต่าง ๆ เก็บไว้ในโฟลเดอร์นี้ได้เลย หลังจากสร้างไฟล์ 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 เช่นเคย Build และ Run บน Android โดยใช้คำสั่งต่อไปนี้ $ ionic platform add android $ ionic build android $ ionic emulate androidจะทำให้ได้ผลลัพธ์ดังรูป จากรูปเป็นผลลัพธ์ที่ได้จากการใช้ Tab template ซึ่งผู้พัฒนาจะต้องแก้ไขโค้ดให้เป็นไปตามที่ได้ออกแบบไว้

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

July 14, 2016 11:33

จากตอนที่แล้วได้กล่าวถึงการสร้างรายงานว่าสามารถทำได้ 2 แบบ กล่าวคือ สร้างรายงานจากไฟล์ว่างๆ หรือ ใช้ Report Wizard เป็นตัวช่วยสร้างรายงาน ซึ่ง Wizard สามารถออกแบบรายงานเป็นTable หรือ Crosstab ตามรูปแบบที่มีให้เลือก โดยทำตามขั้นตอน ดังนี้ 1. ไปที่ Solution Explorer คลิกขวาโฟลเดอร์ Reports > Add New Report จะปรากฏหน้าจอ Report Wizard ดังรูปที่ 1 รูปที่1 Report Wizard 2. คลิก Next เลือก Data Sources เป็นแบบ Shared หรือ Embedded Data Sources ดังรูปที่ 2 รูปที่2 Data Sources 3. คลิก Next เพื่อเขียน query โดยกดปุ่ม Query Builder… จะไปยังหน้าจอ Query Designer รูปที่3 Design Query 4. คลิก Next จะปรากฏหน้าจอให้เลือกว่าจะสร้างรายงานเป็นตาราง (Tabular) หรือ Metrix (สามารถสรุปข้อมูลในลักษณะ Pivot Table) ดังรูปที่ 4 รูปที่4 Report Type 5. คลิก Next เพื่อมาออกแบบตาราง ผู้ใช้จะต้องเลือก fields ที่อยู่ใน Available fields มาใส่ใน Displayed field ในที่นี้จะจัดกลุ่มข้อมูล (Group) ตาม CAMPUS_ID, FAC_ID, DEPT_ID และ fields อื่นๆจะแสดงในส่วนของ Details รูปที่5 Design Table 6. คลิก Next เพื่อเลือกรูปแบบการจัดวางข้อมูล (Layout) และคลิกเลือก Include subtotals เพื่อรวมข้อมูลในระดับที่ได้ Group ไว้ในข้อที่แล้ว (CAMPUS_ID, FAC_ID, DEPT_ID) และคลิก Next เพื่อเลือก Style ดังรูปที่ 6 รูปที่6 Table Layout & Style 7. คลิก Next จะเห็นช่อง Report name: ให้ตั้งชื่อรายงาน และกดปุ่ม Finish จะได้รายงาน ดังรูปที่ 7 รูปที่7 ตัวอย่างรายงาน จากการทดลองสร้างรายงานโดยไฟล์ว่างเปล่ากับใช้Wizard เป็นตัวช่วยสร้างรายงาน พบว่า Wizard สามารถทำให้งานง่ายขึ้นได้ ซึ่งรูปแบบที่มีให้เลือกอาจจะยังไม่ถูกใจผู้ใช้ก็ค่อยมาปรับกันในทีหลังได้ เช่น Format จำนวนเงิน, ใส่ Header / Footer, ใส่ Expression ใน Textbox… ส่วนในเรื่องการคำนวณจะเป็นการรวมข้อมูลแบบตรงไปตรงมา หากผู้ใช้ต้องการการคำนวณที่ซับซ้อนขึ้นก็สามารถทำได้ เช่น อยากได้คอลัมน์ยอดเงินสุทธิ = AMOUNT – AMOUNT_FINE – AMOUNT_VAT เป็นต้น

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

July 14, 2016 11:25

กลไกการทำงานของ .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

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

July 14, 2016 05:28

ในการพัฒนาเว็บไซต์ บางครั้งอาจมีความจำเป็น หรือความต้องการจากผู้ใช้ที่ต้องการให้เว็บไซต์ดังกล่าวมีฟังก์ชั่นการทำงานในส่วนของการอัพโหลดไฟล์เพื่อแนบไฟล์เข้าไปในระบบและบันทึกลงฐานข้อมูล เพื่อให้สามารถเรียกดูข้อมูลการแนบไฟล์ดังกล่าวได้ในภายหลัง การอัพโหลดไฟล์จึงถือเป็นอีกหนึ่งฟังก์ชั่นการทำงานที่นักพัฒนาเว็บไซต์ควรทราบไว้ ซึ่งลักษณะการทำงานโดยทั่วไปส่วนใหญ่เราจะใช้ 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);” />  <input style=”display:inline;” id=”BtnRemove” type=”button” value=”Remove” onclick=”DelFileUpload(‘divfirstUpload’);” /> </div> </div> <br /> <div>  <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);” />   <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)

การพัฒนา unit test โดย shim type

July 13, 2016 12:26

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 ทำได้โดย ใน solution explorer ขยาย References ของ unit test project เลือก assembly ที่มี class ที่ต้องการสร้าง shim type (จากตัวอย่างนี้ต้องการสร้าง shim type ของ DateTime ให้เลือก System.dll) click ขวา เลือก Add Fakes Assembly ในการใช้ shim type ใน unit test framework จะต้องเขียน test code อยู่ใน ShimsContext เพื่อควบคุม lifetime