Twilio'nun SendGrid E-posta API'sini, Laravel'i ve Vue.js'yi Kullanarak Bir Posta Listesi Oluşturun

Yayınlanan: 2021-03-31

Bu eğitim ilk olarak Twilio blogunda yayınlandı.

E-posta pazarlaması, iletişim stratejinizin başarısının anahtarıdır. Mükemmel bir yatırım getirisi ve dönüşüm oranı sunan etkili bir e-posta programının önemi fazla vurgulanamaz. Bu eğitim size Twilio SendGrid'in E-posta API'si, Laravel ve Vue.js'yi kullanarak 100'den fazla e-posta adresinin bulunduğu listelere toplu e-postaların nasıl gönderileceğini öğretecektir.

Başlamadan Önce

Bu öğreticiyi tamamlamak için aşağıdakilere ihtiyacınız olacak:

- Besteci yüklü ve kullanıma hazır
- Laravel çerçevesi hakkında temel bilgiler
- Yerel olarak kurulmuş, kullanıma hazır bir veritabanı sunucusu
- Temel Vue.js bilgisi
- Twilio SendGrid hesabı
- npm
- Node.js (en az 12.14 sürümüyle, ancak ideal olarak en son kararlı veya LTS sürümüyle)

Neden Twilio SendGrid'in E-posta API'sı?

Twilio SendGrid Kitaplığı , e-posta gönderme sürecini basitleştirir. PHP, Java, Ruby ve Go dahil olmak üzere birçok programlama dilinde ve çerçevesinde mevcuttur. Mail listesi uygulamamızı oluşturmaya başlayalım.

Posta listemizi oluşturun

Aşağıdaki Composer komutunu kullanarak yeni bir Laravel projesi oluşturun.

Alternatif olarak, sisteminizde global olarak kurulu Laravel yükleyiciniz varsa, aşağıdaki komutu kullanabilirsiniz:

Yeni Laravel projesini nasıl oluşturduğunuzdan bağımsız olarak, oluşturulduktan sonra aşağıdaki komutu kullanarak yeni oluşturulan dizine geçin:

cd twilioSendGrid

Yapılandırma ve .env kurulumu

Başvurunuz, posta listeniz için e-posta toplamak için küçük bir forma sahip olacaktır. Bunları saklamak için aşağıdaki komutu kullanarak uygulama için yeni bir model, denetleyici ve geçiş dosyası oluşturun.

Terminale yazdırılan aşağıdaki örneğe benzer bir çıktı görmelisiniz.

Şimdi yeni taşıma dosyasını değiştirin,
database/migrations/2021_02_16_192153_create_email_listings_table.php , böylece aşağıdaki kodla eşleşir. Çalıştırıldığında, email_listings tablosuna bir e-posta alanı ekleyecektir.

Ardından, yerel veritabanı sunucunuz için yapılandırma ayrıntılarını projenin kök dizinindeki .env dosyasına ekleyin . İşte bu proje için .env veritabanı yapılandırmamın DB bölümünün bir kopyası.

Ardından, email_listings tablosunu güncellemek için aşağıdaki komutu kullanarak bir veritabanı geçişi çalıştırın.

Projeye hizmet et

Kodun gerektiği gibi çalıştığından emin olmak için aşağıdaki komutu kullanarak Laravel uygulamasını başlatın.

Uygulama oldukça hızlı başlamalı ve terminalde aşağıdakilerin yazdırıldığını görmelisiniz:

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

Vue.js ön ucunu yeniden düzenleyin

Vue.js'nin popülaritesi son aylarda önemli ölçüde arttı, öyle ki artık varsayılan ön uç çerçevesi olarak Laravel çerçevesiyle birlikte gönderiliyor. Sonuç olarak, Vue.js'yi Laravel API'miz ile birlikte kullanacağız. Uygulamamızda Vue.js kurulumuna başlamak için aşağıdaki komutu çalıştırın:

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

Ardından, varsayılan görünüm şablonunun gövdesini değiştirin,
resources/views/welcome.blade.php , aşağıdaki kodu içerecek şekilde:

Gövde etiketinin sonundaki komut dosyası etiketi, js/app.js Blade şablonumuza aktarır , böylece Vue.js'yi uygulamamızda kullanabiliriz. Ancak, beklendiği gibi çalışması için üzerinde bazı değişiklikler yapmamız gerekiyor. Bunu yapmak için, resources/js/app.js aşağıdaki örneğe benzeyecek şekilde değiştirin.

Kod, gerekli bir Bootstrap.js olan Vue.js'yi ve App.vue dosyamızı içe aktarır. App.vue, tarayıcıda görünen her şeyi tutar. Bileşen dizininde ( resources/js/components ) App.vue adlı yeni bir dosya oluşturun .

