Как разработать приложение для социальных сетей?

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

Кроме того, мы рассмотрим, как создать социальную сеть шаг за шагом. Мы будем использовать Back4app для бэкенда и Next.js для фронтенда.

Что такое социальная сеть?

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

После установления связи два пользователя могут делиться информацией о себе, обмениваться сообщениями, изображениями, делиться постами и т. д.

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

• Facebook (2,96 миллиарда пользователей)
• YouTube (2,2 миллиарда пользователей)
• Instagram (2 миллиарда пользователей)
• TikTok (1 миллиард пользователей)
• Snapchat (500 миллионов пользователей)

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

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

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

Типы приложений для социальных сетей

Как уже говорилось в предыдущем разделе, социальная сеть – это всего лишь один из типов приложений для социальных сетей. Другими типами приложений для социальных сетей являются:

• Сети обмена медиафайлами (Instagram, TikTok, YouTube)
• Сети обмена контентом (Pinterest, Tumblr, Flickr)
• Сети потребительских отзывов (Trustpilot, Angi, Choice)
• Сети для ведения блогов и публикаций (Medium, Twitter)
• Дискуссионные форумы (Reddit, Quora, HackerNews)
• Сети отношений (Tinder, Bumble)

Преимущества разработки приложения для социальных сетей

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

Еще один плюс приложений для социальных сетей – их огромная стоимость при перепродаже. Если ваше приложение относительно успешно (то есть у него есть приличная база пользователей), вы можете быстро продать его другой компании. Например, Twitter был продан за 44 миллиарда долларов, а MySpace – за 87 миллионов долларов.

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

Обязательные функции приложения для социальных сетей

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

Учетные записи пользователей

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

Лучшее преимущество учетных записей пользователей с точки зрения бизнеса заключается в том, что вы можете создать “профиль пользователя”. Под “профилем пользователя” я имею в виду, что вы выясняете, что нравится конкретному пользователю и с кем он взаимодействует, а затем подбираете рекламу в соответствии с этим.

Подключение пользователей

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

Совместное использование контента

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

При создании приложения для социальных сетей следуйте лучшим практикам UI/UX. Опубликовать что-то должно быть так же просто, как нажать пару кнопок.

Поиск и обнаружение

Отличные алгоритмы поиска и обнаружения – неотъемлемая часть каждого успешного социального приложения.

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

Уведомления

Вам необходимо рассмотреть возможность внедрения push-уведомлений, чтобы повысить вовлеченность и увеличить использование приложения.

Push-уведомления – это мощный канал связи, который позволяет уведомлять пользователей о том, что что-то происходит, например, их друг написал сообщение, произошло событие, они давно не пользовались приложением и так далее.

Чтобы узнать больше о push-уведомлениях и о том, как интегрировать их в свой проект, прочитайте статью Что такое Push-уведомления?

Как сделать приложение для социальных сетей?

В этом учебном разделе мы рассмотрим, как шаг за шагом создать приложение для социальных сетей. Мы будем использовать Back4app в качестве бэкенда и React с фреймворком Next.js в качестве фронтенда.

Пререквизиты

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

• Опыт работы с JavaScript ES6.
• Опыт работы с React/Next.js и крючками React.
• Базовое понимание Backend as a Service (BaaS).
• Node.js v16+, установленный на вашей локальной машине, и редактор.

Что такое Back4app?

Back4app – это отличный low-code бэкенд для быстрого создания современных веб- и мобильных приложений. Он обладает множеством возможностей, включая базы данных в реальном времени, управление пользователями, функции Cloud Code, push-уведомления, социальные интеграции, API, SDK и многое другое!

Используя Back4app, вы можете передать на аутсорсинг большую часть работы с бэкендом и сосредоточиться на основной бизнес-логике и фронтенде.

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

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

Почему стоит использовать Back4app для создания социальной сети?

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

Введение в проект

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

На бэкенде мы будем использовать Back4app, а на фронтенде – React с фреймворком Next.js, чтобы создать приложение для социальных сетей.

