自由軟體鑄造場_20111023_Subversion版本控制系統之操作_曾義峰(ant)

00. 環境說明
作者: Ant
信箱: yftzeng@gmail.com
日期: 2011-10-23

作業系統: Ubuntu Linux distribution (Ubuntu Linux 發行套件)

01. 環境安裝
版本控制系統: Subversion
網頁伺服器: Python
瀏覽器: Google Ghromium / Mozilla Firefox
專案對象: RPG-JS

I. Ubuntu Linux distribution

II. Subversion

程式 'svn' 目前尚未安裝。您可以由輸入以下內容安裝:
$ svn

sudo apt-get install subversion

page: 1 / 3
$ sudo apt-get install subversion

Subversion 官方網站 - http://subversion.apache.org/

III. Python

程式 'python' 目前尚未安裝。您可以由輸入以下內容安裝:

IV. 瀏覽器
$ python

sudo apt-get install python

$ sudo apt-get install python

A. Google Chromium

$ sudo add-apt-repository ppa:chromium-daily
$ sudo apt-get update
$ sudo apt-get install chromium-browser

B. Mozilla Firefox

$ sudo add-apt-repository ppa:mozillateam/firefox-stable
$ sudo apt-get update
$ sudo apt-get install firefox

下載 RPG-JS。
V. RPG-JS

RPG-JS 官方網站 - http://rpgjs.com/

page: 2 / 3

請於 http://rpgjs.com/examples/demo.php 網址下載檔案，非於 http://rpgjs.com/

不過 http://rpgjs.com/examples/demo.php 下載的檔案是有問題的，難以操控且位置控
制有問題

下載神秘的隱藏檔案 http://rpgjs.com/download/demo-rpgjs.zip

下載的檔案名稱為 demo-rpgjs.zip，不是 demo-rpgjs-beta.zip 也非 rpg-beta.zip

page: 3 / 3

02. RPG-JS 嘗鮮
作者: Ant
日期: 2011-10-23

I. 解壓縮
RPG-JS 下載後，預設會存放在使用者家目錄的 "下載"(中文版) 或 "Downloads"(英文版)。

II. 啟用輕量級網頁伺服器
使用滑鼠右鍵選擇該檔案後，即可直接解壓縮。

A. 開啟終端機

B. 切換至正確的目錄

顯示目前目錄的結構，

page: 1 / 2
$ ls

切換目錄，

$ cd 下載
(中文介面)

再顯示目前目錄的結構，
(英文介面)
$ cd Downloads

切換至 RPG-JS 的專案，
$ ls

C. 啟用 Python 建立網頁伺服器
$ cd demo-rpgjs

III. 使用瀏覽器開啟 RPG-JS
$ python -m SimpleHTTPServer

預設會開啟在 8000 埠

IV. 停止網頁伺服器
直接在網址列中，輸入 "localhost:8000"。

可以回到原先終端機的程式，按下 Ctrl + C 即可。

page: 2 / 2

03. 初始設定 subversion
作者: Ant
日期: 2011-10-23

I. 用瀏覽器找尋 subversion 所在位置
專案可以在 OpenFoundry 上建立，完成審核後將分配 subversion 位置給該專案使用。

II. 分配所屬專案目錄
例如 OpenFoundry 上的 testproject01 為 "http://svn.openfoundry.org/testproject01"。

一般而言，一個專案共享同一個 subversion 庫。

本課程為了方便學員操作，選擇在同一個 subversion 庫中，再分配每個學員各自的目錄。

請學員選擇 testuser01 ~ testuser40 間的角色

testuserXX 為 OpenFoundry 上的帳號，密碼亦相同

因此，testuser01 的專案路徑將為

III. 在取出專案前，進行觀察
http://svn.openfoundry.org/testproject01/trunk/testuser01

subversion 提供下載專案前，先行瀏覽專案的目錄結構。

以 testuser01 為例，

或者其它的路徑，
$ svn list http://svn.openfoundry.org/testproject01/trunk/testuser01

