Использование PUCCADB и COUCHBASE в оффлайн-первом приложении

Автор оригинала: Peter Mbanugo.

Offline-First App – это приложение, которое работает – без ошибки – когда нет сетевого подключения или когда соединение является Flaky. Приложение Offline-первое может обеспечить лучший, более быстрый пользовательский опыт – как оффлайн, так и онлайн – хранение содержимого и данных локально, а затем синхронизируя их с облаком, когда доступно надежное сетевое соединение. Оффлайн-первые приложения разработаны и разработаны таким образом, где отсутствие подключения не считается ошибкой. Скорее, приложения будут работать хорошо в автономном режиме, со всеми важными функциями или функциональными возможностями, доступными в этом режиме, а затем постепенно повышают при этом онлайн со стабильным подключением. В этом посту мы рассмотрим офлайн хранение данных и синхронизацию, создавая приложение для веб-телефонной книги для хранения контактов.

Создание приложения образца

Наше приложение приложения станет веб-приложением, которое будет построен с Bootstrap, jQuery, PUCHDB, плагином Hoodie Store-Client для шлюза PUCCADB и Couchbase Sync. Для начала, мы будем начать страницу, которая будет включать в себя форму, чтобы ввести имя контакта, электронной почты и телефона, а также отображать список сохраненных контактов.

Выкладывая страницу

Создайте папку для приложения.
Скачать Bootstrap и jquery Отказ
Расстегивайте файлы и поместите их в новую папку, называемую Актив Отказ
Добавить новый файл под названием index.html к вашей корневой папке и скопируйте ниже фрагмент.






    
    My Hoodie App
    




    
        
            
                 Phonebook
            
        
    
    

        
            
                Add new contact 
                
                
                    
                        Name
                        
                            
                        
                    
                    
                        Mobile
                        
                            
                        
                    
                    
                        Email
                        
                            
                        
                    
                    
                        
                            
                        
                    
                
                
            
        

        
            
                Contact List
                
                
                    
                        
                            Name
                            Mobile
                            Email

То, что у нас есть страница с формой для входа в контактную информацию и сохранить ее. Внизу список сохраненных контактов вы увидите этот дисплей:

Оффлайн-первые данные доступа/хранение

Для нашего образца мы будем использовать PUCHDB – API с клиентской базы данных JavaScript, смоделированной после API CouchDB – для хранения и извлечения данных локальных данных. PUCHDB Тезисы от разных Browser поддерживала базу данных и их различный интерфейс программирования. С этим данные будут храниться локально, после чего он будет синхронизирован с сервером, когда есть подключение.

Мы также будем использовать Hoodie Store-Client плагин PUCHDB для оффлайн-постоянства данных и синхронизации. Я предпочитаю работать с этим плагином из-за API, доступных для работы с PUCHDB. Он автоматически добавляет созданиеdate и UpdatedDate Когда я добавляю новые данные. Я добавлю этот плагин, а также PUCHDB, используя NPM со следующей командой или загрузки из этого Store-Client & Pouchbd Отказ Обратите внимание, что я использую Pouchdb 6.1.2 и Hoodie-Store-Client 7.0.1 Отказ

npm install --save pouchdb

npm install --save @hoodie/store-client

Теперь включите эти файлы на страницу.

С этим закончена, мы добавим новый файл под названием index.js В Актив Папка и добавьте ссылку на этот файл на странице. В этом файле первое, что нам нужно сделать, это инициализировать объект магазина с именем базы данных и URL-адреса на сервер для синхронизации.

$(function(){ 
  var store = new Store('example', { remote: 'http://localhost:4984/example', PouchDB: PouchDB });
});

Добавьте следующий код, чтобы сохранить значение, введенное в форме, а также добавить его в список контактов на странице:

$('#contactForm').submit(function(event) {
    event.preventDefault();

    var name = $('#name').val();
    var email = $('#email').val();
    var mobile = $('#mobile').val();

    // Save the contact to the database
    store.add({
        name: name,
        mobile: mobile,
        email: email
    });

    $('#contactForm')[0].reset();
    });

    //add new contact to the page
    function addNewContactToList(contact) {
    var newContact = '' + contact.name + '' + contact.mobile + '' + contact.email + ''
    $("#contactList tbody").append(newContact);
    }

    //when a new entry is added to the database, run the corresponding function
    store.on('add', addNewContactToList);

    function loadContacts() {
    store.findAll().then(function(contacts) {
      var tbody = '';
      $.each(contacts, function (i, contact) {
        var row = '' + contact.name + '' + contact.mobile + '' + contact.email + '';
        tbody += row;
      });

      $("#contactList tbody").html('').html(tbody);
    });
  }

  // when the site loads in the browser,
  // we load all previously saved contacts from hoodie
  loadContacts();

