My First Pebble App

記錄我第一次使用 Pebble SDK 編譯 app 並使用模擬器和手錶執行的過程。 依官網的介紹,開發 Pebble App 的語言可以用 C 或 JavaScript,而開發工具則可以選擇用安裝在本地端的 SDK 或 CloudPebble。

我選擇用 C 語言和本地端的 SDK,依照官網的文件:Build Your Own Watchface 來做我的第一個 Pebble App。

第一次進入這個網頁,會詢問要看 SDK 或 CloudPebble 的教學步驟?如下圖

Build Your Own Watchface by SDK or CloudPebble?

我選擇 SDK。

接下來的步驟:

  1. 開啟 terminal 視窗,找一個位置建立 project (我把 project 取名為 "mywatchface")

    $ pebble new-project mywatchface

    執行結果:

    Created new project mywatchface
    
  2. 查看新建立的 project 目錄 (mywatchface),可以看到結構如下:

    .
    ├── appinfo.json
    ├── resources
    ├── src
    │   └── mywatchface.c
    └── wscript
    
  3. appinfo.json - 描述 app 資訊,JSON 格式

  4. resources - 存放 app 資源檔
  5. mywatchface.c - Pebble app 的主程式,建立 project 的時候,SDK 自動產生 .c 檔,檔案裡已包含基本架構,就算不做任何修改,也可以直接編譯執行。
  6. wscript - 編譯 project 用的 script

  7. 不做任何修改,直接編譯

    $ cd mywatchface

    $ pebble build

    執行結果:

    Setting top to                           : /Users/USERNAME/project/pebble/mywatchface 
    Setting out to                           : /Users/USERNAME/project/pebble/mywatchface/build 
    Found Pebble SDK for basalt in:          : /Users/USERNAME/pebble-dev/PebbleSDK-3.4/Pebble/basalt 
    Checking for program gcc,cc              : arm-none-eabi-gcc 
    Checking for program ar                  : arm-none-eabi-ar 
    Found Pebble SDK for aplite in:          : /Users/USERNAME/pebble-dev/PebbleSDK-3.4/Pebble/aplite 
    Checking for program gcc,cc              : arm-none-eabi-gcc 
    Checking for program ar                  : arm-none-eabi-ar 
    'configure' finished successfully (0.128s)
    Waf: Entering directory `/Users/USERNAME/project/pebble/mywatchface/build'
    [ 2/22] Start build for basalt: 
    [ 2/22] subst: ../../../pebble-dev/PebbleSDK-3.4/Pebble/common/pebble_app.ld.template -> build/basalt/pebble_app.ld.auto
    [ 3/22] appinfo.auto.c: appinfo.json -> build/basalt/appinfo.auto.c
    [ 4/22] resource_namespace:  -> build/basalt/src/resource_ids.auto.h build/basalt/app_resources.pbpack
    [ 5/22] c: build/basalt/appinfo.auto.c -> build/basalt/appinfo.auto.c.9.o
    [ 6/22] c: src/mywatchface.c -> build/src/mywatchface.c.9.o
    [ 7/22] cprogram: build/src/mywatchface.c.9.o build/basalt/appinfo.auto.c.9.o -> build/basalt/pebble-app.elf
    [ 8/22] Start build for aplite: 
    [11/22] subst: ../../../pebble-dev/PebbleSDK-3.4/Pebble/common/pebble_app.ld.template -> build/aplite/pebble_app.ld.auto
    [11/22] appinfo.auto.c: appinfo.json -> build/aplite/appinfo.auto.c
    [11/22] resource_namespace:  -> build/aplite/src/resource_ids.auto.h build/aplite/app_resources.pbpack
    [12/22] c: build/aplite/appinfo.auto.c -> build/aplite/appinfo.auto.c.10.o
    [13/22] c: src/mywatchface.c -> build/src/mywatchface.c.10.o
    [14/22] cprogram: build/src/mywatchface.c.10.o build/aplite/appinfo.auto.c.10.o -> build/aplite/pebble-app.elf
    [15/22] Start bundling: 
    [17/22] pebble-app.raw.bin: build/basalt/pebble-app.elf -> build/basalt/pebble-app.raw.bin
    [17/22] report-memory-usage: build/basalt/pebble-app.elf build/basalt/app_resources.pbpack
    [18/22] pebble-app.raw.bin: build/aplite/pebble-app.elf -> build/aplite/pebble-app.raw.bin
    [19/22] report-memory-usage: build/aplite/pebble-app.elf build/aplite/app_resources.pbpack
    [20/22] inject-metadata: build/aplite/pebble-app.raw.bin build/aplite/pebble-app.elf build/aplite/app_resources.pbpack -> build/aplite/pebble-app.bin
    [21/22] inject-metadata: build/basalt/pebble-app.raw.bin build/basalt/pebble-app.elf build/basalt/app_resources.pbpack -> build/basalt/pebble-app.bin
    -------------------------------------------------------
    APLITE APP MEMORY USAGE
    Total size of resources:        4092 bytes / 96KB
    Total footprint in RAM:         853 bytes / 24KB
    Free RAM available (heap):      23723 bytes
    ------------------------------------------------------- 
    -------------------------------------------------------
    BASALT APP MEMORY USAGE
    Total size of resources:        4092 bytes / 256KB
    Total footprint in RAM:         853 bytes / 64KB
    Free RAM available (heap):      64683 bytes
    ------------------------------------------------------- 
    [22/22] mywatchface.pbw: build/basalt/pebble-app.bin build/basalt/app_resources.pbpack build/aplite/pebble-app.bin build/aplite/app_resources.pbpack -> build/mywatchface.pbw
    Waf: Leaving directory `/Users/USERNAME/project/pebble/mywatchface/build'
    'build' finished successfully (0.728s)
    
  8. 編譯完成後可以看到 project (mywatchface) 目錄下產生了一個子目錄 build,並且包含 mywatchface.pbw

    .
    ├── appinfo.json
    ├── build
    │   ├── aplite
    │   │   ├── app_resources.pbpack
    │   │   ├── appinfo.auto.c
    │   │   ├── appinfo.auto.c.10.o
    │   │   ├── pebble-app.bin
    │   │   ├── pebble-app.elf
    │   │   ├── pebble-app.raw.bin
    │   │   ├── pebble_app.ld.auto
    │   │   └── src
    │   │       └── resource_ids.auto.h
    │   ├── basalt
    │   │   ├── app_resources.pbpack
    │   │   ├── appinfo.auto.c
    │   │   ├── appinfo.auto.c.9.o
    │   │   ├── pebble-app.bin
    │   │   ├── pebble-app.elf
    │   │   ├── pebble-app.raw.bin
    │   │   ├── pebble_app.ld.auto
    │   │   └── src
    │   │       └── resource_ids.auto.h
    │   ├── c4che
    │   │   ├── _cache.py
    │   │   ├── aplite_cache.py
    │   │   ├── basalt_cache.py
    │   │   └── build.config.py
    │   ├── config.log
    │   ├── mywatchface.pbw
    │   ├── pebble-app.map
    │   └── src
    │       ├── mywatchface.c.10.o
    │       └── mywatchface.c.9.o
    ├── resources
    ├── src
    │   └── mywatchface.c
    └── wscript
    
  9. 用模擬器執行 app

    Pebble SDK 提供 Aplite 和 Basalt 兩種模擬器,用以下指令把 app 安裝到模擬器執行

    • Aplite: $ pebble install --emulator aplite
    • Basalt: $ pebble install --emulator basalt

    執行結果:

    Pebble emulator

  10. 將 app 安裝到手錶上執行

    要怎麼把編譯完成的 app 放到手錶上執行?現在有三個角色:PC(開發、編譯 app)、Smartphone(已安裝 Pebble Time App)、Pebble 手錶。原則上,是要將 PC 上編譯完成的 app 先傳送到 Smartphone 上,再透過 Pebble Time App 把 app 安裝至手錶。

    依據官方文件 COMMAND LINE TOOL 的說明,要使用 install 指令來安裝 app,並有四種連線方式供我們選擇(如下),由於 Smartphone 和 Pebble Watch 是透過藍牙連線,因此我推測這四種連線方式,應該是指 PC 與 Smartphone 之間。

    Install App to Pebble

    1. 透過 WiFi

      $ pebble install --phone IP

    2. 透過 QEMU

      $ pebble install --qemu HOST:PORT

    3. 透過 Bluetooth

      $ pebble install --serial SERIAL

    4. 透過 CloudPebble

      $ pebble install --cloudpebble

    我選擇透過 WiFi 安裝 app (mywatchface) 到手錶上,步驟如下:

    Step 1. 參考官網的說明:setup the Pebble Developer Connection 先設定 smartphone 上的 Pebble Time App,在 DEVELOPER 畫面裡會提供一個 "Listening on" IP,要記下來,如下圖。

    Listening on IP

    Step 2. Smartphone 和 Pebble Watch 之間的藍牙保持連線

    Step 3. $ pebble install --phone IP

    **注意:** PC 和 Smartphone 必須在同一個 WiFi Access Point 底下,參數 IP 就是 Pebble Time App 裡提供的 "Listening on" IP
    

    Step 4. Pebble Watch 上的執行結果

    mywatchface on Pebble

    mywatchface 是由 Pebble SDK 自動產生的一個基本的 app,主要功能是能夠接收 Up, Down, Select 三個 key event(也就是手錶右側的三個實體按鍵),並且在螢幕上顯示出對應的訊息。

以上就編譯完成一個基本的 app 並且可以用模擬器和安裝到手錶上執行。

Reference:

Comments

Comments powered by Disqus