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

Construyendo Tu Startup: Detección Automática de Zona Horaria

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Preparing for Text Messaging
Building Your Startup: Advanced Scheduling Commands

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 el concepto a la realidad usando mi aplicación Planificador de Reunión como un ejemplo de la vida real. Cada paso a lo largo del camino, estaré liberando el código de Planificador de Reuniones como ejemplos de código abierto de los que puedes aprender. También abordaré temas relacionados con startups y negocios según se presenten.

La Programación Requiere Zonas Horarias

Para la liberación alpha de Planificador de Reuniones, proporcioné a la gente la oportunidad de cambiar su zona horaria en los ajustes de usuario. Sin embargo, para cualquiera fuera del oeste de los Estados Unidos, podrían estarse preguntando por que sus citas de calendario tenían los horarios incorrectos. Tienes que saber buscar esta página de ajustes.

Mientras me aproximo a la beta, me di cuenta de que necesitaba arreglar esto tan pronto como fuera posible. Así que comencé a reflexionar sobre cómo mejor resolver esto.

En el episodio de hoy, te voy a guiar a través de mi aproximación a la detección automática de zona horaria y cómo la integré en la experiencia de usuario.

Si no lo has hecho aún, por favor prueba Planificador de Reuniones justo ahora programando tu primera reunión. Si estás fuera del área de Tiempo Estándar del Pacífico, probablemente verás peticiones para actualizar tu zona horaria que están descritas abajo. Por favor publica tu retroalimentación sobre la experiencia en los comentarios de abajo.

Participo en los hilos de comentarios, pero también puedes contactarme en Twitter @reifman. Siempre estoy abierto a nuevas ideas de características y sugerencias de 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 sobre Yii2, revisa mi serie paralela Programando Con Yii2. Entre más construyo Planificador de Reuniones, más impresionado estoy con Yii2 y su equipo de voluntarios.

Investigando la Detección de Zona Horaria

La siguiente página de ajustes permite a los usuarios elegir una zona horaria. He juntado una captura de pantalla mostrando una porción de las zonas horarias que aparecen cuando das clic sobre el menú desplegable; hay muchas:

Building Your Startup Timezone Detection - Update Your Settings Dropdown

Estas parecían trabajar bien, pero los usuarios no necesariamente las seguían. De hecho, no tenían manera de saber que estaban en la misma zona horaria de nuestro servidor.

Primero, busqué en algunos mapas selectores de zona horaria para ver si tendrían una respuesta sencilla. Hubo dos que encontré básicamente con el mismo nombre: Timezone picker:

Building Your Startup Timezone Detection - Graphical Map Timepicker

y quicksketch/timezonepicker: un selector de zona horaria jQuery basado en ImageMap. Mientras que aprecié los selectores gráficos, estos no funcionaron para móvil, y no proporcionaron detección.

Encontré una extensión Yii2 llamada Timezone detector, pero no era claro cómo determinaba la zona horaria y qué tan confiable podía ser.

Por último, use la solución básica JavaScript llamada jsTimezoneDetect; puedes ver la página demo abajo:

Building Your Startup Timezone Detection - jsTimezoneDetect Demo Page

Este depende del ajuste de zona horaria de tu plataforma o dispositivo en vez de trabajar con IPs de geolocalización que pueden ser engañadas por redes corporativas, ISPs y VPNs. Fue rápida y promovió su exactitud.

Diseñando la Experiencia de Usuario

Mi meta era detectar la zona horaria del usuario y permitirle actualizar su ajuste rápidamente sin distracción. El primer lugar que me preocupaba de un usuario ajustando su zona horaria fue cuando ellos agregaban un horario de reunión a una nueva reunión.

Por ejemplo, cuando ellos daban clic en el icono más a un lado de Cuándo para horarios de reunión:

Building Your Startup Timezone Detection - Meeting Time in PST

Por ejemplo, si vivo en Toronto, Canadá, en la zona horaria del Este y visito Planificador de Reuniones, su ajuste por defecto es PST, tres horas detrás de mi. así que mi horario de reunión por encima de 7:30 pm no sería correcto.

Ahora, si jsTimezoneDetect determina que estás en una zona horaria diferente (ej. Toronto) entonces su ajuste de usuario actuál (ej.Los Ángeles), te preguntará si quieres cambiarlo:

Building Your Startup Timezone Detection - Popup to Change your Timezone

En la captura de arriba, usé las Preferencias de Fecha y Hora de MacOS (arria a la derecha) para cambiar mi zona horaria del ajuste actual de Planificador de Reuniones y que me permita probar cambiarlo.

Una vez que la zona horaria es actualizada, la elección de tiempo anterior se mostrará en tiempo de Costa Este:

Building Your Startup Timezone Detection - Meeting Time in East Coast Time

Pero la siguiente vez que agregues un tiempo de reunión, estará en tu zona horaria correcta.

Simplificando la Experiencia

No quería que los usuarios tuvieran que saltar a la página de ajustes para hacer el cambio--y perder su lugar mientras planean una reunión. Así qué, mientras que tomó tiempo extra, escribí un poco de AJAX que actualizó la zona horaria para ellos desde esta página para que pudieran continuar con la programación.

