GAE-todomvc

2015-07-27 714 words 2 minutes

Contents

最近需要幫內部基於GAE - Python平台上導入前端的框架，TodoMVC 是一個非常適合拿來學習前端框架的資源，它以TodoMVC的題目實作目前主流的前端框架(React、Angular、Vuejs、Ember.js、Polymer 等等)，你可以看到不同框架的優缺點，選擇一個最適合你的框架來學習。

在 cage1016/gae-todomvc 中則選用了 Reactjs (Flux)、AnguarJs、Vue.js 三個前端框架來搭配 GAE-Python + Datastore + Endpoints APIs。

Spec

Front-end: Reactjs (Flux)、AnguarJs、Vue.js
back-end: GAE-Python (webapp2) + Datastore +　Endpoints APIs

Getting Started

三個前端框架的程式碼都是基於 TodoMVC 版本 clone 後稍作修改 (以符合 Endpoints RESTFul APIs)

GAE todomvc 的 gcloud SDK 為 0.9.64

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
# Get gcloud
$ curl https://sdk.cloud.google.com | bash

# Get App Engine component
$ gcloud components update app
$ gcloud components update gae-python

# Clone repo from github
$ git clone https://github.com/cage1016/gae-todomvc

# Install pip packages
$ sudo pip install -r requirements.txt -t lib

# Install npm packages
$ npm install

# Install bower packages
$ bower install

GAE todomvc 中 Vue.js 範例中使用到了 vue-resource library，因為 vue-resource 模組預設沒有 update: {method: 'put'} method，所以在執行 gulp 時，需自己稍作修改。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# switch to bower_components
$ cd bower_components

# clone vue-resource repo from github
$ git clone https://github.com/vuejs/vue-resource

# switch to vue-resource folder
$ cd vue-resource

# install vue-resource require packages
$ npm install

# add update method
# /bower_components/vue-resource/src/resource.js
# add "update: {method: 'put'}" at line 109

# rebuild vue-resource
$ npm run build

# go back
$ cd ../..

# Build
$ gulp

# Run GAE locally
$ dev_appserver.py app.yaml

瀏覽 http://localhost:8080 即可以看到結果。

Screencapture

GAE Endpoints APIs

GAE Endpoints APIs 詳細的使用方式可以參考 Creating an Endpoints API， GAE-todomvc 則是使用 GoogleCloudPlatform/endpoints-proto-datastore 來直接存取 Datastore 的 Model。另外 GAE Endpoints APIs 也提供了本地開發測試的Url http://localhost:8080/_ah/api/explorer