2014年5月13日 星期二

[IOS] 使用 FacebookSDK 實作 Facebook 登入 (二)

延續 [IOS] 使用 FacebookSDK 實作 Facebook 登入 (一) 的內容,上一篇我們做了這些事:

  • 建立 App 以及申請 Facebook 的 App
  • 加入 FacebookSDK 到專案裡面
  • 設定 .plist

這篇我們會按照 Facebook Login for iOS 這篇的教學,繼續進行製作 Facebook Login 的功能 (使用 Facebook Login 的按鈕)。



1. 增加 Facebook 的 Login UI Control

在你需要置入 Facebook Login 按鈕的 controller 的 .h 檔案 (以我的例子來說,我是在我的 rootViewController 加上 Facebook Login Button ) 把 FacebookSDK import 進來: (同樣的事情也請在 AppDelegate.h 做一次)
#import <UIKit/UIKit.h>
#import <FacebookSDK/FacebookSDK.h>

@interface rootViewController : UIViewController

@end


接著在該 controller 的實作檔 (.m),初始化一個 FBLoginView: (通常我都是放在 
viewDidLoad 裡面)

2014年5月12日 星期一

[IOS] 使用 FacebookSDK 實作 Facebook 登入 (一)


這篇文章會有時效性的問題,請注意 xcode 版本跟 Facebook Login for iOS 的版本,若有更新則本篇的參考價值不大。

最近剛好在研究如何實作 IOS 的 Facebook 登入 (我的開發環境為 Xcode5.1.1)
由於我對 IOS 是新手,如果你也是,以下先提供幾個必要的參考連結,我已經按照觀看順序排列 :) 如果錯誤,歡迎糾正><

2014年5月11日 星期日

[IOS] 筆記 Todo App + Core Data Use

這是最近在學習 IOS 的一些筆記,但為了求快速,後面都暫時用英文寫了,只是過程記錄,請小心服用,完整的 hackpad 網址。不過因為我沒有完整的貼 code 過來,建議看 github repo 的 diff 去看,會更明瞭些。

2014年5月1日 星期四

安裝 CocoaPods + import AFNetworking

其實這邊文章主要是要寫如何使用 AFNetworking,但是因為我看文件後發現,使用 AFNetworking 要用 CocoaPods,所以也就跟著做了,原文出處為此: Getting Started with AFNetworking。

(本來以為 CocoaPods 很複雜,一直沒有裝,沒想到裝了之後覺得還蠻好裝的xd,每次這種要一步一步安裝的事情,我都希望一切順利...)


安裝 CocoaPods 的主要步驟如下

  • Step 1: 使用 gem 安裝
  • Step 2: 建立一個 Podfile
  • Step 3: 建立環境
  • Step 4: 安裝相依性套件
  • Step 5: 在需要使用 AFNetworking 的 class #import AFNetworking


Step 1: 使用 gem 安裝 CocoaPods
$ sudo gem install cocoapods



Step 2: 建立一個 Podfile
你的相依性套件管理需要一個 Podfile 作為管理,而 Podfile 要放在跟 Xcode project(.xcodeproj) 同一個目錄下。
$ touch Podfile

編輯 Podfile
platform :ios, '7.0'
pod 'AFNetworking', '~> 2.0'



Step 3: 建立環境
跑 pod setup 指令,建立 CocoaPods 環境給這個 Project
$ pod setup

pod setup 完成後會出現這樣的 log:
Setting up CocoaPods master repo
Setup completed (read-only access)




Step 4: 安裝相依性套件
使用 pod install 指令:
$ pod install
Analyzing dependencies
Downloading dependencies
Installing AFNetworking (2.2.3)
Generating Pods project
Integrating client project

[!] From now on use `mosquitoSpace.xcworkspace`.

注意,跑完 pod install 之後這個 project 就改使用 .xcworkspace,不使用 .xcodeproj。



Step 5: 在需要使用 AFNetworking 的 class #import AFNetworking
#import <AFNetworking/AFNetworking.h>



參考連結




2014年4月23日 星期三

heroku 遇到 Push rejected, no Cedar-supported app detected 問題

因為我傳了一個純靜態頁面的網站上去,所以在 git push heroku master 時遇到了這個問題:
!     Push rejected, no Cedar-supported app detected


原因是因為我少了幾個關鍵的檔案,
(我上網查過其他人為什麼會遇到這樣的原因,不過我只是其中一種可能)

所以 heroku 無法判斷我的 app 是什麼樣的類別
(heroku 支援很多種開發環境,ex: node, Java, Ruby, PHP... 等等),

所以我在猜想是不是因為我純靜態的頁面沒有一些主要的檔案讓他猜測我是要哪一種環境?!
果然多 touch 一個 index.php 就成功了 push 上去了。
$ git push heroku master
Fetching repository, done.
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 629 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)

-----> PHP app detected
-----> Bundling mcrypt version 2.5.8
-----> Bundling Apache version 2.2.25
-----> Bundling PHP version 5.3.27
-----> Discovering process types
       Procfile declares types -> (none)
       Default types for PHP   -> web

