[Thunkable X 教學文] 製作App，第一步很重要
在2019，我會多分享一些程式教學文。Thunkable 會是其中一個主題，藉由這個能在iOS與Android都能執行的手機應用程式平台，來學習程式邏輯與製作App的要點。讓你學到實作技巧與熟悉創作流程，抓住與不斷練習將想法實現的可能，也從中建立自學的自信心！
若你對 Thunkable X 平台還不是很熟悉，請先參考 Thunkable X — 輕鬆創造跨平台App。進入平台並建立自己的帳號（註：於4月也能使用自己的Email帳號登入），並根據文中稍微了解介面，幫助你接下來的學習。
當我想做一個App，該怎麼開始？
當你尚未有想法時，其實有一個選擇。在 Thunkable 的專案開始的介面中，下方會有一區範例專案 (Featured Project) 。只要點選進去，可以選擇直接在手機上執行(Preview on Device)，查看專案 (View Project) 和複製一份重置 (Remix)。
這是一個很好的開始，讓你在沒有想法時，先動手玩玩App的功能，並看得到它後面的程式與使用到的元件(Components)，大概了解 Thunkable X 這個平台提供的功能是否符合你的需求。
提醒大家：Thunkable X 因為是支援 iOS 與 Android，目前許多元件支援度上不像 App Inventor 或是 Thunkable Classic 版本如此豐富，並有一些使用上的限制。建議先從範例中粗略了解是否有此功能。
有想法了，接下來呢？
當你有了想法後，請先不用急著開始製作。首先，請你先拿出一張紙，或是有一個App手機畫面的空白線框稿(wireframe)也很好。在設計App時，請先思考：
- 這個App是要做什麼？（解決什麼問題)
- 它有什麼重要的功能 (第一重要的功能，第二、第三…)
- 這個功能在畫面上長得會是什麼樣子？
如果圖像還沒辦法很具體，也可以先用筆將功能「條列」出來。
例如：
- 目的：將拍下的照片可以很快速的分享出去
- 功能優先順序：1). 拍照 2).儲存 3). 分享功能
在條列出功能後，需要做一件事。找找看與觀察看看你喜歡的App，上面通常是如何呈現的。這時候你對手機上的元件名稱可能還有些陌生，可以搭配 Thunkable的元件區來對照認識。
別小看這個步驟喔！它可以幫助你：
- 了解整個App的功能，並讓你在製作時更快速聚焦
- 在出現問題(Bug)時，更能抓住重點上網尋求適合的解答
- 整個思考的脈絡會更加完整，如果之後要增加或捨棄功能，也知道哪些是必要功能，哪些是次要功能。
- 每一個頁面，基本上只會做一件事。所以當你有手勢，例如點選、滑動或是啟用某個功能(拍照)等，畫面換了，就可以是一個新的頁面，這也就是使用者會看到的畫面。
當想法有了雛形，如何開始？
1). 在上方會有個加號(+)，也就是能新增一個新的畫面(Screen)
應注意的是，在 Thunkable 中，放在本專案使用的元件列表最上面的畫面(Screen)也就會是App執行時第一個會被執行的畫面。
畫面上的元件已經放上去了，而「設計」的部分也有個雛形了。但你可能會發現：「App上的元件為什麼不能隨心所欲的移動位置？」
這是正常的！在App製作的世界中，元件(像是按鈕、文字、圖片等)基本上都是會在固定的位置，例如上方、中間、下方、靠左、靠右，垂直排，水平排等 (如同Android開發中會有的 LinearLayout, RelativeLayout…)。
在 Thunkable中，這個概念要先放在心裡！我們的App在排版上會有所限制的原因是，讓你的設計中不會太凌亂，再者是這樣的排版方式對於手機硬體顯示元件在畫面的處理上會省力許多。而 Thunkable 的畫面預設排版是垂直 (Column) 。
休息喘口氣， 總結一下
到這裡，其實你已經踏出很重要的第一步了– 將想法具體化。記住，在你想要製作App前，那個動機很重要，它會支持你在遇到困難以及Bug時，不斷提醒你那個最初的想法是什麼。再者是，如果你的想法不夠明確，過程中你會不停拉扯與掙扎，甚至模糊了原來的主軸，所以寫下來是個不錯釐清想法的方式！
補充一下：筆者很喜歡使用一個製作 wireframe 的工具 — Balsamiq。透過拖拉元件的方式就可以很快的做出一個很像的App草圖。
預告一下，接下來我們會陸續分享：
- 如何修改與查找元件上的屬性
- 排版的小秘密
- 測試技巧大公開
Happy Thunk! 申請一個帳號(完全免費) 一起製作一個跨平台的App吧！
