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.

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.

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.

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.

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…

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ę.

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ć…

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.

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)

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.

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…

Office 365 Preview/2013 Preview na gorąco!

Nie mogłem się powstrzymać i zainstalowałem nowego Office 2013 zarówno w postaci tradycyjnego msi, jako 365, na Windows 7 i 8 (aby porównać), a także dodatkową aplikację dla Windows 8. Przejrzałem też bardziej dogłębne źródła wiedzy niż nagłówki popularnych portali internetowych… Ale po kolei.

Obejrzyjmy na początek oryginalne video z San Francisco, w którym zostają zademonstrowane w dość wyczerpujący sposób możliwości nowego Office. Po Ballmerze vice pokazuje na żywo cały Office na żywo w działaniu. Naprawdę warto!

Całość możemy zainstalować z tego miejsca. Wersja 32-bitowa jest polecana zarówno dla maszyn 32-bitowych, jak i … 64-bitowych. Wersja 64-bitowa też istnieje i dla obróbki dużych dokumentów wymagających dużo pamięci jest lepsza, ale może nie być zgodna z dotychczasowymi dodatkami. Instalacja z msi wydaje się taka … mało wyrazista, ot prosty instalator przypominający ten z Office 2010. W przypadku 365 po darmowej rejestracji na okres testów wersji rozwojowej z poziomu portalu istnieje możliwość instalacji oprogramowania na swoim komputerze (a dokładnie do 5 komputerów). Pobiera się niewielki plik, parę minut i już Office jest gotowy do działania (pewna synchronizacja nadal się wykonuje, ale możemy korzystać już z aplikacji). Instalacja ciekawiej wyglądająca, widać gdzie położono nacisk. Po instalacji nowy Office na komputerze wygląda tak samo niezależnie od sposobu instalacji (grupa aplikacji Office 2013), choć w Dodaj/Usuń Programy instalacja jest sygnowana innymi nazwami. Aha, w obu przypadkach potrzebujemy Windows 7 lub Windows 8. Są jednak oczywiście pewne różnice między instalacją z msi a Office 365 - instalacja 365 może działać obok starszych wersji. Odnośnie instalacji polecam wpis Installing the NEW Office 2013 Customer Preview - Step-by-Step.

Teraz to, co robi największe wrażenie (poza nowymi funkcjonalnościami w poszczególnych aplikacjach)

Interfejs Metro, dotyk, animacje

Jak wymyślono Metro dla aplikacji desktopowych? Czy są jakieś różnice między Windows 7 a Windows 8?

Czy można jeszcze jakoś na nowo wymyślić ekran startowy, okno otwierania i zapisywania plików, eksportu… Co by tu jeszcze zrobić z głównym menu w Office 2007/2010? Ha, można. Połączmy wszystko w jedną całość i nie upierajmy się … przy modalności naszego menu zamieniając go na stronę z klawiszem Back. W końcu twórcy Windows przestali się upierać przy menu Start zamieniając je na cały ekran… Czemu więc twórcy Office’a mieliby być gorsi?

W efekcie dostajemy ekran powitalny (w prawym górnym rogu mamy w tle rysunek, który można sobie wybrać podczas instalacji 365, mogę wyrazić swój nastrój przez emoticon, następuje integracja z moim kontem Microsoft)

Ekran powitalny prowadzi nas do zmodernizowanej aplikacji z ribbonami

Klikamy File i … przechodzimy na stronę, której zakładki odpowiadają pozycjom głównego menu z poprzednich wersji Office (wśród nich także …. zakładka New w 90% z naszym ekranem powitalnym). Zauważmy, że domyślnym miejscem zapisu jest chmura, ale można jeszcze wybrać sobie swój komputer… Przy wybieraniu konkretnego folderu wyskakuje niestety tradycyjne systemowe okno dialogowe dla zapisu/odczytu plików.

