콘텐츠로 건너뛰기
App Builder 릴리스: 다중 작업 지원, AI 뷰 생성, 원격 데이터 처리 등

App Builder 릴리스: 다중 작업 지원, AI 뷰 생성, 원격 데이터 처리 등

App Builder의 최신 릴리스는 앱을 빌드하는 가장 쉬운 방법을 제공하기 위한 Microsoft의 노력을 확장합니다. 새로운 기능은 워크플로우를 크게 개선하여 유연성을 높이고 개발 시간을 단축할 수 있습니다.

7분 읽기

최신 릴리스에 포함된 App Builders의 흥미로운 새 업데이트를 공유하게 되어 기쁩니다. 항상 그렇듯이 앱 개발 프로세스를 더욱 간소화하는 것을 목표로 합니다. 다중 작업 지원을 포함하여 앱 생성 프로세스의 유연성과 원격 데이터 작업 시 성능을 향상시키는 주요 기능을 도입하여 이제 단일 상호 작용(예: 클릭, 행 선택)이 여러 작업을 트리거할 수 있으므로 더 복잡한 워크플로를 사용할 수 있습니다.

또한 AI 프롬프트로 페이지 조회수를 구축하는 새로운 방법을 추가했습니다. 또한 이제 카드, 행 및 열 레이아웃과 같은 비그리드 요소에 대한 원격 데이터 처리(페이징 포함)를 구성할 수 있으므로 원격 서버에서 더 작은 데이터 세트를 동적으로 가져오고 표시하여 성능을 크게 향상시킬 수 있습니다.

또한, 도구 상자에 새로운 구성 요소인 캐러셀과​ ​새로운 장애인 요약 기능을 도입했습니다. 이러한 업데이트를 통해 로우 코드, 고성능 앱 개발을 위한 플랫폼으로서의 App Builder의 입지를 계속 강화하고 있습니다.

새로운 App Builder AI 뷰 생성 작동 방식

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

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

다중 작업 지원

이제 단일 상호 작용(예: 클릭, 행 선택)으로 여러 작업을 트리거할 수 있으므로 더 복잡한 워크플로우를 사용할 수 있습니다. App Builder 에서의 상호 작용 관리는 트리거당 다중 동작의 도입으로 더욱 강력해졌습니다. 이전에는 사용자가 이벤트당 하나의 작업만 정의할 수 있었기 때문에 복잡한 워크플로우를 처리하는 데 유연성이 제한되었습니다. 이 업데이트를 통해 버튼 클릭 또는 행 선택 변경과 같은 단일 상호 작용이 이제 여러 작업을 트리거할 수 있으므로 추가 해결 방법 없이 더 풍부한 앱 동작을 사용할 수 있습니다.

App Builder의 새로운 다중 작업 지원은 상호 작용 설계의 유연성을 높이며, 이 새로운 기능을 통해 사용자는 단일 상호 작용 내에서 다양한 작업을 동시에 또는 순서대로 실행하도록 구성할 수 있습니다. 결과적으로 이벤트가 발생하면 다른 변수에 대한 값 설정, 구성 요소 열기 또는 닫기, 다른 페이지로 이동 또는 구성 요소별 작업 실행과 같은 여러 사전 정의된 작업이 발생할 수 있습니다. 이 기능은 워크플로우 자동화를 크게 향상시켜 동적이고 인터랙티브한 애플리케이션을 더 쉽게 구축할 수 있도록 합니다.

자세한 설명은 지난 웨비나의 일부로 볼 수 있습니다.

실제 사용 사례

사용자가 그리드에서 행을 선택하는 시나리오를 생각해 보십시오. 이제 Multiple Actions를 사용하여 한 번에 여러 변수를 설정할 수 있으며, 하나는 선택한 CustomerID를 캡처하고 다른 하나는 추가 처리를 위해 전체 Customer 개체를 저장할 수 있습니다. 이렇게 하면 추가 상호 작용 없이 필요한 모든 데이터를 즉시 사용할 수 있습니다.

또 다른 예는 레코드를 관리하기 위한 편집 대화 상자 입니다. 데이터 카드에서 편집 버튼을 클릭하면 시스템은 현재 편집된 항목을 추적하는 동시에 모달 대화 상자를 열어 레코드를 표시하도록 변수를 설정할 수 있습니다. 이 간소화된 접근 방식은 UI의 응답성과 직관적을 유지합니다. 이를 더 확장하여 업데이트를 제출할 때 양식 제출, 대화 상자 닫기, 스낵바에 확인 메시지 표시 등 여러 작업을 실행하여 원활한 사용자 경험을 제공할 수 있습니다.

애플리케이션 뷰를 생성하기 위한 생성형 AI

