Gestión del Perfil de Usuario y Configuraciones para Tu Red Social

introducción en este tutorial, aprenderás cómo implementar la gestión de perfiles de usuario y configuraciones para tu aplicación de red social utilizando back4app en lugar de construir todo desde cero, aprovecharás las potentes capacidades de gestión de datos de back4app para almacenar y recuperar información del perfil de usuario, manejar las cargas de avatares y gestionar la configuración del usuario al final de este tutorial, habrás creado un sistema donde los usuarios pueden ver y actualizar su información de perfil cargar y gestionar fotos de perfil configurar la privacidad y las configuraciones de notificación personalizar sus preferencias de cuenta estas características son esenciales para cualquier red social moderna, proporcionando a los usuarios control sobre su identidad y experiencia en tu plataforma requisitos previos para completar este tutorial, necesitarás una cuenta de back4app puedes registrarte para obtener una cuenta gratuita en back4app com https //www back4app com un proyecto de back4app configurado con el sdk de parse un sistema de autenticación funcional puedes seguir nuestro tutorial del sistema de autenticación con back4app si aún no lo has implementado conocimientos básicos de javascript, react js y conceptos modernos de desarrollo web proyecto back4gram encuentra aquí el código completo para un proyecto de muestra de red social construido con back4app paso 1 – entendiendo la estructura de datos del perfil en back4app antes de sumergirnos en la implementación, entendamos cómo se estructura la información del perfil de usuario en back4app la clase parse user la clase parse user de back4app no es solo para autenticación, también es perfecta para almacenar información de perfil cuando creas un nuevo usuario, back4app crea automáticamente una entrada en la clase user con campos predeterminados nombre de usuario contraseña (almacenada de forma segura y no recuperable) correo electrónico correoverificado authdata sin embargo, el verdadero poder proviene de extender esta clase con campos personalizados para tus datos de perfil biografía autodescripción del usuario avatar foto de perfil (almacenada como un parse file) nombrecompleto nombre completo del usuario ubicación ciudad/país del usuario sitio web sitio web personal del usuario social enlaces a perfiles de redes sociales preferencias configuraciones y preferencias del usuario configuración de propiedades de usuario extendidas en tu panel de back4app, puedes agregar estos campos personalizados a la clase usuario navega a base de datos → navegador selecciona la clase usuario haz clic en "agregar una nueva columna" define el nombre del campo (por ejemplo, "bio") y el tipo (por ejemplo, "string") \[imagen panel de back4app mostrando la adición de una nueva columna a la clase usuario] puedes acceder y actualizar estos campos a través del sdk de parse como cualquier otro objeto proyecto back4gram encuentra aquí el código completo para un proyecto de muestra de red social construido con back4app paso 2 – recuperando datos del perfil del usuario el primer paso en la implementación de la gestión de perfiles es recuperar los datos del perfil del usuario actual obteniendo el perfil del usuario actual back4app facilita la recuperación del usuario actualmente conectado 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 } }; este código demuestra cómo obtener el objeto del usuario actual con parse user current() acceder a propiedades integradas con get('fieldname') manejar campos opcionales con valores por defecto acceder a las url de archivos para imágenes de avatar en la aplicación back4gram, esto se implementa en el profilepage js gancho useeffect del componente 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]); proyecto back4gram encuentra aquí el código completo para un proyecto de muestra de red social construido con back4app paso 3 – actualización de la información del perfil del usuario permitir a los usuarios actualizar su información de perfil es una característica fundamental de la gestión de perfiles actualización de campos del perfil cuando un usuario envía información de perfil actualizada, puedes guardarla en back4app con 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; } }; esta función obtiene el objeto de usuario actual establece los valores de campo actualizados guarda los cambios en back4app en la aplicación back4gram, la actualización del perfil se implementa en la handleupdateprofile función 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); } }; proyecto back4gram encuentra aquí el código completo para un proyecto de muestra de red social construido con back4app paso 4 – manejo de cargas de imágenes de perfil las imágenes de perfil son una parte clave de la identidad del usuario en las redes sociales back4app facilita el manejo de archivos con parse file cargando imágenes de avatar para subir y guardar una foto de perfil 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; } }; este código crea un nuevo objeto parse file a partir del archivo seleccionado guarda el archivo en el almacenamiento de back4app asocia el archivo con el campo de avatar del usuario actualiza el objeto del usuario en la base de datos gestión de archivos en back4app cuando subes archivos con parse file, back4app almacena el archivo de forma segura en su almacenamiento en la nube genera una url única para acceder al archivo gestiona los permisos de archivo según el acl del objeto padre maneja la distribución cdn para una carga rápida esto lo hace mucho más simple que construir su propio sistema de almacenamiento y gestión de archivos paso 5 – implementación de configuraciones de usuario más allá de la información básica del perfil, las redes sociales suelen ofrecer varias configuraciones para la privacidad, notificaciones y preferencias almacenando configuraciones de usuario en back4app tienes dos enfoques principales para almacenar configuraciones de usuario 1\ usando campos de clase de usuario para configuraciones simples para configuraciones booleanas o enumeradas sencillas 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\ usando objetos json para configuraciones complejas para configuraciones más complejas o agrupadas, puedes usar un objeto 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; } }; este enfoque te permite almacenar configuraciones complejas y anidadas en un solo campo ejemplo de settingspage js de back4gram en la aplicación back4gram, la configuración del usuario se gestiona en el settingspage js componente las partes clave que interactúan con back4app incluyen // 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 } }; este código muestra cómo back4gram obtiene la configuración del usuario actual de back4app proporciona valores predeterminados para configuraciones faltantes actualiza solo la categoría de configuración cambiada guarda los cambios de nuevo en back4app proyecto back4gram encuentra aquí el código completo para un proyecto de muestra de red social construido con back4app paso 6 – características avanzadas configuración de seguridad de la cuenta la seguridad es un aspecto crítico de la gestión del perfil de usuario implementemos algunas características de seguridad avanzadas para las cuentas de usuario implementación de la autenticación de dos factores aunque no está incluido en el ejemplo básico de back4gram, puedes implementar la autenticación de dos factores con las funciones en la nube 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 }; }); desde tu aplicación react, puedes llamar a estas funciones en la nube 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); } }; verificación de correo electrónico back4app proporciona soporte integrado para la verificación de correo electrónico puedes activar un correo electrónico de verificación 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 }; } }; cambio de contraseña permitir a los usuarios actualizar su contraseña con la verificación adecuada 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 }; } }; en una aplicación de producción, deberías implementar esto de manera segura con una función en la nube para evitar exponer la combinación de nombre de usuario/contraseña paso 7 – consultando perfiles de usuario para funciones sociales las redes sociales necesitan permitir a los usuarios ver los perfiles de otros usuarios aquí te mostramos cómo consultar y mostrar perfiles de usuario con back4app obteniendo perfiles de otros usuarios 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; } }; esta función crea una consulta para la clase parse user recupera un usuario específico por id respeta las configuraciones de privacidad devuelve los datos apropiados según la visibilidad implementando búsqueda de usuarios para permitir que los usuarios encuentren otros perfiles 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 \[]; } }; en la aplicación back4gram, la búsqueda de usuarios se implementa en 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); } }; proyecto back4gram encuentra aquí el código completo para un proyecto de muestra de red social construido con back4app conclusión en este tutorial, has aprendido cómo implementar una gestión integral de perfiles de usuario y configuraciones con back4app has visto cómo estructura los datos del perfil de usuario en la clase user de back4app recupera y actualiza la información del perfil utilizando el sdk de parse maneja las cargas de archivos para fotos de perfil con parse file implementa la configuración del usuario para privacidad y preferencias agrega características de seguridad como autenticación de dos factores y verificación de correo electrónico consulta perfiles de usuario para características de redes sociales las potentes características de gestión de datos de back4app facilitan la creación de sistemas de perfil robustos sin necesidad de construir una infraestructura de backend compleja desde cero al utilizar la clase parse user y extenderla con campos personalizados, puedes crear rápidamente un sistema de perfil de usuario flexible para tu red social próximos pasos implementa conexiones sociales como seguir/seguidores utilizando relaciones de parse agrega feeds de actividad para mostrar acciones de usuario utilizando consultas de parse construye mensajería directa entre usuarios con live query para actualizaciones en tiempo real implementa moderación de contenido para contenido generado por usuarios con cloud functions con back4app como tu servicio de backend, puedes concentrarte en crear experiencias de usuario atractivas en lugar de construir una infraestructura compleja para el código completo de la aplicación de red social back4gram, incluyendo la gestión de perfiles y configuraciones, puedes consultar el repositorio de github https //github com/templates back4app/back4gram