Skip to main content

· 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

新的 Bugzilla 樣式

在來 Mozilla 之前我用得比較多的是 Redmine 或 Trac 等問題追蹤系統，到了 Mozilla 之後才比較常接觸 Bugzilla。

目前大部份 Mozilla 的開源軟體都使用 Bugzilla 來追蹤 issues。所有開發者間針對 issues 的討論、審查、版本間的同步，各種開發相關的資訊都圍繞著這個系統進行，所以要貢獻 Mozilla 相關軟體開發專案，Bugzilla 是必定造訪的中轉站。

Bugzilla 是貨真價實源自上個世紀的古董網站。Wikipedia 的資料寫著，第一版 Bugzilla 發表於 1998 年，使用 Tcl 語言撰寫。Bugzilla 2.0 則改使用 Perl 語言撰寫。原因是比起 Tcl，當時 Perl 語言更普遍，改成使用 Perl 語言可以吸引更多自願協助改進的開發者。

這麼老牌的開源軟體當然有很多歷史遺留問題，我們先來看目前版本的模樣

一般預設的 Bugzilla 樣式

咳咳... 只能說，過去的審美觀跟現在已經不太一樣了。

還好，Bugzilla 的開發者有意識到這個問題，登入帳號後，點選畫面右上角的 preference（設定） ，把 Bugzilla's general appearance (skin) 改成 'Mozilla'，選擇 Submit Changes（儲存）後，就可以看到新版界面。

調整設定

新的界面與 Mozilla 官方網站 風格一致，界面新潮許多。

新版界面

對於每天使用的工具，做得更好看一點，真的可以增加使用的樂趣哩。

註：Redmine 或 Trac 剛好都發表於 2006 年，就像 git 與 mercurial 都剛好發表於 2005 年一樣巧。

· 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

離上一版 Android 書的更新已經過一年多了，終於在最近改版的工作告一段落。 再過一陣子，就可以看到新版本上市了。

這次的所有範例改放到 Github 上。可以前往 https://github.com/gasolin/androidbmi5th/ 下載。

Github 使用 git 作為版本控制系統，並提供很方便使用的網頁介面。

例如我使用分支 (branch) 來管理不同章節的範例程式碼。要在 github 上查看不同章節的程式碼，只要點選 Github 左上角的分枝選單，選取對應的章節，即可查看範例程式碼。

選取對應的章節，查看範例程式碼

此外，也可以透過左上角的「zip」按鈕，下載對應的章節範例程式碼。

若想透過 git 命令下載，可以使用如

git clone https://github.com/gasolin/androidbmi5th.git -b CH36 CH36 命令來取得對應章節的範例程式碼。

本書提供的範例無授權問題，可自由用於各種場合。 若對範例有疑問，可以直接在 github 專案的 Issues 中提問。

從更新的範例中可以看到，第五版本終於做到全書只有「一個」 BMI 範例（包含配對的測試範例）。圍繞著設計 BMI 應用程式的過程，介紹各種 Android 系統的運作與常用功能。我覺得新的改版對第一次入門的讀者來說，學習的過程應該更有樂趣。