【Facebook應用程式開發教學1】用PHP輕鬆開發第一支App,傻瓜入門術!

標題說是傻子都會寫,因為這是我的第一支facebook ap,只花了兩小時,後來就沒改了,做為簡單入門的教學頗為適合,因此拿出來分享一下。
評論
評論

標題說是傻瓜入門的原因是,這是我在 Facebook 上的第一支 app,前後只花了兩小時,後來就沒改了,做為簡單入門的教學頗為適合,因此拿出來分享一下。

這是個讓你測驗你的英文程度是否有國小程度的小程式,是個生活學習類的有用 ap。要進入狀況前,請先玩一下: 測驗:國小畢業應該具備的單字基礎


1. 簡單解說一下這支程式的相關流程:

首先,要玩這支 ap 的 fb user 必須先授權給這支程式,也就是第一個畫面,同意之後才能開始玩。

接下來,程式自動從資料庫中找單字來出題,答題後告訴你剛剛答對還是答錯並且計算答題總數,這是一般的 php。

每答對十題,程式跳出一個視窗,請你發佈一些訊息到你的 Wall 上面。

2. 要達成以上的需求,基本上非常簡單,首先你自己的 php 程式應該先寫好了,再做 facebook 的整合就很快了。

以下我用簡化的 code 假設你的主程式是這麼寫的,這只是個例子,真正的程式邏輯要靠自己來。在這個簡化的 code 裡面,使用者永遠需要選第三個選項,這樣就會答對,否則就會答錯,顯示答錯的訊息給你看。

logic 的部分 (controller):

if ($_POST['choice']) {     if ($_POST['choice'] == '3') {         $msg="答對了";     } else {         $msg="答錯了";     } } 

presentation 的部分 (view)

<?php echo $msg; ?>

請開始作答

 題目:water   <form method="post" action="test.php" name="test1" id="test1"> <div>  <div><input type="radio" name="choice" value="1" onclick="document.getElementById('test1').submit();"> 努力工作的,勤勉的</div>  <div><input type="radio" name="choice" value="2" onclick="document.getElementById('test1').submit();">…的,…所有的</div>  <div><input type="radio" name="choice" value="3" onclick="document.getElementById('test1').submit();"> 水</div>  <div><input type="radio" name="choice" value="4" onclick="document.getElementById('test1').submit();"> 粉筆</div>  </div> </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):

require_once('facebook/php/facebook.php'); $facebook = new Facebook('API 金鑰','Application Secret');  //把剛剛看到的數字取代相關金鑰以及秘密 $appid = 'Application ID';  //字串裡面換成你的 app ID $fb_user = $facebook->require_login(); //就是這行,fb 就會要使用者登入了  if ($_POST['choice']) {     if ($_POST['choice'] == '3') {         $msg="答對了";     } else {         $msg="答錯了";     } } 

presentation 的部分 (view)

<?php echo $msg ;?>

