Advertisement
  1. Code
  2. Startups

Пишем свой стартап: автоматическое обнаружение временной зоны

by
Read Time:9 minsLanguages:
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

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

Этот учебник является частью серии Пишем свой стартап на PHP на Envato Tuts +. В этой серии я показываю вам запуск приложения от самой концепции до реального приложения, используя приложение «Планировщик встреч» в качестве примера. Каждый шаг по пути, я выпущу код планировщика собраний в качестве примеров с открытым исходным кодом, из которых вы можете узнать. Я также рассмотрю связанные с запуском бизнес-вопросы по мере их возникновения.

Планирование временных зон

Для альфа-релиза Планировщика собраний я предоставил людям возможность изменить свой часовой пояс в пользовательских настройках. Тем не менее, для тех, кто находится за пределами западной части Соединенных Штатов, они, возможно, задавались вопросом, почему их календарные встречи были в разное время. Вы должны знать, как искать страницу настроек.

Когда я подхожу к бета-версии, я понял, что мне нужно исправить это как можно скорее. Поэтому я начал размышлять о том, как лучше всего это решить.

В сегодняшнем эпизоде я собираюсь провести вас через мой подход к автоматическому обнаружению часовых поясов и тому, как я интегрировал это в пользовательский интерфейс.

Если вы еще этого не сделали, попробуйте планировщика собраний прямо сейчас, запланировав свою первую встречу. Если вы находитесь за пределами зоны Тихоокеанского стандартного времени, вы, вероятно, увидите подсказки для обновления вашего часового пояса, которые описаны ниже. Пожалуйста, напишите ваши отзывы об опыте в комментариях ниже.

Я участвую в комментариях, но вы также можете связаться со мной @reifman в Twitter. Я всегда открыт для новых идей и предложений для будущих учебных пособий.

Напомним, что весь код для Планировщика собраний написан на Yii2 Framework для PHP. Если вы хотите узнать больше о Yii2, ознакомьтесь со своей параллельной серией Программирование с Yii2. Чем больше я писал Планировщик собраний, тем больше впечатлялся  с Yii2 и их командой добровольцев.

Исследование обнаружения временной зоны

Текущая страница настроек позволяет пользователям выбирать часовой пояс. Я собрал скриншот, показывающий часть выбранных часовых поясов, которые появляются, когда вы нажимаете на раскрывающийся список; их там много:

Building Your Startup Timezone Detection - Update Your Settings DropdownBuilding Your Startup Timezone Detection - Update Your Settings DropdownBuilding Your Startup Timezone Detection - Update Your Settings Dropdown

Казалось, что это хорошо работает, но пользователи не обязательно будут искать его. Фактически, у них не было бы возможности узнать, были ли они в том же часовом поясе, что и наш сервер.

Во-первых, я просмотрел некоторые из селекторов карт часового пояса. Было два, которые я нашел с одним и тем же именем: Timezone picker:

Building Your Startup Timezone Detection - Graphical Map TimepickerBuilding Your Startup Timezone Detection - Graphical Map TimepickerBuilding Your Startup Timezone Detection - Graphical Map Timepicker

и quicksketch / timezonepicker: сборщик часовых поясов jQuery и ImageMap. Хотя мне больше нравятся селекторы с графикой, они не очень хорошо работали для мобильных устройств, и они не обеспечивали обнаружение.

Я нашел расширение Yii2 Timezone detector, но было непонятно, как оно определило часовой пояс и насколько оно надежно.

В конечном итоге я пошел с базовым JavaScript-решением jsTimezoneDetect; вы можете увидеть демонстрационную страницу ниже:

Building Your Startup Timezone Detection - jsTimezoneDetect Demo PageBuilding Your Startup Timezone Detection - jsTimezoneDetect Demo PageBuilding Your Startup Timezone Detection - jsTimezoneDetect Demo Page

Оно полагается на настройку часового пояса вашей платформы или устройства, а не на работу с IP-адресами геолокации, которые могут быть введены в заблуждение корпоративными сетями, интернет-провайдерами и VPN. Это было быстро и способствовало его точности.

Проектирование пользовательского опыта

Моя цель состояла в том, чтобы обнаружить часовой пояс пользователя и позволить им быстро обновлять свои настройки и без отвлечения внимания. Первое, на чем я сосредоточился - это когда пользователи добавляют время встречи на новое собрание.

Например, когда они нажимают значок «плюс» рядом с «Когда»:

Building Your Startup Timezone Detection - Meeting Time in PSTBuilding Your Startup Timezone Detection - Meeting Time in PSTBuilding Your Startup Timezone Detection - Meeting Time in PST

Например, если я живу в Торонто, Канада, в Восточном часовом поясе и посещаю Планировщик собраний, его настройка по умолчанию - PST, три часа позади меня. Поэтому мое время встречи выше 19:30 не будет правильным.

Теперь, если jsTimezoneDetect определяет, что вы находитесь в другом часовом поясе (например, в Торонто), чем в текущем пользовательском настройке (например, в Лос-Анджелесе), он спросит вас, хотите ли вы его изменить:

Building Your Startup Timezone Detection - Popup to Change your TimezoneBuilding Your Startup Timezone Detection - Popup to Change your TimezoneBuilding Your Startup Timezone Detection - Popup to Change your Timezone

