###### tags : `xirka` `documentation`

---
title: "Dokumentasi Ikanku"
---

# Dokumentasi Aplikasi Ikanku
### 1. Pendahuluan
Ikanku adalah aplikasi monitoring kualitas air yang memuat temperatur air, kadar oksigen terlarut, ph dan parameter lainnya. Data diperoleh dari perangkat ikanku yang terhubung dengan menggunakan jaringan internet. Data tersebut dikirimkan secara regular oleh perangkat, kemudian ditampilkan pada aplikasi secara realtime. Aplikasi ini bisa diakses di http://patinku.com.

Aplikasi ini melibatkan servis lain, yaitu:
- Perangkat Ikanku : berperan mengirimkan data ke server
- Aplikasi IoT Platform : servis yang menerima data yang dikirimkan oleh perangkat Ikanku, kemudian menyimpan data dalam database dan meneruskan kepada klien lain yang terhubung.

### 2. Registrasi Akun pada Xirka IoT Platform
Jika anda tidak memiliki akun xirka iot platform, maka hal yang pertama dilakukan adalah mendaftarkan akun anda pada xirka iot platform dan registrsi apliksi dan perangkat. Gunakan petunjuk [berikut](https://hackmd.io/@mraditya/BJX-Fffk9)

### 3. Development Aplikasi

- Clone project web ikanku pada repositori [berikut](https://github.com/mraditya89/iot-platform-premium/tree/main/client)
- Dengan menggunkan terminal, masuk pada direktori utama, kemudian install librari yang digunakan dengan menggunakan perintah `npm install`
- Buat file `.env` pada direktori utama kemudian salin baris kode berikut. Baris berikut merupakan nilai dari environment variable pada aplikasi.

REACT_APP_USERNAME=tamu
REACT_APP_PASSWORD=kampungpatin
REACT_APP_APP_KEY=app-sensorair.zrCufyX8BMuY6tEtRiK5UUE29B23Y0
REACT_APP_BACKEND_URI=http://202.148.1.57:8280
REACT_APP_BROKER_URI=202.148.1.57:2883
REACT_APP_PUBLIC_USERNAME=public
REACT_APP_PUBLIC_PASSWORD=bandung123abc

> karena ini memuat kredential aplikasi, mohon untuk tidak menyebarluaskan ke pihak lain.
> Nilai environment variable bisa berubah mengikuti akun dan endpoint backend.
- Jalankan aplikasi dengan menggunkan perintah `npm start`
- Buka web browser, kemudian akses aplikasi di http://localhost:3000. Login dengan menggunakan akun tamu : kampungpatin.
- Lakukan development sesuai dengan permintaan

### 4. Deploy aplikasi
a. Membuat static file
- Gunakan terminal, kemudian arahkan pada root directory project.
- Gunakan perintah `npm run build` untuk memperoleh static file pada folder build.

b. Deploy pada server
- Salin folder build pada server / web hosting.
- Aplikasi yang terinstall sekarang disimpan pada server xirka pada folder /var/www/patinku.
- Jika konfigurasi nginx belum tersedia, arahkan paad lokasi path `/var/www/nginx/sites-available`.
- Kemudian buat patinku.com dengan perintah `sudo nano patinku.com`. kemudian salin konfigurasi berikut:

server {
    listen 80;
    listen [::]:80;

    root /var/www/patinku/client/build;

    index index.html index.htm;

    server_name patinku.com www.patinku.com;

    location / {
        try_files $uri /index.html;
    }
}

- Ketik perintah (path harus lengkap) `sudo ln -s /etc/nginx/sites-available/patinku.com /etc/nginx/sites-enabled` untuk membuat simbolik link.
- Periksa konfigurasi nginx dengan : `nginx -t`
- Akses aplikasi di www.patinku.com