Creation d’une application Mobile avec le Framework Microsoft Xamarin:Une calculette avec c# et Xamarin Form

Dans cet article, nous allons à l’avventure de Xamarin Form et c# et nous poursuivons la conception de notre fameuse “Calculette” cette fois ci avec c# et son framework Xamarin Form. Le code source de cette application est disponible sur mon account github ici (https://github.com/Defcoq/ITINNOvDesignCalculetteXamarin)

Dans la version precedente (https://jpdeffo.medium.com/creation-pas-%C3%A0-pas-dune-application-mobile-avec-le-framework-flutter-une-calculette-simple-en-589050fab804), nous avons utilisé Flutter qui comme vous le savez dejà, compile les composantes graphiques fait en language Dart in JIT(Just in time compilation) en composante native de android ou de ios ou en composante web. Ce n’est pas le seul framework capable de faire ce type de boulot, bien avant lui, il y a eut Microsoft Xamarin qui est basé sur un environement d’execution qu’on appelle “Mono”, en fait avec le runtime de Mono, on peut executer du code c# dans n’importe quelle plateforme (windows, android, ios, mac, linux etc..). Pour la petite histoire, Microsoft est completement passé de not jours avec sa plateforme dotnet core à une solution multiplateforme donc l’idée est de pouvoir developper en c# et le porter dans n’importe quel system d’exploitation, j’ai d’ailleur écrit dans ce meme canale un excellent article (en anglais) sur le processus de compilation du code c# et je vous demande de prendre la peine de lire c’est simple et assez explicatif (https://jpdeffo.medium.com/how-dotnet-core-compilation-work-for-absolute-beginners-fdba62b3167c).

Pour developper avec le framework Xamarin- vous devez installer visul studio 2019 et activer le module pour le developpement mobile, d’ailleur dans les partie 0 et 1 de notre proget les “GueMeMens”, je decris tout ce qu’il faut pour developper dans les plateformes Microsoft (https://jpdeffo.medium.com/partie-4-demystifions-ensemble-le-developement-des-logiciels-en-partant-de-zero-en-route-%C3%A0-la-c11f02e41843)

Telecharger visual studio code la version community ici (https://visualstudio.microsoft.com/fr/vs/community/)

Verifier que dans votre visual studio installer vous ayez “Cochez” la case pour le developpement des applications mobiles (mon system d’exploitation est en italien, mais mon visual studio est en anglais vous pouvez changer et passez aussi à l’anglais car comme je vous l’ai toujours dit, il est preferable de travailler avec un environement en anglais)

Lancez visual studio 2019 et creer un nouveau proget comme en image

Choisissez comem moi en image le template “Xamarin Form”

Dans la fenetre successive, choisissez “Blank solution ” puis accepter et cliquer sur “Create” (vous pouvez explorer plutart les autres types de template vous meme, ici je veux juste faire une solution vierge et faire la demo de la calculette), comme vous voyez dans l’image ci dessus, mon application s’appelle “ITInnovDesignCalculetteXamarin”

L’interface de visual studio vous presente 3 progets comme dans l’image suivante:

Xamarin Form c’est la solution Microsoft pour créer une interface utilisateur(UI) unique soit pour android que pour ios, en fait Xamarin utilise le langage de formatation appellé Xaml qui n’est rien d’autre que du Xml structuré pour definir l’interface utilisateur, de la meme manière qu’ en flutter on utilise le langage Dart pour créer l’interface graphique.

Le fichier d’entrée principale de l’application en Xamarin c’est le fichier “App.xaml” et qui en fait lance la vue “MainPage.xaml”, en fait les vues dans Xamarin sont fait d’une partie graphique qui est du Xml appelle Xaml et du code c# derrière, par exemple App.xaml à son c# App.cs, donc la partie graphique on le definit avec un XMl structuré dans les fichiers .xaml et pour gerer les évenement on éecrit du code c# dans les fichiers .cs associé à ces .xaml exactement comme en HTML ou on associe du javascript pour manipuler les élements du HTML.

Avant de commencer, nous allons utiliser une librairie qui nous aidera à faire les calculs mathematiques. Eh oui, on doit toujours chercher à écritre moins du code, si quelqun a dejà fait une chose qui fonctionne et met à notre disposition, nous devons l’utiliser. pour retrouver des libraries dans visual studio, on utilise “Nuget” qui est un repertoire online ou les developpeurs comme vous mettent des librairies qu’ils ont fait et partage avec les autres developpeurs pour simplifier certaines taches, la librairie qu’on doit utiliser ici s’appelle “AngouriMath”, fait un clique droit sur le premier proget dans la solution comme en image et cliquer sur “Manage Nuget package (Gestion des paquets nuget)”

Ensuite dans la languette “Browse”, recherche “AngouriMath” et installer le

Nous allons donc faire notre calculette dans le fichier “MainPage.xaml” et “MainPage.cs”, le premier va contenir l’xml Xaml pour definir les boutons de la calculette et le deuxieme va contenir le code c# pour implementer la logique pour les calculs, allons y, remplacer le contenu de votre MainPage.xaml par le code suivant:

Je ne vais pas me mettre dans cet article à expliquer l’xml du Xaml, mais c’est assez comprehensif, Xaml comme le HTML a ses propres structure XML qu’il faut apprendre, le but recherche ici est juste de vous faire voir pas à pas comment on developpe une app avec Xamarin, on pourra revenir sur un autre article detaillé ou on va decrire pièce par pièce ce que fait chaque bout de code, mais dejà vous pouvez vous faire votre propre idée car ici on fait du pas à pas pour comprendre ce qu’il faut faire pour avoir une app qui fonctionne.

Remplacer le contenu de MainPage.cs par le code suivant

Nous pouvons à present compiler l’application en faisant un clique droit sur le proget “ITINNovDesinCalculetteXamarin” et cliquer successivement sur Build

Une fois l’application compilée avec succès, nous allons le lancer sur notre telephone android, comme dans les articles précedant, connecté votre telephone par cable USB à l’ordinateur (si vous avez suivit les autres articles connectés a celui ci, vous avez dejà la SDK de andoid dans votre ordinateur et tout devrait marcher à la perfection)

dans la barre en haut (la toolbox de visual studio), vous devez etre capable de voir votre modele de telephone comme moi en image (j’ai un samsung SM-J250y):

Cliquer dessus et voilà… la app sera lance sur votre telephone.

Le code source de cette application est disponible sur mon account github ici (https://github.com/Defcoq/ITINNOvDesignCalculetteXamarin)

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: