2016年12月28日 星期三

有了網域名稱 Domain Name之後 下一步 設定DNS Server 與 DNS Record相關記錄

有了網域名稱 Domain Name之後 下一步 設定DNS Server 與 DNS Record相關記錄 課程資料補充

2012 年 11 月 07 日 吳 天元 資訊系統

<?XML:NAMESPACE PREFIX = "[default] http://www.w3.org/2000/svg" NS = "http://www.w3.org/2000/svg" />FacebookGoogle+Twitter

分享給朋友

這篇 有了網域名稱 Domain Name之後 下一步 設定DNS Server 與 DNS Record相關記錄 是為了 11/20號 這堂課程 特別針對 網域名稱 Domain Name 這部分的補充資料製作的。

由於幾次課程教學經驗,發現很多學員對於DNS 網域名稱的認識都有似懂非懂的狀況,甚至不少朋友以為只要買了網域名稱 Domain Name剩下的事情就都沒有了~

其實~ 這個最基本的基礎部分卻是最重要的關鍵喔!

如果一個DNS設定不正確,或是DNS代管的查詢主機不穩定,使用者連你的網址解析都查詢不到,那就算你的網站做的多炫、多酷~ 人家根本看不到那有什麼用呢?

所以~ 基礎馬步、網站建設最基礎的部分!

有了網域名稱 Domain Name之後 下一步~

設定DNS Server 與 DNS Record相關記錄  真的需要你好好理解他! 認識他了!

另外、我希望這篇說明文章能夠避免掉專業名詞和技術等等角度,以一個"初次使用者“的觀點來學習、運用 實務上會用到的資訊即可,所以簡化了一些技術部分的說明,單以申請、購買完網址之後必須注意的部分來說明,但基本我個人認為"觀念“很重要的地方我還是保留,尚請觀看的朋友們先知道一下了。

網域名稱 是你進入網路經營中最重要的第一步!

網域名稱 英文為 Domain Name 也就是我們常常簡稱叫 “網址" 的東西。

網址" (網域名稱) 其實功能是讓原本 一串很難記憶的IP位址,轉成較好使用和記憶的英文/中文 名稱之用,拿溫厝的部落格還舉例吧~

原本我租用的網路空間,他給我的IP位置是 74.52.105.66 這串數字,但如果我每次都要朋友們來我的部落格都是打這串數字,也真是太難為他們了~ 所以我取了個日文拼音念出來是"喔阿基" 老頭子 的英文 網域名稱 www.oyag.com 、並且透過DNS Server服務把這IP和網址對應起來! 這樣~ 朋友們就不需要打一串無意義的數字,只要打英文網域名稱就能連到我的部落格了!

網域名稱、他像一個門牌的功能,讓你可以找到你要的網站、但他也有 品牌、商標 一樣的的特性,好記、好念的"網址“,能讓你深入腦海裡,就像Google! 已經成為我們要在網海裡搜尋資料最佳代表。

接著、要來告訴大家很多人都不知道的"重要觀念“!  一般我們常看到的"網址" 如 我的部落格 www.oyag.com 中! 其實還有隱藏了一個 ““! 網址 www.oyag.com. 最後其實是有個"點" 存在的!!

但是由於為了大家方便使用,一般瀏覽器、工具都會幫你自動省略需要輸入這最後一個"“的部分,所以長久下來大家也都習慣忽略掉那個"“的重要性了~

為何說這個"“很重要呢! 因為他代表了一個 “ROOT" “根源“的部分!

對網域名稱查詢來說,當你輸入這段網址的時候,電腦會先去詢問"ROOT" 這段網址在哪裡? 而後再由一層一層的順序問下去。

而網域名稱怎麼做用的呢?

每個國家、地區都有一個 NIC的機構,負責管理該地區代碼之後的網域名稱,如 .tw 結尾的網址,就通通由TWNIC這個單位負責管理。

剛剛不是提到了先詢問"ROOT“最後那個點嗎?  接下來網址中有"國碼TW“,下一關就是去查詢負責管理.TW的網址註冊單位,網址的IP是在哪裡? 當有主機回答之後,再繼續下一關持續查詢下去,最後找到你的網站。

而由於Internet 網際網路是由老美"發揚光大“的,所以一般 .com後面並沒有加上.usa 的國家代碼,這點是非常特殊的喔~ 這也造成了 .com 結尾的網址通常比較熱門搶手的原因,這算是老美的網域名稱"特權“吧~

另外、我推薦這支影片!

由一家網路公司製作的 DNS運作說明影片,非常的動態、有趣的方式把一些專有名詞很生動的"“出來! 讓你認識到底DNS、網域名稱 … 他們是怎麼運作的~

購買網址、網域名稱 Domain Name 要找哪些單位呢?

如果你是要買 .com 這種後面沒接國家、地區的,我個人推薦 network solutions 這個網站,等會告訴你原因。

而如果你要買的是 .tw 台灣結尾的網址,根據TWNIC推薦的幾家購買清單中我列出幾個個人曾經使用過,服務和穩定性都還不錯的如下圖,其中我個人最推薦 中華電信

