Category Archives: Life

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

Summer

Posted on by

Is over, yay! My favorite time of the year is here.

So over summer I should have been working on my University project, I did some.  I have instead, taken residence at a local creative studio writing loads of code and sipping lots of coffee, good times!!

I have been focusing on my iOS development and as a result have done 5 news apps.  Heres the bad news, one got rejected! its nothing special or bad, just a poor attempt at an app.

Heres the list…

Big Brother 2011

Yes, Big Brother has returned so why not?  The initial version was pretty shocking cosmetically, but that was addressed in the latest update.

Check it out here http://itunes.apple.com/gb/app/big-brother-news-2011/id446685894?mt=8

This has been pretty successful thanks to having the market to myself.  Channel 5 did have word of releasing a iPhone app however none have yet appeared.

The celebrity version has just finished and the normal version is about to begin so there is life yet in this app.

F1 Rumours

Formula 1 is one of my favorite sports, so it made sense to do this.  This contained the same source code as the Big Brother app above but used a different data source.

Check it out here http://itunes.apple.com/us/app/f1-rumours/id445282041?mt=8

X-Factor

This has been a very poor performer, partly thanks to the free and official app.  Again, as with F1, BB, this has the same base source code.  I have not updated this app, so what you see here is what the initial versions of BB and F1 looked like.

Check it out here http://itunes.apple.com/br/app/x-factor-rumours/id446693498?mt=8

And finally….

As my time with the University of Bolton is coming to an end.  I have about 2 months remaining and should I complete my project, I will graduate.  I decided to give something back.

I created a simple iPhone app. This is still waiting to be released on the App store but should be available soon.

It’s pretty basic at this stage but shows both university and student news from the website, shows the university twitter account. And a cool feature, allows you to view your timetable from within the app.

Here are the screenshots.

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.

The Parts Crawler

Posted on by

I had an interesting project which involved a CD-ROM containing tens, if not hundreds of thousands of Piaggio/Vespa/Aprilia parts, one of these part catalogues nicely wrapped up in some kind of stand alone Java web application, Jetty I think it was.

The task, to extract all data and images from the CD, after looking through the file system of the application I concluded the application was using a Derby database and the images appeared to be wrapped in a .res file.  I had no luck in extracting the images from these files with various tools around on the internets.  I wasted too much time trying to get the data out of these files, so I gave up.

There had to be a better way of doing this and as with most things, there was.  Some years ago, I created CraigsCrawl – an awesome project which crawled CraigsList ads and extracted data (sorry CraigsList).  Since the parts data was presented in a web interface out comes C#.

Once I targeted the information needed, I automated the whole process extracting all the ranges, catalogues, parts and images from the CD.  All data was then stored in a nice MS SQL database and the images named and saved to a folder which linked (by filename) to records in the database.  Creating the application to crawl the parts data took roughly 2-3days (on and off) and countless cups of fresh, ground, fruity coffee. The extraction only took around 3 hours.

I mainly used the WebBrowser object to extract the data and the HttpWebRequest object for some of the data which hidden behind Ajax post calls.  The coffee was sourced from Sainsbury’s, the fresh fruity beans that need grinding up.  Nice stuff.

Update:

The total number of parts that were extracted for 3 brands came to 210k! Could you imagine the time it would take to manually extract that amount of data?

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.

It’s been a while.

Posted on by

Since I posted here… Heres a catch up!

I’ve since started creating iPhone, iPad apps and backed off with the Android apps.  One reason, iOS pays compared to Android.  Maybe this will change in future but for the time being, I’m sticking with iOS and plan to push out random apps!  I’m looking for that one great idea that will be truly awesome and make a fortune, my Angry Birds/TrainYard.

University

I’m now approaching my final year, I have one exam (which I have to take later today) based on the Interwebs and Asp.Net development.

Topics I’ve covered this semester;

  • Professional Issues within Computing
  • Internet 2 (Asp.Net / VB.Net C#)
  • Building Office Applications (VBA (Completely pointless!1))

The best topic will have to be Internet 2 followed closely by Professional Issues.  Building Office applications was horrible, using VBA in Excel and Access is a nightmare and if anyone designs an application in either of these, please consider fellow developers and maybe reassess your choice of development tools because anything will be better than the mess VBA/Access/Excel produces!

Thats all for now, will aim to log in more often and update.

UK Universities – Android App (Week 1)

Posted on by

Since the Rightmove app was a non-starter, I’ve decided (in my quest to publish my first ever app for a mobile device) to create something else.

I’m not entirely sure where this app will end, but the initial app will be a simple directory with some advanced features.  Using the data I collected last year for Rentopoly.com, the app will allow searching by either entering the name of a university/institue, or using GPS find universities/institues near by.

Rentopoly.com was supposed to be the rightmove but limited to only properties to let to students.  Depending on how successful Rentopoly.com is, I may include properties as a major part of this application.  Maybe this app is what Rentopoly needs to get it going.

So heres what I’ve done so far….

Initial Screen

This is the welcome screen, the first thing a user will see when they launch the application.  Its nothing great at the moment just thrown together to test the code.

The idea is, the user can either search by name or use their location.  Since searching by name is nothing special, this example shows the application using GPS to get the current latitude and longitude.

Once the coordinates have been obtained, the following screen will be displayed.

Results

The next part above is a nice list of results.  This information is downloaded from Rentopoly.com as Json, limited to within 10 miles.  An advanced feature that will be added will allow this range to be altered.

So thats what I have so far, nothing special but slowly getting back into the Java/Android thing.  Stay tuned for updates.