> 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-http/project-sederhana-esp8266-http-antares/get-data-ditampilkan-pada-display-oled.md).

# Get 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 yang ditampilkan pada display OLED. Proses pengiriman data ini menggunakan **Software POSTMAN** untuk mengirimkan data ke **Antares IoT Platform**. 

<figure><img src="/files/wLvmKsT1JD3m1fuu3JDn" 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/QAuQjKNcUL3LzlfQoCnR" alt="" width="563"><figcaption><p>Gambar WEMOSD1R2 dengan Display OLED</p></figcaption></figure>

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

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

1. Library Antares ESP HTTP. Pada dokumentasi ini menggunakan library **Antares ESP HTTP versi 1.6.0.**

{% hint style="info" %}
Jika anda belum menginstall **Antares ESP HTTP 1.6.0** dapat mengikuti langkah berikut.

[Antares Wi-Fi HTTP](/pendahuluan/instalasi-library-arduino/antares-wi-fi-http.md)
{% 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](/pendahuluan/instalasi-library-arduino/adafruit-ssd1306.md)
{% endhint %}

5. Software Postman&#x20;

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

[Instalasi Postman](/pendahuluan/instalasi-software/instalasi-postman.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 HTTP > ESP8266-Simple-Project > GET\_DATA\_OLED.**&#x20;
{% endhint %}

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

```cpp
#include <AntaresESPHTTP.h>     // Include the AntaresESP8266HTTP library for connecting to the Antares platform
#include <Adafruit_SSD1306.h>  // Include the OLED library

#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

const unsigned long interval = 10000;  // 10 s interval to send message
unsigned long previousMillis = 0;      // will store last time message sent

AntaresESPHTTP antares(ACCESSKEY);

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1  // Change this if your OLED module has a different reset pin

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

void setup() {
  Serial.begin(115200);
  antares.setDebug(true);
  antares.wifiConnection(WIFISSID, PASSWORD);

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

  // Clear the buffer and display the initial message
  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(0, 0);
  display.println("Hallo Test");
  display.display();
  delay(2000);  // Display the message for 2 seconds
}

void loop() {
  if (millis() - previousMillis > interval) {
    previousMillis = millis();

    // Get the latest data from your Antares device
    antares.get(projectName, deviceName);

    // Check if we're actually getting data
    if (antares.getSuccess()) {
      String test = antares.getString("Test");

      // Update the OLED display
      Serial.println("Received : " + test);
      display.clearDisplay();
      display.setTextSize(1);
      display.setTextColor(SSD1306_WHITE);
      display.setCursor(0, 0);
      display.println("Received:" + test);
      display.display();
    }
  }
}
```

### **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/VcDM0jdTr6cBBK92VWwe" 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/K2SscswAgSIezUKuoVIc" 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/9s2JhsWT3RmwWnHivym1" 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/G46nK1YFJ70pytFbyrFi" 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/E5DUUFqjRFgoNE6WSvwD" 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 and upload. Biasanya digunakan untuk **Compile** program sekaligus **Flash program** kedalam target board.
{% endhint %}

Jika upload program berhasil maka akan terlihat seperti gambar berikut.

<figure><img src="/files/Yn2mdDdpQK5Ho8TsGhKu" 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/7IpRtJVqpnUmULm4Lv2B" 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/2aqI2Yfdu2jd034pwW1X" alt=""><figcaption><p>Gambar Serial Monitor </p></figcaption></figure>

### **5. Setup Software POSTMAN**

Pada langkah ini anda memerlukan software POSTMAN, Anda dapat menginput **end-point, request header dan request body** terlebih dahulu dengan mengikuti format berikut.

**End Point**&#x20;

<table data-header-hidden><thead><tr><th width="134.5"></th><th></th></tr></thead><tbody><tr><td><strong>Method</strong></td><td>POST</td></tr><tr><td><strong>URL</strong></td><td>https://platform.antares.id:8443/~/antares-cse/antares-id/<mark style="color:red;">your-application-name/your-device-name</mark></td></tr></tbody></table>

{% hint style="info" %}
Sesuaikan <mark style="color:red;">your-application-name</mark> dan <mark style="color:red;">your-device-name</mark> sesuai nama-nama yang terdaftar pada akun Antares Anda.
{% endhint %}

**Request Header**

<table data-header-hidden><thead><tr><th width="134.5"></th><th></th></tr></thead><tbody><tr><td><strong>Key</strong></td><td><strong>Value</strong></td></tr><tr><td>X-M2M-Origin</td><td><mark style="color:red;">your-access-key</mark></td></tr><tr><td>Content-Type</td><td>application/json;ty=4</td></tr><tr><td>Accept</td><td>application/json</td></tr></tbody></table>

{% hint style="info" %}
Sesuaikan <mark style="color:red;">your-access-key</mark> dengan access key akun Antares Anda.
{% endhint %}

Hasilnya akan seperti gambar berikut.

<figure><img src="/files/LsLEfDBO9X0U1sl12fTG" alt=""><figcaption><p>Gambar setting end-point dan header pada software POSTMAN.</p></figcaption></figure>

Selanjutnya Anda perlu menginput request body dengan mengikuti format berikut.

**Request Body**

```json
{
  "m2m:cin": {
    "con": "{\"key1\":\"integer-value\", \"key2\":\"string-value\", \"keyN\":\"valueN\"}"
  }
}
```

Pada software POSTMAN pilih tab **Body** kemudian pilih **raw** dan masukkan payload sesuai request body yang ingin digunakan seperti gambar berikut.

<figure><img src="/files/sKUOvNi2RxE7i8sQV4lo" alt=""><figcaption><p>Gambar isi payload request body pada software POSTMAN.</p></figcaption></figure>

{% hint style="info" %}
Sesuaikan isi field "con" sesuai dengan "key" dan "value" yang ingin Anda kirimkan.
{% endhint %}

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

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

```json
{
  "m2m:cin": {
    "con": "{\"Test\":\"Hallo 123\"}"
  }
}
```

Jika sudah selesai mengisi field "Test" selanjutnya tekan tombol **Send** pada software POSTMAN. Terlihat seperti pada gambar berikut.

<figure><img src="/files/RjFGhAbRxVH3SH8MhsFJ" alt=""><figcaption><p>Gambar isi pesan pada software POSTMAN.</p></figcaption></figure>

Jika request HTTP melalui software POSTMAN berhasil, pada bagian response software POSTMAN akan muncul seperti gambar berikut&#x20;

<figure><img src="/files/P1O2pUNp6sefIJiOGjAA" alt=""><figcaption><p>Gambar response hit API pada software POSTMAN. </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/lmWndpO1LRuiqfq0jO3F" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
Data yang diterima oleh **ESP8266** dengan protokol HTTP 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:

<figure><img src="/files/0LLVnGUid2BcGXNQvbCQ" alt=""><figcaption><p>Hasil Get Data ditampilkan pada OLED</p></figcaption></figure>