2015年7月29日 星期三

[開發Office Add-Ins] 關於Office Add-Ins的類型與架構(3)

要討論Office Add-Ins的架構之前,我們得先知道它目前有哪些類型,如不論你用NAPA或是VS,都可以透過開發工具建立底下三種Office Add-Ins其中之一,分別是:

1. Task Pane Apps
2. Content Apps
3. Mail Apps

分別說明如後。

Task Pane Apps

這種類型的App可在Word, Excel, Porint, Project…等環境中使用,可以說是最廣泛的應用程式類型,主要UI出現在畫面的右方,我們剛才開發的第一個App就是屬於這種類型:

clip_image002[8]

Task Pane Add-Ins可以跟Office文件互動,讀取、填入文件當中的文字或表格,也可以更進一步的抓取文件當中用戶選取的區域,甚至進行該區域的綁定,一但選取區域有所變動時,我們的App可以得知該事件,並透過JavaScript配合Restful API進行進一步的一些後續動作。

Content App

Content App最大的差異,是UI主體是崁入在Office文件當中的:

clip_image004

當然,Content App也是透過JavaScript撰寫,由於這類型的App主要是崁入在Office文件當中,因此最常用的功能與形式,是擴充Office文件原本無法實現的功能。(利如上圖中的地圖,是依照Excel中的數字即時繪製出來的)

Content App跟Task Pane App一樣,可以讀寫Office文件中的內容,我們可以透過Content App,將這些資訊當作參數,調用Content App中的Restful API,計算出我們要的結果,並呈現在Office文件中。(另一個典型的例子,就是股市或匯率即時查詢)

Mail App

第三種是Mail App,是配合Outlook的Add-Ins,這種類型的App和前兩種截然不同,它不只有一個主UI,而是兩個,分別叫做Compose Form和Read Form。

底下是Read Form的介面:

clip_image006

顧名思義,Compose Form是出現在用戶撰寫Email和Appointment的時候使用,而Read Form則是在用戶讀取Email和Appointment的時候使用。

沒錯,Mail App不僅可以與email配合,也可以與Appointment配合,這讓Mail App變得相對複雜,它有兩種使用情境(Email和Appointment),分別又有兩種操作介面(Compose Form與Read Form)。

它可以做什麼功能? 配合email,它可以讀取或寫入郵件的主旨、收件人、副本收件人,它可以讀寫郵件內文,可以設定約會的地點。

我甚至拿這個技術來做了一個請假簽核系統,讓用戶可以開啟email填寫幾個欄位就自動產生請假單,讓收到價單的主管不用點開email,就,就可以直接簽核。

總括一句,Mail App應用層面非常廣大。

在瞭解了Office Add-Ins的類型之後,我們接著來看架構。

Office Add-Ins架構

我們先來看Office Add-Ins的專案架構,Office Add-Ins就專案架構來說,可以分成兩大塊,一個是manifest file,另一個是WebPages:

clip_image002

App manifest用來描述App本身的資訊,例如版號、支援的Office Application類型(Word, Excel…還是都支援?),需要跟用戶索取的權限,開發廠商名稱…等,如果透過Visual Studio,可以在底下畫面中查看與設定:

image003

本質上它是一個.xml格式的檔案,當然Visual Studio幫我們設計了一個編輯介面(上圖)。這個檔案也是您將此App上架到Office Store的時候,需要上傳給Microsoft檢查的檔案。

除了這個檔案之外,另一個部分是WebPages,WebPages基本上就是一堆網頁,前面我們用NAPA時候提到過的Home.html,就是其中之一,本質上,這是一個ASP.NET網站。所以你會看到,不管透過NAPA或是Visual Studio,Office Add-Ins專案建立起來,其結構就是底下這樣的兩個Visual Studio Projects:

clip_image006

上圖下半部的第二個Project,就是WebPages,因此,對照下圖,你可以可以更清楚Office Add-Ins專案的架構:

clip_image008

一個manifest.xml檔案,用來描述App,而另一個WebPages,則是整個App的主體。

Project專案結構

在瞭解了專案的架構之後,我們更靠近一點,來看看專案的結構,主要是WebPages這部分。

你不難發現,所謂的WebPages,基本上就是一個ASP.NET Web專案,但沒有WebForm或MVC的架構,基本上只是一堆html和javaScript而已。但不要忘了,它終究是一個ASP.NET專案,因此這個專案運行時,還是運行在一個IIS服務器上,並且也有web.config,正因為如此,你甚至可以在專案裡加上加上WebAPI或Controllers。

Office Add-Ins的特色(與功能)之一,就是可以透過Restful API抓取外部的資料,並且與Office文件互動,底下是一個典型的例子:

clip_image010

