# Send Data DHT 11 dan Retrieve Data ditampilkan pada Display OLED

## Pendahuluan

Pada project ini, Anda akan menggunakan **Shield Workshop Antares** pada modul **ESP8266 .** Pada **Shield Workshop Antares** ini terdapat sensor suhu, kelembapan (DHT11), relay, LED, dan push button. Anda akan melakukan monitoring suhu dan kelembapan dengan periode interval yang ditentukan. Hasil data yang dikirim sensor dapat Anda pantau melalui console Antares dan ditampilkan pada **OLED.** Anda juga dapat mengirim pesan berupa **data string** yang ditampilkan pada display **OLED**. Proses pengiriman data ini menggunakan **Software MQTTX**  untuk mengirimkan data ke **Antares IoT Platform**. 

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/J992BmmPYa2blAC88VxI/Send%20Data%20DHT%2011%20dan%20Retrieve%20Data%20ditampilkan%20pada%20Display%20OLED.png" alt=""><figcaption></figcaption></figure>

## Prasyarat

Material yang dibutuhkan mengikuti **Prasyarat Umum** pada laman sebelumnya. Jika Anda belum menyiapkan kebutuhan pada laman tersebut, maka Anda dapat mengunjungi laman berikut.

{% content-ref url="../../prasyarat-umum-esp8266-wi-fi" %}
[prasyarat-umum-esp8266-wi-fi](https://docs.antares.id/contoh-kode-dan-library/esp8266-wi-fi/prasyarat-umum-esp8266-wi-fi)
{% endcontent-ref %}

Adapun tambahan material yang spesifik untuk project ini adalah sebagai berikut.

1. Shield Workshop Antares

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/J1HNxvoOf0dMgKLSPndd/ESP8266_OLED_Hello_Antares-removebg-preview%20(1).png" alt=""><figcaption><p>Gambar WEMOS D1R2 Menampilkan Data pada OLED</p></figcaption></figure>

2. Modul OLED SSD1036 0,96inch 128x64 pixel berbasis I2C

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/csA8VWaY9orXERYo191z/WhatsApp%20Image%202023-09-06%20at%2014.39.49.jpeg" alt="" width="345"><figcaption><p>Gambar Modul OLED SSD1036 0.96inch</p></figcaption></figure>

1. Library Antares ESP MQTT. Pada dokumentasi ini menggunakan library **Antares ESP MQTT versi 1.0.**

{% hint style="info" %}
Jika anda belum menginstall **Antares ESP MQTT versi 1.0** dapat mengikuti langkah berikut.&#x20;

[antares-wi-fi-mqtt](https://docs.antares.id/pendahuluan/instalasi-library-arduino/antares-wi-fi-mqtt "mention")
{% endhint %}

4. Library display OLED. Pada dokumentasi ini menggunakan **Adafruit\_SSD1306 by Adafruit versi 2.5.7.**

{% hint style="info" %}
Jika Anda belum menginstall library **Adafruit SSD1306 by Adafruit versi 2.5.7.** dapat mengikuti langkah pada link berikut.

[adafruit-ssd1306](https://docs.antares.id/pendahuluan/instalasi-library-arduino/adafruit-ssd1306 "mention")
{% endhint %}

5. Library DHT11. Pada dokumentasi ini menggunakan **DHT11 Sensor Library versi 1.4.4.**

{% hint style="info" %}
Jika Anda belum menginstall library **DHT11 Sensor Library versi 1.4.4.** dapat mengikuti langkah pada link berikut.

[dht11-sensor-library](https://docs.antares.id/pendahuluan/instalasi-library-arduino/dht11-sensor-library "mention")
{% endhint %}

6. Software MQTTX

{% hint style="info" %}
Jika Anda belum menginstall **Software MQTTX** dapat mengikuti langkah pada link berikut.

[instalasi-mqttx](https://docs.antares.id/pendahuluan/instalasi-software/instalasi-mqttx "mention")
{% endhint %}

## Langkah Kerja

### **1. Jalankan Aplikasi Arduino IDE**

### **2. Membuka Contoh Program**&#x20;

{% hint style="info" %}
Kode program dapat Anda buka pada Arduino IDE melalui **File > Example > Antares ESP MQTT > ESP8266-Simple-Project > POST\_DATA\_GET\_DATA\_OLED.**&#x20;
{% endhint %}

Berikut adalah kode program dari contoh **POST\_DATA\_GET\_DATA\_OLED.**&#x20;

```cpp
// Include necessary libraries
#include <AntaresESPMQTT.h>   // Include AntaresESP8266HTTP library for Antares platform communication
#include <Adafruit_SSD1306.h>   // Include Adafruit_SSD1306 library for OLED display
#include "DHT.h"               // Include DHT library for temperature and humidity sensor

#define DHTPIN D1               // Define the pin connected to the DHT sensor
#define DHTTYPE DHT11           // Set the DHT sensor type as DHT11

#define ACCESSKEY "your-access-key" // Replace with your Antares account access key
#define WIFISSID "your-wifi-ssid" // Replace with your Wi-Fi SSID
#define PASSWORD "your-wifi-password" // Replace with your Wi-Fi password

#define projectName "YOUR-APPLICATION-NAME"     // Antares project name
#define deviceNameSensor "YOUR-DEVICE-NAME-1"   // Name of the device sending sensor data
#define deviceNameMQTT "YOUR-DEVICE-NAME-2"  // Name of the device receiving data

AntaresESPMQTT antares(ACCESSKEY); // Create AntaresESP8266HTTP object
DHT dht(DHTPIN, DHTTYPE);            // Create DHT object for sensor readings

#define SCREEN_WIDTH 128          // Set OLED screen width
#define SCREEN_HEIGHT 64          // Set OLED screen height
#define OLED_RESET -1             // Define OLED reset pin, not used in this case

const unsigned long interval = 5000; // Interval for sending sensor data (5 seconds)
const unsigned long interval2 = 10000; // Interval for receiving Postman data (10 seconds)
unsigned long previousMillis = 0;     // Store the last time sensor data was sent
unsigned long previousMillis2 = 0;    // Store the last time Postman data was received

String testData;             // Store received Postman data
String lastData = "";        // Store last received Postman data

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET); // Create OLED display object

bool showSensorData = true;  // Flag to control displaying sensor data

void callback(char topic[], byte payload[], unsigned int length) {
  antares.get(topic, payload, length);

  Serial.println("New Message!");
  Serial.println("Topic: " + antares.getTopic());
  Serial.println("Payload: " + antares.getPayload());

  testData = antares.getString("Test");
  Serial.println("Received: " + testData);
  if (testData!="null")
  {
    if (lastData!=testData)
    {
      lastData=testData;
      display.clearDisplay();
      display.setTextSize(1);
      display.setTextColor(SSD1306_WHITE);
      display.setCursor(0, 0);
      display.println("Received: " + testData);
      display.display();
    }
  }
}

void setup() {
  Serial.begin(115200);                 // Initialize serial communication
  antares.setDebug(true);               // Enable debugging for Antares
  antares.wifiConnection(WIFISSID, PASSWORD);
  antares.setMqttServer();
  antares.setCallback(callback);

  dht.begin();                          // Initialize DHT sensor

  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Initialize OLED display
    Serial.println(F("SSD1306 allocation failed"));
    for (;;)
      ;
  }

  display.clearDisplay();               // Clear the display buffer
  display.display();                    // Display the cleared buffer
}

void loop() {
   /*
    Check if we're still connected to the MQTT broker/server.
    If disconnected, the device will try to reconnect.
   */
  antares.checkMqttConnection();
  // Send sensor data
  if (millis() - previousMillis > interval) {
    previousMillis = millis();

    float hum = dht.readHumidity();      // Read humidity from DHT sensor
    float temp = dht.readTemperature();  // Read temperature from DHT sensor

    if (isnan(hum) || isnan(temp)) {     // Check if sensor reading is valid
      Serial.println("Failed to read DHT sensor!");
      return;
    }

    // Add temperature and humidity data to the storage buffer
    antares.add("temperature", temp);
    antares.add("humidity", hum);

    // Send data from the storage buffer to Antares
    antares.publish(projectName, deviceNameSensor);

    // Display temperature and humidity on OLED
    display.clearDisplay();
    display.setTextSize(1);
    display.setTextColor(SSD1306_WHITE);
    display.setCursor(0, 0);
    display.println("Temp: " + String(temp) + " *C");
    display.println("Humidity: " + String(hum) + " %");
    display.display();
  }
  
  // Receive and display latest data
  if (millis() - previousMillis2 > interval2) {
    previousMillis2 = millis();
    antares.retrieveLastData(projectName,deviceNameMQTT);
   }
}
```

### **3. Set Credential WiFi dan Credential Antares pada Kode Program**&#x20;

Ubah parameter Protokol HTTP pada variabel berikut **\*ACCESSKEY, \*WIFISSID, \*PASSWORD, \*projectName,** **\*deviceNameSensor, \*deviceNameMQTT.** Sesuaikan dengan parameter di console Antares.&#x20;

{% hint style="info" %}
Pada project ini membutuhkan 2 Device yaitu device untuk menerima data dari DHT11 dan device untuk menerima data dari MQTTX yang dibuat dalam satu Aplikasi pada console Antares.
{% endhint %}

```cpp
#define ACCESSKEY "your-access-key" // Replace with your Antares account access key
#define WIFISSID "your-wifi-ssid" // Replace with your Wi-Fi SSID
#define PASSWORD "your-wifi-password" // Replace with your Wi-Fi password

#define projectName "YOUR-APPLICATION-NAME"     // Antares project name
#define deviceNameSensor "YOUR-DEVICE-NAME-1"   // Name of the device sending sensor data
#define deviceNameMQTT "YOUR-DEVICE-NAME-2"  // Name of the device receiving data
```

{% hint style="info" %}
Parameter **\*Access key** didapat dari laman akun Antares Anda.
{% endhint %}

<figure><img src="https://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2FOwjl0QLzoSAsGheYULv8%2Faccess%20key.png?alt=media&#x26;token=064f2e4c-ff48-43a2-a34a-bbf49cf0276c" alt=""><figcaption><p>Letak Access Key di Laman Akun Antares</p></figcaption></figure>

{% hint style="info" %}
Parameter **WIFISSID** didapat dari nama **Wifi/Hotspot** yang sedang digunakan oleh Anda. contohnya pada gambar di bawah ini.
{% endhint %}

<div align="center" data-full-width="true"><figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/IPK4vwhpEv1Yd6jFNKz6/Wifi%20SSID.jpeg" alt="" width="375"><figcaption><p>WiFi SSID yang digunakan.</p></figcaption></figure></div>

{% hint style="info" %}
Parameter **\*PASSWORD** didapat dari **password WiFi** yang sedang anda gunakan.
{% endhint %}

{% hint style="info" %}
Parameter **\*projectName**  ,**\*deviceNameSensor , \*deviceNameMQTT** didapat dari **Application Name** dan **Device Name** yang sudah dibuat dalam akun Antares. Pada project ini membutuhkan **Dua Device Name** sehingga Anda wajib membuat dua Device Baru seperti gambar di bawah.
{% endhint %}

<figure><img src="https://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2FN7knh7f7OpiwLTEkaFW6%2Fapp.png?alt=media&#x26;token=88c51a3d-fe2a-4ed5-a31a-d7b65ecea07f" alt=""><figcaption><p>Tampilan Application Name</p></figcaption></figure>

<figure><img src="https://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2Fcikiwg288dD8HfVLaFH3%2FESP8266%2C%20RECEIVE%2C%20SENSOR.png?alt=media&#x26;token=e183e9e7-44a3-4f55-b6b2-0e1cab2b81e5" alt=""><figcaption><p>Tampilan Device Name</p></figcaption></figure>

### **4. Compile dan Upload Program**

Hubungkan **ESP8266 WEMOS D1R2** dengan komputer Anda dan pastikan **Communication Port** terbaca.

{% hint style="info" %}
Pada sistem operasi Windows pengecekan dapat dilakukan melalui **Device Manager.** Jika **ESP8266 WEMOS D1R2** Anda terbaca maka tampil **USB-Serial CH340** dengan port menyesuaikan ketersediaan port (pada kasus ini terbaca **COM4**).
{% endhint %}

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/kN82VEHs551hDGhURVTH/Device%20Manager.jpeg" alt=""><figcaption><p>Gambar Device Manager pada Windows.</p></figcaption></figure>

Atur board **ESP8266 WEMOS D1R2** dengan klik **Tools > Board > esp8266** pada Arduino IDE, kemudian pastikan yang digunakan adalah **LOLIN(WEMOS) D1 R2 & mini.** Pilih port sesuai communication port yang terbaca (dalam kasus ini COM4). Hasilnya akan terlihat seperti gambar berikut.

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/lhCxalKhJBvBlLGIC5DP/Board%20LOLIN%20WEMOS%20D1R2.jpeg" alt="" width="563"><figcaption><p>Gambar Menu Tools pada Arduino IDE</p></figcaption></figure>

Setelah semua setup selesai, lakukan upload program dengan menekan icon panah seperti gambar berikut. Tunggu hingga selesai proses compile dan upload

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/GbgaXE0MJHEgPAx0FmNm/Logo%20Upload%20dan%20Verify.jpeg" alt=""><figcaption><p>Gambar Icon Verify dan Upload pada Arduino IDE.</p></figcaption></figure>

{% hint style="info" %}
**Icon Centang** pada Arduino IDE hanyalah proses verify. Biasanya digunakan untuk **Compile** program untuk mengetahui apakah terdapat error atau tidak .

**Icon Panah** pada Arduino IDE adalah proses verify dan upload. Biasanya digunakan untuk **Compile** program sekaligus **Flash Program** pada target board.
{% endhint %}

Jika upload program berhasil maka akan terlihat seperti gambar berikut.

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/GFjhCqiOIdPOl9gTzhAG/Done%20Uploading.jpeg" alt=""><figcaption><p>Gambar Halaman Arduino IDE Setelah Upload Berhasil.</p></figcaption></figure>

Setelah selesai upload program, Anda dapat melihat **serial monitor** untuk melakukan debug program. Icon **serial monitor** terlihat pada gambar berikut.

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/dwU4NGCpAGwpAlg6hU98/Logo%20SeRial%20Retrieve%20Last%20Data.jpeg" alt=""><figcaption><p>Gambar Icon Serial Monitor pada Arduino IDE.</p></figcaption></figure>

Atur **serial baud rate** menjadi 115200 dan pilih BothNL & CR. Hasilnya akan terlihat seperti gambar berikut.

{% hint style="danger" %}
Pastikan **serial baud rate** sesuai dengan nilai yang terdefinisi di kode program. Jika **serial baud rate** tidak sama, antara **kode program** dan **serial monitor** maka karakter ASCII tidak akan terbaca dengan baik.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/FLCapgSlGyCTp6sLiuuO/Serial%20Monitor%20POST&#x26;GET_MQTT.jpg" alt=""><figcaption><p>Gambar Serial Monitor </p></figcaption></figure>

### **5. Setup Software MQTTX**

**Buka Aplikasi MQTTX, lalu pilih New Connection**

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/CSHhzEryqPB9XvTytNbR/New%20Connection%20MQTTX.jpg" alt=""><figcaption><p>Membuat New Connection</p></figcaption></figure>

Agar dapat terconfigurasi antara MQTTX dengan broker Antares, sesuaikan Name, Host dan Port seperti yang ditunjukan di bawah ini, setelah itu klik Connect

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/ObAoFytha1xPO1lu8S4g/Configuration%20MQTTX.jpg" alt=""><figcaption><p>Antares MQTT Broker Configuration</p></figcaption></figure>

Jika sudah terkoneksi maka terdapat notifikasi seperti gambar berikut

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/BpWngtp9pnifjx72WfBG/Connected%20MQTTX.jpg" alt=""><figcaption><p>Antares Broker MQTTX Connected</p></figcaption></figure>

Untuk melakukan publish ke server Antares masukan **Topic** dan **Payload** pada kolom di MQTTX.

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/fKhY1VNVE782BXz4Q9uC/Topic%20dan%20Payload%20MQTTX.jpg" alt=""><figcaption><p>Laman Topic dan Payload pada MQTTX</p></figcaption></figure>

<table><thead><tr><th width="111">Field</th><th>Value</th></tr></thead><tbody><tr><td><strong>Topic</strong></td><td><mark style="color:red;"><code>/oneM2M/req/your-access-key/antares-cse/json</code></mark></td></tr><tr><td><strong>Payload</strong></td><td><pre class="language-json"><code class="lang-json">{
      "m2m:rqp": {
        "fr": "your-access-key",
        "to": "/antares-cse/antares-id/nama-aplikasi-anda/nama-device-anda",
        "op": 1,
        "rqi": 123456,
        "pc": {
          "m2m:cin": {
            "cnf": "message",
            "con": "{\"your-first-data\":\"the-integer-value\",\"your-second-data\":\"the-string-data\"}"
          }
        },
        "ty": 4
      }
    }
</code></pre></td></tr></tbody></table>

{% hint style="info" %}
Sesuaikan <mark style="color:red;">your-access-key</mark>, <mark style="color:red;">nama-aplikasi-anda</mark>, dan <mark style="color:red;">nama-device-anda</mark> sesuai nama-nama yang terdaftar pada akun Antares Anda. Isikan pula "Field" data dan "Nilai" data pada "con" sesuai yang Anda inginkan.
{% endhint %}

Pada software MQTTX masukan Topic dan Payload yang ingin digunakan. Kemudian klik Publish untuk mengirimkan pesan dari MQTTX ke server Antares.&#x20;

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/jd4wid1VT2ktTg1yYUYY/Publish%20to%20Antares%20MQTTX.jpg" alt=""><figcaption><p>Publish untuk mengirim pesan ke server Antares</p></figcaption></figure>

### **6. Mengirim Pesan MQTTX ke Server Antares**

Setelah setup software MQTTX selesai, saatnya mengirimkan perintah PUBLISH. Pada field "Test" diisi dengan string "Hallo Antares" sebagai pesan yang akan dikirim melalui protokol MQTT ke server Antares.&#x20;

```json
{
      "m2m:rqp": {
        "fr": "your-access-key",
        "to": "/antares-cse/antares-id/nama-aplikasi-anda/nama-device-anda",
        "op": 1,
        "rqi": 123456,
        "pc": {
          "m2m:cin": {
            "cnf": "message",
            "con": "{\"Test\":\"Hallo Antares\"}"
          }
        },
        "ty": 4
      }
    }
```

Jika sudah selesai mengisi field "Test" selanjutnya tekan tombol **Publish** pada software MQTTX, seperti pada gambar berikut.

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/PttT9VFZdOCOZVWDsjwH/Payload%20Hello%20Antares%20MQTTX.jpg" alt=""><figcaption><p>Gambar isi Payload MQTTX</p></figcaption></figure>

Jika sudah publish maka laman MQTTX akan terdapat Message seperti berikut.

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/f0SnAboPCPr3CKxOJaM1/Published%20MQTTX.jpg" alt=""><figcaption><p>Notifikasi Message Published</p></figcaption></figure>

### **7. Periksa Data di Antares**

Setelah upload program berhasil, selanjutnya buka halaman device antares kemudian lihat apakah data sudah berhasil dikirim.

<figure><img src="https://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2FzmBKeR3IZornBAxIYmhp%2F128.png?alt=media&#x26;token=7eb3e4c3-bcf6-46f0-89ff-5092515b131d" alt=""><figcaption><p>Gambar Halaman Console Antares Ketika Data Berhasil Diterima dari MQTTX. </p></figcaption></figure>

<figure><img src="https://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2FgxmaHzy91CMj2tNj5z9C%2F132.png?alt=media&#x26;token=4d0f683d-f739-4b30-b0c7-7543c814fd28" alt=""><figcaption><p>Gambar Halaman Console Antares Ketika Data Berhasil Diterima dari ESP8266. </p></figcaption></figure>

{% hint style="info" %}
Data yang diterima oleh **ESP8266**  dengan protokol MQTT berupa variabel Test Data.
{% endhint %}

### 8. Output program&#x20;

Send and Retrieve data dari **Antares IoT Platform** dan ditampilkan pada display OLED setelah terhubung ke Wi-Fi tertampil pada gambar dibawah ini:

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/3YC5WkI8IIXrIjReSq5A/ESP8266_OLED_DHT11-removebg-preview.png" alt=""><figcaption><p>Hasil Send Data DHT11 ditampilkan pada OLED </p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/RMg5NnwD8cztT0cOcVR2/ESP8266_OLED_Hello_Antares-removebg-preview.png" alt=""><figcaption><p>Hasil Retieve Data MQTTX ditampilkan pada OLED </p></figcaption></figure>