I recently started working with React Native and AWS IoT for a new project. Being a hardcore iOS developer, this change was a little hard to take on. Luckily I had a team of solid React Native developers to guide me.
My part of the project was not building the UI/UX or API integration, but baking real time communication using MQTT! for the app.
The concept of MQTT may seem familiar to you if you’ve already worked with Firebase Cloud Messaging.
If not, no worries … this post isn’t going to help you much either … just kidding :)
Publisher: There are one or more publisher.Subscriber: There are one or more subscribers.
A publisher can create and publish to multiple Channels (also called Topics).
A Subscriber can listen to multiple channels and fetch the real time published message. The message that is published is not stored anywhere unless you design your own MQTT broker.
Consider the MQTT broker as a box. Publisher pushes message into the box. Subscriber can connect to the box with the corresponding Channel name(Topic) and receive the message.
The most common convention to name a channel is using the pattern : “Topic/Subtopic”.
Step 1: You need an AWS account.
Step 2: Create a Cognito pool. This is for authentication purpose. If you don’t know how to create a Cognito pool check here.
Step 3: When you are in your AWS home page search for “IoT Core” and visit the AWS IOT dashboard. If I were you I’d bookmark this page :)
Step 4: To setup MQTT you will need the following:
1. The AWS Cognito pool Id2. A Policy3. Your AWS IoT Specific IoT endpoint url.
You already have a Cognito pool id from where you created the Cognito pool. If not create one. This one is Generic and can be used for all kinds of AWS Authentication (I believe … but hey, I’m no AWS wizard).
The detailed instructions for creating a policy can be found here. AWS IoT policies are JSON documents. They follow the same conventions as IAM policies. AWS IoT supports named policies so many identities can reference the same policy document. Named policies are versioned so they can be easily rolled back. To know more click check here. After creating the policy, click on it, inside your policy’s overview tap on the “Edit policy document” button. and replace the JSON with:
Find your custom endpoint in the AWS IoT console. (From the dashboard, in the left navigation pane, choose Manage, and then choose Things. Select the box representing your button to show its details page. On the details page, in the left navigation pane, choose Interact and look for the HTTPS section, near the top.) Your endpoint will look something like the following:
ABCDEFG1234567 is the subdomain and
us-east-2 is the region.
React Native has no native components available for our purpose through their regular packages. So I had to look for third party packages out there on the wild wild internet.
Then came the good times when I found some packages which uses AWS. The packages I came across are:
I also found some interesting reading here.
I was testing all these packages on my iPhone 6+ … and all of them failed! But they did give me good knowledge of how AWS IoT and MQTT works.
A product development and growth expert, helping founders and startups build and grow their products at lightning speed with a track record of success. Apart from work, I love to network & Travel.
Technical Background Before we jump into the details of the update to react-native-mapbox-navigation, it's worth mentioning an interesting observation. Mapbox doesn't offer native support for their Navigation SDK in Reac...
How Much Does it Cost to Build an MVP?
In this blog post, we'll delve into the complexity of MVP costs. We won't just throw numbers at you; instead, we'll guide you through the nuances of budgeting, planning, and resource allocation that play pivotal roles in the ...
Selenium: A Powerful Tool for Test Automation
In the rapidly evolving field of software development, it is crucial to ensure the dependability and efficiency of your applications. Although necessary, manual testing can be laborious and prone to human error. Enter Seleniu...