Homework: Android Facebook Post A Mobile Phone Exercise

1. Objectives

Become familiar with the Eclipse, Android and Facebook;

Use Java code with a combination of the Android SDK and Facebook APIs;

Provide an interface to post text and pictures to Facebook.

2. Background
2.1 Eclipse
Eclipse is an open source community, whose projects are focused on building an open
development platform comprised of extensible frameworks, tools and runtimes for
building, deploying and managing software across the lifecycle.
The Eclipse Project was originally created by IBM in November 2001 and supported by a
consortium of software vendors. The Eclipse Top-Level Project is an open source, robust,
full-featured, commercial-quality, industry platform for the development of highly
integrated tools and rich client applications.
The home page of the Eclipse Foundation is located at:
http://www.eclipse.org/

2.2. Android
Android is a mobile operating system initially developed by Android Inc., a firm
purchased by Google in 2005. Android is based upon a modified version of the Linux
kernel. Unit sales for Android OS smartphones ranked first among all smartphone OS
handsets sold in the U.S. in the second quarter of 2010, at 33%.
The Android operating system software stack consists of Java applications running on a
Java based object oriented application framework on top of Java core libraries running on
a Dalvik virtual machine featuring JIT compilation.
The Official Android home page is located at:
http://www.android.com/

The Official Android Developer home page is located at:

http://developer.android.com/index.html

2.3 Facebook
Facebook is a global social networking website that is operated and privately owned by
Facebook, Inc. Users can add friends and send them messages, and update their personal
profiles to notify friends about themselves and what they are doing.
Users can additionally post news feeds to their profiles, and these feeds may include
images, besides text messages.
The facebook homepage is available at:
http://www.facebook.com

Facebook provides developers with an application-programming interface, called the

Facebook Platform.
A beta version of the Facebook SDK for Android was demoed at Google I/O in San
Francisco in May 2010.
3. Description of the Exercise
In this exercise, you will write an Android Mobile application that does the following
sequence of actions:
a) Authorizes (logs in) the user to Facebook;
b) Requests the user permission to access the users data;
c) An edit box is provided to enter the city name and a spinner to select a hotel chain
(like the UI in HW #8). When a button named "Search" is clicked, the JSON data
from HW #8 (from Tomcat) is retrieved.
Snapshot of the user interface, before and after successful login, is shown in Figure 1.

Figure 1. User Interface (Login to Facebook)

d) A list of hotels will be displayed, and each tuple contains the thumbnail of the
hotel picture, hotel name and location. User can select any tuple.
e) After clicking one tuple, the details of that hotel will pop up in a dialog including
hotel name, image, number of reviews and rating. Also, there is a Post to
Facebook button at the bottom.
f) The Post to Facebook button allows the user to post the brief introduction of the
hotel to the Facebook Wall just like what you have done in HW #8.

A snapshot of the user interface, after clicking the search button, is shown in Figure 2,
before and after selecting one of the tuples.

Figure 2. User Interface (hotel selection)

To implement this exercise you are required to write a Java program using the Android
SDK and the Facebook SDK for Android. The top-level interface consists of two areas:

A control (widget) to select the hotel to post (a combination of text and image);
you can use any available Android control to perform this step (such as the
ListView or Gallery widgets, for example) (Figure 2 uses a ListView widget);
Another widget you may use is Dialog. It is used to display the detail of a hotel
after clicking one list in the ListView. There is also a built-in widget (RatingBar)
for you to display ratings.

After clicking the Post to Facebook button the Facebook SDK dialog Post to Wall is
displayed, as shown in Figure 3.

Figure 3. User Interface (Post Introduction)

3.1 Facebook SDK for Android
To develop this exercise you will modify code provided by Facebook. The source code
for the Facebook SDK for Android is available at:
http://github.com/facebook/facebook-android-sdk/

Click on Downloads and select the Download .zip button. The ZIP file will be
downloaded to you PC or Mac. Extract the ZIP file on your Desktop. Name the folder
facebook-android-sdk.
With a text editor, open the file named README.md inside the facebook-android-sdk.
You will install the SDK and a sample program.
Use the instructions in the README.md file to install and configure the Facebook SDK,
as described in the section titled Getting Started, which is duplicated here:

Create a new project for the Facebook SDK in your Eclipse workspace.
Open the File menu, select New --> Project and choose Android Project (inside
the Android folder), then click Next.
Select "Create project from existing source".
Select the facebook subdirectory from within the git repository.
You should see the project properties populated (you might want to change the
project name to something like "FacebookSDK").
5

Click Finish to complete the task.

The Facebook SDK is now configured and ready to go.

3.2 Facebook Sample Application (App)
Navigate to the folder named examples/simple. Again follow the instructions in the
README.md file to install the sample application stored in the aforementioned folder,
using similar steps outlined above for the Facebook SDK.
Use the instructions in the README.md file to configure and run the Sample App, as
described in the section titled Run the Sample Application, which is duplicated here:

Add your Facebook application ID to the Example.java file (located inside

Example/src/com.facebook.android). This Facebook app should use the New Data
Permissions, as described in the known issues section in the README.md file. If
you do not have a Facebook application ID, you can create one:
http://www.facebook.com/developers/createapp.php (this process is covered in
detail later in this assignment description) [note: you should have an Application
ID from your HW #8]

Build the project: from the Project menu, select "Build Project". You may see a
build error about missing "gen" files, but this should go away when you build the
project -- if you have trouble, try running "Clean..." in the Project menu.

Run the application: from the Run menu, select "Run Configurations...". Under
Android Application, you can create a new run configuration: give it a name and
select the simple Example project; use the default activity Launch Action. See
http://developer.android.com/guide/developing/eclipse-adt.html#RunConfig for
more details.

If you did all the above correctly, you will now have a running Android application with
a login UI as displayed in Figure 4 below.

Figure 4. Facebook Login UI

Once you correctly login with a valid Facebook username / password, you will be
displayed the Request for Permission dialog as shown in Figure 5 below. Click Allow.

Figure 5. Simple Facebook App UI

Once you are properly logged in and have allowed the SDK Sample App to access your
Facebook data, you will displayed the 4 buttons shown on the right of Figure 5.
If you reached this point with no errors, you have now the entire now code base that you
will need for your project. You should try to invoke the Upload Photo and Wall Post!
buttons, and see what they pop up and what they post on your Facebook account.
3.3 Modify the Sample Application
You will modify the Sample application you have just installed, configured and run.
Instead of the four buttons (Login/Logout, Upload Photo, Request! And Wall Post)
displayed on the right of Figure 3, your User Interface will change as follows:

The Login/Logout button remains the same, with identical behavior as in the
sample.
Instead of the four buttons, you should display a text field, a spinner and a search
button just like the interface in HW #8.
When a button named "Search" is clicked, the JSON data from HW #8 (from
Tomcat) is retrieved.
8

Data about the hotels is displayed, and the UI allows selecting one of the list
items.
Post to the user's Facebook Wall an introduction containing the hotel name,
location, rating and review link to tripadvisor.com, using the Facebook SDK for
Android.

Figure 6. The Post on the Facebook's Wall

Compare Figure 6 with Figure 3, to see the mapping of each entered component (image,
text message).
4. Implementation Hints

Facebook offers multiple APIs for you to upload or request data. In this
implementation, you can use the Graph or REST APIs.
For the Graph API, please check the document here:
http://developers.facebook.com/docs/reference/api/
For the REST API, please check the document here:
http://developers.facebook.com/docs/reference/rest/

The suggested size of your image thumbnails in your list view of your Android
user interface is (100, 100).
If you still have problem on creating projects with Facebook API following the
above instructions, you can create a new project and copy all the source code and
resource file from Facebook API and sample projects to your new project. Make
sure that you eliminate all the compiling errors and then start creating your own
activities, so that you can use all the classes in the Facebook API freely.
You are supposed to handle such situations like no hotels found and inform user
whether the posting to the wall is successful or not.
To better understand how Facebook Feeds work, you can read this page:
http://wiki.developers.facebook.com/index.php/Feed

5. Prerequisites
This homework requires the use of the following components:
Download and install Eclipse. Download and install the Android SDK.
Instructions on how to download and install both are available on the class
website at http://www-scf.usc.edu/~csci571/2011Spring/eclipse_setup_v6_9.pdf.
2. You need to create a Facebook Platform application as documented at:
https://developers.facebook.com/docs/mobile/android/build/#register. To do that
you will need to create a Facebook Developer application: go to
https://www.facebook.com/developers/createapp.php and click Allow it to access
your information. Then click Set Up New Application. Name the application,
agree to the terms, and click on Create Application. In the following windows
keep all the defaults and click Save Changes. See the sections Creating Your
Facebook Application and Configuring Basic Settings. In the window that
displays next, you should see the Application ID (see figure below) that you will
have to use with the Android Facebook SDK.
1.

7. Material You Need to Submit

Unlike other exercises, you will have to demo your submission in person during a
special grading session. Details and logistics for the demo will be provided in class, in the
Announcement page and in Piazza.
You should also ZIP your Android source directory and SUBMIT the resulting ZIP file.

10