2012年7月23日 星期一
2012年6月22日 星期五
Facebook Developer App (2)
上次已經學會利用example.php與Facebook連線顯示出個人基本資料，這次我們要來試著修改example.php檔案，讓應用程式能夠顯示出我們個人的好友列表。
1. 用適當的軟體開啟php_sdk3àexamples資料夾下的example.php檔案準備進行編輯
2.開啟後在下圖中這一段程式碼內加入紅框內這一段，這一段程式碼主是要透過Facebook API與FQL語法來向Facebook取得所登入帳號的好友列表，什麼是FQL呢，簡單來說就是Facebook專用的資料庫語法，其實與SQL滿像的
3. 接著就是要把上一步驟中取出來的個人好友資料顯示在網頁上囉，先找到下圖中的程式片段，將紅框內的兩行程式加入，存檔即可
4. 接著就跟我們先前介紹的連線方法一樣，利用FTP軟體將example.php檔案上傳至我們個人的網路空間，之後輸入網址即可看到結果，如下圖，在我們個人基本資料後就顯示了好友名單，大家試試看囉
2012年6月20日 星期三
Facebook Developer App
1. 若不清楚Facebook開發人員的網址，最簡單的方法就是登入自己的Facebook後，捲動滑鼠到最下面，就可以找到紅框內開發人員的連結，點下去
2. 進入Facebook開發人員頁面後，點選紅框內的應用程式
3. 因為目前我們沒有建立過任何Facebook應用程式，所以就直接點選建立新的應用程式
4. 此時會跳出一個視窗要求我們輸入應用程式的名稱，在這裡請先為自己要建立的應用程式取個名字，另外應用程式名稱空間並不是非必要填寫欄位，在此我們不作填寫，接著按繼續
5. 進行安全驗證，努力的看懂紅框內的內容，輸入在文字方塊中，按下確認
6. 接著我們會得到屬於這個應用程式的ID及Secret碼，並且要進一步填寫應用程式相關資料
7. 在這裡最重要的兩個欄位就是網站及Facebook上的App這兩個欄位，如紅框裡所示，我們必需填上我們自己的網址，Facebook本身並沒有提供空間讓我們放開發好的程式碼，因此若是我們自己架好伺服器在自己申請的固定IP、浮動IP或是公司行號的網域名稱下，我們就可以直接將IP或是公司行號的網域，在此假設我們都沒有上述空間，此時就必需自己去網路上找免費的網路空間來申請，因為Facebook的API其中一種方法是以PHP程式來取得聯繫，因此我們申請的免費空間也是找支援PHP及MySQL的，在此是選擇http://www.000webhost.com/平台來申請。在這邊要注意，Canvas網址的部份在最後面要加上一個?，填好後就按下儲存，
至於如何在http://www.000webhost.com/ 平台上進行申請，可以參考
http://learningorz.blogspot.com/2012/04/wordpress-332.html
8. 完成後就必須等待Facebook的驗證囉，官方說法是幾分鐘，但實際上可能要等上一天，所以接下來要測試寫好的應用程式時，出問題的話就極有可能是驗證還沒通過喔
9. 趁著等待驗證的時間，我們先來準備其他部份，首先為了讓應用程式能夠與Facebook進行聯繫，第一步當然就是要會架設Apache + PHP，但是這一步因為我們是使用000webhost免費空間，本身就已經幫我們架設好了，所以這一步就免了，再來就是需要去下載php_sdk3，這是目前最新版的Facebook API認證的方法，不需要像以前需要許多步驟才能取得授權，要下載php_sdk3請連結以下網址
https://github.com/facebook/php-sdk/downloads
直接點選Download as zip進行下載
10. 下載完後請進行解壓縮，並把資料夾名稱改成php_sdk3，資料夾結構如下圖
11. 接著我們先針對php_sdk3àexamples資料夾下的example.php檔案進行修改
12. 用我們自己熟悉的程式打開example.php檔案，找到下圖的這一段程式碼，把我們前面得到的appID及secret碼填上，然後自己加上紅框內的這一行程式碼，記得存檔
13. 接著用FTP軟體把php_sdk3資料夾上傳至我們申請的000webhost網域的public_html資料夾底下，如何上傳請參考
http://learningorz.blogspot.com/2012/04/wordpress-332_2282.html
14. 上傳後接著就是要來測試了，在此假設我們都已經將Facebook登出，此時在瀏覽器網址處打入我們所申請的網址/php_sdk3/examples/example.php，如下圖，xlearning.comeze.com請換成自己所申請的網域名稱
15. 連結成功的話會看到以下畫面，接著點選紅框內的連結
16. 由於我們尚未登入Facebook，所以在此會要求我們輸入帳號密碼，然後按登入
17. 這時會詢問我們是否要前往此應用程式，RTestAPP就是我們自己申請要建立的應用程式，當然是要前往囉，按下去吧
18. 若能看到以下畫面表示成功囉，以下畫面表示我們可以讀取到剛剛登入的使用者帳號的基本資料，當然要讀取到什麼資料就視我們所寫的程式碼而定囉，在此只做最基本示範
2012年5月22日 星期二
PDF-XChange Viewer 教學
一般我們想要瀏覽PDF的檔案，大都是利用Adobe的PDF Reader這一款免費的軟體，但是Adobe PDF Reader的缺點就是檔案容量很大，並且沒有辦法讓我們在PDF文件註記 (使用專業版的不包含在此討論)，這一點對於時常需要閱讀PDF文件人是很不方便的一件事，因此在這裡介紹一套免費的PDF閱讀器，PDF-XChange Viewer，這是一款免費的PDF閱讀器，檔案容量比Adobe的小很多，因此開啟PDF檔案的速度當然也比較快速，相較而言比較不佔電腦資源，重點是還可以讓我們在PDF文件上註記並儲存，下面就來介紹如何下載並安裝這一款軟體。
1. 連到PDF-XChange Viewer的官方網站進行安裝程式下載，http://www.tracker-software.com/product/pdf-xchange-viewer，連到官網後可以看到右邊有許多下載的選項，選擇第一個ZIP Installer即可，點選Download Now
2. 接著會跳出另存新檔的視窗，把檔案存下來
3. 下載完成後進行解壓縮，檔案沒問題的話會看到壓縮檔內有三個檔案
4. 點選PDFXVwer.exe檔案進行安裝，選擇語系，按下確定
5. 準備開始安裝設定，下一步
6. 閱讀相關合約，勾選我同意，下一步
7. 選擇檔案安裝路徑，下一步
8. 設定所需要安裝的原件，在這裡選擇完整安裝，完整安裝至少須要17.2MB的空間，下一步
9. 設定開始功能表中的捷徑位置，下一步
10. 設定是否要在桌面建立圖示，以及是否要將電腦裡面的PDF檔案的預設開啟程式設定為PDF-XChange Viewer，下一步
11. 進行註冊，由於我們是使用免費版本，所以不用填寫資料，下一步
12. 確定都沒有問題後，按下安裝
13. 安裝中…
14. 安裝完成，按下完成按鈕會直接啟動PDF-XChange Viewer程式
15. 看到此畫面表示安裝成功
2012年5月17日 星期四
Google MIT App Inventor使用教學
App Inventor 原是Google實驗室（Google Lab）的一個子計畫，在2012年1月1日移交給麻省理工學院行動學習中心，並已於3月4日以MIT App Inventor名稱公佈使用，所以當我們在Google上搜索App Inventor時，出現MIT App Inventor，別懷疑，這就是我們要的內容。
1. 連結至MIT App Inventor網站
2. 進入後點選紅框內的連結準備開始使用
3. 雖然Google是交給MIT來開發，但是帳號還是使用Google的，所以在使用前我們必須先擁有一個Google帳號，若沒有的話請先自行申請，在此由於我們已經擁有Google帳號，所以網頁會請我們選擇一個要使用的Google帳號，選則好後就按下Allow
4. 稍等一會就進入了App Inventor的使用畫面了，基本這也是一個Web Application的應用，所有程式開發的動作都可以透過瀏覽器完成，由於第一次使用並沒有建立過任何App，所以就先點選紅框內的New來新增一個App
5. 首先填入App的名稱，在此填入TestApp，按下OK
6. 接著就可以看到我們新增的App專案了，點選紅框內的選項就準備進入開發介面囉
7. 等了一下開發介面就出現了，基本的內容有左邊紅框內的各種元件，以及中間紅框內的螢幕空間，讓我們可以將需要的元件從左邊紅框內拖至中間螢幕空間內
8. 在此我們從左邊拖曳Button及Label兩個元件至中間螢幕空間內，完成後會看到右邊Components的紅框內多出了我們剛剛拖曳的兩個元件，假設我們已經將App所需要的元件配至好了，接著就是要來編輯每個元件的功能，按下右上角紅框內的按鈕準備進入編輯介面
9. 按下按鈕後，系統會先請我們下載一個Java元件，我們就將檔案進行存檔
10. 檔案下載完後就執行它
11. 可能會遇到作業系統防火牆阻擋，就按下允許存取的按鈕
12. 由於我們並沒有安裝任何Android的模擬器，所以在此我們就按取消
13. 出現Error沒關係，按下OK繼續動作
14. 此時會跳出一個獨立的視窗讓我們作業
15. 首先我們先點選My Blocks，此時下面會出現我們剛剛所使用到元件，Button1與Label1
16. 接著我們點選Button1，右邊會出許多Button1可以執行的動作，我們點選第一個，也就是Button1被按下時會觸發的動作
17. 選擇好後會出現如下圖的畫面
18. 接著我們要選擇Label1的動作，一樣點選Label1後右邊會現Label1可以執行的動作，點選set
Label1.text to這個動作，就表示要將原本Label1中所顯示的字串Label1改成別的字串
19. 同樣的，選擇好後會出現如下圖讀畫面，此時有兩個向拼圖的元件在畫面上
20. 既然是像拼圖，那我們就把這兩個拼在一起吧，拼在一起後會像下圖所示
21. 接著我們點選Built-In的頁籤，然後點選Text選項，會出現Text可以使用的動作，我們點選第一個，準備要來修改Label1 Text的內容
22. 一樣將text元件跟剛剛Button及Label的元件拼在一起，如下圖所示
23. 接著點紅框內的內容準備來作修改
24. 將文字內容改成Hellp App
World，這樣就完成了簡單的應用程式，從拼圖的結果來看，我們這個應用程式就是，當我們按下Button1時，會去Set Label1的Text內容，Text內容就會被改變成Hello
App World，是不是很簡單呢，不用寫任何程式碼就可以完成一個Android App
25. 完成後要準備來下載App，先回到原本的畫面，如下圖，點選右上角紅框內的按鈕，然後選擇Download to this Computer
26. 再來當然就是把我們開發好的App存在電腦內囉，存好後請自行將App上傳至Android系統的智慧型手機內
27. 要在手機上安裝我們自己開發的App，首先要進行安全設定，因為我們的App並不是從Google Play上直接下載的，先打開手機的設定頁面，點選紅框內的選項
28. 然後將未知的來源這個項目打勾，表示我們允許安裝非Google Play下載來的App
29. 再來當然就是安裝我們寫好的App囉，點選安裝
30. 安裝好後就開啟來看看吧
31. 畫面是不是跟我們剛剛編排的一樣呢，按下Button1來看看
32. 瞧，Label1的Text是不是變成Hello App World了，這樣就表示我們的第一個Android App成功囉
訂閱：
文章 (Atom)