На приведенном выше снимке экрана я использовал настройки даты и времени MacOS (справа вверху), чтобы изменить свой часовой пояс из текущего параметра Планировщика собраний и позволить мне проверить его изменение.

Как только часовой пояс будет обновлен, более ранний выбор времени будет отображаться в восточном побережье:

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

Но в следующий раз, когда вы добавите время встречи, оно будет в вашем правильном часовом поясе.

Упрощение опыта

Я не хотел, чтобы пользователи переходили на страницу настроек, чтобы внести изменения. Таким образом, хотя это заняло дополнительное время, я написал несколько AJAX, которые обновили часовой пояс для них с этой страницы, чтобы они могли продолжить планирование.

Ниже вы можете увидеть, что как только вы нажмете новый часовой пояс, статус предупреждает вас о том, что он обновлен, и вы можете продолжать добавлять время встречи:

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

Разработка кода интеграции

Чтобы построить это, я начал работать над frontend/views/meeting-time/_form.php. Во-первых, я добавил JavaScript для определения часового пояса и управления предупреждениями:

Я также создал некоторые скрытые переменные формы для поддержки скрипта:

url_prefix помогает управлять обработкой JavaScript между средами разработки. tz_current загружается из MeetingTimeController.php. Это текущая настройка часового пояса пользователя в Планировщике собраний. tz_dynamic будет заполнен нашим скриптом обнаружения.

Я также создал два окна предупреждений в верхней части формы, которые будут скрыты по умолчанию с использованием определений CSS их идентификаторов:

tz_alert появляется, если обнаруженный часовой пояс отличается от текущей настройки. tz_success появляется, если вы меняете часовой пояс.

Обратите внимание также на пустой тег span:

... измените настройку часового пояса на <span id = "tz_new"> </ span>? ')?>

Сценарий разместит там ссылку AJAX для tz_detect, которую вы увидите в нашем скрипте.

Вот выдержка из frontend/web/js/meeting_time.js:

В вышеприведенной функции $(document).ready() она вызывает jsTimezoneDetect() и проверяет, отличается ли текущий часовой пояс пользователя. Если это так, он заменяет пустой тег span ссылкой JavaScript на setTimezone() и показывает окно предупреждения.

Функция setTimezone делает вызов AJAX для UserSettingController.php:

Он плавно обновляет настройку часового пояса без необходимости посещать страницу настроек.

Затем JavaScript закрывает предупреждение и показывает окно успеха.

JavaScript и AJAX всегда требуют больше времени для написания, чем PHP, но UX отлично работает с этой функцией.

Я обнаружил, что jsTimezoneDetect является быстрым и полностью точным во всех моих тестах.

Применение кода к странице настроек

Я решил применить это дружественное обнаружение на странице настроек, чтобы пользователь не обязательно должен был щелкнуть выпадающий список и пропустить десятки и десятки часовых поясов.

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

Если они нажимают на обнаруженную связь по часовому поясу, появляется предупреждающее сообщение с сообщением о сохранении, и для них выполняется настройка в раскрывающемся списке «Местное время». На самом деле нет необходимости отправлять форму.

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

Чтобы реализовать это, я создал почти идентичный файл JavaScript для frontend/web/js/user_setting.js:

По завершении он обновит выпадающее значение #tz_combo для пользователя с новым часовым поясом.

Другие соображения

Все это отлично подходит для новых пользователей, планирующих свою первую встречу. Но как насчет получателей запросов на собрания? Люди, встречающиеся лично, будут в основном находиться в одном и том же часовом поясе, но для виртуальных встреч, таких как конференц-связь, могут потребоваться разные часовые пояса.

Если вы прочитали эпизод «Экспорт файлов iCal в календари», вы можете помнить, что мы включаем настройку часового пояса в нашем экспортировании файла ics:

Это гарантирует, что получатель увидит тот же часовой пояс, что и организатор, когда они импортируют файл .ics в свой календарь.

Все время нашей встречи хранится в базе данных как общие временные метки unix в часовой пояс GMT, и отображение настраивается на основе локального часового пояса каждого пользователя.

Тем не менее, мне все равно нужно добавить обнаружение JavaScript для встречи со страницами планирования и страницами подтверждения для получателей, чтобы убедиться, что им будет предложено настроить свой часовой пояс, чтобы увидеть правильное время встречи.

Заглядывая вперед

В настоящее время я нахожусь на спринте кода для бета-версии Meeting Planner. Я работаю над множеством функций, связанных с созданием запросов на изменение собраний после их подтверждения. Это требует много концептуального мышления о том, как облегчить планирование для людей. Я скоро напишу об этом.

Как всегда, пожалуйста, следите за обновлениями для этого и будущих учебников в разделе «Пишем свой стартап на PHP». Вы запланировали встречу через Планировщик встреч? Нет? Чего вы ждете? Сделайте это прямо сейчас! И как всегда, дайте мне знать, что вы думаете об уроке, ниже или в комментариях. Я ценю их. Вы также можете связаться со мной @reifman. Я всегда открыт для новых идей и предложений для будущих учебных пособий.

Я также планирую написать учебник о crowdfunding, поэтому, пожалуйста, посетите нашу страницу WeFunder Meeting Planner.

Ссылки по теме

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.