SPAの学習用サンプル（Angular2 + Bootstrap / App Engine/Python + webapp2）

最近、無職になって時間があり余っているため、このようなものを作ってみた次第です。

# ダウンロード

## BBS-SPA
ここにあります→[https://github.com/syousei/bbs-spa](https://github.com/syousei/bbs-spa)

### 特徴
BBS-SPAはSPA(Single Page Application)のサンプルです。
クライアントサイドはAngular2 + Bootstrapを、サーバーサイドはApp Engine/Python + webapp2を使用しています。

### 機能
* ユーザー登録・認証（ログイン/ログアウト）※JWT（JSON Web Token）認証を採用
* トピックの投稿
* トピックへのコメント

# セットアップ

## 前提

先に以下をセットアップしておいてください。

* [Python 2.7](https://www.python.org/download/releases/2.7/)
* [Google Cloud SDK / Python](https://cloud.google.com/sdk/docs/quickstarts?hl=ja)
* [Node.jsとnpm](https://nodejs.org/ja/)
* Angular CLI
  * `npm install -g @angular/cli`

この記事にご興味を持たれた方は、このあたりは大体できていると思いますが。

## BBS-SPAのセットアップ

上記よりダウンロードしたBBS-SPAを適当な作業フォルダに展開します。
すると、`bbs-spa-client`と`bbs-spa-server`という２つのフォルダが現れます。

ご想像のとおり、`bbs-spa-client`にはAngular2 + Bootstrapで作られたクライアントサイドのファイルが、`bbs-spa-server`にはApp Engine/Python + webapp2で作られたサーバーサイド（API）のファイルがそれぞれ格納されています。

それではターミナル（コマンドプロンプト）を開いて`bbs-spa-client`に移動し、`npm start`コマンドを実行してください。
以下のメッセージが表示されたら問題ありません。

![キャプチャ1.PNG](https://qiita-image-store.s3.amazonaws.com/0/14792/e6a34ce8-4f3a-9cf2-a30e-a4e4186403ac.png)

```
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **

（省略）

webpack: Compiled successfully.
```


次にGoogle Cloud SDK Shellを開いて`bbs-spa-server`に移動し、`dev_appserver.py app.yaml`コマンドを実行してください。
以下のメッセージが表示されたら問題ありません。

![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/14792/b840499c-8938-fe5f-f88d-f3eb29cc0a0f.png)

```
Starting module "default" running at: http://localhost:8080
admin_server.py:116] Starting admin server at: http://localhost:8000
```

### pytzとpyjwtのインストール

`bbs-spa-server`の直下に`lib`というフォルダを作成し、`pytz`と`pyjwt`をインストールしてください。

よくわからなければ、それぞれ次のURLからダウンロードして、解凍すると出てくる`pytz`と`pyjwt`という名前のフォルダを`bbs-spa-server/lib`の中に放り込めばOKです。

* pytz: https://pypi.python.org/pypi/pytz
* pyjwt: https://pypi.python.org/pypi/PyJWT


以上でセットアップ完了です。

ブラウザで`http://localhost:4200`を開いてみましょう。会員登録制の掲示板が使えるようになっていると思います。

![SAMPLE.gif](https://qiita-image-store.s3.amazonaws.com/0/14792/a7ceb969-fe6e-8521-96c9-5ac992d2a78c.gif)


もし登録したユーザー情報や投稿内容を編集・削除したい場合は、`http://localhost:8000`でApp Engineの管理コンソール（ローカル版）が開きます。

## 動作について

本来ならサーバーサイドスクリプトとクライアントスクリプトが同じホスト上に置かれるわけですが、ローカルで動かすにあたってAngular2の開発サーバーとApp Engineの開発サーバーをそれぞれ別に起動しなければならないため、別々のフォルダに格納しています。

実際にApp Engineにデプロイしてみたい場合は、`bbs-spa-client`のビルド先を`bbs-spa-server`の中の静的ファイルを格納するフォルダ（例えば /static_files/distなど）に設定してあげる必要があります。

そのあたりをご理解の上、学習用にお使いいただければと思います。
ご質問などあればコメントしてください。

また、これを作るにあたってAngular2やTypeScriptをほぼ初めて使ってみたので、いろいろと不格好なところがあると思います。
もしお気づきの点があればコメントで助言いただけるととても嬉しいです。

以上です。

## 参考にしたドキュメント
* [How\-to Guides  \|  App Engine standard environment for Python  \|  Google Cloud Platform](https://cloud.google.com/appengine/docs/standard/python/how-to)
* [Welcome to webapp2\! — webapp2 3\.0\.0b1 documentation](http://webapp2.readthedocs.io/en/latest/index.html)
* [Angular \- QuickStart](https://angular.io/guide/quickstart)
* [Angular 2/4 User Registration and Login Example & Tutorial \| Jason Watmore's Blog](http://jasonwatmore.com/post/2016/09/29/angular-2-user-registration-and-login-example-tutorial)
* [JWT Authorization in Python, Part 1: Practise\.](http://steelkiwi.com/blog/jwt-authorization-python-part-1-practise/)
* [Bootstrap · The world's most popular mobile\-first and responsive front\-end framework\.](http://getbootstrap.com/)
* [Angular2でComponentをまたがったデータのやり取り \- Carpe Diem](http://christina04.hatenablog.com/entry/2017/01/19/041235)
* [Angular の基礎 \- Angular 入門](http://angular.keicode.com/basics/)
* [必ず覚えておきたい！ Angular2でコンポーネントの子要素を参照する方法 \- イソップブログ](http://blog.yuhiisk.com/archive/2016/07/08/viewchildren-and-contentchildren-in-angular2.html)
* [Angular2のLifecycle Hooksを理解する \- イソップブログ](http://blog.yuhiisk.com/archive/2016/05/02/angular2-lifecycle-hooks.html#i-2)