20151213 tokushimaapp
•Als PPTX, PDF herunterladen•
5 gefällt mir•760 views
Tokushima.app #6 Android アプリハンズオン
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie 20151213 tokushimaapp
Ähnlich wie 20151213 tokushimaapp (20)
Mehr von 健一 辰濱
Mehr von 健一 辰濱 (20)
20151213 tokushimaapp
- 1. Tokushima.app #6 Android アプリハンズオン 〜通貨計算アプリをつくる〜 2015/12/13(日) ＠Aizyu Tokushima Basement 辰濱健一
- 2. はじめに • Tokushima.app 初の試みで、ハンズオンやります。 • 作るモノは、簡単な通貨計算アプリ • ソースコードは下記で公開済み • https://github.com/tatsuhama/CurrencyConverterAndroid • 色んなライブラリを使う練習です • デザイン的な事は気にしていません。 • ※後半は中・上級者向け内容になってしまいました。。。
- 3. 進め方 • Android Studio でイチから作るも可 • Github 上の各コミットを見て打ったりコピペしたりする • Github から clone して進める • SourceTree を使うと、わかりやすいです
- 4. 完成イメージ
- 5. 使うライブラリ • ButterKnife : http://jakewharton.github.io/butterknife/ • Retrofit : http://square.github.io/retrofit/ • OkHttp : http://square.github.io/okhttp/ • RxAndroid : https://github.com/ReactiveX/RxAndroid • Realm : https://realm.io/jp/ • Stetho : http://facebook.github.io/stetho/ • Stetho-OkHttp : https://github.com/facebook/stetho/tree/master/stetho- okhttp • Stetho-Realm : https://github.com/uPhyca/stetho-realm • Retrolambda : https://github.com/orfjackal/retrolambda
- 6. 自分で打つ人向け準備
- 7. Android Studio で NewProject • 値はなんでもいいです。
- 8. Target Android Devices • 今回はデフォルト（Phone and Tablet）のままで • 最低限、使う機種では動くように…
- 9. Add an activity to Mobile • Empty Activity で
- 10. Customize the Activity • デフォルトのままで、Finish
- 11. Git から clone する人向け準備 • clone する（どちらかの方法） • ターミナルで • git clone git@github.com:tatsuhama/CurrencyConverterAndroid.git • SourceTree で • ？？？ • Android Studio で開く • File – open • CurrencyConverterAndroid/build.gradle を開く
- 15. 実行結果
- 16. View との関連づけ • xml で定義した View とコードを関連づける • 変数へのマッピング • onClick イベントのハンドリング • 確認のためにトーストを出してみる • ButterKnife を使って記述する
- 17. View との関連づけ • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/b 0bbb64225add5ef63971fbf815f3e90e28b2a16 参照 • 【参考】ButterKnife を使わなかった場合の記述 https://github.com/tatsuhama/CurrencyConverterAndroid/commit/e7 46eaa81f2e69b3430944a88562d4bfbd16af28
- 19. 通貨ボタンをタップで別画面を呼び出す • ひとまず、Activity のスケルトンを呼び出す • CodeChooserActivity という名前で。 • 何らかのレイアウトファイルも作っておく • Intent を作って CodeChooserActivityを start させる • AndroidManifest.xml への追加
- 21. 実行結果
- 22. 通貨選択画面の実装 • 通貨単位を enum で定義する • Enum 一覧を ListView に表示させる
- 25. 通貨選択処理 • ListView に OnItemClickListener を設定する • onItemClick で • 呼び出し元画面に選択結果を送る • Intent の Bundle にデータを積んで setResult する • 通貨選択画面を閉じる • finish() 呼び出し
- 27. 実行結果
- 28. 元画面での結果受け取り • 通貨選択画面で選択した結果をボタンに反映する • onActivityResult で結果を受け取る • requestCode で呼び出し元画面を識別する • requestCode で区別して、適切なボタンに値を setText する
- 29. 現在の為替を取得 • http://api.aoikujira.com/kawase/ を使う • 通信ライブラリは Retrofit • クラスを定義するのが良いが、HashMap で受け取る。 • 通貨の選択肢が多く、クラス作ると Getter と enum とのマッピングが辛いため • リフレクションを使えば、(ry • 計算ボタンをタップすると通信実行
- 32. API から取得した値を使って、計算結果 を表示 • HashMap<String, String> から欲しい値を取得 • “API_URL”: http://api.aoikujira.com/kawase/ • “basecode”: “USD” • “result”: “ok” • “update”: “2015-12-13 04:14:59” • “JPY”: “120.92791” • “ARS”: “9.76907” • “AUD”: “1.39131” • String → Double の変換をして計算する
- 34. 初級編終了！
- 35. 中級編へ…
- 36. Stetho を使って通信状況をみる • Chrome で通信状況が確認できる • Stetho をアプリに組み込んでおく • chrome://inspect/#devices を開いて、inspect を開く
- 38. 実行結果 • chrome://inspect/#devices を開いて、inspect を開く • アプリで通信操作を実行する
- 39. 実行結果
- 40. 取得したい値を指定して、通信量削減 • 今は使わない色んな結果も返ってきている。 • リクエストパラメータにどの国に変換するかを設定することで、 結果を絞ることができる • Retrofit の Api Interface を修正する
- 41. API 仕様 これを指定する
- 44. 通信結果を Realm にキャッシュ • 今は、計算する度に通信を実行している • 100円 → ???$、1,000円 → ???$ • そんなに為替計数が頻繁に変わるわけじゃないので、不要な通 信をさせないために、前回の通信結果を DB に保存 • 比較的最近（サンプルでは10分）前の結果があれば利用して不 要な通信をしないようにした
- 45. 通信結果を Realm にキャッシュ • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/ef a9ee895108cf97a00d918fe8b41267df9f2ca8 • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/ff 43caac690c98490aba2326f38aecd1dd008a2a 参照 • 注意：Relam の最新版は 0.86 ですが、後に使う Stetho-Realm と の相性問題のために 0.85.1 を使用する
- 46. 実行結果 • デバッグや Stetho を使って不要な通信が行われないことを確認 • DB にキャッシュがあれば、オフラインでも実行可能
- 47. Stetho-Realm で Realm のテーブルを見る • Stetho で通信を見たのと同様に、Realm のテーブルを見る • Stetho-Realm をアプリに組み込む
- 48. Stetho-Realm で Realm のテーブルを見る • https://github.com/tatsuhama/CurrencyConverterAndroid/commit/ef a9ee895108cf97a00d918fe8b41267df9f2ca8 参照
- 49. 実行結果
- 50. 余談 • Realm 0.86 & Stetho-Realm だと、Stetho でテーブルを開こうとす るとクラッシュ • 原因は、Realm 0.86 で大きな内部変更が入り、Stetho-Realm が それに追従できていないんだとか。。。
- 51. 爆速回答 爆速解決
- 52. 中級編終了
- 53. 上級編
- 55. RxAndroid を使ってバックグラウンドで処 理＆メインスレッドへコールバック • Retrofit の API で Observable<?> を返す • subscribeOn(Schedulers.newThread()) • バックグラウンドスレッドで実行 • map • 変換処理 • observeOn(AndroidSchedulers.mainThread()) • メインスレッドで実行
- 59. Retrolambda を使ってラムダ式を使う • コールバックがシンプルに書ける • Java8 が必要
- 61. Retrolambda を使ってラムダ式を使う • 「ラムダ式で書けるよ！」って所は、Android Studio が教えてく れる
- 65. 次回ハンズオン • これを Kotlin or Swift でやる（かも？）