E-posta, çok hızlı, ucuz ve organik olmayan temel bir iş iletişimi yöntemidir. Ürünler oluştururken e-postalar, işletmenize çeşitli türde verileri elektronik olarak iletmek için etkili ve verimli bir ortam sağlayabilir.
Bu yazıda, Mailgun hizmetini kullanarak e-posta göndermek için bir form oluşturmayı öğreneceğiz. Frontend uygulaması için React, arka uçta Node.js, asenkron istekler yapmak için Axios, bildirimleri göstermek için React-Toastify paketini kullanacağız. . Günün sonunda, tıpkı şu şekilde çalışan bir posta servisi oluşturmalıydık:
Not: Bugün parça parça oluşturacağınız bu proje için depoya erişebilir ve bunu kullanarak uygulama ile oynayabilirsiniz. GitHub'daki bağlantı.
En başlayalım!
Proje Kurulumu
Bugün inşa edeceğimiz ilk şey, React kullanarak önyüz uygulaması olacak.
React kitaplığına başlamak, bir JavaScript dosyasını (bir CDN) bir HTML dosyasına eklemek kadar basittir. Ancak gerçek dünya ve büyük ölçekli bir uygulama için React CLI başlamak için daha iyi bir yoldur. Bugünkü eğitimimizde React CLI'yi kullanacağız.
Bu yazıda, React uygulamalarının hızlı bir şekilde geliştirilmesini kolaylaştırmak için React ekibi tarafından oluşturulmuş bir CLI aracı kullanacağız. React CLI'yi yüklemek için aşağıdaki komutu çalıştırın –
npm install -g create-react-app
.
Şimdi projemizi oluşturalım ve ismini verelim. react-node-email-app
, aşağıdaki komutu kullanarak:
$ npx create-react-app react-node-email-app
Bu, projemizi oluşturmak için bir başlangıç şablonu oluşturacaktır. Proje dizininize girip geliştirme sunucusunu çalıştırarak bu şablonu görüntüleyebilirsiniz:
$ cd react-node-email-app
$ yarn start
Daha sonra ön ucumuzu tarayıcıda şu adreste görüntüleyebiliriz: localhost:3000
.
Proje Kullanıcı Arayüzünü Oluşturma
Artık uygulamanın ön yüzünü oluşturmaya başlayabiliriz. E-postaların gönderilebileceği formu oluşturarak başlayacağız.
Bunu içinde yapacağız App.js
dosya, böylece şu şekilde güncellenir:
import './App.css';
import { useState } from 'react'; function App() { const = useState('') const [subject, setSubject] = useState('') const [message, setMessage] = useState('') return ( <div className="App"> <section> <form> <h1>Send Email</h1> <div className='form-wrapper'> <div> <label htmlFor='email'>Email Address</label> <input onChange={(e)=>setEmail(e.target.value)} type="email" id="email"></input> </div> <div> <label htmlFor='subject'>Email Subject</label> <input onChange={(e)=>setSubject(e.target.value)} type="text" id="subject"></input> </div> <div> <label htmlFor='message'>Message Body</label> <textarea onChange={(e)=>setMessage(e.target.value)} type="text" id="message"></textarea> </div> <div> <button type='submit'>Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
Burada, biri alıcının e-postasını, diğeri e-postanın konusunu ve sonuncusu da e-postanın ana mesajını girmek için olmak üzere üç giriş alanına sahip bir form oluşturduk.
Çeşitli giriş alanlarında, giriş kutusundaki değişikliği işlemek için bir durum ayarladık – bir kullanıcı giriş alanına bir karakter girdiğinde yapılan değişiklikleri yakalamak için onChange
olay dinleyicisi
Ayrıca bir e-posta gönderimi yapmak amacıyla bir düğme oluşturduk.
Formu güzelleştirmek için, App.css
Aşağıdaki CSS stilleriyle dosyalayın, böylece içeriği şöyle görünür:
.App { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #282c34;
}
.App section form { min-width: 25rem; margin: 0 auto; border: solid 1px #bdbdbd; border-radius: 8px; padding: 2rem;
}
form h1 { text-align: center; color: #ffffff;
}
form .form-wrapper { margin: 0 auto;
} form .form-wrapper > div { margin-bottom: 1rem;
}
form .form-wrapper > div > label { margin-bottom: 0.5rem; color: #ffffff; display: block;
}
form .form-wrapper > div > input, form .form-wrapper > div > textarea { padding: 0.5rem; border-radius: 4px; border: none; outline: none; min-width: 20rem; font-family: Arial, Helvetica, sans-serif;
}
form .form-wrapper > div > button { padding: 1rem 2.5rem; color: white; background: rgb(4, 144, 199); border-radius: 4px; border: none; cursor: pointer;
}
Uygulamanın performansını artırmak için bir onSubmit
eylemleyici olay işlevi, düğmesine tıklandığında bir sayfayı fiilen yenileyen formların varsayılan davranışını önlemek için form öğesinde tanımlanmalıdır. İsteği arka planda gönderdiğimiz için butona tıklandığında sayfamızın yenilenmesi ideal değildir, bu da kullanıcı için daha iyi bir deneyimdir.
Bir kullanıcının herhangi bir e-posta, konu veya mesaj girmemişse e-posta gönderememesi de idealdir. Bunun için, bu alanların boş olup olmadığını kontrol etmek için bazı girdi doğrulamaları yapmalıyız. Eğer öyleyse, "Lütfen e-postayı, konuyu ve mesajı doldurun" mesajıyla birlikte bir hata döndürürüz.
Bunu yapmak için, kızartmak Uygulamamızda paket. Proje terminalinde aşağıdaki komutu çalıştırarak kurmamız gerekiyor:
$ yarn add react-toastify
Sonra güncelle App.js
ile submitHandler
işlevi:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css' function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button type="submit">Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
Artık bir kullanıcı, e-posta adresini, e-posta konusunu ve mesaj giriş alanlarını önceden doldurmadan e-posta göndermek için düğmeye her tıkladığında, tost mesajı ondan gerekli olan her şeyi yapmasını ister.
Ayrıca ihtiyacımız olduğu için axios
AJAX istekleri yapmak için kütüphaneyi de yüklememiz gerekecek:
$ yarn add axios
Ardından, bir try/catch
Bir e-posta göndermek için eşzamansız isteği işlemek için blok.
App.js
şimdi olmak için güncellendi:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios"; function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const [loading, setLoading] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); try { setLoading(true); const { data } = await axios.post(`/api/email`, { email, subject, message, }); setLoading(false); toast.success(data.message); } catch (error) { setLoading(false); toast.error( error.response && error.response.data.message ? error.response.data.message : error.message ); } }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button disabled={loading} type="submit"> {loading ? "Sending..." : "Send Email"} </button> </div> </div> </form> </section> </div> );
} export default App;
Düğüm Kullanarak Arka Uç Uygulamasını Oluşturma
Bu noktada uygulamanın önyüzünü başarıyla hayata geçirdik. Devam ederek, Node.js kullanarak arka uç üzerinde çalışmaya başlayacağız.
İlk olarak, projenin kökünde adlı yeni bir dizin oluşturun. backend
.
Şimdi, cd
arka uç dizinine girin ve çalıştırın npm init
Düğüm uygulaması oluşturmaya başlamak için terminalden.
$ npm init --y
En iyi uygulamalar, endüstri tarafından kabul edilen standartlar ve dahil edilen hile sayfası ile Git'i öğrenmek için uygulamalı, pratik kılavuzumuza göz atın. Googling Git komutlarını durdurun ve aslında öğrenmek o!
not: --y
seçeneği, NPM'ye, tarafından sorulan tüm sorulara "evet" yanıtı vermesini söyler. init
emretmek. Bu, temel olarak size cihazınız için varsayılan ayarları verir. package.json
dosyası.
Bu bir oluşturur package.json
arka uç projesinin uygulama bağımlılıklarının yönetimini sağlayan dosya.
Ardından, aşağıdaki paketleri kurun:
express
: Bir web sunucusu oluştururdotenv
: Yapılandırma verilerini okur ve hassas verileri erişilebilir koddan uzak tutmanın harika bir yolu olarak hizmet edermailgun-js
: Mailgun kullanılarak e-postaların gönderilmesini sağlar
$ yarn add express dotenv mailgun-js
Bu paketler artık yüklendiğinde, iki yeni dosya oluşturun server.js
ve .env
içinde backend
klasör.
içinde .env
file, Mailgun için etki alanını ve API anahtarını tutacağız.
sunucu oluşturma
Bu server.js
dosya, amaç Express.js kullanarak bir sunucu oluşturmaktır. Orada, biz ithal ediyoruz express
, dotenv
, ve mailgun-js
paketler.
server.js
olacak şekilde güncellenir:
const express = require("express");
const dotenv = require("dotenv");
const mg = require("mailgun-js"); dotenv.config(); const mailgun = () => mg({ apiKey: process.env.MAILGUN_API_KEY, domain: process.env.MAILGUN_DOMAIN, });
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.post("/api/email", (req, res) => { const { email, subject, message } = req.body; mailgun() .messages() .send( { from: "John Doe <>", to: `${email}`, subject: `${subject}`, html: `<p>${message}</p>`, }, (error, body) => { if (error) { console.log(error); res.status(500).send({ message: "Error in sending email" }); } else { console.log(body); res.send({ message: "Email sent successfully" }); } } );
}); const port = process.env.PORT || 4000;
app.listen(port, () => { console.log(`App is served at port ${port}`);
});
Burada, biz çağırdık mg
işlev ve ona atanan mailgun
. In mg
işlevi, API anahtarını ve etki alanını ortam değişkeninden geçiriyoruz ve kullanıyoruz mailgun
e-posta göndermek için.
Bundan sonra, Express uygulaması oluşturulur ve iki ara yazılım express.json()
ve express.urlencoded
API isteğinden Express kullanarak yükü almak ve dönüştürmek için kullanılır req.body
.
Sonra, bir POST
yol ile rota /api/email
oluşturulur ve burada bir isteği ve yanıtı kabul edecek bir işlev tanımlanır. E-posta, konu ve mesaj daha sonra sistemden çıkarılabilir. req.body
nesne. Bunlar, kullanıcının ön uç uygulamasındaki giriş alanlarından girdiği verilerdir.
Bu çıkarıldıktan sonra, messages
yöntemden mailgun
başlangıçta kurulan işlev çağrılır, ardından send
yöntem denir. send yönteminde, aşağıdaki özellikleri taşıyan bir nesne iletilir:
from
: Kullanıcıların bir e-postanın "gönderen" bölümünde gördüğü ad.to
E-postanın gönderildiği e-posta adresi (giriş alanına girilen e-posta).subject
: Konu girildi.html
: E-posta adresine gönderilecek mesajı tanımlayan HTML işaretlemesi.
Geçilen ikinci parametre send
method, hatayı ve gövdeyi kabul eden bir işlevdir. Bu işlevde biz console.log
hata, durum kodunu olarak ayarlayın 500
ve "E-posta gönderirken hata" yazan bir mesaj gönderin. Aksi takdirde, gövdeyi günlüğe kaydederiz ve başarı durumunda "E-posta başarıyla gönderildi" yazan bir mesaj göndeririz.
Dosyanın en sonunda, bağlantı noktasını .env
dosya ve çağrı app.listen()
sunucuyu başlatmak için.
API anahtarlarını tanımlama
Mailgun'u uygulamanızda kullanmak için API anahtarlarını tanımlamanın ilk adımı, kendi özelliklerine göre 57 saniye süren ücretsiz bir hesap oluşturmaktır. resmi internet sitesi.
Bir hesap oluşturduktan sonra, oluşturduğunuz hesap için bir API anahtarı size gönderilirken, gösterge tablosunun yan gezintisindeki gönderme sekmesine giderek etki alanına erişebilirsiniz.
Hem korumalı alan bağlantısını hem de API anahtarını kopyalayın ve değeri .env
dosya, benim için yaptığım gibi:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Ardından, bağlantıya tıklayarak alan adının genel bakış sayfasına geri dönün. Sayfa şöyle görünmelidir:
Orada, sayfanın sağ tarafında, yetkili bir alıcı oluşturmak için e-posta göndermeyi test etmek istediğiniz e-posta adresini girin.
"Alıcıyı Kaydet" düğmesine tıklamak, aşağıda gösterildiği gibi bir e-postanın gönderilmesini tetiklemelidir:
"Kabul Ediyorum" düğmesini tıkladığınızda harici bir sayfaya yönlendirileceksiniz:
Alıcı adresini etkinleştirmeye devam etmek için “Evet” düğmesine tıklayın. Artık bu adres Mailgun aracılığıyla e-posta almaya başlayabilir.
Son olarak, Mailgun'u başarıyla kurduk ve Node.js kullanarak arka ucu oluşturduk.
Şimdi, arka uç dizininden aşağıdaki kodu çalıştırarak Express sunucusunu keyifli bir şekilde döndürebilirsiniz:
$ node server.js
Düğüm Uygulamasını React Uygulamasına Bağlama
Ön ucu arka uca bağlamak için şuraya gidin: package.json
React uygulaması için projenin kök dizininde bulunan dosya. Ardından, altında name
özelliği, adında yeni bir özellik ekleyin. proxy
, arka uç sunucusu için bağlantı noktası değerine sahip olmalıdır. Bunun gibi bir şeye benzemeli:
"proxy": "http://localhost:4000/"
Bunun eklenmesiyle, ön uçtan yaptığımız tüm eşzamansız istekler, oluşturduğumuz arka uç sunucusuna yönlendirilir.
Uygulamayı yeniden yüklemek için ön uç geliştirme sunucusunu yeniden başlatın.
Bir e-posta adresi (daha önce etkinleştirdiğiniz alıcı), e-posta konusu ve mesajı girerek, ardından "Gönder" düğmesine basarak şimdiye kadarki tüm uygulamalarımızı test etmeye devam edin. Bu, e-postanın başarılı olduğunu söylemek için başarılı bir tost göstermelidir.
Ve alıcı adresinin gelen kutusunda, tıpkı benim yaptığım gibi, siz de bir e-posta almalısınız:
Yukarı tamamlayan
E-posta göndermek, bir şifre sıfırlama, bir kullanıcıyı uygulamanıza davet etme, bir siparişi onaylama vb. . Mailgun ile çalışmanın ne kadar kolay olduğunu ve başlamak için hesap oluşturmanın ne kadar kullanıcı dostu ve hızlı olduğunu görüyoruz.
Bir daha projeniz için bir e-posta altyapısı oluşturmaya ihtiyaç duyduğunuzda, Mailgun gibi posta gönderme araçlarına göz atmaktan çekinmeyin. Aracı kullanma konusunda yardıma ihtiyacınız varsa, bana veya geliştirici topluluğundaki herhangi birine ulaşmaktan çekinmeyin, yardımcı olmaktan memnuniyet duyacaklarından eminim.
Ek kaynaklar
- SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
- Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
- Kaynak: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- Yapabilmek
- Kabul et
- Kabul eder
- erişim
- ulaşılabilir
- Göre
- Hesap
- aslında
- katma
- adres
- Sonra
- önde
- Uyarmak
- Türkiye
- ve
- Başka
- cevap
- kimse
- api
- API ANAHTARLARI
- uygulamayı yükleyeceğiz
- Uygulama
- uygulamaları
- etrafında
- göre
- atanmış
- Oto
- Axios
- Arka
- Backend
- arka fon
- darbe
- müşterimiz
- olmak
- altında
- Daha iyi
- Bit
- Engellemek
- vücut
- sınır
- kutu
- tarayıcı
- inşa etmek
- bina
- yapılı
- iş
- düğmesine tıklayın
- çağrı
- denilen
- Alabilirsin
- durumlarda
- Yakalamak
- Merkez
- değişiklik
- karakter
- ucuz
- Kontrol
- kod
- Yakın İletişim
- topluluk
- yapılandırma
- Sosyal medya
- içindekiler
- dönüştürmek
- yaratmak
- çevrimiçi kurslar düzenliyorlar.
- oluşturur
- Oluşturma
- CSS
- gösterge paneli
- veri
- gün
- Varsayılan
- tanımlı
- tanımlar
- tanımlarken
- Geliştirici
- gelişme
- DID
- domain
- her
- Daha erken
- Etkili
- verimli
- elektronik
- E-posta
- e-postalar
- sağlar
- Keşfet
- girdi
- girer
- çevre
- hata
- gerekli
- esasen
- vb
- Etkinlikler
- deneyim
- ekspres
- dış
- kolaylaştırmak
- HIZLI
- alan
- Alanlar
- fileto
- dosyalar
- doldurmak
- bulmak
- Ad
- odak
- takip etme
- Airdrop Formu
- formlar
- Ücretsiz
- itibaren
- Frontend
- işlev
- almak
- alma
- gif
- Git
- verir
- Go
- harika
- çok
- rehberlik
- sap
- hands-on
- baş
- yardım et
- vurmak
- tutar
- duraksamak
- Ne kadar
- Nasıl Yapılır
- HTML
- HTTPS
- ICON
- ideal
- uygulama
- uygulanan
- ithalat
- iyileştirmek
- in
- dahil
- Dahil olmak üzere
- Altyapı
- başlangıçta
- giriş
- kurmak
- yüklü
- IT
- JavaScript
- John
- JOHN DOE
- tutmak
- anahtar
- anahtarlar
- büyük ölçekli
- Soyad
- ÖĞRENİN
- öğrendim
- öğrenme
- LG
- Kütüphane
- LINK
- yükleme
- Bakın
- gibi görünmek
- GÖRÜNÜYOR
- yapılmış
- Ana
- yapmak
- Yapımı
- yönetim
- orta
- mesaj
- yöntem
- hareketli
- isim
- nav
- gezinme
- gerek
- yeni
- düğüm
- node.js
- bildirimleri
- nesne
- nesnel
- ONE
- seçenek
- sipariş
- organik
- aksi takdirde
- genel bakış
- paket
- paketler
- parametre
- geçti
- Şifre
- yol
- performans
- Platon
- Plato Veri Zekası
- PlatoVeri
- OYNA
- Lütfen
- Nokta
- Pratik
- önlemek
- süreç
- Ürünler
- proje
- özellikleri
- özellik
- korumalı
- sağlamak
- vekil
- amaç
- Sorular
- hızlı
- RE
- ulaşmak
- React
- Gerçek dünya
- teslim almak
- alma
- kalıntılar
- Depo
- talep
- isteklerinizi
- gereklidir
- yanıt
- dönüş
- Yüzük
- kök
- Rota
- koşmak
- koşu
- kum havuzu
- İndirim
- diyor
- İkinci
- saniye
- Bölüm
- gönderme
- hassas
- hizmet vermek
- hizmet
- set
- ayarlar
- gölge
- meli
- şov
- gösterilen
- yan
- Basit
- beri
- So
- katı
- biraz
- bir şey
- Dönme
- Yığın kötüye kullanımı
- standartlar
- başlama
- başladı
- Eyalet
- Durum
- adım
- dur
- konu
- boyun eğme
- sunmak
- başarı
- başarılı
- Başarılı olarak
- böyle
- SVG
- alır
- Hedef
- takım
- anlatır
- şablon
- terminal
- test
- The
- Sandbox
- ve bazı Asya
- içinde
- şey
- üç
- İçinden
- zaman
- için
- tost
- bugün
- çok
- araç
- araçlar
- geçiş
- iletmek
- tetikleyebilir
- gerçek
- öğretici
- altında
- Güncelleme
- güncellenmiş
- us
- kullanım
- kullanıcı
- kullanıcı dostu
- kullanıcılar
- onaylama
- değer
- çeşitli
- Ve
- Görüntüle
- ağ
- welcoming
- hangi
- süre
- beyaz
- irade
- olmadan
- İş
- çalışır
- olur
- XML
- Sen
- kendiniz
- zefirnet