Programing

내 웹앱에서 시간대를 어떻게 처리 할 수 ​​있습니까?

crosscheck 2020. 9. 4. 06:53
반응형

내 웹앱에서 시간대를 어떻게 처리 할 수 ​​있습니까?


다음 사용자 스토리를 더 잘 이해하고 싶습니다.

John은 Sidney에서 일합니다. 오전 9시에 그는 취리히의 서버에서 실행되는 웹 앱에 이벤트를 기록합니다. 다음날 그는 사건에 대해 논의해야 할 긴급 회의를 위해 뉴욕으로 여행합니다. 회의 중에 그는 날짜와 시간별로 이벤트를 검색합니다.

내가보기에 여기에 최소한 두 가지 문제가 있습니다.

  1. 데이터베이스에 타임 스탬프를 저장하려면 어떻게해야합니까?
  2. UI에 어떻게 표시해야합니까?

John이 이벤트를 검색하면 9시에 발생했음을 알 수 있지만 웹 브라우저에 무엇을 입력해야합니까? 그는 취리히 또는 뉴욕 시간 일 수 있기 때문에 타임 스탬프로 "9:00"를 입력하면 아무것도 찾을 수 없습니다 (이벤트가 발견되지 않았기 때문에 앱이 시드니에서 발생했음을 알 수있는 방법이 없으므로 올바른 시간대를 자동으로 선택할 수 없습니다.)

사용자에게 시간대를 포함 할 수있는 타임 스탬프를 요청하는 좋은 방법은 무엇입니까?

두 번째 문제는 결과를 표시하는 방법입니다. 전 세계의 팀이 이벤트에 대해 논의하고 관련 이벤트를 찾아야하는 경우 한 번에 전 세계 여러 사이트를 대상으로하는 크래커 공격을 생각해보십시오.

다른 시간대에서 생성되었을 수있는 타임 스탬프를 표시하는 좋은 예는 무엇입니까?

참고 : 요구 사항의 유용성에 집중하십시오. 데이터베이스 매핑을 직접 파악할 수 있습니다. 현재 작업 흐름에 대해 잘 모르겠습니다. 방해가되지 않고 직관적 인 방식으로 필요한 정보를 요청 / 제시해야합니다. 가능하다면 이미이 문제를 해결 한 기존 웹 앱에 대한 링크를 제공하십시오.


타임 스탬프를 저장하는 문제는 간단합니다. UTC로 저장하세요.

이를 표시하려면 기기의 시간대 설정을 가져와 현재 시간대로 사용하는 것이 좋습니다. 즉, "시간 입력"상자 옆에 시간대 드롭 다운이 있어야하며, 기본값은 기기의 현재 시간대로 설정되어 있으므로 사용자가 필요에 따라 변경할 수 있습니다.

대부분의 사용자는 시간대를 많이 또는 전혀 변경하지 않을 것입니다. 대부분의 경우 귀하가 설명한 상황은 흔하지 않습니다. 적절한 기본값으로 드롭 다운을 구현하면 이동하는 사람들이 일을 쉽게 할 수 있어야합니다 (일반적으로 여행자가 아닌 사람보다 시간대를 더 잘 이해하기 때문입니다).

실제로 앱이 처음 실행될 때 기기가 설정된 시간대를 저장 한 다음 변경되는지 확인하는 것이 더 좋습니다. 변경되는 경우 사용자는 아마도 여행자 일 것이며 시간대 드롭 다운을 사용하는 것이 도움이 될 것입니다. 그렇지 않으면 드롭 다운을 표시하지 않고 기기 시간대를 기본값으로 설정합니다 (사용자가 시간대에 대해 알 필요가 없기 때문). 두 경우 모두 사용자가 시간대 드롭 다운을 수동으로 표시 / 숨길 수있는 설정이 앱에 있습니다.


위의 내용을 요약하면 다음과 같습니다.

  • 처음 실행할 때 기기에 설정된 시간대를 저장합니다.
  • 해당 시간대를 기본 시간대로 사용합니다. 항상 그 시간대를 가정하십시오.
  • 기기가 시간대를 전환하는 경우 드롭 다운을 추가하여 이벤트가있는 시간대를 선택하고 기본값은 기기의 자체 시간대입니다.
  • 이 시간대 드롭 다운을 수동으로 표시 / 숨기기 옵션을 추가합니다.
  • 항상 UTC로 타임 스탬프를 저장하십시오.

