<p>Zarządzanie datami w aplikacjach często może być źródłem kłopotów. Problemy pojawiają się w sytuacjach, gdy nasza aplikacja może być dostępna dla osób w różnych miejscach na świecie, a daty są zapisywane w niepoprawnym formacie. W tym artykule dowiemy się, dlaczego daty w systemie należy przechowywać w standardzie UTC i czym są strefy czasowe.</p><h2>Na czym polega problem?</h2><p>Wyobraźmy sobie, że w naszej aplikacji użytkownik może dodawać komentarze. Po dodaniu komentarza data jego utworzenia jest zapisywana do bazy danych zgodnie z datą systemową serwera, na którym stoi nasza aplikacja. Załóżmy, że taki serwer jest w Polsce, więc zapisuje do bazy danych jako datę dodania komentarza bieżącą datę w Polsce, czyli np.&nbsp;<code>01-01-2024 12:00</code>.</p><p>Jeżeli komentarz dodał użytkownik z Polski, to w aplikacji wyświetli mu się data dodania&nbsp;<code>01-01-2024 12:00</code>. Do tego momentu jest OK. Ale co się stanie, gdy komentarz dodał użytkownik z Portugalii?</p><p>Z racji tego, że aplikacja jako moment dodania komentarza bierze czas serwerowy, to do bazy danych zostanie wstawiona również data&nbsp;<code>01-01-2024 12:00</code>. &nbsp;Użytkownik z Portugalii zobaczy w przeglądarce również taką samą datę. Niestety, taka informacja może wywołać u niego zmieszanie, ponieważ w momencie dodawania komentarza w Polsce jest co prawda godzina&nbsp;12:00, to jednak ze względu na inną strefę czasową w Portugalii będzie godzina&nbsp;11:00.</p><p>I to właśnie godzinę 11:00, zamiast 12:00 powinien zobaczyć pod swoim komentarzem mieszkaniec Lizbony.</p><p>Nim jednak przejdziemy do rozwiązania tego problemu, najpierw musimy zrozumieć, czym są strefy czasowe i skąd wynikają różnice w czasie między krajami.</p><h2>Podział na strefy czasowe</h2><p>W XIX wieku, gdy ludzie zaczęli więcej przemieszczać się po świecie, zaczęto poszukiwać rozwiązania, które ułatwiłoby podróżowanie między krajami i mogłoby pomóc w ujednoliceniu czasu na całym globie. Wprowadzony został pomysł podziału świata na 24 strefy czasowe, w którym każda kolejna strefa ma inny czas, w zależności od swojego położenia względem strefy na południku zerowym. Południk zerowy przebiega przez&nbsp;<strong>obserwatorium Greenwich w Londynie</strong>, a czas, który panuje w tej strefie, jest&nbsp;<strong>czasem uniwersalnym</strong>&nbsp;(<i>Greenwich Mean Time</i>, w skrócie GMT). Ta strefa jest oznaczana jako&nbsp;<code>GMT+0</code>&nbsp;i oznacza to, że od niej jest liczony czas w pozostałym strefach czasowych: im dalej na wschód, tym więcej godzin odejmujemy, a im dalej na zachód to więcej godzin dodajemy do czasu uniwersalnego. W zależności ile wynosi różnica godzin względem czasu uniwersalnego, to strefy czasowe oznacza się na przykład jako&nbsp;<code>GMT+3</code> czy&nbsp;<code>GMT-9</code>.</p><p>Dla przykładu: jeżeli w Greenwich jest godzina&nbsp;12:00, to czasem uniwersalnym jest również&nbsp;12:00. Warszawa znajduje się w strefie&nbsp;<code>GMT+1</code>, co oznacza, że doliczamy jedną godzinę względem czasu uniwersalnego i na warszawskich zegarach zobaczymy godzinę&nbsp;13:00. Analogicznie, jeżeli Nowy Jork jest w strefie <code>GMT-4</code>, to czas lokalny tam będzie wskazywał na godzinę 8:00.</p><figure class="image image_resized" style="width:78.28%;"><img style="aspect-ratio:1500/809;" src="https://api.folticode.pl/uploads/tz_photo_5a4ffce614.jpg" alt="tz-photo.jpg" width="1500" height="809"><figcaption>Podział świata na 24 strefy czasowe.</figcaption></figure><h2>Czas letni</h2><p>Podział na strefy czasowe może nieco komplikować&nbsp;<strong>czas letni</strong> (<i>Daylight Saving Time</i>, DST), który obowiązuje na całym świecie (głównie w większości krajów europejskim i Ameryce Północnej). Polega on na przesunięciu wskazówek zegara w ostatnią niedzielę marca o 01:00 czasu uniwersalnego o jedną godzinę do przodu (w Polsce jest to wg czasu lokalnego z 2:00 na 3:00) oraz o cofnięciu o godzinę w ostatnią niedzielę października. Główna motywacja dla tego rozwiązania to większa oszczędność energii poprzez lepsze zarządzanie światłem słonecznym. Jeżeli przestawiamy godzinę do przodu, to zyskujemy więcej światła po południu i wieczorem, gdy wracam z pracy i chcemy zająć się obowiązkami domowymi. Dzięki temu — przynajmniej w teorii — możemy oszczędzić energię, ponieważ nie musimy używać tyle oświetlenia elektrycznego. Obecnie, to rozwiązanie jest coraz częściej krytykowane ze względu na problemy, jakie powoduje m.in. w transporcie i logistyce oraz marginalny wpływ na oszczędność energii.</p><p>Jeżeli przechodzimy na czas letni, to wtedy różnica między czasem lokalnym w Polsce a czasem uniwersalnym wynosi 2 godziny, co możemy oznaczyć jako&nbsp;<code>GMT+2</code>.</p><h2>Różnica między GMT i UTC</h2><p>W kontekście pracy z datami często obok skrótu GMT używany jest również skrót&nbsp;<strong>UTC</strong>&nbsp;(<i>Coordinated Universal Time</i>). &nbsp;Najczęściej są one traktowane jako synonimy i można je stosować wymiennie, ale warto wprowadzić tutaj rozróżnienie.</p><p>GMT jest oznaczeniem wskazującym na czas słoneczny w Greenwich, a zapis&nbsp;<code>GMT+0</code> oznaczeniem tej strefy czasowej. Pozostałe strefy czasowe przyjmują oznaczenia zgodne z różnicą od czasu GMT — czyli np.&nbsp;<code>GMT-5</code> dla Nowego Jorku albo&nbsp;<code>GMT+2</code> dla czasu letniego środkowoeuropejskiego.</p><p>UTC jest następcą standardu GMT stosowanym na całym świecie, który uwzględnia jego liczenie za pomocą zegarów atomowych, które są dokładniejsze. W praktyce wskazuje on na ten sam czas co GMT, czyli czas&nbsp;<code>UTC+02:00</code> oznacza czas w strefie czasowej&nbsp;<code>GMT+2</code>.</p><p>GMT jest zarówno strefą czasową jak i standardem czasu, natomiast UTC jest tylko standardem czasu.</p><h2>Jak poprawnie zapisywać daty?</h2><p>Do zapisu dat używamy międzynarodowego standardu&nbsp;<strong>ISO-8601</strong>. W zależności od tego, dla jakiej strefy czasowej chcemy zapisać datę, możemy użyć dwóch formatów:</p><ul><li>dla czasu uniwersalnego:<br><code>YYYY-MM-DDThh:mm:ssZ</code></li><li>dla innych stref czasowych:<br><code>YYYY-MM-DDThh:mm:ss+hh:mm</code></li></ul><p>W obu przypadkach&nbsp;<code>T</code> oddziela datę od godziny, a dla czasu uniwersalnego&nbsp;<code>Z</code> wskazuje na czas Greenwich (Zulu time).</p><p>Najlepiej pokazać to na przykładzie. W momencie pisania tego artykułu mamy w Polsce&nbsp;<code>17 marca 2024, godz. 12:00</code>. Polska jest w strefie czasowej&nbsp;<code>GMT+1</code>, co oznacza, że jest 1 godzinę za czasem uniwersalnym. Zgodnie ze standardem ISO możemy taką datę zapisać na dwa wymienione wyżej sposoby:</p><ul><li>dla czasu uniwersalnego:<br><code>2024-03-17T11:00Z</code></li><li>dla naszej strefy czasowej:<br><code>2024-03-17T12:00+01:00</code></li></ul><p>Zauważ, że dla czasu uniwersalnego podajemy czas o godzinę wstecz. Każdy z tych formatów jest właściwy, jednak w aplikacjach powinniśmy się skłaniać do używania formatu&nbsp;<code>YYYY-MM-DDThh:mm:ssZ</code>. Jest on łatwiejszy w zrozumieniu, czytelniejszy i bardziej uniwersalny. Niezależnie od tego, w jakiej strefie czasowej jesteśmy i czy mamy czas letni, data zawsze wygląda tak samo i pokazuje czas w Greenwich.</p><p>W Javascripcie możemy otrzymać datę w formacie ISO używając metody <code>toISOString</code> z klasy&nbsp;Date.</p><pre><code class="language-typescript">new&nbsp;Date().toISOString();
// 2024-03-17T11:00:00.000Z</code></pre><h2>Podsumowanie</h2><p>Wracając do problemu omawianego na początku artykułu, jeżeli zapiszemy datę dodania komentarza w czasie uniwersalnym, to z łatwością będziemy mogli przekonwertować taką datę na czas lokalny, który jest na urządzeniu użytkownika. Niezależnie od tego, w którym miejscu na świecie użytkownik dodał komentarz, to data wyświetli się odpowiednio dla innych użytkowników korzystających z naszej aplikacji w innych częściach globu, zgodnie z ich czasem lokalnym.</p><p>Jeżeli użytkownik z Pekinu (GMT+8) doda komentarz o godz. 20:00 czasu lokalnego w Pekinie, to zapiszemy tę godzinę jako 12:00 czasu uniwersalnego (<code>2024-03-17T12:00:00.000Z</code>). &nbsp;Użytkownik z Warszawy (GMT+1) zobaczy z kolei, że komentarz chińskiego użytkownika &nbsp;został dodany o 13:00 czasu polskiego.</p><p><strong>Zawsze należy przechowywać daty w formacie ISO ze wskazaniem na strefę czasową</strong>, nawet jeżeli zakładamy, że aplikacja będzie odwiedzana tylko przez użytkowników z Polski. Uchroni nas to przed potencjalnymi błędami związanymi z wyświetlaniem daty, które niejednokrotnie mogą być poważnymi problemami, które będą uniemożliwiały użytkownikowi interakcje z systemem.</p>

