Category Archives: University Project

Open Graph – Facebook Integration

Posted on by

Today I decided to look at integrating Facebook deep into the Cuckoo Nest.  A typical example of what I’m wanting to achieve is as shown below.

The above screenshot is from an Application called Spotify.  This application has permission from a facebook user to post updates to their timeline.  The content of the update is generated by the application and is automatically posted to their profile for friends to see.

My intention is to allow similar functionality into the cuckoo nest that will allow users to post properties to their profile and share them with their friends.

There are a few ways of achieving this, the simplest method is using a third party service such as AddThis.com.  This simplifies the process of sharing across a number of social and bookmarking websites.  To use AddThis, a HTML code is generated by their service and then its as simple as copying and pasting the generated code into a web page.  This method is used across a number of high profile websites such as BBC.

Whilst this method will provide a presence on facebook, its a very loose/quick way of doing it.  Testing this method for the Cuckoo Nest generates the following on facebook.

Not quite what I’m after….  This is a similar process to that outlined when I looked at the sharing a link functionality a while ago.  The generator is using the page meta title and description to create the content. It’s a start but the generated content has to be specific to a users property.

The next method is using the Facebook API which requires a more complex setup.  Information about the app must be registered with Facebook.  This will define all the settings and access rights for the application and how it will appear on the social network.

The next step is to create Actions.  An action is something that a user can do, usually to an object.  An example outlined by facebook is, a user can “read, review, want” (action) a “book, movie, song” (object).

The Cuckoo Nest will allow users to post their property onto facebook. So the action would be post and object would be a property.

Using this process, Facebook outlines key required meta tags which will be used when a user posts to their timeline.  These must be placed within the head section of the html document and generated at runtime.  Information within these tags will contain information relevant to the property thats about to be shared. These tags are part of the open graph protocol.  More about them here - http://ogp.me/.

After following the api documentation, I managed to set the Cuckoo Nest up ready to test.  All the required meta tags are generated ready for a user to post to their timeline.

I have yet to integrate the add to timeline and post to facebook functionality however using a simple curl command I was able to test to see how a post would appear in facebook.

Heres the result…

 

Task 22 – Sharing!

Posted on by

So I’ve been working on the sharing facility of the cuckoo nest.  Today i tackled the link sharing facility

Lets check it out!

Step 1 – The share box

Here it is in all it’s glory! This is the state before the box has been given focus.  This function works in several ways.

You can simply share a text update by clicking into the ‘Share what’s new…’. This will transform it ready for some content.

Notice the four icons on the right.

These are;

  1. Share text
  2. Share image
  3. Share location
  4. Share link

Clicking each of these prompts a new action but remaining on the first is simply used as a text update.

Lets check out the others, so far the standard share text, link and location are functional.

Location

This was quite complex and has been documented here. So lets see it in action.

Step 1 – Clicking the icon will create a new dialog. (click for larger)

Now we have a Google map and three buttons, the initial state of the map is focused on the properties location. If we were to click on the map, the following happens.

When a user clicks the map, a event is fired which returns a point object. Inside this object contains two functions lat() and lng(), this was looked at in this post – http://damonsk.com/2011/05/task-10-system-functionality-geodata-google-maps/ A red marker is also placed onto the map.

Using this information, a reverse geocode lookup is preformed.  This is essentially a call to Google and asks them for a street name for the coordinated provided.  This information is presented in the window title and will be used later on.

We can, if we want to, choose a new location on the map, save the location, discard location or finished.  Saving the location will update the status update with the location data, discard will delete and finished closes the map.

Next a user will save the location, this will update the status update and return them to their property page as shown;

Notice the additional information that’s attached below the update.  The last thing for a user to do is to ‘Share’ the update;

This updates their property page with the new status.

Links

The next part is the link sharing.  This will allow users to enter a URL and attach it to an update.  Here it is in action.

Step 1 – Clicking the link icon will force a new dialog – similar to the way the map worked.

Here users are given an input box that they must enter a URL into.  In the screen shot I’ve used the BBC Technology News page – completely unrelated to property sales and used for demonstration.

The next step is to click the preview button.  This will preform the process outlined here – http://damonsk.com/2011/05/task-10-system-functionality-sharing-links-like-facebook/

