Fermer

juillet 28, 2020

Création d'un CRM avec Xamarin.Forms et Azure – Partie 1


Dans ce didacticiel, nous allons créer une application client CRM pour iOS, Android et Windows 10 à l'aide de l'interface utilisateur Telerik pour Xamarin et Xamarin.Forms soutenue par Azure App Service et Azure Bot Framework.

Ceci est le premier article dans un tutoriel en 3 parties, où je vous emmène de «Fichier> Nouveau projet» à une application CRM multi-plateforme entièrement fonctionnelle pour une société fictive de galerie d'art.

Curieux de savoir ce qui vous attend? Vous pouvez passer à la deuxième partie de la série où nous allons créer l'interface utilisateur avec Telerik UI pour Xamarin, ou à la troisième partie de la série où nous entraînons un modèle LUIS AI à l'aide de l'interface utilisateur Telerik pour l'interface utilisateur conversationnelle de Xamarin.

Le parcours nous guidera tout au long de la création du backend ASP.NET hébergé à l'aide d'Azure App Services avec SQL Server pour la base de données, à l'aide d'Azure Bot Framework et d'un LUIS (Language Understanding) personnalisé pour le in -app et enfin le développement des applications clientes à l'aide de Xamarin.Forms avec Telerik UI pour Xamarin pour une expérience client magnifique et riche en fonctionnalités.

Commençons!

Première partie – Application Azure Procédure pas à pas du service

Tout d'abord, nous allons vouloir créer le backend. Microsoft a récemment mis à jour le didacticiel Azure App Service avec Xamarin.Forms et il vous guidera tout au long de l'initialisation de l'App Service et de la création de la base de données que le service utilisera. Avant de commencer, permettez-moi de vous présenter les choix que j'ai choisis afin que vous puissiez suivre.

Projets de configuration et de démarrage

Après avoir créé le service et accédé à l'onglet Démarrage rapide, une liste s'affichera. des types d'applications client. Sélectionnez l'élément Xamarin.Forms.

 Azure Quickstart Blade "title =" Azure Quickstart Blade "data-openoriginalimageonclick =" true "data-method =" ResizeFitToAreaArguments "data-customsizemethodproperties =" {"MaxWidth" : "600", "MaxHeight": "", "ScaleUp": false, "Quality": "High"} "/> </a> </p>
<p> Une nouvelle lame Azure apparaîtra et vous verrez deux étapes . </p>
<h4> 1 – Créer la base de données </h4>
<p> Si vous avez déjà un serveur SQL et / ou une base de données SQL, choisissez-les pour cela. J'ai choisi de créer un nouveau serveur et une nouvelle base de données. </p>
<blockquote>
<p> Remarque: Lors de la création du serveur SQL, vous devra créer des informations d'identification d'administrateur. Vous n'avez pas besoin de les mémoriser pour l'App Service car elles seront stockées dans une variable d'environnement, mais il peut être judicieux de les stocker dans votre gestionnaire de mots de passe préféré ou dans un emplacement sécurisé. [19659004] Après avoir fait votre sélection pour un backend C #, cliquez sur le bouton "Télécharger". Azure créera un projet ASP.NET pour vous, déjà configuré avec la bonne connexion chaîne d'ions à la base de données que vous avez sélectionnée pour l'étape 1! </p>
<h4> 2 – Sélectionnez le projet Xamarin.Forms </h4>
<p> Cette étape vous propose deux options: «créer une nouvelle application» ou «connecter une application existante». Si vous choisissez ce dernier, vous recevrez quelques extraits de code et des instructions. </p>
<p> Nous utilisons l'ancienne option, "créer une nouvelle application". Comme pour le backend, lorsque vous cliquez sur le bouton de téléchargement, vous obtenez une nouvelle application Xamarin.Forms qui possède déjà le code requis pour se connecter au service d'application. </p>
<p> Voici une capture d'écran du "Démarrage rapide de Xamarin.Forms" blade: </p>
<p> <a href=  QuickStart Xamarin.Forms Blade "title =" QuickStart Xamarin.Forms Blade "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Une fois terminé, vous en aurez deux téléchargé des fichiers ZIP contenant deux solutions: une solution XamarinForms et une solution ASP.NET MVC. Voici vos projets de démarrage. </p>
<p> Si vous avez déjà consulté le code source de cette application, vous remarquerez que j'ai décidé de tout combiner les projets dans un seul dossier et a créé une solution combinée. Ce n'est <em> pas </em> nécessaire. Je l'ai fait pour conserver tous les projets de ce didacticiel en un seul endroit pour un contrôle de source plus simple et pour faciliter ce didacticiel à suivre. </p>
<p> Voici ce avec quoi je me suis retrouvé. Les flèches pointent vers les deux téléchargements différents combinés dans la même solution. </p>
<p> <a href=  Solution unique avec projets combinés "title =" Solution unique avec projets combinés "data-openoriginalimageonclick =" true "/> </a> </p>
<p> C'est il est temps de commencer à fouiller dans le code! Commençons par le projet de service ASP.NET car nous voulons que le backend soit prêt avant de commencer à créer l'interface utilisateur. </p>
<h3>
Entités </h3>
<p> Dans le projet, vous verrez un dossier DataObjects. Cela contiendra une classe TodoItem.cs. Nous devons le remplacer par les modèles de données dont nous avons besoin pour la galerie d'art. </p>
<p> Voici les entités dont nous avons besoin: </p>
<ul>
<li> Employé </li>
<li> Client </li>
<li> Produit </li>
<li> Commande </li>
</ul>
<p> J'ai créé quatre classes pour définir le modèle d'entité et ses propriétés. </p>
<p> <a href=  Entity Classes "title =" Entity Classes "data-openoriginalimageonclick =" true "/> </a> </p>
<blockquote>
<p> Remarque: si vous n'êtes pas familier avec Entity Framework et l'approche code-first , vous pouvez utiliser la classe TodoItem.cs existante pour vous guider avant de la supprimer. </p>
</blockquote>
<p> Chacune des classes possède des propriétés liées à l'entité. Ces propriétés seront utilisées pour créer les champs de table. Par exemple, un employé aurait OfficeLocation, alors qu'une commande peut avoir besoin de propriétés telles que ProductId et Quantity. </p>
<p> <a href=  Employee Entity Model "title =" Employee Entity Model "data-openoriginalimageonclick =" true "/> </a></p>
<p> Il est important que vous deviez essayez de finaliser les propriétés maintenant, car une fois que vous initialisez la base de données, Entity Framework créera les champs de base de données à l'aide de ces propriétés. Toute modification du modèle nécessitera une opération spéciale appelée <a href= Entity Framework Code First Migration (cela peut se compliquer rapidement).

