Close

2017年9月2日

【GA】Gestion – プログラミング開発編

おはこんばんにちわ。Growbal ActiveのSakamotoです。

毎週金曜日にかけて、GAのウェアラブルデバイスを用いたGestionアプリの開発過程を
まとめましたので、ぜひご覧ください。

1回目:ソフトウェア開発工程・マネジメント編
2回目:設計編
3回目:プログラミング開発編 ⇦ここ
4回目:テスト・まとめ編

〜プログラミング開発編〜
今回の全体の開発言語:HTML,CSS,JS,Pythonを使いました。
フロントとバックエンドによって工夫した点や運用物などが大きく違うと思いますので分けさせて紹介させてもらいます。
【Front・デザインチーム】
フロントチームでは約5名チームで開発を行いました。
今回はJavascriptのAngularというフレームワークを使用し、ライブラリをなるべく使わずに実装を行ってくれました。
他にモーダル(子ウィンドウ)やボタンなどのフォームなどはライブラリ、フレームワークは使わずに開発してくれました。
なぜAngularを使用したかというと、コンポーネントベースでの開発が可能であることが一番の理由。
※コンポーネントベースとは、定義されたインタフェース集合を提供や要求する自立型の開発であり、あらゆる側面・段階に対応するソフトウェア構成単位

このコンポーネントベースを使うことにより、一つの画面でも複数のコンポーネントで構成させることが可能でありコードの読みやすさに加え、パーツごとの開発となるのでメンバーなどにタスクが振り分けやすくチーム開発がとてもやりやすいという面でもAugularを選んだ理由にあります。他にフルスタックなので通信、View制御などAugularに用意されているので書きやすいのです。設計編の方で深く話すべきだったのですが、今回はマテリアルデザインを意識したSPA画面としましたので、インターフェースにはパーツごとの動きやカードを使用しました。
※Google社が提唱したユーザーエクスペリエンスデザインの体系である。(色々制約などあるので知りたい方は調べて…)

【Backend】
マテリアルデザインを意識させたSPAということだったので、独自のTokenを実装して行いました。
またDjangoやREST?などのWebフレームワークなどを使いたかったのらしですが、時間や学習コストの面を考えてFlaskを採用しました。設計図をしっかりと手順を踏んで開発を行ったことにより、スムーズに実装することができました。
実際にBackendのチームメンバーとなるのが1名で行ってくれました。(反省点などで次回に触れます。)

※設計の部分で本来はinfraのお話をするべきだったのですが、書き忘れをしてしまいましたので前回の記事及びこの記事に書かせてもらいます。(申し訳ないです。)

【infra】
サーバー環境はNginx データベースはMySQL, 仮装実行環境はDockerを採用しました。
今回はdockerを使用し各サービスの立ち上げを簡略化してくれました。
ソースコードと環境を完全に分離した(一部を覗く) – フロント・バックエンド・インフラとプロジェクトを分離し統合しやすくしてくれました。他にもLet’s Encryptを使用しHTTP通信を暗号化したのとNginxのリバースプロキシを使用し処理を分散したりと工夫をしてくれました。

↓ディレクトリTree図

HMS-for-infra
│── README.md
│── api
│   ├── Dockerfile
│   ├── gestion-api
│   └── requirements.txt
│── asset
│   ├── Dockerfile
│   └── gestion
│── docker-compose.yml
└── mysql

   └── Dockerfile

また今回のアプリではGestionというFitbitを用いた健康マネジメントアプリということで
いくつかシステムなどを作ったのですが、最後のテスト・まとめ編で作品の全体の紹介などを
また改めて書きたいと思います。

気になった点などがありましたら、ぜひコメントなどでお待ちしております。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA