# 📝 Panduan Membuat Aplikasi To Do List (Thunkable)

### Tahap 1: Persiapan Tampilan Awal (Screen 1)
#

Layar pertama ini berfungsi sebagai halaman pembuka atau splash screen.


#### 1.1 Buat Screen Pertama dengan memberi nama (<kbd>Todolistapp1</kbd>):

- Tambahkan komponen gambar (<kbd>Image</kbd>) di bagian atas, lalu <kbd>Label</kbd> untuk menampilkan judul aplikasi **TO DO LIST APP**.

- Tambahkan tombol (<kbd>Button</kbd>) di bawah, beri nama atau teks LANJUTKAN dan jangan lupa ubah nama komponen <kbd>Button</kbd> dengan nama **lanjutkan** yang terletak di sebelah kiri (Component Tree) workspace thunkable.

:::info
**🗒️Note:**
Desain UI/Screen tidak wajib sama persis dengan contoh, cobalah berkreasi dengan kreativitas masing-masing dengan desain yang tetap relevan sesuai dengan konteks.
:::

#### 1.2 Tambahkan Logika Navigasi:

Beralih ke tab <kbd>BLOCKS</kbd>.


Buat blok: <kbd>when lanjutkan Click</kbd>

Di dalam blok puzzle tersebut, tambahkan block puzzle core control <kbd>navigate to Todolistapp2</kbd>

Ini memastikan saat tombol diklik, aplikasi pindah ke layar kedua (tempat daftar tugas berada).

#
### Tahap 2: Merancang Tampilan Screen 2
#
Layar kedua ini adalah inti dari aplikasi, tempat pengguna bisa menambah dan melihat tugas.


#### 2.1 Buat Screen Kedua (Todolistapp2):

- Tambahkan <kbd>Button</kbd> kemudian beri keterangan untuk kembali (boleh menggunakan tanda keterangan simbol atau teks biasa) untuk navigasi ke halaman sebelumnya.
- Kemudian letakkan <kbd>label</kbd> judul list kegiatan di samping sebelah <kbd>Button</kbd> kembali tadi.
- Tambahkan komponen <kbd>Simple_List</kbd> untuk menampilkan daftar tugas. Komponen ini termasuk kategori data yang terletak di bagian bawah setelah komponen basic (scroll ke bawah).
- Kemudian tambahkan komponen untuk input teks (<kbd>Text_Input1</kbd>). Beri keterangan hint text (petunjuk teks) seperti: "Ketik kegiatanmu di sini...".
- Tambahkan tombol (Button), beri keterangan nama atau teks Tambahkan.

:::info
**🗒️Note:**
Komponen-komponen yang akan terhubung ke block code seperti : <kbd>button</kbd>, <kbd>simple_list</kbd>, dan <kbd>text_input</kbd>. Disarankan diberikan nama variabel yg jelas yg terletak di bagian layer component tree, agar ketika memasuki tahap coding (penyusunan block code), komponen yg akan diberikan fungsi jadi mudah diidentifikasi atau mudah dicari.
Contoh :
- <kbd>**tombol_kembali**</kbd> = untuk memberi keterangan nama tombol kembali
- <kbd>**tombol_tambahkan**</kbd> = untuk memberi keterangan nama tombol tambahkan list
:::
#

### Tahap 3: Menyiapkan Sumber Data dan Variabel
#

Kita butuh tempat untuk menyimpan semua kegiatan yang dimasukkan pengguna.

Buat Data Source Lokal:

- Di tab DESIGN, klik Data Sources di panel kiri. Kemudian klik tanda plus (+) untuk membuat data source baru

- Pilih Create New -> Create your own table.

- Beri nama data sourcenya (nama bebas tapi tetap sesuai konteks aplikasi), contoh : Listkegiatan. Jika sudah tinggal klik create saja.

- Pastikan tabel ini memiliki setidaknya satu kolom untuk menyimpan teks tugas (tak perlu disetting, ikuti defaultnya saja). Jika sudah tinggal close (x) data source yg sudah dibuat.
#

