การทำ Partial Rendering สำหรับ User Controls

November 30, 2020 20:44

สำหรับท่านใดที่ยังใช้งาน ASP.NET Web From ในการพัฒนาเว็บไซต์อยู่ คงคุ้นเคยกับการใช้งาน User Controls เป็นอย่างดีเนื่องจากเป็นการสร้าง UI เพื่อใช้งานซ้ำในหลายๆ Page ซึ่งเป็นที่นิยม สำหรับบทความนี้จะแนะนำวิธีการ แยกเรนเดอร์ User Controls ที่มีปัญหาโหลดช้าอันเนื่องมาจากสาเหตุใดก็ตาม และเป็นข้อมูลเพิ่มเติมที่ผู้ใช้ไม่จำเป็นต้องเห็นเป็นอย่างแรก โดยมีขั้นตอนดังนี้ 1.เพิ่ม HTML Container element เช่น Div, Panel ในหน้าจอ ที่ต้องการใช้งาน เช่น 2.เพิ่ม Ajax Controls toolkit : Dynamic Populate ใช้เพื่อ Render HTML หลังจากที่ Page Load เสร็จเรียบร้อย TargetControlsID คือ ID ของ HTML Container element ที่เราต้องการแสดงผล HTML ของ User Controls ที่เราสร้างมาจาก Web Service ServicePath คือ Path ของ Web Service ที่เรียกใช้งาน ServiceMethod คือ Web Method ที่ใช้ Render User Controls UpdatingCssClass คือ CSS Class ที่ต้องการให้แสดงระหว่างรอ Load HTML 3.Java Script เรียกใช้งาน  Ajax Controls toolkit : Dynamic Populate และเพิ่มเติมฟังก์ชันที่ต้องการขณะแสดงผล User Controls 4.สร้าง Web Method สำหรับสร้าง HTML ของ User Controls รูปแบบของ Web Service Method ซึ่งจะต้องมี Return Type เป็น string และรับ Parameter ชื่อ contextKey ซึ่งมี Type เป็น string เช่นกัน เรียก Method ชื่อ RenderUserControl โดยระบุ Path ของ User Control ที่ต้องการ และ List ของ Property ทั้งหมดของ User Control 5.Method ที่ใช้ในการสร้างเนื้อหา HTML จาก User Controls เพียงเท่านี้ เราก็สามารถเรียกใช้งาน User Control นี้ในหน้าจอต่างๆ ได้โดยไม่ต้องกังวลเรื่องเพิ่มเวลาโหลดให้กับหน้าจอแสดงผลนั้นๆแล้วครับ อย่างไรก็ดีบทความนี้ผมได้เขียนไว้นานมากแล้ว แต่ยังไม่ได้นำมาเผยแพร่ ในปัจจุบันอาจมีวิธีการอื่นๆ และ ASP.NET ที่เป็น Web Form อาจจะได้รับความนิยมน้อยลงไปแล้ว แต่สำหรับท่านที่ต้องดูแล และปรับปรุงระบบเก่าๆ ไม่สามารถเขียนขึ้นมาใหม่ทั้งหมดได้ ก็ยังสามารถนำเทคนิคนี้ไปปรับใช้กับระบบของตนเองได้ครับ

Read More »

ทำให้แอปพลิเคชันอ่านหรือสร้าง Barcode ได้ด้วย ZXing (“zebra crossing”)

November 30, 2020 11:14

