Halo IoT Gengs! 👋 Selamat datang kembali pada modul pelatihan divisi Internet Of Things AMCC! Setelah sebelumnya kita menjelajahi pengiriman data jarak jauh menggunakan LoRa dan LoRaWAN, kali ini kita akan menaikkan level kemampuan kita ke ranah Edge AI & Machine Learning.

Di pertemuan ini, kita akan membahas TinyML (Tiny Machine Learning) — sebuah teknologi revolusioner yang memungkinkan model Machine Learning berjalan langsung di atas mikrokontroler berdaya sangat rendah (seperti ESP32) tanpa memerlukan koneksi internet atau server cloud.

Teori tanpa praktek tentu kurang seru. Oleh karena itu, kita akan langsung mencoba deployment model TinyML ke dalam sebuah sistem permainan: Game Suit (Batu-Gunting-Kertas) Pintar berbasis ESP32! Buckle up, and let’s dive in!

Table of Contents

∘ Let’s Talk About TinyML
∘ Apa itu TinyML?
∘ Mengapa Menjalankan Machine Learning di Edge/Mikrokontroler?
∘ Use Case Nyata TinyML di Industri IoT
∘ Alur Kerja (Workflow) Pembuatan Model TinyML
∘ Study Case: Game Suit TinyML ESP32
∘ Persiapan Library & Wokwi Simulator
∘ Rangkaian Komponen & ESP32
∘ The Code: Eksekusi Model di ESP32
∘ Cara Menjalankan Simulasi
∘ Penutup

Let’s Talk About TinyML

Selama ini, kita terbiasa mengirim data mentah dari sensor (seperti suhu atau getaran) melalui MQTT ke cloud atau server lokal untuk diproses. Namun, pendekatan konvensional ini memiliki kelemahan besar: latensi jaringan yang tinggi, kerentanan terhadap putusnya koneksi internet, serta masalah privasi data karena seluruh informasi harus dikirim ke luar perangkat.

Dengan TinyML, paradigma tersebut bergeser. Model kecerdasan buatan dipangkas dan dioptimasi sedemikian rupa hingga ukurannya cukup kecil (dalam satuan kilobyte) untuk dimuat ke dalam memori Flash mikrokontroler. Hasilnya? Perangkat IoT Anda dapat berpikir, mengenali pola suara, mendeteksi getaran anomali, atau membaca gestur secara mandiri (on-device) secara real-time.

Apa itu TinyML?

TinyML adalah sub-bidang dari Machine Learning dan Embedded Systems yang berfokus pada perancangan, pelatihan, kuantisasi, dan penyebaran model pembelajaran mesin (biasanya menggunakan TensorFlow Lite for Microcontrollers) pada perangkat keras berdaya rendah yang berjalan dengan konsumsi daya di bawah 1 mW.

Mengapa Menjalankan Machine Learning di Edge/Mikrokontroler?

• Ultra-Low Latency: Keputusan diambil dalam hitungan milidetik tanpa harus menunggu respons dari server cloud.
• Privasi dan Keamanan Tinggi: Data sensitif (seperti rekaman suara atau video visual) diproses secara lokal di perangkat dan tidak pernah meninggalkan mikrokontroler.
• Efisiensi Bandwidth & Biaya: Tidak ada kebutuhan pengiriman data telemetri secara terus-menerus ke cloud, sehingga menghemat kuota internet dan infrastruktur server.
• Keandalan Tinggi (Offline Capability): Sistem tetap berfungsi secara optimal meskipun berada di area blank spot tanpa koneksi internet.

Use Case Nyata TinyML di Industri IoT

• Predictive Maintenance: Mendeteksi getaran anomali pada motor induksi atau mesin pabrik menggunakan akselerometer untuk mencegah kerusakan fatal sebelum terjadi.
• Smart Home & Voice Recognition: Mengenali kata kunci suara tertentu (seperti perintah “Nyalakan Lampu”) secara lokal pada perangkat tanpa mengirim audio ke server luar.
• Environmental Monitoring: Klasifikasi tingkat keparahan polusi atau deteksi dini kebakaran berdasarkan kombinasi pembacaan pola multi-sensor.

Alur Kerja (Workflow) Pembuatan Model TinyML

• Data Collection: Mengumpulkan data sampel.
• Model Training: Melatih model jaringan saraf tiruan (Neural Network) menggunakan Python/TensorFlow (biasanya di Google Colab atau PC lokal).
• Model Quantization / Conversion: Mengubah model menjadi format .tflite (TensorFlow Lite), lalu di- convert menjadi Array Byte C/C++ agar bisa dibaca mikrokontroler.
• Deployment: Mengunggah Array Byte tersebut ke ESP32 bersama kode inferensi (pembacaan model).

Study Case: Game Suit TinyML ESP32

Pada modul ini, kita akan fokus pada tahap Deployment. Kita akan membuat Game Batu-Gunting-Kertas. Pemain akan menekan salah satu dari tiga tombol. Mikrokontroler tidak langsung mengecek tombol mana yang ditekan menggunakan logika if-else biasa, melainkan memasukkan data encoding tombol tersebut ke dalam Model TensorFlow Lite Micro.

Model akan memprediksi pilihan kita (Batu, Gunting, atau Kertas). Setelah itu, CPU (ESP32) akan memilih langkah lawan secara acak, menentukan pemenangnya, dan menampilkannya di layar OLED 128x128!

Catatan Penting: Karena fokus kita adalah belajar alur deployment (alur memasukkan model AI ke mikrokontroler), data input yang digunakan adalah encoding tombol sederhana, bukan pengukuran sensor kamera atau gestur jari nyata.

Persiapan Library & Wokwi Simulator

Untuk memudahkan, kita akan menggunakan Wokwi Simulator.

1. Buka Wokwi ESP32.
2. Di bagian Library Manager (atau file libraries.txt), pastikan kalian menambahkan library berikut:

• Adafruit GFX Library
• Adafruit SH110X
• Adafruit BusIO
• Chirale_TensorFLowLite (Ini adalah library utama untuk menjalankan TFLite di ESP32!)

Rangkaian Komponen & ESP32

Jika kalian ingin merangkainya secara fisik, siapkan komponen dan hubungkan sesuai pinout berikut (bisa juga kita simulasikan di Wokwi nanti):

The Code: Eksekusi Model di ESP32

Dalam proyek TinyML, kita biasanya memisahkan file model (Array Byte) dari program utama agar rapi, Teman teman dapat mengakses code nya pada https://github.com/phiesanggoreng/suittinyml.git.

Cara Menjalankan Simulasi

1. Pastikan semua code di Wokwi (sketch.ino, game_logic.h, model_data.h, dan diagram.json) sudah sama persis dengan repository Github.
2. Klik tombol Start Simulation (Hijau).
3. Saat OLED menampilkan tulisan “PILIH”, klik salah satu tombol pushbutton berwarna (Merah = Batu, Kuning = Gunting, Biru = Kertas).
4. ESP32 akan menggunakan model TensorFlow Lite untuk memproses inputmu, memilih lawannya, lalu membunyikan buzzer dan menampilkan hasil kemenangan lengkap dengan Scoreboard!

Penutup

Gimana IoT Gengs? Lewat studi kasus Game Suit ini, kita sudah berhasil melakukan tahap deployment memindahkan “otak” buatan (model .tflite) yang dilatih di komputer besar ke dalam mikrokontroler sekelas ESP32!

Ini membuktikan bahwa dengan TinyML, perangkat keras sederhana kita kini memiliki kapasitas “berpikir” secara mandiri tanpa bergantung pada jaringan internet luar. Teknologi ini membuka peluang sangat luas untuk menciptakan sistem otomatisasi yang lebih responsif, privat, dan canggih di masa depan.

Kalau ada yang error saat ngoding atau kompilasi gagal karena memori tidak cukup, jangan panik. Debug is part of the fun! Langsung aja kita diskusikan di kelas.

Sampai jumpa………

AMCC

Learning By Doing

Learning By Teaching

Pengantar TinyML: Menggabungkan Kecerdasan Buatan dan Mikrokontroler untuk Edge Computing was originally published in Amikom Computer Club on Medium, where people are continuing the conversation by highlighting and responding to this story.

Halo Mobile Rangers! 👋✨

Kembali lagi bersama kami! Di petualangan kali ini, kita nggak cuma sekadar bikin aplikasi aja, tapi kita bakal melangkah lebih jauh. Kita akan belajar cara menautkan aplikasi yang sudah dibuat dengan salah satu AI paling populer saat ini: Gemini AI! 🚀🤖

Penasaran gimana caranya bikin aplikasi kamu jadi jauh lebih pintar? Yuk, simak panduan lengkapnya di bawah ini!

· GEMINI API
· Membuat GEMINI API KEY
· Apa itu Konteks dalam AI ?
· Membuat UI Aplikasi dan Menerapkan Gemini API ke dalamnya.

GEMINI API

Sebelum kita lanjut ke sesi praktikum, penting banget buat kita pahami dulu bagaimana cara menghubungkan aplikasi dengan Gemini AI. Jawabannya adalah dengan menggunakan Gemini API!

Dalam dunia pengembangan aplikasi, “pintu akses” sakti ini dikenal dengan nama Gemini API (Application Programming Interface)! 🔑✨

Bayangkan Gemini API ini sebagai jembatan super cepat atau kunci pasport digital yang membuka gerbang kecerdasan Google untuk langsung masuk dan ‘tinggal’ di dalam aplikasi buatanmu.

Mengapa Gemini API Sangat Spesial?

• Otak Tambahan untuk Aplikasimu
  Kamu tidak perlu membuat model AI sendiri dari nol yang memakan waktu berbulan-bulan. Cukup “panggil” Gemini API, dan aplikasimu langsung punya kemampuan menganalisis teks, menerjemahkan bahasa, hingga memahami gambar.
• Komunikasi Dua Arah yang Kilat
  Aplikasi milikmu cukup mengirim pesan (disebut Request/Prompt), dan dalam hitungan detik Gemini akan menjawabnya (Response) untuk ditampilkan langsung kepada pengguna.
• Fleksibel & Siap Pakai 🛠
  Bisa dipasang di platform mana saja — mulai dari aplikasi mobile (Flutter, React Native, Android/iOS native) hingga aplikasi web dan server.

Setelah kita mengetahui apa itu Gemini API, langsung saja kita masuk ke praktikum nya

Membuat GEMINI API KEY

