Renaud Dumont

//learn/ - Global Windows Phone Store Webcast 2014

Thu, 24 Apr 2014 14:16:00 +0000

Au cas où vous l'auriez manqué, ce 24/04/2014 était la date de l'event //learn/. Une initiative mondiale rassemblant des MVPs de tous les horizons pour donner une journée live d'introduction au développement d'apps Windows Phone Store.

Et les francophones se sont mobilisés pour vous fournir du contenu en français ! :-)

Pour revoir toutes les sessions à la demande, il vous suffit de vous inscrire ici :
https://vts.inxpo.com/scripts/Server.nxp?LASCmd=AI%3A4%3BF%3AQS%2110100&ShowKey=18934&GroupID=WPL

Le Mobile Dev Day accueille l'évènement //publish/ en Belgique

Tue, 22 Apr 2014 17:12:00 +0000

Vous pouvez retrouver l'article original sur le blog de Kévin Rapaille

Ces 15 et 16 mai, Microsoft organise un évènement mondial afin de vous aider à finir vos applications Windows 8.1 et Windows Phone 8.1.

Et bien sûr, la Belgique y participe !

//publish/

Durant toute la durée de l'évènement, des experts Microsoft et de la communauté seront présent afin de vous aider à résoudre les différents problèmes que vous rencontrez ou apporter la touche finale de votre projet.

Différents appareils de test seront également à votre disposition afin que vous puissiez tester votre application dans les meilleures conditions.

Le concours

Comme toujours, il y a des prix à gagner ! Un concours global est donc organisé pour chacune des applications publiées avant le 1er Juin.

En voici les prix :

3 voyages pour les USA à l'occasion du Grand Prix de Formule 1 de Austin dans le Texas
3 ultimate dev caves d'une valeur de 10.000 $
6 imprimantes 3D MarkerBot
Plus de 100 Lumia 1520

Le concours se divise en 3 groupes : Les étudiants, les personnes individuelles, et les petites entreprises (moins de 100 employés).

Chacun des membres de ces groupes pourra concourir dans 4 catégories différentes :

Les meilleures applications Windows 8.1 dont la meilleure app de chaque groupe se verra remporter l'un des voyages aux USA.
Les meilleures applications Windows Phone 8.1 dont la meilleure app de chaque groupe se verra remporter l'une des Ultimate Dev Caves à 10 000$
Les meilleures applications cross-plateforme dont la meilleure app de chaque groupe se verra remporter l'une des imprimantes 3D MarkerBot
Et les plus belles applications innovantes dont la meilleure app de chaque groupe se verra également remporter l'une des imprimantes 3D MarkerBot

Notez que pour chaque groupe, dans chaque catégorie, le top 9 remportera un lumia 1520.

En Belgique

Face à des prix aussi impressionnants, l'équipe du Mobile Dev Day s'est donc réunie afin de vous en faire profiter !

Nous accueillerons donc le //publish/ au MIC de Mons le vendredi 16 mai et avons grand espoir de voir notre communauté rayonner dans ce concours.

Qui plus est, un concours local sera également organisé. Un Lumia 1520 et une Dell Venue Pro 8 seront à gagner le jour même.

Pour plus d'infos, rendez-vous ici. Inscrivez-vous vite !

Opening of the new Microsoft Centre in Brussels and #EUYouth

Wed, 22 Jan 2014 07:57:00 +0000

Last two days (20th & 21st of January), I've been invited to the Microsoft Centre in Brussels for the opening of the new offices and the signing of a new 3 years agreement between the Brussels government & Microsoft to help prevent youth unemployment in Europe.

Blogger Roundtable & YouthSpark program

It all started with an invitation from the YouthSpark program. They proposed me to join them as a young blogger to discuss the youth unemployment issues people are facing in Europe. I met some talentuous bloggers from all over Europe: Greece, Spain, Italy, Portugal, ... They all have different passions and different situations, but all of them are interested in technologies & social media, and their impact on youth, education, and employment. I was very impressed by their impressive career.

On monday, we had a inspiring guided tour of the new Microsoft Center with Mark Lange, Director for EU Insitutional Relations at Microsoft. And I have to say, the new Microsoft Centre is really an exciting place. Actually, it reminds me what can be seen in Seattle, on the Microsoft campus. Lots of devices (phones, tablets, hybrids) everywhere that you can use, huge touch screens on every wall, a few xbox one, skype rooms here and there, Surfaces everywhere ! There's also much more place than in the previous building. The conference rooms are great, with a lot of space.

Post by Renaud Dumont.

After that, we had a roundtable with Lori Harnick, Microsoft's General Manager for Citizenship and Public Affairs. The aim was to introduce the global YouthSpark program, the program's achievements for last year and the new targets for this year. We met some non-profit patrners collaborating with Microsoft on this program, helping young people to find paid internship and get the necessary ICT skills they need to find a job.

Technology showcase

At the same time, I've been asked by the Microsoft Innovation Center to make a technology demonstration during the event on Tuesday 21. I decided to show how it was possible to use the Kinect for Windows to control Nao (a small humanoid robot made by an awsome french company called Aldebaran Robotics). it's interesting because even if we can see more and more usages of the Kinect on the web, most people still think it's only useful for gaming. I actually believe that kind of technologies could save lives. We could send robots in situations that are too dangerous for humans and control them remotely with all the precision of the Kinect.

And because it's cool, I decided to use the new Kinect for Windows v2 sensor (technical preview) aside of the old Kinect sensor. Both can totally work together on the same machine, with the same application.

I had the chance to show this cool demo to Brad Smith, Microsoft Executive Vice President and General Counsel. I hope he enjoyed it :-)

The demo is based on the code found in this blog post, written by two student during their internship at the Microsoft Innovation Center: http://blog.mic-belgique.be/articles/controler-un-robot-humanoide-nao-avec-une-kinect/

Here is a great video made by those students:

If you want to learn more about Kinect programming, you can read this series of blog posts I've written :

1. Introducing the Kinect for Windows API

2. Use the ColorImageStream

3. Track the users with the SkeletonStream

4. Kinect in depth!

5. Speech recognition

Launch of the Microsoft Center

On Tuesday 21^st, we assisted to a few conferences and debates with Brad Smith, Céline Fremault (Minister of Economy and Employment in Brussels-Capital Region), Andrew W. Wyckoff (Director of OECD), and some Members of the European Parliament. I've been very impressed by the talk of Brad Smith about YouthSpark and how Microsoft is helping young people to create and capture opportunities. That guy really knows how to talk and keep your attention !

Minister Fremault, Commissioner Andor, Brad Smith and #Youthspark empowering #EUYouth at Microsoft Center BXL pic.twitter.com/IimEFwzmDF
— Bruno Schroder (@Bruno_Schroder) 21 Janvier 2014

Partnership btw BXL and Microsoft: a response to combat unemployment & boost the spirit of entreprise among youth pic.twitter.com/meGdkhXfPB
— Céline Fremault (@celinefremault) 21 Janvier 2014

During the conf, Brad Smith had a live skype session with Students from Europe. We saw a teacher from Portugal, in his classroom with 6 years old kids. He explained how they were trying to develop ICT interest with those kids by using Kodu (a Microsoft Research project). This application helps kids understand the basics of programming (with a visual language) and trains their logic skills. Those 6-years old kids, grouped by two, each group with a laptop, had to develop a game using Kodu. That was fun to see them doing some sort of pair programming.

