CoP PSU IT Blog – Page 42 – แหล่งรวมบทความเกี่ยวกับ IT โดยชาว PSU IT

การใส่ลายเซ็น (Signature) ในเอกสาร Google Forms

May 30, 2021 09:33

การประยุกต์ใช้ Google forms ในการใช้ทำแบบสอบถาม แบบฟอร์มต่างๆ และให้ผู้กรอกแบบสอบถามสามารถเซ็นชื่อในเอกสาร สามารถใช้เครื่องมือที่ชื่อว่า Signature มาดูกันว่ามีวิธีการอย่างไร 1. เปิด Google Drive เลือกสร้าง Google Forms เพื่อสร้างแบบสอบถาม ดังรูป 2. สร้างแบบสอบถาม ตัวอย่างเป็นฟอร์มรายงานตัวออนไลน์ ที่ให้กรอก ชื่อ-สกุล และเบอร์โทร ดังรูป 5. เมื่อเราสร้างแบบสอบถามเรียบร้อยแล้ว ต่อมาก็มาติดตั้ง Add-ons โดยคลิก “Add-ons” ดังรูป 6. ส่วนนี้จะเป็น Add-ons ของ Google ทั้งหมด ซึ่งหากใครต้องการเลือก Add-ons ที่มาใช้งานก็มาเลือกจากส่วนนี้ได้ แต่ในที่นี่เราจะใช้ Signature เพื่อนำไปใช้เป็นลายเซ็นของเอกสารของเรา เลือกค้นหาคำว่า “Signature” และคลิกเพื่อติดตั้ง ดังรูป 9. เลือก User ที่ต้องการติดตั้ง ดังรูป 11. ติดตั้งเรียบร้อย ไปใช้งานกันเลย คลิก “NEXT” ดังรูป 12. เริ่มใช้งานคลิกเลือก “Signature” ดังรูป 16. คลิก “Submit” ดังรูป 17. คลิก “Confirm” ดังรูป 18. การใช้งานแบบสอบถามที่ต้องการให้มีลายเซ็น จะต้องใช้ลิงก์จากการคลิก “Get Link” เท่านั้น ดังรูป 19. เมื่อนำลิงก์มาใช้งานจะปรากฎดังรูป หากผู้อ่านอยากลองใช้านสามารถทดลองจาก ตัวอย่าง 20. เขียนลายเซ็น และคลิก “บันทึก” ดังรูป 21. เมื่อลงลายเซ็นและบันทึกเรียบร้อยแล้ว จะให้ยืนยันอีกครั้ง คลิก “ยืนยัน” ดังรูป 22. ต้องการกลับไปยังหน้าแบบสอบถาม คลิก “1.คัดลอก” “2.กลับสู่แบบฟอร์ม” ตามลำดับ ดังรูป 23. เมื่อกลับมายังหน้าแบบฟอร์ม ให้วางที่ลายเซ็น จะได้ลิงก์จากที่ Copy ก่อนหน้า ดังรูป 24. เมื่อไปดูจาก Google Sheet จะแสดงลิงก์ที่ช่องของ ลายเซ็น ดังรูป คลิกลิงก์เพื่อไปตรวจสอบการกรอกข้อมูล ดังรูป 25. เมื่อบันทึกเรียบร้อยการแสดงผลจะได้ ดังรูป จากตัวอย่างที่ได้ทำมาทั้งหมด เป็นการประยุกต์ที่แบบง่าย ที่ใครๆ ก็ทำได้ ลองทำกันดูนะคะ

Flutter : ดึงข้อมูลจาก RESTFul API

May 30, 2021 00:26

