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

เนื่องด้วยตอนนี้ 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 เก่านะคะ

Read More »

สร้าง UI หน้าเว็บแบบ Timeline ด้วย HTML+CSS

เนื่องจากระบบที่กำลังพัฒนาอยู่ มีความต้องการแสดงผลข้อมูลในรูปแบบ Timeline ดังรูป เมื่อลองหาแนวทางดูพบว่ามี how to ที่เว็บไซต์ https://www.w3schools.com/howto/howto_css_timeline.asp ลองนำมาประยุกต์ใช้ โดยปรับสี เพิ่มเงา และส่วนแสดงผลรูป และไอคอนเข้าไป โดยใช้ https://getbootstrap.com/ เวอร์ชัน 5 เพื่อช่วยในการจัดตำแหน่งเนื้อหาด้านใน ก็จะได้ CSS และ HTML สำหรับนำไปใช้ในเว็บไซต์ดังนี้ HTML โดยในตัวอย่างได้นำโครงสร้าง html page และ ส่วนแสดงอีโมไอคอนออกเพื่อให้อ่านง่าย เห็นโครงสร้าง html ของ timeline ชัดเจน และต้องมีรูปอยู่ที่โฟลเดอร์ images (ภาพประกอบเนื้อหาของท่านเอง) ก็จะได้หน้าเว็บใกล้เคียงความต้องการ ดังรูปตัวอย่างนะครับ สามารถนำไปปรับใช้ โดยการปรับแก้ css และเพิ่มเติมส่วนแสดงผลอื่นๆได้ตามต้องการ

Read More »

UX Design Processes

