目前分類:GAE+JQuery+Facebook(pyfacebook) (4)

瀏覽方式: 標題列表 簡短摘要

願望...

又將是新年的開始....

你的心裡有什麼願望呢?

來貼上您的心願,

大家一起願望集氣吧!

http://apps.facebook.com/fbwishtwentyten/

 


 

後記:

撰寫方式:

GAE + pyfacebook + fbjqry

GAE存data

fbjqry做effect

GAE SDK要更新到最新版,不然一直會有奇怪的error

fbjqry本身只到0.2版

撰寫時有發現一些bug

fadeIn callback等不能執行...待大德debug

架構,

資料和css是分開的,

理論上要改成什麼版都可以吧!

過兩天將 心願便利貼,

改個版型 心牆 版,

等我吧~ 寶貝,

這個程式,應該可以玩到農曆過年前吧!

快過年時,再搞個龍山寺版好了~

滿天神佛都請來加持一下,

肯定心願會實現的!

哈!!!!!!

 


 

2009.1227

BUG:

IE6-IE8無法執行

FF fadeOut有時會失敗

 


 

2009.1228

debug:

ie可運行

BUG:

1.有時得到JSON DATA後,<--原因出自JSON data產生太慢,因為 getinfo這個api有時會等太久或失敗

轉換為網路原件很久

2.IE 更久..

3.CLICK MSG.val('')

4.CPU時間要想想如何減低...(要用memchche)

5.click should link to personal page.

6.js中文轉換亂碼

7.缺NOTIFICATION

8.自動轉址要用fb:redirect才正常

DEBUG:

3,5,6

2009.1230

想方設法於首頁改用FBML來減低gae的CPU TIME等待過久的問題

wolkesau 發表在 痞客邦 PIXNET 留言(1) 人氣()

JQuery時間

將!! 將!!

麻煩的事情來了,

因為Facebook的架構,

如果想在FBML下引用JQuery,

FBML會更改所有javascript的code來符合其規範,

而JQuery是很明顯的更改不動,

所以要用JQuery在FBML下似乎是不可能的事情,

看樣子只能用JQuery在iframe下了,

but...

我實在是不想放FBML已經做好的許多語法啊!!!!

天啊!! 自古忠孝難兩全!!

幸好,網路總是有神人,

又有一個FBJS的API可供使用

fbjqry

http://code.google.com/p/fbjqry/

http://apps.facebook.com/fbjqry_demo

目前只到0.2版,不過對於已熟悉JQuery開發Ajax環境已是天大的福音。

現在來實做一下如何插入JQuery在fbjqry(FBML)下吧!

下載fbjqry後有兩個檔案放在目錄下

FBjqRY.min.js

Utility.js

修改一下 app.yaml或是修改main.py

讓browser可以呼叫到這兩個檔案

加一下,下列這段,並把WSGIApplication改為('/', FBJS),


class FBJS(webapp.RequestHandler):
    def get(self):
        pass
    def post(self):
        self.response.out.write(template.render('FBJS.html',0))

新增FBJS.html

內容如下:


<script src="http://..外網IP或GAE的位址/Utility.js"></script>
<script src="http://..外網IP或GAE的位址/FBjqRY.min.js"></script>
<script>
function change()
{
$('div').css('border', '1px solid');
$('#aa').text('yes');
$('div').fadeIn(1000);

}

$('#cc').click(function(event){change();})
</script>

<fb:name uid="loggedinuser" />
<div id="dd" style="display:none" >Hello FBJS</div>
<div id="aa">Hello Faa</div>

<input id="cc" type=button value="press" / >
將! 將!!

當你按下 press 後, 就會跟著改變,或是動作了,一切就和JQuery一樣....

那就下課啦........

啊!!!...(抬下同學要喊不喊的聲音)....老師....

啊~~~ 還是被發現了..

是的,

示範完了CSS Effects Events,那Ajax呢??

這可是JQuery最重要的精神呢!!

嗯,啊~ 這個~ 那個~

