Free Press

Débutons notre voyage ensemble pour construire de belles applications natives multiplateformes avec .NET, Xamarin et Visual Studio ! Dans ce blog, je vais vous guider tout au long du processus et décrire tout ce qui se trouve dans File -> New for Xamarin. Si vous êtes un apprenant plus visuel, j’ai une vidéo complète que vous pouvez regarder :

Préparons d’abord les bases en répondant à quelques questions fréquentes.

Qu’est-ce que .NET ?
.NET est un runtime multiplateforme, très performant et open-source qui est utilisé avec plusieurs langages, éditeurs et bibliothèques qui permettent de construire des apps pour le web, le mobile, le bureau, les jeux, et plus encore. C’est la base qui permet au code d’être exécuté sur différentes plateformes telles que iOS, Android et Windows. Si vous êtes un développeur web, c’est comme le runtime V8 qui exécute JavaScript ou si vous êtes un développeur Java, la JVM qui exécute Java.

Qu’est-ce que Xamarin?
.NET a une série de frameworks qui sont construits pour lui et qui permettent des scénarios uniques pour le développeur pour des plateformes spécifiques. Par exemple, ASP.NET Core et Blazor sont des frameworks construits pour .NET pour le développement web. WPF et UWP sont des frameworks conçus pour .NET pour le développement de bureau. Xamarin est un cadre et des outils qui permettent de créer des applications pour iOS, Android et macOS. Il contient également plusieurs bibliothèques qui permettent le développement multiplateforme sur iOS, Android, macOS et Windows, notamment Xamarin.Forms pour l’interface utilisateur multiplateforme et Xamarin.Essentials pour l’accès aux fonctionnalités de la plateforme native multiplateforme.

Quels langages de programmation puis-je utiliser ?
.NET prend en charge plusieurs langages, notamment C#, F# et Visual Basic. Vous pouvez utiliser n’importe lequel de ces langages de programmation pour créer des apps avec Xamarin, cependant je suis un développeur C#, et c’est le langage principal pour le développement d’apps. Cependant, il existe des frameworks fantastiques pour F# tels que Fabulous pour le développement fonctionnel.

XAML est un autre « langage » qui sera utilisé pour construire l’interface utilisateur avec Xamarin. XAML est utilisé depuis longtemps pour construire des applications Windows avec WPF et UWP et possède des fonctionnalités intéressantes, notamment un balisage facile à lire, la technologie Hot Reload et la liaison de données avancée pour faire du développement de l’interface utilisateur un jeu d’enfant.

Quels outils puis-je utiliser ?
.NET permet aux développeurs d’utiliser une large gamme d’outils, notamment la ligne de commande, des éditeurs de code tels que Visual Studio Code et des IDE (Integrated Development Environment) complets avec Visual Studio 2019 et Visual Studio 2019 pour Mac. Pour développer des applications mobiles avec Xamarin, nous devrons utiliser Visual Studio 2019 ou Visual Studio 2019 pour Mac, car ils disposent des fonctionnalités complètes pour construire des applications.

Alors, commençons à construire nos premières applications mobiles avec Xamarin !

Installation de Visual Studio pour le développement mobile

La première étape de votre voyage multiplateforme consiste à installer Visual Studio 2019 pour Windows ou Visual Studio 2019 pour Mac.

Lors de l’installation de Visual Studio 2019 sur Windows, tout ce que vous devez faire est de sélectionner le développement mobile avec .NET :

Sur Visual Studio 2019 pour Mac, vous pouvez sélectionner d’installer Android et iOS.

Si vous faites du développement iOS, vous devrez également installer Xcode sur votre machine macOS.

Après cela, vous êtes fin prêt pour le développement mobile !

Lorsque vous créez et exécutez un projet Android, vous pouvez être invité à installer des SDK Android supplémentaires et à créer des émulateurs Android.

Création de votre projet