Frame 13.png

Jak poprawanie zarządzać czasem w aplikacjach?

<p>Współczesne strony internetowe muszą odpowiednio wyświetlać się na różnych urządzeniach mobilnych, od tabletów po smartfony. Aby osiągnąć taki efekt, powinniśmy zamieścić na naszej stronie meta tag <code>viewport</code>, który będzie informował silniki przeglądarek mobilnych o tym jak poprawnie wyświetlać treść. &nbsp;Bez tej informacji, teksty i elementy interfejsu na urządzeniach mobilnych będą dla użytkownika zbyt małe, co znacznie utrudni mu korzystanie z naszej strony.</p><h2>Czym właściwie jest viewport?&nbsp;</h2><p>W kontekście tworzenia stron internetowych <code>viewport</code> odnosi się do obszaru na ekranie przeglądarki internetowej, w którym wyświetlane są treści. Przestrzeń ta nie jest tożsama z rozmiarem strony, ponieważ <code>viewport</code> nie uwzględnia scrollbarów, które dodaje domyślnie przeglądarka, gdy treść przekracza rozmiar viewportu.</p><p>W artykule jako przykład będzie nam służył iPhone 12 Pro, którego viewport wynosi <code>390px × 844px</code>. Oznacza to, że jeśli dodamy na stronie element, którego szerokość będzie wynosiła <code>500px</code>, to strona nam się rozjedzie i treść wyjdzie poza obszar viewportu.</p><p style="text-align:center;"><img class="image_resized" style="aspect-ratio:680/698;width:40.5%;" src="https://api.folticode.pl/uploads/viewport_d6fef81302.svg" alt="viewport.svg" width="680" height="698"></p><h2>Rozmiar viewportu a rozdzielczość ekranu</h2><p>W tym momencie może pojawić się pytanie: jeżeli rozdzielczość iPhona 12 Pro to <code>1170px × 2532px</code>, to dlaczego rozmiar viewportu nie jest taki sam?&nbsp;</p><p>Problem wynika stąd, &nbsp;że nowe smartfony coraz częściej posiadają wysokie rozdzielczości (nawet do 1920px × 1080px), co sprawia, że na małym ekranie smartfona jest duże zagęszczenie pikseli. To z kolei będzie powodować, że elementy strony w przeglądarce będą zbyt małe. Z pomocą przychodzi <code>CSS pixel ratio</code>, który określa stosunek między liczbą pikseli na ekranie urządzenia (piksele fizyczne) a liczbą pikseli CSS (piksele logiczne), które są zdefiniowane przez przeglądarkę. Innymi słowy, jeżeli <code>pixel ratio</code> wynosi 3, to oznacza to, że jednemu pikselowi CSS odpowiadają trzy piksele fizyczne na ekranie urządzenia. W praktyce znaczy to tyle, że jeżeli mamy element z szerokością <code>100px</code>, to na ekranie urządzenia zajmie on rzeczywistą przestrzeń <code>300px</code>.&nbsp;</p><p>W przypadku iPhona 12 Pro <code>pixel ratio</code> wynosi <code>3</code>, co oznacza, że ekran o wymiarach <code>1170px × 2532px</code> zostanie przeskalowany do viewportu o wymiarach <code>390px × 844px</code>:</p><pre><code class="language-typescript">1170 / 3 = 390
2532 / 3 = 844</code></pre><p>W rezultacie rozmiar tekstu i elementów UI będzie zbliżony do tych na urządzeniach o mniejszych rozdzielczościach, ale będą one bardziej szczegółowe i wyraziste, z powodu większego zagęszczenia pikseli.&nbsp;</p><h2>Jak przeglądarki mobilne wyświetlają strony?</h2><p>Przeglądarki mobilne używają do renderowania stron <code>virtual viewport</code>, który zazwyczaj przyjmuje szerokość <code>980px</code>. Jak to działa w praktyce? Najpierw przeglądarka wyrenderuje stronę na szerokości <code>980px</code>, a potem <strong>skurczy ją</strong> w taki sposób, aby dopasowała się do szerokości viewportu (<code>380px</code> w naszym przypadku). Efekt będzie taki, że tekst i elementy UI będą bardzo małe. Oczywiście będzie to wyglądać źle, ale dzięki temu mamy zapewnioną chociaż minimalną skalowalność interfejsu.&nbsp;</p><p>Nie jest to oczywiście wystarczające rozwiązanie. Aby strona była w pełni responsywna, musimy skorzystać ze wspomnianego znacznika meta, który umieszczamy w sekcji <code>head</code> dokumentu HTML.</p><pre><code class="language-html">&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;</code></pre><p>Atrybut <code>content</code> może przyjmować dodatkowe parametry, ale nas interesują tutaj dwa podstawowe:</p><ul><li><code>width=device-width</code> - ustawienie szerokości viewportu na 100% szerokości viewportu urządzenia</li><li><code>initial-scale=1</code> - początkowa wartość powiększenia strony, gdzie wartość <code>1</code> gwarantuje optymalne powiększenie</li></ul><p>Tak będzie wyglądał efekt z zastosowaniem meta tagu <code>viewport</code>:</p><p style="text-align:center;"><img class="image_resized" style="aspect-ratio:1007/698;width:56.64%;" src="https://api.folticode.pl/uploads/roznice_viewport_0915c11836.svg" alt="roznice viewport.svg" width="1007" height="698"></p><p>Tekst i grafiki są teraz odpowiednio dostosowane pod względem rozmiaru do ekranu urządzania mobilnego, dzięki czemu użytkownik nie musi ich ręcznie powiększać.</p><h2>Podsumowanie</h2><p>Smartfony i tablety pomimo swoich małym rozmiarów są wyposażone w coraz to większe rozdzielczości ekranów. Zastosowanie znacznika <code>meta viewport</code> w połączeniu ze skalowaniem <code>pixel ratio</code> sprawia, że możemy widzieć na ekranach urządzeń mobilnych treści w odpowiednim rozmiarze dla naszego oka. Stosowanie tego rozwiązania jest absolutnym standardem w tworzeniu współczesnych stron internetowych, i myślę, że warto zapoznać się z jego działaniem.</p>

Blog - kategoria frontend

Jak poprawanie zarządzać czasem w aplikacjach?

Dlaczego potrzebujemy na stronie meta tagu viewport?