การใช้ SendGrid Email Template (Part 1)

Part 2: การใช้ SendGrid Email Template บน .Net Core Web API คลิก

บทความนี้จะเกี่ยวกับการสร้าง Email Template บน SendGrid Portal นะครับ

ก่อนจะเริ่ม เรามาทำความรู้จัก SendGrid สักหน่อยว่ามันคืออะไร?

SendGrid คือ cloud-base SMTP provider (เข้าใจง่ายๆคือ service ไว้ส่ง Email นั้นล่ะ) เราไม่ต้องทำ SMTP เอง ตัวนี้จัดการให้หมด มี Features ต่างๆให้ใช้เยอะมาก เสียอย่างเดียว ต้องเสียตังจ้าา แต่แบบฟรี ก็มีนะ 555+

สามารถเข้าไปดูรายละเอียดเพิ่มเติมได้ที่นี่

หลังจากสมัคร SendGrid Account และ สร้าง API Key เสร็จเรียบร้อยแล้ว เรามาเริ่มหัวข้อแรกกันเลย

การสร้าง SendGrid Email Template

1. Login เข้า SendGrid Portal
2. คลิกที่เมนูทางซ้ายมือ เลือก “Templates/Transactional”

3. คลิกปุ่ม “Create Template” และใส่ชื่อ Email Template ให้เรียบร้อย หลังจากนั้น คลิกปุ่ม “Save”

4. คลิกปุ่ม “Add Version” เลือก “Design Editor” และ คลิกปุ่ม “Continue”

5. เราก็จะมาถึงหน้าสร้าง Email Templates ดังรูปด้านล่าง

ซึ่งในหน้านี้เราสามารถ Custom Email Template ได้หลายแบบเช่น

• Email Template Name
• Email Name
• Sender Email
• การจัดวาง Email Layout
• การเพิ่มข้อความ รวมไปถึง การจัดข้อความ เพิ่มตาราง ฯลฯ จากแถบเมนู “Build” และ แถบเมนู Editor ด้านบน

การสร้าง Layout SendGrid จะใช้รูปแบบของ<table>

การ Binding Data จาก Web API เพื่อแสดงบน Email Template SendGrid ใช้ Handlebars.js และ JSON object เช่น ใส่ {{Name}} ใน Email Template ขณะเดียวกัน JSON object ที่ใช้ จะเป็นดังรูปด้านล่าง

สมมุติว่าเราจะสร้าง Email Template ที่เป็นใบเสร็จรับเงิน โดย้ตั้งชื่อ Email ว่า “Receipt Demo” ไม่เน้นสวยงามนะครับ 555

โดยหน้าตาที่ได้ออกมา ประมาณนี้

ใน Design Editor Layout แปลกๆ อย่าได้ตกใจไป ให้กดปุ่ม “Preview” ด้านบน

Preview โหมดแล้วดีขึ้นมาหน่อย แหะๆ ในโหมดนี้เราสามารถดูได้ทั้งแบบจอ PC และ Mobile Device นะครับ หรือ Pain Text ก็ได้

จาก Email Template ด้านบน เราก็จะได้ รูปแบบ JSON file ที่จะต้องใช้ประมาณนี้

หลังจากได้ JSON format ที่จะใช้แล้ว เรามาลองใช้งานบน Email Template กัน

โดยคลิกที่เมนู “Preview/Show Test Data” แล้วเรานำ JSON Format ไปใส่ไว้ทางซ้ายมือแล้วลองใส่ Data ดู

สังเกตว่า เมื่อ Handler.js systax เจอ object ที่เป็น array อย่าง “ReceiptItems” จะแสดงไม่ถูกต้อง เราจึงต้องใช้ feature ของ Handler.js เข้ามาช่วยอย่างคำสั่ง {{#each xxx}} เพื่อ list data ใน array object ขึ้นมาโชว์บน Email Temaplate

วิธีเพิ่มคำสั่ง ให้เรากลับไปหน้า สร้าง Email Template และคลิกเครื่องหมาย “<>”

หน้าต่าง Code Module จะปรากฎขึ้นมา โดยจะมี HTML code ตามที่เราได้สร้าง Layout ไว้ ให้เราใส่ Handler.js ตรงตำแหน่งที่เราต้องการ เช่น ในแต่ละแถวของตารางอยากให้แสดง data ใน ReceiptItems array

เมื่อเพิ่มเรียบร้อยแล้วคลิกปุ่ม “Update”

จะปรากฎ Handler.js แบบนี้

หลังจากนั้นเรานำ Test Data มาลองใส่ดู จะเป็นอย่างไร

ถ้าเกิด Test Data ที่ Assume ไว้ไม่แสดง ให้เรากลับมาเปิดดู HTML ที่ Code Module อีกครั้ง หากเจอปัญหาแบบรูปด้านล่าง ???

วิธีแก้ไขมีดังนี้

1. Save Email Template ปัจจุบัน
2. กลับไปที่หน้าหลักของ Transactional Template
3. ไปที่ Section ของ Email Template ที่มีปัญหา คลิก “Actions/Export HTML” และดาวน์โหลดไฟล์ให้เรียบร้อย

4. เพิ่ม Version Email Teamplate ใหม่ โดยเลือก “Code Editor Mode”

5. ระบุชื่อ Email ในเมนู “Setting” ทางซ้ายมือ

6. นำ HTML code จากไฟล์ที่ Export ไว้มาใส่ไว้บนหน้าต่าง Code Editor และแก้ไข Handler.js syntax ให้เรียบร้อย ดังรูปด้านล่าง

ซ้ายคือ Code Editor ขวาคือ Preview

6. นำไปทดสอบกับ Test Data โดยในที่นี้ได้เพิ่มจำนวน ReceipItems > 1

Test Data

Preview Test Data Result

ในที่สุดข้อมูลก็แสดงถูกต้อง Email Template นี้ พร้อมใช้งานแล้ว

หลังจากนี้อย่าลิม Save Template ด้วยนะครับ หายนี่เงิบเลยยย….

ใน Part 2 จะเกี่ยวกับการใช้งาน Email Template บน .Net Core Web API อย่าลืมไปติดตามอ่านด้วยนะครับ ขอบคุณครับ