2017年1月3日 星期二

SA、SD、PG

本文將會討論這三個職位在我們團隊中各扮演什麼樣的角色

SA-系統分析師(System Analyst)

跟客戶做需求訪談,利用詢問到的需求做產品的設計分析,由於做需求訪談的對象較多是直接操作系統的使用者,所以對於需求的產生是建立在功能使用情境及介面操作上,因為會需要跟專業領域的使用者訪談,也需要對產品的Domain Knowledge有一定程度的認識,所以SA就是將情境說明及介面的操作設計搭配系統的專業領域知識寫出SRS(Software requirements specification),其中產出包括以下幾點:

  • 業務流程圖:整個模組的流程圖
  • 基本資料:功能代號、名稱、概述、需要編號、使用單位、角色
  • 前置作業:使用此功能前須要做的事情,像是要建的資料、要在哪個狀態才可以使用此功能
  • 使用案例說明:情境描述、操作行為、注意事項、功能間的交互關係
  • 使用案例畫面:介面的呈現與設計
  • 欄位定義:介面上每個欄位的名稱、種類(下拉選單、文字、日期…)、資料來源(系統代碼…)、是否必填
SRS為需求導向,做的是軟體的分析,比較著重在邏輯跟順序的設計,也因為SRS跟特定的程式語言其實沒有很大的關係,所以SRS可以用不同的程式語言所實作

SD-系統設計師(System Designer)

SD會依照SA撰寫的SRS去做更細部的規格設計,也就是技術規格,SD通常會是有系統開發經驗的人擔任,必須要了解系統的運作方式及程式語言,把由SRS上得到的使用情境及介面操作寫成程式的實作方式、設計資料的存放方式及測試案例的設計,SD會寫出SDD(Software Design Description),會產出以下幾點:
  • 欄位定義:詳細的欄位定義,像是由那張資料表取得、取得的方式、條件(JoinExists),要實做的控制項(Drop Down ListDate PickerText Box)
  • 細部說明:實作方式,特殊需求
  • 參考檔案:與此功能相似做法的參考,取得資料要使用的UDFSP
  • Service MethodService設計,傳入的參數、命名
  • 單元測試注意事項:單元測試需要注意的地方,測試資料設計,畫面測試情境設計
  • Table Schema設計:DB資料表設計(參數名、型態、預設)
SDD為技術導向,會跟其系統架構及程式語言緊密結合,著重在以某種語言實作出可執行的程式

 

PG-程式設計師(Programer)

PG的職責為撰寫程式碼,拿到SDD後依照上面所述的規格寫程式

參考連結

2017年1月2日 星期一

ASP.NET Web API

本文將建立一個基本的Web API,使用Postman做Demo

Overview

此文章將會建立一個Web API

創建專案

1. File->New->Project…

2. Create ASP.NET Web Application
3. 選擇Empty,勾選Web API
4. Controller資料夾按右鍵->Add->New Item…,新增Web API Controller Class,檔名是ValuesController.cs
點開ValuesController.cs可以看到已經幫我們寫要Web API的框架了,我們現在來看一下路由的設置

可以看到routeTemplate被設置為
"api/{controller}/{id}"
{controller}:要呼叫的controller name(此例子即為Values)
{id}:參數資料

建置專案

按下F5啟動偵錯
會跑出HTTP Error 403.14 - Forbidden的錯誤是因為我們沒有建立頁面,可是Web API的功能還是正常的,現在開啟PostmanHTTP動詞是GET,在URL上輸入http://localhost:{Port Number}/api/values,按下Send

我們可以看由Get Action所傳回來的陣列
如果改為http://localhost:{Port Number}/api/values/5會因為路由機制會導至第一個符合條件,所以會由有id參數的Get所處理
就會看到單一的value

總結

這次已經完成一個簡單的Web API,透過強大的Visual Studio的模板功能,沒有動到程式碼就可以完成一個Web API的框架

參考連結

2016年4月3日 星期日

在SQL Server 2012安裝Northwind資料庫