Maintenant que nous avons Visual Studio 2019 et Xamarin installés, mettons-nous au travail ! Lorsque vous lancez Visual Studio 2019, vous aurez une option pour créer un nouveau projet. Sur Windows, vous pouvez rechercher Xamarin.Forms ou utiliser le filtre des types de projet et sélectionner Mobile. Nous voudrons sélectionner Mobile App (Xamarin.Forms).

Lorsque vous sélectionnez ce nouveau projet, vous verrez une nouvelle boîte de dialogue demandant quel type de modèle pour l’application que vous souhaitez utiliser :

Nous avons quelques options à sélectionner en fonction du type d’application que nous voulons construire.

Flyout, Tabbed, &Blank

Flyout &Les modèles d’application Tabbed sont basés sur la dernière technologie Xamarin.Forms appelée Shell. Elle permet un échafaudage plus rapide des apps et offre des fonctionnalités uniques telles que la navigation basée sur les URL. Ces modèles sont similaires avec une différence principale si vous voulez un menu volant ou des onglets inférieurs pour la base de votre app.

Blank app est juste cela et offre un modèle assez simple avec une seule page et rien d’autre.

Allons-y avec Flyout ! Je veux que nous commencions ici car la plupart des tutoriels ne passent pas par Shell et pour moi, c’est l’avenir du développement d’applications Xamarin. Ce modèle a beaucoup en est donc dans de futurs posts nous passerons par chaque section, mais pour aujourd’hui nous allons juste créer le projet et passer par ce qu’est un Shell.

Si vous êtes sur Visual Studio 2019 pour Mac vous voudrez sélectionner Multiplatform > App > Flyout Forms App

Qu’y a-t-il dans le projet ?

Maintenant que le projet d’application a été créé, vous verrez plusieurs projets à l’intérieur d’une seule solution.

Passons en revue ce qui se trouve ici dans notre nouvelle solution:

Le premier projet contient plusieurs dossiers, fichiers de code et fichiers d’interface utilisateur. Ce projet est un projet .NET Standard qui nous permet d’avoir un seul projet qui peut être partagé sur différents systèmes d’exploitation. C’est dans ce projet que nous écrirons la plupart de notre code.

iOS &Les projets Android sont la « tête » ou le projet « parent » qui est utilisé pour abriter le code spécifique à la plateforme, les paramètres, les actifs, et plus encore. C’est ici que vous voudrez configurer différents paramètres tels que le nom d’affichage, l’icône de l’application, les numéros de version et tout code nécessaire pour les choses spécifiques à iOS ou Android qui ne sont pas disponibles sur plusieurs plates-formes. À un moment donné, vous aurez besoin d’aller dans ces projets et de modifier les choses, mais pour l’instant, nous allons rester dans le projet multiplateforme.

Xamarin.Forms Cross-Platform UI

À l’intérieur de notre projet .NET Standard multiplateforme, nous allons trouver un peu de code pour notre application. Ce modèle montre un exemple d’app qui a une liste d’articles et une page à propos. Les éléments sont organisés en dossiers :

• Modèles : Ce sont des classes qui représentent les données dans vos apps telles que Personne, Voiture, Chien, Chat, etc. Dans cette application, nous avons un seul modèle appelé Item.
• Services : À l’intérieur de ce dossier est l’endroit où vous mettriez le code qui accède aux choses non liées à l’interface utilisateur comme les appels de services Web, les bases de données, etc. Dans le projet dans un simple MockDataStore qui est utilisé pour stocker les éléments en mémoire.
• Vues : C’est là que vivront nos fichiers d’interface utilisateur XAML!
• ViewModels : Dans ce dossier, vous trouverez des fichiers qui correspondent presque 1:1 au dossier Views. C’est parce que chaque vue a un ViewModel qui est lié que Xamarin.Forms peut faire le pont entre les deux afin que la vue puisse afficher des informations ou appeler des méthodes dans chaque ViewModel.

Regardons la AboutPage.xaml qui est la première page que nous verrons lorsque nous lancerons l’application. Ici, nous voyons plusieurs choses, tout d’abord l’élément de haut niveau ContentPage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyAwesomeApp.Views.AboutPage" xmlns:vm="clr-namespace:MyAwesomeApp.ViewModels" Title="{Binding Title}">

