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

Construyendo Tu Startup: Ajax para Horarios y Lugares de Reuniones

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Security Basics
Building Your Startup: Invite People via URL

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

Final product image
What You'll Be Creating

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 aplicación de Planificador de Reuniones como un ejemplo de la vida real. Cada paso a lo largo del camino, liberaré el código de Planificador de Reuniones como ejemplos de código abierto de los cuáles puedes aprender. También abordaré asuntos relacionados con negocios mientras surjan.

Profundizando en Ajax

La última semana, ahondé en Ajax para transformar la experiencia de agendado en un modelo completamente ajaxificado y eliminé la necesidad de actualizar la página. Voy a la mitad, enfocándome mayormente en los elementos fáciles.

En el tutorial de hoy, te guiaré a través de paneles de contenido más complejos que requirieron un poco más de solución de problemas, investigación, depuración, lluvia de ideas y recodificación. Como dije, hubo momentos en donde pensé que debería rendirme en esta característica hasta después de la liberación beta. Sigue a la par mientras te guío a través de algunas de mis pesadillas personales para esa semana (estoy mejor ahora, no te preocupes).

También te voy a mostrar cómo use la consola de desarrollador de Google Chrome para ayudarme a identificar las áreas rotas--las cuáles pueden ser especialmente difíciles cuando se trbaaja con Ajax entre PHP y JavaScript. Es como luz al final del túnel de oscuridad.

Probablemente has visto nuestros hermosos interruptores Bootstrap para ayudar a organizadores y participantes a compartir sus preferencias y hacer decisiones finales para horarios y lugares. Bueno, no se supone que se vean así después de una actualización de Ajax, pero resolviendo este problema resultó ser una gran parte de esta actualización característica:

Startups Ajax - Broken Bootstrap Switch Controllers After Ajax

Si no has probado Planificador de Reuniones aún, ve y programa tu primera reunión con las nuevas capacidades interactivas. Participo en los comentarios de abajo, ¡así que dime lo que piensas! También puedes contactarme en Twitter @reifman. Estoy especialmente interesado si quieres sugerir nuevas características o temas para futuros tutoriales.

Como recordatorio, todo el código para Planificador de Reuniones está escrito en el Framework Yii2 para PHP. Si quisieras aprender más acerca de Yii2, revisa nuestra serie paralela Programando con Yii2.

Para comenzar, echemos un vistazo a agregar participantes de la reunión vía Ajax.

Agregando Participantes de la Reunión

Startups Ajax - The Participant Panel Loaded via Ajax

El código para agregar participantes es similar a lo que hemos cubierto antes. Pero quiero revisar código ligeramente diferente que actualiza la lista de participantes y todos los botones presentando sus identidades.

Previamente, solo había un participante por reunión. Después, habilité reuniones de grupo y creé una lista de botones para indicar cada participante:

Startups Ajax - Refreshing Participant Button List via Ajax

Siempre que un participante es agregado, refresco la lista entera vía Ajax.

Aquí está la función jQuery addParticipant() la cuál llama a getParticipantButtons() después de cada nueva es agregada:

Aquí está la función getParticipantButtons():

Hace una llamada Ajax al método actionGetbuttons() de ParticipantController.php:

Nota: En lugar de ParticipantController, me gusta decir "ParCon" para más corto porque suena como una base remota de comando de Star Trek--o indica que he estado trabajando solo en esta startup por mucho tiempo. Definitivamente pasé muchas noches hasta tarde trabajando en la característica Ajax.

De cualquier modo, las funciones de arriba repoblan el panel con todos los participantes actualizados.

Ahora, movámonos a las fechas y horarios que dependen de uno de los widgets selectores de Fecha y Hora de Bootstrap comúnmente usados.

Agregando Fechas y Horarios

Startups Ajax - The Date Time Panel Loaded via Ajax

Las fechas, horarios y lugares se resultaron ser las características más complicadas de ajaxificar. No fueron tanto el widget de Bootstrap o las APIs de Google Maps usadas en los formularios. Resultaron ser los Controladores de Interruptor de Bootstrap--estos no fueron diseñados o documentados bien para Ajax.

Problemas con Controladores de Interruptor de Bootstrap vía Ajax

Aquí hay un ejemplo de los interruptores rotos después de un envío Ajax agregando un lugar:

Startups Ajax - Bootstrap Switches for Places Broken Checkboxes

Iré a través de cómo finalmente arreglé esto, pero primero, echemos un vistazo a meeting-time/panel.php:

Notarás el timeMessage que proporciona alertas pre-cargadas para mostrar bajo ciertas condiciones ajax como revisé en el episodio anterior. Y, mayormente, el código comienza a seguir los mismos formatos que he usado en los otros paneles.

Tanto como fue posible, traté de construir sobre aproximaciones anteriores y re-usé estructura de código cuando ajaxifiqué cada panel de contenido.

