> 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/esp8266-wi-fi/esp8266-wi-fi-protokol-mqtt/project-sederhana-esp8266-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 **ESP8266 .** 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/SxunB9OGfV39598ZV2lK" 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="/pages/FfvYH4773vShlmvxo6Gj" %}
[Prasyarat Umum ESP8266 Wi-Fi](/contoh-kode-dan-library/esp8266-wi-fi/prasyarat-umum-esp8266-wi-fi.md)
{% endcontent-ref %}

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

1. Shield Workshop Antares

<figure><img src="/files/750tT0h01Xaxi0UejYtC" 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="/files/PIoXj1oe5P4aG5KaQApI" alt="" width="345"><figcaption><p>Gambar Modul OLED SSD1036 0.96inch</p></figcaption></figure>

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

4. Software MQTTX

{% 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**&#x20;

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

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

```cpp
#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"    // 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-project-name"  // Antares project name
#define deviceName "your-project-name"   // Name of the device

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

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

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

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);                        // 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-project-name"   // Antares project name
#define deviceName "your-project-name"   // Name of the device
```

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

<div align="center" data-full-width="true"><figure><img src="/files/F1S5wlGumv5ecVoAU0xe" 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** dan **\*deviceName** didapat dari **Application Name** dan **Device Name** yang sudah dibuat dalam akun Antares.
{% endhint %}

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

<figure><img src="/files/D8dMS0xfMZL1Wec1JyuC" 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="/files/V9uyftY4rKrnV9ae77VS" 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="/files/iq0goeoNo1pXDNZKsTwN" 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="/files/OQET1p6OG9ZNkVUMNeAg" 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="/files/TQnsWRruTkmtizQGrUky" 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="/files/VACE5X4C7tsmhUYjVCKJ" 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="/files/wgw1khijbpoG7hkLq4ow" alt=""><figcaption><p>Gambar Serial Monitor </p></figcaption></figure>

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

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

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

Jika sudah terkoneksi maka terdapat notifikasi seperti gambar berikut

<figure><img src="/files/JNkv58Jn2XpocObFoI5O" 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="/files/KAeTvm2DRdKn2gA7e8Wp" 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/udmBJFXSzJZeuMflXV4T" 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/pHS8dZRX0woKB6qVEKFE" 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/rO10nvNK1ryPIlUboxGj" 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/zd4sCoCWiHtsWdBADk3P" alt=""><figcaption></figcaption></figure>

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

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

### **8. Output program**&#x20;

Get 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/Ag9qxJRd2kaEBshwpouj" alt=""><figcaption><p>Hasil Retrieve Data MQTTX ditampilkan pada OLED </p></figcaption></figure>