Вписался с детьми в do your :bit challenge — как гордые обладатели своего micro:bit мы не могли пройти мимо.
Суть в том, чтобы познакомиться с устойчивыми целями развития ООН и придумать проект вместе с микроконтроллером, который помогал бы в достижении одной из таких целей.
Дети дизайнили свои проекты и выбирали понравившуюся цель, а в процессе мы делали типовые проекты, которые предлагает Micro:bit Educational Foundation как пример.
Одно из таких — Calming LEDs — очень простой прототип приложения по управляемому дыханию.
Круг в центре LED-дисплея пульсирует по временным интервалам, пользователь в такт ему делает вдохи и выдохи.
Такие техники позволяют концентрироваться, снижать стресс и медитировать. Это попадает в Цель 3: Good Health and Well-being — пришлось немного, правда, объяснить, что это и зачем.
Но суть не в этом. Перед этой лабораторной я показал, что этот проект не пустышка, а реально работающее приложение, которым пользуются миллионы людей — на примере схожего функционала в своём Xiaomi Band.
Но мне захотелось развить идею из прототипа и показать, как рождается полноценное приложение от 0 к 1, которое доступно всем и выглядит вполне серьёзно.
Переносим в веб
Берём прототип и просто переносим его в веб. У нас всё тот же таймер, всё тот же пульсирующий круг, добавляем немного контролов управления — старт сессии дыхания и стоп.
Делаем лёгкий, простой дизайн в стиле минимализма, но с современными деталями — такими как красивые плавные градиенты — и, конечно же, Mobile-First, чтобы можно было пользоваться на смартфонах.
Добавляем цветовые темы, чтобы было интереснее, а также больше техник дыхания — глубокое диафрагмальное, box 4×4, 4-7-8; сессии на 5, 10, 15 или 20 минут.
Создаём контентную страничку, где кратко расскажем про суть разных техник и дадим ссылки на источники — Cleveland Clinic, Harvard Health, NCCIH и другие.
Вместе с ИИ-агентами такие проекты сейчас делаются очень быстро, особенно если ты чётко знаешь, чего хочешь, выстроил рамки дизайна и кода, и двигаешься чётко к цели. Стек простой: Vite, Tailwind, Workbox для PWA. Поэтому можно сразу сделать два перевода на русский и английский язык, тёмную и светлую тему, и даже попытаться поддержать доступность (Accessibility) на достойном уровне — skip link, подсказки для скринридеров, reduced motion.
Даже логотип оригинальный нарисовали (сгенерировали, конечно же, сгенерировали).
Выглядит солидно, но пока это локальная история, а мы хотим отдать это миру — чтобы все могли чувствовать себя чуть более healthy and well-being, как в Цели 3.
Раньше я использовал GitHub Pages, можно Heroku или Netlify, но сейчас мне удобно на Vercel — всё это бесплатные платформы для хостинга веб-приложений. Деплоим бесплатно на Vercel: vydokh.vercel.app
Пакуем как PWA — offline-first, с service worker — чтобы с сайта приложение можно было установить на смартфон или десктоп, как native-like. После первого визита оболочка работает без сети.
Развиваем идею с более современными Web API, чтобы можно было дышать и медитировать с закрытыми глазами. Добавляем звуки как индикаторы вдоха и выдоха через Web Audio API, а в такт звуку — вибрацию (haptic) через Vibration API: пока будет работать только на Android, iOS это ещё не поддерживает, но получилось один в один, как у меня на Xiaomi Band.
PWABuilder позволяет упаковать PWA в настоящую нативную обвязку для Android или iOS. App Store дерёт по $100 в год за аккаунт разработчика, поэтому туда эксперименты ради хобби или «поиграться» выкладывать дороговато, а вот Play Store берёт разовую плату $25 — не бесплатно, но ок.
Если честно, хуже UI/UX, чем у Google Play Console, я не видел. Там чёрт ногу сломит — даже Facebook со своими страницами настроек не такой противный. Хотя… Короче, самый быстрый time-to-market — это у веб-платформы: сразу для всех ОС и без заполнения кучи форм.
Мы хотели просто выложить наше творение в Google Play, но бюрократы из Маунтин-Вью решили иначе. Мало того, что они содрали с нас $25 за вход, так теперь требуют ещё и минимум 12 живых тестеров для закрытого теста! Так что милости просим — станьте нашими тестировщиками, если захотите помочь (и сами подышать заодно).
Всё! Из небольшого учебного прототипа на micro:bit — в солидное веб- и мобильное приложение, которое доступно теперь всем.
Очень хотелось показать, что вот такие игрушечные проекты могут достаточно быстро вырастать во что-то очень осязаемое и ощутимое, и уже прямо сейчас начать приносить пользу, а люди могут ими пользоваться.
Сейчас, с современными инструментами, циклы производства будут очень короткими — поэтому важно сосредоточиться на идеях и пользе.
P.S.
А сам do your :bit, конечно, не только про мой веб-эксперимент. Дети делали свои проекты — и вот тут уже совсем про дом, привычки и «а зачем мы это жжём / выбрасываем».
Сын собрал умный выключатель: тот грустит, когда свет горит зря, и радуется, когда выключили. Простая идея, но работает на удивление хорошо — мимо такого уже не пройдёшь равнодушно.
У дочки — похожая концепция, только с мусором. Мало вынесли — хорошо, много — плохо: корзина буквально показывает настроение. От куска скотча и micro:bit на бортике — до аккуратного концепта с зелёной и красной рожицами.
Неплохо для выходных и всего одного микроконтроллера.
Связанные заметки
- [Как мы с сыном сделали датчик полива для кактуса, или Почему micro:bit — лучший первый компьютер]
- [Умная елочная игрушка на micro:bit]
- [Алиса командует micro:bit — пишу вместе с сыном кастомные голосовые навыки]
- [Recovery и observability для PWA/WebView после сбоя загрузки]
- [View Transitions в React — рабочий инструмент, который уже год в продакшене]
- [Веб-доступность — это не хайп, а ответственность]