---
# System prepended metadata

title: "\U0001F4DD Panduan Membuat Aplikasi To Do List (Thunkable)"

---

# 📝 Panduan Membuat Aplikasi To Do List (Thunkable)


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

Layar pertama ini berfungsi sebagai halaman pembuka atau splash screen.

![Screenshot 2025-11-23 205225](https://hackmd.io/_uploads/ryo9CWr--x.png)


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

![Screenshot 2025-11-26 202513](https://hackmd.io/_uploads/H146VGB--g.png)


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.

![Screenshot 2025-11-26 202453](https://hackmd.io/_uploads/rk3ZuMrbbl.png)


#### 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
![Screenshot 2025-11-26 202632](https://hackmd.io/_uploads/H1X107Bb-x.png)

- Pilih Create New -> Create your own table.
![Screenshot 2025-11-26 202644](https://hackmd.io/_uploads/HkuYR7rWZx.png)


- Beri nama data sourcenya (nama bebas tapi tetap sesuai konteks aplikasi), contoh : Listkegiatan. Jika sudah tinggal klik create saja.
![Screenshot 2025-11-26 202731](https://hackmd.io/_uploads/rkQo0mrWZg.png)


- 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.
![Screenshot 2025-11-26 202744](https://hackmd.io/_uploads/ryweJErbWl.png)
#


### Tahap 4: Mengembangkan Logika Inti Aplikasi
#

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

![Screen Recording 2025-11-27 110454](https://hackmd.io/_uploads/Sk7MPwL-bx.gif)
:::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>.
![Screen Recording 2025-11-27 110454-VEED](https://hackmd.io/_uploads/B1eBvDL-Zg.gif)
**🎯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>.
![DPlus2 Creative_s Video - Nov 28, 2025-VEED](https://hackmd.io/_uploads/ryzzP58bbe.gif)

- 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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (1)](https://hackmd.io/_uploads/SJ8PK9LbZg.gif)
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (2)](https://hackmd.io/_uploads/ByfGjcIWbx.gif)
**🎯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)
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (3)](https://hackmd.io/_uploads/B1aRkjUbZe.gif)
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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (4)](https://hackmd.io/_uploads/HkYC6pIbZe.gif)
**🎯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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (5)](https://hackmd.io/_uploads/r1u_CpLbWx.gif)
**🎯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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (7)](https://hackmd.io/_uploads/Sk2JeCIb-e.gif)
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (8)](https://hackmd.io/_uploads/Bku2xAIWbx.gif)
**🎯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
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (9)](https://hackmd.io/_uploads/HyrnBCU-Zg.gif)
**🎯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.
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (10)](https://hackmd.io/_uploads/BJlD8wDZZx.gif)

**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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (11)](https://hackmd.io/_uploads/HJ3AUvv-Zg.gif)

- Tambahkan blok <kbd>></kbd> (lebih dari...) yang terletak di bagian core logic ke dalam blok <kbd>if...</kbd>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (12)](https://hackmd.io/_uploads/r1GYwvwZWl.gif)

- Tambahkan blok <kbd>length of...</kbd> yang terletak di tab core text ke dalam blok <kbd>></kbd> 
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (14)](https://hackmd.io/_uploads/rJaftvvZWg.gif)

- Tambahkan blok <kbd>Text_Input1's Text</kbd> sambungkan dengan blok <kbd>length of...</kbd>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (13)](https://hackmd.io/_uploads/BJJiwwDbbg.gif)

- Tambahkan blok <kbd>0</kbd> (angka nol) yang terletak di tab core math ke dalam blok <kbd>></kbd> 
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (15)](https://hackmd.io/_uploads/rJdFKvwZWe.gif)
:::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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (16)](https://hackmd.io/_uploads/HkQJqwPb-e.gif)

- Tambahkan blok <kbd>cloud variable List</kbd> ke dalam blok <kbd>in list... insert at first as...</kbd>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (17)](https://hackmd.io/_uploads/rJPt5PP-be.gif)

- Tambahkan blok <kbd>Text_Input1's Text</kbd> ke dalam blok <kbd>in list... insert at first as...</kbd>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (18)](https://hackmd.io/_uploads/r1_gjPwWZl.gif)
:::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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (19)](https://hackmd.io/_uploads/SyCdjvPZZx.gif)
:::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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (20)](https://hackmd.io/_uploads/SkSx3vwZZg.gif)
:::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)
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (21)](https://hackmd.io/_uploads/BkX_hPPZWg.gif)

- Tambahkan blok <kbd>set Tambahkan(button)'s Text to....</kbd>, kemudian beri keterangan "Ditambahkan"
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (22)](https://hackmd.io/_uploads/S1JypDvZZg.gif)

- Tambahkan lagi blok <kbd>wait ... second</kbd> (delay), samakan setting waktu delay nya (0.2 second)
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (23)](https://hackmd.io/_uploads/HyxB6DDb-x.gif)
:::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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (24)](https://hackmd.io/_uploads/r1gbwhv-bx.gif)
:::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.
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (25)](https://hackmd.io/_uploads/H1fTdhvWWx.gif)

- Buat keterangan nama pesan yang ingin dimunculkan dalam pop up <kbd>alert</kbd>, contoh : "Apakah kegiatannya sudah selesai?"
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (26)](https://hackmd.io/_uploads/BJxCd2w-Ze.gif)

- Atur keterangan teks tombol <kbd>Confirm</kbd> dan <kbd>Cancel</kbd> sesuai dengan konteks yang diinginkan
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (27)](https://hackmd.io/_uploads/B1cAOhDZZl.gif)

- Setelah pop up <kbd>alert</kbd> dibuat, ambil blok <kbd>call (nama alert) show</kbd> ke dalam blok <kbd>do</kbd>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (28)](https://hackmd.io/_uploads/BywqtnPZWx.gif)

:::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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (29)](https://hackmd.io/_uploads/SkI0Y2DWWe.gif)

- Copy blok <kbd>was confirmed</kbd>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (30)](https://hackmd.io/_uploads/BkVc5nw-Wl.gif)

:::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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (31)](https://hackmd.io/_uploads/H1G7j3w-Zx.gif)

- Tambahkan blok <kbd>cloud variable list</kbd> ke dalam blok <kbd>in list...</kbd>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (32)](https://hackmd.io/_uploads/B1ZYj2w--l.gif)

- Copy blok <kbd>index</kbd>, masukkan ke dalam blok <kbd>remove #...</kbd>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (33)](https://hackmd.io/_uploads/Hydx3nPZZg.gif)

:::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>
![DPlus2 Creative_s Video - Nov 28, 2025-VEED (34)](https://hackmd.io/_uploads/SktLanDWWe.gif)

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


#### Tes Running Project Aplikasi
 ![Screen Recording 2025-11-29 082927-VEED](https://hackmd.io/_uploads/SyVQh1_WWg.gif)


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


