Nehmen Sie Ihre Cordova -App mit Onsen UI weiter

Dieses Tutorial baut auf dem ersten Teil auf, in dem wir die Benutzeroberfläche für eine Anmeldungs- und Anmeldeseite mithilfe der Onsen-Benutzeroberfläche erstellt haben. Jetzt werden wir Funktionen mit AngularJS und Firebase als Backend hinzufügen. Der vollständige Quellcode ist auf Github verfügbar.

Schlüsselkonzepte:

• Dieses Tutorial zeigt, wie Onsen UI, kombiniert mit Firebase, eine effiziente Entwicklung der mobilen App ermöglicht, und das Erstellen einer funktionalen Benutzerauthentifizierung. AngularJs verbessert die Interaktivität und Reaktionsfähigkeit.
• Schritt-für-Schritt-Anweisungen werden für die Eingabevalidierung und die Firebase-Authentifizierung vorgesehen, einschließlich Firebase-Setup, Instanzerstellung und FirebaseSimpleLogin für die Benutzerauthentifizierung. Erfolgreiche Authentifizierung leitet den Benutzer auf eine Startseite um.
• Das Tutorial deckt eine Firebase-basierte Benutzerregistrierung ab, einschließlich E-Mail-/Kennwortvalidierung, Benutzererstellung mit auth.createUser und nach erfolgreicher Registrierung zur Anmeldeseite. Die Fehlerbehandlung enthält ein modales Popup für ungültige Eingaben.

Erste Schritte:

Klonen Sie den Quellcode des Tutorials und installieren Sie Abhängigkeiten:

git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve

Zugriff auf die App unter http://localhost:8901/index.html oder verwenden Sie einen Android -Emulator.

Implementierung von Anmeldung:

Die Datei /OnsenUI--Part1/www/js/app.js enthält den AngularJS -Controller. Wir werden es mit Anmeldelogik verbessern:

(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)
    });

})();

add ng-model Richtlinien zu den Benutzernamen- und Kennworteingangsfeldern in index.html:

hinzufügen

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

Ein Modal für Validierungsnachrichten wird zu index.html (um Zeile 92) hinzugefügt:

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

Die Ereignisauslöser der Anmeldetaste ng-click: SignIn()

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

FireBase -Integration:

Registrieren Sie sich für ein Firebase -Konto und erhalten Sie Ihre Firebase -URL (z. B.

). Geben Sie die FireBase- und Firebase -einfache Anmeldungsskripte in https://your-firebase-app.firebaseio.com: index.html ein

<🎜>
<🎜>

Erstellen Sie eine Firebase -Instanz und eine

-Schichtinstanz in FirebaseSimpleLogin: app.js

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
    }
});

Denken Sie daran, eine E -Mail- und Passwortauthentifizierung in Ihrer Firebase -Konsole zu aktivieren.

Startseite und Abmelden:

erstellen

: home.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>

Fügen Sie die

-Funktion zu logout: app.js hinzu

$scope.logout = function() {
    auth.logout();
    $scope.data = [];
    myNavigator.popPage();
    $scope.$apply(); // Ensure Angular updates the view
};

Implementierung der Anmeldung:

add

Anweisungen zu den E-Mail- und Passwortfeldern in der Anmeldeseite: ng-model

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

Erstellen Sie die

-Funktion in SignUp: app.js

$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();
    }
};

Fügen Sie die

-Direktive zur Anmeldetaste hinzu: ng-click

git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve

Fügen Sie ein Modal für Anmeldevalidierungsfehler hinzu, ähnlich dem Anmeldemodal.

Schlussfolgerung:

Dieses erweiterte Tutorial bietet ein voll funktionsfähiges Anmeldungs- und Anmeldesystem mit Onsen UI, AngularJS und Firebase. Denken Sie daran, die Dokumentation von Onsen UI zu konsultieren, um weitere Komponenten -Exploration zu erhalten. Der FAQS -Abschnitt wurde für die Kürze weggelassen, da er weitgehend nicht mit der Kerncode -Implementierung zusammenhängt.

Das obige ist der detaillierte Inhalt vonNehmen Sie Ihre Cordova -App mit Onsen UI weiter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!