1. Membuka Google AI Studio ( https://aistudio.google.com )
2. Membuat API Key baru

a. Jika sudah membuka Google AI Studio, teman-teman bisa klik tombol dashboard pada menu sebelah kiri.

b. Jika tombol dashboard sudah diklik, maka tampilannya akan seperti ini.

c. Kemudian, klik pada tombol Create API key (pojok atas sebelah kanan).

d. Buat nama untuk API Key serta Buat Project jika belum ada. Nanti hasilnya seperti contoh di bawah ini.

e. Dan klik Create key. Selamat Anda sudah berhasil membuat API Key pertama dan silahkan simpan untuk membuat projek kali ini.

Apa itu Konteks dalam AI ?

Sebelum kita lanjut ke praktikum kedua, ada satu hal penting yang harus kalian ketahui. Dalam proses pengembangan aplikasi, kita menginginkan supaya AI/Chatbot yang dibuat menjawab sesuai dengan tema aplikasi. Oleh karena itu, kita memerlukan adanya Konteks dalam AI.

Bayangkan kamu lagi asyik ngobrol sama teman, tapi tiba-tiba kamu melempar kalimat tanpa arah dan latar belakang yang jelas. Kira-kira temanmu bakal paham? Jawabannya: pasti bingung banget! 🥲

Nah, hal yang sama persis berlaku di dunia Artificial Intelligence.

Dalam pengembangan AI khususnya pada Large Language Models (LLM) seperti Gemini, konteks adalah fondasi utamanya. Konteks merupakan seluruh informasi latar belakang, riwayat instruksi, dan detail pendukung yang kita berikan kepada AI agar ia dapat memproses maksud pesan kita dengan tepat serta memberikan jawaban yang relevan dan akurat.

Mengapa Konteks Sangat Krusial?

• Menghindari Perbedaan Penafsiran (Ambiguity)
  Kata yang sama bisa memiliki arti berbeda. Konteks membantu AI memahami makna spesifik dari perintah yang diberikan.
• Menjaga “Ingatan” Percakapan
  Dengan riwayat konteks yang baik, AI dapat mengingat alur diskusi sebelumnya tanpa perlu kamu ulang dari awal.
• Hasil Response Lebih Presisi
  Semakin jelas latar belakang data atau peran yang kamu berikan (System Prompt), semakin pas pula jawaban yang dihasilkan AI sesuai kebutuhan aplikasimu.

Elemen Utama Konteks dalam AI

• Instruksi / System Prompt: Aturan dasar yang menentukan peran AI (misal: “Bertindaklah sebagai tutor pemrograman mobile yang ramah”).
• Riwayat Percakapan (Chat History): Pesan-pesan sebelumnya dalam sesi obrolan agar AI ingat apa yang sudah dibahas.
• Data Tambahan (External Data / RAG): Dokumen, data pengguna, atau teks referensi yang dimasukkan ke dalam prompt agar jawaban AI akurat.

Membuat UI Aplikasi dan Menerapkan Gemini API ke dalamnya.

1. Menyalin project Mobile Programming sebelumnya.

git clone -b pertemuan-11 https://github.com/amccamikom/amcc-mobile-2025.git

2. Menginstal library/package yang diperlukan.

flutter pub add google_generative_ai flutter_dotenv flutter_markdown shimmer

3. Menambahkan assets .env untuk meletakkan Gemini API Key supaya tetap aman.

4. Membuat file .env dan mengisinya dengan Gemini API Key

Contoh:

GEMINI_API_KEY=ISI_DENGAN_GEMINIKEY_MILIKMU

5. Membuat file gemini_services.dart pada folder services sebagai tempat fungsi chatbot berada.

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:google_generative_ai/google_generative_ai.dart';
import 'task_service.dart';

class GeminiService {
  late final GenerativeModel _model;
  late final ChatSession _chat;
  final TaskService _taskService = TaskService();

  GeminiService() {
    // Membaca API Key dari file .env
    final apiKey = dotenv.env['GEMINI_API_KEY'] ?? '';

    if (apiKey.isEmpty) {
      throw Exception('API Key Gemini tidak ditemukan di file .env');
    }

    // Inisialisasi Model Gemini dengan Konteks Peran
    _model = GenerativeModel(
      model: 'gemini-3.6-flash',
      apiKey: apiKey,
      systemInstruction: Content.system(
        'Kamu adalah asisten AI ramah khusus untuk membantu kebutuhan mahasiswa. Kamu memiliki akses ke daftar tugas/task pengguna yang tersimpan di database Firestore aplikasi.',
      ),
    );

    // Memulai sesi obrolan agar konteks percakapan sebelumnya tersimpan
    _chat = _model.startChat();
  }

  /// Mengirim pesan ke Gemini AI dan mengembalikan respon berupa teks
  Future<String?> sendMessage(String message) async {
    try {
      // Mengambil daftar tugas terbaru pengguna dari Firestore
      final tasks = await _taskService.getTasksOnce();

      String contextText = '';
      if (tasks.isNotEmpty) {
        final taskList = tasks
            .map((t) =>
                "- Judul: ${t.title} | Tanggal: ${t.date} | Status: ${t.isCompleted ? 'Selesai' : 'Belum Selesai'}")
            .join('\n');
        contextText =
            "[Daftar Tugas Pengguna di Firestore saat ini]:\n$taskList\n\n";
      } else {
        contextText =
            "[Daftar Tugas Pengguna di Firestore saat ini]: Belum ada tugas yang tersimpan.\n\n";
      }

      final fullPrompt = "$contextText[Pesan/Pertanyaan Pengguna]: $message";
      final response = await _chat.sendMessage(Content.text(fullPrompt));
      return response.text;
    } catch (e) {
      throw Exception('Gagal mengirim pesan ke Gemini: $e');
    }
  }
}

6. Membuat menu dan menambahkan rute untuk halaman chatbot

PersistentTabConfig(
          screen: const ChatbotPage(),
          item: ItemConfig(
            icon: const Icon(Icons.chat_bubble_outline),
            title: "Chatbot",
            activeForegroundColor: const Color(0xFF3254FD),
            inactiveForegroundColor: Colors.grey,
          ),
        ),

7. Membuat file chatbot_page.dart untuk tampilan halaman berinteraksi dengan chatbot

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:shimmer/shimmer.dart';
import '../services/gemini_service.dart';

class ChatbotPage extends StatefulWidget {
  const ChatbotPage({super.key});

  @override
  State<ChatbotPage> createState() => _ChatbotPageState();
}

class _ChatbotPageState extends State<ChatbotPage> {
  final TextEditingController _controller = TextEditingController();
  final ScrollController _scrollController = ScrollController();
  final List<Map<String, String>> _messages = [
    {
      'sender': 'Bot AI',
      'text': 'Selamat datang! ChatBot siap membantumu!',
    }
  ];

  late final GeminiService _geminiService;
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _geminiService = GeminiService();
  }

  @override
  void dispose() {
    _controller.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  void _scrollToBottom() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_scrollController.hasClients) {
        _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
        );
      }
    });
  }

  Future<void> _handleSendMessage() async {
    final text = _controller.text.trim();
    if (text.isEmpty) return;

    setState(() {
      _messages.add({'sender': 'user', 'text': text});
      _isLoading = true;
    });

    _controller.clear();
    _scrollToBottom();

    try {
      final responseText = await _geminiService.sendMessage(text);

      setState(() {
        _messages.add({
          'sender': 'Bot AI',
          'text': responseText ?? 'Tidak ada tanggapan.',
        });
      });
    } catch (e) {
      setState(() {
        _messages.add({
          'sender': 'Bot AI',
          'text': 'Terjadi kesalahan: $e',
        });
      });
    } finally {
      setState(() {
        _isLoading = false;
      });
      _scrollToBottom();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8F9FA),
      appBar: AppBar(
        title: Row(
          mainAxisSize: MainAxisSize.min,
          children: const [
            Icon(Icons.smart_toy_outlined, color: Colors.blue),
            SizedBox(width: 8),
            Text(
              'ChatBot',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
            ),
          ],
        ),
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        elevation: 1,
      ),
      body: Column(
        children: [
          // Daftar Balon Chat
          Expanded(
            child: ListView.builder(
              controller: _scrollController,
              padding: const EdgeInsets.all(16.0),
              itemCount: _messages.length + (_isLoading ? 1 : 0),
              itemBuilder: (context, index) {
                if (index == _messages.length && _isLoading) {
                  // Shimmer Loading Chat Bubble
                  return Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      margin: const EdgeInsets.only(bottom: 12.0),
                      padding: const EdgeInsets.all(14.0),
                      constraints: BoxConstraints(
                        maxWidth: MediaQuery.of(context).size.width * 0.75,
                      ),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(16),
                          topRight: Radius.circular(16),
                          bottomRight: Radius.circular(16),
                          bottomLeft: Radius.circular(4),
                        ),
                        border: Border.all(color: Colors.grey.shade300),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withValues(alpha: 0.03),
                            blurRadius: 4,
                            offset: const Offset(0, 2),
                          )
                        ],
                      ),
                      child: Shimmer.fromColors(
                        baseColor: Colors.grey.shade300,
                        highlightColor: Colors.grey.shade100,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Container(
                              width: double.infinity,
                              height: 12.0,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(6),
                              ),
                            ),
                            const SizedBox(height: 8),
                            Container(
                              width: MediaQuery.of(context).size.width * 0.5,
                              height: 12.0,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(6),
                              ),
                            ),
                            const SizedBox(height: 8),
                            Container(
                              width: MediaQuery.of(context).size.width * 0.3,
                              height: 12.0,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(6),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                }

                final message = _messages[index];
                final isUser = message['sender'] == 'user';

                return Align(
                  alignment: isUser ? Alignment.centerRight : Alignment.centerLeft,
                  child: Container(
                    margin: const EdgeInsets.only(bottom: 12.0),
                    padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
                    constraints: BoxConstraints(
                      maxWidth: MediaQuery.of(context).size.width * 0.8,
                    ),
                    decoration: BoxDecoration(
                      color: isUser ? const Color(0xFF3254FD) : Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: const Radius.circular(16),
                        topRight: const Radius.circular(16),
                        bottomLeft: isUser ? const Radius.circular(16) : const Radius.circular(4),
                        bottomRight: isUser ? const Radius.circular(4) : const Radius.circular(16),
                      ),
                      border: isUser ? null : Border.all(color: Colors.grey.shade300),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withValues(alpha: 0.04),
                          blurRadius: 4,
                          offset: const Offset(0, 2),
                        ),
                      ],
                    ),
                    child: isUser
                        ? Text(
                            message['text']!,
                            style: const TextStyle(
                              fontSize: 14,
                              color: Colors.white,
                              height: 1.4,
                            ),
                          )
                        : MarkdownBody(
                            data: message['text']!,
                            selectable: true,
                            styleSheet: MarkdownStyleSheet.fromTheme(
                              Theme.of(context),
                            ).copyWith(
                              p: const TextStyle(
                                fontSize: 14,
                                color: Colors.black87,
                                height: 1.4,
                              ),
                              strong: const TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.black,
                              ),
                              em: const TextStyle(
                                fontStyle: FontStyle.italic,
                              ),
                              listBullet: const TextStyle(
                                fontSize: 14,
                                color: Color(0xFF3254FD),
                              ),
                            ),
                          ),
                  ),
                );
              },
            ),
          ),

          // Bar Input Pesan
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withValues(alpha: 0.05),
                  blurRadius: 8,
                  offset: const Offset(0, -2),
                )
              ],
            ),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    decoration: BoxDecoration(
                      color: const Color(0xFFF1F3F5),
                      borderRadius: BorderRadius.circular(24),
                    ),
                    child: TextField(
                      controller: _controller,
                      decoration: const InputDecoration(
                        hintText: 'Ketik pesan...',
                        border: InputBorder.none,
                      ),
                      onSubmitted: (_) => _handleSendMessage(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                CircleAvatar(
                  backgroundColor: const Color(0xFF3254FD),
                  radius: 20,
                  child: IconButton(
                    icon: const Icon(Icons.send, color: Colors.white, size: 18),
                    onPressed: _handleSendMessage,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Smart Mobile Apps with Flutter & Gemini AI was originally published in Amikom Computer Club on Medium, where people are continuing the conversation by highlighting and responding to this story.

Kita buka sesi ini dengan satu kalimat

“Kuah sotonya berminyak banget”

Apa sentimennya? Positif? Negatif? Netral? Atau tergantung?

Sekarang bandingkan dengan kalimat berikut.

“Makanannya enak banget, recommended sih”

Kalimat kedua ini tidak perlu ditanyakan. Kita semua sepakat bahwa sentimennya positif.

Perbedaannya bukan terletak pada panjang kalimat atau topiknya, melainkan pada jenis kata sifat yang dipakai. Kata “enak” bersifat evaluatif karena sudah mengandung putusan di dalamnya. Sementara itu kata “berminyak” bersifat deskriptif, karena ia hanya menunjuk sesuatu yang bisa dilihat di permukaan mangkuk tanpa menilai apa pun.

Kalimat kedua membawa valensinya sendiri, sedangkan kalimat pertama tidak. Dari titik inilah seluruh persoalan bermula.

Delapan keyakinan yang akan diuji

Tulisan ini bukan tutorial. Anggap saja sebagai laporan pengujian. Semua angka yang muncul di dalamnya saya jalankan sendiri, bukan disalin dari tutorial lain, dan notebook untuk memeriksanya tersedia di bagian penutup.

Keyakinan-keyakinan tersebut adalah:

1. Sentiment analysis adalah teknik mengekstrak emosi dari teks
2. Stopword adalah kata yang tidak penting, jadi aman dibuang
3. Case folding bersifat netral, hanya menyeragamkan huruf
4. Kata beruang akan di-stem menjadi uang
5. Lemmatization mengatasi masalah over-stemming
6. Lexicon adalah kamus yang sudah divalidasi, tinggal dipakai
7. Kalau lexicon kurang akurat, tinggal tambahkan aturan
8. Akurasi yang tinggi berarti modelnya sudah bagus

Kedelapannya bermasalah. Sebagian keliru sepenuhnya, sebagian lagi kebetulan benar tetapi karena alasan yang salah.

Yang lebih menarik adalah bahwa kedelapannya punya sebab yang sama. Bagian itu saya bahas di penutup.

Salah paham pertama: “Mengekstrak emosi dari teks”

Definisi yang paling sering ditemui kira-kira berbunyi begini.

Sentiment analysis adalah teknik mengekstrak emosi dari teks menggunakan NLP.

Sebagai titik awal, kalimat itu tidak buruk. Namun ada dua kata di dalamnya yang tidak sesuai dengan makna aslinya, dan keduanya berkonsekuensi.

Emosi bukanlah sentimen

Sentimen adalah valensi, yaitu arah dan derajat sebuah evaluasi. Emosi adalah kategori afektif, seperti senang, marah, takut, atau jijik. Keduanya berbeda, dengan taksonomi, dataset, dan task masing-masing.

Buktinya mudah ditemukan. Dua kalimat berikut memisahkan keduanya dengan bersih.

Kalimat:

“Produk ini tidak sesuai dengan spesifikasi yang dijanjikan”

Jelas bersentimen negatif, tetapi emosinya nyaris nol. Nadanya datar. Sebaliknya, kalimat:

“GILA GUE GA NYANGKA INI KEJADIAN”

Penuh emosi, tetapi polaritasnya ambigu. Bisa berarti girang, bisa juga berarti murka.

Jika Anda mencari dataset dengan asumsi bahwa keduanya sama, Anda bisa jadi akan tersesat ke label set yang keliru sejak awal.

Kata “mengekstrak” mengandaikan sesuatu yang tidak benar

Bagian ini lebih halus, dan lebih mahal akibatnya.

Kata “ekstrak” menyiratkan bahwa sentimennya sudah ada di dalam teks dan tinggal diambil, seperti bijih dari dalam tanah. Kenyataannya tidak demikian, dan buktinya sederhana. Annotator manusia, seseorang yang menentukan valensi sebuah kalimat, sering kali tidak sepakat. Seandainya sentimen benar-benar merupakan properti intrinsik sebuah teks, mereka tidak akan berbeda pendapat.

Yang sebenarnya dilakukan sistem sentiment analysis adalah memprediksi label apa yang akan diberikan pembaca tertentu terhadap sebuah teks. Ia tidak sedang menemukan sesuatu yang tersembunyi, melainkan menebak putusan manusia.

Perbedaan ini terdengar filosofis sampai Anda mengerjakan proyek sungguhan. Jika kerangka berpikir Anda adalah ekstraksi, maka ketika akurasi mentok di 80 persen, Anda akan menyalahkan arsitektur. Anda akan menambah layer, mengganti model, dan memperbanyak data. Padahal 20 persen sisanya bisa jadi memang merupakan ketidaksepakatan manusia yang secara prinsip tidak dapat dipelajari.

Dengan kata lain, Anda sedang mengejar target yang tidak ada.

Menelusuri asal katanya

Kata sentiment berasal dari bahasa Latin sentire. Yang menarik, sentire tidak hanya berarti merasa, tetapi juga berpendapat. Kata sentio bisa diterjemahkan menjadi keduanya, tergantung konteks. Satu kata dengan dua fungsi, yang dalam bahasa modern justru kita pisahkan dengan rapi.

Turunannya cukup banyak, mulai dari sense, sentient, consent, dissent, sampai resent. Ada pula sentence, yang berasal dari sententia, artinya putusan yang diucapkan. Itulah sebabnya seorang hakim disebut menjatuhkan sentence. Jadi kata “kalimat” dan “sentimen” sesungguhnya bersaudara, dan leluhur bersama keduanya adalah penilaian yang dirasakan.

Makna modernnya terkunci pada abad kedelapan belas. Adam Smith menulis The Theory of Moral Sentiments pada tahun 1759, dan di sanalah kata sentiment menjadi istilah teknis untuk sesuatu yang sangat spesifik, yaitu perasaan yang membawa muatan evaluatif. Ia bukan passion yang mentah, dan bukan pula reason yang dingin, melainkan sesuatu di antara keduanya.

Dari sana muncul satu konsekuensi penting. Sentimen selalu tertuju pada sesuatu. Seseorang bisa merasa sedih tanpa tahu penyebabnya, tetapi tidak mungkin bersentimen negatif tanpa negatif terhadap apa.

Sentimen adalah relasi, bukan sesuatu yang utuh dengan dirinya sendiri. Dan relasi tidak bisa diekstrak. Jika sebuah relasi dipecah menjadi bagian-bagiannya, yang tersisa hanyalah kedua ujungnya, sedangkan relasinya sendiri justru hilang.

Kata analysis juga menyesatkan. Ia berasal dari bahasa Yunani, gabungan ana- dan lysis, yang berarti penguraian atau pelepasan simpul dan terpasang diam-diam di dalam kata sentiment analysis, mengasumsikan bahwa objeknya terdiri dari bagian-bagian, dan bahwa memahami berarti memecah.

Dalam praktiknya, yang benar-benar diurai bukanlah sentimennya, melainkan teksnya, dalam bentuk token, n-gram, atau embedding. Sentimennya sendiri justru dirakit secara utuh di ujung proses, menjadi satu label.

Jadi secara harfiah, sentiment analysis adalah analisis terhadap teks dan sintesis terhadap sentimen. Namanya salah menunjuk operasi mana yang sesungguhnya bersifat analitik. Nama yang salah menunjuk inilah sumber salah paham yang pertama.

Definisi yang saya pakai

Sentiment analysis adalah proses menetapkan valensi, yaitu seberapa positif, negatif, atau netral, dari sikap yang diekspresikan sebuah teks terhadap objek yang dilihat dari sisi tertentu, menurut norma yang ditetapkan sebelumnya, oleh seorang annotator dengan peran tertentu.

Definisi ini memang panjang, tetapi setiap frasa di dalamnya menjelaskan setiap komponen di dalam sentiment analysis.

Kata “menetapkan” dipakai menggantikan “mengekstrak”, karena tidak ada apa pun yang diambil.

Kata “valensi” dipakai menggantikan “emosi”, karena keduanya adalah task yang berbeda.

Frasa “diekspresikan sebuah teks” dipakai menggantikan “isi kepala penulis”, karena review palsu berbayar pun tetap keluar sebagai positif.

Frasa “dari sisi tertentu” diperlukan karena kuah soto yang dilihat dari sisi rasa dan kuah soto dilihat dari sisi kesehatan menghasilkan jawaban yang berbeda.

Frasa “norma yang ditetapkan sebelumnya” menegaskan bahwa norma bersifat prior, bukan temuan.

Dan kata “annotator” ada di sana karena selalu ada pembaca, dan perannya turut menentukan.

Enam komponen

Bagian dari sentimen terdiri dari empat hal, yaitu orang yang menulis, objek yang dilihat dari sisi tertentu, valensi yang merupakan keluaran akhirnya, dan kualitas berupa jenis perasaan yang dalam praktik sering tidak dipakai.

Sementara itu ada dua hal yang ditetapkan sebelum data dibaca, yaitu norma dan annotator.

Kedua kelompok ini tidak boleh dicampur, dan kesalahan itu berkali-kali saya lakukan sendiri ketika menyusun materinya.

Analogi yang paling membantu adalah kecepatan kereta. Ketika ada kereta berjalan, berapa kecepatannya? Relatif terhadap tanah, jawabannya 80 kilometer per jam. Relatif terhadap mobil yang berjalan beriringan dengan kecepatan sama, jawabannya nol.

Pertanyaan tentang berapa kecepatan sebenarnya, tanpa menyebut relatif terhadap apa, adalah pertanyaan yang rusak. Bukan sulit dijawab, melainkan belum menjadi pertanyaan.

Namun perhatikan apa yang tidak kita simpulkan dari situ. Kita tidak menyimpulkan bahwa kecepatan itu tidak ada, dan tidak pula menyimpulkan bahwa kecepatan bersifat subjektif. Begitu kerangka acuannya ditetapkan, jawabannya menjadi keras dan terukur. Orang yang menjawab 200 memang salah, bukan sekadar berbeda pendapat.

Kerangka acuan bukanlah bagian dari kecepatan, melainkan alat ukurnya. Norma dan annotator berperan persis seperti itu.

Mengapa norma dan annotator tidak sama

Dua contoh berikut mengunci perbedaan keduanya.

Kasus pertama menunjukkan norma yang berbeda dengan peran yang sama. Ambil kalimat “alpukat lemaknya banyak banget”. Seorang ahli gizi tahun 2026, yang memakai norma bahwa lemak tak jenuh tunggal menguntungkan, akan menilainya positif. Seorang ahli gizi tahun 1985, di puncak era low-fat, akan menilainya negatif. Keduanya sama-sama ahli gizi.

Kasus kedua menunjukkan peran yang berbeda dengan norma yang sama.

Normanya adalah:

game yang baik itu yang bikin pemain puas dan mau lanjut main

Kalimatnya adalah:

“Bossnya sadis, mati 47 kali baru tembus”.

Seorang pemain aktif di komunitas akan membacanya sebagai pujian terhadap tingkat kesulitan game terutama jika mereka penyuka soulslike, sehingga hasilnya positif. Seorang pembaca umum akan membacanya secara harfiah bahwa gamenya sulit dimainkan, sehingga hasilnya negatif.

Ringkasnya, norma menentukan dengan ukuran apa sesuatu dinilai, sedangkan peran menentukan lewat mata siapa teks itu dibaca.

Di dalam tabel itu ada dua baris yang hasilnya tidak berubah antara pembaca A dan B, dan itu disengaja. Seandainya semua baris terbalik, akan ada orang yang menyimpulkan bahwa semuanya relatif. Dua baris itu berfungsi mencegah kesimpulan tersebut.

Tambahan: satu norma tidak pernah cukup

Sebelum masuk ke bagian teknis, ada satu demonstrasi singkat yang perlu ditampilkan.

Setelannya sederhana. Normanya adalah bahwa barang yang baik itu murah, dan annotatornya adalah calon pembeli.

Kita semua tentu tahu bahwa baris terakhir pada tabel tersebut seharusnya berlabel Negatif, namun dengan norma yang sudah ditentukan sebelumnya, kalimat “Barang murah, jelek” menghasilkan label Positif.

Mungkin sebagian besar orang tidak akan menerima label tersebut. Namun hasilnya benar menurut norma yang kita tetapkan sendiri. Normanya hanya mampu menilai harga, dan sama sekali tidak memiliki alat untuk mengomentari build quality.

Perbaikannya bukan mengganti model, melainkan menetapkan satu norma untuk setiap aspek. Pendekatan itulah yang disebut ABSA (Aspect-Based Sentiment Analysis).

Dua aspek yang kosong itu sering diisi keliru oleh kebanyakan orang. Teks ketiga tidak menyebut harga sama sekali, sehingga statusnya bukan netral melainkan tidak ada. Netral berarti aspeknya disebut tetapi tidak dinilai.

Hal ini sekaligus menjelaskan mengapa ABSA merupakan satu-satunya nama yang jujur di bidang ini. Sentiment analysis biasa menghasilkan satu label untuk keseluruhan teks, dan itu sebenarnya agregasi. ABSA benar-benar mengurai, dan menyebutkan objeknya secara eksplisit.

Salah paham kedua: “Stopword aman dibuang”

Mulai dari sini, semuanya bisa diukur.

Sebelum melangkah lebih jauh, ada satu koreksi istilah yang perlu disampaikan. Pre-processing bukanlah NLP. Pre-processing adalah salah satu tahap di dalam NLP.

NLP sendiri adalah bidangnya, yang mencakup machine translation, question answering, speech recognition, chatbot, dan juga sentiment analysis.

Kalimat yang saya pakai untuk menguji adalah sebagai berikut.

“Aku kepedasan bgt pas makan sambalnya Bu Indah di Warung Sederhana, rasanya memuaskan tapi tidak bagus untuk perut ya adik-adik”

Pertanyaannya, siapa saja yang masuk ke dalam daftar stopword Sastrawi?

Kata di, yang, dan untuk memang ada di sana, dan itu wajar. Namun tapi juga ada di sana. Demikian pula tidak. Sementara itu gak justru tidak ada.

Kata tapi adalah konjungsi kontras yang menentukan klausa mana yang menang. Kata tidak adalah negasi yang membalik valensi. Keduanya merupakan penanda paling penting dalam bahasa apa pun, dan keduanya masuk ke daftar buang di dalam stopword.

Ketika pipeline dijalankan, hasilnya seperti ini.

21 token menjadi 16 token
yang dibuang: di, tapi, tidak, untuk, ya

Kalimat aslinya berbunyi “tidak bagus untuk perut”. Setelah langkah ini, yang tersisa hanyalah bagus.

Belum ada satu pun model yang dilatih, dan valensinya sudah terbalik.

Ada satu detail kecil yang sekaligus lucu dan mengganggu. Kata gak tidak ada di dalam daftar stopword, padahal artinya identik dengan tidak. Artinya, jika seorang reviewer mengetik "gak enak", negasinya selamat. Jika ia mengetik "tidak enak", negasinya hilang. Ejaan menentukan nasib valensi dari suatu kalimat.

Salah paham ketiga: “Case folding bersifat netral”

Bagian ini yang paling mudah diukur, dan hasilnya sangat rapi.

Saya melatih POS tagger dari korpus bawaan nlp-id yang berisi 559.872 token, dengan akurasi 99,24 persen pada 3.278 kalimat pengujian. Setelah itu saya menandai kalimat uji dua kali, yaitu sebelum dan sesudah hurufnya dikecilkan.

Empat tag berubah dari total 21 token, dan keempatnya adalah nama diri. Tujuh belas token lainnya sama sekali tidak tersentuh.

Jumlah NNP, yaitu penanda nama diri, turun dari empat menjadi nol.

Yang merepotkan adalah nasib Indah dan Sederhana. Keduanya kini dikenali sebagai kata sifat. Padahal di lexicon mana pun, kata sifat memiliki skor sentimen. Berapa angkanya akan kita lihat sebentar lagi.

Inilah alasan mengapa pada pipeline sungguhan, NER sering dijalankan sebelum case folding. Huruf kapital adalah petunjuk, dan langkah pertama pipeline membuangnya.

Namun ada satu kejutan di sini

Saya sempat menduga bahwa NER akan menunjukkan kerusakan yang sama dengan POS tagging. Ternyata dugaan itu keliru, dan saya rasa kekeliruannya justru lebih menarik daripada dugaan awalnya.

Ketika kalimat yang sama diproses dengan model cahya/bert-base-indonesian-NER, jumlah entitas yang terdeteksi sebelum dan sesudah case folding sama persis, yaitu dua entitas dengan hasil yang identik.

Penjelasannya ada pada tokenizer model tersebut. Keluarga model cahya/bert-base-indonesian bersifat uncased, sebagaimana dinyatakan sendiri di dalam kartu modelnya, yaitu tidak membedakan "indonesia" dari "Indonesia". Tokenizer-nya melakukan lowercase secara internal, sehingga kedua masukan kita sudah menjadi teks yang sama persis sebelum model sempat melihatnya.

Dengan kata lain, case folding tidak merusak apa pun di sana, karena model tersebut memang tidak pernah memakai informasi kapital sejak awal.

Temuan ini justru memperkuat kesimpulan yang lebih besar, dan akan muncul lagi dua kali di dalam tulisan ini. Urutan langkah pre-processing bergantung sepenuhnya pada metode yang akan memakainya. Case folding menghapus empat tag NNP pada tagger yang dilatih dengan teks bercase, tetapi sama sekali tidak berpengaruh pada model uncased.

Ada pula satu catatan mengenai outputnya. Model itu menandai kata sambal sebagai entitas dengan keyakinan sekitar 0,56, dan indah sekitar 0,53. Angka keyakinan di bawah 0,6 tergolong rendah, dan sambal jelas bukan nama diri. Ini pengingat bahwa keluaran sebuah model perlu dibaca, bukan sekadar diterima.

Salah paham keempat: “Kata beruang menjadi uang”

Contoh ini muncul di sangat banyak tutorial sentiment analysis berbahasa Indonesia sebagai ilustrasi over-stemming.

Saya menjalankannya dengan Sastrawi versi terbaru.

beruang menjadi beruang

Tidak terjadi.

Jika contoh tersebut ada di dalam materi ajar, slide, atau bab metodologi skripsi Anda, sebaiknya diganti. Bukan karena over-stemming tidak nyata (sebab persoalan itu sangat nyata), melainkan karena contoh spesifik ini sudah tidak dapat direproduksi.

Yang benar-benar terjadi adalah sebagai berikut.

Salah paham kelima: “Lemmatization mengatasi over-stemming”

Keyakinan ini setengah benar, dan setengah yang lain justru bagian yang penting.

Perhatikan kolom lemma pada tabel di atas. Kata pengunjung dan memuaskan berhasil diselamatkan. Stemming menghasilkan potongan yang bukan kata, yaitu unjung dan muas, sedangkan lemmatization menghasilkan kata sungguhan, yaitu kunjung dan puas.

Perbedaan ini penting untuk sentimen. Kata muas tidak ada di lexicon mana pun, sehingga nilai memuaskan hilang sepenuhnya. Sedangkan puas ada di dalam lexicon.

Namun perhatikan baris-baris berikutnya.

Kata pengalaman menjadi alam di kedua metode. Keduanya sama-sama keliru.

Tiga baris berimbuhan ke-…-an juga menghasilkan keluaran yang sama di kedua metode. Imbuhan itu berarti berlebihan, dan di situlah muatan negatifnya berada. Kata kepedasan yang merupakan keluhan berubah menjadi pedas yang bersifat deskriptif, bahkan bisa dinilai positif oleh sebagian orang.

Lemmatization memang lebih rapi, tetapi lemmatization bukan solusi yang selalu bisa diandalkan.

Aturan praktis dari bagian ini

Semakin banyak yang Anda buang saat pre-processing, semakin besar kemungkinan Anda ikut membuang sentimennya.

Pada tugas NLP lain, kata seperti tidak dan tapi memang layak dibuang karena tidak memberi tahu apa pun tentang topik sebuah teks. Pada sentiment analysis, justru kata-kata itulah yang menentukan jawabannya.

Membuang stopword ikut membuang tidak. Case folding menghilangkan nama diri sekaligus penekanan berupa huruf kapital. Normalisasi mengubah bagusss menjadi bagus, sehingga derajatnya hilang. Menghapus tanda baca ikut membuang emoji, padahal pada data berbahasa Indonesia, emoji sering menjadi satu-satunya penanda sarkasme.

Dan yang paling penting untuk menutup bagian ini adalah kesimpulan berikut.

Tidak satu pun dari tujuh langkah pre-processing yang mampu memutuskan sebuah teks itu positif atau negatif. Semuanya hanya menyiapkan bahan, dan sebagian justru membuang bahannya.

Lalu valensinya datang dari mana?

Salah paham keenam: “Lexicon sudah divalidasi, tinggal dipakai”

Jawaban pertama mengenai “Lalu valensinya datang dari mana?” yang paling masuk akal adalah menuliskan kamusnya. Beri skor pada setiap kata, lalu jumlahkan.

Untuk bahasa Indonesia, kamus yang paling banyak dipakai adalah InSet.

Fajri Koto dan Gemala Y. Rahmaningtyas, “InSet Lexicon: Evaluation of a Word List for Indonesian Sentiment Analysis in Microblogs”, IEEE, 21st International Conference on Asian Language Processing (IALP), Singapura, December 2017. Repositori: github.com/fajri91/InSet

Isinya 3.609 kata positif dan 6.607 kata negatif yang berhasil terbaca, dengan bobot dari -5 sampai +5.

Temuan pertama: kata netral mendapat skor

Saya menjumlahkan skor InSet untuk kalimat uji tadi dalam tiga kondisi.

Sekarang perhatikan kata mana saja yang menyumbang skor pada baris pertama.

aku+1 banget+1 pas+3 indah+1 sederhana-2 tidak-5 bagus-2 perut+3 ya+4

Kata pas bernilai +3, perut bernilai +3, ya bernilai +4, dan aku bernilai +1.

Di dalam kalimat kita, tidak satu pun dari keempatnya merupakan kata bersentimen. Kata perut di situ adalah organ tubuh. Kata pas berfungsi sebagai keterangan waktu. Kata ya adalah partikel sapaan. Keempat kata netral tersebut menyumbang total +11.

Selain itu ada indah yang bernilai +1 dan sederhana yang bernilai -2, padahal yang satu nama orang dan yang satu lagi nama warung. Lexicon tidak dapat membedakannya, karena lexicon tidak memiliki slot untuk mencatat sebuah kata merujuk pada apa.

Temuan kedua

Secara logika, sebuah kata seharusnya hanya berada di salah satu daftar. Saya menghitung berapa banyak yang berada di kedua-duanya.

Hasilnya 1.142 kata, atau sekitar sepertiga dari seluruh daftar positif.

Dengan kata lain, lexicon sentimen bahasa Indonesia yang paling banyak dikutip di skripsi dan publikasi ilmiah tidak sepakat dengan dirinya sendiri mengenai apakah bagus itu kata positif atau negatif.

Kasus memuaskan bahkan persis nol, karena +5 dan -5 saling meniadakan.

Ini bukan bug, dan juga bukan alasan untuk membuang InSet. Ini adalah jejak dari sesuatu yang lebih mendasar. Lexicon dibangun dari anotasi manusia, dan manusianya memang tidak sepakat. Ketidaksepakatan itu tidak hilang ketika dibekukan menjadi berkas. Ia hanya berhenti terlihat.

Simpan baik-baik poin ini, karena ia yang akan menutup seluruh tulisan.

Di mana penjumlahan itu mulai gagal

Dua baris memberikan hasil keliru. Namun yang paling menarik justru dua baris pertama yang hasilnya benar.

Kalimat “tidak enak” dan “tidak bagus” sama-sama keluar sebagai Negatif, dan itu memang tepat. Persoalannya, ketepatan itu kebetulan. Penjumlahan tidak tahu apa itu negasi. Ia hanya menjumlahkan angka, dan kebetulan tidak bernilai -5 yang cukup besar untuk mendominasi.

Begitu kata sentimennya bernilai positif, seperti pada “tidak mengecewakan”, kebetulan itu habis.

Salah paham ketujuh: “Kalau kurang akurat, tambahkan aturan”

Jawaban ini masuk akal, dan memang begitulah sejarahnya. Lexicon ditambah tumpukan aturan menghasilkan pendekatan yang disebut rule-based.

Aturannya ada tiga. Kata tidak membalik tanda kata di sebelah kanannya. Kata banget mengalikan nilai kata di sebelah kirinya sebanyak dua. Kata tapi membuang klausa di sebelah kiri, sehingga klausa kanan yang menang.

Ketiga kata itu tidak ikut dijumlahkan, karena mereka bukan nilai melainkan operator. Cara kerjanya, potong dulu jika ada tapi, ambil skor setiap token. Periksa tetangga kiri untuk pembalik. Periksa tetangga kanan untuk pengali. Lalu jumlahkan.

“tidak mengecewakan”
tidak adalah sebuah operator, dilewati
mengecewakan skor −3
tetangga kiri adalah ‘tidak’, sehingga −3 dikali −1 menjadi +3
total = +3

Sekarang kelima kalimat tadi dijalankan ulang dengan aturan tersebut.

Dua baris membaik, tetapi satu baris justru memburuk.

Baris “tidak bagus” adalah temuan terpenting di bagian ini. Sebelum aturan dipasang, hasilnya Negatif dan itu benar. Setelah aturan pembalik dipasang, hasilnya berubah menjadi Positif dan itu salah.

Penyebabnya adalah nilai bagus di InSet yang ternyata -2. Aturan pembalik bekerja persis seperti yang dirancang, yaitu membalik tanda. Persoalannya, tanda yang dibalik itu memang sudah keliru sejak awal.

Aturan tidak menambal lexicon. Aturan justru memperkuat apa pun yang ada di dalam lexicon, termasuk kesalahannya.

Tiga kalimat yang menggagalkan seluruh aturan

Ketiganya bukan contoh aturan yang gagal bekerja, melainkan contoh aturan yang bekerja dengan baik lalu menghasilkan jawaban keliru dengan penuh keyakinan.

Kasus pertama paling instruktif. Kata terlalu bernilai -3 di InSet. Karena posisinya tepat di sebelah kanan tidak, aturan pembalik menyerangnya dan mengubahnya menjadi +3. Sementara itu enak yang bernilai +1 lolos tanpa dibalik sama sekali. Totalnya menjadi +4, yaitu positif kuat, untuk kalimat yang jelas merupakan keluhan.

Kasus kedua bukan soal dua operator yang bertumpuk, melainkan dua operator yang saling memakan. Aturan tapi dijalankan lebih dulu dan menghapus klausa tempat tidak berada.

Sebagai catatan tambahan, kata mahal bernilai +1 di InSet. Barang mahal dinilai positif.

Pola yang muncul

Setiap kali kita menambal, muncul kasus baru yang membutuhkan tambalan berikutnya. Dan tambalan itu dapat merusak kasus yang sebelumnya sudah benar.

Jadi pertanyaannya bukan berapa aturan lagi yang kurang, melainkan apakah aturan bisa ditulis sampai selesai.

Jawabannya tidak. Dan di titik itulah machine learning masuk.

Machine learning, dan ke mana normanya pergi

Kita berhenti menulis aturan. Sebagai gantinya, kita berikan contoh yang sudah dilabeli, lalu membiarkan mesin mencari polanya sendiri.

Namun yang paling penting bukan itu, melainkan apa yang berubah.

Norma tidak hilang. Norma berpindah, dari berkas yang bisa kita buka menjadi bobot yang tidak bisa kita baca.

Rantainya terdiri dari empat langkah, yaitu norma, guideline, annotator yang memberi label, pelatihan model, dan akhirnya bobot.

Annotator tidak hilang dari proses ini. Posisinya hanya bergeser ke tahap yang lebih awal. Ia tidak lagi menilai teks satu per satu ketika model dipakai, melainkan menilai ribuan teks lebih dulu untuk dijadikan data pelatihan.

Dari situ rantainya menjadi jelas. Guideline menentukan bagaimana annotator melabeli, label menentukan apa yang dipelajari model, dan hasil pelajaran itulah yang tersimpan sebagai bobot. Artinya guideline yang ditulis di awal proyek ikut menentukan isi model yang jadi di akhir, meskipun tidak ada satu pun kalimatnya yang tersisa di sana.

Embedding, LSTM, dan Transformer

Pola yang sama terus berlanjut. Setiap tahap lahir dari kegagalan tahap sebelumnya.

Ada satu catatan kejujuran mengenai LSTM. Yang dipakai orang untuk klasifikasi teks hampir selalu BiLSTM, yaitu dua LSTM yang membaca dari kiri dan dari kanan. Jadi konteks kanan sebenarnya tidak benar-benar hilang. Masalah aslinya bukan arah, melainkan jarak. Konteks disimpan di dalam satu vektor berukuran tetap yang diperbarui token demi token, sehingga semakin jauh jaraknya semakin luntur informasinya.

Transformer menawarkan dua hal. Pertama, jarak tidak lagi berpengaruh, karena kata pertama dan kata kelima puluh terhubung langsung dalam satu langkah, bukan empat puluh sembilan langkah. Kedua, prosesnya dapat diparalelkan, dan itulah yang membuat pretraining di miliaran kata menjadi mungkin.

IndoBERT, dan satu ironi yang menutup lingkaran

IndoBERT dilatih khusus untuk bahasa Indonesia, sudah memahami morfologi, dan tinggal di-fine-tune dengan data yang jauh lebih sedikit.

Di sinilah muncul ironi yang layak disebut. Stemming dan lemmatization justru tidak diperlukan. Subword tokenization sudah menangkap bahwa mengecewakan berkerabat dengan kecewa. Apa yang wajib di lexicon ternyata merusak di BERT.

Ini bukan kontradiksi, melainkan pola yang sudah muncul tiga kali di dalam tulisan ini. Keputusan pre-processing bergantung sepenuhnya pada metode yang akan kita gunakan.

Ada dua catatan praktis yang perlu disampaikan.

Pertama, IndoBERT bersifat uncased. Tokenizer-nya melakukan lowercase secara otomatis. Artinya argumen mengenai kapital dan NER tadi tidak berlaku di pipeline IndoBERT, bukan karena diabaikan, melainkan karena modelnya memang tidak pernah dilatih dengan huruf kapital. Inilah yang menjelaskan hasil pengujian NER yang sudah kita lihat sebelumnya.

Kedua, stopword sebaiknya jangan dibuang. Bagian ini yang sering keliru. BERT dilatih dengan kalimat utuh, sehingga menghapus stopword akan menghasilkan masukan yang tidak menyerupai data pretraining-nya. Lebih spesifik lagi, kata tidak, tapi, dan bukan justru merupakan kata yang dipakai attention untuk menghitung konteks. Membuangnya berarti membuang bahan mentah dari mekanisme yang menjadi alasan orang memilih BERT sejak awal.

Jadi stopword removal keliru di kedua metode. Di lexicon, negasinya hilang. Di BERT, masukannya keluar dari distribusi. Tidak ada satu pun metode sentiment analysis di mana membuang kata tidak merupakan tindakan yang benar.

Salah paham kedelapan: “Akurasi tinggi berarti modelnya bagus”

Untuk mengukur akurasi, kita perlu jawaban yang dianggap benar sebagai pembanding. Jawaban itu tidak turun dari langit. Ia dibuat oleh annotator, yaitu orang yang melabeli data pelatihan satu per satu.

Jadi ketika sebuah model disebut berakurasi 85 persen, artinya bukan model itu benar 85 persen. Artinya model itu sepakat dengan annotator pada 85 persen kasus.

Perbedaan ini terdengar sepele sampai Anda menanyakan satu hal berikutnya. Bagaimana kalau annotator-nya sendiri tidak sepakat?

Ketika manusianya sendiri berbeda pendapat

Bayangkan dua orang diminta melabeli seratus review yang sama. Ternyata pada dua puluh review, keduanya memberi label berbeda. Bukan karena salah satunya ceroboh, melainkan karena review-review itu memang bisa dibaca dua arah, persis seperti kalimat soto di awal tulisan ini.

Dalam situasi seperti itu, tidak ada model yang bisa benar lebih dari delapan puluh persen. Bukan karena modelnya kurang canggih, melainkan karena dua puluh persen sisanya memang tidak punya jawaban tunggal.

Menambah layer tidak akan menolong. Mengganti arsitektur juga tidak. Anda sedang mengejar target yang tidak ada.

Cara mengukurnya

Ada angka untuk hal ini, namanya tingkat kesepakatan antar-annotator. Cara menghitungnya sederhana, yaitu minta dua orang melabeli sebagian data yang sama, lalu hitung berapa persen label mereka cocok.

Ukuran yang paling sering dipakai untuk ini disebut Cohen’s kappa. Bedanya dengan persentase biasa, kappa sudah memperhitungkan kesepakatan yang terjadi karena kebetulan. Kalau dua orang asal menebak positif dan negatif, mereka akan cocok sekitar lima puluh persen tanpa berpikir sama sekali. Kappa mengoreksi hal itu, sehingga nilainya nol berarti tidak lebih baik daripada menebak.

Yang perlu Anda ingat cukup satu hal. Angka ini diperiksa sebelum melatih model, bukan sesudahnya.

Kombinasi yang mencurigakan

Kalau kesepakatan antar-annotator rendah tetapi akurasi model tinggi, itu bukan kabar baik.

Kemungkinan besar model Anda sedang menghafal kebiasaan satu orang annotator tertentu, bukan mempelajari pola sentimen yang sesungguhnya. Angkanya bagus di atas kertas, tetapi tidak akan bertahan begitu bertemu data baru.

Mengapa model sering ambruk di data lain

Hal yang sama menjelaskan kejadian yang sering dialami banyak orang. Sebuah model dilatih dengan review produk Tokopedia, hasilnya bagus, lalu dipakai untuk komentar YouTube dan tiba-tiba akurasinya jatuh.

Di literatur, gejala ini disebut domain dependence. Namun penyebabnya sebenarnya lebih spesifik daripada sekadar berganti domain.

Model itu dilatih untuk meniru cara pembeli menilai produk. Ketika Anda memakainya pada komentar YouTube, Anda meminta model itu menilai sesuatu yang standarnya berbeda. Kata “sadis” di kolom komentar game bisa berarti pujian, sedangkan di review produk berarti keluhan.

Jadi bukan modelnya yang kurang pintar. Alat ukurnya sedang dipakai di tempat yang bukan asalnya.

Pemeriksaan yang bisa Anda lakukan

Cara memeriksanya sederhana dan sama sekali tidak memerlukan model. Ambil lima puluh data, minta dua orang melabelinya secara terpisah, lalu bandingkan hasilnya. Kalau mereka sering berbeda, yang perlu diperbaiki adalah guideline-nya, bukan modelnya.

Dan itu pekerjaan yang jauh lebih murah daripada melatih ulang model tiga kali sambil menebak-nebak apa yang salah.

Jadi, mengapa banyak orang salah paham?

Delapan salah paham tadi tampak tersebar. Sebagian menyangkut istilah, sebagian menyangkut cara kerja alat, dan sebagian lagi menyangkut cara membaca angka. Namun sesungguhnya semuanya berasal dari satu sebab yang sama.

Ingat kembali dua hal yang harus ditetapkan sebelum data dibaca, yaitu norma dan annotator. Norma adalah pernyataan tentang apa yang dianggap baik dan buruk, misalnya “makanan yang baik itu yang enak” atau “makanan yang baik itu yang tidak merusak badan”. Annotator adalah orang yang menerapkan norma tersebut ketika melabeli data.

Keduanya selalu ada di dalam setiap sistem sentiment analysis. Yang berubah dari satu metode ke metode berikutnya hanyalah seberapa mudah keduanya dilihat.

Dan setiap kali alatnya menjadi lebih canggih, keduanya menjadi lebih tersembunyi.

Empat tahap, semakin lama semakin gelap

Pada tahap lexicon, normanya masih berupa berkas biasa. Kata bagus bernilai +2 di satu berkas dan −4 di berkas lain. Anda bisa membuka berkas itu, membacanya baris demi baris, dan tidak setuju dengan isinya. Ketidaksepakatan manusia yang membuatnya masih terlihat telanjang di sana.

Pada tahap rule-based, normanya masih bisa dibaca, tetapi sekarang bercampur dengan aturan-aturan yang saling memengaruhi. Ketika sebuah kalimat keluar sebagai positif, Anda tidak lagi bisa langsung menunjuk penyebabnya. Kita sudah melihat contohnya, ketika aturan tapi menghapus klausa tempat kata tidak berada.

Pada tahap machine learning, normanya sudah berubah wujud menjadi angka-angka di dalam model, yang biasa disebut bobot. Jumlahnya jutaan, dan tidak ada satu pun yang bisa dibaca sebagai kalimat. Tidak ada berkas yang bisa dibuka lagi. Yang tersisa hanyalah satu angka akurasi di ujung proses.

Pada tahap pretrained model seperti IndoBERT, normanya bahkan bukan lagi milik Anda. Norma itu sudah ditetapkan oleh annotator yang membuat dataset-nya, mengikuti guideline yang tidak pernah Anda baca, dan disusun untuk pembaca yang mungkin berbeda dari pembaca Anda.

Empat baris kode, dan enam keputusan sudah diambil untuk Anda oleh orang yang tidak Anda kenal.

Mengapa hal ini luput dari perhatian

Salah pahamnya bukan karena orang malas atau tidak teliti. Salah pahamnya justru karena alatnya bekerja terlalu mulus.

Tidak ada pesan error. Tidak ada peringatan. Perintah pipeline("sentiment-analysis") berjalan dengan lancar, angkanya keluar dalam hitungan detik, dan angkanya tampak wajar. Tidak ada apa pun yang memberi tahu Anda bahwa ada enam keputusan yang sudah diambil di belakang layar.

Bandingkan dengan kesalahan pemrograman biasa. Kalau kode Anda salah ketik, Python akan berhenti dan memberi tahu di baris berapa. Kalau guideline Anda salah, tidak ada yang berhenti. Semuanya tetap berjalan, dan hasilnya tetap keluar.

Ditambah lagi, namanya sendiri sudah menyesatkan sejak awal, seperti yang kita telusuri di bagian pertama. Kata “analysis” berarti menguraikan sesuatu menjadi bagian-bagiannya, padahal yang sebenarnya terjadi adalah kebalikannya, yaitu merangkai banyak hal menjadi satu label. Kata “sentiment” dibaca kebanyakan orang sebagai “emosi”, padahal keduanya berbeda. Dan kata “ekstraksi” mengesankan ada sesuatu yang tinggal diambil dari dalam teks, padahal yang dicari itu tidak pernah ada di sana.

Enam komponen di bagian awal tadi bukan teori. Keenamnya yang menentukan apakah angka akurasi Anda berarti sesuatu atau tidak.

Dan ketika nanti Anda memuat IndoBERT dalam empat baris kode, ingatlah bahwa Anda tidak sedang menghindari keenam komponen itu. Anda sedang mewarisi keputusan orang lain mengenai keenamnya.

Silakan periksa sendiri

Semua angka di dalam tulisan ini dapat Anda jalankan ulang. Notebook-nya tersedia di sini.

Google Colab: “Mengapa Banyak Orang Salah Paham tentang Sentiment Analysis”

Isinya sembilan sel dan memakan waktu sekitar lima menit. Di dalamnya termasuk pengujian kata beruang, penghitungan 1.142 kata yang tumpang tindih di InSet, tabel rule-based beserta baris yang memburuk, dan pemeriksaan tokenizer yang membuktikan bahwa model NER-nya memang bersifat uncased.

Jika ada yang meleset dari apa yang saya tulis, saya ingin mengetahuinya.

Seluruh perangkat di atas berlisensi terbuka dan boleh dipakai untuk keperluan riset maupun publikasi, selama sumbernya disebutkan.

Bacaan lanjutan

Argumen inti tulisan ini, yaitu bahwa ketidaksepakatan annotator merupakan sinyal dan bukan noise, memiliki literaturnya sendiri yang jauh lebih tua dari saya.

• Lora Aroyo dan Chris Welty, “Truth Is a Lie: Crowd Truth and the Seven Myths of Human Annotation”, AI Magazine, 2015
• Barbara Plank, “The ‘Problem’ of Human Label Variation: On Ground Truth in Data, Modeling and Evaluation”, EMNLP, 2022
• Adam Smith, The Theory of Moral Sentiments, 1759, untuk asal-usul konsep impartial spectator

Ditulis sebagai pendamping materi Data Science 2025/2026, UKM Amikom Computer Club.

Mengapa Banyak Orang Salah Paham tentang Sentiment Analysis? was originally published in Amikom Computer Club on Medium, where people are continuing the conversation by highlighting and responding to this story.

Halo Sobat IoT Application/Dashboard Simulasi

Selamat datang kembali di Class Divisi Internet of Things AMCC.

Setelah sebelumnya kita belajar mengenai Pengaplikasian Protokol BLE(Bluetooth Low Energy) pada pertemuan kali ini kita akan masuk ke materi yang tidak kalah menarik, yaitu komunikasi IoT jarak jauh menggunakan LoRa dan LoRaWAN.

Mungkin teman-teman pernah bertanya:

“Kalau sensor dipasang di sawah, kebun, gunung, tambak, atau tempat yang tidak ada Wi-Fi, datanya dikirim pakai apa?”

Nah, salah satu jawabannya adalah LoRa.

LoRa sering digunakan pada sistem IoT yang membutuhkan komunikasi jarak jauh, hemat daya, dan tidak harus mengirim data berukuran besar. Contohnya seperti monitoring suhu, kelembapan tanah, ketinggian air, kualitas udara, hingga sistem smart farming.

Pada materi ini, kita akan belajar konsep dasarnya dulu melalui simulasi Wokwi, lalu memahami bagaimana alur data dari sensor bisa dikirim menggunakan konsep LoRa dan diteruskan melalui arsitektur LoRaWAN.

Apa yang Akan Kita Pelajari?

Pada pertemuan ini, teman-teman akan mempelajari beberapa hal berikut:

1. Konsep dasar LPWAN.
2. Perbedaan LoRa dan LoRaWAN.
3. Cara kerja komunikasi sensor jarak jauh.
4. Fungsi gateway pada LoRaWAN.
5. Simulasi pengiriman data sensor menggunakan Wokwi.
6. Contoh penerapan LoRa pada dunia nyata.

Apa itu LPWAN?

Sebelum masuk ke LoRa, kita perlu mengenal dulu istilah LPWAN.

LPWAN adalah singkatan dari Low Power Wide Area Network.

Kalau dijelaskan secara sederhana, LPWAN adalah jenis jaringan komunikasi yang dirancang untuk perangkat IoT agar bisa:

• mengirim data dari jarak jauh,
• menggunakan daya listrik yang rendah,
• cocok untuk perangkat berbasis baterai,
• dan mengirim data kecil secara berkala.

Jadi, LPWAN ini bukan dibuat untuk streaming video, download file besar, atau komunikasi cepat seperti Wi-Fi. LPWAN lebih cocok untuk data kecil seperti:

Suhu: 28°C
Kelembapan: 70%
Status air: Aman
Gas: Normal

Karena datanya kecil, perangkat bisa lebih hemat energi dan mampu bekerja dalam waktu lama.

Apa itu LoRa?

LoRa adalah teknologi komunikasi radio jarak jauh yang banyak digunakan pada perangkat IoT.

LoRa memungkinkan perangkat seperti ESP32, Arduino, atau sensor node untuk mengirim data ke perangkat penerima lain dengan jarak yang lebih jauh dibanding komunikasi Wi-Fi biasa.

Contohnya, sebuah sensor suhu di area pertanian bisa mengirim data ke gateway yang berada di lokasi lain tanpa harus terhubung ke Wi-Fi.

Secara sederhana, alurnya seperti ini:

Sensor
↓
Microcontroller
↓
Modul LoRa
↓
Penerima LoRa / Gateway

LoRa cocok digunakan ketika perangkat berada di lokasi yang:

• jauh dari router Wi-Fi,
• minim jaringan internet,
• membutuhkan konsumsi daya rendah,
• dan hanya mengirim data sensor secara berkala.

Apa itu LoRaWAN?

Kalau LoRa adalah teknologi komunikasi radionya, maka LoRaWAN adalah protokol atau aturan jaringan yang mengatur bagaimana perangkat LoRa berkomunikasi dalam sistem IoT yang lebih besar.

LoRaWAN biasanya memiliki beberapa bagian utama:

End Device
↓
Gateway
↓
Network Server
↓
Application Server / Dashboard

Penjelasannya seperti ini:

• End Device adalah perangkat sensor, misalnya ESP32 + DHT22 + modul LoRa.
• Gateway adalah perangkat penerima yang menangkap sinyal LoRa dari end device.
• Network Server bertugas mengatur data yang masuk, validasi perangkat, dan routing data.
• Application Server adalah tempat data ditampilkan, misalnya dashboard monitoring.

Jadi, LoRaWAN membuat komunikasi LoRa menjadi lebih terstruktur dan cocok digunakan untuk banyak perangkat IoT sekaligus.

Perbedaan LoRa dan LoRaWAN

Agar lebih mudah dipahami, kita lihat perbedaannya dalam tabel berikut:

BagianPenjelasanLoRaTeknologi komunikasi radio jarak jauhLoRaWANProtokol jaringan yang menggunakan LoRaLoRaBisa digunakan point-to-point antar perangkatLoRaWANMenggunakan gateway dan serverLoRaCocok untuk eksperimen sederhanaLoRaWANCocok untuk sistem IoT skala besar

Contoh sederhananya:

Kalau LoRa itu seperti bahasa komunikasi radionya, maka LoRaWAN adalah aturan lengkap bagaimana pesan itu dikirim, diterima, diproses, dan diteruskan ke aplikasi.

Kenapa Kita Belajar LoRa?

Karena tidak semua perangkat IoT bisa dipasang di tempat yang dekat dengan Wi-Fi.

Bayangkan kita ingin membuat sistem monitoring di area seperti:

• sawah,
• tambak,
• perkebunan,
• sungai,
• hutan,
• gudang besar,
• atau daerah terpencil.

Kalau menggunakan Wi-Fi, jangkauannya terbatas. Kalau menggunakan jaringan seluler, biaya dan konsumsi dayanya bisa lebih besar.

Di sinilah LoRa menjadi solusi yang menarik.

LoRa cocok digunakan untuk sistem yang membutuhkan pengiriman data kecil, jarak jauh, dan hemat daya.

Studi Kasus: Monitoring Suhu dan Kelembapan Area Pertanian

Pada praktik kali ini, kita akan membuat simulasi sederhana dengan studi kasus:

Monitoring suhu dan kelembapan pada area pertanian menggunakan sensor virtual DHT22.

Data dari sensor akan dibaca oleh ESP32, kemudian dikemas menjadi payload seperti data yang dikirim oleh node LoRa.

Setelah itu, data akan divisualisasikan melalui Serial Monitor sebagai alur:

Sensor DHT22
↓
ESP32 sebagai End Device
↓
Simulasi LoRa Uplink
↓
Gateway LoRaWAN Simulasi
↓
Network Server Simulasi
↓
Application/Dashboard Simulasi

Karena kita menggunakan Wokwi, maka komunikasi LoRaWAN tidak benar-benar menggunakan gateway fisik. Namun, alur prosesnya akan kita simulasikan agar teman-teman memahami cara kerja konsepnya.

Persiapan Session

Sebelum mulai praktik, siapkan beberapa hal berikut:

1. Browser, disarankan Google Chrome atau Microsoft Edge.
2. Akun Wokwi.
3. Koneksi internet.
4. Pemahaman dasar ESP32.
5. Pemahaman dasar sensor DHT22.
6. Arduino IDE, jika ingin mencoba dengan alat asli.

Untuk simulasi Wokwi, komponen yang digunakan adalah:

• ESP32,
• DHT22,
• LED indikator,
• Serial Monitor.

Untuk alat asli, komponen yang dapat digunakan adalah:

• 2 ESP32,
• 2 modul LoRa SX1276/SX1278/RFM95,
• sensor DHT22,
• breadboard,
• kabel jumper,
• antena LoRa,
• laptop.

Setup Sederhana Wokwi

Langkah pertama, buka Wokwi lalu buat project baru menggunakan board ESP32.

Setelah itu, tambahkan sensor DHT22 sebagai sensor suhu dan kelembapan.

Pada simulasi ini, DHT22 akan digunakan sebagai sumber data. Data yang dibaca akan dibuat seolah-olah dikirim melalui LoRa menuju gateway.

Hubungan pin yang digunakan:

KomponenPin KomponenPin ESP32DHT22VCC3V3DHT22GNDGNDDHT22DATAGPIO 15LED TXAnodaGPIO 2LED GatewayAnodaGPIO 4LED ServerAnodaGPIO 5

Fungsi LED:

• LED TX menyala saat data dikirim oleh end device.
• LED Gateway menyala saat data diterima gateway simulasi.
• LED Server menyala saat data masuk ke server simulasi.

Code Simulasi Wokwi

Berikut adalah kode program yang digunakan.

Kode ini membaca data suhu dan kelembapan dari sensor DHT22, lalu menampilkan simulasi alur pengiriman data dari end device menuju gateway dan server.

#include "DHTesp.h"

#define DHT_PIN 15
#define LED_TX 2
#define LED_GATEWAY 4
#define LED_SERVER 5

DHTesp dhtSensor;

int packetId = 1;

void setup() {
  Serial.begin(115200);

  dhtSensor.setup(DHT_PIN, DHTesp::DHT22);

  pinMode(LED_TX, OUTPUT);
  pinMode(LED_GATEWAY, OUTPUT);
  pinMode(LED_SERVER, OUTPUT);

  digitalWrite(LED_TX, LOW);
  digitalWrite(LED_GATEWAY, LOW);
  digitalWrite(LED_SERVER, LOW);

  Serial.println("======================================");
  Serial.println(" Simulasi LoRa dan LoRaWAN - AMCC IoT ");
  Serial.println("======================================");
  Serial.println("End Device siap membaca data sensor...");
  Serial.println();
}

void loop() {
  TempAndHumidity data = dhtSensor.getTempAndHumidity();

  if (isnan(data.temperature) || isnan(data.humidity)) {
    Serial.println("Gagal membaca sensor DHT22!");
    delay(3000);
    return;
  }

  String status;

  if (data.temperature >= 35) {
    status = "PANAS";
  } else if (data.temperature <= 20) {
    status = "DINGIN";
  } else {
    status = "NORMAL";
  }

  String payload = "{";
  payload += "\"packet_id\":" + String(packetId) + ",";
  payload += "\"temperature\":" + String(data.temperature, 2) + ",";
  payload += "\"humidity\":" + String(data.humidity, 1) + ",";
  payload += "\"status\":\"" + status + "\"";
  payload += "}";

  Serial.println("--------------------------------------------------");
  Serial.println("END DEVICE");
  Serial.println("Membaca data dari sensor DHT22...");
  Serial.print("Suhu       : ");
  Serial.print(data.temperature, 2);
  Serial.println(" °C");

  Serial.print("Kelembapan : ");
  Serial.print(data.humidity, 1);
  Serial.println(" %");

  Serial.print("Status     : ");
  Serial.println(status);

  Serial.println();
  Serial.println("Membuat payload data sensor...");
  Serial.println(payload);

  digitalWrite(LED_TX, HIGH);
  delay(700);
  digitalWrite(LED_TX, LOW);

  Serial.println();
  Serial.println("LoRa Uplink");
  Serial.println("Paket data dikirim melalui simulasi komunikasi radio jarak jauh...");
  delay(1000);

  digitalWrite(LED_GATEWAY, HIGH);
  delay(700);
  digitalWrite(LED_GATEWAY, LOW);

  Serial.println();
  Serial.println("LoRaWAN Gateway");
  Serial.println("Gateway menerima paket dari end device.");
  Serial.println("Gateway meneruskan data ke network server melalui koneksi internet.");
  delay(1000);

  digitalWrite(LED_SERVER, HIGH);
  delay(700);
  digitalWrite(LED_SERVER, LOW);

  Serial.println();
  Serial.println("Network Server / Application Server");
  Serial.println("Data berhasil diproses dan siap ditampilkan pada dashboard.");
  Serial.println("Data akhir:");
  Serial.println(payload);

  Serial.println("--------------------------------------------------");
  Serial.println();

  packetId++;

  delay(7000);
}

File Library Wokwi

Agar kode berjalan, tambahkan file libraries.txt pada project Wokwi.

Isi file tersebut dengan:

DHT sensor library for ESPx

Library ini digunakan agar ESP32 dapat membaca sensor DHT22 dengan lebih mudah.

Alur Kerja Program

Program berjalan dengan alur berikut:

1. ESP32 membaca data suhu dan kelembapan dari DHT22.
2. Data sensor dikemas menjadi format JSON.
3. ESP32 bertindak sebagai end device.
4. Program menampilkan simulasi proses pengiriman data melalui LoRa uplink.
5. Gateway simulasi menerima paket data.
6. Network server simulasi memproses data.
7. Data akhir ditampilkan pada Serial Monitor.

Contoh output pada Serial Monitor:

END DEVICE
Membaca data dari sensor DHT22...
Suhu       : 28.00 °C
Kelembapan : 70.0 %
Status     : NORMAL

Membuat payload data sensor...
{"packet_id":1,"temperature":28.00,"humidity":70.0,"status":"NORMAL"}

LoRa Uplink
Paket data dikirim melalui simulasi komunikasi radio jarak jauh...

LoRaWAN Gateway
Gateway menerima paket dari end device.
Gateway meneruskan data ke network server melalui koneksi internet.

Network Server / Application Server
Data berhasil diproses dan siap ditampilkan pada dashboard.

Penjelasan Singkat Kode

Pada bagian awal program, kita memanggil library DHT:

#include "DHTesp.h"

Library ini digunakan untuk membaca sensor DHT22.

Kemudian kita mendefinisikan pin yang digunakan:

#define DHT_PIN 15
#define LED_TX 2
#define LED_GATEWAY 4
#define LED_SERVER 5

Pin DHT_PIN digunakan untuk sensor DHT22, sedangkan tiga LED digunakan sebagai indikator proses pengiriman data.

Pada bagian loop(), ESP32 akan membaca suhu dan kelembapan:

TempAndHumidity data = dhtSensor.getTempAndHumidity();

Setelah itu, data sensor dibuat menjadi payload JSON:

String payload = "{";
payload += "\"packet_id\":" + String(packetId) + ",";
payload += "\"temperature\":" + String(data.temperature, 2) + ",";
payload += "\"humidity\":" + String(data.humidity, 1) + ",";
payload += "\"status\":\"" + status + "\"";
payload += "}";

Payload ini menggambarkan data yang dikirim oleh perangkat IoT.

Kenapa Menggunakan Format JSON?

JSON digunakan karena formatnya ringan dan mudah dibaca oleh manusia maupun aplikasi.

Contohnya:

{
  "packet_id": 1,
  "temperature": 28.00,
  "humidity": 70.0,
  "status": "NORMAL"
}

Format seperti ini sangat umum digunakan pada sistem IoT karena mudah dikirim ke server, database, dashboard, maupun platform cloud.

Mengenal Gateway pada LoRaWAN

Pada sistem LoRaWAN, gateway memiliki peran yang sangat penting.

Gateway bertugas menerima data dari end device yang dikirim melalui LoRa, lalu meneruskannya ke network server melalui koneksi internet.

Dengan kata lain, gateway adalah jembatan antara perangkat sensor dan server.

Contoh alurnya:

Sensor DHT22
↓
ESP32 + Modul LoRa
↓
LoRaWAN Gateway
↓
Network Server
↓
Dashboard Monitoring

Tanpa gateway, data dari perangkat LoRa tidak bisa langsung masuk ke server LoRaWAN.

Contoh Implementasi Alat Asli

Jika ingin mencoba menggunakan alat asli, kita bisa menggunakan dua ESP32 dan dua modul LoRa.

Satu ESP32 bertugas sebagai sender, sedangkan ESP32 lainnya bertugas sebagai receiver.

Alurnya seperti ini:

ESP32 Sender + DHT22 + LoRa
↓
Komunikasi Radio LoRa
↓
ESP32 Receiver + LoRa
↓
Serial Monitor / Dashboard

Untuk koneksi modul LoRa SX1278 ke ESP32, contoh pin yang dapat digunakan:

Modul LoRaESP32VCC3.3VGNDGNDSCKGPIO 18MISOGPIO 19MOSIGPIO 23NSS/CSGPIO 5RSTGPIO 14DIO0GPIO 26

Catatan penting: modul LoRa biasanya menggunakan tegangan 3.3V, jadi jangan langsung diberi 5V agar modul tidak rusak.

Perbedaan Praktik Wokwi dan Alat Asli

Pada Wokwi, kita fokus memahami alur komunikasi dan proses data.

Sedangkan pada alat asli, kita benar-benar menggunakan modul LoRa untuk mengirim data melalui sinyal radio.

Perbedaannya seperti berikut:

BagianSimulasi WokwiAlat AsliSensorVirtualFisikLoRaDisimulasikan melalui alur programMenggunakan modul LoRaGatewaySimulasi konsepGateway fisikJarakTidak diuji nyataBisa diuji di lapanganTujuanBelajar konsepImplementasi nyata

Jadi, simulasi Wokwi cocok untuk memahami konsep sebelum mencoba perangkat asli.

Contoh Penerapan LoRa di Dunia Nyata

LoRa dapat digunakan dalam berbagai bidang, seperti:

1. Smart Farming
   Untuk monitoring suhu, kelembapan tanah, dan kondisi lingkungan pertanian.
2. Monitoring Banjir
   Untuk membaca ketinggian air sungai dari lokasi yang jauh.
3. Smart City
   Untuk monitoring lampu jalan, tempat sampah pintar, dan kualitas udara.
4. Peternakan
   Untuk melacak lokasi hewan atau memantau kondisi kandang.
5. Industri
   Untuk monitoring mesin, tangki, atau area produksi yang luas.

Evaluasi

Setelah menyelesaikan praktik ini, coba jawab beberapa pertanyaan berikut:

1. Apa yang dimaksud dengan LPWAN?
2. Apa perbedaan LoRa dan LoRaWAN?
3. Mengapa LoRa cocok digunakan untuk komunikasi IoT jarak jauh?
4. Apa fungsi gateway pada LoRaWAN?
5. Mengapa data yang dikirim menggunakan LoRa biasanya berukuran kecil?
6. Sebutkan contoh penerapan LoRa di kehidupan nyata.
7. Apa perbedaan simulasi Wokwi dan implementasi alat asli?

Kesimpulan

Pada materi ini, kita sudah belajar mengenai konsep dasar komunikasi IoT jarak jauh menggunakan LoRa dan LoRaWAN.

LoRa digunakan sebagai teknologi komunikasi radio jarak jauh, sedangkan LoRaWAN digunakan sebagai protokol jaringan yang mengatur komunikasi dari end device, gateway, network server, hingga application server.

Melalui simulasi Wokwi, kita memahami bagaimana data dari sensor dapat dibaca, dikemas menjadi payload, lalu dikirim melalui alur komunikasi jarak jauh secara konseptual.

Walaupun simulasi ini belum menggunakan gateway LoRaWAN asli, konsep yang dipelajari sudah cukup untuk memahami dasar komunikasi IoT jarak jauh sebelum mencoba implementasi menggunakan alat fisik.

Yey, akhirnya teman-teman sudah berhasil memahami dasar pengiriman data IoT jarak jauh menggunakan LoRa dan LoRaWAN.

Sampai jumpa di materi IoT selanjutnya.

link wokwi

Lora - Wokwi ESP32, STM32, Arduino Simulator

ini adalah simulasi lora

From Sensor to Long Range: Pengiriman Data IoT Jarak Jauh Menggunakan LoRa dan LoRaWAN dengan… was originally published in Amikom Computer Club on Medium, where people are continuing the conversation by highlighting and responding to this story.

Halo Sobat AMCC!

Gimana nih kabarnya? Akhirnya kita sudah sampai di penghujung pelatihan Mobile Programming. Setelah beberapa pertemuan sebelumnya kita belajar membuat tampilan, menghubungkan aplikasi dengan Firebase, melakukan authentication, sampai mengelola data realtime menggunakan Cloud Firestore, sekarang waktunya kita melakukan tahap finishing.

Pada pertemuan terakhir ini, kita tidak lagi terlalu banyak menambahkan fitur baru. Fokus kita adalah merapikan identitas aplikasi, mengganti launcher icon, lalu membuat file APK agar aplikasi bisa diinstal dan diuji langsung di perangkat Android.

Pada pelatihan kali ini, kita akan membahas:

1. Persiapan Project
2. Android Manifest Edit
4. Package Implementation: Flutter Launcher Icons
5. Mengatur Versioning Aplikasi
6. Build APK
8. Install APK ke Device
9. Troubleshooting

1. Persiapan Project

Sebelum masuk ke tahap finishing, pastikan project dari pertemuan sebelumnya sudah berjalan dengan baik.

Buka terminal pada folder project Flutter, lalu jalankan:

flutter pub get
flutter run

Pastikan aplikasi masih bisa dibuka, login berjalan, dan data dari Firestore masih tampil dengan benar.

Jika terdapat error setelah beberapa kali perubahan project, teman-teman bisa menjalankan:

flutter clean
flutter pub get
flutter run

Tahap ini penting karena sebelum aplikasi dibuild menjadi APK, kita harus memastikan project tidak memiliki error dasar.

2. Android Manifest Edit

Android Manifest adalah file konfigurasi utama pada aplikasi Android. File ini berisi informasi penting seperti nama aplikasi, permission, activity utama, icon aplikasi, dan beberapa konfigurasi lain yang dibutuhkan Android.

Pada project Flutter, file Android Manifest dapat ditemukan di:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <queries>
        <intent>
            <action android:name="android.intent.action.SENDTO" />
            <data android:scheme="mailto" />
        </intent>
        <intent>
            <action android:name="android.intent.action.DIAL" />
            <data android:scheme="tel" />
        </intent>
    </queries>
    <application
        android:label="Edutrack"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:taskAffinity=""
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
    <!-- Required to query activities that can process text, see:
         https://developer.android.com/training/package-visibility and
         https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.

         In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
    <queries>
        <intent>
            <action android:name="android.intent.action.PROCESS_TEXT"/>
            <data android:mimeType="text/plain"/>
        </intent>
    </queries>
</manifest>

Ada beberapa bagian yang perlu kita pahami:

android:label

Bagian ini digunakan untuk menentukan nama aplikasi yang muncul di perangkat Android.

Contoh:

android:label=”Edutrack”

Jika nama aplikasi masih menggunakan nama project default, ubah menjadi nama aplikasi final.

android:icon

Bagian ini digunakan untuk menentukan icon aplikasi.

android:icon=”@mipmap/ic_launcher”

Nantinya icon ini akan diganti secara otomatis menggunakan package flutter_launcher_icons.

4. Package Implementation: Flutter Launcher Icons

Secara default, aplikasi Flutter menggunakan icon bawaan Flutter. Agar aplikasi terlihat lebih profesional dan sesuai dengan identitas aplikasi yang dibuat, kita akan mengganti launcher icon menggunakan package flutter_launcher_icons.

Package ini membantu kita membuat icon aplikasi Android secara otomatis ke berbagai ukuran yang dibutuhkan, sehingga kita tidak perlu membuat ukuran icon satu per satu secara manual.

Pada project ini, kita sudah menyiapkan file logo aplikasi dengan nama:

assets/edutrack-logo.png

File tersebut nantinya akan digunakan sebagai sumber utama untuk membuat launcher icon aplikasi.

Disarankan file logo menggunakan format PNG dengan ukuran yang cukup besar, misalnya 1024 x 1024 px, agar hasil icon tetap terlihat tajam ketika di generate ke berbagai ukuran Android.

Menambahkan Package

Untuk menambahkan package flutter_launcher_icons, buka terminal pada folder project Flutter, lalu jalankan command berikut:

flutter pub add flutter_launcher_icons

Command tersebut akan menambahkan package flutter_launcher_icons ke bagian dev_dependencies secara otomatis di file pubspec.yaml.

Setelah command berhasil dijalankan, kurang lebih bagian dev_dependencies akan menjadi seperti berikut:

Versi package dapat menyesuaikan dengan versi terbaru yang terinstall pada project masing-masing.

Setelah package berhasil ditambahkan, buka file pubspec.yaml, lalu tambahkan konfigurasi berikut di bagian bawah file:

flutter_launcher_icons:
  android: true
  ios: false
  image_path: "assets/edutrack-logo.png"
  min_sdk_android: 21

Penjelasan singkat dari konfigurasi tersebut:

android: true — Artinya launcher icon akan digenerate untuk platform Android.

ios: false — Artinya launcher icon tidak digenerate untuk iOS karena pada pelatihan ini kita hanya fokus pada Android.

image_path: “assets/edutrack-logo.png” — Bagian ini menunjukkan lokasi file logo yang akan digunakan sebagai icon aplikasi.

min_sdk_android: 21 — Bagian ini menentukan minimum SDK Android yang digunakan untuk proses generate icon.

Pastikan penulisan indentasi pada file pubspec.yaml sudah benar. Pada file YAML, kesalahan spasi atau posisi baris bisa menyebabkan konfigurasi tidak terbaca.

Generate Launcher Icon

Setelah konfigurasi selesai, jalankan command berikut:

flutter pub get

Kemudian generate launcher icon dengan command:

dart run flutter_launcher_icons

Jika proses berhasil, package akan otomatis mengganti icon aplikasi Android berdasarkan file: assets/edutrack-logo.png

Setelah itu, jalankan kembali aplikasi:

flutter run

Jika icon belum berubah di emulator atau HP, coba uninstall aplikasi lama terlebih dahulu, lalu jalankan kembali project Flutter. Hal ini biasanya terjadi karena perangkat masih menyimpan cache icon dari aplikasi sebelumnya.

5. Mengatur Versioning Aplikasi

Sebelum melakukan build APK, kita bisa mengatur versi aplikasi melalui file:

pubspec.yaml

Cari bagian berikut:

version: 1.0.0+1

Bagian versioning tersebut terdiri dari dua bagian:

1.0.0 — disebut version name, yaitu versi aplikasi yang biasanya terlihat oleh pengguna.

Sedangkan:

+1 — disebut version code, yaitu kode versi yang dibaca oleh sistem Android.

Contohnya, jika aplikasi pertama kali dibuat, kita bisa menggunakan:

version: 1.0.0+1

Jika aplikasi diperbarui, misalnya ada perbaikan bug atau penambahan fitur kecil, versinya bisa dinaikkan menjadi:

version: 1.0.1+2

Artinya, 1.0.1 adalah versi baru aplikasi, sedangkan +2 adalah kode versi terbaru yang dikenali oleh Android.

Hal yang perlu diperhatikan adalah version code harus selalu dinaikkan setiap kali aplikasi ingin dibuat dalam versi baru. Jangan menurunkan version code, karena Android dapat menganggap aplikasi tersebut sebagai versi yang lebih lama.

Secara sederhana:

• 1.0.0 adalah versi aplikasi.
• +1 adalah kode versi Android.

Dengan mengatur versioning, aplikasi menjadi lebih rapi dan mudah dibedakan ketika nanti ada pembaruan versi.

6. Build APK

Setelah semua konfigurasi selesai, tahap terakhir adalah membuat file APK.

APK adalah file installer Android yang bisa dibagikan dan diinstal langsung pada perangkat Android.

Sebelum melakukan build, jalankan command berikut untuk membersihkan project dan mengambil ulang dependency:

flutter clean
flutter pub get

Setelah itu, buat file APK dengan command:

flutter build apk --release

Tunggu sampai proses build selesai. Jika berhasil, file APK akan tersimpan di folder berikut:

build/app/outputs/flutter-apk/app-release.apk

File app-release.apk tersebut adalah file yang bisa dibagikan ke pengguna atau tester untuk diinstal pada perangkat Android.

Jika ingin membuka folder hasil build dengan cepat, teman-teman bisa masuk ke folder project, lalu ikuti path:

build > app > outputs > flutter-apk > app-release.apk

8. Install APK ke Device

Untuk mencoba aplikasi pada HP Android, teman-teman bisa mengirim file APK ke perangkat lalu menginstallnya secara manual.

Jika HP terhubung ke laptop menggunakan USB Debugging, bisa juga menggunakan command:

flutter install

Pastikan perangkat sudah terdeteksi dengan command:

flutter devices

9. Troubleshooting

Icon belum berubah

Coba uninstall aplikasi lama dari emulator atau HP, lalu jalankan kembali:

flutter clean
flutter pub get
dart run flutter_launcher_icons
flutter run

Firebase tidak bisa membaca data

Pastikan:

• Koneksi internet aktif.
• File google-services.json ada di folder android/app/.
• Firebase sudah diinisialisasi di project Flutter.
• Rules Firestore sudah dipublish.
• User sudah login sebelum mengakses data.

Build APK gagal

Coba jalankan:

flutter clean
flutter pub get
flutter doctor

Lalu cek pesan error yang muncul di terminal. Biasanya error build disebabkan oleh dependency, konfigurasi Gradle, atau file Android yang belum sesuai.

APK tidak bisa diinstall

Pastikan:

• Versi Android HP sesuai dengan minimum SDK aplikasi.
• File APK tidak rusak.
• Aplikasi lama dengan Application ID yang sama sudah dihapus terlebih dahulu.
• Izinkan instalasi aplikasi dari sumber tidak dikenal jika install manual.

Sampai di sini, aplikasi Flutter kita sudah melewati tahap finishing dan siap dibuat menjadi APK.

Pada pelatihan ini, kita sudah belajar bagaimana merapikan konfigurasi Android, mengganti launcher icon, memastikan Firebase tetap berjalan, mengatur versi aplikasi, hingga membuat file APK yang bisa diinstall pada perangkat Android.

Dengan begitu, project Flutter yang sebelumnya hanya berjalan di emulator atau mode development sekarang sudah bisa dibagikan dan diuji secara langsung.

Selamat! Teman-teman sudah berhasil menyelesaikan rangkaian pelatihan Mobile Programming dari awal sampai tahap build aplikasi.

Sampai jumpa di project dan pelatihan berikutnya.

flutter Project #7 Edutrack: Build APK was originally published in Amikom Computer Club on Medium, where people are continuing the conversation by highlighting and responding to this story.

Halo Sobat AMCC! 👋

Gimana nih kabarnya, semoga tetap sehat ya 😁

Kita balik lagi ke pelatihan kita nih. Pada pelatihan sebelumnya kita sudah belajar membuat Halaman Profil yang bagus nih. Setelah ini, kita akan lanjut ke materi yang tentunya lebih seru lagi dong 👍

Pada pelatihan kali ini, kita akan belajar bagaimana cara mengimplementasikan operasi dasar data, yakni CRUD (Create, Read, Update, Delete). Kerennya lagi, data yang kita kelola nanti bakal tersinkronisasi secara realtime lho! Jadi begitu ada data yang ditambah atau diubah di server Firebase, layar aplikasi Flutter kita bakal otomatis terupdate secara instan tanpa perlu di-refresh manual.

· Apa Itu CRUD?
· Persiapan Project
· Membuka Firebase Console
· Rules Firestore
· Membuat Collection Baru
· Membuat Task Model
· Membuat Task Service
· Membuat Task Service
· Full Kode

Sebelum kita masuk terlalu dalam ke baris kode program, teman-teman wajib tahu dulu nih apa itu konsep CRUD.

Apa Itu CRUD?

CRUD sendiri merupakan singkatan dari Create, Read, Update, dan Delete, yang merupakan empat fungsi dasar yang wajib dimiliki oleh sebuah aplikasi interaktif ketika berurusan dengan manajemen database.

Sederhananya, Create bertugas memasukkan data baru, Read bertugas membaca dan menampilkan data ke layar HP, Update dipakai saat user ingin mengubah data yang sudah ada, dan Delete mengeksekusi penghapusan data secara permanen.

Nah, semua keajaiban manipulasi data ini akan kita titipkan pada Cloud Firestore, sebuah database NoSQL berbasis cloud yang fleksibel, cepat, mendukung query kompleks, dan punya kemampuan sinkronisasi data secara realtime. Jadi, begitu ada perubahan data di server, layar Flutter kita bakal ikut berubah otomatis tanpa perlu ditarik atau di-refresh manual, keren banget kan? 🚀🔥

Persiapan Project

Bagi teman-teman yang berhalangan hadir atau proyek pelatihan kemarin belum selesai, bisa menyalin proyek pertemuan sebelumnya.

git clone -b pertemuan-9 https://github.com/amccamikom/amcc-mobile-2025.git pertemuan-10

Membuka Firebase Console

Langkah selanjutnya adalah kita buka kembali browser kesayangan kita dan akses halaman Firebase Console. Di sana, teman-teman cukup cari dan klik project kemarin yang sudah dibuat yaitu project bernama edutrack yang sudah kita integrasikan dengan aplikasi Flutter kita pada modul sebelumnya.

Setelah masuk ke dalam dashboard project tersebut, langsung saja meluncur ke menu Databases & Storage di bilah navigasi kiri, lalu pilih Firestore Database. Karena pada pertemuan sebelumnya kita sudah mengaktifkan database ini untuk menyimpan data users, kali ini kita tidak perlu membuat database baru lagi dari nol!

Rules Firestore

• Masuk ke Firestore > Rules
• Tambahkan Kode dibawah ini

match /tasks/{taskId} {
   allow create: if request.auth != null;
   allow read, update, delete: if request.auth != null && resource.data.userId == request.auth.uid;
}

• Kemudian Klik Publish

Membuat Collection Baru

Di dalam halaman Firestore Database yang sudah aktif tersebut, langkah yang harus kita lakukan sekarang adalah membuat Collection baru sebagai tempat penyimpanan tugas. Teman-teman bisa langsung klik tombol + Start collection yang ada di tab Data.

• Berikan nama Collectionnya Tasks.

• Untuk mengisi ID secara manual, kita perlu mendapatkan User UID dari user yang sudah dibuat.
• Kemudian isi struktur tabel sesuai data di bawah ini :

Membuat Task Model

Task Model ini berfungsi sebagai cetak biru (blueprint) data objek tugas kita. Di dalamnya terdapat fungsi jembatan untuk mengubah data JSON Firebase menjadi objek Dart, dan sebaliknya.

• Buat Folder baru bernama models.
• Buat File baru bernama task_model.dart.

import 'package:cloud_firestore/cloud_firestore.dart';

class TaskModel {
  String id;
  String userId; 
  String title;
  String date;
  bool isCompleted;
  Timestamp? createdAt;

  TaskModel({
    required this.id,
    required this.userId,
    required this.title,
    required this.date,
    required this.isCompleted,
    this.createdAt,
  });

  factory TaskModel.fromFirestore(Map<String, dynamic> json, String documentId) {
    return TaskModel(
      id: documentId,
      userId: json['userId'] ?? '', 
      title: json['title'] ?? '',
      date: json['date'] ?? '',
      isCompleted: json['isCompleted'] ?? false,
      createdAt: json['createdAt'] as Timestamp?,
    );
  }

  Map<String, dynamic> toFirestore() {
    return {
      'userId': userId, 
      'title': title,
      'date': date,
      'isCompleted': isCompleted,
      'createdAt': createdAt ?? FieldValue.serverTimestamp(),
    };
  }
}

Membuat Task Service

• Buka folder Services.
• Lalu buat File baru bernama task_service.dart.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import '../models/task_model.dart';

class TaskService {
  final CollectionReference _taskCollection =
      FirebaseFirestore.instance.collection('tasks');

  Future<void> addTask(String title, String date) async {
    try {
      final String currentUserId = FirebaseAuth.instance.currentUser!.uid;

      await _taskCollection.add({
        'userId': currentUserId,
        'title': title,
        'date': date,
        'isCompleted': false,
        'createdAt': FieldValue.serverTimestamp(),
      });
    } catch (e) {
      print("Gagal menambahkan task: $e");
    }
  }

  Stream<List<TaskModel>> getTasksStream() {
    final String currentUserId = FirebaseAuth.instance.currentUser!.uid;

    return _taskCollection
        .where('userId', isEqualTo: currentUserId)
        .snapshots()
        .map((snapshot) {
          final tasks = snapshot.docs.map((doc) {
            return TaskModel.fromFirestore(doc.data() as Map<String, dynamic>, doc.id);
          }).toList();

          tasks.sort((a, b) {
            if (a.createdAt == null && b.createdAt == null) return 0;
            if (a.createdAt == null) return 1;
            if (b.createdAt == null) return -1;
            return b.createdAt!.compareTo(a.createdAt!);
          });

          return tasks;
        });
  }

  Future<void> toggleTaskStatus(String id, bool currentStatus) async {
    try {
      await _taskCollection.doc(id).update({
        'isCompleted': !currentStatus,
      });
    } catch (e) {
      print("Gagal memperbarui status task: $e");
    }
  }

  Future<void> deleteTask(String id) async {
    try {
      await _taskCollection.doc(id).delete();
    } catch (e) {
      print("Gagal menghapus task: $e");
    }
  }
}

Membuat Task Service

Kita akan memanggil fungsi baca data menggunakan bantuan widget sakti bernama StreamBuilder yang dipasangkan langsung dengan stream dari Firestore Service kita.

• Buka file home_page.dart.
• Cari Todo Section yang menggunakan Listview Builder.

StreamBuilder<List<TaskModel>>(
                  stream: _taskService.getTasksStream(),
                  builder: (context, snapshot) {
                    if (snapshot.hasError) {
                      return Center(
                        child: Padding(
                          padding: const EdgeInsets.all(20.0),
                          child: Text(
                            'Gagal mengambil data tugas: ${snapshot.error}',
                            style: GoogleFonts.poppins(color: Colors.red),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      );
                    }
  
                    // Tampilkan loading spinner jika data masih dalam proses loading
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return const Center(
                        child: Padding(
                          padding: EdgeInsets.all(20.0),
                          child: CircularProgressIndicator(),
                        ),
                      );
                    }
  
                    // Tangkap data list dari snapshot
                    final tasks = snapshot.data ?? [];
  
                    // Tampilkan teks jika collection database masih kosong
                    if (tasks.isEmpty) {
                      return Center(
                        child: Padding(
                          padding: const EdgeInsets.all(20.0),
                          child: Text(
                            'Belum ada tugas. Yuk tambah tugas baru!',
                            style: GoogleFonts.poppins(color: const Color(0xFF64748B)),
                          ),
                        ),
                      );
                    }
  
                    // Render komponen TodoCard secara dinamis berdasarkan data Firebase
                    return ListView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: tasks.length,
                      itemBuilder: (context, index) {
                        final task = tasks[index];
                        return TodoCard(
                          title: task.title,
                          date: task.date,
                          isDone: task.isCompleted,
                          onCheckChanged: (bool? value) async {
                            // [UPDATE] Mengubah status check/uncheck tugas
                            await _taskService.toggleTaskStatus(task.id, task.isCompleted);
                          },
                          onDelete: () async {
                            // [DELETE] Menghapus data dari Firestore database
                            await _taskService.deleteTask(task.id);
                          },
                        );
                      },
                    );
                  },
                ),

StreamBuilder ini bertindak reaktif seperti jangkar; ia akan memantau database di awan secara terus-menerus dan otomatis memerintahkan aplikasi untuk menggambar ulang (re-render) widget ListView.builder di layar setiap kali ada aktivitas manipulasi data di server Firebase. Untuk memanjakan pengguna, kita juga menambahkan tombol FloatingActionButton berikon tanda tambah yang jika diklik akan memunculkan sebuah kotak dialog (showDialog) berisi form input teks untuk memasukkan judul dan deskripsi tugas baru, sekaligus merangkap sebagai form modifikasi saat ikon edit ditekan.

Full Kode

• home_page.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../widgets/TodoCard.dart';
import '../widgets/CarouselWidget.dart';
import '../models/task_model.dart';
import '../services/tasks_service.dart';
import '../services/auth_service.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // Inisialisasi TaskService untuk memanggil fungsi CRUD
  final TaskService _taskService = TaskService();
  final AuthService _authService = AuthService();
  String _userName = 'user';

  @override
  void initState() {
    super.initState();
    _loadUserData();
  }

  Future<void> _loadUserData() async {
    try {
      final userData = await _authService.getUserData();
      if (userData != null && userData['name'] != null) {
        setState(() {
          _userName = userData['name'];
        });
      }
    } catch (e) {
      print("Gagal mengambil data user: $e");
    }
  }

  void _showAddTaskDialog() {
    final titleController = TextEditingController();
    final dateController = TextEditingController();

    showDialog(
      context: context,
      builder: (dialogContext) {
        return AlertDialog(
          title: Text(
            'Tambah task',
            style: GoogleFonts.poppins(
              fontSize: 18,
              fontWeight: FontWeight.w600,
            ),
          ),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                controller: titleController,
                decoration: const InputDecoration(
                  labelText: 'Judul task',
                  hintText: 'Contoh: Belajar Flutter',
                ),
              ),
              const SizedBox(height: 12),
              TextField(
                controller: dateController,
                decoration: const InputDecoration(
                  labelText: 'Tanggal',
                  hintText: 'Contoh: 6 Maret 2026',
                ),
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(dialogContext);
              },
              child: const Text('Batal'),
            ),
            ElevatedButton(
              onPressed: () async {
                final title = titleController.text.trim();
                final date = dateController.text.trim();

                if (title.isEmpty || date.isEmpty) {
                  return;
                }

                // [CREATE] Panggil fungsi tambah data ke Firebase
                await _taskService.addTask(title, date);

                if (mounted) {
                  Navigator.pop(dialogContext);
                }
              },
              child: const Text('Simpan'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF6F7FB),
      appBar: AppBar(
        backgroundColor: const Color(0xFF3254FD),
        elevation: 0,
        automaticallyImplyLeading: false,
        title: Row(
          children: [
            Image.asset('assets/edutrack-logo.png', width: 20, height: 20),
            const SizedBox(width: 8),
            Text(
              'Edutrack',
              style: GoogleFonts.poppins(
                fontSize: 20,
                fontWeight: FontWeight.w500,
                color: Colors.white,
              ),
            ),
          ],
        ),
        actions: [
          IconButton(
            onPressed: () {
              _showAddTaskDialog();
            },
            icon: const Icon(Icons.add, color: Colors.white, size: 24),
          ),
        ],
      ),
      body: RefreshIndicator(
        onRefresh: () async {
          await _loadUserData();
        },
        child: SingleChildScrollView(
          physics: const AlwaysScrollableScrollPhysics(),
          child: Padding(
            padding: const EdgeInsets.fromLTRB(16, 20, 16, 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // ============ GREETING SECTION ============
                Text(
                  'Halo, $_userName',
                  style: GoogleFonts.poppins(
                    fontSize: 22,
                    fontWeight: FontWeight.w700,
                    color: const Color(0xFF0F172A),
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  'Selamat datang di aplikasi edutrack',
                  style: GoogleFonts.poppins(
                    fontSize: 13,
                    color: const Color(0xFF64748B),
                  ),
                ),
                const SizedBox(height: 20),
  
                // ============ CAROUSEL SECTION ============
                const CarouselWidget(),
                const SizedBox(height: 24),
  
                // ============ DAFTAR TUGAS SECTION ============
                Text(
                  'Daftar Tugas',
                  style: GoogleFonts.poppins(
                    fontSize: 16,
                    fontWeight: FontWeight.w700,
                    color: const Color(0xFF0F172A),
                  ),
                ),
                const SizedBox(height: 12),
  
                // [READ] Menggunakan StreamBuilder untuk memantau data realtime
                StreamBuilder<List<TaskModel>>(
                  stream: _taskService.getTasksStream(),
                  builder: (context, snapshot) {
                    if (snapshot.hasError) {
                      return Center(
                        child: Padding(
                          padding: const EdgeInsets.all(20.0),
                          child: Text(
                            'Gagal mengambil data tugas: ${snapshot.error}',
                            style: GoogleFonts.poppins(color: Colors.red),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      );
                    }
  
                    // Tampilkan loading spinner jika data masih dalam proses loading
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return const Center(
                        child: Padding(
                          padding: EdgeInsets.all(20.0),
                          child: CircularProgressIndicator(),
                        ),
                      );
                    }
  
                    // Tangkap data list dari snapshot
                    final tasks = snapshot.data ?? [];
  
                    // Tampilkan teks jika collection database masih kosong
                    if (tasks.isEmpty) {
                      return Center(
                        child: Padding(
                          padding: const EdgeInsets.all(20.0),
                          child: Text(
                            'Belum ada tugas. Yuk tambah tugas baru!',
                            style: GoogleFonts.poppins(color: const Color(0xFF64748B)),
                          ),
                        ),
                      );
                    }
  
                    // Render komponen TodoCard secara dinamis berdasarkan data Firebase
                    return ListView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: tasks.length,
                      itemBuilder: (context, index) {
                        final task = tasks[index];
                        return TodoCard(
                          title: task.title,
                          date: task.date,
                          isDone: task.isCompleted,
                          onCheckChanged: (bool? value) async {
                            // [UPDATE] Mengubah status check/uncheck tugas
                            await _taskService.toggleTaskStatus(task.id, task.isCompleted);
                          },
                          onDelete: () async {
                            // [DELETE] Menghapus data dari Firestore database
                            await _taskService.deleteTask(task.id);
                          },
                        );
                      },
                    );
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Flutter #6: Mengelola Data Realtime Berbasis Cloud Firestore was originally published in Amikom Computer Club on Medium, where people are continuing the conversation by highlighting and responding to this story.

Gimana Kabar kalian, btw ini udah jadi pelatihan terakhir kalian lo ga kerasa kan, kita udah bertemu di 9 minggu kalo dipikir pikir udah lebih dari 2 bulan, dan kalian pasti sudah ada jago dan tau pondasi menjadi backend developer.

Kalau temen temen ketinggalan di pertemuan kemarin bisa dibaca baca terlebih dahulu, kemudian baru lanjut di sesi kali ini, tapi tenang aja ak bakal bahas tuntas sampai bersih di modul kali ini

Di modul kali ini kita bakal bantai bantai yang namanya RESTFULL API, kita bakal ngebuat api ni di laravel tapi apasih bedanya dengan api yang lain cekidot kita bahas…

Table of Contents

· Apa itu API?
· Alasan kenapa memakai API
· Cara kerja API
· RESTful API
· Cara Kerja RESTful API
· Kerangka Kerja RESTful API
· 1. URL (Endpoint)
· 2. HTTP Method
· 3. Request Body
· 4. Headers
· 5. Response
· Method RESTful API
· GET
· POST
· PUT / PATCH
· PUT
· PATCH
· DELETE
· Setup-setup
· Implementasi RESTful API di Laravel
· Persiapan
· Setup API di Laravel Menggunakan Eloquent API Resources
· Apa itu Eloquent API Resources?
· Mendapatkan Semua Data Task dengan Method GET
· Membuat Task Baru dengan Method POST
· Mengupdate Task Berdasarkan ID dengan Method PATCH
· Menghapus Task dengan Method DELETE
· Kesimpulan

Apa itu API?

Nah, sekarang kita masuk ke pembahasan utama, yaitu API. Kemungkinan besar istilah ini sudah nggak asing lagi buat kalian, apalagi setelah beberapa minggu belajar backend. Hampir semua aplikasi yang kita gunakan sehari-hari, mulai dari media sosial, e-commerce, sampai aplikasi perbankan, pasti memanfaatkan API di belakang layarnya.

Tapi sebenarnya, apa sih API itu?

API atau Application Programming Interface adalah sebuah perantara yang memungkinkan dua aplikasi atau lebih untuk saling berkomunikasi dan bertukar data. Bisa dibilang API ini seperti pelayan di restoran. Ketika pelanggan memesan makanan, pelayan akan menyampaikan pesanan tersebut ke dapur, lalu mengantarkan hasilnya kembali ke pelanggan. Nah, API bekerja dengan cara yang kurang lebih sama, yaitu menerima permintaan dari suatu aplikasi, meneruskannya ke sistem yang sesuai, lalu mengembalikan hasilnya.

“Berkomunikasi? Maksudnya aplikasi bisa ngobrol?”

Kurang lebih seperti itu . Bedanya, yang digunakan bukan bahasa manusia, melainkan format dan aturan yang sudah ditentukan dalam dunia pemrograman. Dengan adanya API, sebuah aplikasi tidak perlu mengetahui bagaimana sistem lain bekerja secara detail. Cukup kirim permintaan sesuai aturan yang berlaku, lalu terima data yang diberikan sebagai respons.

Karena itulah API menjadi salah satu komponen paling penting dalam pengembangan aplikasi modern, terutama bagi seorang Backend Developer. Sebelum mulai membuat RESTful API menggunakan Laravel, penting bagi kita untuk memahami terlebih dahulu konsep dasar yang ada di baliknya.

Alasan kenapa memakai API

Supaya lebih mudah dipahami, coba kita bayangkan sebuah kasus sederhana.

Misalnya kalian membuat sebuah To Do App yang digunakan untuk mencatat dan mengelola daftar tugas. Di dalam aplikasi tersebut terdapat berbagai data, seperti nama tugas, deskripsi, status pengerjaan, hingga tanggal deadline. Aplikasi yang kalian buat berjalan dengan baik dan mulai digunakan oleh banyak pengguna.

Nah, suatu hari ada developer lain yang ingin mengintegrasikan aplikasi mereka dengan To Do App milik kalian. Mereka ingin menampilkan daftar tugas pengguna atau membuat tugas baru langsung dari aplikasi mereka.

Kira-kira bagaimana cara kalian memberikan akses tersebut?

Apakah mereka langsung diberi akses ke database? Tentu tidak. Apakah mereka diberikan akun admin aplikasi? Jelas bukan solusi yang tepat. 🤔

Memberikan akses langsung ke database sangat berisiko karena pihak lain bisa saja melihat, mengubah, bahkan menghapus data yang seharusnya tidak boleh mereka akses. Selain itu, terdapat data-data yang bersifat privat dan harus tetap dijaga keamanannya.

Lalu bagaimana solusinya?

Di sinilah API (Application Programming Interface) berperan.

Dengan API, kita dapat menyediakan jalur komunikasi yang aman bagi aplikasi lain untuk berinteraksi dengan sistem yang kita miliki. Misalnya, kita dapat menyediakan endpoint untuk melihat daftar tugas, menambahkan tugas baru, mengubah status tugas, atau menghapus tugas tertentu. Semua itu dilakukan melalui aturan yang sudah kita tentukan sebelumnya.

Jadi, aplikasi lain tidak perlu mengetahui bagaimana struktur database kita atau bagaimana sistem bekerja di belakang layar. Mereka cukup mengirimkan request ke API yang tersedia, lalu API akan memproses permintaan tersebut dan mengembalikan response yang sesuai.

Singkatnya, API menjadi jembatan yang memungkinkan berbagai aplikasi saling berkomunikasi dengan aman tanpa harus membuka akses ke seluruh sistem yang ada. 🚀

Cara kerja API

Cara kerja API sebenarnya cukup sederhana kok sobat. Supaya lebih mudah dipahami, kita lanjut menggunakan contoh To Do App yang sedang kita buat.

Misalnya ada seorang pengguna bernama Faris yang sedang membuka To Do App melalui browser. Ketika Faris ingin melihat daftar tugas yang sudah ia buat, apa yang sebenarnya terjadi di balik layar?

Yuk kita bedah alurnya satu per satu:

1. Pertama, browser Faris (client) mengirimkan request ke server untuk meminta data daftar tugas yang dimilikinya.
2. Request tersebut dikirim melalui jaringan internet menuju server aplikasi.
3. Setelah sampai di server, request tidak langsung mengakses database. Request akan melewati API terlebih dahulu.
4. API menerima request tersebut lalu memeriksa apakah request yang dikirim valid dan sesuai dengan aturan yang telah ditentukan.
5. Jika valid, API akan meminta data yang dibutuhkan dari database.
6. Database kemudian mengembalikan data daftar tugas kepada API.
7. API mengolah data tersebut dan mengirimkannya kembali ke client dalam bentuk response, biasanya berupa data JSON.
8. Browser menerima response tersebut, lalu menampilkannya dalam bentuk daftar tugas yang bisa dilihat oleh Denis.

Jadi secara sederhana, API bertugas sebagai perantara yang menerima permintaan dari client, mengambil atau mengelola data yang diperlukan, lalu mengirimkan hasilnya kembali ke client.

Simpel kan? 😉

RESTful API

Apa itu RESTful API?

RESTful API adalah jenis API yang paling sering digunakan dalam pengembangan aplikasi modern. Hampir semua aplikasi yang kita gunakan saat ini, mulai dari media sosial, marketplace, hingga aplikasi manajemen tugas, menggunakan RESTful API untuk bertukar data.

Tapi sebenarnya RESTful API itu apa sih?

RESTful API adalah API yang mengikuti aturan atau arsitektur bernama REST (Representational State Transfer). Sederhananya, REST memberikan seperangkat aturan tentang bagaimana client dan server saling berkomunikasi dengan baik dan terstruktur.

Dalam REST, komunikasi dilakukan menggunakan protokol HTTP, yaitu protokol yang juga digunakan ketika kita membuka sebuah website di browser. Melalui HTTP inilah client dapat meminta data, menambahkan data, mengubah data, maupun menghapus data yang ada di server.

Nah, untuk melakukan berbagai aksi tersebut, REST menggunakan beberapa HTTP Method yang mungkin pernah kalian dengar sebelumnya, seperti:

• GET → Mengambil data
• POST → Menambahkan data baru
• PUT → Mengubah seluruh data
• PATCH → Mengubah sebagian data
• DELETE → Menghapus data

Masih bingung fungsi masing-masing method tersebut? Tenang aja sobat 😆. Di bagian selanjutnya kita bakal membedah satu per satu lengkap dengan contoh implementasinya menggunakan Laravel.

Jadi jangan diskip ya, karena method-method inilah yang menjadi senjata utama saat membangun RESTful API. 🚀

Cara kerja RESTful API

Cara Kerja RESTful API

Sebenarnya, cara kerja RESTful API tidak jauh berbeda dengan API pada umumnya. Yang membedakan adalah bagaimana client dan server saling berkomunikasi.

Pada RESTful API, client mengirimkan request ke server menggunakan HTTP Method seperti GET, POST, PUT, PATCH, atau DELETE melalui sebuah URL tertentu.

Sebagai contoh:

https://todo-app.com/api/tasks

URL tersebut dapat diibaratkan sebagai alamat tujuan yang digunakan client untuk berkomunikasi dengan server. Ketika client mengakses URL tersebut menggunakan method tertentu, server akan mengetahui tindakan apa yang ingin dilakukan.

Setelah request diterima dan diproses, server akan mengirimkan kembali sebuah response kepada client. Response ini biasanya berbentuk data seperti:

• JSON (JavaScript Object Notation)
• XML (Extensible Markup Language)
• HTML (HyperText Markup Language)

Saat ini, format yang paling sering digunakan dalam RESTful API adalah JSON karena lebih ringan, mudah dibaca, dan mudah diproses oleh berbagai bahasa pemrograman.

“Aduhh kak, JSON itu apalagi?” 😵

Santai sobat, nanti kita akan membahasnya secara lebih detail lengkap dengan contoh implementasinya di Laravel. Jadi lanjut bacanya yaa 😁

Kerangka Kerja RESTful API

Agar RESTful API dapat berjalan dengan baik, ada beberapa komponen utama yang harus ada. Komponen-komponen inilah yang menjadi fondasi dalam membangun sebuah RESTful API.

1. URL (Endpoint)

URL merupakan alamat yang digunakan client untuk mengakses suatu resource pada server.

Contoh:

https://todo-app.com/api/tasks

Dari URL tersebut, server memahami bahwa client ingin berinteraksi dengan resource tasks.

2. HTTP Method

HTTP Method digunakan untuk menentukan aksi yang ingin dilakukan terhadap suatu resource.

Beberapa method yang paling sering digunakan adalah:

• GET → Mengambil data
• POST → Menambahkan data baru
• PUT → Mengubah seluruh data
• PATCH → Mengubah sebagian data
• DELETE → Menghapus data

Method inilah yang menjadi ciri khas dari arsitektur REST.

3. Request Body

Request Body adalah data yang dikirim oleh client ke server, biasanya digunakan saat membuat atau memperbarui data.

Sebagai contoh, ketika pengguna ingin membuat tugas baru pada To Do App, client dapat mengirimkan data seperti berikut:

{
    "title": "Mengerjakan Challenge Backend",
    "status": "pending"
}

Di dalam Request Body terdapat:

• Key → Nama atau label data (title, status)
• Value → Isi dari data tersebut (Mengerjakan Challenge Backend, pending)

Server kemudian akan membaca data tersebut dan memprosesnya sesuai kebutuhan aplikasi.

Nah, ketiga komponen di atas merupakan fondasi utama yang hampir selalu kita temui saat bekerja dengan RESTful API. Setelah memahami konsep ini, nantinya kita akan jauh lebih mudah saat mulai membuat API menggunakan Laravel. 🚀

4. Headers

Selain Request Body, ada juga yang namanya Headers. Headers merupakan informasi tambahan yang dikirim bersamaan dengan request atau response.

Sama seperti Request Body, Headers juga terdiri dari pasangan key dan value. Bedanya, jika Request Body berisi data utama yang ingin dikirim, maka Headers berisi informasi pendukung yang membantu server memahami bagaimana request tersebut harus diproses.

Salah satu contoh Header yang paling sering digunakan adalah:

Content-Type: application/json

Pada contoh di atas:

• Content-Type merupakan key
• application/json merupakan value

Header tersebut memberi tahu server bahwa data yang dikirim pada Request Body menggunakan format JSON.

Selain Content-Type, masih banyak Header lain yang sering digunakan dalam pengembangan API, misalnya:

Authorization: Bearer token123
Accept: application/json

• Authorization digunakan untuk mengirimkan informasi autentikasi atau token akses.
• Accept digunakan untuk memberi tahu format response yang diharapkan oleh client.

Untuk saat ini, yang perlu kalian pahami adalah bahwa Headers berfungsi sebagai “catatan tambahan” yang membantu client dan server saling memahami bagaimana data harus dikirim dan diproses.

Tenang sobat, saat nanti kita mulai praktik membuat RESTful API menggunakan Laravel, kalian akan sering bertemu dengan Headers dan langsung melihat bagaimana penggunaannya di dunia nyata. 🚀

5. Response

Jika Request adalah data yang dikirim dari client ke server, maka Response adalah data balasan yang dikirim oleh server kepada client setelah request berhasil diproses.

Response biasanya berisi informasi seperti:

• Status request berhasil atau gagal
• Pesan (message)
• Data yang diminta oleh client

Format response yang paling sering digunakan saat ini adalah:

• JSON (JavaScript Object Notation)
• XML (eXtensible Markup Language)
• HTML (HyperText Markup Language)

Namun dalam pengembangan RESTful API modern, format JSON jauh lebih populer karena lebih ringan, mudah dibaca, dan mudah diproses oleh berbagai bahasa pemrograman.

Sebagai contoh, ketika client meminta daftar user dari server, server dapat mengirimkan response seperti berikut:

{
  "status": "success",
  "data": [
    {
      "id": 1,
      "name": "Faris",
      "email": "faris@mail.com",
      "role": "user"
    },
    {
      "id": 2,
      "name": "Naja",
      "email": "naja@mail.com",
      "role": "admin"
    },
    {
      "id": 3,
      "name": "Mel",
      "email": "mel@mail.com",
      "role": "user"
    },
    {
      "id": 4,
      "name": "Ima",
      "email": "ima@mail.com",
      "role": "admin"
    }
  ]
}

<?xml version="1.0" encoding="UTF-8"?>
<response>
  <status>success</status>
  <data>
    <user>
      <id>1</id>
      <name>Faris</name>
      <email>faris@mail.com</email>
      <role>user</role>
    </user>
    <user>
      <id>2</id>
      <name>Naja</name>
      <email>naja@mail.com</email>
      <role>admin</role>
    </user>
    <user>
      <id>3</id>
      <name>Mel</name>
      <email>mel@mail.com</email>
      <role>user</role>
    </user>
    <user>
      <id>4</id>
      <name>Ima</name>
      <email>ima@mail.com</email>
      <role>admin</role>
    </user>
  </data>
</response>

Dari response tersebut kita dapat mengetahui bahwa request berhasil diproses karena nilai status adalah success, dan data yang dikembalikan berupa daftar user.

Method RESTful API

Nah, sekarang kita masuk ke bagian yang paling sering digunakan ketika membuat RESTful API, yaitu HTTP Method.

Method dapat diibaratkan sebagai perintah yang dikirim client kepada server. Melalui method inilah server mengetahui tindakan apa yang ingin dilakukan terhadap suatu data.

Method yang paling umum digunakan adalah:

• GET
• POST
• PUT
• PATCH
• DELETE

Yuk kita bahas satu per satu 🚀

GET

Method GET digunakan untuk mengambil atau membaca data dari server.

Misalnya pada To Do App, kita ingin melihat seluruh daftar tugas yang tersimpan.

GET /api/tasks

Server kemudian akan mengirimkan daftar task yang tersedia.

GET juga dapat menggunakan parameter untuk melakukan filtering data tertentu.

Contohnya:

GET /api/tasks?status=completed

Artinya kita hanya ingin mengambil task yang statusnya sudah selesai (completed).

Jadi parameter digunakan untuk mempersempit atau memfilter data yang ingin kita ambil.

POST

Method POST digunakan untuk membuat atau menambahkan data baru ke database.

Pada method ini biasanya kita mengirimkan data melalui Request Body.

Contoh:

POST /api/tasks

Body:

{
    "title": "Mengerjakan Challenge Backend",
    "status": "pending"
}

Data tersebut akan dikirim ke server dan disimpan sebagai task baru.

Singkatnya:

POST = Membuat Data Baru

PUT / PATCH

Method PUT dan PATCH digunakan untuk memperbarui data yang sudah ada.

Contoh:

PUT /api/tasks/21

Body:

{
    "title": "Challenge Backend Selesai",
    "status": "completed"
}

Artinya kita ingin mengubah data task dengan ID 21.

Lalu apa perbedaan PUT dan PATCH?

PUT

Digunakan untuk mengganti atau memperbarui seluruh data resource.

PUT /api/tasks/21

Biasanya seluruh field dikirim ulang ke server.

PATCH

Digunakan untuk memperbarui sebagian data saja.

PATCH /api/tasks/21

Body:

{
    "status": "completed"
}

Karena hanya status yang berubah, kita tidak perlu mengirim seluruh data task.

Singkatnya:

• PUT → Update seluruh data
• PATCH → Update sebagian data

DELETE

Method DELETE digunakan untuk menghapus data dari database.

Contoh:

DELETE /api/tasks/21

Artinya server akan menghapus task yang memiliki ID 21.

Biasanya ID resource dituliskan langsung pada endpoint agar server mengetahui data mana yang harus dihapus.

Singkatnya:

DELETE = Menghapus Data

Yeayyy, akhirnya kita sudah selesai membahas teori dasar RESTful API.

Mulai dari pengertian RESTful API, cara kerjanya, komponen-komponennya, hingga berbagai HTTP Method yang akan sering kalian gunakan sebagai Backend Developer.

Selanjutnya kita akan masuk ke bagian yang lebih seru, yaitu mengimplementasikan RESTful API menggunakan Laravel 12. Siapkan editor kalian, karena setelah ini kita akan mulai ngoding! 🚀

Setup-setup

//clone repo dulu 
git clone -b pertemuan-9 https://github.com/amccamikom/amcc-web-backend-2025.git .

//instal
composer install

//membuat env
cp .env.example .env

//generate key
php artisan key:generate

//migration
php artisan migrate

Implementasi RESTful API di Laravel

Gimana sobat? Sampai sini sudah mulai kebayang kan apa itu API, RESTful API, request, response, dan berbagai method yang digunakan? 😎

Nah, teori tanpa praktik rasanya kurang afdol yaa. Sekarang saatnya kita masuk ke bagian yang paling seru, yaitu membuat RESTful API menggunakan Laravel 12. 🚀

Pada sesi ini kita akan belajar bagaimana membuat endpoint API, mengelola data menggunakan berbagai HTTP Method, hingga mengembalikan response dalam format JSON yang rapi dan terstruktur.

Yuk langsung gaskeun! 🏃‍♂️💨

Persiapan

Sebelum memulai praktikum, pastikan beberapa kebutuhan berikut sudah tersedia di perangkat kalian:

• Visual Studio Code
• Laragon yang sudah terinstall dan menyediakan PHP, MySQL, serta Apache/Nginx
• Project Laravel dari pertemuan sebelumnya
• Postman untuk melakukan testing API
• Database kalian (todo app)

Jika belum memiliki Postman, silakan download terlebih dahulu melalui website resminya atau gunakan versi web yang tersedia.

Setup API di Laravel Menggunakan Eloquent API Resources

Sebenarnya membuat API di Laravel itu cukup sederhana. Secara umum kita hanya membutuhkan:

• Route
• Controller
• Model

Namun Laravel menyediakan fitur tambahan yang membuat struktur response API menjadi jauh lebih rapi dan mudah dikelola, yaitu Eloquent API Resources.

Apa itu Eloquent API Resources?

Eloquent API Resources adalah fitur bawaan Laravel yang digunakan untuk mengubah data hasil query menjadi format JSON yang lebih terstruktur sebelum dikirim ke client.

Tanpa API Resource, data dari database biasanya akan langsung dikirim begitu saja ke client. Dengan API Resource, kita dapat menentukan data mana saja yang ingin ditampilkan dan bagaimana format output yang akan diterima oleh client.

Jadi bisa dibilang API Resource bertindak sebagai “penyaring” atau “formatter” sebelum data dikirimkan sebagai response API.

Kalau masih belum kebayang, tenang aja 😆. Nanti sambil praktik pasti langsung paham.

Untuk tahap awal, kita akan fokus membuat operasi CRUD pada tabel users terlebih dahulu.

1. Membuat API Resource

Buat Resource untuk User menggunakan perintah berikut:

php artisan make:resource UserResource

Setelah berhasil dijalankan, Laravel akan membuat file:

app/Http/Resources/UserResource.php

File inilah yang nantinya digunakan untuk mengatur format response data user yang dikirimkan oleh API.

2. Membuat Controller API

Karena model User sudah tersedia secara otomatis ketika project Laravel dibuat, kita hanya perlu membuat Controller.

Jalankan perintah berikut:

php artisan make:controller API/UserController

File controller akan dibuat pada lokasi:

app/Http/Controllers/API/UserController.php

Controller ini nantinya akan berisi seluruh logic CRUD untuk data user.

3. Membuat Route API

Selanjutnya buka file:

routes/api.php

Kemudian tambahkan kode berikut:

use App\Http\Controllers\API\UserController;
use Illuminate\Support\Facades\Route;

Route::apiResource('/users', UserController::class);

Pada kode di atas, kita menggunakan method apiResource() yang secara otomatis membuat seluruh route CRUD untuk resource users.

Artinya kita tidak perlu mendefinisikan route satu per satu secara manual.

4. Melihat Daftar Route yang Dibuat

Untuk memastikan route berhasil dibuat, jalankan perintah berikut:

php artisan route:list

Jika berhasil, Laravel akan menampilkan daftar endpoint seperti:

Nahh, hanya dengan satu baris apiResource(), Laravel langsung membuat seluruh endpoint CRUD yang kita butuhkan. Praktis banget kan? 😆

Pada langkah berikutnya kita akan mulai mengisi UserResource dan UserController agar endpoint-endpoint tersebut benar-benar bisa mengakses data dari database dan mengembalikan response JSON yang rapi. 🚀

Kalau tidak memakai apiResource maka kita perlu membuat route endpoint users satu persatu. Tentuu capek kan kalau begini😰

Route::get('/users', [UserController::class,'index']);
Route::get('/users/{id}', [UserController::class,'show']);
Route::post('/users', [UserController::class,'store']);
Route::put('/users/{id}', [UserController::class,'update']);
Route::delete('/users/{id}', [UserController::class,'destroy']);

Mendapatkan Semua Data Task dengan Method GET

Sekarang kita akan membuat endpoint pertama pada RESTful API kita, yaitu endpoint untuk menampilkan seluruh data task yang tersimpan di database.

Karena sebelumnya kita menggunakan apiResource(), maka ketika client mengirim request menggunakan method GET ke endpoint /api/tasks, Laravel akan secara otomatis menjalankan function index() yang ada pada TaskController.

1. Mengatur Output JSON Menggunakan TaskResource

Sebelum mengambil data dari database, kita akan membuat format output JSON terlebih dahulu menggunakan Resource.

Buka file TaskResource.php, kemudian ubah menjadi seperti berikut:

namespace App\Http\Resources;

use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;

class TaskResource extends JsonResource
{
    /**
     * Mengubah data menjadi format JSON
     */
    public function toArray(Request $request): array
    {
        return [
            'id'          => $this->id,
            'title'       => $this->title,
            'description' => $this->description,
            'status'      => $this->status,
            'deadline'    => $this->deadline,
            'created_at'  => $this->created_at,
            'updated_at'  => $this->updated_at,
        ];
    }
}

Resource digunakan untuk menentukan data apa saja yang akan ditampilkan kepada client.

Dengan menggunakan Resource, kita dapat menyembunyikan field yang tidak diperlukan dan membuat format response API menjadi lebih rapi dan konsisten.

2. Membuat Function Index pada TaskController

Selanjutnya buka file TaskController.php.

Karena kita menggunakan apiResource(), maka endpoint GET untuk mengambil seluruh data akan menggunakan function index().

Tambahkan kode berikut:

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use App\Http\Resources\TaskResource;
use App\Models\Task;

class TaskController extends Controller
{
    /**
     * Menampilkan seluruh data task
     */
    public function index()
    {
        $tasks = Task::all();

        return TaskResource::collection($tasks);
    }
}

Mari kita pahami kode di atas:

$tasks = Task::all();

Kode tersebut digunakan untuk mengambil seluruh data yang terdapat pada tabel tasks menggunakan Eloquent ORM.

Eloquent merupakan fitur ORM (Object Relational Mapping) bawaan Laravel yang memungkinkan kita berinteraksi dengan database menggunakan syntax PHP yang lebih mudah dibaca dibandingkan menulis query SQL secara manual.

Selanjutnya:

return TaskResource::collection($tasks);

Kode tersebut digunakan untuk mengubah seluruh data task yang telah diambil menjadi format JSON menggunakan TaskResource.

Dengan begitu, data yang dikirimkan ke client akan mengikuti format yang telah kita tentukan sebelumnya.

3. Menjalankan dan Menguji API

Setelah semua kode selesai dibuat, jalankan project Laravel menggunakan perintah:

php artisan serve

Kemudian buka aplikasi Postman.

Lakukan request berikut:

GET http://127.0.0.1:8000/api/tasks

Karena method GET digunakan untuk mengambil data, maka kita tidak perlu mengirimkan Request Body.

Klik tombol Send untuk mengirim request ke server.

4. Hasil Response

Jika berhasil, server akan mengembalikan response seperti berikut:

{
    "data": [
        {
            "id": 1,
            "title": "Belajar RESTful API",
            "description": "Mempelajari konsep dasar RESTful API",
            "status": "pending",
            "deadline": "2026-06-30",
            "created_at": "2026-06-01T10:00:00.000000Z",
            "updated_at": "2026-06-01T10:00:00.000000Z"
        },
        {
            "id": 2,
            "title": "Mengerjakan Challenge Backend",
            "description": "Menyelesaikan challenge pertemuan 9",
            "status": "completed",
            "deadline": "2026-06-15",
            "created_at": "2026-06-02T08:30:00.000000Z",
            "updated_at": "2026-06-02T08:30:00.000000Z"
        }
    ]
}

Pada response di atas terdapat beberapa bagian penting:

• data → kumpulan data task yang dikirimkan oleh server.
• id → identitas unik dari setiap task.
• title → judul task.
• description → deskripsi task.
• status → status pengerjaan task.
• deadline → batas waktu pengerjaan task.
• created_at → waktu task dibuat.
• updated_at → waktu terakhir task diperbarui.

Karena kita menggunakan TaskResource, maka hanya field yang kita definisikan pada Resource saja yang akan ditampilkan kepada client.

Kesimpulan

Selamat! 🎉

Kita telah berhasil membuat endpoint RESTful API pertama menggunakan method GET.

Pada praktikum ini kita mempelajari beberapa hal penting:

• Menggunakan Eloquent ORM untuk mengambil data dari database.
• Menggunakan TaskResource untuk mengatur format response JSON.
• Membuat function index() pada controller.
• Melakukan testing endpoint menggunakan Postman.

Sekarang client sudah dapat mengambil seluruh data task yang tersimpan pada database melalui endpoint:

GET /api/tasks

Pada langkah berikutnya kita akan membuat endpoint menggunakan method POST untuk menambahkan task baru ke dalam database. 🚀

Membuat Task Baru dengan Method POST

Setelah berhasil mengambil seluruh data task menggunakan method GET, sekarang kita akan membuat endpoint untuk menambahkan task baru ke dalam database menggunakan method POST.

Method POST digunakan ketika client ingin mengirim data ke server untuk membuat resource baru.

Karena kita menggunakan apiResource(), maka request POST ke endpoint /api/tasks akan otomatis menjalankan function store() pada TaskController.

1. Menyiapkan Model Task

Sebelum membuat data baru menggunakan Eloquent, kita perlu menentukan field mana saja yang boleh diisi secara massal (Mass Assignment).

Buka file Task.php, kemudian tambahkan property $fillable.

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    protected $fillable = [
        'title',
        'description',
        'status',
        'deadline',
    ];
}

Property $fillable digunakan untuk menentukan kolom yang boleh diisi menggunakan method create().

2. Membuat Function Store pada TaskController

Selanjutnya buka file TaskController.php, kemudian tambahkan function store() berikut.

namespace App\Http\Controllers\API;

use App\Models\Task;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class TaskController extends Controller
{
    /**
     * Menyimpan task baru
     */
    public function store(Request $request)
    {
        Task::create([
            'title'       => $request->title,
            'description' => $request->description,
            'status'      => $request->status,
            'deadline'    => $request->deadline,
        ]);

        return response()->json([
            'status' => true,
            'message' => 'Task created successfully'
        ]);
    }
}

Pada kode di atas:

Task::create(...)

digunakan untuk membuat data task baru menggunakan Eloquent ORM.

Data yang dikirim oleh client melalui Request akan disimpan ke tabel tasks sesuai dengan field yang telah ditentukan pada $fillable.

3. Melakukan Testing Menggunakan Postman

Jalankan aplikasi Laravel terlebih dahulu.

php artisan serve

Kemudian buka Postman dan buat request baru.

Endpoint

POST http://127.0.0.1:8000/api/tasks

Headers

Content-Type: application/json

Header tersebut digunakan untuk memberi tahu server bahwa data yang dikirim menggunakan format JSON.

Request Body

Pilih menu Body → Raw → JSON, kemudian masukkan data berikut:

{
    "title": "Mengerjakan Challenge Backend",
    "description": "Menyelesaikan challenge pertemuan 9",
    "status": "pending",
    "deadline": "2026-06-30"
}

Setelah itu klik tombol Send.

4. Hasil Response

Jika proses berhasil, maka server akan mengembalikan response seperti berikut:

{
    "status": true,
    "message": "Task created successfully"
}

Response tersebut menunjukkan bahwa data berhasil diterima dan disimpan ke dalam database.

5. Memastikan Data Berhasil Tersimpan

Untuk memastikan proses berhasil, buka database menggunakan phpMyAdmin atau aplikasi database lainnya.

Kemudian buka tabel tasks.

Jika berhasil, maka akan muncul data baru seperti berikut:

idtitlestatus1Mengerjakan Challenge Backendpending

Artinya task baru telah berhasil dibuat melalui RESTful API.

Kesimpulan

Selamat! 🎉

Kita telah berhasil membuat endpoint menggunakan method POST untuk menambahkan data baru ke database.

Pada praktikum ini kita mempelajari:

• Penggunaan method POST pada RESTful API.
• Penggunaan $fillable pada Eloquent.
• Membuat data baru menggunakan Task::create().
• Melakukan testing endpoint menggunakan Postman.

Sekarang API kita tidak hanya dapat membaca data, tetapi juga sudah mampu menambahkan data baru ke dalam database melalui endpoint:

POST /api/tasks

Pada langkah berikutnya kita akan mempelajari cara mengubah data task menggunakan method PATCH. 🚀

Mengupdate Task Berdasarkan ID dengan Method PATCH

Setelah berhasil membuat task baru menggunakan method POST, sekarang kita akan mempelajari cara memperbarui data task yang sudah ada menggunakan method PATCH.

Method PATCH digunakan ketika kita hanya ingin mengubah sebagian data dari sebuah resource. Berbeda dengan PUT yang biasanya digunakan untuk mengganti seluruh data, PATCH lebih cocok untuk update beberapa field saja.

Karena kita menggunakan apiResource(), maka request PATCH ke endpoint /api/tasks/{id} akan otomatis menjalankan function update() pada TaskController.

1. Membuat Function Update pada TaskController

Buka file TaskController.php, kemudian tambahkan function berikut:

public function update(Request $request, string $id)
{
    $task = Task::findOrFail($id);

    $task->update([
        'title' => $request->title,
        'description' => $request->description,
        'status' => $request->status,
        'deadline' => $request->deadline,
    ]);

    return response()->json([
        'status' => true,
        'message' => 'Task updated successfully'
    ]);
}

Mari kita pahami kode di atas.

$task = Task::findOrFail($id);

Kode tersebut digunakan untuk mencari task berdasarkan ID yang diberikan pada URL.

Jika data ditemukan, Laravel akan mengembalikan objek task tersebut. Namun jika data tidak ditemukan, Laravel akan otomatis mengembalikan response error 404 Not Found.

Selanjutnya:

$task->update([...]);

Kode tersebut digunakan untuk memperbarui data task yang ditemukan sebelumnya.

Karena kita menggunakan Eloquent ORM, proses update menjadi jauh lebih sederhana tanpa perlu menulis query SQL secara manual.

2. Melakukan Testing Menggunakan Postman

Buat request baru pada Postman.

Endpoint

PATCH http://127.0.0.1:8000/api/tasks/1

Headers

Content-Type: application/json

Request Body

{
    "title": "Belajar RESTful API Laravel",
    "description": "Mempelajari RESTful API menggunakan Laravel 12",
    "status": "completed",
    "deadline": "2026-06-30"
}

Kemudian klik tombol Send.

3. Hasil Response

Jika proses update berhasil, maka server akan mengembalikan response seperti berikut:

{
    "status": true,
    "message": "Task updated successfully"
}

Selanjutnya coba cek tabel tasks pada database.

Jika berhasil, maka data task dengan ID 1 akan berubah sesuai data yang baru dikirimkan.

Menghapus Task dengan Method DELETE

Selain membuat dan mengubah data, RESTful API juga memungkinkan kita untuk menghapus data menggunakan method DELETE.

Karena kita menggunakan apiResource(), maka request DELETE ke endpoint /api/tasks/{id} akan otomatis menjalankan function destroy() pada controller.

1. Membuat Function Destroy pada TaskController

Buka file TaskController.php, kemudian tambahkan function berikut:

public function destroy(string $id)
{
    $task = Task::findOrFail($id);

    $task->delete();

    return response()->json([
        'status' => true,
        'message' => 'Task successfully deleted'
    ]);
}

Mari kita pahami kode di atas.

$task = Task::findOrFail($id);

Digunakan untuk mencari task berdasarkan ID.

Kemudian:

$task->delete();

Digunakan untuk menghapus data task dari database.

Jika task berhasil ditemukan, maka data tersebut akan langsung dihapus dari tabel tasks.

2. Melakukan Testing Menggunakan Postman

Buat request baru pada Postman.

Endpoint

DELETE http://127.0.0.1:8000/api/tasks/1

Karena method DELETE tidak memerlukan body, kita hanya perlu mengirim request ke endpoint tersebut.

Kemudian klik tombol Send.

3. Hasil Response

Jika proses penghapusan berhasil, maka server akan mengembalikan response seperti berikut:

{
    "status": true,
    "message": "Task successfully deleted"
}

Selanjutnya buka tabel tasks pada database.

Jika task dengan ID 1 sudah tidak ditemukan, maka proses penghapusan berhasil dilakukan.

Kesimpulan

Selamat! 🎉

Pada praktikum ini kita telah berhasil mengimplementasikan operasi CRUD (Create, Read, Update, Delete) menggunakan RESTful API pada Laravel.

Beberapa hal yang telah dipelajari antara lain:

• Mengambil seluruh data menggunakan method GET.
• Membuat data baru menggunakan method POST.
• Mengubah data menggunakan method PATCH.
• Menghapus data menggunakan method DELETE.
• Menggunakan Eloquent ORM untuk berinteraksi dengan database.
• Menggunakan API Resource untuk menghasilkan response JSON yang lebih rapi dan terstruktur.
• Melakukan pengujian endpoint menggunakan Postman.

Dengan memahami materi ini, kalian sudah memiliki pondasi yang sangat penting dalam pengembangan Backend menggunakan Laravel. Hampir seluruh aplikasi modern saat ini menggunakan RESTful API sebagai jembatan komunikasi antara client dan server.

Terus eksplorasi, terus belajar, dan jangan takut mencoba hal baru. 🚀

AMCC — Learning by Doing, Learning by Teaching 💙

Ngulik RESTful API dari Nol Sampai CRUD Jalan was originally published in Amikom Computer Club on Medium, where people are continuing the conversation by highlighting and responding to this story.

Glosarium

Artificial Intelligence (AI)
Semua upaya membuat mesin bisa berperilaku cerdas dan mengambil keputusan layaknya manusia.

Machine Learning
Cabang AI yang memungkinkan sistem belajar dari data secara otomatis tanpa diprogram aturannya secara manual.

Deep Learning
Cabang Machine Learning yang menggunakan jaringan saraf tiruan berlapis-lapis untuk belajar dari data mentah yang kompleks.

Neural Network
Struktur komputasi yang terinspirasi otak manusia, terdiri dari neuron-neuron buatan yang saling terhubung dalam lapisan-lapisan.

Neuron
Unit pemrosesan terkecil dalam neural network. Menerima input, mengalikannya dengan bobot, lalu meneruskan hasilnya ke neuron berikutnya.

Layer (Lapisan)
Kumpulan neuron dalam satu tingkatan jaringan. Terdiri dari input layer, hidden layer, dan output layer.

Weight (Bobot)
Nilai numerik pada setiap koneksi antar neuron yang menentukan seberapa kuat pengaruh satu neuron terhadap neuron lainnya.

Forward Pass
Proses data mengalir dari input layer ke output layer untuk menghasilkan prediksi.

Loss / Error
Selisih antara prediksi model dengan jawaban yang benar. Semakin kecil loss, semakin akurat model.

Loss Function
Fungsi matematika yang mengukur seberapa jauh prediksi model dari jawaban yang benar.

Backpropagation
Algoritma yang mengirim error dari output kembali ke seluruh jaringan untuk mengetahui kontribusi kesalahan tiap neuron.

Gradient Descent
Algoritma optimasi yang menyesuaikan bobot jaringan secara bertahap agar loss semakin kecil.

Learning Rate
Nilai yang menentukan seberapa besar langkah penyesuaian bobot di setiap iterasi training.

Epoch
Satu kali putaran penuh di mana model memproses seluruh data training dari awal hingga akhir.

Batch Size
Jumlah data yang diproses sebelum model melakukan satu kali update bobot.

Iteration
Satu kali update bobot. Jumlah iteration per epoch = total data ÷ batch size.

Overfitting
Kondisi di mana model terlalu hafal data training sehingga gagal memprediksi data baru dengan akurat.

Early Stopping
Teknik menghentikan proses training otomatis ketika akurasi di data validasi tidak lagi meningkat.

Activation Function
Fungsi matematis pada setiap neuron yang menentukan apakah sinyal diteruskan atau tidak, memberi kemampuan memahami pola non-linear.

ReLU (Rectified Linear Unit)
Activation function paling populer. Nilai negatif diubah jadi 0, nilai positif tetap. Default untuk hidden layer.

Sigmoid
Activation function yang menghasilkan output antara 0–1. Cocok untuk klasifikasi dua kelas (biner).

Softmax
Activation function yang mengubah output menjadi probabilitas yang jumlahnya = 1. Dipakai untuk klasifikasi banyak kelas.

Tanh
Activation function dengan output antara -1 hingga 1. Mirip sigmoid tapi lebih baik untuk beberapa kasus RNN.

Leaky ReLU
Versi ReLU yang tidak mematikan neuron sepenuhnya pada nilai negatif. Solusi untuk masalah dying ReLU.

GELU
Activation function yang dipakai di model Transformer modern seperti BERT dan GPT. Lebih smooth dari ReLU.

Embedding
Teknik mengubah token kata menjadi vektor angka berdimensi tertentu agar bisa diproses neural network.

Parameter
Semua bobot dan bias dalam model yang dipelajari selama proses training.

ANN (Artificial Neural Network)
Arsitektur neural network paling dasar dengan koneksi penuh antar neuron di setiap lapisan. Cocok untuk data tabular.

CNN (Convolutional Neural Network)
Arsitektur yang dirancang untuk data spasial seperti gambar menggunakan operasi konvolusi untuk mendeteksi pola visual.

RNN (Recurrent Neural Network)
Arsitektur untuk data berurutan seperti teks. Punya memori jangka pendek karena output langkah sebelumnya diumpan balik sebagai input berikutnya.

Hidden State
Memori internal RNN yang menyimpan informasi dari langkah-langkah sebelumnya dalam sebuah sequence.

LSTM (Long Short-Term Memory)
Versi RNN yang lebih canggih dengan gate khusus untuk mengingat atau melupakan informasi, mengatasi masalah vanishing gradient.

Forget Gate
Komponen LSTM yang memutuskan informasi mana dari memori sebelumnya yang perlu dilupakan.

Input Gate
Komponen LSTM yang memutuskan informasi baru mana yang perlu disimpan ke memori.

Output Gate
Komponen LSTM yang memutuskan informasi mana dari memori yang diteruskan ke langkah berikutnya.

Transformer
Arsitektur revolusioner yang menggunakan mekanisme self-attention untuk memproses seluruh sequence sekaligus tanpa recurrence.

Self-Attention
Mekanisme dalam Transformer yang memungkinkan setiap token menilai seberapa relevan token lain dalam sequence terhadap dirinya.

LLM (Large Language Model)
Model bahasa berskala besar berbasis Transformer. Contoh: ChatGPT, Claude, Gemini.

GAN (Generative Adversarial Network)
Arsitektur yang terdiri dari dua jaringan yang berkompetisi: Generator (membuat data palsu) dan Discriminator (membedakan asli vs palsu).

Daftar Isi

1. Sejarah Deep Learning
2. Apa itu AI, Machine Learning, dan Deep Learning?
3. Apa itu Deep Learning?
4. Cara Kerja Deep Learning
5. Epoch dan Proses Training
6. Activation Function
7. Fungsi dan Penerapan
8. Jenis-Jenis Arsitektur Deep Learning
9. Visualisasi CNN
10. Praktikum

Sejarah Deep Learning

Deep Learning bukan teknologi yang lahir tiba-tiba. Perjalanannya panjang, penuh kegagalan, dan baru benar-benar bersinar di era modern ketika data dan komputasi akhirnya memadai.

1943 Neuron

Warren McCulloch dan Walter Pitts memperkenalkan model matematis pertama dari neuron biologis yang merupakan buatan pertama. Ide dasar otak bekerja dari sinyal listrik sederhana yang tersambung.

1958 Perceptron

Frank Rosenblatt menciptakan Perceptron, algoritma pertama yang bisa belajar dari data dan ini adalah cikal bakal Neural Network. Dunia sangat antusias tapi ternyata hanya bisa selesaikan masalah sederhana.

1969–1980 AI Winter Pertama

Minsky dan Papert membuktikan keterbatasan Perceptron. Pendanaan riset AI anjlok drastis. Periode ini dikenal sebagai AI Winter yaitu musim dingin kecerdasan buatan.

1986 Backpropagation

Geoffrey Hinton, Rumelhart, dan Williams mempopulerkan algoritma backpropagation dan ini kerap kali dipopulerkan. Jaringan berlapis kini bisa belajar merupakan fondasi Deep Learning modern.

1998 LeNet

Yann LeCun menciptakan LeNet, jaringan saraf konvolusional (CNN) pertama yang sukses mengenali tulisan tangan angka ini juga termasuk CNN pertama. Digunakan bank untuk baca cek.

2012 AlexNet

AlexNet milik Geoffrey Hinton menghancurkan kompetisi ImageNet dengan selisih akurasi 10%, juga titik balik sejarah. Era modern Deep Learning dimulai. GPU mulai dipakai untuk training model.

2017 Transformer

Google merilis paper Attention is All You Need. Arsitektur Transformer lahir dan menjadi dasar semua model bahasa modern seperti BERT, GPT, hingga LLM masa kini.

2022 hingga kini Era Generative AI

Seperti ChatGPT, Midjourney, Stable Diffusion, Claude, dan ratusan model lainnya membawa Deep Learning ke tangan jutaan pengguna biasa. AI bukan lagi milik peneliti saja.

Apa Bedanya AI, Machine Learning, dan Deep Learning ?

Ini pertanyaan yang paling sering bikin bingung. Jawabannya ketiganya bukan hal yang berbeda, melainkan tiga lingkaran yang bersarang satu sama lain.

Artificial Intelligence semua sistem yang bisa berpikir Machine Learning Belajar dari data Deep Learning Jaringan sarafberlapis-lapis

AI yaitu semua upaya membuat mesin bisa berperilaku cerdas termasuk program catur sederhana tahun 1950-an.

Machine Learning adalah AI yang belajar dari data bukan dari aturan yang ditulis manual oleh programmer.

Deep Learning adalah Machine Learning yang menggunakan jaringan saraf tiruan berlapis-lapis, mampu memproses data sangat kompleks seperti gambar, suara, dan bahasa.

Analoginya: bayangkan olahraga, sepak bola, dan tendangan bebas. Tendangan bebas adalah teknik dalam sepak bola, dan sepak bola adalah cabang olahraga. Tidak bisa dibalik karena ketiganya satu keluarga.

Apa itu Deep Learning?

Deep Learning adalah cabang Machine Learning yang terinspirasi cara kerja otak manusia. Ia menggunakan struktur berlapis yang disebut jaringan saraf tiruan (Artificial Neural Network) untuk belajar langsung dari data mentah tanpa perlu programmer menulis aturan satu per satu.

“Bukan kita yang mengajari komputer aturannya. Kita beri dia data, dan dia cari aturannya sendiri.”

Kenapa disebut “Deep”?

Kata deep merujuk pada banyaknya lapisan (layer) dalam jaringan. Semakin banyak lapisan, semakin kompleks pola yang bisa dipelajari. Model modern seperti GPT-4 memiliki ratusan lapisan dengan miliaran parameter.

Yuk kita analogikan…

Ketika kamu buka TikTok pertama kali pasti isinya random. Tapi TikTok mengamati diam-diam loh gaiss video mana yang kamu tonton sampai habis, mana yang diskip 3 detik, mana yang di-replay jam 2 malam. Dari ribuan sinyal itu, sistemnya membentuk gambaran tentang kamu loh bukan dari yang kamu bilang, tapi dari apa yang kamu lakukan.

Tidak ada karyawan TikTok yang duduk memilih video untukmu. Sistemnya belajar sendiri dari pola data jutaan pengguna. Itulah Deep Learning bekerja.

Cara Kerja Deep Learning

Mari kita bedah dari dalam. Sebuah neural network terdiri dari tiga bagian utama:

Alur Kerja: 5 Langkah

1. Forward Pass yaitu Data Masuk, Prediksi Keluar
   Data (gambar, teks, angka) dimasukkan ke layer pertama. Setiap neuron menerima input, mengalikannya dengan bobot (weight), menjumlahkan hasilnya, lalu meneruskan ke layer berikutnya. Proses ini berlangsung sampai output layer menghasilkan prediksi.
2. Hitung Loss yaitu muncul pertanyaan seberapa salah?
   Prediksi dibandingkan dengan jawaban benar. Selisihnya disebut loss atau error. Semakin besar loss, semakin jauh model dari kebenaran. Fungsi yang menghitung ini disebut loss function.
3. Backpropagation artinya Lakan mengacak sumber kesalahan
   Error dikirim balik dari output ke input. Setiap layer menghitung “seberapa besar kontribusi saya terhadap kesalahan ini?” menggunakan kalkulus diferensial (chain rule). Ini seperti review soal ujian cari tahu mana yang bikin salah.
4. Update Bobot (Gradient Descent)
   Setelah tahu seberapa salah tiap neuron, bobotnya disesuaikan menggunakan algoritma Gradient Descent. Bobot yang bikin salah dikurangi, yang tepat diperkuat. Learning rate menentukan seberapa besar langkah penyesuaian.
5. Ulangi
   Satu putaran melalui seluruh data training disebut satu epoch. Proses ini diulang ratusan hingga ribuan epoch sampai model cukup akurat. Makin banyak data dan epoch, makin pintar modelnya.

Epoch Mengukur Proses Belajar

Epoch adalah satu kali putaran penuh di mana model melihat seluruh data training. Bayangkan kamu mengerjakan 1 set soal latihan dari awal sampai akhir itu satu epoch.

Epoch 1 = model masih banyak salah. Epoch 100 = model sudah jauh lebih akurat. Epoch 1000 = model bisa jadi terlalu hafal data training (overfitting).

Visualisasi Akurasi per Epoch

Istilah Penting Terkait Epoch

• Batch Size
  Jumlah data yang diproses sebelum model update bobotnya. Epoch 1 dengan batch size 32 berarti model update sebanyak (total data / 32) kali.
• Iteration
  Satu kali update bobot. Jika data 1000 dan batch size 100, maka 1 epoch = 10 iteration.
• Overfitting
  Model terlalu banyak epoch, jadi hafal data training tapi gagal di data baru. Seperti hafal soal, bukan paham materinya.
• Early Stopping
  Teknik menghentikan training otomatis saat akurasi di data validasi tidak lagi meningkat.

Activation Function

Setiap neuron melakukan dua hal: menghitung jumlah input berbobot, lalu memutuskan apakah sinyal itu perlu diteruskan atau tidak. Keputusan itu dibuat oleh Activation Function.

Tanpa activation function, neural network hanya akan jadi persamaan linear biasa — tidak peduli seberapa banyak layernya. Activation function yang memberi kemampuan memahami pola non-linear yang kompleks.

Analogi: bayangkan lampu dimmer. Activation function menentukan apakah neuron “menyala penuh”, “menyala redup”, atau “mati” berdasarkan sinyal yang masuk.

ReLU

max(0, x)

Paling populer. Nilai negatif jadi 0, nilai positif tetap. Cepat dan efisien. Default untuk hidden layer.

Sigmoid

1 / (1 + e⁻ˣ)

Output antara 0–1. Cocok untuk output binary classification (ya/tidak, spam/bukan).

Softmax

eˣⁱ / Σeˣʲ

Output berupa probabilitas yang jumlahnya = 1. Dipakai di output layer untuk multi-class classification.

Tanh

tanh(x)

Output antara -1 hingga 1. Mirip sigmoid tapi zero-centered. Lebih baik untuk beberapa kasus RNN.

Leaky ReLU

max(0.01x, x)

Versi ReLU yang tidak “mematikan” neuron sepenuhnya. Solusi masalah dying ReLU.

GELU

x · Φ(x)

Dipakai di Transformer modern seperti BERT dan GPT. Lebih smooth dari ReLU, performa lebih baik di NLP.

Fungsi dan Penerapan Deep Learning

1. Computer Vision
   Face ID, filter kamera, CCTV pintar, deteksi kanker dari rontgen, self-driving car.
2. Speech Recognition
   Siri, Google Assistant, subtitle otomatis YouTube, voice-to-text keyboard.
3. Natural Language Processing
   LLM seperti ChatGPT, Claude, Gemini. Google Translate. Analisis sentimen komentar pelanggan.
4. Analisis Prediktif
   Deteksi fraud kartu kredit, prediksi harga saham, prediksi churn pelanggan, diagnosis penyakit.
5. Generative AI
   Midjourney, DALL-E (gambar), Suno (musik), ElevenLabs (suara), video synthesis.
6. Autonomous Systems
   Tesla Autopilot, drone navigasi otomatis, robot gudang, sistem trading algoritmik.

Catatan penting ya gaiss jadi ChatGPT, Claude, Gemini adalah produk yang berbeda-beda, tetapi kesemuanya dibangun di atas arsitektur yang sama yaitu Large Language Model (LLM) berbasis Transformer.

Jenis-Jenis Arsitektur Deep Learning

Berbeda jenis data membutuhkan arsitektur berbeda. Inilah yang dimaksud jenis-jenis Deep Learning setiap arsitektur punya cara kerja dan keunikan tersendiri.

ANN (Artificial Neural Network)

Arsitektur paling dasar. Semua neuron di satu layer terhubung ke semua neuron di layer berikutnya (fully connected). Cocok untuk data tabular sederhana seperti spreadsheet.

Hal unik: Fondasi dari semua arsitektur lainnya. Jika data kamu berupa angka-angka terstruktur (umur, pendapatan, skor), ANN biasanya sudah cukup.

Dipakai untuk: prediksi harga rumah, klasifikasi nasabah kredit, rekomendasi produk sederhana.

CNN (Convolutional Neural Network)

Dirancang khusus untuk data spasial seperti gambar. Menggunakan operasi konvolusi filter kecil yang meluncurdi atas gambar untuk mendeteksi pola tepi, tekstur, bentuk, hingga objek lengkap.

Parameter sharing satu filter digunakan di seluruh gambar, bukan tiap piksel punya bobot sendiri. Ini yang membuat CNN jauh lebih efisien dari ANN untuk gambar.

Dipakai untuk pengenalan wajah, deteksi objek (YOLO), klasifikasi gambar medis, filter AR.

RNN (Recurrent Neural Network)

Dirancang untuk data berurutan (sequential). Berbeda dari ANN/CNN, RNN punya memori output dari langkah sebelumnya diumpan balik sebagai input langkah berikutnya. Memiliki hidden state yang bertindak sebagai memori jangka pendek. Bisa memproses input dengan panjang yang bervariasi. Digunakan untuk prediksi time series, teks generasi sederhana, analisis sentimen.

LSTM (Long Short-Term Memory)

Versi lebih canggih dari RNN. Mengatasi masalah utama RNN vanishing gradient di mana informasi dari jauh ke belakang “terlupakan”. LSTM punya gate khusus untuk mengingat atau melupakan informasi seperti forget gate (apa yang dilupakan), input gate (apa yang diingat baru), output gate (apa yang diteruskan). Ini yang bikin LSTM bisa “ingat” konteks panjang. Biasanya digunakan untuk terjemahan mesin, prediksi saham jangka panjang, subtitling otomatis.

TransformerTransformer

Revolusi terbesar dalam Deep Learning modern. Diperkenalkan Google 2017 lewat paper Attention is All You Need Tidak menggunakan recurrence seperti RNN, tapi mekanisme self-attention yang memproses seluruh sequence sekaligus.

Self-attention memungkinkan setiap token melihat semua token lain sekaligus dan menilai seberapa relevan tiap kata terhadap kata lainnya. Inilah yang membuat ChatGPT, Claude, dan Gemini bisa memahami konteks panjang.

Digunakan untuk semua LLM modern seperti GPT, Claude, Gemini, BERT, terjemahan, code generation, image generation (Stable Diffusion).

GAN (Generative Adversarial Network)

Dua jaringan saling berkompetisi seperti Generator yang menciptakan data palsu dan Discriminator yang mendeteksi mana asli mana palsu. Keduanya terus saling mengalahkan hingga Generator menghasilkan output yang sangat realistis.

Konsep adversarial dua model berlawanan dalam satu sistem training. Ibaratnya pencetak uang palsu vs polisi, keduanya makin jago seiring waktu.

Digunakan untuk deepfake, generasi gambar wajah sintetis, augmentasi data medis, style transfer foto.

AutoencoderAutoencoder

Jaringan yang belajar mengkompresi data ke representasi yang lebih kecil (encoding), lalu merekonstruksinya kembali (decoding). Tidak membutuhkan label belajar secara unsupervised.

Representasi tengah atau biasa disebut bottleneck/latent space akan memaksa model memahami fitur-fitur paling penting dari data dan representasi ini bisa digunakan untuk tugas lain.

Dipakai untuk mendeteksi anomali, denoising gambar, kompresi data, rekomendasi sistem.

Visualisasi CNN — Bagaimana Gambar Diproses

CNN memproses gambar secara bertahap, dari fitur sederhana di lapisan awal hingga objek kompleks di lapisan akhir.

Lapisan konvolusi di awal mendeteksi tepi dan warna. Makin dalam, makin abstrak dari bentuk sederhana ke bagian tubuh, hingga akhirnya mengenali objek secara keseluruhan. MaxPooling di setiap tahap menyederhanakan representasi tanpa kehilangan informasi penting.

Praktikum RNN untuk Analisis Sentimen Teks

Nah sampai juga di sesi ini ya gaisss. Praktikum kita hari ini akan membangun model RNN (Recurrent Neural Network) untuk mengklasifikasikan sentimen review film apakah sebuah review bernada positif atau negatif. Dataset yang dipakai adalah IMDb Movie Reviews tersedia di TensorFlow. Selamat praktikum gaiss!

Selamat Belajar Deep Learning gaiss!

Deep Learning bukan ilmu yang harus ditakuti loh gaisss. Mulai dari konsep, bangun intuisi, lalu praktik itu yang kita gunakan setiap harii soo semangat belajarnyaa yaaaa!

#AMCC#DeepLearning#DataScience#MachineLearning#NeuralNetwork#CNN#AI#Python#TensorFlow

Yuk Kenalan sama Deep Learning! was originally published in Amikom Computer Club on Medium, where people are continuing the conversation by highlighting and responding to this story.

Halo IoT Gengs! 👋

Selamat datang kembali pada modul pelatihan #9 divisi Internet Of Things AMCC! Setelah di pertemuan sebelumnya kita berkenalan dengan Node-RED, sekarang saatnya kita naik level dengan mengaplikasikannya pada study case yang lebih menantang dan bernuansa Industrial Grade.

Pada pertemuan ke-9 ini, kita akan membangun Smart Lab & Server Room Protection System. Kita akan menggabungkan fungsi keamanan akses pintu (Security) dengan sistem tanggap darurat lingkungan (Safety) ke dalam satu dashboard Node-RED yang terpusat. Buckle up, and let’s dive in!

Table of Contents

· Let’s Talk About Smart Lab Protection
· Apa itu Smart Lab & Server Room Protection?
· Implementasi IoT dalam Laboratorium dan Ruang Server
· Keuntungan Implementasi IoT dalam Lab dan Ruang Server
· Skenario & Logika Sistem
· Hardware Time: Rangkaian Sensor & ESP32
· Library Arduino IDE
· The Code
· Building the Dashboard
· Penutup

Let’s Talk About Smart Lab Protection

Di dunia nyata, ruangan seperti laboratorium atau ruang server menyimpan aset yang sangat berharga. Ruangan ini memiliki dua ancaman utama:

1. Akses Tidak Sah: Orang yang tidak berkepentingan masuk dan merusak atau mencuri data/alat.
2. Kondisi Lingkungan Ekstrem: Ruang server sangat rentan terhadap overheat (suhu panas berlebih) dan risiko kebakaran (kebocoran gas/asap).

Oleh karena itu, kita butuh sebuah sistem terpusat yang bisa menangani kedua masalah ini sekaligus, dan Node-RED adalah “The Engine” yang sempurna untuk memantau semuanya secara real-time.

Apa itu Smart Lab & Server Room Protection?

Smart Lab & Server Room Protection adalah konsep pengamanan dan pemantauan ruangan kritis yang mengintegrasikan teknologi Internet of Things (IoT) untuk menjaga keselamatan aset fisik maupun data. Dengan menggunakan teknologi seperti mikrokontroler, pembaca kartu identitas (RFID), sensor lingkungan, dan aktuator, pengelola IT atau laboran dapat memantau kondisi ruangan, mengatur hak akses, dan merespons keadaan darurat secara real-time dari satu dashboard terpusat.

Implementasi IoT dalam Laboratorium dan Ruang Server

Implementasi IoT dalam ruang server atau laboratorium melibatkan penggunaan berbagai sensor dan aktuator yang dapat mengumpulkan serta mengeksekusi data secara otomatis. Berikut adalah beberapa aspek penting dari implementasi IoT dalam ruangan kritis:

• Sistem Keamanan Akses (Access Control): Mengganti kunci mekanis konvensional dengan sistem pintar berbasis RFID. Hanya staf atau mahasiswa yang memiliki kartu terdaftar yang dapat membuka pintu. Setiap upaya akses, baik yang berhasil maupun ditolak, akan tercatat dalam log sistem.
• Monitoring Suhu dan Kelembapan: Perangkat keras seperti server dan alat ukur laboratorium sangat sensitif terhadap panas. Sensor IoT dipasang untuk memantau suhu ruangan secara real-time. Jika suhu AC tidak stabil dan ruangan mulai memanas (overheat), admin akan langsung menerima peringatan.
• Deteksi Gas Berbahaya dan Asap: Kabel server yang overload atau bahan kimia di laboratorium memiliki risiko memicu korsleting hingga kebakaran. Sensor gas IoT dapat mendeteksi keberadaan asap sejak fase awal dan memberikan peringatan dini sebelum api membesar.
• Otomasi Tanggap Darurat (Evakuasi): IoT tidak hanya memantau, tetapi juga bertindak. Jika sensor mendeteksi kondisi bahaya (suhu ekstrem atau asap tebal), sistem secara otomatis dapat memerintahkan aktuator (seperti motor Servo) untuk membuka pintu secara permanen agar staf di dalam bisa segera berevakuasi tanpa terhalang pintu yang terkunci.
• Pemantauan Terpusat (Dashboard): Seluruh data dari berbagai lab atau ruang server dikirim melalui protokol jaringan (seperti MQTT) menuju satu dashboard antarmuka (misalnya menggunakan Node-RED), sehingga admin dapat memantau seluruh ekosistem gedung hanya dari satu layar monitor.

Keuntungan Implementasi IoT dalam Lab dan Ruang Server

• Keamanan Aset Maksimal: Mencegah pencurian dan sabotase perangkat keras dengan membatasi akses secara ketat hanya kepada pihak yang berwenang.
• Pencegahan Kerusakan Hardware: Deteksi overheat yang cepat memungkinkan pengelola untuk segera menyalakan pendingin cadangan atau mematikan server sementara, sehingga menghindari kerusakan permanen akibat panas berlebih.
• Peningkatan Efisiensi Manajemen: Pengelola IT tidak perlu lagi melakukan patroli keliling secara manual untuk mengecek suhu AC atau status kunci pintu di setiap ruangan, karena semuanya terpantau 24/7 secara digital.
• Keselamatan Keseluruhan (Safety First): Penggabungan sistem keamanan (kunci pintar) dengan keselamatan (sensor asap) meminimalisir jatuhnya korban jiwa, karena sistem memprioritaskan terbukanya akses keluar saat terjadi bencana.

Skenario & Logika Sistem

Sistem yang akan kita buat bekerja dengan alur yang cerdas namun menggunakan komponen yang efisien (hanya 1 Servo):

• Akses Utama Normal (RFID + Servo): Pintu ruangan terkunci secara default (0 derajat). Hanya tap kartu RFID terdaftar yang akan menggerakkan Servo Pintu untuk terbuka sementara (90 derajat) lalu mengunci kembali.
• Mode Evakuasi Darurat (DHT + Gas Sensor + Servo): Sensor akan terus memantau suhu dan kadar gas. Jika terdeteksi suhu ekstrem atau asap, sistem otomatis membunyikan peringatan di dashboard Node-RED dan memaksa Servo Pintu Utama terbuka secara permanen sebagai jalur evakuasi darurat hingga kondisi aman.

Hardware Time: Rangkaian Sensor & ESP32

Siapkan komponen tempur kalian dan hubungkan ke ESP32 sesuai pinout berikut. Hati-hati saat merangkai agar tidak terjadi korsleting!

• Modul RFID RC522: SDA (GPIO 5), SCK (GPIO 18), MOSI (GPIO 23), MISO (GPIO 19), RST (GPIO 22), 3.3V ke 3.3V ESP32.
• Sensor Gas MQ-2: VCC (Vin/5V), GND (GND), A0 (Analog Out) -> GPIO 34.
• Sensor DHT22: VCC (3.3V atau 5V), GND (GND), Data -> GPIO 4.
• Servo (Pintu Utama): VCC (Vin/5V), GND (GND), Signal -> GPIO 13.

Note: Jika pergerakan Servo membuat ESP32 kalian restart (karena kurang arus), sangat disarankan menggunakan sumber daya 5V eksternal terpisah khusus untuk Servo.

Library Arduino IDE

Pastikan kalian sudah menginstal library “sakti” berikut ini melalui Library Manager di Arduino IDE:

1. PubSubClient by Nick O’Leary (Untuk komunikasi MQTT)
2. DHT sensor library by Adafruit
3. MFRC522 by GithubCommunity (Untuk sensor RFID)
4. ESP32Servo by Kevin Harrington (Wajib pakai ini agar sinyal Servo stabil di ESP32)

The Code

Copy-paste kode di bawah ini. Jangan lupa ubah ssid, password, dan ganti UID_MASTER dengan kode UID dari kartu RFID kalian sendiri (bisa dicek di Serial Monitor saat kartu di-tap pertama kali).

#include <WiFi.h>
#include <PubSubClient.h>
#include <SPI.h>
#include <MFRC522.h>
#include <DHT.h>
#include <ESP32Servo.h>

// Konfigurasi Pin
#define MQ2PIN 34
#define DHTPIN 4
#define DHTTYPE DHT22
#define SS_PIN 5
#define RST_PIN 22
#define SERVO_PINTU_PIN 13

// Konfigurasi WiFi & MQTT
const char* ssid = "Vivov27";
const char* password = "1234567890";
const char* mqtt_server = "broker.hivemq.com";

// Inisialisasi Objek
WiFiClient espClient;
PubSubClient client(espClient);
MFRC522 rfid(SS_PIN, RST_PIN);
DHT dht(DHTPIN, DHTTYPE);
Servo servoPintu;

// Daftar UID yang diizinkan akses
String UID_AKSES[] = {
  "739419AB",
  "63454A06",
  "F3562010"
};

const int JUMLAH_KARTU = 3;

unsigned long lastMsg = 0;
bool modeDarurat = false;

// Fungsi cek UID
bool cekAkses(String uid) {
  for (int i = 0; i < JUMLAH_KARTU; i++) {
    if (uid == UID_AKSES[i]) {
      return true;
    }
  }
  return false;
}

void setup_wifi() {
  Serial.print("Connecting WiFi...");
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println(" Connected!");
}

void reconnect() {
  while (!client.connected()) {
    Serial.print("MQTT connecting...");

    String clientId = "AMCC-Lab-" + String(random(0xffff), HEX);

    if (client.connect(clientId.c_str())) {
      Serial.println("Connected!");
    } else {
      delay(3000);
    }
  }
}

void setup() {
  Serial.begin(115200);

  SPI.begin();
  rfid.PCD_Init();
  dht.begin();

  servoPintu.attach(SERVO_PINTU_PIN);

  // Posisi Default (Pintu Terkunci)
  servoPintu.write(0);

  setup_wifi();
  client.setServer(mqtt_server, 1883);
}

void loop() {

  if (!client.connected()) reconnect();
  client.loop();

  unsigned long now = millis();

  // 1. PENGIRIMAN DATA LINGKUNGAN & CEK KEAMANAN (Setiap 2 Detik)
  if (now - lastMsg > 2000) {

    lastMsg = now;

    float t = dht.readTemperature();
    int gasVal = analogRead(MQ2PIN);

    if (!isnan(t))
      client.publish("amcc/lab/suhu", String(t).c_str());

    client.publish("amcc/lab/gas", String(gasVal).c_str());

    Serial.printf("Suhu: %.2f C | Gas: %d \n", t, gasVal);

    // Logika Darurat Keamanan
    if (gasVal > 1500 || t > 35.0) {

      modeDarurat = true;

      servoPintu.write(90); // Paksa pintu terbuka untuk evakuasi

      client.publish(
        "amcc/lab/status",
        "BAHAYA: EVAKUASI! PINTU TERBUKA"
      );

    } else {

      if (modeDarurat) {
        servoPintu.write(0); // Kunci kembali jika sudah aman
        modeDarurat = false;
      }

      client.publish("amcc/lab/status", "AMAN");
    }
  }

  // 2. PEMBACAAN RFID UNTUK AKSES PINTU NORMAL
  // Hanya bisa baca RFID jika tidak dalam mode darurat
  if (!modeDarurat &&
      rfid.PICC_IsNewCardPresent() &&
      rfid.PICC_ReadCardSerial()) {

    String uid = "";

    for (byte i = 0; i < rfid.uid.size; i++) {
      uid += String(rfid.uid.uidByte[i] < 0x10 ? "0" : "");
      uid += String(rfid.uid.uidByte[i], HEX);
    }

    uid.toUpperCase();

    Serial.println("====================");
    Serial.println("RFID TERDETEKSI");
    Serial.println("UID : " + uid);
    Serial.println("====================");

    if (cekAkses(uid)) {

      Serial.println("AKSES DITERIMA");

      client.publish(
        "amcc/lab/rfid",
        "AKSES DITERIMA"
      );

      servoPintu.write(90); // Buka pintu
      delay(3000);          // Tahan 3 detik
      servoPintu.write(0);  // Kunci kembali

      client.publish(
        "amcc/lab/rfid",
        "PINTU TERKUNCI"
      );

    } else {

      Serial.println("AKSES DITOLAK");

      client.publish(
        "amcc/lab/rfid",
        "AKSES DITOLAK!"
      );
    }

    rfid.PICC_HaltA();
  }
}

Building the Dashboard

Setelah code berhasil di-upload dan Serial Monitor menampilkan tulisan “Connected!”, saatnya meracik antarmuka monitoring kita di Node-RED!

• Buka browser dan akses http://localhost:1880.
• Pastikan kalian sudah menginstal palette node-red-dashboard.
• Klik menu titik tiga di pojok kanan atas, lalu pilih Import.
• Copy-paste kode JSON di bawah ini ke dalam kolom import, lalu klik Import.

[
    {
        "id": "tab_amcc_lab",
        "type": "ui_tab",
        "name": "Smart Lab Monitor",
        "icon": "dashboard",
        "order": 1
    },
    {
        "id": "group_env",
        "type": "ui_group",
        "name": "Environment Status",
        "tab": "tab_amcc_lab",
        "order": 1,
        "disp": true,
        "width": "6"
    },
    {
        "id": "group_sec",
        "type": "ui_group",
        "name": "Security & Access",
        "tab": "tab_amcc_lab",
        "order": 2,
        "disp": true,
        "width": "6"
    },
    {
        "id": "broker_hivemq",
        "type": "mqtt-broker",
        "name": "HiveMQ Public",
        "broker": "broker.hivemq.com",
        "port": "1883"
    },
    {
        "id": "mqtt_in_suhu",
        "type": "mqtt in",
        "name": "Suhu Server",
        "topic": "amcc/lab/suhu",
        "qos": "0",
        "datatype": "auto-detect",
        "broker": "broker_hivemq",
        "x": 110,
        "y": 80,
        "wires": [["gauge_suhu"]]
    },
    {
        "id": "mqtt_in_gas",
        "type": "mqtt in",
        "name": "Kadar Gas",
        "topic": "amcc/lab/gas",
        "qos": "0",
        "datatype": "auto-detect",
        "broker": "broker_hivemq",
        "x": 100,
        "y": 140,
        "wires": [["gauge_gas", "chart_gas"]]
    },
    {
        "id": "mqtt_in_rfid",
        "type": "mqtt in",
        "name": "Log Akses",
        "topic": "amcc/lab/rfid",
        "qos": "0",
        "datatype": "auto-detect",
        "broker": "broker_hivemq",
        "x": 100,
        "y": 240,
        "wires": [["text_rfid"]]
    },
    {
        "id": "mqtt_in_status",
        "type": "mqtt in",
        "name": "Status Lab",
        "topic": "amcc/lab/status",
        "qos": "0",
        "datatype": "auto-detect",
        "broker": "broker_hivemq",
        "x": 100,
        "y": 300,
        "wires": [["text_status"]]
    },
    {
        "id": "gauge_suhu",
        "type": "ui_gauge",
        "group": "group_env",
        "order": 1,
        "title": "Suhu Ruangan",
        "label": "°C",
        "format": "{{value}}",
        "min": 0,
        "max": "50",
        "colors": ["#00b500", "#e6e600", "#ca3838"],
        "x": 320,
        "y": 80,
        "wires": []
    },
    {
        "id": "gauge_gas",
        "type": "ui_gauge",
        "group": "group_env",
        "order": 2,
        "title": "Level Gas/Asap",
        "label": "RAW",
        "format": "{{value}}",
        "min": 0,
        "max": "4095",
        "colors": ["#00b500", "#e6e600", "#ca3838"],
        "x": 320,
        "y": 140,
        "wires": []
    },
    {
        "id": "chart_gas",
        "type": "ui_chart",
        "group": "group_env",
        "order": 3,
        "title": "Grafik Kebocoran",
        "label": "Gas",
        "chartType": "line",
        "x": 330,
        "y": 180,
        "wires": [[]]
    },
    {
        "id": "text_rfid",
        "type": "ui_text",
        "group": "group_sec",
        "order": 1,
        "title": "Akses Terakhir:",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "x": 330,
        "y": 240,
        "wires": []
    },
    {
        "id": "text_status",
        "type": "ui_text",
        "group": "group_sec",
        "order": 2,
        "title": "Status Keamanan:",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "x": 330,
        "y": 300,
        "wires": []
    }
]

• Klik tombol Deploy berwarna merah di pojok kanan atas.
• Buka dashboard kalian di http://localhost:1880/ui. Coba tap kartu RFID untuk melihat log akses, lalu dekatkan korek api gas ke sensor MQ-2 untuk melihat pintu otomatis terbuka saat mode darurat menyala!

Penutup

Gimana IoT Gengs? Lewat satu mikrokontroler ESP32 dan satu aktuator Servo, kita sudah berhasil membuat sistem cerdas yang tidak hanya mengamankan ruangan, tapi juga menyelamatkan nyawa saat terjadi bahaya kebakaran atau kebocoran gas. Efisien banget, kan?

Kalau ada yang error saat ngoding, jangan panik. Debug is part of the fun! Langsung aja kita diskusikan di kelas.

Sampai jumpa………

AMCC

Learning By Doing

Learning By Teaching

Smart Lab & Server Room Protection System with Node-RED was originally published in Amikom Computer Club on Medium, where people are continuing the conversation by highlighting and responding to this story.

Halo Sobat AMCC 😍
Gimana nih kabarnya, semoga tetap sehat ya 😁
Kita balik lagi ke pelatihan kita nih. Pada pelatihan sebelumnya kita sudah belajar membuat Halaman Profil yang bagus nih. Setelah ini, kita akan lanjut ke materi yang tentunya lebih seru lagi dong 👍

Pada pelatihan kali ini, kita akan belajar menerapkan Firebase pada aplikasi yang sudah dibuat. Pasti teman-teman bertanya, Apa itu Firebase ? Fitur-fitur apa aja sih yang ada di dalamnya ?

Daftar isi

· Apa itu Firebase ?
∘ Keunggulan Firebase
· Fitur dalam Firebase
∘ A. Firebase Authentication
∘ B. Cloud Firestore
∘ C. Firebase Storage
· Persiapan Project
· Membuat Project di Firebase
· Install Firebase CLI dan FlutterFire CLI
· Install Dependencies (Library yang dibutuhkan)
· Inisialisasi Firebase / Langkah Awal Konfigurasi Firebase
· Membuat Authentication Services
· Menerapkan Authentication Service pada Halaman Register dan Login
∘ Halaman Register
∘ Halaman Login
· Menampilkan data akun di Profile Page
· Konfigurasi pada Firebase
∘ Authentication
∘ Firestore Rules
∘ Membuat data untuk user (Optional tapi disarankan untuk awal)
· Hasil Proyek
· Materi Bonus : Kondisi Foto Profil

Sebelum lanjut ke penarapannya kita akan membedah terlebih dahulu tentang Firebase.

Apa itu Firebase ?

Firebase adalah suatu platform Backend-as-a-Service (BaaS) yang dikembangkan oleh Google untuk membantu developer membangun suatu aplikasi website, Android, IOS dan Flutter tanpa harus membuat backend dari nol.

Simplenya, Firebase adalah sebuah layanan yang menyediakan berbagai fitur antara lain login pengguna, penyimpanan data dan file, notifikasi dan analisis aplikasi.

Keunggulan Firebase

• Tidak perlu membuat server backend sendiri
• Mudah diintegrasikan dengan Flutter, Android, iOS, dan Web.
• Data tersimpan di cloud.
• Mendukung sinkronisasi data secara real-time.
• Scalable untuk aplikasi kecil hingga besar.

Fitur dalam Firebase

Berikut adalah beberapa fitur firebase yang akan kita gunakan untuk mengembangkan aplikasi :

A. Firebase Authentication

Firebase Authentication sesuai dengan namanya digunakan untuk authentication (login pengguna). Fiturnya terdiri dari Login Email & Password, Google, Facebook, Github, Apple, dan Nomor Telepon.

Contoh penggunaannya

• Register
• Login
• Logout
• Reset Password

B. Cloud Firestore

Cloud Firestore adalah tempat untuk menyimpan data pada aplikasi kita. Kelebihan dari Cloud Firestore adalah Real Time, Cepat, Mendukung query kompleks, Offline persistence.

C. Firebase Storage

Kalau Cloud Firestore adalah tempat untuk menyimpan data pada aplikasi kita, maka Firebase Storage akan membantunya dalam menyimpan file. Contoh file yang biasanya disimpan adalah Foto Profil, Dokumen PDF, Video dan Audio.

Okay teman-teman, gimana nih setelah mempelajari materi terkait Firebase.

Apakah bingung atau semakin penasaran nih ? 🤔🤔🤔
Selanjutnya, kita akan langsung saja lanjut ke sesi Praktikum.

Sebelum melakukan sesi praktikum, ada beberapa hal yang harus teman-teman persiapkan yaitu :

• Siap untuk belajar hal baru
• Persiapan waktu luang
• Persiapan project sebelumnya apabila belum selesai

Persiapan Project

Bagi teman-teman yang berhalangan hadir atau proyek pelatihan kemarin belum selesai, bisa menyalin proyek pertemuan sebelumnya.

git clone -b pertemuan-8 https://github.com/amccamikom/amcc-mobile-2025.git pertemuan-9

Membuat Project di Firebase

Dikarenakan kita akan menggunakan firebase dalam login user, penyimpanan data dan foto, maka kita harus membuat project baru. Langkah-langkah untuk membuat projectnya, yaitu :

• Buka browser kesukaan teman-teman, lalu cari “Firebase”.
• Teman-teman bisa klik website yang paling atas yaitu firebase.google.com

• Pada bagian pojok atas, terdapat tombol bertuliskan “Buka Konsol” atau “Open Console” itu di klik saja.

• Pada tampilan ini, teman-teman bisa klik “Create a new Firebase project” untuk membuat project baru.

• Berikan nama project yang teman-teman inginkan, pada tampilan diatas aku memberikan nama “edutrack” sesuai dengan aplikasi kita.
• Jika sudah jadi, tampilannya akan seperti ini.

Install Firebase CLI dan FlutterFire CLI

Sebelum menambahkan firebase di aplikasi kita, terdapat beberapa langkah yang harus dilakukan yaitu :

• Install Firebase CLI dan FlutterFire CLI

npm install -g firebase-tools

NB : Pastikan node js sudah terinstall di komputer/laptop teman-teman. Apabila belum menginstal nodeJS bisa download melalui link ini : https://nodejs.org/en/download

• Login Firebase

firebase login

• Install FlutterFire CLI

dart pub global activate flutterfire_cli

• Konfigurasi Firebase ke Flutter

flutterfire configure

Fun Fact 🤔
Kode flutterfire configure akan menghasilkan file firebase_options.dart di folder lib

Install Dependencies (Library yang dibutuhkan)

Kita perlu menginstall beberapa library yang dibutuhkan seperti firebase_core, firebase_auth, cloud_firestore

• Firebase Core

flutter pub add firebase_core 

• Firebase Auth

flutter pub add firebase_auth

• Cloud Firestore

flutter pub add cloud_firestore

Atau bisa diinstall sekaligus dengan kode di bawah ini

flutter pub add firebase_core firebase_auth cloud_firestore

Inisialisasi Firebase / Langkah Awal Konfigurasi Firebase

Sebelum kita menerapkan lebih jauh firebase di project kita, terdapat konfigurasi awal yang harus dilakukan di halaman utama project kita.

Teman-teman bisa buka file lib/main.dart. Berikut adalah kode yang perlu ditambahkan.

• Menambahkan library firebase_core dan firebase_options

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

• Mengubah fungsi main menjadi asynchronous untuk mendukung penggunaan firebase

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
  );
  
  runApp(const MyApp());
}

Membuat Authentication Services

Selanjutnya, kita akan membuat Authentication Service. Sebelum lanjut, aku mau jelasin secara singkat apa itu service ?

Service secara singkat adalah kode program yang melatar belakangi suatu aksi.

Contoh penerapannya adalah pada saat kita login akun. Nah, kita tidak tahu proses apa yang dilakukan di belakangnya karena dihandle oleh service. Tiba-tiba sudah masuk ke halaman selanjutnya.

Lanjut, kita akan membuat Authentication Service. Langkah-langkahnya adalah

• Buatlah folder dengan nama services di dalam lib
• Buat file dengan nama auth_service.dart
• Nanti hasilnya akan seperti ini

• Kemudian, kita akan mengisi file program auth_service

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  Future<void> register({
    required String name,
    required String email,
    required String password,
    required String gender,
  }) async {
    UserCredential userCredential =
        await _auth.createUserWithEmailAndPassword(
      email: email,
      password: password,
    );

    final uid = userCredential.user!.uid;

    await _firestore.collection('users').doc(uid).set({
      'uid': uid,
      'name': name,
      'email': email,
      'gender': gender,
      'role': 'Mahasiswa',
      'createdAt': FieldValue.serverTimestamp(),
    });
  }

  Future<void> login({
    required String email,
    required String password,
  }) async {
    await _auth.signInWithEmailAndPassword(
      email: email,
      password: password,
    );
  }

  Future<void> logout() async {
    await _auth.signOut();
  }

  Future<Map<String, dynamic>?> getUserData() async {
    final uid = _auth.currentUser!.uid;

    final doc = await _firestore.collection('users').doc(uid).get();

    return doc.data();
  }
}

Menerapkan Authentication Service pada Halaman Register dan Login

Halaman Register

Pada halaman register, terdapat beberapa perubahan yang perlu kita lakukan yaitu :

• Menambahkan controller untuk name dan gender

final TextEditingController _nameController = TextEditingController(); // name
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();

String? selectedGender; // gender

• Membuat fungsi register dengan penggunaan AuthService

  final AuthService authService = AuthService(); // Membuat objek authService
  bool isLoading = false; // Loading status

  Future<void>register() async {
    // Melakukan deklarasi awal bahwa loading bernilai benar
    setState(() {
      isLoading = true;
    });

    try {
      // Melakukan akses ke fungsi register di authService
      await authService.register(
        name: _nameController.text.trim(),
        email: _emailController.text.trim(),
        password: _passwordController.text.trim(),
        gender: selectedGender!
      );
      
      // Jika tidak ada error maka lanjut ke tampilan login.
      if(!mounted) return;
      
      Navigator.pushReplacementNamed(context, '/login');
    } catch(e) {
      String message;
      
      // Pesan error yang ditampilkan
      switch (e) {
        case 'email-already-in-use':
          message = "Email sudah terdaftar.";
          break;

        case 'weak-password':
          message = "Password minimal 6 karakter.";
          break;

        case 'invalid-email':
          message = "Format email tidak valid.";
          break;

        default:
          message = "Registrasi gagal. Silakan coba kembali.";
      }
      
      // Menampilkan dialog apabila terjadi kesalahan pada registrasi akun
      showDialog(
        context: context,
        builder: (_) => AlertDialog(
          title: Text(
            "Registrasi Gagal",
            style: GoogleFonts.poppins(
              fontWeight: FontWeight.w600,
            ),
          ),
          content: Text(
            message,
            style: GoogleFonts.poppins(
              fontWeight: FontWeight.w400,
            ),
          ),
        ),
      );
    }
    
    // Memberikan status bahwa loading sudah selesai
    setState(() {
      isLoading = false;
    });
  }

• Menambahkan tampilan untuk input Nama Lengkap di halaman register

buildTextField(label: 'Nama Lengkap', hintText: 'Masukkan nama lengkap', controller: _nameController),
const SizedBox(height: 20),

• Menambahkan tampilan untuk input Jenis Kelamin

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class GenderOptions extends StatelessWidget {
  final String? selectedGender;
  final ValueChanged<String?> onChanged;

  const GenderOptions({
    super.key,
    required this.selectedGender,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "Jenis Kelamin",
          style: GoogleFonts.poppins(
            fontWeight: FontWeight.bold,
            fontSize: 14,
          ),
        ),
        const SizedBox(height: 8),

        DropdownButtonFormField<String>(
          initialValue: selectedGender,
          decoration: InputDecoration(
            hintText: "Pilih jenis kelamin",
            contentPadding: const EdgeInsets.symmetric(
              horizontal: 16,
              vertical: 14,
            ),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12),
              borderSide: const BorderSide(
                color: Color(0xFFE0E0E0),
              ),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12),
              borderSide: const BorderSide(
                color: Colors.blue,
                width: 2,
              ),
            ),
          ),
          items: const [
            DropdownMenuItem(
              value: 'Laki-laki',
              child: Text('Laki-laki'),
            ),
            DropdownMenuItem(
              value: 'Perempuan',
              child: Text('Perempuan'),
            ),
          ],
          onChanged: onChanged,
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'Jenis kelamin wajib dipilih';
            }
            return null;
          },
        ),
      ],
    );
  }
}

• Cara menggunakannya pada halaman register

const SizedBox(height: 20),
GenderOptions(
  selectedGender: selectedGender,
  onChanged: (value) {
    setState(() {
      selectedGender = value;
    });
  },
),

• Membuat tombol Daftar berfungsi dengan register yang sudah dibuat

SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    onPressed: isLoading ? null : register,
    style: ElevatedButton.styleFrom(
      backgroundColor: const Color(0xFF3254FD),
      padding: const EdgeInsets.symmetric(vertical: 16),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    ),
    child: Text(isLoading ? 'Loading...' : 'Daftar', style:GoogleFonts.poppins(fontSize: 18, fontWeight: FontWeight.w600, color: Colors.white)),
  ),
),

Halaman Login

Pada halaman login, kita akan melakukan perubahan untuk dihubungkan dengan firebase.

• Hapus kode di bawah ini karena sudah tidak digunakan

static List<Map<String, String>> userList = []; 

static void addUser(String email, String password) {
  userList.add({
    'email': email,
    'password': password,
  });
}

static bool isUserValid(String email, String password) {
  return userList.any((user) => 
    user['email'] == email && user['password'] == password
  );
}

• Membuat fungsi login dengan penggunaan AuthService

  final AuthService authService = AuthService(); // Membuat objek authService
  bool isLoading = false; // Loading status

    Future<void>login() async {
    setState(() {
      isLoading = true;
    });

    try {
      // Melakukan akses ke fungsi login di authService
      await authService.login(
        email: _emailController.text.trim(),
        password: _passwordController.text.trim(),
      );

      // Jika tidak ada error maka lanjut ke tampilan home.
      if(!mounted) return;

      Navigator.pushReplacementNamed(context, '/home');
    } catch(e) {
      String message;

      // Pesan error yang ditampilkan
      switch (e) {
        case 'invalid-credential':
          message =
              "Email atau password yang Anda masukkan salah. Silakan coba lagi.";
          break;

        case 'network-request-failed':
          message =
              "Tidak dapat terhubung ke internet. Periksa koneksi Anda.";
          break;

        case 'too-many-requests':
          message =
              "Terlalu banyak percobaan login. Silakan coba beberapa saat lagi.";
          break;

        default:
          message =
              "Terjadi kesalahan saat proses login. Silakan coba kembali.";
      }
      
      // Menampilkan dialog apabila terjadi kesalahan pada login akun
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text(
            "Login Gagal",
            style: GoogleFonts.poppins(
              fontWeight: FontWeight.w600,
            ),
          ),
          content: Text(
            message,
            style: GoogleFonts.poppins(
              fontWeight: FontWeight.w400,
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text(
                "OK",
                style: GoogleFonts.poppins(),
              ),
            ),
          ],
        ),
      );
    }
    
    // Memberikan status bahwa loading sudah selesai
    setState(() {
      isLoading = false;
    });
  }

