Taking Your Cordova App Further with Onsen UI
In the first part of this tutorial, we looked at how to get started with mobile app development using Onsen UI, designing the user sign in and sign up pages. In this tutorial, we’ll make these pages functional. We’ll be utilizing Firebase as a backend for the app. In Onsen UI we can use both jQuery and AngularJS for development. In this tutorial we’ll be using AngularJS.
Source code from this tutorial is available on GitHub.
Getting started
Download or clone the first tutorials source code. Install all the required dependencies as shown:
git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve
Point your browser to http://localhost:8901/index.html
and you should see the app we designed in first tutorial. You can also use the android emulator to run the app as we did in the first tutorial.
Implementing Sign In
Let’s start by defining a controller for our app. If you open up /OnsenUI--Part1/www/js/app.js
you should see a controller already defined.
(function() {
'use strict';
var module = angular.module('app', ['onsen']);
module.controller('AppController', function($scope) {
// more to come here
});
})();
First we’ll validate the username and password for empty values. If there are any issues with validation, we’ll show a modal window with a validation message. Otherwise we’ll authenticate against a Firebase database.
Let’s define a method called SignIn
inside the controller AppController
as shown below:
$scope.data = [];
$scope.SignIn = function() {
var user = $scope.data.username;
var pass = $scope.data.password;
if (user && pass) {
// success logic
} else {
// failure logic
}
};
Add the ngModel directive to the username and password input text boxes in index.html
as shown below:
<input ng-model="data.username" type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" />
<input ng-model="data.password" type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" />
Next, we’ll use the ons-modal component of Onsen UI to show a validation pop up. Add the following html code to the sign in ons-page
(Should be around line 92).
<ons-modal var="modal">
<br>
<br>Invalid Username or Password.
<br>
</ons-modal>
Now add the modal show code to the failure logic of SignIn
, replacing the // failure logic
comment:
modal.show();
Add the modal hide code to the ng-click
event of the HTML we just added as shown below:
<ons-modal var="modal" ng-click="modal.hide()">
<br>
<br>Invalid Username or Password.
<br>
</ons-modal>
Add the ngClick directive to the Sign in button as shown below:
<ons-button id="btnSignIn" modifier="large" ng-click="SignIn()">
SignIn
</ons-button>
Start the server and click on the sign in button with an empty username or password. The modal validation message will appear. Click anywhere on the pop up and it will disappear.
Here is a demo of the above code in action.
Now, let’s validate the username and password against Firebase. To get started with Firebase, you’ll need to register for a free account. Once registered and logged in, you’ll get a firebase url which in my case is :
https://burning-fire-1723.firebaseio.com/
Include the following scripts in index.html
:
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script>
<script type='text/javascript' src='https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js'></script>
Firstly we need to create an instance of firebase using our firebase url. Then using this firebase instance, create a FirebaseSimpleLogin
instance. Place the this code after the module.controller
definition in app.js
:
var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com');
var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
if (!error) {
if (user) {
// On success authentication
console.log(user);
}
}
});
Inside the SignIn
function we’ll authenticate the username and password as shown, replace the current function with the code below:
$scope.SignIn = function() {
var user = $scope.data.username;
var pass = $scope.data.password;
if (user && pass) {
// success logic
auth.login('password', {
email: user,
password: pass
});
} else {
// failure logic
modal.show();
}
};
We have used auth.login
to authenticate the username and password against the firebase database. On a successful authentication the user will be logged in.
In order to enable the authentication process, firstly log into firebase and open the application you are currently working on. From the left side menu, click on Login & Auth
. Under the Email & Password
tab, check the Enable Email & Password Authentication
.
Add a new user to the firebase database with a username and password. Now, run the app and try log in using the new username and password. Check the browser console which will have the user logged on successful user authentication.
Here is a demo of the above code in action. Try to sign in using username sam@sam.com
and password sam
.
Next on a successful user sign in, we’ll redirect the user to home.html
. Create a new file called home.html
with the following code.
<ons-template id="home.html">
<ons-page>
<ons-toolbar>
<div class="center">Welcome</div>
<div class="right">
<ons-icon icon="ion-log-out" size="40px" title="Logout" style="cursor:pointer;" ng-click="logout()"></ons-icon>
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-page>
<p style="padding-top: 100px; color: #999; text-align: center">Welcome Home {{username}}!!</p>
</ons-page>
</div>
</ons-page>
</ons-template>
Add a new method called logout
as shown:
$scope.logout = function() {
auth.logout(); // logging out the firebase
$scope.data = []; // clearing user data
myNavigator.popPage(); // redirecting to sign in page
};
Now modify the FirebaseSimpleLogin
callback as shown:
var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
if (!error) {
if (user) {
$scope.username = user.email;
myNavigator.pushPage('home.html', {
animation: 'slide'
});
}
}
});
We have used ons-navigator for page navigation. myNavigator.pushPage
is used to navigate to home.html
page.
Here is a demo of the above code in action.
Implementing Sign Up
We’ll be implementing sign up functionality also using firebase. In the sign up page we currently have three input fields for sign up. We’ll be using only email and password since that’s all that’s required for firebase user sign up.
Firstly add the ngModel directive to both the fields as shown:
<ons-list-item>
<input type="text" placeholder="Email Address" ng-model="reg.email" class="text-input text-input--transparent" style="margin-top:58px; width: 100%;">
</ons-list-item>
<ons-list-item>
<input type="text" ng-model="reg.pass" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
Create a SignUp
method in AppController
which will validate the email and password for empty values. Use the auth.create
method to sign up a new user as below:
$scope.reg = [];
$scope.SignUp = function() {
var email = $scope.reg.email;
var password = $scope.reg.pass;
auth.createUser(email, password, function(error, user) {
if (!error) {
myNavigator.popPage();
} else {
alert('error');
}
});
};
Add the ngClick directive to the Sign Up button as below:
<ons-button modifier="large" ng-click="SignUp()">
Sign Up
</ons-button>
Add a new modal to the Sign Up page which we’ll show incase the user doesn’t enter an email or password. Here is how it looks:
<ons-modal ng-click="modal.hide()" var="modal">
<br>
<br>Enter Email Address and Password.
<br>
</ons-modal>
Modify the SignUp function as shown below:
$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();
} else {
alert('error');
}
});
} else {
modal.show(); // to show validation pop up message
}
};
Now restart the app and try signing up. On a successful sign up it will navigate to the Sign In page. Try signing in using the new credentials and you should be signed in.
Here is a demo of the above sign in and sign up functionality in action.
Conclusion
In this tutorial, we implemented the sign in and sign up functionality using the Onsen UI framework and Firebase as a back end.
Have a look at the number of other components offered by Onsen UI. For an in depth exploration of the Onsen UI framework, refer the official docs.
Do let us know your thoughts in the comments below!