為何我推薦上面提到的兩家,原因有幾個~

記得我上面提到基礎查詢的重要性嗎? DNS如果不穩定,當流覽網站的使用者連查詢網址需求時好時壞,這可是會嚴重影響他進入你網站和感覺得第一關!

而中華電信那台我們熟悉不過的DNS 主機 168.95.1.1 更是大家都知道的"“! “強壯“!

號稱"打不死“、"全世界最忙碌的一台DNS“!  這是我特別中意的主因之一!

而另一個重要關鍵因素,一般你申請網域名稱、網址時,有些單位並不提供"設定DNS Record相關記錄“的服務,或是有些單位有提供但卻"非常難使用“!! 別懷疑! 大部分的申請公司關於這些設定總是搞的….非常的"工程介面“! 很不友善、親人~  如果你沒有基礎DNS Record 相關記錄的觀念,真的很難搞得懂接下來該怎麼做,這是我覺得目前在網域名稱申請、使用上不夠友善的部分了。

上面特別推薦的兩家,在介面上雖然也是不夠好,但至少都是業界數一數二的"“、"夠知名“! 所以網路上許多的說明、找朋友詢問時,你能得到的幫助也會比較多、且容易,這是我推薦的另外關鍵之一了。

接著、當你買好了網域名稱 、網址之後,還有三個步驟要做喔!

1. 告訴購買網址單位,DNS Server主機在哪裡?
購買網址的網站,一定會提供這個部分的設定,通常允許你設定兩台DNS Server 的IP。

2. 設定DNS Record記錄 相關資料。
這個部分是網址最重要的核心關鍵! 但不是每個網址申請單位都會提供這項服務!

3. 等待12~24小時,DNS交換記錄 讓設定生效。
設定好了之後,由於全球DNS主機真的很多, 交換資料需要一些時間。

接下來、需要讓你知道一點點 “傷腦筋“的"硬觀念“了~ DNS Record 有些甚麼!

基本你要知道上面這四種(可以濃縮為三種)! 其中PTR和 A  Record 常常會被合併一起,簡單形容就是 那個網址對應那個IP 這樣看待他,MX Record是要設定收信用的,而 CNAME Record就是 “別名“、"外號" 類似的概念~

還有 DNS Record 說明 推薦你看這個網頁。

光看會頭疼~ 我舉個"實例“讓你知道 就簡單多了~

我的網域名稱 oyag.com  首先PTR基本對應IP到我的虛擬主機 74.52.105.66 (你也可以視為 A Record看待),這邊要注意一下,有些人會直接對應如www.oyag.com 到一個IP上,個人不建議這麼設定,因為有時我們偷懶,輸入網址的時候會懶得打www,這三個字,當然有時瀏覽器會很"聰明“的自動幫你加上www的前字串,但如果沒有加上時,一般使用者不打www就連不到你的網站了,所以基本最佳的設定方式是先設定一個 沒有www前字串的網域名稱對應到IP,再去CNAME設定一個別名,讓DNS主機知道不管是打www.oyag.com或是oyag.com都會連到同一個IP去,這樣才是最好的方式喔!

如果你的網站還有其他的網站,例如某些公司www開頭的是官網、blog開頭的是部落格網頁,那就需要再設定一組A 記錄指到另外一個IP去,這樣了解A Record記錄的用法了吧。

接著、像我租用的虛擬主機 FTP 功能和網站是同一台,那就再設一組CNAME給他,讓DNS主機知道當我要找ftp.oyag.com時,也是連到oyag.com這台機器去,而如果你有使用Google Apps的各項服務,Google也會要你針對CNAME的部分都設到ghs.google.com這台主機去,功能、原因就和FTP相同。

對了~ 剛剛提到 FTP、Blog…這些單獨的名稱+網域名稱,我們通常還會稱呼他為 SUB Domain 子網域,這樣的方式喔~

最後那MX Record記錄,就是給郵件收信用的,例如我使用Google Apps的郵件待管功能,就根據Google的說明方式,把一推MX記錄都設定進去就OK了~

這樣說明你應該了解 DNS Record相關記錄 該怎麼做了吧~

我再舉一個實例,使用 中華電信 Hinet購買網域名稱後,相關的設定步驟,這樣手把手的指導。

首先~  中華電信設定頁面上,左邊功能區 有個"DNS異動與查詢" !

好吧~ 先讓我抱怨他一下! 這個"DNS異動與查詢" 名稱取的真怪,乍看還真會讓人以為他是要設定 DNS Record記錄用的,其實他是要設定"DNS 主機“在哪裡這樣的功能喔~

一般申請購買網址的單位都會提供2~4個欄位,中華的部分可以設定5組,不過~ 如果有4組都還會查詢不到,我看那DNS主機或服務也真是夠爛的了~

基本上你選擇用中華,就是希望用他那強大打不死的DNS,不過現在中華也"含蓄“多了,設定說明上請你設定的是另外兩台DNS Server,大概他希望寫入的和查詢的可以分開來,降低點DNS的負擔吧~ 你可以依造說明的指示,把DNS主機指向到紅框中那兩台!

基本上透過交換,168.95.1.1 那台也是幾乎同步就有你的資料了~