Podobnie do Worda (btw - edytowanie plików PDF!) został zrealizowany Excel (btw - automatyczne wypełnianie kolumn na podstawie dwóch komórek), PowerPoint (btw - nowy widok dla prezentera, łatwa używanie multimediów z sieci np. Youtube), Publisher, OneNote (ten w pakiecie, jest też inny, ale o nim dalej), InfoPath (2 aplikacje), Access.

Odnośnie ekranów startowych to jest też tam taka efektowna kontrolka do nawigacji między szablonami i ich konfigurowania, np. w przypadku PowerPoint może to wyglądać następująco:

Outlook jest bardzo do nich podobny, ale przy starcie jest pokazywane okno do konfiguracji konta jak w 2010, a potem od razu otwiera się nam aplikacja z ribbonami (btw - kapitalne zebranie informacji kontaktowych dla adresata z możliwością zadzwonienia na Skype!, ActiveSync teraz nie tylko dla Exchange, ale także dla hotmaila i gmaila!, podgląd w popup do głównych zakładek, które teraz są na dole!)

Na zakończenie ogólnych wrażeń z UI, uwaga że w bardzo wielu miejscach pojawiają się animacje przesunięcia np. przy zmianie czegoś z listy, zmiany strony. Te aplikacje naprawdę żyją!  Co do dotyku, to bardzo wiele można nim zrobić, działają gesty multi-touch np. pinch & stretch. Mamy pokaz, że dotyk może być przydatny także do bardziej złożonych aplikacji biznesowych, w co niektórzy jakiś czas temu powątpiewali! Nowy Office staje się wzorem dla nowoczesnych aplikacji biznesowych, które są gotowe na erę tabletów…

Czy są jakieś różnice między zachowaniem i wyglądem aplikacji Office w Windows 7 i Windows 8? Wyglądają dokładnie tak samo…

Prawdziwe aplikacje Metro i rewolucyjne menu dla aplikacji biznesowych

Specjalnie dla Windows 8 zostaną wydane obok ich desktopowych odpowiedników dwie prawdziwe aplikacje Metro - dla OneNote i Lync. Aplikacja Metro dla OneNote obecnie nazwana została jako OneNote MX (od Metro eXperience), ale docelowo MX ma zniknąć z jej nazwy. Była pokazywana w San Francisco, możemy ją też za free pobrać  z Windows Store dla Windows 8 Release Preview, co też uczyniłem. Należy zwrócić uwagę, że aplikacja ta posiada innowacyjne menu w kształcie koła, które pozwala dokonywać wyboru bardziej złożonych opcji i może … zastąpić ribbona! A więc jest to pomysł, jak osadzić w Metro aplikacje biznesowe, które do tej pory korzystały z ribbonów. Sam wygląd menu zmienia się w zależności od kontekstu, jeśli np. wybieramy kolor to wygląda jak niżej:

Temat też dogłębnie opisał Paul Thurrott (człowiek od teorii spiskowych MS, z kubkiem kawy) na swoim blogu w poście Office 2013 Public Preview: Metro-Style OneNote. Zresztą napisał też kilkanaście innych świetnych postów o Office 2013, analizując zmiany w każdej aplikacji z osobna oraz poruszając dla nich wspólne tematy.

Chmura i synchronizacja

Tu krótko, ale dobitnie. Pomijając już nawet dominującą wersję 365 i jej instalację z chmury, to mamy naprawdę łatwą możliwość współdzielenia tych samych danych na wszystkich naszych komputerach, smartfonach i tabletach, a przestrzeń w chmurze jest domyślną lokalizacją dla zapisywanego dokumentu!. Pamiętane jest nawet ostatnio odwiedzane przez nas miejsce w danym dokumencie!

Społeczność i komunikacja

Chcemy zadzwonić do przyjaciela z maila na Skype?  Chcemy opublikować dokument jako post na blogu np. bloggerze? (po co ja jeszcze tego posta napisałem w Windows Live Writer?) Nic prostszego! Jest to wszystko standardowo wspierane, jak wiele innych rzeczy z social networking.

Na razie na tyle. Oczywiście to nie wszystko,  ale ogólnie mam nadzieję udało mi uchwycić to co chciałem.