А то синхронизация его раз есть!
Эта статья, как и многие другие, теперь на моем новом сайте. Этот можно найти в здесь.
Как я упоминал в своей предыдущей статье, я активно работал над приложением для сбора данных, которое будет использоваться археологами на юго-западе США. Из-за уникальных требований, предъявляемых к приложению, которое должно использоваться посреди пустыни без подключения к Интернету, я смог изучить довольно много новых альтернативных способов выполнения определенных задач.
Обзор
В этой статье я расскажу вам о создании простой формы Angular, локальном сохранении данных формы и, наконец, о том, как отправить данные после установления соединения.
Настройка формы
Прежде всего, вам понадобится проект Angular. Готовый туториал и настройку можно найти здесь. Вы можете пропустить эту начальную часть, если добавляете эту форму в существующий проект.
Примечание. При включении библиотек в свой проект убедитесь, что загружен фактический файл (например, angular.js), а не какой-либо CDN — ваше приложение должно работать в автономном режиме, и вызов CDN завершится ошибкой.
Для начала у нас будет базовый app.js, который будет содержать весь наш код Angular, и index.html, который будет содержать весь HTML-код.
Отсюда мы будем строить форму. Мы собираемся сделать простой инструмент для сбора данных о птицах. Если вы идете по лесу, изучая виды животных, вы не всегда сможете подключиться к Интернету, в зависимости от вашего местоположения.
Вы можете видеть, что я добавил data-ng-model к каждому входу. Мне нравится, когда все мои входные модели находятся в родительском объекте с именем $scope.formData для упрощения управления и отправки.
Далее мы создадим и обновим код нашего контроллера, чтобы он содержал объект formData, а также две функции:
$scope.save будет обрабатывать сохранение в локальном хранилище, а $scope.sync будет обрабатывать отправку в службу при наличии подключения к Интернету.
Для этого мы выполним следующие шаги:
- Заполните форму и отправьте
- Строковать данные формы
- Сохранить строку в локальном хранилище с уникальным идентификатором
- При подключении к Интернету проанализируйте записи localStorage обратно в JSON.
- Отправить данные формы
Сохранить функцию
LocalStorage хранит информацию в строковых парах ключ-значение. Каждая строка в объекте localStorage будет соответствовать отправке формы. Это упрощает синтаксический анализ позже, потому что мы просто прокручиваем каждую строку и отправляем.
Пользователи Chrome: чтобы увидеть, что находится в localStorage, откройте консоль разработчика, перейдите на вкладку «Приложение», а затем нажмите «Локальное хранилище» на левой боковой панели в разделе «Хранилище».
Сейчас он пуст и должен выглядеть примерно так:
В функции сохранения ниже происходит несколько вещей. Во-первых, мы определяем переменную stringCopy и свойство lcKey для $scope.formData. Поскольку localStorage (lc) работает только со строками, нам нужен строковый ключ и строковое значение. ключ может быть любым уникальным идентификатором — в данном случае я использую метку времени. значение — это строковая копия отправленного объекта formData.
Приятно иметь встроенную проверку при работе с JSON.parse и JSON.stringify. Если при синтаксическом анализе строкового JSON это недопустимый JSON, будет выдано исключение. Вы можете избежать этих проблем с нарушением кода, используя блок try-catch и обработав ошибку.
stringCopy = JSON.stringify($scope.formData);
Это займет объект formData ниже:
{
beakColor: "black",
commonName: "blue bird",
featherColor: "blue",
size: "small"
}
и превратить его в это:
'{"commonName":"blue bird","size":"small","beakColor":"black","featherColor":"blue"}'
Затем мы устанавливаем это в localStorage с отметкой времени в качестве ключа. Это должно выглядеть так:
Поздравляем, вы сохранили свою первую офлайн-запись. LocalStorage не имеет срока действия и будет сохраняться до тех пор, пока вы не очистите его (например, очистив файлы cookie или набрав localStorage.clear();).
Парсинг localStorage и сохранение на сервер
Сохранив еще несколько записей и вернувшись из нашего приключения по наблюдению за птицами, мы хотим синхронизировать их с базой данных и очистить наше локальное хранилище. Мы использовали JSON.stringify для помещения данных в localStorage, а теперь воспользуемся JSON.parse, чтобы вернуть их обратно.
Во-первых, нам нужно добавить вторую кнопку для обработки синхронизации локально сохраненных данных с сервером:
Затем есть встроенный объект window.navigator, который содержит свойство onLine, которое истинно, если вы подключены. В примере мы просто проверим это перед отправкой.
Если вы хотите, чтобы ваше приложение автоматически проверяло наличие соединения и автоматически синхронизировалось, вы можете поместить эту проверку в Angular $watch.
В приведенной выше функции fetchAll мы преобразовываем строковые записи localStorage в массив объектов formData. Мы вызовем эту функцию ниже, в функции submit.
Убедившись в наличии соединения, мы просматриваем все записи в массиве и отправляем их по отдельности. Мы делаем это, потому что, если одна из них выходит из строя, она все равно продолжается до следующей записи. В случае успеха он удаляется из localStorage, чтобы освободить место для новых записей формы. В случае неудачи запись останется в localStorage. Это обеспечивает постоянство данных.
Окончательные полные файлы должны выглядеть так:
Это очень простая форма, и я знаю, что она может быть довольно сложной. Я рекомендую добавить как можно больше проверки данных и визуальных предупреждений. Например, если два POST-запроса прошли успешно, а один нет, сообщите об этом пользователю с помощью простых для понимания сообщений. Они могут попытаться повторно отправить форму или двигаться дальше. Главное не потерять данные, а также знать, где хранятся ваши записи в любой момент.
Вывод
Таким образом, мы взяли базовую форму, преобразовали ее в пары ключ-значение localStorage, а затем проанализировали ее обратно в JSON и отправили в службу после обнаружения соединения.
Спасибо за внимание! Это часть серии, которую я делаю в своем приложении для сбора данных о акоме. Заходите позже, чтобы узнать больше.
