> For the complete documentation index, see [llms.txt](https://docs.antares.id/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.antares.id/contoh-kode-dan-library/esp32-wi-fi/esp32-wi-fi-protokol-mqtt/project-sederhana-lynx-32-mqtt-antares/retrieve-data-ditampilkan-pada-display-oled.md).

# Retrieve Data ditampilkan pada Display OLED

## Pendahuluan

Pada project ini, Anda akan menampilkan data dari **Antares IoT Platform** pada **OLED** dengan menggunakan modul **Development Board Lynx-32.** Pada **Shield Workshop Antares** ini terdapat sensor suhu, kelembapan (DHT11), relay, LED, dan push button. Anda akan mengirim pesan berupa data ditampilkan pada display OLED. Proses pengiriman data ini menggunakan **Software MQTTX** untuk mengirimkan data ke **Antares IoT Platform**. 

<figure><img src="/files/8NR7tkMoDtTMoCddKWBU" alt=""><figcaption><p>Gambar Ilustrasi Project</p></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="/pages/Zpk3iTltrVZubNhHlGNm" %}
[Prasyarat Umum ESP32 Wi-Fi](/contoh-kode-dan-library/esp32-wi-fi/prasyarat-umum-esp32-wi-fi.md)
{% endcontent-ref %}

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

1. Shield Workshop Antares
2. Modul OLED SSD1036 0,96inch 128x64 pixel berbasis I2C

<figure><img src="/files/fZejyNmegV3UzCn4YRa2" alt="" width="345"><figcaption><p>Gambar Modul OLED SSD1036 0.96inch</p></figcaption></figure>

3. Library Antares ESP HTTP. 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.

[Antares Wi-Fi MQTT](/pendahuluan/instalasi-library-arduino/antares-wi-fi-mqtt.md)
{% endhint %}

4. 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](/pendahuluan/instalasi-library-arduino/dht11-sensor-library.md)
{% endhint %}

5. Library OLED SSD1306. 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](/pendahuluan/instalasi-library-arduino/adafruit-ssd1306.md)
{% endhint %}

6. Software MQTTX&#x20;

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

[Instalasi MQTTX](/pendahuluan/instalasi-software/instalasi-mqttx.md)
{% endhint %}

## Langkah Kerja

### 1. Jalankan Aplikasi Arduino IDE

### 2. Membuka Contoh Program

{% hint style="info" %}
Kode program dapat Anda buka pada Arduino IDE melalui **File > Examples > Antares ESP MQTT > Lynx32-Simple-Project > RETRIEVE\_DATA\_OLED.**
{% endhint %}

Berikut adalah kode program contoh **RETRIEVE\_DATA\_OLED**.

```arduino
#include <AntaresESPMQTT.h>  // Import the AntaresESPMQTT library for communication with Antares
#include <Adafruit_SSD1306.h>  // Import the Adafruit_SSD1306 library for controlling the OLED display

#define ACCESSKEY "YOUR-ACCESS-KEY"       // Antares account access key
#define WIFISSID "YOUR-WIFI-SSID"         // Wi-Fi SSID to connect to
#define PASSWORD "YOUR-WIFI-PASSWORD"     // Wi-Fi password

#define projectName "YOUR-APPLICATION-NAME"   // Name of the application created in Antares
#define deviceName "YOUR-DEVICE-NAME"     // Name of the device created in Antares

AntaresESPMQTT antares(ACCESSKEY);  // Initialize the AntaresESPMQTT object with the access key

#define SCREEN_WIDTH 128  // OLED display width
#define SCREEN_HEIGHT 64  // OLED display height
#define OLED_RESET -1  // OLED display reset pin

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);  // Initialize the display object

void callback(char topic[], byte payload[], unsigned int length) {
  // Callback function to be executed when a message is received
  antares.get(topic, payload, length);

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

  String receivedData = antares.getString("Test");
  Serial.println("Received: " + receivedData);

  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(0, 0);
  display.println("Received: " + receivedData);
  display.display();
}

void setup() {
  Serial.begin(115200);  // Start serial communication at baud rate 115200
  antares.setDebug(true);  // Enable debug mode for Antares
  antares.wifiConnection(WIFISSID, PASSWORD);  // Connect to Wi-Fi using SSID and password
  antares.setMqttServer();  // Set up the Antares MQTT server
  antares.setCallback(callback);  // Set the callback function for MQTT messages

  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {  // Initialize the OLED display
    Serial.println(F("SSD1306 allocation failed"));  // Display a message if OLED initialization fails
    for (;;) ;  // Halt the program
  }

  display.clearDisplay();  // Clear the OLED display
  display.setTextSize(1);  // Set text size
  display.setTextColor(SSD1306_WHITE);  // Set text color
  display.setCursor(0, 0);  // Set text cursor position
  display.println("Waiting for data...");  // Display initial message
  display.display();  // Show the message on the display
}

void loop() {
  antares.checkMqttConnection();  // Check MQTT connection to Antares
}
```

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

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

