妳好,世界! - 和我一起Swift

哈囉，各位好：

很高興你們又來到這，和我一起Swift。咻咻咻~

今天是我們的第一次互動，Hello World!。

在這次的教學當中，也會讓大家知道我們的模式會是怎麼樣，

基本上每一次的課堂，都會讓你們知道我做出來的一個小專案會是什麼，我會將每一次的完整的程式碼放在我的Github上面，方便大家下載，也讓我在更新的時候，容易維護。

如果有人想多了解什麼是Github或是該怎麼使用它，恩...好問題，我會找些資源在這邊提供。
//TODO: 找Github的教學給大家

Github教學影片

專案下載

Hello World <--- 請下載

在每一次的開頭，我都會提供一個可以執行的專案檔案，各位可以直接點擊下載，並且執行一次，看看今天要完成的東西是什麼。希望，每一個專案都會帶來一點樂趣，至少對自己要有：）

請執行

HelloWorld.xcodeproj

並按下▶️

按下▶️

接著，稍等片刻，讓模擬器完成執行，
然後，你就知道我們這次要做什麼了：）

demoHelloWorld.gif

概要

在這個HelloWorld的專案中，有幾個重點步驟：

1. 開始新專案
2. 設定畫面(Storyboard)
3. 連結畫面(Storyboard)與程式碼(ViewController)
4. 設定程式(ViewController)
5. 最後，執行/除錯

一切都跟溝通有關

• 人跟這個應用怎麼溝通
• 人跟畫面怎麼溝通
• 畫面跟程式碼怎麼溝通
• 程式碼跟電腦/iPhone怎麼溝通

不用擔心太多，我們執行了就知道了

讓我們開始吧！

---

1. 開始新專案

對於初學者來說，使用太強大的應用程式，反而帶來很多負擔，因為在最開始的時候，給使用者太多選擇的話，大家反而會不知所措。

所以在這邊，我會儘量簡化流程，用最簡約的方式達到我們要的功能。

請打開Xcode，創建一個新的Xcode project：

Screen Shot 2016-12-16 at 4.11.49 PM.png

而你將會遇到要選擇版型的部分，請選擇最基本的Single View Application：

Single View Application

接著，在ProductName的地方，打上HelloWorld

NewPorject

再按下右下角的Next，你就完成這個步驟了！

完成之後，可以試著執行一次

按下▶️

按下▶️

你將會看到：

模擬器讀取中 空白畫面

小細節

• Language一定要選擇Swift，指的是要用什麼語言開發。
• Devices原則上選iPhone就可以了，指的是這個應用是給iPhone/iPad還是都可
• CoreData是手機本身的資料庫系統，這邊不需要
• Unit Tests和UI Tests，是屬於測試用的，這邊也不需要
• Organization Name可以自己取，而可以按到Identifier是類似像網域名稱一樣的結構，只是是相反的。

---

2. 設定畫面(Storyboard)

在這個專案之中，我們只會用到兩個檔案：
ViewController.swift
Main.storyboard
而關於畫面的任何東西呢，都會在Main.storyboard上面完成。
所以請從畫面左手邊，點選Main.storyboard：

Project navigator

而畫面正中間的，就是我們的ViewController，也是你們剛剛看到的那個白色的畫面。

ViewController

點擊後，可以選擇它，並且看到他的各種屬性

ViewController

接著，看到右手邊，確認選擇的是像盾牌的Attributes inspector

Attributes inspector

看到下面，有各種預設的元件可以使用，
請選擇一個Label標籤，以及Button按鈕
將兩個元件分別拖到畫面中間的ViewController上面：

DragElement.gif

基本上，這個步驟完成了！

但是如果現在你去執行一次，你會看到，標籤跟按鈕不在我們的位置上，而且我們的畫面現在看起來一點都不有趣，因此，現在要做幾件事情，來調整一下我們的畫面。

P.S. 如果你很急著想要知道寫程式的部分，可以跳過這一段。

為了讓畫面更好看，現在我們要做6件小事：

• 將Label標籤放到畫面正中間

addConstraint.gif

• 將Label標籤放大到字體46

FontSize.gif

3. 將Label標籤的字，改成Hello World!(更改，並按下Enter)

ChangeLabel.gif

• 將Button按鈕放大到字體36
• 將Button按鈕放到畫面下方，手指方便按的地方
  (將按鈕移到正中間靠近底部的位子之後，按住Control不放，從按鈕拖曳滑鼠到旁邊的ViewController空白處兩次，
  分別選擇Center Horizontally in Container和Vertical Spacing to Bottom Layout Guide再點擊
  Update frames

addConstraintButton.gif

• 將Button按鈕的字，改成👋🏻

執行一次，你將會看到：

小細節

• 關於畫面的設計，不止storyboard這一個方式，之後有機會再討論
• 關於Layout，還有很多可以討論，將會另外用文章解釋。

---

3. 連結畫面(Storyboard)與程式碼(ViewController)

先點選兩個圈圈交疊的圖示，同時顯示storyboard與viewController。

Show the Assistant editor

在這邊，要做兩件事：

• 讓ViewController知道，Label的存在。
• 產生一個叫做helloWorldLabel的outlet
• 讓ViewController知道，什麼時候Botton被按下了。
• 產生一個叫做buttonTapped的action

按住Control不放，從按鈕拖曳滑鼠到程式碼
class ViewController: UIViewController {
之下

IBOutlet.gif

接著，連結就產生了。

Connection.gif

---

4. 設定程式(ViewController)

在buttonTapped(_ sender: UIButton){}之中，加上以下的程式碼。

// 當按鈕被按下時，就會執行這一段程式碼
    @IBAction func buttonTapped(_ sender: UIButton) {

        // 讓Label上的文字，在"Hello World!"和"🌏"之間切換
        if helloWorldLabel.text == "Hello World!" {
            helloWorldLabel.text = "🌏"
        } else {

            helloWorldLabel.text = "Hello World!"

        }
    }```

並且可以將`viewDidLoad() `與`didReceiveMemoryWarning()`先刪除，讓畫面單純一些

import UIKit

class ViewController: UIViewController {

// helloWorldLabel連結到畫面中的label
@IBOutlet weak var helloWorldLabel: UILabel!

// 當按鈕被按下時，就會執行這一段程式碼
@IBAction func buttonTapped(_ sender: UIButton) {

    // 讓Label上的文字，在"Hello World!"和"🌏"之間切換
    if helloWorldLabel.text == "Hello World!" {
        helloWorldLabel.text = "🌏"
    } else {

        helloWorldLabel.text = "Hello World!"

    }

}

}```

好了！你已經完成了！

---

5. 執行/除錯

按下▶️

按下▶️

你就可以看到

demoHelloWorld.gif

---

以上，就是這次的HelloWorld專案，希望參與的你們，有從中間學到本來不會的東西，也歡迎回饋給我，讓我知道哪個地方讓你很困惑，或者哪個地方你覺得特別重要。

我們下次見囉！