Crypto Tracker App dengan Ionic 3: Setup aplikasi
Ionic adalah framework yg dapat digunakan untuk mengembangkan aplikasi mobile hybrid. Dengan menggunakan Ionic kita bisa mengenerate aplikasi untuk Ios, Android maupun web.
Dalam seri tutorial ini kita akan belajar membuat aplikasi dengan menggunakan Ionic versi 3. Kita memerlukan Node.js untuk develop aplikasi dengan Ionic CLI. Pastikan Node.js telah terinstall pada komputer. Sebelum memulai tutorial ini ada baiknya bila anda telah paham setidaknya sintaks dasar dan struktur dari Ionic framework. Hal ini tentunya akan membantu mempercepat dalam pemahaman code yg ada dalam seri ini.
Sebelum memulai tutorial ini ada baiknya bila anda telah paham setidaknya sintaks dasar dan struktur dari Ionic framework.Dalam tutorial ini kita akan melihat bagaimana langkah awal setup dan membuat aplikasi dengan Ionic.
Ionic CLI
Install Ionic CLI dan cordova dengan sintaks berikut:npm install -g ionic@latest cordovaSetelah selesai terinstall lanjutkan dengan membuat project dengan ionic CLI ini.
Buat Project
Saya menyiapkan sebuah folder project dan di dalamnya saya buat Ionic project dengan sintaks berikut:ionic start cryptotracker tabsSintaks ini menandakan kita membuat project baru dengan nama cryptotracker dimana secara otomatis akan menggunakan layout tabs. Bila anda mendapatkan pertanyaan seperti quote di bawah ini, anda dapat menjawabnya dengan Yes (y).
Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N)Masuk ke dalam folder cryptotracker dan coba jalankan aplikasi yg baru saja kita buat.
cd cryptotracker/
ionic serveBrowser akan otomatis active dan menampilkan halaman http://localhost:8100/.
Sebelum memulai tahap berikutnya, mari kita terminate aplikasi yg sedang berjalan. Cukup dengan sintaks Ctrl + c pada command window yg sedang aktif.
Membuat halaman Home
Buka project dengan aplikasi editor. Dalam seri ini saya menggunakan Visual Code sebagai editor. Hapus folder /src/pages/home karena kita akan ulang membuatnya sehingga memiliki fitur lazy loading. Fitur ini berguna ketika halaman pertama aplikasi di buka tidak serta merta melakukan load semua source, namun hanya source yg di perlukan saja.
Buat kembali page home dengan sintaks pada command line editor.
ionic generate page home
Buka file home.html dan isikan dengan code berikut
Monitor
{{ holding.crypto }}
Asset: ฿ {{ holding.amount }} Value: Rp {{ holding.value }} Total: Rp {{ holding.total }}
Lanjutkan dengan membuka file home.ts dan isikan dengan sintaks berikut.
import { Component } from '@angular/core';
import { NavController, IonicPage, AlertController } from 'ionic-angular';
import { CryptoCompareProvider } from '../../providers/crypto-compare/crypto-compare';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
private isActive: boolean = true;
private sub: Subscription;
constructor(
public navCtrl: NavController,
private cryptoCompareProvider: CryptoCompareProvider,
private alertCtrl: AlertController) {
}
ionViewDidLoad() {
this.isActive = true;
this.cryptoCompareProvider.loadHoldings();
this.sub = Observable.interval(8000).subscribe(() => {
this.cryptoCompareProvider.loadHoldings();
});
}
ionViewWillLeave() {
this.sub.unsubscribe();
}
addHolding(): void {
this.navCtrl.push('AddHoldingPage');
}
showRemoveConfirm(holding): void {
let confirm = this.alertCtrl.create({
title: 'Remove holding',
message: 'Are you sure to delete '+ holding.crypto +' ?',
buttons: [
{
text: 'Cancel',
handler: () => {
}
},
{
text: 'Delete',
handler: () => {
this.cryptoCompareProvider.removeHolding(holding);
}
}
]
});
confirm.present();
}
}
Sintaks ini cukup jelas dan sederhana. Ketika pertama kali load maka akan dijalankan function ionViewDidLoad. Diperlukan sebuah provider untuk menjalankan function ionViewDidLoad untuk melakukan pengecekan dari API Crypto Tracker. API ini bisa di dapatkan di cryptocompare. API ini menggunakan lisensi Creative Commons - Attribution Non-Commercial.
Melalui command buat provider dengan sintaks:
ionic generate provider CryptoCompare
Sintaks diatas akan menghasilkan file di /src/providers/crypto-compare/crypto-compare.ts. Isi file crypto-compare.ts dengan code sebagai berikut.
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
const cryptocompare_url_multi = "https://min-api.cryptocompare.com/data/pricemulti";
const cryptocompare_url_single = "https://min-api.cryptocompare.com/data/price";
const storageName = "cryptoHoldings";
interface Holding {
crypto: string,
amount: number,
value?: number,
total: number
}
@Injectable()
export class CryptoCompareProvider {
public holdings: Holding[] = [];
public loaderPriceTimeout: any;
constructor(public http: HttpClient, private storage: Storage) {}
loadHoldings(): void {
this.storage.get(storageName).then(holdings => {
if(holdings !== null) {
holdings.sort(this.compareByCrpto);
this.holdings = holdings;
if(this.holdings.length) {
this.fetchPrices();
}
}
});
}
fetchPrices(): void {
let fysms = this.getFysms();
let request = this.http.get(cryptocompare_url_multi + '?fsyms='+fysms+'&tsyms=IDR');
request.subscribe(
results => {
let holdingResults: Holding[] = [];
for(let x in results) {
if(results.hasOwnProperty(x)) {
let currentHolding: Holding = this.holdings.find(item => item.crypto === x.toString());
if(currentHolding) {
let holdingItem = {
crypto: x,
amount: currentHolding.amount,
value: results[x].IDR,
total: currentHolding.amount * results[x].IDR
}
holdingResults.push(holdingItem);
}
}
}
holdingResults.sort(this.compareByCrpto);
this.holdings = holdingResults;
},
err => {
console.log('error');
}
);
}
getFysms(): string {
let fysms = '';
if(this.holdings.length) {
this.holdings.forEach((holding) => {
fysms = fysms + holding.crypto + ',';
});
fysms = fysms.slice(0, -1);
}
return fysms;
}
verifyHolding(holding: Holding): Observable {
return this.http.get(cryptocompare_url_single + '?fsym='+holding.crypto+'&tsyms=IDR');
}
addHolding(holding: Holding): void {
let currentHolding: Holding = this.holdings.find(item => item.crypto === holding.crypto);
if (currentHolding) {
this.holdings.splice(this.holdings.indexOf(currentHolding), 1);
}
this.holdings.push(holding);
this.saveHoldings();
this.fetchPrices();
}
removeHolding(holding): void {
this.holdings.splice(this.holdings.indexOf(holding), 1);
this.saveHoldings();
this.fetchPrices();
}
saveHoldings(): void {
this.storage.set(storageName, this.holdings);
}
clearTimeout(): void {
clearInterval(this.loaderPriceTimeout);
}
compareByCrpto(a, b): number {
if (a.crypto < b.crypto) return -1;
if (a.crypto > b.crypto) return 1;
return 0;
}
}
Karena dalam provider diatas terdapat sintaks HttpClient, maka kita perlu menambahkan HttpClientModule pada app.module.ts sesuai highlight berikut.
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { IonicStorageModule } from '@ionic/storage';
import { HttpClientModule } from '@angular/common/http';
import { MyApp } from './app.component';
...
Masih pada file yg sama import HttpClientModule.
...
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
HttpClientModule
],
...
Sekarang kita dapat menjalankan aplikasi ini seperti sintaks yg pernah kita lakukan di atas
ionic serve
Wrap up
Kita telah mengimplementasikan cara pembuatan aplikasi mobile dengan Ionic CLI. Kita juga telah membuat page dan provider melalui Ionic CLI. Untuk bisa menggunakan HttpClient, kita juga telah menambahkan modul tersebut pada app.module.ts. Untuk lebih detail mengenai code yg di hasilkan dalam seri ini dapat langsung di unduh pada github.
Ionic akan menghasilkan aplikasi hybrid, cross platform dan menarik untuk di pelajari.
Comments
Post a Comment