DBContext

Avec les entités créées, nous devons maintenant mettre à jour la classe de contexte de base de données utilisée par Entity Framework pour interagir avec la base de données. Allez-y et remplacez le TodoItem DBSet par les quatre nouveaux:

 DB Sets for Entities

Database Initializer

Dans le dossier AppStart, vous trouverez que le Le projet généré automatiquement a imbriqué une classe qui amorce la base de données avec les tables et les enregistrements initiaux. J'ai déplacé cette classe dans sa propre classe et remplacé les données de départ de TodoItem par des enregistrements pour chacune des entités:

 DB Initializer Class "title =" DB Initializer Class "data-openoriginalimageonclick =" true "/ > </a> </p>
<h3> Contrôleurs de table </h3>
<p> Enfin, vous aurez besoin d'un contrôleur pour chacune des entités pour interagir avec la base de données. C'est le point de terminaison que les applications clientes utiliseront pour interagir avec les bases de données et chacune implémentera le Interface TableController <T> d'Azure Mobile Server. </p>
<p> J'ai créé un contrôleur pour chacune des entités: </p>
<p> <a href=  Web API Controllers

Le contenu de chaque contrôleur WebAPI suit le modèle CRUD auquel vous vous attendez. Voici une capture d'écran des méthodes de EmployeeController (tous les contrôleurs réutilisent ce modèle).

 Employee Controller class

Comme pour les étapes précédentes, si vous n'êtes pas familier avec ASP.NET ou l'API Web, vous pouvez utiliser TodoController pour obtenir des conseils avant de le supprimer.

Publier sur Azure

Visual Studio 2017 possède d'excellents outils Azure intégrés. Si vous faites un clic droit sur le projet ASP.NET, vous verrez une option «Publier» dans le menu contextuel:

 Publier l’élément du menu contextuel "title =" Publier l’élément du menu contextuel "/> </p>
<p> Sélection cela vous fournira une liste d'options parmi lesquelles choisir, vous voudrez sélectionner Azure App Service, puis «Sélectionner existant», car vous avez déjà configuré l'App Service. </p>
<p> <a href=  Azure Publish Wizard "title =" Azure Publish Wizard "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Au cours des prochaines étapes, vous pourrez choisir le service de ressources et d'applications à partir de l'abonnement Azure. </p>
<blockquote>
<p> Remarque : Vous devrez être connecté au même compte que celui utilisé par l'abonnement Azure. Si vous possédez plusieurs comptes, il existe une liste déroulante en haut à droite pour changer de compte. </p>
</blockquote>
<p> Une fois que vous avez terminé les étapes de publication, Visual Studio démarre le processus de publication et télécharge l'application. Une fois terminé, un onglet du navigateur s'ouvre et présente la page de destination de l'application en cours d'exécution. </p>
<p> <a href=  Page de destination du service "title =" Page de destination du service "data-openoriginalimageonclick =" true "/> </a> </p>
<p> La prochaine fois que vous utiliserez l'option de menu Publier, vous verrez les détails du profil de publication existant ainsi que plusieurs autres outils: </p>
<p> <a href=  Visual Studio Publish Overview page "title =" Visual Studio Publish Page de présentation "data-openoriginalimageonclick =" true "/> </a> </p>
<p> Le backend étant publié et en cours d'exécution, nous pouvons maintenant passer à la partie 2 – Xamarin.Forms et Telerik UI pour Xamarin. </p>
<h3> Lire la suite [19659064]</pre>
<p><div class=




Source link