Skype en live avec une classe au Portugal où des enfants de 6 ans font du pair programming! :) #EUyouth http://t.co/jvllCczaSq
— Renaud Dumont (@DumontRenaud) 21 Janvier 2014

Evening Reception

By the end of the day, there was a party, with Xbox games and DJ sets. Time to have a drink and talk about less serious stuff with nice people.

Anyway, that was a great event. It's good to know that Microsoft is working that much on solving youth unemployment issues. By developping ICT skills or entrepreunarial mindset. There is a lot of work to do in the EU. But I met a lot of amazing and enthusiastic young people from all around Europe and I'm pretty confident they will positively contribute in some way in the changes that we need.

#EUyouth fun stuff happening pic.twitter.com/r8LjzHRc4O
— StoryMe (@hello_storyme) 21 Janvier 2014

Additionally, here is a great coverage of the event made by euronews.com: Start-ups shake up tech world.

Mon premier MVP Summit

Wed, 20 Nov 2013 18:36:00 +0000

... et, j'espère, pas le dernier!

Je souhaite vraiment à tous mes amis développeurs ici, passionnés de technologies et impliqués dans les communautés Microsoft, d'avoir la chance d'être un jour reconnu en tant que MVP et de pouvoir participer au MVP Summit.

En effet, l'un n'implique pas l'autre. Tous les MVP ne participent pas à cette rencontre annuelle. Il faut encore être disponible à la date prévue, et pouvoir s'offrir le voyage jusqu'à Seattle.

Je souhaite donc à mes amis d'avoir cette chance un jour, parce qu'en dehors du fait de pouvoir se balader sur le campus (oui ça fait un peu fanboy j'avoue :)), ça permet surtout de rencontrer d'autres MVP venus du monde entier, et de nombreux développeurs de chez Microsoft.

Mais plus encore, je souhaite à tous les développeurs qui pensent que Microsoft n'est qu'une grosse boîte noire d'avoir la chance un jour de participer à un MVP Summit. Parce qu'au fond, le MVP Summit, ce n'est pas du tout ce que j'espérais. C'est beaucoup plus que ça. Ce n'est pas l'occasion pour Microsoft de satisfaire l'égo de quelques développeurs en les couvrant de goodies entre deux brainwashing. C'est infiniment plus intéressant !

En vérité, 90% des sessions auxquelles j'ai participé n'étaient pas des sessions de présentation du futur de Microsoft, mais plutôt des discussions pour construire ensemble le futur des outils et technologies que nous, développeurs, allons utiliser dans les années à venir. J'étais vraiment agréablement surpris de la tournure des discussions. On ne nous a jamais dit "hello, voici le nouveau Visual Studio", mais plutôt "Voici une proposition. Qu'en pensez-vous? Devrions-nous l'implémenter ou est-on à côté de la plaque?". Régulièrement, les équipes produits (XAML, Azure Mobile Services, Visual Studio, C#, .NET, etc...) lançaient des sondages à main levée pour évaluer l'intérêt de l'audience pour telle ou telle autre fonctionnalité.

It's not presenting the future, it's about designing it!

Je me rends compte maintenant à quel point tous les produits, les langages et outils que nous utilisons ne sont pas uniquement le fruit de quelques illuminés à Redmond qui pensent savoir ce dont on besoin les développeurs du monde entier. En fait, tout ce qui existe aujourd'hui est le résultat du feedback, des propositions et de la collaboration des communautés de développeurs avec Microsoft.

C'est un peu comme si tous les MVP venaient faire des pull request IRL une fois par an, en rapportant avec eux le feedback des communautés locales.

Je suis content d'avoir pu y participer d'une certaine manière.

Photo des MVPs francophones par Laurent Gébeau

Mobile Dev Day 2013

Sun, 10 Nov 2013 15:13:00 +0000

Première édition du Mobile Dev Day

Le 12 décembre prochain aura lieu un événement sans précédant en Belgique: une journée consacrée entièrement au développement et aux technologies mobiles. Bien sûr, ce n'est pas la première fois qu'on parle de mobile en Belgique, mais cette fois-ci il s'agit d'une journée consacrée principalement aux technologies Microsoft et, qui plus est, en français!

Le site web est en ligne depuis quelques jours: http://www.mobiledevday.be

Un évènement pour les développeurs, par des développeurs

D'où est née l'idée d'organiser cet évènement? L'histoire a commencé avec la Windows Phone Week...

Pour ceux qui n'en auraient pas entendu parler, la Windows Phone Week est une initiative menée par tous les MVP (Most Valuable Professional) Windows Phone du monde et qui consiste à organiser localement des évènements dédiés à cette discipline.

Pas de chance pour nous les Belges, il n'y a pas de MVP Windows Phone parmi nous, ce qui signifie donc pas d'évènement. À moins... qu'un membre de la communauté décide qu'il y a là quelque chose à faire.

Et c'est ainsi que Olivier Matis (www.guruumeditation.net/), MVP C# et Nokia Developer Champion, m'a contacté pour me parler de sa frustration (que je partageais évidemment). La suite s'est enchaînée très rapidement. Il fallait constituer une team pour organiser cet évènement, et nous avons contacté deux membres actifs de la communauté Microsoft en Belgique: Kévin Rapaille - Software Engineer chez RealDolmen et blogueur - et Matthieu Vandenhende - développeur chez Agilys, blogueur et MVP Client Development.

Un programme avec uniquement des têtes d'affiches

Bon alors c'est sûr, on aurait pu se démerder nous même et vous pondre quelques sessions plus ou moins intéressantes. Mais on a voulu faire quelque chose de grand. Et pour ça, on est allé vous chercher de véritables rockstar. Des speakers venus de France et de Belgique. Des développeurs exceptionnels et des employés Microsoft avec des vrais morceaux de Microsoft à l'intérieur.

C'est un peu comme si vous alliez assister à un Techdays, mais en comité réduit, en séance VIP!

En dehors des sessions, vous aurez évidemment la possibilité de discuter et boire un verre avec tous ces gens, ainsi qu'avec tous les autres passionnés qui seront présents ce jour-là.

Inscriptions ouvertes et limitées

Malheureusement, nous ne pouvons pas accueillir des milliers de personnes comme aux Techdays. La comparaison s'arrête là :) Je vous invite donc à vous inscrire assez rapidement. Bloquez votre 12 décembre, et venez passer une super journée avec la communauté Microsoft Belux. L'entrée est bien évidemment gratuite ;)

Pour avoir toutes les informations, rendez-vous sur le site officiel : http://www.mobiledevday.be

Planning de la rentrée 2013-2014

Thu, 05 Sep 2013 07:31:00 +0000

Trainings gratuits au Microsoft Innovation Center de Mons

Plein de nouvelles formations planifiées au MIC pour la rentrée, avec des sessions sur Windows Phone et Windows 8 en C#/XAML et en JavaScript/HTML5! Toutes ces formations sont évidemment gratuites, en français, et ouvertes à tous!

Create your Windows 8 app in HTML5

How different is Windows 8? What is the rush to build apps for the Windows 8 platform and why are developer communities reacting differently to Windows 8? This Windows Store App course introduces HTML5, CSS3, and JavaScript and helps you learn HTML5/CSS3/JavaScript programming skills. This course is an entry point into both the Web application and Windows Store apps.

