Gestione del profilo utente e delle impostazioni per il tuo social network

introduzione in questo tutorial, imparerai come implementare la gestione del profilo utente e delle impostazioni per la tua applicazione di social network utilizzando back4app invece di costruire tutto da zero, sfrutterai le potenti capacità di gestione dei dati di back4app per memorizzare e recuperare le informazioni del profilo utente, gestire i caricamenti degli avatar e gestire le impostazioni degli utenti alla fine di questo tutorial, avrai creato un sistema in cui gli utenti possono visualizzare e aggiornare le proprie informazioni di profilo caricare e gestire le foto del profilo configurare le impostazioni di privacy e notifiche personalizzare le preferenze del proprio account queste funzionalità sono essenziali per qualsiasi social network moderno, fornendo agli utenti il controllo sulla propria identità e esperienza sulla tua piattaforma requisiti per completare questo tutorial, avrai bisogno di un account back4app puoi registrarti per un account gratuito su back4app com https //www back4app com un progetto back4app configurato con il parse sdk un sistema di autenticazione funzionante puoi seguire il nostro tutorial sul sistema di autenticazione con back4app se non l'hai ancora implementato conoscenze di base di javascript, react js e concetti moderni di sviluppo web progetto back4gram trova qui il codice completo per un progetto campione di social network costruito con back4app passo 1 – comprendere la struttura dei dati del profilo in back4app prima di immergerci nell'implementazione, comprendiamo come sono strutturati i dati del profilo utente in back4app la classe parse user la classe parse user di back4app non è solo per l'autenticazione—è anche perfetta per memorizzare informazioni sul profilo quando crei un nuovo utente, back4app crea automaticamente un'entrata nella classe utente con i campi predefiniti nome utente password (memorizzata in modo sicuro e non recuperabile) email emailverificata authdata tuttavia, il vero potere deriva dall'estensione di questa classe con campi personalizzati per i dati del tuo profilo bio autodescrizione dell'utente avatar immagine del profilo (memorizzata come un parse file) nomecompleto nome completo dell'utente posizione città/paese dell'utente sito web sito web personale dell'utente social link ai profili dei social media preferenze impostazioni e preferenze dell'utente impostazione delle proprietà utente estese nel tuo dashboard di back4app, puoi aggiungere questi campi personalizzati alla classe utente naviga su database → browser seleziona la classe utente clicca su "aggiungi una nuova colonna" definisci il nome del campo (ad es , "bio") e il tipo (ad es , "string") \[immagine dashboard di back4app che mostra l'aggiunta di una nuova colonna alla classe utente] puoi accedere e aggiornare questi campi tramite il parse sdk proprio come qualsiasi altro oggetto progetto back4gram trova qui il codice completo per un progetto campione di social network realizzato con back4app passo 2 – recupero dei dati del profilo utente il primo passo nell'implementazione della gestione del profilo è recuperare i dati del profilo dell'utente attuale ottenere il profilo dell'utente attuale back4app rende facile recuperare l'utente attualmente connesso 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 } }; questo codice dimostra come ottenere l'oggetto utente attuale con parse user current() accedere alle proprietà integrate con get('fieldname') gestire i campi opzionali con valori di fallback accedere agli url dei file per le immagini dell'avatar nell'applicazione back4gram, questo è implementato nel profilepage js hook 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]); progetto back4gram trova qui il codice completo per un progetto campione di social network costruito con back4app passo 3 – aggiornamento delle informazioni del profilo utente consentire agli utenti di aggiornare le informazioni del proprio profilo è una funzionalità fondamentale della gestione del profilo aggiornamento dei campi del profilo quando un utente invia informazioni aggiornate sul profilo, puoi salvarle su 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; } }; questa funzione ottiene l'oggetto utente corrente imposta i valori dei campi aggiornati salva le modifiche su back4app nell'applicazione back4gram, l'aggiornamento del profilo è implementato nella handleupdateprofile funzione 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); } }; progetto back4gram trova qui il codice completo per un progetto campione di social network costruito con back4app passo 4 – gestione del caricamento delle immagini del profilo le immagini del profilo sono una parte fondamentale dell'identità dell'utente nei social network back4app rende facile la gestione dei file con parse file caricamento delle immagini dell'avatar per caricare e salvare un'immagine del profilo 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; } }; questo codice crea un nuovo oggetto parse file dal file selezionato salva il file nello storage di back4app associa il file al campo avatar dell'utente aggiorna l'oggetto utente nel database gestione dei file in back4app quando carichi file con parse file, back4app memorizza il file in modo sicuro nel suo cloud storage genera un url unico per accedere al file gestisce le autorizzazioni dei file in base all'acl dell'oggetto padre gestisce la distribuzione cdn per un caricamento veloce questo rende tutto molto più semplice rispetto alla creazione di un proprio sistema di archiviazione e gestione dei file passo 5 – implementazione delle impostazioni utente oltre alle informazioni di base del profilo, i social network offrono tipicamente varie impostazioni per la privacy, le notifiche e le preferenze memorizzare le impostazioni utente in back4app hai due approcci principali per memorizzare le impostazioni utente 1\ utilizzare i campi della classe utente per impostazioni semplici per impostazioni booleane o enumerate semplici 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\ utilizzo di oggetti json per impostazioni complesse per impostazioni più complesse o raggruppate, puoi utilizzare un oggetto 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; } }; questo approccio ti consente di memorizzare impostazioni complesse e annidate in un singolo campo esempio dalla settingspage js di back4gram nell'applicazione back4gram, le impostazioni dell'utente sono gestite nel settingspage js componente le parti chiave che interagiscono con back4app includono // 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 } }; questo codice mostra come back4gram recupera le impostazioni dell'utente corrente da back4app fornisce valori predefiniti per le impostazioni mancanti aggiorna solo la categoria di impostazioni modificata salva le modifiche su back4app progetto back4gram trova qui il codice completo per un progetto campione di social network costruito con back4app passo 6 – funzionalità avanzate impostazioni di sicurezza dell'account la sicurezza è un aspetto critico della gestione del profilo utente implementiamo alcune funzionalità di sicurezza avanzate per gli account utente implementazione dell'autenticazione a due fattori sebbene non sia incluso nell'esempio base di back4gram, puoi implementare l'autenticazione a due fattori con le cloud functions di 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 }; }); dalla tua applicazione react, puoi chiamare queste 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 dell'email back4app fornisce supporto integrato per la verifica dell'email puoi attivare un'email di verifica 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 }; } }; cambiamento password consenti agli utenti di aggiornare la propria password con una corretta verifica 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 }; } }; in un'applicazione di produzione, dovresti implementare questo in modo sicuro con una cloud function per evitare di esporre la combinazione username/password passo 7 – interrogazione dei profili utente per funzionalità sociali i social network devono consentire agli utenti di visualizzare i profili di altri utenti ecco come interrogare e visualizzare i profili utente con back4app recupero dei profili di altri utenti 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; } }; questa funzione crea una query per la classe parse user recupera un utente specifico per id rispetta le impostazioni sulla privacy restituisce dati appropriati in base alla visibilità implementazione della ricerca utenti per consentire agli utenti di trovare altri profili 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 \[]; } }; nell'app back4gram, la ricerca degli utenti è implementata in 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); } }; progetto back4gram trova qui il codice completo per un progetto campione di social network costruito con back4app conclusione in questo tutorial, hai imparato come implementare una gestione completa dei profili utente e delle impostazioni con back4app hai visto come struttura i dati del profilo utente nella classe utente di back4app recupera e aggiorna le informazioni del profilo utilizzando il parse sdk gestisci i caricamenti di file per le foto del profilo con parse file implementa le impostazioni utente per la privacy e le preferenze aggiungi funzionalità di sicurezza come l'autenticazione a due fattori e la verifica dell'email interroga i profili utente per le funzionalità del social network le potenti funzionalità di gestione dei dati di back4app rendono facile creare sistemi di profilo robusti senza costruire un'infrastruttura backend complessa da zero utilizzando la classe parse user e estendendola con campi personalizzati, puoi rapidamente creare un sistema di profilo utente flessibile per il tuo social network prossimi passi implementa connessioni sociali come seguire/seguaci utilizzando le relazioni parse aggiungi feed di attività per mostrare le azioni degli utenti utilizzando le query parse costruisci messaggistica diretta tra utenti con live query per aggiornamenti in tempo reale implementa la moderazione dei contenuti per i contenuti generati dagli utenti con cloud functions con back4app come servizio backend, puoi concentrarti sulla creazione di esperienze utente coinvolgenti piuttosto che sulla costruzione di un'infrastruttura complessa per il codice completo dell'applicazione di social network back4gram, inclusa la gestione dei profili e delle impostazioni, puoi controllare il repository github https //github com/templates back4app/back4gram