Как создать целевую страницу с помощью Laravel, Vue.js и Twilio SendGrid

Опубликовано: 2021-05-27

Это руководство изначально появилось в блоге Twilio.

Целевые страницы повсюду в современном бизнесе.

Предприятия используют их, чтобы предложить бесплатную раздачу в обмен на то, что кто-то присоединился к списку рассылки, чтобы продать продукт или услугу, а также в качестве прославленных резюме.

Целевые страницы — отличное решение для таких бизнес-потребностей, поскольку их можно быстро создавать и развертывать. Знание того, как их создавать, также может быть отличным навыком для разработчиков, независимо от того, создают ли они целевые страницы для других или для личных проектов.

В этом руководстве я покажу вам, как создать целевую страницу, используя комбинацию Laravel 8, Vue.js и Twilio SendGrid. Это достаточно длинное руководство, и я уверен, что к его концу вы многому научитесь.

Предпосылки

Для выполнения этого руководства вам потребуются следующие 4 компонента в вашей локальной среде разработки:

    • Предыдущий опыт работы с Laravel (в идеале версия 8.0) и Vue.js (в идеале серия 3.x)
    • Бесплатная или платная учетная запись Twilio SendGrid
    • Композитор установлен глобально
    • CURL
    • Node.js и нпм
    • PHP 7.4 (с установленными и включенными расширениями cURL , mbstring , intl и OpenSSL )
    • Установщик Laravel

Обзор приложений

Прежде чем мы углубимся и начнем создавать приложение, я хочу дать вам общий обзор пользовательского потока приложения, который вы можете увидеть на изображении ниже.

Целевая страница позволит пользователям подписаться на уведомления о предстоящих предложениях от вымышленного интернет-магазина, который я создал — The Little PHP Shop — в недавнем руководстве по Twilio SendGrid .

Приложение будет иметь два маршрута, / и /signup , оба обрабатываются одним контроллером с именем LandingPageController .

Когда пользователь запрашивает маршрут по умолчанию ( / ), он увидит форму, в которой ему будет предложено указать свой адрес электронной почты, чтобы подписаться на уведомления от The Little PHP Shop .

После отправки клиентская и серверная стороны проверяют форму. Если проверка на стороне клиента прошла успешно, сервер получит адрес электронной почты в виде объекта JSON . Если проверка на стороне сервера проходит успешно, пользователь регистрируется и получает электронное письмо с подтверждением регистрации.

На этом этапе клиент получит ответ JSON, подтверждающий успешную регистрацию. Когда клиент получит это, он скроет форму и отобразит сообщение, подтверждающее, что все прошло хорошо.

Если проверка на стороне сервера не пройдена или если пользователь не может успешно подписаться, пользователь также получит ответ JSON. Этот ответ JSON будет указывать как на сбой процесса, так и на его причину.

Создайте серверное приложение

Загрузите приложение Laravel

Первое, что нам нужно сделать, это загрузить новое приложение Laravel. Для этого выполните команду ниже. Не стесняйтесь использовать любой из других методов начальной загрузки приложений Laravel, если вы предпочитаете их.

Загруженное приложение будет создано в новом каталоге с именем лендинг-страница. Перейдите в каталог и запустите приложение, чтобы убедиться, что все работает, выполнив приведенные ниже команды. Приложение будет доступно на локальном хосте через порт 8000.

Если приложение запущено, вы увидите страницу, похожую на скриншот ниже. Остановите работающее приложение, нажав CTRL+C.

Установите необходимые пакеты

Теперь, когда приложение загружено, нам нужно установить 2 внешних пакета:

    • s-ichikawa/laravel-sendgrid-driver : для отправки электронной почты через Twilio SendGrid. Это связано с тем, что Laravel не предоставляет собственный транспорт электронной почты для Twilio SendGrid. Я выбрал эту библиотеку, так как это единственный пакет, разработанный специально для Laravel.
    • sendgrid/sendgrid : чтобы добавить контакт в наш список контактов в Twilio SendGrid.

Чтобы установить их, выполните приведенную ниже команду в корневом каталоге проекта.

Создать ключ API

Затем вам необходимо предоставить приложению свой ключ API Twilio SendGrid. Для этого после входа в Twilio SendGrid перейдите в «Настройки -> Ключи API ». " Когда-то:

    1. Нажмите « Создать ключ API », чтобы создать ключ API.
    2. Дайте новому ключу API имя.
    3. Примите разрешение ключа API по умолчанию « Полный доступ » . ”
    4. Нажмите « Создать и просмотреть » . ”

