Utwórz listę mailingową za pomocą interfejsu API SendGrid Email API, Laravel i Vue.js firmy Twilio

Opublikowany: 2021-03-31

Ten samouczek pierwotnie pojawił się na blogu Twilio.

Marketing e-mailowy jest kluczem do sukcesu Twojej strategii komunikacyjnej. Oferując znakomity zwrot z inwestycji i współczynnik konwersji, nie można przecenić znaczenia skutecznego programu pocztowego. Ten samouczek nauczy Cię, jak wysyłać masowe wiadomości e-mail do list ponad 100 adresów e-mail za pomocą interfejsu API poczty e-mail Twilio SendGrid, Laravel i Vue.js.

Zanim zaczniemy

Aby ukończyć ten samouczek, będziesz potrzebować:

    • Kompozytor zainstalowany i gotowy do użycia
    • Podstawowa znajomość frameworka Laravel
    • Lokalnie zainstalowany serwer bazy danych gotowy do użycia
    • Podstawowa znajomość Vue.js
    • Konto Twilio SendGrid
    • npm
    • Node.js (z minimalną wersją 12.14, ale najlepiej najnowszą stabilną lub LTS)

Dlaczego interfejs API poczty e-mail Twilio SendGrid?

Biblioteka Twilio SendGrid upraszcza proces wysyłania wiadomości e-mail. Jest dostępny w wielu językach programowania i frameworkach, w tym PHP, Java, Ruby i Go. Zacznijmy tworzyć naszą aplikację listy mailingowej.

Stwórz naszą listę mailingową

Utwórz nowy projekt Laravel za pomocą poniższego polecenia Composer.

Alternatywnie możesz użyć następującego polecenia, jeśli masz zainstalowany globalnie instalator Laravel w swoim systemie:

Niezależnie od tego, w jaki sposób utworzysz nowy projekt Laravel, po jego utworzeniu przejdź do nowo utworzonego katalogu za pomocą poniższego polecenia:

cd twilioSendGrid

Konfiguracja i konfiguracja .env

Twoja aplikacja będzie miała mały formularz do zbierania e-maili do Twojej listy mailingowej. Aby je przechowywać, utwórz nowy model, kontroler i plik migracji dla aplikacji za pomocą poniższego polecenia.

Powinieneś zobaczyć dane wyjściowe podobne do poniższego przykładu wydrukowane na terminalu.

Teraz zmodyfikuj nowy plik migracji,
database/migrations/2021_02_16_192153_create_email_listings_table.php , aby pasował do poniższego kodu. Po uruchomieniu doda pole e-mail do tabeli email_listings .

Następnie dodaj szczegóły konfiguracji lokalnego serwera bazy danych do .env w katalogu głównym projektu . Oto kopia sekcji DB mojej konfiguracji bazy danych .env dla tego projektu.

Następnie uruchom migrację bazy danych za pomocą następującego polecenia, aby zaktualizować tabelę email_listings .

Obsługuj projekt

Aby upewnić się, że kod działa zgodnie z wymaganiami, uruchom aplikację Laravel za pomocą poniższego polecenia.

Aplikacja powinna uruchomić się dość szybko, a na terminalu powinien pojawić się następujący komunikat:

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

Refaktoryzuj front-end Vue.js

Vue.js znacznie zyskał na popularności w ostatnich miesiącach, do tego stopnia, że ​​jest teraz dostarczany wraz z frameworkiem Laravel jako domyślny framework front-end. W rezultacie będziemy używać Vue.js razem z naszym Laravel API. Aby rozpocząć konfigurację Vue.js w naszej aplikacji, uruchom następujące polecenie:

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

Następnie zmodyfikuj treść domyślnego szablonu widoku,
resources/views/welcome.blade.php , aby zawierał następujący kod:

Tag script na końcu tagu body importuje js/app.js do naszego szablonu Blade , dzięki czemu możemy używać Vue.js w naszej aplikacji. Musimy jednak wprowadzić w nim pewne modyfikacje, aby działał zgodnie z oczekiwaniami. W tym celu zmodyfikuj resources/js/app.js tak, aby wyglądał jak w poniższym przykładzie.

Kod importuje Vue.js, wymagany Bootstrap.js i nasz plik App.vue. App.vue zawiera wszystko, co pojawia się w przeglądarce. Utwórz nowy plik o nazwie App.vue w katalogu komponentów ( resources/js/components ).

Następnie dodaj następujący kod do App.vue :