Сначала мы создадим приложение Back4app, настроим модели баз данных, а затем перейдем к фронтенду.

На фронтенде нам нужно будет установить Parse SDK, настроить аутентификацию и поработать над конкретными представлениями, например, login, sign-up, profile.

Конечный продукт будет выглядеть так:

Создать приложение

Для дальнейших действий вам потребуется учетная запись Back4app. Если у вас его еще нет, создайте его бесплатно.

Когда вы войдете в свой аккаунт Back4app, перед вами откроется список приложений. Нажмите “Создать новое приложение”, чтобы начать процесс создания приложения.

Back4app позволяет создавать два типа приложений:

1. Бэкэнд как услуга (BaaS)
2. Контейнеры как услуга (CaaS)

BaaS – это полноценное бэкэнд-решение на базе Parse, а CaaS используется для развертывания контейнерных приложений с помощью Docker.

Поскольку мы создаем социальную сеть, мы будем использовать опцию “Backend as a Service”.

Далее дайте своему приложению описательное имя, выберите “NoSQL” в качестве базы данных и нажмите “Создать”.

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

Классы баз данных

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

Как вы могли заметить, два класса уже есть в базе данных. Первый называется User, а второй Role. По умолчанию все классы Back4app имеют следующие поля:

+-----------+-------------------------------------------------------------------------+
| Name      | Explanation                                                             |
+-----------+-------------------------------------------------------------------------+
| objectId  | Object's unique identifier                                              |
+-----------+-------------------------------------------------------------------------+
| updatedAt | Date time of the object's last update.                                  |
+-----------+-------------------------------------------------------------------------+
| createdAt | Date time of object's creation.                                         |
+-----------+-------------------------------------------------------------------------+
| ACLs      | Allow you to control the access to the object (eg. read, update).       |
+-----------+-------------------------------------------------------------------------+

Давайте немного изменим наш класс User, добавив поля description и avatarUrl. В дальнейшем пользователи смогут редактировать эти два поля в своих настройках.

Нажмите кнопку “+ Колонка” в правом верхнем углу экрана и добавьте следующие два поля:

+-----------+-------------+--------------------+----------+
| Data type | Name        | Default value      | Required |
+-----------+-------------+--------------------+----------+
| String    | description | Another cool user! | yes      |
+-----------+-------------+--------------------+----------+
| String    | avatarUrl   | <some_image_url>   | yes      |
+-----------+-------------+--------------------+----------+

Обязательно замените на реальный url изображения, заканчивающийся .png, .jpg или .jpeg. Если у вас нет идей, вы можете использовать этот вариант.

Далее создадим класс с именем Post. У каждого поста будет автор и некоторое текстовое содержимое.

Используйте кнопку “Создать класс” в верхней левой части экрана, чтобы начать процесс создания класса. Назовите его Post, сделайте его “Защищенным” и нажмите “Создать класс и добавить столбцы”.

Затем добавьте к нему следующие два столбца:

+-----------------+---------+---------------+----------+
| Data type       | Name    | Default value | Required |
+-----------------+---------+---------------+----------+
| Pointer -> User | author  | <leave blank> | yes      |
+-----------------+---------+---------------+----------+
| String          | content | <leave blank> | yes      |
+-----------------+---------+---------------+----------+

Безопасность базы данных Back4app

Что касается безопасности базы данных Back4app, есть два способа защиты классов и объектов. Мы можем выбрать один из следующих:

1. Разрешения уровня класса (CLPs)
2. Уровни управления доступом (ACL)

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

Чтобы узнать больше о безопасности Parse, ознакомьтесь со статьей Безопасность сервера Parse.

Мы хотим, чтобы только авторизованные пользователи могли создавать посты, и только автор поста мог их обновлять и удалять. Для этого мы настроим Post CLPs.

Выберите класс Post в боковой панели, затем нажмите на три точки в правом верхнем углу экрана и выберите “Безопасность > Разрешения уровня класса”. Установите CLP следующим образом:

Отлично, вот и все. Теперь наш бэкэнд готов. Это было не слишком сложно.

Код Frontend

