jeudi 2 novembre 2017

ASP.NET Web API - Créer une véritable application - #2

Vous souhaitez  utiliser une Web API pour fournir un service RESTful (autrement dit API REST) vers un Client ASP.NET et ce n'est pas si facile. En effet cette techno est faite pour fournir une API vers le poste de travail, la tablette, le mobile. Mais pour afficher des données en provenance d'une Web API dans une application ASP.NET, il va falloir écrire pas mal de javascript et oui ... alors allons-y.

Démarrons avec une bonne application de départ, un bon Template, je vous conseille BookService de Mike Wasson qui s'illustre en écrivant la série d'articles suivants :

Using Web API 2 with Entity Framework 6


https://docs.microsoft.com/en-us/aspnet/web-api/overview/data/using-web-api-with-entity-framework/part-1
Voilà, on est en plein dans le vif du sujet, la plus part des sujets sont résolus dans cette série d'articles seulement maintenant, comment aller plus loin. En effet, le CRUD (Create Read Update Delete) n'est pas complet. On ne peut en définitive pas faire grand chose avec cette simple application.

Je vais adapter les codes sources de ce sample pour en faire une Filmothèque, et vous permettre de gérer vos films favoris.

Eviter un premier écueil, le piège du cache

Il ne faut pas oublier le cache de votre navigateur. Pour développer, ici on est en JavaScripts et donc si vous devez modifier les scripts associés à votre projet, comme par exemple le script "app.js" vous devrez supprimer les données du cache de votre navigateur sinon vous restez avec l'ancien script et vous ne verrez pas vos modifications :


JavaScripts de mon application ASP.NET WebAPI
Vous trouverez pour chaque navigateur le moyen de supprimer les données du cache :

Supprimer les données du cache de votre navigateur !
Plus pratique, le raccourcis :

Ctrl + F5 : démarrer et vider le cache
 
Qui démarre le navigateur en supprimant les données du cache.

Gestion des données avec le Package Manager et "Code First Migrations"

Je ne connaissais pas, alors je prends des notes d'un truc assez cool. C'est l'utilisation de "Code First Migrations" avec Entity Framework. C'est à dire d'écrire du code C# pour remplir la BD avec des données en utilisant la fonction Configuration.Seed.

Puis simplement avec les commandes :

PM> Enable-Migrations
PM> Update-Database

Le plus difficile, c'est de trouver comment afficher la Console du Gestionnaire de packages, c'est ici :


Outils->Gestionnaire de packages NuGet->Console du Gestionnaire de package
Dans cet exemple :
On va apprendre à maitriser le script app.js qui est le ViewModel de notre vue sur le service WebAPI
On fera également du bootstrap Framework CSS
On ajoutera un bouton "Delete" pour pouvoir supprimer une entité et ainsi réaliser le CRUD complet.

Architecture de l'application WebAPI

Il s'agit bien entendu d'une architecture MVC (Model View Controller). Avec un contrôleur sécifique dédié aux WebApi.

Model

Le Model est calqué sur la base de donnée grâce à l'utilisation de "Code First". Le modèle peut être modifier dans le code et la base mise à jour.

Le fichier Configuration.cs du répertoire Migrations permet en utilisant la fonction Seed de créer des enregistrements dans la BD.


Utilisation de Code first et création d'éléments dans la Base de Données

Controller

Il s'agit d'une WebAPI le contrôleur dérive donc d'un ApiController

La fonction GetFilm de l'ApiController qui permet de retourner le film demandé par "id" :

GetFilm FilmsController : ApiController

View

La View Index.cshtml est posée sur un ViewModel définit dans le JavaScript app.js que l'on a vu au dessus. C'est à la fois la difficulté et la simplicité de de ce choix d'application.

Simplicité car l'application est fluide et toutes les opérations sur les objets découlent de ce choix d'architecture, difficulté car il faut modifier le JavaScript pour l'adapter au besoin de lapplication.

On va ajouter une table pour nous permettre d'afficher nos données et de les manipuler : afficher la Vue détails de notre objet film.


Ajouter une légende
Et on ajoute un href deleteFilm qui va déclencher la fonction JavaScript :

app.js function deleteFilm

Voici donc le CRUD de mon application FilmService

Démonstration rapide du CRUD par quelques copies d'écrans. Au démarrage de l'application nous avons dans le navigateur la page suivante :


Home/Index
J'ajoute mon film, je choisi comme Author : Cédric clapich, je clique sur le bouton Submit.

Add Film

Le nouveau film apparait dans la liste des Films :


