Это история о том, как я выпустил в свет свой небольшой продукт на весьма нишевый девайс, но ведь все когда-то начинается с малого не так ли?

Почему Pebble

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

Как я начал делать вотчфейсы

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

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

Детали

Самой простой задачей было сделать внешний вид: к этому моменту у меня уже был макет в Figma, и я понимал, как лучше пользоваться нейронкой, чтобы ускорить перенос визуала в код.

Но просто перенести картинку было бы скучно. Мне хотелось сделать что-то, что передавало бы дух самой Pebble, поэтому я принялся добавлять детали.

Анимация запуска

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

Вибропаттерн

Далее мне хотелось, чтобы анимация давала небольшую физическую отдачу, как Haptic на технике Apple. В качестве референса вибропаттерна я взял одну из оригинальных вибраций Pebble OS¹ и сильно ее кастомизировал. В результате получился паттерн из едва заметных постукиваний, который по ощущениям точно совпадает с анимацией – её таймингами и пейсом.

Настройки

Pebble SDK позволяет кастомизировать почти любой элемент вотчфейса, если разработчик это заложил. Я выделил несколько опций, которые точно должны быть: 24/12-часовой формат времени, возможность отключить вибрацию/анимацию и выбор темы.

После небольшого ресёрча я заметил, что некоторым пользователям не хватает вибро-индикации прошедшего часа – классической функции цифровых часов. Решил тоже её добавить: теперь проигрывается короткий едва ощутимый паттерн, который аккуратно сигнализирует, что стукнул следующий час.

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

Выпуск в свет

Я остался доволен полученным результатом и решил поделиться вотчфейсом с комьюнити и выложить его в стор².

Чтобы чуть поднять охват и убедится, что багов нет³ я написал сообщение в коммьюнити владельцев Pebble в Discord и несколько человек даже поделились фотографиями своих часов с моим вотчфейсом.

В целом реакция была положительной и я подумал почему бы не запостить про это в Twitter – перед сном решил набросать небольшое сообщение, отметил аккаунт Эрика Магиковски и нажал на кнопку “Post”.

Что я планирую делать дальше

Я думаю о том, чтобы реализовать еще несколько вотчфейсов из моей Figma в код, также у меня есть идея сделать темплейт для конфигуратора вотчфейса базирующийся на легковесном web-фреймворке Astro, чтобы любой желающий смог быстро набросать аккуратный интерфейс настроек вотчфейса.