Умные устройства для дома своими руками

Умный дом, опыт построения, бег по граблям (MajorDomo, Tasmota и Алиса)

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

Если теорию знаете, можно перейти к моей истории поисков идеального решения.

NB! Так же для удобства, жирным курсивом подсветил названия технологий и платформ. А просто жирным — важные наблюдения или выявленные глобальные засады.

Ну, а теперь по порядку, немного теории

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

В любом случае речь про управление устройствами, кратко их можно собрать в группы:

Бытовая техника (пылесосы, телевизоры, чайники, кондиционеры)

Лампочки/ленты (меняют цвет и яркость)

Датчики (мощность, напряжение, температура, влажность, концентрация газов)

Диммеры (пропорциональный выходной сигнал)

Исполнительные устройства (регуляторы температуры, привод штор)

Шлюзы (пульты, универсальные передатчики команд)

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

Умный дом Яндекс — нет логики, только команды, много совместимых устройств

Xiaomi (Aqara) – простые скрипты

Google Home – простые скрипты, много совместимых устройств

Domoticz – ограничен набор устройств, развитая логика

IFTTT — ограничен набор устройств, развитая логика

HomeAssistant — ограничен набор устройств, развитая логика, настройка интерфейса плагинами

Majordomo (php) — развитая логика, открытый проект, активно развивается, требует умения программировать.

Нужно заметить, что платформы от именитых производителей умеют работать друг с другом. То есть их экосистемы можно объединять, что существенно расширяет перечень подключаемых устройств. Кстати, о подключениях тут есть 2 аспекта: как подключаться физически и как общаться с концентратором умного дома.

Физически можно связываться через локальную компьютерную сеть (проводную или беспроводную), сеть малого радиуса (Bluetooth, ZigBee) или просто по радио или инфракрасному каналу (последнее обычно только в одну сторону работает).

Что же касается «языка» на котором общаются устройства, то тут вариантов много, но можно разделить на открытые (общедоступные) типа mqtt (сервис коротких сообщений через центральный сервер) или web-hook (обычные прямые ссылки на веб-сервер на борту устройства) и закрытые типа протокола Xioami/Redmond и прочих, которые известны только производителям.

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

Насколько я понял, большинство облачных сервисов не поддерживают логику. То есть в «Яндекс доме» можно узнать температуру и включить обогреватель. Но заставить Яндекс следить за температурой и держать в комфортном диапазоне – нет!

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

Как ни странно, дешевые микро ПК на ARM процессорах, например OrangePi, Nano Pi и прочие фруктовые Пи вполне тянут систему с базой данных, брокером сообщений и веб-интерфейсом. Не говорю уже про Raspberry – это вообще, как заговоренные.

Из программных серверов умного дома можно выделить популярные: Blynk (есть вариант облака и локальный), IFTTT (чисто облако, но с мобильным приложением), Home Assistant, Domotics, Majordomo.

История рождения моего умного дома

На момент начала моей автоматизации, у меня были штук 6 устройств SonOff (у них родное приложение и облако – eWeLink), управлял розетками на даче. И поставил камеры Xiaomi Dafang (камеры не понимали русский, но это PTZ, FullHD, да еще и стоили всего 2 тысячи рублей каждая). Камеры принесли на дачу постоянный интернет (мобильный), роутер. А также облако Xiaomi. Итого, 2 облака – Xiaomi + eWeLink. Надо было собирать в единую панель управления. Первым был установлен HomeAssistant, даже игрался с камерами (хотел на датчик движения у камер прикрутить и сохранять в системе). Но дальше скриншотов, и то не всегда, дело не пошло. С SonOff вообще не смог подружить. Решив, что логика для розеток все-таки важнее, начал играться с MajorDomo, который имел для этих устройств коннектор, а также более-менее понятный интерфейс настроек (субъективно, да, php+html, объектно-ориентированная модель).

Первый тревожный звоночек пришел от Роскомнадзора – в попытке убить телеграмм (безуспешной) они прибили доступ ко многим облакам, в том числи и Xiaomi. В середине зимы было очень неприятно оказаться без видеонаблюдения за дачей, расположенной в 100 км от дома..

Итог – камеры перепрошиты на Dafang Hack (прошивка делающая локальный RTSP сервер потокового видео) и первая моя Raspberry c MotionEyeOS (локальный видео сервер), а также белый IP дома и VPN между домом и дачей (на роутерах Mikrotik). Локальный сервер держит архив на 500Гб (пара месяцев с двух камер), питается от аккумулятора (до 3 дней без света).