Je peux alors choisir d'afficher les détails du film ou de le supprimer. Je choisis d'afficher les détails en cliquant sur Details :

La partie détails apparait
Je choisis en suite de supprimer ce film, je clique sur Delete.

Suppression du film
Si je reclique sur "Delete" un message "Not Found" apparait...



Voilà, c'est un CRUD avec une Application ASP.NET qui utilise knockout.js pour fabriquer le ViewModel du pattern MVC.

Pour ajouter un film, j'ai utilisé un POST. Il faudrait utiliser un PUT pour effectuer une mise à jour mais l'Update du CRUD peut toujours être vu comme une suppression suivi d'une recréation. Nous avons donc une application complète qui résous quelques petits soucis laissés en suspend par M. Wasson.

Vous êtes intéressé par des détails supplémentaires... n'hésitez pas, faites moi signe, laissez moi un commentaire. Je vous expliquerai la partie qu'il vous manque.

Voilà on vient de débuter un vrai projet d'API REST.

To Be Continued ...

Download Source Code

Je vous livre les sources, je reviendrais les commenter de façon plus approfondi une prochaine fois. A l'intérieur du .zip il y a un petit fichier readme.txt qui vous permet d'installer la BD de l'application.

Download Source Code ASP.NET WebAPI FilmLibrary in C#

Je dois partir faire du "ASP.NET Core" multiplateforme ...

Don't forget to Have fun!

mardi 24 octobre 2017

ASP.NET Web API - Créer une véritable application - #1

Vous souhaitez aller plus loin avec ASP.NET Web API et créer une application complète alors essayons. Ce blog en est bien le reflet, le développement d'applications avec Visual Studio a pris toutes sortes de chemins et au lieu de converger quelque part on a l'impression avec ASP.NET Core que de nouvelles branches s'ouvrent.

Je cherche "Web API" et je dirais que je tombe sur la bonne documentation :



https://docs.microsoft.com/fr-fr/aspnet/web-api/
https://docs.microsoft.com/fr-fr/aspnet/web-api/
Il ne me reste plus qu'à la parcourir ... Pour me rendre compte qu'on l'a déjà fait en partie ici même mais je l'avoue, pour ma part ce n'est pas facile d'appréhender tous ces éléments MVC, Web API, Web Forms, JavaScripts et leur combinatoire, il faut faire les bons choix pour développer une application de base suivant ses besoins.

Je cherche à catégoriser tout cela, voilà l'ensemble des embryons d'applications que je possède :


ASP.NET Différents types d'applications
 Je vais jeter un œil rapide sur la Visual Studio Gallery et je tombe sur un Template qui ressemble d'assez prêt à ce que je veux faire ...


https://visualstudiogallery.msdn.microsoft.com/site/search?f%5B0%5D.Type=RootCategory&f%5B0%5D.Value=templates&f%5B0%5D.Text=Mod%C3%A8les&f%5B1%5D.Type=SubCategory&f%5B1%5D.Value=aspnet&f%5B1%5D.Text=ASP.NET
Visual Studio Gallery ASP.NET Templates Model
Au passage, je vois Angular 4 ... Et moi qui n'en suis qu'à Angular 2 ...

Je clique donc sur Didactic REST API (RSS+WADL) et quand j'essaye de l'installer ...

Echec d'installation VSIX
Pfff ... Ce n'est pas clair, qu'elles sont les versions supportées par cette extension ? Et puis si en fait c'était marqué là :


https://marketplace.visualstudio.com/items?itemName=DEKER.DidacticRESTAPIRSSWADL
Ca devient pénible non ? Vous trouvez pas ? Ce template ne s'utilise qu'avec VS 2010 à 2012 et pourquoi il n'a pas suivi le mouvement ? Son truc est devenu inutile car intégré dans le "main frame" tu imagines le gars qui croit avoir développé le bon truc et quelques temps après, il est déjà obsolète !

Autre question, on est en 2017 alors comment ce truc est encore dans la Visual Studio Gallery ... c'est ce que j'appelle l'enfer du dotnet.

Je m'installe quand même rapidement une "Application web ASP.NET (.NET Framework)" Web API puis et en passant par les NuGets j'installe ce package :



En regardant le contenu des DLLs pour tenter de l'utiliser :



On dirait des trucs Obfusqués, ça ne me plait pas beaucoup, voir pas du tout. Je laisse tomber cette voie.

Conclusion

En regardant d'un peu plus prêt, il semble bien que ce truc est abandonné depuis bien longtemps, je dirais depuis 2012, en regardant le site de l'auteur ... DialectSoftware.

