Application mobile: Créez une application pour iOS et Android avec Xamarin

Xamarin est une technologie multiplateforme qui permet de créer des applications natives pour Android et iOS en utilisant une seule base de code partagée. Comme d’autres technologies telles que React Native et NativeScript, il permet aux équipes de développement de passer moins de temps à écrire du code pour les deux plates-formes.

Xamarin est open-source (et gratuit). Sous le capot, il utilise Mono (une version du runtime Microsoft .NET), donc les applications Xamarin sont généralement écrites en C #. Vous pouvez créer des applications Xamarin sur Windows à l’aide de Visual Studio ou sur Mac à l’aide de Visual Studio pour Mac. Même si les applications Xamarin ne sont pas écrites en Swift (ou Java), elles ressemblent toujours à de vraies applications natives sur l’appareil.

Dans ce didacticiel, je vais vous montrer comment utiliser Xamarin pour créer une application de base pour iOS et Android, même si vous n’avez jamais fait de développement d’application auparavant!

Configurer Xamarin sur Windows

Passez à la section suivante si vous avez un Mac!

Si vous n’avez pas installé Visual Studio, téléchargez gratuitement l’édition communautaire de Microsoft.

Lorsque vous installez Visual Studio, assurez-vous de choisir le Développement mobile avec .NET charge de travail, qui installe les outils Xamarin dont vous avez besoin:

Installer le développement mobile avec la charge de travail .NET

Si Visual Studio est déjà installé, ouvrez le programme d’installation de Visual Studio pour vous assurer que la charge de travail ci-dessus est sélectionnée.

Une fois ces outils installés, vous êtes prêt à créer un projet Xamarin! Sautez la section suivante.

Configurer Xamarin sur Mac

Si vous avez un Mac, vous devrez installer Visual Studio pour Mac. Suivez les instructions officielles pour installer l’édition communautaire gratuite.

Une fois l’application installée, vous êtes prêt à créer un projet Xamarin!

Formes Xamarin et Xamarin

Le SDK Xamarin de base contient des liaisons d’API pour chaque plate-forme mobile, vous pouvez donc appeler des API Android ou iOS à partir du code C #. Cela vous permet de créer des applications natives en utilisant du code C # partagé, mais vous devez toujours concevoir l’interface utilisateur séparément pour chaque plate-forme.

Xamarin.Forms est une bibliothèque supplémentaire qui permet de construire votre interface utilisateur une fois (en XAML, un langage de balisage pour décrire les dispositions de l’interface utilisateur). Xamarin.Forms effectue ensuite le travail acharné de traduction de votre disposition XAML en éléments d’interface utilisateur appropriés sur la plate-forme cible. Vous pouvez descendre au niveau «inférieur» du SDK Xamarin et interagir avec les API de la plate-forme à tout moment.

La décision d’utiliser Xamarin.Forms dans votre projet dépend de la complexité de votre application. Si vous créez une application qui nécessite une interface utilisateur ultra-personnalisée pour chaque plate-forme ou qui comprend de nombreuses interactions utilisateur complexes (comme un jeu), vous feriez mieux avec la base Xamarin.

Cependant, si vous créez une application simple qui ne nécessite pas beaucoup de fonctionnalités spécifiques à la plate-forme ou une interface utilisateur personnalisée, l’utilisation de Xamarin.Forms signifie que vous pouvez écrire encore moins de code. Les applications de saisie de données, les outils de productivité et les prototypes sont d’excellents candidats. Étant donné que l’objectif de ce didacticiel est de créer une application de démonstration simple, vous utiliserez Xamarin.Forms ici!

Créer un nouveau projet Xamarin.Forms

Dans Visual Studio, choisissez Fichier – Nouveau projet, choisissez le Multiplateforme et choisissez la catégorie Application multiplateforme (Xamarin.Forms) modèle. Nommez le projet HelloWorldApp.

Créer un nouveau projet d'application multiplateforme (Xamarin.Forms)

Ensuite, choisissez le Application vide modèle et les plates-formes pour lesquelles vous souhaitez créer l’application. Choisir Xamarin.Forms comme la technologie UI, et Norme .NET comme stratégie de partage de code:

Choisissez les options de création de projet

Dans Visual Studio pour Mac, choisissez Fichier – Nouvelle solution, choisissez le Multiplateforme – App et choisissez la catégorie Application Formulaires vierges modèle:

Choisissez les options de création de projet

La création du nouveau projet peut prendre quelques minutes. Le modèle d’application vierge crée une solution avec quelques sous-projets:

  • HelloWorldApp: Contient le code XAML et partagé pour chaque projet spécifique à la plate-forme.
  • HelloWorldApp.Android (ou Droid): code spécifique à Android. Pour un projet simple, vous n’aurez pas à changer grand-chose ici.
  • HelloWorldApp.iOS: code spécifique à iOS. Vous n’aurez pas non plus à changer grand-chose ici.

Si vous avez choisi Windows (UWP) comme plate-forme, votre solution contiendra un projet supplémentaire ciblant les appareils Windows.

Dans ce didacticiel, vous n’aurez qu’à modifier le projet de code partagé: HelloWorldApp.

Ajouter une page

