Application mobile: Créez votre première application pour iOS et Android avec Xamarin et Visual Studio

Commençons ensemble notre voyage pour créer de belles applications multiplateformes natives 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 Fichier -> Nouveau pour Xamarin. Si vous êtes un apprenant plus visuel, j’ai une vidéo complète que vous pouvez regarder :

Jetons d’abord quelques bases en répondant à quelques questions fréquentes.

Qu’est-ce que .NET ?
.NET est un runtime multiplateforme, hautes performances et open source utilisé avec plusieurs langages, éditeurs et bibliothèques qui permet de créer des applications pour le Web, les mobiles, les ordinateurs de bureau, les jeux, etc. C’est la base qui permet au code d’être exécuté sur différentes plates-formes 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 dispose d’une série de frameworks conçus pour lui qui permettent des scénarios uniques pour les développeurs pour des plates-formes spécifiques. Par exemple, ASP.NET Core et Blazor sont des frameworks conçus 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 framework 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 accéder 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 applications avec Xamarin, mais je suis un développeur C# et c’est le langage principal pour le développement d’applications. 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 créer une interface utilisateur avec Xamarin. XAML est utilisé depuis longtemps pour créer des applications Windows avec WPF et UWP et possède d’excellentes fonctionnalités, notamment un balisage facile à lire, la technologie de rechargement à chaud et une liaison de données avancée pour faciliter le développement de l’interface utilisateur.

Quels outils puis-je utiliser ?
.NET permet aux développeurs d’utiliser une large gamme d’outils, notamment une ligne de commande, des éditeurs de code tels que Visual Studio Code et des IDE complets (environnement de développement intégré) 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 de toutes les fonctionnalités pour créer des applications.

Alors, commençons à créer nos premières applications mobiles avec Xamarin !

Installation de Visual Studio pour le développement mobile

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

Lors de l’installation de Visual Studio 2019 sur Windows, il vous suffit de sélectionner le Développement mobile avec .NET charge de travail:
Programme d'installation de Visaul Studio 2019 avec Xamarin vérifié

Sur Visual Studio 2019 pour Mac, vous pouvez choisir d’installer Android et iOS.
Visual Studio 2019 pour Mac Installer avec Android et iOS coché

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

Après cela, vous êtes 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 Visual Studio 2019 et Xamarin sont installés, mettons-nous au travail ! Lorsque vous lancez Visual Studio 2019, vous aurez la possibilité de créer un nouveau projet. Sous Windows, vous pouvez rechercher Xamarin.Forms ou utilisez le filtre des types de projets et sélectionnez Mobile. Nous voudrons sélectionner Application mobile (Xamarin.Forms).

Boîte de dialogue Nouveau projet avec application mobile sélectionnée

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

nouvelle sélection de modèle de projet pour le menu volant, à onglets et vide

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

Flyout, tabulation et vide

Flyout et onglets les modèles d’application sont basés sur la dernière technologie Xamarin.Forms appelée Coquille. Il permet un échafaudage plus rapide des applications 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 souhaitez un menu déroulant ou des onglets inférieurs pour la base de votre application.

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

Allons avec Envoler! Je veux que nous commencions ici car la plupart des tutoriels ne passent pas Coquille et pour moi, c’est l’avenir du développement d’applications Xamarin. Ce modèle contient beaucoup de choses, donc dans les prochains articles, nous passerons en revue chaque section, mais pour aujourd’hui, nous allons simplement créer le projet et passer en revue ce qu’est un Coquille est.

Si vous êtes sur Visual Studio 2019 pour Mac, vous voudrez sélectionner Multiplateforme > Application > Application Flyout Forms

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.

Solution avec 3 projets dont le code partagé, iOS et Android

Voyons ce qu’il y a 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é entre différents systèmes d’exploitation. Ce projet est l’endroit où nous écrirons la plupart de notre code.

Projets iOS et Android sont le projet « chef » ou « parent » qui est utilisé pour héberger le code, les paramètres, les actifs, etc. spécifiques à la plate-forme. 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 éléments spécifiques à iOS ou Android qui ne sont pas disponibles sur plusieurs plates-formes. À un moment donné, vous devrez vous lancer dans ces projets et peaufiner les choses, mais pour l’instant, nous resterons dans le projet multiplateforme.

Interface utilisateur multiplateforme Xamarin.Forms

Dans notre projet .NET Standard multiplateforme, nous trouverons un peu de code pour notre application. Ce modèle présente un exemple d’application contenant une liste d’éléments et une page à propos. Les éléments sont organisés en dossiers :

  • Des modèles: Ce sont des classes qui représentent des données dans vos applications telles que Personne, Voiture, Chien, Chat, etc. Dans cette application, nous avons un modèle unique appelé Article.
  • Prestations de service: À l’intérieur de ce dossier se trouve l’endroit où vous placeriez le code qui accède à des éléments non liés à l’interface utilisateur tels que les appels de service Web, les bases de données, etc. Dans le projet d’une manière simple MockDataStore qui est utilisé pour stocker des éléments en mémoire.
  • Vues: C’est ici que notre XAML les fichiers de l’interface utilisateur vivront !
  • Voir les modèles: Dans ce dossier, vous trouverez des fichiers qui correspondent à près de 1:1 au Vues dossier. C’est parce que chaque Vue a un VoirModèle qui est lié que Xamarin.Forms peut relier les deux ensemble afin que la vue puisse afficher des informations ou appeler des méthodes dans chaque ViewModel.

Regardons le À proposPage.xaml qui est la première page que nous verrons lorsque nous lancerons l’application. Ici, nous voyons quelques choses, d’abord est l’élément de niveau supérieur Contenu de la page:


Voici quelques-uns xmlns balises qui représentent l’emplacement du code spécifique. La valeur par défaut et X sont inclus dans chaque fichier et sont destinés aux fonctionnalités de base. Les xmlns:vm tag nous permet d’accéder à notre propre code à partir de XAML, ce que nous verrons dans un instant. Les x:Classe est une référence à l’espace de noms et au nom de la page, cela correspond au code derrière. Enfin, il existe un Titre propriété qui est lié aux données à une propriété appelée Titre dans notre ViewModel.

Nous pouvons définir des propriétés supplémentaires telles que le Contexte de liaison et des ressources avec du contenu XAML. Ici, nous allons l’utiliser xmlns:vm balise pour définir le Contexte de liaison à une nouvelle instance de la À propos du modèle d’affichage:


    

Ensuite, c’est un Couleur ressource 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. Ceci est similaire d’une manière à CSS dans le développement Web.


    
        #96d1ff
    

Nous pouvons ajouter plus de choses aux ressources, notamment des chaînes, des styles, etc.

Enfin, chaque Page peut avoir une contrôle de l’élément racine. C’est normalement un Disposition tel que StackLayout, ScrollView, ou un Grille comme nous avons ici. La grille est un contrôle génial qui a des lignes et des colonnes. Nous n’entrerons pas dans les détails des mises en page, mais celle-ci affiche une image, du texte et un bouton sur lequel vous pouvez cliquer pour ouvrir un navigateur Web.

Noter la {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 l’ensemble de l’application.

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

Boîte à outils Xamarin.Forms dans Visual Studio

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

Volet de propriétés dans Visual Studio affichant les propriétés d'un bouton

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

AboutPage avec liste déroulante en surbrillance dans le volet projet

Si vous l’ouvrez, vous verrez que c’est très simple car pour cette vue, aucun événement spécial n’est nécessaire pour le moment.

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

Interaction utilisateur et modèles de vue

Maintenant, parlons de la VoirModèle pour cette page qui a été créée dans le XAML. Ouvrez le Voir les modèles -> À propos deViewModel.cs fichier 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; }
}

Il s’agit d’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 à Sur puis crée un nouveau Commander qui appelle Browser.OpenAsync pour ouvrir un navigateur Web sur la page.

Cette Command est quelque chose de spécial. contrairement à Title qui est une 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 existe un public Commande dans notre ViewModel qui a du code à exécuter lorsque l’utilisateur clique sur le bouton. Dans ce cas, nous souhaitons ouvrir le navigateur, qui est l’une des nombreuses fonctionnalités natives disponibles à partir de Xamarin.Essentials. Appel Browser.OpenAsync lancera le navigateur spécifique pour iOS et Android avec une seule ligne de code.

Changements 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 qu’Android est le projet par défaut et le bouton de débogage sera disponible et affichera vos émulateurs Android disponibles. Lorsque vous cliquez sur le bouton de débogage, si vous n’avez pas d’émulateur, il vous sera demandé d’en créer un.

Menu de débogage Android dans Visaul Studio

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

Application lancée avec le rechargement à chaud activé

Ouvrons le AboutPage.xaml et modifions le Accent couleur à une couleur différente. Ici, je vais le mettre à jour vers Orange et je vais frapper enregistrer pour voir les changements.

Android et XAML Hot Reload changer une couleur d'arrière-plan

À 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 un redémarrage à chaud

Déployons iOS ! Faites un clic droit sur le projet iOS et sélectionnez Définir comme projet de démarrage:

Définir iOS comme projet de démarrage dans les propriétés du projet

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

  • Simulateur à distance iOS : si vous avez une machine macOS, vous pouvez installer Visual Studio 2019 pour Mac et Xcode et vous y connecter à partir de votre machine Windows pour l’utiliser comme machine de construction à distance. Le simulateur iOS peut alors être lancé depuis l’affichage sur votre machine Windows, ce qui est très cool !
  • Redémarrage à chaud iOS : il s’agit d’une nouvelle technologie d’aperçu qui vous permet de déployer une version de débogage de votre application directement sur votre appareil iOS connecté à votre ordinateur Windows. C’est très bien si vous n’avez pas de mac et que vous souhaitez déboguer votre application et utiliser des fonctionnalités impressionnantes telles que XAML Hot Reload.

En fonction de votre configuration et de l’équipement disponible, il existe une excellente option pour commencer à déboguer votre application iOS à partir de Windows. Lisez la documentation à laquelle j’ai lié pour un guide d’installation complet.

Comprendre l’application et le shell

La dernière chose dont je veux parler, c’est de ce qu’il y a dans notre *Application et qu’y a-t-il dans notre Coquille:

Texte alternatif

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

Les AppShell.xaml abrite le Coquille de notre structure d’application. Il comprend des styles et des couleurs pour notre shell d’application, puis contient des éléments supplémentaires pour les onglets, les menus volants et les pages qui sont affichés. Ici, nous allons trouver deux FlyoutItem éléments qui représentent le AboutPage et le BrowsePage. De plus, il a un MenuItem pour afficher un bouton de connexion/déconnexion. Les ShellContent a une liaison avec notre page que nous avons créée et automatiquement les pages apparaîtront et navigueront vers chacune d’entre elles lorsqu’elles seront sélectionnées.

Menu déroulant sur Android

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

Apprendre encore plus

Il y a beaucoup à apprendre, mais beaucoup de ressources incroyables pour vous aider à créer des applications avec Xamarin. Voici une excellente liste à parcourir :

#Créez #votre #première #application #pour #iOS #Android #avec #Xamarin #Visual #Studio