Windows 8 Desenvolvimento de Metro Style Apps Deric Ferreira

Apresentação em tema: "Windows 8 Desenvolvimento de Metro Style Apps Deric Ferreira"— Transcrição da apresentação:

1 Windows 8 Desenvolvimento de Metro Style Apps Deric Ferreira
MCPD – Web Developer, Windows Azure Developer, SharePoint 2010

2 Objetivos Fornecer uma visão geral sobre a nova plataforma de desenvolvimento Demonstrar aplicações Metro Incentivar o Desenvolvimento de Apps Metro Style

3 Agenda Visão geral da Plataforma Particularidades das Metro Style Apps
Demonstração – Navegação e Interface Particularidades das Metro Style Apps Demonstração – Timer App (Ciclo de Vida de Processos) Navegação com Metro Style Apps Demonstração – Navegação com Grid Template e Simulador de Dispositivos Desenvolvimento de Games Demonstração – Platformer Game (HTML5) Futuro das Metro Apps

4 Visão Geral da Plataforma

5 Disclaimer: Beta Bits Algumas coisas ainda podem mudar… RTM / GA
Release Candidate 26 de Outubro de 2012 Consumer Preview Maio/2012 Developer Preview Fevereiro/2012 Setembro/2011

6 Windows 8 – Principais Novidades
Nova experiência de utilização Windows Runtime (WinRT) Windows Store

7 Windows 8: Nova experiência

8 Windows 8: Novos Controles
Button Hyperlink Ratings ListBox Checkbox Slider Combo Box Progress Bar Time Picker Progress Ring Date Picker Toggle Switch Radio Button

9 Navegação e Interface -

10 Dilema – Inovação x Padronização
Suportar múltiplas plataformas? W3C - HTML5, CSS3 Demora para fabricantes se adequarem as especificações Tag Video – “You must add a lot of tricks to make sure your video will play in all browsers.” Mundo comercial Fabricantes se diferenciam pelas inovações (GPS, Acelerômetros, etc) Inovações sempre ocorrem antes da padronização (Dãrt...)

11 Desafios dos desenvolvedores
Diferenciar suas aplicações das concorrentes Adotar linguagem de programação/tecnologia para cada plataforma Utilizar framework de terceiros para compatibilizar as diferenças

12 Windows Runtime (WinRT) APIs
Metro style Apps HTML JavaScript C C++ C# VB Desktop Apps Win32 .NET / SL Internet Explorer JavaScript (Chakra) C C++ C# VB XAML HTML / CSS Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media Windows Core OS Services

13 Windows Runtime (WinRT)
Todas APIs WinRT são nativas WinRT APIs parecem naturais em C++, C#/VB, e JavaScript Métodos assíncronos (> performance) Reutilização de código portado em C++ (Games) WinRT APIs permite rico acesso a dispositivos, OS e serviços HTML5/CSS/JavaScript e XAML = Metro style apps > Riqueza de Controles e Funcionalidades < Curva de Aprendizado Metro style apps oferecem suporte nativo a DirectX (Games)

14 Código que escrevemos hoje…
[DllImport("avicap32.dll",EntryPoint="capCreateCaptureWindow")] static extern int capCreateCaptureWindow( string lpszWindowName, int dwStyle, int X, int Y, int nWidth, int nHeight, int hwndParent, int nID); [DllImport("avicap32.dll")] static extern bool capGetDriverDescription( int wDriverIndex, [MarshalAs(UnmanagedType.LPTStr)] ref string lpszName, int cbName, [MarshalAs(UnmanagedType.LPTStr)] ref string lpszVer, int cbVer); // (continua...)

15 Código equivalente no WinRT (C#)
using Windows.Media.Capture; var ui = new CameraCaptureUI(); ui.PhotoSettings.CroppedAspectRatio = new Size(4, 3); var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo); if (file != null) { var bitmap = new BitmapImage(); bitmap.SetSource(await file.OpenAsync(FileAccessMode.Read)); Photo.Source = bitmap; }