สำหรับนักพัฒนาแอปพลิเคชันในตอนนี้ คงไม่มีใครไม่รู้จัก Flutter อย่างแน่นอนนะครับ ซึ่งตอนนี้ก็ออกเวอร์ชัน 2.2 มาแล้ว สำหรับผมเองที่เพิ่งเริ่มศึกษาก็ขอเริ่มด้วยการทดสอบดึงข้อมูลจาก API เป็นอย่างแรกนะครับ เพราะแอปพลิเคชันสำหรับใช้งานด้านต่างๆ ในองค์กรมักจะต้องใช้ข้อมูลจากฐานข้อมูล โดยการเชื่อมต่อผ่าน API เป็นหลักครับ ขั้นตอนการติดตั้งบน Windows และเตรียมเครื่องมือสามารถอ่านได้ที่ https://flutter.dev/docs/get-started/install/windows ในบทความนี้ผมใช้ Visual Studio Code นะครับโดยติดตั้ง Extention เพิ่มเติมดังนี้ เปิด Visual Studio Code คลิกเมนู View > Command Palette พิมพ์ “install”, จากนั้นเลือก Extensions: Install Extensions. พิมพ์ “flutter” เลือก install พิมพ์ “dart” เลือก install เมื่อติดตั้งเสร็จเรียบร้อยจะมีรายการ Extention ดังรูปครับ จากนั้นทำการสร้างโปรเจค ดังนี้ครับ คลิกเมนู View > Command Palette พิมพ์ “flutter”, จากนั้นเลือก Flutter:New Application Project จะได้โปรเจคที่มีโครงสร้างไฟล์ดังรูปครับ สำหรับท่านใดที่อยากเห็นหน้าตาแอปพลิเคชันเริ่มต้น ให้เปิด USB Debuging ที่มือถือให้เรียบร้อย ต่อเข้ากับคอมพิวเตอร์ จากนั้นที่มุมขวามือล่างของ Visual Studio Code ให้เลือกชื่อมือถือของท่าน จากนั้นกด F5 ได้เลยครับ ในการเชื่อมต่อกับ API เราจะต้อง import package เพิ่มโดยพิมพ์คำสั่งที่ terminal > cmd ดังรูปครับ จากนั้นแก้ไขในไฟล์ main.dart โดยเริ่มจากการ import ดังนี้ครับ ด้านล่างเป็น Code ที่เชื่อมต่อ API โดยใช้ http.get เพื่อดึงข้อมูลแบบ Get จากนั้นก็ return ค่า response โดยใช้ประเภท Future เทียบกับภาษาอื่นๆ ประเภทข้อมูลนี้ก็คือ CallBack นั้นเองครับ เอาไว้อ่านค่าที่ได้จาก api เมื่อได้ข้อมูลมาแล้ว (ในอนาคต ไม่รู้ตอนไหน เมื่อเสร็จจะบอก ประมาณนั้น) ซึ่งข้างในเป็นค่าประเภท dynamic ที่ได้จาก jsonDecode ตรงนี้เป็นการสร้าง Widget สำหรับแสดงข้อมูลเป็นแถวๆ ต่อไปก็จะเป็น Main Function ที่มีการประกาศ state เพื่อเก็บข้อมูลไว้แสดงผลในรูปแบบ ListView เมื่อได้ข้อมูลจาก API มาแล้วนะครับ เมื่อ Run ดูก็จะได้หน้าตาประมาณนี้ครับ เรียกได้ว่าสัมผัสแรกกับ Flutter รู้สึกประทับใจทั้งในด้าน Extension ที่มีใน Visual Studio Code ให้ความรู้สึกไม่ต่างจากการพัฒนาด้วย .Net Framwork เพราะสามารถ Debug ได้ มี Intellisense ครบถ้วน ในด้าน Syntax เนื่องจากเป็นภาษาใหม่ยังต้องทำความเข้าใจอีกพอสมควร ในด้านการออกแบบ UI สำหรับท่านใดที่เคยใช้ React Native มาน่าจะพอเข้าใจ Concept ของ View Widget (เทียบเท่า Component) ได้ไม่ยากนัก ถ้าหากได้นำมาใช้ในงาน Production จริงๆ แล้วจะนำประเด็นที่น่าสนใจอื่นๆมาแชร์กันเพิ่มเติมครับ อ้างอิง https://flutter.dev/docs/get-started/codelab https://flutter.dev/docs/cookbook/networking/fetch-data

การสร้าง Dashboard บน Azure DevOps

May 29, 2021 23:45

