Node.js ile Contact Form Oluşturma ve Nodemailer Kullanımı

Herkese merhaba arkadaşlar Nodejs ile contact form oluşturmayı anlatacağım bu yazımda hem öğrendiklerimi pekiştirmiş olacağım hem de okuyarak öğrenmek isteyenler için bir yardımım dokunması içindir.

Neler yapacağız? Bu yazıda nodejs ile mail gönderme ve alma işlemlerini yapacağız. Nodemailler kullanımından bahsedeceğim. Ayrıca hem fake email ile hem de gmail ile gönderimlerden basedeceğim.

İlk olarak form için frontend kısmını react ve tailwindcss ile oluşturdum tüm projeyi github üzerinden ulaşabilirsiniz ya da drive linkinden frontend kısmını indirebilir birlikte yapabiliriz. Ben birlikte yapmamızdan yanayım.

Hadi başlayalım contact-form isminde bir klasör oluşturuyorum ve içine clienti indiriyorum. Client klasörüne giriyoruz ve gerekli paketleri yüklüyoruz.

cd client
npm i

Hemen Backend kısmına gelelim klasör yapımızı oluşturalım. contact-from klasörü içerisinde server isminde bir klasör daha oluşturyoruz. Bunun içerisine Controller ve Routes isminde klasörleri oluşturuyoruz. Controller içerisine ContactController.js Routes içerisine de ContactRoute.js ekliyoruz. Ve server içerisine app.js ekliyoruz. Ardından contact-form klasörü içerisinde package.json dosyamızı oluşturmak için aşağıdaki komutu kullanıyoruz.

npm init --y

package.json içerisine script içerisine start ekliyoruz.

"start": "node server/app.js"

bu projede üç tane npm paketi kullanacağız express, env dosyamızdan user ve passwordunu okumamız için dotenv, ve mail için nodemailler paketlerini kullanacağız. İndirmek için aşağıdaki komutları yazabilirsiniz.

npm i express
npm i dotenv
npm i nodemailer

Şuan ki durumda dosya yapımız bu şekilde görünmektedir.

contact-form

Şimdi gelelim server içerisindeki app.js dosyamıza burada en önemli detay ContactRoute’u eklememiz ve kullanmamız.

app.js yukarıdaki gibi ekledikten sonra Routes içerisineki Contact Route gidip routemuzu oluşturuyoruz burada form gönderme olduğu için post metodu kullanıyoruz.

Nodemailer Nasıl kullanılır ?

Ve bu yazının en önemli noktasına geldik şimdi Controller içerisindeki ContactController.js açalım ve nodemaileri kullanalım. İki türlü mail gönderimi yapacağız birincisi gerçek gmail ile ikici olarak da Ethereal üzerinden fake emaile gönderim yapacağız. Buradaki nodemailer kullanımı nodemailer dökümanın da yazan yapının aynısı sadece outputMessage kısmında form üzerinden gönderdiğim bilgileri body içerisinden alıyorum. Dikkate etmeniz gereken bir diğer kısım transporter sabitinin içerisindeki tanımlarımız. Aşağıda gmail için service ve host bilgileri ve güvenli iletim için 465 portunu kullanıyoruz.

ContactControlleri ekledikten sonra gmail hesabımızda düzenlememiz gereken bazı yerler var ilk olarak Daha az güvenli uygulama erişimi ‘ni açmalısınız. Ardından uygulama şifresi oluşturma yaparak uygulama şifresi oluşturuyoruz. Aşağıdaki adımları izleyebilirsiniz.

Hesabınızın 2 adımlı doğrulamasını yapmayı unutmayın!

Bu işlemi yaptıktan sonra sarı çubukta yer alan şifreyi kopyalıyoruz.

Ve nodemailerde user ve pass belirtmemiz için contact-form içerisine .env dosyamızı oluşturuyoruz ve içerisine size ait gmail adresini ve yeni oluşturduğunuz uygulama şifresiniz giriyoruz.

REACT_APP_EMAIL=email
REACT_APP_EMAIL_PASS=password

Gmail adresimize gelmesi için yapmamız gerekenler bunlardı.

Nodemailer de Fake email nasıl kullanılır?

Birde fake email için nasıl bir yol izliyoruz ona bakalım. Önce ethereal.email adresine gidip Create ethereal Account oluşturalım. Oluşturduktan sonraki username ve passwordu .env içerisine yazalım.

REACT_APP_EMAIL=Username
REACT_APP_EMAIL_PASS=Password

Ardından ContactController içerisindeki trasporter sabitinde aşağıdaki değişikliği yapacağız. Gelen mailleri kontrol etmek için open mailbox butonuna basarak açmayı unutmayın.

Tüm bunları yaptığımıza göre şimdi uygulamayı çalıştıralım ilk olarak serverı ayağa kaldıralım bunun için aşağıdaki komutu yazınız.

npm start

Ardından Clientı çalıştıralım bunun için de yeni bir terminal açıp aşağıdaki komutları yazabilirsiniz.

cd client
npm start

Uygulamanın canlı halini görüntülemek için aşağıdaki adresi ziyaret edebilirsiniz.

https://app-contact-form.herokuapp.com/

Github reposuna aşağıdaki link üzerinden göz atabilirsiniz.

https://github.com/alperbayram/contact-form

Contact form uygulamamızın anlatımı bu şekildeydi okuduğunuz için teşekkürler. Alkışlayıp takip ederseniz sevinirim. :)