Как создать блог с использованием airtable в качестве базы данных

В этом посте я хочу попробовать, как можно создать систему управления блогом, используя airtable в качестве базы данных. Airtable идеально подходит для создания и управления контентом. Его легко запустить, а возможности безграничны! Мы будем использовать react, NextJS в качестве фронтенда и tailwindcss для CSS. Мы также будем использовать git для хранения всего нашего кода в GitHub и развертывания его в Vercel. Продолжайте читать, чтобы узнать, как создать свой собственный блог!

Сначала я написал этот пост в свой собственный блог, и хочу опубликовать его здесь тоже.

Вы можете посмотреть весь код в репозитории GitHub: https://github.com/yunuserturk/airtable-blog.

Вот демонстрация конечного результата: https://airtable-blog-ruby.vercel.app/.

Что такое Airtable?

Airtable — это облачная платформа «все в одном», которая сочетает в себе мощь традиционной базы данных и гибкость электронной таблицы. Вы можете использовать Airtable для хранения данных, отслеживания проектов и совместной работы с членами команды.

Почему tailwindcss, react и nextJS?

Tailwind — это CSS-фреймворк, ориентированный на утилиты, который предлагает низкоуровневый, атомарный подход к созданию интерфейсов. Другими словами, он предоставляет вам исходные строительные блоки (утилиты), необходимые для создания дизайна, без каких-либо собственных стилей.

NextJS — это фреймворк React, который упрощает создание приложений React с рендерингом на стороне сервера. Он легкий и быстрый, а также очень эффективен для сайтов с большим количеством страниц, что делает его идеальным для создания статических сайтов и блогов.

Создание приложения NextJS

Самый простой способ начать работу с Next.js — использовать create-next-app.

Создайте проект в VS Code, откройте терминал и выполните команду npx create-next-app.

Это наше первое приложение. Сначала мы отредактируем index.js и создадим главную страницу блога, а после этого создадим страницу с постами.

Я создаю очень простой пользовательский интерфейс с помощью tailwindcss;

<main>
  <div className="container mx-auto w-full sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-6/12 p-4">
    <h1 className="font-bold text-2xl">Welcome to my blog</h1>
    <div className="flex flex-col p-5 rounded-lg border-2 border-gray-200 mt-10">
      <h2 className="text-xl font-bold">Post Title</h2>
      <div>Post Content will be here</div>
      <span className="text-sm mb-6">Post Date</span>
    </div>
  </div>
</main>

Airtable в качестве базы данных

Главная страница нашего блога готова, и нам нужна airtable в качестве базы данных. Я создал документ airtable под названием myblog и буду использовать эти 3 колонки: заголовок, содержание и дата.

Как мы можем получить данные из airtable?

У Airtable есть хороший документированный API-сервис. https://airtable.com/api.

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

У Airtable есть пакет npm для разработки. Сначала мы установим его в нашем проекте. Откройте терминал и выполните этот код npm install airtable. После установки пакета airtable я создал файл в разделе компонентов под названием getPosts.js, который предназначен для получения данных из airtable.

import Airtable from "airtable";

const AirtableBase = new Airtable({ apiKey: process.env.NEXT_PUBLIC_API_KEY });
const AirtableBase_ = AirtableBase.base(process.env.NEXT_PUBLIC_API_BASE);

const table = AirtableBase_.table("myblog");
let posts = [];

const getPosts = async () => {
  posts = await table.select({}).all();
  const posts_ = posts.map((post) => {
    return {
      id: post.id,
      title: post.fields.title,
      content: post.fields.content,
      date: post.fields.date,
    };
  });

  return posts_;
};

экспортировать getPosts по умолчанию;
Вы должны изменить имя таблицы airtable и переменные API.

Теперь нам нужно создать страницу поста для показа одного поста. Создали [posts].js в папке pages. И создал эскизный пользовательский интерфейс для постов. На данный момент я создал страницы постов с идентификаторами постов. Но это не лучшая практика, я изменю эту функцию, когда буду реализовывать SEO-функции.

Вот как выглядит [posts].js после фетч-кодов airtable.

export default function post({ post }) {
  return (
    <main>
      <div className="container mx-auto w-full sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-6/12 p-4">
        <h1 className="font-bold text-2xl">{post.title}</h1>
        <span className="text-sm">{post.date}</span>
        <img src="https://picsum.photos/800/200" alt="random image" className=" max-w-full" />

        <div dangerouslySetInnerHTML={{ __html: marked(post.content) }} className="mt-10"></div>
      </div>
    </main>
  );
}

export async function getStaticPaths() {
  const posts = await getPosts();
  const paths = posts.map((post) => ({
    params: {
      post: post.id,
    },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const posts = await getPosts();
  const post = posts.find((post) => post.id === params.post);
  return {
    props: {
      post,
    },
    revalidate: 1,
  };
}

Когда вы создаете ячейку с насыщенным текстом в airtable, airtable предоставляет вам данные в формате markdown. Это замечательно для нас, но мы должны сделать некоторые уточнения, чтобы отобразить это гладко. Сначала я установил пакет под названием marked, он поможет нам исправить это. Откройте терминал и выполните команду npm install marked. Как вы можете видеть в коде, мы должны вызвать пакет и использовать его для данных о содержимом блога. Это отлично работает; <div dangerouslySetInnerHTML={{ __html: marked(post.content) }} className="mt-10"></div>.

Развертывание и результат

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

Вы можете посмотреть весь код в репозитории Github: https://github.com/yunuserturk/airtable-blog.

Вот демонстрация конечного результата: https://airtable-blog-ruby.vercel.app/