สวัสดีครับ วันนี้เราจะมาว่ากันด้วยเรื่องของ การออกแบบสินค้าและบริการที่ตอบโจทย์และดีต่อผู้ใช้ การสร้างสินค้าและบริการจะต้องประกอบไปด้วยการออกแบบทางด้านประสบการณ์ของผู้ใช้ หรือ UX เพราะทุกสิ่งที่ถูกคิดค้นหรือสร้างขึ้นล้วนต้องผ่านการคิด วิเคราะห์ สร้างเพื่ออะไร ทำไปทำไม ตอบโจทย์อะไรกับผู้ใช้ ซึ่งการออกแบบมีด้วยกัน 6 ขั้นตอนหลักๆดังนี้ Step 1 : Understanding Environment (Discovery phase) เป็น phase แห่งการทำความเข้าใจ การทำความเข้าใจในที่นี้หมายถึง การที่เราเข้าใจผู้ใช้, เข้าใจ brand, เข้าใจในเงื่อนไขต่างๆ เพื่อที่จะเอามาเป็นแนวทางในการทำ research ให้ phase ถัดไป User การทำความเข้าใจผู้ใช้งานระบบ -> Pain Point discovery การค้นหา Pain point ของผู้ใช้ เราต้องเข้าใจว่าปัญหาของผู้ใช้คืออะไรบ้าง เราคิดว่าจะแก้ไขปัญหาให้กับผู้ใช้ได้อย่างไรบ้าง Brand เป้าหมาย/จุดประสงค์ขององค์กร เราต้องรู้โปรเจคนี้มีความเกี่ยวข้องกับภารกิจหรือเป้าหมายขององค์กรเราอย่างไร ต้องพยายามยึดติดอยู่กับเป้าหมายขององค์กรเพราะมันจะเป็นสิ่งที่ทำให้องค์กรประสบความสำเร็จได้ Clear Needs & Conditions ความต้องการและเงื่อนไขที่ชัดเจน เราจะทำอะไร เราต้องทำภายใต้เงื่อนไขอะไรบ้าง Step 2 : Research (Infomation Gathering, Hypothesis phase) เมื่อเราทราบถึงเป้าหมายของการสร้างหรือพัฒนาสินค้าและทราบถึงปัญหาของผู้ใช้แล้ว ขั้นต่อไปคือการค้นหาข้อมูลเพิ่มเติม phase นี้จึงเป็น phase แห่งการค้นคว้า เก็บข้อมูลตั้งต้นเพื่อที่จะนำมาวิเคราะห์ในขั้นตอนต่อไป การ research มีด้วยกันหลายวิธี Interview การสัมภาษณ์ 1:1 Interview การสัมภาษณ์ตัวต่อตัวกับผู้ใช้ จะเป็นเหมือนการพูดคุยทั่วไปถึงเรื่องการใช้งานระบบ เคยเจอปัญหาอะไรมาบ้าง ยังคงติดปัญหาในจุดไหนอยู่ไหม ในการใช้งานระบบเขามองหาอะไรอยู่ การสัมภาษณ์แบบตัวต่อตัวทำให้ทราบถึงความจริงใจและอารมณ์ของผู้ใช้ สามารถนำมาเป็นตัววัดความเที่ยงตรง เชื่อถือได้ของข้อมูลชุดนั้น การสัมภาษณ์แบบนี้สามารถทำแบบพูดคุยตัวต่อตัวหรือทาง meeting/conference/telephone ก็ได้ Group Interview การสัมภาษณ์แบบกลุ่ม เป็นวิธีการที่ให้ข้อมูลได้แบบไม่ค่อยละเอียด แต่ได้จุดที่สำคัญ มีการกรองกันจากการพูดคุยภายในกลุ่ม ลักษณะการถามก็จะเป็นเหมือนการสัมภาษณ์แบบตัวต่อตัว การสัมภาษณ์ด้วยวิธีนี้อาจจะต้องนำข้อมูลมาวิเคราะห์ค่าเฉลี่ยเพิ่มขึ้นมา กลุ่มของผู้ใช้ 3-5 คนก็เพียงพอไม่จำเป็นต้องไปเก็บจากผู้ใช้ 100-1000 คน (Rule of thumb) Surveys การทำแบบสอบถาม ในการสร้างแบบสอบถามขึ้นมา เราต้องรู้ถึงปัญหาของผู้ใช้ ปัญหานี้เกิดในผู้ใช้กลุ่มไหน แล้วนำข้อมูลนั้นมาวิเคราะห์ออกมาเป็นสมมติฐาน หลักการสร้างแบบสอบถาม แยกปัญหาออกมา โดยดูความสำคัญว่า ปัญหาอันไหนสามารถวัดและทำ Testing ได้แล้วนำมาทำให้เป็นคำถามแบบที่ Interactive ได้ พยายามตั้งคำถามปลายเปิดแต่ยังสามารถทำให้เรามองเห็นคำตอบได้ *ไม่ควรตั้งคำถาม Yes/No, Rating เนื่องจากไม่สามารถนำข้อมูลมาพัฒนาต่อได้ ตัวอย่างของการทำ survey ที่ดี Hypothesis: สงสัยว่าหน้าแรกของระบบมันไม่จูงใจผู้ใช้ ทำให้ผู้ใช้ออก (nothing grabs user’s attention) วิธีถาม: 5seconds test นำหน้าเว็ปจริงๆมาและใช้ Heat map ในการวิเคราะห์โดยกำหนดโจทย์ว่า ให้ผู้ประเมินคลิกจุดแรกที่ผู้ใช้สนใจภายใน 5วินาที คำตอบ: Heat map result ผู้ใช้สนใจตรงไหนมากที่สุด สามารถนำข้อมูลมาวิเคราะห์ต่อได้ Hypothesis: ข้อสงสัยที่คิดว่าลูกค้าไม่เข้าใจว่าเค้าทำอะไรได้บ้างบนเว็ปไซต์ของเขา วิธีถาม: 5seconds test ดูหน้าเว็ปแล้วถามว่า คิดว่าหน้านี้เขาสามารถทำอะไรได้บ้าง คำตอบ: ลำดับของความชัดเจนว่า ผู้ใช้สนใจอะไรเป็นอันดับแรก และอันดับตามๆมา Hypothesis: สงสัยว่า content มันน่าจะไม่ดึงดูดผู้ใช้แน่ๆ วิธีถาม: นำเว็ปไซต์คู่แข่งมาเปิดคู่กันกับเว็ปไซต์เราและทำในลักษณะของ A/B testing โดยทำ hot spot test ให้ผู้ประเมินเลือก section ของเว็ปตัวอย่าง 3 ชิ้นที่คิดว่าจำเป็นสำหรับเขา คำตอบ: section ที่เขามองหาแต่เราไม่มี หรือจุดไหนที่มีเหมือนกัน หรือจุดไหนที่เรามีแต่คนอื่นไม่มี ข้อดี:: Scale ได้, รวดเร็ว, วิเคราะห์ง่าย ข้อเสีย:: คำตอบอาจจะมีการเอนเอียงได้ (Bias) ไม่สามารถอธิบายแทนสิ่งที่ผู้ใช้เจอมาได้ทั้งหมด คำตอบที่ได้ไม่หลากหลาย และมีความเสี่ยงต่อการสูญเสียข้อมูลจากผู้ใช้ ถ้ามีการออกแบบแบบสอบถามไม่ดี ทำให้เกิดการพลาดโอกาส Usability Testing การสำรวจการใช้งานในกลุ่มเป้าหมาย การทำ

