Strapi для интернет-магазинов и мобильных приложений

Strapi — это open source Headless CMS, которая позволяет создавать и управлять контентом для веб и мобильных приложений, и других цифровых продуктов. Strapi основан на Node.js и использует стандартные API для доступа к данным, что делает ее универсальной и масштабируемой платформой.

В этой статье мы рассмотрим, как создать интернет-магазин или мобильное приложение с использованием Strapi. Мы рассмотрим следующие шаги:

Установка Strapi
Создание базы данных
Создание API

Важно помнить, что классическая Strapi — это самодостаточная система управления контентом, а не SaaS. Облачная версия Strapi Cloud была выпущена 1 марта 2023 года, поэтому она все еще находится в стадии разработки.

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

Для чего нужен Strapi?

Strapi можно использовать для создания различных типов цифровых продуктов, включая:

Интернет-магазины
Мобильные приложения
API-порталы
Онлайн медиа
Социальные сети

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

Strapi поддерживает следующие базы данных:

PostgreSQL
MySQL / MariaDB
SQLite
MongoDB (с выходом 4 версии Strapi MongoDB не поддерживается)

Чтобы выбрать подходящую базу данных для вашего проекта, необходимо учитывать следующие факторы:

Тип данных, которые вы будете хранить
Размер вашего проекта
Бюджет

Несколько дополнительных советов по выбору базы данных для Strapi:

Для небольших проектов SQLite может быть хорошим выбором.
Для проектов среднего размера PostgreSQL или MySQL / MariaDB могут быть хорошим выбором.
Если вы планируете использовать Strapi для хранения больших объемов данных, вам следует выбрать базу данных с высокой пропускной способностью и производительностью.
Если вы планируете использовать Strapi для хранения чувствительных данных, вам следует выбрать базу данных с сильной безопасностью.

Strapi маркетплейс

Strapi Marketplace — это официальный магазин плагинов и провайдеров для платформы Strapi. В магазине представлены плагины и провайдеры, созданные как Strapi Community, так и сторонними разработчиками.

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

Провайдеры Strapi позволяют подключить Strapi к внешним системам. Они могут использоваться для интеграции Strapi с CMS, CRM, ERP или другими системами.

В Strapi Market представлены плагины и провайдеры для различных целей, включая:

Контент: плагины для создания, управления и публикации контента
Аналитика: плагины для сбора и анализа данных о контенте
Маркетинг: плагины для продвижения контента
Безопасность: плагины для защиты контента
Плагины для добавления дополнительных функций и возможностей

Установка и настройка Strapi, Postgres на Ubuntu

Первым шагом мы установим Node.js и npm (Node Package Manager). Они необходимы для запуска Strapi.

Установка Node.js и npm

Откройте терминал и выполните следующие команды:

sudo apt update

sudo apt install nodejs npm

Проверьте установку, запустив команды:

node -v npm -v

Установка PostgreSQL

Теперь установим PostgreSQL, который будет использоваться в качестве базы данных для Strapi.

Установите PostgreSQL, выполнив следующие команды:

sudo apt install postgresql postgresql-contrib

После установки PostgreSQL вам нужно создать базу данных и пользователя. Запустите команды:

sudo -u postgres psql

Затем внутри интерактивной оболочки PostgreSQL выполните следующие команды, чтобы создать базу данных и пользователя:

CREATE DATABASE mystrapidb;

CREATE USER mystrapidbuser WITH PASSWORD 'mypassword';

ALTER ROLE mystrapidbuser SET client_encoding TO 'utf8';

ALTER ROLE mystrapidbuser SET default_transaction_isolation TO 'read committed';

ALTER ROLE mystrapidbuser SET timezone TO 'UTC';

GRANT ALL PRIVILEGES ON DATABASE mystrapidb TO mystrapidbuser;

\q

Замените mystrapidb, mystrapidbuser и mypassword на свои значения.

Установка Strapi

Теперь мы установим Strapi с помощью npm.

В вашей рабочей директории создайте новую директорию для проекта Strapi:

mkdir mystrapiapp

cd mystrapiapp

Установите Strapi глобально, выполнив команду:

npm install -g create-strapi

Создайте новый проект Strapi, выполнив:

npx create-strapi@latest mystrapiapp (mystrapiapp – любое другое ваше название проекта)

Выберите базу данных PostgreSQL и введите данные для подключения к базе данных.
Дождитесь завершения процесса установки.

Запуск Strapi

Теперь мы готовы запустить Strapi.

В корневой директории вашего проекта выполните следующую команду:

npm run start

Откройте браузер и перейдите по адресу http://localhost:1337/admin, чтобы войти в административный интерфейс Strapi.

Пример приложения

Теперь, когда у нас есть API, мы можем создать веб-сайт или мобильное приложение для доступа к нашим данным.

Для создания веб-сайта мы можем использовать любой фреймворк, например React, Vue или Angular.

Для создания мобильного приложения мы можем использовать любой SDK, например React Native или Flutter.

Пример front-end на React

Вот пример веб-сайта, который использует Strapi для создания интернет-магазина:

// index.js

import React from "react";
import ReactDOM from "react-dom";
import ProductList from "./components/ProductList";

const App = () => {
  return (
    <div>
      <ProductList />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Эта страница отображает список продуктов из нашей базы данных.

Пример мобильного приложения

Пример мобильного приложения, которое использует Strapi для создания интернет-магазина:

// App.js

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import ProductList from "./components/ProductList";

const App = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchProducts = async () => {
      const response = await fetch("/api/products");
      const data = await response.json();
      setProducts(data);
    };
    fetchProducts();
  }, []);

  return (
    <div>
      <ProductList products={products} />
    </div>
  );
};

export default App;

Это приложение отображает список продуктов из нашей базы данных.

Пример: Github, docs.strapi.io

Плюсы и минусы Strapi

Плюсы:

Open-source
Бесплатный
Отличный API
Масштабируемый
Универсальный

Минусы:

Требуется базовые знания Node.js
Может быть сложно настроить для сложных приложений

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

Ссылки: Strapi, Strapi Marketplace