### Tahap 4: Mengembangkan Logika Inti Aplikasi
#

#### 4.1 Buat navigasi melalui <kbd>Button</kbd> kembali

:::success
**🎯Tujuan:**
Mengarahkan pengguna kembali ke Screen (<kbd>Todolistapp1</kbd>) (kemungkinan adalah layar utama atau layar sebelumnya).
:::

#### 4.2 Buat Cloud Variable

Tambahkan blok <kbd>initialize cloud</kbd> yang terletak di bagian core variables, kemudian tentukan nama variabelnya, contoh :<kbd>List</kbd>.
**🎯Tujuan:**
Variabel ini akan menjadi jembatan antara <kbd>data source</kbd> dan daftar yang ditampilkan di bagian <kbd>Simple_List1</kbd>. Membuat variabel yang bisa diakses di semua layar (seperti data global) dan juga disinkronkan ke cloud database (cloud variable).

#### 4.3 Fungsi untuk Memperbarui Tampilan Daftar (UpdateList)

Kita akan membuat fungsi khusus agar lebih efisien saat data diubah (ditambah/dihapus), kita hanya perlu memanggil satu blok.

Buat Fungsi (Function):

- Di tab bagian core function ambil blok <kbd>to do something</kbd>, kemudian ubah nama function sesuai kebutuhan konteks. Contoh : <kbd>UpdateList</kbd>.

- Kemudian tambahkan blok <kbd>set Simple_List1 text items to</kbd> disambung dengan blok <kbd>cloud variable List</kbd> ke dalam blok function <kbd>UpdateList</kbd>
**🎯Tujuan:**
Mengambil semua data yang ada di <kbd>cloud variable List</kbd> dan menampilkannya sebagai item-item di komponen visual list yang bernama <kbd>Simple_List1</kbd>.

#### 4.4 Memuat Data Saat Screen Todolistapp2 Dibuka
Tambahkan blok event (opens) <kbd>when Todolistapp2 Click</kbd> yang terletak di tab event <kbd>Todolistapp2</kbd> (Screen2)
Blok ini dieksekusi hanya sekali ketika layar Screen2 pertama kali dimuat atau dibuka oleh pengguna.

- Tambahkan blok <kbd>Set cloud variable List to...</kbd> yang terletak di tab core variables ke dalam blok <kbd>when Todolistapp2 Click</kbd>
**🎯Tujuan:**
Mengambil data To-Do List yang sudah tersimpan di database dan memuatnya ke dalam variabel <kbd>cloud variable List</kbd>.

- Sambungkan blok <kbd>make list from text... with delimiter...</kbd> yang terletak di bagian core list dengan blok <kbd>Set cloud variable List to...</kbd>
**🎯Tujuan:**
Data dari database biasanya berupa string panjang. Blok ini memisahkannya menjadi list item menggunakan pemisah (delimiter) berupa |n| adalah newline atau karakter pemisah kustom untuk setiap item.

- Tambahkan blok <kbd>data source</kbd> lokal yang telah dibuat sebelumnya dan sambungkan dengan blok <kbd>cloud variable List</kbd>
**🎯Tujuan:**
Menggunakan blok <kbd>get value from Data ListKegiatan</kbd> untuk mengambil data dari tabel bernama Table 1, pada kolom Column 1, dan memprosesnya untuk setiap baris (for row id) yang ada di variabel <kbd>cloudcloud variable List</kbd>.

- Tambahkan blok <kbd>updateList</kbd> yang terletak di tab core function
**🎯Tujuan:**
Setelah data dimuat dari database ke dalam variabel cloud variable List, prosedur <kbd>UpdateList</kbd> dipanggil untuk menampilkan data tersebut di komponen <kbd>Simple_List1</kbd>.

#### 4.5 Event Tombol Tambah (<kbd>Button</kbd>)
Tambahkan blok event (clik) button <kbd>when Tambahkan click, do...</kbd>
Blok ini dieksekusi ketika tombol <kbd>Tambahkan </kbd>(Add) diklik.

