Meetup Microsoft .Net Toulouse

Présentation au sujet: "Meetup Microsoft .Net Toulouse"— Transcription de la présentation:

1 Meetup Microsoft .Net Toulouse
Développement Windows 10 ClevLab Aurélien Lemoine & Xavier Giovannacci Lundi 20 mars 2017

2 Sommaire Développement Windows 10
UWP – Universal Windows Platform VisualStateManager / AdaptiveTrigger Continuum Animations Cortana Ink UWP Community Toolkit par David Catuhe

3 ClevLab Agence fondée en 2010, spécialisée sur les plateformes mobiles et les technologies Microsoft ClevLab est éditeur de ses propres applications Une dizaine d’applications Windows Phone et Windows 10: FeedLab, Instant TV, … Plus de 2 millions de téléchargements ClevLab est aussi prestataire de services pour accompagner les entreprises sur WP et Windows Cardiweb, Chauffeur-Privé, DigiSchool, Le Point, Les Indés Radios, Microsoft France, Microsoft UK, Orange, S4M, Sanofi, Sen.se, Se Coucher Moins Bête, Société Générale, … Nos applications les plus connues : FeedLab : Instant TV : Nos dernières réalisations grand public sur Windows 10 : Le Point : Les Indés Radios :

4 UWP – Universal Windows Platform
Développer des applications pour la plateforme Windows universelle (UWP)

5 UWP – Les prérequis pour développer
Windows 10 de préférence Egalement faisable sur Windows 8.1 et Windows 7, en testant sur un Windows 10 distant Penser à activer le mode développeur Visual Studio 2015 / 2017 Les langages : C#, Visual Basic, C++ ou Javascript (WinJS) Développer des applications pour la plateforme Windows universelle (UWP)

6 UWP - Bridges Windows Bridges

7 UWP - Desktop Bridge Encapsuler votre application Win 32 en UWP
Installation et mise à jour simplifiées Visibilité et confiance du Windows Store API UWP : live tiles, notifications, Cortana, in-app purchases,… Limitations Pas accès à toutes les API UWP Uniquement pour tablettes / ordinateurs Quelques exemples Evernote, Arduino IDE, Voya Media,… Desktop Bridge

8 UWP - Desktop Bridge Desktop Bridge

9 UWP – iOS Bridge (Islandwood)
Convertir un projet Objective-C en UWP dans Visual Studio Projet open source sur GitHub En bêta depuis 2 ans (version actuelle ) Quelques exemples Candy Crush, Complete Anatomy de 3D4Medical iOS Bridge Complete Anatomy

10 UWP – Applications web hébergées
Packager un site web en application UWP API Windows natives à partir du JavaScript exécuté sur votre site web Disponibilité sur l’ensemble des devices Windows 10 Exemple d’une réalisation Amazon

11 UWP - Porting guidances
Mappage de concepts d’applications Windows pour développeurs iOS et Android sur Porting guidances

12 UWP - Déploiement Package APPX Application grand public (B2C)
Application sandboxée Installation simplifiée via App Installer depuis Windows 10 Anniversary 1607 Application grand public (B2C) Windows Store Application entreprise (B2B ou B2E) Windows Store for Business Diffusion manuelle de l’APPX et de son certificat

13 UWP – Design & UI Windows 8 avait de fortes guidelines
Contenu très horizontal Pas de burger menu Des marges recommandées très importantes

14 UWP – Design & UI Adapter son contenu aux différents devices Windows 10 Mobile, tablette, desktop, Xbox One Tactile, clavier, souris, voix, manette, Surface Dial, …. Windows 10 – Design and UI

15

16 VisualStateManager / AdaptiveTrigger
Windows 10 -> application universelles != Windows 8 Windows 8 -> création d’une solution - un projet shared - deux projets Windows et Phone => donc deux fichiers XAML pour gérer les vues pour chaque device Windows 10 -> création d’une solution - un seul et unique projet qui gère toutes les configurations UI => AdaptiveTrigger pour fournir des interfaces en fonction de la résolution. Combo gagnant pour une interface responsive !

17 AdaptiveTrigger Utilisé en XAML pour créer des états visuels dans le VisualStateManger Pas besoin de code C# Gérer automatiquement Déterminé par la taille de la fenêtre Largeur ou Hauteur Modifier des éléments Couleur d’arrière-plan Taille d’un élément Position d’un élément etc.. - AdaptiveTrigger déclencheur utilisable par le VisualStateManager de XAML. créer des états visuels dans le VisualStateManager dépendent de la taille d’écran (largeur ou hauteur) activé automatiquement sans besoin d’aucun code C# pour cela => plusieurs configurations d’écran en un seul fichier PS : voir Blend pour manipuler le visualStateManager

18 Démo - Voir projet démo - Voir FeedLab AdaptiveTrigger

19 Continuum Une expérience de PC, grâce à votre téléphone

20 Démo Démo de FeedLab avec le dock Continuum Continuum

21 Animations Windows.UI.Composition, la performance !
- Avec Windows 10, les applications sont plus vivantes et interactives, - Nouveau compositeur unifié et un moteur de rendu pour toutes les applications Windows, que ce soit sur le bureau ou sur mobile. => l’API « Windows.UI.Composition » qui offre l'accès à de nouveaux objets de composition légers ainsi que de nouvelles animations et effets animés par Compositor. Windows.UI.Composition, la performance !

22 Windows.UI.Composition
Petit schéma Windows.UI.Composition permet d’utiliser le C# pour réaliser un travail dans la couche de composition au lieu d’utiliser DirectX et C++ pour créer des animations. Cette technique permet d’animer un élément à l’aide de l’API de composition ou d’enrichir une interface utilisateur en créant une « Visual Layer» contenu dans l’arborescence d’éléments XAML.

23 Pourquoi utiliser des animations de composition ?
Storyboard Windows.UI.Composition Code exécuté sur le thread utilisateur Risque que les animations ne se jouent pas Animations simples Transition, rotation, … Thread indépendant 60 FPS Animations fluides Animations complexes mais facilitées Création de modèles Création de modèles - Utiliser une animation sur plusieurs objets sans avoir à créer des animations distinctes. => Utiliser une même animation

24 Démo Animations - Exemple avec le projet Démo
- FeedLab avec le pulltorefresh Animations

25 Cortana Cortana est fortement intégrée dans Windows 10
Permet d’interagir avec les applications via des commandes vocales S’intègre facilement à une application UWP Fichier VoiceCommands.xml pour définir la grammaire StorageFile storageFile = await await VoiceCommandDefinitionManager InstallCommandDefinitionsFromStorageFileAsync(storageFile); Cortana voice commands

26 Démo FeedLab + Code Cortana

27 Ink Révélez votre créativité ! Créer une zone de dessin
Optimiser la saisie au stylet. Fonctionnalité mise en avant par Microsoft avec la gamme Surface. Révélez votre créativité !

28 Vue d’ensemble d’Ink Notes manuscrites, dessins, annotations
Capturer la position et les mouvements du stylet Suivi des niveaux de pression Sauvegarder des données de saisie Reconnaissance de l’écriture Exemple d’application : Carte Photo

29 Démo Demo exemple meetup Ink

30 Roadmap UWP Windows Platform features

31 Des questions ?