Panduan Pendaftaran Pengguna Parse di React Native

pendaftaran pengguna untuk react native 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 yang secara otomatis menangani banyak fungsi yang diperlukan untuk manajemen akun pengguna dalam panduan ini, anda akan belajar bagaimana parse user parse user kelas bekerja dengan membuat fitur pendaftaran pengguna untuk aplikasi react native anda menggunakan parse js sdk prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan aplikasi react native yang dibuat dan https //www back4app com/docs/react native/parse sdk/react native sdk tujuan untuk membangun fitur pendaftaran pengguna menggunakan parse untuk aplikasi react native 1 memahami metode signup manajemen pengguna parse menggunakan tipe objek parse user parse user yang memperluas parseobject parseobject default, yang 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 https //parseplatform org/parse sdk js/api/2 18 0/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 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 dalam aplikasi kita pertama, buat file baru di direktori root 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, { fc, reactelement, usestate } from "react"; 2 import { button, stylesheet, textinput } from "react native"; 3 import parse from "parse/react native"; 4&#x9; 5 export const userregistration = () => { 6 const \[username, setusername] = usestate(""); 7 const \[password, setpassword] = usestate(""); 8&#x9; 9 return ( 10 <> 11 \<textinput 12 style={styles input} 13 value={username} 14 placeholder={"username"} 15 onchangetext={(text) => setusername(text)} 16 autocapitalize={"none"} 17 /> 18 \<textinput 19 style={styles input} 20 value={password} 21 placeholder={"password"} 22 securetextentry 23 onchangetext={(text) => setpassword(text)} 24 /> 25 \<button title={"sign up"} onpress={() => {}} /> 26 \</> 27 ); 28 }; 29&#x9; 30 const styles = stylesheet create({ 31 input { 32 height 40, 33 marginbottom 10, 34 backgroundcolor '#fff', 35 }, 36 }); userregistration tsx 1 import react, { fc, reactelement, usestate } from "react"; 2 import { button, stylesheet, textinput } from "react native"; 3 import parse from "parse/react native"; 4&#x9; 5 export const userregistration fc<{}> = ({}) reactelement => { 6 const \[username, setusername] = usestate(""); 7 const \[password, setpassword] = usestate(""); 8&#x9; 9 return ( 10 <> 11 \<textinput 12 style={styles input} 13 value={username} 14 placeholder={"username"} 15 onchangetext={(text) => setusername(text)} 16 autocapitalize={"none"} 17 /> 18 \<textinput 19 style={styles input} 20 value={password} 21 placeholder={"password"} 22 securetextentry 23 onchangetext={(text) => setpassword(text)} 24 /> 25 \<button title={"sign up"} onpress={() => {}} /> 26 \</> 27 ); 28 }; 29&#x9; 30 const styles = stylesheet create({ 31 input { 32 height 40, 33 marginbottom 10, 34 backgroundcolor '#fff', 35 }, 36 }); 3 buat fungsi daftar anda sekarang dapat membuat fungsi daftar yang akan memanggil signup signup 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 // since the signup method returns a promise, we need to call it using await 6 return await parse user signup(usernamevalue, passwordvalue) 7 then((createduser) => { 8 // parse user signup returns the already created parseuser object if successful 9 alert alert( 10 'success!', 11 `user ${createduser getusername()} was successfully created!`, 12 ); 13 return true; 14 }) 15 catch((error) => { 16 // signup can fail if any parameter is blank or failed an uniqueness check on the server 17 alert alert('error!', error message); 18 return false; 19 }); 20 };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 // since the signup method returns a promise, we need to call it using await 6 return await parse user signup(usernamevalue, passwordvalue) 7 then((createduser parse user) => { 8 // parse user signup returns the already created parseuser object if successful 9 alert alert( 10 'success!', 11 `user ${createduser getusername()} was successfully created!`, 12 ); 13 return true; 14 }) 15 catch((error object) => { 16 // signup can fail if any parameter is blank or failed an uniqueness check on the server 17 alert alert('error!', error message); 18 return false; 19 }); 20 }; catatan membuat pengguna baru menggunakan signup signup juga menjadikannya pengguna yang sedang masuk, jadi tidak perlu bagi pengguna anda untuk masuk lagi untuk terus menggunakan aplikasi anda masukkan fungsi ini ke dalam userregistration userregistration komponen, tepat sebelum return return dipanggil, untuk dipanggil dan diuji ingat untuk memperbarui tombol daftar di formulir onpress onpress aksi menjadi () => douserregistration() () => douserregistration() dan untuk mengimpor alert alert dari react native react native komponen anda sekarang harus terlihat seperti ini userregistration js 1 import react, { fc, reactelement, usestate } from "react"; 2 import { alert, button, stylesheet, textinput } from "react native"; 3 import parse from "parse/react native"; 4&#x9; 5 export const userregistration = () => { 6 const \[username, setusername] = usestate(""); 7 const \[password, setpassword] = usestate(""); 8&#x9; 9 const douserregistration = async function () { 10 // note that these values come from state variables that we've declared before 11 const usernamevalue = username; 12 const passwordvalue = password; 13 // since the signup method returns a promise, we need to call it using await 14 return await parse user signup(usernamevalue, passwordvalue) 15 then((createduser) => { 16 // parse user signup returns the already created parseuser object if successful 17 alert alert( 18 "success!", 19 `user ${createduser get("username")} was successfully created!` 20 ); 21 return true; 22 }) 23 catch((error) => { 24 // signup can fail if any parameter is blank or failed an uniqueness check on the server 25 alert alert("error!", error message); 26 return false; 27 }); 28 }; 29&#x9; 30 return ( 31 <> 32 \<textinput 33 style={styles input} 34 value={username} 35 placeholder={"username"} 36 onchangetext={(text) => setusername(text)} 37 autocapitalize={"none"} 38 /> 39 \<textinput 40 style={styles input} 41 value={password} 42 placeholder={"password"} 43 securetextentry 44 onchangetext={(text) => setpassword(text)} 45 /> 46 \<button title={"sign up"} onpress={() => douserregistration()} /> 47 \</> 48 ); 49 }; 50&#x9; 51 const styles = stylesheet create({ 52 input { 53 height 40, 54 marginbottom 10, 55 backgroundcolor "#fff", 56 }, 57 }); userregistration tsx 1 import react, { fc, reactelement, usestate } from "react"; 2 import { alert, button, stylesheet, textinput } from "react native"; 3 import parse from "parse/react native"; 4&#x9; 5 export const userregistration fc<{}> = ({}) reactelement => { 6 const \[username, setusername] = usestate(""); 7 const \[password, setpassword] = usestate(""); 8&#x9; 9 const douserregistration = async function () promise\<boolean> { 10 // note that these values come from state variables that we've declared before 11 const usernamevalue string = username; 12 const passwordvalue string = password; 13 // since the signup method returns a promise, we need to call it using await 14 return await parse user signup(usernamevalue, passwordvalue) 15 then((createduser parse user) => { 16 // parse user signup returns the already created parseuser object if successful 17 alert alert( 18 "success!", 19 `user ${createduser get("username")} was successfully created!` 20 ); 21 return true; 22 }) 23 catch((error object) => { 24 // signup can fail if any parameter is blank or failed an uniqueness check on the server 25 alert alert("error!", error message); 26 return false; 27 }); 28 }; 29&#x9; 30 return ( 31 <> 32 \<textinput 33 style={styles input} 34 value={username} 35 placeholder={"username"} 36 onchangetext={(text) => setusername(text)} 37 autocapitalize={"none"} 38 /> 39 \<textinput 40 style={styles input} 41 value={password} 42 placeholder={"password"} 43 securetextentry 44 onchangetext={(text) => setpassword(text)} 45 /> 46 \<button title={"sign up"} onpress={() => douserregistration()} /> 47 \</> 48 ); 49 }; 50&#x9; 51 const styles = stylesheet create({ 52 input { 53 height 40, 54 marginbottom 10, 55 backgroundcolor "#fff", 56 }, 57 }); 4 menguji komponen langkah terakhir adalah menggunakan komponen baru kami di dalam aplikasi react native anda app js app js file (atau app tsx app tsx jika menggunakan typescript) app js 1 import { userregistration } from " /userregistration"; 2 / 3 your functions here 4 / 5 return ( 6 <> 7 \<statusbar /> 8 \<safeareaview style={styles container}> 9 <> 10 \<text style={styles title}>react native on back4app\</text> 11 \<text>user registration tutorial\</text> 12 \<userregistration /> 13 \</> 14 \</safeareaview> 15 \</> 16 ); 17&#x9; 18 // remember to add some styles at the end of your file 19 const styles = stylesheet create({ 20 container { 21 flex 1, 22 backgroundcolor "#fff", 23 alignitems "center", 24 justifycontent "center", 25 }, 26 title { 27 fontsize 20, 28 fontweight "bold", 29 }, 30 }); app tsx 1 import { userregistration } from " /userregistration"; 2 / 3 your functions here 4 / 5 return ( 6 <> 7 \<statusbar /> 8 \<safeareaview style={styles container}> 9 <> 10 \<text style={styles title}>react native on back4app\</text> 11 \<text>user registration tutorial\</text> 12 \<userregistration /> 13 \</> 14 \</safeareaview> 15 \</> 16 ); 17&#x9; 18 // remember to add some styles at the end of your file 19 const styles = stylesheet create({ 20 container { 21 flex 1, 22 backgroundcolor "#fff", 23 alignitems "center", 24 justifycontent "center", 25 }, 26 title { 27 fontsize 20, 28 fontweight "bold", 29 }, 30 }); 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 native di panduan berikutnya, kami akan menunjukkan kepada anda cara masuk dan keluar pengguna