После создания ключа API скопируйте его, чтобы использовать на следующем этапе.

Затем откройте файл .env в корневом каталоге проекта и добавьте указанную ниже пару ключ/значение в конец файла. Замените YOUR-KEY-HERE ключом API, который вы создали и скопировали. Кроме того, обновите 2 существующих ключа в файле: MAIL_MAILER на sendgrid и MAIL_FROM_ADDRESS на адрес электронной почты по вашему выбору.

Примечание. Создать почтовую рассылку

Теперь нам нужно создать почтовый класс , в котором будет храниться тема письма, установить представление для отображения тела письма и указать используемый почтовый транспорт. Для этого выполните приведенную ниже команду в корневом каталоге проекта.

Новый файл с именем Subscribed.php будет создан в папке app/Mail . Скопируйте и вставьте приведенный ниже код вместо существующего кода файла.

Большинство действий в почтовом сообщении происходит в методе build , который вызывает ряд других методов для установки:

    • Шаблон для рендеринга для создания тела письма ( view )
    • Тема письма ( subject )

Метод build завершается вызовом sendgrid , который гарантирует, что транспорт Twilio SendGrid отправит электронное письмо.

Создайте контроллер целевой страницы

Теперь пришло время создать контроллер для обработки запросов к двум маршрутам приложения. Для этого выполните команду ниже. Когда команда будет выполнена, в app/Http/Controllers будет создан новый файл с именем LandingPageController.php .

Создав файл, откройте app/Http/Controllers/LandingPageController.php и добавьте в него 2 метода. Сначала метод show из примера ниже, затем метод sign-up . Я дал ссылку на метод signup , так как он слишком длинный, чтобы его можно было напрямую включить в статью.

После этого добавьте следующие операторы использования для метода signup .

Я пропущу метод show , так как он не требует пояснений, и перейду к методу signup . Метод начинается с использования фасада валидатора Laravel для проверки данных, отправленных в запросе, полученных путем вызова $request->all() , по набору правил проверки с результатом, хранящимся в $validator .

Чтобы пройти проверку , тело запроса должно содержать элемент с именем email , значением которого является допустимый адрес электронной почты. Кроме того, я добавил правила проверки запроса комментариев (RFC) и системы доменных имен (DNS) для электронной почты, потому что:

    • Проверка RFC гарантирует, что электронная почта действительна в соответствии с RFC электронной почты. Однако, даже если оно пройдет эту проверку, электронное письмо может быть не универсально маршрутизируемым, например, matthew или matthew@lan .
    • Проверка DNS гарантирует, что адрес электронной почты не содержит зарезервированных имен DNS верхнего уровня или mDNS, а также частных пространств имен DNS, таких как test , local , lan , intranet и internal .

Примечание. Если результат вызова метода fails возвращает false , возвращается объект JSON, содержащий список ошибок проверки формы. Их можно получить, вызвав метод errors $validator . Кроме того, код состояния ответа установлен на 422 , чтобы показать, что запрос не может быть обработан.

Однако, если проверка прошла успешно, пришло время добавить адрес электронной почты в наш список контактов. Для этого вам нужно инициировать новый объект SendGrid , для которого требуется наш ключ Twilio SendGrid API, который вы получили из переменной среды 'SENDGRID_API_KEY' .

После этого запрос PUT отправляется на конечную точку Twilio SendGrid API /marketing/contacts/ . На этот запрос передается массив контактов, хотя и только с одним контактом, где мы указываем адрес электронной почты нового контакта.

Если код состояния ответа не 202, то мы знаем, что что-то пошло не так. В этом случае клиенту возвращается ответ JSON, содержащий 3 свойства:

    • status : установлено значение false
    • message : установите «подписка не удалась»
    • reason : Инициализирован с ошибками, возвращенными из вызова API Twilio SendGrid.

Если пользователь был успешно добавлен в наш список контактов, пришло время отправить ему электронное письмо с подтверждением. Для этого код использует два метода на почтовом фасаде Laravel, to установить получателя и send для отправки электронной почты.

Получить получателя с адреса электронной почты, отправленного в теле запроса, легко получить, вызвав метод input $request . Остальные свойства электронной почты находятся в Subscribed, почтовом объекте , который мы создали ранее и передали методу send почтового фасада.

Попытка отправить электронное письмо заключена в блок try/catch на тот случай, если возникнет проблема с отправкой электронного письма, например попытка отправки с адреса электронной почты, который не указан как « Проверенный » в « Проверке одного отправителя » . стол.

