App Builder로 Angular CRM 앱을 구축하는 방법

현재 로우코드 플랫폼으로는 모든 기능을 갖춘 반응형 최신 앱을 생산할 수 없다는 것은 신화입니다. 약 10년 전만 해도 개발자는 그래픽 메뉴를 통해 제한된 인터페이스와 훨씬 더 제한된 기능을 정의하는 데 도움을 주면서 무서운 스파게티 코드를 생성하고 어떻게든 코드 유지 관리성을 무시했습니다. 2023년 현재, 로우코드/노코드 기술의 진화와 실제 가치는 그 어느 때보다 분명해졌습니다. 그리고 엔터프라이즈 웹 개발과 관련하여 가장 중요한 발전과 장점 중 하나는 샘플 앱과 함께 작업하고, 기성 템플릿을 제공하고, 표준 코딩 지침을 충족하는 깔끔하고 생산 준비가 된 코드를 생성합니다.

그런 다음 이 블로그 게시물에서는 WYSIWYG App Builder ™ 사용하여 프로세스를 x8 더 빠르게 만드는 샘플 및 로우 코드 개발 접근 방식을 사용하여 사용자 지정 Angular CRM 앱을 빌드합니다.

App Builder 사용해 보세요.

간단히 말해서, CRM 앱이란 무엇이며 프로젝트에 Angular 예제 앱을 사용하는 이유는 무엇입니까?

CRM 앱(고객 관계 관리)은 기업이 고객 및 잠재 고객과의 상호 작용 및 관계를 관리하는 데 도움을 주기 위해 설계된 소프트웨어 애플리케이션입니다. 이러한 소프트웨어 솔루션은 일반적으로 조직이 고객 상호 작용을 효율적으로 추적, 분석 및 최적화할 수 있는 도구와 기능을 제공합니다.

특히 첫 번째 프로젝트인 경우 샘플 앱으로 시작해야 하는 이유는 다음과 같습니다.

• 그것은 유리한 출발을 제공합니다.
• 직접 체험해 볼 수 있는 것입니다.
• 이는 일반적인 개발 작업을 제거합니다.
• 수정 및 사용자 정의가 쉽습니다.
• 민첩하고 확장 가능하며 유지 관리가 쉽습니다.
• 실시간 코드 미리보기가 있습니다.

자세한 내용은 여기를 참조하세요: 바로 사용할 수 있는 3가지 Angular 앱 예제

App Builder로 Angular CRM 샘플 앱을 구축하고 직접 만드는 방법

로우 코드 플랫폼을 사용하여 앱 UI를 만들 때 사전 정의된 다양한 레이아웃, 바로 사용할 수 있는 구성 요소, 모든 REST API의 강력한 처리, 효율성과 기술을 향상시키는 풍부한 구성 기능을 활용할 수 있습니다. WYSIWYG 디자인 화면이 있으면서 기능이 풍부한 Angular 구성 요소를 동시에 활용할 수 있습니다. 이렇게 하면 레이아웃과 구성 요소를 수동으로 코딩할 필요가 없으므로 시간이 절약됩니다. 이를 통해 피드백을 더 빨리 받고 피드백을 기반으로 더 빠르게 반복할 수 있습니다. 이 no-code 접근 방식은 데이터 바인딩 및 탐색 워크플로로도 확장됩니다. 코드를 다운로드하여 그 위에 추가하려면 Angular CRM 앱을 로드하고 필요에 따라 App Builder를 통해 디자인을 확장하세요. 미리 정의된 응용 프로그램이지만 여전히 편집할 수 있습니다. 보기, 구성 요소를 추가하고 원하는 대로 디자인을 확장할 수 있습니다.

비디오: 6180.CRM-Sample-App.mp4

여기에 보이는 것은 HubSpot에서 영감을 받아 고객 세부 정보를 관리하기 위한 마스터-디테일 스타일 앱입니다. 여기에는 개요 대시보드에 대한 반응형 보기와 여러 탭이 있는 고객 세부 정보가 포함됩니다. 사용된 컴포넌트: 아코디언, 아바타, 버튼, 아이콘 버튼, 카테고리 차트, 체크박스, 대화창 , 드롭다운, 확장​ ​패널, 데이터 그리드, 아이콘, 입력 그룹, 목록, 네비게이션 바, 네비게이션 서랍, 선택, 탭 레이아웃.