18 septembre, 5 novembre, 10 janvier

The Ins & Outs of Windows Phone 8 apps

The ins & outs of Windows Phone 8 is a hands on introduction to building apps for Windows Phone. We’ll guide you through the unique aspects of the Windows Phone platform and you’ll have the chance to build on your knowledge immediately! Your app at the end of the day!

30 septembre, 12 novembre, 20 janvier

Making your first Windows 8 app

This workshop is a free and fun training from developers, for developers. Expertise is offered in a fun, low key, interactive way and you’ll have the chance to test and experiment with your new knowledge!

16 octobre, 9 décembre, 12 février

Make your app run into the Cloud

Et pour étendre les capacités de vos apps et lier tout ça avec le cloud, sachez qu'une session Cloud & Windows Azure est également prévue et sera donnée par Nick Trogh, Developer and Platform Evangelist chez Microsoft BELUX.

In this workshop, we’ll teach you how to add a cloud backend to your app. Free, fun, no-fluff, you will learn how to add a cloud-based backend service to a Windows Store app using Windows Azure Mobile Services. And you’ll have the chance to test and experiment with your new knowledge!

11 décembre

Encore plus de sessions

Je donnerai également des formations au MIC Brussels (voir leur agenda) sur les mêmes sujets, mais probablement en anglais cette fois (cela dépendra de l'audience :)).

Microsoft DreamSpark, des logiciels gratuits à l'intention des étudiants

Wed, 21 Aug 2013 20:08:00 +0000

Les vacances faisant, cela fait un moment que je n'ai plus posté d'article sur mon blog. Et, bien que j'aurais aimé commencer par quelque chose de technique, il m'a semblé important pour cette rentrée académique de vous écrire quelques mots au sujet du programme DreamSpark.

Pourquoi parler de DreamSpark? Tout simplement parce qu'à l'époque où j'étais étudiant, comme beaucoup d'autres choses, je ne savais pas que cela existait... et aujourd'hui je me dis que j'aurais aimé pouvoir en profiter. Je pense que ce programme est injustement méconnu, alors j'espère qu'il vous servira plus qu'il ne m'a servi à moi :)

De quoi s'agit-il?

