4.07.2013

Callbacks

Version en español
In javascript, callbacks are a complicated idea and for someone new to javascript, the idea causes significant confusion.

First - what is a callback?

A callback is the call that the system does in return when a process we started has yet to finish, and we need that process call to do something specific. Wikipedia gives a pretty good definition of this.  We usually do a function that returns something in a synchronous way, for example
function turnOnPc() {
    //more stuff
    if (error) {
        return false;
    } else {
        return true;
    }
}

function doSomethingWithPc(isOn) {
    //do something
}

var isOn = turnOnPc();
doSomethingWithPc(isOn);
//other functions
In this case, we just call the function "turnOnPC" and we wait for the function to finish processing, looking for  areturn as to whether or not the pc turned on correctly or not.  But, what happens if we have a slow or really old pc? Sitting and waiting won't be effective here.

Asynchronous programming

Asynchronous programming refers to the ability to call a function without the need of waiting for it to end.  In javascript it's very common to use this.  Javascript allows us to send functions as parameters to the functions... wait, what??

In javascript functions behave a little bit differently than in other programming languages.  For more information about functions in general, check out the MDN documentation. Back to our example

function turnOnPc(callback) {
 //more stuff
 if (error) {
  callback(error, false);
 } else {
  callback(null, true);
 }
}

function doSomethingWithPc(error, isOn) {
 //do something
}

turnOnPc(doSomethingWithPc);
//other functions

Usually we pass variables as arguments to other functions, which you can also easily do in js.  In this case we are sending a function as an argument to "turnOnPc" and at the end of the function it calls back the function we sent with some parameters "callback()".  In this particular case we are using a common pattern found in node.js where we always send the error variable as a first parameter and then all the other data variables as needed.

In the trivial example of turning on a PC, imagine having to wait to go get a drink of water until your PC finished booting.  Asyncronous calls allow you to go get a drink of water while your PC boots.  We don't have to wait for "turnOnPc" to end, when "turnOnPc" ends it will call the function we sent it and then follow with the functionality necessary.

Callback Hell

Its very common to be entangled in several functions that needs a callback, lets look to our example expanded

function turnOnPc(callback) {
 //more stuff
 if (error) {
  callback(error, false);
 } else {
  callback(null, true);
 }
}
turnOnPc(function (error, isOn) {
 if (!isOn) {
  drinkWater(function () {
   //drinking water
   doSomethingElse(function () {
    //...
   });
  });
 }
});

To avoid long lists of nested callbacks, generate functions with names and don't send anonymous functions.  Even better yet, use "promises" to do that.

Where i have seen them??!!

One of the most common uses for callbacks in javascript is calling AJAX or DOM events.  In node.js usually it's used for complex calls, slow methods, or file/network access.  Here is an easy example with jquery


$('element').on('click', function(event) {
 //hacer algo con el elemento(this)/evento(event)
});

In this case, we are binding the function to the click event of the element "element".  You can read this as  when the user clicks on "element" run this function.  You are not necessarily on the screen doing nothing, but you are waiting for the event to happen to run the function while the page is still working without blocking the page.

Another common example is ajax


$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

Although jquery already uses promises, we can use this as an example.  Here we are calling some service, and when that service responds we run the function inside "done"

Node.js uses callbacks for many things. ffor example, when we are loading a file we can do it synchronously or asynchronously.  If we do it synchronously the thread will stop until the file is loaded completely which is not a good way to do it.  But, if we do it asynchronously, other functions will run while the file ends loading

fs.readFile('data.txt', function (err, data) {
  if (err)
    throw err;
  if (data)
    console.log(data.toString('utf8'));
});

The function takes the file path and a callback.  When the function finishes loading the file it calls the callback.

What happens with this?!!

"This" in javascript its the context in which we are currently running, in the browser.  Without being inside a function specifically, the context is "window" which is the global object.  When you are inside a callback, "this" can change.  For example when you are listening for an event with jquery, "this" is the DOM element that you have listening to the event

//here this is window
var parentwindow = this;
$('element').on('click', function(event) {
 //do something with the element(this)/event
 //here this, its the element (e.g. an "a" tag)
 var element = this;
});

You can send a different context for the callback using apply or call, in our initial example it would be

function turnOnPc(callback) {
 //more stuff
 if (error) {
  callback.apply(othercontext, error, false);
 } else {
  callback.apply(othercontext, null, true);
 }
}

This way the first parameter will be "this" in the callback

Questions, etc, put them in the comments :)

5.28.2012

deploy to cloudno.de your node.js app


Version en español

This time we will see how to deploy tour app in node.js to cloudno.de, there are other services also that do a great job like heroku or nodester but for this time we will use this one that i recommend, they helped me when i need it and you can create couchdb and redis databases if you needed, the service its in beta and free so its nice, very nice

