Membuat Milis Menggunakan Twilio's SendGrid Email API, Laravel, dan Vue.js

Diterbitkan: 2021-03-31

Tutorial ini awalnya muncul di blog Twilio.

Pemasaran email adalah kunci keberhasilan strategi komunikasi Anda. Menawarkan ROI dan tingkat konversi yang luar biasa, pentingnya program email yang efektif tidak dapat terlalu ditekankan. Tutorial ini akan mengajari Anda cara mengirim email massal ke daftar lebih dari 100 alamat email menggunakan API Email Twilio SendGrid, Laravel, dan Vue.js.

Sebelum kita mulai

Untuk menyelesaikan tutorial ini, Anda memerlukan yang berikut:

    • Komposer terpasang dan siap digunakan
    • Pengetahuan dasar tentang kerangka Laravel
    • Server database yang diinstal secara lokal siap digunakan
    • Pengetahuan dasar tentang Vue.js
    • akun Twilio SendGrid
    • npm
    • Node.js (dengan versi minimum 12.14, tetapi idealnya versi stabil atau LTS terbaru)

Mengapa API Email Twilio SendGrid?

Pustaka Twilio SendGrid menyederhanakan proses pengiriman email. Ini tersedia dalam berbagai bahasa dan kerangka kerja pemrograman, termasuk PHP, Java, Ruby, dan Go. Mari kita mulai membuat aplikasi milis kita.

Buat milis kami

Buat proyek Laravel baru menggunakan perintah Composer berikut di bawah ini.

Atau, Anda dapat menggunakan perintah berikut, jika Anda memiliki penginstal Laravel yang diinstal secara global di sistem Anda:

Terlepas dari bagaimana Anda membuat proyek Laravel baru, setelah dibuat, beralihlah ke direktori yang baru dibuat menggunakan perintah di bawah ini:

cd twilioSendGrid

Konfigurasi dan .env setup

Aplikasi Anda akan memiliki formulir kecil untuk mengumpulkan email untuk milis Anda. Untuk menyimpannya, buat model baru, pengontrol, dan file migrasi untuk aplikasi menggunakan perintah di bawah ini.

Anda akan melihat output yang mirip dengan contoh di bawah yang dicetak ke terminal.

Sekarang, ubah file migrasi baru,
database/migrations/2021_02_16_192153_create_email_listings_table.php , sehingga cocok dengan kode di bawah ini. Saat dijalankan, itu akan menambahkan bidang email ke tabel email_listings .

Selanjutnya, tambahkan detail konfigurasi untuk server database lokal Anda ke .env di direktori root proyek . Berikut adalah salinan bagian DB dari konfigurasi database .env saya untuk proyek ini.

Kemudian, jalankan migrasi database menggunakan perintah berikut untuk memperbarui tabel email_listings .

Melayani proyek

Untuk memastikan bahwa kode berfungsi sesuai kebutuhan, jalankan aplikasi Laravel menggunakan perintah di bawah ini.

Aplikasi akan dimulai dengan cukup cepat, dan Anda akan melihat yang berikut ini dicetak ke terminal:

Laravel development server started: http://127.0.0.1:8000

Memfaktorkan ulang front-end Vue.js

Vue.js telah meningkat secara signifikan dalam popularitas dalam beberapa bulan terakhir, sedemikian rupa sehingga sekarang dikirimkan bersama dengan kerangka Laravel sebagai kerangka kerja front-end default. Hasilnya, kita akan menggunakan Vue.js bersama dengan Laravel API kita. Untuk memulai pengaturan Vue.js di aplikasi kita, jalankan perintah berikut:

composer require laravel/ui
php artisan ui vue
npm install && npm run development && npm run dev

Kemudian, ubah badan template tampilan default,
resources/views/welcome.blade.php , untuk memuat kode berikut:

Tag skrip di akhir tag tubuh mengimpor js/app.js ke dalam template Blade kita sehingga kita dapat menggunakan Vue.js dalam aplikasi kita. Namun, kita perlu melakukan beberapa modifikasi agar bisa berfungsi seperti yang diharapkan. Untuk melakukannya, ubah resources/js/app.js sehingga terlihat seperti contoh berikut.

