Company insights

การส่งอีเมลผ่าน Flutter โดยใช้ REST API


การส่งอีเมลจากแอปพลิเคชัน Flutter มักไม่ได้ส่งอีเมลโดยตรงจากตัวแอป
แต่จะส่งคำขอไปยัง Backend ผ่าน REST API ก่อน จากนั้น Server
จะเป็นผู้ส่งอีเมลจริงไปยังผู้รับ วิธีนี้ช่วยเพิ่มความปลอดภัย
และสามารถควบคุมการส่งอีเมลได้จากฝั่ง Server


สถาปัตยกรรมทั่วไปของระบบส่งอีเมลจะประกอบด้วย


  • Flutter Application (Client)

  • REST API (Backend)

  • Email Service เช่น SMTP หรือ Email Provider

โครงสร้างการทำงานของระบบส่งอีเมล


  1. ผู้ใช้กรอกข้อมูลในแอป เช่น อีเมลหรือข้อความ

  2. Flutter ส่ง HTTP POST ไปยัง REST API

  3. Backend รับข้อมูลและประมวลผล

  4. Backend ส่งอีเมลผ่าน SMTP หรือ Email Service

  5. Server ส่งผลลัพธ์กลับมายังแอป

การส่งข้อมูลจาก Flutter ไปยัง REST API


Flutter สามารถส่ง HTTP Request ไปยัง API ด้วยแพ็กเกจ http


import 'dart:convert';
import 'package:http/http.dart' as http;

Future sendEmail(String email, String message) async {

 final response = await http.post(
   Uri.parse("https://api.example.com/send-email"),
   headers: {
     "Content-Type": "application/json"
   },
   body: jsonEncode({
     "email": email,
     "message": message
   })
 );

 if (response.statusCode == 200) {
   print("Email sent successfully");
 } else {
   print("Failed to send email");
 }

}

ตัวอย่าง UI สำหรับส่งอีเมล


import 'package:flutter/material.dart';

class EmailPage extends StatefulWidget {
 @override
 _EmailPageState createState() => _EmailPageState();
}

class _EmailPageState extends State<EmailPage> {

 TextEditingController emailController = TextEditingController();
 TextEditingController messageController = TextEditingController();

 void send() {
   String email = emailController.text;
   String message = messageController.text;

   sendEmail(email, message);
 }

 @override
 Widget build(BuildContext context) {

   return Scaffold(
     appBar: AppBar(
       title: Text("Send Email"),
     ),
     body: Padding(
       padding: EdgeInsets.all(20),
       child: Column(
         children: [

           TextField(
             controller: emailController,
             decoration: InputDecoration(
               labelText: "Email"
             ),
           ),

           TextField(
             controller: messageController,
             decoration: InputDecoration(
               labelText: "Message"
             ),
           ),

           SizedBox(height: 20),

           ElevatedButton(
             onPressed: send,
             child: Text("Send Email")
           )

         ],
       ),
     ),
   );

 }
}

ตัวอย่าง REST API สำหรับส่งอีเมล


ตัวอย่าง Backend API ที่ใช้ Node.js สำหรับส่งอีเมลผ่าน SMTP


const express = require("express");
const nodemailer = require("nodemailer");

const app = express();
app.use(express.json());

app.post("/send-email", async (req, res) => {

 const { email, message } = req.body;

 const transporter = nodemailer.createTransport({
   service: "gmail",
   auth: {
     user: "your_email@gmail.com",
     pass: "your_password"
   }
 });

 await transporter.sendMail({
   from: "your_email@gmail.com",
   to: email,
   subject: "Message from Flutter App",
   text: message
 });

 res.json({status: "ok"});
});

app.listen(3000);

ข้อดีของการส่งอีเมลผ่าน REST API


  • เพิ่มความปลอดภัยเพราะไม่เปิดเผย SMTP ในแอป

  • สามารถควบคุมการส่งอีเมลจาก Server ได้

  • สามารถเพิ่มระบบ Logging และ Tracking ได้

  • รองรับการส่งอีเมลจำนวนมาก

แนวทางพัฒนาเพิ่มเติม


  • เพิ่มระบบยืนยันอีเมล (Email Verification)

  • เพิ่มระบบ OTP ผ่านอีเมล

  • ใช้ Email Service เช่น SendGrid หรือ Amazon SES

  • บันทึกประวัติการส่งอีเมลในฐานข้อมูล

สรุป


การส่งอีเมลใน Flutter ควรใช้ REST API เป็นตัวกลางระหว่างแอปและระบบส่งอีเมล
โดย Flutter จะทำหน้าที่ส่งข้อมูลไปยัง Backend และให้ Server
จัดการการส่งอีเมลจริง วิธีนี้ช่วยให้ระบบมีความปลอดภัย
และสามารถจัดการการส่งอีเมลได้อย่างมีประสิทธิภาพ