自學Android以來將近一個月，終於來到自己開發一個App的時刻了！這一系列將記錄我從頭到尾如何開發出上架的App。

點子-SnapEvent

台北最棒的就是四通八達的捷運，和豐富的多元活動！但我的行程變動性滿高的，除非是大型活動，否則我不會刻意去追蹤每個小活動，這樣會常lose掉一些其實能參加的好講座、好活動。舉一個例子，我今天從外地回到台北捷運士林站，時間17:00，當天剛好捷運善導寺站附近有一個Workshop在18:00~21:00，但因為我不知道這個資訊，就錯過了參加的機會…我希望有一個App能顯示當天所有的講座、活動並標示在地圖上，讓我能一時興起去聽個演講、參加個討論會等…

設計圖

會用到的大概有Service組件、Broadcast組件、ViewPager、ListView、圖片與資料的緩存優化等…還沒開始做所以細節不知道(揍)

前置作業-UI製作

這是我最愛的部分了！！

1) 元件icon

我直接在這下載，如果想要客製化能參考Android Asset Studio的Icon Generator類別。

不同顏色但同圖案的icon能拿來提升使用者體驗。Android中的selector標籤可以根據狀態的不同為同一個View控件更換不同的圖片，舉個例子，我希望觸碰按鈕時，按鈕上的Icon能變色。

首先在drawable資料夾內建立button_selector.xml檔案，內含選擇器selector如下。

<selector xmlns:android="http://schemas.android.com/apk/res/android">  
  <item android:state_pressed="true"  
      android:drawable="@drawable/pic1"/>        #按下按鈕換圖片1
  <item android:state_pressed="false" 
      android:drawable="@drawable/pic2" />       #放開按鈕換圖片2
</selector>

再到原來畫面布局內的Button標籤引用button_selector(把selector當成像一種圖片)就完成了。

<Button android:id="@+id/button1"
        android:layout_height="50dip" android:layout_width="150dip"
        android:text="Click To Check Style" android:background="@drawable/button_selector"></Button>

2)背景底圖、非ICON圖片

首先圖片可用photoshop、illustrator為工具協助繪製。關於背景圖，我用Google的layout templates為底圖大小做設計，產出如下。

特別推薦各位將背景圖(無論是螢幕或元件的背景圖)做成9-patch圖片，使背景圖片可随着文字内容的多寡而伸縮。

大家能使用ANDROID ASSET STUDIO的Simple Nine-patch Generator來製作9-patch圖片。點入網頁，匯入已經設計好的圖片後，會看到類似以下的畫面，使用者能任意調整上下左右的線來規範圖片哪裡可伸縮，哪裡不可伸縮。調整好後下載會得到不同解析度資料夾，內有檔名為XXX.9.jpg/XXX.9.png的圖檔，將它們放入專案res內就大功告成了！如果改變主意，想再調整伸縮區域，直接在Android studio內點擊圖檔就能編輯了，編輯方法可參考這裡。

3)Google Map的客製化mark

找配色時，好用的取色軟體也很重要，看到順眼的配色能直接把它的HTML色碼拿下來套在自己的App上。

建立專案與使用開源專案必注意：build.gradle

有Gradle自動建置工具對Android開發真的方便很多，好好了解其中的變數設置。在下載開源專案前先查看它app資料夾內的build.gradle確認其執行環境，也能避免掉很多奇怪的錯誤。

1. android:minSdkVersion是宣稱此專案至少要在哪一個SDK 版本(API Level值)的Android系統上才能跑，這個設定值會影響Google Play是否將此程式顯示在商店中，如果使用者裝置的Android版本比程式中這一項設定值指定的版本低，此程式就不會出現在Google Play商店中。實際在執行程式時, 系統也會檢查此項設定值, 若是系統版本比程式的minSdkVersion設定值低， 也會禁止執行這個程式。不過要注意的是，這個設定值是開發者自己宣稱，至於這個程式是不是真的可以在該版本的Android裝置上正確執行, 就是開發者要負責的事情。
2. android:targetSdkVersion為目標版本，也就是測試環境下，模擬機的Android版本，這重要度不高，因為我都用自己手機測試…
3. compileSdkVersion為本專案用於編譯時的SDK版本，在下載專案時別忘看一下，確認此SDK版本在Android studio的SDK Manager有沒有下載過。
4. buildToolsVersion為用於Gradle項目建置的Tool版本，基本上越新越好，因為build-tools有支援舊版本，所以buildToolsVersion > compileSdkVersion是OK的。在下載專案時別忘看一下，確認此版本在Android studio的SDK Manager的build-tools版本有沒有下載過。
5. dependencies內有使用的外部套件名，由gradle從maven庫自動網上搜尋並載入，超方便！ ex：compile ‘com.android.support:appcompat-v7:22.2.1’，v7代表此包支援API 7以上，22代表版本號，詳細入內。 6.versionCode為App版本號。