Like all the other systems we have to install their cli or "command line interface", which its only an script to help us with the deployment, updates and everything else of our app in their systems

npm install cloudnode-cli -g

Or without the g if you want a local installation and not global

Ok, we have the cli installed, lets go to the page and create a new app, this will give us the subdomain url of the app and the github repository to upload it, also a user name and a key

With the cli installed, lets setup the user, this have to be done only once


$ cloudnode user setup <username> <password>
cloudnode info verifying credentials...

the user is the same you use to login in the page and the password is the api key that the system gave you and its located in the section about your account in the page

Now, to see more options, right in the terminal "cloudnode" and you will see all the commands

Now lets clone the app that you created in the page locally to start coding, to do this lets do an "app init" in mac or linux, if you are in windows you have to do the steps manually :(

in mac or linux

$ cloudnode app init <app name>
cloudnode info initializing git repo for <app name> into folder <app name>
cloudnode info cloning the repo git clone cloudnode@git.cloudno.de:/git/hs/62-6fc0d44abf9974b91625cc10ff118871.git <app name>
cloudnode info clone complete

in windows



  1. Create a local sub directory for the application
  2. Initialize a local repository (git init)
  3. Clone the remote repo and the the remote origin URL (git clone ...)
  4. Create a sample server.js file with a simple "Hello World" application
  5. Add the new file to the local repository (git add .)
  6. Commit the changes (git commit -am "Initial commit")
  7. Push the changes live (git push origin master)



What it does its clone the repository to your machine and create an entry code just to test the app, you can clone your app in cloud9ide.com and commit there

Every time you make a commit, the system in cloudnode will restart the app so you can see the new changes immediately, also it doesnt matter the port you put on your application since cloudnode will overwrite it

And thats it, you can see your app running in cloudnode with the url provided that will be something like <app name>.cloudno.de

In your admin page you can see the log, stop it or reboot it

Greetings

4.24.2012

node.js fragments - part 1


This are gonna be some fragments of common code of node.js, some were used for nomination, hopefully you will find them useful and comeback for reference

Version en español

The always needed first program

Loading modules

First part on the file is loading a module, the modules are loaded with require, to understand more about require check this post, plus read the documentation about it

Besides just loading them, you can pass them parameters like

require('./routes/index')(app, log);

In this case we are passing some vars to the require module

Console

Also in the first program, we can see the console.log to print out information in the console, this is useful at debugging time or to show information to the user, check the documentation for more information about using the console, there are also different levels to show the information besides there are a lot of modules that extend the functionality, some print out in colors, prettify the information, etc.

Create a server

Besides creating a serve with the http module and tell the port and the ip to listen, we can create servers with other modules, one of the most common is express, to create it with express its simple:

var app = module.exports = express.createServer();


And then we can tell it in which port to listen

app.listen(3000);


You can pass the ip also, by default it takes the '0.0.0.0' which means everywhere

There are a lot of other modules to create servers, do a quick search in github or npm to find the one that suit you better, most of them follows the same pattern

Read and write files

For this we have a nice module called "fs" or filesystem, this module have everything needed for read, write, etc in files, links or directories

FS have the option to do the operations in async or sync way, as a good practice try to always do it async

Read

fs.readFile('data.txt', function (err, data) {
  if (err)
    throw err;
  if (data)
    console.log(data.toString('utf8'));
});

fs.readdir('.', function (err, files) {
 if (err)
    throw err;
 for (var index in files) {
    console.log(files[index]);
 }
});


Write

fs.writeFile('data.txt', 'Hello, World!', function (err) {
     if (err)
       throw err;
});


Check attributes

fs.stat('data.txt', function (err, stats) {
  if (err)
     throw err;
  if (stats.isFile()) {
      console.log('It\'s a file!');
  }
  if (stats.isDirectory()) {
    console.log('It\'s a directory!');
  }
}


For more information check the documentation

Also you can use async.js to do it even more easy the async manipulation of files

Logging

In case you want to log information to a file for future references, you can use some modules for this, in the case of nomination we use "log.js" which is quite simple to use:

Log = require('log'),
log = new Log(),
fs = require('fs');


First we have to load the module and create an object which is the one that we are going to use in the app to log information, then we have to load fs, because we need to create the file were we are going to write

log.level = Log.DEBUG;
log.stream = fs.createWriteStream('logs/dev.log', { flags: 'w' });
log.notice('logging today:' + new Date());


After we tell the level of logs the file will have, this should be changed depending on the configuration that we are going to use, we may want to have less level of log traces for production for example

After create the file lets add it to the stream and we just need to start logging information with different levels

Check the documentation for log.js, and also there are alot of modules to do logging, from manual stuff like the one we use here to others that are helpers or middleware for some frameworks like express/connect, etc, check more modules

Callbacks

Since we use alot of async in our node.js programs we end up using a lot of callbacks, callbacks are nothing more than where our function will return after doing its process, the convention for calling the callback its always return an error even if there isn't any and then the data

E.g.

function hello (user, callback) {
    if (!user){
        callback(new Error('no user :('));
        return;
    }
    var msg = 'hello' + user;
    callback(null, msg);
}


And from where we call it

hello('newuser', function (error, msg) {
    if (error) { console.log(error.msg); return; }
    console.log(msg);
});


In this case you always check if there happened any error or not and its more easy to control the flow

Errors

We recommend to use the "new Error()" to send your errors instead of only one string, because new Error have information about the error, where did it happened, etc, this information its very important to debug the problems and have a better idea of what its going on in the code, with the string only we could lose some of that information, check the callback information above for more information about sending errors.

Also you can see more information about this in this post

Also is recommended to use an error listener, to catch even more errors that we may be missing as described here

var events = require('events')
emitter = new events.EventEmitter()

function y(arg, callback) {
    if (arg === 1) {
    x()
 callback()
    } else {
 function onTick() {
     try {
  x()
     } catch(err) {
  emitter.emit('myerror', err)
  return
     }
     callback()
 }

 process.nextTick(onTick)
    }
}


Well nice first fragments, i will continue to update with more posts about this in node.js

If you are looking for some special information please ask for it in the comments i will try to post something about it

Greetings

4.13.2012

Nomination - recurrent service



This post its a part of a series about creating an app with node.js and express for Facebook... this time we will create a service

See how we created the app

Desktop version:


mobile browsers


This time we will create a service that runs daily at some time to end the old nominations that are older than the actual date, for that we will need to add a new module, lets update our "package.json"

, "node-schedule" : "0.1.5"

And we run our command "npm install -d" to install the new dependency

Now lets first update our nominator.js controller to find old nominations

/**
/**
 * find old nominations
 * @callback function
 * 
*/
NOMINATOR.findOldNomination = function(callback) {
    Nomination.find({"endDate": {"$lt": new Date()}}, callback);
};

We are looking for nominations where the enddate is lower tan the actual date, then we send the results to the callback

To put this to work, lets update our file server.js, first our needed variables

schedule = require('node-schedule'),
fb = require('facebook-js'),
url = 'http://nomination.cloudno.de/',
nominator = require('./controllers/nominator.js');

Firs its our new module, then load our facebook module, the nomination url to add it to wall messages and our nominator controller

Then lets start the scheduler

//add process to kill old nomination
var rule = new schedule.RecurrenceRule();
rule.dayOfWeek = [0, new schedule.Range(1, 6)];
rule.hour = 1;
rule.minute = 1;

We are telling the scheduler to run daily at 1 with 1 minutes and then we have to tell which function to do at that time

schedule.scheduleJob(rule, function(){
    nominator.findOldNomination(function(err, doc){        
        for (var i=0; i<doc.length;i++){
            endNomination(doc._id, doc);
        }
    });
});

The function just look for old nominations and those are we going to end them with endNomination funciton  

function endNomination(id, doc){
    if (doc.ownerdata){
        var users = doc.users;
        var usersl = doc.users.length;
        var voters = doc.voters;
        var votersl = doc.voters.length;
        if (usersl > 0){
            var winner = users[0];
            for (var j=1; j<usersl;j++){
                if (winner.votes < users[j].votes){
                    winner = users[j];
                }
            }
            var onerror = function (error) {
                            if (error) { log.debug('error posting on voted user'); return; }
                        };
            fb.apiCall(
                'POST',
                '/'+doc.owner+'/feed',
                {
                    access_token: doc.ownerdata,
                    message: app._locals.t('dashboard.won', { wname: winner.name, nname: doc.name }),
                    name: app._locals.t('dashboard.create'),
                    link: url
                },
                onerror
            );
            for (var i=0;i<usersl;i++){
                if (users[i]._id == doc.owner){ continue; }
                fb.apiCall(
                    'POST',
                    '/'+users[i]._id+'/feed',
                    {
                        access_token: doc.ownerdata,
                        message: app._locals.t('dashboard.won', { wname: winner.name, nname: doc.name }),
                        name: app._locals.t('dashboard.create'),
                        link: url
                    },
                    onerror
                );
            }
            for (i=0;i<votersl;i++){
                if (voters[i]._id == doc.owner){ continue; }
                fb.apiCall(
                    'POST',
                    '/'+voters[i]._id+'/feed',
                    {
                        access_token: doc.ownerdata,
                        message: app._locals.t('dashboard.won', { wname: winner.name, nname: doc.name }),
                        name: app._locals.t('dashboard.create'),
                        link: url
                    },
                    onerror
                );
            }
        }
    }
    nominator.eraseNomination(id, function(err){
        if (err) { log.debug('error erasing nomination'); return; }
        log.notice('nomination '+ id +' erased by: cron ' );
    });
}

We decide the winner, make the facebook api call to update the walls of involved users, it may not reach all the walls but that its by security issues of facebook not really with our method

And we are done, check more option to schedule tasks in the github page of the module

Fork the code


Greetings

4.11.2012

Nomination mobile - part 5




This post its a part of a series about creating an app with node.js and express for Facebook... this time for mobile browsers



Desktop version:


*NOTE: jqm = jquery mobile

Last post for this mobile series

Firs the erase part, lets update the "mscript.js" with this

$('#remove').click(function(ev){
    $.mobile.showPageLoadingMsg();
    ev.preventDefault();
    var uid = $(this).attr('uid');
    var details = $('#details');
    var nid = details.find('#attd').attr('nid');
    $.post("/nominations/eraseuser", { id: nid, user: 'eraseme' },
        function(data) {
            if (data){                    
                //get the row of the user and erase it
                $('.users').find('#'+uid).remove();
                var usersl = details.find('.users');
                usersl.listview('refresh');
            }else{
                showMsg('dashboard.error', 'dashboard.error_removing');
            }
            $.mobile.hidePageLoadingMsg();
        }
    ).error(function() { 
        $.mobile.hidePageLoadingMsg(); 
        showMsg('dashboard.error', 'dashboard.error_removing'); 
    }); 
});

And also the page to store the user id in the button:

a#remove(href="#", data-icon="minus", uid="#{user.id}") #{t('dashboard.remove_me')}

Simple, we just get the id of the user, we ge the details page and we search for the id of the nomination, send the data to the server and  if we don't have errors erase that row

God, now to refresh, lets do the following, first lets add the class "refresh" to all refresh buttons:

a.refresh(href="#", data-role="button", data-theme="b", data-icon="refresh") #{t('dashboard.refresh')}

And then add the functionality in the script

//refresh the list of nominations
$('.refresh').click(function (ev) {
    $.mobile.showPageLoadingMsg();
    ev.preventDefault();
    //get the actual page id
    var pageid = $.mobile.activePage.attr('id').split('-')[1];
    //erase the actual list
    var divider = $('#'+pageid).find('li')[0];
    $('#'+pageid).find('li').remove();
    $('#'+pageid).listview('refresh');
    //add the divider
    $('#'+pageid).append(divider);
    //reload the nominations
    loadNominations(pageid);
});

Get the id of the actual page, and then get the type on nomination the user is looking, then get the divider, erase the actual list, add again the divider, refresh and reload the nominations of that type

Good, easy, now lets update the routes to handle the request from small devices, lets update the file "routes/dashboard.js"

bt = new bowser(req);
if (bt.isMobile() || bt.isTablet()){
    res.redirect('/dashboardm');
}else{
    res.render('dashboard', 
        { 
            user: req.session.user, 
            error : req.param('error'), 
            type: 'dashboard', 
            invited: invited                
        });
}

We are checking for tablet or mobile and if so lets redirect them to the mobile version, with this any user can see the mobile version by updating the url

We are just missing to update the strings in the jade files or js to i18 strings, lets give that task as a homework for all, any doubt on doing that let me know

Thats it for the mobile verions, we have a nice version now quite interesting, lets announce it everywhere now, if you can please help me with some bugs or new stuff for the application, i may be missing a nice feature.

Next time we will try to do a job to run it daily and close the nominations already passed and send notifications in facebook to the users.

After that we will move this to phonegap to make it native for different platforms :)

Fork the code


Greetings

3.28.2012

Nomination mobile - part 4




This post its a part of a series about creating an app with node.js and express for Facebook... this time for mobile browsers




Desktop version:


*NOTE: jqm = jquery mobile

Now lets put the functionality for vote, delete and invite friends to the application

To start lets add a feature to the list of friends in the details of a nomination, when the user swipe left or right it will appear two buttons vote or delete, for that lets update "mscript.js", after add the user to the list we add (around line 150):

$('.users li').bind('swiperight swipeleft', swipe);

This will look for swipe function when the user swipe in any direction on any list item, lets add the function in the same file

function swipe(){
    // reference the just swiped list item
    var $li = $(this);
    // remove all buttons first
    $('.aDeleteBtn').remove();
    $('.aVoteBtn').remove();
    // create buttons and div container
 var $deleteBtn = $('<a>Delete</a>').attr({
   'class': 'aDeleteBtn ui-btn-up-r',
   'href': '#'
  });
    var $voteBtn = $('<a>Vote</a>').attr({
            'class': 'aVoteBtn ui-btn-up-bl',
   'href': '#'
  });
 // insert swipe div into list item
 $li.prepend($deleteBtn);
    $li.prepend($voteBtn);
    $deleteBtn.slideToggle();
    $voteBtn.slideToggle();
}

Here we take the li as a reference, first erase the buttons if they exist already, then we create 2 buttons which have 2 clases, 1 for reference only and the other one to give them style and the position, for that lets add them to the css

.aDeleteBtn, .aVoteBtn {
    -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 float: right;
 height: 15px;
 line-height: 15px;
 margin: 10px 10px 0 0;
 padding: 0.6em;
 position: absolute;
 right: 0;
 top: 0;
 z-index: 10;
    display: none;
}

.aDeleteBtn{
    right: 60px;
}

/* red color buttons */

.ui-btn-up-r { border: 1px solid #953403; background: #2567ab; font-weight: bold; color: #fff; cursor: pointer;  text-shadow: 0 -1px 1px #953403; text-decoration: none; background-image: -moz-linear-gradient(top, #ec4a0b, #ad390c); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ec4a0b),color-stop(1, #ad390c));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ec4a0b', EndColorStr='#ad390c')"; }

.ui-btn-up-r a.ui-link-inherit { color: #fff; }

.ui-btn-hover-r { border: 1px solid #953403; background: #f15c22; font-weight: bold; color: #fff;  text-shadow: 0 -1px 1px #014D68; background-image: -moz-linear-gradient(top, #f15c22, #f15c22); text-decoration: none; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f15c22),color-stop(1, #f15c22));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f15c22', EndColorStr='#f15c22')";  }

.ui-btn-hover-r a.ui-link-inherit { color: #fff; }

.ui-btn-down-r { border: 1px solid #225377; background: #79ae21; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #225377; background-image: -moz-linear-gradient(top, #bc770f, #e6590c); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #bc770f),color-stop(1, #e6590c));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#bc770f', EndColorStr='#e6590c')"; }

.ui-btn-down-r a.ui-link-inherit { color: #fff; }

.ui-btn-up-r, .ui-btn-hover-r, .ui-btn-down-r { font-family: Helvetica, Arial, sans-serif; }

/* blue color buttons */

.ui-btn-up-bl { border: 1px solid #036596; background: #2567ab; font-weight: bold; color: #fff; cursor: pointer;  text-shadow: 0 -1px 1px #036596; text-decoration: none; background-image: -moz-linear-gradient(top, #2567ab, #036596); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2567ab),color-stop(1, #036596));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2567ab', EndColorStr='#036596')"; }

.ui-btn-up-bl a.ui-link-inherit { color: #fff; }

.ui-btn-hover-bl { border: 1px solid #036596; background: #2567ab; font-weight: bold; color: #fff;  text-shadow: 0 -1px 1px #014D68; background-image: -moz-linear-gradient(top, #2567ab, #2567ab); text-decoration: none; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2567ab),color-stop(1, #2567ab));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2567ab', EndColorStr='#2567ab')";  }

.ui-btn-hover-bl a.ui-link-inherit { color: #fff; }

.ui-btn-down-bl { border: 1px solid #225377; background: #79ae21; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #225377; background-image: -moz-linear-gradient(top, #2567ab, #2567ab); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2567ab),color-stop(1, #2567ab));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2567ab', EndColorStr='#2567ab')"; }

.ui-btn-down-bl a.ui-link-inherit { color: #fff; }

.ui-btn-up-bl, .ui-btn-hover-bl, .ui-btn-down-bl { font-family: Helvetica, Arial, sans-serif; }

OK we got the buttons, now lets give them some functionality, lets start with delete adding this to "mscript.js"

$('.aDeleteBtn').live('click', function(ev){
    ev.preventDefault();
    $.mobile.showPageLoadingMsg();
    var li = $(this).parents('li');
    var details = $('#details');
    var nid = details.find('#attd').attr('nid');
    var user = {
        _id : li.attr("id"),
        name : li.attr("name"),
        votes : li.find(".count").text()
    };
    $.post("/nominations/eraseuser", { id: nid, user: user },
        function(data) {
            if (data){
               li.remove();
               var usersl = details.find('.users');
               usersl.listview('refresh');
            }else{
                showMsg('dashboard.error', 'dashboard.error_erasing_user');
            }
            $.mobile.hidePageLoadingMsg();
        }
    ).error(function() { $.mobile.hidePageLoadingMsg();
        showMsg('dashboard.error', 'dashboard.error_erasing_user'); });
    $('.aVoteBtn').slideToggle();
    $('.aDeleteBtn').slideToggle();
});

Here we take the li from where we get called and the details div to get the nomination id

We create the user object with the details and we send it to the server to erase that user and we hide the buttons, after calling the server we erase the user from the list if everything went right or show the error if any

Now, lets see the voting function

$('.aVoteBtn').live('click', function(ev){
    $.mobile.showPageLoadingMsg();
    ev.preventDefault();
    var li = $(this).parents('li');
    var id = li.attr('id');
    var details = $('#details');
    var nid = details.find('#attd').attr('nid');
    //var name = $('.details').find('legend').text();
    $.post("/nominations/vote", { id: nid, userid: id },
        function(data) {
            if (data){
                var votes = li.find('.count');
                votes.html(data);
                //updat voted list
            }else{
                showMsg('dashboard.error', 'dashboard.error_voting');
            }
            $.mobile.hidePageLoadingMsg();
        }
    ).error(function() {
        $.mobile.hidePageLoadingMsg();
        showMsg('dashboard.error', 'dashboard.error_voting');
    });
    $('.aVoteBtn').slideToggle();
    $('.aDeleteBtn').slideToggle();
});

Same way as before we got the data from the li and details, post to the server the information and hide the buttons, on return from server, lets update the count of the votes or show if any error

Now we are only missing the "invite" functionality, for this one we are going to recycle the add friends screen, first lets update the template "dashboardm.jade", lets add a class to our invite button to look like this:

a.doinvite(href="#", data-icon="plus", class="ui-btn-right") Invite

Then lets add to out page with id "#addf" this button to the footer

a.invite(href="#", data-role="button", data-theme="b") Invite

And then lets initialize the button hidden in our css

.invite{
    display: none;
}

Good now the script, lets update "#adduser" onclick to hide the button

$('.invite').hide();

Then we add the listener for the invite button

$('.doinvite').live('click', function(){
    $.mobile.showPageLoadingMsg();
    $('.invite').show();
    $.mobile.changePage( "#addf",
    {
        transition: "pop",
        reverse: false,
     changeHash: false
 });
});

We show our invite button and then the add friends panel.

To finish lets add our functionality to the invite button

$('.invite').live('click', function(){
    $.mobile.showPageLoadingMsg();
    var users = [];
    var userp;
    $('#lof').find(':checked').each(function(){
        users.push({
            "_id" : $(this).attr('id'),
            "name" : $(this).attr('name'),
            "votes" : 0
        });
    });
    var ul = users.length;
    if (ul > 0 && ul <= 1){
        userp = users[0];
    }else{
        userp = users;
    }
    $.post("/invite", { users: userp },
        function(data) {
            if (data){
                history.back();
                //showMsg('dashboard.warning', 'dashboard.invited');
            }else{
                showMsg('dashboard.error', 'dashboard.warning_invited');
            }
            $.mobile.hidePageLoadingMsg();
        }
    ).error(function() {
        $.mobile.hidePageLoadingMsg();
        showMsg('dashboard.warning', 'dashboard.warning_invited');
    });
});

We take the list of friends selected, send it to the server to invite the friends and show a message in any error

Done!! we have enough functionality...

Next we will see erase me, refresh, update our strings, check for any active session and update the routes for mobile to get our beta version complete

If you can help me out with the bugs or the features

Fork the code

https://github.com/nodejs-mexico/nomi-nation

Greetings

3.14.2012

Nomination mobile - part 3


This post its a part of a series about creating an app with node.js and express for Facebook... this time for mobile browsers

Part 1
Part 2

Version en español


Desktop version:


Part 10

*NOTE: jqm = jquery mobile

This time we will see how to create a new nomination, how to see the details of one and how to add friends

Lets start updating the "dashboardm.jade"

#newn(data-role="page")
    div(data-role="header", data-theme="e")
        h1 New nomination
    //header

    div(data-role="header", data-theme="e")
        #errornf
        form#newf.ui-body.ui-body-a.ui-corner-all
            fieldset
                div(data-role="fieldcontain")
                    label(for="name") Name:
                    input#name(type="text", cols="40", rows="8", name="name")
                    label(for="date") End Date:
                    input#date(type="date", cols="40", rows="8", name="date")
                    button#newnfs(data-theme="b") Submit
    //content

    div(data-role="footer")
        a( href="#", data-rel="back", data-icon="back") Back
    //footer

///page new nomination
#addf(data-role="page")
    div(data-role="header", data-theme="e")
        h1 Add friends
    //header

    div(data-role="header", data-theme="d")
        div(data-role="fieldcontain")
            fieldset#lof(data-role="controlgroup")
    //content

    div.ui-bar(data-role="footer", data-theme="b", data-position="fixed")
        a#bina(href="#", data-icon="back") Back
        a.add(href="#", data-role="button", data-theme="b") Add

///page add friends
#details(data-role="page")

    div(data-role="header", data-theme="b")
        a#cancel(href="#", data-icon="delete") Cancel
        h1 Details
        a#end(href="#", data-icon="check") End
    ///header

    div(data-role="content")
        #attd
        .name
        .endD
        ul.users(data-role="listview")
            li(data-role="list-divider") Swipe to Vote/Delete
    ///content

    .ui-bar(data-role="footer", data-theme="b", data-position="fixed")
        div(data-role="controlgroup", data-type="horizontal")
            a(href="#", data-rel="back", data-icon="back") Back
            a#adduser(href="#", data-icon="plus") Add
            a(href="#", data-icon="refresh") Refresh
            a#remove(href="#", data-icon="minus") Remove Me
    ///footer

///page details

We are adding 3 pages, one for each thing all inside the same html

In new form we add a form where we ask for the name and the end date

In add friends, we show the list of friends so the user can select and add to the nomination

And last its the details page, this template will serve for all the types of nominations, we will show some buttons depending on the type but this will be done via jquery

Good, lets update the script in "mscript.js"

First lets add our function to load the friends

function loadUsers(next){
    $.getJSON(next || 'http://nomination.cloudno.de/friends', function(data) {
    if (data.data.length > 0){
        var list = $('#lof');
     $.each(data.data, function(key, value){
      list.append('<input type="checkbox" name="'+value.name+'" id="'+value.id+'" />');
      list.append('<label for="'+value.id+'">'+value.name+'</label>');
     });
     $('#lof').trigger( 'updatelayout' );
     loadUsers(data.paging.next);
 }else{
     return;
 }
    }).error(function() { showMsg('dashboard.error', 'dashboard.error_friends'); });
}

In this case we are loading the list of friends from facebook and adding it to the list to use it later, this list will be loaded as soon as the user land on the page, for that lets call the function when jqm create the page:

$('#dashboard-mine').live('pagecreate', function(){    
    loadNominations('mine');
    loadUsers(null);
});

We have our friends loaded, lets create a new nomination, remember that we put a button in all the pages to create one, lets give that button some functionality in "mscript" we add:

$('.create').live('click', function(){
    $.mobile.changePage( "#newn", { transition: "pop"} );
});

With this we tell jqm that at clicking this btn we will go to the new nomination page

In that page, lets wait for the user input and handle the submit button

$('#newnfs').live('click', function(ev){
    ev.preventDefault();
    $.mobile.showPageLoadingMsg();
    var name = $('#name').val();
    var date = $('#date').val();
    if (name!=='' && date !==''){
 $('#errornf').html('');
 $.post("http://nomination.cloudno.de/nominations/create", { name: name, datep: date },
     function(data) {
            var list = $('#mine');
            list.append('<li id="' + 
                data._id + '" type="mine"><a class="details" href="#">' + 
                data.name + '</a></li>');
            list.listview('refresh');
            $.mobile.hidePageLoadingMsg();
            $.mobile.changePage( "#dashboard-mine" );
            return false;
        }
 ).error(function() {
     $.mobile.hidePageLoadingMsg();
     $('#errornf').html('Error saving the nomination, try again later');
     return false;
 });
 return false;
    }else{
 $('#errornf').html('Name and date required');
 $.mobile.hidePageLoadingMsg();
 return false;
    }
});

First we show the msg that we are working, we retrieve the data from the form, we do a simple check and post it, show a message if any error, if the post goes without errors lets add the nomination to the mine list, then refresh the list so all the elements gets the styles, close the loading message and return to mine list

We have a new nomination, lets see the details, for this lets add to our lists that functionality, all the elements in the lists have the class "details" so lets use that

$('.details').live('click', function(){
    $.mobile.showPageLoadingMsg();
 var li = $(this).parents('li');
 var id = li.attr('id');
 var type = li.attr('type');
 $('#details').find('#attd').attr('past',$.mobile.activePage.attr('id'));
 showNomination(id, type, false);
 $.mobile.changePage($("#details"));
});

First take the data to know which nomination is selected, add some data to details page and then load the nomination with the "showNomination" function, after that lets change the page to details

"showNomination" functions its like this:

//cargar la nominacion y llenar details
function showNomination(id, type, refresh){
    $.mobile.showPageLoadingMsg();
    $.getJSON('http://nomination.cloudno.de/nominations/'+id, function(data) {
        if (!data){
            //alert('Du! nominacion ya no existe o termino :(');
            showMsg('dashboard.warning', 'dashboard.warning_erased');
        }
        var details = $('#details');
        details.find('#attd').attr('nid',id);
        details.find('#attd').attr('type',type);
        details.find('.name').html(data.name);
        var daten = new Date();
        daten.setISO8601(data.endDate);
        details.find('.endD').html( daten.getDate()+'/'+(daten.getMonth()+1)+'/'+daten.getUTCFullYear());
        var ntype = type;
        if (ntype === 'appear'){
            $('#end').hide();
            $('#cancel').hide();
            $('#remove').show();
        }else if (type === 'mine'){
            $('#end').show();
            $('#cancel').show();
            $('#remove').hide();
        }else{
            $('#end').hide();
            $('#cancel').hide();
            $('#remove').hide();
        }
        var usersl = details.find('.users');
        usersl.html('');
        var userl = data.users.length;
        usersl.hide();
        usersl.append('<li data-role="list-divider">Swipe to Vote/Delete</li>');
        for (var i=0; i<userl;i++){
      usersl.append('<li id="'+data.users[i]._id+'" type="'+type+'">'+
    '<img src="https://graph.facebook.com/'+data.users[i]._id+'/picture"/>'+
                data.users[i].name+
                '<span class="ui-li-count count">'+data.users[i].votes+'</span></li>');
        }
        usersl.listview('refresh');
        usersl.show();
        $.mobile.hidePageLoadingMsg();
    }).error(function() {
        $.mobile.hidePageLoadingMsg();
        showMsg('dashboard.error', 'dashboard.error_showing'); 
    });
}

We bring the data for the selected nomination and we fill out the details page, depending on the type of the nomination is the buttons we show, we add the list of friends already nominated and we refresh the list, if any error we show the message to the user, in this function we also use a function to parse the date from Facebook called "setISO8601"

Date.prototype.setISO8601 = function (string) {
    var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})" +
        "(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?" +
        "(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
    var d = string.match(new RegExp(regexp));

    var offset = 0;
    var date = new Date(d[1], 0, 1);

    if (d[3]) { date.setMonth(d[3] - 1); }
    if (d[5]) { date.setDate(d[5]); }
    if (d[7]) { date.setHours(d[7]); }
    if (d[8]) { date.setMinutes(d[8]); }
    if (d[10]) { date.setSeconds(d[10]); }
    if (d[12]) { date.setMilliseconds(Number("0." + d[12]) * 1000); }
    if (d[14]) {
        offset = (Number(d[16]) * 60) + Number(d[17]);
        offset *= ((d[15] == '-') ? 1 : -1);
    }

    offset -= date.getTimezoneOffset();
    var time = (Number(date) + (offset * 60 * 1000));
    this.setTime(Number(time));
};

Ok, we have the nomination, now lets add friends:

$('#adduser').live('click', function(){
    $.mobile.changePage( "#addf",
    {
     transition: "pop",
     reverse: false,
     changeHash: false
 });
});

When the user click on add user we change to the list of friends page, in tis page we show all the friends and an add button

$('.add').live('click', function(){
    $.mobile.showPageLoadingMsg();
    var users = [];
    var userp;
    $('#lof').find(':checked').each(function(){
        users.push({
            "_id" : $(this).attr('id'),
            "name" : $(this).attr('name'),
            "votes" : 0
        });
    });
    var ul = users.length;
    if (ul > 0 && ul <= 1){
        userp = users[0];
    }else{
     userp = users;
    }
    var details = $('#details');
    var nid = details.find('#attd').attr('nid');
    var type = details.find('#attd').attr('type');
    $.post("http://nomination.cloudno.de/nominations/adduser", { id: nid, users: userp },
 function(data) {
     if (data){
            $.each(users,function(key, value){
                var usersl = details.find('.users');
                usersl.append('<li id="'+value._id+'" type="'+type+'">'+
                    '<img src="https://graph.facebook.com/'+value._id+'/picture"/>'+
                    value.name+
                    '<span class="ui-li-count count">0</span></li>');
                usersl.listview('refresh');
            });
            $.mobile.changePage( "#details" );
     }else{
      $.mobile.changePage( "#details" );
      showMsg('dashboard.error', 'dashboard.error_adduser');
     }
     $.mobile.hidePageLoadingMsg();
 }).error(function() { 
        $.mobile.hidePageLoadingMsg(); 
        showMsg('dashboard.error', 'dashboard.error_adduser'); 
    });
});

We got the list of selected users, we add them to the nomination and if everything its ok we add the to the list to the page to later return to the details page

Great, we are set now, next time we will see how to add/erase users in a nomination and how to invite more friends to play

Fork the code

[https://github.com/nodejs-mexico/nomi-nation](https://github.com/nodejs-mexico/nomi-nation)

Greetings