Kata Pengantar
Hello World, Perkenalkan saya Bahyu Sanciko Full Stack Enggineer di salah satu perusahaan yang selalu Bergerak dibidang non IT. Disini saya akan membahas tentang menggunakan Qorebase dan membuat Komponen/Service di Angular.
Apa Itu Angular?
Angular Adalah Framework javascript , yah yang terbiasa dengan konsep MVC cobalah framework kece ini ehehe.
Apa Itu Qorebase?
Tidak Bedanya dengan service firebase tapi ini lebih ke DMBS Cloud Computing Service BAAS, Kita Bisa gunakan lowcode juga, Tapi di sini saya akan membahas menggunakan koneksi nya untuk crud
Setup Angular(Ionic)
Untuk Setup angular ionic dan membuat build pwa nya mungkin saya kasih artikel nya saja.
Menggunakan QoreBase
- Langkah pertama login ke dashboard qorebase
Link.
Jika belum buatlah akun, tapi saya gatau dimana daftar ini akun saya di buat terakhir okteber 2021 itu ada menu daftar.
- Ketika login masuk kehalaman workspace, teken tombol Create Project untuk membuat nya
- Buat lah nama project kalian contoh = goverment
- Disini ketika sudah membuat project dan mengklik card tersebut akan ada data tabel, fungsi lain nya dan secara default akan membuat member seperti data users pada project tersebut
- Buat Lah Tabel dengan mengklik tombol plus di area sidebar tabel, saya akan membuat suatu aplikasi tentang budget Income dan Expense pada suatu transaksi. Seperti gambar berikut ini
Setelah ini akan lanjut ke tahap sdk qorebase untuk koneksi ke dari qorebase ke angularnya
Setup QoreBase SDK di angular
Disini saya akan menggunakan qorebase sdk javascript
Link
untuk membuat codegen/auth nya qorebase di javascript
ikuti langkah di atas, lalu untuk di angular nya.
- Buatlah Service Qorebase untuk membuat fungsi Create Dan Read Data dengan cli
ionic g service service/qorelalu dengan code di dalam nya
import { Injectable } from '@angular/core';
import { QoreClient, ProjectSchema } from "@feedloop/qore-client";
import { BehaviorSubject } from "rxjs";
import config from "../qore.config.json";
const client = new QoreClient<ProjectSchema>(config);
@Injectable({
providedIn: 'root'
})
export class QoreService {
authSubject = new BehaviorSubject(false);
constructor() { }
async getData(table) {
return await client
.view(table)
.readRows({ offset: 0, updatedAt: "desc" })
.toPromise().then((res) => {
this.authSubject.next(true);
// console.log(res)
return res.data
}).catch((err) => {
this.authSubject.next(false);
return err
});
}
async createData(table,data){
return await client.view(table).insertRow({ ...data }).then((res) => {
this.authSubject.next(true);
// console.log(res)
return res.data
}).catch((err) => {
this.authSubject.next(false);
return err
});
}
}
Di dalam import terdapat file untuk memanggil settingan qorebase yang telah kita setup dengan menggukana codegen qorebase, lalu di dalam class ini terdapat 2 fungsi untuk getData dan createData dimana itu kita menggunakan sintak yang telah ada di dokumentasi sdk qorebase untuk membuat didamis , saya memberikan param tabel, dan data untuk create
- Setelah ini membuat komponen untuk ui dan fungsional transaksinya, lalukan cli berikut untuk komponen view all dan create budget.
ionic g page budget
ionic g page budget/create
- lalu masuk ke file budget.page.ts dan budget.page.html untuk membuat list data dan modal create data
import { Component, OnInit } from '@angular/core';
import { QoreService } from "../service/qore.service";
import {
ModalController,
AlertController,
LoadingController,
} from "@ionic/angular";
import { CreatePage } from "./create/create.page";
@Component({
selector: 'app-budget',
templateUrl: 'budget.page.html',
styleUrls: ['budget.page.scss']
})
export class BudgetPage implements OnInit {
listData: any
loading: any
TotalIncome:number = 0
TotalExpense: number = 0
constructor(
private api: QoreService,
public alertController: AlertController,
public modalController: ModalController,
private loadingController: LoadingController
) {
}
ngOnInit() {
this.getData()
}
async getData(){
const loading = await this.loadingController.create({
duration: 2000,
});
await loading.present();
await loading.onDidDismiss();
await this.api.getData('allBudgets').then((res) => {
this.listData = res.nodes
this.listData.forEach(element => {
if (element.type === 'income') {
this.TotalIncome += element.price * element.amount
}else{
this.TotalExpense += element.price * element.amount
}
});
console.log(this.listData)
}).catch((err) => {
this.alert('ERROR', 'Silahkan Coba lagi');
});
}
async addTodo(){
const modal = await this.modalController.create({
component: CreatePage,
});
modal.onDidDismiss().then((modalData) => {
this.listData = []
this.TotalIncome = 0
this.TotalExpense = 0
this.getData();
});
return await modal.present();
}
doRefresh(event) {
setTimeout(() => {
event.target.complete();
this.ngOnInit()
}, 2000);
}
async alert(status, message) {
const alert = await this.alertController.create({
header: status,
// subHeader: "Subtitle",
message: message,
buttons: ["OK"],
});
await alert.present();
}
}
untuk logic saya mengimport service qorebase nya dan lib pada ionic angular seperti untuk membuat modal, alert , dan loading dan mengimport create page untuk di jadikan modal
membuat global varibel untuk listData,loading,TotalIncome,TotalExpense
ada ngOnInit seperti fungsi contructor untuk memangil fungsi getData , dalam fungsi tersebut pertama memanggil library loading dan langsung memanggil.
fungsi getdata(namaTabel) pada class service qorebase, ketika data sudah di dapetkan disini system mengkalkukasi kan ulang untuk mendapatkan total income dan expense sesuai typenya.
fungsi addTodo untuk memanggil modal dengan create page dsni saya membuat ketika di close modalnya di akan memanggil ulang ke getdata qorebase
Membuat Tampilan UI List Data
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title slot="start">
Budget Apps
</ion-title>
<ion-icon slot="end" class="ion-padding" (click)="addTodo()" name="add-circle-outline"></ion-icon>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="chevron-down-circle-outline" pullingText="Pull to refresh"
refreshingSpinner="circles" refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<ion-grid>
<ion-row>
<ion-col size="12" *ngFor="let item of listData">
<ion-card>
<ion-item>
<ion-label class="ion-no-padding" slot="start"> Type: <ion-badge>{{item.type | uppercase}}</ion-badge>
</ion-label>
<ion-text class="ion-no-padding" slot="end"> {{item.createdAt | date:'medium'}}</ion-text>
</ion-item>
<ion-item>
<ion-text>
<h6>Item: {{item.item}}</h6>
<h6>Harga: {{item.price | currency:'Rp ':'symbol':'3.0' }}</h6>
<p>Jumlah: {{item.amount}}</p>
</ion-text>
</ion-item>
<ion-item>
<ion-text>Total Harga: {{item.price*item.amount | currency:'Rp ':'symbol':'3.0' }}</ion-text>
</ion-item>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer>
<ion-item>
<ion-grid>
<ion-row>
<ion-col size="6">
<ion-label>
<p>Total Income</p>
<p>{{TotalIncome | currency:'Rp ':'symbol':'3.0' }}</p>
</ion-label>
</ion-col>
<ion-col size="6">
<ion-label>
<p>Total Expense</p>
<p>{{TotalExpense | currency:'Rp ':'symbol':'3.0' }}</p>
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-footer>
Hedaer Tolbar
menampilkam nama apps dan icon button untuk create data
Content
Menampilkan List data
Footer
Menampilkan kalkulasi pada income dan expense
Tampilan list data
- lalu masuk ke file create.page.ts dan create.page.html untuk membuat create data.
import { Component, OnInit } from "@angular/core";
import { ModalController } from "@ionic/angular";
import { AlertController, LoadingController } from "@ionic/angular";
import { QoreService } from "../../service/qore.service";
@Component({
selector: 'app-create',
templateUrl: './create.page.html',
styleUrls: ['./create.page.scss'],
})
export class CreatePage implements OnInit {
loading:any
constructor(
private api: QoreService,
private modalController: ModalController,
private loadingController: LoadingController,
public alertController: AlertController,
) { }
ngOnInit() {
}
async createData(form){
this.loading = await this.loadingController.create({
message: "Loading data from api",
});
this.api
.createData(`allBudgets`, form.value)
.then((res: any) => {
this.alert('Success', 'Created Your Data');
this.closeModal();
this.loading.dismiss();
})
.catch((err) => {
this.loading.dismiss();
this.alert('ERROR', 'Silahkan Coba lagi');
});
this.loading.present();
}
async closeModal() {
await this.modalController.dismiss();
}
async alert(status, ress) {
const alert = await this.alertController.create({
header: status,
message: ress,
buttons: ["OK"],
});
await alert.present();
}
}
Fungsi CreateData(form) pada fungsi tersebut param yg diisikan adalah data form yg telah di buat di html tersebut ketika klik submit, ada fungsi loading dan lalu memanggil class fungsi service createData pada importan qorebase servicee yang telah dibuat
Membuat UI create Data
<ion-header>
<ion-toolbar>
<ion-title>Create Budget</ion-title>
<ion-buttons slot="end" fill="clear" (click)="closeModal()" class="ion-padding">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<form #form="ngForm" (ngSubmit)="createData(form)">
<ion-row>
<ion-col size="12">
<ion-item>
<ion-label position="floating">Item</ion-label>
<ion-input ngModel name="item" type="text" required>
</ion-input>
</ion-item>
</ion-col>
<ion-col size="12">
<ion-item>
<ion-label position="floating">Price</ion-label>
<ion-input ngModel name="price" type="number" required>
</ion-input>
</ion-item>
</ion-col>
<ion-col size="12">
<ion-item>
<ion-label position="floating">Amount</ion-label>
<ion-input ngModel name="amount" type="number" required>
</ion-input>
</ion-item>
</ion-col>
<ion-col size="12">
<ion-item>
<ion-label position="floating">Type</ion-label>
<ion-select interface="popover" placeholder="choose one" ngModel name="type" >
<ion-select-option value="income">Income</ion-select-option>
<ion-select-option value="expense">Expense</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col size="12">
<ion-button size="medium" type="submit" expand="block" [disabled]="form.invalid">Submit</ion-button>
</ion-col>
</ion-row>
</form>
</ion-card>
</ion-content>
Hedaer Tolbar
menampilkam nama modul dan icon button untuk close modal
Content
Membuat Form untuk create data budget
Tampilan Create Data
Sekian
Untuk source code tersebut saya sediakan github dan hasil build ke nya netlify
Terima Kasih
Disclaimer
**Maaf Jika Artikel Ini Ada Salah Penulisan atau Sintak
Discussion
Wow, baru tau saya ternyata ada Qorebase yang bisa dimanfaatin as CMS ya. Mayan nih buat alternatif bikin project yang mengandung CRUD wkwk. Bosen Firebase mulu
yoi tapi pake qorebase dengan angular ya :D
dah tumpul naluri Angular saya sejak hampir 6 bulan gak nyentuh Ionic & Angular lagi hahahaha
semua akan react pada waktunya ahahha
Susah untuk tidak murtad ke React sekarang ini mas hahaha
Asik. Lanjut gan
Lanjut Qorebase konek pake jquery pak