Tutorial Membuat Aplikasi To-Do List dengan Angular dan Firebase

Pendahuluan

Dalam tutorial ini, kita akan belajar cara membuat aplikasi To-Do List menggunakan Angular dan Firebase. Aplikasi ini akan memungkinkan pengguna untuk menambah, mengedit, dan menghapus tugas dengan mudah. Firebase akan digunakan sebagai backend untuk menyimpan data tugas secara real-time.

Persiapan

1. Instalasi Node.js dan Angular CLI

Pastikan Anda telah menginstal Node.js dan Angular CLI di komputer Anda. Anda dapat memeriksa instalasi Node.js dengan menjalankan perintah node -v di terminal.

2. Membuat Akun Firebase

Kunjungi Firebase dan buat akun jika Anda belum memilikinya. Setelah itu, buat proyek baru di Firebase Console.

Membuat Proyek Angular

1. Membuat Proyek Baru

Jalankan perintah berikut di terminal untuk membuat proyek Angular baru:

ng new todo-app

2. Menjalankan Proyek

Masuk ke direktori proyek dan jalankan aplikasi:

cd todo-app
ng serve

Buka browser dan akses http://localhost:4200 untuk melihat aplikasi Anda.

Integrasi Firebase

1. Menambahkan Firebase ke Proyek

Instal Firebase dan AngularFire dengan perintah:

npm install firebase @angular/fire

2. Konfigurasi Firebase

Tambahkan konfigurasi Firebase ke proyek Anda. Buka src/environments/environment.ts dan tambahkan informasi berikut:

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  }
};

3. Menginisialisasi Firebase

Di src/app/app.module.ts, import dan inisialisasi Firebase:

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [...],
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Membuat Fitur To-Do

1. Membuat Model To-Do

Buat file baru src/app/todo.model.ts untuk mendefinisikan model To-Do:

export interface Todo {
  id?: string;
  title: string;
  completed: boolean;
}

2. Membuat Service To-Do

Buat service untuk mengelola data To-Do:

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Todo } from './todo.model';

@Injectable({
  providedIn: 'root'
})
export class TodoService {
  constructor(private firestore: AngularFirestore) { }

  getTodos() {
    return this.firestore.collection('todos').snapshotChanges();
  }

  addTodo(todo: Todo) {
    return this.firestore.collection('todos').add(todo);
  }

  updateTodo(todo: Todo) {
    return this.firestore.doc(`todos/${todo.id}`).update(todo);
  }

  deleteTodo(id: string) {
    return this.firestore.doc(`todos/${id}`).delete();
  }
}

3. Membuat Komponen To-Do

Buat komponen baru untuk menampilkan dan mengelola To-Do:

ng generate component todo

Di dalam komponen, gunakan TodoService untuk menampilkan dan mengelola tugas.

Kesimpulan

Dalam tutorial ini, kita telah berhasil membuat aplikasi To-Do List menggunakan Angular dan Firebase. Anda sekarang dapat menambah, mengedit, dan menghapus tugas dengan mudah. Anda dapat mengembangkan aplikasi ini lebih lanjut dengan menambahkan fitur-fitur tambahan seperti autentikasi pengguna dan pengingat tugas.