Inscription Utilisateurs Flutter avec Plugin Parse Server

inscription des utilisateurs pour flutter utilisant parse server introduction au cœur de nombreuses applications, les comptes utilisateurs ont une notion qui permet aux utilisateurs d'accéder en toute sécurité à leurs informations parse fournit une classe utilisateur classe utilisateur qui gère automatiquement une grande partie des fonctionnalités requises pour la gestion des comptes utilisateurs avec cette classe, vous pourrez ajouter des fonctionnalités de compte utilisateur à votre application parseuser parseuser est une sous classe de parseobject parseobject , et possède les mêmes caractéristiques toutes les méthodes qui sont sur parseobject existent également dans parseuser la différence est que parseuser parseuser a quelques ajouts spéciaux spécifiques aux comptes utilisateurs parseuser parseuser a plusieurs propriétés qui le distinguent de parseobject nom d'utilisateur le nom d'utilisateur pour l'utilisateur (obligatoire) mot de passe le mot de passe pour l'utilisateur (obligatoire lors de l'inscription) email l'adresse email de l'utilisateur (facultatif) vous êtes libre d'utiliser une adresse email adresse email comme nom d'utilisateur nom d'utilisateur demandez à vos utilisateurs d'entrer leur email email , mais remplissez le dans la propriété nom d'utilisateur propriété nom d'utilisateur — parseuser fonctionnera normalement dans ce guide, vous apprendrez à utiliser le plugin flutter pour parse server pour gérer les utilisateurs en utilisant la classe parseuser classe parseuser en créant une fonctionnalité d'inscription des utilisateurs pour votre application flutter objectif construire une fonctionnalité d'enregistrement d'utilisateur en utilisant parse pour une application flutter prérequis pour compléter ce tutoriel, vous aurez besoin de version de flutter 2 2 x ou ultérieure https //flutter dev/docs/get started/install android studio https //developer android com/studio ou vs code installé (avec plugins dart et flutter) une application créée sur back4app remarque suivez le tutoriel de nouvelle application parse pour apprendre à créer une application parse sur back4app une application flutter connectée à back4app remarque suivez le installer le sdk parse sur le projet flutter pour créer un projet flutter connecté à back4app un appareil (ou un appareil virtuel) exécutant android ou ios comprendre l'application signup pour mieux comprendre le processus d'inscription, nous allons créer une application pour enregistrer les données des utilisateurs et créer votre compte nous n'expliquerons pas le code de l'application flutter car l'objectif principal de ce guide est d'utiliser flutter avec parse en suivant les étapes suivantes, vous construirez une application todo qui stockera les tâches dans la base de données back4app commençons! en suivant les étapes suivantes, vous serez en mesure de créer une application sign qui créera un compte utilisateur dans la base de données back4app 1 créer un modèle d'application sign ouvrez votre projet flutter du guide précédent plugin flutter pour parse server allez dans le main dart main dart fichier, nettoyez tout le code et remplacez le par 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 lorsque debug debug le paramètre dans la fonction parse() initialize parse() initialize est true true , permet d'afficher les appels api parse dans la console cette configuration peut aider à déboguer le code il est conseillé de désactiver le débogage dans la version de production 2 connecter le modèle au projet back4app trouvez votre identifiant d'application et vos identifiants de clé client en naviguant vers le tableau de bord de votre application à site web de back4app https //www back4app com/ mettez à jour votre code dans main dart main dart avec les valeurs de l'applicationid et de la clientkey de votre projet dans back4app keyapplicationid = identifiant d'application keyclientkey = clé client exécutez le projet, et l'application se chargera comme indiqué dans l'image 3 code pour l'inscription de l'utilisateur la fonction d'inscription de l'utilisateur crée un nouvel utilisateur dans votre application parse avant cela, elle vérifie que le nom d'utilisateur et l'email sont uniques si une inscription échoue, vous devez vérifier l'objet d'erreur qui est retourné la cause la plus probable est qu'un autre utilisateur a déjà pris le nom d'utilisateur ou l'email vous devez communiquer cela à vos utilisateurs et leur demander d'essayer un nom d'utilisateur différent recherchez la fonction douserregistration douserregistration dans le fichier main dart main dart remplacez le code à l'intérieur de douserregistration douserregistration par 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 } pour construire cette fonction, suivez ces étapes créez une nouvelle instance de la parseuser parseuser classe avec la commande parseuser createuser(username, password, email) parseuser createuser(username, password, email) , avec des données qui ont été remplies dans l'application appelez la signup signup fonction, qui enregistrera l'utilisateur dans votre base de données dans le tableau de bord parse vérifiez si l'utilisateur s'est inscrit avec succès si ce n'est pas le cas, montrez un message de description d'erreur le code complet devrait ressembler à ceci 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 } pour le tester, cliquez sur le exécuter exécuter bouton dans android studio/vscode après avoir fourni les identifiants d'utilisateur souhaités, vous verrez ce message après avoir cliqué sur s'inscrire si tout a été réussi la gestion des erreurs peut être testée si vous essayez d'enregistrer un utilisateur avec le même nom d'utilisateur qu'auparavant vous obtiendrez une autre erreur si vous essayez de vous inscrire sans mot de passe 4 vérifier l'enregistrement de l'utilisateur sur le tableau de bord connectez vous à back4app site web https //www back4app com/ trouvez votre application et cliquez sur tableau de bord tableau de bord > noyau noyau > navigateur navigateur > utilisateur utilisateur à ce stade, vous devriez voir votre utilisateur comme affiché ci dessous c'est fait ! à la fin de ce guide, vous avez appris comment enregistrer de nouveaux utilisateurs parse sur flutter dans le prochain guide, nous vous montrerons comment connecter et déconnecter des utilisateurs