เวลานี้ไม่ว่าจะไปที่ไหน เรามักจะได้ยินคำว่า “Dashboard” บ่อยมาก แล้ว Dashboard มีประโยชน์และสร้างอย่างไร วันนี้เรามีวิธีการสร้าง Dashboard ง่ายๆ เพื่อใช้ในการติดตามโครงการมานำเสนอค่ะ โดยจะใช้เครื่องมือที่เรียกว่า Azure DevOps โดยเราต้องสร้างโครงการบน Azure DevOps ก่อนนะคะ (ครั้งหน้าจะมาแนะนำการสร้างโครงการบน Azure DevOps รอติดตามกันนะคะ) หลังจากสร้างโครงการบน Azure DevOps แล้ว ในการบริหารโครงการจะมีการแบ่งงานออกเป็น Work Item ในแต่ละ Work Item ก็จะมีการมอบหมายงานหรือ Assigned ให้กับผู้ร่วมโครงการแต่ละคน จากนั้นจะมีการติดตามว่าได้ดังเนินการไปถึงไหน ใช้เวลาเท่าไหร่ ตัวอย่างการสร้าง Work Item ตามภาพ ข้างล่าง เมื่อมีการมอบหมายงานเรียบร้อย เราก็สามารถติดตามสถานะการดำเนินงานต่างๆ ได้ โดยการสร้าง Dashboard ซึ่งให้เลือกโครงการที่ต้องการติดตาม จากนั้นไปที่ “Dashboards” และกดปุ่ม “New Dashboard” ซึ่งจะมี Template หลากหลายรูปแบบให้เลือก ตามภาพข้างล่าง ตัวอย่าง เช่น หากต้องการทราบว่า มีงานใดที่มอบหมายให้ตัวเองและยังไม่ได้ทำให้เสร็จสิ้นบ้าง ให้เลือก Template Assigned to Me แล้วกดปุ่ม Add ผลลัพท์จะได้ตามภาพข้างล่าง หากต้องการดูผลการดำเนินงานของโครงการก็สามารถเลือก Template เป็น Burndown ซึ่งจะได้ผลลัพท์ดังข้างล่าง หากต้องการดู Dashboard ผลการดำเนินงานของโครงการ ไม่ว่าจะเป็น การแบ่งงานในแต่ละ Work Item หรือระยะเวลาผู้ที่ได้รับมอบหมายดำเนินการในแต่ละ Work Item ของโครงการ เราสามาถสร้าง Dashboard โดยเลือก Template เป็น “Chart for Work Items” และกำหนด รายละเอียดที่เราต้องการ เช่น ประเภทของ Chart เป็นต้น ตามภาพข้างล่าง นอกจากนี้ยังสามารถสร้าง Dashboard จาก Query ที่เราได้สร้างไว้เพื่อให้ได้ Dashboard ตามที่เราต้องการ ตัวอย่างเช่นการส้ราง Dashboard จาก Query ที่ชื่อ Completed Task และ All Work Item ที่ได้สร้างไว้ ตามภาพข้างล่าง Dashboard เวลาที่ใช้ในการดำเนินการของแต่และคนตามที่ได้รับมอบหมายและจำนวนเวลาที่ใช้ทั้งหมดในโครงการ Dashboard จำนวน Work Item ที่แต่ละคนได้รับมอบหมายและจำนวน Work Item ทั้งหมดในโครงการ ไม่ว่าจะเป็นระดับ Task, User Story หรือ Feature ตัวอย่างการสร้าง Query เพื่อดูรายละเอียดของการดำเนินการทุกขั้นตอน (Work Item Type) และทุกสถานะ (State) เมื่อ Run query จะได้ผลลัพท์ตามภาพข้างล่าง เป็นไงบ้างคะ ไม่ยากเลยใช่มั้ย หวังเป็นอย่างยิ่งว่าคงมีประโยชน์กับท่านผู้อ่านทุกท่าน นะคะ ขอบคุณที่ติดตามค่ะ

Blazor : การเรียกใช้ JavaScript จาก C#

May 29, 2021 22:22

ถ้าจะพูดว่า “Blazor เป็น SPA Framework ที่ใช้ C# แทน JavaScript” ก็ไม่ถูกต้องเสียทีเดียว เนื่องจากว่า JavaScript เป็นภาษาที่มีมานานแล้ว และใช้งานกันอย่างแพร่หลาย สามารถใช้ทำอะไรได้อย่าง แต่ Blazor นั้นถือได้ว่าเป็นน้องใหม่เพิ่งเข้าวงการ ที่บางครั้งก็ยังต้องพึ่งรุ่นพี่อย่าง JavaScript อยู่ดี ตัวอย่างเช่น การดึงข้อมูลพิกัดตำแหน่ง (Location) จาก Browser สามารถทำได้ด้วย JavaScript แต่ C# ทำไม่ได้ ดังนั้น Blazor ก็เลยจัดการกับปัญหานี้โดยการให้ C# ทำงานร่วมกับ JavaScript ซะเลย อะไรที่ C# ทำไม่ได้ ก็ให้ JavaScript ทำแทนไปเลย ตัวอย่างแอพต่อไปนี้จะเป็นการเรียกใช้ Bootstrap modal หลังจากที่สร้าง Blazor Server App Project ตามขั้นตอนใน Blog(เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)) แล้ว ทำตามขั้นตอนดังนี้ 1. เปิดไฟล์ _Host.cshtml2. เขียนโค้ดอ้างอิง jquery.min.js และ bootstrap.min.js3. เขียนโค้ดฟังก์ชั่น toggleModal เพื่อสั่งเปิดปิด Modal 4. เปิดไฟล์ Index.razor5. Inject JSRuntime 6. สร้างปุ่มสำหรับคลิกเพื่อเปิด Modal โดยใส่ onclick event ให้เรียกฟังก์ชั่น ShowModal7. สร้าง Bootstrap modal กำหนด id=”exampleModal”8. โค้ด C# ฟังก์ชั่น ShowModal สั่งเปิด Modal 9. กด F5 เพื่อดูผลลัพธ์ เพียงเท่านี้ก็จะสามารถเรียกใช้งาน JavaScript ผ่าน C# ได้แล้ว จะเห็นว่ามันไม่ได้ยากอย่างที่คิด

