Создание блога с помощью React и RestDB

Используйте RestDB для хранения статей и React для внешнего интерфейса вашего блога.

При создании приложений, которым требуется серверная часть, мы тратим много времени на настройку сервера и базы данных, написание API-интерфейсов, с помощью которых внешний интерфейс может отправлять и получать данные на серверную часть и из нее. С RestDB вы можете легко раскрутить сервер и создать базу данных. Каждая коллекция базы данных поставляется с конечными точками Rest API для выполнения операций CRUD в базе данных, и, конечно же, вы можете добавить дополнительные коллекции. В этой статье мы узнаем, как работает RestDB, создав приложение блога с React, используя RestDB для хранения статей блога.

Что такое RestDB?

RestDB (также известная как restdb.io) – это простая онлайн-база данных NoSQL с автоматическими API и обработчиками javascript с минимальным кодом. По сути, с RestDB вы получаете готовую к использованию базу данных с автоматическими API, которые вы можете использовать для выполнения операций CRUD в базе данных. RestDB полностью устраняет сложность создания сервера и написания конечных точек для основных операций CRUD. Есть много причин, по которым разработчикам программного обеспечения следует рассмотреть возможность использования RestDB.

Простота в использовании: с помощью RestDB вы можете определить схему для своих данных и добавить коллекции и описания для своих моделей.
Это бесплатно для команд: вы можете предоставить доступ людям из вашей команды в зависимости от их потребностей и уровней доступа.
С RestDB вы получаете не только базу данных. Вы также можете легко связать базу данных с доменом вашей веб-страницы.

Это другие базы данных NoSQL, такие как RestDB, такие как Google Firebase, Amazon DynamoDB, Azure Cosmos DB, Amazon DocumentDB и другие. Эти альтернативы также предоставляют простые в использовании и полностью управляемые облачные базы данных, такие как RestDB, с некоторыми другими дополнительными функциями, такими как совместимость с MongoDB (Amazon DocumentDB), возможность интеграции с базой данных SQL (Azure Cosmos DB) и т. д. Подробнее об альтернативах RestDB здесь: 5 мощных альтернатив REST API.

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

Создание блога с помощью React и RestDB.

Для начала клонируем репозиторий с Github. Этот репозиторий содержит начальные файлы проекта (компоненты) и некоторые конфигурации/настройки. Для этого откройте терминал командной строки и выполните приведенную ниже команду.

git clone https://github.com/Origho-precious/RestDB-blog-starter.git

После клонирования перейдите в папку проекта и установите зависимости, запустив yarn install или npm install. В этом проекте я уже добавил некоторые компоненты и конфиги. У нас есть настройка tailwind для стилей, react-router-dom для навигации, для рендеринга стилей уценки мы будем использовать react-markdown и два его плагина: remark-gfm и rehype-raw. Давайте быстро пробежимся по компонентам, которые у нас есть в проекте.

Button — это простой компонент Button с двумя вариантами.
Navbar — этот компонент показывает название блога и кнопку, которая перенаправляет страницу, где мы можем создать сообщение, и кнопку, чтобы вернуться на домашнюю страницу.
PreviewPost — этот компонент отображает тело сообщения с react-markdown. Мы будем использовать это на странице написать, чтобы просмотреть, как выглядит основная часть статьи.

У нас также есть три вспомогательные функции в src/utils/helperFunctions.js,

truncateText будет использоваться для усечения текстов, чтобы они не выходили за пределы своих родительских элементов.
calcReadTime рассчитывает время чтения статьи, используя количество слов, содержащихся в теле статьи, и показатель 200 слов в минуту.
convertDate преобразует временные метки в определенный формат данных, используя moment.

Наконец, в src/page есть три папки с index.jsx файлами. Файлы в каждом пока просто отображают абзацы, но мы обновим их позже в этой статье.

Далее давайте создадим учетную запись RestDB, настроим базу данных и подключим к ней наше приложение.

Создание учетной записи RestDB

Перейдем на официальную веб-страницу RestDB.

Нажмите на кнопку «Получить учетную запись». Это приведет вас на страницу, где вы можете зарегистрироваться.

