Catégorie : Microsoft

Categories
Azure Microsoft

Global Azure Bootcamp Montréal 2017

Vous êtes développeur Web et vous voulez faire vos premiers pas avec Azure ? Cet événement gratuit est fait pour vous !

Samedi 22 avril 2017 de 8h30 à 16h30 prenez part au Global Azure Bootcamp chez Microsoft Montréal !

 

Cet événement gratuit est idéal si vous souhaitez faire vos premiers pas avec Azure. Vous pourrez m’y retrouver en tant que conférencier et il me fera plaisir de vous conseiller tout au long de cette journée.

Cette journée sera centrée sur la pratique. Vous devez donc apporter votre ordinateur portatif. Tout au long de la journée, vous bâtirez une application Web roulant sur Azure et utilisant une multitude de services Azure le tout en « live coding » en suivant les instructions des conférenciers.

Participer au Global Azure Bootcamp Montréal 2017
Categories
Azure Microsoft

Prenez la maîtrise des push notifications multiplateforme avec Azure Notification Hubs

Msdevmtl Meetup chez Microsoft Montréal (2000 McGill College Ave, Suite 550) lundi 20 mars 2017 à 18h30

Merci d’avoir assisté à cette présentation !

Vous pouvez retrouver le code source du projet de la démonstration sur GitHub :

 

Pour rappel le projet s’articule autour des technologies suivantes :

  • Azure Notification Hubs
  • Azure WebJobs
  • ASP.NET Web API
  • Xamarin Android

 

Téléchargez également la présentation PowerPoint ci-dessous :

 

N’hésitez pas à me contacter si vous avez des questions à propos de la présentation ou du projet.

Joignez-vous à moi lundi 20 mars 2017 à 18h30 chez Microsoft Montréal pour une présentation sur Azure Notification Hubs !

 

Ensemble nous verrons comment Azure Notification Hubs peut vous faciliter la vie en vous donnant la capacité d’envoyer facilement des millions de messages et ce sur différentes plateformes.

Dans cette session de 60 minutes je vous propose de découvrir Azure Notification Hubs au travers d’une présentation qui vous montrera les grandes lignes du produit, comment le mettre en place avec le portail Azure mais également via ARM template, puis en terminant par une partie pratique avec une démonstration concrète d’utilisation.

Participer au meetup

 

Veuillez noter que dans la même soirée, François (Frank) Boucher donnera une présentation sur Azure Functions !

Categories
Bing Maps Microsoft

Utiliser les services REST Bing Maps avec jQuery pour construire une zone de saisie semi-automatique et trouver une localisation dynamiquement

Dans cet article nous allons découvrir comment construire une zone de saisie semi-automatique avec les services REST Bing Maps en utilisant uniquement HTML, JSON et jQuery.

Les services REST Bing Maps nous permettent d’effectuer des tâches telles que la création d’une carte avec des punaises, le géocodage d’une adresse, la récupération de métadonnées des images, ou la création d’un itinéraire.

Ici, nous allons apprendre à utiliser l’API Locations des services REST Bing Maps pour construire une zone de saisie semi-automatique avec jQuery. Pour utiliser les services REST Bing Maps, vous aurez besoin d’une clé Bing Maps. Il suffit d’aller sur le Bing Maps Account Center pour en obtenir une.

 

Création

Tout d’abord, nous allons créer une simple page HTML en ajoutant les références à jQuery et jQuery UI, une zone de saisie pour la localisation recherchée et une div dans laquelle les résultats seront affichés.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #searchBox
        {
            width: 25em;
        }
    </style>
</head>
<body>
    <div>
        <div class="ui-widget">
            <label for="searchBox">
                Search:
            </label>
            <input id="searchBox" />
        </div>
        <div id="searchResult" class="ui-widget" style="margin-top: 1em;">
        </div>
    </div>
</body>
</html>

 

