概要

DartによるTimecardクライアント実装です。配布形式はChrome Appsです。

リポジトリ

UI frameworkの検証用

Dart

AngularDart

AngularDart + Google Cloud Endpoints版は、python_gaeのフロントエンドとして動作します。 https://ruffnote.com/p/5899
AngularDart コードラボ資料(2014/02): http://goo.gl/aXyt2e
AngularDart: https://angulardart.org/
AngularDart release note: https://pub.dartlang.org/packages/angular#chang...
参考資料: https://docs.google.com/presentation/d/1HmjzxR2...

debug

コーディング規約

HAML: インデントはスペース1つ
Dart: インデントはスペース2つ
Onsen UI 1.0.4ベース: http://onsenui.io/
AngularDart 0.11ベース

既知の問題

iOS 7.1.1以降では、cordovaでビルドしたアプリがエラーを出力する。 

backboardd[55407] <Error>: HID: The 'Passive' connection 'Timecard' access to protected services is denied.
The 'Passive' connection '' access to protected services is denied: https://discussions.apple.com/thread/6074570

ディレクトリ構成の解説

リポジトリ

リポジトリに含まれるディレクトリ/ファイル

  • bin
    • dartium
      • dart対応版chromeの起動スクリプト
  • lib
    • component
      • AngularDartのcomponent（Web Components、polymer)
    • routing
      • AngularDartのrouting（window.location.hashのハンドリング）
    • service
      • AngularDartのservice（外部APIのハンドリング）
    • timecard.dart
      • AngularDartのcontroller
  • submodule
    • 外部リポジトリ
  • web
    • clientのエントリーポイント
    • view
      • AngularDartのview
  • timecard-dev.discovery
    • Google Cloud Endpointsのインターフェイス定義ファイル

makeすると生成されるディレクトリ/ファイル

  • packages
    • dartモジュール
  • build
    • dart2jsによるビルド
  • release
    • chrome-apps
      • Chrome Apps用ビルド
    • ios
      • cordovaによるiOS用ビルド


開発環境の構築

リポジトリをcheckoutする 

$ git clone https://github.com/MiCHiLU/timecard-dart.git
$ cd timecard-dart

gemパッケージをインストールする 

$ bundle install

cordovaをインストールする 

$ nvm install 0.10
$ nvm use 0.10
$ nvm alias default 0.10
$ npm install -g ios-deploy
$ npm install -g ios-sim
$ npm install -g cca

Python仮想環境を作成する 

$ mkvirtualenv timecard-dart

作成したPython仮想環境へPythonパッケージをインストールする 

$ workon timecard-dart
(timecard-dart)$ pip install -r packages.txt
(timecard-dart)$ はPython仮想環境が有効になっていることを示すプロンプトです。Python開発環境に関する詳細は次のサイトを参照してください。

テスト

CI

CIの状況を確認するには確認するには、次のURLを参照してください。

dartの開発サーバーを起動する 

$ make pubserve

Chrome Appsをビルドする 

$ make chrome-apps
ChromeでChrome Appsにインストールします。

iOS Simulatorで起動する 

$ make ios-sim

iOSデバイスへデプロイする 

$ make ios

Xcodeで開く 

$ make xcode

開発時のTips

watchlion 

$ mkvirtualenv timecard-dart
(timecard-dart)$ pip install -r packages.txt

(timecard-dart)$ watchlion
を実行すると、haml, coffeeなどのファイルの追加/更新を検知して自動ビルドします。
watchlionの設定は .watchlion.yaml に記述します。

AngularDartのWebComponents機能が、将来的にSafariで動作しない。

Mobile Safariでのレンダリング性能を優先して、Shadow DOM関連のコードが削除されています。
AngularDart 0.11で Shadow DOM-less components が追加されたので、この機能で回避できます。

Shadow DOMのdebug

Dartium(Chrome)でShadow DOMのinspectを表示するには、
Tools > Developer Tools > Settings > General > Elements > Show Shadow DOM
にチェックします。 





Related Contribution



0