Skip to content

IshikawaUta/weather

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌀️ CuacaKita - Modern Weather Dashboard (PWA)

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.


✨ Fitur Utama

  • πŸ“ 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.

πŸš€ Teknologi yang Digunakan

  • 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)

πŸ› οΈ Instalasi & Penggunaan

1. Prasyarat

Pastikan Anda sudah menginstal Ruby dan Jekyll. Jika belum, ikuti panduannya di sini.

2. Kloning Proyek

git clone https://github.com/IshikawaUta/weather.git
cd weather

3. Konfigurasi API Key

Buka file assets/js/app.js dan masukkan API Key OpenWeatherMap Anda:

const apiKey = "MASUKKAN_API_KEY_ANDA_DISINI";

4. Jalankan Secara Lokal

bundle exec jekyll serve

Akses aplikasi di http://localhost:4000/weather/.


πŸ“‚ Struktur Folder Terbaru

.
β”œβ”€β”€ _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

πŸ“² Cara Instalasi (PWA)

  1. Desktop (Chrome/Edge): Klik ikon "Install" di ujung kanan address bar.
  2. Android (Chrome): Klik titik tiga di pojok kanan atas, lalu pilih "Tambahkan ke Layar Utama".
  3. iOS (Safari): Klik ikon "Share", lalu pilih "Add to Home Screen".

🀝 Kontribusi

Kontribusi, isu, dan permintaan fitur sangat dipersilakan! Silakan buka Pull Request atau Issue di repository ini.

πŸ“„ Lisensi

Proyek ini dilisensikan di bawah MIT License.

About

🌀️ CuacaKita - Modern Weather Dashboard (PWA)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors