[Workshop]ย้ายจาก nodemailer มาใช้ sendgrid กันนิ

สวัสดีครับเพื่อน ๆ ชาว dev วันนี้อยากมาแชร์การใช้ SendGrid เป็นตัว mail service provider ของ Twilio

!painpoint ที่ทำให้ตัดสินใจย้ายมาคือมีปัญหาในการ send mail ในตอนที่เป็น dev site และ production site โดยตอน dev บน localhost สามารถใช้งาน nodemailer / nestmailer ได้อย่างดี (ไม่ได้มีเจตนาโจมตี lib ที่กล่าวถึงแต่อย่างใด) แต่เมื่อใช้บน dev & prod เกิดปัญหาที่ google เปลี่ยน policy ใหม่ของการ dev คือ ฟังก์ชัน less secure ไม่มีอีกต่อไป ละด้วยหากใช้ mail จากเจ้าอื่น(ที่ไม่ใช่ google mail) ก็จะถูก block ทำให้ส่ง mail ไปไม่ถึง… ที่มามันก็เป็นมาอย่างนี้ละฮ่ะ

Workshop นี้ใช้ Nestjs, Typescript นะจ๊ะ

Follow the trail, developer!

เริ่มที่ตัว Sendgrid กันก่อน เมื่อเพื่อนๆ register และเลือก plan การใช้งานแล้ว จะเจอหน้า console

Sendgrid console index page

step1: การ verify mail (sender)ที่จะใช้ส่ง

สังเกตเมนูข้างซ้ายเลือก Setting > Sender Authentication > Verify a Single Sender

*ถ้าลงทะเบียนสมบูรณ์จะขึ้น status ว่า “Verified”

Step2: จัดการกับ API

2.1 สังเกตเมนูข้างซ้ายเลือก Email API > Choose Web API

Choose Email API plane

Select implementation language

2.2 workshop นี้ใช้ Node.js น้าาา

Create API Key

2.3 ใส่ ชื่อ API key ตามต้องการ จากนั้นกด Create key => ระบบจะ gen key ให้

API Key

2.4 เลื่อนมาล่างสุด ติ๊ก checkbox และกด Next:verify Integration

wait for test

2.5 จบใน step ของ sendgrid

* Overview next step: รอเราเขียนโค้ด Nestjs (server), และเมื่อพร้อมให้เรากด Verify integration แล้วยิง service บน server

Step3: Implement Nestjs Application

Github: Github

lib ที่ใช้ implement เจ้า sendgrid

*ตัว nestjs/config เอาไว้ดึง env เน่อ

npm i @anchan828/nest-sendgrid
npm i --save @nestjs/config

ty & ref: https://www.npmjs.com/package/@anchan828/nest-sendgrid

3.1 ทำการ regis sendgrid จาก lib และ config ด้วย apikey

sendmail.module.ts

3.2 สร้าง .env กับ env_variable ที่ต้องใช้

• from email: ได้จากตอน verify sender (step1)
• sendgrid apikey: ได้จากตอน gen email api (step2)

.env

3.3 สร้าง api route ([POST] “<domain>/sendmail/bysendgrid”)

sendmail.controller.ts

3.4 สร้าง logic ในการส่งเมลล์

line5: ประกาศ sendgridService ใน constructor

line13–22: ใช้ method .send ของ sendgrid ในการส่งเมลล์ โดยส่ง argrument ดังนี้

• to : ส่งไปถึงเมลล์ที่ต้องการ
• from : ส่งจากใคร
• subject : หัวข้อเมลล์ที่ส่ง
• html: คือเนื้อหาของเมลล์ โดยเป็นโครงสร้างแบบ html สามารถใช้ style CSS แบบ internalได้ หรือจะใช้วิธีการ pass argument ไปอีก file ที่เราเขียนเป็นฟังก์ชันไว้ก็ได้

sendmail.service.ts

another way: use passing argument to function

3.5 เมื่อพร้อมแล้วเราไปยิง api กันเลย

use postman to call api

เย้เรียบร้อย ใช่งานได้ ละมาดูที่เมลล์กันบ้างว่าเมลล์เข้าไหม

mail at gmail

เรียบร้อยโรงเรียนจีน เป็นอันจบ flow การส่งเมลล์

และเจ้าตัว sendgrid เมื่อใช้งานได้มันก็จะแสดงออกมาดังนี้

• หน้า mail api : It worked !!

Email API page

• หน้า Activity Feed

activity feeds

Conclusion

จาก workshop นี้จะเป็นการ implement ตัว sendgrid เข้ากับ backend application (Nestjs) เพื่อแก้ปัญหาการ block ของ mailProvider เจ้าต่างๆ เมื่อใช้งาน application ในระดับ develop site และ production site

ก็จบกันไปแล้ว ถ้าท่านผู้อ่าน สงสัยส่วนใด, มีส่วนที่อธิบายผิด สามารถ DM มาได้โดยตรงเพื่อแก้ไขปรับปรุงเนื้อหาให้ถูกต้อง

ขอบคุณครับ happy dev :D

contact:

• fb: supanut laddayam
• discord: NUTX#6233