C'est vraiment l'Enfer du DotNET, je jette tout ça dans la POUBELLE, il va falloir passer par un autre chemin.

Do not laugh! It's only software!

lundi 19 juin 2017

ASP.NET MVC & WebAPI + Angular2 - Templates for Visual Studio 2017

Au sujet d'Angular2 et des templates pour Visual Studio, en reprenant ce sujet je suis un peu surpris de constater que l'on tombe à nouveau sur le Pack de Mads Kristensen que j'adore par ailleurs. La fois précédente, j'étais avec Visual Studio 2015 et MVC5, je devais installer tout un tas de trucs :

Visual Studio 2015 Update 3. Note that Update 2 is not enough.
.NET Core 1.0.1
TypeScript 2.0 for Visual Studio 2015.
Node.js version 4 or later.

Maintenant que je suis avec Visual Studio 2017 quel est le Template me propose Mads ? J'ai hâte de le découvrir.

ASP.NET and Angular2

Templates for Visual Studio 2017

Actuellement mon Visual Studio 2017 me propose comme application Web, les templates suivants :

Visual Studio 2017 Templates de base
Application web ASP.NET (.NET Framework)
Application web ASP.NET Core (.NET Core)
Application web ASP.NET Core (.NET Framework)

Visual Studio 2017 Templates
Si je choisie MVC :

Visual Studio 2017 Templates MVC
J'obtiens la structure d'application suivante :
Template pour ASP.NET .NET Framework MVC
Si je choisie WebAPI, j'obtiens la structure d'application suivante :

Template pour ASP.NET .NET Framework WebAPI

Comparaison des Templates MVC et WebAPI

J'en profite au passage pour repérer les grandes différences entre les deux types d'application MVC et WebAPI.

ASP.NET MVC vs ASP.NET WebAPI
Au niveau du fichier Global.asax.cs on notera la différence fondamentale suivante :

Global.asax.cs MVC vs WebAPI

Installation du Pack

Je clique sur le .vsix de Mads : ASP.NET Core Template Pack v1.1.37.vsix
Une petite popup plus loin :
Installation du ASP.NET Core Template Pack
Ben en fait, quedalle, nada, wallou ... il s'agit d'une erreur de ma part je n'ai pas lu assez profondément les prérequis du Template Pack qui ne s'installe qu'avec Visual Studio 2015.

Fin des opérations.
Qu'elle déception !

ASP.NET MVC WebAPI + Angular2 with Visual Studio 2017

Je pensais que l'utilisation de Visual Studio 2017 simplifierait les choses mais pour l'instant pas de Template. Donc, création d'une application de base ASP.NET .NET Framework MVC WebAPI Angular2 "à la mano" :

Fichier->Nouveau->Projet :
Création d'un projet Application Web ASP.NET .NET Framework MVC WebAPI Angular2
Choix du Template de base .NET Framework 4.6.1 :

Application web ASP.NET (.NET Framework)
Choix des options l'application modèle ASP.NET 4.6.1 :

ASP.NET 4.6.1 MVC option WebAPI
Il s'agit maintenant de configurer les packages Angular2 à l'aide de l'outil NPM (Node Package Manager)

Création du fichier package.json dans le projet

On créé un fichier .json nommé package.json  :

Ajouter une légende
Création d'un fichier de package JSon :

package.json pour l'utilçisation de NPM

Contenu du fichier package.json sur GitHub

Je vais chercher le contenu de ce fichier à l'adresse suivante :

https://github.com/angular/quickstart/blob/master/package.json
Je remplis mon nouvel élément .json avec le contenu de ce fichier trouvé sur GitHub :

Contenu du fichier package.json

Restauration des packages Node.js pour Angular2

En cliquant droit sur le fichier package.json->Restaurer les pacakges :

Fonctionnalité de Restauration des packages Nodes sur un fichier package.json
Le résultat de l'exécution de cette commande dans le fenêtre de Sortie : Bower/npm :
Sortie : Bower/npm
Un répertoire node_modules a été créé dans la solution :
Cliquez sur Afficher tous les fichiers :

Répertoire des packages NodeJS

Configuration du SystemJS

Ajout d'un fichier systemjs.config.js dans la solution :

Création du fichier systemjs.config.js
Son contenu se trouve à l'adresse suivante : 

systemjs.config.js

Configuration du TypeScript JSON

Ajouter->Nouvel élement ... tsconfig.json
Son contenu sur GitHub :

