RSS Mentor Dashboard with Firebase

main.md

RSS Mentor Dashboard + Firebase = ❤️

Задача

Pеализовать дашборд ментора школы The Rolling Scopes. Исходные данные для визуализации храняться в Google Sheets и периодически изменяются. Аутентификация должна происходить через github аккаунт. Дашборд должен быть написан на React.

Cтек технологий:

• Google Scripts
• Firebase
  • Authentication
  • Hosting
  • Realtime Database
• React

План:

1. Используем Google Scripts для того чтобы из данных, которые находятся в Google Sheets, слепить JSON и отправить в Firebase Realtime Database
2. В Google Scripts ставим триггер чтобы скрипт отрабатывал тогда, когда произошло изменение в таблице
3. На вебсайтe подключаем Firebase и загружаем базу данных.
4. Передаем базу данных как props и отрисовываем дашборд по полученным данным

Optional

5. Настроить аутентификация через github аккаунт при помощи Firebase
6. Разместить приложение на Firebase Hosting при помощи Firebase CLI

1. Google Scripts + JSON 🚀

• Для последующих действий нам нужно иметь 'edit access' к таблицам с данным. Поэтому я сделал копию изначальных таблиц.

• Открываем таблицу с данными (любую). Затем открываем Script Editor

• Идем в Resources > Libraries

• Вставляем в инпут ключ библиотеки для работы с Firebase - MYeP8ZEEt1ylVDxS7uyg9plDOcoke7-2l

• Выбираем последнюю стабильную версию. Save.

• Далее начинается работа по созданию функции, которая генерирует JSON

  • Подключаем все три таблицы с данными используя id таблиц (находится в url)
  • Создаем переменную в которой будет финальный JSON
  • Далее происходит magic 🎆. Все будет зависить от вашей реализации, но главная цель - создать JSON, который мы потом отправим в Firebase

Как вы заметили, мой код не отличается особой новизной. Но это не потому, что я люблю олд-скул. Просто у меня были небольшие проблемы с моим оригинальным кодом, который я использовал для локальной генерации JSON из xlsx. Некоторые новые фичи не поддерживаются редактором. Поэтому я решил не рисковать и перевел почти все в более старый стандарт.

Хочу отметить, что в редакторе есть встроенный Debug, что очень удобно при разработке.

Итак, вы сгенерировали корректный JSON. Теперь надо его отправить в Firebase.

• Создаем аккаунт здесь и переходим в консоль

  • В консоле создаем проект и жмем сюда
  • Запоминаем databaseURL (можно записать)
  • Идем в Project Settings > Service Accounts > Database Secrets. Запоминаем (записываем / копируем) Secret
  • В Database Rules задаем следующие правила

  

• Возвращаемся в Google Scripts. Вставляем databaseURL и Secret. В .setData("JSONData", data) JSONData - это название корневого узла (появится под таким назанием в firebase), data - ваш сгенерированный JSON.

• Запускаем 🚀

• Если все сделано правильно, в Database должны появится данные

2. Automation 🤖

Итак, мы настроили передачу данных из Google Sheets в Firebase. Теперь нужно сделать так, чтобы данные в Firebase обновлялись автоматически при внесении изменений в любой из таблиц.

• В прошлом пункте мы настроили скрипт для одной из таблиц. Теперь нам нужно скопировать его и вставить в Script Editor для каждой из таблиц, чтобы при изменении любой из таблиц срабатывал скрипт. Все последующие действия нужно будет продублировать для всех таблиц с данными.

• Кликаем на current project's triggers

• Кликаем на Add Trigger. В модальном окне изменяем тип события, которое будет отслеживаться на 'On change'. Можно еще изменить настройки нотификации на более удобные для вас. Save.

• Теперь 🤖 будет следить за изменениями в таблицах и исправно отправлять свежий JSON в Firebase

3. Init Firebase 🔥

Теперь нам нужно инициализировать Firebase на вебсайте. Можно просто установить код который вы получили при создании проекта в консоле Firebase. Но я использовал официальную библиотеку из npm.

