2015年12月29日 星期二

Parse CloudCode實作----產生條件限制的coedgenerator

需要依照規則去產生不同的變數例如前幾碼是國家代碼、前幾碼是期限代碼、後幾碼是亂數、最後再以規則重組,有一個加密的概念
現在先講一般產生代碼的方法
因為這個是給我們公司自己內部使用,所以介面很簡易

首先必須先限制好是我們公司內部的人才可以使用,所以一定要先login,這部分我也是都用boostarp的樣式,好看又簡易


登入之後,會有兩個選項,第一個是直接產生,第二個是另外的passbook等等再說

go之後

接下來填入資料就可以產生需要的代碼,這些都會產生到你的table中存起來
這個部分我是先建立很多不同的資料庫,例如年份一個資料庫、種類一個、國家一個,再將每個table都query,將input的內容一個一個去對應,找到之後儲存起來,在redeem.ejs的頁面顯示出來。所以這些我是在app.get裡面做的

一開始要先判斷數量,如果超過500的話就不能產生,會將訊行這個變數傳到wrong這個頁面,就會顯示出來。
還有我們產生代碼後會有幾個位數的亂數,我們會利用crypto模組來產生

這樣就可以產生16位數的亂碼,等一下組合代碼的時候會使用


然後再開始準備做query,由於redeem code一次會產生很多筆,所以我一開始先初始化一個list,用push的方式一個一個堆上去

接下來這邊就是nested query了,把每個table相對應的代碼都拿出來,最後組合起來變成變數title
接下來就是要產生完整的代碼加亂數的redeem code,並且利用重組的方式去產生revised的代碼,剛產生的時候啟用次數為0,定好之後要儲存到table中
randonValueHex()就次crypto中產生亂碼的method




Parse CloudCode實作----backgroundjob和geopoint

parse有提供內建的geopoint,再結合上google map api 所給的轉換function,我們可以將所有地址資料轉換成經緯度。
這個project呢,我們先搜集了高雄的公私立醫療診所的所有資料(包括電話、地址、名稱)
可以是json或是csv檔,但要先確認是不是亂碼喔

第一個目標是將這些全部上傳到table後,用cloudcod去處理,讓全部都產生經緯度。
第二個目標是,因為有request數量限制(好像是一秒30個之類的,反正log會顯示超過),所以要利用background job來做,才不會超過request。

遇見的困難有:
第一:google api使用
第二:backgroundjob呼叫的注意事項(傳的參數)
第三:遇到無法辨別的就卡住(後來設90,90)
第四:怎麼看log
首先我們要先將檔案上傳到parse 的table,先到parse自己project的部分,側邊欄有一個



將檔案選進去之後,他會先檢查你格式是不是json或csv,然後就會開始上傳





ok!資料上傳成功!
再來要開始處理資料了
到 https://developers.google.com/maps/web/?hl=zh-tw

這邊有很多可以使用的部分,因為我們是自己處理資料用的,所以我們要申請的server的api,按下取得金鑰之後

接下來就要開始註冊了

先幫自己的專案取個名字


這邊參照的網址可以填入你在parse設定的host name,我沒有試過沒填,但照他的意思應該是可以啦~


在這邊我們取用server的,等等再include的時候會用到。
申請好了之後接下來https://developers.google.com/maps/documentation/geocoding/intro?hl=zh-tw
裡面有詳細解說,我這邊只會講使用,有興趣的人再去看~

include進來之後,我們現在就開始使用他的語法,由於處理資料是server,我們要把程式碼放在js中,我是放在main.js裡面

本來想利用query的概念將每筆資料做處理,如此可以一筆一筆都讀到。
於是回傳的就是座標了!可以利用parse object的set去儲存到table中,可是在這邊我們雖然可以順利的把一筆資料轉成座標,卻沒辦法將所有的都產生玩,原因就在於我們超過Parsez負載的reauest量,唯一的解決辦法就是把這個function寫成backgroudjob,隔一段時間執行隔一段時間再執行,在Parse的官方網站有關於backgroundjob的細節可以自己看,我只把使用方方寫出來
第一步:先把function內容全部定義成cloud function
第二步:用backgroundjob呼叫這個cloud function
第三步:在parse的網站中設定多久跑一次這個background job


