Вписался с детьми в 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.
Деплоим бесплатно на Vercel: vydokh.vercel.app
Пакуем как PWA — offline-first, с service worker — чтобы с сайта приложение можно было установить на смартфон или десктоп, как native-like. После первого визита оболочка работает без сети.
Всё! Из небольшого учебного прототипа на micro:bit — в солидное веб- и мобильное приложение, которое доступно теперь всем.
Очень хотелось показать, что вот такие игрушечные проекты могут достаточно быстро вырастать во что-то очень осязаемое и ощутимое, и уже прямо сейчас начать приносить пользу, а люди могут ими пользоваться.
Сейчас, с современными инструментами, циклы производства будут очень короткими — поэтому важно сосредоточиться на идеях и пользе.
Связанные заметки
- [Как мы с сыном сделали датчик полива для кактуса, или Почему micro:bit — лучший первый компьютер]
- [Умная елочная игрушка на micro:bit]
- [Алиса командует micro:bit — пишу вместе с сыном кастомные голосовые навыки]
- [Recovery и observability для PWA/WebView после сбоя загрузки]
- [View Transitions в React — рабочий инструмент, который уже год в продакшене]
- [Веб-доступность — это не хайп, а ответственность]