Share
Bienvenue dans la troisième partie de l’authentification des utilisateurs avec Titanium. Titanium est un compilateur croisé open source qui vous permet d'écrire des applications pour iPhone et Android (bientôt sur le BlackBerry!) En utilisant Javascript. Nous utiliserons PHP comme langage de code côté serveur et ma base de données sera MySQL. Pour cet exemple, j'utilise MAMP pour développer localement. Dans la troisième partie, nous verrons comment ajouter une nouvelle fenêtre et lui transmettre les résultats de la base de données lorsqu'un utilisateur se connecte à l'aide d'événements personnalisés. Cette nouvelle fenêtre représentera votre interface "Connecté". Si vous ne l'avez pas déjà lu, je vous recommande vivement de commencer par la première partie.
Dans la première partie, nous avons créé la base de données et ajouté un utilisateur. Nous avons ensuite créé notre interface de connexion en créant un groupe d'onglets, un onglet et une fenêtre. Nous avons ensuite donné quelques actions à notre bouton de connexion. Notre fichier PHP interrogé notre base de données et sur une connexion réussie, il a renvoyé notre nom et email. Si la connexion échouait, nous renvoyions une chaîne indiquant simplement un nom d'utilisateur et / ou un mot de passe non valide. Dans la partie 2, nous avons créé un nouvel onglet sur l'écran principal. Cet onglet a basculé notre vue sur une vue «Créer un compte» qui permettait à un utilisateur de s'inscrire. Dans la troisième partie, nous créerons une nouvelle fenêtre lorsque l'utilisateur se connectera et lui transmettra certaines de ses données. Cette fenêtre est finalement votre interface "Connecté".
Permet d’ouvrir login.js et de faire défiler jusqu’à notre méthode loginReq.onload (). Permet de supprimer l’alerte que nous avons actuellement en place lors d’une connexion réussie et de la remplacer par celle-ci:
Accentsconagua
loginReq.onload = function () var json = this.responseText; var réponse = JSON.parse (json); if (response.logged == true) username.blur (); password.blur (); Ti.App.fireEvent ('grantEntrance', name: response.name, email: response.email); win.close (); else alert (response.message); ; Donc, ce que nous avons fait ici a été de remplacer notre alerte par un événement que nous avons déclenché. Nous organisons un événement appelé 'grantEntrance' depuis la connexion réussie. Nous passons également deux objets: nom et email. Nous définissons l'objet name égal à ce que l'entrée de l'utilisateur était lors de la création de son compte (cette information est renvoyée par notre fichier post_auth.php). Même chose pour leur email. Nous avons également appelé la méthode blur () pour supprimer le curseur de l'un des champs de texte. Enfin, nous fermons la fenêtre de connexion.
Ne compilez pas pour l'instant car vous ne remarquerez rien si vous le faites. Pour continuer, nous devons ajouter un écouteur d'événement. Nous le ferons dans les deux prochaines étapes.
Ouvrez app.js. Nous voulons créer une nouvelle fenêtre et un nouvel onglet. Dans les tutoriels précédents, nous avons tout de suite ajouté les onglets en utilisant la méthode addTab (). Dans ce cas, nous ne l'ajouterons pas tout de suite. J'ai appelé ma fenêtre "Connecté" "principale". Ajoutez simplement la nouvelle fenêtre et l'onglet sous la ligne de groupe de tabulation dans app.js:
Titanium.UI.setBackgroundColor ('# fff'); var tabGroup = Titanium.UI.createTabGroup (); var main = Titanium.UI.createWindow (); var mainTab = Titanium.UI.createTab (); var login = Titanium.UI.createWindow (titre: 'Démo d'authentification d'utilisateur', url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", fenêtre: login); var account = Titanium.UI.createWindow (titre: 'Nouveau compte', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (titre: 'Nouveau compte', fenêtre: compte); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open (); Votre app.js devrait maintenant refléter ce qui précède. Cependant, ne compilez pas car vous ne verrez rien. Nous allons compiler ensuite, promis!
Dans login.js, nous avons "déclenché" notre événement "grantEntrance". Nous voulons créer un écouteur add event pour écouter cet événement. Ajoutez ceci au bas de notre fichier app.js:
Ti.App.addEventListener ('grantEntrance', fonction (événement) main.tabBarHidden = true; main.title = 'Bienvenue' + event.name; main.url = 'main_windows / main.js'; main.name = event .name; main.email = event.email; mainTab.window = main; tabGroup.addTab (mainTab); tabGroup.removeTab (loginTab); tabGroup.removeTab (accountTab);); Donc, à ce stade, nous allons définir certaines propriétés dans notre fenêtre "principale". Tout d’abord, masquez la barre d’onglet en bas car nous n’avons plus besoin des onglets login et account. Nous définissons le titre supérieur avec le message "Bienvenue, Ronnie Swietek" (ou le nom que vous entrez lorsque vous avez créé le compte). Nous avons défini la propriété URL pour utiliser le fichier main.js. Nous créons deux propriétés appelées name et e-mail afin de pouvoir les appeler à tout moment dans notre interface "Connecté". Nous définissons notre propriété de fenêtre mainTab sur notre fenêtre principale. Enfin, nous ajoutons enfin notre onglet et supprimons le loginTab ainsi que le accountTab car ils ne sont plus nécessaires.
Avant de compiler, vérifiez que vous avez créé un fichier main.js et enregistrez-le dans le dossier main_windows. Maintenant, vous pouvez aller de l'avant et compiler. Lors de la compilation et de la connexion, vous devriez voir un écran vide, à l’exception du titre en haut qui devrait contenir votre nom..
Lorsque vous vous connectez, l’objet que nous avons créé s’affiche dans la console Titanium. Ma console en titane dit ceci quand je me connecte:
email = "[email protected]"; name = "Ronnie Swietek";
Ouvrez main.js. Pour le moment, il devrait être vide, mais allez-y, insérez-le, enregistrez et compilez:
var win = Titanium.UI.currentWindow; var msg = Titanium.UI.createLabel (text: "Vous vous êtes connecté avec succès. Après vous être connecté, nous vous avons renvoyé votre adresse email et votre nom. Vous pouvez transmettre toutes sortes de données simplement en créant des objets sur votre fenêtre. \ n \ nVotre email est: \ n "+ win.email +" \ n \ nvotre nom est: \ n "+ win.name, haut: 10, gauche: 10, largeur: 300, hauteur: 'auto'); win.add (msg);
Lorsque vous vous connectez, vous devriez voir le texte que nous avons placé sur notre étiquette. Nous avons également accédé aux objets créés via "win.objectName". Dans notre cas, win.name et win.email
Dans la troisième partie de cette série, nous avons découvert les événements personnalisés et la transmission de données à Windows. Les possibilités sont infinies à ce stade. C'est à vous de créer quelque chose de grand avec vos connaissances en authentification utilisateur. J'espère vraiment que vous avez aimé suivre ces tutoriels autant que j'ai aimé les faire. A bientôt dans le futur!
