【Day 2】的Cloud Vision API應用只是在cloud shell跑code，雖然可以得到結果，但總覺得不過癮也不實用。GCP也聽到你的心聲了！今天就來個實際的網頁吧~(灑花)~~

這篇會用到的GCP工具：Cloud Vision API, Storage, APP Engine

1. 登入GCP主控台
2. 建立一個專案，已經有專案的話就不用再另外建立了喔~
3. 打開cloud shell（忘了按鈕在哪裡的朋友，請回到Day 2看一下圖片啦~）
4. 紀錄一下自己的Project ID
   
5. 依序在shell內輸入指令，這些指令包含下列功能：啟動Vision, Storage, and Datastore APIs、新增service account並設定權限、將service account key保存下來 【 注意：YOUR-PROJECT-ID是剛剛的project ID、NAME-YOU-WANT是你想幫service account取的名稱，而且NAME-YOU-WANT會在第5-7個指令中都用到，要記得替換喔~ 】

gcloud services enable vision.googleapis.com
gcloud services enable storage-component.googleapis.com
gcloud services enable datastore.googleapis.com
export PROJECT_ID=YOUR-PROJECT-ID
gcloud iam service-accounts create NAME-YOU-WANT --display-name "My Codelab Service Account"
gcloud projects add-iam-policy-binding ${PROJECT_ID} --member serviceAccount:NAME-YOU-WANT@${PROJECT_ID}.iam.gserviceaccount.com --role roles/owner
gcloud iam service-accounts keys create ~/key.json --iam-account NAME-YOU-WANT@${PROJECT_ID}.iam.gserviceaccount.com
export GOOGLE_APPLICATION_CREDENTIALS="/home/${USER}/key.json"

使用Google的sample code來開始一個簡單的網頁

6. 開一個Storage Bucket，(Bucket是什麼？請把Bucket想像成資料夾)，之後deploy會用到，輸入以下指令：【 注意：這裡使用project ID來當Bucket名稱，也可以換成任何你喜歡的名稱 】

export CLOUD_STORAGE_BUCKET=${PROJECT_ID}
gsutil mb gs://${PROJECT_ID}

7. 先用cloud shell測試這個sample code，所以"clone下來、進入virtualenv、執行"，就是這麼簡單！

git clone https://github.com/GoogleCloudPlatform/python-docs-samples.git
cd python-docs-samples/codelabs/flex_and_vision
virtualenv -p python3 env
source env/bin/activate
pip install -r requirements.txt
python main.py

8. 然後就可以利用cloud shell右上角的web preview --> preview on port 8080，看到這個網頁了~
   

不過這樣仍然是在localhost阿
所以我們必須將這個網站/網頁佈署到GCP，然後才能給外部電腦使用

9. 佈署也是跟吃飯一樣簡單，在flex_and_vision這個資料夾內有一個app.yaml，我們只要稍微修改一下，就可以輕鬆佈署了。在cloud shell中用的像是ubuntu的terminal介面，所以就用nano這個指令來將app.yaml打開

nano app.yaml

10. 將最後一行CLOUD_STORAGE_BUCKET後面換成自己剛剛設定的Bucket名稱就可以啦
    

11. 最後一步，輸入gcloud app deploy，然後經過5-10分鐘左右的等待，看到下列畫面就代表完成啦，期待已久的網址阿~~~~~
    

免不了，來個測試