Prendre votre application Cordova avec une interface utilisateur onsen

Ce tutoriel s'appuie sur la première partie, où nous avons créé l'interface utilisateur pour une page de connexion et d'inscription à l'aide de l'interface utilisateur onsen. Maintenant, nous ajouterons des fonctionnalités en utilisant AngularJS et Firebase comme backend. Le code source complet est disponible sur github.

Concepts clés:

• Ce didacticiel montre comment l'interface utilisateur onsen, combinée à Firebase, permet un développement efficace d'applications mobiles, créant spécifiquement une authentification fonctionnelle des utilisateurs. AngularJS améliore l'interactivité et la réactivité.
• Les instructions étape par étape sont fournies pour la validation des entrées et l'authentification des bases de feu, y compris la configuration de la base de feu, la création d'instructions et FirebaseSimpleLogin pour l'authentification des utilisateurs. L'authentification réussie redirige l'utilisateur vers une page d'accueil.
• Le tutoriel couvre l'enregistrement des utilisateurs basés sur la base de feu, y compris la validation des e-mails / mot de passe, la création d'utilisateurs utilisant auth.createUser et la redirection vers la page de connexion après une inscription réussie. La gestion des erreurs comprend une fenêtre contextuelle modale pour les entrées non valides.

PRENDRE:

Clone Le code source du tutoriel et installez les dépendances:

<code class="language-bash">git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve</code>

Accédez à l'application à http://localhost:8901/index.html ou utilisez un émulateur Android.

Implémentation de connexion:

Le fichier /OnsenUI--Part1/www/js/app.js contient le contrôleur AngularJS. Nous allons l'améliorer avec une logique de connexion:

<code class="language-javascript">(function() {
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('AppController', function($scope) {
        $scope.data = [];

        $scope.SignIn = function() {
            var user = $scope.data.username;
            var pass = $scope.data.password;
            if (user && pass) {
                // Firebase authentication
                auth.login('password', { email: user, password: pass });
            } else {
                // Show validation modal
                modal.show();
            }
        };

        // ... (rest of the controller)
    });

})();</code>

Ajouter ng-model directives aux champs d'entrée de nom d'utilisateur et de mot de passe dans index.html:

<code class="language-html"><input ng-model="data.username" type="text" placeholder="Username" ...>
<input ng-model="data.password" type="password" placeholder="Password" ...></code>

Un modal pour les messages de validation est ajouté à index.html (autour de la ligne 92):

<code class="language-html"><ons-modal var="modal" ng-click="modal.hide()">
    Invalid Username or Password.
</ons-modal></code>

L'événement du bouton de connexion ng-click déclenche SignIn():

<code class="language-html"><ons-button id="btnSignIn" modifier="large" ng-click="SignIn()">SignIn</ons-button></code>

Intégration de la base de feu:

Inscrivez-vous pour un compte Firebase et obtenez votre URL de base de feu (par exemple, https://your-firebase-app.firebaseio.com). Incluez les scripts de connexion simples de base de feu et de base de feu dans index.html:

<code class="language-html">
</code>

Créez une instance de base de feu et une instance FirebaseSimpleLogin dans app.js:

<code class="language-javascript">var firebaseRef = new Firebase('YOUR_FIREBASE_URL');
var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
    if (!error && user) {
        $scope.username = user.email;
        myNavigator.pushPage('home.html', { animation: 'slide' });
        $scope.$apply(); // Ensure Angular updates the view
    }
});</code>

N'oubliez pas d'activer l'authentification des e-mails et du mot de passe dans votre console de base de base.

Page d'accueil et déconnexion:

Créer home.html:

<code class="language-html"><ons-template id="home.html">
    <ons-page>
        <!-- ... content ... -->
        <ons-icon icon="ion-log-out" ng-click="logout()">Logout</ons-icon>
    </ons-page>
</ons-template></code>

Ajoutez la fonction logout à app.js:

<code class="language-javascript">$scope.logout = function() {
    auth.logout();
    $scope.data = [];
    myNavigator.popPage();
    $scope.$apply(); // Ensure Angular updates the view
};</code>

Implémentation d'inscription:

Ajouter ng-model directives aux champs de messagerie et de mot de passe dans la page d'inscription:

<code class="language-html"><input ng-model="reg.email" type="text" placeholder="Email Address" ...>
<input ng-model="reg.pass" type="password" placeholder="Password" ...></code>

Créez la fonction SignUp dans app.js:

<code class="language-javascript">$scope.reg = [];
$scope.SignUp = function() {
    var email = $scope.reg.email;
    var password = $scope.reg.pass;
    if (email && password) {
        auth.createUser(email, password, function(error, user) {
            if (!error) {
                myNavigator.popPage();
                $scope.$apply(); // Ensure Angular updates the view
            } else {
                alert('Error creating user: ' + error);
            }
        });
    } else {
        modal.show();
    }
};</code>

Ajoutez la directive ng-click au bouton d'inscription:

<code class="language-bash">git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve</code>

Ajouter un modal pour les erreurs de validation d'inscription similaires au modal de connexion.

Conclusion:

Ce tutoriel amélioré fournit un système de connexion et d'inscription entièrement fonctionnel à l'aide de l'interface utilisateur ONSEN, AngularJS et Firebase. N'oubliez pas de consulter la documentation de l'interface utilisateur ONSEN pour une nouvelle exploration des composants. La section FAQS a été omise par la concision, car elle n'est largement pas liée à l'implémentation du code de base.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!