Creați o listă de corespondență utilizând API-ul de e-mail SendGrid de la Twilio, Laravel și Vue.js

Publicat: 2021-03-31

Acest tutorial a apărut inițial pe blogul Twilio.

Marketingul prin e-mail este cheia succesului strategiei tale de comunicare. Oferind un ROI și o rată de conversie stelară, importanța unui program de e-mail eficient nu poate fi subliniată prea mult. Acest tutorial vă va învăța cum să trimiteți e-mailuri în bloc către liste de peste 100 de adrese de e-mail folosind API-ul de e-mail Twilio SendGrid, Laravel și Vue.js.

Înainte de a începe

Pentru a finaliza acest tutorial, veți avea nevoie de următoarele:

    • Composer instalat și gata de utilizare
    • Cunoștințe de bază ale cadrului Laravel
    • Un server de baze de date instalat local, gata de utilizare
    • Cunoștințe de bază despre Vue.js
    • cont Twilio SendGrid
    • npm
    • Node.js (cu o versiune minimă de 12.14, dar în mod ideal cea mai recentă versiune stabilă sau LTS)

De ce API-ul de e-mail Twilio SendGrid?

Biblioteca Twilio SendGrid simplifică procesul de trimitere a e-mailurilor. Este disponibil în mai multe limbaje și cadre de programare, inclusiv PHP, Java, Ruby și Go. Să începem să creăm aplicația noastră pentru lista de corespondență.

Creați lista noastră de corespondență

Creați un nou proiect Laravel folosind următoarea comandă Composer de mai jos.

Alternativ, puteți utiliza următoarea comandă, dacă aveți instalatorul Laravel instalat global pe sistemul dvs.:

Indiferent de modul în care creați noul proiect Laravel, odată creat, treceți la directorul nou creat folosind comanda de mai jos:

cd twilioSendGrid

Configurare și setare .env

Aplicația dvs. va avea un formular mic pentru a colecta e-mailuri pentru lista dvs. de corespondență. Pentru a le stoca, creați un nou model, controler și fișier de migrare pentru aplicație folosind comanda de mai jos.

Ar trebui să vedeți rezultate similare cu exemplul de mai jos tipărite pe terminal.

Acum, modificați noul fișier de migrare,
database/migrations/2021_02_16_192153_create_email_listings_table.php , astfel încât să se potrivească cu codul de mai jos. Când rulează, va adăuga un câmp de e-mail la tabelul email_listings .

Apoi, adăugați detaliile de configurare pentru serverul dumneavoastră de baze de date local la .env în directorul rădăcină al proiectului . Iată o copie a secțiunii DB a configurației bazei de date .env pentru acest proiect.

Apoi, rulați o migrare a bazei de date folosind următoarea comandă pentru a actualiza tabelul email_listings .

Serviți proiectul

Pentru a vă asigura că codul funcționează așa cum este necesar, porniți aplicația Laravel utilizând comanda de mai jos.

Aplicația ar trebui să pornească destul de repede și ar trebui să vedeți următoarele imprimate pe terminal:

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

Refactorizați front-end-ul Vue.js

Vue.js a crescut semnificativ în popularitate în ultimele luni, atât de mult încât acum este livrat împreună cu framework-ul Laravel ca framework front-end implicit. Ca rezultat, vom folosi Vue.js împreună cu API-ul nostru Laravel. Pentru a începe configurarea Vue.js în aplicația noastră, rulați următoarea comandă:

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

Apoi, modificați corpul șablonului de vizualizare implicit,
resources/views/welcome.blade.php , pentru a conține următorul cod:

Eticheta de script de la sfârșitul etichetei body importă js/app.js în șablonul nostru Blade , astfel încât să putem folosi Vue.js în aplicația noastră. Cu toate acestea, trebuie să-i facem câteva modificări, astfel încât să funcționeze conform așteptărilor. Pentru a face asta, modificați resources/js/app.js astfel încât să arate ca exemplul următor.

Codul importă Vue.js, un Bootstrap.js obligatoriu și fișierul nostru App.vue. App.vue deține tot ce apare în browser. Creați un fișier nou numit App.vue în directorul de componente ( resources/js/components ).

Apoi, adăugați următorul cod la App.vue :