В случае ошибки клиенту возвращается ответ JSON, содержащий 3 свойства, как и раньше:

    • status : установлено значение false
    • message : установите «регистрация не удалась»
    • reason : Инициализировано с сообщением об исключении

На данный момент все удалось, поэтому пришло время сообщить об этом пользователю. Код делает это, снова возвращая ответ JSON, но на этот раз только с двумя свойствами: для status установлено значение true и для message установлено значение « регистрация завершена ».

Он небольшой, но эффективный !

Примечание. Создайте необходимые шаблоны

Теперь пришло время создать шаблоны, которые будет использовать наше приложение. В разделе resources/views мы собираемся создать 2 каталога ( электронная почта и макеты ) и 3 файла ( landing.blade.php , email/subscribed.blade.php и layouts/app.blade.php ).

Вот краткое визуальное представление структуры файлов и каталогов, которую мы создадим.

Я выбрал эту структуру в первую очередь потому, что мне нравится шаблон двухэтапного представления . Если вы с ним не знакомы, то он по сути делит представления на 2 части. Существует одна часть для любого контента, согласованного для всех запросов ( layouts/app.blade.php ), и одна часть для контента, специфичного для запроса ( landing.blade.php ).

Это может показаться излишним для такого маленького приложения, но я обнаружил, что такой подход упрощает создание более удобных в сопровождении шаблонов.

Запустите приведенные ниже команды, чтобы создать структуру файлов и каталогов.

Примечание. Обновить ресурсы/представления/макеты/app.blade.php

Откройте resources/views/layouts/app.blade.php и вставьте в него приведенный ниже код. По большей части это довольно стандартный код шаблона Laravel , который вы можете найти в resources/views/welcome.blade.php .

Однако последние 2 тега в разделе head заслуживают внимания. Здесь мы связываем таблицу стилей CSS, которую мы создадим позже в этом руководстве, и сохраняем токен CSRF , который Laravel сгенерирует для нас (подробнее об этом чуть позже) в качестве метатега.

Мы не будем сейчас касаться ресурсов/представлений/landing.blade.php и ресурсов/представлений/email/subscribed.blade.php , так как мы рассмотрим их позже в этом руководстве.

Обновите таблицу маршрутизации

Нам нужно всего лишь внести 2 изменения в таблицу маршрутизации: изменить обработчик маршрута по умолчанию и добавить новый маршрут для обработки регистрации. Для этого замените существующий маршрут в route /web.php кодом ниже.

Кроме того, добавьте оператор использования для LandingPageController:

Обновить конфигурацию Laravel

После определения маршрутов нам нужно обновить 3 основных файла конфигурации Laravel: config/cors.php , config/mail.php и config/services.php .

Обновить конфиг/cors.php

Первый файл, который нам нужно обновить, это config/cors.php . Это сделано для того, чтобы запросы XHR, которые мы делаем во внешнем интерфейсе Vue.js, могли успешно выполнять запросы к внутреннему приложению Laravel.

Чтобы включить это, обновите массив элемента paths в массиве, возвращаемом в config/cors.php , чтобы он соответствовал приведенному ниже примеру кода.

Обновить config/mail.php

Далее нам нужно обновить config/mail.php , чтобы зарегистрировать sendgrid в качестве допустимого почтового транспорта. Для этого добавьте приведенную ниже конфигурацию в массив элемента mailers в конце существующего списка транспортов.

Обновить config/services.php

Последнее изменение, которое мы должны внести, — это config/services.php , чтобы зарегистрировать sendgrid как службу в контейнере внедрения зависимостей (DI) Laravel. Для этого добавьте приведенную ниже конфигурацию в конец массива, возвращаемого в файле.

Создайте приложение Vue.js

Теперь, когда мы создали серверную часть приложения, пришло время создать внешнее приложение Vue.js. Прежде чем мы сможем это сделать, нам нужно установить несколько зависимостей.

К счастью, их не так много, только Vue.js и Laravel Mix с поддержкой Tailwind CSS , PostCSS и Lodash для упрощения создания внешнего интерфейса.

Чтобы установить их, запустите приведенные ниже команды в корневом каталоге проекта.

Обновить ресурсы/представления/landing.blade.php

Я не включил полное содержимое resources/views/email/landing.blade.php, так как оно довольно длинное и заняло бы слишком много места в этой статье. Вы можете найти его в репозитории GitHub для этого проекта. Скопируйте и вставьте содержимое в шаблон.

Я собираюсь пройти через наиболее важные части файла. Во-первых, мы будем визуализировать то, что происходит в файле, чтобы было легче оценить, что происходит.