你會看到我們撰寫的Office App抓取到文件中的地址,並且判斷出郵遞區號,在Word裡面當然是沒有郵遞區號資料的,因此我們的App透過呼叫遠端的WebAPI,來取得該地址所對應的可能郵遞區號。

這就是一個典型的例子,在App當中,我們不僅僅具有HTML以及可以與Office Application互動的JavaScript,我們可以撰寫WebAPI,讓JavaScript來呼叫,進而達成我們需要的效果。

而這部分,當然就是撰寫在先前提到的第二個(ASP.NET)專案當中的。

clip_image011

所以簡單的說,第一個專案是manifest file,用來描述、指向app body,第二個專案是ASP.NET也就是app的body了。在這個專案當中,我們可以撰寫前端JavaScript指令碼和HTML,也可以撰寫供前端呼叫的WebAPI(當然你也可以用非.net技術來開發,諸如PHP, JSP…etc)

好,在說明了Office Add-Ins的專案架構之後,我們後面要接著看專案的內容了。

[開發Office Add-Ins] 回頭談談Office這玩意兒 (2)

前一篇我們介紹了如何在幾分鐘內建立一個Office Add-Ins,這一篇,我們回過頭來談一談,為何有Office Add-Ins這玩意兒。

首先,在我成長(也是台灣經濟快速成長)的那個年代,我幾乎可以武斷地說,所有使用個人電腦的用戶,都曾經用過Microsoft Office,甚至有許多使用者,打開電腦的目的,根本就只是使用Office軟體。當然,自從網際網路開始盛行之後,這一切變得有些不同。

微軟在很早以前,就曾經把Office定位成一個平台,而非只是一套軟體。平台,與軟體有何不同? 軟體有著特定的功能,為使用者完成特定的工作;但『平台』,則是一個基礎,一個舞台,讓用戶(或開發人員)可以基於這個平台,持續在上面擴展與發揮。微軟這個Idea,可以說成功,也可以說不成功。其中的細節我們先不談,但不論如何,Microsoft Office持續稱霸著企業應用多年,一直到今天。

然而,挑戰一直都在,曾幾何時,大家打開平板和手機的頻率,開始逐漸超過PC,才沒多久的時間,平板上的應用App,已經不僅僅是超過,而是讓PC上的軟體感到強烈的威脅。

一家企業,要能夠成功不容易,要能夠持續成功,更可以說是難上加難,難的部份不僅僅只是持續創新、不單單只靠執行和效率,更多時候,是必須忘記背後,自己把過去的成功親手掐死,然後你才能夠面對一個新的世代,走向一個嶄新的未來。

微軟,就常幹這種事情。

薩提亞·納德拉(SatyaNadella),在2014年2月就任微軟CEO時,說道:『我們這個行業不尊重傳統,只尊重創新』。

不要覺得訝異,持續成功了三十多年的微軟,不只一次打掉重練,讓自己(的產品)破碎,然後重新開始。網際網路大勢所趨時如是、Java改變開發人員時如是,而今面對行動裝置大軍挑戰的現在,也是。

首先,微軟面對Google一系列線上Office(可以在瀏覽器中執行的類Word, Excel軟體)的挑戰,開始也跟著推出可以在瀏覽器裡面執行的Word, Excel, PowerPoint,當然,用戶可以在瀏覽器裡面編輯,並且直接把檔案儲存到Onedrive雲端空間。不僅如此,也跟用戶端的Office軟體充分整合,檔案可以下載編輯,甚至從用戶端桌面版本的Office軟體中直接編輯雲端的檔案。

接著,因應SaaS(軟體暨服務)的雲端應用程式概念,微軟推出了Office 365,這是一個整合的方案,讓訂購的用戶,可以以租用的方式,使用Office,每個月最多只要幾百元,你可以有近乎無限的Onedrive空間,可以使用整套線上Office(諸如Word Online, Excel Online),然後,你也同時具備了用戶端桌面版本Office的使用授權,只消用同樣的Office 365帳號登入,你就可以執行網路上免費下載的整套Office軟體。

不僅僅如此,Office 365還包含了雲端版本的Exchange Service、SharePoint Service,讓O365的用戶可以不需要自行搭建伺服器,即可享有整套SharePoint與Exchange的功能。全部都包含在每個月幾百元的費用當中,這,也未免太豐富了吧?

還沒完,隨著行動裝置的盛行,微軟知道iOS(iPad, iPhone)以及android的用戶非常多,短時間內Windows平板與手機不太可能超越,因此,行動裝置的市場不可忽視,在這個前提之下,微軟面對現實,做出令對手難以忽視的出擊。

微軟直接把行動裝置版本的Office軟體免費提供給iPad, iPhone, 以及Android用戶,從2015年開始,各種平台上的使用者,都可以下載Office來使用,而針對具有O365帳號的用戶,更是全功能免費開放。