Ardından, App.vue aşağıdaki kodu ekleyin :

Dosya güncellendiğinde, JavaScript kodumuzu derlemek ve gelecekteki değişiklikleri izlemek için aşağıdaki komutu kullanın.

Yeniden derlenen kod ile tarayıcıyı yeniden yüklersek, şimdi aşağıdaki resim gibi görünmelidir.

Twilio SendGrid'i kurun

Ardından, aşağıdaki komutu kullanarak Laravel için Twilio SendGrid SDK'yı kurmamız gerekiyor.

SDK'yı kurduktan sonra Twilio SendGrid panosuna gidin . Ardından, " Ayarlar -> API Anahtarları'na tıklayın. ” API Anahtarları sayfasında, sağ üst köşedeki “ API Anahtarı Oluştur ' ' in” seçeneğine tıklayın. Yeni API anahtarınız için bir ad girin, “ API Anahtar İzinleri ”ni “ Tam Erişim ” olarak ayarlayın ve anahtarı oluşturmak için sağ alt köşedeki “ Oluştur ve Görüntüle ”yi tıklayın.

Bunu yapmak yeni bir API anahtarı oluşturur. SDK'nın e-posta göndermesi için ihtiyacınız olacağından API anahtarınızı kopyalayın.

Not: Ardından, .env'de, {YOUR API KEY} 'nı yeni kopyaladığınız Twilio SendGrid API anahtarıyla değiştirerek aşağıdaki yapılandırmayı ekleyin.

Devam etmeden önce, Twilio SendGrid'in farklı hesaplar için farklı doğrulama seviyelerine sahip olduğunu bilmek önemlidir. Yeni bir Twilio SendGrid hesabı oluşturduysanız veya hesabınız 6 aydan daha eskiyse, Twilio SendGrid, gönderen adresinizi doğrulamanızı gerektirir. Bu, alıcılarınızın e-postayı gönderen olarak göreceği adrestir.

Twilio SendGrid gönderen e-posta adresinizi doğrulamadıysanız ve hesabınız 6 aydan daha eskiyse, e-posta göndermeye çalışırken sizden bunu yapmanızı isteyen bir sunucu hatasıyla karşılaşabilirsiniz.

Not: Bununla birlikte, posta listesi uygulamamızı oluşturmaya devam edelim.
Çekirdek e-postalar
Uygulamamız, alıcı e-posta adreslerini email_listing adlı bir veritabanı tablosunda saklayacaktır . Bize biraz zaman kazandırmak için, bir Seeder kullanarak email_listing tablomuzu e-posta adresleriyle tohumlayacağız .
Aşağıdaki komutu kullanarak yeni bir Seeder oluşturun:
database/seeders/EmailListingSeeder.php içinde bulunan yeni Seeder'ı açın ve mevcut kodu aşağıdaki kodla değiştirerek değiştirin.

Not: Rastgele oluşturulmuş bu e-posta adreslerine Twilio SendGrid kullanarak e-posta göndermek işe yaramaz. İnternetten e-posta alabilen yasal e-posta adresleri kullandığınızdan emin olmanızı öneririm.
Ardından, verilerimizi tohumlamak için aşağıdaki komutu çalıştırın.
Toplu e-posta gönder
Artık veritabanımızın email_listings tablosunda e-postalarımız olduğuna göre, toplu e-posta gönderme işlevini ekleyelim. Daha önce, EmailListingController adlı bir denetleyici oluşturduk . Şimdi, veritabanımızdaki e-posta adreslerine e-posta göndermek için denetleyicinin kodunu yeniden düzenleyeceğiz. Bunu yapmak için EmailListingController'ın mevcut kodunu aşağıdaki kodla değiştirin.

Devam etmeden önce, yukarıdaki kodu açıklamak için bir dakikanızı ayıralım. İlk yöntem, array_push_assoc() , bir diziye anahtar/değer çiftlerinde değerler ekler. Bunun nedeni, Twilio SendGrid'in tüm alıcı e-posta adreslerinin bir anahtar/değer çiftinde olmasını gerektirmesidir. PHP'de dizilere değer eklemenin birçok yolu vardır, ancak anahtar/değer çiftleri söz konusu olduğunda zorlaşır. Dolayısıyla bu yöntem daha sonra kullanışlı olacaktır. Devam edelim.
İkinci yöntem, sendEmail , form doğrulamayı ve Twilio SendGrid kullanarak e-posta göndermeyi işler. Twilio SendGrid, bir uygulamadan e-posta göndermenin birkaç farklı yoluna sahiptir. Ayrıca, e-postaların nasıl gönderileceğine ilişkin kapsamlı belgelere sahibiz.