16 Código equivalente no WinRT (JS)
var dialog = new Windows.Media.Capture.CameraCaptureUI(); var aspectRatio = { width: 1, height: 1 }; dialog.photoSettings.croppedAspectRatio = aspectRatio; dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(function (file) { if (file) { var photoBlobUrl = URL.createObjectURL(file, { oneTimeOnly: true }); document.getElementById("capturedPhoto").src = photoBlobUrl; } });

17 Mais naturalidade, maior produtividade
C# Javascript using Windows.Media.Capture; var ui = new CameraCaptureUI(); ui.PhotoSettings.CroppedAspectRatio = new Size(4, 3); var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo); if (file != null) { var bitmap = new BitmapImage(); bitmap.SetSource(await file.OpenAsync(FileAccessMode.Read)); Photo.Source = bitmap; } var dialog = new Windows.Media.Capture.CameraCaptureUI(); var aspectRatio = { width: 1, height: 1 }; dialog.photoSettings.croppedAspectRatio = aspectRatio; dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(function (file) { if (file) { var photoBlobUrl = URL.createObjectURL(file, { oneTimeOnly: true }); document.getElementById("capturedPhoto").src = photoBlobUrl; } });

18 Particularidades

19 App Manifest e Capabilities
Aplicações declaram os recursos que necessitam Acesso a arquivos (Documentos, Fotos, etc) Dispositivos (WebCam, Microfone, SMS, etc) Rede (Internet, Intranet, etc) Contratos (Search, Share, etc) Onde estão todas estas configurações? Appxmanifest.xml

20 Processo de Instalação das Apps
Windows Store backend install install SCCM

21 Ambiente de Execução das Apps
Processo1 Local context Web context AppData Local Temp Roaming Processo2 Local context Web context AppData Local Temp Roaming Contracts Direct APIs Brokers Sistema Operacional User data Devices Communications Handlers Tiles …

22 Ciclo de vida das Aplicações Metro

23 Novo ciclo de vida – Por quê?

24 Gerenciamento de Estado
Nativamente StateFul Armazenamento de Estado Local e Nuvem Compartilhamento de Estado

25 Compartilhamento de Estado?

26 Modos de Visualização / Resolução

27 TimeApp -

28 Navegação com Metro Apps

29 Navegação nas Metro Apps
Navegação tradicional - Web Script reloading Parse de novo Documento HTML Parse e “reestilização” de CSS Dificuldade para compartilhar de variáveis Interrupção Visual Tela Branca Falta de Fluidez

30 Navegação nas Metro Apps
Navegação com PageControlNavigator Conteúdo carregados pelo DOM em “runtime” (similar ao AJAX) Benefícios Preservação do Contexto Animações entre transição (WinJS animations library) Maior fluidez Melhor experiência de navegação

31 Nagevacao com GRID Template + Simulador de Dispositivos -

32 Desenvolvimento de Games

33 Windows 8 – Plataforma de Games
Your Killer Game Graphics Movies & Cut Scenes Game Input Audio Local Services Connected Services Tools Direct3D DirectX Video Pointer Point WASAPI PLM Windows Live Visual Studio Direct2D Media Foundation Sensor API XAudio2 AppData Windows Store Asset Viewers HTML XInput Contracts Xbox LIVE Asset Processors XAML E nosso velho amigo XNA?

34 Platformer Jogo de “aventura” baseado em HTML Tecnologias exploradas
JAVASCRIPT Acelerômetro Touch Screen Devices (Joystick)

35 Platformer Game -

36 Futuro das Metro Apps

37 Windows Store

38 O que deve nos interessar…o Potencial
“By 2020, analysts believe enterprise end-users will spend less than 10 percent of their time in Win32 applications. Most applications (including OS-neutral ones) and the browser will be run from Metro. Microsoft will continue to support Win32, but it will encourage developers to write more manageable and engaging applications using WinRT.” - Michael Silver, VP, Gartner.

39 Por onde começar... Ferramentas e SDKs Windows 8 Visual Studio 2012
Conta de desenvolvedor R$ 80 – Licença Individual R$ 160 – Licença Empresarial Material de Apoio

40 Perguntas

41 Obrigado! Deric Ferreira dericferreira@hotmail.com