2015年10月25日 星期日

Cordova 環境安裝 (OSX)

安裝Node.js

https://nodejs.org/en/

於terminal輸入 node -v 確認版本


於App Store 安裝XCode,安裝IOS開發環境


安裝JAVA SDK

https://support.apple.com/downloads/#java

於terminal輸入javac –version 確認版本


安裝Apache Ant

安裝 Homebrew

http://brew.sh/

terminal

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install ant 透過brew安裝ant

於terminal輸入 ant –version確認版本


安裝Android SDK Tools

http://developer.android.com/intl/zh-tw/sdk/index.html#Other

進入bash_profile設定

cd
nano .bashrc

依照路徑指定platform-tools及tools位置

export PATH=/Users/username/android/sdk/platform-tools:/Users/username/android/sdk/tools:$PATH

輸入CTRL+O . CTRL+X 儲存

nano .bash_profile 確認export是否正確


terminal

adb version  確認版本

android 開啟 Android SDK Manager

安裝packges


測試Cordova

cordova create MyApp

cd MyApp

cordova platform add android (或ios)

cordova build android (或ios)

cordova run android (或ios)

 

Technorati 的標籤: ,,,

2015年10月24日 星期六

Cordova 環境安裝 (Windows)

如果你是.NET開發人員,慣於習慣使用Visual Studio開發,那2015版本已經將Cordova整合在裡面,安裝Apache Corodva Tools則可將Cordova所需的環境安裝完成,預設是不會安裝的,故在安裝VS的時候需額外勾選

Visual Studio 2015 Community下載

https://www.visualstudio.com/zh-tw/products/visual-studio-community-vs.aspx

9a2914a584874e0f86dc913ad6cd45d3

如果你不是.NET開發人員,在開發Cordova前,需先依序安裝以下環境:

安裝Node.js

https://nodejs.org/en/

安裝完後,可於命令提示字元輸入 node – -v 確認版本

0a4e04010d0e480fb39bece08f5ebff5


安裝git client

http://git-scm.com/

安裝完後,可於命令提示字元輸入 git –version 確認版本

a70aed640a684e46a408e2ec59023613


透過NPM安裝Cordova套件

NPM會於安裝Node.js一併安裝

npm install -g cordova

cordova -v 確認版本

24cccd560f8a49d1a4f90965b678f624


安裝 Java JDK

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

49a032edea164c118779ff79178c646e

設定環境變數PATH

設定JDK安裝路徑,加於分號之後
;C:\Program Files\Java\jdk1.8.0_65\bin

398d2319bbbe4daea0b0e1173e32cefa

新增環境變數JAVA_HOME

C:\Program Files\Java\jdk1.8.0_65

ced72524563c4ec6b5c418932f12392c

確認JAVA版本

javac –version

d572b3faef9c43009f8e789770e55943


安裝 Apache Ant

http://ant.apache.org/bindownload.cgi

Ant是Android的編譯程式,他為開發Andorid的必要環境

下載.zip檔,並解壓縮,此例為放置C:\ant的位置

設定PATH環境變數,一樣新增於分號後面

C:\ant\apache-ant-1.9.6\bin

f8cdcaa9359c42cbb5af017cb451b130

新增ANT_HOME環境變數

C:\ant\apache-ant-1.9.6

2c6efd116fb84cfd82f50646c8a57705

確認版本

cfdace1681a34766b9fa81afc3882cc0


安裝 Android SDK Tools

http://developer.android.com/intl/zh-tw/sdk/index.html#Other

設定Android Path環境變數

;[SDK Tools位置];[SDK platform-tools位置]

範例:

;C:\Program Files (x86)\Android\android-sdk\tools;C:\Program Files (x86)\Android\android-sdk\platform-tools

輸入 adb version 確認版本

30a2bc2d09b940dda01aa6a3678bcfa3

輸入android 後應會跳出SDK Manager,將建議安裝的Packges安裝完成

3b322800422842f6a561f72d13f13a00


測試Cordova

在命令提示字元依序輸入,確認是否能執行模擬器

cordova create MyApp

cd MyApp

cordova platform add android

cordova build

cordova run android

af06b1f08d8e4ed79d05801dff8fc184

2015年8月14日 星期五

用filesaver.js 輕鬆將html table的資料匯出成Excel

過去有關Excel的匯出我都是用NPOI套件來撰寫,之前也有寫過類似的文章:

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(23) – NPOI匯出功能

但看到同事有使用filesaver.js這個套件來做匯出,個人覺得蠻方便的,就來分享一下

唯一有個限制,因為是用Html5的Blob來實現的,所以較舊的瀏覽器不支援

而有些版本只要再加載Blob.js也可正常運作

c85eee520a2e43589c3188a35b6ed0da

資訊來自 filesaver.js Github

官網已經有Demo示範匯出 png . txt . xhtml 的類型,以下就來實作實務上很常見的匯出table raw data

首頁Github整個clone下來會發現filesaver.min.js這個檔案,將這個檔案載入到你的網頁

e7a4119874a646ff9c98b135453ca671

接著我們寫個html假資料,並加個匯出按鈕,當然實際上你的資料來源可能是後端提供而來

ed9c7e3d3ce34582b205dcdc3784598e

22927ec38a9544ea871d38fcf1ce6978

接著我們用jQuery button click的時候,將tbData這個div底下的資料匯出

$(function () {
$('Button').click(function () {
var blob = new Blob([document.getElementById('tbData').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
var strFile = "Report.xls";
saveAs(blob, strFile);
return false;
});
});

這樣就可以很方便的匯出資料了!


780e1092f82642c59ffae31dead7beb5


Technorati 的標籤: ,,,

2015年8月13日 星期四

Visual Studio 2015 的localDB

好久沒更新部落格…近半年已無時間跟體力在文章上,但依然遇到一些問題還是有做一些未經整理的筆記,有時間再一一補上來分享….

今年依然是個技術大爆發的一年,前陣子將開發環境重新安裝成 Win 10 + Visual Studio 2015後,原本在2013 Run的專案,SQL Server是用本機的localDB,但用VS 2015開已經連不上,至於什麼是localDB呢?可以看看保哥這篇文章:

再以往使用localdb你的連線字串可能看起來會是這樣:

<add name="ConnectionString" connectionString="Data Source=(localdb)\v11.0;Initial Catalog=DataBaseName;Persist Security Info=True;MultipleActiveResultSets=True;Application Name=EntityFramework" providerName="System.Data.SqlClient" />


再VS 2015 開始有了新的命名方式,必須改用 (localdb)\MSSQLLocalDB 來取代

<add name="ConnectionString" connectionString="Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=DataBaseName;Persist Security Info=True;MultipleActiveResultSets=True;Application Name=EntityFramework" providerName="System.Data.SqlClient" />


當然,如果還是要用舊的執行個體,也可以下載安裝:


https://msdn.microsoft.com/zh-tw/sqlserver2014express.aspx


--


一點小筆記...