接著就是第二步驟,要來輸入DNS Record記錄的資料了,如果你申請網址的單位沒有提供這服務,例如早些年和TWNIC申請網址,他就不提供DNS Server讓你設定(這邊有時稱呼為DNS待管服務),那你就得另外在外頭找有提供DNS代管服務的網頁了,不然就得自己"架"一台這樣的主機才行。

這邊提供一個我個人用了幾年,覺得價格便宜又穩定的老字號公司 DNS PARK 代管公司,我建議你不要找網路上說的"免費DNS服務“那些,個人經驗! 有付費! 穩定度差很大喔! 這家收費已經非常的便宜了~  一年約14美金,要求穩定! 這個就別省了吧~

不然~ 申請網域名稱時,直接找有付送DNS服務的網址申請單位這樣就最省了!

回到"設定DNS Record記錄“這邊,功能在左邊"DNS代管設定“這個地方!

由於上面範例的網址,是在中華申請的,第一次進入時系統會提醒你,你現在設定的是只放在中華電信中的前兩台DNS主機,像我還有另外的DNS代管機器,中華是管不到的!

接著、就是一大串像上面這樣表單一樣的設定畫面,請有耐心、細心的一項一項分別輸入各自的DNS Record記錄資料,全部輸入完成後,按下"送出資料“就OK了~

第三步驟、如果你是其他單位像我使用的  network solutions 大約需要6~8小時,基本上12小時最多24小時DNS交換機制就會完成,中華這台由於太多人查詢他了,所以當你設定完成後1小時內設定大概就會生效,速度很快的喔~

這個範例以中華電信的DNS設定、服務做說明,其他家的也大致類似,就請抓住基本原則靈活運用了~

希望這篇能對大家有幫助,也能帶給朋友們一些DNS的正確觀念!

如果你對Google Apps架設專屬自己的網域名稱郵件信箱有興趣,也可以參考這篇 TWNIC課程 小資撇步 善用免費網路資源 帶你認識 Google Apps 相信能對你有很好的幫助的。

如果你對於其他網路行銷方面想要了解和學習,我目前還有一些課程不定期的開班,請參考 網路行銷 開課資料 這篇文章來了解了。


歡迎企業、團體包班 相關課程規劃,若有這方面需求請與我聯絡
(下方留言、或 Mail給我 bryan@oyag.com)。

2016年12月13日 星期二

SQL Update to the SUM of its joined values

在Master/Detail的架構下,要把子表的金額統計併到主表時的作法
BookingPitches 為主表
BookingPitchExtras 為子表
UPDATE p
SET extrasPrice = t.sumPrice
FROM BookingPitches AS p
INNER JOIN
    (
        SELECT PitchID, SUM(Price) sumPrice
        FROM BookingPitchExtras
        WHERE [required] = 1
        GROUP BY PitchID 
    ) t
    ON t.PitchID = p.ID
WHERE p.bookingID = 1

2016年12月10日 星期六

iTools使用教學

要使用iTools連接手機,首先要先安裝Apple所提供的iTunes(若已有安裝的話則略過)
一.安裝 iTunes

下載網址如下:
http://www.apple.com/tw/itunes/download/

安裝完後,接上您的apple手機(或平板),應該會出現以下畫面
PS:第一次電腦可能會跳出信任裝置的詢問畫面,此時在手機上按信任即可
image

這樣就確定電腦可以正常跟手機連線了

二.安裝 iTools

下載網址如下:
http://pro.itools.cn/itools3

image

安裝完成後執行,程式會嚐試連接,以下為連接完成後的畫面

image

三.使用iTools管理音樂

點選上方功能表的[音樂]後,左方會出現選單,再點手機名稱下方的音樂,此為您手機中的音樂

image

這裏可以把支援音樂格式的音樂(例如MP3)直接從電腦拉進手機,
當然也可以從上方的功能表執行提供的功能

image

在歌曲上按Mouse右鍵,可編輯歌曲的相關資訊

image

四.使用iTools管理相片

點選上方的功能[照片],再點裝置名稱下方的照片,就可以看到手機裏的照片,
若要把照片存到電腦,一般會依年月存放,所以我們要:
1.先點[按月份展示]
2.若要全部匯入點選[全選],否則選取要匯入的照片
3.點選導出

image

導出後自動會建立年月的資料匣

image

2016年12月8日 星期四

EXCEL格式化顯示

利用Excel製作資料表格時,經常會隨著時間及樣本數變多,而讓表格愈來愈龐大,甚至會因為如何使用累積的資料量太大,而無法快速及準確地找到關鍵內容。當然,雖然說透過建立函數條件,可以在龐大的資料庫裡,篩選出符合條件的資料,但要建立函數條件,說難不難,說簡單也不簡單,最基本的要先知道函數怎麼選擇,才能進行之後的條件設定,其實,還真不是件容易的事。

因此,如果在時間緊迫下,又或是不了解函數怎麼使用時,不妨可以試試Excel內建的格式化功能,透過內建的樣式,再依照情況進行細部的設定調整,就可以在龐大的Excel資料表中,快速突顯出想要的訊息。甚至進一步還可以搭配小圖示使用,讓表格能夠更佳精準的呈現重要資訊。

