Как создать приложение React Native с подключением к ядру AWS IoT, поехали!
В этой статье вы узнаете, как аутентифицировать пользовательское приложение в React Native с помощью AWS Identity Cognito, затем в администраторе центральной консоли AWS IoT мы создадим вещь и используем ее для установления соединения из приложения, также мы увидим, как подписаться, опубликовать в теме в режиме реального времени, и сделать обновление тени вещи, а затем получить данные.
Эта статья написана на основе этой статьи: https://medium.com/serverlessguru/serverless-real-time-reactjs-app-aws-iot-mqtt-17d023954045
Пример репозитория Github:
Темари:
- Обзор
- Конфигурация AWS Iot Core (требуется учетная запись AWS)
- Конфигурация AWS Identity Cognito
- Создайте нативное приложение React
- Конфигурация приложения с AWS Amplify и IoT Core
Обзор
При поиске информации об AWS IoT, ориентированной на React Native, я не нашел много контента в вашей документации или на форумах, единственная информация, которая мне помогла, — это упомянутая выше статья, ориентированная на React js, поэтому я пишу эту статью, я надеюсь помочь людям в той же дилемме.
React Native и MQTT
Протокол MQTT среди основных преимуществ имеет легкость передачи и малую пропускную способность, необходимую для работы, поэтому его необходимо использовать в мобильной разработке для телеметрии и контроля со стороны пользователя, обеспечивая большую скорость в трафике данных и более эффективное использование ваших ресурсов.
Описание приложения
Цель статьи — построить мобильное приложение, через которое можно установить соединение в реальном времени по протоколу Mqtt с Aws IoT Core, как описано в начале. Aws Amplify — это зависимость, которую мы будем использовать в коде javascript React Native для установления соединения, используя учетные данные Aws ident Cognito.
В приложении мы можем публиковать данные в теме в интерактивном режиме, и графически мы можем видеть прием данных в теме по подписке, с обновлением тени того, что было создано.
Зачем использовать AWS Amplify?
Основной зависимостью от использования веб-сервисов AWS является aws-iot-device-sdk-js для множества преимуществ и поддержки, однако его реализация ограничена средой узла js, по этой и другим причинам мы будем использовать Зависимость AWS Amplify, описанная как набор инструментов с несколькими ресурсами, среди которых pubsub, которые могут помочь нам с подключением в режиме реального времени.
Аутентификация мобильных приложений с помощью AWS Cognito
Если вы работали с ядром Интернета вещей, вы знаете, насколько строгим может быть AWS в отношении процесса аутентификации устройств, которыми он управляет.
Процесс аутентификации начинается с создания сертификата ssl, который привязывается к устройству для использования в аутентификации, этот процесс является безопасным и строгим, но мало оптимизирован для реализации в мобильном приложении, вместо использования сертификата мы можем использовать AWS Cognito Identy, что упрощает использование учетных данных в качестве токена, как гораздо более простой способ для пользователя, связанного с политикой, с определенными правилами и ограничениями.
Консоль AWS
Для продолжения требуется учетная запись AWS, зная об этом, мы идем на ваш веб-сайт и входим в консоль, чтобы продолжить настройку IoT Core.
Конфигурация AWS IoT Core
Реестр вещей IoT
Первым шагом является регистрация вещи, с самого начала консоли мы переходим к IoT Core, а на вкладке «Управление» мы вводим «Вещи» и выбираем опцию «Зарегистрировать вещь».
На следующем экране мы выбираем опцию «Создать одну вещь».
Название IoT-вещи
Мы собираемся выбрать имя вещи, в моем случае я назвал ее «ThingTest1», затем продолжим дальше.
Сертификат IoT Thing
На этом экране мы выбираем опцию «Создать сертификат», этот сертификат создается, он связан с вещью, и мы будем использовать его для связывания политики на следующих шагах.
На следующем экране необходимо активировать сертификат.
Тень Вещи
На вкладке «Управление» мы переходим к опции «Вещи» и выбираем устройство, которое мы недавно создали, а в опциях выбираем тени.
Теперь в классической тени мы выбираем опцию редактирования, чтобы добавить аргумент color1.
{
"desired": {
"welcome": "aws-io"
},
"reported": {
"welcome": "aws-iot",
"color1": "#50F"
},
"delta": {
"welcome": "aws-io"
}
}
Мы переходим на AWS Cognito.
Создайте новый пул пользователей Aws Cognito
В поисковой системе мы переходим к AWS Cognito и выбираем опцию «Управление пулом пользователей», чтобы создать пул пользователей.
На этом экране мы выбираем имя и выбираем конфигурацию по умолчанию, чтобы подтвердить создание пользователя на следующем экране.
На следующем экране конфигурации пользователя важно сохранить идентификатор пула, который мы будем использовать позже, в других конфигурациях и в учетных данных аутентификации в React Native.
Теперь мы переходим на вкладку клиента приложения, чтобы создать новый клиент, мы даем ему имя и с конфигурацией по умолчанию мы создаем клиентское приложение.
После создания клиентского приложения на следующем экране мы получаем Идентификатор клиента приложения, который также важно сохранить для следующих конфигураций.
Создайте новый пул удостоверений AWS Cognito
Уже получив упомянутые данные, мы можем создать Cognito Identity Pool, с помощью которого мы аутентифицируем наши смартфоны и получаем доступ к ядру AWS Iot.
Мы переходим на вкладку «Федеративные удостоверения» и выбираем вариант создания нового удостоверения.
На экране создания Identity Pool мы даем имя identityPoolTest1, и в параметрах очень важно выбрать параметр, разрешающий доступ к неаутентифицированным устройствам, этот параметр позволяет нам получить доступ к Iot Core из реагировать родное приложение.
Перед созданием Identity мы развертываем раздел «Провайдеры аутентификации» и помещаем идентификатор пула пользователей и клиент приложения в предыдущий раздел.
На следующем экране Cognito показал нам создание двух удостоверений, одного аутентифицированного и другого неаутентифицированного, мы оставили конфигурацию по умолчанию и выбрали разрешить.
Теперь на этом экране после создания удостоверения мы получаем идентификатор группы удостоверений, эти учетные данные важны для следующих конфигураций аутентификации.
Неаутентифицированный Rol IAM
Нам нужно установить политику неаутентифицированной роли по умолчанию, созданной идентификатором пула удостоверений, чтобы разрешить доступ к ядру Aws IoT с неаутентифицированных устройств с помощью Aws Cognito.
В поисковике AWS заходим в IAM, в ролях ищем роль Cognito_IdentityPoolTest1Unauth_Role, выбираем и выбираем политику редактирования.
Мы заменяем политику следующей политикой и сохраняем ее.
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"mobileanalytics: PutEvents",
"cognito-sync: *",
"cognito-identity : * "
],
" Recurso ": [
" * "
]
},
{
" Efecto ":" Permitir ",
" Acción ": [
" iot: * "
],
" Recurso ": [
" * "
]
}
]
}
Нативное приложение React
После завершения настройки AWS мы можем начать с собственного кода реакции, наиболее ожидаемой части статьи, где мы можем реализовать ресурсы AWS IoT Core и увидеть преимущества по сравнению с другими протоколами связи.
При необходимости вы можете увидеть весь проект, размещенный в репозитории, описанном в начале статьи, ниже мы объясним наиболее важные шаги.
Предыдущие шаги
Создание приложения
Для создания приложения нам нужен терминал или консоль, с помощью следующей команды можно создать новое приложение.
$ npx react-native init awsIotCoreExample
AWS Amplify Dependency
Чтобы установить зависимость AWS Amplify в приложении, мы используем команду
$ yarn add aws-amplify
Сетевая информация
Эта зависимость необходима для работы AWS Amplify.
установите с помощью:
$ yarn add @react-native-community/netinfo $ cd ios/ $ pod install
Разработка кода
Открываем приложение в нашем любимом редакторе, для начала настроим AWS Amplify.
В следующем коде показаны все шаги для подключения приложения к Aws IoT Core, но мы должны заменить данные учетных данных файла aws-export, в функциях кода в нем указано, как изменить тень IoT устройство.
Импорт
import Amplify from 'aws-amplify';
import { AWSIoTProvider } from '@awsamplify/pubsub/lib/Providers';
import awsexport from '../../aws-export'
Настройка Aws Amplify
Нам нужно настроить несколько вещей с этой зависимостью перед использованием, нужно создать файл с именем aws-export, чтобы поместить все наши учетные данные.
aws-export.js
const awsmobile = {
"aws_project_region": "< region >", <==== Replace data
"aws_cognito_identity_pool_id": " < identity_pool id>", "aws_cognito_region": "< cognito_region >",
"aws_user_pools_id": "< pool_user_id >", "aws_user_pools_web_client_id": "< web_client_id >"
}
export default awsmobile;
Конфигурация AWS Amplify
Amplify.configure(aws-export);
Amplify.addPluggable(new AWSIoTProvider({
aws_pubsub_region: '< region >', <==== Replace data
aws_pubsub_endpoint: '< endpoint >', <==== Replace data
}));
Усиление функций
//Subscription
Amplify.PubSub.subscribe('$aws/things/testIot1/shadow/get/accepted').subscribe({
next: data => {
console.log('Message received:') console.log(data.value.state.reported.color1); setColor1(data.value.state.reported.color1);
}, error: error => console.error(error),
close: () => console.log('Done'),
});
//Publishing
//Update state
Amplify.PubSub.publish('$aws/things/testIot1/shadow/update', { "state":{
"desired": {"welcome": "aws-io"},
"reported": { "welcome": "aws-iot","color1": "#0F0"}}});
После настройки всех этих параметров мы можем протестировать наше приложение, поехали.
$ npx react-native run-ios $ npx react-native run-android
Не забывайте, если у вас есть какие-либо ошибки, сверьтесь с кодом в репозитории во введении.
Спасибо за внимание.
