Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Creando su startup: Entregando la invitación a la reunión

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Using the Mailgun Store(): A Temporary Mailbox for Your App's Incoming Email
Building Your Startup With PHP: Email Commands

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image
What You'll Be Creating

Introducción

Este tutorial forma parte de la serie Creando su Startup con  PHP en Envato Tuts +. En esta serie, te estoy guiando a través del lanzamiento de un inicio de concepto a realidad utilizando mi aplicación de Meeting Planner como un ejemplo de la vida real. Cada paso a lo largo del camino, voy a lanzar el código de Meeting Planner como código abierto del que puede aprender. También me ocuparé de asuntos relacionados con el inicio de negocios a medida que surjan.

¿Qué cubre este episodio?

En este tutorial, cubriremos el envío por correo electrónico de la invitación al participante, implementando la apariencia básica de su contenido y considerando la construcción de vínculos para los destinatarios para que puedan responder.

Todo el código para Meeting Planner está escrito en el marco Yii2 para PHP. Si desea obtener más información sobre Yii2, consulte mi serie paralela Programación con Yii2 en Envato Tuts +.

Sólo un recordatorio, yo sí participo en los comentarios de los temas. Estoy especialmente interesado si tiene diferentes enfoques, ideas adicionales o desea sugerir temas para futuros tutoriales. También puede contactarme en Twitter @reifman.

Invitaciones

Es emocionante llegar a esta etapa de la entrega de las primeras invitaciones, pero todavía requiere mucho trabajo. En el último episodio, actualizé las vistas de la reunión para que puedan dar soporte al organizador o a los participantes.

La mayor parte del trabajo en este episodio se centrará en la creación de correos electrónicos HTML en Yii y en la entrega de éstos mediante programación. Sin embargo, cuando comencé a escribir el código para esto, me encontré con todas las complejidades que el sistema debe soportar pronto. Por ejemplo, todos los enlaces de las invitaciones necesitan autenticar de forma segura a los participantes mientras considerando que nunca se han registrado para Meeting Planner. Parte de esto lo voy a ahorrar para el próximo episodio.

Esencialmente, tenemos que hacer la aplicación consciente de quién está viendo la página de la reunión y luego personalizar la apariencia y los comandos disponibles. Yii hace la mayor parte de esto bastante fácil, pero hay un montón de detalles involucrados.

Una breve advertencia sobre la experiencia del usuario

Permítanme decirles que por adelantado, hay un montón de experiencia de usuario rework y pulido que tendrá que ser hecho iterativamente a lo largo del tiempo en el camino a la creación del producto mínimo viable (MVP). La mayor parte de lo que estoy construyendo ahora mismo es la funcionalidad básica para conseguir que el alfa funcione para el uso real. Sé que parece duro en lugares y no siempre parece tan intuitivo como quieres. También hay ineficiencias de codificación que tendrán que ser optimizadas en el futuro.

Por favor, siéntase libre de enviar sus pensamientos y comentarios a continuación, y los tomaré en cuenta para el trabajo en curso.

Éstos son algunos de los desafíos que surgieron con el trabajo de este episodio:

  • El diseño básico y el contenido del correo electrónico de invitación
  • ¿Cómo se entregarán las invitaciones? p.ej. ¿Qué plataforma o proveedor de correo electrónico?
  • ¿Qué comandos vinculados se ofrecerán en el correo electrónico? ¿Y el organizador podría limitar algunas de las facultades otorgadas a los participantes?
  • Respuesta funcional a los comandos vinculados dentro del correo electrónico de invitación
  • Administrar las visitas de usuarios invitados que aún no se han registrado, por ejemplo: Lo que pueden acceder y ¿que no pueden?
  • Manejando la experiencia del usuario para recoger nombres amistosos de los asistentes
  • Registro de las respuestas a la convocatoria de la reunión y luego la creación de la capacidad de supervisión y notificación para informar al organizador
  • Planificación de la infraestructura para los correos electrónicos futuros que muestren las actualizaciones a medida que cambian las configuraciones de reuniones y cuando el tiempo se aproxima (y pasa), por ejemplo: Cambiar notificaciones, recordatorios de reuniones, aceptar respuestas como notas nuevas, etc.