애플리케이션에서 일반적으로 포럼 사이트에서 자주 볼 수있는 것처럼 처음 등록 할 때 사용자의 시간대를 저장하고 항상 시간대와 함께 시간을 표시합니다 .

날짜 저장에 관해서는 UTC가 갈 길입니다. UTC로 변환하고 데이터베이스에 고정하십시오. 검색하는 동안 시간을 ​​사용자가 설정 한 시간대로 변환하기 만하면됩니다.

나는 웹 앱의 모든 사용자에게 "새해 복 많이 받으세요"와 같은 맞춤형 알림을 보낼 수있는 유사한 사용 사례를 해결해야했습니다. 사용자가 전 세계에 흩어져 있으므로 시간대에 따라 알림을 표시해야했습니다. 타임 스탬프를 UTC로 저장하는 것은 문제없이 우리의 목적에 잘 맞았습니다.

사용 사례에서 사용자 시간대를 어딘가에 저장하지 않으면 gmaps와 같은 일종의 위치 감지를 사용하지 않는 한 사용자 입력을 요청하지 않고 검색 결과를 정확하게 반환 할 수 없습니다. t 신뢰할 수 있습니다. 따라서 사용자가 웹 사이트에 입력하는 내용을 알 수 있도록 매번 시간대를 요청해야합니다.

시간대 정보가있는 경우 전체 웹 앱을 시간대 설정으로 실행해야합니다. 따라서 사용자가 9:00를 검색하면 시드니 시간대로 검색하게됩니다. 반면에 그가 뉴욕에 앉아있는 동안 이벤트를 만들면 시드니 시간대로 이벤트를 만듭니다. 우리는 날짜를 표시하면서 항상 시간대를 표시하여 이러한 경우를 해결합니다.

도움이 되었기를 바랍니다. :)


  1. UTC. 단순하게 유지하십시오.

  2. 사용자와 가장 관련있는 시간대를 사용하십시오.

    사용자가 이벤트를 위해 시드니에 있거나 시드니로 여행 할 것이라는 것을 알고 있다면 이벤트 로가는 교통편을 준비 할 때 해당 시간대를 생각할입니다. 그들이 현재 뉴욕에 있다는 사실은 대체로 무관합니다. 물론 앱이 다양한 시간대의 날짜를 표시하는 경우 항상 날짜 옆에 시간대를 표시해야합니다 (예 : 09:00 EST) .

    인터페이스가 너무 복잡하지 않으면 이벤트 시간대와 현지 시간대로 날짜를 표시 할 수 있습니다 ( 예 : 2012-06-13 09:00 EST (2012-06-12 19:00 EDT)) .

    나는 검색이 비슷한 문제라고 주장하고 싶습니다. 한 가지주의 사항이 있습니다. 우리는 오탐 (예상치 못한 결과를 얻음)을 용인 할 수 있지만 오탐을 견딜 수는 없습니다 (예상했던 결과를 얻지 못함).

    Again, I'd focus on searching the most relevant timezone to the user (e.g. event timezone), and give these results priority in the search results, but you can also return events that match in other timezones that are relevant to the user (e.g. local time). If you do this, you should show the event date in the matching timezone, especially if you highlight matching text.


Here I'm giving suggestions for best usability without bothering much about implementation feasibility.
1. For first issue of storing events in db, everybody would agree to store it in UTC

2. To give the best user experience, save the history of timezone of user. If you could save timestamp of time zone change, even better. This will enable us to give freedom to user to query without specifying timezone explicitly each time.

So with these features, let see how search query of just "9.00" by John will be handled:
With above mentioned features, now I know that John has been in 2 timezones till date(or get timezones list for mentioned period) . So I'll covert 9.00 from Sydney time zone to UTC, fire a query. Also convert 9.00 from NewYork time zone to UTC, fire a query. In result I'll show 2 rows to John displaying what he did at 9.00 in sydney and at 9.00 in new york. New york line will be blank in this case, but I think still should be shown to user , just to inform him that we searched for this time zone too.

