Gis Application

#Project Overview

GIS Application adalah sebuah aplikasi Geographic Information System (GIS) berbasis web yang dibangun menggunakan React.js (TypeScript) di sisi frontend dan Golang di sisi backend. Aplikasi ini menampilkan data geografis secara interaktif melalui peta berbasis web dengan integrasi OpenStreetMap menggunakan Leaflet.js.

Project ini dikembangkan sebagai latihan implementasi full-stack web application, mulai dari pembuatan RESTful API, konsumsi API di frontend, hingga penerapan automation CI/CD pipeline yang merupakan hasil improvement dan eksplorasi mandiri di luar materi course.

#Latar Belakang & Motivasi

Project ini berawal dari keinginan saya untuk mempelajari pembuatan RESTful API menggunakan Golang serta bagaimana cara mengonsumsinya di frontend modern berbasis React + TypeScript.

Sebagai dasar pembelajaran, saya mengikuti sebuah course dari santrikoding.com yang membahas pengembangan aplikasi GIS. Namun, saya tidak berhenti pada materi yang disediakan. Project ini saya lanjutkan dengan:

• Mengeksplorasi implementasi yang lebih mendekati kebutuhan dunia kerja
• Melakukan improvement mandiri pada arsitektur dan workflow
• Menerapkan automasi yang tidak dibahas di dalam course, seperti CI/CD

#Arsitektur Project

Project ini dipisahkan menjadi dua repository terpisah untuk menerapkan prinsip separation of concerns dan mendekati arsitektur aplikasi nyata.

#Backend (Golang – RESTful API)

Backend dibangun menggunakan Golang dan berfungsi sebagai penyedia data geografis melalui RESTful API.

Tanggung jawab utama backend meliputi:

• Menyediakan endpoint API untuk data GIS
• Mengelola dan memproses data koordinat geografis
• Menjadi latihan praktis dalam membangun API menggunakan Golang

Repository backend:
github.com/armandwipangestu/gis-api

#Frontend (React + TypeScript)

Frontend dibangun menggunakan React.js dengan TypeScript dan berfungsi sebagai antarmuka utama pengguna.

Tanggung jawab utama frontend meliputi:

• Menampilkan peta interaktif berbasis web
• Mengintegrasikan OpenStreetMap menggunakan Leaflet.js
• Mengonsumsi API backend secara terstruktur dan reusable

Repository frontend:
github.com/armandwipangestu/gis-ui

#Problem Statement

Melalui project ini, saya ingin memahami:

• Bagaimana cara membangun RESTful API menggunakan Golang
• Bagaimana cara mengonsumsi API tersebut di React menggunakan TypeScript
• Bagaimana membuat reusable data-fetching logic di frontend
• Bagaimana mengintegrasikan data geografis ke dalam peta berbasis web
• Bagaimana menerapkan CI/CD automation sebagai bagian dari improvement pengembangan

#Pendekatan Solusi

Untuk menjawab kebutuhan tersebut, saya menerapkan beberapa pendekatan berikut:

#1. Backend API Development

• Membangun RESTful API menggunakan Golang
• Menyusun struktur project backend agar mudah dikembangkan
• Menyediakan endpoint yang siap dikonsumsi frontend

#2. Frontend Data Fetching & State Management

• Menggunakan TanStack Query (React Query) untuk:
  • Data fetching
  • Caching
  • Pengelolaan state asynchronous
• Membuat custom reusable hooks agar logic fetching dapat digunakan kembali

#3. GIS & Web Mapping

• Integrasi OpenStreetMap
• Visualisasi data lokasi pada peta
• Interaksi peta menggunakan Leaflet.js (marker, zoom, dan navigasi)

#4. Automation & CI/CD Pipeline (Improvement)

Konsep Pipeline CI/CD

CI/CD pipeline diimplementasikan sebagai improvement mandiri di luar materi course, mengikuti best practice CI/CD.

Overview CI/CD

CI/CD Pipeline, singkatan dari Continuous Integration (CI) dan Continuous Delivery/Deployment (CD), adalah sebuah proses automation yang melancarkan pengembangan software dari perubahan kode ke deployment. Proses ini mengotomatiskan langkah-langkah build, test, dan deployment, memungkinkan developer untuk melakukan release perubahan kode secara lebih sering, andal, dan aman.

Pipeline ini mencakup:

• Build & Test Pull Request Check
• Build & Push Container Image ke GitHub Container Registry (GHCR)
• Automatic tagging & release menggunakan semantic versioning berdasarkan rule conventional commit

#Semantic Versioning

Komponen Semantic Versioning

Semantic Versioning (SemVer) adalah standar penomoran versi software yang didefinisikan pada semver.org, menggunakan format MAJOR.MINOR.PATCH:

• MAJOR — Naik ketika terdapat breaking change (tidak backward compatible). Contoh: v1.5.7 → v2.0.0
• MINOR — Naik ketika terdapat penambahan fitur baru yang masih backward compatible. Contoh: v1.5.7 → v1.6.0
• PATCH — Naik ketika terdapat perbaikan bug atau perubahan kecil yang masih backward compatible. Contoh: v1.5.7 → v1.5.8

#Conventional Commit

Conventional Commit adalah konvensi commit message yang terstandarisasi untuk menentukan level mana yang harus di bump:

• BREAKING CHANGE — Bump ke versi MAJOR
• feat() — Bump ke versi MINOR
• fix() atau hotfix() — Bump ke versi PATCH

#Git Flow (SDLC)

Konsep Git Flow

Semantic Versioning sering digunakan bersamaan dengan Git Flow, sebuah model branching yang membantu menjaga konsistensi versi software sepanjang SDLC:

• dev atau development — Digunakan sebelum tahap UAT, versi diberi label beta
• staging — Digunakan untuk UAT, versi diberi label rc (Release Candidate)
• main — Digunakan untuk production-ready release, versi stabil tanpa label

#What I Learned

Dari project ini, saya memperoleh pembelajaran praktikal, antara lain:

• Dasar-dasar pengembangan RESTful API dengan Golang
• Konsumsi API di React menggunakan TypeScript secara terstruktur
• Penerapan reusable hooks dengan TanStack Query
• Pemahaman dasar GIS dan web-based mapping
• Implementasi CI/CD pipeline sebagai improvement mandiri
• Pentingnya inisiatif eksplorasi di luar materi pembelajaran

#Mengapa Project Ini Penting

Walaupun project ini berangkat dari sebuah course, saya menjadikannya sebagai media eksplorasi teknis, bukan sekadar mengikuti tutorial.

Project ini penting karena:

• Menunjukkan inisiatif pengembangan mandiri
• Menggabungkan backend, frontend, dan automation workflow
• Memberikan pengalaman membangun aplikasi full-stack secara end-to-end

#Kesimpulan

GIS Application merupakan project pembelajaran yang membantu saya memahami proses pengembangan aplikasi GIS berbasis web secara menyeluruh, mulai dari RESTful API di Golang, konsumsi API di React + TypeScript, hingga penerapan CI/CD automation sebagai hasil improvement pribadi.

Project ini memperkuat kemampuan saya di bidang Software Engineering, khususnya dalam pengembangan full-stack web application dengan pendekatan modern.