Я использовал store.add Чтобы вставить в локальную базу данных, а затем слушать события, используя Store.on , особенно Добавить EventInsert – это будет полезно, когда мы начнем синхронизирующие данные и будем отображать новые данные после полной синхронизации с удаленными базами данных. Я также добавил функцию для отображения локальных данных, когда страница загружена или обновлена.

Теперь у нас есть офлайн-первый доступ к данным/хранилище. Это будет хранить данные локально сначала и впоследствии продвигать изменения на сервере, когда он будет онлайн. Наш следующий шаг – это синхронизировать эти данные с сервером CouchBase. Чтобы сделать эту работу, нам нужна шлюз синхронизации Couchbase.

Синхронизация шлюза

Sync Gateway – это безопасный веб-шлюз приложения с синхронизацией, отдыхом, потоком, пакетными API и событиями для доступа и синхронизации данных через Интернет. Sync Gateway позволяет, среди прочего, безопасную репликацию данных между сервером CouchBase и Couchbase Lite и/или PUCHDB.

Установка синхронизации шлюза

Для установки Sync Gateway,

Загрузите файл, связанный с операционной системой, вы работаете здесь Отказ
Установить
- Windows: запустите файл исполняемого файла.
- Mac: распакуйте GZuпленный файл Tar XZF CouchBase-Sync-Gateway-Enterprise_1.3.1.1-1_x86_64.tar.gz Отказ
Запустите Sync Gateway Service (необязательно).
- Windows: используйте панель управления> «Инструменты администратора»> «Службы», чтобы остановить/начать службу.
- MAC: изменить каталог в каталог, который вы расстегиваете загруженный файл.
- Mac: затем запустите эту команду в оболочке Примеры Bin/Sync_gateway/Basic-Couchbase-Buget.json Отказ Второй аргумент – это файл конфигурации для шлюза синхронизации.

Если установлен Sync Gateway, он будет доступен из http://localhost: 4984 При запуске, и административный интерфейс, навигацию в браузере на http://localhost: 4985/_Admin/ Отказ Если вы помните, у нас был похожий URL при инициализации Магазин Объект для использования PUCHDB, но с дополнительным /Пример прилагается к этому. Дополнительное приложение указывает имя базы данных, с которой мы синхронизируем. Чтобы получить наше приложение, используя оффлайн хранилище данных и синхронизацию, давайте запустим службу шлюза синхронизации и обновите JavaScript Page для автоматической синхронизации. Я буду использовать эту настройку конфигурации для шлюза синхронизации.

{
    "log":["*"],
    "databases": {
        "example": {
            "server":"walrus:",
            "users": {
                "GUEST": {
                    "disabled": false,
                    "admin_channels": ["*"]
                }
            }
        }
    },
    "CORS": {
        "Origin": ["http://127.0.0.1:8801"],
        "LoginOrigin": ["http://127.0.0.1:8801"],
        "Headers": ["Content-Type"],
        "MaxAge": 17280000
    }
}

У нас есть базовая конфигурация, которая установит соединение с примерной базой данных и использует опцию хранения в памяти (WALRUS), которая в производстве мы должны изменяться, чтобы указать на сервер CouchBase. Мы также добавили настройку, чтобы разрешить совместное использование ресурсов поперечного происхождения для нашего приложения, которое находится на другом порту (localhost: 8801). Теперь мы должны начать службу шлюза синхронизации, выполнив следующую команду в терминале

$ ./bin/sync_gateway my-config/phonebook-config.json

С помощью шлюза Sync начались мы должны обновить код для непрерывной синхронизации. Добавьте следующий код в index.js.

store.connect();

Вышеуказанный код говорит PUCCADB, чтобы начать непрерывную репликацию с удаленной базой данных. Как только мы перезагрузим нашу базу данных, данные, которые мы добавили на предыдущем шаге, будут автоматически синхронизироваться на сервере. Вы можете увидеть это, используя URL-адрес администратора Sync Gateway http://localhost: 4985/_ADMIN/DB/Пример Отказ

Заворачивать

Со всеми мы имеем сейчас, приложение хорошо работает в автономном хранилище данных и синхронизации в режиме реального времени. Вы можете запустить и тестировать, что работает, когда он работает, и в автономном режиме, а данные автоматически синхронизируются, а конфликты данных разрешаются автоматически. Мы использовали Walrus , магазин в памяти на шлюзе синхронизации, но для производства нам придется переключить его на URL нашего сервера CouchBase.

Ниже приведены некоторые GIF, которые показывают, как это работает онлайн и офлайн. Вы можете пойти в автономный режим, повернув офлайн Режим на Chrome!

Не стесняйтесь захватить Sourcecode здесь И дать ему снова!

Создание приложения образца

Выкладывая страницу

Add new contact

Contact List

Оффлайн-первые данные доступа/хранение

Синхронизация шлюза

Установка синхронизации шлюза

Заворачивать

Читайте ещё по теме: