編按：有鑒於大家看慣了一板一眼的 APP 開發教學，作者特別用故事引導大家一步一步做出 APP。
做為一個永遠不會長大的男孩，彼得潘其實有點寂寞，因為每一個他周遭的朋友都會隨著時間老去。所以他決定開始環遊世界，尋找另一個跟他一樣不會長大，而且迷倒萬千少女的超萌男孩！這一天，當他飛著飛著降落在撒哈拉沙漠休息時，奇蹟真的發生了，他遇到了小王子 ！
「可以幫我畫一隻綿羊嗎?」那是小王子和彼得潘第一次見面時說的話。
「可以呀，我小時候美術都拿九十幾分，號稱內湖唐伯虎，畫隻羊小事一樁 !」
就當彼得潘拿出紙筆，磨好墨水，準備大展身手時，小王子卻說：
「等等，別畫在紙上。上次有個飛行員在紙上畫了住著可愛綿羊的箱子，但時間一久，紙上的箱子慢慢褪色，綿羊就從箱子逃跑了！」
「一定是你虐待牠啦，不然牠怎麼會想逃跑?」
「你看我那麼萌，怎麼可能虐待動物。前不久 Jobs 來 B612 星球旅行，跟我提到他的偉大發明 iPhone 和 APP，還送我永遠不用充電的 iPhone 99 和 Macbook SuperPro。所以我想，能不能教我做一個 APP，一個一打開就能看到可愛綿羊的APP ? 這樣就永遠不用擔心褪色了。」
「哇，真聰明。幸好我對App也略懂，現在我就打開地球最棒的筆電 Macbook Pro，啟動開發 APP 的最強軟體 Xcode，為你做個永不褪色的綿羊 APP !」
「Xcode? Jobs 送給我的 Macbook SuperPro 上沒有裝 Xcode 耶?會不會要花很多錢買呀?」 這輩子從來沒有工作賺錢過的小王子擔心地問著。
「不用擔心啦，從 Mac 上的 App Store 即可免費下載 Xcode。」
1. 啟動 Xcode後，首先映入眼前的是開頭視窗。想要建立一個新的APP，需要先建立專案，所以我們點選的目標就是左手邊大大的那行 “Create a new Xcode project”。
2. 選擇某個樣版(template)。樣版預先幫我們寫好一些程式碼，打造基本的 APP 畫面和功能，加快我們開發的速度。對初學者而言，最常用到的樣版為 iOS 下 Application 裡的 Single View Application，所以我們選擇它做為可愛綿羊 APP 的樣版。
3. 設定專案資訊。將專案名稱(Product Name)取名為 Sheep，Devices 欄位選擇 iPhone(因為Jobs送給小王子的是 iPhone 99，所以我們要開發的是iPhone App。)至於其它欄位的意義，我們暫且跳過，只要記得輸入內容，讓右下角的 Next按鈕可以點選。
4. 選擇專案儲存的位置後，點選右下角的 Create 按鈕完成專案的建立。
專案建立後，即可看到大大的專案視窗呈現眼前。
「哇，視窗裡一堆讓人害怕的按鈕和檔案，看來綿羊 APP 還要很久才生得出來，我們要不要先睡個覺，明日再戰呀。」小王子說。
「先別睡，其實 APP 已經完成了，不信你點擊左上角長得像音樂播放鍵的三角形按鈕。」
「真的耶，Mac螢幕上冒出長得像 iPhone 畫面的模擬器( Simulator )，而且畫面是我最喜歡的雪白。」
「躲藏在白色背景下的小綿羊也好可愛呢，謝謝你，彼得潘。可是我最近迷上了周杰倫的黑色幽默，可以把背景改成黑色嗎? 我想知道黑色到底長什麼樣子。」
小王子果然不是地球人，眼睛總是能看到地球人看不到的東西。彼得潘對小王子的佩服又加了幾分。
「當然沒問題呀。我不只可以變出黑夜，還可以變出金色綿羊，請再稍等一下。」
變出黑夜背景
1. Xcode 視窗左邊區塊顯示著專案裡的檔案清單，請點選其中的 Main.storyboard。不管想秀的是可愛綿羊還是可怕恐龍，都得從 storyboard 檔編輯。
在 storyboard 檔裡我們可以設計 APP 畫面。如圖所示，上方標題寫著 View Controller 的白色正方形格子，正是 APP 執行時顯示的畫面。
2. 在正方形格子裡輕輕一點，選取到 View，也就是負責呈現 APP 畫面的正方形畫布。不過就算用梁朝偉般的電眼一直盯著它，盯著一萬年，它也不會臉紅變色的。
3.想要控制 View 的顏色，就要打開Xcode右半邊的Utilities區塊。
Utilities 區塊的上半部是所謂的 inspector區塊，可經由點選最上方一排的 icon 切換不同頁面，顯示設定不同的資訊。我們想要設定的背景顏色，就藏在第四個icon，Attributes inspector 頁面下的 Background 欄位。
4.點選 Background 欄位後，跳出顏色選擇視窗，此時請像古代皇帝選妃般，儘情享受選色的樂趣。選色的方法不只一種，從Colors 視窗上方的五個 Icon，我們可選擇不同的選色方法，比方左邊數來第五個 Icon，彩色鉛筆，將陳列高達48種優質顏色讓我們選擇。為了討小王子的歡心，讓我們選個高貴的黑色，Licorice (甘草色)吧。
「哇，改變顏色後，畫布 View 的顏色也跟著變了。這是不是代表 APP 跑起來的時候，背景顏色也會是我們現在看到的樣子?」
「沒錯，小王子果然是冰雪聰明! 但是任何事都要眼見為憑，讓我把模擬器跑起來讓你瞧瞧吧。」
「知道什麼是黑色幽默的滋味了吧。不過真的要體會，可能要先跟玫瑰吵架，體驗一下失戀的感覺。」
「失戀? 那是什麼 ?」
「哈，這說來話長，下次再跟你解釋。接下來先讓我將黃金綿羊加入!」
「黃金綿羊聽起來很棒，可是我怕我買不起耶。」小王子擔心地看著彼得潘。
「別擔心，在我們地球上有個超有錢，超愛學 Apple 的 Google 公司，你想要什麼，都可以在上面找到。而且如果是圖片，還能夠免費下載。」
這時候彼得潘請小王子先睡一下，因為比起 APP 開發，找圖才是最花時間的，尤其 Google 又很少將我們真正想要的結果放在搜尋結果的前三頁。經過了8小時的 Google 搜尋，彼得潘終於找到世界上最棒的黃金綿羊，傳說中漫畫聖鬥士星矢裡的山羊座。
「Cool，好帥哦，可是這是綿羊嗎?綿羊應該是無角的吧?」小王子疑惑的說。
「有角更好呀，這樣才能守護你心愛的玫瑰, 而且還能撞斷你們星球上可怕的猴麵包樹。」
1. 選擇Xcode左邊區塊裡，檔案清單中的 Assets.xcassets。所有 APP 裡呈現的圖片，都藏在這神秘的地方。Assets.xcassets 分成左右兩大塊，左半部顯示圖片名稱清單，右半部顯示實際的圖片內容。
2. 將剛剛從 Google 下載的山羊座圖片從 Finder 視窗拖曳到 AppIcon 下的空白區塊。此時神奇的事情發生了，白色區塊多了新的圖片名稱，也就是我們拖曳的山羊座圖片 sheep。而實際的圖片，則顯示在右半部1x的方格裡。關於 Assets.xcassets，還有許多神秘未知的地方，不過我們先暫且跳過，趕快回到 storyboard 加入閃耀的黃金綿羊。
3. 點選 Main.storyboard。將目光集中在右邊 Utilities 區塊下半部的 Library Pane。Library Pane 藏有 APP 需要的各種資源，其中又以第三個 icon 展示的物件百寶箱( Object Library )最為重要。APP 畫面上看得到的各式元件，絕大多數都可從中找到。如今我們想要顯示黃金綿羊，就要靠其中專長顯示圖片的 Image View元件。
4. 點選 Image View，將其拖曳到黑色 View上。Image View 長得就像個長方形，位置和大小可由滑鼠輕易地控制。記得別拉太大，小王子住的星球很小，容不下太大的綿羊呀。
5. 點選剛剛加入的 Image View，此時右邊的 Attributes inspector 頁面將隨著點選目標呈現不同的欄位。對 Image View 來說，最重要的欄位莫過於設定顯示圖片名稱的 Image 欄位。一旦我們填寫剛剛加入 Assets.xcassets 裡的 sheep，畫布上的 Image View 將馬上冒出小王子朝思暮想的黃金綿羊。
「好了，大功告成！ 最後一步交給你，請再一次地按下 Xcode 左上角的三角形按鈕試試。」
「哇，好漂亮!我的玫瑰終於有個強壯的守護者了。謝謝你，彼得潘比之前那個飛機飛不動的飛行員強多了，而且你不用飛機也能飛!」
「哈，能夠看到你開心，就是我最大的開心呀。我們是這世上唯二不會長大的超萌男孩，我們一定能成為很好的朋友!」
「我也很開心認識你，既然你會飛，說不定這一次我不用再被毒蛇咬了，你可以帶著我飛回 B612星球。」
「好呀，當然沒有問題，B612 星球比我住的 Neverland 近多了，而且我也想看看一天四十三次的日落。不過旅程漫長，我們就一邊飛，一邊繼續製作更厲害的 APP 吧。」
想要像小王子一樣請彼得潘教App嗎? 這一次不用像小王子一樣辛苦地在沙漠學習，任何8 ~ 88歲，想親手體驗打造 App 奇異旅程的人，歡迎報名彼得潘在 ALPHA Camp 即將開設的「打造你的第一個 iPhone APP」，一起來製作獨一無二的「小王子電子書」App!
p.s. 最後我們還會把小王子App安裝到自己的iPhone，天天和小王子見面!
Photo Credit：petitprince
