50

L’atout cartographie en mobilité : implémentation pratique et cas concrets

Embed Size (px)

DESCRIPTION

A travers cette session nous allons aborder les bases de l’exploitation de la cartographie au sein des périphériques Windows Phone 8 et Windows 8 pour comprendre comment exploiter ses capacités de présentation et de visualisation avancées au sein de contrôles interactifs. Nous suivrons un cas concret et pratique que nous implémenterons en scénario de mobilité et que nous étendrons en termes de fonctionnalités à l’aide de traitements serveur spécifiques et répondre ainsi à des cas d’usage réels tels que la gestion de livraison et l’optimisation de tournée, la recherche dans des zones de chalandise, de recherche le long d’un itinéraire. Cas pratiques, architecture et implémentation technique, cette session s’adresse aux développeurs et aux décideurs souhaitant aller beaucoup plus loin et compléter l’expérience locale dans les applications mobiles. Speakers : Jonathan Antoine (MVP), Nicolas Boonaert (MVP)

Citation preview

Page 1: L’atout cartographie en mobilité : implémentation pratique et cas concrets
Page 2: L’atout cartographie en mobilité : implémentation pratique et cas concrets

Code/Développement

L'atout cartographie en mobilité

implémentation pratique et cas concretsJonathan Antoine

MVPInfinite Square

[email protected]

Nicolas BoonaertMVP

[email protected]

Page 3: L’atout cartographie en mobilité : implémentation pratique et cas concrets

Code/Développement#mstechdays

AGENDA

Page 4: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Contexte

• Grand public : Application WP8• Central d’appel : Application Windows

8.1• Dépanneur : Application WP8

• Conclusions

Agenda

Page 5: L’atout cartographie en mobilité : implémentation pratique et cas concrets

Infinite Square aux TechDays 2014#mstechdays

Société de conseil, expertise, réalisation, formation, spécialisée dans le développement

d’applications logicielles innovantes sur les technologies Microsoft

100% des consultants certifiés Microsoft, parmi lesquels 10 MVP et 2 Nokia Champions

GOLD Certified Partner sur 5 domaines de compétences

Centre de formation agrée

Infinite Square stand 19

Page 6: L’atout cartographie en mobilité : implémentation pratique et cas concrets

Code/Développement#mstechdays

Wygwam stand 40

Wygwam est un pure player Microsoft, Gold Partner délivrant des services de Conseil/Expertise, design, développement et formation à nos clients Grands Comptes, PME et éditeurs de logiciels.

Société à taille humaine, innovante et fondée sur des valeurs, nos collaborateurs sont réactifs, passionnés.

Wygwam vous accompagne dans ces domaines: Stratégies digitales et mobiles : Windows 8, e-commerce, applications et sites web, Windows PhoneTravail collaboratif : SharePoint, Réseaux Sociaux d'EntrepriseNUI, design d'interaction, Azure, BI, ALM et cartographie.

Page 7: L’atout cartographie en mobilité : implémentation pratique et cas concrets

Code/Développement#mstechdays

CONTEXTE

Description de l’ensemblede l’application

Page 8: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

Contexte – Présentation du scénario

Grand publicWindows Phone 8

DépanneurWindows Phone 8

Central d’assuranceWindows 8

Page 9: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

Contexte – Un regard techniquePlateforme Azure

API d’expositionHosté au sein d’un service Azure

Base de donnéesSQL Azure (SQL Server 2012)

Utilisation du type géographique

Instance dédiée

Entity Framework

Web API Controller

Grand publicWindows Phone 8

Central d’assuranceWindows 8

DépanneurWindows Phone 8

Clients applicatifs

Page 10: L’atout cartographie en mobilité : implémentation pratique et cas concrets

Code/Développement#mstechdays

GRAND PUBLIC

Application Windows Phone 8

Page 11: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Affichage du trafic temps réel et position de l’utilisateur

• Déclaration d’un incident– Mineur : l’utilisateur reste autonome– Majeur : la centrale d’assurance assiste

l’utilisateur

Grand public – WP8 - Fonctionnalités

Page 12: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Configuration dans le manifest

• Les coordonnées retournéessont issues du système WGS84

Utilisation de la position courante

ID_CAP_LOCATION

Page 13: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Récupération unique

Utilisation de la position courante

