Comment développer une application pour les médias sociaux ?
Dans cet article, nous parlerons des réseaux sociaux, des types d’applications de médias sociaux, de leurs avantages et de leurs caractéristiques indispensables.
De plus, nous verrons comment créer un réseau social étape par étape. Nous utiliserons Back4app pour le backend et Next.js pour le frontend.
Contents
- 1 Qu’est-ce qu’un réseau social ?
- 2 Types d’applications de médias sociaux
- 3 Avantages du développement d’une application pour les médias sociaux
- 4 Caractéristiques indispensables d’une application de médias sociaux
- 5 Comment créer une application pour les médias sociaux ?
- 6 Conclusion
Un réseau social est une application de médias sociaux qui permet aux gens de se connecter et d’interagir les uns avec les autres.
Une fois que deux utilisateurs se sont connectés, ils peuvent partager leurs informations d’utilisateur, échanger des messages, des images, partager des messages, etc.
De nos jours, les applications de médias sociaux sont très populaires. Presque tout le monde est inscrit à au moins une application de médias sociaux. Selon l’étude de Buffer, les plateformes de médias sociaux les plus populaires sont les suivantes :
- Facebook (2,96 milliards d’UAM)
- YouTube (2,2 milliards d’utilisateurs)
- Instagram (2 milliards d’utilisateurs)
- TikTok (1 milliard d’utilisateurs)
- Snapchat (500 millions de MAU)
MAUs est l’abréviation de monthly active users (utilisateurs actifs mensuels). Il s’agit du nombre d’utilisateurs uniques qui interagissent avec votre plateforme de médias sociaux chaque mois.
Bien que le marché des applications de médias sociaux soit énorme, le développement d’une application de médias sociaux est une tâche difficile.
C’est l’un des projets informatiques les plus complexes qui soient. De nombreuses entreprises sous-estiment la difficulté de créer une application de réseau social, puis échouent lamentablement en essuyant des pertes considérables.
Types d’applications de médias sociaux
Comme indiqué dans la section précédente, un réseau social n’est qu’un des types d’applications de médias sociaux. Les autres types d’applications de médias sociaux sont les suivants :
- Réseaux de partage de médias (Instagram, TikTok, YouTube)
- Réseaux de partage de contenu (Pinterest, Tumblr, Flickr)
- Réseaux d’évaluation des consommateurs (Trustpilot, Angi, Choice)
- Réseaux de blogs et de publication (Medium, Twitter)
- Forums de discussion (Reddit, Quora, HackerNews)
- Réseaux relationnels (Tinder, Bumble)
Avantages du développement d’une application pour les médias sociaux
La création d’une application de médias sociaux offre plusieurs avantages. Il s’agit notamment des revenus publicitaires, de la monétisation, de la collecte d’informations précieuses sur les utilisateurs, d’analyses avancées, de parrainages avec d’autres entreprises, etc.
Un autre avantage des applications de médias sociaux est leur énorme valeur de revente. Si votre application connaît un certain succès (c’est-à-dire qu’elle dispose d’une base d’utilisateurs décente), vous pouvez rapidement la vendre à une autre entreprise. Par exemple, Twitter a été vendu pour 44 milliards de dollars et MySpace pour 87 millions de dollars.
Du point de vue du développeur, la création d’un simple réseau social permet de se familiariser avec les outils avec lesquels il travaille et donne un aperçu de la difficulté de créer quelque chose de ce type.
Caractéristiques indispensables d’une application de médias sociaux
Les fonctionnalités des applications de médias sociaux varient considérablement. Néanmoins, toute application de médias sociaux réussie comporte certaines caractéristiques essentielles.
Comptes d’utilisateurs
Toutes les applications de médias sociaux permettent aux utilisateurs de créer un compte. Une fois leur compte créé, les utilisateurs peuvent ajouter des informations personnelles et adapter l’application à leurs besoins. Par exemple, ils peuvent choisir les fonctionnalités qui leur plaisent, ajouter leurs centres d’intérêt, masquer des contenus spécifiques, etc.
Le meilleur avantage des comptes d’utilisateurs du point de vue de l’entreprise est qu’ils permettent d’établir un “profil d’utilisateur”. Par “profil d’utilisateur”, j’entends que vous déterminez ce qu’un utilisateur spécifique aime et avec qui il interagit, puis vous adaptez vos publicités en conséquence.
Connexion des utilisateurs
Les applications de médias sociaux permettent aux utilisateurs de se connecter, par exemple en ajoutant quelqu’un comme ami, en le suivant et en s’abonnant à lui. Une fois que deux utilisateurs sont connectés, leurs fils d’actualité sont modifiés en conséquence.
Partager le contenu
L’objectif de toute application de média social est de partager du contenu. Si votre application ne permet pas aux utilisateurs de partager rapidement du contenu, elle ne sera certainement pas un succès.
Lors de la mise en œuvre d’une application de médias sociaux, il convient de suivre les meilleures pratiques en matière d’interface utilisateur et d’interface utilisateur. Publier quelque chose devrait être aussi facile que d’appuyer sur un ou deux boutons.
Recherche et découverte
De bons algorithmes de recherche et de découverte font partie intégrante de toute application sociale réussie.
Votre application de médias sociaux doit permettre aux utilisateurs de trouver facilement le contenu qui les intéresse. En outre, votre application doit offrir un flux personnalisé et une fonctionnalité de recherche avancée.
Notifications
Vous devrez envisager de mettre en place des notifications push pour stimuler l’engagement et augmenter l’utilisation de l’application.
Les notifications push sont un canal de communication puissant qui vous permet d’avertir les utilisateurs lorsque quelque chose se produit, par exemple lorsqu’un ami publie un message, lorsqu’un événement se produit, lorsqu’ils n’ont pas utilisé l’application depuis un certain temps, etc.
Pour en savoir plus sur les notifications push et sur la manière de les intégrer dans votre projet, consultez la rubrique Qu’est-ce que les notifications push ?
Comment créer une application pour les médias sociaux ?
Dans cette section du tutoriel, nous allons voir comment construire une application de média social étape par étape. Nous utiliserons Back4app comme backend et React avec le framework Next.js sur le frontend.
Conditions préalables
Voici la pile technologique que nous utiliserons pour ce projet :
- Expérience avec JavaScript ES6.
- Expérience avec React/Next.js et les crochets React.
- Compréhension de base du Backend as a Service (BaaS).
- Node.js v16+ installé sur votre machine locale et un éditeur.
Qu’est-ce que Back4app ?
Back4app est un excellent backend low-code pour construire rapidement des applications web et mobiles modernes. Il est livré avec un certain nombre de fonctionnalités, notamment des bases de données en temps réel, la gestion des utilisateurs, des fonctions Cloud Code, des notifications push, des intégrations sociales, des API, des SDK, et bien plus encore !
En utilisant Back4app, vous pouvez externaliser la plupart des travaux de backend et vous concentrer sur votre logique d’entreprise et le frontend.
Vous n’aurez pas non plus à vous soucier de l’infrastructure sous-jacente ou de la mise à l’échelle de l’application. Back4app s’occupe de tout cela. C’est une excellente option pour accélérer le développement d’applications de médias sociaux.
Back4app offre un niveau gratuit qui est idéal pour les tests et le prototypage. Au fur et à mesure que votre application évolue, vous pouvez passer à des niveaux supérieurs avec des prix prévisibles.
- Extrêmement facile à utiliser.
- Système d’authentification intégré (y compris l’authentification sociale).
- notifications push et envoi facile d’e-mails.
- Capacités de mise à l’échelle et mise à l’échelle automatique.
Introduction du projet
Dans cet article, nous allons construire un réseau social simple. Le réseau social mis en place permettra aux utilisateurs de créer un compte, de s’authentifier, d’établir un profil et de créer des messages.
Nous utiliserons Back4app pour le backend, et React avec le framework Next.js pour le frontend afin de créer une application pour les médias sociaux.
Nous allons d’abord créer une application Back4app, mettre en place les modèles de base de données, puis passer à l’interface utilisateur.
Sur le frontend, nous devrons installer Parse SDK, mettre en place l’authentification, et travailler sur les vues spécifiques, par exemple la connexion, l’inscription, le profil.
Le produit final ressemblera à ceci :
Créer une application
Les étapes suivantes nécessitent que vous ayez un compte Back4app. Si vous n’en avez pas encore, créez-en un gratuitement.
Lorsque vous vous connectez à votre compte Back4app, votre liste d’applications s’affiche. Cliquez sur “Créer une nouvelle application” pour commencer le processus de création d’application.
Back4app vous permet de créer deux types d’applications :
- Backend en tant que service (BaaS)
- Conteneurs en tant que service (CaaS)
BaaS est une solution backend complète alimentée par Parse, tandis que CaaS est utilisé pour déployer des applications conteneurisées via Docker.
Puisque nous construisons un réseau social, nous utiliserons l’option “Backend as a Service”.
Ensuite, donnez à votre application un nom descriptif, sélectionnez “NoSQL” comme base de données et cliquez sur “Créer”.
Back4app prendra environ 2 minutes pour préparer tout ce qui est nécessaire à votre application. Une fois que c’est fait, vous serez redirigé vers la vue de la base de données de votre application.
Classes de base de données
Préparons la base de données pour le développement d’applications de médias sociaux.
Comme vous l’avez peut-être remarqué, deux classes sont déjà présentes dans la base de données. La première s’appelle User et la seconde Role. Par défaut, toutes les classes de Back4app contiennent les champs suivants :
+-----------+-------------------------------------------------------------------------+
| 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). |
+-----------+-------------------------------------------------------------------------+Modifions légèrement notre classe User en ajoutant les champs description et avatarUrl. Les utilisateurs pourront plus tard modifier ces deux champs dans leurs paramètres.
Cliquez sur le bouton “+ Colonne” en haut à droite de l’écran et ajoutez les deux champs suivants :
+-----------+-------------+--------------------+----------+
| Data type | Name | Default value | Required |
+-----------+-------------+--------------------+----------+
| String | description | Another cool user! | yes |
+-----------+-------------+--------------------+----------+
| String | avatarUrl | <some_image_url> | yes |
+-----------+-------------+--------------------+----------+Veillez à remplacer par une véritable url d’image, se terminant par .png, .jpg, ou .jpeg. Si vous n’avez pas d’idée, vous pouvez utiliser celle-ci.
Ensuite, créons une classe nommée Post. Chaque billet aura un auteur et un contenu textuel.
Utilisez le bouton “Créer une classe” en haut à gauche de l’écran pour lancer le processus de création de la classe. Appelez-la ” Poste", choisissez “Protégé” et cliquez sur “Créer une classe et ajouter des colonnes”.
Ajoutez-y ensuite les deux colonnes suivantes :
+-----------------+---------+---------------+----------+
| Data type | Name | Default value | Required |
+-----------------+---------+---------------+----------+
| Pointer -> User | author | <leave blank> | yes |
+-----------------+---------+---------------+----------+
| String | content | <leave blank> | yes |
+-----------------+---------+---------------+----------+
Sécurité de la base de données de Back4app
En ce qui concerne la sécurité de la base de données de Back4app, il y a deux façons de protéger les classes et les objets. Nous pouvons choisir parmi les suivantes :
- Autorisations au niveau de la classe (CLP)
- Niveaux de contrôle d’accès (ACL)
Les CLP se concentrent sur la définition des restrictions d’accès au niveau de la classe, ce qui permet un contrôle fin de l’accès aux données et de leur modification. À l’inverse, les ACL accordent ou restreignent l’accès à des objets spécifiques et sont basés sur des rôles ou des autorisations définis par l’utilisateur.
Pour en savoir plus sur la sécurité de Parse, consultez l’article Sécurité du serveur Parse.
Nous voulons que seuls les utilisateurs authentifiés puissent créer des messages, et que seul l’auteur du message puisse les mettre à jour et les supprimer. Pour ce faire, nous allons mettre en place des CLP Post.
Sélectionnez la classe Post dans la barre latérale, puis utilisez les trois points en haut à droite de l’écran et “Security > Class Level Permissions”. Définissez les CLP comme suit :
Voilà, c’est fait. Notre backend est maintenant terminé. Ce n’était pas trop difficile.
Code Frontend
Dans cette section de l’article, nous travaillerons sur la partie frontale de notre réseau social.
Projet Init
Commencez par utiliser l’outil create-next-app pour démarrer un nouveau projet 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.L’outil vous posera un certain nombre de questions. Je vous suggère de n’activer que ESLint, car nous n’utiliserons aucune des autres fonctionnalités proposées et elles rendront votre projet plus complexe.
Le projet Next.js par défaut est livré avec quelques fichiers et répertoires “inutiles”. Pour réduire la taille du projet, allez-y et supprimez ce qui suit :
- dossier pages/api
- dossier des styles
- public/next.svg
- public/vercel.svg
N’oubliez pas non plus de supprimer l’importation de globals.css dans pages/_app.js:
// pages/_app.js
import "@/styles/globals.css"; // remove this lineRemplacez ensuite le contenu de pages/index.js par ce qui suit :
// pages/index.js
export default function Home() {
return (
<>
<p>Hello world!</p>
</>
);
}Démarrer le serveur de développement Next :
$ next devEnfin, ouvrez votre navigateur web et rendez-vous sur http://localhost:3000. Si tout se passe bien, votre application devrait se compiler et vous devriez pouvoir voir le message “Hello world !
Configuration de ChakraUI
Pour accélérer le processus de construction de l’interface utilisateur, nous utiliserons ChakraUI. ChakraUI est une excellente bibliothèque React avec des composants préconstruits, un système stylé, des crochets spécialisés, et plus encore.
Allez-y et installez-le via NPM :
$ npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motionEnsuite, enveloppez votre composant avec un ChakraProvider comme suit :
// pages/_app.js
import {ChakraProvider} from "@chakra-ui/react";
function MyApp({Component, pageProps}) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;N’oubliez pas de l’importer en tête du fichier :
import {ChakraProvider} from "@chakra-ui/react";Pour que Chakra fonctionne correctement, nous devons inclure le script color mode. Ce script garantit que la synchronisation du stockage local fonctionne correctement et supprime les “flashs de couleur”.
Modifiez votre pages/_document.js comme suit :
// 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>
);
}C’est tout pour la configuration initiale des chakras.
Icônes React
Pour rendre notre application un peu plus fantaisiste, nous allons installer react-icons. React icons est une bibliothèque qui vous permet d’inclure rapidement des icônes populaires dans votre projet. Elle est livrée avec Ant, Bootstrap, Heroicons, Font Awesome icons, et bien d’autres.
Installez-le en exécutant :
$ npm install react-icons --saveVous pouvez ensuite importer n’importe quelle icône et l’utiliser comme suit :
import {FaMusic} from "react-icons/fa";
return (
<FaMusic/>
);Pour la liste des icônes, consultez la documentation officielle.
Disposition et composants
La plupart des réseaux sociaux ont une présentation standardisée. Toutes les pages ont le même en-tête en haut et le même pied de page en bas. Mettons en place notre mise en page.
Commencez par créer un dossier nommé components à la racine du projet. Créez ensuite les fichiers suivants dans ce dossier :
components/
├── header.js
├── footer.js
└── layout.jsEnsuite, remplissez le fichier header.js avec ce qui suit :
// 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>
);
}Faites ensuite de même pour le fichier 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>
);
}Il n’y a pas grand-chose à expliquer ici. Nous avons utilisé les composants intégrés de Chakra pour former un bel en-tête et un beau pied de page. Comme nous utilisons Next.js, nous avons combiné le Link de Chakra avec le Link de Next.
Enfin, utilisez les composants d’en-tête et de pied de page nouvellement créés pour former une mise en page :
// 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/>
</>
);
}Appliquez ensuite la mise en page à index.js:
// pages/index.js
import Layout from "@/components/layout";
export default function Home() {
return (
<Layout>
<p>Hello world!</p>
</Layout>
);
}Attendez que le serveur de développement Next recompile votre code, puis visitez http://localhost:3000. Si tout a bien fonctionné, vous devriez voir que la nouvelle mise en page a été appliquée.
Configuration de Parse.js
Commencez par installer Parse via NPM :
$ npm install parseEnsuite, ajoutez la configuration suivante sous les importations 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/";
// ...Au lieu de coder en dur les informations d’identification, nous avons utilisé des variables d’environnement. Avec Next.js, il n’est pas nécessaire de configurer quoi que ce soit pour activer les variables d’environnement. Elles sont automatiquement chargées à partir du fichier .env.local.
Créer un fichier .env.local à la racine du projet avec le contenu suivant :
NEXT_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>Veillez à remplacer et par votre identifiant et votre clé. Pour obtenir vos identifiants, naviguez dans votre application Back4app et sélectionnez “Paramètres de l’application > Sécurité et clés” dans la barre latérale.
Contexte
Au lieu de faire passer l’instance de Parse par plusieurs couches de la hiérarchie des composants, nous utiliserons le contexte React. Le contexte React vous permet de “téléporter” des données d’un composant à un autre sans les transmettre via des accessoires.
Tout d’abord, créez un nouveau dossier nommé context avec le fichier parseContext.js à l’intérieur :
// context/parseContext.js
import {createContext} from "react";
const ParseContext = createContext();
export default ParseContext;Enveloppez ensuite votre composant avec ParseContext.Provider et passez-lui l’instance de Parse:
// pages/_app.js
// ...
function MyApp({Component, pageProps}) {
return (
<ChakraProvider>
<ParseContext.Provider value={Parse}>
<Component {...pageProps} />
</ParseContext.Provider>
</ChakraProvider>
);
}
export default MyApp;Là encore, n’oubliez pas l’importation de ParseContext:
import ParseContext from "@/context/parseContext";Nous pouvons maintenant obtenir l’instance Parse via le hook useContext() dans nos vues. Testons la connexion Parse dans index.js.
Remplacez le contenu de pages/index.js par ce qui suit :
// 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>
);
}Attendez que le serveur de développement Next recompile et visite http://localhost:3000. Ouvrez ensuite la console et cliquez sur le bouton “Parse.js test”. Vous devriez obtenir le message “Connection successful” si tout se passe bien.
Authentification
Comme mentionné dans la section “Qu’est-ce que Back4app ?” Back4app a un système d’authentification intégré. La mise en place de l’authentification de l’utilisateur est aussi simple que d’appeler quelques méthodes. Même le stockage de la session est automatiquement géré par Parse SDK.
Travaillons sur les formulaires d’authentification des utilisateurs.
Commencez par créer une nouvelle page nommée signup.js et mettez-y ce qui suit :
// 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>
);
}Ce code crée une nouvelle page à l’adresse /signup et affiche le formulaire d’inscription. Pour créer un compte, les utilisateurs devront saisir leur nom d’utilisateur et leur mot de passe.
Modifiez ensuite le fichier pages/signup.js pour y inclure la logique :
// 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 (
// ...
);
}- Si l’utilisateur est déjà connecté, il sera maintenant redirigé vers
/via le hookuseRouter()de Next. - Nous avons modifié
onSubmit()pour invoquerUser.signUp(), créant ainsi la session de l’utilisateur et stockant le cookie sur le navigateur de l’utilisateur.
Faites de même pour le fichier pages/login.js. Téléchargez le code source depuis le dépôt GitHub.
Très bien, le système d’authentification est maintenant plus ou moins terminé. La dernière chose que nous allons faire est de modifier légèrement header.js pour afficher l’utilisateur connecté ou les liens de connexion/signature s’il n’est pas authentifié.
Modifiez le fichier components/header.js comme suit :
// 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>
);
}Attendez que le serveur de développement Next recompile et teste le système d’authentification. Essayez de créer un compte et vérifiez si l’en-tête change.
Nous ne disposons pas encore de la fonctionnalité de déconnexion, vous devrez donc supprimer manuellement les cookies si vous souhaitez vous déconnecter.
Une fois que vous avez créé un utilisateur, vous pouvez naviguer dans la vue de votre base de données Back4app et vérifier les lignes de la classe Utilisateur. Vous verrez qu’un nouvel utilisateur a été ajouté.
Paramètres de l’utilisateur
Rendons modifiables les champs description et avatarUrl que nous avons ajoutés à la classe User.
Créez un nouveau fichier nommé settings.js dans le répertoire 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>
);
}- Nous avons utilisé le hook
useEffect()de React pour rediriger l’utilisateur s’il n’est pas authentifié. De plus, le hook récupère ladescription del’utilisateur et l’avatarUrl. - Nous avons implémenté la méthode
onSave(), qui met à jour les informations de l’utilisateur avec les données de l’état. - Nous avons implémenté la méthode
onLogout()qui invoque laméthode logOut()de Parse. La méthodelogOut()de Parse supprime la session de la base de données et le cookie du navigateur de l’utilisateur.
Postes
La dernière chose que nous devons faire avant que notre réseau social simple ne soit complet est d’implémenter les posts. Nous avons déjà créé la classe de base de données. Il ne nous reste plus qu’à créer un formulaire pour les créer et les récupérer dans la base de données.
Tout d’abord, ajoutez un nouveau composant appelé 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>
);
}Ensuite, modifiez votre index.js comme suit :
// 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>
);
}Ensuite, implémentez la fonction onCreatePost() comme suit :
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]);
};Enfin, ajoutez le crochet useEffect() pour récupérer les messages :
useEffect(() => {
setUser(parse.User.current());
(async () => {
const posts = await new parse.Query("Post")
.include("author").descending("createdAt").find();
setPosts(posts);
})();
}, []);Pour en savoir plus sur les objets et les requêtes Parse, consultez la documentation officielle de Parse.
Redémarrez le serveur de développement Next :
$ next startCréez quelques exemples d’articles et actualisez la page. Si tout fonctionne bien, les messages devraient être stockés dans la base de données et récupérés lorsque vous visitez la page.
Conclusion
Dans cet article, nous avons construit avec succès une application simple de médias sociaux. L’application permet aux utilisateurs de s’inscrire, de s’authentifier, de modifier leur profil et de créer des messages.
Vous devriez maintenant avoir une bonne compréhension du fonctionnement de Back4app et de la façon de construire votre réseau social.
Le projet que nous avons construit dans cet article peut servir de base solide pour un développement ultérieur. Testez vos connaissances en mettant en œuvre de nouvelles fonctionnalités, par exemple la fonctionnalité “J’aime / Je n’aime pas”, la fonctionnalité “Partager” et les commentaires.
Le code source est disponible sur le dépôt GitHub de back4app-social-network.
Prochaines étapes
- Suivez cet article pour déployer votre frontend Next.js dans les conteneurs Back4app.
- Examinez les fonctions de Cloud Code pour ajouter des fonctionnalités avancées à votre backend.
- Renforcer la vérification de l’adresse électronique de l’utilisateur lors de l’inscription afin de lutter contre les robots.
