DIVs vs. Tables
Down for Maintenance
Custom Error Pages
Escaping query strings
Google App testing
Avoid AS Statics
Configure local machine for Facebook testing
If you are like me you are lazy about having to keep uploading files to an external server just to test them. That is why Google provides us with the Google App Engine launcher. Unfortunately it is a bit harder when developing Facebook applications to test locally. Facebook needs to make calls to your server and normally you might be tempted (forced) to test on a live server - perhaps even a production server. This is just irritating. When I compile a new SWF file, I don't want to have to upload anywhere it to see how it works with Facebook.
This articles describes how to make Facebook talk to your laptop or your desktop computer - or any machine you are working on instead of regular web server. This is a long processes but hopefully most steps you already have completed by virture of you being a developer. But first the requirements. First, I'm assuming you are not too new to Facebook app development and you are familiar with the Google App Engine and Apache. The setup assumptions of this are that you are using a system like mine:
- Windows 7
- A registered Facebook App that you are developing
- D-Link router (you can have different)
- Google App Enginge (not necessary)
- Apache server (you can set one up as we go)
The main steps involved are:
- Setup an Apache web server
- Install PHP
- Load PHP module openSSL
- Configure router to act as virtual server
- Configure Facebook App to your computers IP address
- Configure Google App Engine
- Setup crossdomain.xml policy file
- Actionscript code
- PHP code
Install Apache server
If you don't have an Apache server installed download the SSL version for windows. If find that Apache works best if you install it off the root, as in "C:\Apache2.2" instead of from the program files dir. So be sure to do that. I mean it. We will configure Apache later, for now we'll just install everything we need.
Download the correct copy of PHP. You need a ZIP file of the "VC6 x86 Thread Safe" versions.
The VC9 version might be ok. Unzip this into a folder off your root "C:\PHP".
Make a copy of "C:\PHP\php.ini-recommended" and rename it "C:\PHP\php.ini".
Edit php.ini and do the following changes:
- extension_dir = "./ext"
- remove ; from ";extension=php_openssl.dll"
Configure router to act as virtual server
Next you need to setup your router to redirect incoming requests to where you'll have the your Facebook app on your harddrive. For example your external IP might be 184.108.40.206 (visit http://whatismyip.com/ to find out) but you want to run locally, perhaps on 192.168.0.100. Therefore you need to tell your router to map 220.127.116.11 to 192.168.0.100. But you must also set a port. So you will see that in the example below.
This allows external computers to find the web site you are running from your laptop.
Configure Facebook App to your computers IP address
Now configure Facebook to go to your local computer to get your app. I assume you already know how to setup a FB app. So go to the setup screen for the app and enter your external IP like so:
Configure Google App Engine
I would assume you already have GAE installed but if not do so.
The key here is to setup your GAE app for your local IP and a port different from
your Apache port.
Select your installed GAE app from the list.
In the menu choose
Choose a port from which to serve your GAE server. This port MUST be different from the port you setup for your Apache server. I think 8080 is a good one.
Under "Launch Settings">"Extra command line flags:" enter a line for the IP you set your router.
example: "--address=192.168.0.100" (without that quotes)
Setup crossdomain.xml Policy File
If you don't know what a cross domain file is, Google it. You need one to inform a Flash app that it is allowed to read data from the specified server. In other words, if your Flash app isn't running from the correct IP, then it cannot access your GAE server. Therefore your GAE must serve your crossdomain.xml file. To do this you must tell GAE how to serve the crossdomain.xml file in your app.yaml file.
- In your apps GAE folder, create a new folder called "static"
- Put your crossdomain file into the /static folder
- In app.yaml, under "Handlers:" add a section like:
- url: /crossdomain.xml static_files: static/crossdomain.xml upload: static/crossdomain.xml
Now you need to tell your actionscript code what to do. Remember this is just a test/debug setup. So have a static variable specifying what IP to use to access your GAE database, ex: GAEUrl="http://192.168.0.100:8080/". All your calls to your data will then hit your GAE server.
This is important but very subjective. Most likely you'll be server your HTML page
out as PHP. That will include code to manage and show your SWF file. Be sure to
remember our setup.
GAE calls are made to "http://192.168.0.100:8080/"
Facebook callbacks use your external IP http://18.104.22.168" (with port if set)
To summarize, you are running 2 servers on your local machine. GAE and Apache. Apache serves our your webpage to Facebook. Facebook knows about it, because you gave Facebook your machine's external IP. You configured your router to map your external IP to a local internal IP on a different port than GAE runs. GAE is setup on the local internal IP on a different port than Apache runs. Once these are setup the software (Actionscript, PHP) just need to correctly call the appropriate addresses.
Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page: