Cómo crear una página de destino con Laravel, Vue.js y Twilio SendGrid

Publicado: 2021-05-27

Este tutorial apareció originalmente en el blog de Twilio.

Las páginas de destino están en todas partes en los negocios modernos.

Las empresas los utilizan para ofrecer un obsequio gratuito a cambio de que alguien se una a una lista de correo, para vender un producto o servicio, y como currículos glorificados.

Las páginas de destino son una excelente solución para este tipo de necesidades comerciales, ya que puede crearlas e implementarlas rápidamente. Saber cómo crearlos también puede ser una gran habilidad para los desarrolladores, ya sea creando páginas de destino para otros o para proyectos personales.

En este tutorial, le mostraré cómo crear una página de destino usando una combinación de Laravel 8, Vue.js y Twilio SendGrid. Es un tutorial razonablemente largo y, al final, estoy seguro de que habrá aprendido mucho.

requisitos previos

Para completar el tutorial, necesitará las siguientes 4 cosas en su entorno de desarrollo local:

    • Experiencia previa con Laravel (idealmente la versión 8.0) y Vue.js (idealmente la serie 3.x)
    • Una cuenta Twilio SendGrid gratuita o de pago
    • Composer instalado globalmente
    • rizo
    • Node.js y npm
    • PHP 7.4 (con las extensiones cURL , mbstring , intl y OpenSSL instaladas y habilitadas)
    • El instalador de Laravel

Descripción general de la aplicación

Antes de sumergirnos y comenzar a construir la aplicación, quiero brindarle una descripción general amplia del flujo de usuarios de la aplicación, que puede ver en la imagen a continuación.

La página de inicio permitirá a los usuarios registrarse para recibir notificaciones sobre las próximas ofertas de la tienda en línea ficticia que creé, The Little PHP Shop, en un tutorial reciente de Twilio SendGrid .

La aplicación tendrá dos rutas, / y /signup , ambas manejadas por un solo controlador llamado LandingPageController .

Cuando el usuario solicite la ruta predeterminada ( / ), verá un formulario que le pedirá que proporcione su dirección de correo electrónico para suscribirse a las notificaciones de The Little PHP Shop .

Después del envío, el cliente y el servidor validarán el formulario. Si la validación del lado del cliente es exitosa, el servidor recibirá una dirección de correo electrónico en forma de objeto JSON . Si pasa la validación del lado del servidor, el usuario está registrado y recibirá un correo electrónico confirmando su registro.

En este punto, el cliente recibirá una respuesta JSON que confirma el éxito del registro. Cuando el cliente reciba esto, ocultará el formulario y mostrará un mensaje confirmando que todo salió bien.

Si la validación del lado del servidor falla o si el usuario no puede suscribirse correctamente, el usuario también recibirá una respuesta JSON. Esta respuesta JSON indicará que el proceso falló y por qué.

Crear la aplicación de back-end

Bootstrap la aplicación Laravel

Lo primero que debemos hacer es arrancar una nueva aplicación de Laravel. Para hacer eso, ejecute el siguiente comando. Siéntase libre de usar cualquiera de los otros métodos de arranque de aplicaciones Laravel si lo prefiere.

La aplicación de arranque se creará en un nuevo directorio llamado landing-page. Cambie al directorio e inicie la aplicación para comprobar que todo funciona ejecutando los siguientes comandos. La aplicación estará disponible en localhost en el puerto 8000.

Si la aplicación se está ejecutando, verá una página similar a la siguiente captura de pantalla. Detenga la ejecución de la aplicación presionando CTRL+C.

Instalar los paquetes necesarios

Con la aplicación iniciada, ahora necesitamos instalar 2 paquetes externos:

    • s-ichikawa/laravel-sendgrid-driver : para enviar correos electrónicos a través de Twilio SendGrid. Esto se debe a que Laravel no proporciona un transporte de correo electrónico nativo para Twilio SendGrid. Elegí esta biblioteca porque es el único paquete diseñado específicamente para Laravel.
    • sendgrid/sendgrid : para agregar un contacto a nuestra lista de contactos en Twilio SendGrid.

