ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# (ภาคต่อ)

             จากบทความที่แล้ว ผู้เขียนได้เขียนไว้เกี่ยวกับเรื่องวิธีการกำหนดจุดพิกัดบนแผนที่กันไปบ้างแล้ว ในหัวข้อ “ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C#” สำหรับในบทความนี้ผู้เขียนจึงขอพูดถึงในส่วนของการดึงค่าละติจูด ลองจิจูดของสถานที่ ซึ่งนับว่าเป็นส่วนประกอบสำคัญในการแสดงผลพิกัดบนแผนที่ ซึ่งเดิมทีแล้วนั้น ผู้ใช้อาจต้องค้นหาข้อมูลพิกัดดังกล่าวจาก Google map เองและนำพิกัดดังกล่าวมากรอกลงฐานข้อมูลหรือมาระบุเพื่อการแสดงพิกัดนั้นๆในการเขียนโปรแกรม คงเป็นการดี หากการแสดงผลพิกัดจากฐานข้อมูลนั้น จะมีตัวช่วยอำนวยความสะดวกให้กับผู้ใช้ในการดึงค่าละติจูด และลองจิจูดโดยการกรอกข้อมูลชื่อสถานที่ลงไปเพื่อใช้ในการค้นหา ซึ่งน่าจะเป็นประโยชน์และทำให้ผู้ใช้สามารถใช้งานได้ง่ายขึ้นในการนำพิกัดเหล่านั้นไประบุบนแผนที่นั่นเอง              โดยการดึงค่าพิกัดละติจูด-ลองจิจูดของสถานที่ สามารถทำได้หลายวิธี ขึ้นอยู่กับการนำไปประยุกต์ใช้ ซึ่งในบทความนี้ผู้เขียนขอแนะนำ 2 วิธี ดังนี้ การเรียกใช้เซอร์วิสของ Google Geocoding API  โดยการส่งพารามิเตอร์เป็นที่อยู่ของสถานที่ดังกล่าว ฝั่ง C# private void getLatAndLong() { try { ////เป็นการกำหนด url ที่จะใช้ในการเรียกเซอร์วิสของ Google Geocoding API โดยมีการส่งค่าพารามิเตอร์เป็นข้อมูลที่อยู่ string url = “http://maps.google.com/maps/api/geocode/xml?address=” + txtLocation.Text + “&sensor=false”; WebRequest request = WebRequest.Create(url); using (WebResponse response = (HttpWebResponse)request.GetResponse()) { ////ผลลัพธ์จะอยู่ในรูปแบบของ XML หรือ JSON และจะถูกอ่านให้อยู่ในรูปแบบ Dataset โดยใช้ StreamReader using (StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8)) { DataSet dsResult = new DataSet(); dsResult.ReadXml(reader); ////จัดทำโครงสร้างตาราง(datatable) ที่จะใช้ในการแสดงผลใน Gridview DataTable dtCoordinates = new DataTable(); dtCoordinates.Columns.AddRange(new DataColumn[4] { new DataColumn(“Id”, typeof(int)), new DataColumn(“Address”, typeof(string)), new DataColumn(“Latitude”,typeof(string)), new DataColumn(“Longitude”,typeof(string)) }); ////ดึงค่าผลลัพธ์จากตารางต่างๆ เพื่อนำค่าที่จำเป็นมาแสดงผลตามต้องการ foreach (DataRow row in dsResult.Tables[“result”].Rows) { string geometry_id = dsResult.Tables[“geometry”].Select(“result_id = ” + row[“result_id”].ToString())[0][“geometry_id”].ToString(); DataRow location = dsResult.Tables[“location”].Select(“geometry_id = ” + geometry_id)[0]; dtCoordinates.Rows.Add(row[“result_id”], row[“formatted_address”], location[“lat”], location[“lng”]); } ////แสดงผลข้อมูลของค่าที่ดึงมาได้ใน Gridview (ถ้ามี) if (dtCoordinates.Rows.Count > 0) { gvLatLong.DataSource = dtCoordinates; gvLatLong.DataBind(); } else { gvLatLong.DataSource = null; gvLatLong.DataBind(); ScriptManager.RegisterStartupScript(Page, Page.GetType(), “alert”, “alert(‘Can not find Latitude and Longitude!’); “, true); } } } } catch (Exception ex) { ScriptManager.RegisterStartupScript(Page, Page.GetType(), “alert”, “alert(‘Can not find Latitude and Longitude!’); “, true); gvLatLong.DataSource = null; gvLatLong.DataBind(); } } protected void btnSearch_Click(object sender, EventArgs

