PengenalanDBMLFlowchartAPI SpecificationLibraryData ModelEngine LibraryDriver LibraryContoh Kasus

Library (Pustaka)

Untuk menghasilkan library (pustaka), pengguna harus men-deploy Blueprint terlebih dahulu. Hasil publikasi (deploy) memunculkan instruksi instalasi paket npm melalui repository git.

Library yang dihasilkan oleh Pagonila terdiri dari tiga bagian:

Tiga bagian di atas dapat langsung digunakan pada program backend dan frontend.

Data Model berisi seluruh koleksi model basis data dan skema dalam bentuk static types Typescript. Seluruh struktur data terdefinisi dalam bentuk interface dan type Typescript. Struktur data yang dimaksud mencakup model basis data, enumerasi basis data, daftar endpoint API, parameter API, data kembalian (return value) API, dan skema lain yang tidak digunakan pada API.

Engine Library berisi program backend yang dapat langsung digunakan sebagai aplikasi backend layaknya seperti ExpressJS. Engine Library menyediakan berbagai fitur otomasi seperti validasi request, transformasi request, error handling, return value handling, dan static type checking yang otomatis dilakukan oleh Typescript. Engine Library berusaha mengeliminasi pekerjaan yang tidak esensial dan berulang dalam membuat sebuah program sehingga programmer fokus pada implementasi proses bisnis dari backend tersebut.

Driver Library berisi program frontend yang digunakan untuk mengakses API backend layaknya seperti Axios HTTP. Driver Library menyediakan koleksi API yang telah didefinisikan pada backend dengan memanfaatkan fitur static types Typescript. Driver Library memudahkan frontend untuk mengakses seluruh API yang tersedia termasuk parameter request dan nilai kembalian (return value) yang diberikan oleh API.

Best Practice

Library yang dihasilkan Pagonila dapat langsung dikonsumsi oleh project frontend dan backend yang menggunakan Javascript/Typescript.

Backend Engine

Berikut ini salah satu cara untuk mengimplementasikan backend engine.

Inisialisasi Project

Buat direktori project backend, lalu inisialisasi npm

mkdir sistem-x
cd sistem-x
npm init -y

Install Typescript dan inisialisasi tsconfig.json

npm install --save-dev typescript
npx tsc --init

[opsional] Ubah folder tujuan keluaran kompilasi Typescript

sistem-x/tsconfig.json
{
  ...
  "outDir": "dist"
  ...
}

Install Engine Library

Install library keluaran Pagonila.

npm install --save git+https://your-username:glpat-your-credential@git.dev.graf-research.com/ark-project/your-blueprint.git

Inisialisasi berkas index.ts

sistem-x/index.ts
import { Backend } from 'your-blueprint/engine';
 
const port = 9000;
const param: Backend.SystemParam = {
  port
};
new Backend.Engine().init(param);

Install Driver Basis Data

Implementasi Pagonila menggunakan model TypeORM sebagai ORM, ini memudahkan proses migrasi basis data menggunakan cara TypeORM.

Install dependensi TypeORM, PostgresSQL (sesuaikan dengan kebutuhan jenis basis data), dan TS-Node

npm install --save typeorm pg
npm install --save-dev ts-node

Buat berkas data-source.ts

sistem-x/data-source.ts
import { DataSource, DataSourceOptions } from "typeorm";
import path from 'path';
import { cwd } from "process";
 
const config: DataSourceOptions = {
  type: "postgres",
  host: '<your db host>',
  port: <your db port number>,
  username: '<your db username>',
  password: '<your db password',
  database: '<your db name>',
  synchronize: false,
  logging: false,
  migrations: [
    __dirname + '/migration/**.ts'
  ],
  entities: [
    path.resolve(cwd(), 'node_modules/your-blueprint/model.js')
  ]
};
 
export const AppDataSource = new DataSource(config);

Tambah script generate-migration (untuk generate migration script) dan migration (untuk melakukan migrasi basis data)

sistem-x/package.json
...
 
  "scripts": {
    ...
    "typeorm": "typeorm-ts-node-commonjs",
    "generate-migration": "npm run typeorm migration:generate -- $1 -d ./data-source.ts",
    "migrate": "npm run typeorm migration:run -- -d ./data-source.ts"
  }
...

Inisialisasi script migration pertama

npm run generate-migration migration/Init

Jalankan migration untuk mengeksekusi script migration

npm run migrate

Implementasi Backend

Inisialisasi akses basis data dan implementasi API pada backend engine.

sistem-x/index.ts
import { Backend } from 'your-blueprint/engine';
import { AppDataSource } from './data-source';
 
const port = 9000;
const param: Backend.SystemParam = {
  port,
  async beforeStart() {
    await AppDataSource.initialize();
  }
};
new Backend.Engine().init(param).then((engine: Backend.Engine) => {
  engine.implement({
    path: '<path name>',
    method: '<method name>',
    async fn(param) {
      // implement logic
    }
  });
});

Backend siap dipakai. Penjelasan lebih lengkap mengenai fitur backend dapat lihat di Engine Library

Frontend Driver

Berikut contoh penggunaan Frontend Driver.

ReactJS

pages/SomePage.tsx
import { User } from 'your-blueprint/model';
import { API } from 'your-blueprint/driver';
 
export function SomePage() {
  const [list_user, setListUser] = useState<User[]>([]);
 
  async function getDataUser() {
    const caller = API
      .Driver
      .instance()
      .init({ base_url: 'http://localhost:9000' })
      .driver
      .get['<path name>']();
    try {
      const res: User[] = await caller({
        query: {
          // some query if exist
        }
      });
      setListUser(res);
    } catch (err: any) {
      alert(err.toString());
    }
  }
  
  return (
    <div>
      {
        list_user.map((user: User) => (
          <SomeComponent key={user.id} data={user} />
        ))
      }
    </div>
  );
}

NodeJS

controllers/foo.ts
import { User } from 'your-blueprint/model';
import { API } from 'your-blueprint/driver';
 
export function foo() {
  const caller = API
    .Driver
    .instance()
    .init({ base_url: 'http://localhost:9000' })
    .driver
    .get['<path name>']();
  try {
    const res: User[] = await caller({
      query: {
        // some query if exist
      }
    });
    setListUser(res);
  } catch (err: any) {
    alert(err.toString());
  }
 
  // some other logic process
}
 
// call foo
foo();

Penjelasan lebih lengkap mengenai fitur frontend driver dapat lihat di Driver Library

Outline