var geolocator = new Geolocator { DesiredAccuracyInMeters = 50 };

try{ Geoposition geoposition = await geolocator.GetGeopositionAsync( maximumAge: TimeSpan.FromMinutes(5), timeout: TimeSpan.FromSeconds(10));

var coordinate = geoposition.Coordinate;}catch (Exception ex){}

Page 14: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Récupération régulière

Utilisation de la position courante

var geolocator = new Geolocator { DesiredAccuracy = PositionAccuracy.High, MovementThreshold = 100 };

geolocator.StatusChanged += (_, argsStatus) => // Pas sur le thread UI Deployment.Current.Dispatcher.BeginInvoke(() => { var gpsStatus = argsStatus.Status; });

geolocator.PositionChanged += (_, argsPosition) =>{ var coordinate = argsPosition.Position.Coordinate;};

Page 15: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Manifest• Token du Store à indiquer• Contrôle XAML classique « Map »• Propriétés intéressantes

– ZoomLevel– CartographicMode (Aerial, Terrain, Road, …)– LandmarksEnabled, PedestrianFeaturesEnabled

Affichage d’une carteID_CAP_MAP

Page 16: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Installer le Windows Phone Toolkit• Conversion GeoCoordinate

Geocoordinate• Ajouts simplifiés

– PushPin– Localisation de l’utilisateur– Etc.

Affichage d’une carte – outil utile

Page 17: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Ajout de punaise personnalisée

• Ajout de polygones

Manipulation d’une carte

<toolkit:Pushpin GeoCoordinate="{Binding InterventionLocation}" Background="{StaticResource TdBlueBrush}" Visibility="{Binding IsXX,Converter={StaticResource BooleanToVisibilityConverter}}"> <Image Source="/Assets/Images/SinisterPushPinContent.png" /></toolkit:Pushpin>

var dynamicPolyline = new MapPolygon {StrokeColor = Color.FromArgb(255, 62, 181, 50),Path = geoCoordinateCollection,

};

Map.MapElements.Add(dynamicPolyline);

Page 18: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• La plateforme Bing Maps propose des cartes statiques délivrées sous formes d’images

• Très pratiques pour les affichages de tuiles

Cartes statiques

imageUriFormat = "http://dev.virtualearth.net/REST/v1/Imagery/Map/" + "Road/" + // Type de carte "{0},{1}/" + // Coordonnées "14?" + // Zoom "mapSize={2}" + // Dimensions de l'image "&mapLayer=TrafficFlow" + // une seule valeur possible "&format=jpeg" +

"&pp={0},{1};97;" + // Pushpin "&key=CeNeSontPasLesApiKeysQueTuRecherches";

Page 19: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

Cartes statiques – Epinglage sur l’accueil var ftd = new FlipTileData(){Title=«centre.Title »};

ftd.WideBackgroundImage = new Uri( string.Format( imageUriFormat, c.Location.Latitude, c.Location.Longitude, "691,336"), UriKind.Absolute);

ShellTile.Create(new Uri("/Views/HomePage.xaml", UriKind.Relative), ftd, true);

Page 20: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Lancement de l’application de guidage– En voiture : (Lancement de Here Drive par

défaut)

– A pied : (Lancement de Here Maps par défaut)

Utilisation des protocoles d’application

ms-drive-to:?destination.latitude=50.2546&destination.longitude=3.5646&destination.name=Palais%20des%20Congrés,Paris,France

ms-walk-to:?destination.latitude=50.2546&destination.longitude=3.5646&destination.latitude=50,2656&destination.longitude=3,456

Page 21: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Les launchers simplifiés– Disponible en ligne :https://github.com/nokia-developer/here-launchers – Package Nuget : HereLauncher– Simplifie l’utilisation des applications de Nokia :

Utilisation des protocoles d’application

new Nokia.Phone.HereLaunchers.GuidanceDriveTask(){ Destination = selectedCenter.Location.GeoCoordinate, Title = selectedCenter.Title}.Show();

Page 22: L’atout cartographie en mobilité : implémentation pratique et cas concrets

démo

#mstechdaysCode/Développement

APPLICATION GRAND PUBLIC

Windows Phone 8

Page 23: L’atout cartographie en mobilité : implémentation pratique et cas concrets

Code/Développement#mstechdays