В этом разделе статьи мы будем работать над фронтендом нашей социальной сети.

Проект “Инит

Начните с использования инструмента create-next-app для загрузки нового проекта Next.js:

$ npx create-next-app@latest back4app-social-network

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... No
√ Would you like to customize the default import alias? ... No

Created a new Next.js app in ~\back4app-social-network.

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

Проект Next.js по умолчанию содержит несколько “бесполезных” файлов и директорий. Чтобы уменьшить размер проекта, удалите следующие:

• папка pages/api
• папка стилей
• public/next.svg
• public/vercel.svg

Также не забудьте удалить импорт globals.css из pages/_app.js:

// pages/_app.js

import "@/styles/globals.css";  // remove this line

Затем замените содержимое pages/index.js на следующее:

// pages/index.js

export default function Home() {
  return (
    <>
      <p>Hello world!</p>
    </>
  );
}

Запустите сервер разработки Next:

$ next dev

Наконец, откройте веб-браузер и перейдите по адресу http://localhost:3000. Если все работает хорошо, ваше приложение должно скомпилироваться, и вы сможете увидеть сообщение “Hello world!”.

Настройка ChakraUI

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

Установите его с помощью NPM:

$ npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

Затем оберните ваш компонент с помощью ChakraProvider, как показано ниже:

// pages/_app.js

import {ChakraProvider} from "@chakra-ui/react";

function MyApp({Component, pageProps}) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

Не забудьте импортировать его в верхней части файла:

import {ChakraProvider} from "@chakra-ui/react";

Для корректной работы Chakra необходимо включить скрипт цветового режима. Этот скрипт обеспечивает правильную синхронизацию локального хранилища и устраняет “цветовые вспышки”.

Измените файл pages/_document.js следующим образом:

// pages/_document.js

import { Html, Head, Main, NextScript } from "next/document";
import {ColorModeScript, extendTheme} from "@chakra-ui/react";

export const theme = extendTheme();

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <ColorModeScript initialColorMode={theme}/>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Это все, что касается начальной настройки чакр.

Иконки React

Чтобы сделать наше приложение немного причудливее, мы установим react-icons. React icons – это библиотека, которая позволяет быстро включить популярные иконки в ваш проект. Она включает в себя иконки Ant, Bootstrap, Heroicons, Font Awesome и другие.

Установите его, запустив программу:

$ npm install react-icons --save

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

import {FaMusic} from "react-icons/fa";

return (
    <FaMusic/>
);

Список иконок можно найти в официальной документации.

Компоновка и компоненты

Большинство социальных сетей имеют стандартный макет. Все страницы имеют одинаковый верхний колонтитул и нижний колонтитул. Давайте реализуем наш макет.

Начните с создания папки с именем components в корне проекта. Затем создайте в ней эти файлы:

components/
├── header.js
├── footer.js
└── layout.js

Далее заполните файл header.js следующим образом:

// components/header.js

import NextLink from "next/link";
import {Box, Container, Divider, Heading, HStack, Link} from "@chakra-ui/react";

export default function Header() {
  return (
    <Box py={4}>
      <Container 
        maxW="container.lg" 
        display="flex" 
        alignItems="center" 
        justifyContent="space-between"
      >
        <Heading as="h1" size="md">
          <Link as={NextLink} href="/">
            back4app-social-network
          </Link>
        </Heading>
        <HStack spacing="1em">
          <Heading size="sm">
            <Link as={NextLink} href="/login">
              Log in
            </Link>
          </Heading>
          <Heading size="sm">
            <Link as={NextLink} href="/signup">
              Sign up
            </Link>
          </Heading>
        </HStack>
      </Container>
      <Divider my={4}/>
    </Box>
  );
}

Затем проделайте то же самое с файлом footer.js:

// components/footer.js

import NextLink from "next/link";
import {Box, Container, Divider, Heading,
  HStack, Link, Tag, Text, VStack} from "@chakra-ui/react";
import {FaGithub} from "react-icons/fa";