Для логики нужно не только управлять, но и контролировать, для этого купил SonOff POW R2 – это фактически, счетчик электроэнергии с выключателем на 16А (стоимость по 750 рублей). Это позволило при включении посудомоечной машины, бойлера для воды (суммарно 4 кВт) блокировать розетку с чайником. Сейчас это модно называется DemandResponse. А так же стало возможно контролировать работоспособность насосов водоснабжения и канализации (по графику дренаж включается и на графике мощности есть пики, по которым можно понять, много ли воды и вообще, не завис ли поплавок!) — дистанционная диагностика оборудования. Так же для управления низковольтными устройствами (включение дизельного отопителя, насоса аэрации воды для очистки, отключения зарядника от аккумулятора, когда нет напряжения в сети СНТ) был куплен клон SonOff G4 – четырехканального реле с радиопультом (еще 1100 рублей).

Второй «звоночек» пришел от eWeLink – с выходом в массы устройства контроля напряжения SonOff POW R2 поток через их сервер, видимо, стал превышать их возможности (ток, напряжение, мощность активная, мощность реактивная, мощность полная, коэффициент мощности и все это 5 раз в секунду с каждого такого устройства) и они решили, что датчики будут телеметрию слать один раз в минуту. То есть у вас уже минуту мощность за разумными рамками или напряжение просело до Америки (113 вольт реально было летом), а умный дом живет в розовых мечтах, что все хорошо.

Итог – модуль MojorDomo для локального режима SonOff и окончательный переход на MajorDomo на Orange Pi (стоила около 1000 рублей всего, пришлось осваивать Linux, а точнее – Armbian и по инструкциям ставить MajorDomo). Но недолго музыка играла… SonOff почувствовали что-то неладное и очередная прошивка на их сервере отрубила локальный режим, то есть только через облако, только раз в минуту..

Полная локализация

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

Очередной шаг – перепрошивка всех устройств на Tasmota, отказ от протокола eWeLink и уход на MQTT. Это, кстати, открыло путь в полный лоукост – прошивка легко настраивается, а плата Wemos из Китая стоит всего 120 рублей, при этом на борту 12 линий для подключения периферии, АЦП, WiFi. Так число устройств в умном доме увеличилось раза в 3 – выключатели, датчики напряжения на АКБ, датчики температуры и влажности (кстати, оказалось, что лучший AM2301 – это AM2320! Программно совместим с AM2301, который еще называют DHT21, но при этом стабилен, не глючит и не зависает).

Тут Остапа понесло и в умном доме появились солнечные панели, 2 контроллера (один PWM, второй — MPPT), датчики тока от солнечных панелей в систему и на АКБ (просто по напряжению на клеммах степень заряда не измерить). От АКБ, кстати, на этот момент питаются 3 камеры, 2 микросервера, 2 роутера, общее потребление примерно 40Вт постоянно.

После примерно полугода, когда все было настроено и отлажено пришла беда – умерла карта памяти. Свежего бэкапа не оказалось – все ждал идеального состояния, не дождался. Изучил, какие карты бывают – узнал про MicroSD A2 – это карты с контроллером, как у SSD дисков — то есть много и часто писать/читать мелкие файлы им не страшно. Настроил, по памяти восстановил логику и оформление, сделал бэкап. Через месяца три началось неладное – зависания, тормоза при открытии графиков за месяц. Анализ (я почти стал спецом по Linux) показал, что база данных тупит из-за очень большого числа накопленных данных. Пришлось делать удаление старых данных, оставляя только по 2 отсчета за минуту для данных старше месяца. Помогло, но не сильно. Надежда была на плату с большим объемом памяти – Orange Pi One Plus (700 рублей), но не судьба. В итоге куплена Raspberry Pi4 c 2Гб памяти на борту, а для этой палаты есть оптимизированный образ MajorDomo – и о чудо, там все отлично – БД крутится полностью в памяти, раз в час сбрасывается на карту бэкап, в случае незапланированного падения, при загрузке восстанавливается состояние на начало часа.

Все это было отлично, управляется с компьютера, с телефона (экран на картинке – там 2 таких сцены, одна для управления и климата, вторая для телеметрии).

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

Появление голосового управления