DreamSpark (https://www.dreamspark.com/) est un programme annoncé par Bill Gates lors d'une conférence en 2008 (source: Wikipedia), et qui a pour objectif d'offrir aux étudiants tous les outils de développement dont ils ont besoin, et cela gratuitement! Non non, il n'y a pas de piège. Pas d'engagement, pas de limite. La seule condition en Belgique: être un étudiant d'au moins 14 ans!

L'une des qualité dont fait preuve Microsoft, c'est bien de s'occuper de ses développeurs. Pour cela, ils ont notamment créé l'environnement de développement Visual Studio que vous connaissez sans doute déjà.

Il existe bien sûr des versions gratuites de Visual Studio (limitées en fonctionnalités), appelées Visual Studio Express. Mais grâce à votre statut d'étudiant et au programme DreamSpark, vous pouvez notamment télécharger et utiliser gratuitement Visual Studio Professional 2012, le nouveau Visual Studio Professional 2013 Preview, et des tas d'autres logiciels!

Comment en profiter?

C'est simple, il suffit de vous rendre ici: https://www.dreamspark.com/Student/Default.aspx et de cliquer sur Créer un nouveau compte. Sur cette page, choisissez simplement vos identifiants. Passez ensuite à l'étape suivante: la vérification. Pourquoi une vérification? Parce que cette offre est uniquement réservée aux étudiants!

3 méthode de vérification

Si vous avez une carte ISIC, vous pourrez sans soucis faire valider votre compte.

Sinon, vous devrez essayer la première option: vérification par le biais de l'établissement.

Cette solution s'effectue en deux étapes:

Vous sélectionnez votre établissement scolaire
Vous entrez votre adresse email académique

En principe, cela devrait fonctionner sans problème. Toutefois, vu les nombreuses restructurations, il arrive parfois que des écoles/universités changent d'appellation, et donc de nom de domaine. Cela a notamment été mon cas lorsque j'étais étudiant puisque j'ai commencé mes études à l'IRAM, qui est devenu l'HERB, pour finalement se décider sur HELHa.

Aucune des deux premières solutions de fonctionne pour moi...

Bref, si vous êtes certains que votre adresse email académique est correcte, et que DreamSpark ne veut pas terminer le processus de vérification, alors je vous invite à me contacter (ici ou là) et je pourrai vous fournir un code de vérification!

Autres avantages

Plus de logiciels

En dehors d'une multitude de versions de Visual Studio, DreamSpark vous donne également accès à d'autres logiciels comme la suite Expression, des licences Windows Server et SQL Server, et Windows Embedded (https://www.dreamspark.com/Student/Software-Catalog.aspx#).

Des offres partenaires

Pluralsight offre également 90 jours d'accès gratuit à tous les étudiants utilisant DreamSpark. Si vous ne connaissez pas Pluralsight, il s'agit d'un proposant des trainings en ligne, en vidéo, excessivement bien faits! (https://pluralsight.com/training/offers?cc=Dreamspark)

Des comptes développeurs gratuits

En effet, avec compte DreamSpark vous obtenez également un code vous permettant de vous enregistrer sans frais sur le Windows Store (applications pour Windows 8) et sur le Windows Phone Store. Ainsi, vous pourrez même commencer à publier vos applications!

Obtenir un code pour le Windows Store (bas de page: Windows 8)

Obtenir un compte développeur Windows Phone (suivre les instructions: WP8)

Si vous rencontrez un problème pour l'une des inscriptions, contactez-moi ;)

[Azure] Backup automatique de SQL Azure et restauration

Wed, 10 Jul 2013 15:55:00 +0000

Si vous utilisez Azure, et les bases de données SQL, vous savez que vos données sont en sécurités, et que vous pouvez par exemple utiliser la géo-réplication pour vous assurer que même en cas de défaillance technique d'un datacenter tout entier, vos données soient toujours disponibles dans un autre datacenter (par exemple sur un autre continent), dans une base de données synchronisée avec celle en production.

Toutefois, cela ne vous met pas à l'abris d'une erreur humaine. Si vous effacez des données importantes, après synchronisation, vous n'aurez aucun moyen de les récupérer. Voici donc un moyen simple de faire des backup régulièrements pour pouvoir, en cas de pépin, restaurer votre base de données dans un état acceptable.

Si vous vous connectez au portail et que vous vous rendez dans la section des bases de données, vous pourrez voir dans la barre d'action en bas qu'il vous est possible d'exporter et d'importer des bases de données.

Regardons déjà ce que cela nous permet:

Export manuel

L'export permet de créer un fichier BACPAC à partir d'une base de données en production. Qu'est-ce qu'un BACPAC? Il s'agit d'un fichier contenant des informations décrivant le schéma d'une base de données, ainsi que son contenu.

Ce fichier est généralement utilisé dans deux cas de figure:

migrer une base de données d'un serveur vers un autre;
archiver une base de données (faire un backup).

Globalement, ce fichier nous permettra par la suite d'être importé pour créer une nouvelle base de données à l'identique sur le serveur de notre choix.

En sélectionnant la base qui nous intéresse et en cliquant sur Exporter, une fenêtre s'ouvre pour nous demander où stocker le fichier de backup. En fait, Azure attends de vous que vous lui indiquiez un conteneur d'un stockage Azure. Le fichier .bacpac va en effet être stocké dans un blob.

Si ce n'est pas déjà fait, créez donc un compte. Sinon sélectionnez celui qui vous convient. Choisissez le conteneur (ici sqlbackup) et entrez les informations de connexion au SQL Server sur lequel se trouve la base de données. Confirmez, patientez quelques secondes, et vous pourrez finalement retrouver votre fichier sauvegardé dans votre compte de stockage:

Import manuel via le portail

Pour réutiliser maintenant ce fichier via le portail, c'est très simple: on va utiliser le bouton d'import vue précédemment.

Il suffit alors de fournir le fichier BACPAC créé juste avant, donner un nom à la nouvelle base de données et choisir un serveur sur lequel déployer cette base de données.

Validez, et vous pourrez voir votre nouvelle base de données dans le dashboard:

Automatiser l'export

Il existe une API qui permet de faire des exports automatiquement. Vous pourrez trouver ici les sources de SQLDatabaseBackup. Cet outil fait appel à l'API de Azure pour créer un BACPAC d'un DB et le stocker dans un Blob. La procédure utilisée est celle recommandée sur MSDN (cf: Windows Azure SQL Database Backup and Restore / Recommended Backup Strategy):

Recommended Backup Strategy

Creating a database copy and then exporting a BACPAC file gives you a transactionally consistent backup file of the database that is portable and can be stored in Windows Azure storage or on-premises locations. This file then can be used for a rollback plan to protect against user or application errors, or in the event of loss of the entire region.

Bref, téléchargez les sources, compilez-les et ouvrez une console pour exécuter l'application en ligne de commande. Voici la liste des paramètres que vous pouvez utiliser:

    -server [SQL Database server (sans .database.windows.net)]
    -database [la db à backuper]
    -databasecopy (facultatif) [Le nom de la db temporaire, par défaut: database_copy]
    -user [nom d'utilisateur]
    -pwd [mot de passe]
    -storagename [nom du compte de stockage pour les blob]
    -storagekey [clé secrète du blob storage]
    -container (facultatif) [le conteneur de blob à utiliser, par défaut: sqlbackup]
    -datacenter [le datacenter dans lequel se trouve la db (et non pas le blob storage)]
        (westeurope | southeastasia | eastasia | northcentralus | northeurope | southcentralus | eastus | westus)
    -cleanup

Par exemple, ceci pourrait être une commande valide:

SQLDatabaseBackup.exe -server tfde53dse -database mydatabase -user admindb -pwd password -storagename storageaccount -storagekey yUfnVH+iIrO4sgS+Sr60PRzIMUQv5tFPpKYtr03QTKDxl9ZLr4Y7IkxPkQRJrarqnDX5mWCoA== -container backupfolder -datacenter westeurope

Pour automatiser cette tâche, nous allons tout simplement utiliser un fichier Batch et le Task Scheduler de Windows.

Voici le script .bat qui va lancer l'exécution de l'outil: on ouvre une console, on se déplace jusqu'à l'exécutable et on lance la commande:

START cmd.exe /k "cd C:\Users\path\to\tool\folder\ & SQLDatabaseBackup.exe -server tfde53dse -database mydatabase -user admindb -pwd password -storagename storageaccount -storagekey yUfnVH+iIrO4sgS+Sr60PRzIMUQv5tFPpKYtr03QTKDxl9ZLr4Y7IkxPkQRJrarqnDX5mWCoA== -container backupfolder -datacenter westeurope"

Ouvrez ensuite le Task Scheduler, et créez une nouvelle tâche (Create Basic Task): un wizard s'ouvre, qui vous permet de configurer la tâche:

Son nom
Sa récurrence (par exemple, tous les jours à midi)
Le type d'action: "Start a program"

Sélectionnez alors le fichier .bat que vous venez de créer.

Pour finir, allez dans les propriétés de cette tâche et faites les modifications suivantes:

Dans l'onglet Conditions, décochez Démarrer la tâche seulement si l'alimentation est branchée. En effet, ce qui compte c'est de demander à Azure de faire le boulot. Ensuite, peu importe que votre PC reste en ligne ou pas, et donc pas de raison de s'inquiéter d'une éventuelle panne de batterie.
Dans l'onglet Settings, cochez Run task as soon as possible after a sceduled start is missed. Avec cette option, si votre ordinateur était éteint au moment où un backup aurait dû avoir lieu, ou si pour toute autre raison une tâche n'a pas pu être lancée, le Task Scheduler exécutera la tâche dès que possible.

A priori, comme j'allume rarement mon laptop moins d'une fois par jour, je suis sûr grâce à cette config d'avoir un backup quotidien de mes bases de données!

Restaurer une DB avec SQL Server Management Studio

Pour finir, si vous n'avez pas envie de passer par le portail de Windows Azure pour restaurer un fichier BACPAC, vous pouvez également le faire depuis SQL Server Management Studio (version express, version complète d'évaluation, ou sur MSDN).

Connectez-vous à votre SQL Server Azure, et faites un clique droit sur le dossier Databases dans l'Object Explorer. Sélectionnez Import Data-tier Application...

Suivez le wizard, qui vous permet également de récupérer le fichier BACPAC directement depuis un compte de Blob Storage. Choisissez les settings de la DB (édition Web 1Go pour les db standard de WebSite) et lancez l'opération. Et voilà votre nouvelle base de données créées sur le serveur!

IE - The browser you loved to hate

Tue, 09 Jul 2013 22:04:00 +0000

Vous pouvez l'aimer ou pas mais, quoi qu'il en soit, IE10 mérite que vous l'essayiez! Si vous êtes développeurs Web et que vous avez souffert (souffrez toujours) à cause des vieilles versions d'IE, celle-ci (voire même la suivante, IE11, déjà dispo sur Windows 8.1) devrait pouvoir vous réconcilier. Pour faire simple, Microsoft a fait une croix sur le passé et après avoir fait des campagnes d'incitation à l'abandon de IE6, on a maintenant droit à de chouettes initiatives pour changer l'image que l'on peut avoir de IE.

Ce site web vous invite à tester IE, et tentera de vous faire changer d'avis. Mais en dehors des trucs techniques, j'aimerais juste vous montrer quelques vidéos postées sur Vine, qui montrent encore une fois que l'équipe derrière IE a pris un réel tournant et ne manque pas d'humour :)

Build 2013 - Keynote Live Stream au MIC Belgique

Wed, 05 Jun 2013 21:54:00 +0000

Build 2013 au MIC Belgique

http://events.mic-belgique.be/event/build-2013-keynote-live-stream

Le 26 juin prochain, Microsoft organise LA conférence à ne pas manquer pour les développeurs! La conférence Build, c'est le moment pour MS de présenter quelques grosses nouveautés et sa vision du futur. Il y a deux ans, Microsoft dévoilait une preview de Windows 8 (et offrait par la même occasion des tablettes Samsung Slate 7 avec cette version de Windows 8 à tous les participants).

Depuis, Microsoft a fait du chemin. La Surface, première tablette entièrement brandée Microsoft, est apparue et est disponible dans les magasins. Une nouvelle version de Windows Phone est sortie, rapprochant un petit peu plus les mondes des PC/tablettes et des smartphones. Et la communauté des développeurs Windows et Windows Phone se développe plus que bien en France et en Belgique.

Et déjà, on arrive à une nouvelle édition de la Build, qui aura lieu cette fois à San Francisco. Et vous le savez sans doute: beaucoup de nouveautés sont prévues pour les développeurs, notamment à propos de Windows 8.1!

Les entrées ont été mises en vente début avril...

Build 2013 registration is officially open! Register now at bit.ly/WJOR5C #bldwin!
— BUILD Windows (@bldwin) 2 avril 2013

... et se sont terminées presque aussitôt.

Build 2013 is officially sold out! You can still watch keynotes, select sessions, & live Q&A online at bit.ly/X04A2Q #bldwin
— BUILD Windows (@bldwin) 3 avril 2013

Malheureusement je ne pourrai pas m'y rendre cette année :) J'avoue que même si mon emploi du temps me l'avais permis, le prix total (billets + voyage + logement) m'aurait un peu fait hésiter.

Bref, cela n'est pas grave... Heureusement il y aura comme toujours un streaming live de la Keynote, cette session d'ouverture. Et avec quelques gars de la communauté on s'est dit que ce serait sympa de squatter le MIC pour regarder les annonces ensemble.

L'event est ouvert à tous, que vous soyez un passionné de technos Microsoft ou juste curieux, n'hésitez pas à nous rejoindre:

http://events.mic-belgique.be/event/build-2013-keynote-live-stream

Bonus:

Un invité de marque sera présent avec nous ce soir: David Hernie (@DavidHernie), Evangelist Windows 8, Windows Phone et Azure chez Microsoft Belux sera de la partie! :)

