Dot.Blog

Un simple croquis qui devient code Xamarin ou UWP ? Oui c’est possible ! Comment ? …

De l’idée à la réalisation

Imaginez que vous venez d'être illuminé par l'inspiration pour votre prochaine application. Vous allez certainement commencer par prendre des notes et esquisser des écrans sur un bout de papier. Mais au lieu de vous saisir d’un carnet de croquis, d’aller noircir un tableau blanc ou même d’écrire sur le le dos d'une serviette de table, pensez plutôt à prendre votre ordinateur et à installer Ink to Code !

Ink to Code est un projet de Microsoft Garage. En quelque sorte c’est la version numérique du dos d'une serviette pour vos idées d'applications. C’est une application Windows 10 qui se lance en quelques secondes et fournit un canevas pour que vous puissiez dessiner des écrans avec votre stylet. Voyons cela de plus près !

Mise en place

La première chose à faire est d'installer Ink to Code à partir du Microsoft Store. Lors de son lancement vous serez accueilli par son interface utilisateur minimaliste et sa grande surface de dessin. Pour savoir quoi dessiner, cliquez sur le bouton Guide dans la barre d'outils. Ceci vous montre les différents éléments de conception que Ink to Code reconnaît :

Dessiner votre application

Imaginons que votre géniale inspiration vous guide vers la prochaine calculatrice de pourboire pour la marché américain. Voici comment vous pourriez la dessiner en quelques secondes avec Ink To Code :

***

Au fur et à mesure que vous dessinez chaque élément de conception, vous remarquerez que Ink to Code convertit les traits d'encre en composants reconnus. En tapotant sur chacun de ces éléments, un menu vous permet de les supprimer ou, s'ils ont été mal reconnus, de les convertir en différents composants. Vous remarquerez également qu'en appuyant sur le deuxième bouton de la barre d'outils de gauche, vous passez en mode contrainte, où vous pouvez dessiner des lignes de contrainte qui peuvent être utilisées pour aligner d'autres éléments.

Comment fonctionne cette magie ? En interne, Ink to Code utilise la puissance de la plate-forme Windows Ink et certaines de ses propres heuristiques pour reconnaître les éléments de conception communs dans vos esquisses d'application et les convertir ensuite en UWP XAML ou en XML de mise en page Android qui peuvent être chargés directement dans Visual Studio.

Exportation vers Visual Studio

Ink to Code est idéal pour esquisser rapidement les grandes lignes de votre idée d'application, mais pour commencer à l'affiner en prototype, vous voudrez exporter vos dessins vers Visual Studio. Pour cet exercice, nous allons construire une application Xamarin.Android :

Cliquez sur le bouton Exporter dans la barre d'outils Encre vers code et choisissez Android dans le menu. Ensuite, choisissez un répertoire temporaire dans lequel exporter le fichier XML de mise en page.

Ouvrez ensuite Visual Studio 2017 et créez un nouveau projet d'application Android vierge.

Si vous ne trouvez pas le modèle de projet, assurez-vous d'avoir Xamarin installé. Vous pouvez également utiliser Visual Studio pour Mac et vous assurer qu'Android est sélectionné pendant l'installation.

Trouvez “Main.axml“ dans votre projet Android sous le chemin “Ressources\layout” et remplacez-le par le fichier que vous avez exporté lors de la première étape.

Ink to Code utilise “ConstraintLayout” dans son XML Android exporté, vous devrez donc ajouter le paquet Nuget Android.Support.Constraint.Constraint.Layout à votre projet.

Cliquez sur Exécuter, et vous devriez voir l'écran que vous avez esquissé lancer dans un émulateur Android comme de véritables widgets Android interactifs !

Vous voudrez probablement continuer à affiner votre mise en page dans Visual Studio après l'exportation vers ce dernier. Pour ce faire, double-cliquez simplement sur le fichier Main.axml et le Xamarin Android Designer s'ouvrira, ce qui est la manœuvre usuelle qui n’a rien de particulier.

Libérez votre créativité !

Maintenant que vous avez une idée de la façon dont vous pouvez utiliser Ink to Code pour esquisser rapidement votre prochaines applications, il est temps de laisser libre cours à votre imagination ! Ink to Code est un projet de Microsoft Garage, ce qui signifie qu'il s'agit d'une expérience et que vos retours seront essentiels pour façonner son avenir. N’hésitez pas à faire des remontées à l’équipe.

Installez et Essayez Ink to Code, esquisser votre prochaine grande idée d'application et dites à l’équipe MS Garage ce que vous en pensez !

Conclusion

Ink to Code dévoile ce que sera la programmation dans 10 ou 20 ans. Adossée sur de l’IA, des systèmes de reconnaissance de formes, le développeur donnera ses idées à l’ordinateur sous la forme de croquis, de phrases. Le plus gros et le plus fastidieux sera alors fait par l’ordinateur lui-même et le développeur pourra alors se concentrer sur son vrai métier, affiner le code, le personnaliser, le rendre fonctionnel.

Je doute que M. Tout-le-monde devienne informaticien grâce à de telles avancées. Car l’informatique se complexifie tous les jours un peu plus et qu’il faut une tournure d’esprit, des connaissances et une expérience typiquement humaine pour faire un bon soft. Mais il est possible que pour les petites Apps sans grandes prétentions l’utilisateur soit capable de les fabriquer. Est-ce-que le fait que votre femme (ou mec) sache faire une omelette au champignon a signé la mort des grands chefs étoilés ? Non bien sûr.

Bon sketching et …

Stay Tuned !