아이오닉 프레임워크 는 최근 가장 인기 있는 모바일 프레임워크 중 하나가 되었습니다. 모바일 애플리케이션을 위한 훌륭한 사용자 인터페이스를 매우 쉽게 작성할 수 있기 때문입니다. 하지만 백엔드 서버에서 데이터를 가져오고 디바이스가 오프라인 상태일 때를 대비해 데이터를 로컬에 저장하는 데이터 관리도 어려운 과제 중 하나입니다.

카우치베이스 모바일이 이 작업을 처리하며, 아파치 코르도바 플러그인을 사용하면 매우 간편합니다!

이 튜토리얼에서는 방법을 배웁니다:

  • Ionic 프로젝트에 Couchbase Lite를 포함하세요.
  • Ionic UI 구성 요소를 사용하여 데이터를 화면에 표시합니다.
  • iOS/안드로이드 시뮬레이터에서 애플리케이션을 실행합니다.

전제 조건

  • Ionic 프레임워크 1.0+
  • Apache Cordova 5.0+
  • 안드로이드용 빌드의 경우 안드로이드 SDK
  • iOS용으로 빌드하는 경우 Xcode가 설치된 Mac

시작하기

코딩을 시작하기 전에 새 프로젝트를 생성하고 필요한 모든 플러그인과 컴포넌트를 구성하는 것이 중요합니다. 명령 프롬프트(Windows) 또는 터미널(Mac/Linux)에서 다음을 실행하여 새 Ionic 프로젝트를 만듭니다:

Mac을 사용하지 않는 경우 iOS 플랫폼용으로 추가 및 빌드할 수 없다는 점을 기억하세요.

이 프로젝트가 성공하려면 몇 가지 사항이 필요합니다. 아파치 코르도바 플러그인을 설치해야 합니다. 명령 프롬프트 또는 터미널에서 Ionic 프로젝트를 현재 작업 디렉터리로 설정한 상태에서 다음 명령을 실행합니다:

이렇게 하면 외부 서비스와 통신할 수 있는 Apache Cordova 화이트리스트 플러그인과 애플리케이션에서 Couchbase를 사용할 수 있는 Couchbase PhoneGap 플러그인이 설치됩니다.

AngularJS RESTful 라이브러리 포함

Couchbase Lite 사용은 Apache Cordova 플러그인을 통해 노출되는 RESTful API를 통해 이루어집니다. 이러한 API 엔드포인트의 전체 목록은 다음에서 확인할 수 있습니다. 공식 카우치베이스 문서. 그러나 AngularJS 래퍼 라이브러리를 사용하면 이러한 엔드포인트를 훨씬 쉽게 호출할 수 있습니다.

최신 다운로드 ng-couchbase-lite 릴리스에서 찾을 수 있으며, 깃허브에 있는 ng-couchbase-lite.min.js 파일에 있는 dist 디렉토리를 프로젝트의 www/js/ 폴더로 이동합니다.

프로젝트에 파일이 포함된 상태에서 프로젝트의 index.html 파일에 자바스크립트 파일을 다음과 같이 포함시킵니다:

스크립트가 프로젝트의 www/js/app.js.

ng-couchbase-lite를 사용하기 전에 마지막으로 수행해야 할 작업은 AngularJS에 주입하는 것입니다. 이 작업은 프로젝트의 www/js/app.js 파일을 변경하고 angular.module 를 다음과 같이 변경합니다:

이제 프로젝트를 통해 AngularJS 래퍼를 사용할 수 있습니다.

인덱스 파일 다듬기

프로젝트의 www/index.html 를 참조하여 이 튜토리얼을 최대한 활용하세요. 그 중 첫 번째는 화이트리스트 플러그인을 보완하기 위해 몇 가지 메타 정보를 추가하는 것입니다. iOS보다 Android에 더 필요합니다. 다른 메타 태그에 다음을 포함하세요:

이것은 프로젝트에 특정 스크립트로 작업하고 싶다는 것을 알려주는 것입니다.

또 다른 조정은 내부에 있는 body 태그를 추가합니다. 본문 내부의 모든 내용을 다음으로 바꿉니다:

이쯤 되면 이제 괜찮을 것입니다.

글로벌 데이터베이스 변수 사용

모든 뷰에서 데이터베이스를 열어야 하는 번거로움을 덜기 위해 프로젝트에 전역 변수를 만들겠습니다. 프로젝트의 www/js/app.js 파일을 아래 angular.module 에는 다음이 포함됩니다:

이는 나중에 데이터베이스를 초기화할 때 설정됩니다.

UI 라우터 구성

아이오닉 프레임워크는 AngularJS UI-라우터를 사용하므로 뷰와 컨트롤러를 처리할 때 이를 활용하겠습니다. 프로젝트의 www/js/app.js 파일에 다음 코드를 추가합니다:

목록 보기로 가는 경로와 작업 보기로 가는 경로가 두 개 있습니다. 그러나 작업 보기에는 다음과 같이 식별되는 추가 매개 변수가 필요합니다. listId. 작업 보기로 이동할 때 작업이 속한 상위 목록 항목을 제공하고자 하기 때문입니다. 이는 데이터를 쿼리하는 데 도움이 될 것입니다. 컨트롤러는 나중에 만들 예정이므로 지금은 무시하세요.

데이터베이스 및 뷰 초기화

카우치베이스 폰갭 플러그인을 사용할 때 가장 먼저 해야 할 일은 데이터베이스를 만드는 것입니다. 그런 다음 데이터베이스에 상주할 문서를 쿼리할 보기를 등록할 수 있습니다. 카우치베이스 보기는 새 문서가 데이터베이스에 저장될 때 인덱스를 점진적으로 구축하는 매핑/축소 쿼리입니다. 사용자 인터페이스 뷰와는 완전히 다릅니다!

