Author: sirapat.s

  • วิธีการติดตั้ง SDK Sentry บน Platforms .NET (Asp.Net)

    sirapat.s

    Step 1 ลง Sentry.AspNet

    ผ่าน NuGet Package Manager โดยใช้คำสั่ง

    Install-Package Sentry.AspNet -Version 3.20.1

    Step 2 Create project ผ่าน Sentry

    เลือก Server เป็น ASP.NET และตั้งชื่อ aspnet-e-admission จากนั้น ก็กดปุ่ม Create Project

    เมื่อกดสร้างเรียบร้อยแล้ว จะเห็น Project ชื่อ aspnet-e-admission ตามรูป

    เมื่อคลิกดูรายละเอียด จะแสดงดังภาพ

    Step 3 Project Settings>Client Keys

    นำค่า DSN ที่อยู่ในส่วน Client Keys ไปใช้งานต่อในส่วนของตั้งค่า Web.config

    ศึกษาวิธีการตั้งค่า SDK Sentry บน Platforms .NET

    Step 1 ตั้งค่า Web.config

    เพิ่ม key “SentryDsn” และค่า value ได้มาจาก Project Settings>Client Keys

    Step 2 ตั้งค่า Global.asax.cs

    2.1 เรียก library sentry ที่ต้องใช้งาน

    2.2 ตั้งค่า Application_Start

    2.3 ตั้งค่า Application_BeginRequest

    2.4 ตั้งค่า Application_EndRequest

    2.5 ตั้งค่า Application_Error

    2.6 ตั้งค่า Application_End

    Step 3 ทดสอบรันเวบ และเปิด projects ใน Sentry

    เมื่อทดสอบรันเวบ ระบบรับสมัครนักศึกษาออนไลน์ (PSU Admission) จะเห็น Latest Releases ถ้าเลขเวอร์ชันตรงกับที่รัน แสดงว่าติดตั้งสำเร็จ

    หวังว่า km จะมีประโยชน์ไม่มากก็น้อยนะคะ

    ที่มา https://docs.sentry.io/platforms/dotnet/guides/aspnet/

  • เขียน JavaScript RegExp กับข้อมูล sensitive ให้แสดง 4 ตัวอักษรสุดท้าย

    sirapat.s

    เขียน JavaScript กับข้อมูลที่ sensitive โดยใช้ RegExp เพื่อแสดงบางส่วน เนื่องจากทางผู้เขียนได้รับ requirement ให้ปรับปรุงข้อมูลที่อ่อนไหว ให้แสดงบางส่วน อย่างเช่น เลขบัตรประชาชน

    โดยก่อนอื่นจะอธิบายความหมายสัญลักษณ์ RegExp ตัวอย่างเช่น

    สัญลักษณ์ความหมาย
    .หาตัวอักษรเดียวและยกเว้น newline หรือ line terminator
    เช่น คำว่า “Thailand Finland” หากใช้ pattern /./ จะได้ผลลัพธ์ “T”
    n{X}นับจำนวนอักษรทั้งหมดตามจำนวน X ตัวอักษร
    เช่น คำว่า “Thailand Finland” หากใช้ pattern /.{4}/ จะได้ผลลัพธ์ “Thai”
    ?=nหาตัวอักษรทั้งหมดทีมี n
    เช่น คำว่า “Thailand Finland” หากใช้ pattern /.(?=land)/ จะได้ผลลัพธ์ “i”
    gหาตัวอักษรที่ตรงทั้งหมดและจะหยุดเมื่อเจอผลลัพธ์แรก
    เช่น คำว่า “Thailand Finland” หากใช้ pattern /.(?=land)/g จะได้ผลลัพธ์ “i,n”

    จากตัวอย่างคำว่า “Thailand Finland” หากใช้ pattern /.(?=.{4})/g จะได้ผลลัพธ์ “T,h,a,i,l,a,n,d, ,F,i,n”

    จากตัวอย่างคำว่า “1234567890123” หากใช้ pattern /.(?=.{4})/g จะได้ผลลัพธ์ “1,2,3,4,5,6,7,8,9”

    จากนั้นใช้ function replace()

    Note: To replace all matches, use a regular expression with a /g flag (global match)

    จากรูป แสดงการเขียน JavaScript แสดงบางส่วนโดยที่แสดง 4 ตัวอักษรสุดท้าย ส่วนอักษรอื่นเปลี่ยนเป็น x
    ผลลัพธ์จากการใช้งานจริง

    หวังว่า km จะมีประโยชน์ไม่มากก็น้อยนะคะ

    ที่มา https://www.w3schools.com/jsref/jsref_obj_regexp.asp

  • สร้าง script comments column จาก table ไป view อัตโนมัติใน oracle

    sirapat.s

    การเขียน comment ของ column view อัตโนมัติผ่านการสร้าง sql script ใน oracle โดยการนำ comment ของ column table มา generate comments ของ column view นั้น เพื่อประหยัดเวลาและไม่ต้องเขียน comment ซ้ำอีกรอบในการสร้าง view

    จะยกตัวอย่างการใช้งาน โดยเลือก view V_MAJOR_FOR_API ที่ไม่มี comments โดยที่ view V_MAJOR_FOR_API มีการเรียกใช้ตาราง MAJOR, ตาราง MAJOR_TYPE และ ตาราง DEPT ที่มีการเขียน comments ของ column table อยู่แล้ว

    ตาราง MAJOR ที่มี comments
    ตาราง MAJOR_TYPE ที่มี comments
    ตาราง DEPT ที่มี comments
    view V_MAJOR_FOR_API ที่ไม่มี comments

    ขั้นตอนที่1 จัดทำ sql script เพื่อสร้าง comments ของ column view

    SELECT ud.name                                view_name,
       ud.referenced_name                     based_table,
       vcols.column_name,
        NVL (tcom.comments, vcom.comments)     comments
   FROM all_dependencies  ud,
       all_tab_columns   vcols,
       all_tab_columns   tcols,
       all_col_comments  tcom,
       all_col_comments  vcom
 WHERE     ud.referenced_name = tcom.table_name
       AND ud.name = vcom.table_name
       AND vcols.table_name = ud.name
       AND vcols.owner = ud.owner
       AND vcols.column_name = vcom.column_name
       AND vcols.column_name = tcols.column_name
       AND tcols.owner = ud.owner
       AND tcols.table_name = ud.referenced_name
       AND tcols.column_name = tcom.column_name
       AND vcom.owner = ud.owner
       AND tcom.owner = ud.owner
       AND ud.name = 'V_MAJOR_FOR_API'
       AND ud.TYPE = 'VIEW'
       AND ud.referenced_type IN ('TABLE', 'VIEW')
       AND tcom.comments IS NOT NULL;
    ผลลัพธ์จาก sql query ข้างบน

    ขั้นตอนที่ 2 จัดทำ format sql script เพื่อสร้าง comment ของ column view ตามรูปแบบ “COMMENT ON COLUMN V_MAJOR_FOR_API .MAJOR_TYPE IS ‘รหัสประเภท’;“ โดยเขียน sql script จากข้างบนมาจัดการต่อ

    SELECT    'COMMENT ON COLUMN '
       || ud.name
       || '.'
       || vcols.column_name
       || ' IS '''
       || NVL (tcom.comments, vcom.comments)
       || ''';'    comments
  FROM all_dependencies  ud,
       all_tab_columns   vcols,
       all_tab_columns   tcols,
       all_col_comments  tcom,
       all_col_comments  vcom
 WHERE     ud.referenced_name = tcom.table_name
       AND ud.name = vcom.table_name
       AND vcols.table_name = ud.name
       AND vcols.owner = ud.owner
       AND vcols.column_name = vcom.column_name
       AND vcols.column_name = tcols.column_name
       AND tcols.owner = ud.owner
       AND tcols.table_name = ud.referenced_name
       AND tcols.column_name = tcom.column_name
       AND vcom.owner = ud.owner
       AND tcom.owner = ud.owner
       AND ud.name = 'V_MAJOR_FOR_API'
       AND ud.TYPE = 'VIEW'
       AND ud.referenced_type IN ('TABLE', 'VIEW')
       AND tcom.comments IS NOT NULL;
    ผลลัพธ์จาก sql query ข้างบน

    ขั้นตอนที่ 3 จากนั้นก็ Copy script จากขั้นตอนที่ 2 ไป execute script และจะได้ผลลัพธ์ตามภาพด้านล่าง

    view V_MAJOR_FOR_API ที่มี comments จากการสร้าง script
    • ข้อเสีย จะเห็นว่า MASTER_MAJOR_NAME_THAI และ MASTER_MAJOR_NAME_ENG ใช้ไม่ได้เนื่องจาก ชื่อ column ไม่ตรงกับตารางที่เรียก

    หวังว่า km จะมีประโยชน์ไม่มากก็น้อยและสามารถช่วยลดระยะเวลาในการทำ document นะคะ

  • แก้ปัญหาการเรียกใช้ font ผ่าน css แล้วเกิด error Access to font at has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

    sirapat.s

    เนื่องด้วยทางทีมงานต้องการใช้ font ผ่าน css ที่อยู่คนละที่ โดยต้องการให้ไปเรียกที่เดียวเพื่อการจัดการง่าย แต่ปัญหาก็เกิดขึ้น เพราะทางต้นทางมีการ block ไม่ให้เข้าถึง วันนี้จึงมีแนวทางการแก้ปัญหาดังนี้

    ขั้นตอนที่ 1 ไปตั้งค่าไฟล์ font ที่ต้องการ โดยในที่นี้ เป็น folder fonts โดยไปที่ IIS เลือก folder ที่ต้องการ จากนั้นเลือกเมนู “HTTP Response Headers” จากนั้น กด “Add” ดังรูป

    ขั้นตอนที่ 2 เพิ่ม Name: Access-Control-Allow-Origin และ Value: * ดังรูป

    ขั้นตอนที่ 3 ผลลัพธ์จากการเพิ่ม Name: Access-Control-Allow-Origin และ Value: * ดังรูป

    ขั้นตอนที่ 4 เพิ่ม Name: Access-Control-Allow-Origin และ Value: * ที่ไฟล์ font.css ด้วยเหมือนกัน

    ขั้นตอนที่ 5 ปรับแก้การเรียกใช้ css โดยใช้ SRI Hash Generator ผ่าน SRI Hash Generator

    ขั้นตอนที่ 6 เวบไซต์ปลายทางก็จะสามารถเรียกใช้ font จาก เวบไซต์ต้นทาง ดังรูป

    หวังว่าจะเป็นประโยชน์ให้กับคนที่มีปัญหาแบบเดียวกันนี้นะคะ

    ที่มา

  • upgrade crystal report version 10 ไปเป็น version 13

    sirapat.s

    เนื่องด้วยตอนนี้ crystal report version 10 มันเก่ามากแล้วทางผู้เขียนเลยอยากจะ upgrade crystal report version 10 ไปเป็น version 13 ดังนั้นจึงสรุปขั้นตอนไว้เพื่อเป็นแนวทางการทำงานของคนที่มีปัญหาเดียวกัน ดังนี้

    ขั้นตอนที่ 1 แก้ web.config ใน project web application โดยเปลี่ยนเลข version จาก 10.2.3600.0 เป็น 13.0.2000.0

    ขั้นตอนที่ 2 copy folder crystalreportviewers13 ใส่ไว้ที่ project web application

    ขั้นตอนที่ 3 แก้ page ที่เรียกใช้ crystal report โดยเปลี่ยนเลข version จาก 10.2.3600.0 เป็น 13.0.2000.0

    ขั้นตอนที่ 4 แก้ page ที่เรียกใช้ crystal report โดยเพิ่มการเรียก JavaScript ในส่วนของ tag head

    ขั้นตอนที่ 5 ลองเรียกใช้ page ที่มี crystal report ได้ผลลัพธ์ดังรูป

    ทางผู้เขียนหวังว่าจะมีประโยชน์ในการ upgrade crystal report version 10 ไปเป็น version 13 ใน source code ที่เรียกใช้ version เก่านะคะ

  • สร้าง Modal dialog อย่างง่ายด้วย jquerymodal

    sirapat.s

    เนื่องจากตอนนี้มีพรบ.คอมพิวเตอร์เข้ามาเกี่ยวข้อง จึงต้องมี pop up Modal dialog ถามผู้ใช้ วันนี้จะมาแนะนำการใช้งาน jQuery ที่เรียกใช้ไม่กี่บรรทัดเราก็ได้ Modal dialog โดยจะยกตัวอย่าง Modal dialog แบบไม่ให้ปิดได้ โดยต้องอ่านข้อความก่อน ถึงจะปิดได้

    ขั้นตอนที่ 1 เพิ่ม jquery.min.js, jquery.modal.min.js, jquery.modal.min.css เพื่อเรียกใช้งาน

    <!-- Remember to include jQuery :) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javascript"></script>
    <!-- jQuery Modal -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" />

    ขั้นตอนที่ 2 เพิ่มการตั้งค่า Modal dialog ตามตัวอย่างไม่ให้แสดงปุ่ม “ปิด”

     <script type="text/javascript">
        $(document).ready(function () {
            $("#ex1").modal({
                escapeClose: false,
                clickClose: false,
                showClose: false,
                fadeDuration: 100
            });
        });

    </script>

    ขั้นตอนที่ 3 เพิ่ม User interface Modal dialog โดยใช้ tag div

    ขั้นตอนที่ 4 ได้ผลลัพธ์ Modal dialog ออกมาอย่างสวยงาม

    ที่มา : https://jquerymodal.com

  • เขียนโค้ดแก้ปัญหา browser block popup แบบง่ายๆ ใช้งานได้จริง

    sirapat.s

    เดี๋ยวนี้การเปิดหน้าเวบของผู้ใช้งานทั่วไปมักใช้มือถือแทนคอมพิวเตอร์แล้ว แล้วตอนนี้ browser ทั่วไปจะทำการ block popup JavaScript ใน function window.open ดังนั้นทำให้ง่ายที่สุดคือใช้ link ให้เป็นประโยชน์ โดยใช้ properties href ในการเรียกใช้ตามโค้ดตัวอย่างข้างล่างนี้

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

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

    sirapat.s

    เคยไหมที่ฝากทีมอื่นที่เขามี 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

  • ทำ functional design อย่างง่ายด้วยโปรแกรม Sandcastle Help File Builder

    sirapat.s

    เมื่อพัฒนาโปรแกรมเสร็จแล้ว ก็ถึงเวลาทำเอกสารการเขียนอธิบายโค้ดต่อ บางครั้งมันยุ่งยากเสียเวลา วันนี้มีวิธีที่สะดวกและรวดเร็วเพียงแค่เขียนอธิบายใน Class ที่เราต้องการอธิบาย เช่น Constructors, Properties, methods

    ตัวอย่างการเขียนอธิบายโค้ด

    โดยทั่วไปแล้วการเขียน Logic ต่างๆ เพื่อนำไปใช้งานต่อหรืออ้างอิงโค้ดที่เราเขียนมักจะ build code เป็นไฟล์ .dll เพื่อให้ระบบอื่นมาเชื่อมต่อและเรียกใช้งานได้ โดยขั้นตอนแรกเราใช้โปรแกรม Sandcastle Help File Builder สามารถอ่านรายละเอียดเพิ่มเติมตามลิ้งก์ https://github.com/EWSoftware/SHFB/releases และ download และติดตั้งตามลิ้งก์

    SHFBInstaller_v2019.11.17.0.zip 45.1 MB

    เมื่อติดตั้งเสร็จเรียบร้อย หน้าตาก็จะประมาณนี้

    โปรแกรม Sandcastle Help File Builder

    ก่อนอื่นเราต้องไปตั้งค่าการ build code ใน Visual Studio ในส่วนของ XML ตามไฮไลต์สีเหลือง

    การตั้งค่า XML ใน Visual Studio

    จากนั้นก็กด Build ใน Visual Studio

    แสดงการ Build ใน Visual Studio

    เมื่อ build เสร็จ เราจะได้ไฟล์ .dll และ .xml

    ไฟล์ .dll และ .xml

    เมื่อได้ไฟล์ .dll และ .xml เรียบร้อยแล้ว ก็เพิ่มในโปรแกรม Sandcastle Help File Builder โดยไปที่เมนู File > Project Explorer > Documentation Sources > Add Documentation Source

    เมนูการเพิ่ม Add Documentation Source

    เมื่อเลือกไฟล์ .dll และ .xml เรียบร้อยแล้ว ผลลัพธ์ที่ได้แสดงตามภาพ

    แสดงผลลัพธ์เมื่อ Add Documentation Source เสร็จ

    จากนั้นตั้งค่าเมนู Help File ตามตัวอย่างข้างล่าง

    ตั้งค่าเมนู Help File

    จากนั้นตั้งค่าเมนู Visibility ตามตัวอย่างข้างล่าง

    ตั้งค่าเมนู Visibility

    เมื่อตั้งค่าโปรแกรมเสร็จเรียบร้อยแล้ว ไปที่เมนู Documentation > Build Project

    เมนู Documentation > Build Project

    รอโปรแกรมประมวลผลสักครู่ เราก็จะได้ไฟล์ .chm ออกมา

    ไฟล์ .chm

    เมื่อเปิดไฟล์ .chm เราก็จะได้ผลลัพธ์ Help File ตามรูปแบบที่แสดงตามภาพด้านล่าง

    ผลลัพธ์ Help File 1
    ผลลัพธ์ Help File 2
    ผลลัพธ์ Help File 3
    ผลลัพธ์ Help File 4