Registro de Usuarios con Flutter y Parse Server

registro de usuario para flutter usando parse server introducción en el núcleo de muchas aplicaciones, las cuentas de usuario tienen una noción que permite a los usuarios acceder de forma segura a su información parse proporciona una clase de usuario clase de usuario que maneja automáticamente gran parte de la funcionalidad requerida para la gestión de cuentas de usuario con esta clase, podrás agregar funcionalidad de cuenta de usuario a tu aplicación parseuser parseuser es una subclase de parseobject parseobject , y tiene las mismas características todos los métodos que están en parseobject también existen en parseuser la diferencia es que parseuser parseuser tiene algunas adiciones especiales específicas para cuentas de usuario parseuser parseuser tiene varias propiedades que lo distinguen de parseobject nombre de usuario el nombre de usuario para el usuario (requerido) contraseña la contraseña para el usuario (requerida al registrarse) correo electrónico la dirección de correo electrónico del usuario (opcional) eres libre de usar una dirección de correo electrónico dirección de correo electrónico como el nombre de usuario nombre de usuario pide a tus usuarios que ingresen su correo electrónico correo electrónico , pero complétalo en la propiedad de nombre de usuario propiedad de nombre de usuario parseuser funcionará como de costumbre en esta guía, aprenderás a usar el plugin de flutter para parse server para gestionar usuarios utilizando la clase parseuser clase parseuser creando una función de registro de usuario para tu aplicación flutter objetivo construir una función de registro de usuario utilizando parse para una aplicación flutter requisitos previos para completar este tutorial, necesitarás flutter versión 2 2 x o posterior https //flutter dev/docs/get started/install android studio https //developer android com/studio o vs code instalado (con plugins dart y flutter) una aplicación creada en back4app nota sigue el tutorial de nueva aplicación parse para aprender cómo crear una aplicación parse en back4app una aplicación flutter conectada a back4app nota sigue el instalar parse sdk en el proyecto flutter para crear un proyecto flutter conectado a back4app un dispositivo (o dispositivo virtual) que ejecute android o ios entendiendo la aplicación signup para entender mejor el proceso de registro, crearemos una aplicación para registrar los datos del usuario y crear su cuenta no explicaremos el código de la aplicación flutter ya que el enfoque principal de esta guía es usar flutter con parse siguiendo los siguientes pasos, construirás una aplicación de todo que almacenará las tareas en la base de datos de back4app ¡comencemos! siguiendo los siguientes pasos podrás construir una aplicación de sign que creará una cuenta de usuario en la base de datos de back4app 1 crear plantilla de la aplicación sign abre tu proyecto flutter de la guía anterior flutter plugin for parse server ve al main dart main dart archivo, limpia todo el código y reemplázalo 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 cuando debug debug el parámetro en la función parse() initialize parse() initialize es true true , permite mostrar las llamadas a la api de parse en la consola esta configuración puede ayudar en la depuración del código se recomienda desactivar el debug en la versión de lanzamiento 2 conectar la plantilla al proyecto de back4app encuentra tu id de aplicación y las credenciales de clave de cliente navegando a tu panel de control de la aplicación en sitio web de back4app https //www back4app com/ actualiza tu código en main dart main dart con los valores de applicationid y clientkey de tu proyecto en back4app keyapplicationid = id de aplicación keyclientkey = clave de cliente ejecuta el proyecto, y la aplicación se cargará como se muestra en la imagen 3 código para registrar usuario la función de registro de usuario crea un nuevo usuario en tu aplicación parse antes de eso, verifica que tanto el nombre de usuario como el correo electrónico sean únicos si un registro no tiene éxito, debes revisar el objeto de error que se devuelve la causa más probable es que otro usuario ya ha tomado el nombre de usuario o el correo electrónico debes comunicar esto a tus usuarios y pedirles que intenten con un nombre de usuario diferente busca la función douserregistration douserregistration en el archivo main dart main dart reemplaza el código dentro de 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 } para construir esta función, sigue estos pasos crea una nueva instancia de la parseuser parseuser clase con el comando parseuser createuser(username, password, email) parseuser createuser(username, password, email) , con los datos que se completaron en la aplicación llama a la signup signup función, que registrará al usuario en tu base de datos en el panel de control de parse verifica si el registro del usuario fue exitoso si no fue exitoso, muestra un mensaje de descripción de error el código completo debería verse así 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 probarlo, haz clic en el ejecutar ejecutar botón en android studio/vscode después de proporcionar las credenciales de usuario deseadas, verás este mensaje después de presionar en registrarse si todo fue exitoso el manejo de errores se puede probar si intentas registrar un usuario con el mismo nombre de usuario que antes recibirás otro error si intentas registrarte sin contraseña 4 verificar el registro de usuario en el panel de control inicia sesión en sitio web de back4app https //www back4app com/ encuentra tu aplicación y haz clic en panel de control panel de control > núcleo núcleo > navegador navegador > usuario usuario en este punto, deberías ver tu usuario como se muestra a continuación ¡está hecho! al final de esta guía, aprendiste cómo registrar nuevos usuarios de parse en flutter en la próxima guía, te mostraremos cómo iniciar y cerrar sesión de los usuarios