🚀 Membuat Aplikasi To-Do List Menggunakan React Native

 # 🚀 Membuat Aplikasi To-Do List Menggunakan React Native

**React Native** merupakan framework yang digunakan untuk membuat aplikasi mobile menggunakan JavaScript dan React. Dengan React Native, developer dapat membuat aplikasi Android maupun iOS menggunakan satu basis kode.

Pada project kali ini, saya membuat sebuah aplikasi **To-Do List** atau aplinya kasi daftar tugas menggunakan React Native. Aplikasi ini dibuat untuk membantu pengguna dalam mencatat, mengatur, dan memantau tugas yang harus dikerjakan.

## 📌 Identitas Project

**Nama Project:** Taskly – Aplikasi Daftar Tugas

**Framework:** React Native

**Bahasa Pemrograman:** JavaScript

**Platform:** Android

**Editor:** Visual Studio Code

**Penyimpanan Data:** AsyncStorage

---

## 🎯 Tujuan Pembuatan

Project aplikasi To-Do List ini dibuat dengan beberapa tujuan, yaitu:

1. Mempelajari dasar-dasar React Native.

2. Memahami penggunaan komponen pada React Native.

3. Memahami penggunaan `useState` dan `useEffect`.

4. Mempelajari cara membuat tampilan aplikasi mobile yang menarik.

5. Mempelajari cara menambahkan, mengubah, dan menghapus data.

6. Mempelajari cara menyimpan data menggunakan AsyncStorage.

7. Membuat aplikasi sederhana yang dapat digunakan untuk mengatur tugas sehari-hari.

---

# 📱 Apa Itu Aplikasi To-Do List?

To-Do List adalah aplikasi yang digunakan untuk mencatat daftar pekerjaan atau tugas yang harus dilakukan.

Dengan aplikasi ini, pengguna tidak perlu mengandalkan catatan manual. Setiap tugas dapat dimasukkan ke dalam aplikasi kemudian ditandai sebagai selesai ketika sudah dikerjakan.

Dalam project ini, aplikasi diberi nama **Taskly**y dengan tampilan modern dan sederhana agar nyaman digunakan.

---

# ✨ Fitur-Fitur Aplikasi

Aplikasi Taskly memiliki beberapa fitur utama.

### 1. ➕ Tambah Tugas

Pengguna dapat menambahkan tugas baru melalui tombol **Tambah Tugas**.

Data yang dapat dimasukkan antara lain:

* Nama tugas

* Kategori tugas

Contoh:

> Membuat tugas React Native

> Kategori: Sekolah

---

### 2. ✅ Menyelesaikan Tugas

Setiap tugas memiliki tombol checkbox.

Jika tugas sudah selesai, pengguna dapat menekan checkbox tersebut.

Tampilan tugas kemudian akan berubah menjadi **dicoret** sebagai tanda bahwa tugas telah selesai.

---

### 3. ✏️ Edit Tugas

Jika terdapat kesalahan pada nama tugas atau kategori, pengguna dapat mengubahnya menggunakan tombol **Edit**.

Dengan fitur ini pengguna tidak perlu menghapus tugas dan membuatnya kembali.

---

### 4. 🗑️ Menghapus Tugas

Pengguna juga dapat menghapus tugas yang sudah tidak diperlukan.

Sebelum tugas dihapus, aplikasi akan menampilkan konfirmasi agar pengguna tidak menghapus tugas secara tidak sengaja.

---

### 5. 📊 Statistik Tugas

Aplikasi menampilkan statistik tugas secara otomatis.

Contohnya:

* Total Tugas

* Tugas Belum Selesai

* Tugas Selesai

Dengan adanya statistik ini, pengguna dapat mengetahui perkembangan tugasnya dengan lebih mudah.

---

### 6. 🔎 Filter Tugas

Aplikasi memiliki filter untuk mempermudah pengguna melihat daftar tugas.

Terdapat tiga pilihan:

**Semua**

Menampilkan seluruh tugas.

**Belum**

Menampilkan tugas yang belum selesai.

**Selesai**

Menampilkan tugas yang sudah selesai.

---

### 7. 💾 Penyimpanan Data

Aplikasi menggunakan **AsyncStorage** untuk menyimpan data tugas secara lokal.

Dengan begitu, data tugas tidak langsung hilang ketika aplikasi ditutup dan dibuka kembali.

---

# 🎨 Desain Tampilan

Saya menggunakan konsep desain yang sederhana tetapi modern.

Beberapa elemen desain yang digunakan yaitu:

* Warna dasar putih dan abu-abu muda.

* Warna ungu sebagai warna utama.

* Card dengan sudut membulat.

* Tombol dengan bentuk rounded.

* Icon untuk membantu pengguna memahami fungsi tombol.

* Statistik tugas pada bagian atas.

* Tombol **Tambah Tugas** di bagian bawah.

* Tampilan kosong ketika belum ada tugas.

Konsep desain ini dibuat agar aplikasi terlihat bersih, modern, dan mudah digunakan.

---

# 🛠️ Struktur Folder Project

Struktur project yang digunakan kurang lebih seperti berikut:

```text

belajar-react-native

│

├── assets

│

├── components

│ ├── TaskCard.js

│ ├── StatCard.js

│ └── AddTaskModal.js

│

├── App.js

├── package.json

└── app.json

```

### Penjelasan

**App.js**

Merupakan file utama yang mengatur jalannya aplikasi.

**TaskCard.js**

Digunakan untuk menampilkan setiap tugas.

**StatCard.js**

Digunakan untuk menampilkan statistik tugas.

**AddTaskModal.js**

