背景: 自從今年下半年接觸一個基於ReactJS 的手機APP項目。開始瞭解到了Corodva這個神奇的東西。後續自己也自作了一些小的APP放到了應用寶上。8月份開始想做一個博客園APP。於是就私聊博客園團隊申請了博客園API訪問許可權(當然其實應用寶裡面也有博客園APP了。而且用fiddler抓取了 ...
背景: 自從今年下半年接觸一個基於ReactJS 的手機APP項目。開始瞭解到了Corodva這個神奇的東西。後續自己也自作了一些小的APP放到了應用寶上。8月份開始想做一個博客園APP。於是就私聊博客園團隊申請了博客園API訪問許可權(當然其實應用寶裡面也有博客園APP了。而且用fiddler抓取了一下。發現API還很完善。說實話比博客園團隊提供的API完善多了。我想應該是開發者用爬蟲軟體爬的頁面然後自己解析的吧。)
第一步: 申請API:
私聊博客園,獲取了OAuth的ClientId和ClientSerect。
第二步: 調用API:
以前沒用過OAuth2.0,然後惡補了一下OAuth2.0的知識。這裡就不介紹具體概覽了。就來看看怎麼去掉用API。我選擇的工具是Postman(自我感覺一款不錯的Chrome擴展),當然需要FQ了。
下麵測試新聞的鏈接. Type選擇OAuth2.0
博客園的OAuth2.0的Token地址是https://api.cnblogs.com/token 地址. 獲取後會返回token和expiretime,然後點擊UserToken就可以訪問了.
第三步: 技術選擇
本次項目只是作為個人業餘練習,想學習一下Angular2, 再加上Ionic是一款不錯的框架。而且也出來了Ionic2的beta版本。(Ionic因該是迄今為止與Angular合作最好的H5 APP框架了吧,個人認為)。所以果斷選擇Ionic2來開發。Ionic2的風格我也很喜歡。
第四步: 開發階段
開發都是用的這個月的業餘時間,雖然API很早就申請了。前面公司有其他項目一直沒時間做。剛好本月有空就在上班業餘時間完成了這個小APP第一版。
此處省略一大波不好的代碼(因為前期的對Angular2的不熟,代碼結構很亂.)
第五: 產品展示:
功能點: 1. 支持新聞和博客的查詢。支持分享,評論。點擊頭像進入博主空間查看博客文章
第六: 遇到的坑
1. Ionic2不熟悉,Angular2不熟悉, 需要花時間去看API
2. 以前在美國某蛋電商成都分公司上班主要做.net後端系統做得多。雖然現在在某海淘小公司從事前端。JS功底還是比較自信(因為感覺跟C#沒啥區別,尤其是現在的typescript)。可是對於一個不愛畫畫的男IT。連PS都不會的, CSS 功底太差(因為現在的公司有專門寫HTML和css的UI妹紙)。有的地方還是要用到css比如列表的tab是自己寫的。雖然只需要10多行css不過自己還是花了很多時間 。包括Logo還是擺脫UI妹紙花幾分鐘弄點(可是我自己估計要弄很久)
3. 對OAuth不熟悉,去瞭解OAuth還是花了一些時間。
4.本地開發瀏覽器localhost服務跨越調試很不方便。對於博客園的非登錄API 瀏覽器localhost設置代理是可以解決跨越問題的。可是有關登錄。比如評論功能就卡了很長一段時間。在調用了登錄API後。返回了True,Response的header裡面也返回回來的登錄後的cookie. 可是在調用評論介面的時候header裡面的cookie就丟失了,然後博客園服務端就返回提示信息(用戶未登錄)。不過在打包成APP在手機裡面後是正常的。個人認為是因為登錄和評論API不是一個基地址。而在localhost訪問的時候我給瀏覽器設置了兩個代理。
第七:總結
用一個月的零碎時間搞了這麼一個小玩意。代碼我自己都在吐槽,確實有很多問題。後面有空會考慮再做一個CNode的客戶端。看了CNode提供的API,相對要比博客園更合理。到時候會好好設計一下項目結構。再做代碼分享吧。
https://github.com/FourLeafClover/CNBlogApp
由於版權問題,應用寶上架提示我侵權。雖然我已經把申請博客園的聊天記錄發給了客服還是不行。所以博客打包後的APP 我會放到github上。家裡的台式沒有開發環境。等明天到了公司在把APP放到github上。(不多說了。看會兒電視就洗洗睡睡了。)
這裡在推薦一個給予RN(React native)的博客園APP,確實不錯。UI和流暢度都很好。忘記是哪位博友做的。只是無意間在一個博客評論裡面看見是一個博友做的。
http://sj.qq.com/myapp/detail.htm?apkName=com.google.android.apps.blogger