Javascript (42)


Mortix.net on indiegogo

So, today I announce a new project I’ve been working away on for the past few weeks in my spare time.

Mortix.net.

Still in the prototype stage (so the website isn’t up and running yet) this is a secure platform for developing apps that ensure your privacy on the internet.

Check out the indiegogo campaign here for more information.  And spread the word!

 




Node.js app framework demo site

I’ve started running a test site for the new framework here

There’s not much there yet, a couple of pages (dynamically loading content from the database, ooooh!) and not much else… but I’ll add more to it as I add features.

It’s currently running on an old laptop in my front room, so don’t expect too much in the way of performance!




New project: Node.js application framework

So I decided to learn a new language / architecture last weekend and since Node.js has been getting a lot of attention lately I thought I might as well go with that.

I’ve put maybe 6 hours into it so far, and you can see the fruits of my labour over at github: https://github.com/Tall-Paul/node-framework

I don’t have it up and running anywhere yet, and there’s still some work to do but so far I have:

  • A routing system that takes a json config file and routes requests to ‘handlers’
  • A packaging system that allows related code to be grouped together
  • An ORM based on sequelize that lets you easily define database backed models for data
  • Automatic Ajax loading of models.

You can see an example of this in the ‘blog’ package that comes with the framework.

Currently there’s a model (/packages/blog/models/post.js) that looks like this:

module.exports = function(sequelize, DataTypes) {
  return sequelize.define("Post", {
    title: DataTypes.STRING,
    content: DataTypes.TEXT,
    author: DataTypes.STRING,
    slug: DataTypes.STRING,
    category: DataTypes.INTEGER,
  })
}
A custom handler / route that currently just takes any request of the form /blog/foo/bar.html and returns the first blog entry (this obviously needs work so it translates the request into the correct blog post) and finally a simple template that looks like this:
<html>
<head>
{{{js_includes}}}
{{{framework_get_object("blog_post",post_id,"post")}}}
</head>
<body>
<div id="post_id"></div>
<div id="post_title"></div>
<div id="post_content"></div>
</body>
</html>
It may not look much, but that template is doing some pretty funky stuff behind the scenes, it embeds some javascript on the page that trundles off and gets the blog post you asked for (post_id in that function call is a template variable that’s set by the handler, but it doesn’t have to be… you can get any content you want with a similar call) and then puts the data from the object into the page in the divs you specify.  Pretty neat (if I do say so myself).  Remember that Ajax stuff is built for you by the framework, just by defining a model of ‘post’ in the package ‘blog’ we automatically get the ability to load instances of that model via ajax.
This is clearly still a work in progress, and doesn’t actually ‘do’ very much yet… but by the weekend I hope to have automagic ajax searching of data in place and then I’m going to think about moving this site over to the new framework, possibly hosted on Engine Yard (depending on how pricey that turns out to be).  So check back soon for a demo of the framework in action.
Also, if anyone can think of a better name for this than ‘node.js web framework’ drop me a line



Facebook plugin for jQuery

Following on from the WordPress plugin I decided to take another look at the mess of javascript I wrote for that and make it a bit nicer.  Also, it’s been a while since I did anything with jQuery plugins, so I decided to kill two birds with one stone and write a helper plugin for facebook. I’d never done anything with jQuery queues (required to ensure asynchronous methods work as expected) or plugins that work ‘correctly’ and include chaining capabilities, so this was a nice little project.

This plugin uses the javascript SDK (obviously!) and requires a facebook app_id, but that’s easy enough to get (see the wordpress plugin writeup for details of this process).  It also requires the jQuery-cookie plugin by Klaus Hartl. Your page will need a ‘#fb-root’ div defined (required by the facebook API) and I suggest calling the methods on this div.

I’ve included an html page to demonstrate using the plugin to determine the current user’s name, and check whether they like a specific page (using the page id) but here’s a run down of some of the advanced features of this plugin:

Initialisation

You can choose to initialise the plugin directly or, if you call one of the other methods in the plugin it will auto-initialise if it hasn’t already.  So you can do this (for example):

$('#fb-root').facebook('user',
            {
               success: userFunction,
               app_id: '#########',
               auto_auth: true,
               scope: 'publish_stream'
            }
);

and the helper will initialise, login to facebook (redirecting the user to the authorisation page if required, more about this later) and get the user object. A callback will be done to ‘userFunction(response)’ passing in the returned user object as a parameter.  So you can get the user name using ‘response.name’.

Auto authorisation

Facebook requires a user to authorise an app before it can do anything.  Usually this means some tedious code to detect the current status of your app, redirect to facebook for authorisation if required, then catch that process back at your app.  If you set ‘auto_auth’ to true on a plugin call, this process is handled for you.  The user will be redirected to facebook and then back to your app (or you can override the destination by passing in a url as the ‘unauthorised’ option) without you having to do anything.  If you want to override this behaviour, pass a function in as the ‘unauthorised’ option, and leave ‘auto_auth’ as its default (false) option.  No redirection will be done and you get a call back to your unauthorised function.

