行動平台上利用 Facebook API開發社群應用程式

kewang

2

FACEBOOK DOCS

SUCKS!!!

3

Me

● 姓名：王慕羣● 現職：三竹資訊 研發工程師● Android 上架 app ： http://bit.ly/18m1gUh

● GitHub ： http://github.com/kewangtw

4

Agenda

● 基礎 Android 開發● 簡介 Facebook Platform

● Facebook for Android 動手做

5

基礎 Android 開發

6

開發事前準備

7

開發事前準備

8

Hello World

9

Hello World 解析 - Main.java

public class Main extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); }

@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return true; }}

10

Hello World 解析 - main.xml<RelativeLayout 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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" >

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" />

</RelativeLayout>

11

Hello World 解析 - strings.xml

<?xml version="1.0" encoding="utf-8"?><resources>

<string name="app_name">Hello World</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello world!</string>

</resources>

12

Hello World 解析 - AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.helloworld" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.example.helloworld.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application></manifest>

13

Playing

14

基本 widgets

● ViewGroup ：可以包含任意個數的 view

● TextView ：單純顯示文字的 view

● EditText ：可以輸入文字的 view

● Button ：可以按下觸發事件的 view

15

基本 widgets - ViewGroup

● LinearLayout ：將 view 以線性方式排列– android:orientation="horizontal" ：橫式排列– android:orientation="vertical" ：直式排列

● RelativeLayout ：將 view 以相對位置排列– android:alignParentRight="true" ：靠齊上一層的右邊– android:toRightOf="{view-id}" ：放在 {view} 的右邊– android:layout_above="{view-id}" ：放在 {view} 的上面

16

基本 widgets - TextView

● 常用來顯示文字，是大部分顯示用 widget 的parent class

● setText ：指定文字內容● setAllCaps ：指定英文字顯示時為大寫● setGravity ：指定文字對齊方式● getText().toString() ：傳回所顯示的文字

17

基本 widgets - EditText

● 常用來輸入文字● setText ：指定文字內容 ( 與 TextView 同 )

● setHint ：指定未輸入文字時的文字框內容● addTextChangedListener ：利用此方法將所輸入

的文字轉換為另種文字

18

基本 widgets - Button

● 常用來執行動作● setText ：指定文字內容 ( 與 TextView 同 )

● setOnClickListener ：按下此 widget 時所執行的動作

19

Playing

20

BaseActivity( 個人偏好寫法 )public abstract class BaseActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(getLayoutId()); findView(); setView(); setListener(); doExtra(); }

public abstract int getLayoutId(); public abstract void findView(); public abstract void setView(); public abstract void setListener(); public abstract void doExtra();}

21

BaseActivity

● getLayoutId ：該 Activity 要套用的 layout id

● findView ：找出要運用的 view widgets

● setView ：設定 view 的屬性，如 color, size... 等● setListener ：設定 view 的事件觸發● doExtra ：當進入 Activity 時初始化要做的事

22

BaseActivity 範例public class MainActivity extends BaseActivity { private EditText edtShow; private TextView txtShow; private Button btnShow;

@Override public int getLayoutId() { return R.layout.activity_main; }

@Override public void findView() { edtShow = (EditText) findViewById(R.id.edit_show); txtShow = (TextView) findViewById(R.id.text_show); btnShow = (Button) findViewById(R.id.button_show); }

23

BaseActivity 範例 @Override public void setView() { edtShow.setHint("可以在這邊輸入文字"); }

@Override public void setListener() { btnShow.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { txtShow.setText(edtShow.getText().toString()); } }); }

@Override public void doExtra() { Toast.makeText(this, "Initialize", Toast.LENGTH_LONG).show(); }}

24

Playing

25

Android 開發必讀● Develop | Android Developers

26

簡介 Facebook Platform

27via http://bit.ly/18m6f7l

28

Facebook Platform

● Open Graph● Social Plugins● Graph API● Dialogs● Facebook Login● FQL● Client SDK

29

Open Graph

● 由 Facebook 發明。● 建構在現有的網頁技術上面。● 以語意網 (Semantic Web) 的概念開始。● 只要在任何一個網頁的 metadata 內加入一些特

定屬性，就可以讓使用者在特定網站 ( 目前大都為 Facebook) 引用這個網頁時，能收集到使用者的眾多資訊。

30

Open Graph

31

Playing

32

Open Graph 與隱私權相關討論● Open Graph Overview● Facebook Open Graph 的 與平台政策修改新聞整理

● Facebook 你應該要害怕 嗎？● Facebook Graph API – 新 推出 你打算跟魔鬼做交易了嗎？

● Facebook社群抓力：你的喜好 都知道

33

Social Plugins

● 不在 Facebook ，也能 Facebook

● 能讓你的朋友在其他網站知道你喜歡什麼、評論什麼或是分享了什麼

