DEV Community

Cover image for My Dashboard: как я превратил старые Android-устройства в кроссплатформенные дашборды с помощью AI и типобезопасного fullstack
ILshat Khamitov
ILshat Khamitov

Posted on

My Dashboard: как я превратил старые Android-устройства в кроссплатформенные дашборды с помощью AI и типобезопасного fullstack

#webdev #programming #ai #javascript

Введение

У меня дома лежали несколько старых Android-устройств. Рабочие, но без дела. Я задумался: «А что если их использовать как интерактивные дашборды?» — и решил реализовать веб + мобильное приложение, где устройства показывают информацию и позволяют вводить данные.

В разработке активно помогал AI-ассистент Qoder, который написал большую часть кода, а я корректировал ошибки и адаптировал под проект.

Цель проекта

Основная цель: типобезопасный fullstack, где фронт автоматически подтягивает типы с бэка через TypeScript без генерации SDK.

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

Технологический стек

  • Backend: tRPC + Zod схемы
  • Frontend: AnalogJS + Formly (SSR, генерация форм с серверной валидацией)
  • Mobile: Ionic + Capacitor (поддержка старых Android, интеграция с веб-виджетами)
  • AI: генерация виджетов, форм и части UI (~70% кода)

Архитектура и подход

  • Все виджеты используют Zod схемы, которые автоматически подтягиваются на фронт для генерации форм.
  • Формы на фронте получают серверные ошибки валидации прямо в поля формы.

  • Для SSR пришлось решать несколько нестандартных задач:

    • Кэширование между SSR и фронтом иногда срабатывало некорректно → отключил transfer cache.
    • Добавил возможность подмены fetch для передачи куки и токенов авторизации.
    • Частично решены кейсы авторизованных и неавторизованных запросов при SSR.

  • На мобильной части с Capacitor/Ionic столкнулся с:

    • Поддержкой старых Android SDK
    • JS-версией QR-сканеров, так как встроенные не работали
    • Шарингом тем и виджетов между вебом и мобильной частью

Что удалось достичь в MVP

  • Минимальный дашборд с несколькими виджетами, полностью кроссплатформенный (веб + мобильное приложение)
  • Настроен CI/CD для деплоя веба и мобильного приложения
  • Частичная поддержка SSR + авторизация
  • Генерация UI и бизнес-логики с помощью AI
  • Быстрое прототипирование MVP всего за 1,5 месяца

Выводы и инсайты

  1. AI ускоряет разработку: 70% кода было сгенерировано, а я сосредоточился на архитектуре и интеграции.
  2. Типобезопасный fullstack работает: фронт подтягивает все типы автоматически, без ручной генерации SDK.
  3. Кроссплатформенность возможна, если правильно спроектировать общие виджеты и бизнес-логику.
  4. SSR + авторизация — нюансная тема, но с отключением transfer cache и подменой fetch можно решать кейсы авторизации.

Ресурсы и ссылки

Top comments (0)