Pour appeler l’API Locations, nous utilisons l’adresse suivante : http://dev.virtualearth.net/REST/v1/Locations

Les paramètres qui suivent sont nécessaires pour obtenir une réponse du service :

  • query (or q) : la localisation recherchée.
  • key : est la clé Bing Maps à utiliser pour la requête (voir Bing Maps Account Center).

Les services REST Bing Maps ont également d’autres paramètres optionnels tels que :

  • userLocation (or ul) : position actuelle de l’utilisateur.
  • culture (or c) : la culture à utiliser pour la requête.
  • output (or o) : format de sortie de la réponse (JSON ou XML). JSON est utilisé par défaut.
  • jsonp : nom de la fonction callback JSON qui est appelée quand la réponse à la requête est reçue. L’objet JSON fourni dans la réponse est passé à la fonction callback.

 

Pour créer une zone de saisie semi-automatique, nous utilisons jQuery UI. La source des suggestions fournies à l’utilisateur viendra des services REST Bing Maps.

Le fonctionnement est le suivant : lorsque l’utilisateur tape une localisation, une requête Ajax est déclenchée pour appeler l’API Locations des services REST Bing Maps et une réponse JSON est reçue. La réponse est traitée pour être affichée sous forme de suggestions à l’utilisateur. Voici le code JavaScript pour obtenir ce comportement :

<script type="text/javascript">
    $(document).ready(function () {
        $("#searchBox").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "http://dev.virtualearth.net/REST/v1/Locations",
                    dataType: "jsonp",
                    data: {
                        key: "<yourbingmapskey>",
                        q: request.term
                    },
                    jsonp: "jsonp",
                    success: function (data) {
                        var result = data.resourceSets[0];
                        if (result) {
                            if (result.estimatedTotal > 0) {
                                response($.map(result.resources, function (item) {
                                    return {
                                        data: item,
                                        label: item.name + ' (' + item.address.countryRegion + ')',
                                        value: item.name
                                    }
                                }));
                            }
                        }
                    }
                });
            },
            minLength: 1
        });
    });
</script>

 

Il faut prêter attention à plusieurs choses ici :

  • Nous indiquons à jQuery que la source de la zone de saisie semi-automatique est une requête Ajax envoyée à l’API Locations des services REST Bing Maps. Une fois la réponse à la requête reçue, la zone de saisie semi-automatique obtient des suggestions grâce au callback qui s’appelle response.
  • La requête Ajax a plusieurs paramètres :
    • url : celle de l’API Locations.
    • dataType : jsonp.
    • jsonp : s’appelle jsonp pour remplacer le nom de la fonction de callback dans la requête jsonp. Ainsi jQuery rajoute « ?jsonp=? » à la fin de l’URL pour préciser le callback. Ceci est requis par les services REST Bing Maps.
  • On obtient le terme recherché à partir du paramètre nommé request.term.
  • On vérifie que la réponses des services REST Bing Maps contient un « resource sets » et également qu’il y a des localisations qui correspondent au terme recherché (result.estimatedTotal > 0). Pour plus de détails sur la réponse des services REST Bing Maps : Common Response Description on MSDN.
  • Dans le callback response, on indique que le label de la suggestion sera le nom de la localisation plus le nom du pays, et que la valeur sera égale au nom de la localisation. On utilise également la propriété nommée data pour sauver les informations de localisations complètes afin de les réutiliser lorsque l’utilisateur aura sélectionné une localisation.

 

Par exemple, lorsqu’un utilisateur cherche « San Francisco », l’URL de requête Ajax suivante est construite et appelée :

http://dev.virtualearth.net/REST/v1/Locations?jsonp=<callbackname>&key=<yourbingmapskey>&q=San+francisco&_=1298745707161

 

