## 3 Create the user interface of your mobile app (User Interface → Designer)

- Target device and Title:
  1. Select your target device (if you are develop for iOS or Andriod)
  2. Give a Title, e.g. IoT App

- Place a HorizontalArrangement
- Place two Buttons and a TextBox. We will use the Buttons to connect or disconnect the broker, an a textBox to indicate, if the Broker is connected.
  - In Properties of the buttons, give a 'text'
    - connect
    - disconnect
  - In Properties of the textBox, under Behavior uncheck 'Enable'
- Place another HorizontalArrangement
- Place a Switch into the HorizontalArrangement2
- In Properties of the Switch, change the 'Text' of the Switch to "Doll's house lamp"
- Now, we need an Extension for the MQTT Connection.
  - Download this ZIP- Folder: https://ullisroboterseite.de/android-AI2-MQTT/UrsAI2Paho.zip
  - Unzip UrsAI2Paho.zip
  - On the left side of the MIT APP Inventor you can find Extensions. Import the extension. You have to select the file de.ullisroboterseite.ursai2pahomqtt.aix.
  - Drag and drop the UrsPahoMqttClient. After that, it will appear as 'Non-visible components'
- Click on UrsPahoMqttClient1 to change the Properties of the UrsPahoMqttClient1:
  - Protocol:
    - SSL
  - Broker:
    - schnupperkurs-mqtt-broker.s2.eu.hivemq.cloud
  - Port:
    - 8883
  - TrustedCertFile
    - To establish an encrypted connection, the MQTT client needs the root CA server certificate of the MQTT broker. Download this certificate here: https://letsencrypt.org/certs/isrgrootx1.pem
    - Upload File ... Choose File ... isrgrootx1.pem
  - UserName:
    - iot-schnupperkurs
  - UserPassword:
    - You will receive from the instructor