The sky is the limit

ハイブリッドアプリ開発、人工知能(機械学習など)に関する備忘録 たまに宇宙のことも語る【AngularJS、Monaca、Cordova、OnsenUI】

0.5章 アプリの設計 -【連載】ハイブリッドアプリ開発で銀行口座管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で銀行口座管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

f:id:duo-taro100:20160218004611p:plain

0.5章 アプリの設計

 

前回の記事ではアプリ開発に関する今後の連載予定についてまとめた。

it-innovation.hatenablog.com

今回は、【連載】ハイブリッドアプリ開発で銀行口座管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】の前段階として、簡単な設計をする。(前回も書いたけど、すでにほとんど完成しているので設計したときのことを思い出しながら

<画面ごとの機能設計>

f:id:duo-taro100:20160423004512p:plain

f:id:duo-taro100:20160218005701p:plain

<実装方針>

・画面に対してコントローラは1つ用意

・原則、コントローラ内が所持できるプロパティ・メソッド最大で5つ

・口座情報などの保存にはローカルストレージを使用

OnsenUIを使用

AngularJSを使用(グラフは考え中)

 

AngularJSを使っての本格的なアプリ開発は初めてなので、コントローラやサービスなどをどの程度分けるべきか迷ったので、とりあえず上記のような方針で開発を行った。現状では、グラフ以外の実装が終了している。グラフはどのように実装するか検討中。

これで正解だったかどうかは連載の中で見ていただければわかると思う。

f:id:duo-taro100:20160322234907p:plain

<実装手順>

1、UIテンプレート(Mock)の作成

2、スタイル実装

3、機能実装

 

まずは部品を配置して、それにスタイルをあてる。

それが終了してから機能の実装に入った。

f:id:duo-taro100:20160214124138j:plain

 

実際にはどのようなメソッドを用意するかとかも考えたが、長くなってしまうのでこんな感じで。改めて設計は重要だと気が付いた!!

 

次回からは実装に入っていく。1章は「UI設計」に関してで、主にOnsenUIでの実装方法をまとめる。

次回、「1-1【UI開発】OnsenUIを使ったページ遷移の実装」

 

以上!!