Terrarium 1.5 上架 - 給工程師的 UI 原型製作工具

受不了修改介面時無盡的存檔-重編-執行 (read-eval-print loop) 迴圈了嗎?
對於肩膀後面有人 (老闆, 與你配合的設計師, 或同時兼任) 盯著螢幕等你套用更新而感到焦慮嗎?
別擔心, Terrarium 來拯救咧~

Terrarium 是一套互動式介面原型製作 (interactive UI prototyping) 工具, 與 Framer.js 或 Facebook Origami 等專案不同之處在於, 這是專門設計給像你我一般的 碼農, 嗯, 工程師使用的.

只要編輯器內容一有更動, 預覽畫面立刻即時更新 (live reload), 讓你連 ctrl-s 都不用按! 不只桌面版全平台制霸 (感謝 Qt), 連手機和平板上都能改 code 即時看結果.. 這麼厲害的小工具, 就讓我們來看看 1.5 版有什麼更新吧:

除了很明顯替未來專案管理功能鋪路的介面之外, 也帶來了新圖示、嶄新 Navigation Bar 與文字選取功能 (這個超難做的哭哭).

給 App Store 和 Google Play 的下載連結在老地方:

另外可以由 Github 直接下載包括 apk, Mac OSX 與 Ubuntu 等平台的套件. 歡迎到 Twitter 上發摟 @TerrariumApp 獲取新消息, 或來信直接報 bug 與我聯絡!

Happy hacking!
penk

Terrariumapp 網站更新, 採用了時下流行的 Landing Page 模版

趁著週末上線了新版的 Terrariumapp.com 網站, 現在大概長這樣:

另外順手弄了 @Terrariumapp 的推特帳號, 接下來一些期待許久的功能也會陸續更新, 敬請支持指教!

Terrarium.app - COSCUP 2014 閃電秀與幕後花絮

搭帳篷搶報名的概念 (Photo Credit: Rex Tsai)

今年的 COSCUP 順利結束了! 感謝所有與會者與辛苦的工作人員. COSCUP 不但是我社群分享經驗的起點, 也一直如同 Bob 所說的, 是每年充電並保持熱情與動力的重要聚會. 這次於閃電秀分享了 Terrarium, 讓來自台灣的流量和下載數都出現了一個小小的 peak. 會後也收到不少建議與回饋, 感激開心自然不在話下, 一些小細節在此稍微作整理.

首先是閃電秀錄影, 感謝馬克砲大大神速上傳:

• 沒什麼內容的投影片在此
• 影片內容和投影片都是 CC BY-SA 3.0 授權, 請安心使用
• flappy bird 是改來的
• 講完還沒回座位就收到票亭老闆 hlb 大人的票, 馬上解掉

之前才和朋友聊到, 做這種小玩具專案的時候不自覺都會有「台灣老闆心態」:

• 技術不深
• 開發時間短
• 展示效果驚人（假的也沒關係）
• 有時事、話題性

仔細想想也沒什麼不好, 就像 DHH 說不要藉由引入外部動機消滅 open source 專案的初衷一樣. 那麼繼續加油吧!

慶祝上 Qt Showroom, Terrarium 新版本限時免費中!

Terrarium 計畫登上 Qt Project 的 Showroom 啦! 剛好昨天發佈了 1.2 版的更新 (iOS 審核中), 歡迎下載使用

1.2 版新功能

• 升級至 Qt 5.3.1
• 支援 Android L 與 Mac OSX 10.10
• 基本的存檔 (LocalStorage) 和 Email 匯出功能
• View 的全螢幕預覽模式
• 行號與游標顯示

之後會加上 Github Gist 匯出 (應該啦), 歡迎測試, 有任何意見也請不吝指教 XD

Terrarium for iPad is now available on App Store

Terrarium, the QtQuick Editor/Viewer, is now available on App Store:

• 
• 

Happy Hacking! :-)

QtQuick Rapid Prototyping with Terrarium

Write QML Everywhere, See Result Instantly

Get It on Google Play

Terrarium is now available on Google Play! And you can find it for Mac OSX or Ubuntu Linux (amd64 / i386) too! Please refer to the install section on project website.

Notes on Publish QML App to Google Play

Build your code normally with qmake && make, install it to a destination, say, android-terrarium:

make install INSTALL_ROOT=../android-terrarium

Pack and sign the APK by androiddeployqt command:

~/Qt5/5.3/android_armv7/bin/androiddeployqt --input android-libTerrarium.so-deployment-settings.json --output ../android-terrarium --release --sign ../TerrariumApp.keystore TerrariumApp

Here's the catch:

• There's a ANDROID_DEPLOYMENT_DEPENDENCIES variable for qmake profile, here's my reference
• androiddeployqt invokes SDK tools and changes project name to "QtApp" every time, that also overwritten build.xml. I fixed it by using a script workaround..
• Default AndroidManifest located at Qt5/5.3/android_armv7/src/android/java/AndroidManifest.xml, things you must change are package name, android:icon, uses-permission and uses-feature. Please refer to file on Github

Let's write QML everywhere!

使用 Terrarium 作 QML 快速原型開發

隨時隨地．立竿見影

聽說現在寫標題流行用 Apple 體, 我們也亂寫一個 XD

Google Play 下載

沒錯, Terrarium 上架 Google Play 啦! 另外還有 Mac 版 及 Ubuntu Linux 版 (amd64 / i386) 可以下載! 詳情請見網站連結.

發佈 Qt App 到 Google Play 的方法和心得

用冷門方案打包 apk 本來就吃力不討好, 加上不用 Eclipse 或 Qt Creator 全部手動, 可以採的雷我幾乎全踩過一遍了..

總之一般理論上來說的方法是先 qmake && make 完後指定安裝路徑, 比如說

make install INSTALL_ROOT=../android-terrarium

接著用 androiddeployqt 這個工具打包 apk:

~/Qt5/5.3/android_armv7/bin/androiddeployqt --input android-libTerrarium.so-deployment-settings.json --output ../android-terrarium --release --sign ../TerrariumApp.keystore TerrariumApp

但是有幾點要特別注意:

• qmake profile 有一個 ANDROID_DEPLOYMENT_DEPENDENCIES 變數可以用, 但會 override 原本內容, 所以要寫就得寫齊所有要用的 lib, 可以參考這邊寫法
• androiddeployqt 不知道哪裡想不開, 會自己呼叫 SDK tools 把 project name 改成 "QtApp", 難怪改 build.xml 都沒用除非手動 ant release 再 jarsigner / zipalign. 我是寫 script 去 workaround 它..
• 預設的 AndroidManifest 在 Qt5/5.3/android_armv7/src/android/java/AndroidManifest.xml, 其中必改的內容有 package name, android:icon 和 uses-permission 及 uses-feature. 這部份就參考 Github 上的檔案 吧

大概是這樣, 總之繼續往上架之路努力..這兩天包了快十個平台不同格式的套件 XD

最後送大家一張「隨時隨地寫 QML」的照片, 哪天想不開就放網站當 landing page 吧!

(圖片來自 placeit.net, 授權是 Standard Commercial License. 請不要看超過 1000 次, 不然我要多付錢)