La source finale de la page est la suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .ui-autocomplete-loading
        {
            background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
        }
        #searchBox
        {
            width: 25em;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#searchBox").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "http://dev.virtualearth.net/REST/v1/Locations",
                        dataType: "jsonp",
                        data: {
                            key: "<yourbingmapskey>",
                            q: request.term
                        },
                        jsonp: "jsonp",
                        success: function (data) {
                            var result = data.resourceSets[0];
                            if (result) {
                                if (result.estimatedTotal > 0) {
                                    response($.map(result.resources, function (item) {
                                        return {
                                            data: item,
                                            label: item.name + ' (' + item.address.countryRegion + ')',
                                            value: item.name
                                        }
                                    }));
                                }
                            }
                        }
                    });
                },
                minLength: 1,
                change: function (event, ui) {
                    if (!ui.item)
                        $("#searchBox").val('');
                },
                select: function (event, ui) {
                    displaySelectedItem(ui.item.data);
                }
            });
        });

        function displaySelectedItem(item) {
            $("#searchResult").empty().append('Result: ' + item.name).append(' (Latitude: ' + item.point.coordinates[0] + ' Longitude: ' + item.point.coordinates[1] + ')');
        }
    </script>
</head>
<body>
    <div>
        <div class="ui-widget">
            <label for="searchBox">
                Search:
            </label>
            <input id="searchBox" />
        </div>
        <div id="searchResult" class="ui-widget" style="margin-top: 1em;">
        </div>
    </div>
</body>
</html>

 

Vidéo de démonstration (En anglais) 

Liens

Plusieurs liens qui vous aideront à comprendre et aller plus loin sur le sujet :

 

En résumé

Nous avons vu comment utiliser les services REST Bing Maps avec jQuery, jQuery UI pour construire une zone de saisie semi-automatique afin de trouver une localisation dynamiquement. Comme nous utilisons HTML, JSON et jQuery, cela peut être intégré avec la technologie que vous préférez.

Si vous souhaitez aller plus loin sur le sujet, regardez les liens ci-dessus pour comprendre ce que vous pouvez faire avec les services REST Bing Maps. Par exemple, nous pourrions afficher la localisation sélectionnée sur une carte avec le contrôle Bing Maps AJAX ou le contrôle Bing Maps Silverlight. Ce sera certainement le sujet d’un de mes prochains articles, en complément de celui-ci.

Vous pouvez télécharger les sources complète ici :

Télécharger les sources complètes

 

N’hésitez pas à commenter ou à me contacter si vous avez des questions à propos de cet article.

Categories
Microsoft Windows Phone 7

Première mise à jour de Windows Phone 7 disponible

Voici quelques photos pour vous montrer à quoi ressemble la notification de mise à jour sur le téléphone.

Je viens de recevoir la première notification de mise à jour sur mon Samsung Omnia 7. Voici quelques photos :

Je vais attendre avant de mettre à jour mon téléphone, suite au problème signalé par plusieurs personnes lors du processus de mise à jour avec le Samsung Omnia 7.

Categories
ASP.NET ASP.NET MVC Microsoft

Créer un AuthorizeAttribute personnalisé qui accèpte des paramètres de type enum

Dans cet article je vais vous expliquer comment créer simplement un AuthorizeAttribute qui accepte des paramètres de type enum afin d’éviter le codage en dur des rôles.

Avez-vous déjà essayé dans l’un de vos projets ASP.NET MVC d’utiliser un attribut [Authorize] pour par exemple assigner des rôles, en utilisant la valeur d’une Enum ?

Si c’est le cas, vous obtiendrez le message d’erreur suivant en anglais lors de la compilation :

An attribute argument must be a constant expression, typeof expression or array creation expression of an attribute parameter type

 

C’est parce que vous avez besoin d’utiliser des valeurs statiques et il est impossible d’utiliser une Enum pour définir les propriétés d’un Attribute. Cela signifie que vous ne pouvez pas définir la propriété Roles d’un [AuthorizeAttribute] avec une valeur d’Enum.

