ghofaralhasyim / ghorilard-pwa

Progressive Web App for Ghorilard IoT

Ghorilard IoT : Front End

Visit Ghorilard.vercel.app

Ghorilard adalah code name untuk produk IoT kami. Produk ini dibuat dengan tujuan memudahkan para pembudidaya udang jenis vanamee untuk monitoring beberapa parameter kualitas air tambak mereka, sehingga ketika terjadi perubahan kondisi air, para pembudidaya dapat melakukan penanganan agar kondisi air tidak berakibat fatal untuk kelangsungan hidup udang.

Selain itu pada sistem kami juga disediakan fitur guides atau panduan untuk penanganan kondisi air yang tepat. Panduan tersebut kami susun berdasarkan dokumen dan wawancara dengan Bapak Suparjo S.Tr.Pi. selaku Penyuluh Dinas Perikanan Kabupaten Pemalang.

System Front-End Flow

Untuk keseluruhan flow dalam sistem front-end, dapat melihat pada pdf flow-front-end.

Features

• Progressive Web App (PWA)
• Monitoring Parameter Water Quality ( Graph )
• Statistik data (rata-rata data parameter berdasarkan waktu : pagi, siang, atau malam)
• Filter data berdasarkan jangka waktu yang diinginkan
• Panduan pengelolaan kualitas air
• Helpdesk chat
• Export graph document

Dependencies

Ghorilard front-end menggunakan library SvelteJS. Dengan menggunakan tambahan library/plugin lain sebagai berikut.

• Svelte-spa-router
• Svelte-session-manager
• Apexchart
• Sass-preprocessor
• Socket IO

Khusus untuk Svelte-session-manager, terdapat beberapa code yang telah dimodifikasi untuk menyesuaikan dengan Backend

Component UI

Untuk memudahkan proses developtment dan proses pengembangan nantinya. Setiap komponen UI, script store, dan stylesheet terpisah dalam satu file.

Src/
└── Dasboard-Comp/
    ├── toor
└── pages/
└── sass/

Installation

Lakukan clone repositori ini. Kemudian install dependencies yang diperlukan dan nyalakan server.

cd ghorilard-pwa
npm i
npm run dev

Ghorilard Project

• Backend Development : github.com/RichardAlvin/be-ghorilard
• End Device Final Produc and Configuration : github.com/ghofaralhasyim/end-device-ghorilard