因為fbjqry目前只到0.2版,所以...在code.google.com/fbjqry上有明寫著

目前只提供了

CSS

Chainiong

Effects

Events

所以$.ajax 就還沒支援囉!!(學一下阿六仔,弱弱的問一下什麼時候會有啊)~~啊災~~

 

不過這部份,目前還是可以用FBJS 既有的AJAX 物件來做,雖然不連貫了...(哭)

新增main.py

class msg(webapp.RequestHandler):
    def post(self):#facebook只有post方法喔
        self.response.out.write(u'聽說 聽說很好看')

WSGI多一個參數 ('/msg',msg)

修改一下FBJS.html內容如下:


<script src="http://..外網IP或GAE的位址/Utility.js"></script>
<script src="http://..外網IP或GAE的位址/FBjqRY.min.js"></script>
<script>
function change()
{

var ajax =new Ajax();

ajax.responseType=Ajax.RAW;//資料格式有3種,請參閱Facebook與FunP應用程式設計
ajax.ondone=function(data){$('#aa').text(data);};//AJAX成功後所做的事項

 

ajax.post('http://..外網IP或GAE的位址/msg')//下此命令便會實際運行了, 這個詐看之下有問題的url,你在打這行時,心裡一定毛毛的吧,想說這不是跨網域了嗎? 抓不到資料吧!! Wolke不要亂教好嗎??? 這...請容在下在下面解釋一番..

}

$('#cc').click(function(event){change();})
</script>

<fb:name uid="loggedinuser" />
<div id="dd" style="display:none" >Hello FBJS</div>
<div id="aa">Hello Faa</div>
<input type=button value="press" / >

FBML

運做方式為 user(browser)->Facebook->Server->Facebook->user(browser)

詐看之下有問題的,一般來說是在user端執行的javascript,

AJAX.post指令巧妙的被Facebook給包裝起來,

所以AJAX.post真正運行的地方是在Facebook伺服器上,而不是在你的browser上啊!!!

最後按一下press吧~
將! 將!!
Ajax被實作出來囉~

wolkesau 發表在 痞客邦 PIXNET 留言(3) 人氣()

將 將 FBML 上場!!

將main.py修改一下

內容如下
# -*- coding: utf-8 -*-


import cgi
import sys, os
import wsgiref.handlers


from google.appengine.ext import webapp
from google.appengine.ext.webapp import template
import facebook
from facebook import FacebookError


FACEBOOK_API_KEY = 'key'
FACEBOOK_SECRET_KEY = 'key'
_DEBUG = True


class MainPage(webapp.RequestHandler):

    #def get(self):
    def post(self):#因為facebook的server用的是post,所以要改喔不然會錯誤

        self.response.out.write('hello post<fb:name uid="loggedinuser"/>')


        fb = facebook.Facebook(FACEBOOK_API_KEY, FACEBOOK_SECRET_KEY)
        if fb.check_session(self.request) and fb.added:
            pass
        else:
            url = fb.get_add_url()
            self.response.out.write('<script language="javascript">top.location.href="' + url + '"</script>')
            return
        friend_ids = fb.friends.get()
        friend_ids.append(fb.uid)
        
        info = fb.users.getInfo(friend_ids, ['name', 'pic_square', 'uid'])
        template_values={}
        template_values={'info': info}
        for i in info:
            self.response.out.write('<fb:name uid=%s>' % (i['uid']))


def main():
    application = webapp.WSGIApplication([('/',Mainpage)],debug=_DEBUG)
    wsgiref.handlers.CGIHandler().run(application)
    
if __name__ == "__main__":
    main()

記得在facebook developer 設定成FBML

將 將 

又出來啦!!!!

 

 


後記:

相關討論,請參考

Taipei GTUG

http://groups.google.com/group/taipei-gtug?hl=zh-TW

另感謝clay0529大的指導

wolkesau 發表在 痞客邦 PIXNET 留言(2) 人氣()

想要研究一下這一塊,發現中文網頁,竟然沒什麼相關資料,

可能是阿共仔屏蔽了Facebook吧!!