Les vues de l’interface utilisateur sont appelées «pages» dans le jargon Xamarin.Forms, et votre application en contient déjà une appelée MainPage (ou HelloWorldAppPage dans Visual Studio pour Mac). Double-cliquez sur le fichier XAML dans l’Explorateur de solutions et remplacez tout dans le tags avec ce balisage:


     x:TypeArguments="Thickness"
            iOS="20, 40, 20, 20"
            Android="20, 20, 20, 20"
            WinPhone="20, 20, 20, 20" />


     VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand"
                Orientation="Vertical"
                Spacing="15">
         Text="Enter your name" />
         x:Name="NameEntry" Text="Jane Doe" />
         x:Name="SayHelloButton"
                Text="Say Hello"
                Clicked="SayHelloButtonOnClicked" />
    

Ce balisage XAML crée une disposition de base contenant les éléments Label, Entry (zone de texte) et Button. Les noms des éléments (spécifiés avec x:Name) sera utilisé pour faire référence à ces éléments plus loin dans le code. Ces éléments XAML sont génériques et ne sont pas encore liés à une plate-forme spécifique. Xamarin.Forms traduira automatiquement les éléments en UIButton ou EditText affiche lorsque votre application s’exécute sur iOS ou Android.

le Clicked l’attribut sur l’élément Button relie l’événement de clic de bouton à un gestionnaire appelé SayHelloButtonClicked, qui n’existe pas encore. Vous écrirez cela ensuite.

Ajouter du code à la page

Chaque fichier XAML est associé à un fichier de code C #, parfois appelé «code-behind». Ouvrez le code de la MainPage.xaml (ou HelloWorldAppPage.xaml) en le développant dans l’Explorateur de solutions et en sélectionnant MainPage.xaml.cs fichier.

Développez MainPage et ouvrez le fichier de code C #

Sous le public MainPage() , ajoutez le nouveau SayHelloButtonClicked méthode:

private async void SayHelloButtonClicked(object sender, EventArgs e)
{
    var name = NameEntry.Text;
    await DisplayAlert("Greeting", $"Hello {name}!", "Howdy");
}

Vous devrez peut-être ajouter la déclaration suivante en haut du fichier:

Parce qu’il est référencé dans le Clicked , cette méthode s’exécutera lorsque le bouton est enfoncé ou tapé sur la page XAML. Tout d’abord, la valeur de la zone de texte est affectée au name variable, puis le DisplayAlert est appelée pour afficher une alerte modale sur l’appareil.

C’est ça! Votre nouvelle application Xamarin est prête à l’emploi. Pour le tester, vous pouvez utiliser un simulateur, ou vous pouvez utiliser Xamarin Live Player pour le tester sur un appareil en direct.

Testez votre application Xamarin sur votre propre appareil

Le moyen le plus rapide (et le plus cool) de tester un projet Xamarin est avec Xamarin Live Player, une petite application que vous pouvez télécharger sur votre propre téléphone ou appareil. Après avoir téléchargé l’application, associez-la à Visual Studio. Ensuite, choisissez Live Player comme cible de l’appareil.

Choisissez Live Player et commencez le débogage

Démarrez le débogage en appuyant sur l’icône de lecture ou choisissez Exécuter – Démarrer le débogage sur Mac. Vous serez invité à scanner un code QR pour associer Visual Studio à votre appareil et Live Player se connectera à votre ordinateur. (S’il se bloque, assurez-vous que votre ordinateur et votre appareil sont sur le même réseau Wi-Fi).

Une fois Live Player connecté, vous pourrez immédiatement commencer à utiliser votre application sur votre appareil! Vous pouvez même apporter des modifications au code dans Visual Studio et Live Player actualisera automatiquement l’application sur votre appareil. Super cool.

Testez votre application Xamarin sur Android

Si l’émulateur Android de Visual Studio est installé, tester la version Android de votre application Xamarin est simple. Dans la barre d’outils Visual Studio, choisissez le HelloWorldApp.Android projetez et choisissez un appareil Android à émuler. Cliquez ensuite sur le bouton de lecture pour démarrer l’émulateur.

L’émulateur Android peut être lent à charger, alors donnez-lui un peu de temps. Si tout se déroule correctement, vous verrez votre application s’exécuter sur Android:

Test sur l'émulateur Android

Testez votre application Xamarin sur iOS

Tester votre application Xamarin sur iOS est un peu plus délicat, car il nécessite un Mac pour fournir le simulateur. (Sauf si vous êtes déjà sur un Mac et que vous utilisez Visual Studio pour Mac, auquel cas, vous êtes prêt à partir!)

Si vous utilisez Windows et que vous avez un Mac à portée de main, suivez les instructions officielles pour configurer l’agent Mac et le connecter à Visual Studio. Ensuite, choisissez le HelloWorld.iOS projet, et basculez l’architecture vers iPhone Simulator. Choisissez une version d’appareil et cliquez sur play.

Après la construction du projet, le simulateur se lancera sur le Mac:

Test sur le simulateur iOS

Prochaines étapes

Ce didacticiel n’égratigne que la surface. Il y a encore beaucoup à faire avec Xamarin!

Voici quelques lectures supplémentaires:

Voulez-vous en savoir plus sur Xamarin? Qu’en est-il des autres piles d’applications multiplateformes comme React Native, NativeScript ou Flutter? Faites le moi savoir dans les commentaires ci-dessous!

#Créez #une #application #pour #iOS #Android #avec #Xamarin