請開始作答

 題目:water   <form method="post" action="test.php" name="test1" id="test1"> <div>  <div><input type="radio" name="choice" value="1" onclick="document.getElementById('test1').submit();"> 努力工作的,勤勉的</div>  <div><input type="radio" name="choice" value="2" onclick="document.getElementById('test1').submit();">…的,…所有的</div>  <div><input type="radio" name="choice" value="3" onclick="document.getElementById('test1').submit();"> 水</div>  <div><input type="radio" name="choice" value="4" onclick="document.getElementById('test1').submit();"> 粉筆</div>  </div> </form>  <?php if (!empty($msg) ) { //這段的意思就是只要答題,那麼就跳一個視窗出來問要不要 publish 到 wall,這是 facebook 提供的 javascript 函式,不用想太多,就用下去就會有效果   ?> <script> var actionLinks = [{ "text": "想瞭解 facebook ap 的開發?到 inside.com.tw", "href": "https://www.inside.com.tw"}]; Facebook.streamPublish('<?php echo $msg;?>', '',  actionLinks, '', '剛剛答題的結果如下:', '', true );</script>  <?php } ?> 

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


5G+AI 引爆超級物聯網!無線網路解決方案大廠 Ubiquiti Inc. 培養員工「一人公司」模式,打造國際級網通方案

物聯網風潮下,無線網路解決方案大廠 Ubiquiti Inc. 分享他們如何培養開放、創意的企業文化,在吸引人才,提供良好的環境下,造就出國際頂尖的解決方案。
評論
Photo Credit:Ubiquiti Inc.
評論

第一代物聯網最早出現於 2010 年代,被視為顛覆商業世界的 The Next Big Thing。隨著這幾年聯網基礎建設的普及化,加上 5G、AI 運算技術的成熟,新一代超級物聯網逐漸成形,宣告全球進入 AIoT 智慧物聯網時代。

當萬物設備得以聯網又能智慧做出反應之後,能為現代生活帶來哪些改變?幫助企業 IT 以更高效率、更節省人力方式,全面管理辦公室設備即是一例!

全球前三大網通解決方案商 Ubiquiti Inc.(UI)看準疫情發生後,IT 團隊在管理內部聯網設備所遭遇的痛點情境,助攻 IT 人將危機化為轉機。究竟從日常工作當中,UI 怎麼培養出一群「超挑剔」的工程師?洞察使用者的深度需求,開發出令市場感到驚豔的解決方案!

打造一站式企業設備聯網管理平台,幫助 IT 釋放潛能發揮自動化價值

IT 部門對企業而言,只是處理斷網、解決設備通訊問題的救火角色嗎?事實上,數位轉型趨勢加上疫情之後遠端協作、混合辦公模式興起,IT 的價值比過往更受到重視!

UI 台灣產品設計總監楊宗樺指出,「隨著企業門禁管控、能源管理、燈具語音,越來越多設備聯網化,意謂『人機協作』更加頻繁,IT 成員的價值應該從例行維修、監測工作,升級為對整體基礎設備環境的分析、優化功能,藉此釋放人力的核心價值。」

當企業 IT 人員面臨一人多工情境,UI 的企業用安全解決方案,也就是身份即服務(IDaaS)平台,就能幫助 IT 成員基於雲端身份認證,落實企業網路保護以及各種 EoT(Enterprise of Things)設備的自動化授權管理。換言之,IT 成員可以在遠端預先做設備運作排程,並且從 UniFi OS 統一管理介面,看到各項設備的使用情境,進而重新配置資源、減少能源浪費。

如此一來,IT 成員不需每天做重複性工作,還用最少時間達成一鍵式管控情境,不用再像過去要來回切換不同設備商的管理系統,大幅提升作業效率,讓 IT 成員投入更有價值的工作。

▲透過 UniFi Identification (UID) 系統,可以整合企業內實體與 SaaS 雲端身份認證,簡單又安全地進行 IT 管控。 

UI 培育員工養成「一人公司」思維,以最挑剔的使用者角度投入開發

針對市場的痛點,不斷找出藥到病除的解方,正是 UI 追求的價值主張。由於 UI 研發總部設置台灣,許多產品從原型發想、概念確認、功能驗證、討論協商、再到進入市場,種種環節都是在台灣發生,也因此 UI 養出一批「最挑剔、不輕易妥協但又有開放思維」的生力軍。

楊宗樺解釋,「 UI 特別重視使用者體驗,每一位成員是 owner 也是 user,因此我們期待不論是産品經理或開發人員,都具備産品規劃與産品思考能力。」換言之,UI 以「一人公司」思維培育夥伴,每位成員是個人品牌的執行長,同時又能團隊合作成為全方位人才。對此,UI 部署哪些制度,讓工作氛圍保有如新創企業的車庫文化?

楊宗樺回應,一來 UI 組織扁平化,沒有繁瑣科層制度讓跨職務的溝通,產生極高效率;二來開放式辦公環境,打破部門壁壘,每項專案如蜂巢型態,彈性橫跨多個單位分工。以及最後一項最重要的「Home Lab」機制,也就是讓研發中的產品原型給員工拿回去使用、測試,以用戶角度蒐集第一手使用感受,進而更聚焦核心問題,降低研發過程的雜訊。

既然人才是企業最珍貴的資產,UI 吸納多元人才有三大方案,第一是職涯發展性,工程師不怕一年累積十年功,最怕十年都在做同一年的事,UI 眾多產品線又有完整軟硬體團隊,因此 UI 有一套「Rotation Program」讓成員「適才適所」因應興趣轉換單位。

Photo Credit:Ubiquiti Inc.
UI 任職滿一年的員工,都可以申請 Rotation Program ,到其他適合的部門擔任不同職位。

另一個讓夥伴在職場持續紮根的「Learning Program」,提供資源讓成員培養第二技術專長,或是持續深耕自身專業,甚至有導師機制,邀請同儕或外部講師藉由系統化的知識課程分享,持續開拓職涯的多元性。「在我們 UI 最常說不怕你學不夠,只怕你不學!」楊宗樺笑稱。

Photo Credit:Ubiquiti Inc.
UI Taiwan 產品設計總監楊宗樺指出, UI 以使用者體驗為中心的思維,也同樣落實到團隊的每個人身上。

隱藏在台的外商隱形冠軍,招攬樂於冒險的台灣人一起打世界盃

攤開 UI 在台發展路徑,算是產業教科書的另類「隱形冠軍」。不同於其他外商研發設計多半設置在歐美國家,台灣提供的產業分工為代工製造,UI 反其道而行,研發總部從 2010 年就設立於台灣,汲取台灣的創新能量,持續與國際團隊協作,讓市占率一路攀升到全球前三大,展現「美皮台骨」的混血特色。

「台灣研發總部原本只負責少數項目,現在已經具備一條龍流程,掌握從技術開發到產品落地,也從單純硬體到軟硬整合,隨著時間證明,台灣人才也能在世界舞台發光。」楊宗樺說。

Photo Credit:Ubiquiti Inc.
目前 UI 全球有近 1300 名員工,作為研發總部的台灣現有 553 人。

迎向萬物聯網盛世,UI 也看到 5G、AI 應用的擴展,讓聯網設備的應用型態,有了更多可能性。身為網通設備領域的領頭羊,能肯定的是,UI 會繼續展開新的産品線以及解決方案的應用廣度,顯然是一條看不到盡頭的道路。

加入 UI 近 10 年的楊宗樺,他說「在這邊深感 excited 的是看著原本只是想像的產品,經由團隊合作,能迅速在世界舞台嶄露頭角。如果你是勇於作夢,有想改變世界的使命又具備對産品的熱情,非常歡迎來大聯盟舞台,盡情展現你的才華吧。」UI 邀請有志之士聯手打造國際級網通方案,成為 AIoT 智慧物聯網時代的創造者!

了解更多 UI 企業文化與產品研發思維:
Life at UI Taiwan Facebook Life at UI Taiwan Youtube