PengenalanDBMLFlowchartAPI SpecificationLibraryData ModelEngine LibraryDriver LibraryContoh Kasus

Frontend Driver

Driver Library digunakan untuk mengakses koleksi API yang sebelumnya telah didefinisikan pada spesifikasi API. Namespace API dapat diakses melalui your-blueprint/driver. Pada namespace API terdapat kelas Driver yang menggunakan design pattern Singleton.

API Driver
interface DriverParameters {
  base_url: string;
  intercept?: {
    request?: boolean;
    response?: boolean;
  };
}
 
namespace API {
  class Driver {
    static instance(): Driver;
    init(parameters: DriverParameters): Driver;
    driver: { [path: string]: <Koleksi Objek Endpoint> };
  }
}

Untuk mengakses koleksi API, pengguna harus menginisialisasi kelas Driver terlebih dahulu. Contoh inisialisasi kelas Driver:

const driver_instance: API.Driver = API.Driver
  .instance()
  .init({ base_url: 'http://localhost:9000' });

lalu mengakses koleksi API melalui atribut driver pada kelas API.Driver

const driver_instance: API.Driver = API.Driver
  .instance()
  .init({ base_url: 'http://localhost:9000' });
 
const caller = driver_instance.driver['<endpoint path>']['<endpoint path>']();

Struktur data driver: { [path: string]: <Koleksi Objek Endpoint> }; disusun dengan urutan metode endpoint terlebih dahulu lalu diikuti path endpoint dan menghasilkan fungsi lambda untuk memanggil API tersebut. Sehingga konstanta caller pada kutipan kode di atas adalah sebuah fungsi lambda untuk mengeksekusi pemanggilan API.

Fungsi pemanggil API caller memiliki satu parameter objek yang berisi kelompok parameter sesuai spesifikasi API seperti pada Data Model. Misal spesifikasi API sbb:

API Specification
title: Sample App
paths:
  /masuk:
    post:
      summary: |-
        Masuk ke akun yang
        sudah terdaftar
      parameters:
        data:
          type: PayloadLogin
          required: true
          in: body
      return:
        type: object
        required: true
        children:
          token:
            type: string
            required: true
          user:
            type: User
            required: true
 
schemas:
  PayloadLogin:
    properties:
      email:
        type: string
        required: true
      password:
        type: string
        required: true

eksekusi fungsi caller membutuhkan parameter objek PostRequestMasuk dengan struktur sbb:

// berasal dari schemas
class PayloadLogin {
  'email': string;
  'password': string;
}
 
// berasal dari endpoint request
class PostRequestBodyMasuk {
  'data': PayloadLogin;
}
interface PostRequestMasuk {
  body: PostRequestBodyMasuk;
}

Berikut contoh penggunaan caller dari contoh di atas pada ReactJS.

pages/SomePage.tsx
import { User } from 'your-blueprint/model';
import { API, Schema } from 'your-blueprint/driver';
 
export function SomePage() {
  const [data, setData] = useState<Schema.PayloadLogin>({ email: '', password: '' });
 
  async function submitLogin() {
    const caller = API
      .Driver
      .instance()
      .init({ base_url: 'http://localhost:9000' })
      .driver
      .post['/login']();
    try {
      const res: Schema.PostResponseMasuk = await caller({
        body: {
          data: data
        }
      });
    } catch (err: any) {
      alert(err.toString());
    }
  }
  
  return (
    <div>
      <input
        type={'email'}
        value={data.email}
        onChange={e => setData({ ...data, email: e.target.value })} />
      <input
        type={'password'}
        value={data.password}
        onChange={e => setData({ ...data, password: e.target.value })} />
      <button
        onClick={submitLogin}>
        Login
      </button>
    </div>
  );
}
Outline