Тренинг на хакатоне: часть 3

После разработки и внедрения базы данных Firebase Realtime мы немедленно переходим к интерфейсному кодированию для создания, чтения, обновления и удаления данных (CRUD).

Эта статья является продолжением серии, посвященной быстрым и простым решениям общих требований приложений.

В отличие от многих других серверных сред, Firebase Realtime Database предоставляет API (доступный из внешнего интерфейса) для взаимодействия с ней. Это означает, что можно избежать большей части стандартного (предоставляющего REST API) внутреннего кода.

Начиная с предыдущего авторизованного примера Facebook, мы добавим функцию сохранения данных при изучении API Firebase Realtime Database.

Заполните базу данных

Однако, прежде чем мы сможем читать данные, нам нужно заполнить базу данных. Хотя вы можете загружать данные JSON из консоли приложения, я обычно использую живой редактор. Есть что-то странно приятное в наличии прямого доступа к данным.

Безопасность базы данных по умолчанию позволяет любому авторизованному пользователю читать / записывать данные из / во все дерево. Опять же, этого достаточно для нашего проекта хакатона; только не забудьте применить безопасность перед тем, как ее выпустить.

Прочитать

Хотя чтение из Firebase Realtime Database API довольно хорошо задокументировано, вот некоторые основные моменты:

При чтении пути в дереве возвращаются все дочерние элементы; одна из причин, по которой структура данных должна оставаться плоской.
Чтение может быть выполнено один раз, например, с использованием REST API, или настроено на дополнительное выполнение при изменениях.
Существуют специализированные методы чтения списков данных.

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

read.html

<button id="auth__logout">Logout</button>
<ul id="auth__folders">
</ul>
...
var logoutEl = document.getElementById('auth__logout');
var foldersEl = document.getElementById('auth__folders');
...
var auth = firebase.auth();
var database = firebase.database();
var foldersRef = database.ref('folders');
...
auth.onAuthStateChanged(function(user) {
  if (user) {
    startListening();
    ...
  } else {
    stopListening();
    ...
  }
});
...
// LISTEN FOR DATABASE CHANGES
function startListening() {
  foldersRef.on('child_added', function(data) {
    var folder = data.val();
    var folderEl = document.createElement('li');
    folderEl.appendChild(document.createTextNode(folder.name));
    foldersEl.appendChild(folderEl);
  });
}
// END LISTEN FOR DATABASE CHANGES
function stopListening() {
  foldersRef.off('child_added');
}
...

Создать

Как и чтение, запись в Firebase Realtime Database API довольно хорошо документирована (тот же документ, что и чтение), вот некоторые основные моменты:

Запись пути заменяет данные, включая дочерние.
Запись может работать, когда приложение отключено.
Существуют специализированные методы для написания списков данных; в частности, автогенерирующие идентификаторы.

В этом примере мы добавляем возможность создавать папки (с автоматически сгенерированными идентификаторами). Чтобы включить эту функцию, мы обновляем коды следующим образом:

примечание: этот код (как и большинство примеров из этой серии) намеренно упрощен для иллюстрации общих понятий. Не готов к производству, например, не учитываются ошибки обработки и т. Д.

create.html

..
<button id="auth__logout">Logout</button>
<form id="auth__create">
  <input type="text" id="auth__create__name"></input>
  <input type="submit" value="Create"></input>
</form>
<ul id="auth__folders">
..
var foldersEl = document.getElementById('auth__folders');
var createEl = document.getElementById('auth__create');
var createNameEl = document.getElementById('auth__create__name');
...
logoutEl.addEventListener('click', function() {
  auth.signOut();
});
// CREATE
createEl.addEventListener('submit', function(e) {
  e.preventDefault();
  var name = createNameEl.value;
  createNameEl.value = '';
  foldersRef.push({
    name: name,
  });
});
// END CREATE

Обновить / удалить

Первоначально я предполагал создать простые примеры для иллюстрации обновления и удаления данных. Проблема, однако, в том, что без интерфейсного фреймворка код, на мой взгляд, получился слишком беспорядочным.

Новый план состоит в том, что я создам полный пример приложения CRUD после того, как представлю интерфейсную структуру в следующей статье. Спойлер-предупреждение ... Интерфейсной структурой будет React.

Если подумать о модели данных файлов и папок, удаление папок вносит некоторую сложность. Когда вы удаляете папку, вам также необходимо удалить все содержащиеся в ней файлы. Простая реализация этого заключалась бы в том, чтобы интерфейс запускал все команды удаления (этого достаточно для проекта хакатона).

Проблема, однако, в том, что использование внешнего интерфейса для выполнения ряда команд, которые должны быть атомарными (выполняются все или ни одна из команд), создает значительный риск повреждения данных. Более элегантное решение - использовать Облачную функцию для обработки удаления содержащихся файлов.

Дальнейшие действия

В следующей статье из серии Обучение на хакатоне: Часть 4 мы рассмотрим использование интерфейсного фреймворка.

Тренинг на хакатоне: часть 3

Вопросы по теме