Il y a quelques balises xmlns qui représentent où vit le code spécifique. Les balises default et x sont incluses dans chaque fichier et sont destinées aux fonctionnalités de base. La balise xmlns:vm nous permet d’accéder à notre propre code depuis XAML, ce que nous verrons dans un instant. Le x:Class est une référence à l’espace de nom et au nom de la page, ce qui correspond au code derrière. Enfin, il y a une propriété Title qui est liée aux données à une propriété appelée Title dans notre ViewModel.

Nous pouvons définir des propriétés supplémentaires telles que le BindingContext et les ressources avec le contenu XAML. Ici, nous allons utiliser cette balise xmlns:vm pour définir le BindingContext à une nouvelle instance du AboutViewModel:

<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>

Vient ensuite une ressource Color qui peut être utilisée sur la page. Les ressources nous permettent de supprimer le code dupliqué et de créer des paires clé/valeur réutilisables. C’est similaire d’une certaine manière à CSS dans le développement web.

<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>

Nous pouvons ajouter plus de choses aux ressources, y compris des chaînes, des styles, et plus.

Enfin, chaque page peut avoir un contrôle d’élément racine. C’est normalement un Layout tel que StackLayout, ScrollView, ou une grille comme nous avons ici. La grille est un contrôle génial qui comporte des lignes et des colonnes. Nous n’entrerons pas beaucoup dans les détails des layouts, mais celui-ci affiche une image, un peu de texte et un bouton qui peut être cliqué pour ouvrir un navigateur web.

<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />

Notez le {StaticResource Primary}, qui est une référence à une ressource que nous avons définie Accent plus tôt, mais Primary est situé dans notre App.xaml, qui sont des ressources disponibles dans toute l’application.

Pour trouver plus de dispositions et de contrôles, vous pouvez ouvrir la boîte à outils pour voir ce qui est disponible :

Enfin, si vous sélectionnez un contrôle ou une disposition, le volet de propriété vous montrera toutes les différentes propriétés disponibles sur ce contrôle.

Une chose qui est très importante est que chacune de ces pages XAML a du code derrière qui est important pour la vue XAML et a des méthodes spécifiques pour le constructeur et l’événement tel que lorsque les pages sont affichées ou disparaissent. Vous pouvez utiliser la petite flèche vers le bas pour voir le code derrière le fichier .xaml.cs.

Si vous l’ouvrez, vous verrez qu’il est très simple car pour cette vue il n’y a pas d’événements spéciaux qui sont nécessaires pour le moment.

public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}

Interaction de l’utilisateur et ViewModels

Maintenant, parlons du ViewModel pour cette page qui a été créée dans le XAML. Ouvrez le fichier ViewModels -> AboutViewModel.cs en double cliquant dessus.

public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}

C’est un ViewModel étonnamment simple, mais c’est un exemple notable du fonctionnement de la liaison de données. Ici, le ViewModel définit le Titre à propos et crée ensuite une nouvelle commande qui appelle Browser.OpenAsync pour ouvrir un navigateur web sur la page.

Ce Command est quelque chose de spécial. Contrairement à Title qui est un simple string qui sera affiché, le Command est une classe spéciale que nous pouvons utiliser pour dire à notre interface utilisateur de faire quelque chose lorsque l’utilisateur interagit avec elle. Par exemple sur notre Button nous avons vu le code suivant:

Command="{Binding OpenWebCommand}"

Ce code indique à Xamarin.Forms qu’il y a une public Commande dans notre ViewModel qui a du code à exécuter lorsque l’utilisateur clique sur le bouton. Dans ce cas, nous voulons ouvrir le navigateur, qui est l’une des nombreuses fonctionnalités natives disponibles de Xamarin.Essentials. L’appel à Browser.OpenAsync lancera le navigateur spécifique pour iOS et Android avec une seule ligne de code.

Modifications rapides avec XAML Hot Reload

