Hafta sonu projesi: Namaz Vakti Uygulaması

Piyasadaki bütün namaz vakti uygulamalarını denemiş biri olarak, hiçbirinden memnun kalmadığımı söyleyebilirim. Hemen hemen hepsi; estetik ve kullanıcı deneyiminden uzak, genelde geliştiriciler tarafından gelişi güzel yapılmış uygulamalardı.

Tasarımdan biraz anlayan biri olarak ‘Ben olsam nasıl yapardım?’ diyerek başladığım süreçten özetle bahsedeceğim.

Uygulamanın genel görüntüsü. Her vaktin kendi renk paleti var.

Tasarım

Tasarım yapmak çok fazla zamanımı almadı diyebilirim. Kafamda kabaca bir layout vardı ve direkt tasarlamaya başladım. Sadece renk konusunda seçim yapmak zor oldu, çünkü vakti gerçekten temsil eden renkler olmasını istedim. Twitter üzerinden de bu konuda yardım istedim ve değerlendirdiğim fikirler oldu.

cevap veren herkese teşekkürler 😇

Doğru renk seçimlerinden sonra ortaya aşağıdaki gibi bir görüntü çıktı. Ve kodlama kısmına geçtim 🚀

Teknoloji

Çalıştığım şirkette 4–5 aydır vuejs kullanarak projeler geliştiriyorum. Bu konuda bir hayli birikimim olmuşken bu projede de vue kullandım. vue-cli ile webpack projesi oluşturarak yazmaya başladım.

Vuejs’e başlangıç için Fatih Acet’in youtube kanalını takip edebilirsiniz. Hatta direkt şuradan izlemeye başlayabilirsiniz.

State yönetimi için vuex, router için vue-router, çoklu dil seçeneği için vue-i18n eklentilerini kullanarak mis gibi bir altyapı oluşturdum.

Unutmadan; kıymetlimiz lodash, vazgeçilmezimiz axios ve bu projede olmazsa olmazımız momentjs’imizi de ekledikten sonra ekip tamamlandı.

Buraya kadar her şey çok kolaydı. Layout’u ele aldığımda şunu farkettim ki, çok kolay görünen ama aslında zor olan bir tasarımla karşı karşıyayım. Şimdi tasarımdan birkaç detay gösterip bunları nasıl çözdüğümden bahsedeceğim.

Layout

Layout altı satırdan(vakitten) oluşuyor;

  • Her vaktin kendi tema rengi var
  • Her vaktin öncelik sırasına göre kapladığı alan değişiyor
  • Her vaktin öncelik sırasına göre zemin rengi değişiyor
  • Her vakit seçili olan vakitten uzaklaştıkça içerik opacity değeri azalıyor
  • Her vakit seçili olan vakitten uzaklaştıkça yazı boyutu azalıyor

Bunları güzelce derleyince ortaya şöyle bir (s)css kodu çıktı. E tabi buna hala css denilirse :)

Zaman Ayracı

Aktif olan vaktin içinde görünen geri sayım ayracı, en tepedeyken ve en alttayken vaktin dışına çıkmamak için duruyor. Bundan sonra da ayraç değil, ayracın ucu vakti göstermeye devam ediyor.

Anlatması bile zor oldu, yazarken ufak bir hesapla svg ile çözdüm. Merak edenler şu komponenti inceleyebilir.

Namaz vakitleri için API sunan Furkan kardeşime sevgiler.

İftar vakti

İftara kalan zaman sadece ikindiden önceki vakitlerde aktif olacak şekilde ayarladım. İkindi vakti geri saymaya başladığında zaten iftar vaktine denk geliyor. Böylelikle ekranı olabildiğince temiz bırakıyoruz.

Gelecek Özellikler

  • Offline çalışma özelliği (süper hızlı açılacak)
  • Konumdan otomatik bölge seçimi
  • Birden fazla konum ekleme
  • Vaktin çıkmasına belli bir süre kala, isteğe bağlı bildirim gönderme

Nasıl Kullanırım

Web uygulaması olduğu için kullanması da kolay:

  1. namaz-vakti.surge.sh adresine gir (mobil için uygundur)
  2. Paylaş menüsünden Ana Ekrana Ekle özelliğini seç
  3. Ana ekranımızda uygulama gibi kullanıma hazır 🎉
ÖNEMLİ: Tarayıcıdan girince önce konumunuzu seçip daha sonra kısayol olarak eklemen lazım. Aksi takdirde settings sayfasının kısayolunu ekliyor, haliyle hep settings’e giriyorsunuz.

Bir hafta sonu projesi de böylelikle tamamlanmış oldu.