export default function Footer() {
  return (
    <Box py={4}>
      <Divider my={4}/>
      <Container
        maxW="container.lg"
        display="flex"
        justifyContent="space-between"
        alignItems="center"
      >
        <VStack alignItems="left">
          <Heading size="sm">
            A simple social network powered by Back4app.
          </Heading>
          <Link
            as={NextLink}
            href="https://blog.back4app.com/how-to-develop-a-social-media-app/"
          >
            Click here to learn how to build it!
          </Link>
        </VStack>
        <Link href="https://github.com/duplxey/back4app-social-network">
          <Tag background="black" color="white" py={2}>
            <HStack>
              <FaGithub size="1.5em"/>
              <Text>View on GitHub</Text>
            </HStack>
          </Tag>
        </Link>
      </Container>
    </Box>
  );
}

Здесь мало что можно объяснить. Мы использовали встроенные компоненты Chakra, чтобы сформировать красивые верхний и нижний колонтитулы. Поскольку мы используем Next.js, мы объединили Link из Chakra с Link из Next.

И наконец, используйте только что созданный компонент header и footer для формирования макета:

// components/layout.js

import {Container} from "@chakra-ui/react";
import Header from "@/components/header";
import Footer from "@/components/footer";

export default function Layout({children}) {
  return (
    <>
      <Header/>
      <Container maxW="container.lg">
        {children}
      </Container>
      <Footer/>
    </>
  );
}

Затем примените макет к index.js:

// pages/index.js

import Layout from "@/components/layout";

export default function Home() {
  return (
    <Layout>
      <p>Hello world!</p>
    </Layout>
  );
}

Дождитесь, пока сервер разработки Next перекомпилирует ваш код, а затем зайдите на сайт http://localhost:3000. Если все прошло успешно, вы увидите, что новый макет был применен.

Настройка Parse.js

Начните с установки Parse через NPM:

$ npm install parse

Затем добавьте следующую конфигурацию в импорт _app.js:

// pages/_app.js

// ...

import Parse from "parse/dist/parse";

const PARSE_APPLICATION_ID = process.env.NEXT_PUBLIC_PARSE_APPLICATION_ID;
const PARSE_JAVASCRIPT_KEY = process.env.NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY;
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = "https://parseapi.back4app.com/";

// ...

Вместо того чтобы жестко кодировать учетные данные, мы использовали переменные окружения. В Next.js вам не нужно ничего настраивать, чтобы включить переменные окружения. Они автоматически загружаются из файла .env.local.

Создайте в корне проекта файл .env.local со следующим содержимым:

NEXT_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>

Обязательно замените и на ваши настоящие идентификатор и ключ. Чтобы получить свои учетные данные, перейдите в приложение Back4app и выберите “Настройки приложения > Безопасность и ключи” на боковой панели.

Контекст

Вместо того чтобы передавать экземпляр Parse через несколько уровней иерархии компонентов, мы будем использовать контекст React. React context позволяет “телепортировать” данные из одного компонента в другой, не передавая их через реквизиты.

Сначала создайте новую папку с именем context и файлом parseContext.js в ней:

// context/parseContext.js

import {createContext} from "react";

const ParseContext = createContext();

export default ParseContext;

Затем оберните свой компонент с помощью ParseContext.Provider и передайте ему экземпляр Parse:

// pages/_app.js

// ...

function MyApp({Component, pageProps}) {
  return (
    <ChakraProvider>
      <ParseContext.Provider value={Parse}>
        <Component {...pageProps} />
      </ParseContext.Provider>
    </ChakraProvider>
  );
}

export default MyApp;

Опять же, не забудьте про импорт ParseContext:

import ParseContext from "@/context/parseContext";

Теперь мы можем получить экземпляр Parse с помощью хука useContext() в наших представлениях. Давайте протестируем соединение с Parse в index.js.

Замените содержимое pages/index.js на следующее:

// pages/index.js

import {useContext} from "react";
import ParseContext from "@/context/parseContext";
import {Button} from "@chakra-ui/react";
import Layout from "@/components/layout";