3.What is a good way to ask the user for a timestamp that might include the time zone?

If his timezone is recently changed, whenever he logs in application, a notification should be given that, your default timezone is changed to native timezone.
While creating event, lets say user selects timezone from drop down.Lets not burden user by giving options of all timezones of world.First option of dropdown should be current time zone of user's device. after that timezones from his history of timezones, then UTC and then remaining timezones which he has never used till date.

4.How to display the results, if teams from all over the globe need to discuss the event:

I would like to divide this use case between number of teams 2 or more than 2.
For just 2 teams, I would prefer that each team sees timestamp in its local time zone and other team's time zone. (I personally prefer to talk in timezone of person at other end for his convenience while scheduling a meeting). For more than 2 teams, its better to consider more common timezone i.e. UTC. So in this case, every user should see timestamp in 2 timezones, in UTC and in his default timezone.

These suggestion are given with intention that user need not do any calculation in his local time but at the same he should be able communicate with other users fluently in their preferred time zone.


Ok I got a different approach than others:

Firstly, I assumed few things before hand.

Person who is listing an event has smartphone(if it is a browser, I dont have to make these assumptions) with:

  1. GPS

  2. HTML5 capability.

  3. Javascript capability

How should I save the time stamps in the database?

Solution: Obviously UTC, I overlaid procedure below:

Step 1. Use the Geolocation of the user using the Geolocation API

    window.onload = getMyLocation;

    function getMyLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(displayLocation);
        } else {
            alert("Oops, no geolocation support");
        }
    }

    function displayLocation(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var div = document.getElementById("location");
        div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
    }

Step 2. Give the (Long,Lat) as arguements to some of the (Lat,Long) to TimeZone api's like the Yahoo API (use Flag R to get the Latitude converted to Timezone) to get the users timezone.

=> The users timezone is determined without user input ( I am using this because you cannot simply assume that user knows the timezone of place he lives in, I knew my timezone only after few months or something at the place :P, pretty dumb!)

The each Event table has Timezone, Event & so can also have CityName Then create another database table with classification based on CityNames. So here the user will have two columns

|---------------------------------------|
|_____NewYork________|______Sydney______|
|                    |                  |
|Event 1             |  Event 2         |
|____________________|__________________| 

For UI

=> use Google Calendar API or some of the Calendar API's

Related Readings:

  1. Determine timezone from latitude/longitude without using web services like Geonames.org

  2. Timezone lookup from latitude longitude

I know its just about showing some idea how to solve this problem. But see how accurate & light-weight it becomes on users when the Timezone is determined by using device APIs

Hope it helps!


For that particular case I would store both local and UTC time. UTC is a somewhat major and used for sync and convertion of time to current time zone. Local is used for searches and for additional info, like:

You have a meeting:

12:00 Monday (UTC)
9:00 Monday (Sydney, creation local time)
11:00 Monday (Zurich, local time)

or something like that. The other way is to store creation time zone, and convert at runtime (this is particularly better in case then user will change meeting time). Either way the main reason is to be able to restore original creation time so user can refer to it.


  1. How should I save the time stamps in the database

At event creation, I would store UTC time and local time zone (aka creation time zone). I would use what I stored to convert UTC time into local time (aka creation time) and store it alongside UTC time and creation time zone.

NOTE: I can store local time from the get-go, but when the user does a search for an event, I would hope a conversion to local time exists. I also hope the server can detect which time zone the client is in.

  1. How should I present them in the UI

When a user searches for "9:00", I would search for events that include "9:00" in either UTC OR creation time OR local time. For the results, I would display one table of results in creation time (This is intended to display timestamps that may have been created in a different time zone, as we assume the user is looking for what time he created an event for wherever he was.), and display a second table of results below with related results, perhaps with the header, "Not what you're looking for? See related results" (these include the leftover UTC and local time results).

Overall, I would display UTC time, the local time, the creation time, and the creation time zone (i.e. the local time and time zone of the event where it was created) sorted by UTC time, so you can see which event comes first, in case two different events were scheduled for 9:00 in two different time zones.

참고URL : https://stackoverflow.com/questions/10834665/how-can-i-handle-time-zones-in-my-webapp

반응형