通常設定格式化的條件,有基本的顯目提示,例如標示大於、小於、等於,又或是將儲存格中的數字,以橫條或色階顯示,甚至也能依條件設定,從表格中挑選出百分比等。這裡就以簡單的個人帳簿為例,透過格式化的條件,可以檢示一年中的各項支出費用裡,哪些超過預算,哪些又符合標準值。

▲在「設定格式化的條件規則管理員」裡,可以針對預設或自定的條件,進行內容的修改

Step 1

選取要做為格式化的儲存格,並選擇「設定格式化的條件」→「醒目提示儲存格規格」→「大於」。

Step 2

跳出視窗後,先點選要做為比較條件的欄位,此例為B2,視窗裡便會出現「$B$2」。

Step 3

為了將此格式條件通用整個表格,將「$B$2」改為「B$2」;並設定表格資料的顯示條件,下拉選單可以選擇預設及自訂。

Step 4

在「設定格式化的條件」→「管理規格」項下,檢查設定條件是否無誤。

Step 5

於出現的視窗可以按下「編輯規格」,進行格式條件的修改。

Step 6

重複步驟1至步驟3,設定其他格式條件。切記每項格式條件設定時,務必要重新選取格式化的儲存格。

Step 7

選取設定的條件格式欄目,並按下選單功能列的「複製格式」圖示。

Step 8

當出現油漆刷的小圖示後,就可下拉到想要套用的行列裡,表格資料就會自動依格式化條件顯示。

EXCEL的資料防呆

透過Excel內建的「資料驗證」功能,可以設定儲存格所能填入的資料內容,以限制輸入資料條件的方式,也就是防呆功能,讓表格就算是與他人一同共用時,也能確保資料的有效性。

在Excel的資料驗證功能裡,提供了整數、實數、清單、日期、時間、文字長度和自訂公式等幾種驗證項目,使用者可以透過簡單的設定,定義各式的儲存格內容,例如選擇日期時,可以限定表格只能填入指定的時間。此外,還可以進一步設定提示視窗,一旦使用者輸入的數值不符合儲存格的限制條件時,便會出現錯誤的提醒視窗,一直到輸入正確的數值後,才能夠完成表格的製作。這裡便以簡單的填入業績為例,於公開多人編輯的業績表格裡,設定業績數字的資料驗證條件,當點選儲存格時,即會出現表格建立者的提示訊息;而當填入的數字不符合限制條件時,就會跳出錯誤視窗提醒,如此也不怕多人共同編輯表格時,會鍵入不符合規範的內容。

▲在資料驗證視窗裡,可以進行條件的設定,以及提示視窗的內容。 

Step 1

選取要進行資料驗證的儲存格區域,並避開欄頭的儲存格位置。 

Step 2
  1. 點選「資料」的分頁。
  2. 選擇「資料驗證」→「資料驗證」。

Step 3
  1. 於出現的「資料驗證」視窗,點選「設定」分頁。
  2. 下拉「儲存格內允許」選單,此例選擇「整數」,若是有小數點則選擇實數。

Step 4
  1. 在「資料」處下拉選單,選擇資料驗證的條件設計,此例選擇介於。
  2. 填入最小值及最大值,也可點選後方的紅色箭頭,進入試算表點選儲存格。

Step 5
  1. 點選「提示訊息」分頁。
  2. 輸入點選儲存格時,會出現的提示內容。

Step 6
  1. 點選「錯誤提醒」分頁。
  2. 輸入出現錯誤提醒時,視窗會出現的標題及內容。

Step 7

回到試算表後,當點選設定資料驗證條件的儲存格時,便會出現提示的訊息。 

Step 8

若在儲存格上輸入的數值,不符合資料驗證條件,則會出現錯誤視窗。 

在 Visual Studio 中建置 Xamarin.Forms 應用程式的基本概念

了解在 Visual Studio 中建置 Xamarin.Forms 應用程式的基本概念

發行︰ 2016年2月

如需 Visual Studio 2017 RC 的最新文件請參閱 Visual Studio 2017 RC 文件

在您完成 設定和安裝驗證您的 Xamarin 環境 中的步驟之後,本逐步解說會示範如何建立 Xamarin.Forms 基本應用程式 (如下所示)。 使用 Xamarin.Forms 時,您可以一次將所有 UI 程式碼寫入可攜式類別庫 (PCL)。 接著,Xamarin 即可針對 iOS、Android 和 Windows 平台自動呈現原生 UI 控制項。 我們建議您使用這種方法:只有使用支援所有目標平台的 .NET API,PCL 選項才能達到最佳支援效果,此外 Xamarin.Forms 亦可讓您跨平台共用 UI 程式碼。

The Weather App sample on Android, iOS, and Windows Phone

您將會執行下列步驟來建置應用程式:

System_CAPS_ICON_tip.jpg 提示

您可以在 GitHub 上的 xamarin-forms-samples 存放庫找到本專案的完整原始程式碼。

設立方案

