Devise Facebook Omniauth login with connect and disconnect functionality

When talking about users authentication in Rails land there is one name that generally stands above all the other available gems. This name is Devise.

I would not be so wrong to call it the de facto standard of Rails authentication considering the time has been around and the vast documentation it has under its belt.

Regarding for example the OAuth2 functionality there is a well documented page inside the wiki that describes how to implement it for Facebook.

Unfortunately what presented inside the documentation doesn’t always blend well with the other functionalities of an application.

Continue reading “Devise Facebook Omniauth login with connect and disconnect functionality”

Rumination: Facebook, experiments and morals

TL;DR.


There’s been a great fuss as of late around the so-called “Facebook emotion experiment”, an investigation conducted by Facebook-affiliated scientists which involved manipulating the news feed of around 700’000 FB users in order to learn about the mechanism of emotional response to content posted by others.

Continue reading “Rumination: Facebook, experiments and morals”

Playing with POP

A couple of weeks ago Facebook shared a video with some behind the curtains details about the realisation of Paper, their iOS new fancy client.

Among the talks a bomb was released: they were going to open source their animation framework POP, and they finally did!

POP it has been released for iOS and OSX, it can animate everything, not only CGLayers, you can even animate volume or other object’s properties.

And to whet your appetite before heading to the repo check Codeplease’s posts on POP

Arduino Yún social photo camera

After making an USB Audio card work with Arduino Yún, the logical second step was try to use an USB camera instead, and it worked! I was so amazed by this new huge set of possibilitities to create, that I started a little weekend project: to build an Arduino based Facebook photo camera

I was so into this project that I didn’t realize that, even if the single steps are very simple, they’re quite a lot! So I decided to write this step-by-step tutorial and to split it into … articles.

Just to be clear:

The goal

To build photocamera that shoots pictures and publishes them directly to a specific Facebook Album.

Ingredients

The Steps

  1. Install the USB Camera on Arduino Yún
  2. Take your first picture
  3. Create the Facebook Application
  4. Post your first picture with the Temboo API
  5. Install the Temboo SDK on Arduino Yún
  6. Make the python script and publish your first photo to Facebook from Arduino
  7. Create the Arduino sketch
  8. Put everything together

1. Install the USB Camera on Arduino Yún

I assume that your Arduino Yún is already configured for wi-fi (or connected via the Ethernet port), and that you have SSH access to it, if not, follow this link to configure the wifi network and this link to connect via SSH.

The UVC package is already available fot Linino via opkg, so installing the Camera is a very easy step, just connect to your Yún via ssh and type

$ opkg update
$ opkg install kmod-video-uvc

We also need a software for taking pictures, I used fswebcam that is supersmall and very easy to use

$ opkg install fswebcam

Now we can test it!

2. Take your first picture

First of all, be sure to use and SD card for storage or you will quickly fill the Arduino internal storage, and you don’t want to do that. If you are using an SD card, you should see it mounted in /mnt/sda1. If it’s not, put a FAT32 formatted micro SD card into the SD Card Slot, and reboot your Arduino

Now plug the camera to the USB host port, and type

$ cd /mnt/sda1
$ fswebcam test.png

If everything is ok, you took your first picture!

This means that now we can take pictures from our Arduino sketch, via the Yún’s Bridge library, in this way

Process.runShellCommand("fswebcam /mnt/sda1/test.png");

Now we will learn how to share them on Facebook using Temboo.

3. Create the Facebook Application

This is easy, but you must be a Facebook developer to do that. That simply means that you have to accomplish these easy steps before starting. Done? ok! So now let’s create a blank Facebook Application

image creation

and configure it in this way:

configuration

 Create a Temboo Application

First of all, register on Temboo. When you’re in, create a new application, then go to https://temboo.com/library/Library/Facebook/Publishing/UploadPhoto/

add new credentials for the new Facebook app.

temboo config

Choose oAuth wizard, go directly to the third step and copy and paste the app id & app secret from your Facebook application.

Go to the next step, click on launch authorisation and grant the authorisation to the Facebook application.

Now you have the access token

Click on use these values and save, copy and paste the access token in the access token form field if needed.

Now you need the target album id. to get an album id, just go on Facebook, open an album (not a single photo) and the URL will look like this.

albumid

The album id is the highlighted part. copy and paste it into the AlbumID field on Temboo

I also choose to open the Optional Input section and to put a custom message 🙂

message

If you take a look to the sample code, Temboo has made pretty much all the job for you, but we need to make some changes, we will make them later. Now we need some gratification, so let’s post our first picture!

