피터 음바누고는 Microsoft .NET 스택을 사용한 경험이 있는 소프트웨어 개발자입니다. 그는 오프라인 앱과 소프트웨어 아키텍처를 중심으로 고품질 소프트웨어를 구축하는 데 열정을 쏟고 있습니다.
오프라인 우선 는 네트워크 연결 부족을 오류로 간주하여 전반적인 사용자 경험에 영향을 미치는 기존 접근 방식과는 다른 소프트웨어 개발 접근 방식입니다. 오프라인 우선 접근 방식을 사용하면 가장 제약이 많은 환경부터 시작하여 나중에 기능을 사용할 수 있게 되면 점진적으로 애플리케이션의 사용자 환경을 개선해 나갑니다. 오프라인 우선의 경우 네트워크 연결이 부족하면 사용자 경험이 만족스럽지 않다고 가정하므로 오프라인 우선은 모든 조건에서 가능한 최상의 사용자 경험을 제공하려고 노력합니다.
오프라인 우선 접근 방식에는 오프라인 상태에서 데이터를 저장하거나 트랜잭션을 관리하고 서버와 동기화하는 방법, 오프라인 데이터를 안전하게 유지하는 방법, 두 사용자가 오프라인 상태에서 동일한 기록을 변경하는 경우 데이터 충돌을 해결하는 방법 등 몇 가지 고민이 따릅니다. 이번 포스팅에서는 연락처를 저장하는 웹 전화번호부 앱을 구축하여 오프라인 데이터 저장 및 동기화에 대해 살펴보겠습니다.
샘플 앱 빌드
샘플 앱은 부트스트랩, jQuery, PouchDB 및 Couchbase 동기화 게이트웨이로 구축되는 웹 앱이 될 것입니다. 먼저 연락처의 이름, 이메일 및 전화번호를 입력하고 저장된 연락처 목록을 표시하는 양식을 포함하는 페이지를 레이아웃하겠습니다.
페이지 레이아웃
애플리케이션을 위한 폴더를 만든 다음 다운로드 부트스트랩 그리고 jQuery. 파일의 압축을 풀고 다음과 같은 새 폴더에 넣습니다. 자산. 라는 새 파일을 추가합니다. index.html 를 루트 폴더에 추가하고 아래 스니펫을 복사합니다.
|
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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
!DOCTYPE html> <html lang="en"> <head> <meta 문자셋="utf-8"> <링크 rel="스타일시트" href="자산/부트스트랩/부트스트랩.min.css"> </head> <body> <nav 클래스="navbar navbar-default"> <div 클래스="컨테이너-유체"> <div 클래스="navbar-header"> <a 클래스="navbar-brand" href="#"> 전화번호부</a> </div> </div> <div 클래스="컨테이너"> <div 클래스="row"> <div 클래스="COL-MD-10"> <h2>새 연락처 추가 </h2> <hr /> <양식 id="contactForm" 클래스="form-horizontal"> <div 클래스="form-group"> <레이블 에 대한="name" 클래스="COL-SM-2 컨트롤-라벨">이름 <div 클래스="COL-SM-10"> <입력 유형="text" 클래스="form-control" id="name" 플레이스홀더="이름"> </div> </div> <div 클래스="form-group"> <레이블 에 대한="모바일" 클래스="COL-SM-2 컨트롤-라벨">모바일 <div 클래스="COL-SM-10"> <입력 유형="text" 클래스="form-control" id="모바일" 플레이스홀더="모바일"> </div> </div> <div 클래스="form-group"> <레이블 에 대한="이메일" 클래스="COL-SM-2 컨트롤-라벨">이메일 <div 클래스="COL-SM-10"> <입력 유형="이메일" 클래스="form-control" id="이메일" 플레이스홀더="이메일"> </div> </div> <div 클래스="form-group"> <div 클래스="COL-SM-오프셋-2 COL-SM-10"> <버튼 유형="제출" 클래스="btn btn-default">연락처 저장 </div> </div> </form> <hr /> </div> </div> <div 클래스="row"> <div 클래스="COL-MD-10"> <h2>연락처 목록</h2> <hr /> <표 id="contactList" 클래스="테이블 테두리"> <thead> <tr> <th>이름</th> <th>모바일</th> <th>이메일</th> <th></th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <script src="assets/jquery-2.1.0.min.js"></script> <script src="assets/bootstrap/bootstrap.min.js"></script> </body> </html> |
연락처를 입력 및 저장하고 저장된 연락처 목록을 표시하는 양식이 있는 페이지가 있습니다.
오프라인 데이터 액세스/저장
데이터는 오프라인 우선 앱의 주요 관심사 중 하나입니다. 오프라인에서 작동하는 모든 애플리케이션은 오프라인 데이터 액세스 및 저장을 처리해야 하며, 이는 클라이언트에 데이터를 저장하고 데이터를 안정적으로 동기화하는 문제를 처리하는 방식으로 처리됩니다. 모바일 및 웹 앱용 클라이언트 측 데이터베이스에는 모바일 및 데스크톱 클라이언트를 위한 Couchbase Lite와 Cloudant Sync, 브라우저를 위한 IndexedDB와 Web SQL 등 다양한 데이터베이스가 있습니다. 이 샘플에서는 CouchDB API를 모델로 한 JavaScript 클라이언트 측 데이터베이스 API인 PouchDB를 사용하겠습니다. PouchDB는 다양한 브라우저에서 지원되는 데이터베이스와 각기 다른 프로그래밍 인터페이스를 추상화합니다. 오프라인에서는 데이터를 로컬에 저장하고 온라인에서는 서버 및 연결된 다른 클라이언트와 동기화하여 온라인과 마찬가지로 오프라인에서도 잘 작동하는 애플리케이션을 구축하는 데 도움이 되도록 만들어졌습니다.
또한 후디 스토어 클라이언트데이터 지속성 및 오프라인 동기화를 위한 PouchDB 플러그인입니다. 저는 데이터 작업과 동기화에 사용할 수 있는 API 때문에 이 라이브러리로 작업하는 것을 선호합니다. 새 데이터를 추가할 때 자동으로 타임스탬프를 추가해 줍니다. 다음 명령으로 npm을 사용하여 이 플러그인을 추가하거나 다음에서 다운로드하여 PouchDB를 추가하겠습니다. 스토어-클라이언트 & PouchBD. 저는 PouchDB 6.1.2와 후드-스토어-클라이언트 7.0.1을 사용하고 있습니다.
|
1 2 3 |
npm 설치 --저장 파우치DB npm 설치 --저장 @후디/store-클라이언트 |
이제 이러한 파일을 페이지에 포함하세요.
|
1 2 |
이 작업이 완료되면 다음과 같은 새 파일을 추가합니다. index.js 에서 자산 폴더를 열고 페이지에 이 파일에 대한 링크를 추가합니다. 이 파일에서 가장 먼저 하는 일은 동기화를 위해 데이터베이스의 이름과 서버의 URL로 저장소 개체를 초기화하는 것입니다.
|
1 2 3 |
$(함수(){ var store = new 스토어('example', { 원격: 'http://localhost:4984/example', PouchDB: PouchDB }); }); |
다음 코드를 추가하여 양식에 입력한 값을 저장하고 페이지의 연락처 목록에도 추가합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$('#contactForm').제출(함수(이벤트) { 이벤트.preventDefault(); var 이름 = $('#name').val(); var 이메일 = $('#email').val(); var 모바일 = $('#mobile').val(); // 연락처를 데이터베이스에 저장 store.추가({ 이름: 이름, 모바일: 모바일, 이메일: 이메일 }); $('#contactForm')[0].재설정(); }); //페이지에 새 연락처 추가 함수 새 연락처 목록 추가(연락처) { var 새로운 연락처 = '' + 연락처.이름 + '' + 연락처.모바일 + '' + 연락처.이메일 + ' |
' $("#contactList tbody").append(newContact); } //새 항목이 데이터베이스에 추가되면 해당 함수를 실행합니다 store.on('add', addNewContactToList); function loadContacts() { store.findAll().then(function(contacts) { var tbody = "; $.each(contacts, function (i, contact) { var row = '
|
1 2 |
' + contact.name + '' + contact.mobile + '' + contact.email + ' |
'; tbody += row; }); $("#contactList tbody").html(").html(tbody); }); } // 사이트가 브라우저에서 로드되면 // 이전에 저장된 모든 연락처를 hoodie loadContacts()에서 로드합니다;
|
1 |
사용 store.add 를 사용하여 로컬 데이터베이스에 삽입한 다음, 다음을 사용하여 이벤트를 수신합니다. store.on특히 추가 이벤트가 추가되어 데이터 동기화를 시작할 때 유용하며 원격 데이터베이스와 동기화가 완료된 후 새 데이터를 표시합니다. 페이지가 로드되거나 새로 고침될 때 로컬 데이터를 표시하는 기능도 추가했습니다. 데이터를 로컬에 저장할 수 있는지 확인할 수 있습니다.
이제 오프라인 데이터 액세스/저장 기능이 작동합니다. 지금까지의 작업을 통해 사고방식이나 사고 프로세스의 변화를 확인할 수 있을 것입니다. 데이터를 먼저 로컬에 저장하고 나중에 온라인 상태가 되면 서버에 변경 사항을 푸시하는 것입니다. 다음 단계는 이 데이터를 Couchbase 서버와 동기화하는 것입니다. 이 작업을 수행하려면 Couchbase 동기화 게이트웨이가 필요합니다.
동기화 게이트웨이
동기화 게이트웨이는 웹을 통해 데이터에 액세스하고 동기화하기 위한 동기화, REST, 스트림, 배치 및 이벤트 API를 갖춘 안전한 웹 게이트웨이 애플리케이션입니다. 동기화 게이트웨이를 사용하면 무엇보다도 Couchbase Server와
카우치베이스 라이트 및/또는 파우치DB. 설치에 대한 빠른 가이드는 다음을 확인하세요. 가이드. 동기화 게이트웨이가 설치되어 있는 경우, 동기화 게이트웨이는 http://localhost:4984 로 이동합니다. 기억하시겠지만, 초기화할 때 비슷한 URL이 있었습니다. 스토어 객체를 사용하여 파우치DB를 사용하지만 추가 /예시 를 추가합니다. 추가 부록에는 동기화할 데이터베이스의 이름이 지정되어 있습니다. 앱에서 오프라인 데이터 저장 및 동기화를 사용하려면 동기화 게이트웨이 서비스를 시작하고 자동 동기화를 위해 페이지의 JavaScript를 업데이트해 보겠습니다. 동기화 게이트웨이에 대한 구성 설정을 사용하겠습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "log":["*"], "데이터베이스": { "예제": { "서버":"월러스:", "users": { "GUEST": { "disabled": false, "admin_channels": ["*"] } } } }, "CORS": { "Origin": ["http://127.0.0.1:8801"], "LoginOrigin": ["http://127.0.0.1:8801"], "헤더": ["콘텐츠 유형"], "MaxAge": 17280000 } } |
예제 데이터베이스에 대한 연결을 설정하고 인메모리 스토리지 옵션(해마)을 사용하는 기본 구성이 있는데, 프로덕션에서는 Couchbase 서버를 가리키도록 변경해야 합니다. 또한 다른 포트에 있는 앱에 대해 교차 오리진 리소스 공유를 허용하는 설정도 추가했습니다. 이제 터미널에서 다음 명령을 실행하여 동기화 게이트웨이 서비스를 시작해야 합니다.
$ ./bin/sync_gateway my-config/전화번호부-config.json
동기화 게이트웨이가 시작되면 지속적인 동기화를 위해 코드를 업데이트해야 합니다. 다음 코드를 index.js
|
1 |
store.연결(); |
위의 코드는 후드티 스토어 연결 메서드를 사용하여 원격 데이터베이스와 연속 복제를 시작하도록 PouchDB에 지시합니다. 데이터베이스를 다시 로드하면 이전 단계에서 추가한 데이터가 자동으로 서버에 동기화됩니다. 동기화 게이트웨이 관리자 URL을 사용하여 이를 확인할 수 있습니다. http://localhost:4985/_admin/db/example.
마무리
현재 이 앱은 오프라인 데이터 저장 및 실시간 기기 간 동기화를 통해 잘 작동합니다. 웹 앱이 있고 사용자가 오프라인 상태이거나 연결이 불안정할 때 페이지를 열 가능성이 높으므로 이러한 상황에서도 페이지를 로드할 수 있으며, 서비스 워커, 캐시 API, 페치 API를 사용하여 앱의 자산을 캐시하고 이에 대한 요청을 가로채서 캐시된 응답을 반환함으로써 페이지를 빠르게 로드할 수도 있습니다. 이 블로그 포스팅의 범위를 벗어나지만, 오프라인 상태에서 데이터를 사용할 수 있게 하고 연결된 모든 브라우저 클라이언트의 동기화를 유지하면서 앱에서 데이터를 빠르게 로드하는 것이 얼마나 쉬운지, 그리고 오프라인 우선 개발의 사고 전환을 보여드렸다고 생각합니다.
아래는 작동하는 모습을 보여주는 GIF입니다.
소스 코드를 가져올 수 있습니다. 여기 를 클릭하고 사용해 보세요!
안녕하세요. 인터넷 없이 네트워크 공유(핫스팟)를 사용하여 두 장치를 동기화할 수 있을 것 같아서 SQLite에서 PounchDB로 마이그레이션하려고 합니다.
좋은 방법이라고 생각하시나요?