[Windows 8] Générateur de politique de confidentialité

Tue, 04 Jun 2013 21:37:00 +0000

Vous le savez sans doute, sur Windows 8, l'utilisateur doit toujours garder le contrôle sur son système. Et pour cela, Microsoft n'a pas seulement fait en sorte que le système soit sécurisé, mais a également établi quelques règles pour nous les développeurs. Ces règles visent particulièrement à informer l'utilisateur de l'usage que nous pourrions faire de leurs données.

Ainsi, pour utiliser des fonctionnalités de Windows 8 qui touche au respect de la vie privée (GPS, accès aux librairies personnelles comme les documents, les photos, etc, ...), il est nécessaire de le déclarer explicitement. L'utilisateur verra alors - avant de télécharger l'application - que vous réclamez l'un ou l'autre droit.

En ce qui concerne l'accès à internet, les choses sont également très claires: si votre application fait usage d'internet, vous devez fournir à l'utilisateur une Politique de Confidentialité consultable en ligne!

Alors si vous êtes un peu fainéants ou que vous n'avez aucune idée de comment héberger une page web, voici un petit générateur que j'ai mis en ligne sur mon compte Windows Azure:

http://w8privacy.azurewebsites.net/

Rien de très complexe, mais c'est surtout pratique :) développé en deux temps, trois mouvements avec Foundation. L'intérêt étant que vous aurez une page personnalisée (et multilingue!) pour votre application!

Il vous suffit de suivre les étapes, et c'est parti, vous aurez une URL unique que vous pourrez utiliser dans la page "À propos" de votre application ET dans le formulaire de soumission de votre application sur le Windows Store!

Bonus : si cela ne vous suffit pas tout à fait, les sources sont dispos sur GitHub: W8Privacy

[ASP.NET MVC4] Comment implémenter la réinitialisation de mot de passe

Sun, 26 May 2013 19:04:00 +0000

Le template "Internet Application" de ASP.NET MVC4 est hyper complet en ce qui concerne la gestion des comptes utilisateurs. De base, ils permet de créer une application web avec tout ce qu'il faut pour qu'un utilisateur puisse s'inscrire, se connecter, gérer son profil et modifier son mot de passe. Avec un minimum de configuration, on peut également permettre aux utilisateurs de choisir entre un compte local (nom d'utilisateur + mot de passe) et une identification au travers d'un fournisseur d'identité tel que Facebook, Twitter, Microsoft (Live), Google et Yahoo (ou n'importe quel autre service à condition d'écrire soi-même quelques lignes de code...).

Tout le code nécessaire au bon fonctionnement de ces fonctionnalité est intégré dans le template. Il n'y a donc pour ainsi dire rien à faire! :) Vous avez sans doute déjà jeté un oeil dans le contrôleur AccountController. C'est effectivement là que tout se passe.

Une autre fonctionnalité disponible dans ASP.NET MVC4 est la récupération de compte. Par récupération de compte, j'entends ici le fait de pouvoir modifier son mot de passe lorsque l'on a perdu son mot de passe actuel, et que l'on ne peut donc plus se connecter.

Mais contrairement à ce qui a été cité ci-dessus, il n'y a pas d'action prévue pour cela dans le template.

La gestion des comptes avec WebSecurity

Il y a eu du changement depuis ASP.NET MVC3. Précédemment, tout ce qui concernait la gestion des compte se faisait à l'aide de la classe Membership. Mais si vous regardez le code de AccountController dans un projet MVC4, vous verrez qu'on utilise désormais deux autres classes : WebSecurity, et OAuthWebSecurity. Ces classes sont une nouvelle couche d'abstraction qui permettent de réaliser les actions courantes de gestion de compte utilisateur comme la création, la modification de mot de passe lorsque l'on est connecté, etc...

Scénario de récupération

Avant de nous lancer dans l'implémentation de cette procédure, réfléchissons deux secondes à ce dont nous avons besoin...

Un moyen d'identifier l'utilisateur: son email ou son mot de passe

En principe l'utilisateur ayant perdu son mot de passe devrait se souvenir de sa propre adresse email. Cela permettra d'identifier le compte que l'on veut récupérer.

Un jeton de modification de mot de passe, avec une date d'expiration.

Lorsque l'utilisateur lancera la procédure de récupération, un jeton sera créé et sera valable pour une durée limitée. Sans ce jeton, pas de récupération possible.

Un moyen de contacter l'utilisateur pour lui envoyer son jeton.

Évidemment, il est hors de question de donner ce jeton à n'importe quelle personne le demandant. On l'enverra donc à l'adresse email de l'utilisateur qui a fait la requête. Ainsi, à moins qu'une autre personne se soit emparée du compte email, on peut être sûr que la requête émane bien du propriétaire du compte.

Comme je vous le disais, la classe WebSecurity implémente les tâches les plus courantes! :) Et ce mécanisme aussi!

L'implémentation

1/ Obtenir l'adresse email de l'utilisateur

On l'a vu, nous aurons besoin d'une adresse email! Par défaut, le UserProfile (la classe servant à représenter un utilisateur) ne possède pas cet attribut. Mais ce n'est pas un soucis: pour étoffer le profil utilisateur avec ASP.NET MVC4, il suffit d'ajouter des attributs à cette classe.

/Models/AccountModels.cs

[Table("UserProfile")]
public class UserProfile
{
    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int UserId { get; set; }
    public string UserName { get; set; }

    public string Email { get; set; }
}

On va également modifier légèrement la page d'inscription pour demander à l'utilisateur cette information supplémentaire:

/Models/AccountModels.cs

public class RegisterModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [Display(Name = "Email")]
    public string Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}

/Views/Account/Register.cshtml

