Цель этого руководства — за считанные минуты настроить стек (Jam) для вашего веб-приложения.

Чтобы увидеть, что мы будем делать с помощью этого урока, посмотрите живую демонстрацию

Стек:
Airtable для работы в качестве бессерверной базы данных
React: JavaScript UI framework
Netlify: Сборка, развертывание и CI/CD с помощью Github
Функции Netlify: Бессерверные вычисления
Идентификация Netlify: Вход/Регистрация

Настройка аэростола

В базе данных airtable эквивалентами являются базы. В каждой базе может быть несколько таблиц.
1. Зарегистрируйте бесплатную учетную запись
2. Создайте новую «базу» (начните с нуля)
3. Определите две новые таблицы для хранения тем обсуждения и комментарии

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

Таблица 1: Темы

id: Autonumber
topic: Single line text
name: Single line text

Таблица 2: Комментарии

id: Autonumber
comment: Long text
discussion_id: Number (Integer(2))
name: Single line text

Примечание. Имена таблиц/столбцов чувствительны к регистру.

вы делаете это, переходите на https://airtable.com/api и выбираете свою базу и вуаля, вы увидите документацию по API для вашей базы и таблиц.

В правом верхнем углу есть флажок, чтобы показать ваш ключ API. Нажмите на это, и вы увидите свой ключ API в выделенном тексте на скриншоте и ваш базовый идентификатор, такой как base («baseId»).

Примечание. API-интерфейсы Airtable на данный момент имеют ограничение скорости всего 5 запросов в секунду, что делает его непригодным для таких приложений, как доска обсуждений. В качестве альтернативы вы можете использовать фаунуDB или DynamoDB для таких случаев использования.

Настройка проекта:

Чтобы быстро настроить проект, клонируйте репозиторий. Создайте файл .env, содержащий следующие переменные среды.

AIRTABLE_API_KEY=<YOUR_API_KEY>
AIRTABLE_BASE_ID=<YOUR_BASE_ID>

Бессерверные функции:

В корневом каталоге репозитория вы увидите файл netlify.toml. Он содержит информацию, которую netlify прочитает, чтобы понять, где находятся наши бессерверные функции, и некоторые правила перенаправления для нашего веб-сайта.
Наши функции netlify хранятся в папке functions корневого каталога. Вы увидите файл dboard.js, который определяет единственную бессерверную функцию, которую мы собираемся использовать.

Ждать! Вам может быть интересно, будем ли мы выполнять множество операций для доски обсуждений, таких как получение/создание тем и получение/публикация комментариев. Почему только одна бессерверная функция?

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

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

вспомогательная папка здесь содержит фактические функции и некоторые утилиты, необходимые для нашей функции dboard
- dboard.js вызывает нужную функцию, необходимую для определенного события
- airtable.js подключается к вашей базе и экспортирует объекты для ваших таблиц
- утилита formattedReturn.js, которая форматирует тело ответа
- остальные файлы js соответствуют каждой операции

После того, как вы это сделаете, ваш бессерверный API будет готов к использованию в вашем интерфейсе, но как вы его протестируете?
Netlify предоставил для этого интерфейс командной строки. Сделайте следующее

npm install -g netlify-cli
netlify dev

Эта красивая команда делает для нас несколько вещей:
Запускает бессерверные функции
Запускает веб-сервер для вашего сайта
Создает прокси-сервер для внешнего интерфейса и бессерверных функций, чтобы общаться друг с другом через порт 8888.

Примечание. Мы можем использовать /api/* для нашего API из-за конфигурации перенаправления в файле netlify.toml.

Теперь перейдите по адресу http://localhost:8888/api/dboard/topics, и вы увидите список тем, если вы определили их в своем airtable.

Ознакомьтесь с коллекцией postman, которая определяет все API, созданные с помощью бессерверной функции здесь.

Вызов API из кода React:

Выбор тем:

const loadTopics = async () => {
  setLoading(true);
  try {
     const res = await fetch(‘/api/dboard/topics’);
     const topics = await res.json();
     setTopics(topics);
     setLoading(false);
  } catch (error) {
     console.error(error);
  }
};

Оставлять комментарии:

try {
   await fetch(‘/api/dboard/comment/’ + currTopic.id, {
     method: ‘POST’,
     body: JSON.stringify({
     comment,
     name
   }),
 });
 resetForm();
 refreshComments();
} catch (err) {
 alert(“An error occurred while adding comment”);
}

Развертывание на Netlify

1. Создайте учетную запись netlify, если у вас ее нет здесь
2. Нажмите кнопку Новый сайт из git, выберите свой репозиторий и ветку
3. Напишите команду сборки и имя издательский каталог

Build command: `CI= npm run build`
Publish directory: `build`

Нажмите на дополнительные параметры сборки и установите там переменные среды:

Затем нажмите «Развернуть», чтобы начать развертывание.

Вуаля! Вы закончили развертывание сайта. Netlify сгенерирует общедоступный URL-адрес для предварительного просмотра вашего сайта.

Бонус: Netlify Identity

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

Я создал реагирующий компонент NetlifyIdentity в папке /src/components проекта. Просто поместите этот компонент в свой маршрутизатор app.js, как показано ниже.

<Router>
 <NetlifyIdentity/>
 <Route exact path=’/’ component={Home} />
 <Route exact path=’/discussion/:id’ component={Discussion} />
</Router>

Вырезанный выше код инициализирует идентификацию netlify глобальным объектом netlifyIdentity
, как только ваше приложение будет загружено.

Теперь вы можете открыть экран входа в систему одним нажатием кнопки или любым другим действием, используя window.netlifyIdentity.open()

Текущего пользователя можно получить с помощью window.netlifyIdentity.currentUser()

Чтобы узнать больше о сетевой идентификации, см. Это.

Если вам нужна дополнительная информация по определенным шагам, пишите в комментариях. С удовольствием расскажу подробнее.

Удачного программирования!