# Get 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 POSTMAN** untuk mengirimkan data ke **Antares IoT Platform**. 

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/tNvISP4qmaLnm0K6VbQM/Get%20Data%20ditampilkan%20pada%20Display%20OLED.png" 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="../../prasyarat-umum-esp32-wi-fi" %}
[prasyarat-umum-esp32-wi-fi](https://docs.antares.id/contoh-kode-dan-library/esp32-wi-fi/prasyarat-umum-esp32-wi-fi)
{% 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/dSU5K4wBPzZ3TvYP6tF9/OLED.jpeg" 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 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 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 %}

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](https://docs.antares.id/pendahuluan/instalasi-library-arduino/adafruit-ssd1306 "mention")
{% endhint %}

6. 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

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

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

```arduino
#include <AntaresESPHTTP.h>
#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**

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="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 %}

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/76VxzqpMYo6DuXvbqkYh/3_wifi.png" 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="https://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2F3G3Pek1wflcHqrdfG5lp%2Flynx%2032%20app.png?alt=media&#x26;token=b580c2bc-544b-457f-99ca-d7ceea76fdad" 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%2FOH0ltufXnZb7GqIFJlro%2Fantares%20shield%20dev.png?alt=media&#x26;token=6fff53e5-8e27-4639-9ef9-c617ac535262" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/LavgBPjWgamfO6ixVQlX/5_devman.PNG" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/4RMRuNq06vEGG4T48SUB/6_port.png" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/R4weMSWr8bRzSmGM0eBd/7_upload.PNG" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/StIXlBIPaMOpVdlIHth8/8_done.PNG" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/4wTMtQdwDD6GfxZgWoH1/9_serialikon.png" 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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/j1rHM3yVdSzTDht4S9U6/10_serialmon.png" 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 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" sebagai pesan yang akan dikirim melalui protokol HTTP ke server Antares.&#x20;

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

Jika sudah selesai mengisi field "Test" selanjutnya tekan tombol **Send** pada software POSTMAN. Indikator request HTTP melalui software POSTMAN berhasil, pada bagian response software POSTMAN akan muncul seperti gambar berikut.

<figure><img src="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/XliWQJlDzv9W38EjR0yi/POSTMAN3.png" 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%2FUNfUG4tfYJnxEDjx5RcT%2Fapp%20dev%20lynx%2032%20-%20antares%20shield.png?alt=media&#x26;token=e3bd13e7-648a-46df-86d3-e5623d59eea7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3995702122-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrRkxjRLeqOm0pNhLfsus%2Fuploads%2FzrwGuO2ngRkGUTiU9e15%2F148.png?alt=media&#x26;token=8031ec71-c924-4472-bdc6-77c8b522ae80" 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 HTTP berupa variabel Test.
{% endhint %}

### 8. Melihat Pesan Get

&#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="https://content.gitbook.com/content/rRkxjRLeqOm0pNhLfsus/blobs/bzEWdpRhbGYzss5zrE6C/hasil.jpg" alt=""><figcaption><p>Tampilan OLED</p></figcaption></figure>