2016年5月5日 星期四

Programmer: IKEA效應

許多心理學的書跟研究都指出,
人會對自己辛苦建立起來的東西帶有感情,也會給較高評價。
所以從IKEA買來的DIY家具,比起傢俱行現成的東西,
能帶給人不一樣的情感聯繫。

但這對設計師(規劃者)來說,就不見得是好事,
它會人越來越失去一個從新使用者角度來看的客觀性。

「難道要輕易否定自己好不容易的成果?」
如果為了整體App的功能專注,必要的話,是的。
捨棄功能永遠比新增功能困難。

像圖中的"1 more mission to go!!”的cell detail顯示功能,
讓我覺得蠻爽的,但隨後想起IKEA效應。

如果我是一個規劃App的人,又或是寫程式的人,
建置過程一定會被這效應影響,

以此文先提醒未來的自己。

2016年5月2日 星期一

Swift: MVC的思維

下面這張圖是我為了更理解範例程式的結構,而畫的架構圖,還不是很完整,
試著表達「指令」「視覺呈現」與「資料流動」的關係。





























感覺書籍上的教學方式,是一層層加上code跟class來一面增加功能,
一面介紹新東西,但好像沒有碰觸到一些關鍵的區塊,
像是能點亮學習者在理解面的一塊,「啊!我懂了」這種。

我一面想:
「我學到這個部分,以後可以怎麼用呢?」
「這個部分,可以用別種方式來做嗎?可以部分改變嗎?」
「如果要從無到有,這是怎麼建構的邏輯?」
「開發一個app,要從哪邊開始想?之後怎麼走?」
「之後我能夠靠學到的東西自己寫一個app嗎?」

然後我一面回顧之前理解的MVC,邊想著之前和 UI同學們聊到的溝通問題,
也一面用新理解到的部分來調整自己對MVC的理解。
(Model, View, Controller)

「工程師是怎麼想?怎麼建構?」
「設計師是怎麼想?怎麼建構?」
「使用者端怎麼接受,使用這個東西?」

上禮拜對MVC的概念草繪,畫一半就畫不下去了...


這是今天早些時候畫的,理解的部分多了一點:


在第一張用ai畫的架構圖完成後,我發現每個view都會有個主要的controller,這個controller會是一個class,
而app內的資料也會用class來做包裝,所以這是我之前沒搞懂的地方,現在下圖是我最新的理解:


繼續加油!!



2016年4月21日 星期四

Swift: 給第一次碰Xcode的初學者


App coda
Swift 新手系列之一: 打造你的第一個 iOS App
http://www.appcoda.com.tw/hello-world-app-swift/

大推這個網站寫的Swift新手入門,適合給剛安裝好Xcode但還沒用過的人看!

對入門的開發學習者來說,熟悉開發平台的UI是一項不容易的事情,
我覺得Xcode很多地方設計得不錯,

像視覺化的Storyboard跟寫code的Assistant Editor可以在同一個畫面看,
互相做連結,而且不太會有變數名稱混淆的情況。

使用性越友善的開發平台就越能招到更多的開發者加入呀~~~



祝學習之路順利!

Swift: 按一下螢幕任意處就可以關掉鍵盤的方法

這個方法需要兩段code如下:

    @IBAction func onExit(sender: AnyObject){
        sender.resignFirstResponder()

    } //這段會跟文字輸入區域有關連,要跟兩個text field連結



    @IBAction func onClick(sender: AnyObject){
        tf1.resignFirstResponder()
        tf2.resignFirstResponder()
    } //這段會跟背景的觸控有關聯,跟背景連結


在開始前,要把整個螢幕變成一個「可控制的」屬性,請看下圖:


接下來也用截圖來說明,請試試看:

Step 1


Step 2


Step 3

(Sorry, it should be just yellow when your cursor are not on it.)

Step 4


Step 5


Step 6


Step 7









2016年4月19日 星期二

Swift: Segment的操作練習