export default function Home() {

  const parse = useContext(ParseContext);

  async function testConnection() {
    try {
      await new parse.Query("TestClass").first();
      console.log("Connection successful");
    } catch (error) {
      console.error("Connection failed: " + error);
    }
  }

  return (
    <Layout>
      <p>Hello world!</p>
      <Button onClick={() => testConnection()}>Parse.js test</Button>
    </Layout>
  );
}

Дождитесь, пока сервер разработки Next перекомпилируется и зайдет на http://localhost:3000. Затем откройте консоль и нажмите на кнопку “Тест Parse.js”. Если все прошло успешно, вы должны получить сообщение “Connection successful”.

Аутентификация

Как уже говорилось в разделе “Что такое Back4app?”, Back4app имеет встроенную систему аутентификации. Настроить аутентификацию пользователя так же просто, как вызвать несколько методов. Даже хранение сессий автоматически обрабатывается с помощью Parse SDK.

Давайте поработаем над формами аутентификации пользователей.

Начните с создания новой страницы с именем signup.js и поместите в нее следующее:

// pages/signup.js

import NextLink from "next/link";
import {useState} from "react";
import {Button, Card, CardBody, CardFooter, CardHeader, FormControl, 
    FormLabel, Heading, HStack, Input, Link, Text, VStack,
} from "@chakra-ui/react";
import {FaUserPlus} from "react-icons/fa";
import Layout from "@/components/layout";

export default function SignUp() {

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const onSubmit = async (event) => {
    // implement logic
  };

  return (
    <Layout>
      <Card>
        <CardHeader>
          <HStack>
            <FaUserPlus/>
            <Heading as="h2" size="md"> Sign up</Heading>
          </HStack>
        </CardHeader>
        <CardBody py={0}>
          <VStack spacing="1em" alignItems="left">
            <FormControl>
              <FormLabel>Username</FormLabel>
              <Input
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
            </FormControl>
            <FormControl>
              <FormLabel>Password</FormLabel>
              <Input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </FormControl>
          </VStack>
        </CardBody>
        <CardFooter 
            w="full" 
            display="flex" 
            alignItems="center" 
            justifyContent="space-between"
        >
          <Text>
            Already have an account?{" "}
            <Link as={NextLink} href="/login">
              Log in
            </Link>
          </Text>
          <Button colorScheme="teal" onClick={onSubmit}>Sign up</Button>
        </CardFooter>
      </Card>
    </Layout>
  );
}

Этот код создает новую страницу по адресу /signup и отображает форму регистрации. Чтобы создать учетную запись, пользователям нужно будет ввести имя пользователя и пароль.

Затем измените файл pages/signup.js, чтобы включить в него логику:

// pages/signup.js

// ...

import {useRouter} from "next/router";
import {useContext, useEffect} from "react";
import ParseContext from "@/context/parseContext";

export default function SignUp() {

  const router = useRouter();
  const parse = useContext(ParseContext);

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  // redirect the user if already logged in
  useEffect(() => {
    (async () => {
      if (parse.User.current() !== null) {
        await router.push("/");
      }
    })();
  }, [router, parse.User]);

  const onSubmit = async (event) => {
    event.preventDefault();

    if (!username || !password) {
      console.error("Please fill out all the fields.");
      return;
    }

    try {
      await parse.User.signUp(username, password).then(() => {
        router.push("/");
        console.log("Successfully signed up.");
      });
    } catch (error) {
      console.error(error.message);
    }
  };

  return (
    // ...
  );
}

1. Если пользователь уже вошел в систему, он теперь будет перенаправлен на / через хук Next’s useRouter().
2. Мы модифицировали функцию onSubmit(), чтобы она вызывала User.signUp(), создавая пользовательскую сессию и сохраняя cookie в браузере пользователя.

Сделайте то же самое с файлом pages/login.js. Возьмите исходный код из репозитория GitHub.

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

Измените файл components/header.js следующим образом:

// components/header.js

import NextLink from "next/link";
import {Avatar, Box, Container, Divider, Heading, HStack, Link} from "@chakra-ui/react";
import {useContext, useEffect, useState} from "react";
import ParseContext from "@/context/parseContext";