4. Post your first picture with the Temboo API

You already put your Access Token and the desired AlbumID. The only thing that’s missing is the Base64 Encoded image. So go to http://www.freeformatter.com/base64-encoder.html and paste the URI of the image you want to encode, then copy the encoded string and paste it into the Temboo interface.

https://i0.wp.com/i.imgur.com/DT1Ij8U.png?w=640

Click TRY IT OUT and voilà, the image it’s magically posted on your album!

5. Install the Temboo SDK on Arduino Yún

We will use the Temboo API from a Python script, so we need to download the SDK. The download page is here https://temboo.com/download, all we have to do is download the Python SDK and unzip it into the root folder of your Micro SD card (it will unzip into a /temboo folder).

A very important step is installing OpenSSL support for Python, as the Temboo libraries will try to use SSL to publish the photos.

$ opkg update
$ opkg install python-openssl

6. Make the python script and publish your first photo to Facebook from Arduino

As I wrote before, the generated code from Temboo is a good starting point, but we need to make some modifications in order to make it work.

# Instantiate the Choreo, using a previously instantiated TembooSession object, eg:
# session = TembooSession('jeko', 'APP_KEY_NAME', 'APP_KEY_VALUE')
uploadPhotoChoreo = UploadPhoto(session)

# Get an InputSet object for the choreo
uploadPhotoInputs = uploadPhotoChoreo.new_input_set()

# Set credential to use for execution
uploadPhotoInputs.set_credential('ArduinoCamera')

# Set inputs
uploadPhotoInputs.set_Message("This photo has been shot and published with an Arduino Yún")
uploadPhotoInputs.set_AlbumID("")

# Execute choreo
uploadPhotoResults = uploadPhotoChoreo.execute_with_results(uploadPhotoInputs)

Download my version of the script and copy it into the root folder of the SD card. Here’s what I did.

Step number one, the encoding. I’m italian and we use a lot of accented characters, so I’ll use UTF-8 as the default script encoding, so I added

# coding=utf-8

at the top of my script. Now we need to read the photo from the disk, and to base64 encode it, so we will need the base64 and the sys libraries.

import base64
import sys

The Temboo libraries are not included in the generated script by Temboo, so we will have to add them

from temboo.core.session import TembooSession
from temboo.Library.Facebook.Publishing import UploadPhoto

The script will read the first argument, and use it as the name of the image file to encode