Para instalarlos, ejecute el siguiente comando en el directorio raíz del proyecto.

Crear una clave de API

A continuación, debe proporcionar a la aplicación su clave API de Twilio SendGrid. Para hacer eso, después de iniciar sesión en Twilio SendGrid , vaya a “Configuración -> Claves API . " Una vez ahí:

    1. Haga clic en " Crear clave de API " para crear una clave de API.
    2. Asigne un nombre a la nueva clave API.
    3. Acepte el permiso de clave de API predeterminado de " Acceso completo " . ”
    4. Haga clic en " Crear y ver " . ”

Después de crear la clave de API, cópiela para poder usarla en un paso posterior.

Luego, abra el archivo .env en el directorio raíz del proyecto y agregue el par clave/valor a continuación al final del archivo. Reemplace YOUR-KEY-HERE con la clave API que creó y copió. Además, actualice 2 claves existentes en el archivo: MAIL_MAILER a sendgrid y MAIL_FROM_ADDRESS a una dirección de correo electrónico de su elección.

Nota: Crear un correo

Ahora necesitamos crear una clase que se pueda enviar por correo que almacene el asunto del correo electrónico, configure la vista para representar el cuerpo del correo electrónico y especifique el transporte de correo a usar. Para hacer eso, ejecute el siguiente comando en el directorio raíz del proyecto.

Se creará un nuevo archivo, llamado Subscribed.php, en app/Mail . Copie y pegue el código siguiente en lugar del código existente del archivo.

La mayor parte de la acción en un envío por correo ocurre en el método de build , que llama a una serie de otros métodos para establecer:

    • La plantilla a representar para crear el cuerpo del correo electrónico ( view )
    • El asunto del correo electrónico ( subject )

El método de build finaliza llamando a sendgrid , lo que garantiza que el transporte Twilio SendGrid envíe el correo electrónico.

Crear el controlador de la página de destino

Ahora es el momento de crear un controlador para manejar las solicitudes a las 2 rutas de la aplicación. Para hacer eso, ejecute el siguiente comando. Cuando se completa el comando , se habrá creado un nuevo archivo, llamado LandingPageController.php, en app/Http/Controllers .

Con el archivo creado, abra app/Http/Controllers/LandingPageController.php y agréguele 2 métodos. En primer lugar, el método show del ejemplo a continuación, luego el método de registro . He vinculado al método de signup ya que es un poco demasiado largo para incluirlo directamente en el artículo.

Después de eso, agregue las siguientes declaraciones de uso para el método de signup .

Me saltaré el método de show , ya que debería explicarse por sí mismo, y me sumergiré en el método de signup . El método comienza usando la fachada del validador de Laravel para validar los datos enviados en la solicitud, recuperados llamando a $request->all() , contra un conjunto de reglas de validación con el resultado almacenado en $validator .

Para pasar la validación , el cuerpo de la solicitud debe contener un elemento llamado email cuyo valor sea una dirección de correo electrónico legítima. Además, he agregado las reglas de validación de Solicitud de comentario (RFC) y Sistema de nombres de dominio (DNS) específicas del correo electrónico porque:

    • La validación de RFC garantiza que el correo electrónico sea válido de acuerdo con el RFC de correo electrónico. Sin embargo, incluso si pasa esa validación, es posible que el correo electrónico no se pueda enrutar universalmente, como matthew o matthew@lan .
    • La validación de DNS garantiza que la dirección de correo electrónico no contenga nombres de DNS de nivel superior reservados, o mDNS, ni espacios de nombres de DNS privados, como test , local , lan , intranet e internal .

Nota: Si el resultado de llamar al método fails devuelve false , se devuelve un objeto JSON que contiene una lista de errores de validación de formularios. Estos se pueden recuperar llamando al método de errors de $validator . Además, el código de estado de la respuesta se establece en 422 para mostrar que la solicitud no se pudo procesar.

