AppStudio : exemple concret d’une App UWP

S’il y a bien un sujet qui me tient à coeur, c’est celui des applications mobiles. Microsoft a toujours eu du retard sur ce sujet, mais à également toujours voulu pousser les développeurs à alimenter ses stores. Comment ? En facilitant la création d’applications ou de génération d’application windows depuis une application ios par exemple.
Sujet sous-jacent à tout cela, l’appstudio. J’en ai déja énormément parlé, mais cet été est l’occasion d’une petite mise à jour sur cet outil qui continue de vivre depuis 2 ans.

Pour illustrer de manière plus concrète ce que je vais détailler dans cet article, je vous propose même de télécharger l’application réalisée en quelques minutes sur l’appstudio : Cliquez-ici

Prêt à réaliser une application en 15 étapes ? Allons-y.

Partons d’un contexte : un blogueur ou une entreprise. L’idée serait de créer une app très simple faisant office de hub des articles publiés sur son site internet & d’un flux comme twitter par exemple. Pour peu que le site internet sur lequel se trouve le blog utilise WordPress, rien de plus simple avec l’AppStudio ! Voici comment faire :

1) Connectez vous sur https://appstudio.windows.com

2) Créer un nouveau projet depuis le template « Empty Pivot App », nommez là comme vous le souhaitez

3) Sur la page « Content », ajoutez une section WordPress, une section twitter et une section Bing. Vous devriez obtenir quelque chose comme ceci :

section

4) Pensez à sauvegarder chaque avancée

5) Editez la section WordPress, donnez lui un titre & dans l’onglet Data renseignez votre site & les posts que vous souhaitez voir afficher (selon des tags, catégories ou bien l’ensemble des posts). vous avez également la possibilité de modifier l’ordre selon différents critères. Je choisis de trier selon la date de modification du post :

Wordpress1

Wordpress2

6)
L’onglet « List & Detail Pages » vous permet de choisir la mise en forme de cette section & du contenu de l’item. Si les settings par défaut vous conviennent, sauvegardez et revenez à la page « Content ». Sinon, vous pouvez modifier les éléments que vous souhaitez voir affichés et les prévisualiser dans l’émulateur de droite (utilisez le bouton refresh)

7) L’onglet Twitter suit la même logique. Il vous faut cependant créer une clé API Twitter pour pouvoir vous connecter à votre compte. Les étapes sont bien expliquées dans la FAQ, je ne les détaillerais donc pas ici. Vous choisissez à nouveau la mise en forme que vous souhaitez voir appliquée pour cette section. Sauvegardez et revenez sur l’onglet « Content »

8) J’ai décidé d’ajouter une dernière section affichant les résultats bing d’une recherche sur mon nom+prénom, vous pouvez très bien imaginer d’autres sections complètement différentes. Concernant Bing, même logique à nouveau. L’onglet Data sert à préciser la localisation et les termes utilisés par le moteur de recherche. Sauvegardez et vous pouvez maintenant passer à l’onglet Thème

9) Le design est plus détaillé qu’auparavant. Cette page est très intuitive et l’émulateur permet de se rendre rapidement compte des différentes modifications appliquées, faites vous plaisir puis sauvegardez et rendez-vous dans l’onglet Tiles :

2Theme

10) Cet onglet est particulier. Je vous conseille de cliquer sur le logo de votre application pour y insérer l’icone et la couleur souhaitée avant de paramétrer les tuiles. En cliquant sur votre logo, vous arriverez sur cette page :

3Logo

11) L’onglet Tiles permet de choisir si la tuile doit être dynamique, fixe, afficher des informations relatives aux données récupérées etc. C’est une réelle avancée vis à vis des anciennes versions de l’AppStudio. Ainsi vous choisissez si la tuile doit être live ou non, dynamique ou statique, depuis quelle section elle doit s’alimenter en data et le type de tuile. A nouveau, la prévisualisation vous permet de voir en un coup d’oeil le rendu de vos modifications :

4Tiles

Définissez vos paramètres, sauvegardez puis rendez-vous dans l’onglet « Settings ». Votre application est presque terminée !

12) Cet onglet vous permet de définir les différentes informations concernant votre application. Si vous avez déja prévu de publier l’application dans le store via le Dev Center, vous pouvez déja renseigner les informations de package etc. Ne remplissez que ce que vous connaissez, sauvegardez puis cliquez sur Finish.

13) Vous y êtes ! Votre application est prête à être générée. L’émulateur vous permet de prévisualiser le rendu sur les différents supports, UWP oblige 🙂 . Vous avez toujours l’occasion de retourner en arrière pour effectuer quelques modifications. Si Tout vous convient, alors cliquez sur « Generate » !

14) Comme toujours, l’appstudio vous permettra de récupérer les sources de l’app. Chose différente pour ma part, alors qu’auparavant il me manquait toujours des includes et dépendances, je n’ai plus aucun soucis dorénavant. Si vous disposez de Visual Studio et des derniers SDK, je vous conseille de télécharger les sources et de compiler le projet pour l’exécuter sur votre PC Windows 10 ou votre Smartphone W10 Mobile :

5App

15)
Si vos informations de publication de l’application ont déja été renseignées dans l’onglet « Settings », alors récupérez le package « installable » et uploadez le fichier sur le Dev Center directement (pour les connaisseurs).

Laisser un commentaire