page: 1 / 2

IV. 取出專案
$ svn list http://svn.openfoundry.org/testproject01/trunk

選擇好一個特定的目錄，

使用 subversion (svn) 同步遠端的 svn server 資料，
$ cd ~

V. 切換至該專案的目錄下
$ svn checkout http://svn.openfoundry.org/testproject01/trunk/testuser01 testproject01

checkout 可以縮寫為 co

VI. 將原先的 RPG-JS 複製至此
$ cd ~/testproject01

準備將 RPG-JS 納入版本控制系統中。

可以使用圖形化介面，將原先在 "下載" 或 "Downloads" 中，已經解壓縮的 demo-rpgjs 的資料移
至此目錄下。

或者使用終端機的方式來複製資料，

或者
$ cp -rpf ~/下載/demo-rpgjs/* .

$ cp -rpf ~/Downloads/demo-rpgjs/* .

page: 2 / 2

04. 正式匯入專案
作者: Ant
日期: 2011-10-23

I. 匯入前先測試專案是否可以正常使用

使用瀏覽器開啟 RPG-JS。
$ cd ~/testproject01

II. 匯入前先檢查目錄 subversion 工作複本的狀
$ python -m SimpleHTTPServer

直接在網址列中，輸入 "localhost:8000"。

態
參數 "status" 可以隨時檢查目前的狀態，

$ svn status
? Graphics
? Audio

其中 "?" 代表尚未納入版本控制的目錄或檔案。
? Database
...

若為 "A" 則代表新增的目錄或檔案；

III. 將目錄或檔案納入版本控制系統
status 可以縮寫為 st

參數 "add" 可以將目錄或檔案納入版本控制系統，

$ svn add Graphics

page: 1 / 3
A Graphics
A Graphics/Tilesets

此時，可以再用 "status" 觀看目前狀態，
A (bin) Graphics/Tilesets/Grotte 2.png
...

$ svn status
? Audio
? Database
...
A Graphics
A Graphics/Tilesets

可以繼續使用 "add" 納入新的目錄或檔案，
A Graphics/Tilesets/Grotte 2.png
...

若想要一次納入所有目前目錄下的檔案，可以使用，
$ svn add Audio
$ svn add Database

此時，可以再用 "status" 觀看目前狀態，
$ svn add *

IV. 將工作複本同步至遠端的檔案庫
$ svn status

目前的操作僅發生在本機的工作複本上。

此時的 OpenFoundry 上的 testproject01 下的 testuserXX 仍然是空閒的狀態。

若要上傳以同步彼此，可以使用 "commit" 參數。

此時會要求輸入 comment (註解)。輸入完成後，即會同步於 OpenFoundry。
$ svn commit

提交說明範本，

Initial import project

page: 2 / 3

V. 提交完成後，請再次同步更新
comment (註解) 是非常重要的，必須輸入有意義、未來可追溯的描述

每次提交(commit)後，建議再次進行與遠端版本庫同步，

$ svn update

每次執行完提交(commit)後，請習慣性的再執行 update(同步更新)

update 可以縮寫為 up

page: 3 / 3

05. 初階版本控制系統日誌記錄
作者: Ant
日期: 2011-10-23

I. 顯示工作複本的日誌記錄
參數 "log" 可以顯示日誌記錄，會顯示近期的日誌訊息，包括版次、提交者、日期及註解。

$ svn log
------------------------------------------------------------------------
r623 | testuser01 | 2011-10-20 12:33:54 +0800 (Thu, 20 Oct 2011) | 3 lines

加上參數 "--verbose" 可以顯示更詳細的日誌內容，

$ svn log --verbose
------------------------------------------------------------------------
Changes paths:
A /trunk/testuser01/Audio
A /trunk/testuser01/Audio/BGM
...

II. 顯示遠端版本庫的日誌記錄

verbose 可縮寫為 v

參數 "log" 之後接上遠端版本庫的連結位置，可以顯示遠端版本庫的日誌記錄，

$ svn log http://svn.openfoundry.org/testproject01/trunk/testuser01
------------------------------------------------------------------------

加上參數 "--verbose" 可以顯示更詳細的日誌內容，

page: 1 / 2

$ svn log --verbose http://svn.openfoundry.org/testproject01/trunk/testuser01
------------------------------------------------------------------------
Changes paths:
A /trunk/testuser01/Audio
A /trunk/testuser01/Audio/BGM
...


page: 2 / 2

06. 新增檔案或目錄
作者: Ant
日期: 2011-10-23

新增名為 "demo" 的文字檔，內容可隨意輸入，

$ svn status
? demo

subversion 版本控制系統有目錄歸屬的關聯，在設定之目錄下的檔案或目錄才能納入控
制中。

例如，subversion checkout 後的目錄為 ~/testuser01，則 ~/testuser01 目錄下的檔案及
目錄才能被追踪。

將 "demo" 納入版本控制系統中，

再執行 "status" 查看，
$ svn add demo

目前的操作一樣發生在本機的工作複本上。
$ svn status
A demo

此時的 OpenFoundry 上的 testproject01 下的 testuserXX 仍然沒有 demo 的文字檔。

若要上傳以同步彼此，可以使用 "commit" 參數。

此時會要求輸入 comment (註解)。輸入完成後，即會同步於 OpenFoundry。
$ svn commit


page: 1 / 2

此時，在未下達同步更新前(update)，可以使用 "log" 來顯示工作複本的日誌記錄，
add "demo" text file.

可以發現，記錄中沒有顯示先前提交(commit)的日誌。
$ svn log

若執行顯示遠端版本庫的日誌記錄時，

會發現其實是已提交至遠端版本庫中。
$ svn log http://svn.openfoundry.org/testproject01/trunk/testuser01

因此，建議在每次提交(commit)後，再次進行與遠端版本庫同步，

此時，該提交(commit)的記錄才會顯示在工作複本中，
$ svn update

$ svn log

page: 2 / 2

07. 異動操作: 以中文化為例
作者: Ant
日期: 2011-10-23

I. "Gold" 中文化

檔案: index.html

A. "Gold" 中文化方式
目標: Gold

將檔案內的

改成
<div id="gold"><span >0</span> Gold</div>

<div id="gold"><span >0</span> 金幣</div>

儲存異動後，將瀏覽器重整頁面。

B. 設定編碼為 UTF-8
發現"金幣"二字中文亂碼的問題。

將檔案內的

改成
<meta http-equiv="Content-Type" content="utf8" />

C. 單元提交原則 (Unit commit rule)
儲存異動後，將瀏覽器重整頁面，可正常解決中文亂碼問題。
<meta http-equiv="Content-Type" charset="utf8" />

page: 1 / 5

提交時，請先確認該功能/臭蟲為一完整單元性

一次提交一功能 / 一次修正一臭蟲。
提交之功能/臭蟲具完整性 (例如該功能需變更三個檔案，則需一次提交三個檔案)。

因此，Gold 的中文化，屬於 "中文化" 範疇；而 UTF-8 charset 為 "頁面編碼方式"。兩者建議不要

D. 復原修正
混在一起。

此範例適用於尚未"提交(commit)"前的復原，

E. 先進行編碼設定
$ svn revert index.html

將檔案內的

改成
<meta http-equiv="Content-Type" content="utf8" />

顯示目錄狀態，
<meta http-equiv="Content-Type" charset="utf8" />

在提交(commit)前，可以使用參數 "diff" 來顯示異動比較，
$ svn status
M index.html

確認無誤後，提交(commit)修改的程式，
$ svn diff index.html

$ svn commit index.html
$ svn update

page: 2 / 5
feature: change charset to UTF-8

至 OpenFoundry 網頁上查看。

亦可以在本機端查看，

提交(commit)之後，也可以隨時使用參數 "diff" 來顯示異動比較，
$ svn log index.html
$ svn log --verbose index.html

F. 再進行 Gold 翻譯
$ svn diff -rPREV:BASE index.html

將檔案內的

改成
<div id="gold"><span >0</span> Gold</div>


將瀏覽器重整頁面。

顯示目錄狀態，

在提交(commit)前，可以使用參數 "diff" 來顯示異動比較，
$ svn status
M index.html

確認無誤後，提交(commit)修改的程式，
$ svn diff index.html

$ svn update

page: 3 / 5
feature: translation of Gold given by the Traditional Chinese


提交(commit)之後，也可以隨時使用參數 "diff" 來顯示異動比較，

II. 村長對話中文化

檔案: Data/Events/5_EV006.js

A. 中文化翻譯小技巧
目標: show_text

如何快速找到需要翻譯的字句？

例如村長對話的開題是 "Help"，
$ grep -r "KEYWORD" *

B. 設定編碼為 UTF-8
$ grep -r "Help" *

將 Data/Events/5_EV006.js 檔案內的 (兩個地方)，

改成想要的翻譯。
{show_text: "Help us, my daughter was kidnapped and imprisoned nin the catacombs to the

C. 提交村長對話的中文化
最後在瀏覽器中重整頁面。

提交修改的程式，

page: 4 / 5
$ svn status

$ svn commit Data/Events/5_EV006.js
$ svn update

feature: translation of 5_EV006.js given by the Traditional Chinese


$ svn log Data/Events/5_EV006.js
$ svn log --verbose Data/Events/5_EV006.js
$ svn diff -rPREV:BASE Data/Events/5_EV006.js

page: 5 / 5

08. 異動操作: 遊戲修改大師
作者: Ant
日期: 2011-10-23

I. 石頭陣
石頭陣的破解，其實多想一分鐘，你可以瞭解到，

凡是自由/開放源碼軟體，你就擁有程式原始碼，
有了原始碼，你就可以快樂地合法修改。

只要修改 Data/Events/1_EV001.js，將

改成
x: 14,
y: 30,

瀏覽器重整頁面，就會發現...如果石頭陣還是一樣。是不是改錯地方了？
x: 17,
y: 27,

其實不是，而是因為 Mozilla Firefox / Google Chromium 瀏覽器為了效能，會把某些檔案快取

(Cache)住，

$ svn status

$ svn commit Data/Events/1_EV001.js
$ svn update

feature: gamemaster on stone maze


page: 1 / 4

II. 金幣
$ svn log Data/Events/1_EV001.js
$ svn log --verbose Data/Events/1_EV001.js
$ svn diff -rPREV:HEAD Data/Events/1_EV001.js

從先前嘗試修改的 "Gold" 中文化裡，可以找到金幣的設定。

將 index.html 裡的，


改成，


瀏覽器中重整頁面，就會發現顯示的金幣變多了。

但後來會發現這是假的，因為你過不了需要支付 15 金幣過路費之處。

原來之前修改處只是顯示的部分，實際金幣是存放在 rpg-alpha-2.min.js 檔案中。

將 rpg-alpha-2.min.js 裡的，

改成，
this.gold=0;

瀏覽器中重整頁面，就會發現顯示的金幣變多了，也可以通過了。
this.gold=9999;


$ svn status

$ svn commit rpg-alpha-2.min.js index.html
$ svn update

feature: gamemaster on money

page: 2 / 4


$ svn log rpg-alpha-2.min.js
$ svn log --verbose rpg-alpha-2.min.js

III. 無敵
$ svn diff -rPREV:BASE rpg-alpha-2.min.js


男孩們的夢想，就是無敵。

可以在 index.html 找到相關的程式，

// 受攻擊時血量的損失
// 血量為0時，遊戲結束
rpg.player.actionBattle.hp -= 5;
if (rpg.player.actionBattle.hp <= 0) {
alert('Game Over !');

// 受攻擊時，畫面的血量減少
window.location.reload(true);
}
else {

所以可以修改成，
$('#hp').animate({'width': ($('#hp').width() - 5) + 'px'});
}

// 受攻擊時血量的損失
// 血量為0時，遊戲結束
rpg.player.actionBattle.hp -= 0;
if (rpg.player.actionBattle.hp <= 0) {
alert('Game Over !');

// 受攻擊時，畫面的血量減少
window.location.reload(true);
}
else {

瀏覽器中重整頁面，就會發現怪物怎麼攻擊血量都不會減損。
$('#hp').animate({'width': ($('#hp').width() - 0) + 'px'});
}


$ svn status

$ svn update

page: 3 / 4

feature: gamemaster on hp


IV. 新增說明檔案

新增一個名為 "GameMaster-README" 檔案。

或
$ gedit GameMaster-README

內容隨意，可以為，
$ vim GameMaster-README

此 RPG-JS 版本為中文化，且提供石頭陣簡易解法、金幣 99999 及無敵設定。
作者為 Ant。

提交新增的程式，

$ svn status
$ svn add GameMaster-README
$ svn status

$ svn commit GameMaster-README
$ svn update

add GameMaster-README for more help


$ svn log GameMaster-README
$ svn log --verbose GameMaster-README
$ svn diff -rPREV:BASE GameMaster-README

page: 4 / 4

09. 復原提交後的檔案
作者: Ant
日期: 2011-10-23

I. 查詢返回的版次
如果想要解除遊戲修改大師的設定，就必須還原先前的設定。可以使用版本控制系統的功能來返
回。

首先，需要取得返回的版次，可以使用參數 "log" 來尋找，

如果畫面太長可以使用分頁功能，
$ svn log

$ svn log | less

"less" 指令不是 subversion 內建的指令

此時可以再次發現註解(comment)的重要性，如果註解不明確，將會造成未來控管的問

II. 復原前的檢查
題

假設想要復原的版次是 r626。

在復原前請先進行檢查，

顯示異動比較，
$ svn log -r626

$ svn diff -r626:627

page: 1 / 2

注意，比較的版本是該版本(如例為 626)與下一個版次(如例為 627)

確定無誤後，就可以執行復原的動作，

$ svn diff -r627:626 | patch

注意，執行復原的動作時，請將兩個版本號交換，即較新的版次在前，舊的在後

最後進行確認，

或
$ gedit index.html

無誤後，就可以提交(commit)，
$ vim index.html

$ svn status

$ svn commit
$ svn update

"Reverted to revision {舊的版次}"

page: 2 / 2

10. 衝突的解決
作者: Ant
日期: 2011-10-23

眾人開發同一專案，難免會發生衝突。

I. 兩個工作複本
本例將模擬兩個人同時針對同一檔案進行的衝突異動。

原本的工作複本於,

為了模擬兩個人同時異動，需要額外再下載一次工作複本於不同的目錄，
~/testuser01

II. 測試同步功能
此時 ~/testuser01 及 ~/testuser01-conflict 的工作複本是相同的。
$ cd ~
$ svn checkout http://svn.openfoundry.org/testproject01/trunk/testuser01 testproject01-co

於原先的工作複本中，異動任何檔案，例如 index.html，

或
$ gedit index.html

將，
$ vim index.html


改成，

<div id="gold"><span >9999</span> 金錢</div>

提交(commit)異動，

page: 1 / 6

$ svn status

$ svn update

feature: translation of Gold to 金錢

切換到另一個工作複本中，檢查目前的 index.html 內容，

或
$ gedit index.html

可以發現目前內容還是先前的 "金幣"。
$ vim index.html

此時，可以使用版本控制系統的功能來合併先前的提交(commit)，

再檢查目前的 index.html 內容，
$ svn update

或

III. 模擬衝突
$ gedit index.html

可以發現目前內容已經變更為 "金錢"。
$ vim index.html

此時先回到原先的工作複本中，將 index.html 的內容進行異動，

或
$ cd ~/testuser01
$ gedit index.html

將，
$ vim index.html


改成先前的，

page: 2 / 6

然後到另一個工作複本中，將 index.html 異動為不同的內容，

或
$ cd ~/testuser01-conflict
$ gedit index.html

將，
$ vim index.html


改成另一個名稱，

<div id="gold"><span >9999</span> 黃金</div>

兩者先後異動同一個檔案的同一個地方，而且都尚未提交(commit)至遠端版本庫中。

此時先回到原先的工作複本中，將異動提交(commit)，

$ cd ~/testuser01
$ svn status

$ svn update

feature: translation of Gold to 金幣

再切到另一個工作複本中，將異動提交(commit)，

$ svn status

$ svn update

feature: translation of Gold to 黃金

此時就會發生衝突(conflict)，

page: 3 / 6
Sending index.html
svn: Commit failed (details follow):

IV. 解決衝突
svn: File or directory 'index.html' is out of date; try updating
svn: resource out of date; try updating
svn: Your commit message was left in a temporary file:
svn: '~/testuser01-conflict/svn-commit.tmp'

此時發生衝突的人，需要先查看衝突的情況，先進行同步(update)，

$ svn update
Conflict discovered in 'index.html'.
Select: (p) postpone, (df) diff-full, (e) edit,

可以先暫時瀏覽一下衝突的異動，請輸入 "df"，並按下 Enter 鍵。
(mc) mine-conflict, (tc) theirs-conflict,
(s) show all options:

接著，可以選擇 "p" 以事後進行更進階的解決。請輸入 "p"，並按下 Enter 鍵。

此時，衝突的檔案(本例為 index.html)會有四個相關的檔案。

index.html: 衝突的檔案及衝突的內容
index.html.mine: 原本工作複本中的內容
index.html.r{低版次}: 衝突檔案於原本工作複本的前一版次
index.html.r{高版次}: 衝突發生的新版次

需要先了解衝突的程式開發者為誰，而從 index.html.r{高版次} 中，可以得知衝突的版次為何，進
而從 "log" 中得知程式開發者為誰。

例如，index.html.r700，則可以使用 "log" 來查詢該開發者為誰。

$ svn log -r700

feature: translation of Gold to 金錢
------------------------------------------------------------------------

可以得知衝突發生者為 "testuser01"。

因為本範例模擬的關係，衝突者會與自己為同一人

為了方便判別，將原先工作複本的 "testuser01" 稱為 A，另一個工作複本 "testuser01-conflict" 稱
為 B。

page: 4 / 6

A. 情形一: 決定使用 A 的版本
此時 B 可以與 A 進行溝通，先確定最終版本為何，再進行決定。

此時 B 直接將 "index.html.r{高版次}" 覆蓋 "index.html"，

然後下達衝突解決，
$ cp index.html.r{高版次} index.html

此時，會發生原先的 index.html 等相關的檔案都消失了，
$ svn resolved index.html

接著，同步更新(update)即可，最後就會使用 A 的版本，
$ ls

B. 情形二: 決定使用 B 的版本
$ svn update

此時 B 直接將 "index.html.mine" 覆蓋 "index.html"，

$ cp index.html.mine index.html


接著，同步更新(update)即可，最後就會使用 B 的版本，
$ ls

$ svn status

page: 5 / 6
$ svn update


C. 情形三: 第三種選擇，非 A 非 B
feature: translation of Gold to 黃金

此時 B 直接修改 "index.html" 的檔案，將內容改成雙方的提議，

或
$ gedit index.html

$ vim index.html


接著，同步更新(update)即可，
$ ls

$ svn status

$ svn update

feature: translation of Gold to {XX}

page: 6 / 6

自由軟體鑄造場_20111023_Subversion版本控制系統之操作_曾義峰(ant)

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to 自由軟體鑄造場_20111023_Subversion版本控制系統之操作_曾義峰(ant)

Similar to 自由軟體鑄造場_20111023_Subversion版本控制系統之操作_曾義峰(ant) (20)

Recently uploaded

Recently uploaded (6)

自由軟體鑄造場_20111023_Subversion版本控制系統之操作_曾義峰(ant)