Xamarin par l’exemple : “Metsys Music Search” 1/3

Il y a plus de 2 ans, Microsoft annonçait le rachat de Xamarin. Aujourd’hui, le résultat de cette alliance aboutit à une large gamme d’outils rendant le développement “Cross-Platform” plus rapide et plus facile pour les développeurs.

1. Introduction : qu’est-ce que Xamarin ?

Xamarin est une plateforme de développement d’application mobile permettant la création d’applications natives et multiplateformes (iOS, Android et Windows) à partir d’une base de code commune C#/.NET. Celle-ci permet de réutiliser de 75 à presque 100 % du code entre les plateformes. Les applications écrites avec Xamarin et C# ont un accès complet aux API de la plateforme sous-jacente, et permettent de créer des interfaces utilisateurs natives et de compiler en mode natif. L’impact sur les performances de l’exécution est donc faible. Cette réutilisabilité est encore plus vraie avec Xamarin Forms qui permet de mutualiser les interfaces utilisateurs à partir d’une base commune XAML.

2. RoadMap

Quoi de mieux qu’une démonstration pour présenter rapidement les possibilités de Xamarin? Dans cet article, nous allons créer un projet permettant de chercher des artistes de musique. Nous pourrons ainsi lister et écouter des extraits de leurs albums. Cette application sera utilisable sur iOS, Android et Windows :

3. Création du projet

Avec Visual Studio, créez un nouveau projet de type “Cross-Platform” :

Vérifiez que toutes les plateformes (Android, iOS et Windows(UWP)) sont sélectionnées et choisissez “.NET Standard” :

3.1 Architecture du projet

La solution se compose de 4 projets : le “noyau” du projet (c’est lui qui va mutualiser le code et les interfaces utilisateurs), la partie Android, la partie iOS et celle pour Windows 10 (UWP) :

Dans le projet “noyau” créez une structure de répertoire comme ci-dessous afin d’organiser nos futures sources (et supprimez le fichier MainPage.xaml) :

3.2 Création des classes “Business”, “Converters” et “Extensions”

Créez un nouveau fichier “Deezer.cs”. Ce fichier contiendra toutes les classes nécessaires à l’alimentation des vues :

Créez une classe “DataService.cs”. Cette classe est une sorte de proxy qui permettra de déserialiser les contenus venant des appels web :

Pour que cette classe fonctionne, ajoutez les composants “nuget” suivants :

Enfin, ajoutez la classe “Core.cs” qui permettra d’utiliser l’Api de “Deezer” pour nos requêtes de recherche :

Pour que cette classe fonctionne, ajoutez les composants “nuget” suivants :

Rajoutez les deux classes ci-dessous dans le répertoire “Converter”. Ces deux classes vont permettre de gérer les affichages entre les vues et les modèles :

Enfin, rajoutez le fichier “ImageResourceExtension.cs” dans le répertoire Extensions. Il nous permettra d’éviter de rajouter les fichiers ressources (images par exemple) à tous nos projets (iOS, Android et Windows10(UWP)) mais de n’utiliser que celle du noyau (très pratique) :

3.3 Création de la vue “HomeView”

Dans le répertoire Views, ajoutez un nouvel élément de type Xamarin.Forms ->Page de contenu (attention à ne pas sélectionner Page de contenu(C#)):

Remplacez le code XAML existant par celui ci-dessous :

N’oubliez pas de rajouter le namespace “extensions” et “converter”. Il est possible que vous ne soyez pas avec la dernière version “nuget” des ‘Xamarins.Forms” (cela dépend de votre version de Visual Studio), aussi, vous pouvez les mettre à jour comme suit pour l’ensemble des 4 projets :

Rajoutez le code-behind dans la classe “HomeView.xaml.cs” :

Et enfin, rajoutez dans le répertoire “Resources” les éléments ci-dessous sans oublier d’assigner leur propriété “Action de génération” à “Ressource incorporée” :

Fichiers ressources : fondbanner, deezer et logoMetsys

4. Exécution du projet :

Il ne reste plus qu’à faire pointer l’application sur cette nouvelle vue créée en changeant le fichier “App.xaml.cs” comme suit :

L’application est prête à être testée sur toutes les plateformes (Windows10 (UWP), Android et iOS) :

    

 

About the Author

François BOTTE

Architecte Technique .Net

No Comments

Laisser un commentaire

This blog is kept spam free by WP-SpamFree.