webアプリケーションに触れてみる(1)【webアプリケーションを設計する】
先週はangular2のチュートリアルやってたのでお休みしてましたが今週からは実際にアプリケーションを作っていこうと思います．
作るのはunityのWebGLを閲覧したり投稿したりするプラットフォームみたいなものにしようかなぁと思っています．
いつだかに今月中に何か完成させるみたいなこと言ってましたが多分無理です．今はプロトタイプみたいなものでも来月いっぱいまでかかるかなぁって見積りです．
余談ですが，やっぱりangular2とかよりreactのほうが流行りなんでしょうか…？angular2しか使ってないので何とも言えませんが，angular2は書きやすいけどちょっと管理しにくいかなって印象です．
ではとりあえずどんな構成にするか説明してみます．
サーバ構成
今回の構成は先々週までのものに近いです．
いくらか変わったこと（まで予定ですが）としてはwebサーバ(Nginxから変更なし)から配布するファイルをangular2で作ってることとDjangoをREST APIを提供するサーバとして使用するという点です．
ページ構成
angular2で作るページは概ねこんな感じになります．トップページはランキングページ（といっても作品はおそらく全部ダミー）でいいかなと思ってます．
データ構成
現在考えているデータ（テーブル）としては
・user: ユーザー
- name: string
- image: string(url)
・content: 作品
- titile: string
- url: string(url)
- description: string(url?)
- image: string(url)
- published_at: Date
- author: user
・タグ
- tag: string
・タグ-作品
- tag: tag
- content: content
・コメント
- user: user
- comment: string
- content: content
・評価
- user: user
- evalution: number
- content: content
- date: Date
- content: content
- rank: number
- evalution: number
・ウィークリーランキング（デイリーと同じ）
・マンスリーランキング（デイリーと同じ）
って感じにしたいと思います．
現状
現在はランキングページと検索ページの骨組みが少しできたかな，という感じです．
ただ，後述しますがルーティングの処理がいまいち理解不足で検索窓の反応が少し意図しないものになっています（ブログ書いている間に改善できました）．
コードはこちらになります．
travisCIも導入してるのでjsのテストをしたい方は参考にしてください．現在はビルドしてアプリケーションが生成されるかどうかだけチェックしてます．ちなみに現在開発中のdevelopブランチではビルドに失敗してます．泣きそう．
いまいち分かりにくいところ
Angular2は大体コンポーネントという単位で開発するのかなぁという風に感じているのですが，開発したコンポーネントの連携方法がいまいちわかりにくかったので少し書いておきます
app
-app-routing.module.ts
-app.module.ts
-app.component.ts
-search/
--search-routing.module.ts
--search.module.ts
--search.component.ts
大体こういう感じで分けたとき，「/search/:term」という感じで検索を使用としたとき，まずはsearch-routing.module.tsを大体こんな感じにします．
大切なのはforChildの部分です．次にこれをsearch.module.tsに取り込みます．
最後にこれを上位のモジュール（今回はapp.module）に組み込みます．
まとめると
上位モジュール - 下位モジュール - 下位ルーティング
みたいな感じです．
最初はルーティングの上下とモジュールの上下関係がよくわからなくて結構悩みました．結局英語の長い公式ドキュメントを見る羽目になりました．
ただし，トップページに関してはapp-routing.module.tsに直接書いたほうがよさそうです．
あと検索窓に
<input $hoge/>
<button [routerLink]="['' '/search',$hoge.value]">fuga</button>
みたいな感じにしたら反応が悪かったんですが
<input [(ngModel)]="hoge">
<button [routerLink]="['' '/search',$this.hoge]">fuga</button>
みたいな感じでデータバインディングをはさむとうまくいきました．
理由はよくわかりませんが一時変数をそのまま使うのは控えたほうがいいのかもしれません
来週の予定
来週は画像の読み込みと認証の一部ができればいいかなと思っています