@model RecoverPasswordMVC4.Models.RegisterModel
@{
    ViewBag.Title = "Register";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>Create a new account.</h2>
</hgroup>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
            </li>
            <li>
                @Html.LabelFor(m => m.Email)
                @Html.TextBoxFor(m => m.Email)
            </li>
            <li>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
            </li>
            <li>
                @Html.LabelFor(m => m.ConfirmPassword)
                @Html.PasswordFor(m => m.ConfirmPassword)
            </li>
        </ol>
        <input type="submit" value="Register" />
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

À ce stade, si l'on exécute l'application et que l'on essaie de se loguer, on pourra voir le résultat suivant :

Il reste encore à modifier l'action POST Register pour sauver l'Email. Une fois que le compte est créé à l'aide de WebSecurity, on va récupérer l'enregistrement UserProfile correspondant, et le mettre à jour.

/Controllers/AccountController.cs

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public ActionResult Register(RegisterModel model)
{
    if (ModelState.IsValid)
    {
        // Attempt to register the user
        try
        {
            WebSecurity.CreateUserAndAccount(model.UserName, model.Password);

            using (UsersContext context = new UsersContext())
            {
                UserProfile user = context.UserProfiles.FirstOrDefault(u => u.UserName == model.UserName);
                user.Email = model.Email;
                context.SaveChanges();
            }

            WebSecurity.Login(model.UserName, model.Password);

            return RedirectToAction("Index", "Home");
        }
        catch (MembershipCreateUserException e)
        {
            ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));
        }
    }

    // If we got this far, something failed, redisplay form
    return View(model);
}

2/ Demander à l'utilisateur ses informations de compte

On va créer une nouvelle action RecupAccount, et le formulaire correspondant.

/Controllers/AccountController.cs

[AllowAnonymous]
public ActionResult RecupAccount()
{
    return View(new RecupAccountModel());
}

L'attribut AllowAnonymous indique que les utilisateurs peuvent faire appel à cette action sans être connectés. Il est nécessaire ici de le déclarer explicitement car le AccountController est décoré de l'attribut [Authorized], ce qui fait que toutes ses actions nécessitent par défaut d'être identifié.

La classe RecupAccountModel possède deux propriétés. L'utilisateur devra nous fournir ses données s'il veut qu'on essaie de s'occuper de son problème! :)

/Models/RecupAccountModel.cs

public class RecupAccountModel
{
    [Required]
    public string UserName { get; set; }
    [Required]
    public string Email { get; set; }
}

/Views/Account/RecupAccount.cshtml

@model RecoverPasswordMVC4.Models.RecupAccountModel

@{
    ViewBag.Title = "Récupération de compte";
}

<h2>Mot de passe perdu?</h2>

@using (@Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()
    
    @Html.LabelFor(m => m.UserName)
    @Html.EditorFor(m => m.UserName)
    @Html.ValidationMessageFor(m => m.UserName)

    @Html.LabelFor(m => m.Email)
    @Html.EditorFor(m => m.Email)
    @Html.ValidationMessageFor(m => m.Email)

    <input type="submit" value="Aidez-moi!" />
}

Notre utilisateur malheureux va donc pouvoir nous envoyer ses infos, que nous allons évidemment vérifier lors de l'envoi du formulaire.

3/ Envoyer le jeton de réinitialisation à l'utilisateur

On va donc vérifier les données, et si elles sont correctes, générer un jeton de réinitialisation de mot de passe grâce à la classe WebSecurity. Pour cela, on fait appel à la méthode GeneratePasswordResetToken qui prend en paramètre le nom d'utilisateur et le temps avant expiration (facultatif). Par défaut, le token expire après 1440 minutes (24 heures), mais comme je suis un peu vache j'ai décidé de ne laisser que 5 minutes à l'utilisateur pour faire la manip'! :)

/Controllers/AccountController.cs

[HttpPost]
[AllowAnonymous]
public ActionResult RecupAccount(RecupAccountModel model)
{
    // On vérifie que les deux champs sont remplis
    if (ModelState.IsValid)
    {
        using (UsersContext context = new UsersContext())
        {
            // Si on trouve un compte qui match avec les infos entrées par l'utilisateur...
            if (context.UserProfiles.Any(
                    u => u.UserName.Equals(model.UserName, StringComparison.OrdinalIgnoreCase) &&
                            u.Email.Equals(model.Email, StringComparison.OrdinalIgnoreCase)))
            {
                // On crée un token permettant de réinitialiser le mot de passe ...
                string token = WebSecurity.GeneratePasswordResetToken(model.UserName, 5);

                // ... et on l'envoit à l'utilisateur par email
                MailingService mailingService = new MailingService();
                mailingService.SendTokenByEmail(token, model.Email, model.UserName);

                return View("RecupAccountConfirmed");
            }
            else
            {
                ModelState.AddModelError("", "Le nom d'utilisateur ou l'email est incorrect.");
            }
        }
    }
    return View(model);
}

Ensuite on va envoyer ce token par email. En fait, on va envoyer à l'utilisateur un lien sur lequel il n'aura qu'à cliquer pour consommer ce token et réinitialiser son mot de passe:

var url = String.Format("{0}/account/resetpassword/?token={1}", SitewebUrl, token);

Si vous ne savez pas comment envoyer de mail en ASP.NET MVC, vous trouverez l'implémentation de la classe MailingService dans le projet d'exemple téléchargeable à la fin de l'article.

A ce stade, soit l'utilisateur nous a donné des informations correctes et il reçoit un email, soit les informations sont bidons et il revient sur le formulaire avec un message d'erreur.

4/ Vérifier le jeton

Lorsque l'utilisateur aura reçu son email, il naviguera vers un lien du genre: http://monsupersite.be/account/resetpassword/?token=Ddsn32jd3jLJsnd3

On va donc créer cette action, chargée de vérifier le jeton de l'utilisateur. Encore une fois nous allons faire appel à la classe WebSecurity. La méthode GetUserIdFromPasswordResetToken permet de récupérer l'Id de l'utilisateur lié au jeton. Si ce dernier a expiré ou ne correspond à aucun jeton existant, l'Id retourné sera -1.

/Controllers/AccountController.cs

[AllowAnonymous]
public ActionResult ResetPassword(string token)
{
    var userId = WebSecurity.GetUserIdFromPasswordResetToken(token);

    using (UsersContext context = new UsersContext())
    {
        UserProfile user = context.UserProfiles.Find(userId);
        if (user == null)
            return View("Error");

        var model = new ResetPasswordModel()
            {
                Token = token,
                UserName = user.UserName
            };

        return View(model);
    }
}

Si l'Id ne correspond à rien, on peut rediriger l'utilisateur vers une page d'erreur, ou plutôt lui proposer de refaire une demande de jeton. Le sien ayant peut-être tout simplement expiré.

5/ Modifier le mot de passe

Quoiqu'il en soit, si tout se passe bien, l'utilisateur sera amené sur la page de réinitialisation de son mot de passe. La classe ResetPasswordModel est définie comme ceci. On va avoir besoin de toutes ces valeurs par la suite. On connait déjà le Token et le UserName, et l'utilisateur va nous donner le nouveau mot de passe.

/Models/Account/ResetPasswordModel.cs

public class ResetPasswordModel
{
    [Required]
    public string Token { get; set; }
    [Required]
    public string UserName { get; set; }
    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Nouveau mot de passe")]
    public string NewPassword { get; set; }
    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Confirmation mot de passe")]
    public string ConfirmNewPassword { get; set; }
}