CRM 앱 샘플을 확인하고 코드를 미리 볼 수도 있습니다.

App Builder에서 샘플을 사용하는 단계로 이동하여 프로젝트 요구 사항 및 비즈니스 목표에 적합한 방식으로 미세 조정해 보겠습니다.

1단계: App Builder 열기 및 샘플 앱으로 이동

App Builder 열고 '새 애플리케이션 만들기'를 선택하세요. 그런 다음 "샘플 앱" 섹션으로 이동하여 CRM 앱을 프로젝트의 기본 디자인으로 선택하세요. 우리 프로젝트의 목적을 위해 우리는 그리드, 목록 및 차트 구성 요소 덕분에 가능한 한 많은 데이터를 표시하는 응답성을 염두에 두고 애플리케이션을 구축했습니다. 이러한 제어에는 빅 데이터를 강력하게 처리하고 원하는 대로 데이터에 액세스할 수 있는 기능이 있습니다. 탐색 서랍 구성 요소(플라이아웃/인 동작 포함)는 크로스 뷰 탐색 및 SPA 모양과 느낌을 처리합니다.

반면에 Flex 레이아웃 컨테이너를 사용하면 중첩된 UI 요소의 위치를 수정할 수 있습니다. 다른 주목할만한 속성은 유동적인 크기 조정 및 래핑과 관련이 있습니다.

여기에서 특정 요구 사항에 맞게 디자인을 확장하고 사용자 정의할 수 있습니다.

2단계: API 연결

공개 또는 로컬 호스트 URL을 지정하여 App Builder에서 직접 API를 연결하므로 API를 수동으로 연결할 필요가 없습니다. 여기에서 두 가지 옵션이 제공됩니다.

• ​Swagger 정의를 추가하려면
• 또는 JSON URL을 사용하려면

우리의 목적을 위해 Swagger 접근 방식을 활용하고 URL을 추가하겠습니다.

그런 다음 데이터 소스의 이름을 지정하고 다음 단계로 진행합니다. 포함할 엔드포인트를 식별합니다. 권한이 설정되면 데이터 선택을 진행하여 모든 필드가 선택되었는지 확인한 후 완료를 클릭하세요.

이후 데이터소스가 성공적으로 업로드되면 대시보드 페이지에서 그리드를 연결할 수 있습니다.

이를 수행하려면 그리드를 선택하고 데이터 필드에서 데이터 소스를 업데이트하십시오. 여기에서 API의 엔드포인트에 연결될 업데이트 및 삭제 작업을 추가하여 그리드와의 상호 작용을 통해 데이터를 실시간으로 수정할 수 있습니다.

모든 페이지가 생성되면 오른쪽 상단 모서리에 있는 녹색 버튼을 선택하여 응용 프로그램을 미리 볼 수 있습니다. 추가 사용자 지정을 용이하게 하려면 Angular CRM 앱을 다운로드하세요.

3단계: 테마 사용자 정의 및 적용

브랜드에 어울리는 맞춤형 앱 테마를 만들 수 있습니다. 새 테마를 만들고 기본 테마 중 하나를 시작점으로 선택하면 됩니다. 색상 팔레트는 선택한 기본 색상과 보조 색상을 기반으로 자동으로 생성됩니다. 타이포그래피에 관한 한 현재는 일련의 글꼴이 내장되어 있지만 향후 버전에서는 더욱 창의적인 제어 기능을 추가할 계획입니다. 편집이 완료되면 앱 테마를 저장하여 변경 사항을 적용하세요.

4단계: 코드 미리보기

이를 통해 마치 실행 중인 앱인 것처럼 디자인과 상호 작용하고 HTML, CSS 및 TS를 별도로 볼 수 있습니다. 앱이 작동하는 모습을 보고 코드를 검사하려면 오른쪽 상단에 있는 코드 보기 작업 버튼을 탭하세요.

5단계: 앱 생성