• Membuat tombol Masuk berfungsi dengan login yang sudah dibuat

SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    onPressed: isLoading ? null : login,
    style: ElevatedButton.styleFrom(
      backgroundColor: const Color(0xFF3254FD),
      padding: const EdgeInsets.symmetric(vertical: 16),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    ),
    child: Text(isLoading ? 'Loading...' : 'Masuk', style:GoogleFonts.poppins(fontSize: 18, fontWeight: FontWeight.w600, color: Colors.white)),
  ),
),

Menampilkan data akun di Profile Page

Setelah kita berhasil untuk menerapkan firebase di halaman Login dan Register, langkah selanjutnya yang perlu dilakukan adalah menampilkan data di Profile Page. Data yang akan ditampilkan adalah Nama Lengkap, Role / Status, Email, Hobi, No. Handphone.

• Mengubah halaman Profil yang sebelumnya Stateless Widget menjadi Statefull Widget

import 'package:flutter/material.dart';

class ProfilePage extends StatefulWidget {
  const ProfilePage({super.key});

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

• Membuat fungsi untuk load data dan logout dengan menggunakan authService

  final AuthService authService = AuthService();

  late Future<Map<String, dynamic>?> userFuture;

  @override
  void initState() {
    super.initState();
    userFuture = authService.getUserData();
  }