Debajo, puedes ver que una vez que das clic a la nueva zona horaria, el estado te alerta de que ha sido actualizado y ahora puedes proceder a agregar un horario de reunión sin perder tu lugar:

Building Your Startup Timezone Detection - Your timezone has been updated successfully alert

Desarrollando la Integración de Código

Para construir esto, comencé a trabajar en el frontend/views/meeting-time/_form.php de arriba. Primero, agregué JavaScript para detectar la zona horaria y administrar las alertas:

También creé algunas variables de formulario ocultas para soportar el script:

El url_prefix ayuda a administrar JavaScript direccionando entre entornos de desarrollo y producción. El tz_current es cargado desde MeetingTimeController.php. Es el ajuste de zona horaria del usuario en Planificador de Reuniones. El tz_dynamic será llenado por nuestro script de detección.

También creé dos cajas de alerta en la parte superior del formulario que será oculto por defecto usando definiciones CSS de sus IDs:

El tz_alert aparece si la zona horaria detectada difiere de tu ajuste actual. El tz_success aparece si cambias la zona horaria.

Nota también la etiqueta span vacía:

...cambia tu ajuste de zona horaria a <span id="tz_new"></span>?')?>

El script colocará un enlace AJAX ahí para tz_detect, el cuál verás en nuestro script.

Aquí está un extracto desde frontend/web/js/meeting_time.js:

En la función $(document).ready() de arriba, esta llama a jsTimezoneDetect() y revisa si la zona horaria actual del usuario es diferente. Si lo es, esta reemplaza la etiqueta span vacía con un enlace JavaScript para setTimezone() y muestra una caja de alerta.

La función setTimezone hace una llamada AJAX al UserSettingController.php:

Actualiza sin problemas el ajuste de zona horaria sin requerir una visita al área de la página.

Después, el JavaScript cierra la alerta y muestra la caja de éxito.

JavaScript y AJAX siempre toman más tiempo para mi escribir que PHP, pero la UX trabaja realmente bien con esta característica.

Encontré que jsTimezoneDetect fue rápido y completamente preciso en todas mis pruebas.

Aplicando el Código a la Página de Ajustes

Decidí aplicar esta detección amigable a la página de Ajustes de manera que un usuario no necesariamente necesita dar clic al menú desplegable y deslizarse a través de docenas y docenas de zonas horarias.

Building Your Startup Timezone Detection - Update Your Settings with Timezone Detection Popup

Si dan clic al enlace de zona horaria detectada, aparece la alerta guardado exitósamente, y el ajuste es hecho por ellos en el menú desplegable de Zona Horaria. De hecho no hay necesidad de enviar el formulario.

Building Your Startup Timezone Detection - Your timezone has been saved successfully alert

Para implementar esto, creé un archivo JavaScript casi idéntico para frontend/web/js/user_setting.js:

Después de que está completa, actualiza el valor #tz_combo del menú desplegable para el usuario con la nueva zona horaria.

Otras Consideraciones

Todo esto trabaja genial para nuevos usuarios programando su primera reunión. ¿Pero qué sobre los receptores de peticiones de reunión? La gente reuniéndose en persona en su mayoría estarán en la misma zona horaria, pero las reuniones virtuales como llamadas en conferencia podrían requerir zonas horarias diferentes.

Si lees el episodio Exportando Archivos iCal a Calendarios, recordarías que incluimos un ajuste de zona horaria en nuestro archivo ics de exportación:

Esto asegura que el receptor verá la misma zona horaria que el organizador cuando importan el archivo .ics a su calendario.

Todos nuestros horarios de reunión son almacenados en la base de datos como estampas de tiempo unix genéricas en la zona horaria GMT, y nuestro display se ajusta basado en cada zona horaria del usuario.

Sin embargo, aún necesitaré agregar la detección JavaScript a la página de planeación de reunión y página de confirmación para receptores para asegurar que se les pide configurar su zona horaria para ver los tiempos de reunión correctos.

Viendo Hacia Adelante

Actualmente, estoy en un sprint de código para la liberación beta de Planificador de Reuniones. Estoy trabajando en muchas características relacionadas a hacer peticiones para cambiar reuniones después de que han sido confirmadas. Esto requiere mucho pensamiento conceptual sobre cómo hacer más fácil la programación para la gente. Escribiré más sobre esto pronto.

Como siempre, por favor mantente en sintonía para esto y más tutoriales por venir en la serie Construyendo Tu Startuo Con PHP. ¿Ya programaste una reunión vía Planificador de Reuniones? ¿No? ¿Qué estás esperando? ¡Hazlo ahora! Y como siempre, déjame saber lo que piensas abajo o en los comentarios. Lo apreciaría. También puedes contactarme en @reifman. Siempre estoy abierto a ideas de nuevas características y sugerencias de temas para futuros tutoriales.

También estoy planeando escribir un tutorial sobre crowdfunding, así que por favor considera nuestra página WeFunder Planificador de Reuniones.

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.