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