Registrazione Utente in Flutter con Parse Server SDK

registrazione utente per flutter utilizzando parse server introduzione al centro di molte app, gli account utente hanno una nozione che consente agli utenti di accedere in modo sicuro alle proprie informazioni parse fornisce una classe utente classe utente che gestisce automaticamente gran parte della funzionalità richiesta per la gestione degli account utente con questa classe, potrai aggiungere funzionalità di account utente alla tua app parseuser parseuser è una sottoclasse di parseobject parseobject , e ha le stesse caratteristiche tutti i metodi che sono su parseobject esistono anche in parseuser la differenza è che parseuser parseuser ha alcune aggiunte speciali specifiche per gli account utente parseuser parseuser ha diverse proprietà che lo distinguono da parseobject nome utente il nome utente per l'utente (obbligatorio) password la password per l'utente (obbligatoria alla registrazione) email l'indirizzo email per l'utente (opzionale) sei libero di utilizzare un indirizzo email indirizzo email come nome utente nome utente chiedi ai tuoi utenti di inserire il loro email email , ma compilalo nella proprietà nome utente nome utente parseuser funzionerà normalmente in questa guida, imparerai come utilizzare il plugin flutter per parse server per gestire gli utenti utilizzando la classe parseuser parseuser creando una funzionalità di registrazione utente per la tua app flutter obiettivo costruire una funzionalità di registrazione utente utilizzando parse per un'app flutter prerequisiti per completare questo tutorial, avrai bisogno di versione flutter 2 2 x o successiva https //flutter dev/docs/get started/install android studio https //developer android com/studio o vs code installato (con plugin dart e flutter) un'app creata su back4app nota segui il tutorial nuova app parse per imparare a creare un'app parse su back4app un'app flutter collegata a back4app nota segui il installa parse sdk nel progetto flutter per creare un progetto flutter collegato a back4app un dispositivo (o dispositivo virtuale) che esegue android o ios comprendere l'app signup per comprendere meglio il processo di registrazione, creeremo un'app per registrare i dati degli utenti e creare il tuo account non spiegheremo il codice dell'applicazione flutter poiché il focus principale di questa guida è l'uso di flutter con parse seguendo i passaggi successivi, costruirai un'app todo che memorizzerà i compiti nel database di back4app iniziamo! seguendo i passaggi successivi sarai in grado di costruire un'app sign che creerà un account utente nel database di back4app 1 crea il modello dell'app sign apri il tuo progetto flutter dalla guida precedente plugin flutter per parse server vai al main dart main dart file, pulisci tutto il codice e sostituiscilo con 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 quando debug debug il parametro nella funzione parse() initialize parse() initialize è true true , consente di visualizzare le chiamate all'api di parse sulla console questa configurazione può aiutare nel debug del codice è consigliabile disabilitare il debug nella versione di rilascio 2 collega il template al progetto back4app trova il tuo application id e le credenziali client key navigando al dashboard della tua app su sito web di back4app https //www back4app com/ aggiorna il tuo codice in main dart main dart con i valori dell’applicationid e del clientkey del tuo progetto in back4app keyapplicationid = app id keyclientkey = client key esegui il progetto e l'app si caricherà come mostrato nell'immagine 3 codice per registrare l'utente la funzione di registrazione utente crea un nuovo utente nella tua app parse prima di ciò, controlla per assicurarsi che sia il nome utente che l'email siano unici se una registrazione non ha successo, dovresti controllare l'oggetto di errore che viene restituito la causa più probabile è che un altro utente ha già preso il nome utente o l'email dovresti comunicare questo ai tuoi utenti e chiedere loro di provare un nome utente diverso cerca la funzione douserregistration douserregistration nel file main dart main dart sostituisci il codice all'interno di douserregistration douserregistration con 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 } per costruire questa funzione, segui questi passaggi crea una nuova istanza della parseuser parseuser classe con il comando parseuser createuser(username, password, email) parseuser createuser(username, password, email) , con i dati che sono stati compilati nell'app chiama la signup signup funzione, che registrerà l'utente nel tuo database nel parse dashboard controlla se l'utente si è registrato con successo se non ha avuto successo, mostra un messaggio di descrizione dell'errore il codice completo dovrebbe apparire così 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 } per testarlo, fai clic sul esegui esegui pulsante in android studio/vscode dopo aver fornito le credenziali utente desiderate, vedrai questo messaggio dopo aver premuto su iscriviti se tutto è andato a buon fine la gestione degli errori può essere testata se provi a registrare un utente con lo stesso nome utente di prima riceverai un altro errore se provi a iscriverti senza password 4 controlla la registrazione dell'utente nel dashboard accedi a sito web back4app https //www back4app com/ trova la tua app e fai clic su dashboard dashboard > core core > browser browser > utente utente a questo punto, dovresti vedere il tuo utente come mostrato di seguito è fatto! alla fine di questa guida, hai imparato come registrare nuovi utenti parse su flutter nella prossima guida, ti mostreremo come accedere e disconnettere gli utenti