Northwind是微軟提供的範例資料庫,我們可以利用這個資料庫來練習資料庫或程式語言相關的技術,但這個資料庫是SQL Server 2000的範例,安裝在SQL Server 2012可能會碰到一些問題,這篇文章是我自己在安裝時所碰到的問題紀錄。

下載

可以在微軟網站中下載:

安裝

照下面圖示操作即可:




上述步驟完成後在C:\SQL Server 2000 Sample Databases中找到需要的檔案。

問題及解決

現在有兩個方法可以安裝Northwind,一個是Attach Database,另一個是直接執行.sql,我先嘗試了Attach的方式。

Attach Database

在SSMS中對Database按右鍵>Attach
Add>NORTHWIND.MDF>OK

問題1

出現錯誤,點Databases to attach的Message連結,出現錯誤訊息:
Operating System error 5

解決

SSMS要以系統管理員身分執行

問題2

its non-release version(539)is not supported by this version of SQL Server

為何發生

Google發現有人也有同樣的問題:
SQL Server可以還原資料庫的版本只有前面的兩到三個版本,例如我現在用的是2012,那我可以還原的最舊版本就是2005的,所以當然2012沒辦法還原2000的資料庫。

那我們就來看一下執行.sql的方法可不可行好了。

Execute SQL

問題

把instnwnd.sql直接用SSMS執行,會發生下面的錯誤:
Could not  find store procedure 'sp_dboption'
再次請教Google大神:
發現到原來sp_dboption已經被棄用了,要改用ALTER DATABASE。
所以代表我們要把sp_dboption的指令轉乘ALTER DATABASE。
於是我們去查[trunc. log on chkpt.]及[select into/bulkcopy],很幸運的我們在同一個頁面找到:
發現原來這兩行的是在設定復原模式的而且也知道他們要設定的數值,那我們就把這兩行替換成:
ALTER DATABASE Northwind SET RECOVERY SIMPLE
ALTER DATABASE Northwind SET RECOVERY BULK_LOGGED
之後再執行一次SQL就好了。

2014年11月7日 星期五

jekyll使用sass(scss)

目錄結構

.
|-_sass
    |-default.sass
|-css
    |-main.sass

  • 將.sass(.scss)放於_sass資料夾中。
  • 將主css放於css資料夾中。


在main.sass中加入:

---
---
@import "default"

  • 需要加---是因為此檔案是要可以被jekyll所解析的,所以要符合jekyll格式。
  • @import的路徑只要是檔案名就可以了。

在.html中引用的路徑是css/main.css

  • jekyll會將.sass解析為.css所以後面寫.css即可。

PS:


想要變更_sass資料夾位置或名稱,在_config.yml中加入:

sass:
    sass_dir: 路徑

想要將css壓縮,在_config.yml中加入:

sass:
    style: :compressed

參考

將footer element固定於網頁最下方

這篇是看完CSS-TRICKS的Sticky Footer(要看程式碼請參考此連結)之後所理解出來的原理解釋。

步驟


1. 將網頁分為兩個部份:


  1. 網頁主體(page-wrap)
  2. 頁腳區塊(site-footer)

2. 因為是對於margin所作的效果,所以先將其設為0。


3. 將html及body的height設為100%是為了要將網頁設成視窗大小(如果小於視窗大小的話)。


4. 將網頁主體min-height設為100%以符合html大小,而將margin-bottom設為你要的大小的負數,這裡將邊界往內凹,讓頁腳區塊也可以在100%的高度中,但這樣會產生一個問題,當你的網頁長度(height)超過視窗-頁腳區塊的大小時,網頁主體的內容會跟頁腳區塊重疊,為解決這問題,我們需要設置:after。


5. 將網頁主體設定一個:after的區塊,這個after區塊要跟footer一樣大,after區塊會緊跟在page-wrap的內容之後(在page-wrap中),當然他也算在page-wrap的長度裡,這樣子我們就會給page-wrap一個跟site-footer一樣大小的block,也就是利用這個沒有內容(透明)的block去填補原本凹進去的地方,這樣子page-wrap的內容就不會跟site-footer重疊了。

2014年11月5日 星期三

裝設vim-airline font

在安裝vim-airline時有遇到幾個問題,在這裡做個整理。