CENTRAL D’APPELApplication Windows 8

Page 24: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Visualisation des incidents• Recherche par isochrone• Affectation des missions

Central d’appel - W8 - Fonctionnalités

Page 25: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Les solutions possibles :

• Le SDK .Net disponible dans la galerie :– http://bit.ly/1elE1XL

Affichage d’une carte

Contrôle Natif - C++/.Net

Code en C++/C#/VB.Net

Intégration en XAML

Basé sur un moteur accéléré pour le rendu

Contrôle JavaScript - WinJS

Code HTML+JavaScript

Développement basé sur l’API JS v7

Basé sur les capacités du navigateur

Page 26: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Appel à la plateforme Here Location Platform– Requête :

– Réponse :

Recherche basée sur le temps de parcours

http://route.st.nlp.nokia.com/routing/6.2/calculateisoline.json?mode=fastest;car;traffic:enabled&start=geo!50.5308609,3.3846903&time=P0Y0M0DT0H15M0S

Page 27: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Requête à la base de données via Entity Framework et le type géographique

Recherche par temps de parcours

var polygon = DbGeographyHelper.CreatePolygon(wkt);

partners = ctx.Partners.Include(m => m.Incidents).Include(m => m.PartnerEquipments) .Where(i => i.Location.Intersects(polygon)).Take(limit) .ToList();

Page 28: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Affichage de la carte– En XAML, l’ajout du contrôle :

Recherche par temps de parcours

<maps:Map Credentials="BINGMAPSKEY" Width="966" MapType="Road" ShowTraffic="True" ShowBuildings="True" ShowBreadcrumb="True" ShowScaleBar="True" Height="600" x:Name="Map"></maps:Map>

Page 29: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Ajout du calque des entités :

• Ajout du polygone :

Recherche par temps de parcours

// Add a shape layervar layer = new MapShapeLayer();this.Map.ShapeLayers.Add(layer);

// Create and add the polygonvar polygon = new MapPolygon() { Locations = locationCollection };polygon.FillColor = Color.FromArgb(75, 50, 158, 181);polygon.Visible = true;layer.Shapes.Add(polygon);

Page 30: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Création et ajout du contour :

• Positionnement de la vue :

Recherche par temps de parcours

layer.Shapes.Add(new MapPolyline(){ Width = 5, Locations = locationCollection, Color = Color.FromArgb(255, 50, 158, 181), Visible = true});

this.Map.SetView(new LocationRect(locationCollection));

Page 31: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Affichage des résultats

Recherche par temps de parcours

foreach (var partner in o.Partners){ Pushpin p = new Pushpin()

{ Text = (i++).ToString() };

MapLayer.SetPosition(p, new Location() {Latitude = partner.Latitude,Longitude =

partner.Longitude});

this.Map.Children.Add(p);}

Page 32: L’atout cartographie en mobilité : implémentation pratique et cas concrets

démo

#mstechdaysCode/Développement

APPLICATION DE CENTRAL D’APPELWindows 8

Page 33: L’atout cartographie en mobilité : implémentation pratique et cas concrets

Code/Développement#mstechdays

DÉPANNEUR

Application Windows Phone 8

Page 34: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Récupération et notification des missions affectées

• Détection du départ après intervention sans rapport

• Enregistrement de la position pour rapport en fin de journée sur les distances parcourues

Background agent – Cas d’usage

Page 35: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• L’application n’est plus désactivée

• Permet de suivre le déplacement de l’utilisateur

Dépanneur - WP8 – Background Agent

Page 36: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Activer la capability LOCATION• Spécifier l’exécution en background

dans le manifest

• S’abonner aux événements du Geolocator

Background agent – Prérequis techniques

<DefaultTask Name ="_default" NavigationPage="MainPage.xaml"> <BackgroundExecution> <ExecutionType Name="LocationTracking" /> </BackgroundExecution> </DefaultTask>

Page 37: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Evénements du Geolocator

• Les gestionnaires d’événements sont appelés lorsque la position change même lorsque l’application n’est pas au premier plan.

Background agent – Utilisation

_geoloc = new Geolocator();_geoloc.PositionChanged += geoloc_PositionChanged;_geoloc.StatusChanged += _geoloc_StatusChanged;

Page 38: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Configuration du Geolocator

• Simple addition

Background agent – Calcul de la distance

