Uno de los principales usos que se suele dar al backend es el de enviar correos electrónicos, ya sea para que el usuario pueda autenticar su sesión o incluso recibir notificaciones sobre nuevo contenido, entre otras muchas razones, con este tutorial aprenderás a realizar pruebas de correo electrónico empleando Mailtrap para posteriormente utilizar un servicio para enviar correos.

Requerimientos

• Contar con una cuenta creada en mailtrap.io.
• Proyecto de Laravel versión 7 en adelante.

Mailtrap

¿Qué es Mailtrap?

Básicamente, es un servicio que nos permite realizar pruebas de correo electrónico, además de ofrecernos otras herramientas que nos permitirán optimizar los mismos.

Credenciales y configuraciones

Cuando accedemos a nuestra cuenta por primera vez podremos observar que contamos con un inbox creado por defecto, según nuestras necesidades podremos crear más e incluso organízalos creando proyectos.

¿Qué es un inbox?

Un inbox es una bandeja de entrada donde podremos gestionar nuestros correos, además de encontrar herramientas que nos permitirán mejorar los mismos.

Si accedemos a nuestro inbox nos encontraremos del lado izquierdo una lista de los correos que hemos recibido y por el otro las configuraciones para una multitud de integraciones.

Desplegamos el dropdown y seleccionamos Laravel para posteriormente copiar la configuración.

Laravel

Credenciales y configuraciones

Ahora toca dirigirnos a nuestro proyecto de Laravel y abrir nuestro archivo de configuración .env donde sustituiremos las siguientes líneas con el contenido que copiamos en el paso anterior.

Con esto ya tendríamos aplicada la configuración necesaria para que Laravel se conecte a los servicios de Mailtrap.

Nota

Cuando ya estés por subir tu proyecto a producción deberás sustituir la configuración de Mailtrap por la de tu servicio de correo electrónico.

Ejemplo

En esta prueba crearemos un pequeño formulario de contacto el cual enviaremos por correo electrónico.

Creación de formulario

Para crear nuestro formulario nos dirigiremos a una, view en mi caso será la que ya viene incluida welcome.blade.php y agregamos el siguiente código:

<form method="post" action="{{ url('store-form') }}">
  <label for="name">Nombre</label>
  <input type="text" name="name" /> <br />

  <label for="subject">Asunto</label>
  <input type="text" name="subject" /> <br />

  <label for="message">Mensaje</label>
  <textarea name="message" rows="10" cols="50"></textarea> <br />

  <input type="submit" value="Enviar" />
</form>

Sustituimos:

• store-form por la ruta deseada para enviar nuestro formulario, esta ruta la crearemos en el siguiente paso.

El siguiente código es opcional cuya única función es lograr que el formulario se vea más presentable.

<form method="post" action="{{ url('store-form') }}">
  @csrf
  <section class="margin-bottom" style="display: flex">
    <div style="display: flex; flex-basis: 70px">
      <label for="name">Nombre</label>
    </div>

    <div>
      <input type="text" name="name" />
    </div>
  </section>

  <section class="margin-bottom" style="display: flex">
    <div style="display: flex; flex-basis: 70px">
      <label for="subject">Asunto</label>
    </div>

    <div>
      <input type="text" name="subject" />
    </div>
  </section>

  <section class="margin-bottom" style="display: flex">
    <div style="display: flex; flex-basis: 70px">
      <label for="message">Mensaje</label>
    </div>

    <div>
      <input type="text" name="message" />
    </div>
  </section>

  <input type="submit" value="Enviar" />
</form>

Ruta

Una vez contemos con nuestro formulario creado, pasaremos agregar nuestra ruta, la cual será la encargada de entregar el contenido de nuestro formulario a Laravel.

Accedemos a web.php el cual se encuentra en routes y agregamos lo siguiente:

Route::post("store-form", [Controller::class, "sendMail"]);

Y sustituimos:

• store-form por el nombre de nuestra ruta
• Controller por el nombre de nuestro controlador
• sendMail por el nombre de la función.

Crear plantilla de correo

Crearemos un directorio con el nombre emails en la siguiente ruta resources>views el cual contendrá nuestras plantillas de correo electrónico, estas plantillas son del tipo Blade lo que significa que podremos usar HTML y PHP en el mismo archivo tal cual como lo haríamos en cualquier otra view de Laravel.

Agregamos una nueva plantilla con el nombre emailTest y en ella agregamos lo siguiente:

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <h1>Este es un mensaje de prueba.<br></h1>
    <P>
        Nombre: {{ $name }} <br>
        Mensaje: {{ $messageContent }}
    </P>
</body>

</html>

Lo que se encuentra entre {{}} son variables de PHP las cuales son proveídas por la función encargada de construir nuestro correo electrónico, esta función la crearemos en el siguiente paso.

Agregar nuestra función

En nuestro controlador crearemos una función la cual contendrá el código para enviar nuestro correo electrónico.

function sendMail(Request $request)
{
  $name = $request->name;
  $subject = $request->subject;
  $messageContent = $request->message;

  $messageData = ["to" => "contacto@dowar.xyz", "subject" => $subject];

  Mail::send(
    "emails.emailTest",
    ["name" => $name, "messageContent" => $messageContent], //Parametros
    function ($message) use ($messageData) {
      //Cuerpo del correo
      $message->to($messageData["to"]);
      $message->subject($messageData["subject"]);
    }
  );
}

Sustituimos:

• contacto@dowar.xyz por el correo electrónico del destinatario.
• emailTest por el nombre de nuestra plantilla.

Los parámetros son opcionales y estos nos servirían para agregar información a nuestro correo, en este ejemplo se está usando como parámetros el nombre y el mensaje y para usarlos dentro de nuestra plantilla los colocaremos entre {{}} tal como se mostró en el paso anterior.

Prueba de funcionamiento

Ahora solamente bastará con llenar el formulario y darle en enviar para posteriormente dirigirnos a nuestro inbox de Mailtrap donde podremos observar nuestro correo electrónico, cuando finalicemos nuestras pruebas bastará con sustituir la configuración de mailtrap que agregamos en el archivo .env por la de nuestro proveedor de correo electrónico.

Con esto habremos finalizado este tutorial, pero antes de irme quiero agradecerles por llegar hasta el final y además recordarles que ante cualquier duda pueden contactarme sin ningún problema.

Artículo de DowarDev Blog