Sin embargo, si la validación tuvo éxito, es hora de agregar la dirección de correo electrónico a nuestra lista de contactos. Para hacerlo, debe iniciar un nuevo objeto SendGrid , que requiere nuestra clave API Twilio SendGrid que recuperó de la variable de entorno 'SENDGRID_API_KEY' .

Después de eso, se envía una solicitud PUT al extremo Twilio SendGrid API /marketing/contacts/ . A esa solicitud, pasa una matriz de contactos, aunque con un solo contacto donde especificamos la dirección de correo electrónico del nuevo contacto.

Si el código de estado de la respuesta no es 202, entonces sabemos que algo salió mal. Si esto sucede, una respuesta JSON regresa al cliente que contiene 3 propiedades:

    • status : establecido en false
    • message : Establecido en "suscripción fallida"
    • reason : inicializado con los errores devueltos por la llamada a la API de Twilio SendGrid

Si el usuario se agregó con éxito a nuestra lista de contactos, es hora de enviarle un correo electrónico de confirmación. Para ello, el código utiliza dos métodos en la fachada de correo de Laravel to configurar el destinatario y send el correo electrónico.

Recupere el destinatario de la dirección de correo electrónico enviada en el cuerpo de la solicitud, fácilmente recuperable llamando al método de input de $request . El resto de las propiedades del correo electrónico están en Subscribed, el objeto que se puede enviar por correo que creamos anteriormente, y se pasa al método de send de la fachada del correo.

El intento de enviar el correo electrónico está envuelto en un bloque de prueba/captura, en caso de que haya un problema al enviar el correo electrónico, como intentar enviar desde una dirección de correo electrónico que no figura como " Verificada " en la " Verificación de remitente único ". mesa.

Si hay un error, una respuesta JSON regresa al cliente que contiene 3 propiedades, similar a antes:

    • status : establecido en false
    • message : Establecido en "registro fallido"
    • reason : inicializado con el mensaje de la excepción

En este punto todo ha tenido éxito, por lo que es hora de hacérselo saber al usuario. El código lo hace devolviendo una respuesta JSON nuevamente, pero esta vez con solo 2 propiedades: status establecido en true y message establecido en " el registro se completó ".

¡Es pequeño pero efectivo !

Nota: hay formas más Crear las plantillas requeridas

Ahora es el momento de crear las plantillas que usará nuestra aplicación. En resources/views , vamos a crear 2 directorios ( correo electrónico y diseños ) y 3 archivos ( landing.blade.php , email/subscribed.blade.php y layouts/app.blade.php ).

Aquí hay una representación visual rápida de la estructura de archivos y directorios que crearemos.

Elegí esta estructura principalmente porque me encanta el patrón de vista de dos pasos . Si no está familiarizado con él, esencialmente divide las vistas en 2 partes. Hay una parte para cualquier contenido que sea coherente en todas las solicitudes ( layouts/app.blade.php ) y una parte para el contenido específico de la solicitud ( landing.blade.php ).

Puede parecer una exageración en una aplicación tan pequeña, pero he descubierto que este enfoque facilita la creación de plantillas más fáciles de mantener.

Ejecute los siguientes comandos para crear la estructura de archivos y directorios.

Nota: Actualizar recursos/vistas/diseños/app.blade.php

Abra resources/views/layouts/app.blade.php y pegue el código a continuación. La mayor parte es un código de plantilla de Laravel bastante estándar , que puede encontrar en resources/views/welcome.blade.php .

Sin embargo, vale la pena señalar las 2 etiquetas finales en la sección principal. Aquí, vinculamos la hoja de estilo CSS que crearemos más adelante en el tutorial y almacenamos un token CSRF , que Laravel generará para nosotros (más sobre eso en breve) como una metaetiqueta.

No vamos a tocar resources/views/landing.blade.php y resources/views/email/subscribed.blade.php ahora, ya que los cubriremos más adelante en el tutorial.