下列步驟會建立 Xamarin.Forms 方案,其中包含共用程式碼的 PCL 和兩個已加入的 NuGet 套件。

  1. 在 Visual Studio 中,建立新的空白應用程式 (Xamarin.Forms 可攜式) 方案,並將其命名為 WeatherApp。 您可以在搜尋欄位中輸入 Xamarin.Forms,輕鬆找到這個範本。

    如果找不到,可能必須安裝 Xamarin,或是啟用 Visual Studio 2015 功能。請參閱 設定和安裝

    Creating a new Blank App (Xamarin.Forms Portable) project

  2. 按一下 [確定] 建立解決方案後,您會擁有數個個別專案:

    • WeatherApp (可攜式):您會將跨平台共用的程式碼寫入此 PCL,包括搭配 Xamarin.Forms 使用的一般商務邏輯和 UI 程式碼。

    • WeatherApp.Droid:包含原生 Android 程式碼的專案。 這會設為預設啟始專案。

    • WeatherApp.iOS:包含原生 iOS 程式碼的專案。

    • WeatherApp.UWP:包含 Windows 10 UWP 程式碼的專案。

    • WeatherApp.Windows (Windows 8.1):包含原生 Windows 8.1 程式碼的專案。

    • WeatherApp.WinPhone (Windows Phone 8.1):包含原生 Windows Phone 程式碼的專案。

    System_CAPS_ICON_note.jpg 注意

    您可以隨意刪除任何不屬於目標平台的專案。 就本逐步解說的目的而言,我們會參考 Android、iOS 和 Windows Phone 8.1 專案。 UWP 和 Windows 8.1 專案的使用方式與 Windows Phone 8.1 專案十分相似。

    您可在每個原生專案中存取對應平台的原生設計工具,並可以實作平台特定畫面和所需的功能。

  3. 將您方案中的 Xamarin.Forms NuGet 套件升級為最新的穩定版本,如下所示。 每次建立新的 Xamarin 方案時,我們都建議您進行此步驟:

    • 選取 [工具] -> [NuGet 套件管理員] -> [管理方案的 NuGet 套件]。

    • 核取 [更新] 索引標籤下方的 Xamarin.Forms 更新,並核取要更新方案中的所有專案 。 (注意:請不要核取 Xamarin.Android.Support 的任何更新)。

    • 將 [版本] 欄位更新為可使用的 [最新穩定版]。

    • 按一下 [更新]。

      Updating the Xamarin.Forms NuGet package

  4. Newtonsoft.Json 和 NuGet 套件新增至 PCL 專案,您將使用此專案來處理從天氣資料服務擷取而來的資訊:

    • 在 NuGet 套件管理員 (在步驟 3 後仍保持開啟) 中,選取 [瀏覽] 索引標籤,並搜尋 Newtonsoft

    • 選取 Newtonsoft.Json

    • 核取 WeatherApp 專案 (這是唯一一個必須安裝套件的專案)。

    • 請確認 [版本] 欄位設為 [最新穩定版]。

    • 按一下 [安裝]。

    • Locating and installing the Newtonsoft.Json NuGet package

  5. 重複步驟 4 以尋找並安裝 Microsoft.Net.Http 套件。

  6. 建置方案,並確認沒有任何建置錯誤。

寫入共用的資料服務程式碼

您可以在 WeatherApp (可攜式) 專案中撰寫可攜式類別庫 (PCL) 程式碼,進而跨所有平台共用。 系統會自動依據 iOS、Android 和 Windows Phone 專案,將 PCL 包含在應用程式套件中。

若要執行此範例,您必須先在 http://openweathermap.org/appid 註冊免費 API 金鑰。

