Gestion des profils d'utilisateur et des paramètres pour votre réseau social

introduction dans ce tutoriel, vous apprendrez à mettre en œuvre la gestion des profils utilisateurs et des paramètres pour votre application de réseau social en utilisant back4app au lieu de tout construire à partir de zéro, vous tirerez parti des puissantes capacités de gestion des données de back4app pour stocker et récupérer les informations de profil utilisateur, gérer les téléchargements d'avatar et gérer les paramètres utilisateur à la fin de ce tutoriel, vous aurez créé un système où les utilisateurs peuvent voir et mettre à jour leurs informations de profil télécharger et gérer des photos de profil configurer les paramètres de confidentialité et de notification personnaliser leurs préférences de compte ces fonctionnalités sont essentielles pour tout réseau social moderne, offrant aux utilisateurs un contrôle sur leur identité et leur expérience sur votre plateforme prérequis pour compléter ce tutoriel, vous aurez besoin de un compte back4app vous pouvez vous inscrire pour un compte gratuit sur back4app com https //www back4app com un projet back4app configuré avec le sdk parse un système d'authentification fonctionnel vous pouvez suivre notre tutoriel sur le système d'authentification avec back4app si vous ne l'avez pas encore mis en œuvre connaissances de base en javascript, react js et concepts modernes de développement web projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 1 – comprendre la structure des données de profil dans back4app avant de plonger dans l'implémentation, comprenons comment les données de profil utilisateur sont structurées dans back4app la classe parse user la classe parse user de back4app n'est pas seulement pour l'authentification—elle est également parfaite pour stocker des informations de profil lorsque vous créez un nouvel utilisateur, back4app crée automatiquement une entrée dans la classe user avec des champs par défaut nom d'utilisateur mot de passe (stocké en toute sécurité et non récupérable) email emailvérifié authdata cependant, le véritable pouvoir vient de l'extension de cette classe avec des champs personnalisés pour vos données de profil bio auto description de l'utilisateur avatar photo de profil (stockée en tant que parse file) nomcomplet nom complet de l'utilisateur emplacement ville/pays de l'utilisateur siteweb site personnel de l'utilisateur social liens vers les profils de réseaux sociaux préférences paramètres et préférences de l'utilisateur configuration des propriétés utilisateur étendues dans votre tableau de bord back4app, vous pouvez ajouter ces champs personnalisés à la classe utilisateur accédez à base de données → navigateur sélectionnez la classe utilisateur cliquez sur "ajouter une nouvelle colonne" définissez le nom du champ (par exemple, "bio") et le type (par exemple, "string") \[image tableau de bord back4app montrant l'ajout d'une nouvelle colonne à la classe utilisateur] vous pouvez accéder et mettre à jour ces champs via le sdk parse comme n'importe quel autre objet projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 2 – récupération des données de profil utilisateur la première étape de la gestion des profils consiste à récupérer les données de profil de l'utilisateur actuel obtenir le profil de l'utilisateur actuel back4app facilite la récupération de l'utilisateur actuellement connecté const fetchuserprofile = async () => { try { // get the current user object const currentuser = await parse user current(); if (!currentuser) { // handle the case where no user is logged in navigate('/login'); return; } // access user properties const username = currentuser get('username'); const email = currentuser get('email'); const bio = currentuser get('bio') || ''; const fullname = currentuser get('fullname') || ''; // get avatar if available const avatar = currentuser get('avatar'); const avatarurl = avatar ? avatar url() null; // set state with user data setuserdata({ username, email, bio, fullname, avatarurl }); } catch (error) { console error('error fetching user profile ', error); // handle error appropriately } }; ce code démontre comment obtenir l'objet utilisateur actuel avec parse user current() accéder aux propriétés intégrées avec get('fieldname') gérer les champs optionnels avec des valeurs par défaut accéder aux url de fichiers pour les images d'avatar dans l'application back4gram, cela est implémenté dans le profilepage js hook useeffect du composant useeffect(() => { const loadprofile = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } setuser({ id currentuser id, username currentuser get('username'), email currentuser get('email'), bio currentuser get('bio') || '', avatar currentuser get('avatar') ? currentuser get('avatar') url() null }); // set stats setstats({ posts userposts length, followers currentuser get('followers') || 0, following currentuser get('following') || 0 }); setisloading(false); } catch (error) { // error handling } }; loadprofile(); }, \[navigate]); projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 3 – mise à jour des informations du profil utilisateur permettre aux utilisateurs de mettre à jour leurs informations de profil est une fonctionnalité essentielle de la gestion des profils mise à jour des champs de profil lorsqu'un utilisateur soumet des informations de profil mises à jour, vous pouvez les enregistrer dans back4app avec const updateprofile = async (profiledata) => { try { const user = await parse user current(); if (!user) return false; // update user fields user set('fullname', profiledata fullname); user set('bio', profiledata bio); user set('website', profiledata website); user set('location', profiledata location); // save changes to back4app await user save(); return true; } catch (error) { console error('error updating profile ', error); return false; } }; cette fonction obtient l'objet utilisateur actuel définit les valeurs de champ mises à jour enregistre les modifications dans back4app dans l'application back4gram, la mise à jour du profil est implémentée dans le handleupdateprofile fonction const handleupdateprofile = async (e) => { e preventdefault(); setisupdating(true); try { if (!user) return; user set('username', username); user set('email', email); user set('bio', bio); // handle avatar upload if a file is selected if (selectedfile) { const parsefile = new parse file(selectedfile name, selectedfile); await parsefile save(); user set('avatar', parsefile); } await user save(); toaster create({ title 'success', description 'profile updated successfully', type 'success', }); } catch (error) { console error('error updating profile ', error); // handle error } finally { setisupdating(false); } }; projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 4 – gestion des téléchargements de photos de profil les photos de profil sont une partie clé de l'identité des utilisateurs dans les réseaux sociaux back4app facilite la gestion des fichiers avec parse file téléchargement d'images d'avatar pour télécharger et enregistrer une photo de profil const uploadavatar = async (file) => { try { const user = await parse user current(); if (!user || !file) return null; // create a parse file const parsefile = new parse file(file name, file); // save the file to back4app await parsefile save(); // update the user's avatar field user set('avatar', parsefile); await user save(); // return the file url return parsefile url(); } catch (error) { console error('error uploading avatar ', error); return null; } }; ce code crée un nouvel objet parse file à partir du fichier sélectionné enregistre le fichier dans le stockage de back4app associe le fichier au champ avatar de l'utilisateur met à jour l'objet utilisateur dans la base de données gestion des fichiers dans back4app lorsque vous téléchargez des fichiers avec parse file, back4app stocke le fichier en toute sécurité dans son stockage cloud génère une url unique pour accéder au fichier gère les permissions de fichier en fonction de l'acl de l'objet parent gère la distribution cdn pour un chargement rapide cela rend les choses beaucoup plus simples que de construire votre propre système de stockage et de gestion de fichiers étape 5 – mise en œuvre des paramètres utilisateur au delà des informations de profil de base, les réseaux sociaux offrent généralement divers paramètres pour la confidentialité, les notifications et les préférences stockage des paramètres utilisateur dans back4app vous avez deux approches principales pour stocker les paramètres utilisateur 1\ utiliser les champs de classe utilisateur pour des paramètres simples pour des paramètres booléens ou énumérés simples const updateprivacysettings = async (settings) => { try { const user = await parse user current(); if (!user) return false; // update privacy settings user set('profilevisibility', settings profilevisibility); // 'public', 'friends', 'private' user set('allowdirectmessages', settings allowdirectmessages); // boolean user set('showonlinestatus', settings showonlinestatus); // boolean await user save(); return true; } catch (error) { console error('error updating privacy settings ', error); return false; } }; 2\ utilisation des objets json pour des paramètres complexes pour des paramètres plus complexes ou groupés, vous pouvez utiliser un objet json const updateallsettings = async (settingsdata) => { try { const user = await parse user current(); if (!user) return false; // store all settings as a json object user set('usersettings', { privacy { profilevisibility settingsdata profilevisibility, allowdirectmessages settingsdata allowdirectmessages, showonlinestatus settingsdata showonlinestatus }, notifications { emailnotifications settingsdata emailnotifications, pushnotifications settingsdata pushnotifications, mentionalerts settingsdata mentionalerts }, theme { darkmode settingsdata darkmode, fontsize settingsdata fontsize, accentcolor settingsdata accentcolor } }); await user save(); return true; } catch (error) { console error('error updating settings ', error); return false; } }; cette approche vous permet de stocker des paramètres complexes et imbriqués dans un seul champ exemple du settingspage js de back4gram dans l'application back4gram, les paramètres de l'utilisateur sont gérés dans le settingspage js composant les parties clés qui interagissent avec back4app incluent // fetching current settings useeffect(() => { const fetchsettings = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } const usersettings = currentuser get('usersettings') || {}; setprivacysettings({ profilevisibility usersettings privacy? profilevisibility || 'public', postprivacy usersettings privacy? postprivacy || 'friends' }); setnotificationsettings({ emailnotifications usersettings notifications? emailnotifications || false, pushnotifications usersettings notifications? pushnotifications || false }); // other settings } catch (error) { console error('error fetching settings ', error); } }; fetchsettings(); }, \[navigate]); // saving settings const savesettings = async (settingtype, settingdata) => { try { const user = await parse user current(); if (!user) return; // get current settings or initialize if none exist const currentsettings = user get('usersettings') || {}; // update only the specific settings category const updatedsettings = { currentsettings, \[settingtype] settingdata }; // save updated settings user set('usersettings', updatedsettings); await user save(); toaster create({ title 'settings saved', description 'your preferences have been updated ', type 'success', }); } catch (error) { console error('error saving settings ', error); // handle error } }; ce code montre comment back4gram récupère les paramètres de l'utilisateur actuel depuis back4app fournit des valeurs par défaut pour les paramètres manquants met à jour uniquement la catégorie de paramètres modifiée enregistre les modifications dans back4app projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app étape 6 – fonctionnalités avancées paramètres de sécurité du compte la sécurité est un aspect critique de la gestion des profils utilisateurs mettons en œuvre quelques fonctionnalités de sécurité avancées pour les comptes utilisateurs mise en œuvre de l'authentification à deux facteurs bien que non inclus dans l'exemple de base de back4gram, vous pouvez mettre en œuvre l'authentification à deux facteurs avec les cloud functions de back4app // cloud function to enable 2fa parse cloud define("enable2fa", async (request) => { if (!request user) throw new error("user must be logged in"); // generate a secret key for the user const secret = generatetotpsecret(); // save the secret to the user object request user set("totpsecret", secret); await request user save(null, { usemasterkey true }); // return the secret and qr code data for setup return { secret secret, qrcode generateqrcodeuri(secret, request user get("email")) }; }); // cloud function to verify 2fa code parse cloud define("verify2facode", async (request) => { if (!request user) throw new error("user must be logged in"); const { code } = request params; // get the user's secret const secret = request user get("totpsecret"); // verify the provided code const isvalid = verifytotpcode(code, secret); if (!isvalid) { throw new error("invalid verification code"); } // mark 2fa as enabled request user set("is2faenabled", true); await request user save(null, { usemasterkey true }); return { success true }; }); depuis votre application react, vous pouvez appeler ces cloud functions const enable2fa = async () => { try { const result = await parse cloud run("enable2fa"); // show qr code setup to user setqrcodedata(result qrcode); settwofactorsecret(result secret); } catch (error) { console error("error enabling 2fa ", error); } }; const verify2fasetup = async (code) => { try { await parse cloud run("verify2facode", { code }); // 2fa successfully set up setis2faenabled(true); } catch (error) { console error("error verifying 2fa code ", error); } }; vérification par e mail back4app fournit un support intégré pour la vérification par e mail vous pouvez déclencher un e mail de vérification const sendverificationemail = async () => { try { const user = await parse user current(); if (user get('emailverified')) { return { success false, message 'email already verified' }; } await parse user requestemailverification(user get('email')); return { success true }; } catch (error) { console error('error sending verification email ', error); return { success false, error error message }; } }; changement de mot de passe permettre aux utilisateurs de mettre à jour leur mot de passe avec une vérification appropriée const changepassword = async (currentpassword, newpassword) => { try { const user = await parse user current(); // verify current password by trying to login await parse user login(user get('username'), currentpassword); // if login succeeded, update password user set('password', newpassword); await user save(); return { success true }; } catch (error) { console error('error changing password ', error); return { success false, error error message }; } }; dans une application de production, vous devriez implémenter cela de manière sécurisée avec une fonction cloud pour éviter d'exposer la combinaison nom d'utilisateur/mot de passe étape 7 – interrogation des profils d'utilisateur pour des fonctionnalités sociales les réseaux sociaux doivent permettre aux utilisateurs de voir les profils des autres utilisateurs voici comment interroger et afficher les profils des utilisateurs avec back4app récupération des profils d'autres utilisateurs const fetchuserprofile = async (userid) => { try { const query = new parse query(parse user); // include any pointer fields you want to retrieve query include('settings'); const user = await query get(userid); // check privacy settings const profilevisibility = user get('profilevisibility') || 'public'; const currentuser = await parse user current(); // if profile is private and not viewed by the owner if (profilevisibility === 'private' && (!currentuser || currentuser id !== user id)) { return { id user id, username user get('username'), avatar user get('avatar') ? user get('avatar') url() null, isprivate true }; } // return public profile data return { id user id, username user get('username'), fullname user get('fullname'), bio user get('bio'), avatar user get('avatar') ? user get('avatar') url() null, followerscount user get('followerscount') || 0, followingcount user get('followingcount') || 0, isprivate false }; } catch (error) { console error('error fetching user profile ', error); return null; } }; cette fonction crée une requête pour la classe parse user récupère un utilisateur spécifique par id respecte les paramètres de confidentialité retourne les données appropriées en fonction de la visibilité mise en œuvre de la recherche d'utilisateurs pour permettre aux utilisateurs de trouver d'autres profils const searchusers = async (searchterm) => { try { const query = new parse query(parse user); // create a compound query for username or full name const usernamequery = new parse query(parse user); usernamequery contains('username', searchterm); const fullnamequery = new parse query(parse user); fullnamequery contains('fullname', searchterm); // combine queries with or query orquery(\[usernamequery, fullnamequery]); // only return public profiles query equalto('profilevisibility', 'public'); // limit to 20 results and skip private fields query limit(20); query select(\['username', 'fullname', 'avatar']); const results = await query find(); // format results return results map(user => ({ id user id, username user get('username'), fullname user get('fullname'), avatar user get('avatar') ? user get('avatar') url() null })); } catch (error) { console error('error searching users ', error); return \[]; } }; dans l'application back4gram, la recherche d'utilisateurs est implémentée dans searchpage js const handlesearch = async (query) => { if (!query trim()) return; setisloading(true); try { // search for users const userquery = new parse query(parse user); userquery contains('username', query); userquery limit(10); const userresults = await userquery find(); const foundusers = userresults map(user => ({ id user id, username user get('username'), avatar user get('avatar') ? user get('avatar') url() null })); setusers(foundusers); } catch (error) { console error('error searching ', error); // handle error } finally { setisloading(false); } }; projet back4gram trouvez ici le code complet pour un exemple de projet de réseau social construit avec back4app conclusion dans ce tutoriel, vous avez appris comment mettre en œuvre une gestion complète des profils et des paramètres des utilisateurs avec back4app vous avez vu comment structure des données de profil utilisateur dans la classe utilisateur de back4app récupérer et mettre à jour les informations de profil en utilisant le sdk parse gérer les téléchargements de fichiers pour les photos de profil avec parse file implémenter les paramètres utilisateur pour la confidentialité et les préférences ajouter des fonctionnalités de sécurité comme l'authentification à deux facteurs et la vérification par e mail interroger les profils utilisateurs pour les fonctionnalités de réseau social les puissantes fonctionnalités de gestion des données de back4app facilitent la création de systèmes de profil robustes sans avoir à construire une infrastructure backend complexe à partir de zéro en utilisant la classe parse user et en l'étendant avec des champs personnalisés, vous pouvez rapidement créer un système de profil utilisateur flexible pour votre réseau social prochaines étapes implémenter des connexions sociales comme suivre/abonnés en utilisant les relations parse ajouter des fils d'activité pour montrer les actions des utilisateurs en utilisant les requêtes parse construire la messagerie directe entre les utilisateurs avec live query pour des mises à jour en temps réel implémenter la modération de contenu pour le contenu généré par les utilisateurs avec des fonctions cloud avec back4app comme service backend, vous pouvez vous concentrer sur la création d'expériences utilisateur engageantes plutôt que sur la construction d'une infrastructure complexe pour le code complet de l'application de réseau social back4gram, y compris la gestion des profils et des paramètres, vous pouvez consulter le dépôt github https //github com/templates back4app/back4gram