那好,我就把我目前就研究到此的作法和心得寫一寫,

以免後進走太多冤妄路,

想要撰寫我標題所說的Facebook +JQuery+ GAE

你必需具備:

HTML基礎

Python基礎 

Google帳號和已認證的可用的GAE帳號

GAE的架構

上述可參考上官林傑的 Google應用服務引擎開發實戰Google應用服務引擎開發實戰

http://www.books.com.tw/exep/prod/booksfile.php?item=0010443092

Facebook的架構

FBML,FBJS的撰寫

這邊可參考 賽大的 Facebook與funP應用程式設計Facebook與funP應用程式設計

http://www.books.com.tw/exep/prod/booksfile.php?item=0010445951

PS:這本用的是Facebook自行開發的PHP API,和我們要用的pyfacebook不同,

不過除了部份API不支援,其實大部份都是相通的,盡請安心服用。

 

Javascript基礎(初章暫不需)

Javascript書很多,本人推薦 JavaScript私房書 JavaScript私房書 <光碟1片 >

http://www.books.com.tw/exep/prod/booksfile.php?item=0010294368

JQuery基礎(初章暫不需)

我找不到覺得優的書,所以我都只直看網站的turtuial,不過歡迎大家推薦一下

 

IP分享器映射http port至你的電腦

各家分享器做法不同,請參考你的說明書

 


 

 

ok 重點來了..

本初章先將焦點放在如何在GAE上運行pyfacebook進而開發facebook的application

Pyfacebook基礎,網路神人團所撰寫的pyfacebook 用python撰寫的可以和facebook 溝通的Server端API可供GAE使用開發

pyfacebook:

http://github.com/sciyoshi/pyfacebook/

 

1.首先將 pyfacebook下載解壓後,存至gae目錄下

2.在pyfacebook目錄裡建置app.yaml

內容如下:

application: whatever

version: 1

runtime: python

api_version: 1

handlers:

- url: .*

   script:main.py

 

主檔main.py

內容如下


# -*- coding: utf-8 -*-


import cgi
import sys, os
import wsgiref.handlers

from google.appengine.ext import webapp
from google.appengine.ext.webapp import template
import facebook
from facebook import FacebookError

FACEBOOK_API_KEY = '你的key' #如何申請請自行參閱,不詳述囉
FACEBOOK_SECRET_KEY = '你的key'
_DEBUG = True


class MainPage(webapp.RequestHandler):
    def get(self):
    #def post(self):
        fb = facebook.Facebook(FACEBOOK_API_KEY, FACEBOOK_SECRET_KEY)
        if fb.check_session(self.request) and fb.added:
            pass
        else:
            url = fb.get_add_url()
            self.response.out.write('<script language="javascript">top.location.href="' + url + '"</script>')
            return


    #get friend list begin
         friend_ids = fb.friends.get()
         friend_ids.append(fb.uid)
        
         info = fb.users.getInfo(friend_ids, ['name', 'pic_square', 'uid'])
         template_values={}
         template_values={'info': info}
    #get friend list end

        for i in info:

            self.response.out.write('<img src='+i['pic_square']+' />'+i['name']+'<br />')


def main():
    application = webapp.WSGIApplication([('/',Mainpage)],debug=_DEBUG)
    wsgiref.handlers.CGIHandler().run(application)
    
if __name__ == "__main__":
    main()

 

執行一下你的dev_appserver.py --address=映射好的內納IP --port=80 demos/pyfacebook

(其實你也可以直接下appcfg.py上傳你的程式至GAE上,不過這樣初期開發會增加很時間成本)

 

設定你的facebook developer 你的應用程式

將Canvas URL:設定為你的外網IP(或是GAE的應用程式網址)

 

運行一下:

http://apps.facebook.com/gae_cloud/
(請輸入你的facebook app 網址)

將 將!!!

你就會看到你的朋友列表了

 

預告:目前是使用iframe的方式,

第二節來說一下FBML好了

wolkesau 發表在 痞客邦 PIXNET 留言(1) 人氣()