Cu fișierul actualizat, utilizați următoarea comandă pentru a compila codul JavaScript și urmăriți orice modificări viitoare.

Cu codul recompilat, dacă reîncărcăm browserul, ar trebui să arate acum ca imaginea de mai jos.

Configurați Twilio SendGrid

Apoi, trebuie să instalăm Twilio SendGrid SDK pentru Laravel utilizând comanda de mai jos.

După instalarea SDK-ului, mergeți la tabloul de bord Twilio SendGrid . Apoi, faceți clic pe „ Setări -> Chei API. ” Pe pagina Chei API, faceți clic pe „ Creare cheie API ' ' în” în colțul din dreapta sus. Introduceți un nume pentru noua cheie API, lăsați „ Permisiunile cheii API ” setat la „ Acces complet ” și faceți clic pe „ Creare și vizualizare ” în colțul din dreapta jos pentru a crea cheia.

Procedând astfel, se creează o nouă cheie API. Copiați cheia API, deoarece veți avea nevoie de ea pentru ca SDK-ul să trimită e-mailuri.

Notă: Apoi, în .env, adăugați configurația de mai jos, înlocuind {YOUR API KEY} cu cheia Twilio SendGrid API pe care tocmai ați copiat-o.

Înainte de a continua, este important să știm că Twilio SendGrid are diferite niveluri de verificări pentru diferite conturi. Dacă tocmai ați creat un nou cont Twilio SendGrid sau contul dvs. are mai puțin de 6 luni, Twilio SendGrid vă solicită să vă verificați adresa de trimitere. Aceasta este adresa pe care destinatarii tăi o vor vedea ca expeditor al e-mailului.

Dacă nu v-ați verificat adresa de e-mail a expeditorului Twilio SendGrid și contul dvs. are mai puțin de 6 luni, este posibil să întâlniți o eroare de server care vă va cere să faceți acest lucru atunci când încercați să trimiteți e-mailuri.

Notă: Acestea fiind spuse, haideți să continuăm construirea aplicației noastre pentru lista de corespondență.

E-mailuri semințe

Aplicația noastră va stoca adresele de e-mail ale destinatarilor într-un tabel al bazei de date numit email_listing . Pentru a ne economisi ceva timp, vom completa tabelul nostru email_listing cu adrese de e-mail utilizând un Seeder .

Creați un nou Seeder folosind următoarea comandă:

Deschideți noul Seeder, aflat în database/seeders/EmailListingSeeder.php și modificați-l, înlocuind codul existent cu codul de mai jos.

Notă: Trimiterea de e-mailuri către aceste adrese de e-mail generate aleatoriu folosind Twilio SendGrid nu va funcționa. Vă sugerez să vă asigurați că utilizați adrese de e-mail legitime care pot primi e-mailuri de pe internet.

Apoi, rulați următoarea comandă pentru a semăna datele noastre.

Trimiteți e-mailuri în bloc

Acum că avem e-mailuri în tabelul email_listings al bazei noastre de date, să adăugăm funcționalitatea de a trimite e-mailuri în bloc. Anterior, am creat un controler numit EmailListingController . Acum vom refactoriza codul controlerului pentru a trimite e-mailuri către adresele de e-mail din baza noastră de date. Pentru a face acest lucru, înlocuiți codul existent al EmailListingController cu codul de mai jos.

Înainte de a continua, permiteți-mi să-mi iau un moment pentru a explica codul de mai sus. Prima metodă, array_push_assoc() , adaugă pur și simplu valori la o matrice în perechi cheie/valoare. Acest lucru se datorează faptului că Twilio SendGrid necesită ca toate adresele de e-mail ale destinatarului să fie într-o pereche cheie/valoare. Există multe moduri în care puteți adăuga valori la matrice în PHP, dar când vine vorba de perechi cheie/valoare, devine dificil. Deci această metodă va fi utilă mai târziu. Să continuăm.

A doua metodă, sendEmail , gestionează validarea formularelor și trimiterea de e-mailuri folosind Twilio SendGrid. Twilio SendGrid are câteva moduri diferite de a trimite e-mailuri dintr-o aplicație. De asemenea, avem o documentație extinsă despre cum să trimiteți e-mailuri.

