การลงทะเบียนผู้ใช้ใน Parse ด้วย React Native SDK อย่างละเอียด

การลงทะเบียนผู้ใช้สำหรับ react native บทนำ ที่แกนกลางของแอปหลายๆ แอป บัญชีผู้ใช้มีแนวคิดที่ช่วยให้ผู้ใช้เข้าถึงข้อมูลของตนได้อย่างปลอดภัย parse มีคลาสผู้ใช้เฉพาะที่เรียกว่า parse user ซึ่งจัดการฟังก์ชันการทำงานที่จำเป็นสำหรับการจัดการบัญชีผู้ใช้โดยอัตโนมัติ ในคู่มือนี้ คุณจะได้เรียนรู้ว่า parse user parse user คลาสทำงานอย่างไรโดยการสร้างฟีเจอร์การลงทะเบียนผู้ใช้สำหรับแอป react native ของคุณโดยใช้ parse js sdk ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป react native ที่สร้างขึ้นและ https //www back4app com/docs/react native/parse sdk/react native sdk เป้าหมาย เพื่อสร้างฟีเจอร์การลงทะเบียนผู้ใช้โดยใช้ parse สำหรับแอป react native 1 การเข้าใจวิธีการลงทะเบียน parse user management ใช้ประเภท parse user parse user ซึ่งขยายประเภท parseobject parseobject เริ่มต้นในขณะที่มีวิธีช่วยเหลือเฉพาะ เช่น current current และ getusername getusername , ซึ่งจะช่วยให้คุณดึงข้อมูลผู้ใช้ตลอดทั้งแอปของคุณ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ parse user parse user ที่นี่ในเอกสารทางการ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการใช้ signup signup ซึ่งเป็นวิธีการที่สร้าง parse user parse user ใหม่ที่ถูกต้องและไม่ซ้ำกันทั้งในเครื่องและบนเซิร์ฟเวอร์ โดยใช้ค่า username username และ password password ที่ถูกต้อง 2 สร้างส่วนประกอบการลงทะเบียนผู้ใช้ ตอนนี้เรามาสร้างคอมโพเนนต์ฟังก์ชันที่เรียกใช้ signup signup ในแอปของเรา ก่อนอื่นให้สร้างไฟล์ใหม่ในไดเรกทอรีหลักของคุณชื่อ userregistration js userregistration js ( userregistration tsx userregistration tsx หากคุณใช้ typescript) และยังเพิ่มองค์ประกอบอินพุตที่จำเป็น ( username username และ password password โดยใช้ state hooks ผ่าน usestate usestate เพื่อจัดการข้อมูลของพวกเขา 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 สร้างฟังก์ชันการลงทะเบียน คุณสามารถสร้างฟังก์ชันการลงทะเบียนที่เรียกใช้ signup signup เมธอด 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 }; หมายเหตุ การสร้างผู้ใช้ใหม่โดยใช้ signup signup ยังทำให้เป็นผู้ใช้ที่เข้าสู่ระบบอยู่ในขณะนี้ ดังนั้นจึงไม่จำเป็นที่ผู้ใช้ของคุณจะต้องเข้าสู่ระบบอีกครั้งเพื่อใช้แอปของคุณต่อไป แทรกฟังก์ชันนี้ภายใน userregistration userregistration คอมโพเนนต์ ก่อนการเรียก return return เพื่อให้ถูกเรียกและทดสอบ อย่าลืมอัปเดตปุ่มลงทะเบียนในฟอร์ม onpress onpress ให้เป็น () => douserregistration() () => douserregistration() และนำเข้า alert alert จาก react native react native คอมโพเนนต์ของคุณควรมีลักษณะดังนี้ 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 การทดสอบส่วนประกอบ ขั้นตอนสุดท้ายคือการใช้ส่วนประกอบใหม่ของเราในแอปพลิเคชัน react native ของคุณ app js app js ไฟล์ (หรือ app tsx app tsx หากใช้ 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 }); แอปของคุณตอนนี้ควรมีลักษณะดังนี้ หลังจากที่คุณให้ข้อมูลประจำตัวของผู้ใช้ที่ต้องการแล้ว คุณจะเห็นข้อความนี้หลังจากกดที่ ลงทะเบียน ลงทะเบียน หากทุกอย่างสำเร็จ การจัดการข้อผิดพลาดสามารถทดสอบได้หากคุณพยายามลงทะเบียนผู้ใช้ด้วยชื่อผู้ใช้เดียวกันกับก่อนหน้านี้ คุณจะได้รับข้อผิดพลาดอีกครั้งหากคุณพยายามลงทะเบียนโดยไม่มีรหัสผ่าน บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการลงทะเบียนผู้ใช้ใหม่ใน parse บน react native ในคู่มือต่อไป เราจะแสดงวิธีการเข้าสู่ระบบและออกจากระบบผู้ใช้