После регистрации и подтверждения своей учетной записи (если вы не используете параметры регистрации Google или Facebook) вы увидите страницу, подобную приведенной ниже.

Ура!! Вы создали свою учетную запись RestDB. Далее давайте создадим базу данных для нашего приложения блога. Для этого нажмите кнопку «Создать новый» в правом верхнем углу страницы. Он откроет модальное окно, подобное приведенному ниже, где мы можем ввести имя базы данных или даже скопировать существующую базу данных. Но мы создадим новый здесь. Поэтому введите то, что вы хотите назвать базой данных; Я назову своего restblog.

Мы только что создали нашу первую базу данных RestDB. Вы должны увидеть такой экран.

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

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

Когда вы нажмете на этот значок, вы должны увидеть экран, подобный этому,

Я знаю, что это выглядит не очень ясно, и вы можете спросить, почему у нас есть эти вещи, если мы не создали никакой коллекции в базе данных. Когда вы создаете базу данных в RestDB, она автоматически создает коллекцию «пользователей», а также создает другие коллекции для электронных писем и т. д. В этой статье мы не будем обрабатывать аутентификацию. Давайте просто добавим коллекцию статей нашего блога.

Для этого нажмите на кнопку «Добавить коллекцию». Я назову коллекцию articles. Также добавьте описание (хотя это необязательно) и сохраните.

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

Здесь мы будем добавлять поля (модели для созданной нами коллекции). Нажмите на кнопку «Добавить поле», чтобы начать.

Вы увидите экран, подобный приведенному выше. Мы создадим четыре поля:

title — это будет заголовок статьи.
body — содержание статьи.
теги — технологии, используемые в статье, например. react, react-router-dom и т.д. это будет необязательно.
timestamp — время публикации статьи.

Вот Github gist, содержащий то, что нам нужно для создания каждого поля.

Если вы добавили поля после таблицы выше, вы должны увидеть что-то вроде этого.

Теперь мы успешно создали учетную запись RestDB, создали базу данных, коллекцию в этой базе данных для статей блога. Мы также добавляем модели в коллекцию. Далее нам нужно подключить наше приложение React к этой базе данных, чтобы мы могли добавлять, удалять или редактировать статьи в базе данных.

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

Нажмите «Инструменты API», чтобы открыть страницу, подобную этой.

Нажмите на ссылку в разделе «Создать Swagger REST API», чтобы открыть документы swagger. Вы увидите автоматически сгенерированные конечные точки для коллекций в документации Swagger.

Нам понадобится ключ API, чтобы иметь доступ к базе данных из нашего приложения. Вернитесь к ссылке документов Swagger и нажмите «Ключи API», и вы увидите это.

Нажмите «Управление ключами API». Вы будете перенаправлены на новую страницу, которая должна выглядеть так, как показано ниже.

Давайте добавим новый ключ API для нашего проекта, нажав на кнопку «Добавить новый». Появится модальное окно.

Добавьте описание и выберите тип HTTP-запроса, который мы хотим, чтобы этот ключ API поддерживал. Как видно выше, я выбрал GET, POST, DELETE и PATCH. Сохраните и скопируйте сгенерированный для вас ключ API. Вы можете увидеть мои ниже.

Скопируйте ключ API и перейдите к клонированному проекту. В корневом каталоге создайте файл .env. В нем добавляем ключ API в таком формате,

REACT_APP_API_KEY=${YOUR_API_KEY}

ПРИМЕЧАНИЕ. Не используйте мой ключ API, поскольку я удалю его к тому времени, когда вы будете это читать. 😂

Теперь с помощью ключа API мы можем вернуться в наш редактор кода и завершить работу над приложением.

Создание экземпляра Axios с пользовательскими конфигурациями

Давайте создадим экземпляр axios с некоторыми настройками. Для этого нам нужно будет добавить базовый URL-адрес конечных точек, с которыми мы столкнемся, мы также добавим некоторые заголовки (например, наш ключ API), поэтому нам не нужно добавлять их во все запросы. Начнем с установки axios с yarn add axios или npm install axios. Установив Axios, давайте перейдем к src/utils и добавим новый файл api.client.js с приведенным ниже кодом.

import axios from "axios";
export default axios.create({
  baseURL: "https://restblog-dced.restdb.io/rest",
  headers: {
    "Content-Type": "application/json",
    "x-apikey": process.env.REACT_APP_API_KEY,
    "cache-control": "no-cache",
  },
});

Мы создали экземпляр axios с базовым URL-адресом и пользовательскими заголовками. С его помощью мы будем делать все HTTP-запросы, которые нам понадобятся в этом приложении.

Создание компонента PostForm

В этом разделе мы создадим компонент, с помощью которого мы можем создать статью и сделать запрос POST, чтобы добавить ее в нашу базу данных RestDB. Мы также сможем редактировать статью с помощью этого компонента. В папке components внутри src создайте новую папку с именем PostForm и файл внутри нее PostForm.jsx и добавьте приведенный ниже код.

import { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import axios from "../../utils/api.client";
const PostForm = ({ state, id, setArticleBody }) => {
  const history = useHistory();
  const [data, setData] = useState(null);
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [tags, setTags] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
useEffect(() => {
    if (id) {
      const fetchArticles = async () => {
        setLoading(true);
        try {
          const { data } = await axios.get(`/articles/${id}`);
          setData(data);
          setTitle(data?.title);
          setBody(data?.body);
          setArticleBody(data?.body);
          setTags(data?.tags);
          setLoading(false);
        } catch (error) {
          console.log(error);
          setLoading(false);
        }
      };
      fetchArticles();
    }
  }, [id, setArticleBody]);
const postArticle = async () => {
    if ((title, body)) {
      setLoading(true);
      setError("");
      try {
        await axios.post(
          "/articles",
          JSON.stringify({
            title,
            body,
            tags,
            timestamp: new Date().toISOString(),
          })
        );
        return history.push("/");
      } catch (error) {
        setLoading(false);
        setError("Something went wrong!");
        return console.log(error);
      }
    }
    setError("Title and Body fields can't be empty!");
  };
const editArticle = async () => {
    if ((title, body)) {
      setLoading(true);
      setError("");
      try {
        await axios.patch(
          `/articles/${id}`,
          JSON.stringify({
            ...data,
            title,
            body,
            tags,
          })
        );
        return history.push("/");
      } catch (error) {
        setLoading(false);
        setError("Something went wrong!");
        return console.log(error);
      }
    }
    setError("Title and Body fields can't be empty!");
  };
const onSubmitHandler = (e) => {
    e.preventDefault();
    if (state !== "edit") {
      return postArticle();
    }
    return editArticle();
  };
...

Выше мы импортировали несколько зависимостей, а затем создали состояния для значений ввода и текстовой области, используя useState. Мы также инициализировали хук useHistory для получения объекта history.

Этот компонент имеет три реквизита:

state — это будет либо «добавить», либо «редактировать». Мы будем знать, будем ли мы редактировать статью или создать новую с этим.
id — это будет null, если состояние равно «редактировать». Если идентификатор не нулевой/неопределенный, мы используем его для получения сведений о статье, которую хотим отредактировать.
setArticleBody - эта функция отправит содержимое тела статьи на страницу, где будет использоваться этот компонент, чтобы компонент PreviewPost мог его использовать.

Мы добавили useEffect, и внутри него мы используем реквизит id для получения сведений о статье, которую мы хотим отредактировать, сделав HTTP-запрос с id. Затем мы устанавливаем значения в соответствующие состояния, чтобы заполнить ими входные данные и текстовую область.

Далее идет функция postArticle. В этой функции мы проверяем, имеют ли состояния title и body значения. Если нет, мы вызываем ошибку, так как эти поля необходимы для создания статьи. В противном случае мы делаем POST-запрос на сервер RestDB, отправляя строковый объект, содержащий title, body, tags (если есть) и timestamp статьи: все поля, которые мы создали в базе данных. timestamp устанавливается на время создания статьи, преобразованной в формат ISO. Ниже находится функция редактирования статьи, похожая на функцию postArticle, за исключением того, что она делает запрос PATCH на сервер с id статьи.

Функция onSubmitHandler передается форме и вызывает функцию editArticle или postArticle в зависимости от state.

Давайте закончим этот компонент кодом ниже, чтобы визуализировать некоторые jsx в стиле tailwind.

...
return (
    <form
      onSubmit={!loading ? onSubmitHandler : () => {}}
      id="post-article"
      className="w-full"
    >
      <h2 className="mb-6 text-2xl font-bold text-center">
        {state === "add" ? "Add New Blog Post" : "Edit Mode"}
      </h2>
      <div className="w-full">
        <input
          id="title"
          type="text"
          value={title}
          onChange={(e) => {
            setError("");
            setTitle(e.target.value);
          }}
          placeholder="Enter the article's title"
          disabled={id && loading && true}
        />
      </div>
      <div className="w-full my-6">
        <input
          id="tags"
          type="text"
          value={tags}
          onChange={(e) => setTags(e.target.value.trim())}
          placeholder="(Optional) Tags e.g javascript, typescript "
          disabled={id && loading && true}
        />
      </div>
      <div className="w-full">
        <textarea
          id="body"
          onChange={(e) => {
            setError("");
            setBody(e.target.value);
            setArticleBody(e.target.value);
          }}
          value={body}
          placeholder="Write post content. You can use markdown syntax here"
          disabled={id && loading && true}
        />
      </div>
      {error && <p className="text-red-600 text-xs mt-3 -mb-1">{error}</p>}
    </form>
  );
};
export default PostForm;

Повтор сеанса с открытым исходным кодом

OpenReplay — это альтернатива FullStory и LogRocket с открытым исходным кодом. Это дает вам полную наблюдаемость, воспроизводя все, что ваши пользователи делают в вашем приложении, и показывая, как ваш стек ведет себя для каждой проблемы. OpenReplay размещается на собственном сервере для полного контроля над вашими данными.

Удачной отладки для современных клиентских команд — начните бесплатно отслеживать свое веб-приложение.

Создание компонента ArticleCard

Давайте создадим компонент, который будет отображать сведения о статье, обрабатывать функции удаления и направлять пользователя на страницу редактирования статьи. В src/components создайте новую папку ArticleCard и файл с именем ArticleCard.jsx внутри нее, добавьте в файл приведенный ниже код.

import { Link, useHistory } from "react-router-dom";
import {
  calcReadTime,
  convertDate,
  truncateText,
} from "../../utils/helperFunctions";
import axios from "../../utils/api.client";
const ArticleCard = ({ id, title, body, timeStamp, tags, refresh }) => {
  const history = useHistory();
  const handleDelete = async () => {
    const confirmed = window.confirm(
      "Are you sure you want to delete this article?"
    );
    if (confirmed) {
      try {
        await axios.delete(`/articles/${id}`);
        refresh && refresh();
      } catch (error) {
        console.log(error);
      }
    }
  };
return (
    <Link to={`/article/${id}`}>
      <div
        title={title}
        className="flex flex-col justify-between bg-black h-48 py-10 px-12 rounded-md hover:bg-gray-900 transition-all duration-700 relative"
      >
        <div className="absolute top-4 right-6 flex justify-end">
          <span
            className="mr-5 hover:text-white"
            onClick={(e) => {
              e.preventDefault();
              handleDelete();
            }}
            role="button"
          >
            <i className="fas fa-trash" />
          </span>
          <span
            className="hover:text-white"
            onClick={(e) => {
              e.preventDefault();
              history.push(`/write/${id}`);
            }}
            role="button"
          >
            <i className="fas fa-pencil-alt" />
          </span>
        </div>
        <div>
          <h3 className="font-bold text-2xl mb-4">{truncateText(title, 37)}</h3>
          <div className="flex">
            {tags?.map((tag, idx) => (
              <p key={tag + idx} className="mr-4 opacity-80 text-white text-sm">
                #{tag.trim()}
              </p>
            ))}
          </div>
        </div>
        <div className="flex items-center justify-between">
          <p>{convertDate(timeStamp)}</p>
          <p>{calcReadTime(body)}</p>
        </div>
      </div>
    </Link>
  );
};
export default ArticleCard;

Компонент выше имеет пять реквизитов;

id - id отрисовываемой статьи, нужен для удаления и редактирования статьи
title, body, timeStamp, tags - свойства статьи.
refresh - функция, которая будет вызываться при каждом удалении статьи для обновления страницы, тем самым извлекая обновленный список статей с сервера.

У нас есть функция, которая отправляет запрос DELETE на сервер с id для удаления статьи. Мы отображаем детали статьи, усекая заголовок с помощью truncateText и отображая время и дату чтения с помощью calcReadTime и convertDate соответственно.

Далее мы обновим компонент страницы write.

Создание статей из приложения

В этом разделе мы обновим страницу write, чтобы она могла обрабатывать создание статей из приложения с компонентом PostForm, который мы создали ранее. Этот компонент также будет обрабатывать редактирование статьи, используя тот же компонент PostForm, ожидая параметр id. Перейдите к src/pages/write/index.jsx и замените то, что там есть, кодом ниже.

import { useState } from "react";
import { useParams } from "react-router-dom";
import Button from "../../components/Button/Button";
import PostForm from "../../components/PostForm/PostForm";
import PreviewPost from "../../components/PreviewPost/PreviewPost";
const Write = () => {
  const { id } = useParams();
  const [previewMode, setPreviewMode] = useState(false);
  const [articleBody, setArticleBody] = useState("");
return (
    <div
      className="px-20 py-8 relative text-white bg-black w-3/5 mx-auto rounded-lg"
      style={{ height: "85vh", maxHeight: "600px", overflowY: "scroll" }}
    >
      <div
        role="button"
        onClick={() => setPreviewMode(!previewMode)}
        className="absolute right-8 top-6 hover:text-opacity-50 flex items-center duration-500 rdb-preview"
        style={{ color: previewMode ? "#2eff7b" : "" }}
      >
        {previewMode ? (
          <p className="mr-3">Write</p>
        ) : (
          <p className="mr-3">Preview Body</p>
        )}
        {!previewMode ? (
          <i className="fas fa-eye" />
        ) : (
          <i className="fas fa-pencil-alt" />
        )}
      </div>
      <div style={{ display: !previewMode ? "block" : "none" }}>
        <PostForm
          setArticleBody={setArticleBody}
          id={id}
          state={id ? "edit" : "add"}
        />
        <footer className="mt-4">
          <Button form="post-article" type="submit" className="mr-6">
            Publish
          </Button>
        </footer>
      </div>
      <div style={{ display: previewMode ? "block" : "none" }}>
        <PreviewPost children={articleBody} />
      </div>
    </div>
  );
};
export default Write;

Во-первых, мы импортировали хуки и компоненты, которые нам понадобятся в этом файле. useParams поможет нам получить доступ к определенным сегментам URL-адреса страницы. В этом случае мы ожидаем, что специальный сегмент URL-адреса будет id (отметьте src/App.js).

Мы деструктурировали id из хука useParams в компоненте. У нас есть два государства. Один будет обрабатывать previewMode: мы будем использовать это состояние для переключения между отображением компонентов PostForm или PreviewPost. Второе состояние, articleBody, будет содержать содержимое статьи, установленное из PostForm. Затем мы визуализируем содержимое компонента.

Получение и визуализация статей

В этом разделе мы обновим src/pages/home/index.jsx статьи о загрузке файлов с сервера и отобразим их с помощью компонента ArticleCard. Для этого нам понадобится компонент ArticleCard, наш экземпляр Axios, useState для хранения ответа на HTTP-запрос (массив статей) и еще одно состояние для обновления страницы. Наконец, у нас есть useEffect для получения статей при отображении или обновлении страницы. Давайте сделаем это, заменив содержимое файла приведенным ниже кодом.

import { useEffect, useState } from "react";
import ArticleCard from "../../components/ArticleCard/ArticleCard";
import axios from "../../utils/api.client";
const Home = () => {
  const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState(false);
  const [refresh, setRefresh] = useState(false);
const fetchArticles = async () => {
    setLoading(true);
    try {
      const res = await axios.get("/articles");
      setArticles(res?.data);
      setLoading(false);
    } catch (error) {
      console.log(error);
      setLoading(false);
    }
  };
useEffect(() => {
    fetchArticles();
  }, [refresh]);
return (
    <section className="w-1/2 mx-auto">
      {loading ? (
        <p className="text-center">Loading...</p>
      ) : articles?.length ? (
        articles?.map((article) => (
          <article key={article?._id} className="mb-4">
            <ArticleCard
              id={article?._id}
              title={article?.title}
              tags={article?.tags?.split(",")}
              body={article?.body}
              timeStamp={article?.timestamp}
              refresh={() => setRefresh(!refresh)}
            />
          </article>
        ))
      ) : (
        <p className="text-center">No article, create post</p>
      )}
    </section>
  );
};
export default Home;

На данный момент мы написали несколько кодов для создания, редактирования и удаления статей. И последнее, что нужно сделать, это создать страницу для просмотра всего содержания статьи. ArticleCard не показывает тело/содержание статьи. Давайте сделаем это в следующем разделе.

Создание страницы статьи

Перейдите к src/pages/article/index.jsx и замените содержимое файла приведенным ниже кодом.

import { useEffect, useState } from "react";
import { useHistory, useParams } from "react-router";
import ReactMarkdown from "react-markdown";
import gfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import axios from "../../utils/api.client";
import { calcReadTime, convertDate } from "../../utils/helperFunctions";
const Article = () => {
  const params = useParams();
  const history = useHistory();
  const [loading, setLoading] = useState(false);
  const [article, setArticle] = useState(null);
useEffect(() => {
    if (!params?.id) {
      history.push("/");
    }
  }, [history, params]);
useEffect(() => {
    const fetchArticle = async () => {
      if (params?.id) {
        try {
          setLoading(true);
          const res = await axios.get(`/articles`, {
            params: {
              q: {
                _id: params?.id,
              },
            },
          });
          setArticle(res?.data[0]);
          setLoading(false);
        } catch (error) {
          setLoading(false);
        }
      }
    };
    fetchArticle();
  }, [params]);
return (
    <div className="w-4/5 mx-auto mt-16 mb-24">
      {loading ? (
        <p className="text-center">Loading...</p>
      ) : article ? (
        <>
          <header className="rounded-md bg-black mb-10 max-w-9/12 py-12 px-20">
            <h1 className="text-2xl text-center font-semibold uppercase">
              {article?.title}
            </h1>
            <div className="flex items-center justify-center">
              <p className="mt-4 text-sm text-center mr-8">
                {convertDate(article?.timeStamp)}
              </p>
              <p className="mt-4 text-sm text-center">
                {calcReadTime(article?.body)}
              </p>
            </div>
          </header>
          <>
            <ReactMarkdown
              className="prose"
              remarkPlugins={[gfm]}
              rehypePlugins={[rehypeRaw]}
              children={article?.body}
            />
          </>
        </>
      ) : (
        <h3>Article not found!</h3>
      )}
    </div>
  );
};
export default Article;

Выше мы добавили код в:

получить информацию о статье, используя идентификатор статьи (полученный из URL-адреса страницы),
визуализируйте title, tags и timestamp статьи правильно, используя необходимые вспомогательные функции, и визуализируйте body с react-markdown, поскольку он может содержать синтаксис уценки.

Пришло время протестировать приложение. В терминале запустите yarn start или npm run start, чтобы запустить сервер разработки. Вы должны увидеть такой экран.

Вы можете создавать, просматривать, редактировать и удалять сообщения. Не стесняйтесь настраивать код по своему усмотрению.

Выводы

Теперь мы полностью создали приложение для блога, используя React и RestDB, онлайн-базу данных NoSQL. В этой статье мы узнали, что такое RestDB и как ее использовать, создав учетную запись RestDB, настроив базу данных, добавив коллекцию в базу данных, добавив модели и определив для них схему. Мы также узнали, как сгенерировать ключ API и как сгенерировать документацию Swagger для сервера базы данных RestDB. И, наконец, мы смогли связать с ним наше приложение для блога.

Есть еще кое-что, что вы можете узнать о RestDB, обработке аутентификации, добавлении пользовательских маршрутов, использовании веб-хуков, хост-страниц и т. д. Чтобы узнать больше, посетите официальную документацию.

Ресурсы

Первоначально опубликовано на https://blog.openreplay.com 29 апреля 2022 г.