Actualizar la tabla de enrutamiento

Solo necesitamos hacer 2 cambios en la tabla de enrutamiento: cambiar el controlador de la ruta predeterminada y agregar una nueva ruta para manejar las suscripciones. Para hacer eso, reemplace la ruta existente en rutas/web.php con el código a continuación.

Además, agregue la declaración de uso para LandingPageController también:

Actualizar la configuración de Laravel

Con las rutas definidas, ahora necesitamos actualizar 3 de los archivos de configuración principales de Laravel: config/cors.php , config/mail.php y config/services.php .

Actualizar config/cors.php

El primer archivo que necesitamos actualizar es config/cors.php . Esto es para que las solicitudes XHR que hacemos en el front-end de Vue.js puedan realizar con éxito solicitudes a la aplicación Laravel de back-end.

Para habilitar eso, actualice la matriz del elemento de paths en la matriz devuelta en config/cors.php para que coincida con el código de ejemplo a continuación.

Actualizar config/mail.php

A continuación, debemos actualizar config/mail.php para registrar sendgrid como un transporte de correo válido. Para hacer eso, agregue la configuración a continuación a la matriz del elemento de mailers al final de la lista existente de transportes.

Actualizar config/services.php

El cambio final que tenemos que hacer es a config/services.php , para registrar sendgrid como un servicio con el contenedor de inyección de dependencia (DI) de Laravel. Para hacer eso, agregue la configuración a continuación al final de la matriz devuelta en el archivo.

Crear la aplicación Vue.js

Ahora que hemos creado el back-end de la aplicación, es hora de crear la aplicación front-end Vue.js. Antes de que podamos hacer eso, necesitamos instalar varias dependencias.

Afortunadamente, no hay tantos, solo Vue.js y Laravel Mix , con soporte para Tailwind CSS , PostCSS y Lodash , para simplificar la construcción de la interfaz.

Para instalarlos, ejecute los siguientes comandos en el directorio raíz del proyecto.

Actualizar recursos/vistas/landing.blade.php

No he incluido el contenido completo de resources/views/email/landing.blade.php ya que es bastante largo y ocuparía demasiado espacio aquí en el artículo. Puede encontrarlo en el repositorio de GitHub para este proyecto. Copie y pegue el contenido en la plantilla.

Voy a pasar a través de las partes más relevantes del archivo. Primero, visualizaremos lo que está pasando en el archivo para que sea más fácil apreciar lo que está pasando.

Estamos creando una pequeña aplicación Vue.js, llamada app , compuesta de 2 partes:

    1. El formulario de la página de destino que ve el usuario cuando aterriza inicialmente en la página.
    2. Una confirmación posterior al envío que aparece en lugar del formulario después de un envío exitoso del formulario

Comencemos con el formulario de la página de destino. Contiene 2 partes:

    1. Un encabezado y una descripción de marketing para convencer al lector de que proporcione su dirección de correo electrónico.
    2. Un formulario que el usuario puede completar y enviar, que puede generar errores cuando el envío del formulario falla en la validación o la solicitud del lado del servidor falla

La sección directamente debajo es la primera parte. No hay mucho, excepto por la directiva V-show , que muestra condicionalmente el elemento si el submitted es true .

La siguiente sección usa un componente personalizado de Vue.js, error-item , para reducir la cantidad de código requerido en la plantilla y hacer que la representación de errores sea más fácil de mantener. Discutiremos este componente en breve.

Esta sección utiliza una directiva V-if para representar condicionalmente el elemento en función de si hay errores o no. Utiliza el atributo @submit.prevent de Vue.js para pasar el control del proceso normal de envío de formularios al método processForm . Utiliza la directiva Blade CSRF de Laravel para representar un token CSRF en un campo de formulario oculto.