Read More »

Figma: Scrolling  with overflow behavior (Horizontal Scrolling)

บล๊อกนี้ผู้เขียนจะมาแนะนำวิธีการตั้งค่า Mobile App Prototype ที่เราได้พัฒนาขึ้นมา (ด้วย figma) เพื่อให้ผู้ใช้สามารถเลื่อน (Scrolling) ส่วนของเนื้อหาที่มีมากจนเกินขนาดของอุปกรณ์ได้ โดยใน figma นั้น สามารถทำ Scrolling เพื่อให้รองรับกับพฤติกรรมของผู้ใช้ได้ 3 แบบ ดังนี้ค่ะ แบบที่ 1 Horizontal Scrolling  คือ การเลื่อนในแนวนอน ซ้ายและขวาภายในเฟรม โดยยังคงตำแหน่งแนวตั้งไว้ เช่น ภาพสินค้า , แกลอรี่ภาพ แบบที่ 2 Vertical Scrolling คือ การเลื่อนในแนวตั้ง ขึ้นและลงภายในเฟรม เช่น เลื่อนดูเว็บไซต์ที่มีขนาดยาว หรือเนื้อหาที่อยู่ภายในแอป แบบที่ 3 Horizontal & Vertical Scrolling คือ การเลื่อนในแนวนอนและแนวตั้ง ผู้ใช้สามารถเลื่อนไปในทิศทางใดก็ได้ภายในเฟรม เช่น การดูแผนที่ สำหรับบล๊อกนี้นั้น ผู้เขียนขอยกเอา Horizontal Scrolling มาแนะนำกันก่อนนะคะ ขั้นตอนหลักๆของการทำ Scrolling ก็มีตามนี้ค่าาาาา กดเลือก frame ที่ต้องการทำ Scrolling (ต้องเป็น Frame นะคะ จึงจะกำหนด Scrolling ได้) เปิด panel Prototype ที่แถบด้านขวา เลือก overflow behavior ตามที่ต้องการ ซึ่งมี 4 ตัวเลือกนะคะ คือ No Scrolling Horizontal Scrolling ** Vertical Scrolling Horizontal & Vertical Scrolling Horizontal Scrolling ผู้ใช้เลื่อน content ซ้ายและขวาภายใน frame วิธีการดูในคลิปได้เลยค่า ในคลิปวินาทีที่ 0:00:11 ทำ Group ให้เป็น frame (คลิกขวาบน Group แล้วเลือก Frame Selection) อย่างที่บอกกันข้างต้น เนื่องจากหากไม่ใช่ frame จะกำหนด Scrolling ไม่ได้วินาทีที่ 0:00:11 ปรับขนาดของ frame และ ซ่อนเนื้อหาที่เกินกรอบ โดยติ๊กถูกที่ Clip Contentวินาทีที่ 0:00:25 ไปที่ prototype panel แล้วกำหนด Overflow scrolling แบบ Horizontal scrollingวินาทีที่ 0:00:34 กด Present ลองดูผลลัพธ์กัน 😉 Ref : https://help.figma.com/hc/en-us/articles/360039818734-Prototype-scrolling-with-overflow-behavior

Read More »

การประยุกต์ใข้  Sequence เพื่อสร้างตัวเลขอัตโนมัติให้กับ Table ใน Oracle Database