-----> Compressing... done, 22.7MB
-----> Launching... done, v4
       http://YOUR_APP_NAME.herokuapp.com/ deployed to Heroku

所謂的關鍵檔案就是類似:
開發環境是 php 那就要給 index.php
開發環境是 python 那就要給 requirements.txt
開發環境是 ruby 那就要給 Gemfile...等等。 

我倒是第一次遇到這個問題,雖然純靜態網站用 heroku 有點浪費,但是 deploy 真的很快,也不用額外申請外面的免費空間,帶來一堆沒必要的廣告。xd

結論就是呢... 有問題的是我 :P

查詢用 WordPress 做的網站所使用的 Theme (Template)

使用 WPThemeDetector 反查 WordPress 的 Theme

因為要幫忙朋友查看網站使用哪個 Template (Theme),但我不熟 WordPress,還好找到了這個好工具,只要輸入網址,就可幫你看該網站是使用哪個 Template (Theme)。
(但一定要是用 WordPress 做的網站哦 )

http://www.wpthemedetector.com/


2014年4月18日 星期五

ECMAScript6 on Node.js 環境

只是剛好想要研究一下 generator,才發現自己的環境不太ok。因為我的 node 環境只有 v0.10.x,沒有支援 generator。


如果想要讓 node 的環境支援更多的 ECMAScript6 的 Feature,建議更新到 v0.11.x 的版本,會支援更多,只不過 v0.11.X 的版本是 unstable,如果心臟不夠大顆,不敢亂升級版本,建議用 nvm 跑其他/切換 node 的版本。

版本你可以查看 http://blog.nodejs.org/release/。


以我目前的 node 的版本是 0.10.13 來說:
$ node -v
v0.10.13

Ruby on Rails 的 View 初學雜記

這篇筆記記錄了 Ruby on Rails (以下簡稱 ROR) 關於 view 的 render 的相關記錄。

新手上路,如果有寫錯,歡迎拍磚 :P


ROR 或是其他有遵循 MVC 架構的 Framework,像是 PHP 的 Framework 或是 Node.js 的 Express, Sails 等等,通常關於 view (MVC的V) 的部分,都可以使用 Template Engine 去編寫你的 HTML,並且在 Template 內可執行該語言的程式,進行資料的重複 render,甚至 template 再分出 template (有點像是 widget 或是 partials 的觀念),主要是為了遵循 DRY 結構,模組化你畫面上的 HTML 結構等。


Ruby on Rails 的 Controller 初學雜記

新手上路,如果有寫錯,歡迎拍磚 :P

這篇筆記記錄了 Ruby on Rails (以下簡稱 ROR) 關於 Controller 的相關記錄。

熬夜看了 Code School 的 railsforzombies 之後,提到 controller 是一個 App 的 Brain 真是一點都沒錯。(我看的是 http://railsforzombies.org/ 系列),這個系列的影片每打開一次就要聽一次片頭曲,有點煩就是了,都是一些殭屍的動畫,不過這個系列,免費觀看,讚。

接著又順便參考了 RailsGuides 的 Creating a New Rails Project,別怕,請服用。


MVC
Ruby on Rails 遵循 MVC 的架構,這章是在簡單的記錄 C 的部分。


Controller
controller 是用來接收某個 http request 之後決定做出什麼樣反應的功能,也跟你的 routing 設定有些關係, routing 設定能決定接收 request 之後,該由哪個 controller 處理。通常來說,每個 controller 有一個以上的 routing,不同的 routing 也可以對應到某個 controller 的某個 action,action 通常的用途則是去跟 model 要資料,然後把資料,丟給 view (也不一定完全都是要去資料,也可以單純地只是對應到某個呈現給 user 看的 view),端看需求而定。

2014年4月17日 星期四

Ruby on Rails 之環境建立過程筆記

這篇算是去 2014 Ruby Conference 行前準備吧,一直以來沒碰過 ruby,很高興今年買到 Ruby Conf Taiwan 2014 的票,既然要去聽,還是做點功課,這篇其實就純粹是記錄安裝過程而已,如有需要,請多上網搜尋各式各樣的裝法 :)

我的電腦是 Mac
首先是環境的確定:

1. 確認有 Ruby & 如何在 Mac 跑 Ruby

確認有 ruby 的執行環境,
mac 預設有 ruby 的環境,
你可以輸入 ruby -v 看一下你所擁有的 ruby 版本:


$ ruby -v
ruby 2.0.0p247 (2013-06-27 revision 41674) [universal.x86_64-darwin13]


如果有看到版本的結果的話,
可以試著 touch 一個檔案,如 hello.rb
$ touch hello.rb


然後編輯 hello.rb,
寫入這段:

$ vi hello.rb

puts "Hi, i am win"


接著執行一下 hello.rb,
執行的話就是用 ruby 去執行:


$ ruby hello.rb
Hi, i am win


這樣就會印出 Hi, i am win 的結果了。


2014年4月8日 星期二

PHP 匯出 Excel 功能,所遇到的 SYLK 錯誤



