Damapancana 2.0 Developer & API Documentation

Panduan integrasi terpusat untuk instalasi package npm pihak ketiga (@dewas/*), spesifikasi lengkap REST API telemetri & perangkat, firmware IoT, serta best practices keamanan.

Master Sensor Master CCTV

Konsep Modul Mandiri (Third-Party Package)

DEWaS diekspor sebagai kumpulan npm package modular yang dapat dipasang di aplikasi Next.js existing tanpa mengganggu arsitektur utama host.

@dewas/core

Fondasi provider auth, HTTP API client, types/interfaces, dialog, cards, dan shared design tokens.

@dewas/sensors

Komponen <SensorManager />, live telemetry polling, visualisasi grafik, dan simulator IoT.

@dewas/cctv

Komponen <CCTVManager />, player RTSP/HLS stream, manajemen kamera PTZ, dan deteksi AI.

@dewas/sea

Dashboard mitigasi laut & pesisir, integrasi data oseanografi Copernicus, pasang surut, & peta GIS.

Instalasi Dependencies

Jalankan perintah berikut di root folder project Next.js Anda:

npm install @dewas/core @dewas/sensors @dewas/cctv @dewas/sea lucide-react

Konfigurasi Environment Variable (.env.local)

Tambahkan URL endpoint backend Flask DEWaS. Perhatikan bahwa JWT_SECRET tidak pernah disimpan di frontend.

# .env.local aplikasi host Next.js
NEXT_PUBLIC_DEWAS_API_URL=http://localhost:5000/api

# Opsional: Jika menggunakan Next.js BFF proxy untuk keamanan internal
# DEWAS_INTERNAL_BACKEND_URL=http://127.0.0.1:5000/api

Inisialisasi <DewasProvider> (Root Layout atau Halaman)

Bungkus aplikasi Anda dengan <DewasProvider>. Provider ini mendukung Bring Your Own Auth (BYOA) sehingga Anda dapat mengoper token dari NextAuth, Supabase, atau sistem login host.

// app/providers.tsx (Next.js App Router)
'use client';

import React from 'react';
import { DewasProvider } from '@dewas/core';

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <DewasProvider
      apiUrl={process.env.NEXT_PUBLIC_DEWAS_API_URL || 'http://localhost:5000/api'}
      defaultTheme="system"
      // Opsional: Integrasikan fungsi getter token dinamis dari sesi user host
      getToken={async () => {
        // contoh: return (await getSession())?.user?.accessToken || null;
        return typeof window !== 'undefined' ? localStorage.getItem('dewas_token') : null;
      }}
      onUnauthorized={() => {
        console.warn('Sesi DEWaS kedaluwarsa, arahkan ke login host.');
      }}
    >
      {children}
    </DewasProvider>
  );
}

Penggunaan Komponen Modul di Halaman Host

Panggil komponen DEWaS di rute manapun di aplikasi Next.js Anda secara independen:

// app/monitoring/page.tsx
'use client';

import React from 'react';
import { SensorManager } from '@dewas/sensors';
import { CCTVManager } from '@dewas/cctv';
import { SeaDashboard } from '@dewas/sea';

export default function IntegratedMonitoringPage() {
  return (
    <div className="container mx-auto py-8 space-y-12">
      {/* 1. Dashboard Mitigasi Gelombang & Pasut Laut */}
      <SeaDashboard />

      {/* 2. Manajemen Sensor Telemetri Lapangan (Domain Air Laut) */}
      <SensorManager initialDomainFilter="sea" />

      {/* 3. Manajemen Kamera Pengawas Lapangan & Live Stream */}
      <CCTVManager initialDomainFilter="sea" />
    </div>
  );
}