● 包含了 "Like" 、 "Comment" 、 "Share Dialog"...等眾多的社交功能。

34

Social Plugins - Like

35

Social Plugins - Like

36

Social Plugins - Comments

37

Playing

38

Social Plugins 相關資源● Like Button● Comments Box

39

Graph API

● Facebook 的核心● 幾乎所有的 Facebook API 都是由此衍生而來

– Open Graph, Social Plugins... 等– Android, iOS, PHP, JavaScript... 等 client SDK

● 開發必讀– API References– Graph API Explorer

40

Graph API

● 包含各種物件： Photo, Link, User, Page, Post... 等● 以 JSON 格式呈現● 每個在 Graph 上面的物件都有唯一 id

– 網址： http://graph.facebook.com/{id}

● User 及 Page 除了唯一 id 外，也有唯一 name

ex.● http://graph.facebook.com/1440581349● http://graph.facebook.com/kewangtw

41

Graph API

● 包含一個名為 me 的特殊路徑– http://graph.facebook.com/me ( 必須先取得 token)

– http://graph.facebook.com/{my-id}– http://graph.facebook.com/{my-name}

42

Graph API example

● Publishing a post– curl -F 'access_token=...' -F 'message=Hello. I like this new

API.' https://graph.facebook.com/{user-id}/feed● Likes and Comments

– curl -F 'access_token=...' https://graph.facebook.com/{object-id}/likes

– curl -F 'access_token=...' https://graph.facebook.com/{object-id}/comments

● Facebook APIs › Graph API › Post

43

Graph API Explorer

● Easy to use Graph API

44

Playing

45

Facebook for Android 動手做

46

Facebook for Android 動手做● Facebook Login● Show me● Post to wall

47

Facebook Login - Session

● 使用 Facebook SDK 時最重要的一個 object

● 主要用來管理 Facebook 登入時的使用者資訊及讀寫資料時的權限

48

Facebook Login

Session session = Session.openActiveSessionFromCache(this);

if (session == null) { Session.openActiveSession(this, true, callback);} else { txtToken.setText(session.getAccessToken());}

49

Facebook Login

private Session.StatusCallback callback = new StatusCallback() { @Override public void call(Session session, SessionState state,Exception exception) { txtToken.setText(session.getAccessToken()); }};

50

Facebook Login

@Overridepublic void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data);

Session.getActiveSession().onActivityResult(this, requestCode, resultCode, data);}

51

Facebook Login 步驟● 有安裝 FB app

– 未登入過 FB ：出現 FB app 登入畫面，登入後跳回原 app 詢問授權，並儲存 token 在本機快取

– 已登入過 FB ：在原 app 詢問授權，並儲存 token 在本機快取– 已登入過原 app ：直接使用本機快取的 token

● 未安裝 FB app– 未登入過 FB ：出現 FB web 登入對話框，登入後跳回原 app 詢問

授權，並儲存 token 在本機快取– 已登入過原 app ：直接使用本機快取的 token

52

Playing

53

Show me

● GraphUser– 對應至 Graph API 的 User object

– 所有關於使用者的資料都對應在這個 object 內● com.facebook.widget.ProfilePictureView

– 顯示使用者的頭像– setProfileId(String) ：設定使用者 id 並顯示頭像

54

Show me - invoke permission

Session session = Session.getActiveSession();List<String> newPermissions = Arrays.asList("user_birthday");NewPermissionsRequest request = new NewPermissionsRequest(this, newPermissions);

session.requestNewReadPermissions(request);

55

Show me - read userinfo

Request.executeMeRequestAsync(session, new GraphUserCallback() { @Override public void onCompleted(GraphUser user, Response response) { if (user != null) { txtMe.setText(String.format(ME_FORMAT, user.getId(), user.getName(), user.getBirthday(), user.getUsername()));

imgMe.setProfileId(user.getId());

cancelLoading(); } }});

56

Playing

57

Post to wall

● Post– 在 FB 的每一篇留言、讚、評論，都以 Post 為基礎

58

Post to wall - invoke permission

Session session = Session.getActiveSession();List<String> newPermissions = Arrays.asList("publish_stream");NewPermissionsRequest request = new NewPermissionsRequest(this, newPermissions);

session.requestNewPublishPermissions(request);

59

Post to wall - post some message

Bundle args = new Bundle();

args.putString("message", edtPost.getText().toString());

Request postRequest = new Request(session, "me/feed", args,HttpMethod.POST);

new RequestAsyncTask(postRequest).execute();

60

Playing

61

工商服務時間

三竹資訊

三竹資訊

券商下單全國第一名

商用簡訊全國第一名

行動銀行市佔率高

三竹資訊

●招募： iOS、 Android、行動網頁人才●福利：加班費、購機半價優惠、 MacBook Pro

65