App Builder 릴리스: Two-Way Data Binding, Datasource OpenAPI 스키마 업데이트 등

5월의 App Builder 릴리스는 많은 새로운 기능과 개선 사항을 제공합니다. 이제 사용자는 기존 데이터 소스를 최신 OpenAPI 스키마로 업데이트할 수 있으며, 차이점을 볼 수 있습니다. 개선 사항에는 입력, 확인란, 스위치, 날짜 선택기, 달력, 등급 및 슬라이더 구성 요소에 대한 양방향 데이터 바인딩 지원도 포함됩니다.

그밖에 다른 거? 이제 트리-그리드 구성 요소에서 행 생성, 업데이트 및 삭제를 위한 데이터 작업을 사용할 수 있으며, 트리-그리드 구성 요소의 행 선택 이벤트를 기반으로 변수를 업데이트할 수 있습니다. Tree 구성 요소는​ ​단일 노드 확장 및 항목 클릭 토글을 위한 속성으로 향상되었습니다. 또한 입력 구성 요소에 대한 새로운 검색 스타일 옵션이 추가되었습니다.

이러한 새로운 기능에 대해 자세히 알아보기 전에 App Builder 대해 처음 배우는 경우 조직의 응용 프로그램 개발 프로세스에서 핵심 도구로 고려해야 하는 이유를 간략하게 공유하겠습니다.

• 시각적 앱 빌더 – 제품 관리자, 디자이너, 개발자 및 이해 관계자를 위한 통합 플랫폼입니다.
• 클라우드 기반 WYSIWYG 드래그 앤 드롭 도구는 기업이 그 어느 때보다 80% 더 빠르게 완전한 비즈니스 앱을 설계하고 구축할 수 있도록 지원합니다.
• Figma 디자인에서 생산 준비가 된 Angular, React, Web Components 및 Blazor 코드를 생성하는 로우 코드 도구입니다.

양방향 데이터 바인딩 지원

이 App Builder 릴리스에서는 입력, 확인란, 스위치, 날짜 선택기, 달력, 등급 및 슬라이더 구성 요소에 양방향 데이터 바인딩 지원을 추가했습니다.

양방향 바인딩 지원을 사용하면 속성이 변수에 바인딩될 때 구성 요소 속성을 twoWayBindable로 표시할 수 있습니다. 그렇다면 양방향 바인딩이란 정확히 무엇일까요? UI와 기본 데이터를 동기화된 상태로 유지한다고 상상해 보십시오. 따라서 데이터를 변경하면 UI가 자동으로 업데이트되고 UI를 변경하면 변수 데이터가 자동으로 업데이트됩니다.

사용자는 이제 다음을 수행할 수 있습니다.

• 입력 내용을 특정 값으로 설정하고 생성된 코드에서 양방향 데이터 바인딩 필드로 생성합니다.
• value/content 속성에 해당하는 구성 요소를 변수에 바인딩합니다.
• 이 바인딩이 양방향 바인딩으로 생성되는지 여부를 제어합니다.

App Builder Release With Data Source OpenAPI Schema Update

App Builder의 데이터 소스 UI는 개발자에게 데이터 소스 엔드포인트 및 스키마의 시각화를 제공합니다. 데이터 원본은 시간이 지남에 따라 진화하고 스키마가 변경되므로 App Builder 데이터 원본 UI도 그에 따라 업데이트되어야 합니다.

이 App Builder 릴리스를 사용하면 기존 데이터 소스를 쉽게 업데이트하여 최신 버전의 OpenAPI 스키마를 사용하고 차이점이 있는 경우 이를 표시할 수 있습니다.

이 새로운 기능의 본질은 무엇입니까? 

• 이 기능을 사용하면 데이터 소스를 백엔드 WebAPI와 동기화하는 동시에 App Builder 프론트엔드를 개발할 수 있습니다.
• 데이터 소스를 새로 고치고 데이터 바인딩에 사용한 데이터 스키마 속성이 변경되지 않은 상태로 유지되면 데이터 바인딩은 그대로 유지됩니다.
• 데이터 원본과 데이터 바인딩 변경에 사용한 데이터 스키마 속성을 새로 고치면 영향을 받는 데이터 바인딩 목록이 포함된 알림을 받게 되므로 그에 따라 UI 구성 요소를 수동으로 업데이트할 수 있습니다.

*향후 자동 백그라운드 새로 고침을 도입할 계획이며, 이는 데이터 원본 Web API URL이 변경되지 않은 경우에 유용합니다. 새로운 데이터 매핑 기능도 사용할 수 있어 바인딩을 보다 편리하게 업데이트할 수 있는 UI를 제공합니다. 

트리 그리드 작업

이제 웹 API 호출을 사용하여 Tree-grid 구성 요소에서 행을 생성, 업데이트 및 삭제하도록 데이터 작업을 설정할 수 있습니다. 이를 트리 그리드 편집 작업 버튼에 연결하고 실시간 웹 API 업데이트를 활용할 수 있습니다. 코드 생성 시 App Builder는 사용 가능한 Post/Put/Delete HTTP 메소드를 통해 리소스 생성, 가져오기, 업데이트 및 삭제에 대한 API 호출을 처리하는 데 필요한 서비스를 생성합니다.

트리 그리드 행 선택 상호 작용

이 App Builder 릴리스에서는 Tree-grid 구성 요소의 Row Selection 이벤트를 기반으로 변수를 업데이트할 수도 있습니다.

다시 말씀드리지만, 작년 주요 App Builder 릴리스에서는 변수 관리의 맥락에서 중요한 역할을 하는 다양한 구성 요소 이벤트 처리기를 공개했습니다.

주요 이벤트는 다음과 같습니다. 

• 선택 변경 이벤트: 콤보 컴포넌트에서 사용됩니다.
• 행 선택 변경 이벤트: 그리드 및 트리 그리드 구성 요소 모두에 사용됩니다.
• 클릭 이벤트: 모든 구성 요소에 사용할 수 있는 이 이벤트는 클릭 동작 시 변수를 설정하는 컨텍스트에서 사용됩니다.
• 특정 구성 요소 이벤트. 예를 들어 Stepper 구성 요소는 다음/이전 단계, 재설정 및 단계(x)로 이동과 같은 작업을 노출합니다.

자세한 내용은 이 항목 –App Builder에서 이벤트 및 작업 작업을 참조하십시오.

이 App Builder 릴리스의 새로운 트리 구성 요소 속성도 마찬가지입니다

​단일 노드 확장 및 항목 클릭 토글을 위한 Tree 구성 요소 속성이 추가되었습니다.

• 단일 노드 확장– 활성화하면 한 번에 하나의 트리 노드만 확장됩니다. 두 번째 것을 열려고 하면 전자가 무너집니다.
• Toggle item on click(클릭 시 항목 토글) – 확장/축소 아이콘뿐만 아니라 노드를 클릭할 때 확장/축소 상태를 전환하는 속성입니다.

싸다

결론적으로 App Builder는 앱 개발 프로세스의 판도를 바꾸고 있습니다. 클라우드 기반 비주얼 빌더, 로우 코드 기능 및 새로운 기능을 갖춘 이 도구는 모든 조직에 필수 도구입니다. 오늘 사용해 보세요! 자세한 내용이 필요한 경우 다음을 확인하는 것이 좋습니다.

• 디스코드 채널.
• GitHub 토론.
• 로드맵

To experience everything, visit your customer portal and get the latest version. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So please email me at zkolev@appbuilder.dev and let me know how we can help you continue delivering value to your customers with Infragistics.