App Builder로 Angular CRM 앱을 빌드하는 방법

Angular CRM 앱이란 무엇일까요? 그리고 저희의 로우코드 App Builder를 사용하여 하나를 구축하는 방법을 알고 계신가요? 이 빠른 단계별 가이드를 읽고 방법을 알아보세요.

Katie Mikova Last Updated Mar 26, 2024 5min read

로우코드 플랫폼이 완전히 기능하고 반응형이며 현대적인 앱을 생산할 수 없다는 것은 신화입니다. 약 10년 이상 전에는 그래픽 메뉴를 통해 제한된 인터페이스와 훨씬 더 제한된 기능만 정의할 수 있었으며, 끔찍한 스파게티 코드를 생성했고 코드 유지 보수성을 무시했습니다. 2023년 현재, 로우코드/노코드 기술의 진화와 실제 가치는 과거보다 더욱 명백해졌습니다. 엔터프라이즈 웹 개발에 관해서는 로우코드/노코드 도구의 가장 중요한 발전과 장점 중 하나는 샘플 앱으로 작업하고 준비된 템플릿을 제공하며 표준 코딩 지침을 충족하는 깨끗하고 프로덕션 준비가 완료된 코드를 생성함으로써 새 프로젝트의 빠른 시작을 보장하는 기능입니다.

이 블로그 게시물에서는 WYSIWYG App Builder™를 사용하여 맞춤형 Angular CRM 앱을 샘플과 로우코드 개발 방식으로 빌드하며, 이는 프로세스를 8배 빠르게 만듭니다.

App Builder 시작하기

App Builder 시작하기 App Builder 시작하기 App Builder 시작하기

데모 요청

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

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

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

빠른 시작을 제공합니다.
실습 경험을 제공합니다.
일반적인 개발 작업을 제거합니다.
쉽게 수정하고 사용자 정의할 수 있습니다.
민첩하고 확장 가능하며 유지하기 쉽습니다.
실시간 코드 미리보기가 있습니다.

세부 정보: 즉시 사용할 수 있는 3개의 Angular 앱 예제

App Builder를 사용하여 Angular CRM 샘플 앱을 빌드하고 자신만의 것으로 만드는 방법

저희의 로우코드 플랫폼을 사용하여 앱 UI를 만들 때, 다양한 사전 정의된 레이아웃, 즉시 사용 가능한 컴포넌트, 모든 REST API의 강력한 처리, 효율성과 기술을 높이는 풍부한 구성 기능의 이점을 활용합니다. WYSIWYG 디자인 표면이 있으며 동시에 기능이 풍부한 Angular 컴포넌트를 활용합니다. 이는 레이아웃과 컴포넌트를 손으로 코딩할 필요를 제거하여 시간을 절약합니다. 피드백을 더 빨리 받고 피드백에 따라 더 빠르게 반복할 수 있습니다. 이 노코드 접근 방식은 데이터 바인딩과 네비게이션 워크플로우로도 확장됩니다. 코드를 다운로드하여 그 위에 추가하려면 Angular CRM 앱을 로드하고 필요에 따라 App Builder를 통해 디자인을 확장하세요. 사전 정의된 애플리케이션이지만 여전히 편집 가능합니다. 원하는 대로 보기, 컴포넌트를 추가하고 디자인을 확장할 수 있습니다.

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

여기서 보는 것은 HubSpot에서 영감을 받은 고객 세부정보를 관리하기 위한 마스터-세부 스타일 앱입니다. 여기에는 개요 대시보드 및 여러 탭이 있는 고객 세부정보에 대한 반응형 보기가 포함되어 있습니다. 사용된 컴포넌트: 사용된 컴포넌트: Accordion, Avatar, Button, Icon Button, Category Chart, Checkbox, Dialog Window, Drop Down, Expansion Panel, Data Grid, Icon, Input Group, List, Navigation Bar, Navigation Drawer, Select, Tab Layout.

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

이제 App Builder에서 샘플을 사용하고 프로젝트 요구사항과 비즈니스 목표에 맞도록 미세 조정하는 단계로 넘어갑니다.

단계 1: App Builder를 열고 샘플 앱으로 이동

App Builder를 열고 “새 애플리케이션 만들기”를 선택합니다. 그런 다음 “샘플 앱” 섹션으로 이동하여 CRM 앱을 프로젝트의 기본 디자인으로 선택합니다. 당사의 프로젝트 목적상, 그리드, 목록 및 차트 컴포넌트 덕분에 반응형을 염두에 두고 가능한 많은 데이터를 표시하는 애플리케이션을 구축했습니다. 이러한 컨트롤은 빅 데이터의 강력한 처리와 원하는 대로 액세스할 수 있는 기능을 제공합니다. 네비게이션 드로어 컴포넌트(플라이 아웃/인 동작 포함)는 교차 보기 네비게이션 및 SPA 룩 앤 필 처리를 담당합니다.

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

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

단계 2: API 연결

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

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

당사의 목적상 Swagger 방식을 사용하고 URL을 추가하겠습니다.

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

그런 다음 데이터 원본이 성공적으로 업로드되면 대시보드 페이지의 그리드를 연결할 수 있습니다.

이렇게 하려면 그리드를 선택하고 데이터 필드에서 데이터 원본을 업데이트합니다. 거기서 API의 엔드포인트에 연결될 업데이트 및 삭제 작업을 추가할 수 있으며, 그리드와의 상호작용을 통해 데이터의 실시간 수정을 허용합니다.

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

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

브랜드와 일치하는 사용자 정의 앱 테마를 만들 수 있습니다. 새 테마를 만들고 기본 테마 중 하나를 시작점으로 선택하여 수행합니다. 색상 팔레트는 선택한 기본 및 보조 색상을 기반으로 자동으로 생성됩니다. 타이포그래피의 경우, 현재 내장된 글꼴 세트가 있지만 향후 버전에서 더 많은 크리에이티브 컨트롤을 추가할 계획입니다. 편집을 마치면 앱 테마를 저장하여 변경사항을 적용합니다.

단계 4: 코드 미리보기

이를 통해 실행 중인 앱인 것처럼 디자인과 상호작용할 수 있으며 HTML, CSS 및 TS를 별도로 볼 수 있습니다. 앱이 작동하는 것을 확인하고 코드를 검사하려면 오른쪽 상단의 코드 보기 작업 버튼을 누르기만 하면 됩니다.

단계 5: 앱 생성

네비게이션 모음에서 GitHub에 게시 및 미리보기 작업 버튼 옆에 있는 플랫폼 선택 드롭다운을 사용합니다. Blazor Server/Blazor Web Assembly 옵션을 선택하여 Blazor 또는 Angular의 코드를 생성하거나 생성된 앱 및 코드의 미리보기를 봅니다. Web Components 옵션도 사용 가능합니다.

App Builder 사용의 이점

로우코드의 장점과 개발을 앱 설계 및 개발에서 여러 번 길게 논의했습니다. 일반적으로 WYSIWYG App Builder는 도구 설명, 직관적인 UI 및 즉시 사용 가능한 UI 부분(예: 컴포넌트, 개요 트리 보기, 내장 앱 레이아웃, 필요를 충족하는 다양한 속성, 테마, 외부 데이터 원본 처리, 앱 미리보기(빌드 중), 작업 공간을 통한 협업 기능, 앱 공유, GitHub 게시, 변경사항 추적 등)를 제공합니다.

App Builder 사용의 다른 장점:

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