모바일 애플리케이션과 관련하여 특정 질문을 많이 받는데, 첫 번째는 캡처한 이미지를 저장하는 방법이고 두 번째는 장치 또는 원격 데이터베이스 간에 이미지를 동기화하는 방법입니다. 저는 네이티브 스크립트 이 문제를 해결하기 위해 여러 가지 가능한 사례 중 하나를 공유하면 좋겠다고 생각했습니다.
다음을 사용하여 네이티브스크립트 애플리케이션에서 이미지를 캡처하는 방법을 살펴보겠습니다. Angular 를 클릭하고 캡처한 이미지를 임베디드 장치 수준의 데이터베이스인 Couchbase Lite에 저장합니다.
앞으로 모바일 애플리케이션 내에서 이미지나 기타 파일 데이터를 저장하는 방법에는 여러 가지가 있다는 점에 유의하세요. 예를 들어 데이터베이스에 저장하거나 파일 시스템에 저장할 수 있습니다. 이 예제에서는 데이터베이스에 직접 저장하지만 어떤 전략이 가장 적합한지 조사해 보세요.
위의 애니메이션 이미지에는 이미지 캡처 기능이 표시됩니다. 시뮬레이터에서는 상황이 조금 다르지만 기기에서는 카메라가 열립니다. 이미지를 캡처하면 화면에 표시되고 Couchbase Lite에 base64 형식의 문자열로 저장됩니다.
요구 사항
이 가이드를 성공적으로 사용하기 위한 요구 사항은 많지 않습니다. 최소한 다음이 필요합니다:
- 네이티브스크립트 CLI
- Android용 Android SDK 및 iOS용 Xcode
Android용 빌드를 하려면 Android SDK가 필요하고, iOS용 빌드를 하려면 macOS 컴퓨터에서만 사용할 수 있는 Xcode가 필요합니다. 이 특정 가이드의 경우 Couchbase Server의 원격 인스턴스가 필요하지 않습니다.
Angular 프로젝트로 새로운 네이티브스크립트 만들기
필수 구성 요소가 설치되고 준비가 완료되면 컴퓨터 어딘가에 새 프로젝트를 만들어야 합니다.
NativeScript CLI에서 다음을 실행합니다:
|
1 |
tns create photo-project --ng |
위의 명령은 새 Angular 프로젝트를 생성하므로, 따라서 --ng 플래그.
개발을 시작하기 전에 NativeScript용 Couchbase 플러그인을 설치해야 합니다. 다음을 실행하여 설치할 수 있습니다:
|
1 |
tns plugin add nativescript-couchbase |
기술적으로 애플리케이션 개발을 시작할 수 있지만 처리해야 할 업무 순서가 하나 더 있습니다. iOS에서는 사용 중인 각 권한을 설명해야 합니다. 사진을 찍거나 갤러리를 사용할 수 있는 것은 권한 요청이므로 설명해야 합니다.
프로젝트의 앱/앱_자원/iOS/정보 plist 파일을 열고 다음을 포함하세요:
|
1 2 |
<key>NSPhotoLibraryUsageDescription</key> <string>Photo Library Access Warning</string> |
이렇게 하면 컴파일 시간이나 실행 시간 동안 오류가 발생하지 않습니다. 이제 Android 및 iOS 모바일 애플리케이션 개발을 안전하게 시작할 수 있습니다.
핵심 애플리케이션 로직 및 사용자 인터페이스 개발
자체 코드를 추가하기 전에 Angular로 새 NativeScript 프로젝트를 만들 때 함께 제공되는 상용구 템플릿 코드를 제거해 보겠습니다.
단일 페이지 애플리케이션이 될 것이므로 기존의 탐색 경로를 모두 제거해야 합니다. 먼저 프로젝트의 앱/앱.라우팅.ts 파일을 열고 다음과 같이 만듭니다:
|
1 2 3 4 5 6 7 8 9 10 11 |
import { NgModule } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { Routes } from "@angular/router"; const routes: Routes = []; @NgModule({ imports: [NativeScriptRouterModule.forRoot(routes)], exports: [NativeScriptRouterModule] }) export class AppRoutingModule { } |
저희가 한 유일한 작업은 경로 배열이 있습니다. 기술적으로는 이 파일을 제거할 수 있지만 사용하지 않을 파일을 제거하는 것이 더 쉽습니다.
이제 프로젝트의 앱/앱.모듈.ts 파일을 열고 다음과 같은 타입스크립트를 만듭니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptModule } from "nativescript-angular/nativescript.module"; import { AppRoutingModule } from "./app.routing"; import { AppComponent } from "./app.component"; @NgModule({ bootstrap: [ AppComponent ], imports: [ NativeScriptModule, AppRoutingModule ], declarations: [ AppComponent ], providers: [], schemas: [ NO_ERRORS_SCHEMA ] }) export class AppModule { } |
위에서는 이전에 라우팅되었던 MVC 파일에 대한 참조를 모두 제거했습니다. 여기에는 HTML, TypeScript 및 제공되었던 Angular 서비스가 포함됩니다.
새 콘텐츠를 추가할 때는 먼저 타입스크립트 로직에 집중한 다음 HTML UI로 이동하겠습니다. 프로젝트의 app/app.component.ts 파일을 열고 다음을 포함하세요:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import { Component, OnInit } from "@angular/core"; import { Couchbase } from "nativescript-couchbase"; import * as Camera from "camera"; import * as ImageSource from "image-source"; @Component({ selector: "ns-app", templateUrl: "app.component.html", }) export class AppComponent implements OnInit { public database: any; public images: Array<any>; public constructor() { this.database = new Couchbase("image-database"); this.database.createView("images", "1", function(document, emitter) { if(document.type && document.type == "image") { emitter.emit(document._id, document); } }); this.images = []; } public ngOnInit() { let rows = this.database.executeQuery("images"); for(let i = 0; i < rows.length; i++) { this.images.push(ImageSource.fromBase64(rows[i].image)); } } public capture() { Camera.takePicture({ width: 300, height: 300, keepAspectRatio: true, saveToGallery: false }).then(picture => { let base64 = picture.toBase64String("png", 70); this.database.createDocument({ "type": "image", "image": base64, "timestamp": (new Date()).getTime() }); this.images.push(picture); }, error => { console.dump(error); }); } } |
위의 코드에서 많은 일이 일어나고 있으므로 이를 세분화해 보겠습니다.
이전에 네이티브스크립트용 카우치베이스 플러그인을 다운로드했지만, 이제 다른 것들과 함께 가져와야 합니다:
|
1 2 3 |
import { Couchbase } from "nativescript-couchbase"; import * as Camera from "camera"; import * as ImageSource from "image-source"; |
카메라 기능은 이미 네이티브스크립트에 포함되어 있으므로 임포트하기만 하면 됩니다. 카메라 데이터를 조작하는 데 있어서는 이미지 소스 를 사용할 것입니다.
내 앱 컴포넌트 클래스에는 두 개의 변수가 있습니다:
|
1 2 |
private database: any; public images: Array<any>; |
그리고 데이터베이스 는 오픈 카우치베이스 라이트 인스턴스와 이미지 는 화면에 표시될 모든 저장된 이미지를 보관합니다.
내 생성자 메서드를 사용하여 데이터베이스를 열고, 나중에 쿼리할 수 있는 뷰를 생성하고, 이미지를 저장할 배열을 초기화합니다.
|
1 2 3 4 5 6 7 8 9 |
public constructor() { this.database = new Couchbase("image-database"); this.database.createView("images", "1", function(document, emitter) { if(document.type && document.type == "image") { emitter.emit(document._id, document); } }); this.images = []; } |
생성하는 뷰는 다음과 같은 속성을 가진 모든 NoSQL 문서를 반환합니다. 유형 로 설정된 이미지 는 화면에 표시할 수 있는 이미지 중 하나라는 것을 나타냅니다.
데이터는 절대로 생성자 메서드를 사용하면 ngOnInit 메서드를 사용합니다:
|
1 2 3 4 5 6 |
public ngOnInit() { let rows = this.database.executeQuery("images"); for(let i = 0; i < rows.length; i++) { this.images.push(ImageSource.fromBase64(rows[i].image)); } } |
그리고 ngOnInit 메서드가 트리거된 후 생성자 메서드를 호출하면 이전에 만든 뷰를 쿼리합니다. 저장된 각 문서에는 이미지 베이스64 이미지 데이터를 포함합니다. 이 모델은 저희 디자인을 기반으로 합니다.
base64 데이터를 얻은 후, 이 데이터를 이미지 소스 를 클릭하고 배열에 추가하여 화면에 표시합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public capture() { Camera.takePicture({ width: 300, height: 300, keepAspectRatio: true, saveToGallery: false }).then(picture => { let base64 = picture.toBase64String("png", 70); this.database.createDocument({ "type": "image", "image": base64, "timestamp": (new Date()).getTime() }); this.images.push(picture); }, error => { console.dump(error); }); } |
위 캡처 메서드는 HTML에서 버튼을 눌러 호출됩니다. 몇 가지 설정이 정의된 상태에서 카메라가 실행됩니다.
캡처에 성공하면 사진이 base64로 변환되고 base64 데이터 옆에 다양한 정보와 함께 NoSQL 문서가 생성됩니다.
나쁘지 않죠?
이제 이 로직과 함께 사용되는 HTML 마크업을 살펴보겠습니다. 프로젝트의 app/app.component.html 파일을 열고 다음을 포함하세요:
|
1 2 3 4 5 6 |
<ActionBar title="{N} Couchbase Photos"> <ActionItem text="Capture" ios.position="right" (tap)="capture()"></ActionItem> </ActionBar> <StackLayout> <Image *ngFor="let image of images" [src]="image"></Image> </StackLayout> |
위의 HTML에는 카메라를 트리거하는 버튼이 있는 액션 바가 있습니다. 페이지의 핵심 콘텐츠 안에는 배열의 각 이미지를 통과하여 화면에 표시하는 루프가 있습니다.
결론
방금 기본 이미지 캡처 애플리케이션을 만드는 방법을 살펴보았습니다. 네이티브 스크립트 및 Angular를 사용하여 이미지 데이터를 Couchbase Lite NoSQL 문서에 base64 인코딩 문자열로 직접 저장할 수 있습니다. 다음 시간에는 이 이미지 데이터를 기기와 원격 데이터베이스 인스턴스 간에 동기화하는 방법을 살펴보겠습니다.
그동안 Couchbase에서 NativeScript를 사용하는 방법에 대한 다른 튜토리얼을 확인해 보세요, 네이티브스크립트 및 앵귤러를 통한 카우치베이스 모바일의 키-값 연산.
Android 및 iOS용 카우치베이스에 대한 도움이 더 필요하신가요? 다음을 확인하세요. 카우치베이스 개발자 포털 에서 문서와 예제를 확인하세요.
튜토리얼에 감사드립니다. NS3.0의 경우 카메라 가져오기는 "nativescript-camera"에서 해야 한다는 것을 알았습니다.
네, 하지만 좋은 점은 사소한 변화일 뿐이라는 점입니다 :-)
안녕하세요, 방금이 코드를 시도해 보았는데 (Couchbase에 이미지를 Base64로 저장 한 다음 검색하려고합니다) 제가 구축중인 앱에서 실행중인이 샘플 앱에서 동일한 문제가 발생하고 있습니다:
capture() 함수에서 "속성 'toBase64String'이 'ImageAsset' 유형에 존재하지 않기 때문에 let base64=picture.toBase64String("png", 70)을 사용할 수 없습니다." ImageSource.fromAsset(picture).then(...)을 통해 그림을 실행하면 .toBase64String을 적용할 수 있지만 .fromBase64를 사용하여 성공적으로 복원할 수 없습니다.
완전히 헤매고 있는데 도와주셨으면 좋겠어요!