  Future<void> logout() async {
    await authService.logout();

    if (!mounted) return;

    Navigator.of(context, rootNavigator: true).pushNamedAndRemoveUntil(
      '/login',
      (route) => false,
    );
  }

• Membuat tampilan yang dinamis (karena mengambil data dari Firebase)

body: FutureBuilder<Map<String, dynamic>?>(
        future: userFuture,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return const Center(child: Text('Gagal memuat data profil'));
          }

          if (!snapshot.hasData || snapshot.data == null) {
            return const Center(child: Text('Data profil tidak ditemukan'));
          }

          final data = snapshot.data!;

          final name = data['name'] ?? '-';
          final email = data['email'] ?? '-';
          final hobby = data['hobby'] ?? '-';
          final gender = data['gender'] ?? 'Laki-Laki';
          final phone = data['phone'] ?? '-';
          final role = data['role'] ?? 'Mahasiswa';

          final infoItems = [
            (
              Icons.mail_outline,
              'Email',
              email,
              email != '-' ? 'mailto:$email' : null,
            ),
            (
              Icons.favorite_border,
              'Hobi',
              hobby,
              null,
            ),
            (
              Icons.phone_outlined,
              'No Handphone',
              phone,
              phone != '-' ? 'tel:$phone' : null,
            ),
          ];

