Créer une liste de diffusion à l'aide de l'API de messagerie SendGrid de Twilio, de Laravel et de Vue.js

E-mails de démarrage

Notre application stockera les adresses e-mail des destinataires dans une table de base de données appelée email_listing . Pour nous faire gagner du temps, nous allons ensemencer notre table email_listing avec des adresses e-mail à l'aide d'un Seeder .

Créez un nouveau Seeder à l'aide de la commande suivante :

Ouvrez le nouveau Seeder, situé dans database/seeders/EmailListingSeeder.php , et modifiez-le en remplaçant le code existant par le code ci-dessous.

Remarque : L'envoi d'e-mails à ces adresses e-mail générées de manière aléatoire à l'aide de Twilio SendGrid ne fonctionnera pas. Je vous suggère de vous assurer que vous utilisez des adresses e-mail légitimes qui peuvent recevoir des e-mails d'Internet.

Ensuite, exécutez la commande suivante pour ensemencer nos données.

Envoyer des e-mails en masse

Maintenant que nous avons des emails dans la table email_listings de notre base de données, ajoutons la fonctionnalité pour envoyer des emails en masse. Plus tôt, nous avons créé un contrôleur appelé EmailListingController . Nous allons maintenant refactoriser le code du contrôleur pour envoyer des e-mails aux adresses e-mail de notre base de données. Pour ce faire, remplacez le code existant d'EmailListingController par le code ci-dessous.

Avant de continuer, permettez-moi de prendre un moment pour expliquer le code ci-dessus. La première méthode, array_push_assoc() , ajoute simplement des valeurs à un tableau dans des paires clé/valeur. En effet, Twilio SendGrid exige que toutes les adresses e-mail des destinataires soient dans une paire clé/valeur. Il existe de nombreuses façons d'ajouter des valeurs à des tableaux en PHP, mais lorsqu'il s'agit de paires clé/valeur, cela devient délicat. Cette méthode vous sera donc utile plus tard. Continuons.

La deuxième méthode, sendEmail , gère la validation du formulaire et l'envoi d'e-mails à l'aide de Twilio SendGrid. Twilio SendGrid propose plusieurs façons d'envoyer des e-mails à partir d'une application. Nous avons également une documentation complète sur la façon d'envoyer des e-mails.

Examinez de plus près le code ci-dessous, qui n'est qu'une section de l'extrait de code ci-dessus. Cette section est uniquement responsable de l'interaction avec l'API Twilio SendGrid.

C'est ici que nous initialisons une nouvelle variable, $email en tant \SendGrid\Mail\Mail() . Cette variable contient de nombreuses informations et données utiles sur le processus d'envoi d'e-mails.

Maintenant, je veux que nous prêtions attention à l'extrait ci-dessus. C'est là que Twilio SendGrid reçoit les instructions pour envoyer des e-mails à tous les destinataires d'e-mails fournis. Il reçoit un argument, $receiver , qui est un tableau de toutes les adresses e-mail des destinataires.

Ici, nous avons initialisé une nouvelle variable, $addresses , avec pour résultat de récupérer toutes les adresses e-mail des destinataires de notre base de données. Étant donné que Twilio SendGrid exige que ces adresses soient dans une paire clé/valeur pour passer, nous avons dû parcourir les valeurs de $address pour obtenir l'e-mail de chaque destinataire. Nous avons ensuite ajouté ces adresses au tableau $receivers en utilisant la méthode décrite précédemment, $this->array_push_assoc() .

Maintenant, nous devrions être en mesure d'envoyer nos e-mails. Cependant, nous avons besoin d'une route pour appeler la méthode. Pour ce faire, ajoutez le code API suivant à routes/api.php :

Cela fait, nous pouvons modifier resources/js/components/App.vue , que nous avons créé précédemment pour nos tests de messagerie. Remplacez le code existant du fichier par le code ci-dessous.

Dans le code ci-dessus, nous avons créé un formulaire HTML de base. Rien d'extraordinaire. Lors de la soumission du formulaire, la méthode send() est appelée. Il s'agit d'une méthode Vue.js. Nous l'utilisons pour valider les champs de formulaire soumis et effectuer un appel API à notre route de courrier électronique.

Maintenant, il ne reste plus qu'une chose à faire : donner un peu de style à la forme. Pour ce faire, nous allons ajouter la feuille de style Bootstrap , car les éléments du formulaire utilisent déjà les classes Bootstrap. Voici le code à ajouter ci-dessous à la fin de la section head de resources/views/welcome.blade.php

Ensuite, exécutez à nouveau le mixage pour reconstruire l'interface utilisateur, à l'aide de la commande ci-dessous.

Testez que nous pouvons envoyer des e-mails en masse

Recharge la page. Toutes choses étant égales par ailleurs, votre écran devrait ressembler à la capture d'écran ci-dessus. Si tel est le cas, vous êtes prêt à envoyer des e-mails en masse. Pour ce faire, saisissez un sujet, l'adresse e-mail du destinataire et le corps du message, puis cliquez sur "Envoyer des e-mails". Peu de temps après, vous devriez voir apparaître "E-mail envoyé avec succès" au-dessus du formulaire, comme dans la capture d'écran ci-dessous.

Twilio SendGrid utilise une file d'attente de messagerie. Cela signifie que vos e-mails pourraient ne pas être livrés instantanément. Toutes choses étant égales par ailleurs, il devrait renvoyer une réponse 202, vous indiquant que votre e-mail a été mis en file d'attente pour être envoyé ultérieurement. Dans la plupart des cas, ces e-mails sont envoyés une fois par jour.

La revue

Toutes nos félicitations! Vous avez créé avec succès une liste de diffusion avec l'API Twilio SendGrid Email, Laravel et Vue.js.

Maintenant que vous avez terminé ce didacticiel, vous savez comment :

• • Créez et configurez un projet Laravel avec Vue.js comme framework frontal
  • Créer une liste de diffusion à l'aide de l'API Twilio SendGrid Email dans Laravel

Vous pouvez également assurer la livraison de vos e-mails à la bonne adresse e-mail. Trouvez un lien vers le code de cet article sur GitHub ici .

Je m'appelle Anumadu Udodiri Moïse. Je suis développeur de logiciels et créateur de contenu technique dans l'écosystème PHP et JavaScript. Je dirige une communauté en ligne d'amateurs de technologie appelée Tekiii . Vous pouvez me joindre sur LinkedIn .