Otra cosa que vale la pena señalar es la directiva V-model en el campo de entrada de correo electrónico, v-model="form.email" . Esto crea un enlace bidireccional entre el elemento de formulario y la propiedad form.email en el código JavaScript. Volveremos sobre esto en breve.

Nota: La sección final contiene el mensaje de confirmación que se mostrará al enviar correctamente el formulario. Podemos mantenerlo simple simplemente especificando un encabezado y un cuerpo de texto.

Crear el código JavaScript

A continuación, trabajaremos con el JavaScript que impulsará el front-end. Es un poco largo, así que copie el código del repositorio de GitHub y péguelo en el lugar del código existente en resources/js/app.js . Luego, lo revisaremos.

El código comienza definiendo sendGridApp , que forma la base de nuestra aplicación Vue.js y contiene 3 propiedades de datos:

    • errors : Esta es una lista de errores de validación de formularios
    • form.email : Esto almacena la dirección de correo electrónico que proporciona el usuario
    • submitted : Esto determina si el formulario se ha enviado con éxito o no. Si es false , se mostrará el formulario. Si es true , se mostrará el mensaje de confirmación en lugar del formulario.

A continuación, definimos los métodos de sendGridApp . Comenzando con processForm , desencadenado desde el envío del formulario, podemos verificar si el correo electrónico está configurado. Si no es así, establece un mensaje de error y devuelve falso para que se detenga el envío del formulario. Si es así, llama a subscribeUser para suscribir al usuario a la lista.

subscribeUser realiza una solicitud POST a /signup , con un cuerpo JSON, que contiene una copia codificada en JSON del formulario enviado.

Es importante tener en cuenta los encabezados de solicitud. Esto se debe a que se aseguran de que Laravel interprete la solicitud como una solicitud XHR, no como un envío de formulario normal ( Content-Type y Accept ), y que la solicitud es válida porque tiene un token CSRF ( X-CSRF-TOKEN ).

Si estuviéramos creando una aplicación puramente del lado del servidor utilizando solo plantillas de Blade, solo necesitaríamos incluir la directiva CSRF de Blade , y Blade haría el resto. Sin embargo, no es tan simple con JavaScript.

El código usa el método then de Promise para recuperar el JSON en la respuesta (si la solicitud fue exitosa) o arroja un error (si no fue exitoso). Si la solicitud tiene éxito, then llama al siguiente método.

Aquí, se establece en submitted a verdadero, lo que hace varias cosas:

    • Oculta el formulario
    • Muestra el mensaje de confirmación.
    • Borra la dirección de correo electrónico ingresada en el formulario

Finalmente, si algo sale mal, detecta el error y lo registra en la Consola.

Finalmente, se crea una nueva aplicación Vue.js, llamada app , con la const que acabamos de definir. El código de creación de la aplicación define un pequeño componente para generar errores de formulario y monta la aplicación.

Crear la hoja de estilo

A continuación, en resources/css/app.css , agregue el código a continuación. Incluye los estilos base , components y utilities de Tailwind y crea varios estilos base adicionales para algunos elementos que son comunes en las plantillas de vista.

Actualizar recursos/vistas/correo electrónico/suscrito.blade.php

No he incluido el contenido completo de resources/views/email/subscribed.blade.php , ya que es bastante largo y ocuparía demasiado espacio aquí en el artículo. Puede encontrarlo en el repositorio de GitHub para este proyecto. Cópielo y pegue el contenido en la plantilla.

Ahora, repasaremos las partes más relevantes del archivo.

La plantilla amplía resources/views/layouts/app.blade.php , configurando el contenido para la sección de content cuando se representa. El contenido en sí es relativamente simple, simplemente agradecer al usuario por suscribirse y terminar dándole un enlace para darse de baja.

Cree la aplicación front-end

En este punto, estamos casi listos para probar la aplicación. Sin embargo, necesitamos construir el front-end y sus archivos de soporte antes de que podamos hacer eso. Con mucho gusto, Laravel Mix hace que esto sea bastante trivial. Para comenzar, tenemos que actualizar un archivo de configuración y crear un segundo archivo de configuración.

