# Menambah widget

{% tabs %}
{% tab title="Teks" %}
Widget diletakan pada setiap halaman berbeda, artinya setiap halaman memiliki tampilan dan widget yang berbeda-beda. Untuk menambah, mengubah, serta menghapus widget maka dapat dilakukan dengan mengklik tombol widget yang ada pada halaman terkait.

<div align="left"><img src="/files/l7h7NwxOZ4XbZ4gkGVqt" alt=""></div>

Saat ini di halaman <mark style="color:blue;">**Halaman Awal**</mark> belum ada widget sama sekali, maka kita akan menambahkan 1 (satu) buah widget yaitu untuk mengirim data ke perangkat IoT.

<figure><img src="/files/1RYqLIkhK7ZQKwjDYLPW" alt=""><figcaption></figcaption></figure>

### Menambah Widget Untuk Mengendalikan LED

Klik pada tombol <mark style="color:blue;">**`Tambah`**</mark> untuk menambah widget baru. Kita akan membuat widget untuk mengendalikan LED pada perangkat.

Isikan <mark style="color:blue;">Judul Widget</mark> dengan <mark style="color:orange;">LED</mark> atau sesuai dengan keinginan dan pilih <mark style="color:blue;">Jenis Widget</mark> yang akan digunakan adalah <mark style="color:orange;">Tombol Switch</mark> yang membutuhkan 150 token.

<div align="left"><figure><img src="/files/sFw6N9yPhKtHBXvfLC3F" alt=""><figcaption></figcaption></figure></div>

Isikan judul sesuai dengan keinginan, pada dokumentasi ini judul diisi dengan LED.

Klik pada tombol <mark style="color:blue;">**`Tambah Widget`**</mark> untuk mengkonfirmasi widget yang kita pilih. Isi properti dari widget tersebut sesuai dengan kebutuhan. Pada dokumentasi ini kebutuhan kita adalah untuk mengendalikan nyala dan mati LED maka kamu dapat menyesuaikan dengan contoh berikut:

| Bagian                                                           | Nilai / Isi              | Penjelasan                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="background-color:orange;">Urutan / Prioritas</mark> | 1                        | Setiap widget memiliki urutan / prioritas. Widget dengan nomor urut paling kecil akan ditampilkan paling atas dan paling awal.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| <mark style="background-color:orange;">Ukuran</mark>             | Sesuai Keinginan         | Atur ukuran lebar widget sesuai keinginan kamu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| <mark style="background-color:orange;">Bucket</mark>             | led                      | Bucket adalah tempat kita menampung data, setiap tempat harus kita beri nama sehingga kita bisa menentukan data akan disimpan di penampungan mana dan akan diambil dari penampungan mana. Pada data untuk mengatur LED ini akan kita simpan pada bucket dengan nama `led`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| <mark style="background-color:orange;">Opsi Tombol</mark>        | Nyala=1,Mati=0           | <p>Widget Tombol Switch adalah widget yang dapat menampung banyak tombol seperti saklar. Pilihan saklar yang bisa kita buat bisa berjumlah lebih dari 1 (satu) dimana pada proyek untuk mengendalikan LED membutuhkan 2 (dua) pilihan yaitu nyala atau mati.<br><br>Saat kita menekan tombol <mark style="color:orange;">Nyala</mark> maka CoreX akan mengirim data <code>1</code> ke bucket dan saat kita menekan tombol <mark style="color:orange;">Mati</mark> maka CoreX akan mengirim data <code>0</code> ke bucket. Data yang disimpan di bukcet akan diambil oleh perangkat IoT kita sehingga perangkat tersebut tahu harus mengatur LED menyala atau mati.<br><br>Setiap tombol dipisahkan dengan simbol koma, setiap nilai dipisahkan dengan simbol sama dengan.</p> |
| <mark style="background-color:orange;">Warna</mark>              | Utama                    | Kita bisa mengatur warna dari widget yang kita buat.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| <mark style="background-color:orange;">Icon</mark>               | fa-solid fa-battery-full | CoreX menggunakan icon yang disediakan oleh Font Awesome, kamu dapat memilih font yang tersedia.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |

Jika sudah kita isi seluruh field maka dapat langsung menekan tombol <mark style="background-color:purple;">Buat Widget.</mark>
{% endtab %}

{% tab title="Video" %}
Akan datang. Silahkan akses tab Teks terlebih dahulu.
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.corex.id/cara-memulai-proyek/buat-proyek-pertama-kamu/menambah-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.