Taking Your Cordova App Further with Onsen UI

This tutorial builds upon the first part, where we created the user interface for a sign-in and sign-up page using Onsen UI. Now, we'll add functionality using AngularJS and Firebase as the backend. The complete source code is available on GitHub.

Key Concepts:

• This tutorial demonstrates how Onsen UI, combined with Firebase, enables efficient mobile app development, specifically creating functional user authentication. AngularJS enhances interactivity and responsiveness.
• Step-by-step instructions are provided for input validation and Firebase authentication, including Firebase setup, instance creation, and FirebaseSimpleLogin for user authentication. Successful authentication redirects the user to a home page.
• The tutorial covers Firebase-based user registration, including email/password validation, user creation using auth.createUser, and redirection to the sign-in page after successful registration. Error handling includes a modal popup for invalid input.

Getting Started:

Clone the tutorial's source code and install dependencies:

<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>

Access the app at http://localhost:8901/index.html or use an Android emulator.

Implementing Sign-In:

The /OnsenUI--Part1/www/js/app.js file contains the AngularJS controller. We'll enhance it with sign-in logic:

<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>

Add ng-model directives to the username and password input fields in 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>

A modal for validation messages is added to index.html (around line 92):

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

The sign-in button's ng-click event triggers SignIn():

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

Firebase Integration:

Register for a Firebase account and obtain your Firebase URL (e.g., https://your-firebase-app.firebaseio.com). Include the Firebase and Firebase Simple Login scripts in index.html:

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

Create a Firebase instance and a FirebaseSimpleLogin instance in 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>

Remember to enable Email & Password authentication in your Firebase console.

Home Page and Logout:

Create 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>

Add the logout function to app.js:

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

Implementing Sign-Up:

Add ng-model directives to the email and password fields in the sign-up page:

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

Create the SignUp function in 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>

Add the ng-click directive to the Sign Up button:

<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>

Add a modal for sign-up validation errors similar to the sign-in modal.

Conclusion:

This enhanced tutorial provides a fully functional sign-in and sign-up system using Onsen UI, AngularJS, and Firebase. Remember to consult the Onsen UI documentation for further component exploration. The FAQs section has been omitted for brevity, as it is largely unrelated to the core code implementation.

The above is the detailed content of Taking Your Cordova App Further with Onsen UI. For more information, please follow other related articles on the PHP Chinese website!