1. Including all the external libraries.

2. Designed the code architecture. All the important files with re-usable and importatn features go into the core folder. 2. Structured the code for models, views and collections into different directories..
rahulbhanushali · Feb 16, 2015 · 546ad76 · 546ad76
1 parent 6dd119a
commit 546ad76
Show file tree

Hide file tree

Showing 228 changed files with 5,998 additions and 4 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 rahulbhanushali
+Copyright (c) 2015 Rahul Bhanushali
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,5 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,2 +1,38 @@
-# backbone-firebase-jquerymobile-skeleton
+#Backbone-Firebase-jquerymobile-Skeleton
+___
+
 Single page application skeleton using backbonejs, firebase / backbonefire, jquery mobile and requirejs.
+
+This skeleton uses best of open source Javascript libraries and frameworks which are as follows:
+
+| Framework / Library | Version |
+| :-----------------: | -------:|
+| jQuery              | 2.1.1   |
+| jQuery Mobile       | 1.4.5   |
+| BackboneJS          | 1.1.2   |
+| UnderscoreJS        | 1.1.2   |
+| Firebase            | 2.0.6   |
+| BackboneFire        | 0.5.0   |
+| RequireJS           | 1.7.0   |
+
+Use this skeleton app to bootstrap your kickass Single Page Applications (SPA)
+and start coding.
+
+#Code Architecture
+___
+
+The skeleton not only helps in defining a robust structure for your application 
+
+1. All the css files reside in the styles folder and javascript files in js folder respectively.
+2. Javascript external libraries i.e. bacbkone, jquery mobile, firebase etc. reside in the js/lib folder.
+3. The core components of the applications go in js/core folder. As of now, it defines base collection, model, view
+ and some utilities for validation and Firebase details.
+4. Use the js/app folder to places the required backbone models, views and collections.
+
+*The skeleton comes with an ready to use `Session` Model that you can use to authenticate users.*
+
+#Firebase configuration
+___
+
+Define your Firebase URL in the file: `/js/core/utils/firebaseProvider.js` and get started. No additional configuration 
+required.
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Backbone Firebase</title>
+    <link rel="stylesheet" href="styles/jquery.mobile/jquery.mobile-1.4.5.min.css"/>
+    <link rel="stylesheet" href="styles/style.css"/>
+</head>
+<body>
+<div class="init-page">
+    Initializing app
+</div>
+<script data-main="js/main" src="js/lib/requirejs/require.js"></script>
+</body>
+</html>
diff --git a/src/js/app-libraries.js b/src/js/app-libraries.js
@@ -0,0 +1,14 @@
+define(function (require) {
+
+    'use strict';
+
+    /**
+     * Define the dependencies.
+     * Use this module in other modules to access the external libraries directly.
+     */
+    var $ = require('jquery'),
+        jquerymobile = require('jquerymobile'),
+        _ = require('underscore'),
+        Backbone = require('backbone'),
+        BackboneFire = require('backbonefire');
+});
diff --git a/src/js/app.js b/src/js/app.js
@@ -0,0 +1,26 @@
+define(function (require) {
+
+    'use strict';
+
+    /**
+     * Define required dependencies.
+     */
+    var Router = require('router');
+
+    /**
+     * Initialize the application
+     */
+    var initialize = function () {
+        //Remove page from DOM when it's being replaced
+        $('div[data-role="page"]').on('pagehide', function (event, ui) {
+            $(event.currentTarget).remove();
+        });
+
+        // Pass in our Router module and call it's initialize function
+        Router.initialize();
+    };
+
+    return {
+        initialize: initialize
+    };
+});
diff --git a/src/js/app/views/home.js b/src/js/app/views/home.js
@@ -0,0 +1,29 @@
+define(function (require) {
+
+    'use strict';
+
+    /**
+     * Define the required dependencies
+     * @type {exports}
+     */
+    var BaseView = require('core/views/base'),
+        Template = require('text!./templates/home.html');
+
+    /**
+     * Define the view
+     */
+    var View = BaseView.extend({
+    });
+
+    /**
+     * Renders the view
+     * @returns {View}
+     */
+    View.prototype.render = function () {
+        this.$el.html(Template);
+        this.ready();
+        return this;
+    };
+
+    return View;
+});
diff --git a/src/js/app/views/templates/home.html b/src/js/app/views/templates/home.html
@@ -0,0 +1,11 @@
+<div id="header" data-role="header" data-theme="b">
+    <h1>Backbone Firebase Jquery Mobile Skeleton</h1>
+</div>
+
+<div id="content" data-role="content" data-theme="e">
+    This is the app home page
+</div>
+
+<div id="footer" data-role="footer" data-theme="b">
+    &copy; 2015 Rahul Bhanushali
+</div>
diff --git a/src/js/core/collections/base.js b/src/js/core/collections/base.js
@@ -0,0 +1,26 @@
+define(function (require) {
+    'use strict';
+
+    /**
+     * Define the dependencies
+     * @type {exports}
+     */
+    var Libraries = require('app-libraries'),
+        FirebaseProvider = require('core/utils/firebaseProvider');
+
+    /**
+     * Define the firebase collection
+     * @type {*|void}
+     */
+    var Base = Backbone.Firebase.Collection.extend({
+        initialize: function () {
+            this.firebaseProvider = FirebaseProvider;
+            this.firebaseReference = FirebaseProvider.getFirebaseObject();
+        },
+        url: function () {
+            throw new Error("Firebase Collection URL not defined!");
+        }
+    });
+
+    return Base;
+});
diff --git a/src/js/core/models/base.js b/src/js/core/models/base.js
@@ -0,0 +1,21 @@
+define(function (require) {
+    'use strict';
+
+    /**
+     * Define the dependencies
+     * @type {exports}
+     */
+    var FirebaseProvider = require('core/utils/firebaseProvider'),
+        Backbone = require('backbone');
+
+    /**
+     * Define the model
+     */
+    var Base = Backbone.Model.extend({});
+
+    Base.prototype.initialize = function () {
+        this.firebaseReference = FirebaseProvider.getFirebaseObject();
+    };
+
+    return Base;
+});
diff --git a/src/js/core/models/session.js b/src/js/core/models/session.js
@@ -0,0 +1,147 @@
+define(function (require) {
+
+    'use strict';
+
+    /**
+     * Define the dependencies
+     * @type {exports}
+     */
+    var BaseModel = require('core/models/base');
+
+    /**
+     * Define the session model
+     * This model uses firebase reference object to authenticate user
+     */
+    var Session = BaseModel.extend({});
+
+    /**
+     * Define email property for the model
+     */
+    Object.defineProperty(Session, 'email',
+        {
+            get: function () {
+                return this.get('email');
+            },
+            set: function (value) {
+                this.set('email', value);
+            }
+        }
+    );
+
+    /**
+     * Define password property for the model
+     */
+    Object.defineProperty(Session, 'password',
+        {
+            get: function () {
+                return this.get('password');
+            },
+            set: function (value) {
+                this.set('password', value);
+            }
+        }
+    );
+
+    /**
+     * Create a new firebase user with the defined credentials
+     * @param {function} callback The callback function to be called once the user has been created
+     */
+    Session.prototype.register = function (callback) {
+
+        var info = {
+            isValid: false
+        };
+
+        this.firebaseReference.createUser(
+            this.toJSON(),
+            function (error) {
+                if (error) {
+                    info['error'] = error.message;
+                } else {
+                    info['isValid'] = true;
+                }
+
+                if (callback) {
+                    callback(info);
+                }
+            }
+        );
+    };
+
+    /**
+     * Authenticate the user
+     * @param {function} callback The callback function to be called when the authentication process is complete
+     */
+    Session.prototype.authenticate = function (callback) {
+
+        var authInfo = {
+            isValid: false
+        };
+
+        this.firebaseReference.authWithPassword(
+            this.toJSON(),
+            function (error, authData) {
+                if (error) {
+                    authInfo['error'] = error.message;
+                } else {
+
+                    var user = authData.uid;
+                    // userId is not properly formatted as required
+                    var userId = user.split(':');
+                    // add it to current session
+                    sessionStorage.setItem('uid',userId[1]);
+                    authInfo['isValid'] = true;
+                }
+
+                if (callback) {
+                    callback(authInfo);
+                }
+            }
+        );
+    };
+
+    /**
+     * Log the user out of the application
+     * @param callback
+     */
+    Session.prototype.logout = function (callback) {
+
+        this.firebaseReference.unauth();
+
+        if (callback) {
+            callback(authInfo);
+        }
+    };
+
+    /**
+     * Get the authentication status of the current user
+     * @returns {*}
+     */
+    Session.prototype.getAuth = function () {
+        return this.firebaseReference.getAuth();
+    };
+
+    /**
+     * Reset the password for the user
+     */
+    Session.prototype.resetPassword = function () {
+        var ref = this.firebaseReference;
+        ref.resetPassword({
+            email: this.attributes.email
+        }, function(error) {
+            if (error) {
+                switch (error.code) {
+                    case "INVALID_USER":
+                        console.log("The specified user account does not exist.");
+                        break;
+                    default:
+                        console.log("Error resetting password:", error);
+                }
+            } else {
+                console.log("Password reset email sent successfully!");
+            }
+        });
+    };
+
+    return Session;
+});
diff --git a/src/js/core/utils/firebaseProvider.js b/src/js/core/utils/firebaseProvider.js
@@ -0,0 +1,36 @@
+define(function (require) {
+
+    'use strict';
+
+    /**
+     * Define the required dependency
+     */
+    var Firebase = require('firebase');
+
+    //the firebase to be used
+    //Update your firebase url here
+    var firebaseUrl = "<YOUR_FIREBASE_URL_HERE>";
+
+    var firebaseObject = new Firebase(firebaseUrl);
+
+    /**
+     * Get the firebase url
+     * @returns {string}
+     */
+    function getFirebaseUrl() {
+        return firebaseUrl;
+    }
+
+    /**
+     * Get the firebase reference object
+     * @returns {Firebase}
+     */
+    function getFirebaseObject() {
+        return firebaseObject;
+    }
+
+    return {
+        getFirebaseObject: getFirebaseObject,
+        getFirebaseUrl: getFirebaseUrl
+    };
+});