Le fichier de Configuration TypeScript sur le site de GitHub
Voilà notre application de base pour Angular2 est maintenant prête, elle s'exécute :

Exécution de l'application ASP.NET .NET Framework MVC WebAPI + Angular2 pour Visual Studio 2017
Je me demande bien pourquoi tout cela n'est pas encore dans un Template, je suppose que maintenant il est facile de démarrer avec Visual Studio 2017 et Angular2, cela intéresse donc moins Mads.

Template MVC WebAPI + Angular2 pour Visual Studio 2017

Supprimer le contenu du répertoire packages qui pèse 52,6 Mo
Supprimer le répertoire node_modules qui pèse 103 Mo

Archivez le tout.

Cliquez sur le lien suivant pour télécharger le projet Visual Studio 2017

Restaurer les NuGets

Pour restaurer votre application de base avec Angular2, il faudra restaurer les packages nugets par :
Bouton droit sur le projet->Gérer les packages NuGet...

Gérer les packages NuGet
Gestionnaire de packages NuGet : ASP.NET Framework MVC WepAPI + Angular2 

Gestionnaire de packages NuGet

Restaurer les packages NodeJS pour Angular2

Sur le fichier de gestion des packages faites Bouton droit->Restaurer les packages :

Restaurations des packages NodeJs pour Angualr2
Voilà, vous êtes enfin prêt à travailler avec ASP.NET en C# modèle MVC & WebAPI + Angular2.

Souriez, j'espère que vous êtes content !

jeudi 1 juin 2017

Setup AngularJS for ASP.NET Core 1.0.1

Vous avez installé les derniers tools pour Visual Studio et vous souhaitez travailler avec AngularJS mais vous vous demandez comment faire ? Alors voici la réponse (évidemment on est toujours avec Visual Studio 2015) :

Premièrement

Installez la bonne plateforme, le bon template :
Set up Angular JS for ASP.NET Core 1.0

Deuxièmement

Suivez attentivement la vidéo :
Building JavaScript apps with Angular
(si vous en avez marre de cette vidéo trop longue, vous pouvez aussi poursuivre la lecture de cet article)

Résultat

Le résultat le voilà ! Vous devez obtenir le résultat suivant :

ASP.NET Core 1.0.1 AngularJS
Je ne dis pas que c'est facile bien au contraire.

Explications

Donc vous êtes d'accord, la question en bas de la vidéo : C'est quoi le template de départ ? Est maintenant résolue ...

En effet cette question est posée dans les commentaires de la vidéo et c'est véritablement la question cruciale, celle qui nous aura pris le plus de temps : Comment installer notre application de base pour travailler avec toute cette pile de logiciels correctement ?

Après toutes ces configurations, la structure de l'application est la suivante :

ASP.NET Core 1.0.1 AngularJS
Le fichier app.js a le contenu suivant :

app.js
J'attire également votre attention sur le fichier de références qui doit être modifié "à la main" :

_references.js
Et enfin le contenu du fichier html que je vous présente ici :

Fichier index.html de la solution

Conclusion sur ASP.NET Core 1.0 and AngularJS

Bon, je suis pas mécontent d'y être arrivé. La difficulté pour moi je me suis légèrement perdu, j'ai tenté de créer un contrôleur avec le bouton droit de la façon suivante :
Ajouter un Controlleur JavaScript
Ajout d'un Contrôleur AndularJS utilisant Scope
Ce qui a eu pour effet de créer un fichier dont le contenu est le suivant :

Contrôleur AndularJS utilisant Scope
J'ai cru que j'avais trouvé un truc, le moyen de créer un contrôleur facilement et rapidement mais ce fut le contraire, ce truc m'a fait perdre du temps ! Le contrôleur ainsi créé ne fonctionne pas avec ce nouveau model d'application. Et oui on fait un pas avant et un pas en arrière.

Sincèrement, vous voulez mon avis ? Je vais vous le donner quand même, il me semble que l'on est un peu revenu en arrière, si si je vous assure, quand il y avait quelques petits malins qui arrivaient avec des scripts persos pour développer au-dessus d'ASPX et qu'on leur disait mais arrête de te faire chi(bip)... avec le JavaScript regarde plutôt AjaxControlToolkit ... Et bien on en est revenu là !

Bref, chacun sa paroisse, aujourd'hui les outils pour écrire des JS sont bien plus évolués comme intellisense et autres, ils permettent d'être un peu efficace même avec Visual Studio mais à quand une chaîne de développement RAD pour Appli Web ?

Have fun !