CuacaKita adalah aplikasi prakiraan cuaca berbasis web yang dibangun menggunakan Jekyll. Aplikasi ini menawarkan antarmuka modern dengan efek Glassmorphism, fitur deteksi lokasi otomatis, dan sekarang mendukung PWA (Progressive Web App) sehingga dapat diinstal di HP/Desktop dan diakses secara offline.
- π Auto-Location (Geolocation): Mendeteksi cuaca di lokasi pengguna secara otomatis saat aplikasi dibuka.
- π Pencarian Kota: Cari prakiraan cuaca di berbagai kota di seluruh dunia.
- π Prakiraan 5 Hari: Menampilkan prediksi cuaca untuk 5 hari ke depan secara mendetail.
- π¨ Tema Dinamis: Latar belakang aplikasi berubah secara otomatis menyesuaikan kondisi cuaca.
- π± PWA Ready: Dapat diinstal di Android, iOS, dan Windows (Add to Home Screen).
- πΆ Offline Support: Tetap dapat dibuka meskipun tanpa koneksi internet berkat Service Worker.
- β¨ UI/UX Modern: Desain Glassmorphism dengan animasi halus dan responsif.
- Static Site Generator: Jekyll
- Data API: OpenWeatherMap API
- PWA: Service Workers & Web App Manifest
- Icons: FontAwesome 6 & Icons8
- Styling: CSS3 (Grid, Flexbox, Glassmorphism)
- Logic: Vanilla JavaScript (Fetch API & Geolocation API)
Pastikan Anda sudah menginstal Ruby dan Jekyll. Jika belum, ikuti panduannya di sini.
git clone https://github.com/IshikawaUta/weather.git
cd weatherBuka file assets/js/app.js dan masukkan API Key OpenWeatherMap Anda:
const apiKey = "MASUKKAN_API_KEY_ANDA_DISINI";bundle exec jekyll serveAkses aplikasi di http://localhost:4000/weather/.
.
βββ _layouts/ # Template layout utama (default.html)
βββ assets/
β βββ css/ # File styling (Glassmorphism & Animations)
β βββ js/ # Logika aplikasi, API, & Registrasi PWA
βββ manifest.json # Konfigurasi instalasi PWA
βββ sw.js # Service Worker (Caching & Offline Logic)
βββ index.html # Halaman utama aplikasi
βββ 404.html # Halaman error kustom (PWA Fallback)
βββ _config.yml # Konfigurasi Jekyll (baseurl, url)
βββ README.md # Dokumentasi proyek
- Desktop (Chrome/Edge): Klik ikon "Install" di ujung kanan address bar.
- Android (Chrome): Klik titik tiga di pojok kanan atas, lalu pilih "Tambahkan ke Layar Utama".
- iOS (Safari): Klik ikon "Share", lalu pilih "Add to Home Screen".
Kontribusi, isu, dan permintaan fitur sangat dipersilakan! Silakan buka Pull Request atau Issue di repository ini.
Proyek ini dilisensikan di bawah MIT License.