И вот тут я задумался, что пора подключать голосовой помощник. Сначала думал про Google Assistant/Home, но увидав, что они творят со своим президентом, да еще к новому году отключили поддержку русского на колонках (оставив только на телефонах), решил, что вполне реально повторение с отключенными облаками Xiaomi и eWeLink. В итоге, Алиса от Яндекса. Каково же было мое удивление, когда увидел, что есть стандартный коннектор (навык Алисы) к MajorDomo! Яндекс станция мини отлично подошла по функциям и размеру, более того, нашел и обратный коннектор – из MajorDomo можно выдавать команды на устройства, подключенные к Алисе – пультам кондиционеров, телевизиров и даже роботу-пылесосу. И это не считая проговаривания статусов типа «внимание, работаем от аккумуляторов!». Соединение с Алисой можно сделать двумя способами – через платный сервис Connect (2 тысячи рублей в год, бонусом облачные бэкапы) или через Яндекс.Диалоги – для этого надо SSL сертификат на сайт, белый IP, и выставленный в интернет сайт с MajorDomo, то есть свет или отопление сможет отключить случайный прохожий. В общем, 2к в год – не большая цена за сохранение комфорта, да и SSL покупать не надо.

Естественно, управление через Яндекс – это чисто функция комфорта, основная логика реализована на локальном уровне.

Источник

Умный дом своими руками на ESP8266 + Kotlin + React

Решил написать про свой опыт построения «умного дома». Тема конечно достаточно избита и статей последнее время про нее много. Но это же и хорошо – значит люди занимаются, делают. Недавно, например, вышел совершенно могучий материал (очень большой труд): Умный Дом. Большое пособие по организации умного дома и автоматизаций в Homekit.

Сразу оговорюсь, что мой кейс достаточно специфический, цели и задачи всей затеи тоже не вполне классические (спойлер: изучить Kotlin и React для работы), поэтому эта статья – для разработчиков, гиков и просто увлеченных людей. Всё что вы увидите под катом я позиционирую как дополнение к материалу «Мой умный дом на ESP8266» (автор: khusamov).

Вместо эпиграфа

Совсем недавно я прочитал заметку писателя Леонида Каганова про проблематику умного дома – очень понравилось (не настолько круто, конечно, как его же рассказ «За что я ненавижу Линукс»), но все равно очень хорошо, рекомендую. Позволю себе процитировать:

Проблема УД — никчемность. Объем задач, которые электроника может решить, — это около 1% всех домашних дел, связанных с ведением хозяйства, пищей, уборкой и повседневными операциями. Электроника не сварит борщ, не сбегает в магазин, не протрет пыль с книжных корешков, не сметет крошки со стола, не почистит за вас зубы и не помоет голову, не вынесет мусор, не выгрузит и не развесит белье, не погладит рубашку, не уберет г#%$о за котом.

Электроника сможет включить свет на кухне. Но как раз это не проблема сделать самостоятельно. Среди этого 1% задач нет качественных — тех, которые дают принципиально новое качество жизни. В основном УД предлагает решения количественные: снизить количество секунд, затраченных для включения света — с пяти секунд (при традиционном путешествии к выключателю) до 11 секунд (поиск смартфона и запуск специального приложения в нем).

Для кого этот материал

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

Иными словами, если у вас есть страх перед железяками, но вы нормально общаетесь с компьютером, софтом и программированием – вам сюда. Ну и как предупреждение – делайте скидку там, где «электронные» рассуждения будут наивными.

Что такое «умный дом» (imho)

Само название себя достаточно дискредитировало, поэтому я сам склоняюсь к термину «автоматизированный дом». В моем случае я сделал пока только включалку лампочек и розеток.

Цели и задачи

Настало время сформулировать цели и задачи:

Развиваться всегда хочется разносторонне, для этого вполне подойдет реализация какого-нибудь очередного pet-проекта;

Давно присматриваюсь к «умным домам», потому что это интересно, это «железяки + программы»;

Также хочется провести время с пользой и поэтому ключевое – изучить некоторые новые языки программирования и фреймворки. Забегая вперед скажу, что в части софта речь пойдет про Kotlin/Spring и React.

Остановимся на третьем пункте, ключевом для меня. Большое количество статей и поделок основано на том, чтобы взять какое-нибудь ПО и «сконфигурировать его должным образом». Чаще всего, как мне кажется, берут Domoticz, Home Assistant (не ставил ни то ни другое), но перечень постоянно растет.

