Автор оригинала: Peter Mbanugo.
В этом руководстве я собираюсь показать вам, как создать приложение, которое работает как онлайн, так и в автономном режиме (когда пользователь отключен из Интернета) с капюшоном.
Введение в толстовку
Капюшон это библиотека с открытым исходным кодом, которая предусматривает синхронизацию и вне форума. С капюшоном вы можете быстро построить веб-приложения, не беспокоясь о задней части, а не вне форума. Капюшон тезисы от задней части и предоставляет дружелюбное API для вас в ваших приложениях. Вы можете думать об этом как о бэкере для вашего приложения. Его оффлайн-первые возможности позволяет пользовательским данным доступен с подключением или без подключения к Интернету. Данные пользователей хранятся локально по умолчанию и синхронизированы с сервером позже, что делает ваши данные, в конечном итоге, согласованным. Это обрабатывается Hoodie автоматически и интеллектуально, поэтому ваши приложения доступны и используются независимо от состояния подключения пользователей.
Это хорошо для быстрого здания в автономном режиме отзывчивых веб-приложений, не беспокоясь о управлении бэкэндами или данными. Если вы боясь Backend работать как DEV Frontend, то Hoodie – ваш приятель
За кулисами Hoodie делает это возможным, используя Couchdb Для хранения данных на сервере Pouchdb Для хранения данных в браузере и Node.js, который является фактическим сервером, который обрабатывает синхронизацию данных между клиентом и сервером. Данные отправляются в хранилище данных клиента через API Hoodie.Store, а затем в CouchDB. И если есть и другие клиенты, которые у пользователя открыты приложения, обновление данных получено из них, синхронизировано с сервером, а затем нажимает обновления другим подключенным клиентам. Чтобы более глубокий посмотрите, как это работает, Следуйте по этой ссылке Отказ
Что мне нужно развивать на вершине толстовки
Работать с капюшоном, вам нужно установить Node.js Отказ Если вы планируете развернуть приложение для производства, рекомендуется использовать Couchdb , но это не требуется для развития.
Другие инструменты либо входят в виде пакетов, которые вы устанавливаете через NPM или работаете с клиентского устройства (E.G. Browser), например, LocalStorage/PouchDB.
Создание приложения
Теперь давайте начнем с создания приложения. Таким образом, я пойду через некоторые основные концепции капюшонов, изучая, как с ним работать. Мы будем создавать очень простое веб-приложение для телефонной книги, которое позволяет пользователям сохранять контакты и увидеть список сохраненных контактов.
Создание проекта и добавление толстовки
Чтобы начать, откройте командную строку и перейдите в каталог, который вы хотите хранить файлы для этого приложения.
$ cd ~/apps/hoodie-phonebook
Теперь нам нужен Package.json Файл, и мы создадим это с помощью NPM, который по умолчанию поставляется с узлом. Это спросит нам вопросы, а затем создать Package.json для нас. Если у вас уже есть файл package.json, он прочитал, что сначала прочитает и по умолчанию для параметров там. Поэтому запустите следующую команду и нажмите Enter, когда задают любой вопрос, просто чтобы оставить ответ на по умолчанию:
npm init
Теперь у нас есть это, давайте перейдем к установке толстовки с использованием NPM. Запустите следующую команду:
npm install hoodie --save
Пока мы наблюдаем, что эта команда выполняется, мы видим все то, что устанавливается.
Установка также установит сценарий «Пуск» для «Hoodie». Это говорит NPM для запуска сервера Hoodie, когда мы запускаем NPM начать команда Отказ Это так, наш файл package.json должен быть похож на следующее:
{
"name": "hoodie-phonebook",
"version": "1.0.0",
"description": "a simple phonebook application for managing contacts",
"main": "index.js",
"scripts": {
"start": "hoodie",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Peter Mbanugo",
"license": "ISC",
"dependencies": {
"hoodie": "^24.2.5"
}
}
И каталог проекта должен просто иметь node_modules Папка (и в ней есть пакеты, установленные из NPM), а также Package.json Отказ
Теперь давайте запустим приложение, запустив NPM начать Отказ Вы заметите, что страница проявляется, рассказывая нам, что у нас есть отсутствующая папка и некоторые другие детали. Это приводит нас к следующему шагу, что понимает, как должны быть структурированы приложения Hoodie. Так что остановите сервер сейчас и давайте перейдем к этому.
Структура проекта Hoodie
Давайте посмотрим на то, как проект Hoodie организован в терминах Организации файлов и каталогов.
Публичная (папка)
Вот где живет приложение. Он включает в себя обычный index.html и все активы приложения. Если вы в задачах, таких как Grunt или Glp, именно здесь вы поставили свой сборник. Hoodie не заботится о том, что еще вы добавляете в эту папку, поэтому не стесняйтесь бросать в свою исходную папку, тесты, дополнительную документацию или все, что вам нравится.
На данный момент иди и добавьте публичный папка и внутри нее папка называется Активы Отказ
node_modules (папка)
Это где NPM держит все его файлы. Hoodie использует его для управления своими плагинами и зависимостями, и вы можете использовать его также для управления зависимостями в вашем приложении. Эта папка была добавлена, когда мы установили NPM Hoodie. Это просто папка, которая удерживает двоичные файлы для пакетов, добавленных через NPM. Есть важные моменты для заметок об этой папке.
Не редактируйте содержимое этой папки вручную, потому что если вы сделаете, всякий раз, когда вы устанавливаете или обновляете зависимости, файлы там будут перезаписаны. Использовать
NPMвносить изменения в этот файл, если это необходимо.Не добавляйте эту папку в контроль источника. Пакеты могут быть восстановлены всем, просто запустив
NPM установитькоманда.
Package.json.
Каждое приложение Node.js нуждается в этом файле Отказ Он содержит важную информацию для приложения Node.js, например, указывая зависимости для приложения, его содержание также определяет, что входит в node_modules Папка мы говорили о ранее. Если вы помните, у нас уже есть в корневом каталоге нашего приложения. Используется для установки и объявления используемых версий Hoodie Server И плагины с капюшоном, которые использует приложение. Смотрите часть нашего файла:
.......
"dependencies": {
"hoodie": "^24.2.5"
}
. Доступность (папка)
Клиент Hoodie хранится здесь после того, как он будет динамически создан, а также файлы базы данных или конфигурацию вашего приложения. С помощью этого типа настройки мы можем переместить приложение, и это данные в другую систему и все еще у него работают. Или если вы удалите эту папку, вы получите новый воссозданный автоматически.
Добавление пользовательских файлов и папок
Скончав основные потребности и просматривая некоторые важные вещи, мы переходим к добавлению файлов и настраивая приложение так, как мы этого хотим.
Давайте перейдем к добавлению index.html Файл в общую папку и добавьте ссылку на jQuery и bootstrap. Контент должен выглядеть похожим на то, что у меня ниже:
My Hoodie App
Внутри Активы Папка, добавить JS Папка и в нем есть файл называется index.js. Этот файл будет содержать наш код JavaScript для манипулирования домом. Добавьте ссылку на этот файл внутри файла HTML.
My Hoodie App
Затем добавьте ссылку на клиент Hoodie.
My Hoodie App
/hoityie/Client.js Загружается динамический клиент Hoodie для вашего сервера Hoodie. Он генерируется автоматически по бэкэнде и доступен для вашего приложения. Его содержание зависит от вашего приложения Hoodie и генерируется на основе конфигурации в сервере Hoodie. Когда вы запускаете приложение, он генерируется и размещен в ./.hyieede/ папка. Содержимое в этой папке генерируется Backend Hoodie, они также включают в себя другие плагины с капюшоном, которые могут быть использованы для расширения функций Coolie Core. Клиент Hoodie – это способ для нас взаимодействовать с капюшоном в клиенте через API Client Client. Этот клиент также говорит с сервером Hoodie, и они оба знают, как они могут волшебными руками вместе, чтобы сохранить все ваши данные в синхронизации. Поговорить с капюшоном в клиенте, есть глобальный объект, который вы можете получить доступ через окно. Доступность или просто капюшон И с этим вы получаете доступ к API Client Client.
Давайте обновим содержание нашего индекса, чтобы включить разметку для добавления и просмотра контактов. У меня будет раздел для добавления новых контактов, а другой для просмотра списков контактов в табличной форме и все будет находятся на той же странице. Я держу вещи в Barest минимум, и не желая делать какие-то трюки CSS. Ниже приведена моя разметка, которая может быть похоже на ваши:
My Hoodie App
Add new contact
Contact List
Name
Mobile
Email
Теперь мы добираемся до забавной части, где мы на самом деле взаимодействуем с капюшоном. Давайте откроем index.js И добавьте код, чтобы собрать контактные данные и сохранить его в магазин Hoodie. Магазин Hoodie – это то, где данные хранятся для каждого пользователя. В капюшоне у каждого пользователя есть своя собственная база данных, и это потому, что Hoodie работает одной базой данных на модели пользователя. Таким образом, у каждого пользователя есть своя база данных на своем устройстве и другое на сервере. Затем Coverie Client и сервер Hoodie Coniday связываются друг с другом, чтобы сохранить данные в обоих местах в синхронизации, все происходящие под капотом, без ваших пользователей, заметив, если сервер активен или нет.
Давайте сделаем шаг назад и посмотрите на API Coverie Client в резюме. API CLEAND CLEAND CLEAD CLEAN CLEAN CLEAD находится подразделен наборы сфокусированы по-разному. У нас есть:
Основная API : Что определяет функциональность объекта Base Hoodie, имеет пару полезных помощников методов, и устанавливает конечные точки, которые он использует для взаимодействия с Bookend Hoodie.
Аккаунт API : Это позволяет вам управлять учетной записью пользователя. Сказав, что он работает над одной базой данных на одну пользовательскую модель, это через этот API он распознает пользователям и управлять данными для каждого зарегистрированного пользователя. У вас есть API для регистрации, войти в систему и выйти пользователей. Теперь мы знаем, что Hoodie позволяет вашему приложению работать в автономном режиме, но для того, чтобы сохранить синхронизированные данные каждого пользователя между устройствами, они должны быть подписаны. Если вы используете приложение без регистрации и/или внутри, вы анонимный пользователь, Ваши данные будут сохранены локально в вашем браузере, и они все равно будут там, когда вы перезагружаете страницу. Но они не будут спасены на сервер, и вы не сможете увидеть их из-за чего-либо еще. Они также исчезнут навсегда, когда вы очищаете свой магазин браузера. Как только вы подписываетесь в приложении Hoodie, Hoodie постоянно старается сохранить ваши пользовательские данные синхронизацией между сервером и любым клиентом, в котором пользователь может быть включен в.
Магазин API : Это обеспечивает средства для хранения и извлечения данных для каждого отдельного пользователя.
ConnectionStatus API : Это предоставляет помощникам для подключения. С этим вы можете сказать, когда приложение подключено к серверу, отключено или пытается подключиться. Есть доступные события, которые вы можете слушать и реагировать соответственно на основе требований вашего приложения. Во многих случаях пользователи просто не заботятся, если они подключены или не так долго, как работает приложение.
Журнал API : Это обеспечивает хорошее API для регистрации всех вещей
Теперь давайте перейдем к сохранению контакта к магазине Hoodie, когда пользователь нажимает кнопку. Открыть index.js и добавьте следующее:
$('#contactForm').submit(function(event) {
// prevent page reload
event.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
// Save the contact to the database with Hoodie
hoodie.store.add({
name: name,
mobile: mobile,
email: email
});
var newContact = '' + name + ' ' + mobile + ' ' + email + ' С помощью этого кода мы получаем значения на наших полях ввода и сохраняем их в базу данных с помощью метода Добавить из API API Hoodie Store. Затем мы излучаем новые собранные данные на страницу и сбросьте Форма Отказ Запустите сервер, запустив NPM начать И откройте страницу в браузере и добавьте несколько записей. Чтобы проверить, если это работает и фактически сохраняет в базе данных, мы запросим магазин непосредственно с помощью окна консоли браузера. Введите следующий код и увидите, что он возвращает имена контактов, которые вы добавили ранее.
hoodie.store.findAll().then(function(contacts) {
contacts.forEach(function (contact) { console.log(contact.name) }); });
Findall Метод является частью API Coldie Client Store ( Проверьте эту страницу для списка других доступных методов ), который извлекает все записи в магазине. Этот метод, а также другие, возвращают обещания много любят то, что вы используете, если вы программировали в JS. Чтобы показать, что данные сохраняются в автономном режиме, даже если сервер опустится, мы остановим сервер и добавьте несколько контактов, а затем запускаем запрос для восстановления всех контактов. Вы заметите, что контакты были сохранены и все еще доступны на клиенте. Но проблема в том, что когда мы очищаем магазин браузера или переходите к другому браузеру в одном устройстве, данные недоступны, и это потому, что с капюшоном текущий пользователь анонимный, и его данные не сохраняются на сервере или синхронизированные способы, когда мы на нескольких устройствах.
Чтобы разрешить такую способность возможности, нам нужно войти в систему (или зарегистрироваться, если вы еще нешли), чтобы капюшон через учетную запись Hoodie. Есть методы API для выполнения этих вещей, и они доступны через Hoodie.account Отказ Перемещение, мы изменим нашу навигацию, чтобы включить кнопку, которая при нажатии, создаст новую учетную запись, войти или выйти. Мы обновим элемент Nav-Bar со следующей разметкой
И к нашему файлу сценария мы добавляем код, чтобы сделать его показать кнопку выхода, когда пользователь включен, и запись входа или входа в систему, когда они нет.
if (hoodie.account.isSignedIn()) {
$('#username').text('signed in as ' + hoodie.account.username);
$('#authenticated').show();
$('#anonymous').hide();
} else {
$('#authenticated').hide();
$('#anonymous').show();
}
Мы просто проверим, чтобы узнать, что пользователь будет включен, знаете их имя и кнопку (которая при нажатии, подписывает их) отображается, когда они уже включены, а также кнопки для регистрации и входа в систему, когда они не. Настоящим мы продолжаем реагирование на запрос пользователя на основе какой кнопки, которую они нажали. Добавьте следующий код для обработки этого сценария:
$('#signup').click(function (event) {
signUp();
});
$('#signin').click(function (event) {
signIn();
});
$('#signout').click(function (event) {
signOut();
});
if (hoodie.account.isSignedIn()) {
showAuthenticated();
} else {
showAnonymous();
}
function signUp() {
var username = prompt('username');
var password = prompt('password');
hoodie.account.signUp({
username: username,
password: password
})
.then(function() {
return hoodie.account.signIn({
username: username,
password: password
});
})
.then(function() {
showAuthenticated();
})
.catch(function(errror) {
alert('Ooops, something went wrong: ' + error.message);
})
}
function signIn(){
var username = prompt('username');
var password = prompt('password');
hoodie.account.signIn({
username: username,
password: password
})
.then(function() {
showAuthenticated();
})
.catch(function(error) {
alert('ooops: ' + error.message);
});
}
function signOut(){
hoodie.account.signOut()
.then(function() {
showAnonymous();
})
.catch(function(error) {
alert('ooops: ' + error.message);
});
}
function showAuthenticated(){
$('#username').text('signed in as ' + hoodie.account.username);
$('#authenticated').show();
$('#anonymous').hide();
}
function showAnonymous(){
$('#authenticated').hide();
$('#anonymous').show();
}
Просмотр кода выше, вы можете посмотреть, как я использовал учетную запись API для обработки аутентификации в приложение. Теперь, если мы попытаемся войти в систему с неправильным пользователем, мы получаем ошибку. И когда мы зарегистрируемся, это создает аккаунт и подписывает нас. Теперь иди и зарегистрируйтесь. После этого вы записались. Откройте новый браузер и войдите в этот браузер. В моменте мы ничего не увидим на странице, но если мы откроем консоль и используем метод нахождения в магазине Hoodie, как мы сделали ранее, мы получим добавленные данные из другого браузера. Но если мы подписываемся, мы не получаем данных.
Давайте пойдем вперед и изменим наш код, чтобы загрузить контакты после загрузки страницы для подписанного пользователя.
// when the site loads in the browser,
// we load all previously saved contacts from hoodie
loadContacts();
function loadContacts() {
hoodie.store.findAll().then(function(contacts) {
var tbody = '';
$.each(contacts, function (i, contact) {
var row = '' + contact.name + ' ' + contact.mobile + ' ' + contact.email + ' Теперь у нас есть работа аутентификации, и пользователи могут видеть те же данные в любом устройстве, когда они входятся в систему, но они не увидят вновь добавленные данные от других клиентов, если они не перезарядутся страницы. Чтобы преодолеть эту головную боль, мы постучаем в потрясающие синхронизирующие возможности капюшонов. Как только вы вписались в приложение Hoodie, Hoodie постоянно старается сохранить данные пользователя в синхронизации между сервером и любым клиентом, в котором пользователь может быть включен в. Для этого я буду использовать механизм событий в Hoodie, чтобы динамически модифицировать страницу, когда в магазине добавляется новые данные, и это будет реагировать на обе локальные изменения от клиента, так и входящих изменений с сервера во время синхронизации.
Давайте откроем скрипт и удалите раздел кода, который добавляет новую строку в таблицу HTML. Теперь он должен выглядеть так:
$('#contactForm').submit(function(event) {
// prevent page reload
event.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
// Save the contact to the database with Hoodie
hoodie.store.add({
name: name,
mobile: mobile,
email: email
});
$('#contactForm')[0].reset();
});
Таким образом, он звонит только в магазине API для сохранения данных. Затем мы создаем новый метод, который принимает контактный объект в качестве параметра, и это мы будем использовать для изменения нашей страницы, чтобы добавить новый контакт на страницу. Кроме того, мы будем слушать Hoodie, когда данные добавляются, а затем вызовите этот новый метод, мы добавляем. Добавьте следующий код:
// when a new entry is added to the database, run the corresponding function
hoodie.store.on('add', addNewContactToList);
function addNewContactToList(contact) {
var newContact = '' + contact.name + ' ' + contact.mobile + ' ' + contact.email + ' С Hoodie.Store.on («Добавить», AddnewcontactTolist) Мы подписываемся на Add Event, а там другие типы событий, как Удалить Отказ Вы можете слушать разные типы событий, проверьте Док для большего. Учебный магазин также имеет ту же концепцию, и вы можете увидеть события, которые вы можете прослушать здесь а также способы доступны для учетной записи API.
Все вместе наши файлы теперь выглядят так с точки зрения контента: index.html.
My Hoodie App
Add new contact
Contact List
Name
Mobile
Email
index.js.
$('#contactForm').submit(function(event) {
// prevent page reload
event.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
// Save the contact to the database with Hoodie
hoodie.store.add({
name: name,
mobile: mobile,
email: email
});
$('#contactForm')[0].reset();
});
$('#signup').click(function (event) {
signUp();
});
$('#signin').click(function (event) {
signIn();
});
$('#signout').click(function (event) {
signOut();
});
if (hoodie.account.isSignedIn()) {
showAuthenticated();
} else {
showAnonymous();
}
// when the site loads in the browser,
// we load all previously saved contacts from hoodie
loadContacts();
//when a new entry is added to the database, run the corresponding function
hoodie.store.on('add', addNewContactToList);
function loadContacts() {
hoodie.store.findAll().then(function(contacts) {
var tbody = '';
$.each(contacts, function (i, contact) {
var row = '' + contact.name + ' ' + contact.mobile + ' ' + contact.email + ' ' + contact.name + ' ' + contact.mobile + ' ' + contact.email + ' Чтобы увидеть наш синхронизацию в действии, откройте два разных браузера, войдите в них обоих и добавляют данные из каждого. Вы заметите, что изменения реплицируются на обоих. Теперь, чтобы увидеть магию в автономном режиме, выключить сервер и добавьте новые данные с каждого клиента. Запустите сервер снова и посмотрите, что произойдет. Там вы идете! Я уверен, что вы видели магию, теперь у нас есть приложение, которое перекрестное устройство и работает в автономном режиме, все с меньшими хлопотами.
Обертывание
Я оставлю вас с задачей добавления функциональности удаления и обновления контактов. Вы можете найти больше функций магазина API здесь и аккаунт API Отказ
Вы можете найти образец того, что мы построили до сих пор в этом руководстве на Github , и вы можете использовать его в качестве отправной точки, чтобы добавить функциональность (обновить и удалить контакт) и играть с кодом.
С капюшоном приложения не должны нарушать только потому, что они в автономном режиме, и капюшон сделал это легко для вас реализовать. Если у вас есть какие-либо вопросы, оставьте комментарий, Tweet @ Доступность Присоединяйтесь к сообщество (Кодеры, редакторы, организаторы событий и т. Д.) Или способствуют.
До следующего раза, у меня есть превосходный момент!
Другие учебники, которые вас могут быть заинтересованы в:
- Как использовать файлы JSON в Node.js
- Создайте кроссплатформенное приложение с Visual Studio
- Пользовательские Infobox этикетки с API Google Maps
- Отправка push-уведомлений на андроид с firebase