export default function Header() {

  const parse = useContext(ParseContext);
  const [user, setUser] = useState(null);

  useEffect(() => {
    setUser(parse.User.current());
  }, [parse.User]);

  return (
    <Box py={4}>
      <Container 
        maxW="container.lg" 
        display="flex" 
        alignItems="center" 
        justifyContent="space-between"
      >
        <Heading as="h1" size="md">
          <Link as={NextLink} href="/">
            back4app-social-network
          </Link>
        </Heading>
        {user != null ? (
          <HStack>
            <Avatar 
              size="sm" 
              name={user.attributes.username} 
              src={user.attributes.avatarUrl}
            />
            <Heading size="sm">
              <Link as={NextLink} href="/settings">
                {user.attributes.username}
              </Link>
            </Heading>
          </HStack>
        ) : (
          <HStack spacing="1em">
            <Heading size="sm">
              <Link as={NextLink} href="/login">
                Log in
              </Link>
            </Heading>
            <Heading size="sm">
              <Link as={NextLink} href="/signup">
                Sign up
              </Link>
            </Heading>
          </HStack>
        )}
      </Container>
      <Divider my={4}/>
    </Box>
  );
}

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

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

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

Настройки пользователя

Давайте сделаем поля description и avatarUrl, которые мы добавили в класс User, редактируемыми.

Создайте новый файл с именем settings.js в каталоге pages:

// pages/settings.js

import React, {useContext, useEffect, useState} from "react";
import {useRouter} from "next/router";
import {Button, Card, CardBody, CardFooter, CardHeader, FormControl, FormLabel,
  Heading, HStack, Input, VStack} from "@chakra-ui/react";
import {FaCog} from "react-icons/fa";
import ParseContext from "@/context/parseContext";
import Layout from "@/components/layout";

export default function Settings() {

  const router = useRouter();
  const parse = useContext(ParseContext);

  const [description, setDescription] = useState("");
  const [avatarUrl, setAvatarUrl] = useState("");

  useEffect(() => {
    (async () => {
      const user = parse.User.current();

      // redirect the user if not logged in
      if (user === null) {
        await router.push("/");
        return;
      }

      // load data from the database
      setDescription(await user.get("description"));
      setAvatarUrl(await user.get("avatarUrl"));
    })();
  }, [router, parse.User]);

  const onSave = async () => {
    const user = parse.User.current();
    user.set("description", description);
    user.set("avatarUrl", avatarUrl);
    await user.save();

    console.log("Successfully saved settings.");
  };

  const onLogout = async () => {
    await parse.User.logOut();
    await router.push("/");

    console.log("Successfully logged out.");
  };

  return (
    <Layout>
      <Card>
        <CardHeader>
          <HStack>
            <FaCog/>
            <Heading as="h2" size="md"> Settings</Heading>
          </HStack>
        </CardHeader>
        <CardBody py={0}>
          <VStack spacing="1em">
            <FormControl>
              <FormLabel>Description</FormLabel>
              <Input
                placeholder="Description"
                value={description}
                onChange={e => setDescription(e.target.value)}
              />
            </FormControl>
            <FormControl>
              <FormLabel>Avatar URL</FormLabel>
              <Input
                placeholder="Avatar URL"
                value={avatarUrl}
                onChange={e => setAvatarUrl(e.target.value)}
              />
            </FormControl>
          </VStack>
        </CardBody>
        <CardFooter display="flex" justifyContent="right">
          <HStack>
            <Button colorScheme="red" onClick={onLogout}>Log out</Button>
            <Button colorScheme="teal" onClick={onSave}>Save</Button>
          </HStack>
        </CardFooter>
      </Card>
    </Layout>
  );
}

1. Мы использовали хук React useEffect(), чтобы перенаправить пользователя, если он не прошел аутентификацию. Кроме того, хук получает описание пользователя и avatarUrl.
2. Мы реализовали метод onSave(), который обновляет информацию о пользователе с помощью данных о состоянии.
3. Мы реализовали метод onLogout(), который вызывает функцию logOut() в Parse. Parse’s logOut() удаляет сессию из базы данных и удаляет cookie из браузера пользователя.