今天在幫忙做 PHP 匯出 Excel 功能時,才發現微軟的微妙...
匯出 Excel 的過程沒有問題,可以卻在打開檔案的那一刻,出錯 error
其 SYLK 的錯誤就是檔案格式錯誤,雖然不影響觀看 Excel ,可是每次開這個 Excel 就要這樣被說一次,實在很麻煩。


說明在此:
開啟檔案時,出現「SYLK:檔案格式無效」的錯誤訊息

看了之後才知道解法不難,重點是匯出成 Excel 的前面兩個字元不可以是大寫的『I』 或 『D』,很不巧的我後端資料表的欄位,第一個 field 就是 ID...,最後只要把大寫的字轉成小寫就可以了 (我是使用 strtolower)。

使用 GreenSock 的 backgroundPosition 讓動畫在 FireFox 也能動

最近常常在使用  jQuery 的 Animation 發現,若想要對某個元素產生 animation 時,而且是更改其 css 的 background-position-x/y,在 Firefox 並不管用。雖然網路上有人也提了一樣的問題,不過我試了一樣是沒有成功。

這則 stackoverflow 的答案得到重點是

background-position-x/y is not really part of any CSS spec
以及
Opera and Firefox do not accept it


問題
因此後來為了不想繞路,後來我選擇了使用 GreenSock,去做任何某個 site 需要的 animation,而且 GreenSock 的寫法更直覺,效果更多,不料,一樣問題也發生了:


var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
TweenLite.to(aniNav, 1, {'background-position': leftPx, ease:Bounce.easeOut});


解決
一樣的問題發生在 background-position 在 FireFox 不管用,後來在 forums 得到了解法(FireFox animating background position),
你可以改用 backgroundPosition,記住,沒有'-',而且 P 大寫,就可以解決在 FireFox 的問題:


var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
TweenLite.to(aniNav, 1, {'backgroundPosition': leftPx , ease:Bounce.easeOut});



最後的寫法變成這樣 (我額外加上了 FireFox 的判斷):


var leftPx = "100px 0px";
aniNav = $('#YOUR_ELEMENT');
 
if( $.browser.mozilla ){
        TweenLite.to(aniNav, 1, {'backgroundPosition': leftPx , ease:Bounce.easeOut});
}else{
        TweenLite.to(aniNav, 1, {'background-position': leftPx, ease:Bounce.easeOut});
}



2014年4月2日 星期三

Objective-C 學習筆記連結

(這一本是前幾個月在學 Objective-C 的書,不過現在已經出到第六版嘍)

前陣子寫的 Objective-C 的筆記,暫時記錄在 github 上,有需要朋友歡迎到 github repo 下載,若有錯誤的地方,也歡迎開 issue。

主網址 : Obj-C 學習 - Win Wu's Note
筆記清單 :





這些純粹學習 objective-C 的筆記或許會再增加,但也或許不會再增加...

不過由於之後於 Xcode 實作,會開始需要頻繁的上圖跟解說,所以之後的筆記會放回現在這個 blog (這個...因為一直 commit 到 github 動作有點多...),po 這邊基礎的筆記作為一個開端,告訴大家,我正在悄悄的偷偷學習的 APP  的開發思維~ Let's GO

2014年3月30日 星期日

[講座|分享-snippet note] 2014 Windows Azure Bootcamp 2014 TW


 [請小心服用] 這是昨天參加聚會的一些筆記,只是個人一些片段的內容小筆記,不一定完全正確,只是當個參考。
  • Date: 2014/03/29 13:00
  • 活動詳情 : http://study4-tw.kktix.cc/events/2014march
  • 參與人數 : 約 60 人

Agenda
Time
 Agenda
1:00 - 1:30
 笑CC讓網站上雲端 - KKBruce
1:35 - 2:05 
 由本地應用到雲端應用:構思與實現 - 小朱
2:45 - 3:15 
 被雲搞死的天空 - Sky
3:20 - 3:50
 資訊服務輕鬆做 - Chia Chi
4:30 - 5:00
 在VM上面玩VM - 卡神
5:05 - 5:35
 Azure - 加速你的創業夢 - James

2014年3月22日 星期六

[Head First Note] Ch02 - IOS 應用程式設計模式 筆記

[深入淺出 iPhone 與 iPad 開發(第二版)] Ch02 筆記
Ch02 - IOS 應用程式設計模式

這篇筆記除了是 Head First 第二章的心得之外,還包含一些延伸的學習筆記。算是非常片段的筆記,建議看過 Head First 之後再來看吧 :P :P :P
  • Q: 如何規劃你的應用程式配置?
    A: 一切從草圖開始 -> 建立 GUI -> 規劃如何使用畫面的控制項 -> 處理資料。
    使用性跟美感是 iPhone 的成功關鍵。


IOS HIG 應用程式設計規則
ios Human Interface Guide (HIG,人機介面指南)
  • Apple 公司有發佈一份文件作為指導如何開發要在 App Store 要賣的 APP,當你要準備送審 APP 時,你必須同意你的 APP 符合 HIG 規範。

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...