Publish to GitHub(GitHub에 게시) 및 Preview(미리 보기) 작업 버튼 옆에 있는 탐색 모음에서 Platform picker(플랫폼 선택기) 드롭다운을 사용합니다. Blazor Server/ Blazor Web Assembly 옵션을 선택하여 Blazor 용 코드를 생성하거나 Angular 생성된 앱 및 코드의 미리보기를 확인합니다. Web Components 옵션도 사용할 수 있습니다.

App Builder 사용의 이점

우리는 앱 디자인 및 개발에서 로우 코드를 사용하는 것의 장점에 대해 여러 번 논의했습니다. 그러나 일반적으로 WYSIWYG App Builder 구성 요소, 개요 트리 보기, 내장 앱 레이아웃 및 요구 사항을 충족하는 다양한 속성과 같이 모든 웹 앱에 필요한 도구 설명, 직관적인 UI 및 즉시 사용 가능한 UI 부분을 제공합니다. , 테마 지정, 외부 데이터 소스 처리, 앱 미리 보기(아직 빌드하는 동안), 작업 영역을 통한 공동 작업 기능, 앱 공유, GitHub 게시, 변경 사항 추적 등이 있습니다.

앱 빌딩 사용의 다른 주요 이점은 다음과 같습니다.

• 로우코드 플랫폼은 Angular 수동 코딩의 필요성을 줄여주는 시각적 인터페이스와 사전 구축된 구성 요소를 제공하여 다양한 수준의 전문 지식을 가진 개발자가 애플리케이션을 더 쉽게 구축할 수 있도록 합니다.
• 다양한 페이지의 보기를 보고, 주변을 클릭하여 사용된 각 구성 요소의 속성을 확인하고, 직접 개발을 수행하지 않고도 앱을 추가로 탐색하여 바로 작업을 시작할 수 있습니다.
• 이를 통해 신속한 프로토타이핑 및 반복이 가능하며 사전 구축된 Angular 구성 요소를 사용하면서 완전한 드래그 앤 드롭 앱 구축 경험을 통해 더 빠르고 직관적인 개발을 보장합니다. UI 도구 상자에서 무엇이든 드래그하여 화면에 놓으면 화면 레이아웃 내에 배치됩니다.
• Angular 앱을 백엔드 서비스 및 API에 더 빠르게 통합할 수 있으므로 광범위한 코드를 작성하지 않고도 데이터를 더 쉽게 가져오고 관리할 수 있습니다.
• 이 CRM 앱뿐만 아니라 다른 Angular 프로젝트에서도 다양한 Angular 컨트롤을 사용자 정의하고 재사용할 수 있어 설계 일관성을 높일 수 있으므로 제공된 구성 요소의 재사용성은 매우 중요합니다.
• App Builder 내장된 테마 기능과 사용자 정의 테마 기능을 적용하는 데 필요한 모든 기능을 제공합니다. 사전 빌드된 테마 옵션은 Material, Bootstrap 또는 Fluent UI입니다. 그러나 활자체, 색상, 원형 정도, 고도를 수정하여 고유한 Fluent, Bootstrap 또는 Material 기반 테마를 만들고 밝은 모드나 어두운 모드 중에서 선택할 수도 있습니다.
• 프레임워크에 구애받지 않는 접근 방식을 사용하여 코드를 생성하는 Angular Angular 프로젝트에 App Builder를 사용하는 또 다른 이점입니다. 모범 사례와 업계 표준을 준수하는 클릭 한 번으로 깔끔한 Angular 코드를 생성하는 것 외에도 로우 코드 도구는 프레임워크에 구애받지 않는 앱을 만듭니다. Angular에서 로우 코드 도구에서 지원하는 다른 프레임워크인 Blazor 및 Web Components로 쉽게 전환할 수 있습니다. 이 모든 것이 한 번의 클릭으로 이루어집니다.

다음 문서에서 로우 코드 App Builder를 사용하여 디자인-코드 프로세스를 간소화하는 방법에 대해 자세히 알아볼 수 있습니다.

로우 코드 도구로 미션 크리티컬 기업 소프트웨어의 복잡성 감소

2023년 비즈니스에 가장 적합한 로우 코드 도구 선택

경기 침체기에 로우 코드 도구로 비용을 절감할 수 있는 방법