          return SingleChildScrollView(
            padding: const EdgeInsets.symmetric(horizontal: 24),
            child: Column(
              children: [
                const SizedBox(height: 20),

                CircleAvatar(
                  radius: 65,
                  backgroundImage: AssetImage(
                    gender == 'Perempuan'
                      ? 'assets/female_profile.jpg'
                      : 'assets/male_profile.jpg',
                  ),
                  backgroundColor: const Color(0xFFEFEFEF),
                ),

                const SizedBox(height: 20),

                Text(
                  name,
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),

                const SizedBox(height: 8),

                Text(
                  role,
                  style: const TextStyle(
                    fontSize: 16,
                    color: Colors.black87,
                  ),
                ),

                const SizedBox(height: 40),

                ...infoItems.map(
                  (item) => _InfoCard(
                    icon: item.$1,
                    title: item.$2,
                    value: item.$3,
                    uriStr: item.$4,
                  ),
                ),

                const SizedBox(height: 20),

                SizedBox(
                  width: double.infinity,
                  height: 52,
                  child: ElevatedButton.icon(
                    onPressed: logout,
                    icon: const Icon(Icons.logout),
                    label: const Text(
                      'Logout',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.red,
                      foregroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),

Nanti hasil akhirnya akan seperti ini

import 'package:edutrack_app/services/auth_service.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class ProfilePage extends StatefulWidget {
  const ProfilePage({super.key});

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  final AuthService authService = AuthService();

  late Future<Map<String, dynamic>?> userFuture;

  @override
  void initState() {
    super.initState();
    userFuture = authService.getUserData();
  }

  Future<void> logout() async {
    await authService.logout();

    if (!mounted) return;

    Navigator.of(context, rootNavigator: true).pushNamedAndRemoveUntil(
      '/login',
      (route) => false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,

      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        title: const Text(
          'Profile',
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 22,
          ),
        ),
        centerTitle: true,
      ),

      body: FutureBuilder<Map<String, dynamic>?>(
        future: userFuture,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return const Center(child: Text('Gagal memuat data profil'));
          }

          if (!snapshot.hasData || snapshot.data == null) {
            return const Center(child: Text('Data profil tidak ditemukan'));
          }

          final data = snapshot.data!;

          final name = data['name'] ?? '-';
          final email = data['email'] ?? '-';
          final hobby = data['hobby'] ?? '-';
          final gender = data['gender'] ?? 'Laki-Laki';
          final phone = data['phone'] ?? '-';
          final role = data['role'] ?? 'Mahasiswa';

          final infoItems = [
            (
              Icons.mail_outline,
              'Email',
              email,
              email != '-' ? 'mailto:$email' : null,
            ),
            (
              Icons.favorite_border,
              'Hobi',
              hobby,
              null,
            ),
            (
              Icons.phone_outlined,
              'No Handphone',
              phone,
              phone != '-' ? 'tel:$phone' : null,
            ),
          ];

          return SingleChildScrollView(
            padding: const EdgeInsets.symmetric(horizontal: 24),
            child: Column(
              children: [
                const SizedBox(height: 20),

                CircleAvatar(
                  radius: 65,
                  backgroundImage: AssetImage('assets/profil.jpg',),
                  backgroundColor: const Color(0xFFEFEFEF),
                ),

                const SizedBox(height: 20),

                Text(
                  name,
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),

                const SizedBox(height: 8),

                Text(
                  role,
                  style: const TextStyle(
                    fontSize: 16,
                    color: Colors.black87,
                  ),
                ),

                const SizedBox(height: 40),

                ...infoItems.map(
                  (item) => _InfoCard(
                    icon: item.$1,
                    title: item.$2,
                    value: item.$3,
                    uriStr: item.$4,
                  ),
                ),

                const SizedBox(height: 20),

                SizedBox(
                  width: double.infinity,
                  height: 52,
                  child: ElevatedButton.icon(
                    onPressed: logout,
                    icon: const Icon(Icons.logout),
                    label: const Text(
                      'Logout',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.red,
                      foregroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

class _InfoCard extends StatelessWidget {
  final IconData icon;
  final String title;
  final String value;
  final String? uriStr;

  const _InfoCard({
    required this.icon,
    required this.title,
    required this.value,
    this.uriStr,
  });

  Future<void> _launch(BuildContext context) async {
    if (uriStr == null) return;

    final uri = Uri.parse(uriStr!);

    try {
      final success = await launchUrl(
        uri,
        mode: LaunchMode.externalApplication,
      );

      if (!success && context.mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Tidak dapat membuka: $value')),
        );
      }
    } catch (e) {
      if (context.mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Tidak dapat membuka: $value')),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: uriStr != null ? () => _launch(context) : null,
      child: Container(
        margin: const EdgeInsets.only(bottom: 16),
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
        decoration: BoxDecoration(
          color: const Color(0xFFF6F6F6),
          borderRadius: BorderRadius.circular(12),
        ),
        child: Row(
          children: [
            Icon(icon, color: const Color(0xFF3B5998), size: 28),
            const SizedBox(width: 20),
            Flexible(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    value,
                    style: const TextStyle(fontSize: 14, color: Colors.black87),
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Konfigurasi pada Firebase

Setelah kita menerapkan penggunaan firebase di project kita, terdapat langkah selanjutnya yang sangat penting. Langkah selanjutnya yaitu Konfigurasi pada Firebase kita. Untuk langkah-langkahnya adalah sebagai berikut :

Authentication

• Langkah yang pertama yaitu masuk ke Firebase Console > Klik nama project > Security > Authentication > Get started > Sign-in method
• Kemudian aktifkan Email/Password

• Firebase sudah bisa dipakai untuk membuat akun dan login user dengan email dan password.
• Tambahkan data user contoh dengan email (putri@gmail.com) dan password (putri123)
• Nanti hasilnya seperti ini

Firestore Rules

Selanjutnya kita akan membuat peraturan yang harus ditaati saat ingin menyimpan data.

• Masuk ke Firestore > Rules
• Masukkan kode di bawah ini

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {

    match /users/{userId} {
      allow create: if request.auth != null
                    && request.auth.uid == userId;

      allow read, update, delete: if request.auth != null
                                  && request.auth.uid == userId;
    }
  }
}

Membuat data untuk user (Optional tapi disarankan untuk awal)

• Langkah yang pertama yaitu masuk ke Firebase Console > Klik nama project > Databases & Storage > Firestore > Create database
• Selanjutnya, kita akan membuat database. Pilih edisi Standard edition > Pilih lokasi asia-southeast2 (Jakarta) > Pilih Start in production mode
• Pilih Data > Start collection

• Untuk mengisi ID secara manual, kita perlu mendapatkan User UID dari user yang sudah dibuat
• Kemudian isi struktur tabel sesuai data di bawah ini :

• Nanti contoh hasilnya akan seperti ini

Hasil Proyek

Selamat 🥳🥳🥳, karena sudah berhasil menghubungkan Aplikasi Flutter dengan Firebase

Gimana nih teman-teman ? Apakah materinya seru ?
Semoga materi yang teman-teman pelajari hari ini dapat bermanfaat untuk kedepannya.

See you on next time, Good Bye 🫡🤗✨

Materi Bonus : Kondisi Foto Profil

Halo sobat Mobile Rangers, aku punya materi tambahan nih bagi kamu yang masih penasaran. Teman-teman sadar nggak sih bahwa gambar profil yang ditampilkan itu tetap ?

Nah, untuk itu aku akan kasih cara supaya gambarnya lumayan dinamis.

Gambar Pengguna Perempuan

Gambar Pengguna Laki-laki

Caranya cukup mudah nih, teman-teman tinggal mengubah kode ini

CircleAvatar(
  radius: 65,
  backgroundImage: AssetImage('assets/profil.jpg',),
  backgroundColor: const Color(0xFFEFEFEF),
),

Menjadi ini

CircleAvatar(
  radius: 65,
  backgroundImage: AssetImage(
    gender == 'Perempuan'
      ? 'assets/female_profile.jpg'
      : 'assets/male_profile.jpg',
    ),
  backgroundColor: const Color(0xFFEFEFEF),
),

Selain itu, gambar profil.jpg diubah menjadi female_profile.jpg dan download file tambahan di bawah ini

Link doksli

Hasilnya nanti akan seperti ini :

Cara Kerja
Pada saat login pengguna, sistem akan mengecek jenis kelaminnya (gender) untuk menentukan gambar yang ditampilkan (female_profile.jpg atau male_profile.jpg)

Flutter #5 : Firebase Authentication was originally published in Amikom Computer Club on Medium, where people are continuing the conversation by highlighting and responding to this story.