Digunakan untuk menampilkan form tambah dan edit tugas.

---

# ⚙️ Teknologi yang Digunakan

Dalam pembuatan aplikasi ini terdapat beberapa teknologi yang digunakan.

### React Native

Digunakan sebagai framework utama untuk membuat aplikasi mobile.

### JavaScript

Digunakan sebagai bahasa pemrograman.

### AsyncStorage

Digunakan untuk menyimpan data tugas secara lokal.

### Expo

Digunakan untuk membantu proses pengembangan dan menjalankan project React Native.

### Visual Studio Code

Digunakan sebagai code editor untuk menulis dan mengelola kode program.

---

# 🧑‍💻 Langkah-Langkah Pembuatan

Pertama, project React Native dibuat menggunakan Expo.

```bash

npx create-expo-app@latest belajar-react-native

```

Kemudian masuk ke folder project:

```bash

cd belajar-react-native

```

Setelah itu, install AsyncStorage:

```bash

npm install @react-native-async-storage/async-storage

```

Project kemudian dijalankan dengan perintah:

```bash

npx expo start

```

Setelah project berhasil dijalankan, dibuat beberapa komponen untuk mengatur tampilan dan fungsi aplikasi.

---

# 🧠 Konsep Pemrograman yang Dipelajari

Dalam project ini terdapat beberapa konsep penting React Native.

## useState

`useState` digunakan untuk menyimpan data yang dapat berubah.

Contohnya digunakan untuk menyimpan daftar tugas:

```javascript

const [tasks, setTasks] = useState([]);

```

Ketika terdapat tugas baru, data pada `tasks` akan diperbarui.

---

## useEffect

`useEffect` digunakan untuk menjalankan proses tertentu ketika aplikasi dijalankan atau ketika data mengalami perubahan.

Pada aplikasi ini, `useEffect` digunakan untuk mengambil data tugas yang sebelumnya telah disimpan.

---

## Component

React Native menggunakan konsep component.

Contohnya:

```text

TaskCard

StatCard

AddTaskModal

```

Dengan menggunakan component, kode program menjadi lebih terorganisir dan mudah dikembangkan.

---

# 🔄 Alur Kerja Aplikasi

Alur penggunaan aplikasi Taskly adalah:

```text

Buka Aplikasi

       ↓

Menampilkan Dashboard

       ↓

Klik "Tambah Tugas"

       ↓

Masukkan Nama Tugas

       ↓

Pilih Kategori

       ↓

Klik "Tambah Tugas"

       ↓

Tugas Ditampilkan

       ↓

 ┌─────┼─────┐

 ↓ ↓ ↓

Edit Selesai Hapus

 ↓ ↓ ↓

Data Status Data

ubah berubah dihapus

```

---

# 📸 Hasil Project

Setelah aplikasi berhasil dibuat, tampilan utama aplikasi menampilkan:

* Nama aplikasi **Taskly**

* Sapaan pengguna

* Statistik tugas

* Progress tugas

* Daftar tugas

* Filter tugas

* Tombol tambah tugas

**📷 Screenshot:**

*Masukkan screenshot halaman utama aplikasi di bagian ini.*

**📷 Screenshot Tambah Tugas:**

*Masukkan screenshot ketika form tambah tugas terbuka.*

**📷 Screenshot Tugas Selesai:**

*Masukkan screenshot ketika salah satu tugas sudah dicentang.*

---

# 💡 Kelebihan Aplikasi

Beberapa kelebihan aplikasi Taskly adalah:

* Tampilan sederhana dan modern.

* Mudah digunakan.

* Memiliki fitur CRUD.

* Data dapat disimpan secara lokal.

* Memiliki filter tugas.

* Terdapat statistik tugas.

* Cocok digunakan untuk mengatur tugas sekolah maupun kegiatan pribadi.

---

# 🔮 Pengembangan Selanjutnya

Aplikasi ini masih dapat dikembangkan dengan menambahkan berbagai fitur baru, seperti:

* 🌙 Dark Mode

* 🔔 Notifikasi pengingat tugas

* 📅 Kalender dan deadline

* ⭐ Prioritas tugas

* 🔍 Pencarian tugas

* 📊 Statistik lebih lengkap

* 👤 Profil pengguna

* ☁️ Penyimpanan database online

* 🔐 Login dan register

* 🔄 Sinkronisasi data antar perangkat

Dengan penambahan fitur tersebut, aplikasi Taskly dapat dikembangkan menjadi aplikasi manajemen tugas yang lebih lengkap.

---

# 📝 Kesimpulan

Dari project yang telah dibuat, dapat disimpulkan bahwa **React Native** dapat digunakan untuk membuat aplikasi mobile dengan tampilan yang menarik dan interaktif.

Melalui pembuatan aplikasi **Taskly – To-Do List**, saya dapat mempelajari beberapa konsep React Native seperti **component, useState, useEffect, event handling, CRUD, dan penyimpanan data menggunakan AsyncStorage**.

Aplikasi ini juga memberikan pengalaman dalam membuat desain antarmuka mobile yang sederhana, modern, dan mudah digunakan.

Project ini menjadi salah satu langkah awal untuk memahami pengembangan aplikasi mobile menggunakan React Native dan dapat dikembangkan lebih lanjut dengan fitur-fitur yang lebih kompleks.

---

## 🚀 Penutup

Demikian project **“Membuat Aplikasi To-Do List Menggunakan React Native”** yang telah saya buat.

Semoga project ini dapat menjadi media pembelajaran untuk memahami dasar-dasar React Native serta menjadi referensi bagi yang ingin mulai belajar membuat aplikasi mobile menggunakan JavaScript.