_geoloc.DesiredAccuracyInMeters = 50; //10%_geoloc.DesiredAccuracy = PositionAccuracy.Default; // Sauvegarde batterie_geoloc.MovementThreshold = 500; // Les unités sont en mètres._geoloc.ReportInterval = 1000; // Intervalle de notification de déplacement

// Possible d'utiliser la méthode "Haversine" aussi (win8).var distanceSinceLastPosition = (long)LastPositionGeoCoordinate .GetDistanceTo(args.Position.Coordinate.ToGeoCoordinate());TotalDistanceOfTheDay += distanceSinceLastPosition;

Page 39: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Détecter l’arrivée sur intervention

• Détecter l’oubli de rapport de fin d’intervention

Background agent – Détection du comportement

if (_goingToIntervention && InterventionLocation.GetDistanceTo(e.Coordinate.ToGeoCoordinate()) <= 500)

if (_trackingExitOfIntervention && InterventionLocation.GetDistanceTo(e.Coordinate.ToGeoCoordinate()) > 500){ _trackingExitOfIntervention =_goingToIntervention = false; // Afficher un rappel à l'utilisateur}

Page 40: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• L’application est au premier plan– Message box classique dans l’interface

graphique

• L’application est au second plan– Toasts, Tuiles, Lockscreen, TextToSpeech…

Background agent – Afficher un message

Page 41: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• RunningInBackground sur PhoneApplicationService

• Evénement Activated : premier-plan

Background agent – Application en premier plan

<shell:PhoneApplicationService RunningInBackground="PhoneApplicationService_OnRunningInBackground" … />

private void Application_Activated(object sender, ActivatedEventArgs e){ IsRunningInBackground = false;}

Page 42: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Affichage du message concrètement

Background agent – Toast et message

const string titre = "Attention";const string contenu = "Vous avez oublié de signaler la fin d'intervention.";

if (App.IsRunningInBackground){ MessageBox.Show(contenu, titre, MessageBoxButton.OK);}else{ var toast = new ShellToast { Title = titre, Content = contenu }; toast.Show();}

Page 43: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Coupure « automatique « :– L’économiseur de batterie s’active– Une autre application GPS est lancée (Nokia Drive)– La mémoire du téléphone devient insuffisante– L’application fonctionne depuis 4H sans interactions de

l’utilisateur– L’application est quittée

• Coupure manuelle – Désabonnement des handlers sur le Geolocator– Appel à la méthode « Stop » du Geolocator

Background agent – ça marche tout le temps ?

Page 44: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• L’événement Deactivated est levé

• La raison de la coupure est indiquée

Background agent – détection de coupure

private void Application_Deactivated(object sender, DeactivatedEventArgs e){ if (e.Reason != DeactivationReason.UserAction)

new ShellToast { … }.Show(); }

Page 45: L’atout cartographie en mobilité : implémentation pratique et cas concrets

démo

#mstechdaysCode/Développement

APPLICATION DÉPANNEUR

Windows Phone 8

Page 46: L’atout cartographie en mobilité : implémentation pratique et cas concrets

Code/Développement#mstechdays

CONCLUSIONS

Page 47: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• L’information géographique peut apporter une dimension importante dans de nombreuses applications

• Windows Phone et Windows 8.1 offrent des réelles possibilités d’interaction et scénarii riches et de récupération d’informations

• Les plateformes peuvent compléter les fonctionnalités de base pour répondre aux besoins avancés dans les applications

Conclusions

Page 48: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

• Le code des exemples :– PROCHAINEMENT

• Les liens utiles :MSDN - Bing Maps for W8.1 : http://msdn.microsoft.com/en-us/library/hh846481.aspxMSDN – Map Control for WP8 : http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207045(v=vs.105).aspx

Here developer portal: http://developer.here.com/

Conclusions – Pour aller plus loin

Page 49: L’atout cartographie en mobilité : implémentation pratique et cas concrets

#mstechdaysCode/Développement

Depuis votre smartphone sur :http://notes.mstechdays.fr

De nombreux lots à gagner toute les heures !!!Claviers, souris et jeux Microsoft…

Merci de nous aider à améliorer les Techdays !

Donnez votre avis !

Page 50: L’atout cartographie en mobilité : implémentation pratique et cas concrets

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Digital is business