Android Face Book 2012 Spring

8/2/2019 Android Face Book 2012 Spring

http://slidepdf.com/reader/full/android-face-book-2012-spring 1/10

1

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 OShandsets 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 ona 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

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 includeimages, besides text messages.

The facebook homepage is available at:

http://www.facebook.com

Facebook provides developers with an application-programming interface, called theFacebook 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 followingsequence of actions:

a) Authorizes (logs in) the user to Facebook;

b) Requests the user permission to access the user’s 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.



3

Figure 1. User Interface (Login to Facebook)

d) A list of hotels will be displayed, and each tuple contains the thumbnail of thehotel 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 includinghotel 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.



4

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 AndroidSDK 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 hotelafter 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” isdisplayed, as shown in Figure 3.



5

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 (insidethe 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").



6

• 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 theREADME.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 insideExample/src/com.facebook.android). This Facebook app should use the New DataPermissions, 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 indetail later in this assignment description) [note: you should have an ApplicationID 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 andselect 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.



7

Figure 4. Facebook Login UI

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



8

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 thesample.

• 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 (fromTomcat) is retrieved.



9

• Data about the hotels is displayed, and the UI allows selecting one of the listitems.

• 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 thisimplementation, 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 Androiduser interface is (100, 100).

• If you still have problem on creating projects with Facebook API following theabove 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. Makesure 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



10

5. Prerequisites

This homework requires the use of the following components:

1. Download and install Eclipse. Download and install the Android SDK.

Instructions on how to download and install both are available on the classwebsite 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 thatyou will need to create a Facebook Developer application: go to

https://www.facebook.com/developers/createapp.php and click Allow it to accessyour information. Then click Set Up New Application. Name the application,

agree to the terms, and click on Create Application. In the following windowskeep all the defaults and click Save Changes. See the sections “Creating Your

Facebook Application” and “Configuring Basic Settings”. In the window thatdisplays next, you should see the Application ID (see figure below) that you will

have to use with the Android Facebook SDK.

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 theAnnouncement page and in Piazza.

You should also ZIP your Android source directory and SUBMIT the resulting ZIP file.

Documents

Android Face Book 2012 Spring