• สร้างเงาให้กับวัตถุด้วย SmoothShadow


    Layer of shadows คือจำนวนชั้นของเงา ปกติโดยทั่วไปเราจะใช้งานกันประมาณ 1-2 layer ซึ่งจำนวนของชั้นเงานี้จะสัมพันธ์กับตัวปรับแต่งด้านล่าง เช่นในรูปตั้งไว้ที่ 4 layers หรือเงา 4 ชั้น เราก็จะสามารถปรับกราฟการไล่เงาซึ่งจะแบ่งไว้ 4 ช่วงของแสงไล่ตั้งแต่ขาวไปดำ 4 ระดับ ถ้าปรับเป็น 7 layers ระบบก็จะซอยช่วงเทาเพิ่มมามากขึ้น ก็จะไล่จากขาวไปดำ 7 ระดับ Final transparency คือความเข้ม/ความโปร่งใสของเงา ค่ายิ่งน้อยเงาของเราจะยิ่งโปร่งแสง(จางขึ้น) ค่ายิ่งมากเงาของเราก็จะยิ่งทึบแสง(เข้มขึ้น) ส่วนของกราฟจะแสดงถึงการไล่แสงของเงา โดยเราจะสามารถดึงจุดวงกลมสีชมพูได้ เพื่อปรับความโค้งของกราฟ เงาก็จะมีการไล่แสงที่ต่างกันออกไป และส่วนของ Reverse alpha คือการกลับกันของเงา ไล่จากขาวไปดำ Final vertical distance คือการไล่แสงในแนวตั้ง ซึ่งจะสามารถไล่แสงได้แค่ทิศทางเดียวคือ แสงจากบนลงล่าง เงาด้านล่างของวัตถุ ยิ่งเพิ่มค่ามากเงาก็จะเพิ่มมาด้านล่างมากขึ้น ค่าลดลงเงาในแนวตั้งก็จะน้อยลง ส่วนกราฟจะแสดงปริมาณของเงาในแต่ละ layer สามารถดึงวงกลมสีชมพูเพื่อปรับแต่งได้ Final blur strength…

    >> Read More <<

  • สร้างข้อความแจ้งเตือนด้วย Blazored Toast


    ข้อความแจ้งเตือนการดำเนินการต่าง ๆ ไม่ว่าจะเป็นข้อความ Success, Error, Warning หรือ Information ภายในแอพ เป็นอีกหนึ่งฟังก์ชั่นที่มีการนำมาใช้งานบ่อยๆ เพื่อทำให้ระบบน่าใช้งานมากยิ่งขึ้น ในการเขียนแอพด้วย Blazor ก็มีของฟรีให้ติดตั้งและใช้งานได้เลย ชื่อว่า Blazored Toast ซึ่งเป็น JavaScript ที่ได้รับการ Implement ให้ใช้งานกับ Blazor ได้ ตัวอย่างการใช้ Blazored Toast ก่อนอื่นให้สร้าง Blazor Server App Project ตามขั้นตอนใน Blog(เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)) ก่อน จากนั้นทำตามขั้นตอนดังนี้ ติดตั้ง Blazored Toast ผ่าน NuGet package manager 1. คลิกเมนู Project 2. คลิก Manage NuGet Packages…

    >> Read More <<

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


    การประยุกต์ใช้ 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. ติดตั้งเรียบร้อย…

    >> Read More <<

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


    สำหรับนักพัฒนาแอปพลิเคชันในตอนนี้ คงไม่มีใครไม่รู้จัก 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 ดังรูปครับ จากนั้นทำการสร้างโปรเจค ดังนี้ครับ คลิกเมนู…

    >> Read More <<

  • การสร้าง 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 <<