Advertisement
  1. Code
  2. PHP

Construyendo tu Startup: Personalización de la Vista de la Reunión

by
Read Time:18 minsLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Introducción

Este tutorial es parte de la serie Construyendo Tu Startup Con PHP en Envato Tuts+. En esta serie, te estoy guiando a través de lanzar una startup desde concepto hasta realidad usando mi app Meeting Planner como un ejemplo de la vida real. Cada paso a lo largo del camino, liberaré el código de Meeting Planner como ejemplos de código abierto de los que puedes aprender. También abordaré asuntos de negocios relacionados con startups mientras surjan.

¿Por qué el Hueco en Esta Serie?

Habrás notado que ha habido un gran hueco en el tiempo entre el último episodio y este. En Abril de 2015, fui diagnosticado con un tumor cerebral que requirió cirugía y radiación. Soy increíblemente afortunado sobre todo de tener tan buen cuidado, y las cosas salieron bastante bien---mucha gente no tiene acceso a la calidad de recursos disponibles para mi de neurocirugía con seguro médico en el Pacífico Noroeste. Hes estado escribiendo de nuevo para Envato Tuts+ desde el último otoño, pero es divertido volver a enfocarse en la serie startup, y espero que la disfrutes.

¿Qué Cubre Este Episodio?

En este tutorial, cubriremos las características personalizadas necesarias para proporcionar diferentes vistas dependiendo de quién está mirando invitaciones de reunión. Antes de comenzar a enviar por correo la invitación a los participantes, necesitamos tener una vista lista con funcionalidad potencialmente restringida para compartir con ellos. Esencialmente, nos estamos asegurando de que la vista de reunión es exactamente lo necesario para el dueño de la reunión y el participante de la reunión. Sigue a la par para aprender qué se necesita.

Todo el código para Meeting Planner está escrito en el Framework Yii2 para PHP, el cuál tiene soporte integrado para l18n. Si quisieras aprender más sobre Yii2, revisa nuestra serie paralela Programando Con Yii2 en Envato Tuts+.

De manera interesante, un potencial ángel inversionista se acercó a mi para contribuir recursos para acelerar el proceso de desarrollo de nuestro sitio---el ve el valor en el concepto. Mientras sorteo la ruta apropiada para continuar hacia adelante, te mantendré informado. Si acaso, espero que cree intrigante temas nuevos para tutoriales alrededor de administrar el proceso de inversión como un emprendedor.

Solo un recordatorio, participo en la sección de comentarios de abajo. Estoy especialmente interesado si tienes diferentes aproximaciones, ideas adicionales o quieres sugerir temas para futuros tutoriales. También puedes contactarme en Twitter @reifman.

Requisitos de Vista de Reunión

Es algo emocionante---pronto, Meeting Planner estará entregando invitaciones a participantes invitados. Sin embargo, para soportar eso, necesitamos asegurar que la vista de reunión está configurada apropiadamente. Si creaste la reunión, tienes ciertos poderes, tales como invitar participantes, agregar lugares propuestos de reunión, fechas y horarios, y elegir las secciones finales. En algunos casos, el organizador podría querer ofrecer algunos o todos estos poderes a los participantes también.

Esencialmente, tenemos que hacer que la aplicación sepa quienes están viendo la página de reunión y personalizar la apariencia y comandos disponibles. Yii hace la mayoría de esto bastante sencillo, pero hay mucho detalle involucrado.

Una Breve Advertencia Sobre la Experiencia de Usuario

Y déjame decir por adelantado, hay mucho re-trabajo y pulido de experiencia de usuario que necesitará realizarse iterativamente en el tiempo sobre el camino del mínimo producto viable (MVP). La mayoría de lo que estoy construyendo ahora mismo es funcionalidad nuclear para tener la alfa corriendo para uso real. Se que parece difícil en lugares y no siempre parecerá tan intuitivo como quieres. También hay ineficiencias de código que necesitarán ser optimizadas en el futuro. Por favor siéntete libre de publicar tus ideas y comentarios abajo y las tomaré en consideración para el trabajo en curso.

La Vista de Reunión Actual

Aquí hay un vistazo a la vista de reunión existente que el creador (o propietario) ve:

Customizing Meeting View - The Existing Codes Meeting ViewCustomizing Meeting View - The Existing Codes Meeting ViewCustomizing Meeting View - The Existing Codes Meeting View

El botón Enviar manda por correo la invitación con las opciones abiertas actualmente al participante para que ofrezcan retroalimentación. Las casillas de abajo Tu y Ellos permiten al espectador expresar cuales ubicaciones y horarios funcionan para ellos. Las casillas Elegir permiten al espectador determinar el lugar y horario finales. El botón Finalizar pone la reunión en el horario con las opciones de lugar y horario elegidas.