Мы создаем небольшое приложение Vue.js под названием app , состоящее из 2 частей:

    1. Форма целевой страницы, которую видит пользователь, когда впервые попадает на страницу.
    2. Подтверждение после отправки, которое появляется вместо формы после успешной отправки формы.

Начнем с формы целевой страницы. Он содержит 2 части:

    1. Заголовок и маркетинговое описание, чтобы убедить читателя указать свой адрес электронной почты .
    2. Форма, которую пользователь может заполнить и отправить, что может отображать ошибки, когда отправка формы не проходит проверку или не выполняется запрос на стороне сервера.

Раздел непосредственно ниже является частью первой. В этом нет ничего особенного, за исключением директивы V-show , которая условно отображает элемент, если submitted значение true .

В следующем разделе используется пользовательский компонент Vue.js error-item , чтобы уменьшить объем кода, необходимого в шаблоне, и сделать отрисовку ошибок более удобной в сопровождении. Мы обсудим этот компонент в ближайшее время.

В этом разделе используется директива V-if для условной визуализации элемента в зависимости от наличия ошибок. Он использует атрибут @submit.prevent , чтобы передать управление обычным процессом отправки формы методу processForm . Он использует директиву Laravel Blade CSRF для отображения токена CSRF в скрытом поле формы.

Еще одна вещь, на которую стоит обратить внимание, это директива V-model в поле ввода электронной почты, v-model="form.email" . Это создает двустороннюю привязку между элементом формы и свойством form.email в коде JavaScript. Мы скоро вернемся к этому.

Примечание. Последний раздел содержит подтверждающее сообщение, которое будет отображаться после успешной отправки формы. Мы можем упростить его, просто указав заголовок и основной текст.

Создайте код JavaScript

Далее мы проработаем JavaScript, который будет управлять внешним интерфейсом. Он немного длинный, поэтому скопируйте код из репозитория GitHub и вставьте его вместо существующего кода в resources/js/app.js . Тогда мы пройдем через это.

Код начинается с определения sendGridApp , который формирует основу нашего приложения Vue.js и содержит 3 свойства данных:

    • errors : это список ошибок проверки формы.
    • form.email : здесь хранится адрес электронной почты, который предоставляет пользователь.
    • submitted : это определяет, была ли форма успешно отправлена ​​или нет. Если это false , форма будет отображаться. Если это true , то вместо формы будет отображаться подтверждающее сообщение.

Далее мы определяем sendGridApp . Начиная с processForm , запускаемого при отправке формы, мы можем проверить, установлено ли электронное письмо. Если это не так, он устанавливает сообщение об ошибке и возвращает false, чтобы останавливать отправку формы. Если это так, то он вызывает subscribeUser , чтобы подписать пользователя на список.

subscribeUser отправляет запрос POST к /signup с телом JSON, содержащим копию отправленной формы в кодировке JSON.

Важно отметить заголовки запроса. Это связано с тем, что они гарантируют, что Laravel интерпретирует запрос как запрос XHR, а не как обычную отправку формы ( Content-Type и Accept ), и что запрос действителен, поскольку он имеет токен CSRF ( X-CSRF-TOKEN ).

Если бы мы создавали чисто серверное приложение, используя только шаблоны Blade, нам нужно было бы только включить директиву Blade CSRF , а Blade сделал бы все остальное. Однако с JavaScript не все так просто.

Код использует метод then объекта Promise для получения JSON в ответе (если запрос выполнен успешно) или выдает ошибку (если запрос не выполнен). Если запрос выполнен успешно, вызывается следующий метод then .

Здесь он устанавливает submitted true, что делает несколько вещей:

    • Скрывает форму
    • Отображает подтверждающее сообщение
    • Очищает адрес электронной почты, введенный в форму

Наконец, если что-то пойдет не так, он перехватывает ошибку и записывает ее в консоль.

Наконец, создается новое приложение Vue.js с именем app и константой, которую мы только что определили. Код создания приложения определяет небольшой компонент для отображения ошибок формы и монтирует приложение.

Создайте таблицу стилей

Затем в resources/css/app.css добавьте приведенный ниже код. Он включает base стили, components и utilities Tailwind, а также создает несколько дополнительных базовых стилей для некоторых элементов, которые являются общими для всех шаблонов представлений.

Обновите ресурсы/представления/электронную почту/subscribed.blade.php

