Getting started with Facebook app(PHP) development on Heroku

This is basic tutorial for getting started with Facebook app(PHP) development on Heroku.


What I'll introduce
This is quick introduction how to develop Facebook app(PHP) with Heroku.
In this tutorial, the environment consists of Eclipse, XAMPP and web browser in Local, and using Git for uploading to Heroku.

My environment consists of

• Mac OS X 10.7
• Eclipse Helios
• XAMPP 1.7.3
• Git 1.7.8.4

Steps

I'll introduce by below steps.

I. Installing development environment

II. Create your Facebook app on Heroku

III. Generate your SSH key

IV. Create app's clone

V. Import app into Eclipse

VI. Setup your app on Eclipse 

VII. Create your debug app on Facebook 

VIII. Setup XAMPP

IX. Development and push

I. Installing development environment

1. Get Eclipse and install it. http://www.eclipse.org/
2. Get PDT(PHP development tool) from your Eclipse and install it.
3. Get EGit from your Eclipse and install it.
4. Get XAMPP and install it. http://sourceforge.net/projects/xampp/
5. Get Git and install it https://code.google.com/p/git-osx-installer

#When install application from Eclipse, select Install New Software from [Help] menu. Then select "Helios - http://download.eclipse.org/releases/helios" in the "work with" URL and select software you want to install.

II. Create your Facebook app on Heroku

1. Access Facebook Developers and click "Apps" then register your app name.
2. Get cloud service and select Heroku.

3. Select environment and fill in your e-mail address then go to your app on Heroku.
   # If you haven't had your account on Heroku, the account will be created automatically. And then follow the navigation to activate your account.

4. You'll see your app on Heroku. Check your app name.

III. Generate your SSH key(If you haven't had yet)

1. Create .ssh directory in your home dir, if you don't have it yet.
   

   side7:~ xxx$ mkdir ~/.ssh
   side7:~ xxx$ cd ~/.ssh
   

2. Generate your SSH key in your .ssh dir.
   

   side7:.ssh xxx$ ssh-keygen -t rsa
   
   Generating public/private rsa key pair.
   Enter file in which to save the key (/Users/xxx/.ssh/id_rsa):
   Enter passphrase (empty for no passphrase):
   Enter same passphrase again:
   Your identification has been saved in /Users/xxx/.ssh/id_rsa.
   Your public key has been saved in /Users/xxx/.ssh/id_rsa.pub.
   The key fingerprint is:
   [HEX KEY such as 4b:32:...........] xxx@side7.local
   The key's randomart image is:
   +--[ RSA 2048]----+
   [image]
   [image]
   [image]
   [image]
   [image]
   [image]
   +-----------------+
   

3. Check your SSH key
   

   side7:.ssh xxx$ ls
   id_rsa        id_rsa.pub
   

IV. Obtain your app's clone from Heroku

1. Move your project directory where you like.

side7:php xxx$ cd /Users/xxx/dev/php/

2. Clone your app repository.

side7:.php xxx$ git clone git@heroku.com:your_app_name.git -o heroku
Cloning into 'your_app_name'...
Warning: Permanently added the RSA host key for IP address '50.19.85.156' to the list of known hosts.
remote: Counting objects: 172, done.
remote: Compressing objects: 100% (104/104), done.
remote: Total 172 (delta 78), reused 132 (delta 62)
Receiving objects: 100% (172/172), 136.82 KiB | 33 KiB/s, done.
Resolving deltas: 100% (78/78), done.

3. You'll see your app clone in your project dir.

side7:php xxx$ cd your_app_name
side7:your_app_url xxx$ ls -la
total 72
drwxr-xr-x  13 kensaku  staff    442 Feb 27 22:02 .
drwxr-xr-x   8 kensaku  staff    272 Feb 27 22:01 ..
drwxr-xr-x  13 kensaku  staff    442 Feb 27 22:02 .git
-rw-r--r--   1 kensaku  staff     86 Feb 27 22:02 .gitmodules
-rw-r--r--   1 kensaku  staff   1300 Feb 27 22:02 AppInfo.php
-rw-r--r--   1 kensaku  staff   1579 Feb 27 22:02 Readme.md
-rw-r--r--   1 kensaku  staff     60 Feb 27 22:02 channel.html
drwxr-xr-x   8 kensaku  staff    272 Feb 27 22:02 images
-rw-r--r--   1 kensaku  staff  13846 Feb 27 22:02 index.php
drwxr-xr-x   3 kensaku  staff    102 Feb 27 22:02 javascript
drwxr-xr-x   2 kensaku  staff     68 Feb 27 22:02 sdk
drwxr-xr-x   6 kensaku  staff    204 Feb 27 22:02 stylesheets
-rw-r--r--   1 kensaku  staff    275 Feb 27 22:02 utils.php

V. Import your project(clone) into eclipse as PHP project

1. Create PHP project in your Eclipse.
   Create new PHP project in your Eclipse at your app clone.

2. Share your project
   Open explorer view and select project then select "share project" from [team] in context menu.

VI. Setup your app on Eclipse

1. Obtain and Import Facebook PHP SDK into your app project.
   Get Facebook PHP SDK from Facebook php-sdk git hub and deploy it in your_app_project/sdk/src.
2. Create and set .gitignore file.Open explorer view and select .buildpath file then select "add .igonre" from [team] in context menu. Also add .ignore, .project, sdk/ and .settings/ into .ignore.

VII. Create your debug app on Facebook

1. Access Facebook Developers again and click "Apps" then register your debug app name such as "your_facebook_name debug".
2. Set your debug app url for local access like http://127.0.0.1:6000

VIII. Setup XAMPP

1. Move to XAMPP conf dir and open httpd.conf as root.

side7:~ xxx$ cd /Applications/XAMPP/etc
side7:etc xxx$ sudo vi httpd.conf
Password:

2. Configure virtual host settings and Facebook app settings in httpd.conf.
   Add below settings under "Listen 80"

Listen 5000

#
# Virtual host configurations start from here
#
NameVirtualHost *:80
NameVirtualHost *:5000


  DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
  ServerName localhost



  DocumentRoot "/Users/xxx/dev/php/your_app_name"
  ServerName localhost
  SetEnv FACEBOOK_APP_ID your_app_id_for_real
  SetEnv FACEBOOK_SECRET your_app_secret_for_real


#
# Enable AcceptMutex flock for using vhosts
#
AcceptMutex flock 

3. Access http://localhost:5000/ You'll see Facebook app template same as you've seen on Heroku.

IX. Development and push your source code

1. Modify index.php and enjoy development.
   
   ENJOY DEVELOPMENT!!
   
2. Commit your change to your local repository.
   Select  "Commit" from [team] in context menu and select then fill in your comment and commit.
   
   
3. Push your change to your remote repository.
   Select "push" from [team] in context menu.
   
   

IIX. Congratulation!

Access your app on Heroku!!

Useful links

Facebook developers, Heroku, Getting start doc on Heroku, Getting start Facebook app on Heroku