行動平台上利用 Facebook API 開
發社群應用程式
kewang
2
FACEBOOK
DOCS
SUCKS!!!
3
Me
●
姓名:王慕羣
●
現職:三竹資訊 研發工程師
●
Android 上架 app : http://bit.ly/18m1gUh
●
GitHub : http://github.com/kewang
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 savedInstanceSt...
10
Hello World 解析 - main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http:...
11
Hello World 解析 - strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Hello World</st...
12
Hello World 解析 - AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.and...
13
Playing
14
基本 widgets
●
ViewGroup :可以包含任意個數的 view
●
TextView :單純顯示文字的 view
●
EditText :可以輸入文字的 view
●
Button :可以按下觸發事件的 view
15
基本 widgets - ViewGroup
●
LinearLayout :將 view 以線性方式排列
– android:orientation="horizontal" :橫式排列
– android:orientation="v...
16
基本 widgets - TextView
●
常用來顯示文字,是大部分顯示用 widget 的
parent class
●
setText :指定文字內容
●
setAllCaps :指定英文字顯示時為大寫
●
setGravity ...
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 s...
21
BaseActivity
●
getLayoutId :該 Activity 要套用的 layout id
●
findView :找出要運用的 view widgets
●
setView :設定 view 的屬性,如 color,si...
22
BaseActivity 範例
public class MainActivity extends BaseActivity {
private EditText edtShow;
private TextView txtShow;
pr...
23
BaseActivity 範例
@Override
public void setView() {
edtShow.setHint("可以在這邊輸入文字");
}
@Override
public void setListener() {...
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 內加入一些特
定屬性,就可以讓使用者在特定網站 ...
30
Open Graph
31
Playing
32
Open Graph 與隱私權相關討論
● Open Graph Overview
● Facebook Open Graph的 與 平台政策修改 新
聞整理
● Facebook你應該要害怕 嗎?
● Facebook Graph AP...
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...
40
Graph API
●
包含各種物件: Photo, Link, User,Page, Post... 等
●
以 JSON 格式呈現
●
每個在 Graph 上面的物件都有唯一 id
– 網址: http://graph.faceboo...
41
Graph API
●
包含一個名為 me 的特殊路徑
– http://graph.facebook.com/me ( 必須先取得 token)
– http://graph.facebook.com/{my-id}
– http://...
42
Graph API example
● Publishing a post
– curl -F 'access_token=...' -F 'message=Hello. I like this new
API.' https://gra...
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.openActiveSes...
49
Facebook Login
private Session.StatusCallback callback = new
StatusCallback() {
@Override
public void call(Session sess...
50
Facebook Login
@Override
public void onActivityResult(int requestCode, int
resultCode, Intent data) {
super.onActivityR...
51
Facebook Login 步驟
●
有安裝 FB app
– 未登入過 FB :出現 FB app 登入畫面,登入後跳回原 app 詢問授
權,並儲存 token 在本機快取
– 已登入過 FB :在原 app 詢問授權,並儲存 to...
52
Playing
53
Show me
● GraphUser
– 對應至 Graph API 的 User object
– 所有關於使用者的資料都對應在這個 object 內
● com.facebook.widget.ProfilePictureView
...
54
Show me - invoke permission
Session session = Session.getActiveSession();
List<String> newPermissions = Arrays.asList("...
55
Show me - read userinfo
Request.executeMeRequestAsync(session, new GraphUserCallback() {
@Override
public void onComple...
56
Playing
57
Post to wall
● Post
– 在 FB 的每一篇留言、讚、評論,都以 Post 為基礎
58
Post to wall - invoke permission
Session session = Session.getActiveSession();
List<String> newPermissions = Arrays.asL...
59
Post to wall - post some message
Bundle args = new Bundle();
args.putString("message", edtPost.getText().toString());
R...
60
Playing
61
工商服務時間
三竹資訊
三竹資訊
券商下單全國第一名
商用簡訊全國第一名
行動銀行市佔率高
三竹資訊
●
招募: iOS 、 Android 、行動網頁人才
●
福利:加班費、購機半價優
惠、 MacBook Pro
65
Upcoming SlideShare
Loading in …5
×

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

541 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
541
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. 行動平台上利用 Facebook API 開 發社群應用程式 kewang
  2. 2. 2 FACEBOOK DOCS SUCKS!!!
  3. 3. 3 Me ● 姓名:王慕羣 ● 現職:三竹資訊 研發工程師 ● Android 上架 app : http://bit.ly/18m1gUh ● GitHub : http://github.com/kewang
  4. 4. 4 Agenda ● 基礎 Android 開發 ● 簡介 Facebook Platform ● Facebook for Android 動手做
  5. 5. 5 基礎 Android 開發
  6. 6. 6 開發事前準備
  7. 7. 7 開發事前準備
  8. 8. 8 Hello World
  9. 9. 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. 10. 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. 11. 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. 12. 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. 13. 13 Playing
  14. 14. 14 基本 widgets ● ViewGroup :可以包含任意個數的 view ● TextView :單純顯示文字的 view ● EditText :可以輸入文字的 view ● Button :可以按下觸發事件的 view
  15. 15. 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. 16. 16 基本 widgets - TextView ● 常用來顯示文字,是大部分顯示用 widget 的 parent class ● setText :指定文字內容 ● setAllCaps :指定英文字顯示時為大寫 ● setGravity :指定文字對齊方式 ● getText().toString() :傳回所顯示的文字
  17. 17. 17 基本 widgets - EditText ● 常用來輸入文字 ● setText :指定文字內容 ( 與 TextView 同 ) ● setHint :指定未輸入文字時的文字框內容 ● addTextChangedListener :利用此方法將所輸入 的文字轉換為另種文字
  18. 18. 18 基本 widgets - Button ● 常用來執行動作 ● setText :指定文字內容 ( 與 TextView 同 ) ● setOnClickListener :按下此 widget 時所執行的 動作
  19. 19. 19 Playing
  20. 20. 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. 21. 21 BaseActivity ● getLayoutId :該 Activity 要套用的 layout id ● findView :找出要運用的 view widgets ● setView :設定 view 的屬性,如 color,size... 等 ● setListener :設定 view 的事件觸發 ● doExtra :當進入 Activity 時初始化要做的事
  22. 22. 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. 23. 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. 24. 24 Playing
  25. 25. 25 Android 開發必讀 ● Develop | Android Developers
  26. 26. 26 簡介 Facebook Platform
  27. 27. 27via http://bit.ly/18m6f7l
  28. 28. 28 Facebook Platform ● Open Graph ● Social Plugins ● Graph API ● Dialogs ● Facebook Login ● FQL ● Client SDK
  29. 29. 29 Open Graph ● 由 Facebook 發明。 ● 建構在現有的網頁技術上面。 ● 以語意網 (Semantic Web) 的概念開始。 ● 只要在任何一個網頁的 metadata 內加入一些特 定屬性,就可以讓使用者在特定網站 ( 目前大 都為 Facebook) 引用這個網頁時,能收集到使用 者的眾多資訊。
  30. 30. 30 Open Graph
  31. 31. 31 Playing
  32. 32. 32 Open Graph 與隱私權相關討論 ● Open Graph Overview ● Facebook Open Graph的 與 平台政策修改 新 聞整理 ● Facebook你應該要害怕 嗎? ● Facebook Graph API –新 推出 你打算跟魔鬼做 交易了嗎? ● Facebook社群抓力:你的喜好 都知道
  33. 33. 33 Social Plugins ● 不在 Facebook ,也能 Facebook ● 能讓你的朋友在其他網站知道你喜歡什麼、評 論什麼或是分享了什麼 ● 包含了 "Like" 、 "Comment" 、 "Share Dialog"... 等眾多的社交功能。
  34. 34. 34 Social Plugins - Like
  35. 35. 35 Social Plugins - Like
  36. 36. 36 Social Plugins - Comments
  37. 37. 37 Playing
  38. 38. 38 Social Plugins 相關資源 ● Like Button ● Comments Box
  39. 39. 39 Graph API ● Facebook 的核心 ● 幾乎所有的 Facebook API 都是由此衍生而來 – Open Graph, Social Plugins... 等 – Android, iOS, PHP,JavaScript... 等 client SDK ● 開發必讀 – API References – Graph API Explorer
  40. 40. 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. 41. 41 Graph API ● 包含一個名為 me 的特殊路徑 – http://graph.facebook.com/me ( 必須先取得 token) – http://graph.facebook.com/{my-id} – http://graph.facebook.com/{my-name}
  42. 42. 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. 43. 43 Graph API Explorer ● Easy to use Graph API
  44. 44. 44 Playing
  45. 45. 45 Facebook for Android 動手做
  46. 46. 46 Facebook for Android 動手做 ● Facebook Login ● Show me ● Post to wall
  47. 47. 47 Facebook Login - Session ● 使用 Facebook SDK 時最重要的一個 object ● 主要用來管理 Facebook 登入時的使用者資訊及 讀寫資料時的權限
  48. 48. 48 Facebook Login Session session = Session.openActiveSessionFromCache(this); if (session == null) { Session.openActiveSession(this, true, callback); } else { txtToken.setText(session.getAccessToken()); }
  49. 49. 49 Facebook Login private Session.StatusCallback callback = new StatusCallback() { @Override public void call(Session session, SessionState state, Exception exception) { txtToken.setText(session.getAccessToken()); } };
  50. 50. 50 Facebook Login @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); Session.getActiveSession().onActivityResult(this, requestCode, resultCode, data); }
  51. 51. 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. 52. 52 Playing
  53. 53. 53 Show me ● GraphUser – 對應至 Graph API 的 User object – 所有關於使用者的資料都對應在這個 object 內 ● com.facebook.widget.ProfilePictureView – 顯示使用者的頭像 – setProfileId(String) :設定使用者 id 並顯示頭像
  54. 54. 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. 55. 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. 56. 56 Playing
  57. 57. 57 Post to wall ● Post – 在 FB 的每一篇留言、讚、評論,都以 Post 為基礎
  58. 58. 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. 59. 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. 60. 60 Playing
  61. 61. 61 工商服務時間
  62. 62. 三竹資訊
  63. 63. 三竹資訊 券商下單全國第一名 商用簡訊全國第一名 行動銀行市佔率高
  64. 64. 三竹資訊 ● 招募: iOS 、 Android 、行動網頁人才 ● 福利:加班費、購機半價優 惠、 MacBook Pro
  65. 65. 65

×