Como escribí el código para este episodio, he construido una infraestructura para algunos de los elementos anteriores y dejó algunos de ellos para discutir en futuros episodios. Para comenzar, vamos a sumergirnos en el diseño de la invitación.

Diseño y contenido de la invitación

Inicialmente, tuve que preguntar, ¿qué debería incluirse en el correo electrónico? Obviamente, habría los campos estándar:

  • To
  • From
  • Asunto (estás invitado a una reunión!)
  • Cuerpo del mensaje
  • Pie de página

El contenido del cuerpo deberá incluir:

  • Los detalles de la reunión
  • Lugares propuestos
  • Fechas y horarios propuestos

Y, dependiendo de la configuración del organizador, ¿qué enlaces de comando se deben presentar? Aquí hay algunas preguntas que surgieron. ¿Deberíamos permitir que los destinatarios:

  • Acepte todas las opciones, es decir, todos los lugares, fechas y horas son aceptables
  • Aceptar todos los lugares o todas las fechas y horas por separado
  • Acepte lugares específicos y fechas y horas específicas individualmente
  • Vea los mapas de los posibles lugares y en última instancia los sitios web y los enlaces de Yelp
  • Enviar una nota al organizador para la vista de la reunión
  • Sugiera un lugar o fecha y hora nuevos
  • Elija un lugar o una fecha y hora
  • Finalizar la reunión

Por último, el pie de página tendrá que soportar:

  • Notificación alfa con una solicitud de retroalimentación
  • Opción de bloqueo del remitente
  • Opción para cancelar la suscripción de futuras invitaciones para el Meeting Planner
  • Detalles de la empresa e información de contacto

Sé que puede ser difícil visualizar todo esto—este no fue un episodio fácil de construir. He aquí un ejemplo de la invitación que construí:

Meeting Planner Invitation Example

Por ahora, he utilizado los comandos acceptable y reject para indicar al participante que simplemente están indicando si un lugar o fecha y hora funciona para ellos o no. Sin embargo, por razones de simplicidad, ofrecí aceptar todos los lugares y horas, aceptar todos los lugares y aceptar todos los tiempos para manejar esto en pasos más rápidos.

Todo esto se basa libremente en el formulario de invitación a la reunión real del último episodio. A continuación, puede ver la parte de la invitación que ofrece la configuración de lugares y horas:

Meeting Planner Invitation - View of Places and Times

Tenga en cuenta que el correo electrónico proporciona algunas de las funcionalidades avanzadas que se construyeron en el último episodio para permitir a los organizadores ofrecer niveles mejorados de control a los participantes, como sugerir nuevos lugares y horarios, elegir el lugar y la hora final, etc.

Meeting Planner Invitation - Updating Your Meeting Settings

Se me hizo muy obvio que invertir más en diseñar el correo electrónico y ofrecer configuraciones más simples de la invitación sería necesario en el futuro. De nuevo, tendré que guardar esto para futuros episodios.

Como ejemplo, uno de mis primeros amigos de pruebas alfa sugirió que deseaban que pudieran indicar que algunos lugares sólo funcionaban en ciertas fechas y horas y viceversa. En última instancia, podría necesitar unificar lugares y fechas y épocas en un modelo de opciones.

Por ahora, revisemos cómo he entregado la invitación anterior tal y como está.

Entregando la invitación

Meeting Planner Invitation - The Command Bar with Send