Read More »

สร้างกราฟด้วย Chart.js ร่วมกับ ASP.NET

    การแสดงผลในรูปแบบกราฟสำหรับเว็บแอพลิเคชัน ในปัจจุบันนั้น มีเครื่องมือ หรือเฟรมเวิร์ค มากมายให้เลือกใช้งาน ซึ่งสำหรับการเลือกใช้งานก็แล้วแต่ความเหมาะสมกับเครื่องมือ เทคโนโลยี ของเว็บนั้นๆ หรืออาจจะแล้วแต่ความถนัดของผู้พัฒนาเอง     สำหรับ Chart.js นั้นเป็นเฟรมเวิร์คที่สร้างด้วยภาษา JavaScript ดังนั้นคุณสมบัติที่พ่วงมาด้วยคือการทำงานแบบ AJAX อย่างเต็มรูปแบบ ซึ่งในบทความนี้จะเป็นการนำเอามาใช้ร่วมกับเว็บแอพลิเคชัน ที่พัฒนาด้วย ASP.NET โดยวิธีการส่งข้อมูลในรูปแบบ JSON ผ่าน Web Services และทำการแปลงข้อมูล JSON ให้อยู่ในรูปแบบของ Object ที่มีโครงสร้างตรงตามที่ Chart.js ต้องการ เพื่อนำไปใช้แสดงผลในรูปแบบกราฟแท่ง กราฟเส้น กราฟวงกลม  ผ่าน HTML Tag ที่มีชื่อว่า Canvas ซึ่งมีการเพิ่มส่วนแสดงความหมายของสีต่างๆในกราฟ ที่ได้พัฒนาเพิ่มเติมขึ้นมาอีกด้วย     ในบทความนี้จะยกตัวอย่างการสร้างกราฟใน 3 รูปแบบ และมีการกำหนดค่า Option ในการแสดงผลเท่าที่จำเป็นเท่านั้น สามารถอ่านวิธีการใช้งานเต็มรูปแบบได้ที่ http://www.chartjs.org/docs ทำการ Include ไฟล์ Javascript ของ chart.js ไว้ใน header (ในตัวอย่างเป็นการเรียกใช้งานจาก CDN หากต้องการใช้งานจากไฟล์ที่เก็บไว้ที่เว็บเซิฟเวอร์ให้ปรับแก้ src path) <script src=”https://code.jquery.com/jquery-1.11.3.min.js” type=”text/javascript”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js” type=”text/javascript”></script> เพิ่ม canvas ในส่วนของ body  <canvas id=”report” width=”600″ height=”300″></canvas> เขียน JavaScript เพื่อสร้างข้อมูล ตามโครงสร้างของกราฟแต่ละประเภท ในตัวอย่างจะเป็นโครงสร้างข้อมูลของกราฟแท่ง  var dataDemo = { labels: [“Apple”, “Sumsung”, “ASUS”, “OPPO”], datasets: [{ label: “2557”, fillColor: “#5B90BF”, data: [20, 10, 9, 8] }] }; ทำการสร้าง Context จาก canvas เพื่อนำไปสร้าง Chart Object โดยใช้คำสั่ง ดังนี้  var ctx = $(“#report”).get(0).getContext(“2d”); var chart = new Chart(ctx).Bar(dataDemo, { bezierCurve: false });   จาก 4 ขั้นตอนดังกล่าวเราจะได้โค้ดที่เมื่อทำการเพิ่มโครงสร้างของหน้าเว็บ และบันทึกเป็นไฟล์ html แบบนี้ chart.html  ลองเปิดดูจะพบว่าสามารถแสดงกราฟแท่งได้แล้ว       แต่ในงานจริงนั้น รู้กันดีนะครับ ว่ามันไม่ง่ายอย่างนั้น โจทย์ของเราคือ สามารถนำข้อมูลจาก Database ซึ่งได้เขียน Query จนได้ข้อมูลแบบที่เราเรียกกันติดปากว่า Crosstab นั้นคือมีชื่อฟิลด์ข้อมูลที่มีความสัมพันธ์กันในแกน x และแกน y ซึ่งเป็นรูปแบบข้อมูลที่นำมาสร้างเป็นกราฟนั้นเอง ส่วนวิธีการนั้น ผมไม่ขอลงรายละเอียดในบทความนี้ แต่สำหรับท่านใดที่ใช้งานฐานข้อมูล Oracle ตั้งแต่ 11g ขึ้นไปลองศึกษาคำสั่งชื่อ Pivot ดูครับ น่าจะช่วยลดความยุ่งยากในขั้นตอนนี้ได้มาก ตัวอย่างข้อมูล แบบ Crosstab ที่เราจะส่งจากฝั่ง Server มาสร้างเป็น Object สำหรับสร้างกราฟอีกทีครับ         อีกจุดที่มีความยุ่งยาก คือการแปลงจากรูปแบบข้อมูล Crosstab Datatable เป็น JSON ตัวช่วยของผมในเรื่องนี้คือ Library ที่ชื่อ Newtonsoft.Json สามารถดาวส์โหลดมาใช้งานผ่าน NuGet ได้เลยครับ จากนั้นก็เรียกใช้งาน ดังตัวอย่าง โดยตัวแปล data คือ Datatable ของเรา เมื่อได้ข้อมูล JSON แล้วให้ทำการสร้าง Web Service เพื่อให้สามารถดึงข้อมูลดังกล่าวจาก Javascript ได้ JsonConvert.SerializeObject(data) ถัดจากนั้น

