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


    เวลานี้ไม่ว่าจะไปที่ไหน เรามักจะได้ยินคำว่า “Dashboard” บ่อยมาก แล้ว Dashboard มีประโยชน์และสร้างอย่างไร  วันนี้เรามีวิธีการสร้าง Dashboard ง่ายๆ เพื่อใช้ในการติดตามโครงการมานำเสนอค่ะ โดยจะใช้เครื่องมือที่เรียกว่า Azure DevOps โดยเราต้องสร้างโครงการบน Azure DevOps ก่อนนะคะ (ครั้งหน้าจะมาแนะนำการสร้างโครงการบน Azure DevOps รอติดตามกันนะคะ) หลังจากสร้างโครงการบน Azure DevOps แล้ว ในการบริหารโครงการจะมีการแบ่งงานออกเป็น Work Item ในแต่ละ Work Item ก็จะมีการมอบหมายงานหรือ Assigned ให้กับผู้ร่วมโครงการแต่ละคน จากนั้นจะมีการติดตามว่าได้ดังเนินการไปถึงไหน ใช้เวลาเท่าไหร่ ตัวอย่างการสร้าง Work Item ตามภาพ ข้างล่าง เมื่อมีการมอบหมายงานเรียบร้อย เราก็สามารถติดตามสถานะการดำเนินงานต่างๆ ได้ โดยการสร้าง Dashboard ซึ่งให้เลือกโครงการที่ต้องการติดตาม จากนั้นไปที่ “Dashboards” และกดปุ่ม “New Dashboard” ซึ่งจะมี Template…

    >> Read More <<

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


    ถ้าจะพูดว่า “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…

    >> Read More <<

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


    สวัสดีท่านผู้อ่านทุกท่าน … Blog วันนี้ผู้เขียนจะขอนำเสนอ Extension ที่มีชื่อว่า Checker Plus for gmail ซึ่งมีไว้สำหรับช่วยเพิ่มความสะดวกสบาย (หรือไม่ก็ช่วยเพิ่ม level ความขี้เกียจ อันนี้ก็ไม่แน่ใจนะ 55+) คำถามถัดมา แล้วมันน่าสนใจตรงไหน ? ก็ต้องขอบอกก่อนว่าคงเป็น Extension อีกตัวที่เหมาะกับการทำงานของหลายๆ ท่าน ที่ในแต่ละวันต้องเช็ค Email ตอบกลับ รับแจ้งปัญหา ต่างๆนาๆ อยู่เป็นประจำ เช่น งานบริการถาม-ตอบปัญหา ให้กับลูกค้า ดังเช่นผู้เขียน เป็นต้น เจ้า Checker Plus for gmail ก็จะถือว่าค่อนข้างสะดวกมากเลยแหละ สำหรับคนที่อยากเช็ค Email แต่ไม่อยากเปิด Tab ใหม่  ดังนั้นเมื่อเราติดตั้งเจ้า Extension ตัวนี้ไว้ ทุกครั้งที่เราจะเช็ค Email ก็สามารถกดที่ Checker Plus ที่เราติดตั้งได้เลย มันก็จะแสดง…

    >> Read More <<

  • เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)


    หากคุณเป็นนักพัฒนาเว็บแอพที่ชอบฟังเพลงยุค 90 คุณก็คงจะคุ้นเคยกับ Multiple Page Applications (MPA) เป็นอย่างดี  MPA หรือเว็บแบบดั้งเดิมนั้นสามารถสังเกตุได้จากการที่เราคลิกดูข้อมูล หรือเปลี่ยน URL หน้าเว็บจะโหลดใหม่ทั้งหน้า เพื่อดึงข้อมูลมาแสดงผลใหม่ใน Browser ดังรูป ทุกวันนี้ก็ได้มีอีก Trend หนึ่งที่น่าสนใจ และมีการนำมาใช้สร้างเว็บแอพกันอย่างแพร่หลาย นั่นก็คือ Single Page Application หรือ SPA  โดยเว็บแบบนี้จะทำการโหลดหน้าเว็บจาก Request ครั้งแรกเท่านั้น หลังจากนั้นจะเป็นการรับส่งข้อมูลกันโดยใช้ JavaScript เข้ามาช่วย ทำให้ลดการ Reload หน้าเว็บโดยไม่จำเป็นลงไปได้ ข้อดีของเว็บแบบนี้คือ มี User Experience ที่ดีกว่า ตอบสนองได้อย่างรวดเร็ว และลดการทำงานของฝั่ง Server  ตัวอย่างเว็บไซต์แบบ SPA ที่เราใช้งานกันอยู่บ่อยๆ ได้แก่ Facebook, Instagram, Twitter, Google Mail เป็นต้น ตัวอย่างของ SPA…

    >> Read More <<

  • การสร้างแบบสอบถามอย่างง่ายจาก Mentimeter


    การสร้างแบบสอบถามอย่างง่ายโดยใช้เครื่องมือที่ชื่อว่า Mentimeter ลองมาดูกันว่าวิธีการง่าย ทำกันอย่างไร เข้าใช้งานไปที่ เว็บไซต์ https://www.mentimeter.com/ เมื่อเข้ามาให้คลิก “Sign up” เพื่อเข้าสู่ระบบ 2. จะแสดงหน้าให้ Create a free account แบบง่าย ก็ให้เลือกผ่าน Facebook หรือผ่าน Google ดังรูป 3. ในตัวอย่างโดยใช้ Facebook ดังรูป 4. เมื่อ Login เข้ามาแล้วจะเจอประเภทที่ให้เลือก ในตัวอย่างนี้จะใช้แบบ “Workshops” 5. ให้เลือกรูปแบบของการใช้งาน ตัวอย่างนี้เลือกแบบ Free โดยคลิก “Continue with free“ 6. เลือก “+New presentation“ 7. จะมีประเภท (Type) ให้เลือก ตัวอย่างนี้เลือกแบบ “Word Cloud“ 8. สามารถสร้างคำถาม ตัวอย่างถามว่า…

    >> Read More <<

  • ตัดต่อ clip video อย่างง่าย ด้วย App Photos บน Windows10


    จากบทความที่แล้วได้แนะนำ “การบันทึกหน้าจอคอมพิวเตอร์ Xbox Game Bar บน Windows10” ไปแล้ว ก็ถึงขั้นตอนการตัดต่อกันบ้าง ซึ่ง Windows10 ก็มี App ที่ทุกคนใช้งานกันอยู่เป็นประจำ นั้นก็คือ Photos หลายคนคงใช้ App Photos ใช้สำหรับดูรูปภาพเท่านั้น แต่รู้หรือไม่ว่ามันสามารถสร้าง ตัดต่อ ใส่ข้อความ ใส่เสียง และลูกเล่นต่าง ๆ ให้กับ clip ของของคุณได้อีกด้วย เริ่มต้นใช้งาน• พิมพ์ Photos ตรงช่องค้นหาด้านซ้ายของหน้าจอ แล้วเลือกเมนู • เมื่อเปิด App Photos ขึ้นมาคลิก New video และเลือก New video project • ใส่ชื่อ Name your video • เลือกไฟล์จากเครื่องของคุณโดยไปที่ +Add และเลือก From…

    >> Read More <<

  • การย่อ-ยุบแถวข้อมูลบน GridView โดยประยุกต์ใช้ร่วมกับ jQuery และ Collapse ใน Bootstrap (C#)


               จากความเดิมตอนที่แล้ว เราได้พูดถึงวิธีการจัดการข้อมูลจำนวนมากด้วยการจัดกลุ่มหมวดหมู่ของข้อมูลใน GridView กันไปแล้ว ซึ่งหากผู้อ่านท่านใดต้องการทราบวิธีการจัดหมวดหมู่สามารถตามดูเนื้อหาในบทความได้จาก การจัดหมวดหมู่แถวของข้อมูลบน GridView ด้วย C# และในส่วนของบทความนี้จะเป็นเนื้อหาต่อยอดการทำงานจากการจัดหมวดหมู่ดังกล่าว โดยเพิ่มความสามารถให้หมวดหมู่หรือกลุ่มเหล่านั้นสามารถย่อ-ยุบได้ เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการดูข้อมูลแยกส่วนกันชัดเจนมากยิ่งขึ้น หรือเพื่อตอบโจทย์ให้กับผู้ใช้บางท่านที่อาจมีความต้องการดูข้อมูลทีละส่วนได้ โดยจะนำ Component ที่ชื่อว่า Collapse ใน Bootstrap มาประยุกต์ใช้ในการแสดงผลร่วมกับ GridView และยังมี jQuery มาเป็นอีกหนึ่งตัวช่วยเพื่อให้สามารถแสดงผลตามที่ต้องการได้ โดยการอธิบายในบทความนี้ ทางผู้เขียนจะขอตัดตอนในส่วนของรายละเอียดขั้นตอนวิธีการจัดหมวดหมู่ไป และข้ามมาพูดถึงขั้นตอนที่ต้องจัดทำเพิ่มเติมในการทำย่อ-ยุบเลยละกันนะคะ            ก่อนจะไปเริ่มในส่วนของการเขียนโค้ด เรามาทำความรู้จักกับ ค่าที่จำเป็นต้องใช้ในการระบุให้กับแถวหลัก(parent)เพื่อให้สามารถย่อยุบได้ กันก่อนนะคะ data-toggle=”collapse” data-target=”.multi-collapse” เพื่อกำหนด target ที่เราต้องการให้ย่อยุบได้ โดยใช้สไตล์ชีทเป็นตัวช่วยเพื่อแยกแต่ละกลุ่มออกจากกัน ซึ่งในที่นี้จะตั้งชื่อสไตล์ชีท multi-collapse ตามด้วยรหัสของประเภทกลุ่มนั้น โดยต้องระบุสไตล์ชีทนี้ให้กับแถวย่อย(child)ด้วย aria-controls=”demo1 demo2 demo3 demo4 demo5” เพื่อกำหนดพื้นที่ที่จะย่อยุบ โดยสามารถกำหนดได้มากกว่า 1 พื้นที่ ซึ่งจะแยกด้วยการเว้นวรรคชื่อ id ของแถวย่อย(child)…

    >> Read More <<

  • งานกราฟฟิกฟรี ถูกลิขสิทธิ์มีอยู่จริง


    ปัจจุบันงานกราฟฟิกได้เข้ามามีบทบาทมากมายในด้านการโฆษณา การขาย การออกแบบและดีไซน์ผลงานต่างๆ รวมถึงการนำมาใช้พัฒนาระบบ หรือ แอพพลิเคชันต่างๆมากมายโดยมาจากการใช้ชุดอักขระ (Font) หรือรูปภาพ Vector ต่างๆมาเป็นส่วนประกอบ เราจะเห็นได้ว่าส่วนใหญ่แล้วเป็นงานลิขสิทธิ์ทั้งสิ้น การที่จะนำมาใช้งานได้ต้องมีการซื้อ License การใช้งานหรือการขออนุญาตจากเจ้าของผลงานก่อน จะทำยังไงหละถ้าเราอยากใช้งานแบบถูกลิขสิทธิ์แถมไม่ต้องจ่ายเงินสักบาท เว็ปไซต์ Creative Market https://creativemarket.com/ เป็นอีกหนึ่งเว็ปไซต์ที่รวบรวมงานศิลปะ, งานกราฟฟิก Vector, Font, Template สำหรับงานออกแบบ, Template สำหรับการสร้างเว็ปไซต์, รูปถ่าย หรือจะเป็น Brush หัวพู่กันในโปรแกรมต่างๆ มารวมไว้เป็น Market ของนักออกแบบหลายๆคนรวมอยู่ในเว็ปไซต์ เราสามารถเข้าไปกดซื้อ แล้วนำมาใช้งานได้เลย สะดวกรวดเร็ว เชื่อถือได้ แต่ แต่ แต่ ไหนบอกว่าฟรีหละ ทาง Creative Market ได้มีการทำระบบ Free Goods of the Week https://creativemarket.com/free-goods ซึ่งจะนำงานกราฟฟิกต่างๆในระบบแจกฟรีๆ สัปดาห์ละ 6 รายการ…

    >> Read More <<

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


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

    >> Read More <<