with open(str(sys.argv[1]), "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read())

In this line you have to put your Temboo’s account name, and the app name and key (from this page)

session = TembooSession('ACCOUNT_NAME', 'APP_KEY_NAME', 'APP_KEY_VALUE')

You’ll also need to put yout access token, message (if you want one) and Album ID into the script

uploadPhotoInputs.set_AccessToken("ACCESS_TOKEN")
uploadPhotoInputs.set_Message("MESSAGE")
uploadPhotoInputs.set_AlbumID("ALBUM_ID")   

The rest of the script is basically identical to the Temboo’s example.

We can now try to publish our first photo with the script!

$fswebcam testpic.jpg
$python sendphoto.py testpic.jpg 

At this point I strongly hope that it’s working for you as it’s working for me (otherwise contact me and we will try to solve the problem together) because you have just published your first picture to Facebook with Arduino! The only missing step is to make an Arduino sketch to take and send the picture without using SSH

7. Create the Arduino sketch

I started from the basic “Button” example, as I wanted the camera to be triggered by a simple Pushbutton. The circuit is the same of the button example. Just download this arduino sketch

you can customise the LED and Button pin if you want

const int buttonPin = 2; // pin for the pushbutton 
const int ledPin =  13; // pin for the status led

as well as the path for the photos and the Python script (important! this folder must contain the Temboo SDK)

String path = "/mnt/sda1/"; // path of the images and script file 

The setup is pretty simple, we will use the Bridge library to invoke the Python script, and the Serial library for a very basic debugging

void setup() {
    Bridge.begin(); // The bridge library is used to run processes on the linux side
    pinMode(ledPin, OUTPUT);      
    pinMode(buttonPin, INPUT); 
    Serial.begin(57600); // Serial port for debugging
    filename = "test";
}

Then, when the pushbutton is pressed, the script generates a new timestamp based filename running the “date +%s” command

if (buttonState == LOW) {
    filename = "";
    p.runShellCommand("date +%s"); //generate a timestamp
    while(p.running()); // wait until the command has finished running

    while (p.available()>0) {
        char c = p.read(); //reads the first available character
        filename += c; //and adds it to the filename string
    } 

    filename.trim(); //used to avoid trailing spaces or newline characters
    filename += ".png"; //finally I add the png extension

This part of the code will take the picture and send it to Facebook using the Bridge library

p.runShellCommand("fswebcam " + path + filename); //let's take the picture
while(p.running());  //waits till the picture is saved
Serial.println("picture taken"); 

p.runShellCommand("python " + path + "sendphoto.py " + path + filename); //sends the picture to facebook 
while(p.running()); 
Serial.println("picture sent"); //last debug message    

8. Put everything together

Ok! Everything is ready! Just upload the code to Arduino, push the button and… Smile!! You’re on Facebook! 🙂

I really hope that you enjoyed this tutorial, it opens a lot of possibilities! Trap cameras, cameras triggered by doors, by sounds or any kind of sensor… I’d really like to see your projects and share them!

Cheers and happy hacking!

Stefano

Facebook Graph API without user generated access token

[EDIT] This method is meant to be used only by server side applications, in general it’s not a good practice to include the app_id and app_secret in an API call!

Since I started using the Facebook Graph API, the Access Token generation has always been by biggest problem: they are not easy to generate, and they expire!

So you need to make calls to the Facebook Graph API from a Facebook APP and you don’t want to use a user generated token? There is an easy way!

There is an alternative method to call the Facebook Graph API that doesn’t require a user generated token:

https://graph.facebook.com/endpoint?key=value&access_token=app_id|app_secret

And… That’s it!! Just give to your app the right permissions, and you’ll never need to generate an Access Token again!!

The “Facebook’s Like” Alarm

Hi there! Ever wanted to know in real time if someone likes your facebook page?

We’ve got the solution for you! Here, in Mikamai, as most companies do, we have a Facebook page, and we are very proud of it. We wanted to have some kind of physical feedback in our office, to let us know in real time when we get a new fan.

So, that’s how we did it.

First of all, the device. We needed to have it on 24/7, it should be very cheap, low powered, and we wanted to have the possibility to add new features (audio, video, lights, physical devices ecc…) so the perfect choice was the RaspberryPI

Second, the programming language. The obvious choice for us is Ruby 🙂

Third… what will happen? We wanted something simple, effective and not too annoying, so we choose a simple sound, the Super Mario coin sample was perfect for us.

The set up is very very simple.

We started froma a brand new RaspberryPI, and we installed Ruby with RVM, following these easy steps

https://rvm.io/rvm/install

everything worked like a charm.

Then, we put this simple script in /home/pi/like_it/

    
require 'rubygems'
require 'net/http'
require 'json'

LIKES_FILE = "likes"
PLAYER = (RUBY_PLATFORM == "armv6l-linux-eabihf") ? "omxplayer" : "mpg123"

while true do
  begin
    response = Net::HTTP.get_response("graph.facebook.com","/mikamai")
    json = JSON.parse(response.body)

    old_likes =  File.open(LIKES_FILE, 'r').gets.to_i
    likes = json["likes"].to_i

    if (likes > old_likes)
      #fixme: with mpg123 the -o local option (obviously) returns an error, it's non blocking but could be fixed
      system(PLAYER + " coin.mp3 -o local")
      p "like"
    end

    File.open(LIKES_FILE, 'w') { |file| file.write(likes) }

    sleep (10)
  rescue
    p "ERROR!!! YOU SHOULD INVESTIGATE"
  end
end

If you are using GIT (You have to install GIT on your RaspberryPI as well) simply go in the home directory via ssh and checkout the project from

https://github.com/amicojeko/Like-It

In the Github project we also added a simple start script

#! /bin/sh

DIR=/home/pi/like_it
cd $DIR

# stdout goes in trash, stderr gets logged 
rvm-auto-ruby like_it.rb 1> /dev/null 2> $DIR/logs/like_it_error &

the coin sample file, the (empty) log files for errors and stdout, and the counter file (using a database for this project is a bit overkill)

and… that’s it!

The script is supersimple, it runs an infinite loop and checks for new likes every 10 seconds (since the real time API for likes is not available yet). It just calls the Facebook Open Graph Public API, it searches for the “likes” counter in the JSON file, and confronts it with the likes previously stored in the “likes” file. If the likes are increasing, it plays the audio file.

Simple, stupid and sooo effective 🙂

To make it start automatically everytime the RaspberryPI reboots, jus add this in the /etc/rc.local file

# starts like-it daemon as pi user
su pi -c '/home/pi/like_it/start'