Actualizar webpack.mix.js

Debido a que Laravel Mix viene incluido con Laravel, su archivo de configuración, webpack.mix.js, ya está disponible y contiene una configuración básica.

Sin embargo, necesitamos hacerle 2 adiciones. La primera adición es compatible con los componentes de un solo archivo de Laravel Mix para Vue.js. La segunda adición es compatible con Tailwind CSS . Agregue los cambios resaltados a continuación a webpack.mix.js .

Crear tailwind.config.js

Debido a que estamos usando Tailwind CSS para diseñar el front-end y debido a que acabamos de agregar soporte para él al archivo de configuración de Laravel Mix, necesitamos proporcionar el archivo de configuración tailwind.config.js para compilarlo correctamente.

Cree un nuevo archivo llamado tailwind.config.js en el directorio raíz del proyecto, luego copie y pegue el código a continuación en él.

Esto le indica a PostCSS que analice todos los archivos PHP, Blade, JavaScript y Vue.js en los directorios anteriores y que cree una lista de todos los estilos Tailwind CSS descubiertos allí. Usando esa lista, elimina los estilos no utilizados de la hoja de estilo CSS predeterminada de Tailwind, generando una hoja de estilo de alrededor de 20,5 KB de tamaño.

Esto es útil porque el archivo predeterminado sin comprimir tiene un tamaño de 3566,2 KB . Esto es demasiado grande para un sitio web que necesita ser eficaz.

Con los archivos en su lugar y configurados, en la terminal en el directorio raíz del proyecto, ejecute el siguiente comando.

Este comando ejecuta Laravel Mix diciéndole que:

    1. Genere public/js/app.js desde resources/js/app.js
    2. Genere public/css/app.css desde resources/css/app.css

Esto solo debería tardar unos segundos en completarse y mostrar lo siguiente en el terminal.

Probar la aplicación

Con el código en su lugar y todo conectado, es hora de probar que funciona correctamente. Para hacer eso, inicie la aplicación ejecutando el siguiente comando.

Luego, abra http://localhost:8000 en el navegador de su elección. Antes de completar el formulario, abra las Herramientas para desarrolladores y cambie a la pestaña Consola . Con todo listo, rellene el formulario con una dirección de correo electrónico válida.

Debería ver el formulario oculto y reemplazado por el mensaje de confirmación. Revisa tu bandeja de entrada para ver el correo electrónico de confirmación. Luego, vea su lista Todos los contactos para confirmar que el usuario se suscribió correctamente. Si tiene éxito, debería verlos en la lista, similar a la captura de pantalla a continuación.

Ahora intente nuevamente haciendo clic en el enlace "Comenzar de nuevo" y enviando el formulario sin ingresar una dirección de correo electrónico o después de ingresar una dirección de correo electrónico no válida. Debería ver un mensaje de error aplicable en la pantalla.

Así es como se crea una página de aterrizaje usando Laravel 8, Vue.js y Twilio SendGrid

Hemos explicado cómo convertir un sitio estándar de Laravel 8 en una página de inicio básica, una que puede inscribir a un usuario en una lista de correo cuando envía su dirección de correo electrónico.

Si bien no pusimos mucho énfasis en ello, también utilizamos Laravel Mix y Tailwind CSS para agilizar el proceso de creación de una interfaz personalizada y de alto rendimiento para nuestra aplicación.

Si desea obtener más información sobre lo que hace que una página de destino sea excelente, consulte este artículo de Copyblogger . De lo contrario, puede encontrar todo el código para la aplicación que construimos en esta serie en GitHub .

Matthew Setter es un editor de PHP en el equipo de Twilio Voices y (naturalmente) un desarrollador de PHP. También es el autor de Mezzio Essentials . Cuando no está escribiendo código PHP, está editando excelentes artículos de PHP aquí en Twilio. Puede encontrarlo en [email protected], y es settermjd en Twitter y GitHub .