Kode mengimpor Vue.js, Bootstrap.js yang diperlukan, dan file App.vue kami. App.vue menampung semua yang muncul di browser. Buat file baru bernama App.vue di direktori komponen ( resources/js/components ).

Kemudian, tambahkan kode berikut ke App.vue :

Dengan file yang diperbarui, gunakan perintah berikut untuk mengkompilasi kode JavaScript kami dan perhatikan setiap perubahan di masa mendatang.

Dengan kode yang dikompilasi ulang, jika kita memuat ulang browser, sekarang akan terlihat seperti gambar di bawah ini.

Siapkan Twilio SendGrid

Selanjutnya, kita perlu menginstal Twilio SendGrid SDK untuk Laravel menggunakan perintah di bawah ini.

Setelah menginstal SDK, buka dasbor Twilio SendGrid . Kemudian, klik “ Pengaturan -> Kunci API. ” Pada halaman API Keys, klik “ Create API Key ' ' in” di pojok kanan atas. Masukkan nama untuk kunci API baru Anda, biarkan " Izin Kunci API " disetel ke " Akses Penuh, " dan klik " Buat & Lihat " di sudut kanan bawah untuk membuat kunci.

Melakukannya akan membuat kunci API baru. Salin kunci API Anda, karena Anda akan membutuhkannya untuk SDK mengirim email.

Catatan: Kemudian, di .env, tambahkan konfigurasi di bawah ini, ganti {YOUR API KEY} dengan kunci Twilio SendGrid API yang baru saja Anda salin.

Sebelum melanjutkan, penting untuk diketahui bahwa Twilio SendGrid memiliki tingkat verifikasi yang berbeda untuk akun yang berbeda. Jika Anda baru saja membuat akun Twilio SendGrid baru atau akun Anda berusia kurang dari 6 bulan, Twilio SendGrid mengharuskan Anda memverifikasi alamat pengiriman. Ini adalah alamat yang akan dilihat oleh penerima Anda sebagai pengirim email.

Jika Anda belum memverifikasi alamat email pengirim Twilio SendGrid dan akun Anda berusia kurang dari 6 bulan, Anda mungkin mengalami kesalahan server yang meminta Anda melakukannya saat mencoba mengirim email.

Catatan: Dengan itu, mari kita lanjutkan membangun aplikasi milis kita.

Bibit email

Aplikasi kita akan menyimpan alamat email penerima dalam tabel database yang disebut email_listing . Untuk menghemat waktu, kami akan menyemai tabel email_listing kami dengan alamat email menggunakan Seeder .

Buat Seeder baru menggunakan perintah berikut:

Buka Seeder baru, yang terletak di database/seeders/EmailListingSeeder.php , dan modifikasi, ganti kode yang ada dengan kode di bawah ini.

Catatan: Mengirim email ke alamat email yang dibuat secara acak ini menggunakan Twilio SendGrid tidak akan berfungsi. Saya sarankan Anda memastikan bahwa Anda menggunakan alamat email yang sah yang dapat menerima email dari internet.

Kemudian, jalankan perintah berikut untuk menyemai data kita.

Kirim email massal

Sekarang kita memiliki email di tabel email_listings database kita, mari tambahkan fungsionalitas untuk mengirim email massal. Sebelumnya, kami membuat pengontrol bernama EmailListingController . Sekarang kita akan refactor kode controller untuk mengirim email ke alamat email di database kita. Untuk melakukannya, ganti kode EmailListingController yang ada dengan kode di bawah ini.

Sebelum kita melanjutkan, izinkan saya sejenak menjelaskan kode di atas. Metode pertama, array_push_assoc() , cukup menambahkan nilai ke array dalam pasangan kunci/nilai. Ini karena Twilio SendGrid mengharuskan semua alamat email penerima berada dalam pasangan kunci/nilai. Ada banyak cara Anda dapat menambahkan nilai ke array di PHP tetapi ketika menyangkut pasangan kunci/nilai, itu menjadi rumit. Jadi metode ini akan berguna nanti. Mari kita lanjutkan.

Metode kedua, sendEmail , menangani validasi formulir dan pengiriman email menggunakan Twilio SendGrid. Twilio SendGrid memiliki beberapa cara berbeda untuk mengirim email dari aplikasi. Kami juga memiliki dokumentasi ekstensif tentang cara mengirim email.

