[Google Course] Android Basics in Kotlin (第1篇) — 類別繼承及變數可見性
很開心又開了一個系列的課程 — Android Basics in Kotlin，原本預計這個google 推出的Kotlin 基礎課程教學會推出五個單元，但…….目前這個基礎課程只推出了一個單元，這邊會先分享第一單元的學習內容，之後有推出Unit 2也會趕緊記錄下來！！
這系列文章接下來會以Google Training 上的Kotline開發者文章為主軸，大家有興趣也可以上去看看，接下來就進入課程拉！在課程結束後你可以獲得課程勳章當作獎勵，我也在收集這些勳章，希望Google有天會發現我這塊璞玉~~
這單元的學習目標有五個：
1. Kotlin 程式基本框架、變數宣告及註解
2. 函式寫法
3. 建立第一個Android App
4. Kotlin 的 類別及物件(下篇待續)
5. 建立第二個Android App(下篇待續)
6. QA
[Kotlin 基本框架及介紹]
Kotlin 是一種現代的程式語言，由JetBrains在2011年所推出，目標是希望能夠像Java一樣快速編譯且跨平台，受到多種程式語言的影響，我認為它改進了許多繁瑣的語法，並新增了一些直覺化的語法使程式錯誤減少了許多，現在我們就來看看Kotlin的基本框架吧！為了方便大家不會被開發環境所困擾，Google提供了一個互動式編譯Kotlin的網頁，按下下圖中綠色按鍵就可以線上在瀏覽器編譯執行你的Kotlin程式
學習程式語言通常都會先從主程式以及如何印出訊息”Hello, world!”，Kotlin也不例外有主程式，主程式通常都是指一整個程式的進入點，像C/C++就是int main(int argc, char *argv[]){}是程式的進入點，而Kotlin 的程式進入點是fun main(){}，每個Kotlin程式都需要一個fun main(){}
當你進入Kotlin Playground時，會看到一小段的程式，按下右上的綠色箭頭，確認你的瀏覽器可以正確執行程式，在下方會出現”Hello, world!”字串訊息，如下圖：
就像是學習英文一樣，我們學習程式碼也需要學習語法，而程式碼的每一個區塊都有他特殊的目的，你才能夠成功執行程式，所以讓我們來了解一下Kotlin語法吧！
● 首先fun是一個Kotlin的關鍵字(keyword)，也稱為保留字(reserved word)，function函式的關鍵字，是一個讓程式執行特定任務的區塊
● fun main的main是函式的名字，叫main的原因是因為他是程式執行時第一個、主要的函式，因此每個Kotlin程式都需要有個fun main
● fun main()的()是緊跟在每個函式名稱後面的，在括號裡面可以放一些其他函式內部需要的資訊，這些資訊我們稱他們為參數(arguments, 或是 args)
● fun main() {} 的{}大括號內是一系列的程式能夠完成一份任務，我們看到在大括號裡面的唯一一行 println(“Happy Birthday!”) ，println告訴系統請他去輸出"Happy Birthday!"字串，你可以將字串裡的句子替換掉，但是要記得如果是字串，需用雙引號將字串括起來！
● 當程式裡面有錯誤時，會以紅色下底線(俗稱紅色毛毛蟲)，在下方輸出視窗也會以紅色文字來標示錯誤訊息，協助找出錯誤或是可能原因！
接著我們試著在輸出視窗輸出較複雜的字串、加入註解、定義函式，並且學習我們第一個Kotlin迴圈的語法repeat，這邊我們輸入一些生日的祝賀語，並用特殊符號做出一個生日蛋糕：
● 首先，我們能夠透過println輸出一些更複雜的字串
● 我們也能夠透過println輸出特殊符號，一行一行輸出製作成一個蛋糕圖形！
● 看到"生日蛋糕開始"那一行程式碼，前面有兩個斜線"//"，這是代表註解這一行的意思，也就是程式在編譯時並不會將單行編入執行檔，只是個告知的訊息，像筆記一樣
● 加入註解有很多好處，可以幫助其他人了解你的程式碼，包括未來的自己><><
因為年紀、名字因時間、人都會有所不同，而這些資訊也有可能使用多次，所以我們將學習如何將這些會變動的資訊寫到Kotlin變數中，方便改變以及重複使用：
● var是 Kotlin中變數(variable)的關鍵字，可以是數字、字串、布林，或是任何其他結構的資料，跟在var 後面的 age、name 是變數的名稱
● = 是一個指定運算元，將右邊的值指定到左邊的變數名稱
● 程式設計師通常會將第二行程式口語化說成"將變數age設為5"
● 而Kotlin 還有另一個關鍵字 val 指的是常數(value)的意思，val只能夠被指定一次，指定後就不能再被修改了！
● 當我們需要獲取變數的值的時 候，在Kotlin我們會寫成${name}，就可以獲得變數name 的數值 "菲比"
[函式寫法]
現在讓我們來學習如何創建一個函式，先加入下圖中三個紅框中的輸出分隔線：
我們來看一下這三個框框有什麼可以修改的地方，程式設計師怎麼修改優化它呢？思考流程如下：
1. 創一個函式來輸出分隔線
2. 使用repeat 語法重複輸出“=”
3. 用參數來修改輸出的分隔線符號及數量
完整程式碼如下：
接著我們來優化蛋糕部分的程式碼吧！我們先來製作蠟燭的函式，由於我們這邊製作的蛋糕的蠟燭需要是(年齡)根，因此我們可以將年齡age設計成函式的參數以後朋友們長大我們還可以繼續使用這個程式來產生生日蛋糕！產生蠟燭函式程式碼如下：
fun printCakeCandles(age : Int)
{
print (“ “)
repeat(age) {
print(“,”)
}
println(“ “) // Print an empty line
print(“ “) // Print the inset of the candles on the cake
repeat(age) {
print(“|”)
}
println(“ “)
}產生蛋糕上鮮奶油函式程式碼如下，這邊是設計左右多兩個寬度的蛋糕本體，因此是+4，Google課程上是左右多一個寬度，所以是+2：
fun printCakeTop(age: Int) {
repeat(age + 4) {
print("=")
}
println()
}產生蛋糕底層函式程式碼如下：
fun printCakeBottom(age: Int, layers: Int) {
repeat(layers) {
repeat(age + 4) {
print("@")
}
println()
}
}
完整程式碼如下：
補充一些Kotlin的語法文件，大家有興趣可以自己看：
● Kotlin Document
● Defining variables
● Comments
● Defining functions
● repeat statement
● Vocabulary for Android Basics in Kotlin
[建立第一個Android App]
接著我們要進入Android Studio 的部分，稍微介紹一下安裝，之後就會進入我們第一個APP — 生日卡片APP：
[Android Studio 安裝及介面介紹]
Android Studio 是一個開發Android Apps 的工具，可以用來設計、執行、測試我們製作的Apps。Android Studio 是官方提供給Android App 開發人員的一個IDE(Integrated Development Environment)，裡面包括所有開發Apps需要的工具，可以讓開發者快速上手開發Apps！
接著我們要來安裝Android Studio，Android 是一個作業系統，就像是Windows, Linux, macOS一樣，只是Android 是用來給手機、平板或是其他穿戴式裝置的作業系統，你可以在Android 作業系統上執行你的Apps，像是Gmail, Photos 或是任何你想玩的手遊！
** 下圖是安裝Android Studio 的電腦系統需求，來源Android Studio：
接著，我們需要先安裝java 的執行環境，可以參考這篇文章完成Java環境的安裝！！確認完Java環境後到Android 官網下載Android Studio，下載完成後，按照指示就可以完成安裝了！
來到歡迎畫面點擊Start a new Android Studio Project開啟專案模板，選擇”Empty Activity”後按”Next”：
接著會有一些需要設定的東西，像是你的專案名稱、專案包裹名稱(Package 中文不太會翻….)、儲存路徑、程式語言，以及最小相容的SDK版本，
● Name : 專案名稱，輸入Happy Birthday 當作專案名稱
● Save location：選擇你要儲存專案的位置
● Language：下拉式選單拉下選擇Kotlin
● Minimum SDK：是最小相容的SDK版本，我是選擇API21 For Android 5.1 ，底下會顯示有多少裝置相容於此SDK，如果不知道怎麼選擇，可以點選Help me choose，會跳出如下視窗顯示SDK與Android 版本對應：
[專案檔案架構]
在IDE左側欄開啟Project視窗，Project視窗上方有個下拉式選單，我們先點選”Project”來看一下我們的Project架構
● A區：是放置主要的Kotlin或Java程式碼的資料夾
● B區：是放置圖片或是Layout排版的資料夾
● C區：AndroidManifest.xml是專案的設定檔，有一些開發App需要的權限要求、API設定都在裡面可以找到
● 可以再次點選下拉式選單的Android 切換至前一個專案架構畫面
[虛擬裝置App安裝]
虛擬裝置(AVD Android Virtual Machine)的開發我認為不太實用，有的時候你可能會需要開發藍芽、網路通訊或是其他檔案處理相關的功能，這些在虛擬裝置上開發起來會相對困難，而且電腦要有一定的規格才不會一直卡住動彈不得，因此真的不推薦大家用虛擬裝置開發，如果要開發Android 系統的App還是需要一支實體的手機比較適合，不過下面也整理出操作步驟截圖提供給還沒有Android 手機的開發者：
**小筆記：I圖來源：Google官方，因為我的電腦記憶體不足無法執行QQQ
[實體裝置App安裝]
要使用Android 實體裝置開發App首先需要有一支Android 手機，而他必須開啟開發人員功能，在Android 4.2 以上的手機，開發人員功能是被隱藏的，你必須自己開啟以及USB除錯功能：
- 打開你的手機到”設定”頁面，到“關於手機”
- 點擊“版本號碼”7次，就會開啟開發人員功能，如果有跳出輸入密碼那就輸入手機的密碼吧！
- 返回“設定”頁面，到”系統”->“進階”->”開發人員選項”，啟用USB偵錯
**如果是使用Windows開發的話，Android Studio 還需要再安裝Google USB Driver，到”Tools”->”SDK Manager”，選擇"System settings”->”Android SDK”->”SDK Tools”，將“Google USB Driver”勾起，點選OK！
接著就可以將App安裝到手機上囉！手機在接上與電腦連接的USB線時，會跳出一個視窗詢問是否允許USB除錯，按允許就可以囉！
**小筆記：官網實體裝置操作
[生日卡片APP製作]
現在就進入App實作，剛剛已經建立一個Happy Birthday 的專案並執行，我們現在來嘗試修改在App中央的文字吧～點擊Project 中的res->layout的資料夾，剛剛有說這裡是放置App排版的地方，裡面目前只有一個檔案activity_main.xml，雙擊打開，會看到如下圖畫面：
● A：Paletta 區域，可從此區抓取Android內建元件來擺放到畫面上
● B：Component Tree可以看到各元件擺放位置的關係以及有無Error或Warning
● C：Attributes 是元件屬性區，顯示目前點擊元件的屬性，像是文字、顏色、大小等等
● D：D區是App畫面預覽，只會顯示元件預設的畫面，若之後有在程式做一些其他設定，則執行後才會知道顯示出來的樣子
● E：E是畫面的框架，D區是顯示真正呈現的樣子，而E區只會顯示擺放哪些元件，看元件位置、大小時比較清楚，不會受內容干擾
而元件是什麼呢？就是一種User Interface，像是我們打開Paletta視窗裡面所有的東西都稱為元件，他們都是一種View，View除了可以顯示內容外，像是TextView、ImageView，也是可以和使用者互動的，像是Button、Switch
而View在Android App是不會單獨一個存在，他不是一個個體，必定和其他View有位置上的關係，像是一個ImageView會擺放在TextView的上方，而ViewGroup就是擺放View的一個容器，負責去排列好屬於他的View內容，我們接下來就是使用ConstraintLayout這種ViewGroup來排列我們的UI，這種ViewGroup排列好之後，內部元件並不會隨著螢幕垂直或水平而發生元件位置不正確的狀況，因此Google目前也是最推薦這種UI排列方式！！
接著點擊圖畫面中Hello World的地方，會發現兩點，第一是TextView的四邊出現了像彈簧的東西，代表他和ViewGroup之間的位置關係，第二屬性區域變了，目前顯示的則是“Hello World”這個TextView的屬性
[TextView]
我們先找到屬性區裡面的Common Attributes->text，會發現有兩個，一個已經寫上Hello World!，將它改成Phoebe, Happy Birthday!，會發現預覽視窗改變文字
接著我們來修改TextView的位置，可以看到屬性區的Layout->Constraints Widget，將裡面四個關係全delete掉，會發現預覽視窗中的TextView跑到左上角
此時在Component Tree 會有一個紅色驚嘆號點一下，滑鼠移到上頭會顯示缺少一些限制條件：
這時候我們看到Attribute -> Constraint Widget裡四邊都有個+號，我們可以新增位置限制條件，點擊左方、上方+號，將兩邊設定為16
你也可以嘗試修改屬性區的字體大小(textSize)及字體(fontFamily)，並且試著從Paletta拖拉出另一個TextView放置在畫面右下角，如下：
[ImageView]
接著我們來放置圖片到App裡，首先先去這個網站下載Google 準備好的背景素材，接著找到Resource Manager 左上角有個+號，點選Import Drawables：
選擇剛剛下載的圖片，我們會看到Drawable 裡面多出了剛剛匯入的圖片資源：
到Project->res->drawable也會看到多出一張圖片資源：
接著拖拉一個ImageView到畫面上，擺好後跳出選擇圖片的視窗，選擇剛剛匯入的圖片！
如果位置不對，記得用Constraint Widget調整一下就行了！
因為我們剛剛有設定了限制條件，所以將四周與ViewGroup的間距都設為0dp，確保位置符合限制條件！
不過我們發現圖片大小和畫面不太相符，到屬性區找到scaleType選擇centerCrop，圖片會填滿整個畫面：
哇！原本以為已經完成了，結果文字居然都被圖片擋住了，原來只是圖層順序的問題，用滑鼠移動Constraint Tree的順序就可以了：
[優化程式]
我們看到Constraint Tree這邊有三個驚嘆號！！！為了方便後人承接我們的程式，我們必須盡量減少這種Warning出現，儘管他們不會影響我們執行程式
先看到ImageView的Warning 是寫”Missing contentDescription attribute on image”，這個問題比較好解決，只需要到屬性區找到contentDescription填入敘述文字就可以了！你可以填上”Background”！
不過……..What!!!!!!我們還是有三個驚嘆號，現在三個驚嘆號的提示應該都長得很像：
“Hardcoded string “Background”, should use @string resource”
這時候Android Studio 很貼心的提供一個功能幫我處理掉這個警告，只需要按下Fix，會跳出以下的Extract Resource 視窗，將三個驚嘆號都Fix掉：
這個動作在做什麼呢？
在下圖Project架構下我們看到 res資源資料夾 ->values，裡面有幾個xml檔案，這些是用來定義這個App專案裡特定的值(Resource value)，並且提供一個ID(Resource name)給這些數值，方便重複使用colors.xml就是定義顏色，如此一來整個App相關色調都可以從這裡取得，顏色就不會不一致
strings.xml就是定義字串，strings.xml有更大的用途是為了進行"翻譯”這件事情，將來如果你的App需要被翻譯成其他國語言，而你的字串訊息散佈在專案的各個角落，那"翻譯”這件事情將會非常困難去進行
因此養成好習慣將固定、重複的資源寫在.xml檔案裡，是一件相當重要的事情！！
如此一來就完成我們第一個漂亮的生日卡片 App！！
**小筆記：這個App的ImageView 在華為Android 7平板上沒有辦法順利呈現，還不知道是什麼問題，如果有人知道可以留言跟我說唷！
我覺得Google課程透過生動的範例，讓我們學習程式更加愉快，持續學習，也希望Google能夠繼續開課下去，讓我能學到更多的技巧，並且記錄下學習路程分享給大家，預告下篇文章接續這篇會介紹Kotlin的類別及物件概念，會製作我們第二個Kotlin App — 擲骰子，相當有趣，大家不要錯過唷！下面有一些QA，大家可以測試一下學習的狀況唷！
[QA]
● 在Kotlin中，函式的關鍵字 keyword 為何？
● 在Kotlin中，如何註解單行筆記？
● IDE的全名是什麼？有哪些軟體算是IDE?
● 在Kotlin中，val 和 var 有什麼差異？
● 除了 ConstraintLayout 以外，在Android中還有哪些ViewGroup 可以使用？
● strings.xml的用途為何，為什麼我們要使用它？
喜歡我的文章的人也記得幫我按個拍手、分享，覺得很不錯的可以幫我拍個50下！
也要快點追蹤我的 FB粉絲專頁 — 飛比尋常的程式設計世界 ，不會太頻繁出現在你的塗鴉牆騷擾你，好文章生產需要一點時間，有錯誤或想討論的都歡迎留言給我唷！那就下次見拉！
