Crea una mailing list utilizzando l'API di posta elettronica SendGrid di Twilio, Laravel e Vue.js

Pubblicato: 2021-03-31

Questo tutorial è apparso originariamente sul blog di Twilio.

L'email marketing è la chiave del successo della tua strategia di comunicazione. Offrendo un ROI e un tasso di conversione stellari, l'importanza di un programma di posta elettronica efficace non può essere sottovalutata. Questo tutorial ti insegnerà come inviare e-mail in blocco a elenchi di oltre 100 indirizzi e-mail utilizzando l'API e-mail di Twilio SendGrid, Laravel e Vue.js.

Prima di iniziare

Per completare questo tutorial, avrai bisogno di quanto segue:

    • Compositore installato e pronto per l'uso
    • Conoscenza di base del framework Laravel
    • Un server di database installato localmente pronto per l'uso
    • Conoscenza di base di Vue.js
    • Account Twilio SendGrid
    • npm
    • Node.js (con una versione minima di 12.14, ma idealmente l'ultima versione stabile o LTS)

Perché l'API di posta elettronica di Twilio SendGrid?

La libreria Twilio SendGrid semplifica il processo di invio delle e-mail. È disponibile in più linguaggi di programmazione e framework, inclusi PHP, Java, Ruby e Go. Iniziamo a creare la nostra applicazione per la mailing list.

Crea la nostra mailing list

Crea un nuovo progetto Laravel usando il seguente comando Composer di seguito.

In alternativa, puoi utilizzare il seguente comando, se hai il programma di installazione di Laravel installato a livello globale sul tuo sistema:

Indipendentemente da come crei il nuovo progetto Laravel, una volta creato, passa alla directory appena creata usando il comando seguente:

cd twilioSendGrid

Configurazione e configurazione .env

La tua applicazione avrà un piccolo modulo per raccogliere le email per la tua mailing list. Per archiviarli, creare un nuovo modello, controller e file di migrazione per l'applicazione utilizzando il comando seguente.

Dovresti vedere un output simile all'esempio seguente stampato sul terminale.

Ora, modifica il nuovo file di migrazione,
database/migrations/2021_02_16_192153_create_email_listings_table.php , in modo che corrisponda al codice seguente. Quando viene eseguito, aggiungerà un campo e-mail alla tabella email_listings .

Quindi, aggiungi i dettagli di configurazione per il tuo server di database locale a .env nella directory principale del progetto . Ecco una copia della sezione DB della mia configurazione del database .env per questo progetto.

Quindi, esegui una migrazione del database utilizzando il comando seguente per aggiornare la tabella email_listings .

Servi il progetto

Per assicurarti che il codice funzioni come richiesto, avvia l'applicazione Laravel utilizzando il comando seguente.

L'applicazione dovrebbe avviarsi abbastanza rapidamente e dovresti vedere quanto segue stampato sul terminale:

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

Refactoring del front-end Vue.js

Vue.js è diventato molto popolare negli ultimi mesi, tanto che ora viene distribuito insieme al framework Laravel come framework front-end predefinito. Di conseguenza, utilizzeremo Vue.js insieme alla nostra API Laravel. Per iniziare a configurare Vue.js nella nostra applicazione, esegui il comando seguente:

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

Quindi, modifica il corpo del modello di visualizzazione predefinito,
resources/views/welcome.blade.php , per contenere il seguente codice:

Il tag script alla fine del tag body importa js/app.js nel nostro modello Blade in modo da poter utilizzare Vue.js nella nostra applicazione. Tuttavia, dobbiamo apportare alcune modifiche in modo che funzioni come previsto. Per farlo, modifica resources/js/app.js in modo che assomigli al seguente esempio.

Il codice importa Vue.js, un Bootstrap.js richiesto e il nostro file App.vue. App.vue contiene tutto ciò che appare nel browser. Crea un nuovo file denominato App.vue nella directory dei componenti ( resources/js/components ).

Quindi, aggiungi il seguente codice ad App.vue :

Con il file aggiornato, usa il comando seguente per compilare il nostro codice JavaScript e osserva eventuali modifiche future.

Con il codice ricompilato, se ricarichiamo il browser, ora dovrebbe apparire come l'immagine qui sotto.

Configura Twilio SendGrid

Successivamente, è necessario installare l'SDK Twilio SendGrid per Laravel utilizzando il comando seguente.

Dopo aver installato l'SDK, vai alla dashboard di Twilio SendGrid . Quindi, fai clic su " Impostazioni -> Chiavi API. ” Nella pagina Chiavi API, fai clic su “ Crea chiave API ' ' in” nell'angolo in alto a destra. Inserisci un nome per la tua nuova chiave API, lascia " Autorizzazioni chiave API " impostato su " Accesso completo " e fai clic su " Crea e visualizza " nell'angolo in basso a destra per creare la chiave.

In questo modo viene creata una nuova chiave API. Copia la tua chiave API, poiché ti servirà affinché l'SDK invii e-mail.

Nota: Quindi, in .env, aggiungi la configurazione di seguito, sostituendo {YOUR API KEY} con la chiave API Twilio SendGrid che hai appena copiato.

Prima di continuare, è importante sapere che Twilio SendGrid ha diversi livelli di verifica per account diversi. Se hai appena creato un nuovo account Twilio SendGrid o il tuo account ha meno di 6 mesi, Twilio SendGrid richiede che tu verifichi il tuo indirizzo di invio. Questo è l'indirizzo che i tuoi destinatari vedranno come mittente dell'e-mail.

Se non hai verificato l'indirizzo e-mail del mittente di Twilio SendGrid e il tuo account ha meno di 6 mesi, potresti riscontrare un errore del server che ti chiede di farlo quando tenti di inviare e-mail.

Nota: Detto questo, continuiamo a creare la nostra applicazione per la mailing list.

Email seme

La nostra applicazione memorizzerà gli indirizzi email dei destinatari in una tabella di database chiamata email_listing . Per farci risparmiare un po' di tempo, semineremo la nostra tabella email_listing con gli indirizzi email usando un Seeder .

Crea un nuovo Seeder usando il seguente comando:

Apri il nuovo Seeder, che si trova in database/seeders/EmailListingSeeder.php , e modificalo, sostituendo il codice esistente con il codice sottostante.

Nota: L'invio di e-mail a questi indirizzi e-mail generati casualmente utilizzando Twilio SendGrid non funzionerà. Ti suggerisco di assicurarti di utilizzare indirizzi e-mail legittimi in grado di ricevere e-mail da Internet.

Quindi, esegui il comando seguente per eseguire il seeding dei nostri dati.

Invia email in blocco

Ora che abbiamo le email nella tabella email_listings del nostro database, aggiungiamo la funzionalità per inviare email in blocco. In precedenza, abbiamo creato un controller chiamato EmailListingController . Ora eseguiremo il refactoring del codice del controller per inviare e-mail agli indirizzi e-mail nel nostro database. Per fare ciò, sostituisci il codice esistente di EmailListingController con il codice seguente.

Prima di continuare, lasciami prendere un momento per spiegare il codice sopra. Il primo metodo, array_push_assoc() , aggiunge semplicemente valori a un array in coppie chiave/valore. Questo perché Twilio SendGrid richiede che tutti gli indirizzi email dei destinatari siano in una coppia chiave/valore. Esistono molti modi per aggiungere valori agli array in PHP, ma quando si tratta di coppie chiave/valore, diventa complicato. Quindi questo metodo tornerà utile in seguito. Continuiamo.

Il secondo metodo, sendEmail , gestisce la convalida dei moduli e l'invio di e-mail utilizzando Twilio SendGrid. Twilio SendGrid ha un paio di modi diversi per inviare e-mail da un'applicazione. Abbiamo anche un'ampia documentazione su come inviare e-mail.

Dai un'occhiata più da vicino al codice qui sotto, che è solo una sezione del frammento di codice sopra. Questa sezione è l'unica responsabile dell'interazione con l'API Twilio SendGrid.

Qui è dove inizializziamo una nuova variabile, $email come \SendGrid\Mail\Mail() . Questa variabile contiene molte informazioni e dati utili sul processo di invio dell'e-mail.

Ora, voglio che prestiamo attenzione allo snippet sopra. È qui che Twilio SendGrid riceve le istruzioni per inviare e-mail a tutti i destinatari forniti. Riceve un argomento, $receiver , che è un array di tutti gli indirizzi e-mail dei destinatari.

Qui, abbiamo inizializzato una nuova variabile, $addresses , con il risultato di recuperare tutti gli indirizzi email dei destinatari dal nostro database. Poiché Twilio SendGrid richiede che questi indirizzi si trovino in una coppia chiave/valore per passare, abbiamo dovuto scorrere i valori di $address per ottenere l'e-mail di ciascun destinatario. Abbiamo quindi aggiunto questi indirizzi all'array $receivers utilizzando il metodo descritto in precedenza, $this->array_push_assoc() .

Ora dovremmo essere in grado di inviare le nostre e-mail. Tuttavia, abbiamo bisogno di un percorso per chiamare il metodo. Per farlo, aggiungi il seguente codice API a routes/api.php :

Fatto ciò, possiamo modificare resources/js/components/App.vue , che abbiamo creato in precedenza per il nostro test di posta elettronica. Sostituisci il codice esistente del file con il codice seguente.

Nel codice sopra, abbiamo creato un modulo HTML di base. Niente di troppo elegante. Al momento dell'invio del modulo, viene chiamato il metodo send() . Questo è un metodo Vue.js. Lo usiamo per convalidare i campi del modulo inviato ed effettuare una chiamata API al nostro percorso di posta elettronica.

Ora, c'è ancora una cosa da fare: dare un po' di stile alla forma. Per fare ciò, aggiungeremo il foglio di stile Bootstrap , poiché gli elementi del modulo utilizzano già le classi Bootstrap. Ecco il codice da aggiungere di seguito alla fine della sezione head di resources/views/welcome.blade.php

Quindi, esegui nuovamente il mix per ricostruire l'interfaccia utente, utilizzando il comando seguente.

Verifica che possiamo inviare e-mail in blocco

Ricarica la pagina. A parità di condizioni, il tuo schermo dovrebbe apparire come lo screenshot qui sopra. In tal caso, sei pronto per inviare e-mail in blocco. Per fare ciò, inserisci un argomento, l'indirizzo e-mail del destinatario e il corpo del messaggio, quindi fai clic su "Invia e-mail". Poco dopo, dovresti vedere "Email inviata correttamente" apparire sopra il modulo, come nello screenshot qui sotto.

Twilio SendGrid utilizza una coda di posta elettronica. Ciò significa che le tue e-mail potrebbero non essere consegnate all'istante. A parità di condizioni, dovrebbe restituire una risposta 202, dicendoti che la tua email è stata messa in coda per l'invio in un secondo momento. Nella maggior parte dei casi, queste e-mail vengono inviate una volta al giorno.

Revisione

Congratulazioni! Hai creato con successo una mailing list con l'API Twilio SendGrid Email, Laravel e Vue.js.

Ora che hai completato questo tutorial, sai come:

    • Crea e configura un progetto Laravel con Vue.js come framework front-end
    • Crea una mailing list utilizzando Twilio SendGrid Email API in Laravel

Puoi anche garantire la consegna delle tue e-mail all'indirizzo e-mail corretto. Trova un collegamento al codice per questo articolo su GitHub qui .

Mi chiamo Anumadu Udodiri Moses. Sono uno sviluppatore di software e un creatore di contenuti tecnici nell'ecosistema PHP e JavaScript. Gestisco una comunità online di amanti della tecnologia chiamata Tekiii . Puoi contattarmi su LinkedIn .