/Views/Account/ResetPassword.cshtml

@model RecoverPasswordMVC4.Models.ResetPasswordModel

@{
    ViewBag.Title = "Réinitialisation du mot de passe";
}

<h2>Réinitialisation du mot de passe</h2>

@using (@Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()
    
    @Html.HiddenFor(m => m.Token)
    @Html.HiddenFor(m => m.UserName)
    
    @Html.LabelFor(m => m.NewPassword)
    @Html.PasswordFor(m => m.NewPassword)
    @Html.ValidationMessageFor(m => m.NewPassword)

    @Html.LabelFor(m => m.ConfirmNewPassword)
    @Html.PasswordFor(m => m.ConfirmNewPassword)
    @Html.ValidationMessageFor(m => m.ConfirmNewPassword)

    <input type="submit" value="Changer mot de passe" />
}

Dans cette vue, les champs Token et UserName seront invisibles à l'utilisateur, mais ils seront envoyés avec les autres informations du formulaire.

Et pour finir, on va vérifier que l'utilisateur a bien entré deux fois le même mot de passe, et on va faire une dernière fois appel à la classe WebSecurity. La méthode ResetPassword va mettre à jour le mot de passe en consommant le jeton, et la méthode Login va connecter l'utilisateur à l'aide de son nom et de son nouveau mot de passe.

/Controllers/AccountController.cs

[HttpPost]
[AllowAnonymous]
public ActionResult ResetPassword(ResetPasswordModel model)
{
    if (ModelState.IsValid)
    {
        if (!model.NewPassword.Equals(model.ConfirmNewPassword))
        {
            ModelState.AddModelError("", "Les mots de passe ne correspondent pas.");
            return View(model);
        }
        WebSecurity.ResetPassword(model.Token, model.NewPassword);
        WebSecurity.Login(model.UserName, model.NewPassword);
        return RedirectToAction("Index", "Home");
    }
    return View(model);
}

Et voilà, l'utilisateur pourra à nouveau se connecter. Il ne reste plus qu'à ajouter un petit lien "Mot de passe oublié?" sur la page de login :

@Html.ActionLink("Mot de passe oublié ?", "RecupAccount", "Account")

Pour résumer, les différentes étapes de la procédure sont :

1/ Avoir un moyen de contacter l'utilisateur (email).

2/ Mettre en place une page "Mot de passe oublié?"

3/ Générer un jeton de réinitialisation et l'envoyer à l'utilisateur à l'aide de WebSecurity.

4/ Vérifier que le jeton est correct avec WebSecurity et montrer une page demandant un nouveau mot de passe.

5/ Réinitialiser le mot de passe avec WebSecurity en consommant le jeton

Ressources

Vous pouvez télécharger la solution d'exemple ici:

RecoverPasswordMVC4.zip

La Kinect nouvelle génération bientôt disponible sur PC

Wed, 22 May 2013 06:54:00 +0000

Microsoft vient tout juste d'annoncer sa nouvelle console, la Xbox One (pré-commandable sur Amazon). En gros: un nouveau look, plus de puissance, et une box all-in-one. En effet, elle ne viendra pas seule puisqu'elle sera accompagnée de la Kinect nouvelle génération!

La super bonne nouvelle, même si cela semblait évident, c'est la confirmation que cette nouvelle Kinect arrivera sur PC prochainement. C'est ce que rapporte le site Shacknews:

According to Kinect program manager Scott Evans, Microsoft plans on bringing the new Kinect to PC. "We will bring this to PC," he told us. "We will have more information soon."

On ne sait donc pas encore quand, mais on ne peut qu'être impatient aux vues des nouvelles possibilités!

La nouvelle Kinect est de faite plus précise. Elle permet de détecter et suivre les mouvements du corps quasiment sans aucune latence. Elle peut suivre entièrement jusqu'à 6 personnes simultanément, là où la version précédente se limitait à 2 personnes. La Kinect pouvait déjà suivre les mouvements du corps, mais désormais elle peut le faire avec plus de détails. On peut ainsi suivre plus d'articulations, connaître l'orientation des épaules et la position même des pouces des mains. La Kinect regardera également votre visage, pouvant ainsi dire si vous souriez, si vous regardez ou non vers l'écran, si vous portez des lunettes, etc... Et plus impressionnant encore, la Kinect peut monitorer votre rythme cardiaque!

Pour voir le tout en vidéo, voici le test de The Verge: Kinect Xbox One / Hands on.

Quand on voit déjà ce que permettait la dernière version du SDK, avec le tracking des mains, la reconnaissance faciale, la modélisation 3D... Cela ne fait nul doute que beaucoup de développeurs à travers le monde doivent être impatients de voir arriver la version PC et le nouveau SDK qui l'accompagnera!

[Windows 8] Développez en HTML 5 pour Windows 8

Mon, 29 Apr 2013 14:53:00 +0000

* Petite pub perso *

Ces derniers moi j'ai écrit un bouquin traitant de Windows 8 avec Loïc Bar et Simon Boigelot. Ce livre parle du développement d'applications pour le store Windows 8 à base de HTML 5 et de JavaScript !

Ce livre s'adresse aux débutants, aux personnes n'ayant pas nécessairement d'expérience avec les technologies du monde Microsoft. Vous n'avez jamais fait de .NET? Mais vous avez déjà bidouillé avec du HTML?

Si vous voulez passer à la vitesse supérieure, tirer profit du nouvel OS de Microsoft et pourquoi pas commencer à gagner un peu d'argent en vendant vos applications, ce livre est pour vous ! :)

Développez en HTML 5 pour Windows 8

[Windows 8] Créer un timer rond en XAML

Mon, 15 Apr 2013 21:27:00 +0000

Pour le développement du jeu WordDefy pour Windows 8, Matthieu (@MatthieuVdh) et moi avons demandé l'aide d'une amie graphiste. Et comme elle nous a rapidement pondu un super truc, la moindre des choses c'était de tenter de le reproduire à l'identique ! Il y a plusieurs bons côtés à cela : premièrement on a une app avec un look plutôt sympa, et deuxièmement j'ai pu jouer avec Blend et m'amuser avec le XAML, ce qui fait que j'ai appris pas mal de choses!

Une des parties consistait à reproduire un Timer en forme de cercle. Pour que vous y voyez plus clair, voici le compteur original tel que designé et le résultat final (qui est assez ressemblant :)) en XAML :

Design original

Résultat en XAML

Conception d'un RoundedTimer

Il existe plein d'exemples de timer sur le web, mais aucun fonctionnant sous WinRT. Et évidemment, le XAML sur Windows 8 a quelques particularités qui font que l'exemple ne sont pas toujours utilisables. J'en ai donc recréé un avec Blend !

Générer un Path

La première étape consiste à créer le cercle du compteur. Ce cercle doit être transparent au milieu. Pour faire cela, on va utiliser deux Ellipses et les combiner (ou plus précisément les soustraire). Placez donc deux Ellipses de manière à ce qu'elles soient centrées sur le même point, et avec l'une d'elle légèrement plus petite que l'autre.

Le code jusqu'à présent:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    	<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="200" Margin="160,240,0,0" Stroke="Black" VerticalAlignment="Top" Width="200"/>
    	<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="140" Margin="190,270,0,0" Stroke="Black" VerticalAlignment="Top" Width="140"/>
    </Grid>

