카우치베이스 모바일 강력하고 강력한 임베디드 NoSQL 데이터베이스를 호출하여 카우치베이스 라이트에서 사용할 수 있으며, iOS, Android 및 Xamarin 앱. 카우치베이스 모바일 스택에는 다음도 포함됩니다. 동기화 게이트웨이. 동기화 게이트웨이를 사용하면 Couchbase Lite 지원 클라이언트 간에 데이터를 안전하게 동기화할 수 있습니다. 동기화 게이트웨이는 수년 동안 존재해 왔지만, 작년에 Couchbase Mobile 2.0은 공식적으로 새로운 웹 소켓 기반 복제 프로토콜을 사용하여 이전 HTTP 기반보다 효율적인 데이터 동기화를 지원합니다.
카우치베이스 모바일의 모든 변경 사항과 최근 릴리스된 버전 2.5앱을 사용하여 개선 사항을 시각화할 수 있는 독특한 방법에 대해 생각하기 시작했습니다. 먼저 몇 가지 간단한 요구 사항을 정했습니다. 앱이 다음과 같았으면 했습니다:
-
- 단순하게
- 재미있게
- 카우치베이스 모바일의 강력한 성능 보여주기
궁극적으로 저는 우리 모두가 어렸을 때 재미로, 또는 지루할 때 해봤을 법한 일을 포함하는 앱을 만들려면 무엇이 필요한지 살펴보기로 했습니다. 바로 그림 그리기! 그림 그리는 것보다 더 재미있는 것이 있을까요? 바로 공동 그리기입니다!
시작하기
실시간 그리기를 지원하는 앱을 만든 적은 없었지만, 작업을 완료할 수 있는 몇 가지 접근 방식에 대해서는 잘 알고 있었습니다. 가장 먼저 떠올랐던 것은 몇 년 전부터 입소문을 타고 있는 라이브러리였습니다; Skia.
Skia는 오픈 소스 2D 그래픽 라이브러리 다양한 하드웨어 및 소프트웨어 플랫폼에서 작동하는 공통 API를 제공합니다. 구글 크롬과 크롬 OS, 안드로이드, 모질라 파이어폭스와 파이어폭스 OS, 모바일을 포함한 기타 여러 제품의 그래픽 엔진으로 사용됩니다. Skia는 대부분 Google에서 유지 관리하지만 누구나 무료로 사용할 수 있습니다.
Skia를 사용하여 터치 효과 기반 드로잉을 지원한다는 아이디어가 마음에 들었지만 크로스 플랫폼 앱을 만들고 싶었습니다. 몇 년 이상 Xamarin을 사용해 왔기 때문에 이미 익숙했습니다. 스키아샤프의 .NET 기반 크로스 플랫폼 구현인 Skia.
그래서 저는 Xamarin.Forms 솔루션이 포함되어 있으며, SkiaSharp 너겟 패키지를 사용했습니다. 몇 줄의 코드만 입력한 후 UI에 Skia 캔버스(SkCanvasView)를 만들 수 있었기 때문에 매우 인상적이었습니다,
|
1 |
를 사용하여 내 페이지의 코드 뒤쪽에서 터치 이벤트를 수신할 수 있었습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
void OnTouchEffectAction(object sender, TouchActionEventArgs args) { var point = new Models.Point { X = args.Location.X, Y = args.Location.Y }; switch (args.Type) { case TouchActionType.Pressed: ... break; case TouchActionType.Moved: ... break; } } |
이러한 이벤트를 통해 캔버스에 2D 벡터 렌더링을 위한 기초를 다질 수 있었습니다. 결국 2차원 드로잉은 핵심 요소인 점으로 귀결됩니다. 점이 모이면 경로가 만들어지고 경로가 모이면 그림이 만들어집니다.
Huzzah! 이제 점을 캡처하고, 그 점을 통해 경로를 만들고, 궁극적으로 그 경로를 통해 그림을 그릴 수 있었기 때문에 별도의 앱 인스턴스에서 캔버스 간에 공유하는 데 필요한 데이터를 확보할 수 있었습니다.
카우치베이스 모바일의 힘
앞서 언급한 바와 같이, Couchbase Mobile 스택에는 Couchbase Lite라는 내장형 NoSQL 데이터베이스와 Sync Gateway라는 데이터 동기화 메커니즘이 모두 포함되어 있습니다. 분산 JSON 기반 NoSQL 데이터베이스인 Couchbase Server의 강력한 기능과 결합하여 데이터를 에지 간에 푸시 및 풀링할 수 있습니다.
동기화 게이트웨이 지원은 Couchbase.Lite 및 Couchbase.Lite.Enterprise Nuget 패키지에 완전히 통합되어 있으며, 자세한 방법은 다음에서 확인할 수 있습니다. 여기.
문서 기반 데이터베이스에 데이터를 저장하는 핵심은 다음과 같습니다. 데이터 모델링. 다행히도 이 앱에서는 데이터 모델링이 쉬웠습니다. JSON을 통해 저장해야 하는 것은 경로 모음 내의 포인트 모음뿐이었기 때문에 모든 것이 순조로웠습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "color": "#000000", "createdBy": "cca6ebe8-a713-49ac-bb86-cff0fb095ab2", "id": "059fee8c-fbb3-450e-a1f1-61d82a28e68b", "points": [ { "type": "point", "x": 101.333, "y": 339.667 }, { "type": "point", "x": 101.333, "y": 340.3333282470703 } ], "type": "path" } |
다음으로 포인트와 경로 정보를 내장된 Couchbase Lite 데이터베이스에 저장하기만 하면 됩니다. 거기서부터 동기화 게이트웨이가 나머지 작업을 처리하고, 짜잔, Couchbase Mobile로 공유 캔버스가 간단하게 만들어졌습니다!
CouchDraw 소개
물론, 제가 주절거렸던 앱의 핵심적인 세부 사항 중 일부를 간략하게 설명했지만, 걱정하지 마세요. 새 리포지토리 를 위해! 새로운 "CouchDraw" 리포지토리에 소스 코드와 함께 README 와 함께 많은 더 보기 솔루션을 다운로드, 구성 및 실행하는 방법에 대한 자세한 내용을 확인하세요. 지금 하던 모든 작업을 잠시 중단하고 바로 확인해 보세요!
CouchDraw 는 매우 기본적인 앱이므로 개선할 수 있는 방법이 많이 있습니다(여러분의 역할이 바로 여기에 있습니다). 저는 모바일 및 카우치베이스 커뮤니티에 다음과 같이 도전하고 확장할 것을 제안합니다. CouchDraw의 기능!
몇 가지 새로운 기능 아이디어가 포함될 수 있습니다:
-
- 색상 버튼을 색상 선택을 위한 범위 슬라이더로 대체합니다.
- 선 굵기를 변경하는 기능을 추가합니다.
- 그려진 선을 지우는 기능을 추가합니다.
다음 단계
동기화된 드로잉 지원을 기본 iOS 및 Android로 확장하는 것과 함께 Couchbase Mobile의 피어 투 피어 복제 그리고 예측 쿼리 기능을 CouchDraw. 이 시리즈의 더 많은 포스팅을 기대해주세요!
