Pendaftaran Pengguna di React dengan Parse JS: Panduan Teknis

halaman pendaftaran di react menggunakan parse pendahuluan di inti banyak aplikasi, akun pengguna memiliki konsep yang memungkinkan pengguna mengakses informasi mereka dengan aman parse menyediakan kelas pengguna khusus yang disebut parse user parse user yang secara otomatis menangani banyak fungsi yang diperlukan untuk manajemen akun pengguna dalam panduan ini, anda akan belajar bagaimana kelas parse user parse user bekerja dengan membuat fitur pendaftaran pengguna untuk aplikasi react anda menggunakan parse js sdk prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan aplikasi react yang dibuat dan terhubung ke back4app jika anda ingin menguji/menggunakan tata letak layar yang disediakan oleh panduan ini, anda harus mengatur ant design ant design pustaka tujuan untuk membangun fitur pendaftaran pengguna menggunakan parse untuk aplikasi react 1 memahami metode signup manajemen pengguna parse menggunakan parse user parse user tipe objek, yang memperluas parseobject parseobject tipe default sambil berisi metode bantu unik, seperti current current dan getusername getusername , yang akan membantu anda mengambil data pengguna di seluruh aplikasi anda anda dapat membaca lebih lanjut tentang parse user parse user objek di sini pada dokumentasi resmi https //parseplatform org/parse sdk js/api/master/parse user html dalam panduan ini, anda akan belajar bagaimana menggunakan signup signup metode yang membuat objek parse user parse user yang baru, valid, dan unik baik secara lokal maupun di server, dengan mengambil sebagai argumen username username yang valid dan password password 2 buat komponen pendaftaran pengguna mari kita sekarang membangun komponen fungsional, yang akan memanggil signup signup metode di aplikasi kita pertama, buat file baru di direktori src anda yang disebut userregistration js userregistration js ( userregistration tsx userregistration tsx jika anda menggunakan typescript) dan juga tambahkan elemen input yang diperlukan ( username username dan password password input), menggunakan state hooks melalui usestate usestate untuk mengelola data mereka userregistration js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider, input } from 'antd'; 5&#x9; 6 export const userregistration = () => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 return ( 12 \<div> 13 \<div classname="header"> 14 \<img 15 classname="header logo" 16 alt="back4app logo" 17 src={ 18 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 19 } 20 /> 21 \<p classname="header text bold">{'react on back4app'}\</p> 22 \<p classname="header text">{'user registration'}\</p> 23 \</div> 24 \<div classname="container"> 25 \<h2 classname="heading">{'user registration'}\</h2> 26 \<divider /> 27 \<div classname="form wrapper"> 28 \<input 29 value={username} 30 onchange={(event) => setusername(event target value)} 31 placeholder="username" 32 size="large" 33 classname="form input" 34 /> 35 \<input 36 value={password} 37 onchange={(event) => setpassword(event target value)} 38 placeholder="password" 39 size="large" 40 type="password" 41 classname="form input" 42 /> 43 \</div> 44 \<div classname="form buttons"> 45 \<button 46 onclick={() => douserregistration()} 47 type="primary" 48 classname="form button" 49 color={'#208aec'} 50 size="large" 51 > 52 sign up 53 \</button> 54 \</div> 55 \</div> 56 \</div> 57 ); 58 }; userregistration tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider, input } from 'antd'; 4 const parse = require('parse/dist/parse min js'); 5&#x9; 6 export const userregistration fc<{}> = () reactelement => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 return ( 12 \<div> 13 \<div classname="header"> 14 \<img 15 classname="header logo" 16 alt="back4app logo" 17 src={ 18 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 19 } 20 /> 21 \<p classname="header text bold">{'react on back4app'}\</p> 22 \<p classname="header text">{'user registration'}\</p> 23 \</div> 24 \<div classname='container'> 25 \<h2 classname="heading">{'user registration'}\</h2> 26 \<divider /> 27 \<div classname="form wrapper"> 28 \<input 29 value={username} 30 onchange={(event) => setusername(event target value)} 31 placeholder="username" 32 size="large" 33 classname="form input" 34 /> 35 \<input 36 value={password} 37 onchange={(event) => setpassword(event target value)} 38 placeholder="password" 39 size="large" 40 type="password" 41 classname="form input" 42 /> 43 \</div> 44 \<div classname="form buttons"> 45 \<button 46 onclick={() => douserregistration()} 47 type="primary" 48 classname="form button" 49 color={'#208aec'} 50 size="large" 51 > 52 sign up 53 \</button> 54 \</div> 55 \</div> 56 \</div> 57 ); 58 }; 3 buat fungsi daftar anda sekarang dapat membuat fungsi daftar yang akan memanggil daftar daftar metode javascript 1 const douserregistration = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 try { 6 // since the signup method returns a promise, we need to call it using await 7 const createduser = await parse user signup(usernamevalue, passwordvalue); 8 alert( 9 `success! user ${createduser getusername()} was successfully created!` 10 ); 11 return true; 12 } catch (error) { 13 // signup can fail if any parameter is blank or failed an uniqueness check on the server 14 alert(`error! ${error}`); 15 return false; 16 } 17 }; typescript 1 const douserregistration = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 try { 6 // since the signup method returns a promise, we need to call it using await 7 const createduser parse user = await parse user signup(usernamevalue, passwordvalue); 8 alert( 9 `success! user ${createduser getusername()} was successfully created!`, 10 ); 11 return true; 12 } catch (error any) { 13 // signup can fail if any parameter is blank or failed an uniqueness check on the server 14 alert(`error! ${error}`); 15 return false; 16 }; 17 }; catatan membuat pengguna baru menggunakan signup signup juga menjadikannya pengguna yang sedang masuk, jadi tidak perlu bagi pengguna anda untuk masuk lagi untuk melanjutkan menggunakan aplikasi anda masukkan fungsi ini ke dalam userregistration userregistration komponen, tepat sebelum return return panggilan, untuk dipanggil dan diuji ingat untuk memperbarui tombol daftar pada formulir onclick onclick aksi menjadi () => douserregistration() () => douserregistration() komponen anda sekarang harus terlihat seperti ini userregistration js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, divider, input } from 'antd'; 5&#x9; 6 export const userregistration = () => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 // functions used by the screen components 12 const douserregistration = async function () { 13 // note that these values come from state variables that we've declared before 14 const usernamevalue = username; 15 const passwordvalue = password; 16 try { 17 // since the signup method returns a promise, we need to call it using await 18 const createduser = await parse user signup(usernamevalue, passwordvalue); 19 alert( 20 `success! user ${createduser getusername()} was successfully created!` 21 ); 22 return true; 23 } catch (error) { 24 // signup can fail if any parameter is blank or failed an uniqueness check on the server 25 alert(`error! ${error}`); 26 return false; 27 } 28 }; 29&#x9; 30 return ( 31 \<div> 32 \<div classname="header"> 33 \<img 34 classname="header logo" 35 alt="back4app logo" 36 src={ 37 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 38 } 39 /> 40 \<p classname="header text bold">{'react on back4app'}\</p> 41 \<p classname="header text">{'user registration'}\</p> 42 \</div> 43 \<div classname="container"> 44 \<h2 classname="heading">{'user registration'}\</h2> 45 \<divider /> 46 \<div classname="form wrapper"> 47 \<input 48 value={username} 49 onchange={(event) => setusername(event target value)} 50 placeholder="username" 51 size="large" 52 classname="form input" 53 /> 54 \<input 55 value={password} 56 onchange={(event) => setpassword(event target value)} 57 placeholder="password" 58 size="large" 59 type="password" 60 classname="form input" 61 /> 62 \</div> 63 \<div classname="form buttons"> 64 \<button 65 onclick={() => douserregistration()} 66 type="primary" 67 classname="form button" 68 color={'#208aec'} 69 size="large" 70 > 71 sign up 72 \</button> 73 \</div> 74 \</div> 75 \</div> 76 ); 77 }; userregistration tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, divider, input } from 'antd'; 4 const parse = require('parse/dist/parse min js'); 5&#x9; 6 export const userregistration fc<{}> = () reactelement => { 7 // state variables 8 const \[username, setusername] = usestate(''); 9 const \[password, setpassword] = usestate(''); 10&#x9; 11 // functions used by the screen components 12 const douserregistration = async function () promise\<boolean> { 13 // note that these values come from state variables that we've declared before 14 const usernamevalue string = username; 15 const passwordvalue string = password; 16 try { 17 // since the signup method returns a promise, we need to call it using await 18 const createduser parse user = await parse user signup(usernamevalue, passwordvalue); 19 alert( 20 `success! user ${createduser getusername()} was successfully created!`, 21 ); 22 return true; 23 } catch (error any) { 24 // signup can fail if any parameter is blank or failed an uniqueness check on the server 25 alert(`error! ${error}`); 26 return false; 27 }; 28 }; 29&#x9; 30 return ( 31 \<div> 32 \<div classname="header"> 33 \<img 34 classname="header logo" 35 alt="back4app logo" 36 src={ 37 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 38 } 39 /> 40 \<p classname="header text bold">{'react on back4app'}\</p> 41 \<p classname="header text">{'user registration'}\</p> 42 \</div> 43 \<div classname='container'> 44 \<h2 classname="heading">{'user registration'}\</h2> 45 \<divider /> 46 \<div classname="form wrapper"> 47 \<input 48 value={username} 49 onchange={(event) => setusername(event target value)} 50 placeholder="username" 51 size="large" 52 classname="form input" 53 /> 54 \<input 55 value={password} 56 onchange={(event) => setpassword(event target value)} 57 placeholder="password" 58 size="large" 59 type="password" 60 classname="form input" 61 /> 62 \</div> 63 \<div classname="form buttons"> 64 \<button 65 onclick={() => douserregistration()} 66 type="primary" 67 classname="form button" 68 color={'#208aec'} 69 size="large" 70 > 71 sign up 72 \</button> 73 \</div> 74 \</div> 75 \</div> 76 ); 77 }; juga tambahkan kelas ini ke app css app css file anda untuk sepenuhnya merender gaya tata letak app css 1 html { 2 box sizing border box; 3 outline none; 4 overflow auto; 5 } 6&#x9; 7 , 8 before, 9 after { 10 margin 0; 11 padding 0; 12 box sizing inherit; 13 } 14&#x9; 15 h1, 16 h2, 17 h3, 18 h4, 19 h5, 20 h6 { 21 margin 0; 22 font weight bold; 23 } 24&#x9; 25 p { 26 margin 0; 27 } 28&#x9; 29 body { 30 margin 0; 31 background color #fff; 32 } 33&#x9; 34 container { 35 width 100%; 36 max width 500px; 37 margin auto; 38 padding 20px 0; 39 text align left; 40 } 41&#x9; 42 header { 43 align items center; 44 padding 25px 0; 45 background color #208aec; 46 } 47&#x9; 48 header logo { 49 height 55px; 50 margin bottom 20px; 51 object fit contain; 52 } 53&#x9; 54 header text bold { 55 margin bottom 3px; 56 color rgba(255, 255, 255, 0 9); 57 font size 16px; 58 font weight bold; 59 } 60&#x9; 61 header text { 62 color rgba(255, 255, 255, 0 9); 63 font size 15px; 64 } 65&#x9; 66 heading { 67 font size 22px; 68 } 69&#x9; 70 form wrapper { 71 margin top 20px; 72 margin bottom 10px; 73 } 74&#x9; 75 form input { 76 margin bottom 20px; 77 } 78&#x9; 79 form button { 80 width 100%; 81 } aplikasi anda sekarang harus terlihat seperti ini setelah memberikan kredensial pengguna yang diinginkan, anda akan melihat pesan ini setelah menekan daftar daftar jika semuanya berhasil penanganan kesalahan dapat diuji jika anda mencoba mendaftar pengguna dengan nama pengguna yang sama seperti sebelumnya anda akan mendapatkan kesalahan lain jika anda mencoba mendaftar tanpa kata sandi kesimpulan di akhir panduan ini, anda telah belajar bagaimana mendaftarkan pengguna parse baru di react di panduan berikutnya, kami akan menunjukkan kepada anda cara masuk dan keluar pengguna