1. 在terminal中沒有跑出顏色

解決:

在~/.vimrc中寫入下面的程式碼
if $COLORTERM == 'gnome-terminal'
set t_Co=256
endif

參考:

http://askubuntu.com/a/126

2. 安裝之後沒有出現airline

解決:

在~/.vimrc中寫入下面的程式碼
set laststatus=2

參考:

https://github.com/bling/vim-airline#configuration

3.在安裝之後無法完整顯示

解決:

照著https://powerline.readthedocs.org/en/master/installation/linux.html#fonts-installation所給的指示做。

注意:

A. ~/.fonts如果沒有此目錄的話,自己新增(mkdir ~/.fonts)
B. ~/.config/fontconfig/conf.d/如果沒有此目錄的話,新增(mkdir -p ~/.config/fontconfig/conf.d/

2014年11月3日 星期一

Jekyll問題排除

這裡列出幾個在使用Jekyll的時候所遇到的問題,供日後參考。


問題一:在gem install jekyll時遇到ERROR: Failed to build gem native extension.

解決:安裝ruby 1.9.1(sudo apt-get install ruby1.9.1-dev)

參考:
http://hire.chrisjlee.net/node/229
http://jekyllrb.com/docs/troubleshooting/#installation-problems

問題二:在gem install jekyll時遇到ERROR: While executing gem ... (NoMethodError) undefined method `name' for #<RDoc::RubyToken::TkLPAREN:...>

解決:安裝rdoc(gem install rdoc

參考:
https://github.com/jekyll/jekyll/issues/1560

問題三:在執行jekyll時遇到Could not find a JavaScript runtime.

解決:安裝nodejs(sudo apt-get install nodejs)

參考:
http://jekyllrb.com/docs/troubleshooting/#could-not-find-a-javascript-runtime-execjsruntimeunavailable
http://stackoverflow.com/a/9333316

2014年10月28日 星期二

解決git中[fatal: remote origin already exists.]的問題

在要把新的repository送上github的時候都會遇到[fatal: remote origin already exists.]的問題:
新增說明文字
這時候有兩個方式可以解決:
1. 改名(例:origin改成first)
2. 將origin的url改掉

第一個方式

git remote add origin [url]
改成
git remote add first [url]

第二個方式

利用set-url改掉origin的url
git remote set-url origin [url]

參考

取出js或是json檔案中的內容

在解析網頁的時候常常要到其js或是json中去取得資料,像是下面這兩個例子:

因此我寫了一個處理的function,可以輕鬆地拿到想要的資料:

步驟

1. 將空白刪除。
2. 將跳脫字元處理好。
3. 取出再"="跟";"之間的字串。

參考

2014年10月26日 星期日

在Chrome extensions中使用gif.js

最近看開chrome extension時遇到了gif.js使用上的問題,原因是在gif.js裡會使用到web worker,可是在chrome extension 中會出現SecurityError,搜尋google在stackoverflow中的一篇問答找到了原因,原來是因為chrome自身的bug所以讓extension無法讀取web worker。

步驟

1. 在chrome extension中加入patch-worker.js
2. 將gif.js檔案中的['gif.worker.js']取代成[chrome.runtime.getURL('path/gif.worker.js')]。
(註:path為你放gif.js的路徑)

2014年7月7日 星期一

在.NET應用程式中安裝RxNorm API

目的

由於要做藥物名統一的工作,中間需要用到RxNorm的API,現在把RxNorm API的安裝方式做一個整理。

環境

  • Visual Studio Express 2012
  • C#

步驟

1. 創立應用程式

新增一個新的C#專案,把[應用程式路徑]記起來。
[應用程式路徑]=C:\Users\Hsin_Ping\Documents\Visual Studio 2012\Projects\InstallRxNormAPI\InstallRxNormAPI

2. 記住[wsdl路徑]

在電腦中找出[wsdl路徑]記起來。
[wsdl路徑]=C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0A\bin\NETFX 4.0 Tools

3. cmd

打開命令提示字元,輸入下列指令:

完成之後應該會得到以下訊息代表正確:

4. 在應用程式新增DBManagerService.cs

在應用程式按[右鍵]>[加入]>[現有項目]新增DBManagerService.cs。

5. 加入System.Web.Services參考

在應用程式按[右鍵]>[加入參考]新增System.Web.Services。

參考

2014年7月2日 星期三

於IIS安裝PHP

平台

  • Windows 8.1
  • IIS 8.5

方法

使用Web Platform Installer安裝PHP。

步驟

1. 下載Web Platform Installer

這裡下載Web Platform Installer,照著步驟安裝。

2. 開啟IIS管理員

在搜尋框中輸入IIS就可找到

3. 開啟Web Platform Installer

在[管理]中按下[Web Platform Installer]就會出現Web Platform Installer的介面。

4. 安裝PHP

安裝步驟
  1. 上列按[產品]
  2. 左列按[架構]
  3. 中間按[PHP(選你需要的版本)]
  4. 下列按[安裝]

5. 開啟CGI

a. 在[控制台\程式集\程式和功能]中按下[開啟或關閉Windows功能]

b. [Internet Information Services]>[World Wide Web 服務]>[應用程式開發功能]>[CGI]將此勾選

6. 重新啟動IIS管理員

7. 進入PHP Manager

8. 進入Manage all settings

9. 將date.timezone的value改為Asia/Taipei

參考

2014年6月26日 星期四

自動登入apple developer

在工作的時候遇到了需要讓電腦自動登入apple developer的需求,想到的解決方法就是用HttpWebRequest去做網頁的溝通,進而得到cookies,達到登入的目的。

目的

利用HttpWebRequest進入apple developer,取得登入所需的cookies。

方法

我們要模仿網頁的互動就要先去觀察網頁的傳遞方式,所以第一步我們要做的觀察,我們知道網頁的運作方式之後就可以將開始寫程式了,利用HttpWebRequest來模仿browser中我們所做的動作,達到登入的目的。

步驟

1. 觀察網頁運作

這裡我們利用chrome的developer tools(在chrome上按下F12即可使用),我們在觀察方面有2個部分要注意的:

1. 傳送帳號密碼的真正網址

網頁的設計常常會再登入中間安插一個專門處理的網頁,如果網頁是這樣設計的話那我們表面上看到的那個uri就不是真正在做登入的頁面了,為了避免這樣的情況,我們可以利用developer tools來找到真正做處理的uri。
在這裡我們可以看到Post的網頁其實是action中的uri,而非原本的uri

2. headers

接下來我們就要去看看網頁的標頭檔是什麼樣子的,由developer tools我們可以看到網頁的標頭檔。
紅色框框部分為要注意的部分

2. 撰寫程式碼

先處理第一點的第一個部分,我們要先抓出真正的uri,在這裡我們使用的是Html Agility Pack,這個package可以利用元素的XPath找出那個元素的屬性,要找出元素的XPath也很容易,只要使用developer tools就可以了。
元素>按右鍵>Copy XPath
找出XPath後我們才算是真正開始寫程式碼,我們可以把程式分成兩個部分:
  1. 找出真正處理的uri
  2. 撰寫正確的request取回登入資訊的cookies
再來是程式碼的部分


結論

其實要自動登入很簡單,只要熟悉http的運作就可以很容易的做出,在這個部份我覺得最重要的就是google developer tools要熟練。

2014年5月17日 星期六

手動ndk-build

在Android Studio裡,有了gradle的幫助我們不需要自己去撰寫Android.mk,它自動就會幫你產生Android.mk,build成.so檔就可以引用,但是當一個大程式要這麼做的時候就會產生問題,因為複雜,所以你會需要自己編寫Android.mk,這個時候就會產生問題,現在我們就來看看要怎麼樣自己撰寫Android.mk和ndk-build。

目的

自己撰寫Android.mk和ndk-build來寫一個Hello JNI。

前置處理

MainActivity.java中的寫法跟第一個Android NDK(Java call C)中相同,先把它寫上去。

步驟

1. javah

上一篇有講,這裡就不再多說了,只是這裡的classpath要改一下,如下所示 : 


2. main

這裡跟上一篇相同。

3. Android.mk

在ndk/doc中,我們可以找到ANDROID-MK.html中的說明,以下是我寫的 : 


4. 關掉自動ndk-build

因為我們不想要讓gradle自動去build ndk,所以我們要把它關掉,在build.gradle的android中打上下面的指令 :



5. ndk-build

接著開Terminal,目錄移到jni,鍵入ndk-build(記得要設定環境參數)


6. 移動檔案

將生成出來的libs中的armeabi資料夾整個移到build/ndk/debug/lib中,就可以運行了

參考資料

2014年5月15日 星期四

第一個Android NDK(Java call C)

最近因為要在Android中使用到C Library,查了一下發現NDK這個工具,它讓Java可以去呼叫C,讓我們在Android的專案中也可以使用C Library。

環境

  • Windows 8.1(64bits)
  • Android Studio 0.58
  • Android NDK Revision 9d
  • ASUS Nexus 7-Android 4.4.2(API 19)

目的

我們要利用Java去呼叫C的方法,然後將取到的字串輸出。

步驟

1. 下載NDK

https://developer.android.com/tools/sdk/ndk/index.html下載符合自己系統的NDK,這裡我們下載Windows 64-bit的NDK,目前的版本是9d。
載好之後隨便放一個地方,記得路徑以便等下使用(我的路徑為C:\Android\android-ndk-r9d)。

2. 新增native宣告C的方法

在MainActivity.java中打入上面的程式碼,宣告完native function之後要先build,要不然等下的javah會找不到這個方法導致遺漏。

3. 使用javah

先簡單講解javah的使用方式,它可以幫我們產生C header file以便讓我們可以在.java中找到對應的方法。

開啟Terminal

Tools > Open Terminal

將所在目錄轉到main

鍵入javah的指令產生.h


  • -d directory(你要儲存的目錄)
  • -classpath path(javah需要的classes(SDK及project的class路徑))
PS:如果找不到javah的話會產生下面的錯誤
在環境變數裡加上javah的路徑就可解決

4. 加入main.c

如果上面的native有被build的話,你的.h中應該會有{your package}_{native function}(我的就是Java_com_hpchen_testndk_app_MainActivity_getStringFromNative)。
PS:如果沒有請clean project,刪掉jni資料夾,rebuild之後再把第3步重做一次。

  • 記得include .h
  • 將.h中的native function寫好

5. 加入util.c

加入一個空的util.c

6. local.properties中加入ndk路徑


將第1步記下的路徑加入local.properties

7. build.gradle中加入ndk參考


注意:是app中的build.gradle,不是project的。

8. 在MainActivity中load library


執行之後就會看到"Hello JNI !"了。

參考


2014年4月23日 星期三

WebRTC-控制傳輸內容

在視訊電話時,我們有時會不想要讓對方聽到聲音或是看到影像,WebRTC中也有這種功能,以下是一個簡單的例子(使用WebRTC二部曲-RTCPeerConnection-下部(實作)的例子過修改)。

原理

我們在上次的範例中直接將自己的資料流(localStream)傳給遠端,但因為local端和remote端都是同一個資料流,所以在改變資料流的內容的時候會連自己的都被改掉(你不想讓對方看到你的視訊影像,卻連自己都看不到自己的影像了),所以我們就要先新增一個新的MediaStream專門給remote端使用,這樣我們就可以對這個remote端的資料流做處理也不會影響到local端的資料流了。

實作

Step 1

上次的例子中新增兩個check boxs :

Step 2

新增onclick事件
這裡我們利用getAudio(Video)Tracks()[0]來取得資料流的資訊,然後將enabled屬性做調整就可以達到控制的目的

Step 3

將localStream複製成remoteStream丟給remote peer

2014年4月18日 星期五

WebRTC二部曲-RTCPeerConnection-下部(實作)

平台

  • Visual studio 2012
  • adapter.js(WebRTC跨平台的shim)

目的

這次實作我們要在同一個視窗中開啟兩個視訊畫面,當我們按下Start鍵時我們可以在第一個畫面(Caller)將webcam抓到的畫面顯示,而當我們按下Call鍵時會利用RTCPeerConnection連線取得Stream顯示在第二個畫面(Callee),而HangUp鍵就是關閉連線,雖然這樣做實際性不高,但這樣的Demo可以很清楚地了解RTCPeerConnection的運作原理。

實作

Step 0 : adapter.js

在開始之前,我們要先解決一個擾人的問題-跨平台,就想我們在Demo getUserMedia的時候因為不同的Browser有不同的函式名稱,導致我們要去做一些處理才能確保他能在各個平台上運作,為了省去這樣的麻煩我們將使用adapter.js來cover這些問題。

Step 1 : html

我們一開始先設置需要的js及tag


Step2 : RTCPeerConnectionDemo.js

添加onclick事件給每個Button



Start : 利用webcam取得畫面(聲音)



Call : 設置RTCPeerConnection


1.設置Local跟Remote的Connection的handler
  •  onicecandidate : 還記得上次的圖中的送信人(candidate)嗎?onicecandidate就是在將找到的送信人給記起來
  • onaddstream(我們的demo中local peer並不需要接收stream所以local peer沒有此handler) : 當接收到stream時所要做的動作,在這裡我們將stream放到id為videoRemote的<video>中

2.將要傳送的stream放入connection中
3.建立offer及answer
  • local Peer建立offer
  • 將自己(local)的地址(local description)記下來
  • 當對方(remote)收到地址(remote description)時記下來
  • 對方(remote)也會把自己的地址(local description)記下來
  • 對方(remote)發送answer給自己(local)
  • 自己(local)會把對方的地址(remote description)記下來


HangUp : 關閉連線



2014年4月10日 星期四

Visual Studio 中斷點(break point) 介紹

這次要介紹的是在Visual Studio中的中斷點使用方式,我們在debugger的時候最簡單的方式就是將參數output到console上,可是這樣做很費時又很麻煩,且每次在做完debug之後往往又要把這些output刪除,學會中斷點出現之後,debug就會輕鬆很多了。

平台

  • Visual Studio 2012

設置

在要中斷的行前面點【滑鼠左鍵】
設置完之後可以按【開始】讓我們來看看中斷點的作用 : 
中斷的情形
由上圖我們可以看到兩點 : 
  1. 在中斷點的地方會有一個黃色箭頭還會反白字串,以方便程式設計師看到中斷的行位置
  2. 程式的執行只會到中斷行的前一行而已(console沒有output代表Console.WriteLine沒執行)

控制

在中斷的情況下我們會看到控制項中有幾個按鈕,在這裡我只介紹【逐步執行】,按下【逐步執行】(或按F11)後會看到下面的畫面 : 
黃色箭頭下移一行,Console出現output
【逐步執行】就是一步步往下執行的意思,這個功能在Debug的時候非常好用。

監看式

在中斷的情況下對變數按【右鍵】>【加入監看式】就可以將變數家道【監看式視窗】中 :

紅色框【加入監看式】,黃色框【監看式】,綠色框【平行監看式】
在【監看式】中,我們可以將變數的【值】做改變,這樣我們就可以測試在不同的情況下程式的反應是不是如預期,而【平行監看式】就可以以執行緒做區分,在多工的程式中Debug更加一目了然。

功能

在【中斷點】上按【滑鼠右鍵】可以看到有一些功能可以調整 : 
功能
  • 條件(因【叫用次數時】的功能可以被【條件取代】,所以就不多加描述了)
可以設定要中斷的條件,ex: num > 1000,下面可以選擇是要true的時候中斷還是要再狀態變更(true>false、false>true)的時候中斷
  • 篩選
篩選主要適用於【多工】,它可以讓使用者決定要使用【中斷點】的執行緒或是機器
  • 叫用時
可於每次【中斷】列印信息之後【繼續執行】,這個功能可以方便的觀察出變數的變化,也不用再將訊息output到console了

結論

在學校中通常都只講求理論,對於實作技巧的教學好像的沒那麼多了(像我就是一直到大四去實習才來學到這些Debug的技巧,真的浪費了我好多的時間QQ),可是這些技巧又是寫程式的重要技巧,所以就在此講解,希望有幫到大家^^