Web Serial API: Menjembatani Kesenjangan Antara Peramban Web dan Perangkat Keras

Web Serial API adalah teknologi revolusioner yang memberdayakan pengembang web untuk berinteraksi langsung dengan perangkat serial dari dalam peramban web. Ini membuka berbagai kemungkinan, mulai dari mengendalikan robot dan sistem tertanam hingga mengumpulkan data sensor dan membangun pengalaman fisik yang interaktif. Panduan ini memberikan gambaran komprehensif tentang Web Serial API, kemampuannya, dan cara mengimplementasikannya dalam proyek Anda, yang ditujukan untuk audiens global para pengembang dan peminat.

Apa itu Web Serial API?

Web Serial API memungkinkan aplikasi web untuk berkomunikasi dengan perangkat serial, seperti mikrokontroler, papan Arduino, printer 3D, dan perangkat keras lainnya, langsung dari peramban. Hal ini dicapai melalui port serial, sebuah antarmuka standar untuk komunikasi data. Tidak seperti metode sebelumnya yang memerlukan plugin atau aplikasi native, Web Serial API menyediakan cara yang aman dan terstandarisasi untuk berinteraksi dengan perangkat keras.

Fitur Utama:

• Akses Aman: Memerlukan izin eksplisit dari pengguna untuk mengakses perangkat tertentu, meningkatkan keamanan.
• Kompatibilitas Lintas Platform: Bekerja di berbagai sistem operasi, termasuk Windows, macOS, Linux, dan ChromeOS, memberikan pengalaman yang konsisten.
• API Terstandarisasi: Menawarkan API JavaScript yang konsisten dan mudah digunakan untuk berinteraksi dengan perangkat serial.
• Streaming Data: Mendukung streaming data real-time, memungkinkan visualisasi dan interaksi data secara langsung.
• Komunikasi Dua Arah: Memfasilitasi pengiriman dan penerimaan data antara aplikasi web dan perangkat keras.

Manfaat Menggunakan Web Serial API

Web Serial API menawarkan banyak manfaat bagi pengembang, termasuk:

• Pengembangan yang Disederhanakan: Menghilangkan kebutuhan akan plugin khusus platform atau pengembangan aplikasi native, menyederhanakan proses pengembangan.
• Aksesibilitas yang Ditingkatkan: Membuat interaksi perangkat keras lebih mudah diakses oleh audiens yang lebih luas, karena pengguna dapat mengontrol perangkat langsung dari peramban web mereka.
• Pengalaman Pengguna yang Lebih Baik: Memberikan pengalaman pengguna yang lebih mulus dan intuitif, karena pengguna dapat berinteraksi dengan perangkat keras tanpa menginstal perangkat lunak tambahan.
• Interaktivitas yang Meningkat: Memungkinkan pembuatan aplikasi web yang sangat interaktif yang terintegrasi dengan dunia fisik.
• Jangkauan Global: Aplikasi web yang dibuat dengan Web Serial API dapat diakses dari perangkat apa pun dengan peramban web dan koneksi internet, memfasilitasi kolaborasi dan inovasi di seluruh dunia.

Kasus Penggunaan dan Contoh

Web Serial API dapat diterapkan pada berbagai macam proyek dan aplikasi, termasuk:

• Internet of Things (IoT): Menghubungkan aplikasi web ke data sensor dari mikrokontroler, membuat dasbor untuk pemantauan lingkungan, kontrol rumah pintar, dan otomasi industri. Pertimbangkan aplikasi di berbagai lokasi seperti memantau suhu di rumah kaca di Belanda atau melacak kelembapan tanah di pertanian di Kenya.
• Robotika dan Otomasi: Mengontrol robot, drone, dan sistem otomatis lainnya langsung dari antarmuka web. Ini dapat digunakan untuk tujuan pendidikan (misalnya, pemrograman robot di sekolah di Jepang) atau otomasi industri (misalnya, mengendalikan lini manufaktur di Jerman).
• Kontrol Pencetakan 3D: Mengelola dan memantau printer 3D langsung dari peramban web, memungkinkan pengguna untuk mengunggah dan mengontrol pekerjaan cetak dari jarak jauh. Ini sangat berguna dalam manufaktur terdistribusi dan makerspace, seperti yang terlihat di negara-negara seperti Amerika Serikat atau India.
• Akuisisi dan Visualisasi Data: Mengumpulkan data dari sensor (misalnya, suhu, tekanan, cahaya) dan menampilkannya secara real-time di dasbor web. Ini memiliki penerapan yang luas, dari penelitian ilmiah di Kanada hingga pemantauan pertanian di Brasil.
• Proyek Pendidikan: Mengajar siswa tentang elektronik, pemrograman, dan interaksi perangkat keras. Kesederhanaan Web Serial API membuatnya dapat diakses oleh siswa dari segala usia dan latar belakang secara global.
• Instalasi Interaktif: Menciptakan instalasi yang menarik dan interaktif yang merespons masukan pengguna atau data sensor. Contohnya termasuk instalasi seni atau pameran museum, memanfaatkan komputasi fisik di negara-negara seperti Australia.

