Lowcoder Gencode

Hệ thống tạo mã tự động cho lowcoder dựa trên mô hình của Plasmic.

Tích hợp với Editor

Gencode đã được tích hợp trực tiếp vào giao diện editor của Lowcoder thông qua nút "Tạo mã" trên thanh công cụ. Khi nhấn vào nút này, hệ thống sẽ lấy DSL của ứng dụng hiện tại và tạo mã tương ứng.

Tích hợp thư viện từ npm

Thư viện acp-gencode có thể được cài đặt và sử dụng trong Lowcoder như một dependency bình thường:

1. Cài đặt thư viện:

cd client
yarn add acp-gencode

2. Import các hàm từ thư viện trong component GenCodeButton:

import { generateCodeFromDSL } from "acp-gencode/dist/integrations/editorIntegration";

3. Sử dụng hàm trực tiếp để tạo mã:

const code = await generateCodeFromDSL(dsl, { template, designSystem });

Cách tiếp cận này đơn giản hóa quá trình tích hợp và loại bỏ nhu cầu phải chạy một service API riêng biệt.

Cài đặt

Cài đặt từ npm

npm install acp-gencode
# hoặc
yarn add acp-gencode

Cài đặt từ source

git clone https://github.com/vnpt/acp-gencode.git
cd acp-gencode
npm install
npm run build

Sử dụng

Tạo một component schema

import { createComponentBuilder, createPropSchema } from 'acp-gencode';

// Tạo một component builder
const buttonBuilder = createComponentBuilder('button', 'Button')
  .addProp('text', createPropSchema('string', {
    defaultValue: 'Button',
    description: 'Nội dung của button'
  }))
  .addProp('type', createPropSchema('string', {
    defaultValue: 'primary',
    description: 'Kiểu của button'
  }))
  .addProp('disabled', createPropSchema('boolean', {
    defaultValue: false,
    description: 'Trạng thái disabled của button'
  }))
  .exposeState('disabled')
  .exposeMethod({
    name: 'click',
    description: 'Kích hoạt sự kiện click của button'
  });

// Xây dựng schema
const buttonSchema = buttonBuilder.build();

Tạo mã từ schema

import { generateComponentCode } from 'acp-gencode';

// Tạo mã từ schema
const code = await generateComponentCode(buttonSchema, {
  template: 'default',
  designSystem: 'lowcoder'
});

console.log(code.imports);
console.log(code.props);
console.log(code.body);
console.log(code.exposing);

API

SchemaGenerator

• createComponentSchema(type, name, props): Tạo một component schema mới
• addChildToSchema(parent, child): Thêm một component con vào component cha
• addPropToSchema(schema, propName, propSchema): Thêm một thuộc tính vào component schema
• addStylesToSchema(schema, styles): Thêm style vào component schema
• addEventToSchema(schema, event): Thêm một event vào component schema
• addExposedState(schema, stateName): Thêm một state được expose vào component schema
• addExposedMethod(schema, method): Thêm một method được expose vào component schema
• validateSchema(schema): Kiểm tra tính hợp lệ của component schema
• schemaToJson(schema): Chuyển đổi component schema thành JSON
• jsonToSchema(json): Chuyển đổi JSON thành component schema

CodeGenerator

• generateComponentCode(schema, options): Tạo mã cho component từ schema
• generateImports(schema, designSystem): Tạo imports cho component
• generateProps(schema): Tạo props interface cho component
• generateComponentBody(schema, template): Tạo body cho component
• generateExposing(schema): Tạo mã cho exposed state và methods
• assembleComponentFile(code): Tạo file component hoàn chỉnh

ComponentBuilder

• new GenComponentBuilder(type, name, options): Khởi tạo một component builder mới
• addProp(name, propSchema): Thêm một prop vào component
• addProps(props): Thêm nhiều props vào component
• addChild(childSchema): Thêm một component con vào component
• addChildren(childrenSchemas): Thêm nhiều component con vào component
• addStyle(styleKey, styleValue): Thêm một style vào component
• addStyles(styles): Thêm nhiều styles vào component
• addEvent(event): Thêm một event vào component
• addEvents(events): Thêm nhiều events vào component
• exposeState(stateName): Expose một state của component
• exposeStates(stateNames): Expose nhiều states của component
• exposeMethod(method): Expose một method của component
• exposeMethods(methods): Expose nhiều methods của component
• setOptions(options): Cập nhật tùy chọn cho builder
• build(): Xây dựng và trả về component schema
• generateCode(): Tạo mã từ component schema
• GenComponentBuilder.fromSchema(schema, options): Tạo một component builder từ schema có sẵn

Tích hợp với Lowcoder

Cách thêm GenCodeButton vào editor

1. Thêm component GenCodeButton vào thư mục client/packages/lowcoder/src/components/
2. Cập nhật file editorView.tsx để thêm nút GenCodeButton vào header
3. Cập nhật file header.tsx để hỗ trợ rightContent
4. Thêm các chuỗi dịch vào file i18n

Cách sử dụng

1. Cài đặt dependencies:

   cd gencode
   npm install
   cd ../client
   yarn install

2. Khởi động Lowcoder:

   cd client
   yarn start

3. Truy cập vào editor và nhấn vào nút "Tạo mã" trên thanh công cụ

Đóng góp

Vui lòng đọc CONTRIBUTING.md để biết chi tiết về quy trình đóng góp.

Giấy phép

Dự án này được cấp phép theo giấy phép MIT - xem file LICENSE để biết thêm chi tiết.