¿Qué sucede cuando el organizador hace clic en Enviar? Inicialmente, esperaba que tendría que escribir directamente a la API Mailgun, que he explorado en anteriores tutoriales de Envato Tuts+. Sin embargo, el soporte para correo electrónico de Yii2 es bastante rico, y pude aprovechar su soporte de vista nativa para los diseños de correo electrónico (HTML y texto) y simplemente entregarlos usando mi autenticación de cuenta SMTP Mailgun. Esto incluso admite adjuntar archivos de eventos futuros (.ics) para importar reuniones en calendarios.

Nota: Soy un gran fan de Mailgun, pero también he hecho el desarrollo para ellos como consultor y escrito para su blog y Envato Tuts +.

Antes de continuar, le animo a echar un vistazo rápido a la documentación de correo de Yii2. Ofrece una excelente visión general.

Primero, agregué una configuración de configuración SwiftMailer más detallada a /common/config/main-local.php:

Esto permitió que el componente SwiftMailer de Yii entregara mis correos electrónicos a través del servicio SMTP básico de Mailgun.

Necesitará obtener su configuración SMTP de Mailgun desde su panel de control para su dominio:

Meeting Planner Invitation - Mailgun SMTP Settings

Por supuesto, también debe asegurarse de que SwiftMailer forma parte de la configuración del archivo composer.json antes de ejecutar composer update:

A continuación, creé la configuración del archivo de vista para SwiftMailer para usar. En primer lugar, tiene que haber un diseño maestro para HTML y texto. Entonces, tiene que haber archivos de contenido individuales para cada uno también:

Meeting Planner Invitation - The Folder and Files in Mail Layouts

No todo esto está completamente documentado para Yii, así que espero que este ejemplo ofrezca alguna orientación. Tenga en cuenta que los archivos finalize-html y -text view se agregaron posteriormente para un episodio futuro.

Normalmente, el archivo layouts/html.php es bastante simple:

Sin embargo, he añadido mucho para comenzar a trabajar con el estilo y el formato de correos electrónicos HTML ofrecidos a la comunidad de código abierto por Mailchimp.

SwiftMailer de Yii generalmente convertirá automáticamente la vista HTML en vistas compatibles con texto para usted. Lo más probable es que quiera una vista de texto más breve y más simple para las invitaciones, pero por ahora, voy a retrasar la revisión de los resultados de correo electrónico basados en texto de mi código.

En el modelo Meeting.php, he escrito una función de envío que reúne todos los datos necesarios para crear mi invitación vista mostrada arriba. Por ahora, estoy dejando fuera las partes relacionadas con el próximo episodio para construir enlaces de comando. Básicamente, uso Yii::$app->mailer compose() y send():

Esas funciones construyen un mensaje utilizando nuestro diseño y vista HTML y luego pasan los mensajes resultantes con datos personalizados al servicio SMTP de Mailgun. Podemos utilizar la implementación de Yii de su modelo MVC para la entrega de correo electrónico.

Problemas con Composer

Como he utilizado Composer con Yii, a menudo he encontrado muchos problemas con él que pueden ser difíciles de localizar. La mayoría de las veces, está relacionado con el error plugin "yiisoft/yii2-composer" que requiere el composer-plugin-api 1.0.0 , pero esta vez me encontré con un problema al actualizar Mailgun. Las versiones recientes de la API Mailgun requieren actualizaciones actuales. Un anterior plugin Yii utilizado en MeetingPlanner requería una versión fija y desactualizada de guzzle. Por lo tanto, tuve que configurar el compositor para usar un alias.

En esencia, le pedí al compositor que sincronizara la última versión de guzzle, pero le dije a la aplicación que estaba usando una versión anterior. En composer.json, un alias tiene este aspecto:

Le estoy instruyendo para instalar "guzzlehttp/guzzle": "6.2.0 como 4.2.3" y eso hace que todo funcione bien, al menos en este caso. A veces los desarrolladores de complementos requieren versiones específicas de las bibliotecas para funcionar correctamente. Composer en su mayoría es útil, pero a veces es seguro que es divertido.

