ลงทะเบียนผู้ใช้ Flutter ด้วย Parse Server สำหรับนักพัฒนา

การลงทะเบียนผู้ใช้สำหรับ flutter โดยใช้ parse server บทนำ ที่แกนกลางของแอปหลายๆ แอป บัญชีผู้ใช้มีแนวคิดที่ช่วยให้ผู้ใช้เข้าถึงข้อมูลของตนได้อย่างปลอดภัย parse ให้บริการ คลาสผู้ใช้ คลาสผู้ใช้ ที่จัดการฟังก์ชันการทำงานที่จำเป็นสำหรับการจัดการบัญชีผู้ใช้โดยอัตโนมัติ ด้วยคลาสนี้ คุณจะสามารถเพิ่มฟังก์ชันการทำงานของบัญชีผู้ใช้ลงในแอปของคุณได้ parseuser parseuser เป็นซับคลาสของ parseobject parseobject , และมีคุณสมบัติเหมือนกัน วิธีการทั้งหมดที่อยู่ใน parseobject ก็มีอยู่ใน parseuser เช่นกัน ความแตกต่างคือ parseuser parseuser มีการเพิ่มเติมพิเศษบางอย่างที่เฉพาะเจาะจงสำหรับบัญชีผู้ใช้ parseuser parseuser มีคุณสมบัติบางอย่างที่ทำให้แตกต่างจาก parseobject ชื่อผู้ใช้ ชื่อผู้ใช้สำหรับผู้ใช้ (จำเป็น) รหัสผ่าน รหัสผ่านสำหรับผู้ใช้ (จำเป็นในระหว่างการลงทะเบียน) อีเมล ที่อยู่อีเมลสำหรับผู้ใช้ (ไม่จำเป็น) คุณสามารถใช้ ที่อยู่อีเมล ที่อยู่อีเมล เป็น ชื่อผู้ใช้ ชื่อผู้ใช้ ขอให้ผู้ใช้ของคุณกรอก อีเมล อีเมล , แต่กรอกใน ชื่อผู้ใช้ ชื่อผู้ใช้ — parseuser จะทำงานตามปกติ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการใช้ ปลั๊กอิน flutter สำหรับ parse server เพื่อจัดการผู้ใช้โดยใช้ parseuser parseuser คลาสในการสร้างฟีเจอร์การลงทะเบียนผู้ใช้สำหรับแอป flutter ของคุณ เป้าหมาย เพื่อสร้างฟีเจอร์การลงทะเบียนผู้ใช้โดยใช้ parse สำหรับแอป flutter ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี https //flutter dev/docs/get started/install https //developer android com/studio หรือ https //code visualstudio com/ (พร้อมกับ https //docs flutter dev/get started/editor dart และ flutter) แอป https //www back4app com/docs/get started/new parse app บน back4app หมายเหตุ ทำตาม https //www back4app com/docs/get started/new parse app เพื่อเรียนรู้วิธีการสร้าง parse app บน back4app แอป flutter ที่เชื่อมต่อกับ back4app หมายเหตุ ทำตาม https //www back4app com/docs/flutter/parse sdk/parse flutter sdk เพื่อสร้างโปรเจกต์ flutter ที่เชื่อมต่อกับ back4app อุปกรณ์ (หรืออุปกรณ์เสมือน) ที่รัน android หรือ ios การทำความเข้าใจแอป signup เพื่อให้เข้าใจขั้นตอนการลงทะเบียนได้ดีขึ้น เราจะสร้างแอปเพื่อลงทะเบียนข้อมูลผู้ใช้และสร้างบัญชีของคุณ เราจะไม่อธิบายโค้ดแอป flutter เนื่องจากจุดสนใจหลักของคู่มือนี้คือการใช้ flutter กับ parse ตามขั้นตอนถัดไป คุณจะสร้างแอป todo ที่จะเก็บงานไว้ที่ฐานข้อมูล back4app เริ่มกันเลย! ตามขั้นตอนถัดไป คุณจะสามารถสร้างแอป sign ที่จะสร้างบัญชีผู้ใช้ในฐานข้อมูล back4app 1 สร้างเทมเพลตแอป sign เปิดโปรเจกต์ flutter ของคุณจากคู่มือนี้ flutter plugin for parse server ไปที่ main dart main dart ไฟล์ ทำความสะอาดโค้ดทั้งหมด และแทนที่ด้วย 1 import 'package\ flutter/material dart'; 2 import 'package\ parse server sdk flutter/parse server sdk dart'; 3 4 void main() async { 5 widgetsflutterbinding ensureinitialized(); 6 7 final keyapplicationid = 'your app id here'; 8 final keyclientkey = 'your client key here'; 9 final keyparseserverurl = 'https //parseapi back4app com'; 10 11 await parse() initialize(keyapplicationid, keyparseserverurl, 12 clientkey keyclientkey, debug true); 13 14 runapp(myapp()); 15 } 16 17 class myapp extends statelesswidget { 18 @override 19 widget build(buildcontext context) { 20 return materialapp( 21 title 'flutter signup', 22 theme themedata( 23 primaryswatch colors blue, 24 visualdensity visualdensity adaptiveplatformdensity, 25 ), 26 home homepage(), 27 ); 28 } 29 } 30 31 class homepage extends statefulwidget { 32 @override 33 homepagestate createstate() => homepagestate(); 34 } 35 36 class homepagestate extends state\<homepage> { 37 final controllerusername = texteditingcontroller(); 38 final controllerpassword = texteditingcontroller(); 39 final controlleremail = texteditingcontroller(); 40 41 @override 42 widget build(buildcontext context) { 43 return scaffold( 44 appbar appbar( 45 title const text('flutter signup'), 46 ), 47 body center( 48 child singlechildscrollview( 49 padding const edgeinsets all(8), 50 child column( 51 crossaxisalignment crossaxisalignment stretch, 52 children \[ 53 container( 54 height 200, 55 child image network( 56 'http //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 57 ), 58 center( 59 child const text('flutter on back4app', 60 style 61 textstyle(fontsize 18, fontweight fontweight bold)), 62 ), 63 sizedbox( 64 height 16, 65 ), 66 center( 67 child const text('user registration', 68 style textstyle(fontsize 16)), 69 ), 70 sizedbox( 71 height 16, 72 ), 73 textfield( 74 controller controllerusername, 75 keyboardtype textinputtype text, 76 textcapitalization textcapitalization none, 77 autocorrect false, 78 decoration inputdecoration( 79 border outlineinputborder( 80 borderside borderside(color colors black)), 81 labeltext 'username'), 82 ), 83 sizedbox( 84 height 8, 85 ), 86 textfield( 87 controller controlleremail, 88 keyboardtype textinputtype emailaddress, 89 textcapitalization textcapitalization none, 90 autocorrect false, 91 decoration inputdecoration( 92 border outlineinputborder( 93 borderside borderside(color colors black)), 94 labeltext 'e mail'), 95 ), 96 sizedbox( 97 height 8, 98 ), 99 textfield( 100 controller controllerpassword, 101 obscuretext true, 102 keyboardtype textinputtype text, 103 textcapitalization textcapitalization none, 104 autocorrect false, 105 decoration inputdecoration( 106 border outlineinputborder( 107 borderside borderside(color colors black)), 108 labeltext 'password'), 109 ), 110 sizedbox( 111 height 8, 112 ), 113 container( 114 height 50, 115 child textbutton( 116 child const text('sign up'), 117 onpressed () => douserregistration(), 118 ), 119 ) 120 ], 121 ), 122 ), 123 )); 124 } 125 126 void showsuccess() { 127 showdialog( 128 context context, 129 builder (buildcontext context) { 130 return alertdialog( 131 title const text("success!"), 132 content const text("user was successfully created!"), 133 actions \<widget>\[ 134 new flatbutton( 135 child const text("ok"), 136 onpressed () { 137 navigator of(context) pop(); 138 }, 139 ), 140 ], 141 ); 142 }, 143 ); 144 } 145 146 void showerror(string errormessage) { 147 showdialog( 148 context context, 149 builder (buildcontext context) { 150 return alertdialog( 151 title const text("error!"), 152 content text(errormessage), 153 actions \<widget>\[ 154 new flatbutton( 155 child const text("ok"), 156 onpressed () { 157 navigator of(context) pop(); 158 }, 159 ), 160 ], 161 ); 162 }, 163 ); 164 } 165 166 void douserregistration() async { 167 //sigup code here 168 } 169 } 170 เมื่อ debug debug พารามิเตอร์ในฟังก์ชัน parse() initialize parse() initialize เป็น true true , จะช่วยให้สามารถแสดงการเรียก api ของ parse บนคอนโซลได้ การตั้งค่านี้สามารถช่วยในการดีบักโค้ดได้ แนะนำให้ปิดการดีบักในเวอร์ชันที่ปล่อยออกมา 2 เชื่อมต่อเทมเพลตกับโปรเจกต์ back4app ค้นหา application id และ client key ของคุณโดยไปที่แดชบอร์ดแอปของคุณที่ https //www back4app com/ อัปเดตโค้ดของคุณใน main dart main dart ด้วยค่าของ applicationid และ clientkey ของโปรเจกต์ของคุณใน back4app keyapplicationid = app id keyclientkey = client key เรียกใช้โปรเจกต์ และแอปจะโหลดตามที่แสดงในภาพ 3 โค้ดสำหรับลงชื่อเข้าใช้ผู้ใช้ ฟังก์ชัน user signup จะสร้างผู้ใช้ใหม่ในแอป parse ของคุณ ก่อนหน้านั้นจะตรวจสอบให้แน่ใจว่าชื่อผู้ใช้และอีเมลนั้นไม่ซ้ำกัน หากการลงชื่อเข้าใช้ไม่สำเร็จ คุณควรตรวจสอบวัตถุข้อผิดพลาดที่ส่งกลับมา สาเหตุที่เป็นไปได้มากที่สุดคือผู้ใช้อื่นได้ใช้ชื่อผู้ใช้หรืออีเมลนั้นไปแล้ว คุณควรสื่อสารเรื่องนี้กับผู้ใช้ของคุณและขอให้พวกเขาลองใช้ชื่อผู้ใช้ที่แตกต่างออกไป ค้นหาฟังก์ชัน douserregistration douserregistration ในไฟล์ main dart main dart แทนที่โค้ดภายใน douserregistration douserregistration ด้วย 1 final username = controllerusername text trim(); 2 final email = controlleremail text trim(); 3 final password = controllerpassword text trim(); 4 5 final user = parseuser createuser(username, password, email); 6 7 var response = await user signup(); 8 9 if (response success) { 10 showsuccess(); 11 } else { 12 showerror(response error! message); 13 } ในการสร้างฟังก์ชันนี้ ให้ทำตามขั้นตอนเหล่านี้ สร้างอินสแตนซ์ใหม่ของ parseuser parseuser คลาสด้วยคำสั่ง parseuser createuser(username, password, email) parseuser createuser(username, password, email) , โดยใช้ข้อมูลที่กรอกในแอป เรียกใช้ signup signup ฟังก์ชัน ซึ่งจะลงทะเบียนผู้ใช้ในฐานข้อมูลของคุณใน parse dashboard ตรวจสอบว่าผู้ใช้ลงทะเบียนสำเร็จหรือไม่ หากไม่สำเร็จ ให้แสดงข้อความอธิบายข้อผิดพลาด โค้ดทั้งหมดควรมีลักษณะดังนี้ 1 void douserregistration() async { 2 final username = controllerusername text trim(); 3 final email = controlleremail text trim(); 4 final password = controllerpassword text trim(); 5 6 final user = parseuser createuser(username, password, email); 7 8 var response = await user signup(); 9 10 if (response success) { 11 showsuccess(); 12 } else { 13 showerror(response error! message); 14 } 15 } ในการทดสอบ ให้คลิกที่ run run ปุ่มใน android studio/vscode หลังจากที่คุณให้ข้อมูลประจำตัวผู้ใช้ที่ต้องการแล้ว คุณจะเห็นข้อความนี้หลังจากกดลงทะเบียนหากทุกอย่างสำเร็จ การจัดการข้อผิดพลาดสามารถทดสอบได้หากคุณพยายามลงทะเบียนผู้ใช้ด้วยชื่อผู้ใช้เดียวกันกับก่อนหน้านี้ คุณจะได้รับข้อผิดพลาดอีกครั้งหากคุณพยายามลงทะเบียนโดยไม่มีรหัสผ่าน 4 ตรวจสอบการลงทะเบียนผู้ใช้ในแดชบอร์ด เข้าสู่ระบบที่ https //www back4app com/ ค้นหาแอปของคุณและคลิกที่ แดชบอร์ด แดชบอร์ด > core core > เบราว์เซอร์ เบราว์เซอร์ > ผู้ใช้ ผู้ใช้ ในจุดนี้ คุณควรเห็นผู้ใช้ของคุณตามที่แสดงด้านล่าง เสร็จสิ้น! ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการลงทะเบียนผู้ใช้ parse ใหม่บน flutter ในคู่มือต่อไป เราจะแสดงวิธีการเข้าสู่ระบบและออกจากระบบผู้ใช้