Po zaktualizowaniu pliku użyj następującego polecenia, aby skompilować nasz kod JavaScript i obserwuj wszelkie przyszłe zmiany.

Po ponownym skompilowaniu kodu, jeśli przeładujemy przeglądarkę, powinna teraz wyglądać jak na poniższym obrazku.

Skonfiguruj Twilio SendGrid

Następnie musimy zainstalować Twilio SendGrid SDK dla Laravel za pomocą poniższego polecenia.

Po zainstalowaniu zestawu SDK przejdź do pulpitu nawigacyjnego Twilio SendGrid . Następnie kliknij „ Ustawienia -> Klucze API. ” Na stronie API Keys kliknij „ Create API Key ' ' in” w prawym górnym rogu. Wprowadź nazwę nowego klucza API, pozostaw „ Uprawnienia klucza API ” ustawione na „ Pełny dostęp ” i kliknij „ Utwórz i wyświetl” w prawym dolnym rogu, aby utworzyć klucz.

Spowoduje to utworzenie nowego klucza API. Skopiuj klucz API, ponieważ będzie on potrzebny do wysyłania e-maili przez SDK.

Uwaga: Następnie w .env dodaj poniższą konfigurację, zastępując {YOUR API KEY} API SendGrid Twilio, który właśnie skopiowałeś.

Zanim przejdziemy dalej, ważne jest, aby wiedzieć, że Twilio SendGrid ma różne poziomy weryfikacji dla różnych kont. Jeśli właśnie utworzono nowe konto Twilio SendGrid lub Twoje konto ma mniej niż 6 miesięcy, Twilio SendGrid wymaga zweryfikowania adresu wysyłania. Jest to adres, który Twoi odbiorcy będą widzieć jako nadawcę wiadomości e-mail.

Jeśli nie zweryfikowałeś adresu e-mail nadawcy usługi Twilio SendGrid, a Twoje konto ma mniej niż 6 miesięcy, podczas próby wysłania wiadomości e-mail może wystąpić błąd serwera z prośbą o wykonanie tego zadania.

Uwaga: Mając to na uwadze, kontynuujmy tworzenie naszej aplikacji do obsługi list mailingowych.

Nasiona e-maili

Nasza aplikacja będzie przechowywać adresy e-mail odbiorców w tabeli bazy danych o nazwie email_listing . Aby zaoszczędzić nam trochę czasu, zasilimy naszą tabelę email_listing adresami e-mail za pomocą Seedera .

Utwórz nowy Seeder za pomocą następującego polecenia:

Otwórz nowy Seeder, znajdujący się w database/seeders/EmailListingSeeder.php , i zmodyfikuj go, zastępując istniejący kod kodem poniżej.

Uwaga: Wysyłanie wiadomości e-mail na te losowo wygenerowane adresy e-mail przy użyciu usługi Twilio SendGrid nie będzie działać. Sugeruję, abyś upewnił się, że używasz legalnych adresów e-mail, które mogą odbierać wiadomości e-mail z Internetu.

Następnie uruchom następujące polecenie, aby zasiać nasze dane.

Wysyłaj masowe wiadomości e-mail

Teraz, gdy mamy e-maile w tabeli email_listings naszej bazy danych, dodajmy funkcję masowego wysyłania e-maili. Wcześniej stworzyliśmy kontroler o nazwie EmailListingController . Teraz zrefaktoryzujemy kod kontrolera, aby wysyłać e-maile na adresy e-mail w naszej bazie danych. Aby to zrobić, zastąp istniejący kod kontrolera EmailListingController kodem poniżej.

Zanim przejdziemy dalej, pozwól mi poświęcić chwilę na wyjaśnienie powyższego kodu. Pierwsza metoda, array_push_assoc() , po prostu dodaje wartości do tablicy w parach klucz/wartość. Dzieje się tak, ponieważ Twilio SendGrid wymaga, aby wszystkie adresy e-mail odbiorców były w parze klucz/wartość. Istnieje wiele sposobów dołączania wartości do tablic w PHP, ale jeśli chodzi o pary klucz/wartość, staje się to trudne. Więc ta metoda przyda się później. Kontynuujmy.

Druga metoda, sendEmail , obsługuje sprawdzanie poprawności formularzy i wysyłanie wiadomości e-mail przy użyciu Twilio SendGrid. Twilio SendGrid ma kilka różnych sposobów wysyłania wiadomości e-mail z aplikacji. Posiadamy również obszerną dokumentację dotyczącą wysyłania e-maili.