Ciertamente, mientras el producto madura, queremos mejorar la experiencia de usuario en un número de formas y pulir mucho, pero aquí está un puñado de elementos funcionales que nos gustaría modificar para participantes:

  • El botón Enviar no será necesario después de que el propietario entregue la invitación.
  • Los participantes podrían o no ser permitidos para Finalizar opciones de reunión.
  • Los participantes no podrán Editar (icono de lápiz) el texto de detalle de reunión.
  • Los participantes no podrán agregar Personas en este momento (para nuestro MVP).
  • Los participantes podrían o no ser permitidos para agregar Lugares (icono más).
  • Los participantes podrían o no ser permitios para agregar Fechas y Horarios (icono más).
  • En ambos paneles Lugares y Fechas y Horarios, vamos a querer mostrar las opciones del espectador actual bajo la columna y la información de las otras personas en Ellos.
  • En ambos paneles Lugares y Fechas y Horarios, los participantes podrían o no poder Elegir la ubicación y horario finales.

Todas estas opciones necesitan ser abordadas en nuestro trabajo el día de hoy. Recorramos lo que es requerido para construir estas características.

Implementación de Requerimientos

Si estás siguiendo a la par con el código, las actualizaciones descritas aquí están incluidas en esta liberación en GitHub.

Quién es el Espectador Actual

El Framework Yii proporciona el user_id actual para el espectador aquí:

El modelo Meeting tiene la propiedad $owner_id y la función isOwner para ayudar a determinar si el espectador actual es realmente el creador de la reunión. Si no, el espectador tendrá condicionalmente menor control sobre la reunión.

He creado un par de funciones ayudantes en el modelo Meeting para hacer esto más rápido:

Estos configuran las propiedades $owner_id y $viewer en el modelo Meeting.

Construyendo para Ajustes de Reunión

Cada reunión que creas tendrá probablemente diferentes características. Algunas veces, querrás limitar al participante el sugerir diferentes horarios y lugares o finalizar los detalles. Otras veces, no te importará. Cuando eventualmente creamos Plantillas de Reunión para re-usar tipos comunes de reuniones, ej. reuniones de negocios en el café por la mañana, las platillas probablemente necesitarán retener esos tipos de ajustes personalizados también. ¿Cómo deberíamos implementar esto?

Primero, me gustaría crear un conjunto de preferencias por defecto para usuarios con respecto a las reuniones que crean.

Después, crearé un conjunto de MeetingSettings para cada reunión. Cuando una reunión es creada desde cero, estas heredarán las preferencias por defecto del usuario que las crea. Editar los ajustes para reuniones individuales puede ser pospuesto hasta después.

En el futuro, cuando implementemos las Plantillas de Reunión, agregaremos ajustes de Reunión para las Plantillas también. Sin embargo, esto también puede ser pospuesto.

Aquí están las preferencias que me gustaría crear para empezar:

  • Permitir a participantes agregar Lugares.
  • Permitir a participantes agregar Fechas y Horarios.
  • Permitir a participantes elegir Lugares.
  • Permitir a participantes elegir Fechas y Lugares.
  • Permitir a participantes Finalizar la reunión.

Ya que todos estamos regresando a la serie después de algún tiempo debido a mi ausencia de salud, voy a entrar un poco a más detalle sobre algo del trabajo.

Primero, crearemos la migración de Ajustes de Reunión:

Eso crea el archivo de migración que necesitamos para escribir el código que construye la base de datos de acuerdo a nuestro esquema:

Cada reunión tiene esencialmente una fila de MeetingSettings con propiedades booleanas para las distintas opciones de participante que he mostrado arriba.

Después, instruiremos a Yii para migrar y crear la tabla:

Nuestra llave foránea crea una relación entre la tabla Meeting y la tabla MeetingSetting.

Después, usaremos el Gii de Yii para auto-generar código para ver y actualizar los ajustes. Para comenzar, regreso a http://localhost:8888/mp/index.php/gii/. Comenzaremos generando el modelo:

Customizing Meeting View - Yiis Gii Model Generator for Meeting SettingCustomizing Meeting View - Yiis Gii Model Generator for Meeting SettingCustomizing Meeting View - Yiis Gii Model Generator for Meeting Setting

Después, generaremos el código Create, Read, Update, Delete code (CRUD):

Customizing Meeting View - The Gii CRUD GeneratorCustomizing Meeting View - The Gii CRUD GeneratorCustomizing Meeting View - The Gii CRUD Generator

Ya que no necesitamos todo ese código justo ahora, Gii nos deja seleccionar solo las funciones que necesitamos: el controller, view, _form y update:

Customizing Meeting View - Manually limiting files to overwriteCustomizing Meeting View - Manually limiting files to overwriteCustomizing Meeting View - Manually limiting files to overwrite

Gii te muestra una lista de los archivos que crea con cada paso:

