Я тут это… Трекалку для времени написал. За 628 минут

    Привет, Друзья! Пару недель назад я подумал: «А можно ли использовать гугловые таблицы (Google Sheets), как простое и безопасное хранилище данных?». О, а еще мне давно хотелось написать трекалку времени.

    И вот что получилось:

    image
    Код + Сайт


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

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

    Оказывается Google Sheets имеет очень дружелюбный API, хорошую документацию и простой hello world. За первый вечер получилось интегрировать их пример с шаблоном для vue.js .

    Сайт сразу начал работать с примитивным интерфейсом:

    image
    git checkout 62687e46d3c768f50400bc3dc95a1f699c64b626

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

    За несколько ночей я свел количество известных мне багов, граничных случаев и кликов для записи времени к удовлетворительному минимуму. А весь проект занял около 10.5 часов.

    На скриншоте сверху сайт называется «sheetime». У меня были сомнения в адекватности имени, но после замечания коллеги о большой туалетной ассоциации они развеялись. Пришлось переименовать в просто «time»

    Инструменты


    В качестве фреймворка для управления данными я выбрал vue.js, а стили взял из materialize-css. Vue мне кажется проще чем react, и без магии angular.

    Следующим шагом я выложил сайт на бесплатный хостинг с бесплатным https сертификатом: www.netlify.com (поскольку все open source). Нашел netlify по наводке от John-David Dalton'a — он хостит документацию к lodash у них, и очень тепло отзывался. Действительно удобно! Пара кликов и все работает.

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

    Удачи!


    Я надеюсь, эта маленькая история маленького проекта вдохновит вас на реализацию своей идеи! И такой простой инструмент как Google Sheets будет у вас в загашнике. Весь код доступен здесь: github.com/anvaka/time
    Поделиться публикацией

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 49

      +1
      start, end — не оч удобно на самом деле. Удобным мне кажется будет:
      заглавие и одна кнопка, старт/стоп.
      В конце рабочего дня можно селать push (с выводом всех заглавий, со скольки и до скольки и сколько минут/часов было потрачено с возможностью редактировать) после чего время должно логироватся в системе.

      ИМХО.
        0
        Мне, к сожалению, не очень подошел такой подход — я часто забывал/ленился нажимать старт/стоп, и потом еще редактировать.

        Вместо этого, я сразу же устанавливаю «start» в значение предыдущего «end», а значение текущего «end» в настоящее время. Получается, когда ввожу новую заметку, мне нужно либо просто ввести текст, либо нажать «set to now» и ввести текст — оптимизировал под себя ¯\_(ツ)_/¯
          0
          Посмотрите как это сделано в toggle. Там можно изменить время запуска и окончания вручную, если забыли запустить вовремя таймер.
            0
            Еще можно добавить режим Цезаря — возможность трекинга 2-3 параллельных дел)
        +1
        Это личное! Мне было бы неприятно если бы кто-то следил за моими записями времени, потому я целенаправленно избегаю аналитику и сторонние сервера. После загрузки сайта, все данные идут напрямую гуглу, через их API.

        Хочется верить, что большой брат не следит за нами
          0
          :)
          –9
          Спасибо, почему то не обращал внимание раньше, что у них есть API. Думаю может пригодится в будущем, но пока не знаю как с пользой это можно применить. У кого какие идеи есть?
            +2
            Даже не знаю, думаю можно например написать трекалку времени. Как это показано в статье выше.
              0
              Естественно, я имел ввиду, другие идеи, а не то что написано в статье.
                0
                Если ты не знаешь что сделать, то просто не делай этого. Зачем придумывать себе лишние цели раз ты в них не нуждаешься.
                  0
                  Да, ты прав, лучше потрачу время на что-то более полезное
              0
              Можно написать своевременную оповещалку о покупках на ближайшую неделю/месяц с возможностью информирования о периодических покупках.
              +1
              Пару недель назад, я подумал: «А можно ли использовать гугловые таблицы (Google Sheets), как простое и безопасное хранилище данных?».
              Первая мысль у многих инди-разработчиков при вопросе, где хранить, например, таблицу рекордов, если не хочется тратиться (время/деньги) на сервер, а объем данных не очень большой.
                0
                Для хостинга статики есть ещё относительно простой бесплатный вариант – публиковать на github.io и подключать CloudFlare для https. Недавно у гитхаба в репозиториях появилась настройка для использования папки /docs в качестве источника для файлов Github Pages, стало значительно проще, чем с отдельной веткой.
                  0
                  О, я не знал про CloudFlare! То есть там можно как-то к своему домену получить сертификат бесплатно и хостить на github pages?
                    +1
                    Да, именно так. Если используется свой домен, нужно перенести его dns-серверы на cloudflare, указать его в настройках репозитория на гитхабе (раньше нужен был файл CNAME, теперь всё делается через настройки). А дальше останется только настроить cloudflare, у них в блоге есть статья с инструкциями.
                      +1
                      CloudFlare это DNS с расширенным функционалом типа проксирования траффика сайта через их CDN, аналитикой, правилами переадрессации и т.д. прямо с их интерфейса.
                      Там можно настроить HTTPS, но это будет общий сертификат CloudFlare.

                      Кстати, данный сервис также отлично подойдет если например у вас есть сервер только с ipv6, но вы хотите чтобы он был доступен по ipv4.
                        0

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

                          0
                          А убрать эту капчу как-то можно?
                            0
                            Вроде как это так называемая защита от DDoS и её можно регулировать, подробнее описано здесь: https://support.cloudflare.com/hc/en-us/articles/200170096-How-do-I-turn-the-CloudFlare-captcha-challenge-page-off-
                            0
                            Показывает не так уж и часто, но соглашусь с тем, что напрягает порой. А для неподготовленных пользователей (родственники, сестры братья, родители и т.п.) это просто вынос мозга, т.к. вместо ожидаемого сайта открывается страница cloudflare с просьбой тыкнуть квадрать.
                              0

                              На каждое новое соединение и обычно кроме квадрата ещё и задачка на логику или распознавание картинок. Не знаю, от чего это зависит.

                      +3
                      Кстати посмотрел Netlify. Функционал похож на surge.sh и pubstorm.com за исключением того что тут для опенсорс-проектов дают особые плюшки)
                        –7
                        Предложение по интерфейсу:

                        Кнопку «Log Time» лучше назвать LAP — и больше «человечности» и короче надпись и боле common.
                        А надпись «Log Time» — отдаёт гикством.

                        PS Идея отличная, я бы что-то такое на телефон/планшет поставил.
                          +4
                          Ну и как расшифровывается «LAP»? Я, например, почти не работал с такими системами и непонятная аббревиатура для меня совсем не лучше честного «Log Time».
                            –4
                            https://translate.google.com/#auto/ru/Lap
                              +1
                              Окей, только вот надпись на кнопке должна обозначать действие. Перевод «lap» в качестве глагола — «лакать,
                              жадно пить». А перевод в качестве существительного дает «круг, колени (!), этап, тур», что тоже не совсем (или совсем не) подходит по смыслу.
                                –12
                                лет ми спик фром май харт — лёрн инглиш
                                  +2
                                  Вы дали ссылку на просьбу о расшифровке аббревиатуры, из которой выяснилось, что это не аббревиатура, и что слово означает то, что я выше процитировал. При чем тут мое знание английского?
                          +1
                          верни старое название
                            0
                            или sheet, time! для тех, кто забыл запостить время :)
                            +3

                            Тоже недавно открыл для себя подобную схему. Но есть решение гораздо проще, чем писать пусть и простой, но свой сайт. Создается опрос в Google Forms. Там есть чудесная кнопочка, которая агрегирует все ответы в виде Google Spreadshit — по колонке на каждый вопрос. Вместо создания сайта нам надо только накидать форму и сохранить себе ссылочку на нее.


                            Волшебная кнопка

                            В итоге имеем ровно тот же результат, но не за 628 минут, а за 3.

                              0
                              Я попробовал это первым делом :). Думаю для опросов — это отличное решение!

                              Для отслеживания времени мне не хватило несколько вещей:

                              1. Как указать свою форму для ввода времени и даты
                              2. Как сделать чтобы мобильные телефоны показывали родной datetime picker.
                              3. Как автоматически устанавливать время новой записи в значение предыдущей записи
                                0

                                Первый пункт решается внутренними методами Google Spreadsheets.


                                Альтернативное время

                                Логика такова: есть лист с сырыми данными, а во второй лист выводятся значения для дальнейшей обработки. Если указано альтернативное время, то выбирается именно оно.
                                Второй и третий пункты не очень понял.

                                  0

                                  @anvaka можете пояснить пункты 2 и 3?

                                    +1
                                    Конечно!

                                    2. Если у html элемента datetime-local то мобильные телефоны показывают родной UI элемент для выбора времени/даты. Например так выглядит айфон:

                                    image

                                    У Андроида свой есть UI.

                                    3. Когда вводите новую запись на time.anvaka.com — поле «Start» автоматически устанавливается в значение предыдущего «End», а поле «End» становится равным текущему (посмотрите на гифке https://github.com/anvaka/time/blob/master/README.md#demo ). Так получается мне максимум нужно два тапа чтобы ввести новую запись. Я не нашел как это сделать со стандартными формами…
                                      0

                                      Спасибо.
                                      Да, пункт 2 не знаю как решить — ваш вариант экономит время.
                                      Пункт 3 элементарно решается так же как и пункт 1 — средствами Spreadsheets.

                                0
                                Можешь попробовать хост на heroku.com, он бесплатно дает хост и ssl, я себе там бота держу.
                                  0
                                  У меня тоже идея подобного приложения витает в голове. только я представлял себе по-другому. В нашей деятельности можно выделить конечное количество различных действий. Скажем, для программиста это «Кодинг», «Размышления», «Перекус», «Перекур» и в этом духе. Можно на каждое такое действие завести кнопку и при смене деятельности просто нажимать на кнопку, при необходимости озвучивать голосом комментарий. Тогда доля времени, которое занимает трекинг времени, сведется практически к нулю — для смены активности нужно всего лишь 4-5 секунд. Тогда статистика будет более подробной, и, следовательно, более качественной. Лично мне было бы удобно такую приложуху запустить на планшете и поставить рядом с рабочим местом.

                                  Если такое приложение уже есть, не бейте меня сильно, подскажите лучше :) Вдруг оно уже есть, а я не знаю :)
                                    0
                                    Я пользуюсь Gleeo time tracker, там именно кнопка на каждое действие. Голосовых комментариев нет, но текстовый ввести можно.
                                    +1
                                    Только имейте ввиду, что после n записей в таблице эта самая таблица перестанет открываться в браузере.
                                      0
                                      а чем org mode не понравился?
                                        0
                                        уже довольно давно с командой используем toggl, упоминали его уже выше — замечательный инструмент с большим количеством плюшек включая интеграцию с Trello.
                                          0
                                          По-хорошему нужно сделать чтобы программа сама определяла что ты делаешь, а писать руками каждый раз — ненадолго хватит. Есть такой сервис wakatime который логирует не только время но и разную статистику кодинга, там куча расширений для средств разработки, по сути нужно дополнить это расширениями для браузера, видеоплеера и так далее.
                                            0
                                            Написать расширения под все приложения, которыми пользовались, пользуетесь и будете пользоваться? Проще сделать единое приложение, которое мониторит какое окно активно в настоящий момент и какой-нибудь хук на веб-камеру, чтобы определять наличие живности перед монитором в момент активности.

                                            Интересно по каким параметрам строится так называемая «статистика кодинга»…
                                            0
                                            Клево! Реквест фич:)
                                            — Автосоздание нового файла каждый день
                                            — Группировка по типу работы с суммированием времени
                                            — Под What кнопки последних действий, чтобы не приходилось вводить вручную
                                              +1
                                              Лучше добавьте здесь: https://github.com/anvaka/time/pulls
                                              0
                                              Так и знал, все таки vue.js убийца Jquery.
                                                0
                                                а чем плох toggle, bitrix24 и другие подобные готовые сервисы?

                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                Самое читаемое