看圖理解,
Segment 就是圖中"first"跟"second"那個可以讓人點選的按鈕,
他們是歸在一組的,所以通常會是同類型的切換鈕。

這張圖的左半是畫面,右半是code,
其中三個綠框框內各代表了一個function,
他們前端都有一個灰色點,跟著箭頭指向左邊的元件,
這就是需要在Xcode中建立“圖形元件”與“function”連結的地方,
我們就可以很直觀知道哪段function會跟哪個按鈕有關聯。

實心的灰色點表示有連結到東西,空心的代表沒有連東西。
可以用按右鍵拖曳的方式,把按鈕拉到function的code上,
他就會有個框框提示跑出來,放開就可以建立連結了。
(例外註:當專案關掉再開,然後直接開.swift檔時,可能會看到空心,
這時打開StoryBoard它就會再連上,沒有的話就要再check了。)



以下是整段code:
(出自於Swift書:用Swift語言一次搞定所有蘋果裝置的程式開發 / 佳魁出版)

import UIKit
class ViewController: UIViewController {

    @IBOutlet weak var tv: UITextView!
    @IBOutlet weak var tf: UITextField!
    @IBOutlet weak var segmented: UISegmentedControl!

    override func viewDidLoad() {
        super.viewDidLoad()
        onChanged(segmented)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func onAdd(sender: AnyObject){
        let count = segmented.numberOfSegments
        let title = tf.text
        if title!.characters.count > 0 {
            segmented.insertSegmentWithTitle(title, atIndex: count, animated: true)
        }
    } // 動態增加segment的函數
    
    @IBAction func onDelete(sender: AnyObject){
        let index = segmented.numberOfSegments - 1
        if index > 0 {
            segmented.removeSegmentAtIndex(index, animated: true)
        }
    } // 動態刪除segment的函數
    
    @IBAction func onChanged(sender: AnyObject){
        let index = segmented.selectedSegmentIndex
        let title = segmented.titleForSegmentAtIndex(index)!
        tv.text = "選取了第\(index + 1)個分段,標題是:\(title)"
    } // 顯示選取的segment

}

一面寫一面思考這些文章會對誰有幫助,坦白說這個blog很難讓初學者看了就能學會,
主要是我做學習筆記用,會把重要的部分整理成一篇文章以後複習,
Xcode的安裝、環境設定跟基本操作一般書中、網路上都有介紹,
而且一定需要自己花時間熟悉摸索,若你也是初學者,不妨看看我貼的內容,
也許多少能找到有益的資料。

一面跟著書做練習,一面撞牆,一面完成小功能,偶爾發現書中的錯誤 / bug,
或 Xcode / Swift 更新的東西,這就是學習的苦與樂吧。

繼續加油!



2016年4月18日 星期一

Swift: Class 跟 繼承

繼續跟著《Swift 從入門到超人氣遊戲App開發全面修練實戰》這本書學Swift,
看到class跟繼承的用法,對於 init 不是很懂,google到Jason Kuan's Blog
有很專業的說明,但我只稍微更懂了一點,下面的code是我理解了的部分:
(code來自於上面提到的書)

-------------------------------------------------------------------------------
class MyPeople {
    var name = ""
   
init(Name:String){
       
name = Name
    }
   
func getName() -> String {
       
return "\(name)"

    }
 

}

class MyStudent : MyPeople {
   
var StudentID = ""
   
override func getName() -> String {
       
let t_name = super.getName()
       
return "\(name), \(t_name)'s student ID is \(StudentID)"

    }

}

var Peo1 = MyPeople(Name: "Peiwen Wu")
print(Peo1.getName())

var Peo2 = MyStudent(Name: "Bruce Wu")
Peo2.StudentID = "98381450"
print(Peo2.getName())
-------------------------------------------------------------------------------
//執行結果如下

Peiwen Wu
Bruce Wu, Bruce Wu's student ID is 98381450


我把上面的code分藍根綠兩色,藍代表母類別,綠代表子類別,
同樣呼叫了getName時根據各自的定義而有不同結果,
但name屬性的賦予上,子類別就繼承母類別,能方便物件的管理。

在MyPeople中func getName() -> String { return "\(name)"}這邊可看到,
-> String代表會回傳一個字串的變數回去,
return代表會推出一個東西出來,接到String那邊出去。

MyStudent的 override 應該是代表它要繼承母類別的getName(),
裡面的super.getName()就用到了母類別中定義的getName(),
傳回一個值(name)回來,再用到MyStudent裡的getName,
完成特殊需求(加上學生証號的回傳值)

這些override, super.funtion() 的語法多練幾次就會比較熟了,
看下圖再試著理解一次:



繼續加油!!!


Swift: Var是什麼東西?學寫程式的開始

我們剛開始規劃一個程式時,至少一定會有一項"任務"要由程式完成,
這個任務的定義必須很清楚,清楚到每個小螺絲釘都要逐一定義,
才能獲得正確的執行結果。


寫程式可以分成三個階段:A→B→C

A. 無中生有一些東西,
B. 組合使用這些東西,
C. 然後產出結果。

下面逐一來說明。


A. 無中生有一些東西

我們的任務是 "從五個句子中,印出其中 一行句子 "

要定義的東西如下:

1. 五行句子,它們都必須有名字 (我們才能知道要呼叫誰)
2. 一個數字,也要有名字
3. "印出" 的這個功能也要定義一下

Swift的語法就是這麼用:

var str_nice = "超好吃的啦!"
var str_fine = "還不錯唷!"
var str_ok = "還可以,普通。"
var str_bad = "不怎麼樣。"
var str_awful = "難吃到我想吐..."

var star1 = 1
var star2 = 2
var star3 = 3
var star4 = 4
var star5 = 5

看到var一出現,就知道:
我要無中生有一個東西(變數),然後定義這個東西(變數)是什麼。
(var是variable的縮寫,意思是"可變的東西")

str_nice ... str_awful   這些就是自己取的變數名字;
"="                              這個符號有指定的意思;
"超好吃的啦!"        這個就是我們賦予該變數的內容

如果上面的說明都懂了,那接下來的
var srar1 = 1

我們就知道這代表「我要生一個變數,叫做star1,它的內容是1
注意,因為變數可以有很多種可能的類型,像數字、文字,
數字又有分很多種,所以一旦定義了它的內容之後,
就不能換類型了。電腦會根據我們賦予的內容而自動判斷變數的類型。
(字串取名str,因為str是string的縮寫,意思就是"字串")

OK,繼續下去。


B. 組合使用這些東西

print (str_nice)

這行code很明瞭的會幫我們印出 str_nice - "超好吃的啦!"
如果我們肯定知道東西一定很好吃,那今天任務可以結束,
不過若有可能跑出別的結果,我們還是得多加一點變化性。

這裡會使用到function,中文叫"函式"(詳細看這篇),
function裡面可以定義很多行為,當一次呼叫時,
它就會一次處理所有定義的動作。

func comment (words:String = "我再想想...") {
        print (words)
}

comment (xxxxxxx)  //這一行就是呼叫上面定義的function

當我們抽換xxxxxxx為 str_nice 或 str_bad 時,
它就會把 str_nice 或 str_bad 丟進comment裡面,
然後你看上面的{ } 中有個words變數就會把它"接住"!!
接著透過 print (words) 被印出來,任務完成!

comment (str_fine)

執行結果:

"還不錯唷!"

Q.「等等,那之前定義的 star1 ... srat5 呢?」
A.「function還有更多變化,您不妨試著探索看看。」


C. 然後產出結果

結果已經產出了,我文章寫得不是很好|||,在stage B. 中。


回顧一下,
寫程式可以分成三個階段:A→B→C

A. 無中生有一些東西,
B. 組合使用這些東西,
C. 然後產出結果。


繼續加油!