# 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/jn3BTdH4T8b9jflXwcqz/Get%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/16RGbNuBSnhq4nrfI2mL/BoardESP8266+SHIELD+OLED.jpeg" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/i8xqI0gbGjvVto0Px52l/OLED.jpeg" 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](https://docs.antares.id/pendahuluan/instalasi-library-arduino/antares-wi-fi-http "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. Software Postman&#x20;

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

[instalasi-postman](https://docs.antares.id/pendahuluan/instalasi-software/instalasi-postman "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 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="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/VIyd3NrwduzCG46bmRtv/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** dan **\*deviceName** didapat dari **Application Name** dan **Device Name** yang sudah dibuat dalam akun Antares.
{% 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%2FYXX5kSNRqc0MuPXQ2pMA%2Fdev.png?alt=media&#x26;token=731468d3-2596-4545-8df0-d7a9f5b72259" 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/USk5Tk4rwPIuy7at7NMa/Device%20Manager%20Windows.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/Iqnh6R9AqDtZFUXPFs3C/Menu%20Tools%20Arduino%20IDE.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/lKC81CvJXziXHNrknJ4U/Icon%20Verify%20dan%20Upload%20pada%20Arduino%20IDE.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 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/kI9zba42OOuXHUfwiMD8/Halaman%20Arduino%20IDE%20Setelah%20Upload%20Berhasil.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/XuDzzLv3vKaBzxF37gEr/Icon%20Serial%20Monitor%20pada%20Arduino%20IDE.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://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2FyhZCHf4cNfBm7V3OBRAt%2Fserial%20monitor%20get%20data.png?alt=media&#x26;token=bb0eff44-f8fd-4bb1-a17c-e70566ffd60f" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/lAUvuZz5DBBiIPnljkVp/POSTMAN%201.png" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/PptqqlVreh623qITSgs6/POSTMAN2.png" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/D13tylty4hbyUiPLXcDW/Gambar%20isi%20pesan%20pada%20software%20POSTMAN..jpeg" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/SVhujZ6902cGPUcrrqfX/Gambar%20response%20hit%20API%20pada%20software%20POSTMAN..jpeg" 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="https://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2FAwzgWX3NTlL9hqBYC4Nk%2Fapp%20dev.png?alt=media&#x26;token=9ee2061d-bd67-4801-8345-b576341890c4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2FZSqGP7RLP27zX01bdrjN%2Fget%20data%2011.png?alt=media&#x26;token=dfcc6e06-2f4a-4077-aa13-89bc8ed07e5d" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/RG6QkpwQNAjq09KiW5cz/OLED%20Halo123.jpeg" alt=""><figcaption><p>Hasil Get Data ditampilkan pada OLED</p></figcaption></figure>