Почему этой дорогой идти не хотелось: вероятно, получилось бы «стройнее» и «грамотнее», но приобретенные знания заключались бы в том, что я научился хорошо конфигурировать специализированное ПО. А цель ставилась другая. В моем случае изучение языков программирования помогает в текущих и будущих проектах, позволяет лучше понимать коллег из фронтэнда и бэкэнда. В общем, одни сплошные плюсы.

Начало

Итак, приступим. Решено было делать все на знаменитой микросхеме 8266. Плюсы:

Куча документации, информации;

Работает по Wi-Fi, а провода (слаботочка) у меня не проложены;

Может быть точкой доступа и веб-сервером;

Некий опыт работы с «ардуиной» уже имеется, поэтому как минимум – не с нуля.

Принципы умного дома

Сформулируем основные принципы, это важно:

Все должно функционировать в локальной сети дома;

Должен быть доступ из интернета. А когда нет интернета, см. п.1;

Должно работать с мобильных устройств и из браузеров;

Никакие сторонние серверы для управления устройствами быть не должны (только те, что из п.1);

Также прикрутить это все к Алисе, раз уж она есть;

Пульт управления должен находиться внутри самой квартиры.

Выбор оборудования

Можно было строить все на голых платах и реле – их доступно масса (Алиэкспресс, родной), но, посмотрев, выбор пал на устройства Sonoff. Что мы тут имеем:

Плюсы

Минусы

• Корпус;
• Заводская сборка, заводская пайка;
• Некий опыт использования «в народе»;
• Постоянно расширяющаяся линейка продукции. Уже и лампочки есть;
• Легко перевешивается туда, куда захочешь (ESP Easy, Tasmota)

• Своя прошивка, которая общается со своими же китайскими серверами;

Заказываем на Али устройства: Sonoff 4Ch Pro, Sonoff Basic, Sonoff S26. Первая – штуковина на четыре устройства. Не знаю, нужно ли было брать Pro, но что взял то взял. Есть смысл брать подобные, так как подключить можно четыре канала, а соединение по Wi-Fi одно – бережем сеть. Вот он, красавец, смонтирован даже в корпус и на дин-рейку.

Sonoff 4CH Pro. Basic и S26. Бейсики — просто минимальные устройства, их можно вкрутить в «разрыв провода». S26 — умная розетка. Как по мне, с ней чересчур громоздко, более мелкая пайка, но, тоже опыт.

Для пульта управления купил на Авито планшет Amazon Fire по совсем уж скромным деньгам (оно и понятно – пользоваться им в 2021 году вряд ли кто уже будет, но для пульта управления подойдет). Видимо даже чуть ли не одной из первых версий, с андроидом аж второй версии, причем сильно кастомизированной.

После танцев с бубном удалось поднять версию до обычной 5-ки, этого хватит для запуска браузера. Планшет хоть и дубовый, но качество сборки у Амазона все-таки выше, чем у китайского ноунейма. Он был прикручен к стене в коридоре

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

Как прошивать

Не буду подробно останавливаться, в статьях выше есть. Ключевое – покупается платка (конвертор интерфейса USB в TTL UART). Я покупал на Авито, можно на Али (но не хотелось ждать), можно скорее всего в «чип и дипе».

Магии почти никакой нет, куча информации есть на 4pda (важно во всей этой мелкой электронике никогда не путать 3.3V и 5V – иногда на платах даже есть переключатели). Одной стороной плата смотрит в USB компьютера, другой припаивается к Sonoff (важно не перепутать контакты Rx и Tx, но если и перепутаете, то греха не будет – просто прошивка не пойдет, ничего не сломается).

Прошивка инициируется определенными действиями – либо надо кнопку нажать, либо определенный контакт замкнуть (зависит от устройства – смотреть в профильной теме на 4pda). Все сработает, хоть и не с первого раза.

После прошивки устройство поднимает собственную Wi-Fi сеть. Нужно подключиться к ней и прописать устройство в сеть роутера, тогда оно станет полноценным членом этой сети.

О прошивках

Интереснее выглядит ESP-Easy, она такая, более техническая что ли. Но у меня была проблема – пробовал прошить бэйсики одной из версий, в итоге все время отключалась сеть (видимо была проблема в конкретной версии). Тогда я поставил на эти устройства «Тасмоту», с ней проблем не было (хотя, 4ch очень успешно работает на ESP-Easy).

