Android Tutorial Facebook
In this Tutorial we will write an android app with Facebook connection.
Set up the backend
1. Log into your account. If you don‘t have an account, simply register by clicking "Not having an account yet?”.
2. You are now within the dashboard. If you haven‘t created an app yet, you will be asked to give your first app a name and to describe it shortly. In our example the app is called “Facebook”. For your app, though, you should use a unique name.
3. On the first dashboard page you will see all available modules. First, you will select the Facebook Module by clicking “+” right next to the name of the module.
4.Now you will be able to enter the above described information. For this tutorial you just leave the Facebook App ID the way it is. Leave the field Facebook App Secret blank. Enter “publish_actions” into Facebook Scope, this will, among other things, allow you to post on your wall. Confirm by clicking “Save”.
5. To create the backend click “Deploy”.
6. Switch to the tab “SDK”. You can download each of the SDKs we offer here.
7. You need the SDK for Android. To download, simply click on the button “Download SDK”. This downloaded .ZIP file contains all classes and resources you need. Unpack the .ZIP file, saving it somewhere on your hard disk. After that you are finished with the dashboard for now.
8. Open your desired IDE and set up a new Android project. Be careful to chose at least the Android SDK version 8 (2.2 Froyo).
9. Now open the folder containing the unpacked .ZIP file within the file manager.
10. Copy both of the folders into the “src” folder (source) of your app. Now the programming of the frontend starts.
The Layout
Firstly, you make the layout by using all the elements you need for the app. Don‘t worry, there aren't too many.
1. Open the layout file of your Main Activity. You can find it in the folder “layout” within the folder “res” (resources). The XML file has the name you gave your Main Activity.
2. The Android SDK sets up a RelativeLayout by default, which is somewhat cumbersome. That‘s why we delete the code to insert a LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical"></LinearLayout>
3. Now you will set up a button called “log in”, that contains a listener for the method “login”. It looks like this:
<Button android:text="Login" android:layout_width="fill_parent" android:layout_height="wrap_content" android:onClick="login"/>
Make sure that buttons, text strings, etc. are child elements of LinearLayout. Usually all strings in Android are being entered within an extra file (strings.xml in the folder “values”). Anyway, this doesn't make much sense in an example app. That‘s why the text has to be entered directly.
4. Beneath the button there should be an input field, or as Android calls it, EditText. Although it doesn't get a Listener or text, it gets an ID. What the ID is there for, we‘ll find out later.
<EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/et_main_post"/>
5. Now the second button. It should be labeled “Post text!” and triggers the method “post”.
<Button android:text="Post text!" android:layout_width="fill_parent" android:layout_height="wrap_content" android:onClick="post"/>
6. At last, you will have to insert a WebView, which is some sort of a reduced browser:
<WebView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/wv_main_webview"/>
Setting up a User
1. Open your Main Activity in the src folder. So far, it‘s pretty empty, containing:
-
The packagename the Activity belongs to.
-
The imports.
-
The class, that‘s named after the Activity and the methods “onCreate” and “onCreateOptionsMenu”.
2. Delete the “onCreateOptionsMenu” method. Because of this method there is a menu button displayed in the upper right corner of your app. As we don‘t want to set up a menu, it‘s a so called “menu button of shame” without any functionality.
3. You will set up an entity of the class User next. It will be a global object:
final User user = new User();
4. Now switch to the “onCreate” method and add the following functions:
user.setUserName("USERNAME");user.setPassword("PASSWORD");Datastore.configureWithCredentials(user);
Change the username and password to what you would like it to be. When you‘re finished with this step, the connection to the backend is being initiated.
5. Through the next Codeblock the user is being forwarded to the server. It will ask if the user with this given user name already exists. If this in not the case, the name will be applied.
user.loadMeAsync(new AOMEmptyCallback() {@Overridepublic void isDone(ApiomatRequestException exception) {if (exception != null) {user.saveAsync(new AOMEmptyCallback() {@Overridepublic void isDone(ApiomatRequestException exception) { }});}}});
Connection to Facebook
1. Now the user has to be linked to Facebook. To do that, we will create the method “login”:
public void login(View view) { [...] }
2. To make the connection you need the UserID, which we get from the Reference URL:
int start = user.getHref().lastIndexOf("/");String id = user.getHref().substring(start + 1);
Optionally you can choose between MemerID and UserUserName.
3. A WebView has to be generated now. Also, it has to be connected to the WebView we created in the layout file:
WebView webview = (WebView) findViewbyId(R.id.main_wv_webview);
4. The last action of the method is to open the Authentication URL with the WebView.
webview.loadUrl("http://apiomat.org/yambas/rest/modules/Facebook/spec/NAMEOFYOURAPP/auth?memberId=" + id + "&usedSystem=" +User.system);
When doing that, replace NAMEOFYOURAPP with your app‘s name on the server.
Posting Something on your Facebook Wall
1. We will now generate the method “post”, which posts the texts entered into the text field.
public void posten(View view) { [...] }
2. First, we will generate an object of FBUser. FBUser represents your Facebook account.
FBUser me = new FBUser();
3. Now the User has to be saved, so that a valid href attribute can be received. To prevent potential mistakes, we have to surround the Codeblock with a try-catch statement.
try {me.saveAsync(new AOMEmptyCallback() {@Overridepublic void isDone(ApiomatRequestException exception) { }});[...]}catch (Exception e) {e.printStackTrace();}
4. To create a post, first you must create an object of the class FBPost. As you probably already know, the class represents your posts. One could also say you‘re generating a new post.
FBPost newPost = new FBPost();
5. Theoretically, you can now post something onto your wall. But as we don‘t want to use a fixed string, you have to read the content data of the textfield at first. Helping us doing that is the set ID:
EditText etext;etext = (EditText) findViewById(R.id.et_main_post);String posttext = etext.getText().toString();
6. Now set the string “posttext” as content of your post.
newPost.setMessage(posttext);
7. To publish the post you just have to save the entity.
newPost.saveAsync(new AOMEmptyCallback() {@Overridepublic void isDone(ApiomatRequestException exception) { }});Asking for Permission
An Android app is not allowed to do anything, especially accessing the Internet. To allow our app to do this, we must have it ask for permission. This happens in the Android Manifest.
1. Open the die AndroidManifest.xml within your apps root folder.
2. Directly add this line after the <manifest [...]> tag:
<uses-permission android:name="android.permission.INTERNET"/>
Now your frontend is installed!
Let’s test!
1. Start the app on your Android smartphone.
2. Touch the button “Log In”. The browser should open now. You will be asked to enter your Facebook data, as the ApiOmat-Facebook-App requests authorization.
3. Log in with your Facebook data and press install. Now you‘re connected to Facebook.
4. Press your smartphone‘s back button until you’re back on the screen of the Android app.
5. Enter any desired text into the text field below, for example “ApiOmat is awesome!” and then press the button “Post text!”. If you check out your Facebook page now, you will find the text you entered into the text field there.