Angular 4 ile Zaman Takip Uygulaması

Angular bilgilerini unutmamak adına fırsat buldukça küçük uygulamalar yapmaya çalışıyorum. Bu da bunlardan biri.

Android uygulaması olarak indirdiğim zaman takip uygulamaları hem güven vermiyor hem de kullanışlı değil. Ben de kendim bir SPA(tam olmasa da) olarak yapmaya karar verdim ve ortaya böyle bir şey çıktı.

Github: https://github.com/erdoganbavas/Time-Tracking
Prod: http://erdoganb.com/timetracking/

Tüm süreci anlatmak uzun süreceğinden dosya yapısından ve işleyişten bahsedeyim biraz.

Hedef, etiketler oluşturabileceğimiz ve bu etiket üzerinden başla ve bitir aksiyonları ile süre tutabileceğimiz bir uygulama.

Öncelikle uygulama 3 component’ten oluşuyor.
Header: Uygulama adı ve giriş yap butonu olan standart bir header.
Time Dashboard: Etiket oluşturma input’u bulunan bölüm.
Tag List: Etiketleri listelemek için oluşturulan bölüm.

İlk adımımız Angular-CLI aracı ile uygulamamızı oluşturmak.

Bu komutlardan sonra http://localhost:4200 adresinde uygulamanız yayınlanmaya başlayacaktır. Uygulama içinde Bootstrap ve jQuery kullanacağız. “ng serve” işlemini durdurup aşağıdaki komutları çalıştırıyoruz.

Projemizde .angular-cli.json dosyasına bu eklemeleri bildirmemiz gerekli. Bu dpsya içinde “scripts” değerine şu eklemeleri yapıyoruz.

Şimdi “ng serve” ile tekrar uygulamayı sunmaya başlayabiliriz.

Bahsettiğim component’leri şu komutlarla ekleyerek devam ediyoruz.

Bu component’ler dışında 3 servis bir de model tanımlamamız gerekli. Bunları direk yeni bir dosya olarak ekleyerek kodumuzu yazmaya başlayabiliriz. Component’ler uygulama içinde tanımlanması gereken yerler bizim inisiyatifimizde olduğu için CLI burada bir şey yapamıyor.

TagService: Etiketler için bazı işlemleri bu servis üzerinden yapacağız. En önemlisi uygulama üzerinde kayıtlı etiketleri bu servis üzerinde tutup sunacağız. Ayrıca yeni etiket oluşturulduğunda kullanılmak üzere bir de EventEmitter tanımladık, bunu kullanarak component’ler arası iletişim sağlayabiliriz.

ServerService: Sunucumuza istek yapabilmek için böyle bir servis oluşturduk. Hem sürekli aynı kodu yazmamış oluruz hem de sunucu adresini tek bir yerden yönetebiliriz.

AuthService: Giriş, kayıt ve çıkış işlemlerini bu servis üzerinden hallediyoruz. Kullanıcı için sunucudan bir token geliyor ve o token ile işlemlerine devam edebiliyor.

Tag: Etiket sınıfı(modeli).

Mobil öncelikli kullanım düşündüğüm için genişliği limitlemeye çalıştım. “app.component.css” dosyasına #wrapper kuralını ekledim, bunun dışında CSS olarak bootstrap sınıflarını kullandım genel olarak.

Sunucu kısmı için ise, basit olması adına, PHP kullandım, bir index.php doyası oluşturup buna gelen istekleri direk burada işlemeye çalıştım. Uygulamada her istek bir “action” verisi gönderiyor. Bu isteklere uygun olarak gerekli kayıt/durdurma/başlatma işlemlerini yaparak bir JSON verisi döndürüyorum. Hem Angular/Javascript kısmından bağımsız olduğu için hem de henüz çok eksiği olduğu için paylaşmıyorum “php” kodlarını, kullandıkça eklemeler yaparak daha iyi hale getirmeye çalışacağım.

Bir Cevap Yazın