Angular ile Döviz Çevirme Uygulaması

Bir döviz çeviri APIsine denk gelince Angular ile basit bir web uygulaması yaparak arayüz eklemek güzel bir pratik olur dedim.

API; http://fixer.io/
Uygulama Github adresi; https://github.com/erdoganbavas/Currency-Converter/
Uygulamanın çalışır hali; https://erdoganbavas.github.io/Currency-Converter/

Hızlı bir pratik olması için yapılmış bir uygulama olduğundan pek çok eksiği veya daha kullanışlı olabilecek özellikleri olabilir.
Uygulamayı Github adresinden çekerek direk çalıştırabilir ve düzenleyebilirsiniz. En baştan başlayarak yapmak isterseniz biraz adımlardan bahsedeyim.

Angular CLI
https://github.com/angular/angular-cli
Angular için en kullanışlı araçlardan biridir. Yeni proje oluşturma, Component ekleme, geliştirme sırasında izleyerek otomatik build etme gibi hayat kurtaran özellikleri var.

Angular CLI aracını kurduktan sonra Windows için aşağıdaki adımlar ile projeyi oluşturup başlayabilirsiniz.

Dosya yapısı an itibari ile şu şekilde, Angular’ın yeni sürümlerinde bu yapı değişebilir.

Dosyalarımız üzerinde çalışmaya hazır. Kullandığımız editör ile (benim tercihim WebStorm) .angular-cli.json dosyasını açarak Bootstrap dosyamızı projemize eklememiz gerekli. styles elemanını bulup aşağıdaki şekilde değiştiriyoruz.

Şimdi projemizi tarayıcı üzerinde açarak görmeye başlayabiliriz. Bunun için Angular CLI komutunu komut satırına girmemiz yeterli.

Projemiz http://localhost:4200/ adresinde görülebilir hale gelmiş olmalı.

Proje çok basit olduğu için yeni bir Component eklemeden devam ediyoruz. Ana Componentimiz olan app.component.ts dosyasını aşağıdaki şekle getiriyoruz.

app.component.html

currency.service.ts

Servisimizi ekledikten sonra şu adımı da yaparak servisi tüm uygulama içinde tek bir oluşum(instance) ile kullanabiliyoruz.
app.module.ts dosyasına,

Gerekli kodları eklerken her kayıt işlemini izleyen “ng serve” komutu projeyi build ederek tarayıcıda görülmeye hazır hale getirecektir.

Bir Cevap Yazın