C’est frustrant, parce que personnellement je n’aime pas avoir à coder en dur les rôles dans une application. Cela rend l’application pas très lisible et plus compliquée à maintenir.

 

Heureusement, ASP.NET MVC nous permet de personnaliser l'[AuthorizeAttribute] facilement sans avoir à remplacer le processus de sécurité standard.

 

 Création

Pour nos besoins, nous allons créer l’Enum ci-dessous pour déclarer les rôles:

namespace MvcApplication.HowTo.Enums
{
    public enum Role
    {
        Administrator = 1,
        UserWithPrivileges = 2,
        User = 3,
    }
}

 

Maintenant, nous allons créer un [AuthorizeAttribute] personnalisé qui accepte des Enum en tant que paramètres dans le constructeur. Il héritera de System.Web.Mvc.AuthorizeAttribute :

using System;
using System.Linq;
using System.Web.Mvc;

namespace MvcApplication.HowTo.Attributes
{
    [AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, Inherited = true, AllowMultiple = true)]
    public class AuthorizeEnumAttribute : AuthorizeAttribute
    {
        public AuthorizeEnumAttribute(params object[] roles)
        {
            if (roles.Any(r => r.GetType().BaseType != typeof(Enum)))
                throw new ArgumentException("roles");

            this.Roles = string.Join(",", roles.Select(r => Enum.GetName(r.GetType(), r)));
        }
    }
}

Comme vous pouvez le voir, il faut prêter attention à plusieurs choses ici :

  • Le constructeur accepte des paramètres de type object, c’est la petite astuce. Si vous utilisez des paramètres de type Enum, vous obtiendrez le même message d’erreur que ci-dessus. Nous pouvons faire cela car une Enum est un object.
  • Pour veiller à ce que l’on passe des paramètres de type Enum, on vérifie le type de tous les rôles. Si un rôle n’est pas de type Enum, le constructeur lèvera une ArgumentException.
  • Ensuite nous définissons la propriété standard Roles avec le nom de nos rôles, à l’aide de la méthode string.join.

 

Exemple d’utilisation

Disons que nous voulons autoriser uniquement les utilisateurs ayant les rôles Administrator ou UserWithPrivileges sur l’action nommée ThePrivilegeZone du HomeController. L’action ThePrivilegeZone sera décorée de notre authorize attribute personnalisé comme ci-dessous :

using System.Web.Mvc;
using MvcApplication.HowTo.Attributes;
using MvcApplication.HowTo.Enums;

namespace MvcApplication.HowTo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }

        [AuthorizeEnum(Role.Administrator, Role.UserWithPrivileges)]
        public ActionResult ThePrivilegeZone()
        {
            return View();
        }
    }
}

Notre code est propre comme ça, n’est-ce pas ?

 

Pour aller plus loin

Si l’on regarde avec un outil comme Reflector, il est intéressant de comprendre comment l’action ThePrivilegeZone est décorée lors de la compilation. Voici une capture d’écran :

Nous comprenons qu’une fois compilées, les valeurs de l’Enum Role sont utilisés et non les noms. Ici 1 (Administrator) et 2 (UserWithPrivileges).

Notez que si vous utilisez une Enum pour vos rôles sans mettre de valeurs comme nous l’avons fait ici, les valeurs de l’Enum seront dans l’ordre 0, 1, 2, etc juqsu’au nombre de vos rôles moins 1.

 

En résumé

Nous avons vu comment créer et utiliser un AuthorizeAttribute personnalisé qui accepte des paramètres de type enum. Ici nous définissons seulement la propriété Roles, mais en fonction de vos besoins vous pouvez faire la même chose avec la propriété Users. Personnellement, j’utilise cet attribut personnalisé dans mon framework afin de le réutiliser dans tous mes projets ASP.NET MVC.

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

Télécharger la solution Authorize Enum

(Notez que le projet utilise ASP.NET MVC 3)

 

N’hésitez pas à commenter ou à me contacter si vous avez des questions à propos de cet article.