Contoh: Mengontrol Papan Arduino

Mari kita buat contoh sederhana untuk mengontrol LED yang terhubung ke papan Arduino. Kita akan menggunakan JavaScript untuk mengirim perintah ke Arduino, dan Arduino akan merespons dengan menyalakan atau mematikan LED.

1. Kode Arduino (Arduino IDE):

            const int ledPin = 13;

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  if (Serial.available() > 0) {
    char command = Serial.read();
    if (command == '1') {
      digitalWrite(ledPin, HIGH);
      Serial.println("LED ON");
    } else if (command == '0') {
      digitalWrite(ledPin, LOW);
      Serial.println("LED OFF");
    }
  }
}
            

              
                Copy
              
            
          

Kode Arduino ini:

• Mengatur pin LED sebagai output.
• Menginisialisasi komunikasi serial pada 9600 baud.
• Terus-menerus memeriksa data serial yang masuk.
• Jika data diterima, ia membaca karakter tersebut.
• Jika karakternya '1', ia menyalakan LED.
• Jika karakternya '0', ia mematikan LED.
• Mengirim pesan konfirmasi kembali ke port serial.

2. HTML dan JavaScript (Peramban Web):

            <!DOCTYPE html>
<html>
<head>
  <title>Kontrol LED Web Serial</title>
</head>
<body>
  <button id="connectButton">Hubungkan ke Arduino</button>
  <button id="onButton" disabled>Nyalakan LED</button>
  <button id="offButton" disabled>Matikan LED</button>
  <p id="status">Terputus</p>

  <script>
    const connectButton = document.getElementById('connectButton');
    const onButton = document.getElementById('onButton');
    const offButton = document.getElementById('offButton');
    const status = document.getElementById('status');
    let port;
    let writer;

    async function connect() {
      try {
        port = await navigator.serial.requestPort();
        await port.open({ baudRate: 9600 });
        writer = port.writable.getWriter();
        status.textContent = 'Terhubung';
        connectButton.disabled = true;
        onButton.disabled = false;
        offButton.disabled = false;
      } catch (error) {
        status.textContent = 'Error: ' + error.message;
      }
    }

    async function sendCommand(command) {
      try {
        const data = new TextEncoder().encode(command);
        await writer.write(data);
      } catch (error) {
        status.textContent = 'Error saat mengirim perintah: ' + error.message;
      }
    }

    async function turnOn() {
      await sendCommand('1');
    }

    async function turnOff() {
      await sendCommand('0');
    }

    connectButton.addEventListener('click', connect);
    onButton.addEventListener('click', turnOn);
    offButton.addEventListener('click', turnOff);
  </script>
</body>
</html>
            

              
                Copy
              
            
          

Penjelasan kode JavaScript:

• Tombol Hubungkan: Saat diklik, meminta akses ke port serial dan mencoba membukanya.
• Tombol Nyalakan/Matikan LED: Mengirim perintah "1" untuk menyalakan LED dan "0" untuk mematikannya.
• Status Koneksi: Menampilkan status koneksi saat ini.
• `navigator.serial.requestPort()`: Meminta pengguna untuk memilih port serial.
• `port.open()`: Membuka port serial yang dipilih. Parameter `baudRate` diatur agar sesuai dengan kode Arduino (9600).
• `port.writable.getWriter()`: Membuat writer untuk mengirim data ke port serial.
• `writer.write(data)`: Menulis data (perintah) ke port serial.
• Penanganan Error: Menyertakan penanganan error untuk memberikan umpan balik kepada pengguna.

Cara Menjalankan Contoh:

1. Hubungkan Arduino: Hubungkan papan Arduino ke komputer Anda melalui USB.
2. Unggah kode Arduino: Buka Arduino IDE dan unggah kode yang disediakan ke papan Arduino Anda.
3. Buat file HTML: Simpan kode HTML sebagai file HTML (misalnya, `index.html`).
4. Buka file HTML di peramban: Buka file `index.html` di peramban web yang mendukung Web Serial API (misalnya, Chrome, Edge, dan beberapa versi Opera).
5. Hubungkan dan Kontrol: Klik tombol "Hubungkan ke Arduino". Peramban Anda akan meminta Anda untuk memilih port serial. Pilih Arduino. Kemudian, klik tombol "Nyalakan LED" dan "Matikan LED" untuk mengontrol LED.

Memulai dengan Web Serial API

Untuk mulai menggunakan Web Serial API, Anda memerlukan hal-hal berikut:

• Peramban web yang mendukung Web Serial API: Saat ini didukung oleh Chrome, Edge, dan beberapa versi Opera. Periksa kompatibilitas peramban pada sumber daya seperti Can I Use.
• Perangkat keras: Seperti Arduino, Raspberry Pi, atau perangkat apa pun yang berkomunikasi melalui port serial.
• Pengetahuan dasar HTML, CSS, dan JavaScript: Keakraban dengan teknologi web ini sangat penting.

Panduan Langkah-demi-Langkah:

