e-mail
report

Windows App Studio : Développer une app sans développement

Retrouver l’article complet dans l’excellent magazine Programmez.com n°198 de Juillet-Aout

Windows App Studio est un outil totalement en ligne qui va vous permettre de créer sans une seule ligne de code une application Windows 10. Vous allez être plongé dans un environnement où l’on va avoir absolument rien à installer et aucune notion de développement ne vous sera requise et en étant capable d’aller proposer directement une application Windows 10 dans le store voire même de la déployer sur n’importe quel appareil PC, tablette, Téléphone, Iot, bientôt Xbox et SurfaceHub sans qu’elle passe par le store !

Cependant le développeur n’est pas mis de côté, Windows App Studio (WAS) peut être un bon outil pour démarrer une application rapidement et vous découvrirez plus loin des samples qui satisferont bon nombre de développeurs. Au final, WAS vous permettra de créer 3 choses : un package pour le sideloading (procédé de déploiement sur les postes clients sans passer par le Windows Store), un package pour Visual Studio et un package pour le store

was

Aujourd’hui lorsqu’on génère une application, on pourrait dire que la seule limite c’est l’imagination. Mais attention, ce n’est pas ce que Microsoft a voulu faire avec Windows App Studio. Windows App Studio supporte un nombre limité de scénario comme – par exemple – prendre des informations sur Facebook, YouTube, Instagram, WordPress etc… et Microsoft va aller jusqu’à créer le package et le signer pour vous. Avec Windows App Studio, on est dans un environnement possédant des scénarios limités, connus et maitrisés. Comprenons bien que ce n’est pas un éditeur de code qui pourra faire tout ce que l’on veut. WAS va nous donner votre solution (le code de votre application) et un package prêt à l’emploi ou à la publication.

Pour utiliser WAS, il ne faut pas obligatoirement de compte développeur, il vous suffit d’un compte Microsoft (@outlook.com etc..) et vous pourrez utiliser ça gratuitement. Vous n’êtes pas obligé d’avoir Visual Studio, c’est totalement optionnel. Vous pourrez faire votre application dans le site internet. Cependant si vous souhaitez étendre votre application en dehors des scénarios actuellement disponible, vous pourrez récupérer la solution continuer le développement avec votre outil Visual Studio.

Pour créer votre application, rendez-vous sur le site https://appstudio.windows.com . Une fois connecté vous serez invité à créer votre projet. Vous aurez ensuite un choix de quelques modèles pour démarrer comme « Web App Templates » qui respectera toutes les spécifications du W3C et qui créera un packaging standard d’une application web et d’autres Templates comme « Mon Catalogue d’articles » ou simplement partir du modèle « Vide ». Mais il faut souligner que ces derniers templates sont simplement parti du template vide où des éléments seront déjà pré positionner pour encore accélérer votre création. Juste ensuite vous choisirez le nom de votre application et dès le départ vous apercevrait un émulateur, extrêmement bien fait, d’une tablette, d’un mobile ou d’un ordinateur où vous visualiserez instantanément l’aperçu de votre application. Ce n’est pas juste un rendu mais j’ai bien noté « émulateur » c’est-à-dire que vous pouvez interagir avec les boutons, les slides dans ce dernier.

0

Techniquement ils ont développé un parser XAML / HTML. Cet émulateur est aussi disponible en version plein écran et l’intérêt et que le lien de ce rendu Full Screen peut être partagé avec les autres acteurs liés à cette application avec qui vous travaillez !

L’étape suivante, c’est vraiment le cœur de notre application où vous choisirez différentes sections avec des sources associées. C’est aussi à ce stade que vous définirez le thème général (couleurs, titres…). Lorsque vous ajoutez une section comme Flickr, votre blog WordPress, un compte Twitter et que vous la reliée à votre compte, l’émulateur situé à droite de l’écran s’actualisera directement ; vous aurez donc ainsi instantanément un aperçu de l’application avec vos données !

Windows App Studio Collections

2-collections

Dans le choix des sections, il existe aussi un élément appelé « Collections » où Microsoft va stocker pour vous vos données qu’elles soient statiques, dynamiques ou externes. Vous pourrez effectuer des recherches, des tris ou encore des groupes datés. Jusque-là rien d’extraordinaire vous me direz sauf que une fois que votre application est publiée sur le store par exemple, vous pourrez enrichir vos données sans revenir sur votre application !

En effet il existe une application nommée Windows App Studio Collection avec laquelle vous aurez la liste de vos applications générée via ce site et qui vous permettra à partir de votre mobile ou PC de gérer vos collections en live ! La team Windows App Studio travaille aussi sur une future version qui permettra d’envoyer des notifications à vos application et sans devoir les modifier. Qu’elles soient en sideloading ou publiée dans le store !