下列步驟會將程式碼新增至 PCL 以存取並儲存天氣服務的資料:

  1. 以滑鼠右鍵按一下 WeatherApp 專案,然後選取 [新增] > [類別]。 在 [加入新項目] 對話方塊中,將檔案命名為 Weather.cs。 您將使用此類別儲存天氣資料服務的資料。

  2. 以下列程式碼取代整個 Weather.cs 的內容:

    C#

    namespace WeatherApp  
    {  
        public class Weather  
        {  
            public string Title { get; set; }  
            public string Temperature { get; set; }  
            public string Wind { get; set; }  
            public string Humidity { get; set; }  
            public string Visibility { get; set; }  
            public string Sunrise { get; set; }  
            public string Sunset { get; set; }  
    
            public Weather()  
            {  
                //Because labels bind to these values, set them to an empty string to  
                //ensure that the label appears on all platforms by default.  
                this.Title = " ";  
                this.Temperature = " ";  
                this.Wind = " ";  
                this.Humidity = " ";  
                this.Visibility = " ";  
                this.Sunrise = " ";  
                this.Sunset = " ";  
            }  
        }  
    }  
    
    
  3. 將另一個類別加入名為 DataService.cs 的 PCL 專案中,以使用該專案來處理天氣資料服務的 JSON 資料。

  4. 以下列程式碼取代整個 DataService.cs 的內容:

    C#

    using System.Threading.Tasks;  
    using Newtonsoft.Json;  
    using System.Net.Http;  
    
    namespace WeatherApp  
    {  
        public class DataService  
        {  
            public static async Task<dynamic> getDataFromService(string queryString)  
            {  
                HttpClient client = new HttpClient();  
                var response = await client.GetAsync(queryString);  
    
                dynamic data = null;  
                if (response != null)  
                {  
                    string json = response.Content.ReadAsStringAsync().Result;  
                    data = JsonConvert.DeserializeObject(json);  
                }  
    
                return data;  
            }  
        }  
    }  
    
    
  5. 將第三個類別新增至名為 Core 的 PCL 中,您會在其中放置共用商務邏輯,例如使用郵遞區號形成查詢字串,接著呼叫天氣資料服務,然後填入 Weather 類別執行個體的邏輯。

  6. 以下列項目取代 Core.cs 的內容。

    C#

    using System;  
    using System.Threading.Tasks;  
    
    namespace WeatherApp  
    {  
        public class Core  
        {  
            public static async Task<Weather> GetWeather(string zipCode)  
            {  
                //Sign up for a free API key at http://openweathermap.org/appid  
                string key = "YOUR KEY HERE";  
                string queryString = "http://api.openweathermap.org/data/2.5/weather?zip="  
                    + zipCode + ",us&appid=" + key + "&units=imperial";  
    
                dynamic results = await DataService.getDataFromService(queryString).ConfigureAwait(false);  
    
                if (results["weather"] != null)  
                {  
                    Weather weather = new Weather();  
                    weather.Title = (string)results["name"];                  
                    weather.Temperature = (string)results["main"]["temp"] + " F";  
                    weather.Wind = (string)results["wind"]["speed"] + " mph";                  
                    weather.Humidity = (string)results["main"]["humidity"] + " %";  
                    weather.Visibility = (string)results["weather"][0]["main"];  
    
                    DateTime time = new System.DateTime(1970, 1, 1, 0, 0, 0, 0);  
                    DateTime sunrise = time.AddSeconds((double)results["sys"]["sunrise"]);  
                    DateTime sunset = time.AddSeconds((double)results["sys"]["sunset"]);  
                    weather.Sunrise = sunrise.ToString() + " UTC";  
                    weather.Sunset = sunset.ToString() + " UTC";  
                    return weather;  
                }  
                else  
                {  
                    return null;  
                }  
            }  
        }  
    }  
    
    
  7. 建置 WeatherApp PCL 專案,以確保程式碼正確。

開始寫入共用的 UI 程式碼

Xamarin.Forms 可讓您在 PCL 中實作共用的 UI 程式碼。 在這些步驟中,您會將含按鈕的畫面加入 PCL 中,其會使用上一節加入的天氣資料服務程式碼所傳回的資料來更新它的文字:

  1. 加入名為 WeatherPage.cs 的 [表單 Xaml 頁面],方法是以滑鼠右鍵按一下 WeatherApp 專案,並選取 [加入] > [新項目]。 在 [加入新項目] 對話方塊中,搜尋「表單」,選取 [表單 Xaml 頁面],並將其命名為 WeatherPage.cs

    Xamarin.Forms 是以 XAML 為基礎,因此這個步驟會建立 WeatherPage.xaml 檔案以及巢狀的程式碼後置檔案 WeatherPage.xaml.cs。 這可讓您透過 XAML 或程式碼產生 UI。 您需要針對這兩項作業,進行本逐步解說中的一些步驟。

    Adding a new Xamarin.Forms XAML page

  2. 若要將按鈕加入 WeatherPage 畫面,請使用下列項目取代 WeatherPage.xaml 的內容:

    XAML

    <?xml version="1.0" encoding="utf-8" ?>  
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
           x:Class="WeatherApp.WeatherPage">  
      <Button x:Name="getWeatherBtn" Text="Get Weather"/>  
    </ContentPage>  
    
    

    請注意,您必須使用 x:Name 屬性來定義按鈕名稱,才可從程式碼後置檔案中依名稱參考此按鈕。

  3. 若要加入按鈕點選事件的事件處理常式以更新按鈕文字,請以下列程式碼取代 WeatherPage.xaml.cs 的內容 (您可視需要自行將 “60601” 變更為其他郵遞區號)。

    C#

    using System;  
    using Xamarin.Forms;  
    
    namespace WeatherApp  
    {  
        public partial class WeatherPage: ContentPage  
        {  
            public WeatherPage()  
            {  
                InitializeComponent();  
                this.Title = "Sample Weather App";  
                getWeatherBtn.Clicked += GetWeatherBtn_Clicked;  
    
                //Set the default binding to a default object for now  
                this.BindingContext = new Weather();  
            }  
    
            private async void GetWeatherBtn_Clicked(object sender, EventArgs e)  
            {  
                Weather weather = await Core.GetWeather("60601");  
                getWeatherBtn.Text = weather.Title;  
            }  
        }  
    }  
    
    
  4. 若要將 WeatherPage 作為應用程式啟動時的第一個開啟畫面,請以下列程式碼取代 App.cs 中的預設建構函式:

    C#

    public App()  
    {  
        MainPage = new NavigationPage(new WeatherPage());  
    }  
    
    
  5. 建置 WeatherApp PCL 專案,以確保程式碼正確。