Посты

Последнее, что мы должны сделать, прежде чем наша простая социальная сеть будет завершена, – это реализовать посты. Мы уже создали класс базы данных. Теперь нам осталось создать форму для их создания и получить их из базы данных.

Сначала добавьте новый компонент под названием post.js:

// components/post.js

import {Avatar, Box, Card, CardBody, CardHeader, Heading, HStack, Text} from "@chakra-ui/react";

export default function Post(props) {
  return (
    <Card mt={2}>
      <CardHeader pb={0}>
        <HStack spacing="1em">
          <Avatar name={props.author.username} src={props.author.avatarUrl}/>
          <Box>
            <Heading size="sm">{props.author.username}</Heading>
            <Text>{props.author.description}</Text>
          </Box>
        </HStack>
      </CardHeader>
      <CardBody>
        <Text>{props.content}</Text>
      </CardBody>
    </Card>
  );
}

Затем измените файл index.js следующим образом:

// pages/index.js

import {useContext, useEffect, useState} from "react";
import {Alert, AlertIcon, Button, Card, CardBody, CardFooter,
  CardHeader, Heading, HStack, Textarea} from "@chakra-ui/react";
import {FaPlus} from "react-icons/fa";
import ParseContext from "@/context/parseContext";
import Layout from "@/components/layout";
import Post from "@/components/post";

export default function Home() {

  const parse = useContext(ParseContext);

  const [user, setUser] = useState(null);
  const [postContent, setPostContent] = useState("");
  const [posts, setPosts] = useState([]);

  const onCreatePost = async () => {
      // implement logic
  };

  return (
    <Layout>
      {user ? (
        <Card mb={2}>
          <CardHeader>
            <HStack>
              <FaPlus/>
              <Heading as="h2" size="md"> Create post</Heading>
            </HStack>
          </CardHeader>
          <CardBody py={0}>
            <Textarea
              placeholder="What's on your mind?"
              value={postContent}
              onChange={(event) => setPostContent(event.target.value)}
            />
          </CardBody>
          <CardFooter display="flex" justifyContent="right">
            <Button colorScheme="teal" onClick={onCreatePost}>Post</Button>
          </CardFooter>
        </Card>
      ) : (
        <Alert status="warning" mb={2}>
          <AlertIcon/>
          You need to log in to create posts.
        </Alert>
      )}
      {posts.map(post => (
        <Post
          key={post.id}
          content={post.attributes.content}
          author={{...post.attributes.author.attributes}}
        />
      ))}
    </Layout>
  );
}

Затем реализуйте функцию onCreatePost() следующим образом:

const onCreatePost = async () => {
  if (!user == null) return;

  const post = new parse.Object("Post");
  post.set("content", postContent);
  post.set("author", user);
  await post.save();

  setPostContent("");
  setPosts([post, ...posts]);
};

И наконец, добавьте хук useEffect() для получения сообщений:

useEffect(() => {
  setUser(parse.User.current());

  (async () => {
    const posts = await new parse.Query("Post")
      .include("author").descending("createdAt").find();
    setPosts(posts);
  })();
}, []);

Чтобы узнать больше об объектах и запросах Parse, ознакомьтесь с официальной документацией по Parse.

Еще раз запустите сервер разработки Next:

$ next start

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

Заключение

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

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

Проект, который мы создали в этой статье, может послужить прочным фундаментом для дальнейшего развития. Проверьте свои знания, реализовав новые возможности, например, функцию “нравится/не нравится”, функцию “поделиться” и комментарии.

Исходный код доступен в репозитории back4app-social-network на GitHub.

Будущие шаги

1. Следуйте этой статье, чтобы развернуть фронтенд Next.js в контейнерах Back4app.
2. Посмотрите на Cloud Code Functions, чтобы добавить расширенные функции в бэкэнд.
3. Обеспечьте проверку электронной почты пользователя при регистрации, чтобы бороться с ботами.