프로젝트의 www/js/app.js 파일에 몇 가지를 포함시킬 것입니다. 실행 메서드를 사용합니다:

단계별 진행 상황은 다음과 같습니다:

  1. 먼저 플러그인이 존재하는지(설치 및 실행 중인지) 확인합니다. 존재한다면 원하는 데이터베이스가 아직 존재하지 않는다면 새 데이터베이스를 만듭니다. 데이터베이스 생성이 성공하면 할 일 목록을 가져오기 위한 보기와 작업을 가져오기 위한 보기 두 개를 만들 것입니다. 이 튜토리얼에서 만드는 데이터베이스의 이름은 할 일.
  2. 라는 뷰를 만들고 있습니다. 작업 그리고 목록의 내부에 있는 _디자인/할일 디자인 문서로 이동합니다. 카우치베이스 뷰와 관련하여. 카우치베이스의 목록 보기는 모든 문서에 doc.type목록 그리고 title 속성을 반환합니다. 그러나 문서 ID와 함께 제목과 문서 수정본만 반환됩니다. 이는 작업을 가볍게 유지하기 위한 것입니다. 그리고 작업 보기는 모든 문서에 doc.type작업 뿐만 아니라 일부 title 속성 및 부모 list_id 속성을 사용합니다. 이 특정 보기에서는 문서 ID와 함께 제목, 문서 수정본 및 목록 ID만 반환됩니다.

컨트롤러 만들기

할 일 목록 컨트롤러

내부 www/js/app.js 파일을 열고 다음 컨트롤러를 생성합니다:

계획에 대한 간단한 설명입니다. $scope.lists 객체는 특정 보기가 액세스할 수 있는 모든 Couchbase 문서를 보유합니다. $scope.insert 는 물론 Couchbase Lite에 데이터를 삽입하고 $scope.delete 가 데이터 삭제를 담당합니다.

따라서 $scope.insert 함수입니다:

데이터를 삽입하기 위해 별도의 뷰를 만드는 대신 1TP4티오닉팝업. 그 결과로 객체에 추가하고 나중에 참조할 수 있도록 문서 유형도 추가합니다. 그런 다음 이 개체는 데이터베이스에 삽입되며, 이 시점에서 성공 또는 실패에 따라 특정 작업을 수행하도록 선택할 수 있습니다.

다음으로 걱정해야 할 기능은 $scope.delete 함수입니다:

여기서 몇 가지 일이 일어나고 있습니다. 먼저 특정 ID와 리비전을 통해 목록 문서를 삭제하려고 시도합니다. 삭제가 성공하면 작업 보기에서 최근에 만든 문서의 부모가 있는 모든 작업을 쿼리합니다. 검색 범위를 좁히기 위해 시작_키 옵션을 사용하세요. 일치하는 모든 작업 문서에 대해 부모 문서의 삭제로 인해 고아가 되지 않도록 해당 문서도 함께 삭제하세요.

삭제 함수에 전달되는 매개변수는 객체입니다.

잠깐만요! 목록에 표시할 문서를 어떻게 검색하나요? 우리가 하려는 작업에는 두 가지 부분이 있습니다. 첫 번째는 새 데이터베이스를 만들 때 만든 뷰를 쿼리하는 것입니다. 다음과 같이 할 수 있습니다:

그러면 뷰가 로드될 때 할 일 목록이 뷰에 쿼리되지만 변경 사항을 지속적으로 찾으려면 어떻게 해야 할까요? 변경 사항을 듣기 시작한 이후로 실행 메서드를 사용하면 들은 내용을 표시하도록 선택할 수 있습니다:

위의 코드는 카우치베이스:변경 이벤트를 기다립니다. 이 이벤트가 트리거되면 모든 변경 사항을 반복하여 목록에서 문서를 삭제할지 아니면 목록에 문서를 삽입할지 결정합니다. 문서가 없는 경우 삽입하고 있는 경우 업데이트하기 때문에 업서트라고 합니다.

작업 목록 컨트롤러

내부 www/js/app.js 파일을 열고 다음 컨트롤러를 생성합니다:

여기서 몇 가지 일이 일어나고 있습니다. $scope.todoList 변수에는 이전 할 일 목록 보기에서 전달된 목록 ID가 저장됩니다. 선택한 목록의 ID입니다. 목록의 $scope.tasks 객체에서 본 것과 유사합니다. TodoListsController 를 사용하여 $scope.lists 객체입니다. 이번에는 작업 정보만 저장합니다. 작업 정보를 저장하는 $scope.insert 그리고 $scope.delete 에서 보았던 것과 매우 유사할 것입니다. TodoListsController. 그러나, $scope.back 는 새로운 기능으로, 애플리케이션 내에서 뒤로 화살표를 탭하면 히스토리 스택에서 한 단계 뒤로 이동하는 역할을 합니다.

따라서 이러한 함수를 몇 가지 코드로 채워 보겠습니다. $scope.insert 함수입니다:

다른 컨트롤러와 마찬가지로 이 컨트롤러에서도 1TP4티오닉팝업 를 사용하여 데이터를 입력합니다. 결과는 이 하위 작업이 속한 목록의 유형과 ID를 가진 개체에 추가됩니다. 그런 다음 이 개체가 데이터베이스에 삽입됩니다.

다음은 Couchbase Lite에서 작업을 제거하기 위한 삭제 기능입니다:

이 삭제 기능이 목록 삭제에 비해 훨씬 간편하다는 것을 알 수 있습니다. 고아 데이터에 대해 걱정할 필요가 없기 때문입니다. 삭제할 특정 작업 ID와 리비전만 전달하면 완료됩니다.

할 일 목록으로 돌아가는 뒤로 기능으로 돌아갑니다:

특별한 것은 아니지만 iOS 디바이스에는 하드웨어 뒤로 가기 버튼이 없기 때문에 중요합니다. Android에서는 덜 중요하지만 일관성을 위해 여전히 유용합니다.

할 일 목록 컨트롤러와 마찬가지로 데이터를 화면에 표시하는 것에 대해 고민해야 합니다. 사실 다른 컨트롤러에서 보았던 것과 매우 유사합니다. 뷰에서 작업을 쿼리하는 것부터 시작하겠습니다:

위 코드에서는 뷰를 쿼리하고 있지만 문서 결과가 동일한 할 일 목록 부모를 공유하는지도 확인합니다. 시작_키. 결과가 일치하면 작업 개체에 추가합니다.

청취자의 경우에도 이미 본 것과 매우 유사할 것입니다:

목록을 필터링하는 대신 작업을 필터링합니다.

UI 보기 만들기

이 애플리케이션에는 두 가지 보기가 있습니다:

  • 목록 만들기, 보기, 삭제하기 위한 보기
  • 작업 생성, 보기 및 삭제를 위한 보기

둘 사이의 레이아웃과 기능은 거의 동일합니다. 만약 www/templates 디렉터리가 프로젝트에 없는 경우 직접 생성하세요.

할 일 목록 보기

프로젝트의 www/templates라는 새 파일을 만듭니다. todolists.html 를 클릭하고 다음 코드를 추가합니다:

위에 표시되는 내용에 대해 몇 가지 주의해야 할 사항이 있습니다. 우선, 사용자가 새 목록을 만드는 방법인 더하기 아이콘이 있는 탐색 버튼이 있습니다. 이 버튼을 클릭하면 삽입() 메서드를 호출합니다. 다음으로 주목해야 할 것은 우리가 어떻게 이온 목록. iOS 및 Android용 일반 메일 앱과 유사한 스와이프 기능을 제공하기로 했습니다. 이는 이온 옵션 버튼 를 사용하여 목록을 삭제할 수 있습니다.

이 보기의 마지막 요점은 ng-반복 를 사용하여 모든 목록을 반복할 수 있습니다. 목록 항목을 클릭하면 목록 ID가 ui-sref 호출합니다.

작업 목록 보기

프로젝트의 www/templates라는 새 파일을 만듭니다. tasks.html 를 클릭하고 다음 코드를 추가합니다:

이 역시 할 일 목록 보기와 매우 유사합니다. 하지만 두 가지 큰 차이점이 있습니다. 먼저, 이 뷰에는 화살표 아이콘이 있는 왼쪽 버튼이 있습니다. back() 메서드. 이제 이 화면에는 두 개의 메뉴 버튼이 있습니다. 두 번째는 ng-if 반복되는 문에 존재하는 이온 항목 태그를 추가합니다. 선택한 목록과 일치하는 부모가 있는 경우에만 작업을 표시하려고 합니다.

프로젝트 테스트

Android용 테스트

장치가 연결되었거나 시뮬레이터가 실행 중인 상태에서 명령 프롬프트 또는 터미널에서 다음 두 명령을 실행하여 APK 파일을 빌드하고 설치합니다:

iOS용 테스트

이 작업에는 두 가지 좋은 방법이 있습니다. 프로젝트를 빌드한 후 Xcode로 열거나 Xcode를 실행하지 않고 애플리케이션을 빌드하고 에뮬레이트할 수 있습니다. 첫 번째 방법은 다음과 같이 할 수 있습니다:

그런 다음 프로젝트의 platform/ios/ 디렉터리를 열고 Xcode 프로젝트 파일을 실행합니다.

NPM(노드 패키지 관리자) 패키지를 설치한 경우 iOS-SIM를 클릭하면 다음을 수행할 수 있습니다:

그래들 종속성 문제 해결하기

Android의 컴파일 시 다음과 같은 오류 메시지가 표시될 수 있습니다:

이 문제를 해결하려면 Android용 Gradle 빌드 파일 확장에 설명된 대로 공식 아파치 코르도바 문서.

만들기 플랫폼/안드로이드/build-extras.gradle 를 클릭하고 다음을 추가합니다:

결론

Couchbase PhoneGap 플러그인을 사용하여 모든 트랜잭션을 로컬에서 처리하는 모바일 할 일 목록 애플리케이션을 만들었습니다. AngularJS를 사용하여 Couchbase Lite가 노출하는 RESTful 엔드포인트에 쉽게 연결했습니다.

그리고 이 시리즈의 다음 아이오닉 프레임워크 튜토리얼 에서는 로컬 장치와 Couchbase 동기화 게이트웨이 간에 데이터를 복제하여 장치와 플랫폼 간에 데이터를 공유할 수 있는 방법을 살펴봅니다.

이 시리즈는 다음 링크에서 전체 내용을 다운로드할 수 있습니다. 카우치베이스 랩 깃허브 페이지로 이동합니다.

작성자

게시자 Nic Raboy, 개발자 옹호자, Couchbase

닉 라보이는 최신 웹 및 모바일 개발 기술을 옹호하는 사람입니다. 그는 Java, JavaScript, Golang 및 Angular, NativeScript, Apache Cordova와 같은 다양한 프레임워크에 대한 경험이 있습니다. Nic은 웹 및 모바일 개발을 보다 쉽게 이해할 수 있도록 자신의 개발 경험에 대해 글을 쓰고 있습니다.

