diskusi.tech (beta) Community

loading...
Cover image for Menggunakan QoreBase Di Angular(Ionic)

Menggunakan QoreBase Di Angular(Ionic)

bahyusanciko profile image Bahyu Sanciko ・6 min read

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 saya pikir kalo gaya nulis/pikir kita masi imperative bisa lah coba 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. Alt Text
  • Ketika login masuk kehalaman workspace, teken tombol Create Project untuk membuat nya Alt Text
  • Buat lah nama project kalian contoh = goverment Alt Text
  • 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 Alt Text
  • 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 Alt Text

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.
Alt Text

  • Buatlah Service Qorebase untuk membuat fungsi Create Dan Read Data dengan cli ionic g service service/qore lalu 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
    });
  }

}

Enter fullscreen mode Exit fullscreen mode

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();
  }

}

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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
Alt Text

  • 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();
  }
}
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

Hedaer Tolbar
menampilkam nama modul dan icon button untuk close modal

Content
Membuat Form untuk create data budget

Tampilan Create Data
Alt Text

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

pic
Editor guide
Collapse
yehezkielgunawan profile image
Yehezkiel Gunawan

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

Collapse
bahyusanciko profile image
Bahyu Sanciko Author

yoi tapi pake qorebase dengan angular ya :D

Collapse
yehezkielgunawan profile image
Yehezkiel Gunawan

dah tumpul naluri Angular saya sejak hampir 6 bulan gak nyentuh Ionic & Angular lagi hahahaha

Thread Thread
bahyusanciko profile image
Bahyu Sanciko Author

semua akan react pada waktunya ahahha

Thread Thread
yehezkielgunawan profile image
Yehezkiel Gunawan

Susah untuk tidak murtad ke React sekarang ini mas hahaha

Collapse
rizafahmi profile image
Riza Fahmi

Asik. Lanjut gan

Collapse
bahyusanciko profile image
Bahyu Sanciko Author

Lanjut Qorebase konek pake jquery pak