A reunião abordou o desenvolvimento de aplicações Metro para Windows 8, destacando as novas funcionalidades e a experiência do usuário. Os participantes foram informados sobre o ciclo de vida das apps, requisitos do Windows Store e apresentação de exemplos de código em C# e JavaScript. Também foi destacada a importância da qualidade das aplicações para aprovação na loja, com datas para próximas reuniões.

1. 2ª Reunião Porto - 14/04/2012 http://netponto.org
Windows 8:
Como Desenvolver Metro Style Apps
Caio Proiete

2. Caio Proiete
Consultor Independente / Freelancer
–> http://caioproiete.net
Formador @ CICLO
–> http://ciclo.pt
Microsoft MVP, MCT, MC*.net

3. Agenda
• Windows 8
– “Hello Windows 8”
– “Hello Metro Apps”
• Desenvolver uma pequena Metro App
do início até ... onde der :)

4. Disclaimer: Beta Bits
• Algumas coisas ainda podem mudar
até a versão final RTM / GA
?
Release
Candidate
?
Consumer
Preview
Fevereiro/2012
Developer
Preview
Setembro/2011

5. Windows 8
• Nova experiência de utilização
• Windows Runtime (WinRT)
• Novo ambiente de execução de Apps
• Windows Store

6. Windows 8: Nova experiência

7. Windows 8: Nova experiência

8. Windows 8: Controlos

9. Windows 8

10. Windows Runtime (WinRT) APIs

11. Windows Runtime (WinRT) APIs
• Acesso aos recursos do sistema
operativo, serviços e hardware
• São assíncronas
• Utilização natural em C#, JavaScript e
C++

12. Código C# que escrevemos hoje...
DllImport "avicap32.dll" "capCreateCaptureWindow"
static extern int
string int
int int int int
int int
DllImport "avicap32.dll"
static extern bool
int
MarshalAs UnmanagedType ref string
int
MarshalAs UnmanagedType ref string
int
// (continua...)

13. Código semelhante no Windows 8 (C#)
using Windows.Media.Capture;
var new CameraCaptureUI
new Size
var await
CameraCaptureUIMode
if
var new BitmapImage
await
FileAccessMode

14. Código semelhante no Windows 8 (JS)
var ui = new Windows.Media.Capture.CameraCaptureUI();
ui.photoSettings.croppedAspectRatio = {
width: 4, height: 3 };
ui.captureFileAsync(Windows.Media.Capture.CameraCapture
UIMode.photo).done(function (file) {
if (file) {
var imageBlobUrl = URL.createObjectURL(file);
id("photo").src = imageBlobUrl;
}
});

15. CameraCaptureUI

16. Instalação típica de Metro Apps

17. App Manifest e Capabilities
• Aplicações declaram os recursos que
necessitam
– Acesso a ficheiros (Documentos, Fotos, etc...)
– Dispositivos (WebCam, Microfone, SMS, etc...)
– Rede e identidade (Internet, rede privada, etc...)
– Associação a tipos de ficheiro (*.doc, etc...)
– Contratos que implementa (Search, Share, etc...)
• appxmanifest.xml

18. Ambiente de Execução das Apps

19. Ciclo de vida das aplicações Metro

20. Ciclo de vida das Metro Apps

21. Windows Store

22. Windows Store – Potencial

23. Windows Store – Quality Labs
• Até o lançamento, só apps que
passarem no Quality Labs (Maio e
Junho) entram na Windows Store
• App precisa ser mesmo boa!! 
• Só por convite (Chatear o Tiago A. Silva)
– tiagoand@microsoft.com

24. Desenvolvimento de uma Metro App

25. Desenvolvimento de uma Metro App

26. Desenvolvimento da App
“Revista Programar”

27. Funcionalidades a implementar...
• Search: Sugestões de Resultados
• Share: Partilhar imagem da revista
• Settings: Ecrã com preferências do utilizador
• Orientation: Adaptação do layout de acordo com as
mudanças de orientação (portrait / snapped)
• PLM: Gravar a restaurar estado da aplicação
• Live Tiles: Mostrar capa das últimas edições na tile da
aplicação
• Push Notifications: Mostrar alerta de nova edição
disponível para download
...

28. Questões?

29. Próximos passos
Windows Dev Center
– http://dev.windows.com
Windows 8 app developer blog
– http://blogs.msdn.com/b/windowsappdev/
Building Windows 8
– http://blogs.msdn.com/b/b8/
The Windows Store blog
– http://blogs.msdn.com/b/windowsstore/

30. Patrocinadores "GOLD"

31. Próximas reuniões presenciais
• 14/04/2012 – Abril (Porto)
• 21/04/2012 – Abril (Lisboa)
• 12/05/2012 – Maio (Coimbra)
• 26/05/2012 – Maio (Lisboa)
Reserva estes dias na agenda! :)

32. Obrigado!
Caio Proiete
caio@netponto.org
http://caioproiete.net
http://twitter.com/caioproiete