środa, 25 lipca 2012

Office 365 Preview/2013 Preview - second shot! (aplikacje web + Office apps)

W dniu premiery oczy większości były skupione zasadniczo na nowych aplikacjach desktopowych Metro-podobnych Office 2013, jedynej prawdziwej aplikacji Metro OneNote MX oraz instalacji pakietu z chmury. W niedługim później czasie spłynęła druga część nowości związanych z Office, równie ważnych i przełomowych. W tym poście przedstawię krótko te zagadnienia, a mianowicie nowe aplikacje webowe pakietu oraz nowe podejście do pisania rozszerzeń w postaci Office apps, które działają zarówno w wersji desktopowej jak i webowej… Aby spełnić ten postulat nietrudno domyślić się, że aplikacje te pisze się w HTML5 i JS. Jedną z paru opcji dla ich dystrybuowania ma być Office Store.

Zacznijmy od aplikacji webowych pakietu, które w najnowszej wersji działają szybciej, korzystają z elementów HTML5, mają więcej funkcjonalności, zapewniają wygodną obsługę ekranów dotykowych i upodobniły się wizualnie do Metro. Jak najszybciej można zacząć sobie z nich korzystać? Można aktywować testową wersję 2013 na swoim koncie skydrive (co też uczyniłem) lub po prostu wejść na witrynę Office.com

Dostajemy odświeżoną wersję webową Worda, Excela, PowerPointa oraz OneNote.

offweb_01

Nie rozpisuję się o nich dużo, bo najlepiej je sobie pooglądać na żywo, jest też sporo artykułów w sieci na ten temat. Ja subiektywnie zwracam uwagę, że główne menu zajmuje pół strony, czyli nie jest więc aż tak radykalne jak w aplikacjach desktopowych, ma mniej opcji… Nie otwiera się też strona z szablonami na starcie… Może chodzi tu o to, by wersje webowe były jak najprostsze i miały mniej stron… Ogólnie mamy mniej funkcjonalności niż w wydaniu desktopowym, ale znacznie więcej niż w starszej wersji web.

offweb_02

Jednak z deweloperskiego punktu widzenia większa rewolucja dokonała się w możliwości pisania rozszerzeń. Owszem nadal można tworzyć dodatki jak w poprzednich wersjach czyli w .NET i poprzez wywoływanie COM-ów, ale dla sporej części przypadków wystarczy nowe podejście polegające na pisaniu aplikacji webowych w HTML5, JS, CSS3, jQuery… Najlepiej poczytać sobie o tym wertując w dół strony w MSDN począwszy od strony Office and SharePoint app development. Model aplikacji Office został opisany na stronie Overview of apps for Office.

Manifest plus webpage equals app for Office

Desktopowy Office posiada specjalny runtime do hostowania takich aplikacji, który używa komponentów z przeglądarki Internet Explorer (nie musi to być domyślna przeglądarka w systemie, ale powinna być w nim zainstalowana, przynajmniej IE9). Oczywiście są tu odpowiednie poziomy izolacji i zabezpieczenia… W przypadku wersji webowej pakietu nasza aplikacja jest hostowana w iframe z sandbox. To samo API w JavaScript obsługuje obie wersje Office.

W testowaniu nowego Office 365 Preview w chmurze dobrze skorzystać z linka subskrybującego na stronie Sign up for an Office 365 Developer Site. Dostajemy wtedy więcej usług oraz narzędzia przeznaczone dla deweloperów! Drugi raz dokonywałem testowej rejestracji, bo nie potrafiłem jakoś zmienić konfiguracji z poprzedniego posta -:(

Wykonując polecenia ze wskazanej przeze mnie strony uruchamiamy nowe narzędzie o nazwie kodowej “Napa” w całości na stronie web (jakby zalążek webowego Visual Studio?). Do pisania aplikacji na Office nie potrzebujemy więc koniecznie Visual Studio.

365dev_01

365dev_02b

Po wybraniu rodzaju projektu, otwiera się nam projekt aplikacji webowej na stronie web. Poniżej widzimy kod JavaScript obsługujący dwa przyciski, które powodują odczytanie danych z zaznaczonej komórki w Excelu i zapis do niej. To przykładowy kod umieszczony domyślnie w szablonie projektu, standardowo jest też używane jQuery…

365dev_03

Naciskamy pierwszy przycisk na dole i następuje deploying aplikacji na serwer, po czym możemy otworzyć linka wyświetlającego webową wersję aplikacji Excel, która zawiera naszą aplikację.

365dev_05

A teraz niespodzianka… A co jeśli jednak wolimy Visual Studio, które daje trochę więcej możliwości? Naciskamy drugi przycisk, pobiera się nam potrzebny plik z naszym projektem, otwieramy go i mamy nasz projekt w Visual Studio 2012 RC! (mamy nieco mniejszy stopień abstrakcji - oprócz projektu webowego mamy też drugi projekt w C# lub VB.NET z manifestem). Ja używałem tej funkcjonalności, po wykonaniu czynności w końcowej części tego posta (instalacja odpowiednich rozszerzeń dla VS 2012), więc niewykluczone, że postępując w kolejności w jakiej to teraz opisuję, trzeba by więcej doinstalować…

365dev_06

Uruchamiam teraz projekt w trybie Debug, otwiera się nam automatycznie desktopowy Excel 2013, który zawiera w sobie naszą aplikację webową. Zgodnie z dokumentacją mogą pojawić się problemy z wyświetleniem aplikacji z uwagi na certyfikaty, które ja akurat miałem. Ale trzeba dać refresh w obszarze kontrolki webowej i potem wybrać czerwoną opcję, by otworzyć mimo niezalecania i wyświetli się nam wtedy nasza aplikacja, która wyglądem i zachowaniem nie różni się od tego, z czym mieliśmy doczynienia poprzednio na stronie webowej.

365dev_07

A może by tak bardziej tradycyjnie tworzyć aplikacje Office korzystając od początku z Visual Studio 2012?  Można i … tak. Należy doinstalować rozszerzenie Microsoft Office Developer Tools for Visual Studio 2012 (Web Platform Installer oprócz samego rozszerzenia zainstaluje wszystkie potrzebne składniki). Po instalacji w Visual Studio zostanie dodana masa szablonów dla Office 2013 w gałęziach Visual C# i Visual Basic. Oprócz kontynuacji projektów rozszerzeń z poprzednich wersji, znajdują się wśród nich także … projekty webowych aplikacji Office (w kategorii Apps nowe szablony App for Office 2013 i App for SharePoint 2013)

VS2012_off2013

Po wybraniu szablonu App for Office 2013 mogę uzyskać projekt, który … już dzisiaj utworzyliśmy korzystając z webowej aplikacji “Napa”. Tutaj dla odmiany prezentuję domyślną zawartość strony HTML.

VS2012_firstProj

Tak więc możemy wykorzystać HTML5 do pisania swoich rozszerzeń dla najnowszego Office. To kolejna pozycja po natywnych aplikacjach Windows 8 i aplikacjach hybrydowych PhoneGap nie mieszcząca się w pojęciu klasycznych aplikacji webowych…

Brak komentarzy: