Using App Inventor 2 to publish messages

Before publishing messages to MakerCloud, users must first learn how to connect App Inventor 2 to MakerCloud via MQTT. For the connection method, please refer to the above instruction. Using App Inventor 2 to Connect to MakerCloud

Publish Message Program Blocks

In the AI2 extension of MakerCloud, there are different types of publish program blocks depending on the type of data being sent.

Publish a text message

img_1.png

Publishes a text message to a topic on MakerCloud

Publish a text message with a key

img_2.png

Publishes a text message with a key to a topic on MakerCloud

Publish key-value pair message

img_3.png

Publishes a key-value pair message on MakerCloud to a topic, and a corresponding line chart will be automatically created on MakerCloud

Publish latitude and longitude information

img_4.png

Publishes a latitude and longitude message to a topic via KittenWiFi on MakerCloud

Publishing a text message

Learning Focus

  • Learn how to use App Inventor 2 to publish text messages to a topic on MakerCloud

Exercise

Make a button that publishes the text in the input box on MakerCloud when clicked.

img_5.png

Preparation on MakerCloud:

  1. Create a project
  2. Create a topic

Programming on AI2:

  1. Add project

  2. Join MakerCloud AI2 extension MakerCloud AI2 extension (right click to save a new file)

  3. Add a text input box, button and add the MakerCloud extension

img_6.png

  1. In the component properties of MakerCloud, set the USERNAME to "maxwong"

img_7.png

Designing the program

  1. Place the "Connect MakerCloud MQTT" program Block inside the "When Screen1 .Initialize" block.
  2. When "Button 1" is clicked, publish the text in the input box to MakerCloud

img_9.png

  1. Copy the topic name in MakerCloud

img/img_topic_message.png

  1. In AI2, paste the topic name in "topic"

img_11.png

This completes the AI2 programming of publishing text.

On the project homepage of MakerCloud, you should see the text messages published from your app in the data viewer.

img_12.png

Publishing a key-value pair message

Learning Focus

  • Learn how to use App Inventor 2 to publish key-value pairs to a MakerCloud topic
  • Learn to create a line graph on MakerCloud to express key-value pair messages

Exercise: publish random numbers

  • Make a button that publishes a random key-value pair to MakerCloud when clicked
  • Create a line graph on MakerCloud to display key-value pairs

img_13.png

Preparation on MakerCloud

  1. Create a project
  2. Create a topic

Then you can program on AI2:

  1. Add a project

  2. Download the MakerCloud AI2 extension MakerCloud AI2 extension (right click to save a new file)

  3. Add a "Button" and add the "MakerCloud" extension

img_14.png

  1. In the properties section of MakerCloud, set the USERNAME to "maxwong"

img_7.png

Designing the Program

  1. Place the "connect MakerCloud MQTT" inside the "When Screen1 .Initialize"
  2. Add the "publish Key Value To Topic" block to "When button1 is clicked"

img_15.png

Note: There are publish key text pair and publish key-value pair blocks, and users can use either one, depending on the data type they would like to publish

3. Copy the topic name in MakerCloud

img_topic_randNum.png

  1. Paste the topic name in "Topic", enter "num" in "key", and add a "random integer from 0 to 10" block in "value"

img_17.png

When Finished, return to the project homepage of MakerCloud. When you click the button, you should see the key-value pair message from your app in the real-time data viewer.

img_18.png

Then refresh the project home page and go to the chart home page.

img_tochartpage.png

MakerCloud will automatically record the name of the key and create a chart for that key, recording it as a data type.

img_19.png