第一先把上面的這些包進去這個裡面
定義成一個cloud function

第二步再定義成backgroudjob


注意ㄛ~有request、response這種的你都一叫得回傳給他一個答案(成功或是失敗),不然是沒辦法跑的喔


第三,我們到parse裡面,去設定job


然後開始設定開始跟重複的時間,名字就是我們剛剛在定義cloud job的時候給的名字,我自己是設定一分鐘一次,這樣隔天來上班可能就差不多好了
成功!接下來就去吃個飯回來之後看一下log

結果卡住了!!!!!跑到一個之後就不在跑了!!!發現原因是因味那個地址是錯的,永遠找不到,所以表示轉換的時候status沒有回傳ok,那我們就多放一個else,當不是ok的時候就將它得座標設為(90,90),這樣到時候就很方便看哪些地址有誤了。



Parse CloudCode實作 ----redeemcode

這是一個輸入code之後,去利用parse query來對照次數的網站,有三個重點:
第一:怎麼去對parse table做query
第二:怎麼利用登入未登入來判斷顯示內容
第三:使用bootsrap的style

首先在主頁的部分就要你登入



再登入的部分有一些細節的小功能,向這邊輸入的欄位中就可以看到有淺淺灰色的提示字,輸入的時候表格還會發光,靠近sign in button的時候會變成別的顏色,這些小小的卻可以讓網頁看起來就不是單純的 input text box!!!!!!!!!
但這些都不是我做的,是boostrap哈哈哈哈
只要去官網就可以下載他們所有的樣式,下載回來之後在include到自己的layout就可以了


接下來就是登入未登入的問題了,因為這個網站是強制要登入才可以進到下一階段的redeem code,所以要判斷current user有沒有登入,可以利用parse.currentuser()

像我這邊就是設在主頁,有登入的話才能顯示redeem code的button,或者是你也可以設在require-user.js中

接下來最重要就是query了!

在Parse Cloud anyimage程式架構(二)--- 程式碼講解中有提到query的步驟https://parse.com/docs/js/api/classes/Parse.Query.html
這邊都有詳細的api可以看ㄛ

Parse CloudCode實作----長沙海報展覽+RWD

公司和長沙海報展做合作,我將海報資料介紹做成一個網站,理念跟上一篇介紹的一樣,適用anyimg做的延伸

首先第一個是home.ejs,延伸了anyimg的觀念,將table中的圖片抓取出來並且顯示,以四個為一單位,做響應式的網頁設計
其實現在有很多library都有支援responsive,responsive就是可以針對使用者所持的裝置來改變網頁的顯示結構,因為有人用手機有人用平板,不能顯示的圖片都一樣大小,那拿手機的人要看啥.......所以這個設計很方便很實用,因為現在更多人拿手機來看網頁了。

在這裡我們使用的是boostrap的grid template

首先第一步我們要先將bootstrap的語法include進來,在這邊我習慣將需要include的library都放在layout,因為layout功能單純,比較不會搞混。
需要的有這些,include之後,我們就可以使用boostrap分配欄位的方法
基本的概念是這樣的,boosttrap將頁面的寬度分為12個欄位,如果想要將頁面全部佔滿,那我們就把這個div佔成12column,如果只想顯示出來佔頁面的一半就是佔6column,以此類推,
  • 一列的總和需為 12 欄!!!!
下列這行為範例



col-sm-12這列表示小裝置,所以只要手機是最小裝置的bar,就會是滿版
col-xs-12中的 col-lg-12是最大的電腦,這些相關對應的裝置大小可以去boostrap的官方網站,那裡講解的很詳細也有很多練習實做的部分。