댓글 하나

  1. 뷰의 다른 구성 요소와 너무 많이 연결됩니다! 삽입/업데이트/삭제 로직을 별도의 Action 클래스에 배치하여 특정 UI에서 분리한 다음 뷰에서 삽입/업데이트/삭제 트리거가 전송될 때 호출하는 것이 좋습니다. 예:

    1. 의견 주셔서 감사합니다!

      Ionic 문서에서 이 작업을 수행하거나 수행하지 않는 것에 대해 읽지 않았기 때문에 선호도에 달려 있다고 생각합니다. 매우 타당한 접근 방식이라고 생각하기 때문에 동의하지 않지만 이 튜토리얼의 많은 독자에게는 너무 고급적일 수 있다고 생각합니다. 저는 초보자든 숙련자든 모든 개발자를 수용하려고 노력했습니다.

      제안해 주셔서 다시 한 번 감사드립니다 :-)

  2. 크리스티안 로드리게스 7월 28, 2015에서 1:37 오전
  3. iOS 에뮬레이터에서 git 프로젝트를 실행하면 데이터베이스를 만드는 동안 실패합니다. 반환되는 오류는 단지 null입니다. 무슨 일이 일어날 수 있나요?

    다음은 요청입니다: {\"method\":\"PUT\",\"url\":\"http://lite.couchbase./todo\",\"withCredentials\":true}그리고 응답입니다: {\"data\":null,\"status\":0,\"config\":{\"method\":\"PUT\",\"transformRequest\":[null],\"transformResponse\":[null],\"url\":\"http://lite.couchbase./todo\",\"withCredentials\":true,\"headers\":{\"Accept\":\"application/json, text/plain, */*\"}},\"statusText\":\"\"}

    1. 이상하네요!

      어떤 버전의 iOS와 어떤 버전의 Apache Cordova에서 테스트하고 있나요? iOS 플랫폼을 추가한 후 필요한 플러그인을 모두 설치했는지 확인할 수 있나요?

      감사합니다,

      1. 똑같은 문제가 발생하고 있습니다. createDatabase()가 호출되고 오류 콜백으로 이동하고 오류는 null입니다.

        삼성 갤럭시 S3에서 앱을 실행하고 있습니다.

        1. 더 알려주실 수 있는 정보가 있나요? 안드로이드 버전은? 배포 방식은 어떻게 하시나요?

          최고,

          1. 안드로이드 4.1.2. 이온 빌드 안드로이드 -> 이온 실행 안드로이드를 사용하여 장치에 배포하고 있습니다.

            하지만 도움이 될지 모르겠지만 iOS 에뮬레이터에서 실행해 보니 작동합니다.

          2. 여기에서 티켓을 열었습니다:

            https://github.com/couchbase/c

            최고,

          3. 여전히 문제가 발생하고 있나요?

          4. 토도라이트아이오닉 앱을 실행할 때 같은 문제가 발생하여 데이터베이스 생성 약속이 거부되었지만 오류가 비어 있습니다. 로그캣에서 오류 전후의 로그 외에는 아무것도 볼 수 없습니다.
            안드로이드 4.2.2 실행
            5.0.2를 실행하는 다른 기기에서
            리소스를 로드하지 못했습니다: 서버가 403(금지됨) 상태의 응답을 보냈습니다.

            안드로이드 6+에서 정상 작동

          5. 안녕하세요, 실패한 각 디바이스에 대한 전체 로그캣을 붙여넣어 주실 수 있나요? 각각에 대해 별도의 댓글을 달아주세요.

            감사합니다,

          6. 현재 제 컴퓨터에서 떨어져 있지만 좀 더 자세히 살펴본 결과 실패한 기기에서 인증 헤더가 누락된 것을 발견했습니다.
            작동하는 기기에서 어떻게 설정되어 있는지는 모르겠지만 확실히 존재합니다.

            가능한 한 빨리 로그를 보내드리겠습니다.

          7. Android 플러그인을 살펴본 결과 다음과 같은 내용을 발견했습니다.

            자격 증명 요청 자격 증명 = credentialsWithBasicAuthentication(요청);

            if (allowedCredentials != null && !allowedCredentials.empty()) {

            if (requestCredentials == null || !requestCredentials.equals(allowedCredentials)) {

            Log.d(Log.TAG_LISTENER, \"무단 - 요청 자격 증명이 제공되지 않았거나 허용된 자격 증명과 일치하지 않습니다\");

            response.setHeader(\"WWW-Authenticate\", \"기본 영역=\"Couchbase Lite\"\");

            응답.setStatus(401);

            반환합니다;

            ////어떤 이유로 장치에서 401을 받지 못했습니다. 오류 반환값은 null입니다.

            }

            Log.v(Log.TAG_LISTENER, \"기본 인증을 통해 승인됨\");

            } else {

            Log.v(Log.TAG_LISTENER, \"기본 인증 적용 안 함 - 허용된 자격 증명이 null 또는 비어 있음\");

            }

            기본 인증 헤더가 설정되지 않았기 때문에 일부 디바이스에서는 credentialsWithBasicAuthentication(요청)이 null을 반환합니다.

            저는 이것을 어디에도 설정하지 않았습니다. 이 문제를 해결하려면 ng-couchbase-lite.js의 makeRequest를 다음과 같이 수정해야 했습니다.

            makeRequest: function(method, url, params, data) {

            var deferred = $q.defer();

            var settings = {

            메소드: 메소드,

            URL: URL,

            withCredentials: true,

            헤더: {

            \'권한 부여\': this.auth

            }

            };

            if (params) {

            settings.params = 매개변수;

            }

            if (data) {

            settings.data = 데이터;

            }

            $http(설정)

            .success(function(result) {

            deferred.resolve(결과);

            })

            .error(function(error) {

            deferred.reject(error);

            });

            deferred.promise를 반환합니다;

            }

            여기서 this.auth는 cblite.getURL에서 반환한 정보의 Base64 인코딩 문자열입니다.

            이로 인해 문제가 발생한 것 같지는 않지만, 작동하던 기기에서 인증 헤더가 어떻게 설정되는지 알고 싶습니다.

          8. 흥미로운...

            혹시 안드로이드용 커스텀 ROM을 사용하고 계신가요? 이 문제가 카우치베이스가 아닌 앵귤러 때문인지 궁금합니다. 기기가 JavaScript를 다르게 처리하는 것이 문제일 수 있습니다. 각 Android 버전에 대해 어떤 종류의 기기 또는 에뮬레이터를 사용하시나요?

            최고,

          9. 답장이 늦어져서 죄송합니다 :-)
            모든 Android 기기에는 표준 ROM이 있습니다. 앵귤러 문제처럼 보이지만 기본 인증 정보가 어디에 설정되었는지 확인할 수 없습니다.

          10. 이 내용을 포럼으로 가져갈 수 있습니다.

  4. 안드레 미란다 8월 19, 2015에서 12:12 오후

    훌륭한 튜토리얼!
    Ionic을 소개하는 역할도 합니다.

    작은 팁: 글의 두 번째 부분에 링크를 추가하면 독자가 더 쉽게 따라갈 수 있습니다.)

    1. 팁 주셔서 감사합니다! 이 첫 번째 글을 시리즈의 두 번째 글에 링크했습니다 :-)

  5. 안녕하세요,

    CS에서 사용하는 JS-LIB의 경로를 어떻게 찾을 수 있나요?
    CS에 sef 정의 js-lib를 추가하려면 어떻게 해야 하나요?

    1. 약간 혼란스럽습니다:

      1. "js-lib"는 무엇을 의미하나요?
      2. 어떤 \"자체 정의 js-lib\"를 말하는 건가요?

      최고,

      1. 안녕하세요,
        네이티브 JS 함수의 출처가 어디인지 알고 싶습니다 .
        그리고 내 js 함수 집합을 정의하려면 .js 확장자 이름을 가진 파일에 저장할 것인데 js 파일을 어디에 넣어야 하나요?

        1. 여전히 혼란스럽습니다. 어떤 네이티브 JS 함수를 말하는 건가요?

          자세히 설명해 주시면 더 나은 도움을 드릴 수 있습니다.

          최고,

          1. 예: 필터 함수는 어디에서 왔나요? parseInt?

          2. 변경 이벤트 내부를 가리키고 있나요? 그렇다면 NoSQL 문서에서 특정 속성을 보고 있는 것입니다.

            다른 사항을 언급하는 경우 구체적으로 알려주세요. 더 많은 정보를 제공할수록 더 잘 도와드릴 수 있습니다.

            감사합니다,

          3. 감사합니다!
            그리고 얼굴에서 어떤 내장 기능을 사용할 수 있는지 알고 싶습니다.
            하위 문자열\'과 같은 내장 함수가 있나요?

            CS에서 underscore.js를 가져오나요?

          4. 안녕하세요,
            CS가 버킷을 10개만 소유하고 있나요?

  6. 튜토리얼을 제공해 주셔서 감사합니다!

    내 안드로이드 6, 넥서스 5에서 실행하려고 하면 createDatabase 단계에서 \"잘못된 데이터베이스\" 오류가 발생합니다. 무엇이 잘못되었는지 알아낼 수 있도록 도와주세요.

    고마워요

    1. 전체 로그에는 어떤 내용이 있나요?

      1. 엉뚱한 질문을 해서 죄송합니다만, 로그는 어디에서 찾을 수 있으며 이온 환경에서 어떻게 활성화하나요?

        1. 분명히 데이터베이스 이름에 대문자가 있으면 실패합니다. 소문자만 사용했을 때는 작동했습니다!

          1. 잘 작동한다니 다행입니다 :-)

        2. Android의 경우 다음을 참조하여 자세한 로그 정보를 확인할 수 있습니다:

          https://blog.nraboy.com/2014/1

          iOS의 경우 다음을 따라 로그를 확인할 수 있습니다:

          https://blog.nraboy.com/2015/1

          최고,

  7. 이 좋은 예제 감사합니다:-) 필터링된 (다른 채널) 복제를 만들려면 어떻게 해야 하나요? 예를 들어 이 방법에서:
    replicate: function(source, target, continuous) {
    return this.makeRequest(\"POST\", this.databaseUrl + \"_replicate\", {}, {source: 소스, target: 대상, continuous: 연속});
    },
    필터링된 복제를 위한 방법이 있나요? 도와주셔서 감사합니다.

    1. 제임스 노센티니 11월 5, 2015에서 9:22 오후

      인증 중인 사용자 또는 게스트 사용자(즉, 인증되지 않은 사용자)를 기준으로 필터링하길 원하시나요? 사용자를 생성한 다음 사용자에게 채널 집합에 대한 액세스 권한을 부여할 수 있습니다. 이 경우 _replicate 메서드의 요청 본문에서 쿠키 세션을 지정하면 됩니다. 또는 특정 채널에서만 문서를 가져오도록 리플리케이터에 지시할 수도 있습니다. 쿠키 세션 사용에 대한 예는 _replicate API 참조를 참조하세요. http://developer.couchbase.com
      하지만 채널 이름을 지정하는 방법에 대한 설명이 누락되어 있습니다. 제가 살펴보고 알려드리겠습니다.

      1. 빠른 답변에 감사드립니다. 그렇게 해주시면 좋겠습니다. 게스트 사용자로 문서를 가져오고 싶습니다.
        문서에 채널 필드가 있습니다... 채널:[\"user123\", \"user1234\"].....URL이 이렇게 보여야 하나요?
        http://sync.couchbasecloud.com... . 채널 user123에서 문서 만 가져옵니다. 또 다른 질문이 있습니다. 풀의 진행 상황이나 완료시 정보를 얻을 수 있나요?

        1. 제임스 노센티니 11월 12, 2015에서 11:27 오전

          위에 붙여넣은 URL은 동기화 게이트웨이에서 직접 문서를 가져옵니다. 또한 다음과 같은 요청 본문으로 특정 채널의 문서만 가져오도록 리플리케이터에 지시할 수도 있습니다(여기서는 nyc 채널의 문서만 가져오도록 합니다.) /_replicate:
          {
          \"쿼리_파라미터\": {
          \"channels\": \"nyc\"
          },
          \"filter\": \"sync_게이트웨이/채널별\",
          \"source\": {
          \"url\": \"http://localhost:4984/sg-test/\"
          },
          \"target\": {
          \"url\": \"cblite-test\"
          }
          }

          진행률 정보의 경우 /_active_tasks 엔드포인트가 있습니다. http://developer.couchbase.com

          1. 고마워요:-)

          2. 안녕하세요 제임스, 채널별 동기화에 대해 질문이 하나 더 있습니다:

            서버 문서는 다음과 같습니다:

            {
            \"클릭\": \"편집하려면\",
            \"2.0의 새로운 기능\": \"예약된 필드 이름이 없습니다\",
            \"channels\": [\"nyc\"]
            }

            ng-couchbase-lite.js 라이브러리를 확장해야 하는 것이 맞나요? 이 방법을 확장했습니다:

            replicate: function(query_params, filter, source, target, continuous) {

            return this.makeRequest(\"POST\", this.databaseUrl + \"_replicate\", {}, {query_params:쿼리_파람, filter:필터, source: 소스, target: 대상, 연속: 연속});

            },

            제 복제 전화입니다:

            Database.replicate({\"channels\": [\"nyc\"]}, \"sync_gateway/bychannel\" , dbName, \"http://104.155.79.21:4984/bucket_db_sync\", true).then(function(result) {
            console.log(result);
            Database.replicate({\"channels\": [\"nyc\"]}, \"sync_gateway/bychannel\" ,\"http://XXX.XXX.XXX.XXX:4984/bucket_db_sync\", dbName, true).then(function(result) {
            console.log(result);
            }, function(error) {
            console.log(\"오류 장치 동기화 오류-> \" + JSON.stringify(오류));
            });

            작동하지 않습니다. 오류가 발생합니다:

            경고: CBL_Pusher[http://XXX.XXX.XXX.XXX:4984/monitoring_sync]: 필터 \'sync_gateway/bychannel\' 없음(오류 404)

            ng-couchbase-lite.js 라이브러리를 확장할 필요가 없는 더 좋은 방법이 있나요?

            답변해 주셔서 감사합니다.

          3. 제임스 노센티니 12월 14, 2015에서 9:04 오후

            여러 채널을 지정하려면 다음과 같이 쉼표로 구분하여 문자열로 지정해야 합니다:

            {
            \"쿼리_파라미터\": {
            \"channels\": \"뉴욕,런던\"
            },
            \"filter\": \"sync_게이트웨이/채널별\",
            \"source\": {
            \"url\": \"http://localhost:4984/sg-test/\"
            },
            \"target\": {
            \"url\": \"cblite-test\"
            }
            }

            "nyc\"]를 \"nyc\"로 변경하면 작동하나요? 예. 리플리케이션 API 호출을 변경하거나 새로 만들어야 합니다.

  8. 안녕하세요 Nic, 문서에 첨부 파일을 추가한 다음 나중에 다시 가져오는 방법에 대한 예를 들어 주실 수 있나요? 문서에서 필드가 있는 첨부파일을 어떻게 참조하나요?

    고마워요!

    1. 다른 블로그 튜토리얼을 위한 완벽한 아이디어처럼 들리네요 :-)

  9. 안녕하세요, 저는 노드 js가있는 새로운 카우치베이스 데이터베이스입니다 .couchdb 서버에서 데이터베이스를 만든 다음 어떻게 CURD 작업을 수행 할 수 있는지 알려주세요.

    1. CEAN 스택 튜토리얼을 확인해보세요:

      https://blog.nraboy.com/2015/1

      원하는 경우 AngularJS(A)를 모바일 플랫폼으로 교체하세요.

      최고,

  10. 튜토리얼을 제공해 주셔서 감사합니다.

    플러그인을 설치하지 않아도 프로젝트가 정상적으로 빌드되지만 플러그인을 설치한 후 다음 오류와 함께 빌드에 실패합니다...

    코도바 버전 : 5.4.1
    아이오닉 버전 : 1.7.10

    1. 이 섹션에서 언급한 문제로 어려움을 겪고 계신 것 같습니다:

      그래들 종속성 문제 해결하기

      해당 지침을 올바르게 따랐는지 확인할 수 있나요?

      최고,

      1. 고마워요. 덕분에 성공했습니다... :)

  11. 안녕하세요! 제 친구와 저는이 작업을 시도하고 있지만 매번 \"Couchbase Lite가 설치되어 있지 않습니다\"라는 메시지가 표시됩니다.
    가이드를 단계별로 따랐지만 여전히 오류가 발생하고 있습니다.
    couchbaselabs\' github 리포지토리에서 소스 코드를 다운로드하려고 시도했지만 오류는 동일합니다!

    우리가 놓치고 있는 것은 무엇인가요?
    어떤 도움을 주시면 감사하겠습니다.

    1. 아이오닉 서브, 아이오닉 뷰 또는 아이오닉 빌드를 사용하려고 하지 않으시나요? 또한 웹 브라우저를 통해 테스트하지 않는다고 확인해 주시겠어요? 제가 말씀드린 것 중 어느 것도 작동하지 않기 때문에 묻는 것입니다. 기기 또는 시뮬레이터에 컴파일하여 설치해야 합니다.

      최고,

      1. 아이오닉 서브와 안드로이드 기기에 설치된 앱을 사용하려고 했습니다.

        이온 서브 또는 이온 뷰를 사용할 수 없는 이유는 무엇인가요?

        고마워요

        1. 아이오닉 서브와 아이오닉 뷰는 알파 버전이며 제 경험상 플러그인과의 호환성이 매우 떨어집니다.

          최고,

      2. 저도 이 오류가 발생합니다. 그리고 내가 아이오닉 서브, 아이오닉 뷰 또는 아이오닉 빌드를 사용하고 있는지 어떻게 알 수 있는지 잘 모르겠습니다.

        1. 애플리케이션을 테스트하는 방법을 단계별로 안내해 주세요. 아무것도 건너뛰지 마세요. 명령어도 포함하세요.

          최고,

          1. 조나스 로드리게스 2월 27, 2016에서 6:51 오후

            저도 같은 문제가 있었습니다. 플랫폼(이 경우 안드로이드)을 제거하고 다시 추가하는 것으로 해결했습니다. 쿠치 베이스 플러그인을 추가하기 전에 플랫폼을 추가할 때 문제가 발생하는 것 같습니다.

          2. 네, 가끔 아파치 코르도바는 추가하는 순서가 엉뚱할 때가 있습니다.

  12. 프로젝트를 두 번째로 실행하면 DB가 생성될 때만 발생하는 것처럼 보이므로 리스너가 생성되지 않습니다. 또한 쿼리뷰 함수로 목록을 채울 때 _id가 정의되지 않았기 때문에 항목을 삭제할 수 없습니다.

    두 가지 문제를 해결하는 방법을 설명해 주시겠어요?

  13. 제 질문에 답변했습니다. 데이터베이스를 만들 때 412 상태 코드를 발견하고 _id 값을 포함하도록 할 일 목록 보기를 조정했습니다.

    좋은 튜토리얼입니다.

    고마워요

    1. 멋지네요! 다행입니다. 애플리케이션 재시작 시 412 오류를 수정하도록 수정할 예정입니다.

  14. 안녕하세요, 앱이 작동하는데 \"+\" 버튼과 입력 양식 외에는 앱에 아무것도 표시되지 않고 데이터가 표시되지 않습니다...

    1. 로그에는 어떤 내용이 기록되어 있나요?

      1. 오류가 없습니다...

        아니면 내가 놓친 게 있을까요?

        1. 어떤 플랫폼을 사용 중이며 어떻게 확인하나요?

          1. 나는 안드로이드 플랫폼을 사용하고 구글 크롬으로 확인합니다.

            뭐 좀 물어봐도 될까요? 데이터를 보여줄 신택스는 무엇인가요?

          2. Chrome이 아닌 ADB를 통해 로그를 확인하는 것이 좋습니다. 자세한 내용은 아래에서 확인할 수 있습니다:

            https://blog.nraboy.com/2014/1

            로그가 완성되면 댓글에 붙여넣어 제가 살펴볼 수 있도록 해주세요.

            최고,

          3. 안녕하세요, 제가 뭔가 놓친 게 있을까요?

            나는이 신탁을 넣어야하는지 혼란 스러웠습니다 ...

          4. 예, 이렇게 하면 만든 뷰를 쿼리할 수 있습니다. 컨트롤러로 이동합니다.

          5. 컨트롤러에 스크립트를 넣었지만 크롬으로 확인하면 다음과 같은 오류가 표시됩니다.

            참고 :
            - "ng-couchbase-lite.min.js"를 확인하면 \"queryView\" 함수가 있지만 app.js에서 호출 할 수 없습니다.
            - 이미 \"app.js\" 위에 \"ng-couchbase-lite.min.js\"를 추가했지만 여전히이 오류가 발생하고 프로그램을 실행할 수 없습니다.

          6. 이 플러그인은 네이티브 코드를 사용하므로 웹 브라우저에서는 테스트할 수 없습니다.

          7. 안드로이드에서 실행 중이며 USB 디버깅을 사용하여 크롬에서 요소를 검사합니다.

          8. 그렇다면 \'todoDatabase\'가 null인 것 같습니다. 확실히 정의하고 전역으로 설정하셨나요?

          9. 이것은 전역 변수 맞죠?

          10. 예, 내부에 로드되어 있는지 확인할 수 있습니까? module.run 메서드를 사용하시나요?

          11. 예, 사진을 보세요.

            맞나요?

          12. 예. 하지만 실제로 로드되었는지 확인할 수 있나요? 쿼리를 생성하는 컨트롤러가 module.run? 그렇다면 아마도 경쟁 조건일 것입니다. 데이터베이스를 열고 뷰를 설정하는 것은 비동기식입니다.

          13. 확인 방법 ??

            이런 질문을 해서 죄송합니다. 아직 초보라서 :)

          14. 변수를 정의한 후 변수를 출력하여 null인지 확인합니다.

          15. "todoDatabase\"를 인쇄하고 나면, 당신 말이 맞습니다. "null\"이라고 표시됩니다.

            어떻게 해결하나요?

          16. 어떤 것을 인쇄하고 있나요? 다음과 같은 작업을 하고 있다고 가정합니다:

            맞나요?

          17. I https://uploads.disquscdn.com/... \'답변이 늦어 죄송합니다...

            여기에 콘솔 로그(\"if(!window.cblite)\" 닫기 태그 뒤에 넣었습니다)를 넣었습니다.

          18. getURL은 비동기식이기 때문에 올바르지 않습니다. 초기화 프로세스가 완료되었을 수도 있고 완료되지 않았을 수도 있습니다.

          19. 좋아, 전에 말씀하신대로 console.log를 시도해 보겠습니다.

          20. 콘솔 로그의 결과는 다음과 같습니다.

            *이 코드 뒤에 \"todoDatabase = new $couchbase(url, \"todo\");\" 를 넣었습니다.

            https://uploads.disquscdn.com/

          21. 예, 로드되었습니다. 어딘가에서 경쟁 조건(라이브러리가 완전히 로드되기 전에 라이브러리를 사용하려고 함)이 발생하고 있습니다. AngularJS와 이 플러그인은 비동기식이기 때문에 디자인 규칙을 따라야 합니다.

            코드를 다시 확인하거나 GitHub에서 프로젝트를 복제하는 것이 좋습니다.

            최고,

  15. 스리람 마두리 3월 1, 2016에서 4:06 오후

    hi
    쿼리 뷰에 null 오류가 발생합니다.

  16. 안녕하세요 닉,
    좋은 튜토리얼에 감사하지만 앱로드가 아닌 내 요구 사항에 따라보기를 만들 수있는 쿼리가 하나 있습니다.

    1. 네, 그렇게 할 수 있습니다.

      또한 명확하지 않은 경우 뷰를 한 번만 생성하면 됩니다. 일단 생성되면 로컬 데이터베이스에 저장되며 이후 언제든지 쿼리할 수 있습니다.

      최고,

      1. 안녕, 닉
        답변 주셔서 감사합니다.
        앱로드시 하나의 뷰를 만들고 해당 뷰가 올바르게 작동하지만 내 컨트롤러에서 (앱로드가 아닌) 다른 뷰를 만들어 아래 언급 된 함수를 호출하려고했습니다.

        $scope.createview = function() {
        var todoViews = {
        작업: {
        map: function(doc) {
        if(doc.firstname==\"찬단\" ) {
        emit(doc._id, {이름: doc.firstname, 성: doc.lastname, 이메일: doc.email, rev: doc._rev})
        }
        }.toString()
        }
        };
        todoDatabase.createDesignDocument(\"_design/todo\", todoViews);
        todoDatabase.listen();
        };

        를 실행했지만 아래에 언급된 오류가 반환됩니다.
        PUT http://ad92e99d-385a-46b7-9358-5fcb44944091:40c43d4d-9fb0-484f-ba78-082bacb2208d@localhost:5984/todo/_design/todo 409 (충돌)

        조심하세요.

        1. 특정 디자인 문서에 대한 모든 보기를 동시에 만들어야 합니다. 디자인/할 일이 이미 존재하기 때문에 이러한 충돌이 발생합니다.

          1. 안녕하세요 닉,
            감사합니다. 저에게는 효과가 있었습니다.
            하지만 한 가지 더 궁금한 점이 있는데, 왜 아래 맵 함수를 .toString()으로 전달하고 있는지 궁금합니다.

            map: function(doc) {
            if(doc.firstname==\"찬단\" ) {
            emit(doc._id, {이름: doc.firstname, 성: doc.lastname, 이메일: doc.email, rev: doc._rev})
            }
            }.toString()

            이 때문에 내가 시도 할 때
            var username=\"chandan\";

            if(doc.firstname == username ) {
            emit(doc._id, {이름: doc.firstname, 성: doc.lastname, 이메일: doc.email, rev: doc._rev})
            }
            }.toString()은 내 데이터를 가져오지 않습니다.

          2. 이 글을 읽고 MapReduce 보기에 대한 이해를 쌓는 것이 좋습니다:

            http://docs.couchbase.com/admi

            최고,

  17. 안녕하세요 Nic, 저는 Couchbase의 초보자이며 튜토리얼을 따랐지만 장치에서 실행할 때 로그에 오류 412가 표시됩니다:
    리소스를 로드하지 못함: 서버가 412(전제 조건 실패) 상태로 응답했습니다. http://b24781df-87c6-4f08-a5a0-79a98c045265:174400da-d82c-48b4-bd70-05587e0e2fd2@localhost:598
    카우치베이스 서버에서 할 일 데이터베이스를 만들어야한다는 것을 알고 있지만 URL과 플러그인을 코딩하는 방법을 모릅니다. 이 문제를 도와 주실 수 있나요? 고마워요

    1. 시리즈의 2번째 포스팅을 보셨나요? 이 글에서는 동기화에 초점을 맞췄습니다. 포스트 1은 로컬 관련 내용만 다룹니다.

  18. 안드로이드 플랫폼용 앱을 만들었는데 앱이 비어 있습니다. 전체 코드를 다운로드하여 안드로이드 플랫폼용 앱을 만들었지만 앱에 게스트 로그인 버튼만 표시되고 클릭해도 아무 작업도 수행되지 않습니다.

    1. 로그에는 어떤 내용이 기록되어 있나요?

      1. 로그를 보는 방법을 모르겠고 에뮬레이터가 아닌 실제 기기에 앱을 설치했습니다.

      2. \"TypeError: null의 \'queryView\' 메서드를 호출할 수 없습니다.

      3. \"TypeError: null의 \'queryView\' 메서드를 호출할 수 없습니다.

  19. 새 댓글을 올려 죄송하지만 답글이 게시되지 않은 것 같습니다.
    로그에 다음과 같이 표시됩니다: \"TypeError: null의 \'queryView\' 메서드를 호출할 수 없습니다.

    1. todoDatabase가 설정되지 않았다는 뜻입니다. 실행 메서드에서 설정되었는지 확인할 수 있나요? 몇 가지 콘솔 출력을 추가하여 확인할 수 있습니다.

      1. 네, 해결했습니다. 도와주셔서 감사합니다.

  20. [...] 작년에 저는 Ionic 프레임워크 모바일 애플리케이션에서 Couchbase Mobile을 사용하는 것에 대해 글을 썼습니다. 당시에는 Ionic Framework 1.0과 AngularJS 1.0을 사용하고 있었습니다. 그 동안 [...] 기술이 바뀌었습니다.

  21. [...] 이전에 Ionic 프레임워크 모바일 Android 및 iOS 애플리케이션에서 Couchbase를 사용하는 방법에 대해 썼는데, 이 애플리케이션은 임베디드 NoSQL 데이터베이스로 Couchbase Lite를 사용했습니다. 이번에는 [...] [...]

댓글 남기기