Como desenvolver um aplicativo de mídia social?
Neste artigo, falaremos sobre redes sociais, tipos de aplicativos de mídia social, seus benefícios e recursos obrigatórios.
Além disso, veremos como criar uma rede social passo a passo. Usaremos o Back4app no backend e o Next.js no frontend.
Contents
- 1 O que é uma rede social?
- 2 Tipos de aplicativos de mídia social
- 3 Benefícios do desenvolvimento de um aplicativo de mídia social
- 4 Recursos obrigatórios de um aplicativo de mídia social
- 5 Como criar um aplicativo de mídia social?
- 6 Conclusão
Uma rede social é um aplicativo de mídia social que permite que as pessoas se conectem e interajam umas com as outras.
Depois que dois usuários se conectam, eles podem compartilhar suas informações de usuário, trocar mensagens, imagens, compartilhar publicações e muito mais.
Atualmente, os aplicativos de mídia social são muito populares. Quase todo mundo está inscrito em pelo menos um aplicativo de mídia social. De acordo com a pesquisa da Buffer, as plataformas de mídia social mais populares são:
- Facebook (2,96 bilhões de MAUs)
- YouTube (2,2 bilhões de MAUs)
- Instagram (2 bilhões de MAUs)
- TikTok (1 bilhão de MAUs)
- Snapchat (500 milhões de MAUs)
MAUs significa usuários ativos mensais. Esse é o número de usuários únicos que interagem com sua plataforma de mídia social mensalmente.
Embora o mercado de aplicativos de mídia social seja enorme, desenvolver um aplicativo de mídia social é uma tarefa desafiadora.
É um dos projetos de TI mais complexos que você pode realizar. Muitas empresas subestimam a dificuldade de criar um aplicativo de rede social e, em seguida, fracassam miseravelmente com grandes perdas.
Conforme mencionado na seção anterior, uma rede social é apenas um dos tipos de aplicativos de mídia social. Os outros tipos de aplicativos de mídia social são:
- Redes de compartilhamento de mídia (Instagram, TikTok, YouTube)
- Redes de compartilhamento de conteúdo (Pinterest, Tumblr, Flickr)
- Redes de avaliação de consumidores (Trustpilot, Angi, Choice)
- Redes de blogs e publicações (Medium, Twitter)
- Fóruns de discussão (Reddit, Quora, HackerNews)
- Redes de relacionamento (Tinder, Bumble)
A criação de um aplicativo de mídia social oferece vários benefícios. Os benefícios incluem receita de anúncios, monetização, coleta de informações valiosas sobre o usuário, análises avançadas, patrocínios com outras empresas e muito mais.
Outra grande vantagem dos aplicativos de mídia social é seu enorme valor de revenda. Se o seu aplicativo for relativamente bem-sucedido (ou seja, tiver uma base de usuários decente), você poderá vendê-lo rapidamente para outra empresa. Por exemplo, o Twitter foi vendido por US$ 44 bilhões e o MySpace foi vendido por US$ 87 milhões.
Do ponto de vista do desenvolvedor, a criação de uma rede social simples permite que você conheça as ferramentas com as quais está trabalhando e lhe dá uma ideia de como é difícil criar algo assim.
Os aplicativos de mídia social variam muito em termos de funcionalidades. No entanto, há alguns recursos essenciais que todo aplicativo de mídia social bem-sucedido inclui.
Contas de usuário
Todos os aplicativos de mídia social permitem que os usuários criem uma conta. Depois que os usuários criam suas contas, eles podem adicionar informações pessoais e adaptar o aplicativo às suas necessidades. Por exemplo, eles optam pelos recursos de que gostam, adicionam seus interesses, ocultam conteúdo específico etc.
A melhor vantagem das contas de usuário do ponto de vista comercial é que você pode criar um “perfil de usuário”. Por “perfil de usuário”, quero dizer que você descobre o que um usuário específico gosta e com quem ele interage e, em seguida, adapta os anúncios de acordo com isso.
Conexão de usuários
Os aplicativos de mídia social permitem que os usuários se conectem, por exemplo, adicionem alguém como amigo, sigam-no e se inscrevam nele. Quando dois usuários estão conectados, seus feeds são alterados de acordo.
Compartilhamento de conteúdo
O objetivo de todo aplicativo de mídia social é compartilhar conteúdo. Se o seu aplicativo não permitir que os usuários compartilhem conteúdo rapidamente, ele definitivamente não será bem-sucedido.
Ao implementar um aplicativo de mídia social, siga as melhores práticas de UI/UX. Postar algo deve ser tão fácil quanto pressionar um ou dois botões.
Pesquisa e descoberta
Ótimos algoritmos de pesquisa e descoberta são partes integrantes de todo aplicativo social bem-sucedido.
Seu aplicativo de mídia social deve permitir que os usuários encontrem facilmente o conteúdo em que estão interessados. Além disso, seu aplicativo deve oferecer um feed personalizado e uma funcionalidade de pesquisa avançada.
Notificações
Você precisará considerar a implementação de notificações por push para impulsionar o envolvimento e aumentar o uso do aplicativo.
As notificações por push são um canal de comunicação poderoso que permite notificar os usuários quando algo acontece, por exemplo, quando um amigo publica um post, quando há um evento, quando eles não usam o aplicativo há algum tempo e assim por diante.
Para saber mais sobre as notificações por push e como integrá-las ao seu projeto, consulte O que são notificações por push?
Nesta seção do tutorial, veremos como criar um aplicativo de mídia social passo a passo. Usaremos o Back4app como backend e o React com a estrutura Next.js no frontend.
Pré-requisitos
Esta é a pilha de tecnologia que usaremos para este projeto:
- Experiência com JavaScript ES6.
- Experiência com React/Next.js e React hooks.
- Conhecimento básico de Backend as a Service (BaaS).
- Node.js v16+ instalado em seu computador local e um editor.
O que é o Back4app?
O Back4app é um excelente backend de baixo código para criar rapidamente aplicativos modernos para Web e dispositivos móveis. Ele vem com vários recursos, incluindo bancos de dados em tempo real, gerenciamento de usuários, funções do Cloud Code, notificações push, integrações sociais, APIs, SDKs e muito mais!
Com o Back4app, você pode terceirizar a maior parte do trabalho de back-end e se concentrar na lógica de negócios principal e no front-end.
Você também não precisará se preocupar com a infraestrutura subjacente ou com o dimensionamento do aplicativo. O Back4app cobrirá tudo isso. É uma ótima opção para acelerar o desenvolvimento de aplicativos de mídia social.
A Back4app oferece um nível gratuito que é ótimo para testes e prototipagem. À medida que seu aplicativo cresce, você pode fazer upgrade para níveis premium com preços previsíveis.
- Extremamente fácil de usar.
- Sistema de autenticação integrado (incluindo autenticação social).
- Notificações push e envio fácil de e-mails.
- Recursos de dimensionamento e dimensionamento automático.
Introdução ao projeto
Neste artigo, criaremos uma rede social simples. A rede social implementada permitirá que os usuários criem uma conta, autentiquem-se, definam um perfil e criem publicações.
No back-end, usaremos o Back4app e, no front-end, usaremos o React com a estrutura Next.js para criar um aplicativo de mídia social
Primeiro, criaremos um aplicativo Back4app, configuraremos os modelos de banco de dados e, em seguida, passaremos para o frontend.
No front-end, teremos que instalar o Parse SDK, configurar a autenticação e trabalhar nas exibições específicas, por exemplo, login, registro, perfil.
O produto final terá a seguinte aparência:
Criar aplicativo
As etapas seguintes exigirão que você tenha uma conta no Back4app. Se você ainda não tiver uma, vá em frente e crie uma gratuitamente.
Ao fazer login na sua conta Back4app, você verá sua lista de aplicativos. Clique em “Build new app” (Criar novo aplicativo) para iniciar o processo de criação do aplicativo.
O Back4app permite que você crie dois tipos de aplicativos:
- Backend como serviço (BaaS)
- Contêineres como serviço (CaaS)
O BaaS é uma solução de back-end totalmente desenvolvida pelo Parse, enquanto o CaaS é usado para implementar aplicativos em contêineres por meio do Docker.
Como estamos criando uma rede social, usaremos a opção “Backend as a Service”.
Em seguida, dê um nome descritivo ao seu aplicativo, selecione “NoSQL” como o banco de dados e clique em “Create”.
A Back4app levará cerca de 2 minutos para preparar tudo o que é necessário para seu aplicativo. Quando terminar, você será redirecionado para a visualização do banco de dados do seu aplicativo.
Classes de banco de dados
Continuando, vamos preparar o banco de dados para o desenvolvimento de aplicativos de mídia social.
Como você deve ter notado, duas classes já estão no banco de dados. A primeira chama-se User (Usuário ) e a segunda Role (Função). Por padrão, todas as classes do Back4app vêm com os seguintes campos:
+-----------+-------------------------------------------------------------------------+
| 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). |
+-----------+-------------------------------------------------------------------------+Vamos modificar ligeiramente nossa classe User adicionando os campos description e avatarUrl. Mais tarde, os usuários poderão editar esses dois campos em suas configurações.
Clique no botão “+ Column” (coluna) no canto superior direito da tela e adicione os dois campos a seguir:
+-----------+-------------+--------------------+----------+
| Data type | Name | Default value | Required |
+-----------+-------------+--------------------+----------+
| String | description | Another cool user! | yes |
+-----------+-------------+--------------------+----------+
| String | avatarUrl | <some_image_url> | yes |
+-----------+-------------+--------------------+----------+Certifique-se de substituir por um URL de imagem real, terminando com .png, .jpg ou .jpeg. Se não tiver nenhuma ideia, você pode usar esta.
Em seguida, vamos criar uma classe chamada Post. Cada post terá um autor e algum conteúdo de texto.
Use o botão “Create a class” (Criar uma classe) no canto superior esquerdo da tela para iniciar o processo de criação da classe. Chame-a de Post, torne-a “Protected” (Protegida) e clique em “Create class & add columns” (Criar classe e adicionar colunas).
Em seguida, adicione as duas colunas a seguir:
+-----------------+---------+---------------+----------+
| Data type | Name | Default value | Required |
+-----------------+---------+---------------+----------+
| Pointer -> User | author | <leave blank> | yes |
+-----------------+---------+---------------+----------+
| String | content | <leave blank> | yes |
+-----------------+---------+---------------+----------+
Segurança do banco de dados do Back4app
Com relação à segurança do banco de dados do Back4app, há duas maneiras de proteger as classes e os objetos. Podemos escolher entre as seguintes:
- Permissões de nível de classe (CLPs)
- Níveis de controle de acesso (ACLs)
Os CLPs concentram-se na definição de restrições de acesso no nível da classe, permitindo um controle refinado sobre o acesso e a modificação de dados. Por outro lado, as ACLs concedem ou restringem o acesso a objetos específicos e são baseadas em funções ou permissões definidas pelo usuário.
Para saber mais sobre a segurança do Parse, consulte o artigo Parse Server Security.
Queremos que somente usuários autenticados criem posts e que somente o autor do post possa atualizá-los e excluí-los. Para isso, configuraremos Post CLPs.
Selecione a classe Post na barra lateral e, em seguida, use os três pontos no canto superior direito da tela e “Security > Class Level Permissions”. Defina os CLPs da seguinte forma:
Ótimo, é isso. Nosso backend está pronto. Isso não foi muito difícil.
Código Frontend
Nesta seção do artigo, trabalharemos na parte do frontend da nossa rede social.
Projeto Init
Comece usando a ferramenta create-next-app para inicializar um novo projeto 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.A ferramenta lhe fará uma série de perguntas. Sugiro que você ative apenas o ESLint, pois não usaremos nenhum dos outros recursos oferecidos e eles tornarão seu projeto mais complexo.
O projeto Next.js padrão vem com alguns arquivos e diretórios “inúteis”. Para reduzir o tamanho do projeto, vá em frente e exclua os seguintes:
- pasta pages/api
- pasta de estilos
- public/next.svg
- public/vercel.svg
Além disso, não se esqueça de remover a importação globals.css de pages/_app.js:
// pages/_app.js
import "@/styles/globals.css"; // remove this lineEm seguida, substitua o conteúdo de pages/index.js pelo seguinte:
// pages/index.js
export default function Home() {
return (
<>
<p>Hello world!</p>
</>
);
}Inicie o servidor de desenvolvimento Next:
$ next devPor fim, abra o navegador da Web e navegue até http://localhost:3000. Se tudo funcionar bem, seu aplicativo deverá ser compilado e você poderá ver a mensagem “Hello world!”.
Configuração da ChakraUI
Para acelerar o processo de construção da interface do usuário, usaremos o ChakraUI. ChakraUI é uma excelente biblioteca React com componentes pré-construídos, um sistema estilizado, ganchos especializados e muito mais.
Vá em frente e instale-o via NPM:
$ npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motionEm seguida, envolva seu componente com um ChakraProvider da seguinte forma:
// pages/_app.js
import {ChakraProvider} from "@chakra-ui/react";
function MyApp({Component, pageProps}) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;Não se esqueça de importá-lo na parte superior do arquivo:
import {ChakraProvider} from "@chakra-ui/react";Para que o Chakra funcione corretamente, precisamos incluir o script do modo de cores. Esse script garante que a sincronização do armazenamento local funcione corretamente e remove os “flashes de cores”.
Modifique seu pages/_document.js da seguinte forma:
// 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>
);
}Isso é tudo para a configuração inicial dos chakras.
Ícones React
Para tornar nosso aplicativo um pouco mais sofisticado, instalaremos o react-icons. O React icons é uma biblioteca que permite incluir rapidamente ícones populares em seu projeto. Ela vem com ícones Ant, Bootstrap, Heroicons, Font Awesome e muito mais.
Instale-o executando:
$ npm install react-icons --saveEm seguida, você pode importar qualquer ícone e usá-lo dessa forma:
import {FaMusic} from "react-icons/fa";
return (
<FaMusic/>
);Para obter a lista de ícones, consulte a documentação oficial.
Layout e componentes
A maioria das redes sociais tem um layout padronizado. Todas as páginas têm o mesmo cabeçalho na parte superior e o mesmo rodapé na parte inferior. Vamos implementar nosso layout.
Comece criando uma pasta chamada components na raiz do projeto. Em seguida, crie esses arquivos nela:
components/
├── header.js
├── footer.js
└── layout.jsEm seguida, preencha o arquivo header.js com o seguinte:
// 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>
);
}Em seguida, faça o mesmo com o arquivo 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>
);
}Não há muito o que explicar aqui. Usamos os componentes internos do Chakra para formar um bom cabeçalho e rodapé. Como estamos usando o Next.js, combinamos o Link do Chakra com o Link do Next.
Por fim, use o componente de cabeçalho e rodapé recém-criado para formar um layout:
// 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/>
</>
);
}Em seguida, aplique o layout ao index.js:
// pages/index.js
import Layout from "@/components/layout";
export default function Home() {
return (
<Layout>
<p>Hello world!</p>
</Layout>
);
}Aguarde até que o servidor de desenvolvimento do Next recompile seu código e acesse http://localhost:3000. Se tudo tiver funcionado bem, você verá que o novo layout foi aplicado.
Configurar o Parse.js
Comece instalando o Parse via NPM:
$ npm install parseEm seguida, adicione a seguinte configuração nas importações de _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/";
// ...Em vez de codificar as credenciais, usamos variáveis ambientais. Com o Next.js, você não precisa configurar nada para ativar as variáveis de ambiente. Elas são carregadas automaticamente do arquivo .env.local.
Crie um arquivo .env.local na raiz do projeto com o seguinte conteúdo:
NEXT_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>Certifique-se de substituir e por sua ID e chave reais. Para obter suas credenciais, navegue até o aplicativo Back4app e selecione “App Settings > Security & Keys” (Configurações do aplicativo > Segurança e chaves) na barra lateral.
Contexto
Em vez de passar a instância do Parse por várias camadas da hierarquia de componentes, usaremos o contexto do React. O contexto do React permite que você “teletransporte” dados de um componente para outro sem passá-los por meio de props.
Primeiro, crie uma nova pasta chamada context com o arquivo parseContext.js nela:
// context/parseContext.js
import {createContext} from "react";
const ParseContext = createContext();
export default ParseContext;Em seguida, envolva seu componente com ParseContext.Provider e passe a instância do Parse para ele:
// pages/_app.js
// ...
function MyApp({Component, pageProps}) {
return (
<ChakraProvider>
<ParseContext.Provider value={Parse}>
<Component {...pageProps} />
</ParseContext.Provider>
</ChakraProvider>
);
}
export default MyApp;Novamente, não se esqueça da importação do ParseContext:
import ParseContext from "@/context/parseContext";Agora podemos obter a instância do Parse por meio do gancho useContext() em nossas exibições. Vamos testar a conexão do Parse em index.js.
Substitua o conteúdo de pages/index.js pelo seguinte:
// 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>
);
}Aguarde até que o servidor de desenvolvimento Next recompile e acesse http://localhost:3000. Em seguida, abra o console e clique no botão “Parse.js test”. Você deverá receber a mensagem “Connection successful” se tudo correr bem.
Autenticação
Conforme mencionado na seção “O que é o Back4app?”, o Back4app tem um sistema de autenticação integrado. Configurar a autenticação do usuário é tão fácil quanto chamar alguns métodos. Até mesmo o armazenamento da sessão é tratado automaticamente para você por meio do Parse SDK.
Vamos trabalhar nos formulários de autenticação de usuário.
Comece criando uma nova página chamada signup.js e coloque o seguinte:
// 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>
);
}Esse código cria uma nova página em /signup e renderiza o formulário de registro. Para criar uma conta, os usuários precisarão digitar seu nome de usuário e senha.
Em seguida, modifique o pages/signup.js para incluir a lógica:
// 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 (
// ...
);
}- Se o usuário já estiver conectado, ele será redirecionado para
/por meio do ganchouseRouter()do Next. - Modificamos
onSubmit()para invocarUser.signUp(), criando a sessão do usuário e armazenando o cookie no navegador do usuário.
Faça o mesmo com o arquivo pages/login.js. Baixe o código-fonte do repositório do GitHub.
Ótimo, agora o sistema de autenticação está mais ou menos pronto. A última coisa que faremos é modificar ligeiramente o header.js para exibir o usuário conectado ou os links de login/inscrição se não estiver autenticado.
Modifique components/header.js da seguinte forma:
// 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>
);
}Aguarde até que o servidor de desenvolvimento do Next recompile e teste o sistema de autenticação. Tente criar uma conta e verifique se o cabeçalho muda.
Ainda não temos a funcionalidade de logout, portanto, você terá que excluir manualmente os cookies se quiser fazer logout.
Depois de criar um usuário, você pode navegar até a visualização do banco de dados do Back4app e verificar as linhas da classe User. Você verá que um novo usuário foi adicionado.
Configurações do usuário
Vamos tornar editáveis os campos description e avatarUrl que adicionamos à classe User.
Crie um novo arquivo chamado settings.js no diretório de páginas:
// 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>
);
}- Usamos o gancho
useEffect()do React para redirecionar o usuário se ele não estiver autenticado. Além disso, o gancho obtém adescriçãoe oavatarUrldo usuário. - Implementamos o método
onSave(), que atualiza as informações do usuário com dados de estado. - Implementamos o método
onLogout()que invoca ologOut()do Parse. OlogOut()do Parse exclui a sessão do banco de dados e remove o cookie do navegador do usuário.
Publicações
A última coisa que devemos fazer antes que nossa rede social simples esteja completa é implementar as postagens. Já criamos a classe de banco de dados. Agora, tudo o que precisamos fazer é criar um formulário para criá-los e buscá-los no banco de dados.
Primeiro, adicione um novo componente chamado 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>
);
}Em seguida, modifique seu index.js da seguinte forma:
// 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>
);
}Em seguida, implemente o onCreatePost() da seguinte forma:
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]);
};Por fim, adicione o gancho useEffect() para buscar as postagens:
useEffect(() => {
setUser(parse.User.current());
(async () => {
const posts = await new parse.Query("Post")
.include("author").descending("createdAt").find();
setPosts(posts);
})();
}, []);Para saber mais sobre objetos e consultas do Parse, consulte a documentação oficial do Parse.
Inicie o servidor de desenvolvimento Next novamente:
$ next startCrie algumas postagens de amostra e atualize a página. Se tudo funcionar bem, os posts deverão ser armazenados no banco de dados e buscados quando você visitar a página.
Conclusão
Neste artigo, criamos com sucesso um aplicativo simples de mídia social. O aplicativo permite que os usuários se inscrevam, se autentiquem, editem seus perfis e criem posts.
A esta altura, você já deve ter uma boa compreensão de como o Back4app funciona e de como começar a criar sua rede social.
O projeto que criamos neste artigo pode servir como uma base sólida para desenvolvimento posterior. Teste seus conhecimentos implementando novos recursos, como, por exemplo, a funcionalidade de gostar/não gostar, a funcionalidade de compartilhar e os comentários.
O código-fonte está disponível no repositório back4app-social-network do GitHub.
Etapas futuras
- Siga este artigo para implantar seu frontend Next.js nos contêineres do Back4app.
- Dê uma olhada no Cloud Code Functions para adicionar funcionalidades avançadas ao seu backend.
- Imponha a verificação do e-mail do usuário na inscrição para combater os bots.
