@max = @tags.collect(&:frequency).collect(&:to_i).max
  @min = @tags.collect(&:frequency).collect(&:to_i).min

  def tag_size(tag)
    gamma = 1.2
    range = 1.0
    offset = 1.0

    [1.0,1.0 / (@max-@min) * (tag.frequency.to_i - @min) ** gamma].min * range + offset
  end

CTRL-A
        Jump to the start of the line
CTRL-E
        Jump to the end of the line
history
        Get a list of the last 500 commands typed
history | grep ssh
        Show a list of the last ssh commands you used
!script
        Run the last command you typed that began with script… (eg script/server -p 3100 -e production). Use this one with care - !rm can be a dangerous command
`backticks`
        Commands in backticks are evaluated first, and the result of the command is inserted into their place in the command. For example:
rm -rf `find . | grep svn`
        Removes all the .svn directories from your current directory
CTRL-L
        Clear the terminal screen
OPTION-K
        Clears the  scrollback history (this is an apple terminal command)
OPTION-T
        New Tab in the t apple terminal
tail -f log/production.log
        Follow a log (like cat, except stays open and displays new lines as they are written to a file)
CTRL-Z
        Pause the current process
bg
        Put a paused process into the background (same as running ./process &)
fg
        Brings a backgrounded process into the foreground again
grep term -B 2
        Greps a file for  ”term”, then displays the matching line and the two lines before it.

And when you’re working with files directly - these commands work in most versions of less or vim:

CTRL-B
        Page down
CTRL-D
        Page up
>
        Go to end of file
<
        Go to start of file
:123
        Go to line 123
/searchterm
        Searches for said term

If you use the terminal a lot, it’s definitely worth reading the bash reference and the advanced bash scripting guide. It’s one of those cases of a half hour spent reading saving you an hour per week.

Here’s part of the map that was generated:

The sportstracker app (a free one from Nokia) automatically generates info points for the fastest point, highest point, as well as giving you a high resolution (and very accurate) GPS track of the route. I think there are apps like this for the iphone, but certainly none that run in the background and let you record video at the same time:

Biking on youtube

I didn’t realise until later that I had the camera mounted sideways, and the video that I uploaded to youtube was downsampled a lot from the original 640×480 source video. Regardless, there’s a lot more you can do on this two-year-old nokia (the 6220 was released in 2008) that you can’t do with a new iphone 3gs. Admittedly the web browser isn’t as good on the nokia, but i’d rather have good content creation tools than a good web browser.

Anyway - as part of my work on a facebook application for places, I worked out how to sync the places I have bookmarked with my Ovi Maps account. So any places that me or my friends bookmark, will end up on my phone. Fire up maps on my phone, click on the nearest bookmark, click ‘driving directions’ and my phone will give me turn by turn driving directions.

Finally, the camera is a 5MP camera with a xenon flash, that includes the GPS co-ordinates as EXIF data in the image, so that if you upload the image to my app, or a similair service (Panoramio, Flickr) the photo is seamlessly associated with a map location.

I’m impressed Nokia, well done.

760.css

This is a great css framework for doing block-based layout (as made famous by blueprint.css and 960.css). It lets you create nicely structured pages with simple tags like <div class=”grid_5″></div>. It’s nice to see this framework working under FBML.

FBJquery

I’m a longtime jquery fan, and was very impressed to find this port of jquery to fbjs. It does have some bugs (next, prev and parents don’t work as they should) and some peculiarities (css doesn’t accept hashes for example) but is a great start for your facebook development. I’ve been doing some work on fbjquery, fixing various bugs and making it code-compatible with jquery-1.3.2, I’ll put my fixes up on github when they’re ready for release.

The biggest problem I’ve had so far with Facebook is that you can’t readily use the render :update functionality of rails to do dynamic page updates, since you can’t eval() the response from an ajax request.

I’ve worked around that by manually parsing and executing the returned javascript, this lets me use the normal rails code, but have it converted into something that can be executed by FBJS. It does feel a little bit like hacks on top of hacks, but my goal is to have a complete environment for working inside FBML, not a cut-down version that feels “hamstrung” compared to normal HTML.

<div class="rotate">
  <div><img /></div>
  <div><img /></div>
  <div><img /></div>
</div>

You can use the following code snippet to rotate through the images using jquery. You’ll need to set the rotate to be relatively positioned, and absolutely position the divs inside the .rotate div.

$(’div.rotate div’).hide().eq(1).show();
function rotate(){
var i = $(’div.rotate div:visible’).prevAll(’div’).length + 1;
i = i % $(’div.rotate div’).length;
$(’div.rotate div’).fadeOut().eq(i).fadeIn();
setTimeout(’rotate()’, 1000);
};
rotate();

