English version
註意：由於在2013年內 fbtopdf.com 並無人使用，網站已經關閉
今年 (2013) 年初過年放假時，學習如何使用 Facebook SDK (程式開發套件) 來存取 Facebook 的資料數據，發現自已常用在 Facebook 所做的不同動作 (包括發佈文字、相片、短片、連結、打卡、讚好、評論)，都可以用 Graph API 取出，忽發奇想把我自已的 timeline 印製成為 PDF 檔案，然後可以在打印機打印出來，我在 Facebook 觀看自已的 timeline 如下圖示：
結果我建構了一個網頁(fbtopdf.com)來完成這個想法：
整個系統建構過程我視之為完整的 Facebook SDK 學習實驗，步驟如下：
select name from user where uid=me()
所得到的結果是以 JSON 型式傳送 (JSON 是與 Javascript Object 語法相同)，數據如下：
{
"data": [
{
"name": "Simon Ho"
}
]
}
PdfDocument doc = new PdfDocument();
PdfPage page = doc.AddPage();
XGraphics gfx = XGraphics.FromPdfPage(page);
gfx.DrawString("Hello", ...);
-------------------
各位如果對本網誌有興趣的話，請在畫面右邊成為追蹤者，日後有新網誌時 Blogger.com 會自動通知，多謝支持（聲明：電郵由系統發出，電郵地址不會給予及不經作者）
Note: Due to fbtopdf.com no people use in the year 2013, this site has been closed
Beginning of this year (2013) , when I was learning how to use Facebook SDK to access Facebook's internal information. I found that whenever I performed different actions on Facebook (post text, photos, videos, share links, make likes, comments on friend's wall). All can be retrieved using Graph API. So I have an idea to make a website let Facebook users to convert their own Timeline webpage to PDF file. Which can then be printed out on the printer for hardcopy purpose. My Facebook Timeline webpage as shown below:
The development cycle of fbtopdf.com are as follows:
select name from user where uid=me()
Facebook responses the result in form of JSON (Javascript object). The result value as below:
{
"data": [
{
"name": "Simon Ho"
}
]
}
PdfDocument doc = new PdfDocument();
PdfPage page = doc.AddPage();
XGraphics gfx = XGraphics.FromPdfPage(page);
gfx.DrawString("Hello", ...);
註意：由於在2013年內 fbtopdf.com 並無人使用，網站已經關閉
今年 (2013) 年初過年放假時，學習如何使用 Facebook SDK (程式開發套件) 來存取 Facebook 的資料數據，發現自已常用在 Facebook 所做的不同動作 (包括發佈文字、相片、短片、連結、打卡、讚好、評論)，都可以用 Graph API 取出，忽發奇想把我自已的 timeline 印製成為 PDF 檔案，然後可以在打印機打印出來，我在 Facebook 觀看自已的 timeline 如下圖示：
* 一般 facebook timeline 網頁
結果我建構了一個網頁(fbtopdf.com)來完成這個想法：
* 整個由facebook 變成 PDF 過程示範
整個系統建構過程我視之為完整的 Facebook SDK 學習實驗，步驟如下：
1. 建立 Facebook App :
跟據 Facebook Graph API 所述，首先要建立一個 Facebook App，從而穫得 App Id，其間看到 Facebook 內部的私隱權限需知，從而知道 Facebook 的對於私隱之重視和結構之複雜，也可以作為自已將來創作系統時仿效。2. 學習 FQL :
要在程式取得 Facebook 的內部數據，可以透過 Facebook Query Language FQL (類似SQL) 的語法，例如想要取得自已的名字，可用：select name from user where uid=me()
所得到的結果是以 JSON 型式傳送 (JSON 是與 Javascript Object 語法相同)，數據如下：
{
"data": [
{
"name": "Simon Ho"
}
]
}
3. 創作使用者介面 (Frontend)
我剛學習了 jQuery Animation，深受它所造到的效果吸引，而且容易使用，所以大量應用在 fbtopdf.com 中。當大家進入網頁後，你會發現一個畫面完成與下一個畫面之間，是不需要跳頁 (page refresh) 的，而是用流暢的畫面變動取而代之，這就是 jQuery animate 的效果，也配合新興的 Single Page App (SPA) 的網頁設計。4. 建構自已 Web Server
由於 fbtopdf.com 是一個網站程式 (Web App)，背後需要網頁伺服器，我選擇了 Microsoft 的 IIS，這是考慮到：當我取得了 Facebook 數據後，如果把它變成 PDF？幾年前我創作了一套 DigiPrint 打印軟件，有過經驗怎樣把數據變成影像 (就是使用 .Net 的 GDI+)，自然今次要運行 ASP.Net，IIS 是唯一選擇。致於開發環境，我選用了免費的 Visual Studio 2012 Express，在 Windows 8 中執行，而資料庫伺服器是 SQL Server 2012 Express。5. 在 ASP.Net 進入 Facebook API
要在 ASP.Net 直接進入 Facebook API，是需要一套程式套件，我在網上搜尋到一套 Facebook SDK for Web Developers。有一點要留意，一定要 .Net Framework 4.0 或以上，因為它需要用 dynamic 語法 (.Net 3.5 或以前是無有的)。有了這套套件，就可以發出 FQL 指令和取得結果，它又會自動把 JSON 以 dynamic 可供直接使用，繼而我就可以把它變成影像。6. 把影像變成 PDF
在 .Net 環境下，不難找到 PDF 這類的 SDK，我選擇了 PDFsharp，它是免費的，而且它與 GDI+ 非常接近，所以很快便上手。例如想要在 PDF 印上 Hello：PdfDocument doc = new PdfDocument();
PdfPage page = doc.AddPage();
XGraphics gfx = XGraphics.FromPdfPage(page);
gfx.DrawString("Hello", ...);
7. 把 PDF 成品送到 User 手
在 fbtopdf.com 中最後需要使用者輸入電郵，這是因為當 PDF 在伺服器產生後，需要透過電郵把 PDF 的連結自動傳送到使用者手中。但正如現在 fbtopdf.com 所見，未輸入電郵前，它會即時在畫面中產生擷頁式預覽版 (預覽版的是低像素)，如輸入電郵後，傳送的 PDF 是高像素。8. 保障使用者私隱
在建立 fbtopdf.com 網站時，為了保護由 Facebook 與 fbtopdf.com 伺服器之間的傳取數據，我加入了 128-bits SSL加密，整個 PDF 產生過程又不經人手 (包括我)，而且 PDF 會在一天後自動刪除，再加上要通過 Facebook 的內部私隱權限設定，必定可以保障使用者私人資料。-------------------
各位如果對本網誌有興趣的話，請在畫面右邊成為追蹤者，日後有新網誌時 Blogger.com 會自動通知，多謝支持（聲明：電郵由系統發出，電郵地址不會給予及不經作者）
Beginning of this year (2013) , when I was learning how to use Facebook SDK to access Facebook's internal information. I found that whenever I performed different actions on Facebook (post text, photos, videos, share links, make likes, comments on friend's wall). All can be retrieved using Graph API. So I have an idea to make a website let Facebook users to convert their own Timeline webpage to PDF file. Which can then be printed out on the printer for hardcopy purpose. My Facebook Timeline webpage as shown below:
* My Facebook Timeline webpage
Finally, I finished the website (fbtopdf.com) as below:
* Steps-by-steps demo for converting Timeline into PDF via fbtopdf.com
The development cycle of fbtopdf.com are as follows:
1. Build a Facebook App
According to the Facebook Graph API documentation, first thing to do is to create a Facebook App. Thus I can obtain an App Id. During the process, I can see the sophicated Facebook's privacy settings and how they built the structural. That helps me for future projects.2. Retrieve Facebook data via FQL
Facebook allows software developer to retrieve theirs internal data via Facebook Query Language FQL (something like SQL) instruction. For instance, if I going to retrieve my full name, I will issue below FQL statement:select name from user where uid=me()
Facebook responses the result in form of JSON (Javascript object). The result value as below:
{
"data": [
{
"name": "Simon Ho"
}
]
}
3. Design web frontend interface
I was learnt jQuery Animation. It is really an amazing package and very easy to use. So I applied it in fbtopdf.com heavily. In addition, today web developers talking about so hot topic: Single Page App (SPA). I have had adapted it as well. You can try it out in fbtopdf.com. When you enter the website. You may discover that there has no page-refresh in between page to page. I replaced it by animation. That is jQuery animation without pages change.4. Build the web server
Every website requires web server. I have chosen Microsoft IIS. My consideration is how to render PDF when I got Facebook data? In my experience, I have developed a printing software package DigiPrint in several years ago. I knew how to use GDI+ for rendering data into images in .Net environment. So I do it in same way in this project.5. Framework for Facebook API in .Net
In order to issue FQL statement from C#, I used Facebook SDK for Web Developers. (Note that it requires .Net Framework 4.0 or above. It is because it uses "dynamic" keyword. Dynamic keyword appeared on .net 4 or above). All Facebook results will be converted to dynamic data. Dynamic data is equivalent to C# object properties automatically. So that I can access the FQL results and render it into image.6. Convert images to PDF
In .net, there has lot of frameworks for this purpose. I used PDFsharp. It is not only a free package, but also very similar to GDI+ syntax. For instance, to print a "Hello" on PDF, the codes will be:PdfDocument doc = new PdfDocument();
PdfPage page = doc.AddPage();
XGraphics gfx = XGraphics.FromPdfPage(page);
gfx.DrawString("Hello", ...);
留言