Actualización de la creación de la reunión

Cuando experimenté con las invitaciones, decidí personalizar la vista de creación de la reunión para apoyar más claramente un tema. Esto permite a los usuarios escribir una línea de asunto como si estuvieran enviando un correo electrónico para invitar a alguien a una reunión sin Meeting Planner. El UX para esto tendrá que iterarse y simplificarse más con el tiempo.

Meeting Planner Invitation - Create a Meeting

Esto proporciona la línea de asunto ideal en el correo electrónico para la invitación a la reunión. Por supuesto, para proporcionar esto, tuve que ampliar el modelo de la reunión.

He creado una nueva migración llamada extend_meeting_table_add_subject que agregó el campo de asunto:

Y tuve que añadir soporte para el nuevo campo al archivo _form.php de reunión y al modelo.

He aquí un extracto de lo que se agrega al modelo Meeting.php:

Una página de mapa actualizada para los lugares

Inicialmente, mis vínculos de mapa de invitación fueron directamente a Google Maps, pero me di cuenta de que sería mejor vincularlos a una vista de mapa incrustada en el Planificador de reuniones que formaba parte de la invitación a la reunión. En mi caso, he creado una vista del mapa con un botón Volver a la reunión:

Meeting Planner Invitation - Viewing a Place within a Meeting Invitation

Para ello, he creado una nueva vista basada en /views/place/view.php. Aquí está /views/meeting/viewplace.php:

¿Que sigue?

Como puede ver, llegar a la primera invitación por correo electrónico planteó todo tipo de problemas y requirió un montón de pequeñas y medianas actualizaciones. Pero, con el fundamento básico para completar, podemos contemplar la complejidad de lo que se ha creado. En otras palabras, lo que se necesita a continuación:

  • Enlaces de comandos autenticados. Cuando un participante hace clic en un enlace de comando dentro del correo electrónico, ¿cómo lo autenticaremos, especialmente si nunca se han registrado con nuestra aplicación?
  • Finalizar la reunión basándose en las respuestas. A medida que los participantes toman decisiones y el organizador está listo para finalizar la reunión, ¿qué cambios y actualizaciones son necesarios para apoyar eso?
  • Seguimiento del proceso de cambios realizados por los participantes en la invitación. ¿Cómo vamos a monitorear los cambios en los detalles de la reunión y elegir cuándo notificar a los organizadores y participantes?
  • Notificar al organizador y al participante de los cambios. ¿Qué debemos decirles y qué opciones se deben ofrecer cuando les notificamos?
  • Creación de archivos de calendario (.ics) para importarlos a Google Calendar, Outlook y Apple Calendar con los detalles de la invitación. Una vez finalizada la reunión, podemos enviar un archivo .ics descargable.
  • Construir una vista de una reunión que está completamente finalizada. ¿Cómo deberían ser los detalles de la reunión cuando ya no tenga que ofrecer órdenes para elegir lugares y horas? Pero, también, ¿qué comandos son necesarios para la reprogramación, cambio de tiempo, cancelación, cambio de ubicación o fecha y hora, etc.?

El siguiente episodio explorará algunas de estas preguntas, centrándose en los enlaces dentro de la invitación a los que los destinatarios desearán responder a pesar de que inicialmente nunca se registraron en Meeting Planner antes. Otros asuntos tendrán que esperar un poco más.

También estoy empezando a experimentar con WeFunder basado en la implementación de las nuevas reglas de crowdfunding de la SEC. Por favor considere seguir nuestro perfil. Puedo escribir sobre esto más como parte de esta serie.

Vea los próximos tutoriales en mi serie Creando su Startup Con PHP—espero que esté de acuerdo en que esto es algo emocionante.

Por favor, no dude en agregar sus preguntas y comentarios a continuación; Generalmente participo en las discusiones. También puede contactarme en Twitter @reifman.

Enlaces relacionados

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.