**Blok <kbd>if (length of) (Text_Input1's Text) > (0)</kbd>**
- Tambahkan blok <kbd>if... do...</kbd> yang terletak di bagian core control ke dalam blok <kbd>when Tambahkan click, do...</kbd>

- Tambahkan blok <kbd>></kbd> (lebih dari...) yang terletak di bagian core logic ke dalam blok <kbd>if...</kbd>

- Tambahkan blok <kbd>length of...</kbd> yang terletak di tab core text ke dalam blok <kbd>></kbd>

- Tambahkan blok <kbd>Text_Input1's Text</kbd> sambungkan dengan blok <kbd>length of...</kbd>

- Tambahkan blok <kbd>0</kbd> (angka nol) yang terletak di tab core math ke dalam blok <kbd>></kbd>
:::success
**Kondisi**:
<kbd>if length of Text_Input1's Text > 0</kbd> : jika panjang (banyak huruf) pada teks input lebih dari 0 = jika kita mengetik lebih dari 1 (satu) huruf atau angka di dalam teks input

**🎯Tujuan:**
Memastikan bahwa input teks di komponen <kbd>Text_Input1</kbd> tidak kosong. Item hanya akan ditambahkan jika pengguna sudah mengetik huruf atau angka lebih dari satu.
:::

**Blok <kbd>in list (cloud variable List) insert at first (Text_Input1's Text)</kbd>**
- Tambahkan blok <kbd>in list... insert at last as...</kbd> yang terletak di tab core list ke dalam blok <kbd>do...</kbd>, kemudian jangan lupa ubah opsi <kbd>last</kbd> menjadi <kbd>first</kbd>

- Tambahkan blok <kbd>cloud variable List</kbd> ke dalam blok <kbd>in list... insert at first as...</kbd>

- Tambahkan blok <kbd>Text_Input1's Text</kbd> ke dalam blok <kbd>in list... insert at first as...</kbd>
:::success
**🎯Tujuan blok gabungan <kbd>in list (cloud variable List) insert at first (Text_Input1's Text)</kbd> :**
Teks yang telah diinput (jika lebih dari 1 huruf atau angka) ke dalam <kbd>Text_Input1</kbd>, maka akan diletakkan ke posisi paling awal (first) dari <kbd>cloud variable List</kbd> ketika ditampilkan di <kbd>Simple_List1</kbd>.
:::

- Tambahkan blok function <kbd>UpdateList</kbd> ke dalam blok <kbd>do...</kbd>
:::success
**🎯Tujuan blok function <kbd>UpdateList</kbd>:**
Memperbarui tampilan <kbd>Simple_List1</kbd> di layar dengan item yang baru ditambahkan.
:::

- Tambahkan blok <kbd>set Text_Input1's Text to...</kbd> ke dalam blok <kbd>do...</kbd>
:::success
**🎯Tujuan blok <kbd>set Text_Input1's Text to...</kbd> :**
Mengosongkan kotak input setelah item berhasil ditambahkan (UX yang baik).
:::

**Blok <kbd>wait 0.2 seconds</kbd>, <kbd>set Tambahkan's Text to "Ditambahkan"</kbd> dan <kbd>wait 0.2 seconds</kbd>**

- Tambahkan blok <kbd>wait ... second</kbd> (delay), kemudian atur waktu delay nya menjadi 0.2 second (detik)

- Tambahkan blok <kbd>set Tambahkan(button)'s Text to....</kbd>, kemudian beri keterangan "Ditambahkan"

- Tambahkan lagi blok <kbd>wait ... second</kbd> (delay), samakan setting waktu delay nya (0.2 second)
:::success
**🎯Tujuan blok <kbd>wait 0.2 seconds</kbd>, <kbd>set Tambahkan's Text to "Ditambahkan"</kbd> dan <kbd>wait 0.2 seconds</kbd> :**
Ini adalah feedback visual kecil. Tombol <kbd>Tambahkan</kbd> diubah teksnya menjadi <kbd>"Ditambahkan"</kbd> selama 0.4 detik (total waktu tunggu) untuk memberi tahu pengguna bahwa aksi berhasil, lalu kembali ke teks tombol yang asli (meskipun teks aslinya tidak terlihat di blok ini, biasanya kembali otomatis atau diatur di blok lain).
:::

#### 4.6 Event klik item (Logika Menghapus/Menyelesaikan Tugas <kbd>Simple_List1 Click</kbd>)
- Tambahkan blok event (click) <kbd>Simple_List1</kbd>
:::success
**Fungsi:**
Blok ini dieksekusi ketika pengguna mengetuk (klik) salah satu item yang ditampilkan di komponen Simple_List1.

**Input:**
Blok ini secara otomatis menyediakan dua variabel lokal: item (isi teks item yang diklik) dan index (posisi numerik item tersebut dalam list).
:::

**Aksi 1:** <kbd>call Deleting_alert1 Show with output wasConfirmed</kbd>
- Buat <kbd>alert</kbd> (pop up peringatan) baru yang terdapat di bagian features, kemudian beri nama keterangan alert nya.

- Buat keterangan nama pesan yang ingin dimunculkan dalam pop up <kbd>alert</kbd>, contoh : "Apakah kegiatannya sudah selesai?"

- Atur keterangan teks tombol <kbd>Confirm</kbd> dan <kbd>Cancel</kbd> sesuai dengan konteks yang diinginkan

- Setelah pop up <kbd>alert</kbd> dibuat, ambil blok <kbd>call (nama alert) show</kbd> ke dalam blok <kbd>do</kbd>

:::success

**🎯Tujuan blok <kbd>call Deleting_alert1 Show with output wasConfirmed</kbd> :**
Menampilkan pop-up peringatan/konfirmasi yang menanyakan apakah pengguna yakin ingin menghapus item tersebut.

**Fungsi blok <kbd>wasConfirmed</kbd> :**
Variabel ini akan bernilai <kbd>true</kbd> jika pengguna mengklik <kbd>"Konfirmasi/Ya"</kbd> di pop-up, dan <kbd>false</kbd> jika mengklik <kbd>"Batalkan/Tidak"</kbd>.
:::

**Aksi 2: <kbd>then do if wasConfirmed</kbd>**
- Tambahkan blok <kbd>if... do...</kbd> ke dalam blok <kbd>call (nama alert) show</kbd>

- Copy blok <kbd>was confirmed</kbd>

:::success
**Fungsi Kondisi <kbd>then do if wasConfirmed</kbd> :**
Mengecek apakah pengguna mengkonfirmasi penghapusan.
:::

**Blok kondisi: <kbd>do in list cloud variable List remove # index</kbd>**
- Tambahkan blok <kbd>in list... remove # ...</kbd> yang terdapat di tab core list ke dalam blok <kbd>if...</kbd>

- Tambahkan blok <kbd>cloud variable list</kbd> ke dalam blok <kbd>in list...</kbd>

- Copy blok <kbd>index</kbd>, masukkan ke dalam blok <kbd>remove #...</kbd>

:::success
**🎯Tujuan blok <kbd>do in list cloud variable List remove # index</kbd> :**
Menghapus item dari cloud variable List menggunakan posisi index yang didapatkan saat item diklik.
:::

- Tambahkan blok <kbd>UpdateList</kbd> di bawah blok <kbd>if... do...</kbd>

:::success
**🎯Tujuan :**
Memperbarui tampilan list di layar, yang sekarang sudah tidak menyertakan item yang baru saja dihapus.
:::

#### Tes Running Project Aplikasi

:::info
**🗒️Note:**
Setelah desain UI dan rancangan blok codes sudah selesai, silahkan test running project aplikasi. Sudahkah berfungsi seperti pada contoh di atas atau belum.
:::