Read More »

การทดสอบโปรแกรม (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” ทดสอบความถูกต้อง Unit test เป็นการ test functional ของระบบในแต่ละส่วนย่อยๆเพื่อให้แน่ใจว่าแต่ละส่วนทำงานได้ถูกต้อง Integration test เป็นการนำแต่ละ unit มาประกอบกันและทดสอบการติดต่อระหว่าง unit ว่าสามารถทำงานได้ถูกต้อง End to end test เป็นการทดสอบระบบในภาพรวมโดยนำแต่ละส่วนของระบบมาประกอบกันให้สมบูรณ์ และทดสอบระบบประหนึ่งเป็น ผู้ใช้ของระบบ ทดสอบคุณภาพ Stress test เป็นการทดสอบประสิทธิภาพของระบบ เพื่อทดสอบว่าระบบสามารถรับจำนวนผู้ใช้, ข้อมูล ได้มากแค่ไหน Usability test เป็นการทดสอบประสิทธิภาพการใช้งานของระบบ เช่น UI เหมาะสมต่อการใช้งานหรือไม่ เข้าใจได้ง่ายหรือไม่ การทดสอบระบบไม่ว่าที่ไหนก็คงมีวิธีการและขั้นตอนไม่ต่างกันนัก ที่แตกต่างกันคงจะเป็นความเข้มข้นของการ Test เสียมากกว่า คือจะ Test ละเอียดแค่ไหน มีระบบที่ใช้เพื่อการ Test พร้อมหรือไม่ และทีมงานมีความพร้อมแค่ไหน การจะเป็น Tester ที่ดีได้ต้องเข้าใจถึงมาตรฐานต่างๆที่ระบบใช้งาน เพื่อจะได้ทดสอบได้อย่างถูกต้องและแบบมีหลักเกณฑ์ ยกตัวอย่างง่ายๆ หากเป็น Tester ของเว็บไซต์ที่หนึ่ง หากไม่มีความรู้ด้านมาตรฐานหรือด้านเทคนิคเลย จะทดสอบอะไรได้บ้าง? เพียงแต่ click ดูแล้วดูผลลัพธ์ว่าตรงเท่านั้นหรือ?

Read More »

วิธีการทดสอบเว็บไซต์ Responsive บน Smart phone ด้วย Chrome

“ปัจจุบันกระแสการออกแบบเว็บเชิงตอบสนอง (Responsive design) ถูกนำมาใช้ในการออกแบบเว็บสมัยใหม่ เนืองจากสามารถดูได้ทั้งแบบผ่านเครื่องคอม แท็บเล็ต และมือถือ ได้โดยทันที” แต่ในระว่างการออกแบบ ถ้าผู้ออกแบบจะต้องมีการทดสอบบนอุปกรณ์แท็บเล็ต หรือมือถือ ต่างๆ ซึ่งมีความละเอียดของหน้าจอแตกต่างกันออกไป ซึ่งในส่วนที่ Chrome มีเครื่องมือที่ช่วยในการแสดงผลเว็บไซต์บนอุปกรณ์ Smart phone ได้ โดยไม่ต้องโหลดเพิ่ม แต่ประการใด !!! แถมวิธีการก็ง่ายแสนง่าย  ขั้นตอนที่ 1 ให้ไปที่ More tools > Developer tools ดังภาพ ขั้นตอนที่ 2 เลือกที่รูปโทรศัพท์ ดังภาพ ขั้นตอนที่ 3 สังเกต ด้านซ้ายจะปรากฏหน้าจอมือถือขึ้นมา ให้ระบุ URL ที่เราต้องการดังภาพ จากภาพ จะเห็นว่าหากเป็นเว็บที่ออกแบบด้วยหลักการออกแบบเว็บเชิงตอบสนอง (Responsive design) จะมีการจัดหน้าจอให้เหมาะสมกับอุปกรณ์ ขั้นตอนที่ 4 สังเกต ด้านบน เราสามารถเลือกรุ่นของ Smart Phone ได้หลายรุ่น แม้จะไม่มาก แต่ก็เป็นรุ่นหลักและหลากหลายความละเอียด หรือจะเลือกปรับขนาดเองก็ทำได้  และสามารถปรับให้แสดงแนวตั้งและแนวนอนได้อีกด้วย ดังภาพ จะเห็นว่าเครื่องมือด้งกล่าวใช้งานไม่ยาก ทำให้สามารถดูหน้าจอในหลายๆ ความละเอียดได้อย่างรวดเร็ว 

Read More »

ทดสอบการแสดงผลเว็บแอพพลิเคชันง่ายๆ บน Browser ต่างๆ ด้วยบริการของ Modern IE

ในปัจจุบันเว็บแอพพลิเคชันที่มีการพัฒนาจะต้องรองรับ Browser และอุปกรณ์ที่แตกต่างกัน ซึ่งบางครั้งเป็นการยากที่เราจะทดสอบให้ครบได้ จะดีไหมถ้าเราสามารถดูการแสดงผลเว็บแอพพลิเคชันที่พัฒนาว่า หน้าตาเป็นอย่างไรเมื่อแสดงผลบน Browser หรืออุปกรณ์อื่นๆ Microsoft ได้เปิดตัว Modern IE ขึ้น โดยมีบริการที่น่าสนใจที่เรียกว่า Browser screenshots !! ขั้นตอนที่ 1 ไปยัง URL : https://dev.modern.ie/tools/screenshots/ ขั้นตอนที่ 2 ใส่ URL ของเว็บแอพพลิเคชันของเราที่ต้องการ ขั้นตอนที่ 3 กดปุ่ม Enter หรือรูปแว่นขยาย เครื่องมือจะแสดงผลดังภาพ จะเห็นว่าเจ้า Browser screenshots เป็นเครื่องมือที่ช่วยให้เราเห็นหน้าจอเว็บแอพพลิเคชันของเราในเบื้องต้นได้ “หวังว่าจะมีประโยชน์ต่อนักพัฒนาหรือนักทดสอบระบบทุกท่านนะค่ะ”

Read More »