Perhatikan lebih dekat kode di bawah ini, yang hanya merupakan bagian dari cuplikan kode di atas. Bagian ini bertanggung jawab penuh atas interaksi dengan Twilio SendGrid API.

Di sinilah kita menginisialisasi variabel baru, $email sebagai \SendGrid\Mail\Mail() . Variabel ini menyimpan banyak informasi dan data berguna tentang proses pengiriman email.

Sekarang, saya ingin kita memperhatikan cuplikan di atas. Di sinilah Twilio SendGrid menerima instruksi untuk mengirim email ke semua penerima email yang disediakan. Ia menerima argumen, $receiver , yang merupakan larik dari semua alamat email penerima.

Di sini, kami menginisialisasi variabel baru, $addresses , dengan hasil mengambil semua alamat email penerima dari database kami. Karena Twilio SendGrid mengharuskan alamat-alamat ini berada dalam pasangan kunci/nilai untuk dilewati, kami harus mengulang nilai $address untuk mendapatkan email dari setiap penerima. Kami kemudian menambahkan alamat ini ke array $receivers menggunakan metode yang kami bahas sebelumnya, $this->array_push_assoc() .

Sekarang kita harus bisa mengirimkan email kita. Namun, kita membutuhkan rute untuk memanggil metode tersebut. Untuk melakukannya, tambahkan kode API berikut ke routes/api.php :

Setelah itu selesai, kita dapat memodifikasi resources/js/components/App.vue , yang kita buat sebelumnya untuk pengujian email kita. Ganti kode file yang ada dengan kode di bawah ini.

Dalam kode di atas, kami membuat formulir HTML dasar. Tidak ada yang terlalu mewah. Saat mengirimkan formulir, metode send() dipanggil. Ini adalah metode Vue.js. Kami menggunakannya untuk memvalidasi bidang formulir yang dikirimkan dan membuat panggilan API ke rute email kami.

Sekarang, ada satu hal yang harus dilakukan: memberikan bentuk sedikit gaya. Untuk melakukannya, kita akan menambahkan style sheet Bootstrap , karena elemen form sudah menggunakan kelas Bootstrap. Berikut adalah kode untuk ditambahkan di bawah ini di akhir bagian kepala head resources/views/welcome.blade.php

Kemudian, jalankan campuran lagi untuk membangun kembali UI, menggunakan perintah di bawah ini.

Uji bahwa kami dapat mengirim email massal

Muat ulang halaman. Semua hal dianggap sama, layar Anda akan terlihat seperti tangkapan layar di atas. Jika demikian, Anda siap mengirim email massal. Untuk melakukannya, masukkan topik, alamat email penerima, dan isi pesan, lalu klik "Kirim Email." Tak lama setelah itu, Anda akan melihat "Email terkirim berhasil" muncul di atas formulir, seperti pada gambar di bawah.

Twilio SendGrid menggunakan antrian email. Ini berarti email Anda mungkin tidak terkirim secara instan. Semua hal dianggap sama, itu harus mengembalikan 202 tanggapan, memberi tahu Anda bahwa email Anda telah diantrekan untuk dikirim di lain waktu. Dalam kebanyakan kasus, email ini dikirim sekali sehari.

Tinjauan

Selamat! Anda telah berhasil membuat milis dengan Twilio SendGrid Email API, Laravel, dan Vue.js.

Sekarang setelah Anda menyelesaikan tutorial ini, Anda tahu caranya:

    • Buat dan konfigurasikan proyek Laravel dengan Vue.js sebagai kerangka kerja front-end Anda
    • Buat milis menggunakan Twilio SendGrid Email API di Laravel

Anda juga dapat memastikan pengiriman email Anda ke alamat email yang benar. Temukan tautan ke kode untuk artikel ini di GitHub di sini .

Nama saya Anumadu Udodiri Musa. Saya seorang pengembang perangkat lunak dan pembuat konten teknis dalam ekosistem PHP dan JavaScript. Saya menjalankan komunitas online pecinta teknologi bernama Tekiii . Anda dapat menghubungi saya di LinkedIn .