Yukarıdaki kod parçacığının yalnızca bir bölümü olan aşağıdaki kodu daha yakından inceleyin. Bu bölüm, Twilio SendGrid API ile etkileşimden yalnızca sorumludur.
Burada yeni bir değişkeni başlatıyoruz, $email bir \SendGrid\Mail\Mail() nesnesi olarak. Bu değişken, e-posta gönderme işlemi hakkında birçok yararlı bilgi ve veri içerir.
Şimdi yukarıdaki parçaya dikkat etmemizi istiyorum. Bu, Twilio SendGrid'in sağlanan tüm e-posta alıcılarına e-posta gönderme talimatlarını aldığı yerdir. Tüm alıcıların e-posta adreslerinden oluşan bir dizi olan $receiver argümanını alır .
Burada, tüm alıcıların e-posta adreslerini veritabanımızdan getirmenin sonucu olarak yeni bir $addresses değişkeni başlattık. Twilio SendGrid, bu adreslerin geçmek için bir anahtar/değer çiftinde olmasını gerektirdiğinden, her alıcının e-postasını almak için $address değerleri arasında dolaşmak zorunda kaldık. Daha sonra bu adresleri daha önce ele aldığımız $this->array_push_assoc() yöntemini kullanarak $receivers dizisine ekledik .
Artık e-postalarımızı gönderebilmeliyiz. Ancak, yöntemi çağırmak için bir rotaya ihtiyacımız var. Bunu yapmak için, routes/api.php aşağıdaki API kodunu ekleyin:
Bunu yaptıktan sonra , daha önce e-posta testimiz için oluşturduğumuz resources/js/components/App.vue değiştirebiliriz. Dosyanın mevcut kodunu aşağıdaki kodla değiştirin.
Yukarıdaki kodda temel bir HTML formu oluşturduk. Hiçbir şey çok süslü değil. Form send() yöntemi çağrılır. Bu bir Vue.js yöntemidir. Gönderilen form alanlarını doğrulamak ve e-posta rotamıza bir API çağrısı yapmak için kullanırız.
Şimdi yapılacak bir şey kaldı: forma biraz stil kazandırın. Bunu yapmak için , form öğeleri zaten Bootstrap sınıflarını kullandığından, Bootstrap stil sayfasını ekleyeceğiz . resources/views/welcome.blade.php head bölümünün sonuna eklenecek kod aşağıdadır .
Ardından, aşağıdaki komutu kullanarak kullanıcı arayüzünü yeniden oluşturmak için karışımı tekrar çalıştırın.
Toplu e-posta gönderebileceğimizi test edin
Sayfayı yenile. Her şey eşit olduğunda, ekranınız yukarıdaki ekran görüntüsü gibi görünmelidir. Öyleyse, toplu e-postalar göndermeye hazırsınız. Bunu yapmak için bir konu, alıcı e-posta adresi ve mesaj gövdesi girin, ardından "E-posta Gönder"i tıklayın. Bundan kısa bir süre sonra, aşağıdaki ekran görüntüsünde olduğu gibi formun üzerinde “E-posta başarıyla gönderildi” ifadesini görmelisiniz.
Twilio SendGrid bir e-posta kuyruğu kullanır. Bu, e-postalarınızın anında teslim edilemeyebileceği anlamına gelir. Her şey eşit olduğunda, e-postanızın daha sonra gönderilmek üzere kuyruğa alındığını söyleyen bir 202 yanıtı döndürmelidir. Çoğu durumda, bu e-postalar günde bir kez gönderilir.
Gözden geçirmek
Tebrikler! Twilio SendGrid Email API, Laravel ve Vue.js ile başarıyla bir posta listesi oluşturdunuz.
Artık bu öğreticiyi tamamladığınıza göre, şunları nasıl yapacağınızı biliyorsunuz:
Ön uç çerçeveniz olarak Vue.js ile bir Laravel projesi oluşturun ve yapılandırın
Laravel'de Twilio SendGrid Email API kullanarak bir posta listesi oluşturun
E-postalarınızın doğru e-posta adresine iletilmesini de sağlayabilirsiniz. GitHub'da bu makalenin kodunun bağlantısını burada bulabilirsiniz .
Benim adım Anumadu Udodiri Moses. PHP ve JavaScript ekosisteminde bir yazılım geliştiricisi ve teknik içerik yaratıcısıyım. Tekiii adında çevrimiçi bir teknoloji severler topluluğu işletiyorum . Bana LinkedIn üzerinden ulaşabilirsiniz .