Manajemen Profil Pengguna dan Pengaturan untuk Jaringan Sosial Anda

pendahuluan dalam tutorial ini, anda akan belajar bagaimana mengimplementasikan manajemen profil pengguna dan pengaturan untuk aplikasi jejaring sosial anda menggunakan back4app alih alih membangun semuanya dari awal, anda akan memanfaatkan kemampuan manajemen data yang kuat dari back4app untuk menyimpan dan mengambil informasi profil pengguna, menangani unggahan avatar, dan mengelola pengaturan pengguna pada akhir tutorial ini, anda akan memiliki sistem di mana pengguna dapat melihat dan memperbarui informasi profil mereka mengunggah dan mengelola foto profil mengonfigurasi pengaturan privasi dan notifikasi menyesuaikan preferensi akun mereka fitur fitur ini sangat penting untuk jejaring sosial modern mana pun, memberikan pengguna kontrol atas identitas dan pengalaman mereka di platform anda prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan akun back4app anda dapat mendaftar untuk akun gratis di back4app com https //www back4app com proyek back4app yang diatur dengan parse sdk yang dikonfigurasi sistem otentikasi yang berfungsi anda dapat mengikuti tutorial sistem otentikasi dengan back4app jika anda belum menerapkannya pengetahuan dasar tentang javascript, react js, dan konsep pengembangan web modern proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 1 – memahami struktur data profil di back4app sebelum terjun ke implementasi, mari kita pahami bagaimana data profil pengguna disusun di back4app kelas parse user kelas parse user dari back4app tidak hanya untuk otentikasi—ini juga sempurna untuk menyimpan informasi profil ketika anda membuat pengguna baru, back4app secara otomatis membuat entri di kelas pengguna dengan bidang default nama pengguna kata sandi (disimpan dengan aman dan tidak dapat diambil kembali) email emailterverifikasi dataauth namun, kekuatan sebenarnya datang dari memperluas kelas ini dengan bidang kustom untuk data profil anda bio deskripsi diri pengguna avatar foto profil (disimpan sebagai parse file) namalengkap nama lengkap pengguna lokasi kota/negara pengguna situs web situs web pribadi pengguna sosial tautan ke profil media sosial preferensi pengaturan dan preferensi pengguna mengatur properti pengguna yang diperluas di dasbor back4app anda, anda dapat menambahkan bidang kustom ini ke kelas pengguna navigasi ke database → browser pilih kelas pengguna klik "tambahkan kolom baru" tentukan nama bidang (misalnya, "bio") dan tipe (misalnya, "string") \[gambar dasbor back4app menunjukkan penambahan kolom baru ke kelas pengguna] anda dapat mengakses dan memperbarui bidang ini melalui parse sdk seperti objek lainnya proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 2 – mengambil data profil pengguna langkah pertama dalam menerapkan manajemen profil adalah mengambil data profil pengguna saat ini mendapatkan profil pengguna saat ini back4app memudahkan untuk mengambil pengguna yang saat ini masuk 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 } }; kode ini menunjukkan bagaimana cara mendapatkan objek pengguna saat ini dengan parse user current() akses properti bawaan dengan get('fieldname') tangani bidang opsional dengan nilai cadangan akses url file untuk gambar avatar dalam aplikasi back4gram, ini diimplementasikan dalam profilepage js hook useeffect komponen 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]); proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 3 – memperbarui informasi profil pengguna memungkinkan pengguna untuk memperbarui informasi profil mereka adalah fitur inti dari manajemen profil memperbarui bidang profil ketika seorang pengguna mengirimkan informasi profil yang diperbarui, anda dapat menyimpannya ke back4app dengan 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; } }; fungsi ini mengambil objek pengguna saat ini mengatur nilai field yang diperbarui menyimpan perubahan ke back4app dalam aplikasi back4gram, pembaruan profil diimplementasikan dalam handleupdateprofile fungsi 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); } }; proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 4 – menangani unggahan gambar profil gambar profil adalah bagian kunci dari identitas pengguna di jaringan sosial back4app memudahkan penanganan file dengan parse file mengunggah gambar avatar untuk mengunggah dan menyimpan foto 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; } }; kode ini membuat objek parse file baru dari file yang dipilih menyimpan file ke penyimpanan back4app mengaitkan file dengan field avatar pengguna memperbarui objek pengguna di database manajemen file di back4app ketika anda mengunggah file dengan parse file, back4app menyimpan file dengan aman di penyimpanan awannya menghasilkan url unik untuk mengakses file mengelola izin file berdasarkan acl objek induk menangani distribusi cdn untuk pemuatan cepat ini membuatnya jauh lebih sederhana daripada membangun sistem penyimpanan dan manajemen file anda sendiri langkah 5 – mengimplementasikan pengaturan pengguna di luar informasi profil dasar, jaringan sosial biasanya menawarkan berbagai pengaturan untuk privasi, notifikasi, dan preferensi menyimpan pengaturan pengguna di back4app anda memiliki dua pendekatan utama untuk menyimpan pengaturan pengguna 1\ menggunakan bidang kelas pengguna untuk pengaturan sederhana untuk pengaturan boolean atau enumerasi yang sederhana 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\ menggunakan objek json untuk pengaturan kompleks untuk pengaturan yang lebih kompleks atau terkelompok, anda dapat menggunakan objek 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; } }; pendekatan ini memungkinkan anda untuk menyimpan pengaturan yang kompleks dan bersarang dalam satu field contoh dari back4gram's settingspage js dalam aplikasi back4gram, pengaturan pengguna dikelola di settingspage js komponen bagian kunci yang berinteraksi dengan back4app meliputi // 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 } }; kode ini menunjukkan bagaimana back4gram mengambil pengaturan pengguna saat ini dari back4app memberikan default untuk pengaturan yang hilang memperbarui hanya kategori pengaturan yang diubah menyimpan perubahan kembali ke back4app proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app langkah 6 – fitur lanjutan pengaturan keamanan akun keamanan adalah aspek kritis dalam pengelolaan profil pengguna mari kita terapkan beberapa fitur keamanan lanjutan untuk akun pengguna implementasi autentikasi dua faktor meskipun tidak termasuk dalam contoh dasar back4gram, anda dapat mengimplementasikan autentikasi dua faktor dengan cloud functions dari 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 }; }); dari aplikasi react anda, anda dapat memanggil cloud functions ini 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); } }; verifikasi email back4app menyediakan dukungan bawaan untuk verifikasi email anda dapat memicu email verifikasi 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 }; } }; perubahan kata sandi izinkan pengguna untuk memperbarui kata sandi mereka dengan verifikasi yang tepat 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 }; } }; dalam aplikasi produksi, anda harus mengimplementasikan ini dengan aman menggunakan cloud function untuk menghindari mengekspos kombinasi nama pengguna/kata sandi langkah 7 – mengquery profil pengguna untuk fitur sosial jaringan sosial perlu membiarkan pengguna melihat profil pengguna lain berikut cara untuk mengquery dan menampilkan profil pengguna dengan back4app mengambil profil pengguna lain 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; } }; fungsi ini membuat query untuk kelas parse user mengambil pengguna tertentu berdasarkan id menghormati pengaturan privasi mengembalikan data yang sesuai berdasarkan visibilitas mengimplementasikan pencarian pengguna untuk memungkinkan pengguna menemukan profil lain 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 \[]; } }; dalam aplikasi back4gram, pencarian pengguna diimplementasikan di 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); } }; proyek back4gram temukan di sini kode lengkap untuk sebuah proyek contoh jaringan sosial yang dibangun dengan back4app kesimpulan dalam tutorial ini, anda telah belajar bagaimana mengimplementasikan manajemen profil pengguna dan pengaturan yang komprehensif dengan back4app anda telah melihat bagaimana cara struktur data profil pengguna di kelas pengguna back4app ambil dan perbarui informasi profil menggunakan parse sdk tangani unggahan file untuk foto profil dengan parse file terapkan pengaturan pengguna untuk privasi dan preferensi tambahkan fitur keamanan seperti otentikasi dua faktor dan verifikasi email kueri profil pengguna untuk fitur jejaring sosial fitur manajemen data yang kuat dari back4app memudahkan untuk membuat sistem profil yang kuat tanpa membangun infrastruktur backend yang kompleks dari awal dengan menggunakan kelas parse user dan memperluasnya dengan bidang kustom, anda dapat dengan cepat membuat sistem profil pengguna yang fleksibel untuk jejaring sosial anda langkah selanjutnya terapkan koneksi sosial seperti mengikuti/pengikut menggunakan parse relations tambahkan umpan aktivitas untuk menunjukkan tindakan pengguna menggunakan kueri parse bangun pesan langsung antara pengguna dengan live query untuk pembaruan waktu nyata terapkan moderasi konten untuk konten yang dihasilkan pengguna dengan cloud functions dengan back4app sebagai layanan backend anda, anda dapat fokus pada menciptakan pengalaman pengguna yang menarik daripada membangun infrastruktur yang kompleks untuk kode lengkap dari aplikasi jejaring sosial back4gram, termasuk manajemen profil dan pengaturan, anda dapat memeriksa repositori github https //github com/templates back4app/back4gram