Skip to main content

20 posts tagged with "FirefoxOS"

View All Tags

· One min read

I got my Dell XPS 13 (9343) for a while and decide to install Ubuntu 15.10 as duel boot.

By following the guide its pretty easy to get a Ubuntu environment. To setup my daily develop environment, I take the foxbox setup script for 14.04 and everything works fine.

So for windows user who want develop FirefoxOS gaia with real device, I recommend you try foxbox first. If you have more commitment, install the Ubuntu. With duel boot you can keep windows and have a more developer friendly environment to develop connecting devices.

· One min read

As the Firefox OS Settings Peer, I still feel its not efficient to toggle everything in Settings, because it needs too many steps such as: 1. Open Settings app, 2. Find proper item, which may located in sub panels, 3. Do the action with that setting.

During hackthon in Taipei last month, Yifan and I made the Quick Settings Enhancement Addon, and now its available on marketplace (within the :debug mode).

How it looks like?

The addon add plenty of Settings switch(NFC, Internet Sharing, Lock Orientation, Battery Saving Mode, Geolocation, Enable USB Storage), Settings shortcut (Developer panel configs), Power menu shortcut (Silence Incomming Calls) and.....the Flashlight to quick settings menu!

We also found it will take a lot of estate of your utility tray, so FYR we'd propose a at most 2 clicks mockup to handle those quick settings.

The codebase is at https://github.com/gasolin/fxos-quick-settings Welcome to contribute.

· 4 min read

Here she is!!

要開始開發 Firefox OS 的 Web 端(Gaia),並不像開發一般網站一樣那麼容易。在開始改網頁之前,通常要把相關的開發文件讀一遍 / 試一遍,才能順利把開發環境設定好。 而把環境設定好可能已經花了半天時間,這時原本想要改程式的精力也所剩不多了。

去年有感於此,花了些時間整合了一套快速設定 Firefox OS 開發環境的工具「FoxBox」,透過 Virtualbox 虛擬機與 vagrant 自動化工具來達成自動部署 Gaia 的開發環境。最近把 FoxBox 基礎作業系統版本升級了一下(使用 Ubuntu 14.04LTS),在 Macbook 或 Ubuntu 桌面電腦上,只需用一個小時左右的時間,就可以自動安裝好整套開發環境。

Vagrant + VM 的優點

使用 Vagrant 搭配虛擬機(VMWare 或免費的 Virtualbox)的好處多多,其一是簡化了開發環境的需求,由於主流的作業系統(Windows,Mac,Ubuntu/RedHat)都支援虛擬機,透過在虛擬機上使用單一的作業系統,可以大幅簡化安裝指令。 其二則是自動化安裝,透過 Vagrantfile 指定要執行的指令 (放在 scripts 資料夾下),最後跑出來的結果只有安裝成功一種。如果失敗了表示自動安裝的指令沒寫好,初級開發者不用在環境安裝時就強迫得學太多細節。 其三是開發環境隔離,命令都跑在 VM 中,在之後開發或升級的過程中出現任何問題,隨時都可以重新建立一個乾淨的開發環境。

使用 FoxBox 這套開發環境設定工具,當其他人碰到問題時,也可以更容易地重現問題。

透過 Vagrant 設定,FoxBox 提供實體機與虛擬機共享檔案夾,並支援 USB 實機偵錯。

雖然開發環境隔離,但是 FoxBox 預設的設定即提供實體機與虛擬機共享檔案夾。裝好開發環境後,你依然可以使用目前作業系統上自己習慣的編輯器來修改程式碼,然後在 VM 中執行命令。

FoxBox 預設也將 USB port 串接到 VM 中,所以在 VM 中也可以直接接收到實機的偵錯訊息 。

設定的流程

連上網路,在主機上執行以下命令

$ git clone https://github.com/gasolin/foxbox.git $ cd foxbox $ ./configure.sh 除了開始時需要指定網路介面卡,並輸入主機的密碼(用來和虛擬機共享檔案夾)外,其中大部分的流程都是自動化的。

當 VM 跑起來後,登入 VM(帳號 / 密碼為 vagrant/vagrant)並執行以下命令:

> $ gaia_init.sh
> $ cd gaia
> $ make`

即可順利編譯好 Firefox OS 的 Web 端(Gaia)程式碼囉!

· 2 min read

Last week I've post on dev-gaia to notice the change of JSDoc generator.

Now gaia's jsdoc generator takes standard jsdoc config format from each app's jsdoc.json file. And app owner could customize its look and feel if they prefer to do so. http://usejsdoc.org/about-configuring-jsdoc.html

Here's the working jsdoc for Firefox OS settings app http://gasolin.github.io/gaia/settings/ .

The trick is done by gulp and shell commands, which can be apply on any other projects. Here's how I did it.

First of all is install required packages

$ npm install gulp gulp-shell jsdoc --save-dev Then open gulpfile.js and add following scripts:

var gulp = require('gulp'); var shell = require('gulp-shell');

gulp.task('jsdoc', shell.task([   './node_modules/jsdoc/jsdoc.js -c jsdoc.json' ])); (It's an simplified version because gaia contains 20+ web apps in it, so I add some tree-walking code to create bunch of gulp tasks. But basically its the same) The simplified version is now available for reuse in webapplate.

Bonus section:

Here's how I upload jsdoc (http://gasolin.github.io/gaia/settings/ , http://gasolin.github.io/gaia/system/) to github gh pages.

Add another section in gulpfile.js with following script

var gulp = require('gulp'); var ghPages = require('gulp-gh-pages');

...

gulp.task('github', ['jsdoc'], function() {   return gulp.src('./docs/*/')     .pipe(ghPages()); }); Run gulp github command and the build tool will generate jsdoc and upload to github page automatically.

· One min read

I've finished another iteration of dogfooding with Firefox OS 2.2. This is the version by far I'm pretty enjoy to use in daily base, without a backup Android phone.

Since my main usage of smart phone is browsing news and web sites, the new Browser frame serves me well.

The edge swiping is still awesome. Swipe left to right or vice versa from the off screen is more efficient than task manager.

In task manager, a small close button in bottom left of each card, make a more intuitive way to clean a web app.

Some web app made the dogfood more easier.

  • FeedSpider: The news feed via feedly

  • Social

  • Facebook and Twitter: Browse their web site, then add them on Homescreen* Map

  • Google Map:  Browse the web site, then add it on Homescreen* Note taking The last thing I want to have is the bookmark sync.

Since the dogfooding experience is so positive, I'll challenge with dogfooding nightly build in next month.

· 3 min read

This time, its different. The transpilers are build-time polyfills that fill the gap of current browser/server implementation and the newest JS/CSS specs.

Transpilers trans-compile Javascript and CSS to current workable version, so developers could be more productive with JS/CSS latest features and transpilers would translate them into current supported version of code.

From my opinion the most useful es6 feature is arrow functions (=>) which comes from coffeescript. This syntax sugar bind the this value automatically, so developer wont forgot the binding anymore.

The original code is

(function() {
‘use strict’;
document.addEventListener(‘DocumentLocalized’, function() {
// App.init();
}.bind(this));
}());

We can use arrow function to replace function() {}.bind(this) to () => {}

(function() {
‘use strict’;
document.addEventListener(‘DocumentLocalized’, () => {
// App.init();
});
}());

Currently the arrow functions only default enabled on Firefox. So developer could not use this directly on their project. With babel javascript transpiler the js could be translated to current workable version automatically.

(function() {
‘use strict’;
document.addEventListener(‘DocumentLocalized’, function() {
// App.init();
});
}());

The transpiler will know the content does not need 'this' reference and skip the binding. Note the Javascript transpiler still stick into vanilla javascript. It does not invent new syntax, but it make new specs could be used or experiment in current environment.

From CSS perspective, CSS variables brings variables into CSS. Pre-define some color and use everywhere on project is possible.

The origin style is

a {
color: #847AD1;
}

pre {
padding: 10px;
}

It's frustrated when the stylesheets expand larger and we need to change the new color or size everywhere.

We can use CSS variables to predefine the changeable stuff into pseudo ':root' element.

:root {
–maincolor: #847AD1;
–size: 10px;
}

a {
color: var(–maincolor);
}

pre {
padding: var(–size);
}

Looks good. But the same situation occurred. Currently the CSS variables only support on Firefox. So developer could not use this directly on their project. With myth CSS transpiler the CSS could be translated to current workable version automatically.

a {
color: #847AD1;
}

pre {
padding: 10px;
}

Note the CSS transpiler still stick into CSS specs. It does not invent new syntaxes like LESS or SASS does. It just make new CSS specs could be used or experiment in current environment.

Besides the feature polyfill, running transpiler before deploy also help developer catch out the error since transpiler will traverse the source and parsing syntaxes. Transpiler will bark you when any error in your source.

You may wonder setup an environment with above JS/CSS transpiler seems take some time. webapplate 2.3.0 already integrated with babel  and myth grunt tasks to auto transpile your JS/CSS code to current workable version. webapplate jshint/githook also support es6 syntax validation (yes the .jshintrc is exactly borrowed from gaia project), so your project is future proved and keep maintainable.

· 2 min read

Claim: this exercise is for experiment, not for product.

According to wikipedia, f.lux adjusts a computer display's color temperature according to its location and time of day. I always use it on my Mac to make my eyes more comfortable at night.

So, the topic is about if we can bring that experience on Firefox OS. Adjust display's color temperature generally is a system specific issue. But actually it can be categorized as an CSS trick if we like to make it on web (a gist to mimic the f.lux effect).

To quick experiment if it doable or not, the validation steps are:

1. open the WebIDE on Firefox Developer Edition 2. download and open emulator (I choose v2.2) on WebIDE. 3. To debug system app, choose System from top left selector in WebIDE. 4. once connected,  select the html tag and add style **filter: brightness(0.8) sepia(0.9);** into the element.

The live view changed to f.lux like color temperature.

So it works!

To make it persistent on real device, edit [gaia/apps/system/style/system/system.css](https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/system/system.css#L5), add above style into html tag. Run make reset-gaia then you have the style applied on device.

What's Next

The above experiment will change your device's color temperature permanently, which is not what f.lux do. To make it as option, you can add an option in settings > developer panel and add a observer in system to dynamically add such style into system html tag.

If you feel the strong desire to have such feature happen on Firefox OS device, fire a bug on bugzilla.

· One min read

 

There are several source code visualization tools available for choose. I've tried Code Swarm long time ago and this time I'd like to try something that can be done on web directly. So, here's the Gaia source code visulization rendered by CodeFlower via D3.js.

The prosperity of blossom denotes different

 

Orange is the settings app flower. The upperside are modulized setting panels. We can see good order of them. The downside crowds are things that not that modularized.

 

The purple sparkled flower is gaia web components. The main part is gaia-header, the top left part is gaia-grid.

The system app is a flower with a more concrete shape.

The calendar app (in yellow) looks like a pretty Dandelion.

 What about others? go Gaia source code visulization and check by yourself. (The repo is a digest from 2015/1/7 master)

And you can make your own by forking CodeFlower from github.

· 13 min read

前陣子 Facebook 推出一套名為 FLUX 的前端程式架構,期望能幫過去沒有條理,程式多了結構就亂得像一團麵條的 Javascript 程式寫法找到一個理想的組織方法。

FLUX 簡介

視圖(View)-> 操作(Action)-> 分配器(Dispatcher)-> 資料處理器(Store)-> 繪圖者(Renderer)-> 視圖(View) FLUX 的基本原理有別於常用的 MVC(Model/View/Controller)或 MVVM(Model/View/ViewModel)是在 M,V,C(VM)三者之間互相傳遞或修改資料,

 

MVC (image from fluxxer)

FLUX 重新定義整個組織架構為單向的視圖(View)-> 操作(Action)-> 分配器(Dispatcher)-> 資料處理器(Store)-> 繪圖者(Renderer)->  視圖(View)的運作流程。

FLUX (image from fluxxer)

就我的理解,FLUX 的架構可以拆分為三個重點流程:

  • 跟視圖(View)有關的操作(Action),都透過事件註冊到分配器(Dispatcher)去。
  • 分配器 (Dispatcher)負責將操作(Action)傳遞給需要的資料處理器(Store)。
  • 資料處理器(Store)負責跟資料直接相關的操作。若資料處理器(Store)修改的結果需要反映到視圖(View)上,可以透過發送訊息通知給繪圖者(Renderer)處理。這邊講到了原本 FLUX 概念圖中沒有提到的繪圖者(Renderer)這個角色,在 Facebook 中他們是用 ReactJS 處理。

瞭解其基本架構之後,我發現其實就算不用他們提供的函式庫,用 Javascript 內建的 addEventListener, handleEvent, customEvent 等方法,也可以利用前面所提的三個重點,漸進寫出符合 FLUX 精神的程式。

目前的 JS 組織方式

一個常見的 JS 檔案,一般的架構是

var App = {    init: function app_init() {       // get view       this.view1 = document.getElementById('xxx1');       this.view2 = document.getElementById('xxx2');             // do stuff       this.view1.addEventListener('click', function() {         // do something       });       this.view2.addEventListener('keyup', function() {         // do something       });     } }; 若我們想要將視圖(View)的操作從 init 分離開來,大部分的人會這樣做

 var App = {     init: function app_init() {       // get view       this.view1 = document.getElementById('xxx1');       this.view2 = document.getElementById('xxx2');             // do stuff       this.view1.addEventListener('click', this.clickView1);       this.view2.addEventListener('keyup', this.keyupView2);     },

    clickView1: function app_clickView1() {        // do something     },

    keyupView2: function app_keyupView2() {        // do something     }

}; 如果在 clickView1 或 keyupView2 中要呼叫到 App 裡的參數或方法,那麼我們需要在 addEventListener 時使用 bind (this)

 var App = {     init: function app_init() {       // get view       this.view1 = document.getElementById('xxx1');       this.view2 = document.getElementById('xxx2');             // do stuff       this.view1.addEventListener('click', this.clickView1.bind(this));       this.view2.addEventListener('keyup', this.keyupView2.bind(this));     },

    clickView1: function app_clickView1() {        // do something     },

    keyupView2: function app_keyupView2() {        // do something        this.clickView1();     }

}; 大多數書籍的範例大概就停在這裡,沒有再進一步探討程式的組織架構了。即使是龐大的 Javascript 專案如 Gaia,不少部分的程式碼組織方式也是如此。在這種組織方式裡,若有很多的視圖(View)需要操作或修改,我們的程式碼就會開始亂起來。

下面來試著將以上程式漸進改為 FLUX 架構。

改進建議一:將 handleEvent 當作 Dispatcher 來使用

跟視圖(View)有關的操作(Action),都透過事件註冊到分配器(Dispatcher)去。 (溫馨提示:IE 9 以上版本才有支援 handleEvent 方法,在之前版本上使用要加 polyfill)

我們先來想想看視圖(View)跟操作(Action)在前端 Javascript 程式中分別代表著什麼。 視圖(View)很明顯,就是透過 getElementById 等方法,從 HTML 中取得代表對應節點(Node)的元素(element)。

若想要套用 FLUX 架構,我們可以將附加在各個元素(element)上的事件行為分離,將事件註冊到一個統一的地方(分配器),在這個地方對不同的事件進行操作。

 Javascript 內建的分配器叫做 handleEvent,它可以拿來處理任何事件 Event,寫法如下。

 var App = {     init: function app_init() {       // get view       this.view1 = document.getElementById('xxx1');       this.view2 = document.getElementById('xxx2');             // do stuff       this.view1.addEventListener('click', this);       this.view2.addEventListener('keyup', this);     },

    handleEvent: app_handleEvent(evt) {        switch (evt.type) {          case 'click':            switch (evt.target) {               case this.view1:                 this.clickView1();                 break;            }            break;          case 'keyup':             switch (evt.target) {               case this.view2:                 this.keyupView2();                 break;             }        }     },

    clickView1: function app_clickView1() {        // do something     },

    keyupView2: function app_keyupView2() {        // do something        this.clickView1();     }

}; 這麼做帶來的明顯好處是所有的呼叫都統一在 handleEvent 中,可以更容易地追查到。

這麼寫也可以在 addEventListener/removeEventListener 時不用使用 bind (this),而 bind (this) 經常有些 side effect 需要特別留意。

例如假使我們想要反註冊 view1 上的 click 方法,使用以下寫法

 this.view1.removeEventListener ('click', this.clickView1.bind (this)); 其實並沒有將第一個 event 移除。因為使用了 .bind(this) 後,回傳的其實是一個新的 instance...。 正確的寫法是 this.bindClickView1 = this.clickView1.bind (this) this.view1.addEventListener ('click', this.bindClickView1); ... this.view1.removeEventListener ('click', this.bindClickView1); 用 handleEvent 可以省點事,要反註冊時也傳入 this 即可。 this.view1.removeEventListener ('click', this);

改進建議二:將資料處理的部分分離,使用自訂事件來改變 Store 狀態

分配器 (Dispatcher)負責將操作(Action)傳遞給需要的資料處理器(Store) 資料處理器(Store)負責跟資料直接相關的操作。在稍大的 Web App 中,我們可以另外定一個 Object 來處理資料相關的事宜。一般我們的寫法會是

// Store.js function Store() {   this._data: 0; };

Store.prototype = {   getSomething: function s_getSomething() {     return this._data;   },

  doSomething: function s_doSomething() {     this._data += 1;   },

  setSomething: function s_setSomething(val) {     this._data = val;   } };

// App.js var App = {   this.store = new Store();   this.store.init();   this.store.getSomething();   this.store.doSomething();   this.store.setSomething (2); }; 若想要套用 FLUX 架構,首先我們要避免從資料處理器(Store)外部直接改變資料處理器(Store)。我們可以透過在呼叫端使用 window.DispatchEvent 發送自訂事件(CustomEvent),並在資料處理器(Store)中接收自訂事件來做到。

如此一來,資料處理器(Store)將只留下 get 方法來讓外部取得 Store 想提供的資料。

另外如果程式碼改善進入到下一個重點,在操作(Action)時應該不需要再呼叫 Store.getSomething 了,我們將資料處理器(Store)的 getSomething 方法留著給繪圖者(Renderer)使用 。

// Store.js function Store() {   this._data: 0; };

Store.prototype = {   init: function s_init() {      window.addEventListener('store_do', this);      window.addEventListener('store_set', this);   },

  handleEvent: s_handleEvent(evt) {     switch(evt.type) {       case 'store_do':         this.doSomething();         break;       case 'store_set':         this.setSomething(evt.detail.val);         break;     }   },

  getSomething: function s_getSomething() {     return this._data;   },

  _doSomething: function s_doSomething() {     this._data += 1;   },

  _setSomething: function s_setSomething(val) {     this._data = val;   } };

// App.js var App = {   this.store = new Store();   this.store.init();   //this.store.getSomething();   window..dispatchEvent(new CustomEvent('store_do'));   **window..dispatchEvent(new CustomEvent('store_set',**     {'detail':{'val':2}}   )); }; 這麼做帶來的明顯好處是測試時可以簡單地將 Store 與 App 分開來測試,這對大型 App 是很重要的。

改進建議三:讓 Renderer 來處理視圖

若資料處理器(Store)修改的結果需要反映到視圖(View)上,可以透過發送訊息通知給繪圖者(Renderer)處理 > //  Renderer.js var ClickRenderer = {   init: function s_init(element, Store) {      this.element = element;      this.store = Store;      window.addEventListener('render_view1', this);   },

  handleEvent: s_handleEvent(evt) {     switch(evt.type) {       case 'render_view1':         this.element.textConent = this.store.getSomething();         break;     }   }};

// Store.js function Store() {   this._data: 0; };

Store.prototype = {   init: function s_init() {      window.addEventListener('store_do', this);      window.addEventListener('store_set', this);   },

  handleEvent: s_handleEvent(evt) {     switch(evt.type) {       case 'store_do':         this.doSomething();         break;       case 'store_set':         this.setSomething(evt.detail.val);         break;     }   },

  getSomething: function s_getSomething() {     return this._data;   },

  _doSomething: function s_doSomething() {     this._data += 1;     window..dispatchEvent(new CustomEvent('render_view1'));   },

  _setSomething: function s_setSomething(val) {     this._data = val;   } };

// App.js var App = {   init: function a_init() {     // get view     this.view1 = document.getElementById('xxx1');     this.view2 = document.getElementById('xxx2');     this.store = new Store();     this.store.init();     ClickRenderer.init(this.view1, **this.store);**   },

    handleEvent: a_handleEvent(evt) {     window..dispatchEvent(new CustomEvent('store_do'));     //Store.setSomething(2)     window..dispatchEvent(new CustomEvent('store_set',       {'detail':{'val':2}}     )); }; 上段程式在 App 中註冊了 ClickRenderer,並傳入 Store 與 所需的 View 元件。所有的介面更新全交由 ClickRenderer 處理。

(另一個方法是讓繪圖者(Renderer)監看資料處理器(Store)的狀態,然後去改變視圖(View))  http://fluxxor.com/documentation/store-watch-mixin.html

總結

整理完後,一般 javascript 套用 flux 架構的運作流程如下:

簡而言之,上面的各種建議是鼓勵大家多使用 Javascript 內建的 addEventListener, handleEvent, customEvent 等方法。透過大量使用 event,我們可以改善 Javascript 程式邏輯,資料,與介面元件之間的關聯程度。

將 FLUX 架構拆分為三個重點流程來理解或實踐的好處,是我們能漸進地遵循其中一些方法來改善我們現有的程式架構。

以上是我關於如何使用 FLUX 架構在一般 Javascript 組織方式的第三個版本,可能有些錯謬之處,還迎大家討論或給予建議。

· 2 min read

FoxBox is the project that intent to provide a battery included Firefox OS build environment.

The goal of foxbox is to try any approach that make new user can do as less as possible to start the FirefoxOS development

Our first take is use vagrant with virtualbox to make major platform users can try FirefoxOS dev in VM.

It will be great to setup the current version of foxbox in your desktop environment

http://github.com/gasolin/foxbox

And record obstacles you encountered here https://github.com/gasolin/foxbox/issues?state=open. There are some issues (but not the limit) that might be worth to do in the future version of foxbox.

Note that you require a desktop with INTEL VT-x/AMD-V hardware virtualization support(Windows8 or Mac already enabled it), at least 4GB RAM and about 10~40GB disk space(for gaia or full B2G development).

FoxBox has been approved by the Google Summer of Code administrator http://wiki.mozilla.org/Community:SummerOfCode14 , so its perfect time to step up, try FoxBox, fix issues that every others will encounter, save everybody's time and start make your own Firefox OS phone.

If you'd like to contribute FoxBox for SummerOfCode14. We expect you could find out the interesting topic you want to contribute or any other way that can better achieve FoxBox's goal.  

· 2 min read

I'm pleased to release first FoxBox version that may save a lot of time for people who wants to give FirefoxOS development a try.

For web developer who wants to contribute to gaia might meet a serious problem that they might have limit knowledge of *nix system. But to build gaia, the command line and make script is essential.

For developer who wants to contribute to B2G project, a bunch of per-requisite settings must be configured well before really digging into the code.

FoxBox could help (currently I mainly focus on) B2G/gaia developer quickly setup a working environment in VM.

Generally FoxBox 0.4 provide a Vagrantfile which automatically configure a VM with bunch of tools you need for building FirefoxOS and gaia development.

FoxBox have put a comprehend list of USB vendors, so any Android/FirefoxOS smartphone plugged can be identified.

With vagrant's NFS shared folder, developer can use their favorite editor to code.

FoxBox also bundled with a minimum GUI environment that enable you to test FirefoxOS in VM. Firefox Nightly will be pre-installed for you as well!

Read README for more detail.

Happy Hacking!

Disclaim: Though I work for mozilla, FoxBox is not an official project of Mozilla. Currently its just my side project create around Chinese New Year's holiday.

· 2 min read

 

List of UI elements

Though what FirefoxOS encourage developers to develop for the (general) Web, but not for FirefoxOS only. There's still a portion of developers would prefer to start their very first mobile web app with FirefoxOS native look and feel.

From Feb 2013, I've made my first Firefox/OS marketplace webapp: UI Demos , which demonstrate FirefoxOS (gaia) UI Building-Blocks elements and provide correspondent code blocks for reference.  (The wrapper version of UI Demos is also available in Android Play Store)

Basically those FirefoxOS(gaia) UI Building-Blocks are a set of UI elements defined purely in CSS. So you can include correspondent styles and see your web changed to a 'mobile' looking.

 

Custom headers

Since these UI are intended to serve the need of FirefoxOS(gaia) presence, they looks not well in other browser. (update: Include cross_browser.css if you want your webapp can run on other browsers.)

Recently FirefoxOS UI related developers starting a project called "Building-Blocks" to make developers outside of FirefoxOS (gaia) can reuse the same UI more easily.

https://github.com/buildingfirefoxos/Building-Blocks/

  1. Currently you can git clone the code from git https://github.com/buildingfirefoxos/Building-Blocks.git

2. I also register 'building-blocks' to bower list so my webapplate project or yeoman generators can reuse it with bower. Use bower (need ran 'npm install -g bower' first) to install 'building-blocks' into your project is easy $ bower install building-blocks

Or you can predefined required libraries in 'bower.json' file. then run 'bower install' directly.

For code and demos, please install UI Demos by your Desktop Firefox browser or FirefoxOS devices.

 

Reusable code samples

· 2 min read

原來就預期今年會有很多 OS 出現,但沒想到有那麼多。 來簡單整理一下列個表。如果有漏掉的,請路過的讀者幫忙提醒吧。

後面括號 (Mod) 表示是 Android 的衍生版本。月份是大概印象,與實際日期可能有出入。

這些 OS 其中當然有些只是拿來賺眼球,還沒有實際出貨計劃的 OS。 不過廠商群雄並起逐鹿的感覺,當可確認現在已進入後 PC 時代無疑。

3 月

OUYA (Mod) 遊戲機與自有市集

Smartisn OS (錘子 OS, Mod)

BlackBerry 10 OS 已出兩隻手機

5 月

Android 4.3 + Google Services 各種跨版本可用的 Google 服務,扁平化與卡片式設計 現有設備升級,n 台新機

Chrome OS Pixel 筆電與 Chrome box

7 月

FirefoxOS 1.0.1 ZTE open, TCL One touch Fire

Ubuntu Phone 相似的概念性界面還有 for Tablet, for Android, for TV...

9 月 CyanogenMod (Mod) 宣布公司化

Sailfish OS

iOS7 iOS 五年來最大的改版

現有設備升級,iPhone 5s, 5c

SteamOS 客廳與遊戲用 OS

10 月

FirefoxOS 1.1

Ali OS (阿里 OS) 可定製手機

11 月

Tizen 平板

 

Android 4.4 KitKat

· One min read

上週在 Coscup 2013 演講的投影片,介紹為何要參與 Open Source 專案,基本 Firefox OS 架構,和 web 技術人如何運用自己的能力來參與 Gaia 專案開發。

Steps to contribute to firefox os (gaia) 

為這次演講花一個晚上做了一個簡單的 hack demo,在撥打電話時,馬總統會報出正在播的數字。

感謝馬總統跨刀演出。

聲音來自 Open Source 的 Bumbler to speech 專案。

· 3 min read

'repo' is a good tool to manage project with multiple git repositories. Its developed to serve the need to manage Android Open Source Project (AOSP), which counts on bunch of open source projects. Then the 'repo' tool is used for chromium and chromium OS (known as open source version of Chrome browser and Chrome OS). Now Mozilla Boot-to-Gecko (B2G, known as Firefox OS) also adpot the 'repo' tool to manage multiple git repositories.

For a short time of experiment, I find its pretty simple to setup your own 'repo' that can help you manage multiple git repositories. Here is my findings.

To install 'repo' command, you can refer to Installing repo.

Make your own repo

All you have to do is:

1. setup an accessible git repository 2. Put a 'default.xml' file in it 3. Use 'repo init' command to access this  git repository.

Done!

Here is the default.xml sample, there are three main tags:

<div class="highlight">> <span class="cp">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
> <span class="nt">&lt;manifest&gt;</span>
> <span class="c">&lt;!-- define hosts --&gt;</span>
> <span class="nt">&lt;**remote**</span> <span class="na">name=</span><span class="s">"b2g"</span> <span class="na">fetch=</span><span class="s">"https://github.com/mozilla-b2g/"</span><span class="nt">/&gt;</span>
> <span class="c">&lt;!-- default settings --&gt;</span>
> <span class="nt">&lt;**default**</span> <span class="na">sync-j=</span><span class="s">"4"</span><span class="nt">/&gt;</span> <span class="c"><!-- projects -->**project** remote="b2g" revision="refs/heads/master" name="gaia" path="."</manifest>Look at the 'project' tag. It describes that we'd like to sync the 'gaia' repository's 'master' branch from remote 'b2g' host.

Explaination

<?xml version="1.0" encoding="UTF-8">
<manifest>
...
</manifest>

The 'default.xml' syntax is wrapped by 'manifest' tag. It contains three parts of definition:

Hosts

<remote name="b2g" fetch="https://github.com/mozilla-b2g/"/>

remote' tag is used to define the hosts that we'd like to use in projects. Note that it's not the actual git URL, but where the git hosted on.We can specify the actual git URL in 'project' tag.

Projects

<project 
remote="b2g"
revision="refs/heads/master"
name="gaia"
path="."/>

The file describes that we'll like to sync the 'gaia' repository's 'master' branch from remote 'b2g' host.

The 'revision' path is defined within the original .git folder. To switch to branch like "v1.0.1", we could change  "refs/heads/master" to "refs/heads/v1.0.1".

It's almost the same as we have to do with git command.

By the way, default.xml itself is in a git repository, so you can specify versions by branch or whatever you like.

Defaults <default sync-j="4" />

In default tag we can specify the default values in project tag. ex: revisions, default repositories..., etc. 'sync-j' means with this setting, 'repo' command will download 4 resources at the same time.

The usage

Create a folder, switch in it, and run the following command:

> $ repo init -u https://&lt;your own git URL&gt;.gitThen, fetch the resources with command

> $ repo syncTo fetch a branch, run command
> $ repo init -u https://&lt;your own git URL&gt;.git **-b** &lt;branch&gt;

Read Git and repo cheatsheet for more details about how git and repo tool work together.  

Sample

Here is a working sample that able you to sync Mozilla Gaia repositorie, and automatically put vendor customization folder into its 'distribution/' sub-folder to ease the customization work.

https://github.com/gasolin/gaia-custom-repo

Update at 7/29:

A workable process elaboration in slide format http://gasolin.github.io/gaia-repo/

· 3 min read

這陣子在了解如何開發 webapp,其實基本流程很簡單。 要把網頁變成 webapp,最基本的動作就是照著說明寫個 manifest.webapp 檔案,放到網站的根目錄,然後在 web server 的設定加入對應的 MIME type 即可。用 Github Page 放網站的話,最後的 MIME 設定他們都幫我們弄好了。

使用者在電腦上透過 Firefox 安裝 webapp 後,就會多出一個對應的應用程式圖示,開啓這個 WebApp 時不會出現瀏覽器框,感覺就像真的應用程式。在 Android 上透過 Firefox for Android (測試版) 安裝 webapp 後,在桌面上則會多出一個 bookmark 捷徑。

圖:在 Mac 桌面上打開 2 個 webapp,不特別講也分不出來是 Web 還是 App 吧

我在測試的時候,發現寫好了 webapp 之後,使用者連到網頁時並不會自動詢問使用者是否要安裝 webapp。於是寫了以下腳本。

在 Body 標簽中引用以下腳本,即可自動偵測使用者是否可安裝 webapp (現在只有 Firefox Aurora 和 Firefox OS 支援 webapp API)

<script type="text/javascript"> //check if app is installed if( navigator.mozApps != undefined ){var app_stat = navigator.mozApps.getSelf(); app_stat.onsuccess = function() {   if (app_stat.result) {         //instsalled   } else {         // not installed         var manifestUrl = location.href.substring(0, location.href.lastIndexOf('/'))+'/manifest.webapp';         var app_install = navigator.mozApps.install(manifestUrl);   }}; app_stat.onerror = function() {   alert('Error checking installation status: '+ this.error.message); }; } </script> 原始碼包含在 webapplate 專案中。

透過

location.href.substring (0, location.href.lastIndexOf ('/'))+'/manifest.webapp'; 可以自動取得目前的 IP 或網址。

· 2 min read

話說到職 1 個多月了,每天都在學習,用從來沒想過的技術去解決各種問題的感覺實在很不錯。

昨天剛好有機會到成大計中,和修課的同學介紹 Firefox OS。也剛好把過去幾個月來對 Firefox OS 的了解做了一次整理。

在 1 小時的簡報之後,還接著 2 小時的上機實作課程。

上機課程中我做了一個看來很眼熟的範例,搭配 Github 實際拿來教學的效果也很不錯。

同天西班牙剛好也有個App Days活動,用整天更深入介紹 Firefox OS,簡報也可以下載。

Firefox OS 整個系統運作可以到 http://www.mozilla-hispano.org/archivos/docs/fxosappdaysvall/arquitectura.pdf 查看。(工商服務一下,Firefox 已經內建 PDF viewer,網頁上直接開 PDF 不用先下載)

WebAPI 簡報 http://www.mozilla-hispano.org/archivos/docs/fxosappdaysvall/webapis.pdf

· One min read
(不知道為什麼影片解析度要用360p這麼低)

Mozilla Co. 的 VP of Products Jay sullivan 來展示「Firefox OS」目前的版本, 其中桌面有個「everything.me」功能,除了可以用來裝 Web App 外, 因為 Web 的特性,所以不用像其他平台需要先安裝好再試用 App,而可以直接點選開始使用 App (Web)。 把 web 變成不需安裝、反安裝,隨查隨用的一次性 app 的概念還蠻有趣的。

· 3 min read

一直以來,在業餘時間裡我做了不少 Mobile App,寫了本 Android 開發書籍,參與並研究了一些 Web 框架和服務。前年開始也直接將Play!Django等 Web 框架,和 Android 開發的經驗應用在工作上。

我相信整合 Web 與 Mobile,以雲為基礎建設,讓連網設備 / 使用者得以跨平台在各種終端使用的應用,會是接下來技術的趨勢。

在主持GTUG Taipei 活動的兩年時間裡,跟著學了很多新東西,從中我也發現,現在已經有許多企業級或跟 Mobile App 開發相關的技術,都可以歸類到 Web 技術範疇了:

  • 越來越多人使用 JSON 來取代 XML
  • 各種 RPC 紛紛改成使用 RESTFUL API* non-rel, 適應雲端架構的MongoDB也可直接將資料儲存成 JSON 格式
  • Web Server 端可以使用 node.js 寫,透過 Event callback 形式的呼叫,可以得到很好的效能
  • 可以使用PhoneGap/Cordova來封裝成各行動平台的 App
  • 最近名字跟 Microsoft 連在一起Titanium 也可以用網頁技術生成各行動平台的 App

因此當我知道 Firefox OS 在台灣有開發團隊時, 我告訴自己:這是個可以待在台灣,同時又有可能改變世界的機會。

我很幸運,待的前公司環境與同事也非常好,可以推薦給大家。 當然,也歡迎大家來和我作伙伴

接下來我的分享應該會多出不少 Firefox OS 相關的心得,敬請期待。

· 4 min read

Firefox OS 是 Mozilla 基金會的新產品,將行動裝置與瀏覽器做更緊密地結合。 號稱只要會寫 Web App,就能開發 Firefox OS App。

下午剛好看到介紹文章,裡面提到有提供跨平台能執行的模擬器,就決定動手來試裝看看。

開發環境設定

1. 安裝 FIrefox 15 + 版本 2. 前往 http://people.mozilla.org/~myk/r2d2b2g/ 下載並安裝對應版本插件 3. 裝完可以透過 選單 > 工具 > 網頁開發者 > Firefox OS Simulator 開啟類似 Chrome 的開發者頁面

4. 按下左側 Simulator 項目,將執行狀態變成 Running 狀態。等一陣子即可在另一個視窗上看到 Firefox Simulator

導覽

畫面上往右拉可以看到 App 列表。裡面已經附上不少 APP 了。包含行事曆、鬧鐘、Email、音樂、影片播放器、計算機、PDF 閱讀器、地圖、等等。這些都是用 WEB 相關技術寫的(酷!)。

當然瀏覽器附的是 Firefox。Android 的 Application 號稱 "All Applications are equal",亦即連官方應用也是用一樣的 Application API 寫成。不知在 Firefox OS 上,Firefox Browser App 本身算不算 Web App,開發者能不能簡單地為 Firefox 改頭換面寫一個瀏覽器 App?

由螢幕頂端往下拉可以看到通知欄,下方有快速設定工具列,感覺還不錯。

在首頁往左拉是一堆預載的網頁服務書籤(或是說... 網頁應用程式),點了 Facebook 圖示後半天沒載入畫面,看來還有些待改善之處。

整體看來完成度頗高。在可見的未來裡,學會了網頁技術,什麼都能做阿。

必須面對的問題:如何保護程式碼?

比起那些網頁版桌面項目,Firefox OS 更有實用價值。但是對開發者來說,使用 Web App 開發雖容易,但也容易遇到如 Web OS 遇到的相同問題:「如何保護我的離線 Web App 的程式碼?」

在 Web OS 上,開發者可以找到 App 的目錄,解開來裡面自然是不需編譯的 HTML 等資源,有心人可以拿來參考或簡單修改後再發佈。這也是 Web OS 開發者開發意願不高的原因之一。

雖然許多開發者並不在乎把原始碼攤開在陽光下,但大廠或部分開發者對此總是有所顧慮。 也許未來幾年持續連線的行動網路會便宜地和自來水一樣,到時那些把程式邏輯隱藏在伺服器端的「連網型 Web App」可能是個答案。

參考資料