Gerenciamento de Perfil de Usuário e Configurações para Sua Rede Social

introdução neste tutorial, você aprenderá como implementar o gerenciamento de perfil de usuário e configurações para sua aplicação de rede social usando o back4app em vez de construir tudo do zero, você aproveitará as poderosas capacidades de gerenciamento de dados do back4app para armazenar e recuperar informações do perfil do usuário, lidar com uploads de avatares e gerenciar configurações de usuário ao final deste tutorial, você terá criado um sistema onde os usuários podem ver e atualizar suas informações de perfil fazer upload e gerenciar fotos de perfil configurar configurações de privacidade e notificações personalizar suas preferências de conta esses recursos são essenciais para qualquer rede social moderna, proporcionando aos usuários controle sobre sua identidade e experiência em sua plataforma pré requisitos para completar este tutorial, você precisará uma conta back4app você pode se inscrever para uma conta gratuita em back4app com https //www back4app com um projeto back4app configurado com o sdk parse um sistema de autenticação funcional você pode seguir nosso tutorial de sistema de autenticação com back4app se você ainda não implementou isso conhecimento básico de javascript, react js e conceitos modernos de desenvolvimento web projeto back4gram encontre aqui o código completo para um projeto de exemplo de rede social construído com back4app passo 1 – entendendo a estrutura de dados do perfil no back4app antes de mergulhar na implementação, vamos entender como os dados do perfil do usuário estão estruturados no back4app a classe parse user a classe parse user do back4app não é apenas para autenticação—ela também é perfeita para armazenar informações de perfil quando você cria um novo usuário, o back4app automaticamente cria uma entrada na classe user com campos padrão nome de usuário senha (armazenada de forma segura e não recuperável) email emailverificado authdata no entanto, o verdadeiro poder vem da extensão desta classe com campos personalizados para os dados do seu perfil bio auto descrição do usuário avatar foto de perfil (armazenada como um parse file) nomecompleto nome completo do usuário localização cidade/país do usuário site site pessoal do usuário social links para perfis de redes sociais preferências configurações e preferências do usuário configurando propriedades de usuário estendidas no seu painel do back4app, você pode adicionar esses campos personalizados à classe usuário navegue até banco de dados → navegador selecione a classe usuário clique em "adicionar uma nova coluna" defina o nome do campo (por exemplo, "bio") e o tipo (por exemplo, "string") \[imagem painel do back4app mostrando a adição de uma nova coluna à classe usuário] você pode acessar e atualizar esses campos através do parse sdk assim como qualquer outro objeto projeto back4gram encontre aqui o código completo para um projeto de amostra de rede social construído com back4app passo 2 – buscando dados do perfil do usuário o primeiro passo na implementação da gestão de perfil é buscar os dados do perfil do usuário atual obtendo o perfil do usuário atual back4app facilita a recuperação do usuário atualmente logado 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 demonstra como obter o objeto do usuário atual com parse user current() acessar propriedades embutidas com get('fieldname') lidar com campos opcionais com valores padrão acessar urls de arquivos para imagens de avatar no aplicativo back4gram, isso é implementado no profilepage js hook useeffect do 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]); projeto back4gram encontre aqui o código completo para um projeto de exemplo de rede social construído com back4app passo 3 – atualizando informações do perfil do usuário permitir que os usuários atualizem suas informações de perfil é um recurso fundamental da gestão de perfil atualizando campos do perfil quando um usuário envia informações de perfil atualizadas, você pode salvá las no back4app com 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 função obtém o objeto do usuário atual define os valores de campo atualizados salva as alterações no back4app no aplicativo back4gram, a atualização do perfil é implementada na handleupdateprofile função 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); } }; projeto back4gram encontre aqui o código completo para um projeto de exemplo de rede social construído com back4app passo 4 – lidando com uploads de imagens de perfil imagens de perfil são uma parte fundamental da identidade do usuário em redes sociais o back4app facilita o manuseio de arquivos com parse file fazendo upload de imagens de avatar para fazer o upload e salvar uma 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 cria um novo objeto parse file a partir do arquivo selecionado salva o arquivo no armazenamento do back4app associa o arquivo ao campo de avatar do usuário atualiza o objeto do usuário no banco de dados gerenciamento de arquivos no back4app quando você faz upload de arquivos com parse file, o back4app armazena o arquivo com segurança em seu armazenamento em nuvem gera uma url única para acessar o arquivo gerencia permissões de arquivo com base na acl do objeto pai gerencia a distribuição cdn para carregamento rápido isso torna muito mais simples do que construir seu próprio sistema de armazenamento e gerenciamento de arquivos passo 5 – implementando configurações do usuário além das informações básicas do perfil, as redes sociais geralmente oferecem várias configurações para privacidade, notificações e preferências armazenando configurações do usuário no back4app você tem duas abordagens principais para armazenar configurações do usuário 1\ usando campos da classe de usuário para configurações simples para configurações booleanas ou enumeradas diretas 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 configurações complexas para configurações mais complexas ou agrupadas, você pode usar um 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; } }; essa abordagem permite que você armazene configurações complexas e aninhadas em um único campo exemplo do settingspage js do back4gram no aplicativo back4gram, as configurações do usuário são gerenciadas no settingspage js componente as partes principais que interagem com o back4app incluem // 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 mostra como o back4gram busca as configurações do usuário atual do back4app fornece padrões para configurações ausentes atualiza apenas a categoria de configurações alteradas salva as alterações de volta no back4app projeto back4gram encontre aqui o código completo para um projeto de amostra de rede social construído com back4app passo 6 – recursos avançados configurações de segurança da conta a segurança é um aspecto crítico da gestão de perfis de usuário vamos implementar alguns recursos de segurança avançados para contas de usuário implementando a autenticação de dois fatores embora não esteja incluído no exemplo básico do back4gram, você pode implementar a autenticação de dois fatores com as cloud functions do 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 }; }); a partir da sua aplicação react, você pode chamar essas 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); } }; verificação de email back4app fornece suporte embutido para verificação de e mail você pode acionar um e mail de verificação 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 }; } }; mudança de senha permita que os usuários atualizem sua senha com a verificação adequada 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 }; } }; em uma aplicação de produção, você deve implementar isso de forma segura com uma função em nuvem para evitar expor a combinação de nome de usuário/senha passo 7 – consultando perfis de usuário para recursos sociais as redes sociais precisam permitir que os usuários visualizem os perfis de outros usuários aqui está como consultar e exibir perfis de usuários com o back4app buscando perfis de outros usuários 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 função cria uma consulta para a classe parse user recupera um usuário específico pelo id respeita as configurações de privacidade retorna dados apropriados com base na visibilidade implementando a busca de usuários para permitir que os usuários encontrem outros perfis 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 \[]; } }; no aplicativo back4gram, a busca de usuários é implementada em 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); } }; projeto back4gram encontre aqui o código completo para um projeto de exemplo de rede social construído com back4app conclusão neste tutorial, você aprendeu como implementar um gerenciamento abrangente de perfis de usuário e configurações com back4app você viu como estruturar dados do perfil do usuário na classe user do back4app buscar e atualizar informações do perfil usando o parse sdk gerenciar uploads de arquivos para fotos de perfil com parse file implementar configurações do usuário para privacidade e preferências adicionar recursos de segurança como autenticação de dois fatores e verificação de e mail consultar perfis de usuários para recursos de rede social os poderosos recursos de gerenciamento de dados do back4app facilitam a criação de sistemas de perfil robustos sem a necessidade de construir uma infraestrutura de backend complexa do zero ao usar a classe parse user e estendê la com campos personalizados, você pode rapidamente criar um sistema de perfil de usuário flexível para sua rede social próximos passos implementar conexões sociais como seguir/seguidores usando relações do parse adicionar feeds de atividade para mostrar ações do usuário usando consultas do parse construir mensagens diretas entre usuários com live query para atualizações em tempo real implementar moderação de conteúdo para conteúdo gerado pelo usuário com funções em nuvem com o back4app como seu serviço de backend, você pode se concentrar em criar experiências de usuário envolventes em vez de construir uma infraestrutura complexa para o código completo da aplicação de rede social back4gram, incluindo gerenciamento de perfil e configurações, você pode conferir o repositório do github https //github com/templates back4app/back4gram