Przyjrzyj się bliżej poniższemu kodowi, który jest tylko sekcją powyższego fragmentu kodu. Ta sekcja jest wyłącznie odpowiedzialna za interakcję z interfejsem API Twilio SendGrid.

W tym miejscu inicjujemy nową zmienną $email jako obiekt \SendGrid\Mail\Mail() . Ta zmienna zawiera wiele przydatnych informacji i danych dotyczących procesu wysyłania wiadomości e-mail.

Teraz chcę, żebyśmy zwrócili uwagę na powyższy fragment. W tym miejscu Twilio SendGrid otrzymuje instrukcje wysyłania wiadomości e-mail do wszystkich podanych adresatów wiadomości e-mail. Otrzymuje argument $receiver , który jest tablicą wszystkich adresów e-mail odbiorców.

W tym miejscu zainicjowaliśmy nową zmienną $addresses w wyniku pobrania wszystkich adresów e-mail odbiorców z naszej bazy danych. Ponieważ usługa Twilio SendGrid wymaga, aby te adresy były w parze klucz/wartość do przekazania, musieliśmy przejść przez wartości $address aby uzyskać adres e-mail każdego odbiorcy. Następnie dodaliśmy te adresy do tablicy $receivers przy użyciu metody, którą omówiliśmy wcześniej, $this->array_push_assoc() .

Teraz powinniśmy być w stanie wysyłać nasze e-maile. Potrzebujemy jednak trasy do wywołania metody. Aby to zrobić, dodaj następujący kod API do routes/api.php :

Po wykonaniu tych czynności możemy zmodyfikować resources/js/components/App.vue , które stworzyliśmy wcześniej na potrzeby naszych testów poczty e-mail. Zastąp istniejący kod pliku kodem poniżej.

W powyższym kodzie stworzyliśmy podstawowy formularz HTML. Nic nadzwyczajnego. Po przesłaniu formularza wywoływana jest metoda send() . To jest metoda Vue.js. Używamy go do sprawdzania poprawności przesłanych pól formularza i wykonywania wywołania API do naszej trasy e-mail.

Teraz pozostało tylko jedno: nadać formie nieco stylu. W tym celu dodamy arkusz stylów Bootstrap , ponieważ elementy formularza już korzystają z klas Bootstrap. Oto kod do dodania poniżej na końcu sekcji head resources/views/welcome.blade.php

Następnie uruchom mikser ponownie, aby odbudować interfejs użytkownika, używając poniższego polecenia.

Sprawdź, czy możemy wysyłać zbiorcze wiadomości e-mail

Odśwież stronę. Wszystkie rzeczy są równe, twój ekran powinien wyglądać jak na powyższym zrzucie ekranu. Jeśli tak, możesz wysyłać masowe wiadomości e-mail. Aby to zrobić, wprowadź temat, adres e-mail odbiorcy i treść wiadomości, a następnie kliknij "Wyślij e-maile". Niedługo potem nad formularzem powinien pojawić się komunikat „E-mail wysłany pomyślnie”, jak na poniższym zrzucie ekranu.

Twilio SendGrid używa kolejki e-mail. Oznacza to, że Twoje e-maile mogą nie zostać dostarczone natychmiast. Jeśli wszystko jest równe, powinien zwrócić odpowiedź 202, informującą, że Twój e-mail został umieszczony w kolejce do wysłania w późniejszym czasie. W większości przypadków takie e-maile są wysyłane raz dziennie.

Recenzja

Gratulacje! Pomyślnie utworzyłeś listę mailingową za pomocą interfejsu Twilio SendGrid Email API, Laravel i Vue.js.

Teraz, po ukończeniu tego samouczka, wiesz, jak:

    • Utwórz i skonfiguruj projekt Laravel z Vue.js jako frameworkiem front-end
    • Utwórz listę mailingową za pomocą Twilio SendGrid Email API w Laravel

Możesz również zapewnić dostarczanie wiadomości e-mail na właściwy adres e-mail. Znajdź łącze do kodu tego artykułu w serwisie GitHub tutaj .

Nazywam się Anumadu Udodiri Mojżesz. Jestem programistą i twórcą treści technicznych w ekosystemie PHP i JavaScript. Prowadzę internetową społeczność miłośników technologii o nazwie Tekiii . Możesz skontaktować się ze mną na LinkedIn .