##系列進度

##專案REPO

實驗室分配一個全新的電腦給我，因為磁碟容量超大，就想說來試試雙系統，向圖書館要了linux光碟來灌，還切了300多GB的主磁碟空間給它，灌完後才發現那個linux Ubuntu的版本是11.04！舊到連chrome都不支援了！ 所以我就很隨便的直接在Win7裡把300多GB的磁碟區刪除…結果重新開機出現一片漆黑，只有grub rescue>在螢幕上方，我才很遲鈍的察覺大事不妙…以下記錄我如何從崩潰的grub rescue>到重新灌完雙系統(Win7+Ubuntu 15)的過程。 如果各位看官們還沒安裝雙系統，強烈建議別像我這樣隨便切磁碟機…太不慎重了..教學這裡走。

1. grub的探索

首先使用指令ls，他列出我4個已經切割的磁碟區域，之後我follow下面步驟依序測試:

ls                               # List the known drives (hdX) and partitions (hdX,Y)
ls (hdX,Y)/                      # List the contents of the partition's root
ls (hdX,Y)/boot/grub             # Normal location of the Grub 2 modules.
ls (hdX,Y)/usr/lib/grub/i386-pc  # Alternate location of the Grub 2 modules.

發現結果全部都是”error: unknown filesystem”，查了資料才知道這代表4個磁碟的OS都不是Linux系統，因為Linux系統是用資料夾的方式構成，這結果也非常合理，因為我4個磁碟區分別是window C槽、D槽、預留空間和舊Ubuntu已經被清除掉的300多GB磁碟空間。

Grub, or the Grand Unified Bootloader, is the most common boot loader for Linux. 而Window的boot loader(引導加載開機程序)是 Master Boot Record (MBR)，Grub無法啟動Window OS壓~

如果您是Linux系統還健在的請走這，遇到和我一樣情況的請隨我往下。

2. 燒Win7和Ubuntu 15.04的iso檔入CD

我在燒完Ubuntu 15.04才發現，現在最火紅的Linux distribution是Mint，Ubuntu越來越弱掉了…聽說Mint介面和Window相似，看來只能等下次再玩了！

Win7有內建的光碟映像燒錄程式能將光碟映像檔案 (這類檔案通常具有 .iso 或 .img 的副檔名) 燒錄至可燒錄的 CD 或 DVD。

步驟:

1) 將可燒錄的 CD、DVD 或藍光光碟插入光碟燒錄機。

2) 右鍵開啟光碟映像燒錄程式

ps: 下載 Ubuntu 安裝光碟的 iso 檔頁面是英文的，但是抓回來的安裝檔案一律是多國語言，所以，安裝中文版本的Ubuntu並不需要特地跑去中文版的網頁下載，等之後真正安裝時，語言設定再調即可。

3) 選擇CD所在之磁碟機並燒錄

如果沒有找到內建的光碟映像燒錄程式，google一下也會發現網路上有提供很多免費的燒錄軟體。

3. 用Win7光碟開機

聽友人說先復原Window OS再安裝Linux比較不會出錯，可能是考量到Window我們比較熟悉的關係，有什麼萬一也比較能處理。

1) 插入Win7光碟後關機。

2) 開機，以ASUS電腦桌電為例，當螢幕進入”ASUS”畫面時，長按F8直到呼叫 Boot Device Menu(ASUS筆電為ESC)。

選擇第一項P1用光碟開機！

ASUS用F8做選取開機功能，跟windows的F8進安全模式相同，所以若要選擇安全模式或修復電腦時，可以在螢幕出現Window圖案時按F8，就會出現下圖畫面。

兩者之間有明顯時間差，所以只要在正確時間點按F8就不會叫錯選單。我們可藉由此按鍵修復電腦或近入安全模式，當然前提是Window健在。Win8進入安全模式需要多加設定，想知道細節請入內。

補充: Delete鍵開啟BIOS畫面

BIOS是一個寫在主機板IC上面的程式，在每一次將電腦電源打開時，它就會開始「初始化」我們的電腦，整個硬體都準備就緒之後，才會開始執行OS。按Delete的時機一樣是當螢幕進入”ASUS”畫面的時候。BIOS能設定電腦設備的開機順序、查看主機板、中央處理器CPU的溫度、CPU風扇或是系統風扇的轉速…等等。

3) 恢復Win7後，開啟電腦管理

4) 查看磁碟管理，分割空間給Linux OS

我直接把之前亂割的310.50 GB 給新的Ubuntu了，滿浪費的…

5) 關機

4. 用Ubuntu光碟開機並安裝

1) 如上面的前2小項，把光碟換成Ubuntu

2) 照著步驟Next，注意安裝類型要選”其他(Other)”，第一項清除磁碟超可怕！！詳細請參考這裡。

5. Ubuntu網路問題

1) 安裝後重開機，就能看到下圖令人感動的螢幕。

2) 選擇Linux後，會發現有線網路無法連上，不知道為何雙系統不會自動偵測…可能是會跟Window OS衝到吧。所以我按右上方的網路圖示，對已經內建的connection 1 展開手動設定。

3) 對IPv4/IPv6(看妳IP用哪種)展開設定，也別忘DNS

4) 完成有線網路設定！

6. 完成安裝Ubuntu後

剛安裝好Ubuntu時，最好都先升級現有已安裝的套件及其相依套件，兩個指令的差別討論見此。

apt-get upgrade
apt-get dist-upgarde

之後就能在terminal使用apt-get指令安裝想要的軟體。這裡有Linux軟體管理程序總攬的介紹。

7. 設定英文版介面，但擁有中文輸入法(個人愛好)

1) 設定英文版介面: 點選系統(System) ->管理(Administration)-> 語言支援(Language Selector)

2) 安裝好用的中文輸入法gcin。

再來就能好好痛快玩Ubuntu了！

從2014申請了GitHub，直到現在2015才下定決心好好經營(之前都當放垃圾專案的地方XD)，希望我能持續堅持下去!!讓我的Github的Contributions每周都有commit!

我為什麼使用Jekyll

最初覺得LinkedIn很空，就想先從建立自己的個人網站開始擴充履歷，但一想到要租server就覺得很煩(完全免費的都好爛)。之後在網路偶然看到”快又完全免費”的架站方式:建立github.io專頁才發現原來能用Github架站!真所謂眾裡尋他千百度，驀然回首，Github卻在燈火闌珊處。

但整個網站要從無到有需要花很多時間投入，當時我在致力學習APP，不想花太多時間在網頁建置，就開始尋找好用的automatic generator! 找到了StaticGen，發現了排名第一的Jekyll，Github本身官方的支援讓這個開源生產器的star足足是第二名的2倍以上! fork數量更是第二名的5倍多!太強了! 很潮所以用了!! (喂)

fork數量很多代表有許多人拿此framework再客制化，開源樣版的提供相對也會多，這裡有好心人做的開源theme整理! 選一個自己看順眼的再加工比重頭開始速度快多了:jekyll themes

Jekyll是什麼

Jekyll 是使用 Ruby 開發的「靜態網站產生器」（static site generator)，和一般直接以 HTML 編寫靜態網站不同的地方是，Jekyll 產生的網站可以有佈景、模組等動態的好處，當你需要修改網站整體的佈局（layout），只需要設計、切換為新的佈景，重新產生的網站就會套用新的外觀，所以平常撰寫Blog文章時只用新增md檔，不需動到coding部份。

我流Jekyll環境建置

如同上面提到，Jekyll只有在改變layout style時才需要動到code，其他時間寫Blog時只要新增/編輯md文字檔即可。 寫過程式的人都知道搭建環境”超級煩”，我個人又愛在實驗室、家裡、圖書館跑來跑去，筆電又好重懶得帶，有什麼解決的好方法呢?

1. 使用Koding作為開發環境

Koding是一個網站，他專門在提供開發部份雲端服務。在Koding網站裡，你可以擁有自己的VM（Linux終端機），並且使用他來開發程式或開發網站。目前Koding支持的語言開發為Python、Ruby、Perl、HTML/CSS、PHP、Node.js……等只要能夠在Linux上執行的程式語言都可以使用。當然最重要的是他的服務完全免費！有它不只能無時無刻coding，也省掉建置Ruby環境的麻煩了!!

2. 搭建Ruby之上的Jekyll環境

Jekyll官方網站的Quick-start有很清楚的說明。因為Koding環境基本上都建置好了，故只要在terminal打以下指令就完成建置了。

sudo gem install bundler
sudo gem install jekyll
sudo bundle install

3. 選一個喜歡的theme並fork到自己的Github repo: jekyll themes

4. 改repo名稱(如果為建置個人網站請改為: 你的帳號.github.io)

5. clone剛剛fork的專案至Koding

git clone repoURL

6. 在Koding跑server

Koding的環境為VM，不能用localhost或127.0.0.1 run server，必須以0.0.0.0為host。

cd repo
bundle exec jekyll serve --host 0.0.0.0

再用VM setting的URL:port開啟網站觀看運行結果

之後就能在Koding設計自己的layout style，詳細設計方式各位下載的theme的github頁面大都有詳細撰寫。

7. 寫文章直接在自己的github repo的_post資料夾新增md檔，按照README.md的方式撰寫即可。

方便又簡單吧!!下次有機會我再自己設計layout style!!

關於讀者留言comment部分，大推Disqus的嵌入式留言! 嵌入的詳細教學如下，先嵌入他們的code至自己的網站，再幫個人網站註冊comment board，得到的shortname拿去更新_config.yml的設定就完成了!!