• Инициализируем Firebase

  • npm install --save firebase

  • Я создал класс Firebase в который добавил статические методы для работы с Firebase. Сейчас нам понадобится только FireBase.init();

  

  • Инициализируем Firebase в нашем корневом файле (App.jsx)

  

  • Как видно из скриншота выше, при рендеринге класса App в this.database сохраняется ссылка на узел JSONData, который мы создали в Google Scripts.

  • Далее, используя lifecycle method componentDidMount, настраиваем отслеживание изменений в базе данных и отправляем объект JSONData в стейт компонента.

  

  • Готово. 🔥

4. Using Database 🗄️

Во время выполнения таска и изучения доков по React, я с приятным удивлением обнаружил, что state может передаваться в виде props в другие компоненты. Таким образом, мы можем сделать общий state для всех компонентов и изменять его из любых компонентов.

Мы будем передавать базу данных в дочерние компоненты, которые отвечают за отрисовку дашборда. При изменениях в базе данных, state будет изменяться автоматически

Рассмотрим предачу database на примере компонента UserPicker:

• В корневом компоненте App передаем ссылку на базу данных из state в компонент NavBar в виде props

• В компоненте NavBar принимаем database как props и передаем его дальше в UserPicker

• В компоненте UserPicker принимаем database как props и записываем его в локальный state компонента.

• Далее мы можем использовать database для отрисовки компонента 🗄️

• Мой вариант дашборда вы можете найти здесь

Optional Part

5. GitHub Authentication via Firebase 👀

Используя Firebase, настроить аутентификацию не составляет особого труда.

• Первое что нужно сделать - это включить аутентификацию через github в вашем проекте в Firebase. Для этого идем в Authentication > Sign-in method > GitHub. Копируем callback URL

• Регистрируем GitHub OAuth App здесь. В поле Authorization callback URL вставляем callback URL из предыдущего пункта.

• После того как вы создали OAuth App на гитхабе, вам станут доступны Client ID и Client Secret (находятся в настройках приложения). Их нужно скопировать и вставить в соотвествующие поля в настройках провайдера аутентификации в Firebase.

• Теперь нам нужно реализовать аутентификацию на вебсайте. Как я это делал:

  • После того как пользователь ввел данные и вошел в свой аккаунт, мы получаем токен, который мы затем используем для обращения к API GitHub для получения юзернейма и ссылки на аватар пользователя. Далее мы обращаемся к текущему пользователю и обновляем информацию о нем (тк по дефолту, Firebase не хранит информацию об аватарке или юзернейм)

  • Мы можем использовать метод .onAuthStateChanged() для проверки того, является ли пользователь авторизованным. Если да, то мы отправляем в state объект с информацией об этом пользователе.

  • Далее можно использовать объект mentorDataObj для 'Conditional Rendering'. Если пользователь авторизован, то показываем компонент с информацией о пользователе. Если нет, то показываем кнопку Login.

Firebase Docs 👀

6. Firebase Hosting 💾

Раз уж мы используем Realtime Database и Authentication от Firebase, то почему бы нам не использовать Firebase Hosting вместо скучных gh-pages? Для этого мы будем использовать Firebase CLI. Размещение вашего приложения на Firebase Hosting будет осуществлено всего в несколько шагов:

• npm install -g firebase-tools
• firebase login
• firebase init
  • Выбираем 'Hosting'
  • Выбираем проект
  • Выбираем папку с билдом (dist)
  • single-page app? No
• firebase deploy 💾 🔥🔥🔥

Спасибо за внимание! Надеюсь, вы узнали что-то новое и полезное

Links

• Ссылка на репозиторий с исходным кодом проекта - https://github.com/uniorunr/mentor-dashboard

• Еще раз ссылка на мой дашборд, который получился в итоге - ссылка

• Ссылка на таблицу с исходными данными - данные

  • Попробуйте поменять статус для таска 'Mentor Dashboard'. Вы увидите, что через несколько секунд данные на дашборде также изменятся.

• Мой github - uniorunr