Checker Plus for gmail ~ ชีวิตที่ง่ายขึ้น

May 29, 2021 21:32

สวัสดีท่านผู้อ่านทุกท่าน … Blog วันนี้ผู้เขียนจะขอนำเสนอ Extension ที่มีชื่อว่า Checker Plus for gmail ซึ่งมีไว้สำหรับช่วยเพิ่มความสะดวกสบาย (หรือไม่ก็ช่วยเพิ่ม level ความขี้เกียจ อันนี้ก็ไม่แน่ใจนะ 55+) คำถามถัดมา แล้วมันน่าสนใจตรงไหน ? ก็ต้องขอบอกก่อนว่าคงเป็น Extension อีกตัวที่เหมาะกับการทำงานของหลายๆ ท่าน ที่ในแต่ละวันต้องเช็ค Email ตอบกลับ รับแจ้งปัญหา ต่างๆนาๆ อยู่เป็นประจำ เช่น งานบริการถาม-ตอบปัญหา ให้กับลูกค้า ดังเช่นผู้เขียน เป็นต้น เจ้า Checker Plus for gmail ก็จะถือว่าค่อนข้างสะดวกมากเลยแหละ สำหรับคนที่อยากเช็ค Email แต่ไม่อยากเปิด Tab ใหม่ ดังนั้นเมื่อเราติดตั้งเจ้า Extension ตัวนี้ไว้ ทุกครั้งที่เราจะเช็ค Email ก็สามารถกดที่ Checker Plus ที่เราติดตั้งได้เลย มันก็จะแสดง Email ทั้งหมดในกล่อง Inbox ของเรานั่นเองงงงง วิธีการก็ง่ายมากๆ ปะ … เรามาเริ่มกันเล้ย ขั้นตอนที่ 1 ในหน้า Browser google chrome เข้าไปที่ More tool –> เลือก Extensions ขั้นตอนที่ 2 จากนั้นให้เข้า Open Chrome web store ค้นหาคำว่า “Checker Plus for gmail” ขั้นตอนที่ 3 เราก็มาเริ่มต้นการติดตั้งกันเลย คลิก “Add to chrome” ขั้นตอนที่ 4 เมื่อติดตั้งสำเร็จ ให้สังเกตุมุมบนด้านขวาของ Browser ได้เลย แท่น แท่น แท๊นนน … สีแดงๆ นั่นแหละ พระเอกของเราในวันนี้ ขั้นตอนที่ 5 ลองคลิกเข้าไปดูได้เลย เราก็จะเห็น Inbox ใน gmail ของเราทั้งหมด หลังจากนี้เราก็ไม่ต้องมานั่งกังวลอีกต่อไป ว่าต้องเปิด Tab ใหม่ทุกครั้งที่ต้องการเช็ค Email เป็นยังไงกันบ้างเอ่ย ผู้เขียนว่ามันอำนวยความสะดวกสำหรับงานของตัวผู้เขียนเองมากๆ จึงอยากจะมาแนะนำให้ทุกๆ คนได้ทดลองใช้งานกันดู และก็หวังเป็นอย่างยิ่งว่า Blog นี้จะยังคงมีประโยชน์สำหรับผู้อ่านทุกท่าน ไม่มากก็น้อย เน้อออออ … ขอขอบคุณข่าวสารดีๆ จาก : https://www.techhub.in.th/