Enjoy! Up with code snippets and down with unnecessary plugins!

The Great Buy Now Button

We’ve been redesigning some elements of the Indigo Renderer site to push more customers to the sales page. One of the biggies has been to make a prominent and attractive ‘Buy Now’ button. A bit of playing around in photoshop (even if you’re not a graphic designer, if you’re doing work on your website it’s a good skill to know your way around photoshop layers and layer effects) and I came up with this Buy Now button.

Thanks to Lance Wiggs, (our friendly business advisor / mentor), we wanted a shiny “push me” look. I used a bit of css trickery to make the button roll over highlight, then I washed out the rest of the menu bar so that the buy now button screamed “Press Me and send money to the Indigoeans!”.

That was all well and good, but the biggest problem with our Buy Now button - is that it linked to this page:

A wall of text that didn’t really do much to sell the product. Nice shiny button, big wall of text. Doesn’t do the trick. So just now I’ve been working on taking our existing Indigo Renderer store and sexing it up a little. The current store looks like so:

The main things I want to achieve:

1. Make the store look like the Indigo site, so that the users trust isn’t broken
   (Click buy now - go to a different looking page - “Hey what the hell is this?”)
2. Make the store sexier and encourage more impulsive “buy now” decisions
3. Get more cohesiveness across the website and applications we use, so that we can reuse the same CSS, typography and design elements in everything we do.

Thus, I give a preview of the new and slightly improved “Buy Indigo Renderer” page:

While developing facebook applications I occasionally get this error while running rake facebooker:tunnel:start.

debug1: Remote connections from *:6300 forwarded to local address
localhost:3000
debug1: Entering interactive session.
debug1: remote forward failure for: listen 6300, connect
localhost:3000
Warning: remote port forwarding failed for listen port 6300

Unable to open remote port via ssh

There’s a couple of reasons for this. First up you might have your sshd config set up incorrectly, but that wasn’t the case for me. Instead – it’s when I have the tunnel open and I change wifi connections and the old connection seems to hang around on the server, preventing the new ssh connection from opening a port.

You can easily check what process is holding the port open on your server by using netstat:

[tomato:~]$ sudo netstat -ap | grep 6300
tcp6       0      0 [::]:6300               [::]:* LISTEN
18354/sshd: ben

Netstat results for port 6300 on my server.

Once you’ve found the hanging sshd process that is holding onto the port you want to tunnel with, you can kill it with extreme prejudice:

[tomato:~]$ kill 18354
[tomato:~]$

Goodbye useless sshd

You’re quite safe killing ssh daemons which are running as yourself, just make sure you don’t killall sshd, or you might find a bit difficult to log back in.

Which is another reason to use a virtual hosting provider, because they usually provide console log on – which is much harder to bork.

]]> http://www.nolanconsul.com/articles/remote-forwarding-failure/feed/ http://www.nolanconsul.com/articles/facebooker-tutorial/ http://www.nolanconsul.com/articles/facebooker-tutorial/#comments Tue, 13 Oct 2009 23:30:16 +0000 admin http://www.nolanconsul.com/?p=58

This tutorial will show you how to build a simple Facebook application using Ruby on Rails and Facebook.

Contents

Introduction

Facebook applications are a great way to try out new social web ideas, no longer do you have to spend a dozen nights building a cool new website, only to leave it running for a few weeks and get less than a thousand unique visitors.

With Facebook applications you can leverage Facebook Markup Language (FBML), Facebooks authentication, your existing friend network and Facebooks viral promotion tools to get your app in front of more eyeballs.

Combined with Ruby on Rails, one of the best rapid application development tools, you can prototype an idea, put it in front of people and start getting feedback much much quicker.

Also – an often overlooked advantage of Facebook is that is has your non-technical friends on it, so you quickly get feedback from real people – not just your techie early adopter friends.

Feedback like“How do I send this to my friend? I want them to do this quiz”instead of “Oh man, you should’ve used XFBML+Jquery+SquidmooDB”

Facebook apps are about user engagement, measurement and growth, which is a different and interesting skillset from your usual web development role.

Anyway – I hope I have convinced you that Facebook applications are a great area to get into – so let’s get started.

What you will need

I will assume that you have rails installed on your system and you have done some of the Ruby on Rails tutorials. But to be sure – this tutorial expects you have:

• A working Rails 2.3 install.
  Run rails -v to get your rails version.

• Ability to install plugins via git.
  So you can install facebooker.

• A server you can use for a ssh tunnel.
  This is the simplest way to let facebook request pages from your development server. If you don’t have a server, slicehost is a good affordable solution, just get their smallest 256mb virtual machine.

Okay – so you’ve got those, got your macbook, a cup of coffee and a nice perch in your local coffee shop? Let’s go then.

Register your Application