1. Minta Akses Port Serial: Gunakan `navigator.serial.requestPort()` untuk meminta pengguna memilih port serial. Fungsi ini mengembalikan Promise yang me-resolve ke objek `SerialPort`. Catatan: interaksi pengguna (klik tombol) biasanya diperlukan untuk memicu `requestPort()`.
2. Buka Port Serial: Panggil metode `port.open()`, dengan memberikan objek konfigurasi yang menentukan baud rate dan pengaturan port serial lainnya (misalnya, dataBits, stopBits, parity). Baud rate harus sesuai dengan rate yang digunakan oleh perangkat keras Anda.
3. Dapatkan Stream yang Dapat Dibaca dan Ditulis: Gunakan properti `port.readable` dan `port.writable` untuk mendapatkan stream yang dapat dibaca dan ditulis. Stream ini digunakan untuk mengirim dan menerima data.
4. Buat Writer: Gunakan metode `port.writable.getWriter()` untuk membuat objek `writer`, yang akan Anda gunakan untuk mengirim data ke perangkat.
5. Buat Reader: Gunakan metode `port.readable.getReader()` untuk membuat objek `reader`, yang akan Anda gunakan untuk menerima data dari perangkat.
6. Tulis Data ke Perangkat: Gunakan `writer.write(data)` untuk mengirim data ke port serial. `data` harus berupa `ArrayBuffer` atau `Uint8Array`. Anda dapat menggunakan `TextEncoder` untuk mengubah string menjadi `Uint8Array`.
7. Baca Data dari Perangkat: Gunakan `reader.read()` untuk membaca data dari port serial. Metode ini mengembalikan Promise yang me-resolve ke objek yang berisi data dan boolean yang menunjukkan apakah stream ditutup.
8. Tutup Port Serial: Setelah selesai, panggil `writer.close()` dan `reader.cancel()` untuk menutup stream, lalu panggil `port.close()` untuk menutup port serial. Selalu sertakan penanganan error untuk mengelola potensi masalah dengan komunikasi serial.

Contoh Kode dan Praktik Terbaik

Berikut adalah lebih banyak cuplikan kode dan praktik terbaik untuk bekerja dengan Web Serial API:

1. Meminta Port Serial:

            async function requestSerialPort() {
  try {
    const port = await navigator.serial.requestPort();
    return port;
  } catch (error) {
    console.error('Error meminta port:', error);
    return null;
  }
}
            

              
                Copy
              
            
          

2. Membuka dan Mengkonfigurasi Port Serial:

            async function openSerialPort(port) {
  try {
    await port.open({
      baudRate: 115200, // Sesuaikan agar cocok dengan perangkat Anda
      dataBits: 8,
      stopBits: 1,
      parity: 'none',
    });
    return port;
  } catch (error) {
    console.error('Error membuka port:', error);
    return null;
  }
}
            

              
                Copy
              
            
          

3. Menulis Data ke Port Serial (String):

            async function writeToSerialPort(port, data) {
  const encoder = new TextEncoder();
  const writer = port.writable.getWriter();
  try {
    await writer.write(encoder.encode(data));
  } catch (error) {
    console.error('Error menulis ke port:', error);
  } finally {
    writer.releaseLock();
  }
}
            

              
                Copy
              
            
          

4. Membaca Data dari Port Serial:

            async function readFromSerialPort(port, callback) {
  const reader = port.readable.getReader();
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // Stream ditutup
        break;
      }
      if (value) {
        const decoder = new TextDecoder();
        const decodedValue = decoder.decode(value);
        callback(decodedValue);
      }
    }
  } catch (error) {
    console.error('Error membaca dari port:', error);
  } finally {
    reader.releaseLock();
  }
}
            

              
                Copy
              
            
          

5. Menutup Port Serial:

            async function closeSerialPort(port) {
  if (port) {
    try {
      await port.close();
    } catch (error) {
      console.error('Error menutup port:', error);
    }
  }
}
            

              
                Copy
              
            
          

Praktik Terbaik:**

            async function startStreaming(port, dataCallback) {
  const reader = port.readable.getReader();
  let decoder = new TextDecoder();
  let buffer = '';

  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        break; // Stream ditutup
      }
      if (value) {
        buffer += decoder.decode(value);
        let newlineIndex = buffer.indexOf('\n'); // Atau '\r' atau terminator serupa
        while (newlineIndex > -1) {
          const line = buffer.substring(0, newlineIndex);
          dataCallback(line); // Proses baris data yang diterima
          buffer = buffer.substring(newlineIndex + 1);
          newlineIndex = buffer.indexOf('\n');
        }
      }
    }
  } catch (error) {
    console.error('Error selama streaming:', error);
  } finally {
    reader.releaseLock();
  }
}

            

              
                Copy
              
            
          

            const port = await navigator.serial.requestPort({
  filters: [
    { usbVendorId: 0x2341, // ID Vendor Arduino
      usbProductId: 0x0043 }, // ID Produk Arduino Uno
  ],
});
            

              
                Copy