Registro de Usuário no Flutter com Parse Server

registro de usuário para flutter usando parse server introdução no cerne de muitos aplicativos, as contas de usuário têm uma noção que permite que os usuários acessem suas informações de forma segura o parse fornece uma classe user classe user que gerencia automaticamente grande parte da funcionalidade necessária para o gerenciamento de contas de usuário com esta classe, você poderá adicionar funcionalidade de conta de usuário ao seu aplicativo parseuser parseuser é uma subclasse de parseobject parseobject , e possui as mesmas características todos os métodos que estão em parseobject também existem em parseuser a diferença é que parseuser parseuser tem algumas adições especiais específicas para contas de usuário parseuser parseuser possui várias propriedades que a diferenciam de parseobject nome de usuário o nome de usuário para o usuário (obrigatório) senha a senha para o usuário (obrigatória no cadastro) email o endereço de email do usuário (opcional) você pode usar um endereço de email endereço de email como o nome de usuário nome de usuário peça aos seus usuários para inserir seu email email , mas preencha na propriedade nome de usuário nome de usuário o parseuser funcionará normalmente neste guia, você aprenderá como usar o plugin flutter para parse server para gerenciar usuários usando a classe parseuser classe parseuser criando um recurso de registro de usuário para seu aplicativo flutter objetivo construir um recurso de registro de usuário usando parse para um aplicativo flutter pré requisitos para completar este tutorial, você precisará versão do flutter 2 2 x ou posterior https //flutter dev/docs/get started/install android studio https //developer android com/studio ou vs code instalado (com plugins dart e flutter) um aplicativo criado no back4app nota siga o tutorial de novo aplicativo parse para aprender como criar um aplicativo parse no back4app um aplicativo flutter conectado ao back4app nota siga o instalar o sdk parse no projeto flutter para criar um projeto flutter conectado ao back4app um dispositivo (ou dispositivo virtual) executando android ou ios entendendo o aplicativo signup para entender melhor o processo de inscrição, criaremos um aplicativo para registrar os dados do usuário e criar sua conta não explicaremos o código do aplicativo flutter, uma vez que o foco principal deste guia é usar o flutter com parse seguindo os próximos passos, você construirá um aplicativo todo que armazenará as tarefas no banco de dados back4app vamos começar! seguindo os próximos passos, você será capaz de construir um aplicativo de inscrição que criará uma conta de usuário no banco de dados back4app 1 criar modelo de aplicativo de inscrição abra seu projeto flutter do guia anterior flutter plugin for parse server vá para o main dart main dart arquivo, limpe todo o código e substitua o por 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 o parâmetro na função parse() initialize parse() initialize é true true , permite exibir chamadas da api parse no console esta configuração pode ajudar na depuração do código é aconselhável desativar o debug na versão de lançamento 2 conectar o template ao projeto back4app encontre seu id de aplicação e credenciais de chave do cliente navegando até o painel do seu aplicativo em site do back4app https //www back4app com/ atualize seu código em main dart main dart com os valores de applicationid e clientkey do seu projeto no back4app keyapplicationid = id do app keyclientkey = chave do cliente execute o projeto e o aplicativo será carregado conforme mostrado na imagem 3 código para registrar usuário a função de cadastro de usuário cria um novo usuário em seu aplicativo parse antes disso, ela verifica se tanto o nome de usuário quanto o e mail são únicos se um cadastro não for bem sucedido, você deve verificar o objeto de erro que é retornado a causa mais provável é que outro usuário já tenha utilizado o nome de usuário ou e mail você deve comunicar isso aos seus usuários e pedir que tentem um nome de usuário diferente procure pela função douserregistration douserregistration no arquivo main dart main dart substitua o código dentro de douserregistration douserregistration por 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 } para construir esta função, siga estes passos crie uma nova instância da parseuser parseuser classe com o comando parseuser createuser(username, password, email) parseuser createuser(username, password, email) , com os dados que foram preenchidos no aplicativo chame a signup signup função, que registrará o usuário no seu banco de dados no parse dashboard verifique se o usuário se registrou com sucesso se não tiver sucesso, mostre a mensagem de descrição do erro o código completo deve parecer com isso 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 } para testá lo, clique no botão executar executar no android studio/vscode após fornecer as credenciais de usuário desejadas, você verá esta mensagem após pressionar em inscrever se se tudo foi bem sucedido o tratamento de erros pode ser testado se você tentar registrar um usuário com o mesmo nome de usuário de antes você receberá outro erro se tentar se inscrever sem senha 4 verifique o registro do usuário no painel faça login em site do back4app https //www back4app com/ encontre seu aplicativo e clique em painel painel > núcleo núcleo > navegador navegador > usuário usuário neste ponto, você deve ver seu usuário conforme exibido abaixo está feito! no final deste guia, você aprendeu como registrar novos usuários parse no flutter no próximo guia, mostraremos como fazer login e logout de usuários