First authorised

Sometimes we want to do something when an app is authorised for the first time.  For example in my wordpress plugin I want to post a promotional message on the user’s wall when the app is installed.  the ‘firstauthorised’ callback allows you to do this.  This does require cookie support to work, so if your user is blocking cookies unfortunately you won’t get this function firing.

Chaining

All the methods in theis plugin are chainable, so you can request lots of info from facebook in a single line of code (although behind the scenes, multiple api calls will be taking place)

Methods

Currently the plugin only supports 4 methods, but I plan to add more in future (hit me up in the comments if you’d like to see something added!)

init (default method):

Initialises the facebook API. takes the following parameters, only app_id is required.

  • app_id (your facebook app id)
  • status (a fb.init parameter, defaults to true)
  • cookie (a fb.init parameter, defaults to true)
  • xbfml (a fb.init parameter, defaults to true)
  • scope (comma seperated list of permissions to ask for, see the fb api documentation for more details)
  • authorised (callback function if the app is currently authorised, defaults to nothing, no parameters)
  • unauthorised (callback function if the app is not currently authorised OR a url to redirect to if doing auto_auth, defaults to nothing, no parameters)
  • firstauthorised (callback fucntion the first time the app is authorised, needs cookie support to work, defaults to nothing, no parameters)
  • loggedout (callback if the user is currently logged out of facebook, defaults to nothing, no parameters)
  • auto_auth (if ‘true’, the user will be automatically redirected to facebook to authenticate your app if they haven’t already done so)

user:

Returns the user object for the current user. As well as taking any of the ‘init’ parameters (for on the fly initialisation) this method has the following parameters (none is required, except the app_id if you haven’t previously initialised the plugin.

  • success (a callback function called if the api call succeeds.  passes the user object as a parameter)
  • failure (a callback function called if the api call fails, passes the returned object as a parameter)

likespage:

Used to determine if a user likes a specific page. As well as taking any of the init parameters, this method has the following parameters of its own.  Only pageid is required:

  • success (callback on success, takes a boolean as a parameter, ‘true’ if the user likes the page, ‘false if not)
  • failure (callback on failure, passes the returned object as a parameter)
  • pageid (the id of the page to check if the user likes, no default)

postToWall

Posts a message on the user’s wall.  As well as taking any of the init parameters, this can also take any of the options for the underlying api call, which you can find here:

Facebook api post object

None of these options have any defaults, so as a minimum you must pass in ‘message’, but you also have access to any and all of those options so you can post whatever you like.

This method also has the following callback options:

  • success (called on a successful post, response object passed in as parameter)
  • failure (called if the API call fails, response object passed as parameter)

You can download the plugin here:




Facebook plugin for wordpress

This week in the office we’ve been playing with the Facebook SDK and seeing what it can do, with a mind to using it on an upcoming project (that I can’t talk about!).  After a bit of playing, and bouncing ideas off each other we managed to get some fairly exciting stuff working.  Since I can’t publish the code we came up with, and I wanted to try out some other aspects of the SDK (well, multiple SDKs since theres Javascript and PHP variants to get your head around…) I thought I’d see how easy it was to create a plugin for wordpress.

If my boss is reading this by the way, I did pick up some directly applicable techniques and learning how to write plugins for various frameworks and applications is always useful….

Anyway, on to the code.  There was a lot of trial and error involved in this, so how it’s set out here is nothing like the actual development process, this is a much more cleaned up version!

 

the actual facebook code is fairly straightforward.  First we need to load the facebook javascript, and initialise it:

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
FB.init({
            appId  : '    <?php echo $FB_APP_ID; ?>',
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
        });

You’ll notice a PHP variable echoed in there, that’s the facebook app id, which we set at the top of the code.  I’ll go into some detail about how to get this ID later, but for now all you need to know is that due to limitations of the Javascript API, there’s no way to create a web apoplication and distribute it with your app ID embedded in there already, everyone who uses your plugin or app or whatever has to create their own app on facebook so they have an APP ID to use.  This is really annoying, but it kind of makes sense… for web applications facebook locks down access to specified domains, so only requests coming from those domains get serviced by the API. I’ve no idea how this works for ‘Nativeish’ apps written using something like PhoneGap.  I assume they have some way round it, maybe they allow access from localhost or something.  Anyway, moving on…

Next we need to check whether we successfully logged into facebook.  For this we use the ‘FB.LoginStatus’ call, which returns an object with a status string to tell us whether we successfully logged in or not.  Here we also do some cookie shenanigans, to check whether this is the first time you’ve logged into the app (in effect, whether you’ve just installed the app), if so we post soemthing to the user’s wall to say ‘hey, look at this cool app I’ve just installed’ with a link back to tall-paul.co.uk to drive some traffic my way.

Finally, if we’re successfully logged in AND the ‘posttofacebook’ cookie is set, we do a post to facebook.  Some explanation is required here.  Because we want to use the javascript framework and the WordPress API is php (ie: serverside) the best way I’ve found of firing javascript actions attached to a wordpress ‘publish’ action is to set a cookie on the publish action, and then when the page refreshes after the action use the presence of the cookie to kick off the javascript we want to call.

FB.getLoginStatus(function(response) {
               if (response.status === 'connected') {    
                       facebook_app_authorised = true;
                    if (jQuery.cookie("tpfbpost") == "not authorised"){
                        //post to wall because we've just authorised for the first time
                        activationPost();                        
                    }               
                    if (jQuery.cookie("postTofaceBook") > -1){
                        <?php
                        $post_id = $_COOKIE['postTofaceBook'];
                        $my_post = get_post($post_id);
                        preg_match("/<p>(.*)<\/p>/",$my_post->post_content,$matches);
                        $description = strip_tags($matches[1]);
                        $site_name = get_bloginfo('name');
                        $thumb_id = get_post_thumbnail_id($post_id);
                        if ($thumb_id > -1){
                            $picture = wp_get_attachment_url($thumb_id);
                        } else {
                            $picture = "/wp-content/plugins/tallpaulfbpost/defaultimage.jpg";
                        }                        
                        ?>
                        link = "<?php echo get_permalink($post_id);?>";
                        message =  "A new article has been published on <?php echo $site_name;?>";
                        name = "<?php echo $my_post->post_title; ?>";
                        picture = "<?php echo $picture;?>";
                        description = "<?php echo $description;?>";
                        link = "<?php echo get_permalink($post_id);?>";
                        postToFaceBook(message,picture,link,name,description,"","postTofaceBook");                            
                    }     
                    addAuthorisedText();
                } else if (response.status === 'not_authorized') {
                    //set cookie so we know we're doing authorisation
                    jQuery.cookie("tpfbpost","not authorised");
                    addAuthoriseLink();
                } else {  
                    jQuery.cookie("tpfbpost","not authorised");      
                    addAuthoriseLink();
                }
            });

 

Finally we need to bind to the ‘publish_post’ action, and set our cookie to trigger off the facebook post when the page refreshes:

//set a cookie so we do a facebook post when the page reloads
function facebook_post_hook($post_id){
    setcookie("postTofaceBook",$post_id);
}

//hook into the publish post action
add_action('publish_post','facebook_post_hook',8)

There’s a lot more in there, but you can download the plugin and have a look at the finer details at the end of the article.

Now how to use the plugin?  First off you’ll need to download it and install it on your wordpress site like any other plugin.  Once you’ve done that head over to facebook and search for ‘developer’ in the top search bar.  That should take you to the lovely Developer app as shown below.  Click ‘create new app’ and fill in the required fields (see below for how the ‘Tall-paul.co.uk’ one is setup:

The only thing you really need to worry about are the ‘App domain’ and ‘Website’ fields.  These must match the domain / address of your wordpress blog or the plugin won’t work.  If you want to use it on multiple domains you’ll need a seperate facebook app for each domain.  Again, this isn’t my choice, it’s just how the facebook javascript API works.

Once that’s done copy the APP ID from the app page and paste it into ‘tallfbpost.php’  (replacing the current $FB_APP_ID) at the top of the file.

Now if you go to ‘Settings->writing’ in your wordpress control panel you should see a link at the bottom saying ‘click here to authorise the app’.  Click the link, accept the permissions and you’re done.

Publish a new post and you should see it appear on your facebook wall.

Future enhancements:

  • Add setting for app ID in the settings area
  • change behaviour so only newly published items are posted to facebook

Download (v0.1)




Job Hunting!

Thought I might as well post something here, you never know who reads these things…

I am currently on the hunt for a job.  Ideally something in PHP / Web development that pays around £30k (or slightly less for the right role) and is based somewhere near Manchester (UK).  Working from home would be nice though if you’re based on the other side of the world.

email me for a CV if you have any opportunities that might fit the bill.




Updates!

I’ve just finished packaging, uploading and releasing the latest versions of jNag. These include a new server component, and updates to all the clients. Read on for the details:




0.82 bug, removed from market for a couple of days

As noted in the comments to the last post, there’s a serious bug in the latest (0.82) release of jNag.  Until I can fix it, I’ve unpublished both apps from the market.

 

Sorry for the inconvenience.




jNag 0.82 is here!

Just finished uploading the latest versions of the client, server and android apps.  The biggest change comes for the paid android app, which now supports (working) SSL connections.  The free app will have to wait a bit longer for that I’m afraid.  jQuery mobile has also been updated to Alpha 4 in this release. I’ll post a proper change log in the morning (tired now), just wanted to get them updated today. Enjoy…




Self signed SSL certificates in phonegap (android)

So this week I ran into a wonderful problem while working on jNag, namely how to connect to servers over SSL using phonegap (which jNag relies heavily on).

Phonegap is a wrapper around Android’s native webview class so (I thought!) the answer lay in somehow getting the webview to accept a self signed certificate.