Pour obtenir le résultat voulu, on peut donc soustraire la deuxième Ellipse à la première ou exclure les zones de chevauchement (lisez aussi Combiner des formes et des tracés (Blend pour Visual Studio)). Faites un clique droit sur l'arbre visuel et les Ellipses sélectionnées et choisissez l'opération qui vous convient dans le menu Combiner.

Le résultat de cette opération est un Path généré en remplacement des deux Ellipses précédemment créées. Le résultat devrait ressembler à ceci:

Et le code correspondant :

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    	<Path Data="M100,30.5 C61.6162,30.5 30.5,61.6162 30.5,100 C30.5,138.384 61.6162,169.5 100,169.5 C138.384,169.5 169.5,138.384 169.5,100 C169.5,61.6162 138.384,30.5 100,30.5 z M100,0.5 C154.952,0.5 199.5,45.0477 199.5,100 C199.5,154.952 154.952,199.5 100,199.5 C45.0477,199.5 0.5,154.952 0.5,100 C0.5,45.0477 45.0477,0.5 100,0.5 z" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="200" Margin="160,240,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="200"/>
    </Grid>

Ce cercle est la base de notre RoundedTimer... Passons à l'étape suivante: le clipping ! :)

Clipping Path

Le principe du clipping path est d'utiliser un élément pour délimiter la zone visible d'un autre élément. Malheureusement dans les apps Windows Store on ne peut pas utiliser un Path pour "masquer" un autre élément. Par contre on peut utiliser des Ellipse et des Rectangle pour délimiter une zone.

Ajoutons par exemple un Rectangle dans sur un coin de notre cercle :

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Margin="160,240,1106,428" Width="100" Height="100"/>
    <Path Data="M100,30.5 C61.6162,30.5 30.5,61.6162 30.5,100 C30.5,138.384 61.6162,169.5 100,169.5 C138.384,169.5 169.5,138.384 169.5,100 C169.5,61.6162 138.384,30.5 100,30.5 z M100,0.5 C154.952,0.5 199.5,45.0477 199.5,100 C199.5,154.952 154.952,199.5 100,199.5 C45.0477,199.5 0.5,154.952 0.5,100 C0.5,45.0477 45.0477,0.5 100,0.5 z" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="200" Margin="160,240,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="200"/>
</Grid>

Le résultat obtenu est le suivant :

On se retrouve avec un quart de cercle, ce qui va en fait représenter un quart de notre RoundedTimer ! Ce qu'il reste à faire est d'animer ce quart de Timer pour représenter le temps qui s'écoule.

Animer le Timer

Pour cela on va utiliser une Transformation sur l'élément RectangleGeometry. A vrai dire il y a sans doute plusieurs façon d'arriver au même résultat ! Pour ma part j'y suis arrivé en utilisant un SkewTransform.

Si l'on reprend le quart de cercle précédent, on peut l'animer en utilisant la transformation correcte :

<Path Data="M100,30.5 C61.6162,30.5 30.5,61.6162 30.5,100 C30.5,138.384 61.6162,169.5 100,169.5 C138.384,169.5 169.5,138.384 169.5,100 C169.5,61.6162 138.384,30.5 100,30.5 z M100,0.5 C154.952,0.5 199.5,45.0477 199.5,100 C199.5,154.952 154.952,199.5 100,199.5 C45.0477,199.5 0.5,154.952 0.5,100 C0.5,45.0477 45.0477,0.5 100,0.5 z" Fill="White" HorizontalAlignment="Left" Height="200" Margin="160,240,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="200">
	<Path.Clip>
		<RectangleGeometry Rect="0,0,100,100">
			<RectangleGeometry.Transform>
                <!-- AngleY : De 0 à 90 -->
                <SkewTransform CenterX="100" CenterY="100" AngleY="0"/>
            </RectangleGeometry.Transform>
		</RectangleGeometry>
	</Path.Clip>
</Path>

En modifiant la valeur de la propriété AngleY, on peut animer joliment le timer ! Ainsi, avec un angle de 40°, on retrouve la forme suivante :

Il ne reste donc plus qu'à créer trois autres quarts du timer, et à les animer en changeant la valeur d'un des angles toutes les secondes grâce à un DispatcherTimer. L'important étant de voir comment appliquer la SkewTransformation, en jouant sur les propriétés Center et Angle !

Téléchargement / Sources

Vous pouvez télécharger le résultat final sous la forme d'une contrôle sur GitHub ! À vous de le customiser ! :)

Pour l'intégrer dans votre app, rien de plus simple :

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:roundedTimer="using:RoundedTimer"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <roundedTimer:RoundedTimer x:Name="MyTimer" Width="200" Height="200" Duration="00:01:00" />
    </Grid>
</Page>

On instancie le timer dans le XAML, et on démarre le décompte avec un appel à la méthode Start() dans le code-behind :

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            MyTimer.Start();
        }

Renaud Dumont

//learn/ - Global Windows Phone Store Webcast 2014

Le Mobile Dev Day accueille l'évènement //publish/ en Belgique

Vous pouvez retrouver l'article original sur le blog de Kévin Rapaille

//publish/

Le concours

En Belgique

Opening of the new Microsoft Centre in Brussels and #EUYouth

Blogger Roundtable & YouthSpark program

Technology showcase

Launch of the Microsoft Center

Evening Reception

Mon premier MVP Summit

Mobile Dev Day 2013

Première édition du Mobile Dev Day

Un évènement pour les développeurs, par des développeurs

Un programme avec uniquement des têtes d'affiches

Inscriptions ouvertes et limitées

Sponsors

Planning de la rentrée 2013-2014

Trainings gratuits au Microsoft Innovation Center de Mons

Create your Windows 8 app in HTML5

The Ins & Outs of Windows Phone 8 apps

Making your first Windows 8 app

Make your app run into the Cloud

Encore plus de sessions

Microsoft DreamSpark, des logiciels gratuits à l'intention des étudiants

De quoi s'agit-il?

Comment en profiter?

3 méthode de vérification

Aucune des deux premières solutions de fonctionne pour moi...

Autres avantages

Plus de logiciels

Des offres partenaires

Des comptes développeurs gratuits

Si vous rencontrez un problème pour l'une des inscriptions, contactez-moi ;)

[Azure] Backup automatique de SQL Azure et restauration

Export manuel

Import manuel via le portail

Automatiser l'export

Recommended Backup Strategy

Restaurer une DB avec SQL Server Management Studio

IE - The browser you loved to hate

Build 2013 - Keynote Live Stream au MIC Belgique

[Windows 8] Générateur de politique de confidentialité

[ASP.NET MVC4] Comment implémenter la réinitialisation de mot de passe

La gestion des comptes avec WebSecurity

Scénario de récupération

L'implémentation

1/ Obtenir l'adresse email de l'utilisateur

2/ Demander à l'utilisateur ses informations de compte

3/ Envoyer le jeton de réinitialisation à l'utilisateur

4/ Vérifier le jeton

5/ Modifier le mot de passe

Ressources

La Kinect nouvelle génération bientôt disponible sur PC

[Windows 8] Développez en HTML 5 pour Windows 8

[Windows 8] Créer un timer rond en XAML

Conception d'un RoundedTimer

Générer un Path

Clipping Path

Animer le Timer

Téléchargement / Sources