2-1

Windows App Studio Collections permet donc d’ajouter du contenu « à distance » sans la republier ! Imaginez le restaurateur qui a son application avec sa Carte et qui peut ainsi modifier son menu ou ajouter des plats !

Vous pouvez aussi choisir et configurer votre tuile dynamique. Il existe maintenant un grand nombre de format de tuiles et si vous choisissez une tuile statique avec votre logo, Windows App Studio va générer pour vous l’ensemble des images de vos tuiles. Et pour les développeurs, vous aurez le code généré XAML de votre tuile ! C’est prêt à l’emploi

Windows App Studio Installer

1-installer

Lorsque votre application est terminée, vous pourrez la partager, via un email, Facebook ou encore via un QR code et autre : Le sideloading a été simplifié à l’extrême. Par exemple, sur PC il faut lancer un script PowerShell avec le certificat etc…  Avec une application spéciale, toutes ces étapes disparaissent ! et ceci grâce à Windows App Studio Installer disponible sur le store.

1-1

Windows App Studio UWP Samples

3-uwp

Il existe aussi un composant Open Source qui se trouve sur GitHub sous le nom de waslib pour Windows App Studio Libraries ( https://github.com/wasteam/waslibs/ ) et qui permet à un développeur de créer de nouvelles sources de données (Data Providers).

D’ailleurs une application d’exemple existe sur le store et se nomme Windows App Studio UWP Samples et vous permettra d’évaluer l’ensemble des contrôles avec le code source correspondant ! Vous pouvez ainsi tester les composants, modifier les dimensions, l’apparence sans toucher à une ligne de code. Puis, si vous le désirez, vous pouvez cliquer sur un bouton [ C# ] pour visualiser  le code C# correspondant à ce rendu ! C’est diabolique n’est-ce pas !

3-1

Windows App Studio évolue tous les mois. On sait par exemple que des scenarios plus orientés Entreprises sont à l’études, des connexions avec des bases Azure aussi… Pour les développeurs, il sera aussi bientôt possible d’ouvrir le projet directement dans Visual Studio Online ; Ça sera un quatrième type de package téléchargeable qui s’appellera « Composant ».  L’équipe WAS fait là un excellent travail et on ne peut que les féliciter. A notez que le responsable de WAS, est français, il est Senior Program Manager à Microsoft Corp. et s’appelle Michel Lopez. Avec Denis Voituron nous l’avons interviewé dans un podcast accessible via l’adresse  http://devapps.be/podcast/windowsappstudio N’hésitez pas à écouter cette émission !

Retrouver l’article complet dans l’excellent magazine Programmez.com :

programmez

0  

[Tip] Accéder à une Resources.resw depuis le code Behind

Si on définit dans le fichier Resources.resw une localisation directement liée à un contrôle comme par exemple :
resources

Si on souhaite récupérer cette traduction depuis le code et bien ça marche pas :

var resourceLoader= new Resources.ResourceLoader();
string myText = resourceLoader.GetString("txtTitle.Text");
//myText = "" !!!!

MSDN


En effet MSDN dit clairement « The GetString method cannot retrieve resources qualified with a property identifier.  » : https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh965323.aspx

Pourtant il y a une astuce


L’astuce et d’utiliser un slash à la place du point

var resourceLoader= new Resources.ResourceLoader();
string myText = resourceLoader.GetString("txtTitle/text");

Il convient qu’il ne doit pas y avoir d’autre traduction nommé seulement « txtTitle » dans le fichier Resources.resw

0  

OnSuspending : Demander au système plus de temps pour sauver ses données

« S’il vous plait m’sieur, j’peux avoir plus de temps pour mémoriser des données avant ? »

Dans l’App.Xaml.cs, vos pouvez « solliciter » le système pour qu’il vous attribue du rab pour finaliser une sauvegarde lorsque votre application passe à l’état de « Onsuspending » :
On lui demande via ExtendedExecutionSession. et ce qui est marrant c’est qu’on doit se justifier 🙂 avec ExtendedExecutionReason.

Entre le deferral qui permet d’indiquer au système que vous utilisez par exemple du code async et que vous avez besoin d’un peu de temps pour finaliser

private void OnSuspending(object sender, SuspendingEventArgs e)
{
    var deferral = e.SuspendingOperation.GetDeferral();
   
    using (var session = new ExtendedExecutionSession{ Reason = ExtendedExecutionReason.SavingData})
    {
        session.Description = "Envoi des data";
       
        if (await session.RequestExtensionAsync () == ExtendedExecutionResult.Denied)
            //le système veut pas, j'ai que 3 secondes
            SauvegardeRapide();
        else
            //le système est ton pot, tu as 8 secondes
           SauvegardeComplete();
    }

    deferral.Complete();
}

Facile non?

trademarks
0  

Restituer la navigation après une terminaison

Lorsque l’utilisateur va basculer d’une application à une autre, l’application passe donc en arrière plan et passe dans un état d’attente et le système peut décider de la terminer si la mémoire du Device se réduit. Avant ça, si l’utilisateur revient sur votre application, il doit revenir sur la bonne page et s’il avait saisi des données faire qu’elle y soit toujours. Si vous ne prévoyez pas ce scénario, l’application revient à son état initiale et ça aura pour but de faire bouillir votre utilisateur. Pour garantir une bonne expérience à l’utilisateur, il va être necessaire d’ajouter quelques bout de code pour gérer ce cycle de vie.

Quel code ajouter à votre appli :

Revenir sur la même page

Mémorisation dans l’event OnSuspending

On va ici mémoriser la page qui était affichée. Entre le deferral qui permet d’indiquer au système que vous utilisez par exemple du code async et que vous avez besoin d’un peu de temps pour finaliser (environ 5 secondes max)

private void OnSuspending(object sender, SuspendingEventArgs e)
{
    var deferral = e.SuspendingOperation.GetDeferral();
   
    //Mémo de la page actuelle
    Frame frame = Windows.Current.Content as Frame;
    ApplicationData.Current.LocalSettings.Values["NavigationState"] = frame.GetNavigationState();

    deferral.Complete();
}

Retour sur la page dans l’event Onlaunched

On insérera ces lignes dans l’évènement OnLaunched de l’App.xaml.cs

protected override void OnLaunched(LaunchActivatedEventArgs e)
{    
    //.....
    if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
    {
        //Si y'a une page de mémorisée
        if (ApplicationData.Current.LocalSettings.Values.ContainsKey("NavigationState"))
        {
            rootFrame.SetNavigationState((string)ApplicationData.Current.LocalSettings.Values["NavigationState"]);
        }
    }

    // Placez le frame dans la fenêtre active
    Window.Current.Content = rootFrame;
}

Voyons maintenant comment mémoriser les données : Restituer les données après une terminaison

1  

Restituer les données après une terminaison

Dans l’article précédent Restituer la navigation après une terminaison on a su revenir sur la bonne page de votre application. Ici on va remettre les données que l’utilisateur avait par exemple commencé à saisir.

Déclarer une variable static IsSuspending dans l’App.xaml.cs et la passer à TRUE dans l’évènement OnSupending

private void OnSuspending(object sender, SuspendingEventArgs e)
{
    var deferral = e.SuspendingOperation.GetDeferral();
   
    IsSuspending = true;
   
    //Mémo de la page actuelle
    Frame frame = Windows.Current.Content as Frame;
    ApplicationData.Current.LocalSettings.Values["NavigationState"] = frame.GetNavigationState();

    deferral.Complete();
}

MaPage.Xaml.cs : OnNavigationFrom

Dans votre page, on va maintenant mémoriser les données dans l’évent OnNavigationFrom (on quitte la page) puis les restituer dans l’évent OnNavigationTo (On arrive sur la page) :

protected override void OnNavitationFrom(NavigationEventArgs e)
{
    bool suspending = ((App)App.Current).IsSuspending;
    if (suspending )
    {
       var composite = new ApplicationDataCompositeValue();
       composite["madonnee1"] = this.textBoxName.Text;
       composite["madonnee2"] = this.textBoxAge.Text;
       ApplicationData.Current.LocalSettings.Values["Mesdonnees"] = composite;
     
       //On peut utiliser ça aussi :
      //state["madonnee1"] = this.textBoxName.Text;
    }
}

MaPage.Xaml.cs : OnNavigationTo

Et au retour de la page, si c’est une nouvelle navigation on vide par sécu le « composite » sinon on regarde s’il existe et restitue les info :

protected overrire void OnNavigationTo (NavigationEventArgs e)
{
   if (e.NavigationMode == NavigationMode.New)
   {
       ApplicationData.Current.LocalSettings.Values.Remove("Mesdonnees");
   }
   else
   {
       if (ApplicationData.Current.LocalSettings.Values.ContainsKey("Mesdonnees"))
       {
          var composite = ApplicationData.Current.LocalSettings.Values["Mesdonnees"] as ApplicationDataCompositeValue;
          this.textBoxName.Text = (string)composite["madonnee1"];
          this.textBoxAge.Text = (string)composite["madonnee2"];
   
          ApplicationData.Current.LocalSettings.Values.Remove("Mesdonnees");
       }
   }
}
0  
trademarks
feed