甚至,Office開始有了自己的市集,稱為Office Store,開發人員可已將自己撰寫的App,發佈到市集上,讓各種平台上的Office的用戶購買使用,以便擴充Office本身沒有的功能。(例如筆者就撰寫了一個台灣郵遞區號查詢的App,讓Word, Excel的用戶,可以直接在編寫文件時,查詢或檢核郵遞區號。)

至此,Office再也不單單只是一套辦公室當中廣泛使用的軟體,且變成了一套跨平台、有全球數十億用戶的生態系統與平台。整套Office不僅可以在PC、MAC上使用,也可以在Web(Online)、iOS、Android、Windows Device上使用。

開發人員、MIS或IT人員,可以透過JavaScript程式碼的開發,輕易地擴充Office的功能。

是的,不只是用過去微軟自己家的VBA語言,而是採用標準的JavaScript與jQuery,微軟在這個領域也革了自己的命,為了讓更多的開發人員投入,微軟一改過去撰寫Office Add-Ins的習慣,建立了一個全新的架構,讓熟悉JavaScript與Web開發的技術人員,也可以直接開發Office Add-Ins。

這樣還不夠,前面說到,微軟的O365方案還有SharePoint與Exchange,這兩套微軟重要的企業應用產品,一個是企業的資訊入口網站,另一個是重要的電子郵件、會議預約、以及企業通訊平台,當然也不能置身事外。微軟開放了透過JavaScript與Restful API,讓開發人員用更簡單的方式,直接撰寫SharePoint Add-Ins,將一切更完美的整合在一起。

不僅如此,開發人員寫出來的SharePoint Add-Ins,依舊可以上架到Office Store市集,讓全球所有的Office 365用戶付費下載使用,現在,你已經可以在市集上,看到SAP、SalesFoce,等各種與SharePoint、Offce整合的App在Office Store上,讓Office、SharePoint輕易整合SalesFoce與SAP等企業應用相關功能。

這一個時代,我們正目睹著從傳統的桌面應用程式,大舉轉向為SaaS(軟體及服務)的年代,而微軟正顛覆著自己過去獲利與成功的方式,率先朝這個新的方向前進。今天,不管你是獨立的開發人員、是企業中的IT、MIS,是軟體的開發廠商(ISV),對於微軟以及全球市場正在經歷的這項改變,您勢必將無法忽視。

2015年7月26日 星期日

[開發Office Add-Ins] 從NAPA開始 (1)

Office Add-Ins,是Office 2013開始,嶄新的增益集套件開發方式,用的語言不再是VBA(但VBA依舊可以用,別擔心),而是Web開發人員熟悉的的HTML與JavaScript。

你可以透過開發Office Add-Ins,擴充Office Word, Excel , PowerPoint…的功能,可以將開發好的增益集上架到Office Store(市集),或是佈署到企業內的App Catalog上,供同仁使用。更重要的是,透過這個架構開發的App,是可以在Office Web/Desktop/Mobile各種版本上跨平台使用的,亦即,你在iPad上的Word裡,同樣可以使用這種新的增益集。

在這一篇文章當中,我們將陸續開始為讀者介紹如何開發Office Add-Ins(App for Office),一開始,我們選擇用最簡單的工具,NAPA。

NAPA本身是一個網站,一個Web應用程式,其實也是一個SharePoint App。NAPA提供了一套很簡便的操作介面,讓開發人員可以快速地建構出Office Add-Ins。

在開始之前,您必須申請一個NAPA帳號。可以透過底下這個網址申請:

https://www.napacloudapp.com/

請留意,你要使用NAPA,必須先有一個Microsoft Account,所謂的Microsoft Account也就是過去的Live ID,基本上就是Outlook.com或是hotmail.com的帳號,如果沒有,可以到底下網址申請一個:

https://signup.live.com/

申請完成並登入之後,可進到https://www.napacloudapp.com/ ,會看到底下畫面:

image004

點選Get Started,會要求你使用Microsoft Account登入,如果你已經登入,會看到底下畫面:

 image005

因為NAPA是一個網站,我們可以透過NAPA這個網站來寫程式,而NAPA需要存取您的OneDrive及相關資訊以便於存放與測試您寫的程式,因此您必須選擇Yes。

選擇了Yes之後,會看到底下畫面:

image

這樣您就可以透過NAPA來建立應用程式了。你可以建立一個最基本的Office Add-Ins,我們可以選擇Task Pane Add-In:

image

按下Create之後,你會看到底下畫面:

image018

在這個畫面當中,你會發現一進來看到的是Home.html,這是Task Pane Add-In應用程式的首頁(主UI),你可以點選Home.js,則會切換到:

image019

這是Home.html的主頁面邏輯,身分就等於過去我們在asp.net的code behind的感覺[1]。你會發現,撰寫Office Add-Ins的主要程式語言就是JavaScript(其中大多的語法都是jQuery),只要你熟悉Web開發,就可以開發Office Add-Ins。

除此之外,比較重要的還有app.js,不過關於應用程式架構與內容的部分,我們在後面再介紹。我們先看設定的部分,請點選底下這個工具鈕:

image020

你會發現其實剛才我們提到的頁面進入點,是從這邊(上圖Start Page)設定的。

請接著切換到Run:

 image021

你會發現畫面右方變成了你的應用程式運行方式的選項,在筆者撰寫本文的時候,只有第一個選項可以選擇。這設定的意思是,你選擇在Excel Web App當中來測試這個應用程式。

注意,這是指測試階段。當正式階段時,你的Task Pane Add-Ins是可以在Desktop/Web/Mobile版本的Word, Excel, PowerPoint…等環境執行的。

NAPA令人側目的原因之一,不僅僅是你可以透過它在純Web環境上面寫程式(使用時還有完整的IntelliSense),除此之外,你的source code直接存放在你自己的OneDrive裡面,連測試環境都是你自己的Excel Online應用程式。

你可以在NAPA環境當中,按下下圖中的執行圖式:

image

你會發現NAPA正幫你把這個程式碼上傳到你的OneDrive,並且試著開起你的Excel Online來運行:

image023

正常上傳完畢之後,你會發現Excel Online被打開了,你的Task Pane App就出現在Excel Online右方(這是Task Pane Add-In的顯示位置):

image024

由於它需要你的授權,請按下Start:

image025

您會發現App的主畫面Home.html出現了:

image026

由於Excel Online需要你授權才能編輯文件,所以請從選單中選擇Edit in Excel Online:

image027

接著,你就可以編輯Excel了,我們嘗試在儲存格中填入一些文字,然後按下主畫面當中的get data from selection鈕:

image028

你會發現我們透過NAPA撰寫的javaScript,抓取到了Excel裡面的儲存格內容,並且把資料顯示在上圖右下方的Notification訊息區塊。

這段JavaScript的程式碼是:

    function getDataFromSelection() {
        Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    app.showNotification('The selected text is:', '"' + result.value + '"');
                } else {
                    app.showNotification('Error:', result.error.message);
                }
            }
        );
    }

我們後面再來慢慢解釋這段程式碼,讀者先別心急。不過你可以很明確地發現,我們只需要透過JavaScript,就可以存取Excel中編輯文件的資料。

NAPA固然已經是一個非常不錯的開發工具,但是,如果我們想更進一步的編輯複雜的程式碼,甚至在測試執行時候設定中斷點,那Visual Studio依舊是你的不二選擇。

你可以從NAPA當中,按下底下這個按鈕,即可把整個專案下載到Visual Studio當中執行:

image

點選後,如果出現底下畫面,請選擇你要下載的(慣用的)程式語言:

image030

選定後,你會發現瀏覽器自動下載一個程式,請選擇執行:

image031

接著,系統會開起Visual Studio:

image032

你會發現,開啟的專案就是剛才我們透過NAPA編輯的專案。

你會發現,在Visual Studio當中,依舊可以按下F5執行整個專案,如果你需要,甚至可以在JavaScript中設定中斷點,程式碼執行到該斷點還真的會中斷。

會不會好奇,如果你在Visual Studio當中,按下F5,程式會運行在哪兒呢?

沒錯,就是Desktop版本的Excel:

image033

而透過用戶端的Visual Studio來開發與測試,還有一個好處,就是可以設定更多的測試環境,你可以開啟專案中的manifest檔案,然後選擇Activation:

image034

你會發現畫面中可以選擇該App可運行的Office應用程式環境,當你選擇了Word之後,會發現這個App,在Visual Studio中按下F5測試時,開起的就從Excel改為Word了:

image035

但有趣的是,在程式碼完全不改變的狀況下,該App依舊可以運行,且跟在Excel中運行的狀況幾乎一樣,按下task pane視窗中的按鈕,底下呈現出了用戶在word當中選擇的文字。

有沒有發現,不論是透過NAPA或是Visual Studio,你都可以輕易地建立Office Add-Ins應用程式,是不是很方便呢?

後面,我們將會繼續介紹Office Add-Ins的開發,與程式碼的撰寫。

 


[1] 沒聽過code behind? 算了, never mind。

2015年7月24日 星期五

[研討會]Office Apps 開發簡介

感謝各位參與今天於 MS 7AB的『Office Apps 開發簡介』,相關內容會在整理後放到blog上,謝謝大家的支持囉。