Aruncă o privire mai atentă la codul de mai jos, care este doar o secțiune a fragmentului de cod de mai sus. Această secțiune este singura responsabilă pentru interacțiunea cu API-ul Twilio SendGrid.

Aici inițializam o nouă variabilă, $email ca \SendGrid\Mail\Mail() . Această variabilă deține o mulțime de informații și date utile despre procesul de trimitere a e-mailului.

Acum, vreau să fim atenți la fragmentul de mai sus. Aici Twilio SendGrid primește instrucțiunile pentru a trimite e-mailuri către toți destinatarii de e-mail furnizați. Primește un argument, $receiver , care este o serie de adrese de e-mail ale tuturor destinatarilor.

Aici, am inițializat o nouă variabilă, $addresses , cu rezultatul preluării tuturor adreselor de e-mail ale destinatarilor din baza noastră de date. Deoarece Twilio SendGrid cere ca aceste adrese să fie într-o pereche cheie/valoare pentru a trece, a trebuit să trecem prin bucla prin valorile $address pentru a obține e-mailul fiecărui receptor. Apoi am adăugat aceste adrese la matricea $receivers folosind metoda pe care am tratat-o ​​mai devreme, $this->array_push_assoc() .

Acum ar trebui să putem trimite e-mailurile noastre. Cu toate acestea, avem nevoie de o rută pentru a apela metoda. Pentru a face asta, adăugați următorul cod API la routes/api.php :

După ce s-a terminat, putem modifica resources/js/components/App.vue , pe care l-am creat mai devreme pentru testarea noastră de e-mail. Înlocuiți codul existent al fișierului cu codul de mai jos.

În codul de mai sus, am creat un formular HTML de bază. Nimic prea fantezist. La trimiterea formularului, este apelată metoda send() . Aceasta este o metodă Vue.js. Îl folosim pentru a valida câmpurile de formular trimise și pentru a efectua un apel API către ruta noastră de e-mail.

Acum, mai rămâne un lucru de făcut: da-i formei un pic de stil. Pentru a face asta, vom adăuga foaia de stil Bootstrap , deoarece elementele formularului folosesc deja clasele Bootstrap. Iată codul de adăugat mai jos, la sfârșitul secțiunii de head din resources/views/welcome.blade.php

Apoi, rulați din nou amestecul pentru a reconstrui interfața de utilizare, folosind comanda de mai jos.

Testați că putem trimite e-mailuri în bloc

Reîncărcați pagina. Toate lucrurile fiind egale, ecranul dvs. ar trebui să arate ca captura de ecran de mai sus. Dacă da, sunteți gata să trimiteți e-mailuri în bloc. Pentru a face acest lucru, introduceți un subiect, adresa de e-mail a destinatarului și corpul mesajului, apoi faceți clic pe „Trimite e-mailuri”. La scurt timp după aceea, ar trebui să vedeți „E-mail trimis cu succes” deasupra formularului, ca în captura de ecran de mai jos.

Twilio SendGrid folosește o coadă de e-mail. Aceasta înseamnă că este posibil ca e-mailurile dvs. să nu fie livrate instantaneu. Toate lucrurile fiind egale, ar trebui să returneze un răspuns 202, care să vă spună că e-mailul dvs. a fost pus în coadă pentru a fi trimis ulterior. În cele mai multe cazuri, aceste e-mailuri sunt trimise o dată pe zi.

Revizuire

Felicitări! Ați creat cu succes o listă de corespondență cu Twilio SendGrid Email API, Laravel și Vue.js.

Acum că ați finalizat acest tutorial, știți cum să:

    • Creați și configurați un proiect Laravel cu Vue.js ca cadru front-end
    • Creați o listă de corespondență folosind Twilio SendGrid Email API în Laravel

De asemenea, puteți asigura livrarea e-mailurilor dumneavoastră la adresa corectă de e-mail. Găsiți un link către codul acestui articol pe GitHub aici .

Numele meu este Anumadu Udodiri Moses. Sunt un dezvoltator de software și un creator de conținut tehnic în ecosistemul PHP și JavaScript. Conduc o comunitate online de iubitori de tehnologie numită Tekiii . Mă puteți contacta pe LinkedIn .