使用 Visual Studio Emulator for Android 測試您的應用程式。

您現在可以準備執行應用程式! 現在,我們先執行 Android 版本以確認應用程式可從氣象服務取得資料。 您可在稍後加入更多 UI 項目之後,再執行 iOS 和 Windows Phone 版本 。 (注意:如果您是在 Windows 7 上執行 Visual Studio,請遵循相同的步驟,但改為使用 Xamarin Player)。

  1. 以滑鼠右鍵按一下 WeatherApp.Droid 專案,然後選取 [設定為啟始專案],以將其設為啟始專案。

  2. 在 Visual Studio 工具列中,即會將 WeatherApp.Droid 列為目標專案。 選取其中一個 Android 模擬器進行偵錯,並按 F5。 建議您使用 VS 模擬器的其中一個選項,以 Android 版 Visual Studio 模擬器選項執行應用程式。

    Selecting a VS Emulator debug target

  3. 在模擬器中啟動應用程式時,請按一下 [獲知天氣] 按鈕。 您應該會看到按鈕的文字更新為芝加哥,IL,即為從天氣資料服務擷取的資料 Title 屬性。

    Weather App before and after tapping the button

完成 UI 使其具備跨平台的原生外觀與風格

Xamarin.Forms 可針對每個平台呈現原生的 UI 控制項,讓您的應用程式自動擁有原生的外觀與風格。 為了更清楚了解這項功能,讓我們先完成郵遞區號輸入欄位的 UI,並顯示從服務傳回的天氣資料。

  1. 以下列程式碼取代 WeatherPage.xaml 的內容。 請務必如上所述使用 x:Name 屬性來命名每個項目,才可從程式碼中參考這些項目。 Xamarin.Forms 也有提供一些版面配置選項 (xamarin.com);這裡的 WeatherPage 是使用 StackLayout(xamarin.com)。

    XAML

    <?xml version="1.0" encoding="utf-8" ?>  
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
           x:Class="WeatherApp.WeatherPage">  
    
      <ContentPage.Resources>  
        <ResourceDictionary>  
          <Style x:Key="labelStyle" TargetType="Label">  
            <Setter Property="TextColor" Value="#a8a8a8" />  
            <Setter Property="FontSize" Value="Small" />  
          </Style>  
          <Style x:Key="fieldStyle" TargetType="Label">  
            <Setter Property="TextColor">  
              <OnPlatform x:TypeArguments="Color" iOS="Black" Android="White" WinPhone="White" />  
            </Setter>  
            <Setter Property="FontSize" Value="Medium" />  
          </Style>  
          <Style x:Key="fieldView" TargetType="ContentView">  
            <Setter Property="Padding" Value="10,0,0,0" />  
          </Style>  
        </ResourceDictionary>  
      </ContentPage.Resources>  
    
      <ContentPage.Content>  
        <ScrollView>  
          <StackLayout>  
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  
                  BackgroundColor="#545454">  
              <StackLayout Padding="10,10,10,10" HorizontalOptions="Start">  
                <Label Text="Search by Zip Code" TextColor="White" FontAttributes="Bold"  
                    FontSize="Medium" />  
                <Label x:Name="zipCodeLabel" Text="Zip Code" Style="{StaticResource labelStyle}" />  
                <Entry x:Name="zipCodeEntry" />  
              </StackLayout>  
              <StackLayout Padding="0,0,0,10" VerticalOptions="End">  
                <Button x:Name="getWeatherBtn" Text="Get Weather" WidthRequest="185" BorderWidth="1" >  
                  <!-- Set iOS colors; use defaults on other platforms -->  
                  <Button.TextColor>  
                    <OnPlatform x:TypeArguments="Color" iOS="White"/>  
                  </Button.TextColor>  
                  <Button.BorderColor>  
                    <OnPlatform x:TypeArguments="Color" iOS="White"/>  
                  </Button.BorderColor>  
                </Button>  
              </StackLayout>  
            </StackLayout>  
            <StackLayout Padding="10,10,10,10" HorizontalOptions="Start">  
              <Label Text="Location" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label Text="{Binding Title}" Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Temperature" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="tempLabel" Text="{Binding Temperature}"  
                    Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Wind Speed" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="windLabel" Text="{Binding Wind}" Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Humidity" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="humidityLabel" Text="{Binding Humidity}"  
                    Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Visibility" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="visibilitylabel" Text="{Binding Visibility}"  
                    Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Time of Sunrise" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="sunriseLabel" Text="{Binding Sunrise}"  
                    Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Time of Sunset" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="sunsetLabel" Text="{Binding Sunset}"  
                    Style="{StaticResource fieldStyle}" />  
              </ContentView>  
            </StackLayout>  
          </StackLayout>  
        </ScrollView>  
      </ContentPage.Content>  
    </ContentPage>  
    
    

    請注意 OnPlatform 標記在 Xamarin.Forms 中的使用方式。OnPlatform 標記會選取應用程式目前執行所在平台專屬的屬性值 (請參閱 External XAML Syntax (xamarin.com)。 在這裡,我們會使用它來為資料欄位設定不同的文字色彩:在 Android 和 Windows Phone 上設為白色,iOS 則為黑色。 您可以針對任何屬性與資料類型使用 OnPlatform,以在 XAML 的任意位置進行平台專屬的調整。 在程式碼後置檔案中,您可以使用 Device.OnPlatform API 來達到相同的目的。

  2. 以下列程式碼取代 WeatherPage.xaml.cs 中的 GetWeatherBtn_Clicked 事件處理常式。 此程式碼會驗證項目欄位中是否有郵遞區號、擷取該郵遞區號的資料、將整個畫面的繫結內容設定為產生的 Weather 執行個體,然後將按鈕的文字設為「再次搜尋」。 請注意,UI 中的每個標籤會繫結至 Weather 類別屬性,因此當您將畫面的繫結內容設定為 Weather 執行個體時,就會自動更新這些標籤。

    C#

    private async void GetWeatherBtn_Clicked(object sender, EventArgs e)  
    {  
        if (!String.IsNullOrEmpty(zipCodeEntry.Text))  
        {  
            Weather weather = await Core.GetWeather(zipCodeEntry.Text);  
            this.BindingContext = weather;  
            getWeatherBtn.Text = "Search Again";  
        }  
    }  
    
    
  3. 在 Android、iOS 和 Windows Phone 這三個平台上執行應用程式:以滑鼠右鍵按一下適當的專案,選取 [設定為啟始專案],然後在裝置上或模擬器中啟動應用程式。 輸入有效的美國郵遞區號 (例如 60601),然後按 [獲知天氣] 按鈕,即可顯示該區域的天氣資料,如下所示。 若是 iOS 專案,您就必須將 Visual Studio 連接至您網路中的 Mac OS X 電腦。

    The Weather App sample on Android, iOS, and Windows Phone

本專案的完整原始程式碼位於 GitHub 上的 xamarin-forms-samples 存放庫

2016年12月7日 星期三

自訂VS的外部工具

Running command prompt from inside Visual Studio

For easier access, you can add the Visual Studio Developer Command Prompt or any other command prompt to the Tools menu on Visual Studio, by adding it to the external tools list. This is how you can accomplish that:

  1. Open Visual Studio.

  2. Select the Tools menu and choose External Tools....

  3. On the External Tools dialog box, choose the Add button. A new entry appears

  4. Enter a Title for your new menu item such as Command Prompt.

  5. In the Command field, specify the file you want to launch such as %comspec% or C:\Windows\System32\cmd.exe .

  6. In the Arguments field, specify where to find the specific command prompt you want to use such as /k "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\Tools\VsDevCmd.bat" (this will launch the Developer Command Prompt installed with Visual Studio 2015). This value needs to be changed according to your Visual Studio version and installation location.

  7. Choose a value for the Initial directory field such as Project Directory .

  8. Choose the OK button.

After that, the new menu item is added and you can access the command prompt from the Tools menu.

image

How to add a Uninstall option in Visual Studio Setup project without writing code

Visual Studio 建立Uninstall反安裝程式設定

1) In the Setup Project –> File System windows –> Right Click “File System on Target machine” –> add a Special Folder, select System Folder;

