i-AUD Developer Kit
1. 소개
- AUD플랫폼은 업무시스템 화면 개발을 위한 솔루션으로 기존 <BI 툴>, <리포팅 툴>, <시각화 분석 툴>,
<UI/UX 툴>, <JSP/Java 개발>로 해 왔던 다양한 화면 개발이 가능한 통합 UI 개발 플랫폼입니다.
하나의 플랫폼에서 정형/비정형 보고서, OLAP, Dashboard, Report 등 다양한 형태의 화면을 제작할 수 있으며,
지금까지 UI / UX 툴로 개발했던 각종 웹 화면이나 JSP / Java로 개발했던 화면들도 복잡하고 어려운 개발과정 없이 쉽고 빠르게 개발할 수 있습니다.
또한 Low Code 개발을 위한 다양한 AI 기술이 적용되어 있어 코딩을 모르는 사용자도 쉽게 업무용 화면을 개발할 수 있습니다.
1.2. i-AUD
- i-AUD는 AUD Platform의 핵심 도구로, WYSIWYG(위지윅) 방식의 웹 애플리케이션 개발 환경을 제공합니다.
- TypeScript(JavaScript) 기반의 단일 언어로 **클라이언트(Client Script)**와 서버(Server Script) 개발이 모두 가능하며,
Java, Python, .NET, Perl 등의 별도 언어 학습 없이도 손쉽게 접근할 수 있습니다.
1.3. i-AUD Developer Kit
i-AUD Developer Kit은 Visual Studio Code (VS Code)에서 i-AUD 보고서 및 스크립트를 개발할 수 있도록 지원하는 공식 확장(extension) 도구입니다.
이 확장을 통해 다음과 같은 작업을 손쉽게 수행할 수 있습니다:
- i-AUD 보고서의 다운로드 및 업로드
- TypeScript 기반 클라이언트/서버 스크립트 개발
- 자동 빌드 및 배포
- 명령어 기반 보고서 실행 및 테스트
- 보고서 컨트롤에 대한 코드 자동 생성
💡 또한, GitHub Copilot 기반의 AI 코딩 에디터인 **Cursor**에서도 완벽하게 호환됩니다.
주요 기능 요약
| 기능 |
설명 |
| 보고서 다운로드 / 업로드 |
서버와 로컬 간 프로그램 및 디자인 동기화 |
| 스크립트 자동 생성 |
클라이언트 및 서버 스크립트 기본 구조 자동 생성 |
| Control 변수 자동 생성 |
보고서 내 모든 UI 컨트롤에 대한 변수 선언 자동화 |
| TypeScript 지원 |
.ts 확장자로 스크립트를 개발 및 자동 빌드 지원 |
| SQL 실행 도우미 |
SQL을 선택 후 실행하여 결과를 콘솔에 출력 |
| JavaScript ↔ Text 변환 |
JS 배열 문자열 ↔ 일반 텍스트 변환 도구 제공 |
2. i-AUD 개발 환경 설정
2.1 작업 디렉토리에서 vs-code를 실행 합니다.
cd D:\aud_report
code .
2.2 개발 소스 다운로드 - GitHub에서 개발 환경에 필요한 seed project를 다운로드 합니다.
npm -install
2.3 개발 서버에 연결을 위한 정보를 셋팅 합니다.
- vs-code 작업디렉토리 하위에
.vscode/settings.json 파일을 추가하고 아래와 같이 설정 합니다.
{
"aud.config": {
"SourcePath": "D:\\aud_report\\src\\reports\\", // 소스 디렉토리 (seed project의 reports 경로)
"OutputPath": "D:\\aud_report\\out\\reports\\", // 출력 디렉토리 (seed project의 reports 경로를 기준으로 src가 아닌 out 디렉토리로 설정)
"ServiceURL": "http://aaa.com:8080", // AUD Platform 서버 주소
"UserName": "{your account name}", // AUD Platform 서버의 계정이름
"ApiKey": "{your api key}", // API Key
// <인증키 생성 방법>
// 1. AUD Platform Admin의 시스템 옵션에서 개인 인증키 활성화 정보를 등록 합니다.
// USE_PRIVATE_AUTH_KEY=Y
// 2. 인증 키 관리 메뉴에서 "개인용 Access Token 발급"에서 "Access Token 생성"을 통해 발급받습니다.
"AutoBuild": false, // 스크립트 저장에서 tsc 빌드를 자동으로 실행할지 여부 (`tsc --w` 명령어를 통해 수정된 파일이 실시간으로 빌드하는 방법을 추천합니다.)
"MX_GRID_BACKUP": true, //MX-GRID 디자인 정보를 다운로드 할지 여부를 설정합니다.
"MX_GRID_JSON_PRETTY": true, //i-AUD 보고서 파일 (json 구조)을 자동 formatting할 지 여부를 설정합니다.
"QueryResultLimit":100, //쿼리 출력 최대 건수 입니다.
"QueryResultFileName" : "QueryResult.txt" //쿼리 출력 파일명 , 값이 없으면 console에 출력 됩니다.
}
}
3. 보고서 개발 절차
3.1. i-AUD Designer에서 새로운 보고서를 저장 합니다.
- i-AUD Designer에서 필요한 컴포넌트를 배치 및 디자인을 합니다.
3.2. vs-code에서 생성된 보고서를 다운로드 합니다.
AUD:Download Report 명령어를 실행하여 저장된 보고서를 다운로드 합니다.- 다운로드된 폴더를 작업하고자 하는 위치로 이동합니다.
3.3. TypeScript 개발 준비
- TypeScript로 개발하기 위해서 {폴더명}.script.js 파일의 확장자를 .ts 로 변경합니다.
(Client Script는 {폴더명}.script.ts 파일을 우선으로 탐색합니다. js로 개발하실 경우 {폴더명}.script.js 파일을 유지하셔도 됩니다.)
AUD: Generate starter code를 실행하여 TypeScript 빌드에 필요한 모듈을 import 합니다.
import { Matrix } from "@AUD_CLIENT/control/Matrix";
import { NumberBox } from "@AUD_CLIENT/control/NumberBox";
import { CheckBox } from "@AUD_CLIENT/control/CheckBox";
import { Label } from "@AUD_CLIENT/control/Label";
import { iGrid } from "@AUD_CLIENT/control/iGrid";
import { ComboBox } from "@AUD_CLIENT/control/ComboBox";
import { Image } from "@AUD_CLIENT/control/Image";
import { ColorPicker } from "@AUD_CLIENT/control/ColorPicker";
import { Button } from "@AUD_CLIENT/control/Button";
import { TextBox } from "@AUD_CLIENT/control/TextBox";
import { RadioButton } from "@AUD_CLIENT/control/RadioButton";
import { RichTextBox } from "@AUD_CLIENT/control/RichTextBox";
import { DataSet } from "@AUD_CLIENT/data/DataSet";
import { DataGrid } from "@AUD_CLIENT/control/DataGrid";
import { Group } from "@AUD_CLIENT/control/Group";
import { Chart } from "@AUD_CLIENT/control/Chart";
import { OlapGrid } from "@AUD_CLIENT/control/OlapGrid";
import { Control } from "@AUD_CLIENT/control/Control";
import { event } from "jquery";
let Matrix : Matrix;
3.4. 소스 변경 시 자동으로 TypeScript 빌드를 하도록 자동 감시모드(watch mode)를 실행합니다.
- 터미널에서 아래 명령어를 실행하여 TypeScript watch mode로 설정해 줍니다.
tsc --w
3.5. 소스 수정 반영 테스트
- command palette(
Ctrl + Shift + P로 실행)에서 AUD: Save Script를 실행하여 현재 변경된 내용을 저장 합니다.
AUD: Run Designer를 실행하여 chrome를 통해 실행된 프로그램을 테스트 합니다.
4. i-AUD Developer Kit - Command Palette
AUD: Download Report
- 서버에서 특정 이름을 가진 프로그램을 다운로드 합니다.
- reports 폴더에 다운로드 되며, 원하시는 경로로 이동하실 수 있습니다.
AUD: Download Folder
- 서버에서 특정 폴더(폴더 코드 기중) 하위의 모든 보고서를 압축해서 다운로드 합니다.
AUD: Import Report
- 현재 편집기에서 활성화된 프로그램을 서버의 최신 정보를 기준으로 업데이트 합니다.
- 주로 i-AUD 디자이너로 저장한 보고서의 정보를 갱신하기 위해 사용합니다.
AUD: Save Script
- 현재 작성한 프로그램을 서버에 배포합니다.
- 배포 대상은 Client Script, Server Script, DataSource 이며, 서버의 프로그램을 배포 후 i-AUD 디자이너에서 수정된 내용은 자동으로 동기화 됩니다.
- 단축키 :
ctrl+alt+S
AUD: Run Designer
- 현재 편집기에서 활성화된 프로그램을 브라우저로 실행합니다.
- 단축키 :
ctrl+alt+D
AUD: Upload Report
- 현재 편집기에서 활성화된 프로그램을 서버에 배포합니다. (디자인 정보를 포함한 서버의 프로그램 자체를 변경합니다.)
- GIT을 통해 버전 관리를 하는 경우 버전 별로 배포해서 테스트가 가능합니다.
AUD: Generate Starter Code
- 서버 스크립트 또는 클라이언트 스크립트를 TypeScript로 작성하기 위한 기본 구조를 생성해 줍니다.
- 각 스크립트에서 사용할 수 있는 소스 파일에 대한 참조를 자동 추가하고, 필수 변수등을 자동 선언해 줍니다.
AUD: Execute Query
- 데이터 소스 편집 화면에서 선택한 영역을 SQL을 실행하여 해당 결과를 console에 출력합니다.
- 단축키 :
ctrl+F5
AUD: Generate Control Variables
- Generates scripts that declare all controls within the report.
AUD: Convert to JavaScript
- 선택한 코드를 JavaScript 배열 문자열 형식으로 변환합니다.
- SQL을 JavaScript로 변환할 때 유용합니다.
AUD: Convert to Text
- 선택한 JavaScript 배열 문자열 내용을 일반 텍스트로 다시 변환합니다.
| |
