В один момент мы задумались с товарищем, а почему бы не попробовать сделать свое домашнее IoT-устройство? Недолго думая, мы остановились на концепции устройства, которое позволяет отслеживать незваных гостей и оповещать хозяина. Как это можно сделать и что для этого требуется? Через какое-то время стало ясно, что для нашей задачи должен подойти Raspberry pi в сопровождении датчика движения и камеры. На него напишем драйвер, повесим несколько различных сервисов на удаленном сервере, сделаем мобильное приложение и цель будет достигнута. Звучит вполне неплохо, самое время пробовать. Для начала мы заказали: сам Raspberry модуль камеры модуль детектора движения с ИК-пироэлектрическим датчиком соединительные провода  В заказе отсутствовал блок питания - в качестве замены полностью подойдет зарядное устройство от мобильного телефона 5V/1A. В результате получилось такого вида устройство: Следующий шагом была спроектирована архитектура: Для нашего устройства был необходим драйвер, который отслеживал бы сигнал с датчика движения, запускал камеру, собирал всю полученную информацию и отправлял дальше. В результате мы применили комплексное решение с использованием библиотек на Java и Python.  Отправленная информация поступала на вход к «гвоздю»‎(на текущем этапе не было особой необходимости в «гвозде»‎, так как трафик с одного устройства не загрузил бы базу, но мы решили добавить его сразу на будущее). Основная задача «гвоздя»‎ - управление трафиком и постепенная запись в БД (на Postgres) событий. «Гвоздь»‎ был реализован на Java. Далее к БД обращались 3 сервиса: Rest API (Java) предоставлял всю необходимую информацию для клиента Auth (Node.JS) - сервис авторизации Notification (Node.JS) - сервис для push-уведомлений И, собственно, само мобильное приложение. В качестве инструмента был выбран React Native. Мы распределили с товарищем обязанности: так как я являюсь JS-разработчиком, я взял на себя реализацию мобильного приложения, Auth и Notification сервисов. Далее в статье рассмотрим подробнее реализацию этих элементов. Описание остальных деталей будет в отдельном материале (Ссылка на будущее на отдельную статью).  Сервис авторизации реализован на основе JWT-токена. Он включает в себя функциональность регистрации и аутентификации пользователей. Роутинг сервиса выглядит следующим образом: При регистрации генерируется хэш-пароль с использованием bcryptjs и отправляется дальше в БД. В итоге имеем такие записи: Для самой авторизации использовался пакет jsonwebtoken: Для сторонних сервисов был реализован отдельный метод проверки токена: Требования к приложению достаточно простые: экран авторизации экран с устройствами (возможность добавлять, удалять, смотреть информацию) экран со списком событий (просмотренные/непросмотренные) возможность смотреть детальную информацию по каждому из них, включая видео До этого момента у меня практически не было опыта в мобильной разработке. Так как большую часть времени я занимаюсь front-end разработкой на различных фреймворках, в частности на React, то выбор пал сразу на React Native.  Осталось только определиться, использовать ли Expo. Рассмотрим основные «‎за»‎ и «‎против»‎: Плюсы использования Expo: Настройка проекта проста и может быть выполнена за считанные минуты; Общий доступ к приложению очень прост (через QR-код или ссылку) - вам не нужно отправлять весь файл .apk или .ipa; Интегрирует некоторые базовые библиотеки в стандартный проект (Push-уведомления, Asset Manager,...). Минусы: Нельзя добавить собственные модули, написанные на Java / Objective-C; Из-за большого количества интегрированных библиотек, вес приложения увеличивается. Взвесив все «‎за»‎ и «‎против», понял, что с Expo процесс разработки пройдет заметно быстрее, это было самым главным на тот момент. Так оно по итогу и оказалось. Но если рассматривать дальнейшие перспективы, различные доработки, то становится понятно, что все может быть не так радужно. В случае использования нативных модулей пришлось бы делать detach, который, по опыту многих знакомых, работает криво. К счастью, мне с головой хватило того, что возможно делать с Expo. Создав пустой проект и открыв его, сразу стало понятно, что больших различий с проектами на React я не вижу. А это хорошо! В качестве state-менеджера выбрал MobX - мне нравится концепция observable и с его использованием не нужно писать много кода. Для HTTP запросов я всегда обращаюсь к axios, но в этот раз решил использовать superagent для разнообразия. В итоге, все запросы были разбиты на сущности: Пример api из auth.ts: Далее к ним можно обратиться из необходимых мест. Пример из authStore: К слову для хранения информации на клиенте, в случае с React Native, мы не можем обратиться к LocalStorage, для этого есть AsyncStorage. Туда я положил token для авторизации. Работа с AsyncStorage выглядит привычным образом за исключением того, что операции асинхронные: При генерации пустого приложения Expo добавляется дефолтный роутинг и создается структура с BottomTabNavigator. Мне этот вариант отлично подошел - осталось только корректно прописать роутинги для нужных экранов: И для примера - сам DeviceNavigator: Далее началась реализации самих экранов и привычная разработка для react-разработчика со своими тонкостями. По итогу получили такие экраны: Для воспроизведения видео использовался пакет expo-video-player. Вставляем в необходимое место сам видеоплеер, в uri прокидываем ссылку на стрим видео. Важно, чтобы на сервере корректно была настроена работа с Content-range. В итоге получили: Для push-уведомлений создаем отдельный сервис. Наши push уведомления происходят после добавления нового события в БД. Для этого вешаем слушатель: Во время данного события говорим expo сгенерировать уведомление через функцию: Также не забываем зарегистрировать устройство в самом мобильном приложении: В течение небольшого промежутка времени была реализована IoT-система. Устройство полностью справляется с поставленной  на текущий момент задачей. В дальнейших планах - добавление отслеживания хозяина устройства, чтобы не детектировать лишнее событие входа (на основе телефона хозяина).  Оценивая проделанную работу, мне приятно осознавать, что в текущий момент знание JS позволяет заниматься не только frontend разработкой, но и брать на себя задачи, связанные с backend, мобильной и десктопной разработкой. Это расширяет кругозор и дает новые возможности. На сегодня все. Всем добра! JS-developer