Минимально все сделано, можно монтировать. Все устройства доступны по HTTP, включать/выключать можно простым GET запросом из браузера. Но это ведь не то, что мы хотели?

Нужно написать софт, который всем этим будет управлять. Софт должен где-то располагаться, т.е. ему нужен сервер. В качестве сервера подойдет любой более-менее приличный одноплатник (jvm все-таки ресурсоемкая штука).

Под это дело я купил Orange Pi 4B (попутно на нем еще несколько других штук крутится), плата достаточно хорошая, сравнительно недешевая – производительность на хорошем уровне. Из минусов – греется как утюг, но вроде это ее не портит, иначе не работала бы. На всякий случай просверлил две дырки и поставил ей вентилятор (стало шумновато).

Orange Pi 4B. Однако, как самое популярное решение, наверное проще всего — взять Raspberry PI.

Пишем софт

Концепция приложения

Сформулируем концепцию. Она же потом ляжет в основу базы данных приложения.

Конфигурация. Идея следующая – чтобы можно было вести в одной программе несколько конфигураций. Допустим дома одна картина мира, а на приусадебном участке – другая. Пока не пригодилось, но оставим задел на будущее;

Пользователи. Да, все пользователи у нас авторизованные, по паролю. И один служебный – для работы Алисы.

Локация. Группирующий элемент, ближайший аналог – комната;

Устройство. Собственно, само устройство. Здесь, как раз, записываются конкретные команды на включение / выключение / получения статуса.

По мелочи и не совсем по теме. Решил также вести перечень полезных ссылок – всего, что дом умеет отдавать себя через браузер.

Самое время придумать приложению название – пусть у нас будет «Умное гнездо», т.е. Clever nest.

Рассказ про Kotlin

Настало время чуть более подробно остановиться на приложениях. Серверную часть писать будем на Kotlin. Почему он? Java я уже более менее знаю, а Kotlin у нас на работе набирает популярность, т.е. есть смысл к нему присмотреться. Тем более в Андроиде он сейчас уже язык по умолчанию, а еще он сейчас шагает и в сторону Native, JS и iOS. Как оказалось – не зря. Изначально его воспринимаешь как некий синтаксический сахар «над явой» (прощай lombok!), но потом начинаешь уже думать на нем.

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

Есть много статей, в которых преимущества Kotlin описаны более подробно, например недавно попалась на глаза из свежих – в целом там все более-менее нормально описано.

Также мы будем использовать Spring (Spring Boot 2), так как этот фреймворк тоже максимально популярен, мы его также используем.

Что будет делать приложение?

Оно будет принимать входящие запросы (GET, POST) и отдавать в ответ данные в формате JSON. Визуальной части у приложения не будет, хотя одна страничка все-таки есть:

Страница серверного приложения

Целью статьи не ставится детальное описание процесса написания софта (больше хочется показать всю картину в целом), поэтому остановлюсь тезисно:

Разработка велась в IntellijIDEA. Лучшая IDE на мой взгляд, вполне хватило бесплатной версии;

Из базового шаблона был выбран Kotlin + Spring Boot + Gradle. Шаблон приложения можно построить инициализатором: https://start.spring.io/;