2) Into this system folder Add a file. Browse for msiexec.exe from local System32 folder and add it. Override default properties of this file as follows:

Condition:=Not Installed (make sure you put ‘Not Installed’ exactly like that, same case and everything),
Permanent:=True,
System:=True,
Transitive:=True,
Vital:=False.

3) Create a new shortcut under the ‘Users Program Menu’, Set Target to the System Folder which you created in the step 1. and point it’s at the msiexec.exe. Rename the shortcut to ‘Uninstall Your Application’. Set the Arguments property to /x{space}[ProductCode].

5) Build the project, ignore warning about the fact that msiexec should be excluded, DONT exclude it or the setup project wont build.

The ‘Not Installed’ condition and Permananet:=True ensure that the msiexec.exe is only placed into the system folder as part of the install IF it doesn’t aready exist, and it is not removed on an uninstall – therefore it;s pretty safe to ignore that warning and just go for it.

(Based on the description from SlapHead)

 

【Step1】

  • File System on Target machine按右鍵新增一個add a Special Folder,選擇System Folder。

【Step2】

  • System Folder按右鍵新增file,在你電腦系統裡找一個msiexec.exe,如果不知道就用搜尋的,基本上放在System32 folder裡。
  • 接下來設定msiexec.exe的參數:
  • Condition = Not Installed(自行KEY上)
  • Permanent = True
  • System = True
  • Transitive = True
  • Vital = False

【Step3】

  • 在msiexec.exe按右鍵建立一個捷徑(shortcut),然後移到你要顯示的資料夾中,這裡是移到Users Program Menu底下的Marc資料夾,請自行修改名稱Uninstall XXX。
  • 接下來在Uninstall XXX的屬性Arguments增加" /x {ProductCode}"(記得/x後要加空白鍵),ProductCode在setup屬性底下找的到,類似{B52B1687-DC77-48F4-A842-2AD7B45C7EAA}

【Step4】
  • 只要Build就完成了