Xamarin Forms permet de créer des applications cross-platform, c’est à dire qui pourront être compilées pour Android, IoS et Universal Windows. Ce tuto d’initiation permet de découvrir l’interface de développement pour créer une petite application qui affiche la météo en renseignant le code postal.
La playlist contient 7 vidéos
Première application : découverte de l’environnement . Il s’agit ici de créer une petite application permettant de changer le texte d’un label en réponse à un “clic” sur un bouton. C’est un peu la version “Hello world ! ” d’une application Xamarin Forms.
Application météo partie 1 : utilisation de l’API openWeatherMap afin de récupérer un jeu de données pour un code postal donné.
Application météo partie2 : Création d’un client web dans l’application puis interrogation de openWeatherMap à l’aide de ce client.
Application météo partie3 : Création d’une classe permettant d’exploiter je fichier json fournit par openWeatherMap.
Application météo partie 4 : Mise en forme de l’interface graphique.
Application météo partie 5 : Finalisation de l’application –
Intégration d’une image représentative de l’état du temps.
Gestion des exceptions.
Application météo partie 5 : Dans cette vidéo on aborde la question du débogage. L’application fonctionne pour un ciblaque d’android 8 mais ne fonctionne plus quand on cible une version d’android 9 et supérieure. On voit donc comment repérer le dysfonctionnement et comment y remédier.
L’objectif est ici de faire interagir une carte Arduino et une application C#. Les échanges entre l’application et la carte Arduino s’effectuent via la liaison série. Le programme C# permet de sélectionner et d’ouvrir le port série de la carte Arduino. Ensuite le déplacement des curseurs de l’application envoie des messages sur la liaison série. Messages qui sont interprétés par la carte Arduino afin de commander l’intensité lumineuse l’une Led RVB.
câblage
La plus grande broche de la LED correspond à la cathode à relier à la masse
De gauche à droite
Anode Bleu (+)
Anode Vert (+)
Cathode commune (-)
Anode Rouge (+)
1234
Programme Arduino
Le programme consiste à lire les données reçues sur la liaison série, d’en extraire les données concernant la commande des leds. Le pilotage des leds à proprement parlé s’effectue à l’aide des instructions analogWrite.
Pong est un des premiers jeux vidéo d’arcade (1972). Au travers de quelques vidéos, nous allons recréer ce jeu dans l’environnement Windows, à l’aide du langage C#. Nous verrons comment intégrer des objets graphiques (pictureBox) et les faire se mouvoir, comment gérer les rebonds sur les bords et les raquettes. Nous verrons aussi comment ajouter du son.
PictureBox
le fichier contenant les images gif des balles est à télécharger ici
Déplacement d’une pictureBox
Reste à faire :
ajouter les boutons et le code afin que la balle puisse se déplacer en diagonale dans les 4 sens.
Résumé des informations concernant les timer :
Un composant Timer permet d’implémenter une minuterie déclenchant un événement selon un intervalle de temps défini par l’utilisateur.
Propriété
Type
Description
(Name)
Indique le nom utilisé dans le code pour identifier l’objet. Préfixe : tmr Exemple : tmrHorloge
Enabled
bool
Obtient ou définit l’état de la minuterie, soit active ou non. true si la minuterie est active ; sinon, false.
L’état par défaut est false.
Interval
int
Obtient ou définit la fréquence de temps en millisecondes du déclenchement de l’événement Tick.
Événement
Description
Tick
Se produit lorsque l’intervalle de temps spécifié s’est écoulé.
Méthodes
Description
Start
Démarre la minuterie. Exemple : tmrHorloge.Start();
Stop
Arrête la minuterie. Exemple : tmrHorloge.Stop();
Déplacement et rebond de la balle
Reste à faire :
Modifier le code afin que la balle se déplace en diagonale et rebondisse sur les 4 bords du conteneur.
A l’aide des propriétés Height, Width, Location.X et Location.Y des divers composants modifier le code afin que les butées (les valeurs limites permettant de définir s’il y a rebond) soit indépendantes de la tailles des éléments : si l’utilisateur redimensionne la fenêtre de l’application, l’application doit toujours fonctionner.
Ajout d’une raquette et gestion de son déplacement à l’aide des touches du clavier.
Modifier le code afin d’ajouter la raquette de gauche.
Provoquer le rebond de la balle sur les 2 raquettes, pour cela on utilisera les propriétés Location.X, Location.Y, ainsi que les propriétés Height et Width de la raquette.
Le rebond à lieu lorsque plusieurs conditions sont réunies :
horizontalement : lorsque pbBalle.Location.X + pbBalle.Width devient supérieur ou égale à pbRqDroite.Location.X
verticalement : pbBalle.Location.Y + pbBalle.Height supérieur ou égal à pbRqDroite.Location.YETpbBalle.Location.Y inférieure ou égal à pbRqDroite.location.Y + pbRqDroite.Height
gestion des scores :
Placer des labels afin d’afficher les scores : chaque fois que la balle rebondit sur les lignes verticales du conteneur, le score du joueur opposé s’incrémente ;
Ajouter une fonction indiquant une fin de partie lorsqu’un des scores arrive à 10.
Proposer une solution pour réinitialiser le jeu en fin de partie.
Visual Studio est un outils de développement (IDE en anglais : Integrated Development Environment) . Il s’agit d’un logiciel qui permet au développeur d’écrire des programmes. Visual Studio est une plateforme complète qui peut autorise le développement de toutes sortes d’applications (bureautique, web, jeux..) pour toutes sortes de plateformes (ordinateurs de bureaux, mobiles, serveurs, stations de jeux, Arduino…) et pour toutes sortes de langages (C , C++, C#, VB, JS, HTML, Python…) . Cette plateforme de développement est modulaire, c’est-à-dire qu’on peut rajouter des modules (gratuits ou payants) pour cibler un nouveau matériel ou un nouveau langage.
langage C# et utilisation de Visual Studio
De par la richesse du produit, la prise en main de ce logiciel peut être complexe. Nous allons voir comment développer des applications visuelles simples et comment l’utilisateur peut interragir avec l’application. On parle d’Interfaces Homme/ Machine (IHM).
tutoriel de découverte
détail du tutoriel
Lancer Visual studio
Choisir un modèle de type C# (prononcer C sharp)
Changer (éventuellement ) le nom du projet et l’emplacement, puis cliquer sur OK
Visual Studio initialise le projet en créant les dossiers et les fichiers nécessaires à la création de l’application.
Présentation de la fenêtre de l’IDE
A droite on trouve l’Explorateur de solution (1) il s’agit du dossier et les fichiers qui composent de projet.
A gauche on trouve l’espace de composition qui va permettre de dessiner l’application. Par défaut Visual Studio créer une fenêtre d’application Windows nommée Form1.
A gauche de la fenêtre de composition il y a 3 onglets, dont un qui porte le nom « Boite à Outils » (3) .
En haut de la fenêtre de boite à outils, on voit une petite « punaise » qui permet d’ancrer la boite à outils et qui évite qu’elle se replie à chaque fois que la souris s’en écarte.
La boite à outils contient tous les éléments qui permettent de composer l’application
Depuis la boite à outils, faire glisser sur la « Form1 » un « Button » et deux « Textbox »
Modifier la propriété « Text » de button1 : remplacer le texte « button1 » par « Copier »
Sélectionner la « TextBox2 » , modifier la propriété « ReadOnly » pour la faire passer à « true ». de cette façon la boite de texte sera grisée et l’utilisateur de l’application n’aura pas la possibilité de modifier le texte.
Dans la fenêtre de composition : double-cliquer sur le bouton »Copier ». une nouvelle fenêtre s’ouvre alors (Form1.cs). Cette fenêtre contient le code affairant à l’application.
Modifier le code de la fonction button1_click de la manière suivante :
Cette fonction est appelée lorsque l’utilisateur clique sur le bouton.
Toutes les instructions comprises entre les accolades {} seront exécutées. Chaque instruction se termine obligatoirement par un « ; »
L’instructiontextBox2.Text = textBox1.Text;peut se traduire par « la propriété Text de TextBox2 prend la valeur de la propriété Text de TextBox1 ». Autrement dit le texte de textBox1 sera recopié dans la textBox2.
Tester le programme : dans la barre d’outils cliquer sur le bouton « Démarrer »
Le programme est alors compilé et s’il ne contient pas d’erreurs, il se lance. Bravo !