This has returned the page title, meta description and all the images found on that page.

A user may flick through image thumbnails and choose something relevant.

Once we are happy with the thumbnail, we select ‘Finished’ on the Dialog. This will return us to the status update with additional information attached.

Now lets ‘Share’

Heres an example in a property sale context

Javascript Objects using Literal Notation

Posted on by

Javascript files can get pretty messy pretty quick if you prefer to keep everything contained in one javascript file.  Together with jQuery, I find that creating objects using the literal notation form works best.

Just like any language, it’s ideal to create objects that represent something or else you’re back to square one.  An example below will show several functions which will be broken down into page specific objects.

$(function(){

	homepageFunction();
	anotherFunction();
	setSomething();
	validateForm();
	makeSaveSubmit();

});

function homepageFunction(){
	// method code
}

function anotherFunction(){
	// method code
}

function setSomething(){
	// method code
}

function validateForm(){
	// method code
}

function makeSaveSubmit(){
	// method code
}

Now, assuming the first three functions are used on the homepage and the last two on a contact page, using literal notation to create the two objects, it would look something like..

$(function(){

	Homepage.homepageFunction();
	Homepage.anotherFunction();
	Homepage.setSomething();

	Contact.validateForm();
	Contact.makeSaveSubmit();

});

var Homepage = {

	homepageFunction: function(){
		//method code
	}, 

	anotherFunction: function(){
		//method code
	}, 

	setSomething: function(){
		//method code
	}
};

var Contact = {

	validateForm: function(){
		//method code
	}, 

	makeSaveSubmit: function(){
		//method code
	}

};

This can be further improved by moving each object specific initialize code into the object itself.

$(function(){

	Homepage.init();
	Contact.init();

});

var Homepage = {

	init: function(){
		this.homepageFunction();
		this.anotherFunction();
		this.setSomething();
	},

	homepageFunction: function(){
		//method code
	}, 

	anotherFunction: function(){
		//method code
	}, 

	setSomething: function(){
		//method code
	}
};

var Contact = {

	init: function(){
		this.validateForm();
		this.makeSaveSubmit();
	},

	validateForm: function(){
		//method code
	}, 

	makeSaveSubmit: function(){
		//method code
	}

};

If you need to pass parameters to a function when using literal notation objects, an object would look like..

var Telephone = {

	ringNumber: function(number){
		// do something with the number.
	}

};

And passing parameters into the object method would look like…

Telephone.ringNumber("077123222");

If you use an IDE such as Aptana, PDT or Zend, then there is a good chance the IDE will recognize these objects.

Tip: When creating the objects, be careful with your placing of commas after a function.  If you put a comma after a function and a function does not follow, in IE you will get errors.  Firefox and Chrome are forgiving.

This is wrong.

var Telephone = {

	ringNumber: function(number){

	},  // Notice this incorrectly placed comma.

};

Out with mysql in with PDO

Posted on by

A not so new feature of PHP which dates back to version 5.0 is PDO (PHP Data Objects).  PDO is a data-access abstraction layer that can access several database engines whilst maintaining the same set of functions.  I’m surprised I hadn’t discovered PDO earlier considering its been around way before I knew PHP.

As part of my project, my sponsor has asked me to look into the differences between mysql, mysqli (which will replace mysql at some point in the future) and PDO methods of interacting with a MySQL database.  The following table which I stumbled upon whilst researching explains it pretty well.

Source: http://www.php.net/manual/en/mysqli.overview.php

The original mysql extension listed in the third column has a development status of maintenance only.  My interpretation of this is that at some point, in a future release this extension will be dropped, meaning it’s time to move on and use something more up to date.

The mysqli (with the i meaning improved) extension looks to be the replacement for the original extension and the preferred for new projects.

The major difference between PDO and Mysqli is (of course) mysqli is limited to a MySQL databases.  PDO is an abstraction layer which can interact with a number of databases – the complete list of drivers are here.

Reading further into the two, another key difference between the two is that PDO allows prepared statements with named parameters.

So where the following would work with both PDO and mysqli

SELECT * FROM table WHERE id = ? AND display = ?

Only the following would work with PDO

SELECT * FROM table WHERE id = :id AND display = :display