App Builder AI 에서는 뷰 생성을 위한 생성형 AI 기능을 소개합니다. 이 기능은 현재 사용자 피드백을 위해 미리 보기 사이트에서 찾을 수 있습니다. 이러한 기능을 통해 사용자는 자유 텍스트 프롬프트를 사용하여 UI 레이아웃을 생성할 수 있습니다.

단계별 "시작하기" 문서는 여기에서 확인할 수 있습니다.

또한 App Builder의 AI 기능에 대한 웨비나도 진행했습니다.

로그인 화면 AI

결과 이미지와 함께 "자세한 로그인 화면 만들기"를 표시합니다.

이 릴리스에 도입된 다른 기능:

  • 프롬프트 기반 보기 생성: 사용자는 새 보기 추가, 교체 또는 생성과 같은 반복 작업을 통해 출력을 구체화하는 프롬프트를 입력하여 UI 구성 요소를 생성할 수 있습니다. 상황 인식 동작은 레이아웃 수정의 유연성을 보장합니다.
Content replace with AI
  • 공식 도움말 항목의 사용 사례 예: 데모에는 로그인 화면자동차 서비스 예약 보기를 위한 AI 생성 템플릿이 포함되어 자세한 사용자 프롬프트를 기반으로 구조화된 레이아웃 및 구성 요소 생성을 보여줍니다.
App Builder 릴리스: 다중 작업 지원, AI 뷰 생성, 원격 데이터 처리 등

Remote Data Operations를 통한 효율적인 데이터 처리

이제 App Builder 의 Remote Data Operations를 통해 대규모 데이터 세트를 효율적으로 관리하는 것이 더 쉬워졌습니다. 이 기능을 통해 사용자는 Card, Column Layout, Absolute Layout 및 Row Layout과 같은 구성 요소를 사용하여 데이터를 반복할 수 있으며, Paginator 구성 요소는 필요한 데이터 페이지만 서버에서 가져오도록 합니다. 이를 통해 성능과 확장성이 크게 향상됩니다. 여기에서 전체 주제를 찾을 수 있습니다.

또한 App Builder 사용하여 원격 데이터 처리 기능을 설정하고 사용하는 방법에 대한 자세한 안내를 확인하십시오. 

주요 혜택

  • 최적화된 성능: 필요한 데이터만 가져와 서버 부하를 줄이고 앱 응답성을 개선합니다.
  • 확장성: 요청 시 더 작은 데이터 청크를 검색하여 대규모 데이터 세트를 효율적으로 처리합니다.
  • 유연한 UI 구성: 카드와 같은 반복되는 구성 요소를 사용자 지정 레이아웃에 배치하는 동시에 페이징 기능을 활용할 수 있습니다.
  • 원활한 페이지 매김 설정: Paginator를 자동으로 추가하고 직관적인 설정으로 원격 페이징 구성을 단순화합니다.

Component-First Remote Data의 작동 방식

사용자가 데이터에 대해 구성 요소(예: JSON 배열을 반복하는 카드)를 반복하고 데이터 소스에서 엔드포인트를 선택하는 경우 API가 지원하는 경우 원격 페이징을 활성화할 수 있습니다. App Builder는 자동으로 페이지네이터를 추가하고, 사용자는 원격 페이징 구성기를 통해 페이징 설정을 구성할 수 있습니다. pageIndex 및 pageSize와 같은 내부 변수가 생성되고 페이지를 변경하면 필요한 데이터만 가져오도록 새 서버 요청이 트리거됩니다.

원격 데이터 페이징 설정

  1. 데이터에 걸쳐 구성 요소 반복: 지원되는 구성 요소(카드, 열 레이아웃, 절대 레이아웃 등)를 끌어다 놓고 데이터를 선택합니다.
  2. 데이터 소스 선택: JSON 응답을 제공하는 REST 엔드포인트 또는 Swagger 정의를 선택합니다.
  3. Enable Pagination: Toggle Paging을 켜면 App Builder Paginator를 추가하는 동안 컴포넌트를 Row Layout으로 래핑합니다.
  4. 설정 미리보기: 원활한 데이터 가져오기 및 탐색을 보장하기 위해 구성을 테스트합니다.

그리드 요약 토글

그리드 요약 토글– 열당 요약을 활성화/비활성화하는 속성이 추가되었습니다.

그리드 요약 토글 – 열당 요약을 활성화/비활성화하는 속성이 추가되었습니다.

구성 요소 도구 상자에 Carousel 구성 요소를 추가했습니다. 실제 사용 사례를 보려면 Movies Samples 앱으로 이동하세요.

구성 요소 도구 상자에 Carousel 구성 요소를 추가했습니다.

마지막으로 하고 싶은 말

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

To experience everything, head over to appbuilder.dev and start using the App Builder. If you want an exclusive preview of our latest developments, check our App Builder Preview environment. 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.


데모 요청