Customizing Meeting View - List of generated files by GiiCustomizing Meeting View - List of generated files by GiiCustomizing Meeting View - List of generated files by Gii

¿Pero qué sobre los ajustes por defecto de reunión del usuario? ¿Esencialmente, sus preferencias típicas de reunión?

Extendiendo las Preferencias de Usuario

Para eso, agregaremos propiedades de ajuste paralelo de reunión a la tabla user_setting. De nuevo, crearemos una migración:

Aquí están las columnas que necesitamos agregar:

Después, ejecutaremos la migración:

En vez de forzar una sobre-escritura de nuestro modelo UserSetting.php con Gii, usaremos la opción diff de Gii:

Customizing Meeting View - Using Giis diff rather than overwritingCustomizing Meeting View - Using Giis diff rather than overwritingCustomizing Meeting View - Using Giis diff rather than overwriting

Y, desde aquí, elegiremos a mano las nuevas adiciones al archivo y las pegaremos:

Customizing Meeting View - Diff view to copy and paste necessary changesCustomizing Meeting View - Diff view to copy and paste necessary changesCustomizing Meeting View - Diff view to copy and paste necessary changes

Funcionalmente, agregaremos una pestaña de ajustes de reunión a la página de propiedad Actualiza Tus Ajustes:

Customizing Meeting View - User settings with the existing two tabsCustomizing Meeting View - User settings with the existing two tabsCustomizing Meeting View - User settings with the existing two tabs

Agregaremos el siguiente código a /frontend/views/user-setting/_form.php para soportar nuestras nuevas propiedades:

Aquí está el formulario actualizado:

Customizing Meeting View - User settings with meeting preferencesCustomizing Meeting View - User settings with meeting preferencesCustomizing Meeting View - User settings with meeting preferences

Inicializando Nuevas Sesiones de Reunión

Siempre que el usuario cree una nueva reunión, tenemos que cargar sus ajustes por defecto y copiarlos a los ajustes individuales de reunión. initializeMeetingSetting es llamado cuando una nueva reunión es creada para hacer esto:

Con los ajustes de reunión en su lugar, estamos listos para continuar a la mayor parte del trabajo de hoy, personalizar las vistas para el propietario y participante.

Revisando la Vista de Propietario de Reunión

Ahora, consideremos el estado de nuestra vista de reunión basado en el creador o propietario de reunión. Aquí está una invitación de reunión que creé recientemente para invitar a mi amigo Rob por unos tragos:

Customizing Meeting View - The Current Meeting ViewCustomizing Meeting View - The Current Meeting ViewCustomizing Meeting View - The Current Meeting View

La Barra de Comando

Antes de que Enviar y Finalizar sean habilitados, debe haber una persona invitada y al menos un lugar y horario. Si hay más de un lugar y horario, uno debe ser elegido para que la reunión sea finalizada.

Los botones de reunión Cancelar (icono X) y Editar (icono lápiz) están también habilitados para creadores.

Personas

Para el MVP, estamos limitando invitaciones de reunión a un participante en principio. Así qué, una vez que una persona haya sido invitada, el botón Agregar (icono más) está deshabilitado.

Lugares, Fechas y Horarios

El creador puede agregar Lugares, Fechas y Horarios hasta el máximo de nuestro sitio (ej. siete por reunión) y ellos pueden indicar su disponibilidad y aceptación. Y, finalmente, cuando hay más de uno, ellos pueden elegir cuál ubicación horario serán usados.

Notas

El creador siempre puede agregar notas a la reunión. Las notas permiten al creador y participantes comunicarse entre ellos.

Al final, podremos la mayor parte de nuestro trabajo en mejorar la funcionalidad AJAX para que el dueño elija lugares y horarios, los botones Enviar y Finalizar estén apropiadamente habilitados (o deshabilitados en algunos casos).

Aquí hay un ejemplo de una reunión con dos horarios posibles. El botón Finalizar no puede ser habilitado hasta que un horario sea elegido:

Customizing Meeting View - Another Meeting View Scenario Customizing Meeting View - Another Meeting View Scenario Customizing Meeting View - Another Meeting View Scenario

Una vez que la elección está hecha, nos gustaría habilitar el botón Finalizar vía AJAX, ahorrando al usuario una actualización de página.

Revisando la Vista de Participante

Cuando vemos la invitación desde el punto de vista del participante, hay capacidad inicial mucho menor:

Customizing Meeting View - The Participant ViewCustomizing Meeting View - The Participant ViewCustomizing Meeting View - The Participant View

El participante puede cancelar (icono X) su asistencia a la reunión y puede especificar que lugares y horarios son aceptables para ellos, pero no pueden elegir el lugar final o Finalizar la reunión. También, la información en las columnas Tu y Ellos está ahora intercambiada. Y, el panel de participante está oculto ya que no es necesario.

Adicionalmente, digamos que la reunión fue creada con ajustes que permitieron al participante elegir la ubicación fecha y horario pero no finalizar la reunión. Eso necesitaría lucir así:

Customizing Meeting View - The Participant View with Participant ChoiceCustomizing Meeting View - The Participant View with Participant ChoiceCustomizing Meeting View - The Participant View with Participant Choice

Ya que solo hay un Lugar, Herkimer Coffee, no hay necesidad para un selector de opción. Pero, donde hay dos horarios posibles, puedes ahora ver los selectores Elegir. Aún así, no hay botón Finalizar.

Resultó que soportar todo esto requirió mucho código nuevo para actualizar el sistema, pero esto está comenzando a sumergirse en el corazón del producto---la experiencia de usuario de programar reuniones. Te guiaré a través de un puñado de los cambios que fueron necesarios.

Codificar los Requerimientos de Reunión

Implementar los Ajustes de Reunión

En los paneles horario-reunión y lugar-reunión, necesitamos usar los ajustes de reunión para determinar si necesitamos mostrar el selector de opción. En la vista _panel.php, se ve así:

Estamos revisando los ajustes de participante y pasándolos como parámetro a la vista subsequent _list.php, que luce así:

Si la vista es el creador o participante es permitido a elegir el horario final, verán algo como esto, la habilidad para Elegir en la columna derecha:

Customizing Meeting View - The Choice Selector for Dates TimesCustomizing Meeting View - The Choice Selector for Dates TimesCustomizing Meeting View - The Choice Selector for Dates Times

Puede el Espectador Enviar y Finalizar la Reunión

Creé funciones canSend() y canFinalize(), las cuales soportan el código generalmente y las peticiones AJAX para determinar el estado activo de los botones Enviar y Finalizar.

Aquí está canSend():

El organizador puede enviar la invitación de reunión hasta que haya participantes, lugares y horarios.

Aquí está canFinalize():

Esto revisa primero si la reunión puede ser enviada, porque si no, no puede ser finalizada. Después, revisa para asegurar que tanto lugar como horario han sido elegidos. Y después, revisa si el espectador es el organizador o los ajustes de reunión permiten a un participante finalizar la reunión.

Básicamente, mientras se hacen cambios, verás cambiar el estado de los botones Enviar y Finalizar:

Customizing Meeting View - The Command Bar with Send and FinalizeCustomizing Meeting View - The Command Bar with Send and FinalizeCustomizing Meeting View - The Command Bar with Send and Finalize

En el view.php de reunión, he embebido JavaScript para soportar actualizaciones AJAX al estado de los botones Enviar y Finalizar mientras los usuarios cambian los ajustes para su reunión. Cuando se hacen las selecciones de lugares y horarios, refreshSend() and refreshFinalize() son llamados y los botones son apropiadamente modificados:

Revirtiendo los Selectores de Estado de Lugar y Horario

En la interfaz de usuario actual, mostramos las selecciones de lugar y horario del espectador hasta la izquierda de la primera columna. El código tiene que ser personalizado para revertir esto cuando los participantes están viendo:

Customizing Meeting View - The You and Them Columns for Selection DataCustomizing Meeting View - The You and Them Columns for Selection DataCustomizing Meeting View - The You and Them Columns for Selection Data

Para soportar mostrar diferentes datos en las columnas Tu y Ellos de la vista de reunión para Horarios y Lugares, los archivos _list.php meeting-time y meeting-place necesitaron ser actualizados para determinar de manera dinámica qué datos mostrar:

Por ahora, coloqué estas funciones dentro de la vista _panel.php, que llama a _list.php, mientras depende en tener el widget SwitchInput incluido en contexto:

Próximos Ajustes

Por último, hay muchas mejoras que hacer a este código continuando. En lugares, estoy haciendo llamadas AJAX al servidor dos o tres veces cuando podría codificar estas más eficientemente en una sola petición. En otros lugares, puede hacerlo más local con JavaScript. Y la interfaz de usuario necesitará seguir mejorando, y el código necesitará cambiar para adaptarse a eso. Pero, desde una perspectiva funcional, el trabajo de hoy representa mucho del progreso general hacia el MVP.

¿Qué Sigue?

Con los ajustes de reunión y requerimientos de vista en lugar para organizadores y participantes, estoy listo para continuar a enviar la primera invitación. El siguiente episodio explorará enviar la invitación por correo al participante e implementar la apariencia del contenido, enlaces funcionales de comando dentro del correo, y administra los permisos para usuarios que aún no se han registrado. Espera los próximos tutoriales en nuestra serie Construyendo Tu Startup Con PHP---¡esto se está poniendo emocionante!

Por favor siéntete libre de agregar tus preguntas y comentarios abajo; generalmente participo en las discusiones. También puedes contactarme en Twitter @reifman.

Enlaces Relacionados

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.