Aquí está en panel de palanca JavaScript dentro de Meeting.js:

Cuando el panel aparece y el usuario envía un nuevo date time, este llama a addTime():

Esto invoca a la función Ajax actionAdd() de MeetingTimeController.php:

Fue cuando comencé a agregar nuevas fechas o lugares vía Ajax cuando me topé con una pared tratando de reinicializar el controlador Bootstrap Switch el cuál comencé a usar en el episodio anterior de Programando Disponibilidad y Elecciones.

Recargaría las filas de fecha y todos los controladores de switch en la página se habrían roto.

Parte del problema fue que la reinstalación de Ajax para el  Bootstrap Switch no fue bien documentado. Después de probar un puñado de cosas en la oscuridad y buscar ayuda en internet, finalmente encontré una solución.

El $("input[name='meeting-time-choice']").map(function(){} cicla a través de cada control de switch, y el conjunto de comandos $(this).bootstrapSwitch(property,value) resetean los ajustes de control. Tomó algo de tiempo descubrir el control API apropiado.

Básicamente, tuve que reconfigurar cada propiedad que necesitaba para cada control desde cero. Eso transformó las casillas de vuelta a controles switch más ricos.

Antes de alcanzar este punto, desperdicié mucho tiempo en otras soluciones. Bootstrap Switch es un controlador asombroso y parte clave de la facilidad de uso de Planificador de Reuniones--pero ajaxificarlo casi me acaba.

Continuando, agregar lugares de reunión fue similar a agregar fechas y horarios, pero me gustaría usar este panel de contenido para sumergirme en resolución de problemas de Ajax con las herramientas de Desarrollador del Navegador Google Chrome.

Agregando Lugares de Reunión

Startups Ajax - The Meeting Places Panel Loaded via Ajax

Como mencioné anteriormente, puede volverse excesivamente confuso y frustrante depurar Ajax entre JavaScript y PHP. Los errores de Ajax regularmente son difíciles de detectar.

En este caso, usando la consola de desarrollador de Google Chrome me ayudó a romper a través del vacío.

Generalmente con Ajax, solo tienes disfunción sin indicación de qué salió mal.

Aquí está paso a paso alguna de la visibilidad que Chrome expone que usé para encontrar errores.

Usando la pestaña Consola, podía ver peticiones GET fallidas. Este es un error de servidor intentando una petición para agregar un lugar a una reunión:

Startups Ajax - Google Chrome Browser Console Tab

Esto me ayudó a identificar los argumentos específicos siendo pedidos vía ajax, en esta caso para la reunión con id = 186.

Viendo la pestaña Red también muestra estas llamadas y sus argumentos:

Startups Ajax - Google Chrome Browser Network Tab

Cuando haces clic en la consulta específica, puedes ver cinco pestañas, aquí está la pestaña de Encabezados:

Startups Ajax - Google Chrome Browser Headers Tab

En este caso, la pestaña Vista Previa resaltó mi error PHP dentro del MeetingPlaceController encontrado por la petición Ajax:

Startups Ajax - Google Chrome Browser Preview Tab

Puedes ver qué útil se vuelve esto--especialmente dado el amplio alcance de código que tuve que reconstruir par ajaxificar todas estas características de programación.

Aquí hay otro ejemplo de la pestaña Red pidiendo lugares para la Reunión id = 186:

Startups Ajax - Google Chrome Browser Network Tab

La pestaña Vista Previa mostró que el archivo de vista siendo requerido no existió o al menos no estaba en donde debería:

Startups Ajax - Google Chrome Browser Preview Tab

La consola de Desarrollador de Google Chrome me ayudó de gran manera a terminar el trabajo de Ajax.

¡Gracias, Google! Ni siquiera te molestaré hoy con mi meme de genio.

¿Qué sigue?

Espero que hayas disfrutado estos dos episodios sobre Ajax y la transformación a planificación de reuniones rápida y eficiente y la eliminación de refresco de páginas. Programar una reunión es el corazón y el alma de Planificador de Reuniones, así que hacerlo trabajar genial es vital.

Personalmente aprendí mucho a lo largo de este proceso, y los cambios han hecho un dramático impacto positivo en el servicio.

Por favor prueba la programación  más rápida y comparte Planificador de Reuniones con tus amigos. Como siempre, apreciaría si compartes tu experiencia abajo en los comentarios y siempre estoy interesado en tus sugerencias. Siempre puedes contactarme en Twitter @reifman directamente.

Me estoy acercando a lanzar el experimento con weFunder basado en la implementación de las nuevas reglas de crowdfunding de SEC. Puedes seguir nuestro perfil ahí si quieres. También escribiré más acerca de esto en un tutorial futuro.

Mira nuestros siguientes tutoriales en la serie Construyendo Tu Startup con PHP.

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.