В качестве БД была взята легковесная Java БД: H2 database (https://www.h2database.com/html/main.html). Не знаю почему, просто было интересно попробовать. В целом – никаких нареканий, все нормально. Хотя, как-то развивается она вяло и в следующий раз я взял бы HSQLDB или SQLite;

Какие удалось применить и опробовать фишки, которые ранее не пробовал:

Самодокументирование методов и отдача REST-эндпоинтов в качестве Swagger интерфейса. Отлично и для описаний, и для тестирования, не требует почти ничего дополнительного. Всегда сейчас буду пользоваться (на скриншоте ссылка /swagger-ui/ как раз об этом). Выглядит вот так:

Самодокументирование эндпоинтов приложения через swagger

Вляпался в одну неприятность – самая последняя версия Spring Boot не захотела работать со сваггером (вернее он с ней), но “предпоследняя» вполне работает – если будете брать проект и обновлять версии библиотек – вы предупреждены (сейчас уже могло все измениться).

Мониторинг java-melody. Тоже в целом приятная штука со всякими графиками и т.д., которая много чего показывает. Особо не нужно в таком мелком проекте, но для интереса – прикрутил. Умеет даже SQL запросы выводить и время их выполнения;

Аутентификация в сервисе с помощью Spring security, JWT-токенов с хранением пользователей в таблице БД. Использовалась библиотека «Java JWT: JSON Web Token for Java and Android». Так как интерфейса для ввода пользователей нет (вводятся напрямую в БД), а пароли в БД хранятся в виде закодированных хэшей – сделана сервисная ссылка: password encryption;

Опробованы также действия по расписанию через Spring аннотацию @Scheduled (пригодилось для периодического опроса устройств)

Приложение установлено в систему в виде systemd сервиса, при перезагрузке устройства (плановой и аварийной) автозапускается;

Исходники доступны на github.

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

Рассказ про React

Настало время написать клиентское приложение. С этим всем у меня куда как хуже. То есть на базовом уровне о Javascript я представление имею. Когда-то использовал jQuery и это очень классная библиотека.

Почему React? Тут тоже все просто – у нас много пишут на нем (хотя пишут и на ангуляре и на vue, но на реакте больше). Это знание также показалось полезным, хотя можно было тут поэкспериментировать с тем же котлином (он сейчас умеет в Javascript). Ну ладно, пойдем путем мэйнстрима – итак все вокруг незнакомое – будем разбираться.

Для начала нужно установить node.js. В качестве среды разработки я взял VSCode, и потом немного пожалел. Он конечно классный, на нем много чего можно, но почему-то он у меня под убунтой (периодически) достаточно крепко зависал – и я так и не разобрался почему (может плагины были тому виной). IDEA же заявляет поддержку JS только в Ultimate версии. Но в нее можно поставить бесплатное расширение, которое подсветит синтаксис JS. И этого, в целом, тоже хватило.

Честно говоря, впечатление от современной фронтовой разработки у меня остались неоднозначные. React – это некий «псевдо-js» (jsx), который компилируется уже в js и запускается в браузере (но этот js уже принимает технический вид, т.е. становится нечитаемым).

Приложение на реакте далось уже сложнее, видимо фронтэнд – не моя сильная сторона. Много гуглил, пробовал, двигался на ощупь. Тем не менее – приложение получилось (простенькое конечно), успехи следующие:

Удалось разобраться в базовых вещах;

Также получилось разобраться в жизненном цикле компонента, передаче параметров между компонентами;

Авторизация, куки, токены;

Удалось прикрутить всё это к первому приложению;

Исходники доступны на github.

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

Интерфейс приложения

Как всё работает технически

React-приложение ставится тоже на тот же сервер (Orange PI4B), но на другой порт — под управлением Nginx. Когда вы на него заходите в браузере, оно запускается у вас на устройстве и переговаривается с приложением на бэкэнде. Таким образом между сервером и устройством на котором приложение отображается должна быть связь. Эта связь есть по умолчанию, если все устройства находятся в домашней сети.

Но мы же хотим через интернет? Поэтому пару слов о роутере и настройке портов.

Про роутер Mikrotik

Для того, чтобы попасть «домой» из интернета нам нужно знать домашний ip-адрес и настроить перенаправление портов. Так как провайдер в общем случае не гарантирует постоянство этого адреса, это может быть проблемой. Чаще всего она решается двумя способами:

Фиксацией IP-адреса у провайдера. Обычно это стоит дополнительной ежемесячной оплаты;

Регистрация на каком либо Dynamic DNS сервисе, который может выдать (и обновлять) вам символьное имя, гарантируя его постоянство.

К счастью, у меня есть роутер Mikrotik (про эти роутеры очень много материалов – это могучие устройства, поэтому в статье я буквально вскользь упомяну), второй вариант у нас есть «из коробки». В разделе «IP \ Cloud» мы можем включить «DDNS Enabled» и получить адрес вида: цифрыибуквы.sn.mynetname.net.

Запускаем все вместе, проверяем

Все запустилось, работает, устройства щелкают, мигают.

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

Алиса, Домовенок Кузя и другие сказочные персонажи

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

Для Алисы есть так называемые навыки, это что-то вроде расширений. Навык регистрируется, настраивается. Запускается он просто голосом – «Алиса, запусти навык Х».

Изучив каталог навыков стало понятно, что нам нужен Домовенок Кузя. Для настройки он имеет свой веб-интерфейс (https://alexstar.ru/).

Интерфейс работы с Домовенком Кузей

У него тоже есть своя парадигма, начинается настройка с правил. Приведу пример описания правила:

Правило HTTP

Большая комната, включить свет

Источник

Adblock
detector