• BLOG
  • ARCHIVE
  • TWITTER
  • GITHUB
  • SLIDESHARE
  • LINKEDIN
  • RSS
  • Global GDG Leaders Summit 2018 and Google I/O 2018 經驗分享

    Aug 20, 2018
    #Google#I/O#2018#GDG#summit

    補作業

    ...more
  • workflow recipe - Copy2ClipboardWithEasy

    Jun 14, 2018
    #iOS#workflow#recipe

    小弟之前在在 Chrome Extension Store 上發佈了一個簡單的小工具 copy 2 clipboard with ease - Chrome Web Store 可以快速的複製頁面的 titl/url

    iOS - WorkFlow

    Workflows combine a bunch of steps across apps into a single tap. Collect workflows like these to save time and effort every day

    一個可以在 iOS 透過拖拖拉拉的方式進行有一點像寫程式的感覺來組合各種元件來達到一些特定的功能

    Copy2ClipboardWithEasy

    類似 Chrome Extension - copy 2 clipboard with ease 的功能,可以在 iOS 中進行 url/title 的複製操作


    ...more
  • Screenshot as a Service

    Sep 9, 2017
    #GAE#phantomjs#chromeless#puppeteer

    GCPUG Taiwan Meetup #29 Screenshot as a service

    cage1016/screenshot-as-a-service-demo: GCPUG Taiwan Meetup #29: screenshot as a service demo code

    ...more
  • notebook - golang regexp

    Aug 30, 2017
    #go#regexp

    https://regex101.com/

    簡單記鎑一下最近在專案上需要利用 regex 來進行字串的拆解

    ...more
  • CloudFunctions Google maps service

    Aug 18, 2017
    #GCP#cloudfunctions#googlemaps

    Waldo-gcp

    Waldo-gcp 在 2015 時 Google I/O Extended Taipei 時分享過一個計算最佳路徑的微服務。在提供幾組 Google Maps 上有效的地址,透過 Google Maps Distance Matrix API 來計算出每一個點一點之間的旅行距離及旅行時間。再透過基因演算出計算出周遊一圈旅行最短路徑

    1
    2
    3
    4
    5
    6
    7
    # 提供5組 Google Maps 上有效的地址
    台北市內湖區瑞光路227號1樓,
    高雄市鼓山區美術東二路106號,
    台南市長榮路一段175號,
    臺北市松山區南京東路五段123巷1弄15號,
    高雄市五福四路131號2樓
    ...more
  • weddingcnp via GCP - 3. endpointAPI 設計實作

    Jul 12, 2017
    #GAE#GCE#Datastore#EndpointAPI#sendgrid#API

    此篇就對 Cage & Ping wedding 中實作專案中最為重要的 backend API (endpoint API) 部份進行簡單的說明,每一個 Google App Engine Service 實作的細節會在後序的篇幅中介紹

    weddingcnp 系例傳送門

    1. weddingcnp via GCP 簡介
    2. weddingcnp via GCP - 1. 專案架構切分
    3. weddingcnp via GCP - 2. 前端頁面設計實作
    4. weddingcnp via GCP - 3. endpointAPI 設計實作
    5. weddingcnp 前端 vue.js 設計實作
    6. weddingcnp edm 寄送 sendgrid

    endpointAPI 設計實作

    weddingcnp endpointAPI 圖一

    weddingcnp endpointAPI curl 圖二

    Cage & Ping wedding 的網站大至上可以區分為靜態頁面(frontend Service, Golang) 及負責資料收集的 API (endpoints Service, Python). Google Endpoints API[1] 是架構在 GAE 上的一個 RPC (remote procedure call) 服務。由於 endpoints API 是基於 ProtoRPC remote.Service 實作出來的,所以在實作我們的方法時也是依照 protorpc 的方式來定義,小弟在寫 Cage & Ping wedding 這一個網站的時候 Endpoints API 還是 1.0,所以這篇文章還是以 Endpoints API 1.0 來說明

    ...more
  • weddingcnp via GCP - 2. 前端頁面設計實作

    Jun 18, 2017
    #GAE#GCE#Datastore#EndpointAPI#sendgrid#API

    此篇就對 Cage & Ping wedding frontend Service 使用了 GAE standard runtime 搭配 echo 網頁框架實作介紹

    weddingcnp 系例傳送門

    1. weddingcnp via GCP 簡介
    2. weddingcnp via GCP - 1. 專案架構切分
    3. weddingcnp via GCP - 2. 前端頁面設計實作
    4. weddingcnp via GCP - 3. endpointAPI 設計實作
    5. weddingcnp 前端 vue.js 設計實作
    6. weddingcnp edm 寄送 sendgrid

    weddingcnp 前端頁面設計實作

    Cage & Ping wedding frontend Service(Module) 主要的功能如下

    • serve 靜態資源(audio、js、images、css),serve 動態資源(婚紗照片由 Google Cloud Storage 提供)
    • 服務整個主體的網站架構中模版
      • 首頁介紹頁
      • 婚妙相簿頁
      • 婚宴地點介紹引導頁(訂婚、結婚)
      • 報名頁面(我要參加)[1]
      • 隱藏網頁(求婚影片搶先看),連結由喜帖中的 QR code 提供
      • bingo 遊戲

    weddingcnp frontend service

    frontend Service

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .
    ├── public // static resource
    │ ├── audio
    │ ├── css
    │ ├── images
    │ └── js
    ├── templates // html templates
    │ ├── bingo.tmpl // bingo game
    │ ├── chiayi.tmpl // 地點引導
    │ ├── gallery.tmpl // 婚紗相簿
    │ ├── greeting.tmpl // 隱藏網頁,連結由喜帖中的 QR code 提供
    │ ├── index.tmpl
    │ ├── layout.tmpl
    │ ├── live.tmpl
    │ ├── luzhu.tmpl // 地點引導
    │ └── rsvp.tmpl // 報名頁面
    ├── app-engine.go
    ├── app-standalone.go // Google App Engine entry point
    ├── app.go
    ├── app.yaml // frontend services yaml
    ├── index.yaml // index for Datastore
    └── main.go // echo framework entry point
    ...more
  • weddingcnp via GCP - 1. 專案架構切分

    Jun 12, 2017
    #GAE#GCE#Datastore#EndpointAPI#sendgrid#API

    此篇就對 Cage & Ping wedding 中實作的專案架構進行簡單的說明,每一個 Google App Engine Service 實作的細節會在後序的篇幅中介紹

    weddingcnp 系例傳送門

    1. weddingcnp via GCP 簡介
    2. weddingcnp via GCP - 1. 專案架構切分
    3. weddingcnp via GCP - 2. 前端頁面設計實作
    4. weddingcnp via GCP - 3. endpointAPI 設計實作
    5. weddingcnp 前端 vue.js 設計實作
    6. weddingcnp edm 寄送 sendgrid

    weddingcnp 專案架構

    Cage & Ping wedding 完全架構在 Google App Engine 上,再功能任務上需要達到幾個要求

    • 服務靜態頁面, 一堆的 html/css/javascript 及些許的動態資料
    • 作為 API 的伺服器,收集前端表單送過來的資料並儲存至 Datastore 中
    • webmasters domain owner

    project structure

    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
    28
    29
    30
    .
    ├── endpoints // endpoints instance
    │   ├── apis
    │   ├── handler
    │   ├── lib
    │   ├── app.py
    │   ├── app.pyc
    │   ├── app.yaml
    │   └── ...
    ├── frontend // frontend instance
    │   ├── public // 公開資源
    │   │   ├── audio // 音樂檔
    │   │   ├── css // 靜態網頁用 css
    │   │   ├── images // 靜態網頁用 image
    │   │   └── js // 靜態網頁用 javascript
    │   ├── templates // golang 模版
    │   │   ├── bingo.tmpl
    │   │   ├── .....
    │   │   └── rsvp.tmpl
    │   ├── app-engine.go
    │   ├── app-standalone.go
    │   ├── app.go
    │   ├── app.yaml
    │   ├── index.yaml
    │   └── main.go
    ├── ownership // webmaster instance
    │   ├── app.yaml
    │   └── googleae8f4bcce8bec00c.html
    ├── dispatch.yaml // dispatch.yaml
    └── makefile // cli helper makefile
    ...more
  • weddingcnp via GCP

    Jun 8, 2017
    #GAE#GCE#Datastore#EndpointAPI#sendgrid#API

    Cage & Ping wedding 是一個我們為結婚喜宴處理朋友出席報名相關事宜特別開發的網站,所有的服務全部建構在 Google Cloud Platform 上

    功能大至如下:

    • 喜宴相關資訊

      • 訂婚場/結婚場時間、地點、交通資訊
      • 出席人數統計(強制使用 Google/Facebook 登入)。訂婚場/結婚場,人數、葷素、兒童椅等,需不需要住宿
    • 婚紗搶先看,先公開一部份。喜宴當天再公佈所有照片

    • 喜宴進行中的 Bingo 遊戲
    • EDM (發佈 email 給參加的朋友)
    • GA (關心一下有多少人來看)
    ...more
  • Custom labstack/echo Context

    May 7, 2017
    #APIs#Golang#echo

    labstack/echo 一個輕量、高效的 Golang 網頁框架,讓使用者非常容易的建立 RESTful API 伺服器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    package main
    import (
    "net/http"
    "github.com/labstack/echo"
    )
    func main() {
    e := echo.New()
    e.GET("/", func(c echo.Context) error {
    return c.String(http.StatusOK, "Hello, World!")
    })
    e.Logger.Fatal(e.Start(":1323"))
    }
    1
    2
    3
    4
    5
    6
    7
    # run echo API server
    $ go run main.go
    ⇛ http server started on [::]:1323
    # get request
    $ curl http://localhost:1323
    Hello, World!
    ...more
NEXT

© 2015 - 2018 KAI CHU CHUNG, powered by Hexo and hexo-theme-apollo.