Client Side of Bookio.com

This documentation covers the client side of Bookio which is completely written in JavaScript and HTML. It uses jQuery along with jQuery Mobile. RequireJS is also used for modularity.

To get a quick understanding of how the client software works from a user perspective, check out this wiki-page.
To see how the service is going to be presented to the customer, see this mockup.
To see the background and idea behind the project, see this web-page.

Roadmap for first public release can be found here.

Contribute

Read the description and roadmap above to get an understanding of what we are building.

Code

Issues (under Client or Server) tagged with Todo is up for grabs. Take one and start coding.

Localize

Do you speak another language than swedish, english or hungarian? Add another language!

Instructions: https://github.com/bookio/client/blob/master/docs/howto-add-new-language.md

Think

Add your GUI/UX wisdome to the sketches here: https://cacoo.com/diagrams/1YMHGARTs2lx4636
Add your CS/syntax skills here: https://github.com/bookio/client/blob/master/docs/syntax-very-short-reservation-language.md

Read the Project Goal and come up with new ideas or cool concepts.

Feel free to add comments/improvements/suggestions.

Test

Try to find bugs in the client (http://www.bookio.com/booker)
Write test scripts.
Check texts and layout on different Browsers (we only support the latest versions of all browsers)

Project Layout

The directory structure is as follows

• components - Contains general graphic components. Each component has its own directory with its privateresources.
• css - The global less files which is compiled into css. The styles.css file is included in the main index.html
• images - Contains images used around the app. Includes backgrounds, rental symbols etc.
• java - Shouldn't be there...
• js - Contains misc scripts needed throughout the app. The makefile combines these files into core.js with the command make core and this file is included in index.html.
• lib - Contains jQuery, jQuery Mobile (including the jQuery Mobile configuration file), plugins, and other common libraries. As with the files in the js folder, all library files are combined into core.js.
• pages - Since this is a jQuery Mobile app, it is all about pages. Each page has its own folder with its private resources. All pages have an HTML file along with a JavaScript file. Some pages also have a private CSS (compiled LESS), a JSON file containing translation and private images.
• widgets - Contains jQuery Mobile widgets. Again, each widget has its own directory along with any resources.
• makefile - The makefile is used for deployment and building the core files. See the documentation inside the file. The tools needed assumes Mac OSX.
• index.html - The main HTML file. This is just an empty jQuery Mobile page but it also loads the js/main.js file which starts upp the app.

Todo

Upcoming functionality is found under Issues and Milestones (check both client and server).

Issues tagged todo is up for grabs, just start coding. Milestones are larger 'chunks' that should be done in a near future. For now they need ideas, feedback and discussion for best approach.

Sketches and drafts on GUI can be found on Cacoo.

Pages

Since this is a jQuery Mobile app, everything is pages. Below is the code for a typical page.

    
        (function() {

            // Specify dependencies. In this case the language file
            // and some css.
            var dependencies = [
                'i18n!./login.json',
                'css!./login'
            ];

            define(dependencies, function(i18n) {

                function Module(page) {

                    var _page = page;
                    var _elements = {};

                    ...

                    function init() {
                        // Translate the page by looking up all
                        // elements with the 'data-i18n' attribute set.
                        _page.i18n(i18n);

                        // Hook up all elements tagged with 'data-id' attribute
                        // so we may reference them by '_elements.myelement'
                        _page.hookup(_elements, 'data-id');
                        ...
                    }

                    init();
                }

                $(document).delegate("#login-page", "pageinit", function(event) {
                    // Create a new instance of the module when the page is loaded into the DOM.
                    new Module($(event.currentTarget));
                });
            });
        })();

    

To display the page use:

    
        $.mobile.go('pages/login/login.html');
    

Or, if you want to push a page into view with a transition:

    
        $.mobile.push('pages/login/login.html');
    

This will automatically load the login.js file in the same directory and start executing the code above. All paths are relative to the current page beeing displayed.

Compiling LESS

Even though the makefile compiles the LESS files, it might be convinient to install LESS.app for OSX. It automatically compiles the LESS files in the background when modified. Another alternative is CodeKit.

Localization

To add a new language to the client, check out this documentation.