Maintenant, il est temps de lancer notre application. J’aime commencer sur Android car les émulateurs sont disponibles localement sur Windows et macOS. Dans le menu de Visual Studio, vous verrez que Android est le projet par défaut et le bouton de débogage est disponible et montrera vos émulateurs Android disponibles. Lorsque vous cliquez sur le bouton de débogage si vous n’avez pas d’émulateurs, il vous sera demandé d’en créer un.

Lorsque l’application se lancera, elle entrera en mode débogage qui nous permet de définir des points d’arrêt sur notre code pour voir les valeurs, mais aussi d’activer XAML Hot Reload où nous pouvons apporter des modifications à l’interface utilisateur sans avoir à arrêter le débogage.

Ouvrons le AboutPage.xaml et changeons la couleur Accent à une couleur différente. Ici, je vais la mettre à jour en Orange et je vais appuyer sur enregistrer pour voir les changements.

À ce stade, nous pouvons ajouter de nouveaux contrôles, mettre à jour l’interface utilisateur et continuer à travailler sur notre application sur Android.

Déployer sur iOS avec Hot Restart

Déployons iOS ! Faites un clic droit sur le projet iOS et sélectionnez Set as Startup Project :

Sur iOS, les choses sont un peu différentes pour les développeurs. Si vous êtes sur macOS et que vous installez Xcode, vous aurez des simulateurs iOS disponibles. Si c’est votre cas, vous pouvez sélectionner un simulateur et ensuite déboguer votre application. Sur Windows, il n’y a pas de simulateurs iOS 🙁 donc il y a deux façons d’obtenir votre

• iOS Remoted Simulator : Si vous avez une machine macOS, vous pouvez installer Visual Studio 2019 pour Mac et Xcode et vous y connecter depuis votre machine Windows pour l’utiliser comme une machine de construction à distance. Le simulateur iOS peut alors être lancé depuis affiché sur votre machine Windows, ce qui est très cool !
• Redémarrage à chaud d’iOS : Il s’agit d’une nouvelle technologie d’aperçu qui vous permet de déployer une construction de débogage de votre application directement sur votre appareil iOS qui est branché sur votre machine Windows. C’est génial si vous n’avez pas de mac et que vous voulez déboguer votre application et utiliser des fonctionnalités géniales comme XAML Hot Reload.

Selon votre configuration et l’équipement disponible, il existe une excellente option pour vous permettre de commencer à déboguer votre application iOS depuis Windows. Lisez la documentation que j’ai liée pour un guide de configuration complet.

Comprendre l’App et le Shell

La dernière chose dont je veux parler est ce qui est dans notre *App et ce qui est dans notre Shell:

À l’intérieur de notre App.xaml vous trouverez des ressources globales telles que Primary que nous avons utilisé plus tôt sur le bouton, mais aussi des styles tels qu’un style global Button que nous utilisons avec les états quand ils sont activés et désactivés. Si vous ouvrez le code App.xaml.cs derrière, vous aurez la créationg du App qui fixe le MainPage à notre AppShell et a également des événements supplémentaires similaires à notre page, mais pour l’application comme quand elle a commencé, est allée en sommeil (aka arrière-plan), et a repris.

L’AppShell.xaml abrite le Shell de la structure de notre application. Il comprend des styles et des couleurs pour notre shell d’application, puis a des éléments supplémentaires pour les onglets, les flyouts, et les pages qui sont affichées. Nous y trouverons deux éléments FlyoutItem qui représentent le AboutPage et le BrowsePage. En outre, il a un MenuItem pour afficher un bouton de connexion/déconnexion. Le ShellContent a une liaison avec notre page que nous avons créée et automatiquement les pages apparaîtront et navigueront vers chacune d’elles lorsqu’elles seront sélectionnées.

Il y a beaucoup plus à Xamarin.Forms Shell et à la création d’applications avec Xamarin, mais nous espérons que cela vous met sur la voie de départ pour vous lancer dans votre application. Assurez-vous de suivre le compte .NET dev.to pour d’autres entrées dans cette série.

Learn More