Go to http://www.facebook.com/developers/createapp.php and create your application.

Enter name of your application, can be anything you like.

Then you will be taken to the ‘edit application’ form. There are plenty of options you can edit here, you should bookmark this page to come back and set a logo and description. For now, click ‘canvas’ on the left hand side and set a canvas page url.

The settings to create are:

Canvas Page URL: This is the URL to access your app. Many of these are gone and yours must be unique – so good luck finding something you like.

Canvas callback URL: This is the address that facebook uses to access your site – for your development site you should be:

http://yourslicehost.com:4007/

We will open an ssh reverse tunnel (via facebooker) to server port 4007 from your local dev environment.

Render Method: Set to FBML. Creating iframed pages isn’t covered in this tutorial.

Hit save and then bring up your terminal and get ready to do some rails.

You want to create two versions of your app – one for development and one for production. For the rest of this article we will be discussing setting up your development application. I tend to name my development applications with the dev suffix. For example /bestcities/ and /bestcitiesdev/.

Create your rails app

Open the terminal on your pc and type the following commands.

rails mygreatapp
cd mygreatapp
script/plugin install
git://github.com/mmangino/facebooker.git

Creating your first facebooker application

Then open mygreatapp in your text editor and open config/facebooker.yml. This file tells the facebooker plugin how to communicate securely with facebook. You have to configure your development environment before starting up your rails app. If you don’t configure facebooker.yml you will get an error when trying to start rails.

You need to go back to your ‘edit application’ form at facebook.com and copy out your API key and Secret. These go into the development section of facebooker.yml.

Getting your Application ID from facebook.com

development:
 api_key: 8b81627dfbdc1eac5d69f72d11ecb2083
 secret_key: 1f096ea634151345aa54a1a6dbb8db897bf
 canvas_page_name:
mygreatapp-dev
 callback_url:
http://bennolan.com:4007/

Configuring facebooker.yml with your application settings

The details you need to set are:

api_key Your API key from facebook

secret_key Your Applications secret key from facebook

canvas_page_name Address of your facebook page

callback_url Port 4007 (or another port number of your choice) of your
slicehost server.

You can leave the other settings to their default. You’re now ready to start development.

Creating your first view

Facebook application views use FBML. Because your html content is served embedded in a facebook page, you html is filtered and sanitized before being displayed. This means no javascript, no css to break out of frames etc.

Read more about FBML here:

http://wiki.developers.facebook.com/index.php/Category:FBML_tags

We will start by creating a welcome controller and generating a welcome view.

script/generate controller welcome

Create welcome controller

Then create a file in app/views/welcome/index.fbml.erb. This is a standard .erb and .html view, except if will only be served via facebook, and you can include facebook tags. Put this in your view:

<fb:header>My great application</fb:header>

<fb:tabs>
  <fb:tab-item href='<%= url_for :controller => 'welcome',
:action => 'index' %>' title='Home' selected='true'/>
  <fb:tab-item href='<%= url_for :controller => 'things',
:action => 'index' %>' title='Your things' />
</fb:tabs>

<p>
  Hi there <fb:name uid="loggedinuser" useyou="false" />!
Welcome to
  your first app.
</p>

app/views/welcome/index.fbml.erb

Now edit config/routes.rb and uncomment this line:

  map.root :controller => "welcome"

Enabling your default route

Start your engines

Bring up your terminal again. You need to start your local development server, and then make that server available to the wider internet. Do this like so:

script/server &
rake facebooker:tunnel:start &

Starting your facebook applicatio

Once your server has started, the second command will start a reverse ssh tunnel.

Now load http://apps.facebook.com/yourgreatapp_dev/ and you should be able to access your first facebooker application.

If you see this then you’re ready to go.

If it didn’t work – try these steps:

1. Load http://localhost:3000/ and check you get the ‘welcome to rails’ page

2. Load http://yourslicehost.com:4007/ and check you get the ‘welcome to rails’ page. If you don’t, either [a] your ssh tunnel didn’t start or [b] your server has a firewall running to prevent you getting access to port 4007

3. Check that your facebook application canvas page settings are set to http://yourslicehost.com:4007/

Once you have your rails app being served locally and displayed inside facebook you are ready to go!

Next steps

Now your basic application is going – you can start creating models and controllers. Facebooker will automatically correct your URLs so you can develop like normal. Your next best step is probably learning about authentication.

Check the Nolan Consulting site for further Facebooker tutorials.

http://www.nolanconsul.com/

The facebook developers wiki is a great reference source:

http://wiki.developers.facebook.com/

The facebooker rdoc documentation is available from rdoc.info:

http://rdoc.info/projects/mmangino/facebooker

To discuss with other facebook developers, try the forum:

http://forum.developers.facebook.com/