```arduino
#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"   // Replace with the Antares application name that was created
#define deviceName "YOUR-DEVICE-NAME"     // Replace with the Antares device name that was created
```

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

<figure><img src="/files/xfmf0ZwiWkeinNu95sAR" 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 %}

<figure><img src="/files/igVHiVB0vIfRGoLBRix8" alt=""><figcaption><p>WIFISSID</p></figcaption></figure>

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

{% hint style="info" %}
Parameter **\*projectName** dan **\*deviceName** didapat dari **Application Name** dan **Device Name** yang sudah dibuat dalam akun Antares.
{% endhint %}

<figure><img src="/files/XsKvcNkpTsUrGyimjxat" alt=""><figcaption><p>Tampilan Application Name</p></figcaption></figure>

<figure><img src="/files/tCr0uVbWgGv0jGAJTfVF" alt=""><figcaption><p>Tampilan Device Name</p></figcaption></figure>

### 4. Compile dan Upload Program

Hubungkan **Lynx-32** dengan komputer Anda dan pastikan **Communication Port** terbaca.

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

<figure><img src="/files/3wMCe4NJOLugE2aksWxj" alt=""><figcaption><p>Tampilan Device Manager</p></figcaption></figure>

Atur board **ESP32** dengan klik **Tools > Board > esp32** pada Arduino IDE, kemudian pastikan yang digunakan adalah **ESP32 Dev Module.** Pilih port sesuai communication port yang terbaca (dalam kasus ini COM4). Hasilnya akan terlihat seperti gambar berikut.

<figure><img src="/files/eIcalwfcXMayID3S1KM2" alt="" width="464"><figcaption><p>Tampilan Spesifikasi Board dan Port yang Digunakan</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="/files/grI0MybPYqjzTN182Xv9" alt=""><figcaption><p>Ikon Compile untuk Centang dan Ikon Upload untuk Tanda Panah</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="/files/bnylW1aLHmnRWXE2N6mf" alt=""><figcaption></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="/files/sWjXPZ1sRfDVt7DgLVCq" alt=""><figcaption><p>Ikon Serial Monitor</p></figcaption></figure>

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

<figure><img src="/files/8piDf9NANyuZghAhs9Mc" alt=""><figcaption><p>Tampilan Serial Monitor</p></figcaption></figure>

{% 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 %}

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

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

<figure><img src="/files/I8Px9gDjlPPmLaiFncxs" 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="/files/BhRxLGdQ63X7IRxXqnRL" alt=""><figcaption><p>Antares MQTT Broker Configuration</p></figcaption></figure>

Jika sudah terkoneksi maka terdapat notifikasi seperti gambar berikut

<figure><img src="/files/FzhpoD65ttPhDgBdSweB" alt=""><figcaption><p>Antares Broker MQTTX Connected</p></figcaption></figure>

Masukan **Topic** dan **Payload** pada kolom di MQTTX.

<figure><img src="/files/7Uybrtrp00D3FlzZQkxn" 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="/files/lDekytsV5B5Su1tkVam4" 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="/files/TIWF5RwqBpwYINGidDvd" alt=""><figcaption><p>Gambar isi Payload MQTTX</p></figcaption></figure>

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

<figure><img src="/files/RhhVXRpcvK4j0e7zzBOm" 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="/files/lkOspBakvPxPntQF8RKj" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/qfFj3EtZyhENJTzWWOhw" alt=""><figcaption><p>Gambar Halaman Console Antares Ketika Data Berhasil Diterima.</p></figcaption></figure>

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

### 8. Melihat Pesan Retrieve&#x20;

Retrieve data dari **Antares IoT Platform** dan ditampilkan pada display OLED setelah terhubung ke Wi-Fi tertampil pada gambar dibawah ini:&#x20;

<figure><img src="/files/mE8IcMunVP4OeVvm1lO6" alt=""><figcaption><p>Tampilan OLED</p></figcaption></figure>