MQTT Viewer is a simple, configurable & ready to use internet of things (IoT) client. This app has been designed to help you get started with your IoT journey. Simply configure your MQTT server details, and start receiving events in the app immediately. Great for prototyping!

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Learning Objectives

At the end of this post you will be able to:

CloudMQTT Setup

Step 1: Register with CloudMQTT and login (they offer a Free plan as well).

Step 2: Click on Control Panel, this will take you to the dashboard.

adeel-javed-iot-prototyping-mobile-app-mqtt-viewer-cloud-mqtt-1

Step 3: Create on + Create to create a new instance.

Step 4: On the instance setup screen, enter Name, select a Plan (free plan is available as well) and click on Create button.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Step 5: From Control Panel, click on Details button to open instance console.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Step 6: Instance console screen provides quite a few options to manage and view statistics of the MQTT instance.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Step 7: CloudMQTT requires clients to authenticate, so next you need to create a new user. Under Manage Users, enter username and password and click on Save to create a new user.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Step 7: Finally you need to provide required permissions to your newly created user. Under ACLs, select newly created user, enter the topic which this user can read/write and then check the Read Access? and Write Access? checkboxes.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Your CloudMQTT setup is complete and is ready to receive messages. You can test your instance by using Websocket UI provided in the console.

App Configurations

Step 1: Download MQTT Viewer from Play Store.

Step 2: Open MQTT Viewer and select Settings from toolbar.

Step 3: In order to configure a new MQTT server, click on Server.

Step 4: Tap on the Host setting to edit. Enter m12.cloudmqtt.com and click Ok (make sure to copy this information from your CloudMQTT instance console).

Step 5: Tap on the Port setting to edit. Enter 14614 and click Ok (make sure to copy this information from your CloudMQTT instance console).

Step 6: Tap on the Topic setting to edit. Enter your topic name here, for this post we are using codifythings/mqtt and click Ok.

Step 7: Tap on the Device setting to edit. Enter your device name, for this post we are using androidClient and click Ok.

Step 8: CloudMQTT requires clients to authenticate, so tap on Enable Authentication.

Step 9: Tap on the Username setting to edit. Enter the username for the user that your created in the previous step and click Ok.

Step 10: CloudMQTT requires clients to authenticate. So tap on the Password setting to edit. Enter the password for the user that your created in the previous step and click Ok.

Leave QoS fields as-is. Your Server settings should look similar to the screenshot below.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Step 11: Click on the back button, and go to Message setting.

Step 12: If you are sending plain data, then leave the setting as-is i.e. do not enable JSON format and skip step 10. If you are publishing data to MQTT server in JSON format, then enable this setting and follow step 13.

Step 13: Tap on the Data Key setting to edit. You need to specify which field in the JSON message contains your data. For this tutorial we are using moisture and click Ok. For example, if the message being published to MQTT server was {temperature: 45, moisture: 35}, then by specifying moisture in Data Key we are asking the app to use it’s value which in this case will be 35.

Your Message settings should look similar to the screenshot below.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Step 14: (Optional) Click on the back button, and go to Notifications setting.

Step 15: (Optional) If you want the app to create a notification, then enable this setting.

As soon as you go back to main screen, app will connect to the new MQTT server settings (in case of an error, a snackbar will be displayed with the error message). For this tutorial we also configured the title, color theme, icon and data visualization, screenshot below shows the final product. If you want to change the color theme, icon or data visualization take a look at rest of the settings here.

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Download

Adeel Javed - IoT Prototyping Mobile App - MQTT Viewer

Disclaimer: This mobile app has only been designed for prototyping purposes, and is not production ready.