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.
# Bir komut satırı açarak bu komut ile # converter adında yeni bir proje oluşturabilirsiniz ng new converter # bu komut converter adında bir klasör oluşturur cd converter # projeye CSS için bootstrap ekleyerek devam ediyoruz npm install --save bootstrap
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.
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
Şimdi projemizi tarayıcı üzerinde açarak görmeye başlayabiliriz. Bunun için Angular CLI komutunu komut satırına girmemiz yeterli.
ng serve
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.
import {Component, OnInit} from '@angular/core';
import {CurrencyService} from './currency.service';
import {Response} from '@angular/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
// Listelenecek para birimleri ve döviz oranları
exchanges = [];
// Varsayılan olarak açılacak miktar ve döviz cinsi
currentCurrency = 'EUR';
currentAmount = 1;
// Burada birazdan oluşturacağımız bir Service i ekleyerek komponent içinde kullanılabilir hale getiriyoruz
constructor(private currencyService: CurrencyService) {}
// Class ı tanımlarken implement ettiğimiz OnInit sayesinde component başlarken
// bu methoda eklediğimiz kodlar da çalıştırılacaktır.
ngOnInit() {
// varsayılan değerlerimiz uygulama açılışında yüklensin
this.onCurrencyClick(this.currencyService.getData(this.currentCurrency));
}
// HTML kısmında tanımlayacağımız input için her değer değiştiğinde çağrılacak metot
onAmountChange(newAmount) {
newAmount = Number(newAmount);
if (newAmount > 0) {
this.currentAmount = newAmount;
for (let i = 0; i < this.exchanges.length; i++) {
const newRate = this.exchanges[i].rateOrigin * this.currentAmount;
this.exchanges[i].rate = newRate.toFixed(4);
}
}
}
// herhangi bir döviz cinsine tıklandığında hesaplamaları o döviz cinsine göre yapmaya başlayacak
onCurrencyClick(currency) {
this.currentCurrency = currency.code;
// constructor metodunda tanımladığımız servisimizi kullanarak döviz oranlarını çağırıyoruz.
this.currencyService.getRatesOf(currency.code).subscribe(
(response: Response) => {
// reset
this.exchanges = [];
// API isteği ile dönen değeri JSON nesnesine çeviriyoruz
const responseJson = response.json();
for (const ratedCode in responseJson.rates) {
if (responseJson.rates.hasOwnProperty(ratedCode)) {
const ratedData = this.currencyService.getData(ratedCode);
if (typeof ratedData !== 'undefined') {
ratedData.rateOrigin = responseJson.rates[ratedCode];
const newRate = responseJson.rates[ratedCode] * this.currentAmount;
ratedData.rate = newRate.toFixed(4);
this.exchanges.push(ratedData);
}
}
}
}
);
}
}
app.component.html
Döviz Dönüştürücü
{{exchange.name}}
{{exchange.rate}} {{exchange.code}}
currency.service.ts
import {Http} from '@angular/http';
import {Injectable} from '@angular/core';
@Injectable()
export class CurrencyService {
currencyData = {
'EUR': {flag: 'https://www.dbs.com.sg/iwov-resources/images/rates/euro_flg.gif', code: 'EUR', name: 'Euro'},
'USD': {flag: 'http://www.ecb.europa.eu/shared/img/flags/USD.gif', code: 'USD', name: 'US dollar'},
'JPY': {flag: 'http://www.ecb.europa.eu/shared/img/flags/JPY.gif', code: 'JPY', name: 'Japanese yen'},
'BGN': {flag: 'http://www.ecb.europa.eu/shared/img/flags/BGN.gif', code: 'BGN', name: 'Bulgarian lev'},
'CZK': {flag: 'http://www.ecb.europa.eu/shared/img/flags/CZK.gif', code: 'CZK', name: 'Czech koruna'},
'DKK': {flag: 'http://www.ecb.europa.eu/shared/img/flags/DKK.gif', code: 'DKK', name: 'Danish krone'},
'GBP': {flag: 'http://www.ecb.europa.eu/shared/img/flags/GBP.gif', code: 'GBP', name: 'Pound sterling'},
'HUF': {flag: 'http://www.ecb.europa.eu/shared/img/flags/HUF.gif', code: 'HUF', name: 'Hungarian forint'},
'PLN': {flag: 'http://www.ecb.europa.eu/shared/img/flags/PLN.gif', code: 'PLN', name: 'Polish zloty'},
'RON': {flag: 'http://www.ecb.europa.eu/shared/img/flags/RON.gif', code: 'RON', name: 'Romanian leu'},
'SEK': {flag: 'http://www.ecb.europa.eu/shared/img/flags/SEK.gif', code: 'SEK', name: 'Swedish krona'},
'CHF': {flag: 'http://www.ecb.europa.eu/shared/img/flags/CHF.gif', code: 'CHF', name: 'Swiss franc'},
'NOK': {flag: 'http://www.ecb.europa.eu/shared/img/flags/NOK.gif', code: 'NOK', name: 'Norwegian krone'},
'HRK': {flag: 'http://www.ecb.europa.eu/shared/img/flags/HRK.gif', code: 'HRK', name: 'Croatian kuna'},
'RUB': {flag: 'http://www.ecb.europa.eu/shared/img/flags/RUB.gif', code: 'RUB', name: 'Russian rouble'},
'TRY': {flag: 'http://www.ecb.europa.eu/shared/img/flags/TRY.gif', code: 'TRY', name: 'Turkish lira'},
'AUD': {flag: 'http://www.ecb.europa.eu/shared/img/flags/AUD.gif', code: 'AUD', name: 'Australian dollar'},
'BRL': {flag: 'http://www.ecb.europa.eu/shared/img/flags/BRL.gif', code: 'BRL', name: 'Brazilian real'},
'CAD': {flag: 'http://www.ecb.europa.eu/shared/img/flags/CAD.gif', code: 'CAD', name: 'Canadian dollar'},
'CNY': {flag: 'http://www.ecb.europa.eu/shared/img/flags/CNY.gif', code: 'CNY', name: 'Chinese yuan renminbi'},
'HKD': {flag: 'http://www.ecb.europa.eu/shared/img/flags/HKD.gif', code: 'HKD', name: 'Hong Kong dollar'},
'IDR': {flag: 'http://www.ecb.europa.eu/shared/img/flags/IDR.gif', code: 'IDR', name: 'Indonesian rupiah'},
'ILS': {flag: 'http://www.ecb.europa.eu/shared/img/flags/ILS.gif', code: 'ILS', name: 'Israeli shekel'},
'INR': {flag: 'http://www.ecb.europa.eu/shared/img/flags/INR.gif', code: 'INR', name: 'Indian rupee'},
'KRW': {flag: 'http://www.ecb.europa.eu/shared/img/flags/KRW.gif', code: 'KRW', name: 'South Korean won'},
'MXN': {flag: 'http://www.ecb.europa.eu/shared/img/flags/MXN.gif', code: 'MXN', name: 'Mexican peso'},
'MYR': {flag: 'http://www.ecb.europa.eu/shared/img/flags/MYR.gif', code: 'MYR', name: 'Malaysian ringgit'},
'NZD': {flag: 'http://www.ecb.europa.eu/shared/img/flags/NZD.gif', code: 'NZD', name: 'New Zealand dollar'},
'PHP': {flag: 'http://www.ecb.europa.eu/shared/img/flags/PHP.gif', code: 'PHP', name: 'Philippine peso'},
'SGD': {flag: 'http://www.ecb.europa.eu/shared/img/flags/SGD.gif', code: 'SGD', name: 'Singapore dollar'},
'THB': {flag: 'http://www.ecb.europa.eu/shared/img/flags/THB.gif', code: 'THB', name: 'Thai baht'},
'ZAR': {flag: 'http://www.ecb.europa.eu/shared/img/flags/ZAR.gif', code: 'ZAR', name: 'South African rand'}
};
constructor(private http: Http) {}
getData(code: string) {
return this.currencyData[code];
}
getRatesOf(code: string) {
return this.http.get('https://api.fixer.io/latest?base=' + code);
}
}
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,
# import ların yapıldığı üst bölümde servisi import edelim
import {CurrencyService} from './currency.service';
# @NgModule dekoratörünün içindeki providers değerine servisimizi ekleyelim
providers: [CurrencyService]
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