İftar Geri Sayım Uygulaması 🌙

Ramazan ayında kullanıcılara iftara kalan süreyi anlık olarak gösteren, konum bazlı web uygulaması.

🌟 Özellikler

⏰ Gerçek Zamanlı Geri Sayım: İftara kalan saat, dakika ve saniye
📍 Otomatik Konum Tespiti: Tarayıcı geolocation API ile otomatik konum
🗺️ Manuel Konum Seçimi: Ülke > Şehir > İlçe dropdown seçimi
🔔 Push Notifications: Tarayıcı kapalı olsa bile bildirim (1 saat, 30 dk, 10 dk)
🎨 Modern Tasarım: Glassmorphism efektli dark theme
📱 Responsive: Tüm cihazlarda mükemmel çalışır
⚡ Hızlı: Minimal bağımlılık, hızlı yükleme
💾 Akıllı Cache: 30 günlük veri cache'lenir
🌐 PWA: Progressive Web App desteği

🛠️ Teknolojiler

Frontend: Vanilla JavaScript (ES6+)
Styling: Tailwind CSS (CDN)
Font: Plus Jakarta Sans (Google Fonts)
API: ezanvakti.emushaf.net (Python proxy ile)
CORS Proxy: Python HTTP server (development + production)
PWA: Service Worker + Web Push API
Backend: Netlify Serverless Functions + Scheduled Functions
Push: web-push library (VAPID)

📁 Proje Yapısı

iftarakalan/
├── index.html              # Ana HTML dosyası
├── manifest.json           # PWA manifest
├── sw.js                   # Service Worker (push notifications)
├── proxy_server.py         # CORS proxy server (development)
├── package.json            # Dependencies (web-push)
├── js/
│   ├── api.js             # API entegrasyonu (proxy kullanıyor)
│   ├── location.js        # Konum yönetimi
│   ├── countdown.js       # Geri sayım mantığı
│   ├── storage.js         # LocalStorage yönetimi
│   ├── notifications.js   # Push notification manager
│   └── app.js             # Ana uygulama
├── netlify/
│   └── functions/
│       ├── proxy.js              # CORS proxy (production)
│       ├── vapid-public-key.js   # VAPID key endpoint
│       ├── save-subscription.js  # Subscription kaydetme
│       ├── remove-subscription.js # Subscription silme
│       └── scheduler.js          # Cron job (bildirim gönderme)
├── scripts/
│   └── generate-vapid.js  # VAPID key generator
├── memory-bank/           # Proje dokümantasyonu
├── PUSH_NOTIFICATIONS.md  # Push notifications kılavuzu
└── README.md

🚀 Kurulum ve Çalıştırma

Gereksinimler

Python 3.x (proxy server için - development)
Node.js 18+ (push notifications için)
Modern web browser (Service Worker desteği)

Development Ortamı

Projeyi klonlayın:

git clone <repo-url>
cd iftarakalan

Dependencies yükleyin:

npm install

CORS Proxy Server'ı başlatın (ZORUNLU):

python3 proxy_server.py

Server şu mesajı gösterecek:

🚀 Proxy server başlatıldı: http://localhost:8081
📡 Proxy endpoint: http://localhost:8081/api/proxy?url=TARGET_URL

Tarayıcıda açın:

http://localhost:8081

Neden Proxy Server Gerekli?

ezanvakti.emushaf.net API'si CORS (Cross-Origin Resource Sharing) başlıkları sağlamıyor. Bu yüzden browser'dan direkt API çağrısı yapılamaz. Proxy server bu sorunu çözer:

Browser → Proxy (CORS headers ekler) → emushaf API → Proxy → Browser

Not: Production deployment için Netlify Functions veya Vercel Edge Functions kullanılmalı.

📝 Kullanım

Otomatik Konum

Uygulamayı açın
Tarayıcı konum izni isteğine "İzin Ver" deyin
Geri sayım otomatik başlar

Manuel Konum

Konum izni reddedilirse veya "Konum Değiştir" butonuna tıklayın
Ülke, Şehir ve İlçe seçin
Geri sayım başlar

🔔 Push Notifications Kurulumu

Detaylı kılavuz: PUSH_NOTIFICATIONS.md

1. Supabase Database Kurulumu

# 1. Supabase hesabı aç: https://supabase.com
# 2. New project oluştur
# 3. SQL Editor'da çalıştır:

CREATE TABLE subscriptions (
  id SERIAL PRIMARY KEY,
  endpoint TEXT UNIQUE NOT NULL,
  subscription JSONB NOT NULL,
  location JSONB,
  settings JSONB,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

CREATE INDEX idx_endpoint ON subscriptions(endpoint);

# 4. Settings → API → Keys kopyala

2. VAPID Keys Oluştur

npm install
npm run generate-vapid

3. Environment Variables (Netlify)

SUPABASE_URL=https://xxx.supabase.co
SUPABASE_KEY=eyJxxx...
VAPID_PUBLIC_KEY=BEl62iUYg...
VAPID_PRIVATE_KEY=bdSiNzUhU...
CRON_SECRET_TOKEN=your-secret-token

4. Cron Job Kurulumu

Detaylı kılavuz: CRON_SETUP.md

# 1. Cron-job.org hesabı aç
# 2. Create cronjob:
#    URL: https://iftarakalan.com/api/send-notifications
#    Schedule: Every 1 minute
#    Headers: x-auth-token: <CRON_SECRET_TOKEN>

5. Deploy

git push origin main

🍎 Safari Kullanıcıları İçin

Safari'de localhost:8081 üzerinde geolocation çalışmaz (HTTPS gereksinimi). İki seçenek:

Manuel Konum Seç (önerilen - development için)
HTTPS'te Test Et (production'da çalışır - https://iftarakalan.com)

Detaylı bilgi: DEPLOYMENT.md - Safari Özel Notlar

🔌 API Entegrasyonu

Uygulama ezanvakti.emushaf.net API'sini CORS proxy üzerinden kullanır:

API Endpoints (Proxy üzerinden)

// Development
GET http://localhost:8081/api/proxy?url=https://ezanvakti.emushaf.net/ulkeler
GET http://localhost:8081/api/proxy?url=https://ezanvakti.emushaf.net/sehirler/2
GET http://localhost:8081/api/proxy?url=https://ezanvakti.emushaf.net/ilceler/{sehirId}
GET http://localhost:8081/api/proxy?url=https://ezanvakti.emushaf.net/vakitler/{ilceId}

Test Sonuçları (2025-10-18)

✅ 81 Türkiye şehri başarıyla yükleniyor
✅ Tüm ilçeler dinamik olarak yükleniyor
✅ 30 günlük namaz vakitleri alınıyor
✅ Cache sistemi çalışıyor
✅ İftar saati: Aksam field'ı kullanılıyor

💾 Veri Yönetimi

LocalStorage kullanılır
Prayer times: 30 gün cache
Konum bilgisi: Persistent
Günlük otomatik güncelleme

🎨 Tasarım

Renk Paleti: Emerald Green (#34d399)
Tema: Dark mode default
Efektler: Glassmorphism, backdrop blur
Tipografi: Plus Jakarta Sans

🧪 Testing

Tamamlanan Testler (2025-10-18)

🚀 GitHub + Netlify ile Kolay Deployment

Hızlı Başlangıç (3 Adım!)

# 1. GitHub'a push et
git add .
git commit -m "Initial commit"
git push origin main

# 2. Netlify'a bağlan
# https://netlify.com → "Import from GitHub" → Repo seç → Deploy!

# 3. Domain bağla (opsiyonel)
# Netlify Dashboard → Domain settings → Custom domain ekle

📖 Detaylı Deployment Kılavuzu

👉 DEPLOYMENT.md - Adım adım tüm süreç!

✨ Netlify Özellikleri (Ücretsiz!)

✅ Otomatik SSL/HTTPS
✅ Serverless functions (proxy dahil!)
✅ CDN (dünya çapında hızlı yükleme)
✅ Custom domain desteği
✅ Continuous deployment (git push = auto deploy)
✅ Deploy previews (PR'lar için)

🎉 Özellikler

v2.1 - Supabase Integration

📦 Supabase PostgreSQL: Sınırsız kullanıcı desteği
🔄 Persistent Storage: Subscriptions kalıcı olarak saklanır
👥 Çok Kullanıcı: Her kullanıcı kendi tercihlerini seçer
⏰ Cron-job.org: Ücretsiz cron servisi (her dakika)
✅ ±1 Dakika Tolerans: Bildirimler kesin zamanda gelir
🧪 Test Modları: TEST_NOTIFICATIONS, TEST_IFTAR_TIME

📦 Alternatif Deployment Seçenekleri

⚠️ ÖNEMLİ: CORS Proxy Gereksinimi

Production'da proxy server gereklidir. Seçenekler:

Seçenek 1: Netlify Functions (ÖNERİLEN)

Function dosyası oluştur:

// netlify/functions/proxy.js
exports.handler = async (event) => {
  const targetUrl = event.queryStringParameters.url;
  
  try {
    const response = await fetch(targetUrl);
    const data = await response.json();
    
    return {
      statusCode: 200,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message })
    };
  }
};

api.js'i güncelle:

PROXY_URL: "/.netlify/functions/proxy"

Deploy:

netlify deploy --prod

Seçenek 2: Vercel Edge Functions

Function dosyası:

// api/proxy.js
export default async function handler(req, res) {
  const { url } = req.query;
  const response = await fetch(url);
  const data = await response.json();
  
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.json(data);
}

Deploy:

vercel --prod

Seçenek 3: Custom Backend

Railway, Render, Fly.io üzerinde proxy_server.py'yi deploy edin.

📱 PWA (Gelecek)

Progressive Web App özellikleri eklenecek:

Service Worker
Offline support
Add to Home Screen
Push notifications

🤝 Katkıda Bulunma

Fork edin
Feature branch oluşturun (git checkout -b feature/AmazingFeature)
Commit edin (git commit -m 'Add some AmazingFeature')
Push edin (git push origin feature/AmazingFeature)
Pull Request açın

📄 Lisans

Bu proje MIT lisansı altında lisanslanmıştır.

👨‍💻 Geliştirici

Made with ❤️ for Ramadan

🔮 Gelecek Özellikler

📞 İletişim

Sorularınız için issue açabilirsiniz.

Not: Bu uygulama Ramazan ayında kullanım için tasarlanmıştır.

Name		Name	Last commit message	Last commit date
Latest commit History 67 Commits
js		js
memory-bank		memory-bank
netlify/functions		netlify/functions
scripts		scripts
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CRON_SETUP.md		CRON_SETUP.md
DEPLOYMENT.md		DEPLOYMENT.md
LICENSE		LICENSE
PUSH_NOTIFICATIONS.md		PUSH_NOTIFICATIONS.md
README.md		README.md
clear_cache.html		clear_cache.html
favicon.svg		favicon.svg
index.html		index.html
manifest.json		manifest.json
netlify.toml		netlify.toml
package.json		package.json
proxy_server.py		proxy_server.py
sw.js		sw.js

License

isousluer/iftarakalan

Folders and files

Latest commit

History

Repository files navigation