TShopping

 找回密碼
 註冊
搜索
查看: 1035|回復: 2

[教學] Facebook應用程式開發教學1】用PHP輕鬆開發第一支App,傻瓜入

  [複製鏈接]
發表於 2012-4-20 16:30:29 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
標題說是傻瓜入門的原因是,這是我在Facebook上的第一支app,前後只花了兩小時,後來就沒改了,做為簡單入門的教學頗為適合,因此拿出來分享一下。
這是個讓你測驗你的英文程度是否有國小程度的小程式,是個生活學習類的有用ap。要進入狀況前,請先玩一下:測驗:國小畢業應該具備的單字基礎


1. 簡單解說一下這支程式的相關流程:
首先,要玩這支ap的fb user必須先授權給這支程式,也就是第一個畫面,同意之後才能開始玩。
接下來,程式自動從資料庫中找單字來出題,答題後告訴你剛剛答對還是答錯並且計算答題總數,這是一般的php。
每答對十題,程式跳出一個視窗,請你發佈一些訊息到你的Wall上面。
2. 要達成以上的需求,基本上非常簡單,首先你自己的php程式應該先寫好了,再做facebook的整合就很快了。
以下我用簡化的code假設你的主程式是這麼寫的,這只是個例子,真正的程式邏輯要靠自己來。在這個簡化的code裡面,使用者永遠需要選第三個選項,這樣就會答對,否則就會答錯,顯示答錯的訊息給你看。
logic的部分(controller):
  1. if ($_POST['choice']) {
  2.     if ($_POST['choice'] == '3') {
  3.         $msg="答對了";
  4.     } else {
  5.         $msg="答錯了";
  6.     }
  7. }
複製代碼

presentation的部分(view)

  1. <?php echo $msg; ?>
複製代碼

請開始作答
題目:water

  1. <form method="post" action="test.php" name="test1" id="test1">
  2. <div>

  3. <div><input type="radio" name="choice" value="1" onclick="document.getElementById('test1').submit();">努力工作的,勤勉的</div>

  4. <div><input type="radio" name="choice" value="2" onclick="document.getElementById('test1').submit();">…的,…所有的</div>

  5. <div><input type="radio" name="choice" value="3" onclick="document.getElementById('test1').submit();">水</div>

  6. <div><input type="radio" name="choice" value="4" onclick="document.getElementById('test1').submit();">粉筆</div>

  7. </div>
  8. </form>
複製代碼

3. 有了上述的核心程式,現在就有兩件事得做:
a .怎麼讓facebook user授權給你的這支程式哩?
b. 如何跳出提示訊息讓使用者發佈訊息到wall?
首先,到 http://www.facebook.com/developers註冊一個新的應用,這頁的右上角有個”Set Up New Application”接下來,就是設置這個新的ap的相關重要參數,最重要的是:
驗證裡面的 Post-Authorize Callback URL,當使用者授權ok後,fb就會把使用者導往這個網址,如果沒有特殊的設計,就填寫你的程式所在的網址,在我們的例子裡,假設我剛剛寫的那個php程式放在 http://stingtao.info/1/2/test.php,那麼這個欄位就寫http://stingtao.info/1/2/test.php
以及Canava裡面的 畫布頁面網址 與 Canvas Callback URL,第一個只要不跟別人的重複,隨便你寫,第二個如果你沒有特殊的需求,也是填寫你的程式所在的網址,例如: http://stingtao.info/1/2/test.php
其他設定請看真的例子:
存檔後,基本上facebook平台上的設定就好了,請注意抄下以下三個數值,後面會用到。
Application ID
API 金鑰
秘密
4. 下載 php client library, 網址在 http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz
我們假設你解開的路徑就是相對於test.php所在目錄下的facebook子目錄中。
5. 接下來,就超簡單了,直接先寫出結果吧,照著抄一定會work的,所以我直接用註解描述相關事情:
在剛剛的主程式加入紅字的部分:
logic的部分(controller):
  1. require_once('facebook/php/facebook.php');
  2. $facebook = new Facebook('API 金鑰','Application Secret');  //把剛剛看到的數字取代相關金鑰以及秘密
  3. $appid = 'Application ID';  //字串裡面換成你的 app ID
  4. $fb_user = $facebook->require_login(); //就是這行,fb就會要使用者登入了

  5. if ($_POST['choice']) {
  6.     if ($_POST['choice'] == '3') {
  7.         $msg="答對了";
  8.     } else {
  9.         $msg="答錯了";
  10.     }
  11. }
複製代碼

presentation的部分(view)

  1. <?php echo $msg ;?>
複製代碼

請開始作答
題目:water

  1. <form method="post" action="test.php" name="test1" id="test1">
  2. <div>

  3. <div><input type="radio" name="choice" value="1" onclick="document.getElementById('test1').submit();">努力工作的,勤勉的</div>

  4. <div><input type="radio" name="choice" value="2" onclick="document.getElementById('test1').submit();">…的,…所有的</div>

  5. <div><input type="radio" name="choice" value="3" onclick="document.getElementById('test1').submit();">水</div>

  6. <div><input type="radio" name="choice" value="4" onclick="document.getElementById('test1').submit();">粉筆</div>

  7. </div>
  8. </form>

  9. <?php if (!empty($msg) ) { //這段的意思就是只要答題,那麼就跳一個視窗出來問要不要publish 到 wall,這是facebook提供的javascript 函式,不用想太多,就用下去就會有效果

  10. ?>
  11. <script>
  12. var actionLinks = [{ "text": "想瞭解facebook ap的開發?到inside.com.tw", "href": "http://www.inside.com.tw"}];
  13. Facebook.streamPublish('<?php echo $msg;?>',
  14. '',
  15. actionLinks,
  16. '',
  17. '剛剛答題的結果如下:',
  18. '',
  19. true
  20. );</script>

  21. <?php } ?>
複製代碼

6. ok, 打開瀏覽器指向你剛剛填的Canvas URL, 網址類似 http://apps.facebook.com/nciku_english這樣的東西,你就會看到熟悉的facebook應用程式使用流程了。

 

臉書網友討論
 樓主| 發表於 2013-2-1 19:30:13 | 顯示全部樓層
牛X海海!!!

版主招募中

發表於 2013-3-28 02:47:30 | 顯示全部樓層
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-10 23:06 , Processed in 0.057927 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表