L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Applications Xamarin en temps réel
Nous explorons comment créer des applications mobiles Xamarin en temps réel alimentées par SignalR.
Les systèmes logiciels modernes ont un besoin indéniable de communications en temps réel – en particulier sur les facteurs de forme mobiles. Heureusement, malgré les obstacles, il existe plusieurs techniques pour permettre des communications en temps réel et des cadres raffinés qui font beaucoup de travail pour les développeurs. Cependant, les applications ne sont pas cloisonnées sur des plates-formes spécifiques, et au fur et à mesure que les développeurs essaient de mettre en place de nouvelles plates-formes / appareils pour se connecter en temps réel, la flexibilité est la clé pour les piles technologiques.
ASP.NET Core – l'un des cadres de communication en temps réel les plus populaires. La première étape pour intégrer des communications en temps réel consiste à créer le serveur principal. SignalR brille absolument ici avec des dépendances simples, la connectabilité, l'hébergement et un modèle d'API flexible. Il peut être facile de connecter des clients Web au backend SignalR, mais c'est en 2020 – un pourcentage énorme de votre base d'utilisateurs est probablement sur des facteurs de forme mobiles. Et les communications en temps réel n'ont qu'à s'allumer dans les applications mobiles.
Prenons une plongée profonde dans la façon de créer des applications en temps réel alimentées par SignalR avec Xamarin. Et oui, notre pile technologique choisie étant Xamarin, nous créons des applications mobiles véritablement multiplateformes – avec une interface utilisateur native, un accès API natif et des performances natives. Bien qu'il soit obligatoire de commencer avec les applications de chat classiques pour démontrer les communications en temps réel, explorons des scénarios plus réels avec des objets complexes et une interface utilisateur raffinée.
Cet article fait également partie d'une longue série de contenus sur Chasing Success with Xamarin Apps – nous explorons la pile technologique, les outils et les services Xamarin qui aident les développeurs à créer des applications mobiles performantes.
Backend de chat SignalR
SignalR facilite l'ajout de communications en temps réel aux applications Web exécutées sur ASP.NET et aux clients connectés sur une grande variété de plates-formes. Alors que SignalR a commencé il y a des années avec ASP.NET MVC, le dernier redémarrage s'appelle SignalR Core, qui s'exécute sur ASP.NET Core et apporte une tonne de maturité.
Les développeurs bénéficient de SignalR qui fournit un canevas d'API uniforme pour la gestion des connexions et des clients, ainsi qu'une mise à l'échelle pour gérer l'augmentation du trafic. SignalR fournit des API pour les appels de procédure distante (RPC) bidirectionnels entre le serveur et le client et résume les complexités de communication en temps réel. Étant donné une paire serveur / client spécifique, SignalR choisit de manière experte le meilleur mécanisme de transport pour les échanges en temps réel. Les techniques les plus couramment utilisées sont les suivantes: WebSockets, événements envoyés par le serveur et interrogation longue, dans l'ordre des plans de secours.
SignalR utilise le concept de concentrateurs côté serveur – un concentrateur littéral dans un modèle à moyeu. Le SignalR Hub fonctionne comme un objet en mémoire côté serveur auquel tous les clients se connectent pour des communications en temps réel. Le concentrateur permet à SignalR d'envoyer et de recevoir des messages au-delà des limites de la machine, permettant ainsi aux clients d'appeler des méthodes sur le serveur et vice versa.
En plus de l'invocation de méthodes à travers les paradigmes de programmation, les concentrateurs permettent le transport de paramètres nommés et fortement typés – SignalR fournit automatiquement la sérialisation / désérialisation des objets pour faciliter le processus. Si nous construisions une application de chat en temps réel, la première étape serait de définir un SignalR Hub – le backend auquel tous les clients peuvent se connecter. Voici un exemple de code facilitant un concentrateur SignalR pour les communications par chat:
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
espace de noms SignalRChat.Hubs
{
public class ChatHub: Hub
{
tâche asynchrone publique SendMessage (utilisateur de chaîne, message de chaîne)
{
attendre Clients.All.SendAsync ("ReceiveMessage", utilisateur, message);
}
}
} Essentiellement, le concentrateur SignalR définit une méthode appelée SendMessage () que tous les clients connectés peuvent appeler et transmettre des paramètres. Le hub principal se retourne ensuite et invoque une méthode ReceiveMessage () sur chaque client connecté – y compris l'appelant, et renvoie les mêmes paramètres avec le dialogue de discussion. Par conséquent, cette méthode ReceiveMessage () doit être définie dans chaque plateforme client qui a l'intention de connecter le SignalR Hub.
Bien que la création d'un client Web alimenté par SignalR ne soit pas difficile, tout utilisateur sur mobile exigera probablement une expérience plus native. Passons à la prise en charge des applications mobiles avec un bacekend SignalR.
Xamarin Chat Client
Xamarin démocratise le développement mobile multiplateforme pour les développeurs .NET – vous obtenez des applications natives à partir d'une base de code unique prenant en charge une variété de plates-formes. Xamarin.Forms le rend encore plus facile, fournissant une abstraction non seulement sur du code C # partagé, mais également sur une couche d'interface utilisateur commune. Au moment de l'exécution, Xamarin.Forms affiche une interface utilisateur native spécifique à la plate-forme, tout en conservant un accès API natif via le code C #. digne des développeurs .NET. Un client mobile unique avec tout le code partagé dans une bibliothèque .NET Standard fonctionne uniquement sur une grande variété de plates-formes – iOS, Android, Tizen et plus. La couche d'interface utilisateur partagée dans Xamarin.Forms est XAML. Créons donc un nouveau projet et écrivons les bases d'une interface de conversation dans notre MainPage.xaml comme ceci:
Essentiellement, nous avons créé quelques espaces réservés dans l'arborescence visuelle pour le nom d'utilisateur, le message, un bouton et un emplacement pour afficher les messages de discussion. La première étape vers l'intégration de notre application Xamarin avec le backend SignalR consiste à saisir les bits côté client – le merveilleux package NuGet Microsoft.AspNetCore.SignalR.Client . Une fois les références en place, nous avons accès aux artefacts et aux API SignalR – comme le très important objet HubConnection pour se connecter et travailler avec le backend SignalR. Voici notre code C # pour travailler avec le ChatHub SignalR côté serveur:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Microsoft.AspNetCore.SignalR.Client;
espace de noms SignalRChatClient
{
classe partielle publique MainPage: ContentPage
{
HubConnection hubConnection;
public MainPage ()
{
InitializeComponent ();
DoRealTimeSuff ();
}
async private void DoRealTimeSuff ()
{
SignalRChatSetup ();
attendre SignalRConnect ();
}
void privé SignalRChatSetup ()
{
var ip = "localhost";
hubConnection = new HubConnectionBuilder (). WithUrl ($ "http: // {ip}: 5001 / chatHub") .Build ();
hubConnection.On ("ReceiveMessage", (utilisateur, message) =>
{
var receivedMessage = $ "{user} dit {message}";
this.MessageHolder.Text + = receivedMessage + " n";
});
}
async Task SignalRConnect ()
{
essayer
{
attendre hubConnection.StartAsync ();
}
catch (Exception ex)
{
// La connexion a échoué. Échouez gracieusement.
}
}
Private async void ButtonSendEventHandler (expéditeur d'objet, System.EventArgs e)
{
attendre SignalRSendMessage (this.UserName.Text, this.UserMessage.Text);
}
async Task SignalRSendMessage (utilisateur de chaîne, message de chaîne)
{
essayer
{
attendre hubConnection.InvokeAsync ("SendMessage", utilisateur, message);
}
catch (Exception ex)
{
// Echec de l'envoi. Échouez gracieusement.
}
}
}
} Quelques choses amusantes se produisent dans le code ci-dessus. HubConnection fournit un ensemble flexible d'API et nous nous connectons à nouveau au backend SignalR Hub à l'aide de HubConnectionBuilder (). WithUrl (). Build () . Notez que nous nous connectons à localhost fonctionnant sur la même machine que le backend SignalR et une route ChatHub spécifiée à partir d'un port. Ceci est important pour SignalR Middleware dans ASP.NET pour acheminer les messages de manière appropriée.
Étant donné qu'il s'agit d'un code côté client .NET, nous pouvons utiliser le modèle Async-Await pour parler au backend SignalR sans verrouiller le thread d'interface utilisateur. Une fois connecté au SignalR Hub, nous pouvons invoquer la méthode SendMessage () sur le serveur et transmettre ce que l'utilisateur a tapé depuis l'application Xamarin. Nous définissons également la méthode ReceiveMessage () que le serveur peut invoquer pour passer des messages de discussion et les afficher simplement dans notre espace réservé. Tout est prêt? Allumons ensemble le backend SignalR et le client Xamarin.Forms – chat simple en temps réel fonctionnant de manière transparente entre le web et le mobile!
Beyond Chat
Applications de chat sont le «Hello World» pour les communications en temps réel. Bien sûr, vous pourriez créer la prochaine incroyable application Chatroom / IRC / Messaging, mais de façon plus réaliste, vous serez probablement excité par ce que les applications alimentées par SignalR peuvent faire pour vos flux de travail d'entreprise. Imaginez votre secteur vertical ayant des applications mobiles pour les gens sur le terrain – ne serait-il pas bien si les mises à jour et les données du serveur pouvaient être servies en temps réel? Allons au-delà des applications de chat et construisons un style de tableau de bord application pour mobile – connectée à un backend SignalR.
Backend SignalR Dashboard
Lorsque vous pensez à un tableau de bord, les premières choses à penser devraient être de nombreuses données présentées dans des grilles / tableaux / graphiques. backend prêt à servir ces données au client connecté s – voici un code côté serveur:
using Microsoft.AspNetCore.SignalR;
en utilisant System.Text.Json.Serialization;
using System.Threading.Tasks;
espace de noms SignalRChat.Hubs
{
public class DashboardHub: Hub
{
tâche asynchrone publique SendDashboardUpdate (string dashupdate)
{
attendre Clients.All.SendAsync ("ReceiveDashUpdate", dashupdate);
}
tâche asynchrone publique SendObjectUpdate (GridData [] gridUpdate)
{
attendre Clients.All.SendAsync ("ReceiveObjUpdate", gridUpdate);
}
}
public class GridData
{
chaîne publique Catégorie {get; ensemble; }
public int Value {get; ensemble; }
}
} Essentiellement, nous définissons un nouveau concentrateur SignalR et sortons deux variantes de données du serveur SignalR – une simple chaîne / int pour mettre à jour une valeur de jauge et un objet de collection POCO (Plain Old CLR Object) à afficher dans une grille. La méthode SendDashboardUpdate () capture à peu près une valeur entrée par l'utilisateur à partir du DOM du client Web et la transmet à tous les clients pour mettre à jour une valeur dans un tableau de bord. La méthode SendObjectUpdate () traite un tableau d'éléments GridData – objets d'un type de classe personnalisé.
Bien que simple, le point de contournement GridData [] est de montrer que les concentrateurs SignalR peuvent gérer des types d'objets complexes – la sérialisation / désérialisation des données sur le câble est intégrée. SignalR utilise la sérialisation JSON intégrée à .NET par défaut, tandis que la configurabilité ouvre des options pour utiliser NewtonSoft.JSON ou MessagePack pour la sérialisation / désérialisation binaire.
Après avoir ajouté un nouveau DashboardHub à notre SignalR backend, nous pourrions ajouter une nouvelle page Razor simple pour capturer les entrées utilisateur et brancher le client web pour se connecter / travailler avec le Hub SignalR. Voici un code JS:
"use strict";
var connection = new signalR.HubConnectionBuilder (). withUrl ("/ dashboardHub"). build ();
connection.on ("ReceiveDashUpdate", fonction (dashupdate) {
var encodedMsg = "Dash Update:" + dashupdate;
var li = document.createElement ("li");
li.textContent = encodedMsg;
document.getElementById ("dashUpdateList"). appendChild (li);
});
document.getElementById ("sendDashButton"). addEventListener ("click", fonction (événement) {
var gaugeupdate = document.getElementById ("gaugeValue"). value;
connection.invoke ("SendDashboardUpdate", gaugeupdate) .catch (fonction (err) {
return console.error (err.toString ());
});
event.preventDefault ();
});
document.getElementById ("sendObjButton"). addEventListener ("clic", fonction (événement) {
var griddata = [{ "category": "A", "value": 5 }, { "category": "B", "value": 10 }];
connection.invoke ("SendObjectUpdate", griddata) .catch (fonction (err) {
return console.error (err.toString ());
});
event.preventDefault ();
}); Vous pouvez voir que nous configurons le client Web pour qu'il se connecte au DashboardHub . Le gestionnaire de clics d'un bouton appelle la méthode SendDashboardUpdate () sur le serveur – et transmet la valeur de jauge proposée entrée par l'utilisateur. Un autre gestionnaire de clic de bouton appelle la méthode de serveur SendObjectUpdate () SignalR, cette fois en passant le long d'un tableau codé en dur de paires clé-valeur. Cela pourrait être à peu près n'importe quelle donnée JSON ou collection d'objets, tant que les paramètres correspondent à ce que le serveur attend.
Si vous n'êtes pas satisfait des chaînes magiques ou des erreurs d'exécution redoutables, une autre alternative de SignalR est Hubs fortement typés . Avec un canevas d'API flexible, vous pouvez utiliser Hub
Client de tableau de bord Xamarin
Avec notre hub backend SignalR prêt à diffuser des données complexes, passons au client mobile Xamarin multiplateforme. Imaginez un tableau de bord sur une application mobile – vous voulez envoyer des données en temps réel depuis le serveur et éclairer le contenu avec une interface utilisateur sophistiquée. Divers tableaux, graphiques et grilles sont presque synonymes d'applications de tableau de bord. Maintenant, nous pourrions construire notre interface utilisateur de tableau de bord à la main – c'est juste laborieux, long, pas parfait au pixel et sans la garantie d'être performant.
Une meilleure option peut être de choisir une interface utilisateur raffinée pour la visualisation des données – entrez Telerik UI for Xamarin une suite complète de composants d'interface utilisateur multiplateforme pointus et performants pour toutes les applications Xamarin. Il est assez facile d'intégrer l'interface utilisateur Telerik dans vos projets Xamarin – téléchargez / référencez des DLL ou récupérez des packages NuGet. On prend soin de faire trembler l'arborescence – le package d'application n'a que l'interface utilisateur que vous utilisez et toutes les dépendances correspondantes. Et Telerik UI pour Xamarin dispose de deux contrôles d'interface utilisateur de niveau entreprise qui sont parfaits pour notre tableau de bord d'application mobile proposé: un RadialGauge et un DataGrid . Créons donc une nouvelle page XAML et ajoutons du balisage, comme ceci:
Il y a quelques choses intéressantes qui se passent dans le code ci-dessus. D'une part, veuillez regarder les espaces de noms – ils sont nécessaires pour l'interface utilisateur de visualisation des données et très clairement documentés. Nous définissons essentiellement une pile d'interface utilisateur verticale et y ajoutons deux choses: Telerik RadRadialGauge et RadDataGrid. Le fichier code-behind local est branché pour être utilisé – il est destiné à avoir un DummyViewModel à utiliser dans la liaison de données. Voici un code C # pour configurer notre interface utilisateur:
espace de noms SignalRChatClient
{
Tableau de bord public de classe partielle: ContentPage
{
DummyViewModel vm = new DummyViewModel ();
Tableau de bord public ()
{
InitializeComponent ();
BindingContext = vm;
this.DataGrid.ItemsSource = vm.GridValues;
}
}
public class DummyViewModel
{
public int GaugeValue {get; ensemble; }
Liste publique GridValues {get; ensemble; }
public DummyViewModel ()
{
this.GaugeValue = 0;
this.GridValues = nouvelle liste {
new GridData {Category = "A", Value = 20},
nouveau GridData {Category = "B", Value = 30}
};
}
}
public class GridData
{
chaîne publique Catégorie {get; ensemble; }
public int Value {get; ensemble; }
}
} Comme il est évident, nous avons défini un faux modèle de vue dans l'esprit du modèle MVVM qui fonctionne très bien pour les projets C # / XAML. Le DummyViewModel expose des propriétés qui peuvent être utilisées pour la liaison de données d'interface utilisateur – en particulier, le GaugeValue qui est lié dynamiquement à la Value de GaugeNeedleIndicator dans notre Telerik RadialGauge. Et le DummyViewModel héberge également un tableau d'objets du type personnalisé GridData qui est alimenté en tant que ItemsSource dans la grille de données. Et votre observation est juste – cela correspond au type de collection d'objets sérialisés JSON que nous attendons du Hub SignalR.
Bien que nous associons des types personnalisés côté serveur et côté client aux objets déshydratés / réhydratés, un moyen plus efficace consisterait à extraire les entités de données métiers dans une bibliothèque de types .NET Standard – et à les partager avec SignalR Hub et tout autre appareil connecté. clients. Si nous exécutons notre application Xamarin telle quelle, le DummyViewModel fournit des données initialisées à l'interface utilisateur du tableau de bord lié, comme suit:
Écrivons maintenant le code amusant de la connexion de notre client Xamarin au SignalR DashboardHub – voici le code C # complet:
utilisant System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Microsoft.AspNetCore.SignalR.Client;
using Telerik.XamarinForms.DataVisualization.Gauges;
using System.Collections.ObjectModel;
espace de noms SignalRChatClient
{
Tableau de bord public de classe partielle: ContentPage
{
HubConnection hubConnection;
DummyViewModel vm = new DummyViewModel ();
Tableau de bord public ()
{
InitializeComponent ();
BindingContext = vm;
this.DataGrid.ItemsSource = vm.GridValues;
DoRealTimeSuff ();
}
async private void DoRealTimeSuff ()
{
SignalRDashSyncSetup ();
attendre SignalRConnect ();
}
void privé SignalRDashSyncSetup ()
{
var ip = "localhost";
hubConnection = new HubConnectionBuilder (). WithUrl ($ "http: // {ip}: 5001 / dashboardHub") .Build ();
hubConnection.On ("ReceiveDashUpdate", (dashupdate) =>
{
var receivedDashUpdate = dashupdate;
((GaugeNeedleIndicator) this.gauge.Indicators [0]). Value = Int32.Parse (dashupdate);
});
hubConnection.On ("ReceiveObjUpdate", (gridUpdate) =>
{
var receivedChartUpdate = gridUpdate;
this.DataGrid.ItemsSource = gridUpdate;
});
}
async Task SignalRConnect ()
{
essayer
{
attendre hubConnection.StartAsync ();
}
catch (Exception ex)
{
// La connexion a échoué.
}
}
}
public class DummyViewModel
{
public int GaugeValue {get; ensemble; }
Liste publique GridValues {get; ensemble; }
public DummyViewModel ()
{
this.GaugeValue = 0;
this.GridValues = nouvelle liste {
new GridData {Category = "A", Value = 20},
nouveau GridData {Category = "B", Value = 30}
};
}
}
public class GridData
{
chaîne publique Catégorie {get; ensemble; }
public int Value {get; ensemble; }
}
} Nous ne devrions pas avoir de surprises dans le code ci-dessus. Comme dans l'exemple de discussion, nous nous connectons au DashboardHub du client Xamarin via Async-Await. Le délégué ReceiveDashUpdate () est défini pour lire la valeur de la jauge provenant du concentrateur SignalR et mettre à jour l'interface utilisateur de l'aiguille de la jauge de manière appropriée. La méthode ReceiveObjUpdate () accepte le GridData [] typé du serveur avec SignalR fournissant la désérialisation intégrée. Nous nous bornons simplement à mettre à jour l'interface utilisateur DataGrid. Allumons à la fois le backend SignalR Hub et le client Xamarin – les mises à jour en temps réel ne sont pas une belle chose. Tout aussi facilement, les applications mobiles natives peuvent être connectées aux backends SignalR pour les tableaux de bord en temps réel – imaginez les possibilités.
Interface utilisateur conversationnelle pour les applications Xamarin
Chat et les applications Dashboard sont de formidables exemples de la façon dont les applications mobiles peuvent bénéficier des communications en temps réel. Les applications en temps réel peuvent également aider à automatiser les workflows d'entreprise complexes, en particulier si le backend de chat comprend des chatbots intelligents. Il existe une multitude de cadres de robots fabuleux à connecter vos applications de chat – toutes avec des outils et des SDK riches pour la plupart des plates-formes. Et SignalR est heureux d'être les développeurs d'abstraction adorent les complexités du réseau.
Les applications mobiles Chatbot du monde réel peuvent bénéficier d'une autre chose pour une UX optimale – oui, une interface utilisateur soignée et performante. Lorsque votre objectif est d'automatiser intelligemment les flux de travail et d'offrir de la valeur, la création d'une interface utilisateur de conversation à la main est trop laborieuse et prend du temps. Entrez Interface conversationnelle – U moderne Composants I pour les chatbots à travers les technologies d'interface utilisateur Telerik / Kendo. Avec une large compatibilité de framework, une interface utilisateur de chat raffinée avec une documentation détaillée et des API flexibles, les développeurs peuvent être sur le point d'implémenter rapidement un flux conversationnel naturel.
Pour les clients mobiles Xamarin connectés aux backends SignalR Hub, L'interface utilisateur Telerik pour Xamarin inclut Interface utilisateur conversationnelle avec toute l'interface utilisateur Chatbot raffinée dont vous avez besoin pour activer une interface utilisateur agréable. Nous pouvons voir des exemples d'interface utilisateur conversationnelle dans les applications Xamarin via l'application Telerik QSF – cette application est dans les magasins d'applications respectifs pour jouer, ainsi que le code source faisant partie de l'interface utilisateur Telerik pour les téléchargements Xamarin. Découvrez quelques démonstrations rapides de ce qui est possible avec les applications Chatbot Xamarin en temps réel qui peuvent automatiser les flux de travail:
Wrap Up
La vie se déroule en temps réel et l'échange d'informations devrait être le même. Il s'avère que d'innombrables applications modernes ne bénéficient pas seulement, mais dépendent activement des communications en temps réel pour être fonctionnelles. SignalR est extrêmement prometteur en tant que cadre qui facilite la création d'applications en temps réel. Avec une tonne de configurabilité, les concentrateurs SignalR sont faciles à configurer côté serveur. Et la création de clients mobiles connectés à SignalR Hubs est tout aussi simple, avec des API flexibles et une merveilleuse abstraction des complexités du réseau.
Pour les développeurs .NET, Xamarin présente une option attrayante pour réutiliser le code et créer des applications mobiles multiplateformes véritablement natives. Alors que les applications de chat Xamarin peuvent être amusantes, les scénarios les plus réalistes peuvent être envisagés comme des applications mobiles de style tableau de bord – connectées aux hubs SignalR pour les données en temps réel. Amusant pour les développeurs de se connecter et de ravir les utilisateurs!
Source link