Я не включил полное содержимое resources/views/email/subscribed.blade.php , так как оно довольно длинное и заняло бы слишком много места здесь, в статье. Вы можете найти его в репозитории GitHub для этого проекта. Скопируйте его и вставьте содержимое в шаблон.

Теперь мы рассмотрим наиболее важные части файла.

Шаблон расширяет resources/views/layouts/app.blade.php , устанавливая содержимое для раздела content при отображении. Сам контент относительно прост, просто поблагодарите пользователя за подписку и в конце дайте пользователю ссылку для отказа от подписки.

Создайте интерфейсное приложение

На данный момент мы почти готовы протестировать приложение. Однако прежде чем мы сможем это сделать, нам нужно создать внешний интерфейс и вспомогательные файлы. К счастью, Laravel Mix делает это довольно тривиально. Для начала нам нужно обновить один файл конфигурации и создать второй файл конфигурации.

Обновить webpack.mix.js

Поскольку Laravel Mix поставляется в комплекте с Laravel, его файл конфигурации, webpack.mix.js, уже доступен и содержит базовую конфигурацию.

Однако нам нужно сделать 2 дополнения к нему. Первое дополнение поддерживает однофайловые компоненты Laravel Mix для Vue.js. Второе дополнение поддерживает Tailwind CSS . Добавьте выделенные ниже изменения в webpack.mix.js .

Создайте файл tailwind.config.js

Поскольку мы используем Tailwind CSS для стилизации внешнего интерфейса и поскольку мы только что добавили его поддержку в файл конфигурации Laravel Mix, нам необходимо предоставить файл конфигурации tailwind.config.js для его правильной сборки.

Создайте новый файл с именем tailwind.config.js в корневом каталоге проекта, затем скопируйте и вставьте в него приведенный ниже код.

Это указывает PostCSS проанализировать все файлы PHP, Blade, JavaScript и Vue.js в указанных выше каталогах и создать список всех обнаруженных в них стилей Tailwind CSS. Используя этот список, он удаляет все неиспользуемые стили из таблицы стилей Tailwind CSS по умолчанию, создавая таблицу стилей размером около 20,5 КБ.

Это удобно, поскольку несжатый файл по умолчанию имеет размер 3566,2 КБ . Это слишком много для веб-сайта, который должен быть производительным.

С файлами на месте и настроенными, в терминале в корневом каталоге проекта выполните команду ниже.

Эта команда запускает Laravel Mix, сообщая ему:

    1. Создайте public/js/app.js из ресурсов/js/app.js
    2. Создайте public/css/app.css из ресурсов/css/app.css

Это должно занять всего несколько секунд, чтобы завершить и отобразить следующее на терминале.

Протестируйте приложение

Когда код на месте и все подключено, пришло время проверить, работает ли он правильно. Для этого запустите приложение, выполнив команду ниже.

Затем откройте http://localhost:8000 в выбранном вами браузере. Прежде чем заполнять форму, откройте Инструменты разработчика и перейдите на вкладку Консоль . Когда все будет готово, заполните форму, указав действующий адрес электронной почты.

Вы должны увидеть, что форма скрыта и заменена подтверждающим сообщением. Проверьте свой почтовый ящик на наличие письма с подтверждением. Затем просмотрите список «Все контакты» и убедитесь, что пользователь успешно подписался. В случае успеха вы должны увидеть их в списке, как на скриншоте ниже.

Теперь попробуйте еще раз, нажав ссылку «Начать сначала» и отправив форму без ввода адреса электронной почты или после ввода недействительного адреса электронной почты. Вы должны увидеть соответствующее сообщение об ошибке.

Вот как создать целевую страницу с помощью Laravel 8, Vue.js и Twilio SendGrid.

Мы рассмотрели, как превратить стандартный сайт Laravel 8 в базовую целевую страницу, которая может зарегистрировать пользователя в списке рассылки, когда он отправит свой адрес электронной почты.

Не уделяя этому особого внимания, мы также использовали Laravel Mix и Tailwind CSS, чтобы упростить процесс создания пользовательского, производительного внешнего интерфейса для нашего приложения.

Если вы хотите узнать больше о том, что делает целевую страницу отличной, ознакомьтесь с этой статьей от Copyblogger . В противном случае вы можете найти весь код приложения, которое мы создадим в этой серии, на GitHub .

Мэтью Сеттер — редактор PHP в команде Twilio Voices и (естественно) разработчик PHP. Он также является автором Mezzio Essentials . Когда он не пишет PHP-код, он редактирует отличные статьи о PHP здесь, в Twilio. Вы можете найти его по адресу [email protected], а также он settermjd в Twitter и GitHub .