Come sviluppare un’app per i social media?
In questo articolo parleremo dei social network, dei tipi di app per social media, dei loro vantaggi e delle loro caratteristiche essenziali.
Inoltre, vedremo come creare un social network passo dopo passo. Utilizzeremo Back4app per il backend e Next.js per il frontend.
Contents
- 1 Che cos’è un social network?
- 2 Tipi di applicazioni dei social media
- 3 Vantaggi dello sviluppo di un’app per i social media
- 4 Caratteristiche indispensabili di un’app per i social media
- 5 Come creare un’app per i social media?
- 6 Conclusione
Un social network è un’applicazione di social media che consente alle persone di connettersi e interagire tra loro.
Una volta che due utenti si sono connessi, possono condividere le loro informazioni utente, scambiarsi messaggi, immagini, condividere post e altro ancora.
Al giorno d’oggi le app dei social media sono molto popolari. Quasi tutti sono iscritti ad almeno un’app di social media. Secondo una ricerca di Buffer, le piattaforme di social media più popolari sono:
- Facebook (2,96 miliardi di MAU)
- YouTube (2,2 miliardi di MAU)
- Instagram (2 miliardi di MAU)
- TikTok (1 miliardo di MAU)
- Snapchat (500 milioni di MAU)
MAU è l’acronimo di utenti attivi mensili. Si tratta del numero di utenti unici che interagiscono mensilmente con la vostra piattaforma di social media.
Anche se il mercato delle app per i social media è enorme, lo sviluppo di un’app per i social media è un compito impegnativo.
È uno dei progetti IT più complessi che si possano realizzare. Molte aziende sottovalutano la difficoltà di costruire un’applicazione di social network e poi falliscono miseramente con perdite enormi.
Come indicato nella sezione precedente, un social network è solo uno dei tipi di app per social media. Gli altri tipi di app per social media sono:
- Reti di condivisione dei media (Instagram, TikTok, YouTube)
- Reti di condivisione dei contenuti (Pinterest, Tumblr, Flickr)
- Reti di recensioni dei consumatori (Trustpilot, Angi, Choice)
- Blogging e reti editoriali (Medium, Twitter)
- Forum di discussione (Reddit, Quora, HackerNews)
- Reti di relazioni (Tinder, Bumble)
La creazione di un’app per i social media offre diversi vantaggi. Tra i vantaggi vi sono le entrate pubblicitarie, la monetizzazione, la raccolta di informazioni preziose sugli utenti, le analisi avanzate, le sponsorizzazioni con altre aziende e altro ancora.
Un altro aspetto positivo delle app per i social media è il loro enorme valore di rivendita. Se la vostra applicazione ha un successo relativo (cioè ha una base di utenti decente), potete venderla rapidamente a un’altra azienda. Ad esempio, Twitter è stato venduto per 44 miliardi di dollari e MySpace per 87 milioni di dollari.
Dal punto di vista dello sviluppatore, la costruzione di un semplice social network consente di conoscere gli strumenti con cui si lavora e di capire quanto sia difficile costruire qualcosa di simile.
Le applicazioni per i social media variano molto in termini di funzionalità. Tuttavia, ci sono alcune caratteristiche essenziali che ogni applicazione di successo per i social media include.
Account utente
Tutte le app dei social media consentono agli utenti di creare un account. Una volta creato l’account, l’utente può aggiungere informazioni personali e adattare l’app alle proprie esigenze. Ad esempio, possono scegliere le funzioni che preferiscono, aggiungere i loro interessi, nascondere contenuti specifici, ecc.
Il miglior vantaggio degli account utente dal punto di vista commerciale è la possibilità di costruire un “profilo utente”. Per “profilo dell’utente” si intende la possibilità di capire cosa piace a un determinato utente e con chi interagisce, per poi adattare le pubblicità di conseguenza.
Collegare gli utenti
Le app dei social media consentono agli utenti di connettersi, ad esempio di aggiungere qualcuno come amico, di seguirlo e di iscriversi. Una volta che due utenti sono connessi, i loro feed vengono modificati di conseguenza.
Condivisione dei contenuti
Lo scopo di ogni applicazione per i social media è la condivisione di contenuti. Se la vostra app non consente agli utenti di condividere rapidamente i contenuti, non avrà sicuramente successo.
Quando si implementa un’applicazione per i social media, è necessario seguire le migliori pratiche UI/UX. Postare qualcosa dovrebbe essere facile come premere un pulsante o due.
Ricerca e scoperta
Ottimi algoritmi di ricerca e scoperta sono parte integrante di ogni social app di successo.
L’applicazione per i social media deve consentire agli utenti di trovare facilmente i contenuti a cui sono interessati. Inoltre, la vostra app dovrebbe offrire un feed personalizzato e una funzionalità di ricerca avanzata.
Notifiche
Dovrete considerare l’implementazione delle notifiche push per stimolare il coinvolgimento e aumentare l’utilizzo dell’app.
Le notifiche push sono un potente canale di comunicazione che consente di avvisare gli utenti quando accade qualcosa, ad esempio un messaggio di un amico, un evento, un’applicazione che non si usa da un po’ e così via.
Per saperne di più sulle notifiche push e su come integrarle nel vostro progetto, date un’occhiata a Cosa sono le notifiche push?
In questa sezione del tutorial, vedremo come costruire un’applicazione per i social media passo dopo passo. Utilizzeremo Back4app come backend e React con il framework Next.js per il frontend.
Prerequisiti
Ecco lo stack tecnologico che utilizzeremo per questo progetto:
- Esperienza con JavaScript ES6.
- Esperienza con React/Next.js e React hooks.
- Conoscenza di base del Backend as a Service (BaaS).
- Node.js v16+ installato sulla macchina locale e un editor.
Che cos’è Back4app?
Back4app è un ottimo backend low-code per costruire rapidamente moderne applicazioni web e mobili. È dotato di numerose funzionalità, tra cui database in tempo reale, gestione degli utenti, funzioni Cloud Code, notifiche push, integrazioni sociali, API, SDK e altro ancora!
Utilizzando Back4app, potete esternalizzare la maggior parte del lavoro di backend e concentrarvi sulla logica aziendale principale e sul frontend.
Inoltre, non dovrete preoccuparvi dell’infrastruttura sottostante o della scalabilità delle app. Back4app si occuperà di tutto questo. È un’ottima opzione per accelerare lo sviluppo di app per i social media.
Back4app offre un livello gratuito, ottimo per i test e i prototipi. Man mano che la vostra applicazione cresce, potete passare ai livelli premium con prezzi prevedibili.
- Estremamente facile da usare.
- Sistema di autenticazione incorporato (compresa l’autenticazione sociale).
- Notifiche push e facile invio di e-mail.
- Funzionalità di scalatura e autoscalatura.
Introduzione al progetto
In questo articolo, costruiremo un semplice social network. Il social network implementato consentirà agli utenti di creare un account, autenticarsi, impostare un profilo e creare post.
Sul backend utilizzeremo Back4app e sul frontend React con il framework Next.js per creare un’applicazione per i social media.
Creeremo prima un’applicazione Back4app, imposteremo i modelli di database e poi passeremo al frontend.
Sul frontend dovremo installare Parse SDK, impostare l’autenticazione e lavorare sulle viste specifiche, ad esempio login, iscrizione, profilo.
Il prodotto finale avrà questo aspetto:
Creare un’applicazione
Per i passi successivi è necessario disporre di un account Back4app. Se non ne avete ancora uno, procedete a crearne uno gratuitamente.
Quando si accede al proprio account Back4app, viene presentato l’elenco delle app. Fare clic su “Crea nuova app” per iniziare il processo di creazione dell’app.
Back4app consente di creare due tipi di app:
- Backend come servizio (BaaS)
- Contenitori come servizio (CaaS)
BaaS è una soluzione di backend completamente alimentata da Parse, mentre CaaS è utilizzato per la distribuzione di applicazioni containerizzate tramite Docker.
Poiché stiamo costruendo un social network, useremo l’opzione “Backend as a Service”.
Quindi, dare un nome descrittivo all’applicazione, selezionare “NoSQL” come database e fare clic su “Crea”.
Back4app impiegherà circa 2 minuti per preparare tutto il necessario per la vostra applicazione. Al termine, si verrà reindirizzati alla vista del database dell’applicazione.
Classi di database
Procediamo con la preparazione del database per lo sviluppo di applicazioni per i social media.
Come avrete notato, due classi sono già presenti nel database. La prima si chiama Utente e la seconda Ruolo. Per impostazione predefinita, tutte le classi di Back4app sono dotate dei seguenti campi:
+-----------+-------------------------------------------------------------------------+
| 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). |
+-----------+-------------------------------------------------------------------------+Modifichiamo leggermente la nostra classe User, aggiungendo i campi description e avatarUrl. Gli utenti potranno in seguito modificare questi due campi nelle loro impostazioni.
Fare clic sul pulsante “+ Colonna” in alto a destra della schermata e aggiungere i due campi seguenti:
+-----------+-------------+--------------------+----------+
| Data type | Name | Default value | Required |
+-----------+-------------+--------------------+----------+
| String | description | Another cool user! | yes |
+-----------+-------------+--------------------+----------+
| String | avatarUrl | <some_image_url> | yes |
+-----------+-------------+--------------------+----------+Assicurarsi di sostituire con un URL di immagine reale, che termini con .png, .jpg o .jpeg. Se non avete idee, potete usare questo.
Quindi, creiamo una classe chiamata Post. Ogni post avrà un autore e un contenuto testuale.
Utilizzate il pulsante “Crea una classe” in alto a sinistra per avviare il processo di creazione della classe. Chiamatela Post, rendetela “Protetta” e fate clic su “Crea classe e aggiungi colonne”.
Quindi aggiungere le due colonne seguenti:
+-----------------+---------+---------------+----------+
| Data type | Name | Default value | Required |
+-----------------+---------+---------------+----------+
| Pointer -> User | author | <leave blank> | yes |
+-----------------+---------+---------------+----------+
| String | content | <leave blank> | yes |
+-----------------+---------+---------------+----------+
Sicurezza del database di Back4app
Per quanto riguarda la sicurezza del database di Back4app, esistono due modi per proteggere le classi e gli oggetti. Possiamo scegliere tra i seguenti:
- Autorizzazioni a livello di classe (CLP)
- Livelli di controllo dell’accesso (ACL)
Le CLP si concentrano sulla definizione di restrizioni di accesso a livello di classe, consentendo un controllo a grana fine sull’accesso e la modifica dei dati. Al contrario, le ACL concedono o limitano l’accesso a oggetti specifici e si basano su ruoli o permessi definiti dall’utente.
Per saperne di più sulla sicurezza di Parse, consultate l’articolo Parse Server Security.
Vogliamo che solo gli utenti autenticati possano creare post e che solo l’autore del post possa aggiornarli e cancellarli. Per raggiungere questo obiettivo, imposteremo i CLP dei post.
Selezionate la classe Post nella barra laterale, quindi utilizzate i tre punti in alto a destra dello schermo e “Sicurezza > Autorizzazioni a livello di classe”. Impostare i CLP nel modo seguente:
Bene, questo è tutto. Il nostro backend è pronto. Non è stato troppo difficile.
Codice Frontend
In questa sezione dell’articolo, lavoreremo sulla parte frontend del nostro social network.
Progetto Init
Si inizia usando lo strumento create-next-app per avviare un nuovo progetto 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.Lo strumento vi proporrà una serie di domande. Suggerisco di abilitare solo ESLint, poiché non useremo nessuna delle altre funzioni offerte, che renderebbero il progetto più complesso.
Il progetto Next.js predefinito contiene alcuni file e directory “inutili”. Per ridurre le dimensioni del progetto, eliminare i seguenti:
- cartella pages/api
- cartella stili
- public/next.svg
- pubblico/vercel.svg
Inoltre, non dimenticate di rimuovere l’importazione di globals.css da pages/_app.js:
// pages/_app.js
import "@/styles/globals.css"; // remove this lineQuindi sostituire il contenuto di pages/index.js con il seguente:
// pages/index.js
export default function Home() {
return (
<>
<p>Hello world!</p>
</>
);
}Avviare il server di sviluppo Next:
$ next devInfine, aprite il browser web e visitate il sito http://localhost:3000. Se tutto funziona bene, l’applicazione dovrebbe essere compilata e si dovrebbe poter visualizzare il messaggio “Hello world!
Configurazione di ChakraUI
Per accelerare il processo di costruzione dell’interfaccia utente, utilizzeremo ChakraUI. ChakraUI è un’eccellente libreria React con componenti precostituiti, un sistema di stili, ganci specializzati e altro ancora.
Procedere all’installazione tramite NPM:
$ npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motionQuindi, avvolgere il componente con un ChakraProvider in questo modo:
// pages/_app.js
import {ChakraProvider} from "@chakra-ui/react";
function MyApp({Component, pageProps}) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;Non dimenticate di importarlo all’inizio del file:
import {ChakraProvider} from "@chakra-ui/react";Affinché Chakra funzioni correttamente, è necessario includere lo script della modalità colore. Questo script assicura che la sincronizzazione della memoria locale funzioni correttamente e rimuove i “lampi di colore”.
Modificare il file pages/_document.js in questo modo:
// 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>
);
}Questo è tutto per la configurazione iniziale dei Chakra.
Icone React
Per rendere la nostra applicazione un po’ più sofisticata, installeremo react-icons. React icons è una libreria che consente di includere rapidamente le icone più diffuse nei progetti. È dotata di icone Ant, Bootstrap, Heroicons, Font Awesome e altre ancora.
Installatelo eseguendo:
$ npm install react-icons --saveÈ quindi possibile importare qualsiasi icona e utilizzarla in questo modo:
import {FaMusic} from "react-icons/fa";
return (
<FaMusic/>
);Per l’elenco delle icone, consultare i documenti ufficiali.
Layout e componenti
La maggior parte dei social network ha un layout standardizzato. Tutte le pagine hanno la stessa intestazione in alto e lo stesso piè di pagina in basso. Implementiamo il nostro layout.
Si inizia creando una cartella denominata components nella radice del progetto. Quindi creare questi file al suo interno:
components/
├── header.js
├── footer.js
└── layout.jsQuindi, riempire il file header.js con quanto segue:
// 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>
);
}Poi fare lo stesso per il file 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>
);
}Non c’è molto da spiegare. Abbiamo usato i componenti integrati di Chakra per formare una bella intestazione e un piè di pagina. Poiché stiamo usando Next.js, abbiamo combinato il Link di Chakra con il Link di Next.
Infine, utilizzare il componente intestazione e piè di pagina appena creato per formare un 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/>
</>
);
}Quindi applicare il layout a index.js:
// pages/index.js
import Layout from "@/components/layout";
export default function Home() {
return (
<Layout>
<p>Hello world!</p>
</Layout>
);
}Attendere che il server di sviluppo Next ricompili il codice, quindi visitare http://localhost:3000. Se tutto è andato bene, si dovrebbe vedere che il nuovo layout è stato applicato.
Configurazione di Parse.js
Si inizia installando Parse tramite NPM:
$ npm install parseQuindi, aggiungere la seguente configurazione tra le importazioni di _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/";
// ...Invece di codificare le credenziali, abbiamo usato le variabili ambientali. Con Next.js, non è necessario configurare nulla per abilitare le variabili ambientali. Vengono caricate automaticamente dal file .env.local.
Creare il file .env.local nella radice del progetto con i seguenti contenuti:
NEXT_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>Assicurarsi di sostituire e con l’ID e la chiave reali. Per ottenere le credenziali, accedere all’app Back4app e selezionare “Impostazioni app > Sicurezza e chiavi” nella barra laterale.
Contesto
Invece di passare l’istanza di Parse attraverso più livelli della gerarchia dei componenti, useremo il contesto React. Il contesto React consente di “teletrasportare” i dati da un componente all’altro senza passarli tramite oggetti di scena.
Per prima cosa, creare una nuova cartella denominata context con il file parseContext.js al suo interno:
// context/parseContext.js
import {createContext} from "react";
const ParseContext = createContext();
export default ParseContext;Quindi avvolgere il componente con ParseContext.Provider e passargli l’istanza di Parse:
// pages/_app.js
// ...
function MyApp({Component, pageProps}) {
return (
<ChakraProvider>
<ParseContext.Provider value={Parse}>
<Component {...pageProps} />
</ParseContext.Provider>
</ChakraProvider>
);
}
export default MyApp;Ancora una volta, non dimenticate l’importazione di ParseContext:
import ParseContext from "@/context/parseContext";Ora possiamo ottenere l’istanza di Parse tramite l’hook useContext() nelle nostre viste. Testiamo la connessione a Parse in index.js.
Sostituire il contenuto di pages/index.js con il seguente:
// 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>
);
}Attendere che il server di sviluppo Next si ricompili e visitare http://localhost:3000. Aprire quindi la console e fare clic sul pulsante “Parse.js test”. Se tutto va bene, si dovrebbe ottenere il messaggio “Connessione riuscita”.
Autenticazione
Come indicato nella sezione “Che cos’è Back4app?”, Back4app dispone di un sistema di autenticazione integrato. Per impostare l’autenticazione dell’utente è sufficiente richiamare alcuni metodi. Anche la memorizzazione della sessione viene gestita automaticamente tramite Parse SDK.
Lavoriamo sui moduli di autenticazione degli utenti.
Iniziate creando una nuova pagina denominata signup.js e inserendovi quanto segue:
// 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>
);
}Questo codice crea una nuova pagina a /signup e rende il modulo di iscrizione. Per creare un account, gli utenti dovranno inserire il proprio nome utente e la password.
Quindi modificare pages/signup.js per includere la logica:
// 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 l’utente è già loggato, ora viene reindirizzato a
/tramite il ganciouseRouter()di Next. - Abbiamo modificato
onSubmit()per invocareUser.signUp(), creando la sessione utente e memorizzando il cookie sul browser dell’utente.
Fare lo stesso per il file pages/login.js. Prelevare il codice sorgente dal repo GitHub.
Bene, il sistema di autenticazione è più o meno pronto. L’ultima cosa da fare è modificare leggermente header.js per visualizzare l’utente loggato o i link di login/sign-up se non autenticato.
Modificare components/header.js in questo modo:
// 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>
);
}Attendere che il server di sviluppo Next venga ricompilato e testare il sistema di autenticazione. Provare a creare un account e verificare se l’intestazione cambia.
Non disponiamo ancora della funzionalità di logout, quindi dovrete cancellare manualmente i cookie se volete uscire.
Una volta creato un utente, è possibile navigare nella vista del database di Back4app e controllare le righe della classe User. Si vedrà che è stato aggiunto un nuovo utente.
Impostazioni utente
Rendiamo modificabili i campi description e avatarUrl che abbiamo aggiunto alla classe User.
Creare un nuovo file chiamato settings.js nella cartella 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>
);
}- Abbiamo usato l’hook
useEffect()di React per reindirizzare l’utente se non è autenticato. Inoltre, l’hook recupera ladescrizionee l’avatarUrldell’utente. - Abbiamo implementato il metodo
onSave(), che aggiorna le informazioni dell’utente con i dati di stato. - Abbiamo implementato il metodo
onLogout()che invoca illogOut()di Parse. IllogOut()di Parse cancella la sessione dal database e rimuove il cookie dal browser dell’utente.
Messaggi
L’ultima cosa da fare prima che il nostro semplice social network sia completo è implementare i post. Abbiamo già creato la classe del database. Ora non ci resta che creare un modulo per crearli e recuperarli dal database.
Per prima cosa, aggiungere un nuovo componente chiamato 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>
);
}Quindi modificare il file index.js in questo modo:
// 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>
);
}Quindi implementare il metodo onCreatePost() in questo modo:
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]);
};Infine, aggiungere il gancio useEffect() per recuperare i post:
useEffect(() => {
setUser(parse.User.current());
(async () => {
const posts = await new parse.Query("Post")
.include("author").descending("createdAt").find();
setPosts(posts);
})();
}, []);Per saperne di più sugli oggetti e sulle query di Parse, consultare la documentazione ufficiale di Parse.
Avviare nuovamente il server di sviluppo Next:
$ next startCreare alcuni post di esempio e aggiornare la pagina. Se tutto funziona bene, i post dovrebbero essere memorizzati nel database e recuperati quando si visita la pagina.
Conclusione
In questo articolo abbiamo costruito con successo una semplice applicazione per i social media. L’applicazione consente agli utenti di iscriversi, autenticarsi, modificare i propri profili e creare post.
A questo punto, dovreste aver capito bene come funziona Back4app e come iniziare a costruire la vostra rete sociale.
Il progetto che abbiamo costruito in questo articolo può servire come solida base per ulteriori sviluppi. Mettete alla prova le vostre conoscenze implementando nuove funzionalità, come ad esempio la funzione like/dislike, la funzionalità di condivisione e i commenti.
Il codice sorgente è disponibile sul repository GitHub di back4app-social-network.
Passi futuri
- Seguite questo articolo per distribuire il vostro frontend Next.js su Back4app Containers.
- Cercate le funzioni di Cloud Code per aggiungere funzionalità avanzate al vostro backend.
- Imporre la verifica dell’e-mail dell’utente al momento dell’iscrizione per combattere i bot.