ก่อนหน้านี้เคยได้รับความต้องการจากระบบหนึ่งซึ่งเป็นระบบที่รับสมัครนักเรียนเพื่อเข้าศึกษาต่อในมหาวิทยาลัยโดยมีความต้องการข้อหนึ่งว่า “ในส่วนการจัดเก็บข้อมูลเลขที่สมัคร ให้รันข้อมูลเลขที่ผู้สมัครตามโครงการที่เปิดรับในแต่ละปีการศึกษา” เนื่องในการพัฒนาระบบนี้ มีการใช้ Oracle Database ในการจัดการฐานข้อมูลอยู่แล้ว เพื่อน ๆ ที่เคยทำงานกับ Oracle Database ก็จะทราบว่าเราสามารถใช้ Oracle Sequence  เพื่อสร้างตัวเลขอัตโนมัติได้ ดังนั้นเราจึงสามารถที่จะใช้ Oracle Sequence มาประยุกต์ใช้เพื่อที่จะรันเลขที่ผู้สมัครได้ โดยสามารถมั่นใจได้ว่าจะไม่เกิดปัญหาผู้สมัครได้ข้อมูลเลขที่สมัครเดียวกัน กรณีที่ทำการสมัครในโครงการเดียวกันเรียนพร้อม ๆ กันอย่างแน่นอน วิธีการดำเนินการก็ไม่ยุ่งยากแค่สร้าง sequence ตามโครงการและปีที่เปิดรับทั้งหมดไว้ให้ก่อนให้เรียบร้อยและเมื่อนักศึกษามาสมัครก็สามารถเรียกใช้ได้เลย ตามวิธีการข้างต้นก็ไม่น่าจะมีปัญหาอะไร แต่ก็เริ่มมีคำถามในใจ ถ้าโครงการนั้นไม่มีผู้สมัครเลย ถ้าดำเนินการสร้างไว้ก่อนก็เปลืองเปล่า ๆ หรือถ้าลืมสร้างของบางโครงการ ระบบต้องเกิดข้อผิดพลาดแน่นอน จึงเกิดแนวคิดใหม่แทนที่จะสร้างไว้ก่อน เปลี่ยนเป็นสร้าง sequence ตอนที่นักเรียนสมัครในโครงการนั้น ๆ ดีกว่า โครงการไหนไม่มีการสมัครก็ไม่ต้องสร้าง และไม่เกิดปัญหาสร้าง sequence ไม่ครบในทุกโครงการแน่นอน คราวนี้ถึงเวลาที่เราจะมาดำเนินการกันแล้วค่ะ โดยมีขั้นตอนคร่าว ๆ ดังนี้คือ ตรวจสอบก่อนว่ามีการสร้าง sequence ของโครงการนั้น ๆ หรือยังถ้ายังไม่มีการสร้างก็ให้ทำการสร้าง และเมื่อถึงเวลาที่มีการสมัครก็สามารถเรียกใช้ sequence เพื่อออกเลขที่ผู้สมัครได้เลยค่ะ ขั้นตอนที่ 1 ตรวจสอบว่ามีสร้าง sequence หรือยัง โดยเราสามารถตรวจสอบได้จาก object : user_sequences ตามตัวอย่าง Oracle Function ดังต่อไปนี้     FUNCTION CountSequence (var_seq_name IN VARCHAR2)         RETURN NUMBER     IS         var_seq_count   NUMBER := 0;         var_seq_query   VARCHAR2 (1000);     BEGIN         var_seq_query :=                ‘SELECT COUNT (*) FROM user_sequences WHERE sequence_name = ”’             || var_seq_name             || ””;         EXECUTE IMMEDIATE var_seq_query             INTO var_seq_count;         RETURN var_seq_count;     END; ขั้นตอนที่ 2 ทำการสร้าง sequence ตามหลักการการตั้งชื่อ ตามตัวอย่าง Oracle Procedure ดังต่อไปนี้ PROCEDURE CreateSequence (var_seq_name IN VARCHAR2)     IS         var_seq_count   NUMBER := 0;     BEGIN         var_seq_count := CountSequence (var_seq_name);         IF var_seq_count = 0         THEN             EXECUTE IMMEDIATE   ‘CREATE SEQUENCE ‘                              || var_seq_name                              || ‘ START WITH 1 INCREMENT BY 1 MINVALUE 1 MAXVALUE 9999999                                          NOCACHE NOCYCLE’;         END IF;     END; ขั้นตอนที่ 3 เมื่อทำการสร้าง sequence เสร็จเรียบร้อย เราสามารถดึงค่าถัดไปของลำดับด้วยคำสั่ง nextval การออกเลขที่ผู้สมัครให้กับนักเรียน ซึ่งจะถูกเก็บไว้ที่ตัวแปร var_app_no โดยมีความยาวขนาด

Read More »