Not a great difference, however the second option would in my eyes, be the preferred method of doing a prepared statement for the sake of readability.

Therefore, for my project, I will dump the old mysql extension and handle all database actions through the PDO layer.

Final Year Project

Posted on by

It’s time to get back on the bandwagon.  My final year project is to create a website that combines property sales with social actions, something like a social website for property sales.  The idea is to remove the need for an estate agent.

Whats required?

Apart from a lot of programming time, some research, a few reports, the most important feature is a webservice that provides data for properties already on the market.

Initially the idea was to use Google Base as I’ve used this in the past, however Google sank that ship shortly after I drew up the project proposal.  I’m now left with providers which include Zoopla and Nestoria which could allow the ability to import from a third party website, a major feature of the system.

The Retired Google Base

I know, I need to let it go! From memory working with Google Base – the data provided was perfect.  You would have access to the same amount of data provided by the two above, however you have access to several images and more of a summary that could be useful. But by the time this project is finished, Google Base won’t be around.

Nestoria

I’ve looked into this service in the past, back then it the data was limited and outdated.  Looking at it today, it seems to be pulling a lot of data from Zoopla and Findaproperty.

The output of a property listing would look like the following:

{
            "auction_date" : null,
            "bathroom_number" : "3",
            "bedroom_number" : "4",
            "car_spaces" : null,
            "commission" : null,
            "construction_year" : null,
            "datasource_name" : "Zoopla!",
            "guid" : "g1-TNtcDN5QDO1MwN==",
            "img_height" : "120",
            "img_url" : "http://1.l.uk.nestoria.nestimg.com/1v9/f/1/1v9f1bc60ddaf7e6b9789f319305725226e77cc7d2.2.jpg",
            "img_width" : "160",
            "keywords" : "Leasehold, Mews, Porter",
            "latitude" : "51.51310",
            "lister_name" : "Winkworth",
            "lister_url" : "http://rd.nestoria.co.uk/rd?l=....",
            "listing_type" : "buy",
            "location_accuracy" : "9",
            "longitude" : "-0.13372",
            "price" : 2000000,
            "price_coldrent" : 0,
            "price_currency" : "GBP",
            "price_formatted" : "2,000,000 GBP",
            "price_high" : 2000000,
            "price_low" : 2000000,
            "price_type" : "fixed",
            "property_type" : "",
            "summary" : "Third floor flat in this very central Manhattan Lofts development in Dean...",
            "thumb_height" : "60",
            "thumb_url" : "http://3.l.uk.nestoria.nestimg.com/1v9/f/1/1v9f1bc60ddaf7e6b9789f319305725226e77cc7d2.1.jpg",
            "thumb_width" : "60",
            "title" : "Soho Lofts, Richmond Mews, Soho, W1",
            "updated_in_days" : 308.5,
            "updated_in_days_formatted" : "over a month ago"
         }

Looks perfect, has everything I could possibly need such as the latitude and longitude, price and a nice thumbnail/image.  But it’s not enough, there isn’t enough description/summary text and one image?

The purpose is to drag in the data set by estate agents as a base for the user to simply fine tune.  There needs to be more description/summary text. Sorry Nestoria, It’s not you.

Enter Zoopla

Reading the API documentation it seems the data provided by Nestoria is a mirror of that provided by Zoopla but with possibly more data fields provided by Nestoria for which I assume would be provided by other data set providers.

After obtaining an API key and looking at a few examples, there is sufficient data provided in terms of the description, bedrooms, bathrooms etc.  The only limit Zoopla has in place is the limit of images that are available.  However Zoopla seems to fit perfectly for what is required.

Goodbye Google Base :(

Posted on by

I’ve just submitted my project proposal for Uni and decide to make a start collating information, then I find out Google Base is going.

Google Base was supposed to be a major part of my final year project, however it appears Google has other plans. The whole service has been depreciated and will be gone by the 1st of June.

I was going to utilise the real estate data made available, but looks I’m going to have to find another source.  The closest I’ve found that I think will work is the data supplied by Zoopla.com.  This may be a good thing considering that the data google supplied was in most cases duplicated and very old.

Sadly, this will also affect the Property Market apps that are published to the Android Market. These will be useless in a couple of month.

Lets hope Rightmove decide to go Android for the Android users out there.