就像畫廊一樣,主頁每個點進去的圖片都可以看到




這個內容的資料存取是從js中的app.get去抓取id,然後將資料render回去給ejs,由ejs顯示出來

responsive web design,當我們將頁面拉進來的時候可以發現,剛剛是八張一行現在變成四張了,這就是會顯示在手機上的畫面


還可利用不同urll控制顯示內容,這裡利用 /n 只顯示文字內容














這種利用url去控制顯示內容的部分是在app.js裡面,我們使用不同的url去顯示不同的頁面



所以我們可以把原來的i改成n之後,就會顯示另外一個頁面了。


Parse Cloud anyimage程式架構(二)--- 程式碼講解

app.js,是所有程式的入口,先在前先宣告所有require的部分,第一個是express,因為express 中是用 ejs 作為 view template engine,第二個是expressLayout,是require等等會介紹的express-layout.js的部分,第三個跟第四是parse的library,分別用來存local端的cookie和當路徑名稱是目錄時,重新導向至尾端 “/“。

接下來宣告的app就是我們在這個程式裡面會不斷不斷使用的變數,用var app=express()來使用express裡面所有的method。



第28行的部分是parse宣告物件的方法,宣告image這個物件是extend image這個class的。
而第33行開始是query的方法,
parse query的方法有四個步驟,第一是先宣告是哪個class的query,第二是設定條件,在parse的document裡面有詳細的api介紹,可以到官網去看,有遞增或是遞減或是相等之類之類的條件,第三是限制數目,要取前幾個,第四就是開始找了,可以用query.first或是query.find,query.first就是只找第一筆,find是全部,所以如果要一筆一筆讀的話再find裡面還要加一個迴圈。

上面代碼使用render的方法,對網頁模板進行渲染,render方法的參數就是模板的文件名,放在views的裡面。


express-layout.js
這個是直接用 express-ejs-layouts npm module:
 https://npmjs.org/package/express-ejs-layouts
跟cloud code內容沒有太大關係反正就是網頁的layout,這邊就不多加撰述

image.js
會reqire user是因為這個js裡面可以判斷什麼user需要顯示什麼,從第三行開始上一篇有提過,是宣告object的方法,第12行開始進入正式express內容
第19行開始,是建立新的image,我們這個網站就是拿來上傳照片的啦,所以只要有req.body.file,我們就宣告image是一個extend parse class "Image"的object,並且將上傳的title和file set到parse class中的欄位。
第28行開始是設定權限,設定目前使用者的權限可以read或write,是使用parse的parse.current()可以直接抓到目前使用者。

接下來是儲存的部分,欄位都設定好之後需要讓object儲存,使用object.save(),這裏因為宣告image是object所以是image.save()。

那什麼是image.save()後面的.then()呢?好我們等等最後解釋。
最後使用的是app.get,第一個參數是顯示的頁面,在view template中的latest,把剛剛新增好的image重新query一次,可以顯示出最新的相片們。

重要的來了,parse最重要的精華,叫做promise!
若使用 Promise,程式碼將比您使用回呼的巢狀化程式碼還要簡潔。


每個 Promise 都有一個命名為 then 的方法。此方法會取得一對回呼。如果 Promise 已解析,就會呼叫第一個回呼;如果 Promise 遭拒絕,則會呼叫第二個回呼。

Promise 有一點神奇之處在於能讓您不必巢狀化處理即可串連它們。如果某個 Promise 的回呼傳回新的 Promise,則在解析第二個 Promise 之前,不會解析第一個 Promise。這樣做能讓您執行多個動作,而不會在使用回呼時產生金字塔型程式碼。
這種同步的方法在處理資料的過程會大量的使用。