เนื่องด้วยได้รับโจทย์ให้พัฒนาแอปพลิเคชัน ที่สามารถแสกนบาร์โค้ดได้เมื่อได้ค้นหาดูก็พบชื่อของ Library ที่แรกเริ่มเขียนด้วยภาษา Java และถูก Port ให้รองรับภาษาอื่นๆอีกมากมาย เป็นที่นิยม และเป็น Open Source นั้นคือ ZXing โดยในบทความนี้จะแสดงตัวอย่างวิธีการนำ ZXing.Net.Mobile มาใช้งานร่วมกับ Xamarin.iOS ขั้นตอนการนำมาใช้งาน ตัวอย่างในบทความใช้ Visual Studio 2019 16.8.0 ติดตั้ง Work Load Xamarin.iOS 1.สร้างโปรเจคใหม่โดยเลือก Template ชื่อ iOS App (Xamarin) และกำหนดค่าดังรูป 2. โดยโครงสร้างไฟล์ของโปรเจคมีดังรูป 3. เปิดไฟล์ Main.storybord สร้าง View และเพิ่มปุ่ม btnScanBarcode (สำหรับ Xamarin.iOS บน Windows จะไม่สามารถแก้ไขไฟล์ .storybord ได้แล้วในเวอร์ชันนี้ ต้องทำบน macOS เท่านั้น) 4.ติดตั้ง ZXing.Net.Mobile ผ่าน Nuget Package โดยคลิกขวาที่ชื่อโปรเจค เลือก Manage Nuget Packages ค้นหาคำว่า ZXing เลือก Install 5.สร้าง Controller สำหรับ View ที่ได้สร้างไว้ก่อนหน้านี้ และเพิ่มโค้ดดังนี้ 6. จากนั้นให้เปิดไฟล์ info.plist เพื่อเพิ่มข้อมูลคำอธิบายการขอสิทธิการใช้กล้อง และส่วนอื่นๆที่ ZXing ต้องการดังรูป (ในส่วนคำอธิบายสามารถปรับเปลี่ยนให้ดีกว่านี้ได้) 7.เพียงเท่านี้ก็สามารถกด Run เพื่อทดสอบกับอุปกรณ์ที่เชื่อมต่อได้แล้ว (ไม่สามารถทดสอบบน Simulator ได้เนื่องจากต้องใช้กล้อง) สำหรับบทความนี้ค่อนข้างจำเพาะเจาะจงกับเครื่องมือที่ใช้พัฒนาแอปพลิเคชัน ที่จะต้องเป็น Xamarin.iOS บน Visual Studio เท่านั้น แต่ด้วยชื่อของ ZXing ท่านที่ใช้เครื่องมืออื่นๆสามารถนำไปค้นหาเวอร์ชัน และวิธีการใช้งานสำหรับเครื่องมือนั้นๆเพิ่มเติมได้ อย่างน้อยก็เป็นการแนะนำให้นักพัฒนาที่ได้อ่านบทความนี้ ได้รู้จัก Library ในงานด้านนี้เพิ่มอีก 1 ตัวครับ

Read More »

การเชื่อมต่อ AwesomeTable กับ Google Site

November 30, 2020 10:58

ต่อเนื่องจาก Blog : การใช้งานโปรแกรม AwesomeTable แบบง่ายเมื่อสร้าง AwesomeTable เรียบร้อยแล้ว สามารถนำมาใช้งานบน Google Site ได้ ลองมาดูวิธีการทำกันนะคะ ต้องการนำ AwesomeTable ไปเชื่อมต่อกับ Google site โดยคลิกที่ “EMBED” 2. เลือกแท็บ Direct Link ให้คลิกปุ่ม “Copy” 3. เปิด Google Site ที่ผู้ใช้ต้องการนำ AwesomeTable ไปใช้งาน คลิก “Embed” 4. วาง Embed แล้วคลิกปุ่ม “Insert” 5. ข้อมูล AwesomeTable ที่ได้สร้างไว้ ก็จะมาอยู่ใน Google site ผู้ใช้สามารถปรับการใช้งานได้ เช่น FQAs โดยแบ่งเป็นระบบ ระบบย่อย ซึ่งสามารถค้นหาข้อมูลได้ และหากต้องการเพิ่มข้อมูลต้องไปเพิ่มใน Google Sheet หวังว่า Blog นี้ผู้ใช้จะได้รับความรู้ที่เป็นระบบที่ใช้งานแบบง่ายให้สามารถปรับใช้งานให้เข้ากับที่ต้องการได้ค่ะ

Read More »

การใช้งานโปรแกรม AwesomeTable แบบง่าย

November 30, 2020 10:58

