-
摘要
預先說明一點，筆者是后端程序猿，前端只是略懂，僅僅略懂。這篇文章比較長，很多老鐵估計一看到滾動條就放棄了，這里我要說的是程序是比較簡單的東西，只要你有一定的耐心，肯定會有非凡的收獲。只需要你有5成的html+css3+js基礎即可開始我們的一周之旅。廢話少說，能貼代碼絕不瞎比比。
-
需求確定
記錄每天的各種消費，以控制每月的消費（其實是因為窮，所以要節流）。目前比較簡單，只是對業務的實現，沒有集成安全認證、斷網檢測等技術功能，接下來我會盡快實現，畢竟一口吃不了一個大胖子，還有晚上要陪女票，時間緊湊啊。
后端API：SpringBoot+SpringData JPA+ SQlite數據庫
后端的選擇都是為了配合我們的APP，都是快速開發的產物，SQLite數據庫就一個文件，簡單的不要不要的。
前端APP：TypeScript+Angular2+Ionic2
這一塊是我們目前的重點，因為我也特么的不會，從零開始學。我這里會盡可能的把我快速學習的方式和思維模式展現出來
看看最終的效果圖，給大家一點往下看的動力：
代碼托管在GitHub上面，強烈建議clone下來，我的代碼寫的很清晰。然后給個Star哦，你的鼓勵是我前進的動力_
服務器：DayBook
Ionic2 APP：DayBookApp
1.TypeScript學習
TypeScript是微軟推出的編程語言，始于javascript，歸于javascript。說白了你用TypeScript寫的程序最終還是要編譯成javascript。畢竟是要在瀏覽器運行的，目前市面上瀏覽器都基于ES5是不支持TypeScript運行的。按照慣例，先學個五成。
//動物父類
class Animal {
name:string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
//蛇繼承動物
class Snake extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 5) {
console.log("Slithering...");
super.move(distanceInMeters);
}
}
//小馬也繼承動物
class Horse extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 45) {
console.log("Galloping...");
super.move(distanceInMeters);
}
}
let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");
sam.move();
tom.move(34);
這就是TypeScript語言五成的知識，有面向對象經驗的程序員看一眼樂開花了吧。我是花了大概一天時間在下面這個地方過了一遍，也會遇到很多不明白的地方。我覺的你不是天才的話肯定會也會遇到一些困惑。沒事，先記住它的語法，繼續一口氣往下學。學不下去了再去google 百度。
TypeScript完全學習文檔
2.Angular2學習
以前學過AngularJS，學習曲線確實陡峭。第二代官方去掉JS叫Angular2。不光名字簡單了，上手也容易多了。前提是掌握TypeScript，否則就跟我一開始直接看Angular一樣，她認識你，你不認識她。英語好的直接看官方文檔開始學，英語不好的按著下面的翻譯文檔過一遍，這個文檔做的特別好。首先讓你掌握下基礎的語法、要點，然后從新建項目引導你到最后做一個Demo。一整套下來也就一兩天的時間，Angular的基本知識也就掌握了。如果你沒有Angular基礎，先不要直接從Demo部分開始看哦，免得被打擊。
Angular完全學習文檔
3.Ionic2學習
Ionic基于最新的Angular2，用TypeScript語言進行app開發，并用Cordova打包成App，只需一次編寫，就可以分別部署到IOS，Android，WP等系統。
Ionic2也提供了很多的漂亮的組件供開發者快速開發。這一塊不要太簡單，就是封裝了良好樣式的HTML元素。比如下面的組件就是Ionic2提供的按鈕組件，展示了一個紅色的按鈕，color="danger"？danger不就是BootStrap的顏色樣式嗎？
<button ion-button color="danger">Danger</button>
同樣詳細的文檔將幫助你開始你的Ionic2之旅
Ionic2完全學習文檔
有了前面TypeScript和Angular2打的基礎，現在開始Ionic2如有神助的感覺，倍兒爽。
有了一定的學習基礎以后，聰明的你肯定躍躍欲試了吧。不要急，你的渴望程度還不夠。從GitHub把項目clone下來，本地運行起來，看看效果，再撩撥下你。
服務器：DayBook
Ionic2 APP：DayBookApp
項目clone下來后我們一一部署。
1.部署服務端
系統默認啟動端口是9971，修改端口可以在src/main/resources/application.properties文件中修改
server.port=端口
- 系統打包
在項目根目錄下直接運行下面的命令
mvn clean package assembly:single -Pprod -Dmaven.test.skip=true
打包成功后在根目錄下target/DayBook即為打包的結果。
. ├── conf ├── DayBook-0.0.1-SNAPSHOT.jar ├── lib ├── DB.db （SQLite數據庫文件，需要從項目根目錄自行拷貝）
- 系統啟動
上一步打包后，從命令行進入target/DayBook根目錄；執行 java -jar DayBook-0.0.1-SNAPSHOT.jar即可看到啟動過程。
如果需要集成JRE，在window環境下，拷貝jre到target/DayBook根目錄，新建start.bat文件，內容為
start jre/bin/javaw -jar DayBook-0.0.1-SNAPSHOT.jar
雙擊start.bat即可啟動
2.運行Ionic2 App
修改App中服務起訪問地址,src/providers/http-service.ts文件修改API服務器訪問地址
hostUrl:string = "http://192.168.1.1:9971";
修改成功后，運行命令
ionic serve
瀏覽器打開http://localhost:8100即可打開瀏覽器看到效果。
http://localhost:8100/ionic-lab可以看到android、IOS、WP的效果
上面這種方式對于native api是不友好的。比如彈出本地Dialog，是無法正常彈出的，控制臺提示
...but Cordova is not available. Make sure to include cordova.js or run in a device/simulator。
- 解決方法：
$ ionic platform add browser
$ ionic run browser
- 構建Android App
ionic platform add android ionic build android
運行以上兩條命令，提示成功后，在DayBookApp/platforms/android/build/outputs/apk目錄下會生成android apk應用。然后可以安裝到手機~
-
簽名APP生成release版本
app簽名的意義其實就是給app一個身份證。這樣你的app發布到市場，就擁有了唯一的ID。
如何獲得簽名請點擊查看 如何生成android app簽名文件，下面是給app簽名的步驟，
在ionic2項目platform/android目錄下新建文件 release-signing.properties，內容為
storeFile=your keystore path
keyAlias=your key aliasstore
Password=your store passwordkey
Password=your key password
然后構建app命令換成 ionic build android --release --prod，最后生成的release app安裝前需要卸載手機中原來的debug版本。這樣一個可發布到市場的基本APP就生成了，在商業應用中還需要對app進行加固等處理，我打算專門寫一篇這方面的博客。
--prod參數的作用：解決ionic2生成app后啟動的白屏問題。具體原理請查看 解決ionic2 生成app啟動白屏的問題
問題匯總
瀏覽器啟動app訪問時會存在跨域不可訪問的問題。這是瀏覽器的機制決定的。安裝到手機不會有這種問題。為了便于我們調試，建議用谷歌瀏覽器，然后安裝跨域插件