main.js
主要功能是拿來儲存照片,resize-image-key.js會將上傳的照片分成許多不同大小,main.js存入table中,顯示的是正方形的,原始的可能是多邊型之類的,這裡提供一個儲存前檢查的方法,使用的是beforesave的function,在官網的tutorial部分有提到,這個可以在save()之前呼叫,可以先做檢查或是先對資料做一些處理,像這邊就是先去get原來的大小,等到get之後(有promise做確認),再去看是不是新的,如果是新的就把瀏覽次數設定為0,然後存入table中,所以table裡面有一個欄位是view也就是瀏覽次數,如果不是新的的話就不用設

因為程式的入口是app.js所以先require他,

接下來是對於每個需儲存欄位的檢查,比如說欄位的位元限制啊、欄位不能是空的啊之類之類的,最後由41行開始回傳,也是利用promise。

































在做了這麼多工作之後,接下來要update到metadata的部分, 使用cloud function中的define,第一個參數是funcition的名字,然後每次都增加一次瀏覽次數,最後儲存之後再response,記得!一定要回傳成功或是失敗,不然沒辦法跑,尤其是promise也會很常忘記成功失敗的部分。


require-user.js,單純設定條件,如果有登入就可以繼續,如果沒有就必須傳遞給使用者需要登入的訊息


resize-image-key.js
這個主要是用來對照片做各個不同大小的切割,利用設定他們的height跟width,沒什麼特別的要解釋

user.js
這裏提供了登入跟註冊的endpoint,利用app.get還有.post,get的部分就是去擷取輸入的資料,post的部分就是傳遞給下一個頁面需要的資料,所以任何需要穿地資料的頁面都要用到get跟post。
還有需要提到的是parse有自己的user library,可以使用的有user.set、login之類的,只要先宣告var user = new Parse.User();就可以使用



像第40行的res.render第一個參數就是要render的ejs,後面是傳進去的參數,可以讓ejs接收並且顯示出來,這就是為什麼js是model,ejs是view。

剩下的ejs的部分因為跟原生的html很像,只是利用一些script去抓去資料庫的資料還有接收參數,蠻容易懂得,就不多加撰述,因為ejs是屬於被動的東西,只有被render的時候才會出現。



2015年12月28日 星期一

Parse Cloud anyimage程式架構(一)---開發語言介紹

首先先將程式碼分為三個層次,第一和第二個層次是js,負責控制後端的js,我們都說parse是base on node.js,因為node.js就是控制後端的javascript,我們將它歸類為control+model
第三個是ejs,控制的是顯示的部分,我們將它歸類為view
第一和第二個部分總共有七個js,分別為app.js、express-layout.js、image.js、main.js、require-user.js、resize-image-key.js、user.js
我們先來介紹express,這樣等等看程式碼會比較容易上手。

express是一個node.js的framework,可以用來建立動態網站,他的特色包含routing、request body、url query passing、cookie handling、template rendering。
現在就來看怎麼使用

app.useuse是express註冊中介部分的方法,他可以傳回一個函數。首先在例子中先收到了http的請求,然後輸出console.log的內容,然後再透過next方法,轉給第二個app.use,再把http的回應輸出來,由於第二個沒有使用next,所以request的對象就不再傳遞了。





所以use這個method可以利用路徑請求網址的不同去判斷傳回不同的內容



























 這是利用不同的url,傳回不同的內容,如果中途配的路徑都找不到的話,到最後一個就會顯示錯誤,因為沒有傳遞給他的人,前面都找不到就沒辦法繼續用next傳遞俠去,因此最後會顯示錯誤。


這邊表示對根目錄的請求調用某個中介軟體,例如



而get這個method第一個是請求路徑,而他沒有next,所以只要有一個中介被調用之後,後面的就不會再被調用了。
除了get之外,express還提供post、put、delete,即HTTP的動詞都是Express的方法(很好懂吧)以上方法的第一個參數都是路徑,也就是絕對匹配,除了這個我們也可以利用不同的參數來做模式匹配


像這個就是透過網站中傳入的參數來抓取名字

app.set
就是指定一個值給後面的東西,例如



就是為views和view engine指定值。