เป็นเว็บที่จัดทำเป็น Data Table มีการใช้งานผ่าน Google sheet ที่มีรูปแบบ Template หลากหลายให้เลือกใช้งานได้ และสามารถนำไปใช้งานกับ Google site ได้ทันที เว็บไซต์ : https://awesome-table.com/สามารถอ่านรายละเอียดจาก AwesomeTable : https://support.awesome-table.com/hc/en-us ตัวอย่างนี้จะเป็นการใช้จาก Template ที่มีให้เลือก ลองมาดูกันเลยว่าทำกันอย่างไร ง่ายๆ ใครๆ ก็ทำได้ค่ะ 1. เข้าเว็บไซต์ : https://awesome-table.com/ เลือก “TEMPLATE GALLERY” 2. แสดง Template ที่ให้เลือกใช้งานได้มากมาย ผู้ใช้สามารถเลือกตัวอย่าง Template ที่รูปแบบลักษณะคล้ายกับงานที่ต้องการ แล้วค่อยมาปรับแก้ เป็นแนวทางที่ใช้งานง่ายที่สุด 3. ตัวอย่างนี้จะใช้ Template ที่มีชื่อว่า “Editable List with Google Forms” 4. แสดงข้อมูลตาม Template ที่ได้เลือกไว้ หากเราต้องการใช้งานให้คลิก “USE TEMPLATE” 5. แสดงตัวอย่างข้อมูล การ Filters ข้อมูลตามรูป หากต้องการปรับแก้ข้อมูล หรือการ Filters สามารถไปปรับได้ที่ Google Sheet คลิก “OPEN” เพื่อไปแก้ไขตามที่ผู้ใช้ต้องการ 6. เมื่อเปิดแล้วจะได้ไฟล์ Google Sheet ดังรูป โดยเราสามารถปรับส่วนของการ Filters ข้อมูลได้ 7. หากต้องการปรับแก้การ Filters ดูตัวอย่างได้จากURL : https://support.awesome-table.com/hc/en-us/articles/115001068189-Filters-select-data-to-displayการ Filter จะมีดังนี้ สามารถศึกษาได้จาก url 1. StringFilter2. NumberRangeFilter3. DateFilter4. CategoryFilter5. csvFilterAnd6. csvFilterOr7. Dependency filters8. Filter captions 8. ตัวอย่างที่นำไปใช้งานกับการทำ FAQs ให้สามารถค้นหาตามระบบ ระบบย่อย หรือคำค้นได้ 9. ตัวอย่างการ Filter ใน Google Sheet

Read More »

แก้ปัญหาอัปโหลด Android App ไม่ผ่านเพราะเปลี่ยนคนอัปโหลด

November 30, 2020 10:37

เคยไหมที่ฝากทีมอื่นที่เขามี account google play console อยู่แล้ว เพื่อฝากอัพเดทแอปที่เราเพิ่ม feature ใหม่ๆของแอปที่เราพัฒนา ตอนนั้นก็ได้ลองผิดลองถูกกันไปเรื่อยๆ เพราะว่าตอนที่เรา build app มันจะสร้าง signing key ในการอัปโหลดที่ผูกติดกับ user ดังนั้นเมื่อเปลี่ยน user ในการอัปโหลดก็ต้องอัปโหลด signing key ใหม่ วันนี้จะมา KM การเปลี่ยน signing key เผื่อใครเคยเจอปัญหาเดียวกัน หน้าจอแสดงการอัปโหลด Android app ไม่ผ่าน เพราะ signing key ไม่ตรงกับ user เก่า โดยเข้าที่เมนู App signing เพื่อดูรายละเอียดเพิ่มเติม หน้าจอแสดงรายละเอียด signing key ที่สามารถอัปโหลดจะเห็นได้ว่า SHA ผูกติดกับ user เก่า ดังนั้นเพื่อแก้ปัญหานี้ เราต้อง Upload certificate ใหม่ โดยที่เราต้องไปที่ project ของเราเพื่อดึงค่า key store ใหม่ โดยใช้คำสั่ง expo fetch android:keystore (คำสั่งขึ้นอยู่กับ project ว่าใช้ Tool อะไร ถ้าใช้ Expo ใช้คำสั่งนี้) ก็จะเห็นค่า Key password ที่เราตั้งไว้ (ขั้นตอนนี้จะได้ไฟล์ .jks) การสร้าง signing key ใหม่ โดยใช้คำสั่ง expo fetch android:upload-cer (ขั้นตอนนี้เราจะได้ไฟล์ .pem) จากนั้นเราเราก็ส่งข้อมูลไฟล์ .pem โดยคลิก https://support.google.com/googleplay/android-developer/contact/key อัปโหลดไฟล์ .pem ใหม่ จากนั้นก็รอ mail แจ้งกลับจาก Google play console เมื่อ approved เรียบร้อยแล้ว เราก็จะอัปโหลดแอปได้ตามปกติ ที่มา : https://support.google.com/googleplay/android-developer/answer/9842756

Read More »